Update component styling

This commit is contained in:
2025-08-13 23:08:38 -04:00
parent 3a76aed09b
commit ddf25232b4
5 changed files with 310 additions and 319 deletions

View File

@@ -49,6 +49,7 @@ export default function TextArea({
className={clsx( className={clsx(
"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default", "absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:cursor-text peer-placeholder-shown:w-[99%]", "peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:cursor-text peer-placeholder-shown:w-[99%]",
"peer-focus:-top-3 peer-focus:left-0 peer-focus:text-sm peer-focus:w-auto peer-focus:h-auto",
"flex items-center", "flex items-center",
labelClassName labelClassName
)} )}

View File

@@ -46,6 +46,7 @@ export default function TextInput({
className={clsx( className={clsx(
"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default", "absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:h-full peer-placeholder-shown:cursor-text peer-placeholder-shown:w-[99%]", "peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:h-full peer-placeholder-shown:cursor-text peer-placeholder-shown:w-[99%]",
"peer-focus:-top-3 peer-focus:left-0 peer-focus:text-sm peer-focus:w-auto peer-focus:h-auto",
"flex items-center", "flex items-center",
labelClassName labelClassName
)} )}

583
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,7 +1,7 @@
{ {
"name": "mattrixwv-components", "name": "mattrixwv-components",
"private": false, "private": false,
"version": "0.0.6", "version": "0.0.7",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
@@ -15,33 +15,33 @@
"versionMajor": "npm version major" "versionMajor": "npm version major"
}, },
"peerDependencies": { "peerDependencies": {
"@headlessui/react": "^2.2.4", "@headlessui/react": "^2.2.7",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"moment": "^2.30.1", "moment": "^2.30.1",
"react": "^19.1.0", "react": "^19.1.1",
"react-dom": "^19.1.0", "react-dom": "^19.1.1",
"react-icons": "^5.5.0" "react-icons": "^5.5.0"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.29.0", "@eslint/js": "^9.33.0",
"@tanstack/eslint-plugin-router": "^1.121.21", "@tailwindcss/vite": "^4.1.11",
"@tanstack/router-plugin": "^1.124.0", "@tanstack/eslint-plugin-router": "^1.131.2",
"@tanstack/react-router": "^1.124.0", "@tanstack/react-router": "^1.131.10",
"@tanstack/react-router-devtools": "^1.124.0", "@tanstack/react-router-devtools": "^1.131.10",
"@types/react": "^19.1.8", "@tanstack/router-plugin": "^1.131.11",
"@types/react-dom": "^19.1.6", "@types/node": "^24.2.1",
"@vitejs/plugin-react": "^4.5.2", "@types/react": "^19.1.10",
"@tailwindcss/vite": "^4.1.10", "@types/react-dom": "^19.1.7",
"@types/node": "^24.0.4", "@vitejs/plugin-react": "^5.0.0",
"eslint": "^9.29.0", "eslint": "^9.33.0",
"eslint-plugin-react": "^7.37.5", "eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20", "eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.2.0", "globals": "^16.3.0",
"tailwindcss": "^4.1.10", "tailwindcss": "^4.1.11",
"typescript": "~5.8.3", "typescript": "^5.9.2",
"typescript-eslint": "^8.34.1", "typescript-eslint": "^8.39.1",
"vite": "^7.0.0", "vite": "^7.1.2",
"vite-plugin-dts": "^4.5.4" "vite-plugin-dts": "^4.5.4"
}, },
"overrides": { "overrides": {

View File

@@ -500,10 +500,10 @@ export function TextContent(){
className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full" className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
> >
<TextDisplay title="Text Input"> <TextDisplay title="Text Input">
<TextInput placeholder="Text Input" labelClassName="bg-(--bg-color)"/> <TextInput placeholder="Text Input" labelClassName="bg-(--bg-color) peer-focus:bg-(--bg-color)"/>
</TextDisplay> </TextDisplay>
<TextDisplay title="Text Area"> <TextDisplay title="Text Area">
<TextArea placeholder="Textarea" className="resize" labelClassName="bg-(--bg-color)"/> <TextArea placeholder="Textarea" className="resize" labelClassName="bg-(--bg-color) peer-focus:bg-(--bg-color)"/>
</TextDisplay> </TextDisplay>
<TextDisplay title="Select"> <TextDisplay title="Select">
<SelectInput label={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}> <SelectInput label={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>