diff --git a/package-lock.json b/package-lock.json index 2abc03d..8348517 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46,16 +46,16 @@ "msw": "^2.6.0", "msw-storybook-addon": "^2.0.3", "npm-run-all": "^4.1.5", - "postcss": "^8.4.47", - "prettier": "^3.3.3", + "postcss": "^8.4.49", + "prettier": "^3.4.1", "prettier-plugin-organize-imports": "^4.1.0", - "prettier-plugin-packagejson": "^2.5.3", - "prettier-plugin-tailwindcss": "^0.6.8", + "prettier-plugin-packagejson": "^2.5.6", + "prettier-plugin-tailwindcss": "^0.6.9", "read-pkg": "^9.0.1", "release-please": "^16.14.3", "storybook": "8.2.9", - "tailwindcss": "^3.4.14", - "tailwindcss-react-aria-components": "^1.1.6", + "tailwindcss": "^3.4.16", + "tailwindcss-react-aria-components": "^1.2.0", "vite": "^5.4.10", "vite-plugin-dts": "^4.3.0", "vitest": "^2.1.4" @@ -11464,19 +11464,6 @@ "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } }, - "node_modules/dir-glob": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", - "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", - "dev": true, - "license": "MIT", - "dependencies": { - "path-type": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/dlv": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", @@ -12696,6 +12683,21 @@ "walk-up-path": "^3.0.1" } }, + "node_modules/fdir": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz", + "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, "node_modules/fetch-blob": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz", @@ -13364,26 +13366,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/globby": { - "version": "13.2.2", - "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz", - "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==", - "dev": true, - "license": "MIT", - "dependencies": { - "dir-glob": "^3.0.1", - "fast-glob": "^3.3.0", - "ignore": "^5.2.4", - "merge2": "^1.4.1", - "slash": "^4.0.0" - }, - "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -14802,12 +14784,15 @@ } }, "node_modules/lilconfig": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", - "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", "license": "MIT", "engines": { - "node": ">=10" + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" } }, "node_modules/lines-and-columns": { @@ -16743,16 +16728,6 @@ "dev": true, "license": "MIT" }, - "node_modules/path-type": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", - "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/pathe": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz", @@ -17035,18 +17010,6 @@ } } }, - "node_modules/postcss-load-config/node_modules/lilconfig": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz", - "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==", - "license": "MIT", - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/sponsors/antonk52" - } - }, "node_modules/postcss-nested": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", @@ -17102,9 +17065,9 @@ } }, "node_modules/prettier": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", - "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.1.tgz", + "integrity": "sha512-G+YdqtITVZmOJje6QkXQWzl3fSfMxFwm1tjTyo9exhkmWSqC4Yhd1+lug++IlR2mvRVAxEDDWYkQdeSztajqgg==", "dev": true, "license": "MIT", "bin": { @@ -17148,13 +17111,13 @@ } }, "node_modules/prettier-plugin-packagejson": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/prettier-plugin-packagejson/-/prettier-plugin-packagejson-2.5.3.tgz", - "integrity": "sha512-ATMEEXr+ywls1kgrZEWl4SBPEm0uDdyDAjyNzUC0/Z8WZTD3RqbJcQDR+Dau+wYkW9KHK6zqQIsFyfn+9aduWg==", + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/prettier-plugin-packagejson/-/prettier-plugin-packagejson-2.5.6.tgz", + "integrity": "sha512-TY7KiLtyt6Tlf53BEbXUWkN0+TRdHKgIMmtXtDCyHH6yWnZ50Lwq6Vb6lyjapZrhDTXooC4EtlY5iLe1sCgi5w==", "dev": true, "license": "MIT", "dependencies": { - "sort-package-json": "2.10.1", + "sort-package-json": "2.12.0", "synckit": "0.9.2" }, "peerDependencies": { @@ -17167,9 +17130,9 @@ } }, "node_modules/prettier-plugin-tailwindcss": { - "version": "0.6.8", - "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz", - "integrity": "sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==", + "version": "0.6.9", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.9.tgz", + "integrity": "sha512-r0i3uhaZAXYP0At5xGfJH876W3HHGHDp+LCRUJrs57PBeQ6mYHMwr25KH8NPX44F2yGTvdnH7OqCshlQx183Eg==", "dev": true, "license": "MIT", "engines": { @@ -19007,19 +18970,6 @@ "dev": true, "license": "MIT" }, - "node_modules/slash": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", - "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/sort-object-keys": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/sort-object-keys/-/sort-object-keys-1.1.3.tgz", @@ -19028,9 +18978,9 @@ "license": "MIT" }, "node_modules/sort-package-json": { - "version": "2.10.1", - "resolved": "https://registry.npmjs.org/sort-package-json/-/sort-package-json-2.10.1.tgz", - "integrity": "sha512-d76wfhgUuGypKqY72Unm5LFnMpACbdxXsLPcL27pOsSrmVqH3PztFp1uq+Z22suk15h7vXmTesuh2aEjdCqb5w==", + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/sort-package-json/-/sort-package-json-2.12.0.tgz", + "integrity": "sha512-/HrPQAeeLaa+vbAH/znjuhwUluuiM/zL5XX9kop8UpDgjtyWKt43hGDk2vd/TBdDpzIyzIHVUgmYofzYrAQjew==", "dev": true, "license": "MIT", "dependencies": { @@ -19038,10 +18988,10 @@ "detect-newline": "^4.0.0", "get-stdin": "^9.0.0", "git-hooks-list": "^3.0.0", - "globby": "^13.1.2", "is-plain-obj": "^4.1.0", "semver": "^7.6.0", - "sort-object-keys": "^1.1.3" + "sort-object-keys": "^1.1.3", + "tinyglobby": "^0.2.9" }, "bin": { "sort-package-json": "cli.js" @@ -19794,33 +19744,33 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.14", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz", - "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==", + "version": "3.4.16", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz", + "integrity": "sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==", "license": "MIT", "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", - "chokidar": "^3.5.3", + "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "fast-glob": "^3.3.0", + "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.21.0", - "lilconfig": "^2.1.0", - "micromatch": "^4.0.5", + "jiti": "^1.21.6", + "lilconfig": "^3.1.3", + "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", - "picocolors": "^1.0.0", - "postcss": "^8.4.23", + "picocolors": "^1.1.1", + "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", - "postcss-load-config": "^4.0.1", - "postcss-nested": "^6.0.1", - "postcss-selector-parser": "^6.0.11", - "resolve": "^1.22.2", - "sucrase": "^3.32.0" + "postcss-load-config": "^4.0.2", + "postcss-nested": "^6.2.0", + "postcss-selector-parser": "^6.1.2", + "resolve": "^1.22.8", + "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", @@ -19831,9 +19781,9 @@ } }, "node_modules/tailwindcss-react-aria-components": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/tailwindcss-react-aria-components/-/tailwindcss-react-aria-components-1.1.6.tgz", - "integrity": "sha512-w486YWkNi9E/bLZE0xNdy+xkY0MH3PgsI+WLcszLIHdnylDOE5Os0zcVDTRsKmf9KLfHOlNVu2mj4bDNIak9EQ==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tailwindcss-react-aria-components/-/tailwindcss-react-aria-components-1.2.0.tgz", + "integrity": "sha512-ynlQIfAdoWAz0Og0dCe/d4QVE+L8Yuo6rtK9apdhehZZMoLC1GdwtnvLZyUyx+wHwnTjRuNtFPdN0DpPsPXJJg==", "license": "Apache-2.0", "peerDependencies": { "tailwindcss": "*" @@ -20033,6 +19983,20 @@ "dev": true, "license": "MIT" }, + "node_modules/tinyglobby": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz", + "integrity": "sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.4.2", + "picomatch": "^4.0.2" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/tinypool": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.1.tgz", diff --git a/package.json b/package.json index b967b66..4c88458 100644 --- a/package.json +++ b/package.json @@ -29,8 +29,8 @@ "prettier": { "plugins": [ "prettier-plugin-packagejson", - "prettier-plugin-tailwindcss", - "prettier-plugin-organize-imports" + "prettier-plugin-organize-imports", + "prettier-plugin-tailwindcss" ], "semi": true, "singleQuote": true, @@ -112,16 +112,16 @@ "msw": "^2.6.0", "msw-storybook-addon": "^2.0.3", "npm-run-all": "^4.1.5", - "postcss": "^8.4.47", - "prettier": "^3.3.3", + "postcss": "^8.4.49", + "prettier": "^3.4.1", "prettier-plugin-organize-imports": "^4.1.0", - "prettier-plugin-packagejson": "^2.5.3", - "prettier-plugin-tailwindcss": "^0.6.8", + "prettier-plugin-packagejson": "^2.5.6", + "prettier-plugin-tailwindcss": "^0.6.9", "read-pkg": "^9.0.1", "release-please": "^16.14.3", "storybook": "8.2.9", - "tailwindcss": "^3.4.14", - "tailwindcss-react-aria-components": "^1.1.6", + "tailwindcss": "^3.4.16", + "tailwindcss-react-aria-components": "^1.2.0", "vite": "^5.4.10", "vite-plugin-dts": "^4.3.0", "vitest": "^2.1.4" diff --git a/packages/utah-design-system/src/components/Button.stories.tsx b/packages/utah-design-system/src/components/Button.stories.tsx index f4197d8..ea1e06d 100644 --- a/packages/utah-design-system/src/components/Button.stories.tsx +++ b/packages/utah-design-system/src/components/Button.stories.tsx @@ -1,4 +1,5 @@ import type { Meta } from '@storybook/react'; +import { BotIcon } from 'lucide-react'; import { Button as Component } from './Button'; const meta: Meta = { @@ -48,3 +49,10 @@ export const Destructive = { variant: 'destructive', }, }; + +export const Icon = { + args: { + variant: 'icon', + children: , + }, +}; diff --git a/packages/utah-design-system/src/components/Button.tsx b/packages/utah-design-system/src/components/Button.tsx index a5204a8..e1b011d 100644 --- a/packages/utah-design-system/src/components/Button.tsx +++ b/packages/utah-design-system/src/components/Button.tsx @@ -13,17 +13,17 @@ export interface ButtonProps extends RACButtonProps { let button = tv({ extend: focusRing, - base: 'cursor-default border border-black/10 text-center text-sm shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition dark:border-white/10 dark:shadow-none', + base: 'cursor-default border border-black/10 text-center text-sm shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition forced-color-adjust-none dark:border-white/10 dark:shadow-none forced-colors:border-[ButtonBorder] [&:has(svg:only-child)]:min-h-0 [&:has(svg:only-child)]:p-0.5', variants: { variant: { primary: - 'rounded-full bg-primary-900 text-white hover:enabled:bg-primary-700 pressed:bg-primary-800', + 'rounded-full bg-primary-900 text-white hover:bg-primary-700 pressed:bg-primary-800', secondary: - 'rounded-full bg-secondary-800 text-white hover:enabled:bg-secondary-600 pressed:bg-secondary-700', + 'rounded-full bg-secondary-800 text-white hover:bg-secondary-600 pressed:bg-secondary-700', accent: - 'rounded-full bg-accent-500 text-zinc-900 hover:enabled:bg-accent-300 pressed:bg-accent-400', + 'rounded-full bg-accent-500 text-zinc-900 hover:bg-accent-300 pressed:bg-accent-400', destructive: - 'rounded-full bg-rose-700 text-white hover:enabled:bg-rose-800 pressed:bg-rose-900', + 'rounded-full bg-rose-700 text-white hover:bg-rose-800 pressed:bg-rose-900', icon: 'flex items-center justify-center border-0 p-1 text-zinc-900 hover:bg-black/5 pressed:bg-black/10 disabled:bg-transparent dark:text-zinc-300 dark:hover:bg-white/10 dark:pressed:bg-white/20', }, size: { @@ -34,7 +34,7 @@ let button = tv({ extraLarge: 'min-h-[3.125rem] px-10 text-xl', }, isDisabled: { - true: 'border-black/20 bg-zinc-100 text-zinc-500 dark:border-white/20 dark:bg-zinc-500 dark:text-zinc-100', + true: 'border-black/20 bg-zinc-100 text-zinc-500 dark:border-white/20 dark:bg-zinc-500 dark:text-zinc-100 forced-colors:text-[GrayText]', }, }, defaultVariants: { diff --git a/packages/utah-design-system/src/components/Checkbox.tsx b/packages/utah-design-system/src/components/Checkbox.tsx index 020dd15..9774d90 100644 --- a/packages/utah-design-system/src/components/Checkbox.tsx +++ b/packages/utah-design-system/src/components/Checkbox.tsx @@ -38,7 +38,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) { } const checkboxStyles = tv({ - base: 'group flex items-center gap-2 text-sm transition', + base: 'group flex items-center gap-2 text-sm transition pressed:bg-blue-100', variants: { isDisabled: { false: 'text-gray-800 dark:text-zinc-200', diff --git a/packages/utah-design-system/src/components/HomeButton.stories.tsx b/packages/utah-design-system/src/components/HomeButton.stories.tsx index b5e029e..f2d5944 100644 --- a/packages/utah-design-system/src/components/HomeButton.stories.tsx +++ b/packages/utah-design-system/src/components/HomeButton.stories.tsx @@ -47,7 +47,7 @@ export const Example = { <>
{ready && }
diff --git a/packages/utah-design-system/src/components/HomeButton.tsx b/packages/utah-design-system/src/components/HomeButton.tsx index 76a2a5c..444ae77 100644 --- a/packages/utah-design-system/src/components/HomeButton.tsx +++ b/packages/utah-design-system/src/components/HomeButton.tsx @@ -18,16 +18,16 @@ export const HomeButton = ({ return (