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(
"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-focus:-top-3 peer-focus:left-0 peer-focus:text-sm peer-focus:w-auto peer-focus:h-auto",
"flex items-center",
labelClassName
)}

View File

@@ -46,6 +46,7 @@ export default function TextInput({
className={clsx(
"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-focus:-top-3 peer-focus:left-0 peer-focus:text-sm peer-focus:w-auto peer-focus:h-auto",
"flex items-center",
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",
"private": false,
"version": "0.0.6",
"version": "0.0.7",
"type": "module",
"scripts": {
"dev": "vite",
@@ -15,33 +15,33 @@
"versionMajor": "npm version major"
},
"peerDependencies": {
"@headlessui/react": "^2.2.4",
"@headlessui/react": "^2.2.7",
"clsx": "^2.1.1",
"moment": "^2.30.1",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-icons": "^5.5.0"
},
"devDependencies": {
"@eslint/js": "^9.29.0",
"@tanstack/eslint-plugin-router": "^1.121.21",
"@tanstack/router-plugin": "^1.124.0",
"@tanstack/react-router": "^1.124.0",
"@tanstack/react-router-devtools": "^1.124.0",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.5.2",
"@tailwindcss/vite": "^4.1.10",
"@types/node": "^24.0.4",
"eslint": "^9.29.0",
"@eslint/js": "^9.33.0",
"@tailwindcss/vite": "^4.1.11",
"@tanstack/eslint-plugin-router": "^1.131.2",
"@tanstack/react-router": "^1.131.10",
"@tanstack/react-router-devtools": "^1.131.10",
"@tanstack/router-plugin": "^1.131.11",
"@types/node": "^24.2.1",
"@types/react": "^19.1.10",
"@types/react-dom": "^19.1.7",
"@vitejs/plugin-react": "^5.0.0",
"eslint": "^9.33.0",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"globals": "^16.2.0",
"tailwindcss": "^4.1.10",
"typescript": "~5.8.3",
"typescript-eslint": "^8.34.1",
"vite": "^7.0.0",
"globals": "^16.3.0",
"tailwindcss": "^4.1.11",
"typescript": "^5.9.2",
"typescript-eslint": "^8.39.1",
"vite": "^7.1.2",
"vite-plugin-dts": "^4.5.4"
},
"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"
>
<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 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 title="Select">
<SelectInput label={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>