@cryptlex/web-components 6.6.6-alpha05 → 6.6.6-alpha07

package/dist/utilities/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../lib/utilities/form.tsx"],"sourcesContent":["import { type AnyFieldMeta, type FieldApi, type FormApi } from '@tanstack/react-form';\nimport React from 'react';\nimport { useFieldContext } from './form-context';\n\ntype FieldContextProps = {\n    disabled?: boolean;\n};\n\n/**\n * Custom hook to handle disabled state for form fields\n * @param {boolean} disabled - The disabled prop passed to the component\n * @returns The field context with disabled state properly managed\n */\nexport const useTfFieldContext = <T,>({ disabled }: FieldContextProps) => {\n    const field = useFieldContext<T>();\n\n    React.useEffect(() => {\n        field.setMeta(meta => ({\n            ...meta,\n            disabled: !!disabled,\n        }));\n    }, [disabled, field]);\n\n    return field;\n};\n\n/** Utility type to simplify FormApi usage */\nexport type AppFormApi<TValues> = FormApi<TValues, any, any, any, any, any, any, any, any, any>;\n\n/**\n * Utility function to submit a form with a handler that receives the values and the formApi.\n * @param onSubmit - The handler function to call with the values and the formApi.\n * @returns A function that can be used to submit the form. It will filter out disabled fields from the values.\n */\nexport function tfOnSubmit<TValues>(\n    onSubmit: ({ values, formApi }: { values: TValues; formApi: AppFormApi<TValues> }) => Promise<any> | any\n) {\n    return async ({ formApi }: { formApi: AppFormApi<TValues> }): Promise<any> => {\n        const values = pickEnabledFields(formApi.state.values, formApi);\n\n        await onSubmit({ values, formApi });\n    };\n}\nfunction pickEnabledFields<TValues>(rawValues: TValues, formApi: AppFormApi<TValues>): TValues {\n    const result: TValues = {} as TValues;\n\n    //TODO: Nested objects are not supported yet\n    for (const key in rawValues) {\n        const meta = formApi.getFieldMeta(key) as AnyFieldMeta & {\n            disabled?: boolean;\n        };\n        if (!meta?.disabled) {\n            result[key] = rawValues[key];\n        }\n    }\n\n    return result;\n}\n\nexport function getFieldErrorMessage(\n    field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>\n): string {\n    return field?.state.meta.errors.map(e => e?.message).join(',');\n}\n"],"names":["useTfFieldContext","disabled","field","useFieldContext","React","meta","tfOnSubmit","onSubmit","formApi","values","pickEnabledFields","rawValues","result","key","getFieldErrorMessage","e"],"mappings":"sGAaO,MAAMA,EAAoB,CAAK,CAAE,SAAAC,KAAkC,CACtE,MAAMC,EAAQC,EAAA,EAEd,OAAAC,EAAM,UAAU,IAAM,CAClBF,EAAM,QAAQG,IAAS,CACnB,GAAGA,EACH,SAAU,CAAC,CAACJ,CAAA,EACd,CACN,EAAG,CAACA,EAAUC,CAAK,CAAC,EAEbA,CACX,EAUO,SAASI,EACZC,EACF,CACE,MAAO,OAAO,CAAE,QAAAC,KAA8D,CAC1E,MAAMC,EAASC,EAAkBF,EAAQ,MAAM,OAAQA,CAAO,EAE9D,MAAMD,EAAS,CAAE,OAAAE,EAAQ,QAAAD,EAAS,CACtC,CACJ,CACA,SAASE,EAA2BC,EAAoBH,EAAuC,CAC3F,MAAMI,EAAkB,CAAA,EAGxB,UAAWC,KAAOF,EACDH,EAAQ,aAAaK,CAAG,GAG1B,WACPD,EAAOC,CAAG,EAAIF,EAAUE,CAAG,GAInC,OAAOD,CACX,CAEO,SAASE,EACZZ,EACM,CACN,OAAOA,GAAO,MAAM,KAAK,OAAO,OAASa,GAAG,OAAO,EAAE,KAAK,GAAG,CACjE"}
+{"version":3,"file":"form.js","sources":["../../lib/utilities/form.tsx"],"sourcesContent":["import { type AnyFieldMeta, type FieldApi, type FormApi } from '@tanstack/react-form';\nimport React from 'react';\nimport { useFieldContext } from './form-context';\n\ntype FieldContextProps = {\n    disabled?: boolean;\n};\n\n/**\n * Custom hook to handle disabled state for form fields\n * @param {boolean} disabled - The disabled prop passed to the component\n * @returns The field context with disabled state properly managed\n */\nexport function useTfFieldContext<T>({ disabled }: FieldContextProps) {\n    const field = useFieldContext<T>();\n\n    React.useEffect(() => {\n        field.setMeta(meta => ({\n            ...meta,\n            disabled: !!disabled,\n        }));\n    }, [disabled, field]);\n\n    return field;\n}\n\n/** Utility type to simplify FormApi usage */\nexport type AppFormApi<TValues> = FormApi<TValues, any, any, any, any, any, any, any, any, any>;\n\n/**\n * Utility function to submit a form with a handler that receives the values and the formApi.\n * @param onSubmit - The handler function to call with the values and the formApi.\n * @returns A function that can be used to submit the form. It will filter out disabled fields from the values.\n */\nexport function tfOnSubmit<TValues>(\n    onSubmit: ({ values, formApi }: { values: TValues; formApi: AppFormApi<TValues> }) => Promise<any> | any\n) {\n    return async ({ formApi }: { formApi: AppFormApi<TValues> }): Promise<any> => {\n        const values = pickEnabledFields(formApi.state.values, formApi);\n\n        await onSubmit({ values, formApi });\n    };\n}\nfunction pickEnabledFields<TValues>(rawValues: TValues, formApi: AppFormApi<TValues>): TValues {\n    const result: TValues = {} as TValues;\n\n    //TODO: Nested objects are not supported yet\n    for (const key in rawValues) {\n        const meta = formApi.getFieldMeta(key) as AnyFieldMeta & {\n            disabled?: boolean;\n        };\n        if (!meta?.disabled) {\n            result[key] = rawValues[key];\n        }\n    }\n\n    return result;\n}\n\nexport function getFieldErrorMessage(\n    field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>\n): string {\n    return field?.state.meta.errors.map(e => e?.message).join(',');\n}\n"],"names":["useTfFieldContext","disabled","field","useFieldContext","React","meta","tfOnSubmit","onSubmit","formApi","values","pickEnabledFields","rawValues","result","key","getFieldErrorMessage","e"],"mappings":"sGAaO,SAASA,EAAqB,CAAE,SAAAC,GAA+B,CAClE,MAAMC,EAAQC,EAAA,EAEd,OAAAC,EAAM,UAAU,IAAM,CAClBF,EAAM,QAAQG,IAAS,CACnB,GAAGA,EACH,SAAU,CAAC,CAACJ,CAAA,EACd,CACN,EAAG,CAACA,EAAUC,CAAK,CAAC,EAEbA,CACX,CAUO,SAASI,EACZC,EACF,CACE,MAAO,OAAO,CAAE,QAAAC,KAA8D,CAC1E,MAAMC,EAASC,EAAkBF,EAAQ,MAAM,OAAQA,CAAO,EAE9D,MAAMD,EAAS,CAAE,OAAAE,EAAQ,QAAAD,EAAS,CACtC,CACJ,CACA,SAASE,EAA2BC,EAAoBH,EAAuC,CAC3F,MAAMI,EAAkB,CAAA,EAGxB,UAAWC,KAAOF,EACDH,EAAQ,aAAaK,CAAG,GAG1B,WACPD,EAAOC,CAAG,EAAIF,EAAUE,CAAG,GAInC,OAAOD,CACX,CAEO,SAASE,EACZZ,EACM,CACN,OAAOA,GAAO,MAAM,KAAK,OAAO,OAASa,GAAG,OAAO,EAAE,KAAK,GAAG,CACjE"}

package/lib/index.css

@@ -1,7 +1,239 @@
 @import 'tailwindcss';
-@import 'tw-animate-css';
 @import './tokens.css';
-@import './theme.css' layer(theme);
+/** https://tailwindcss.com/docs/theme#theme-variable-namespaces */
+@theme inline {
+    /* Radius */
+    --radius-*: initial;
+
+    /* Text Sizes */
+    /* Reset all default text sizes */
+    --text-*: initial;
+
+    /* No shadows needed so far, just don't use them. */
+    --shadow-*: initial;
+
+    /* Colors */
+    --color-*: initial;
+    --color-primary-1: var(--primary-1);
+    --color-primary-2: var(--primary-2);
+    --color-primary-3: var(--primary-3);
+    --color-primary-4: var(--primary-4);
+    --color-primary-5: var(--primary-5);
+    --color-primary-6: var(--primary-6);
+    --color-primary-7: var(--primary-7);
+    --color-primary-8: var(--primary-8);
+    --color-primary-9: var(--primary-9);
+    --color-primary-10: var(--primary-10);
+
+    --color-secondary-1: var(--secondary-1);
+    --color-secondary-2: var(--secondary-2);
+    --color-secondary-3: var(--secondary-3);
+    --color-secondary-4: var(--secondary-4);
+    --color-secondary-5: var(--secondary-5);
+    --color-secondary-6: var(--secondary-6);
+    --color-secondary-7: var(--secondary-7);
+    --color-secondary-8: var(--secondary-8);
+    --color-secondary-9: var(--secondary-9);
+    --color-secondary-10: var(--secondary-10);
+
+    --color-neutral-1: var(--neutral-1);
+    --color-neutral-2: var(--neutral-2);
+    --color-neutral-3: var(--neutral-3);
+    --color-neutral-4: var(--neutral-4);
+    --color-neutral-5: var(--neutral-5);
+    --color-neutral-6: var(--neutral-6);
+    --color-neutral-7: var(--neutral-7);
+    --color-neutral-8: var(--neutral-8);
+    --color-neutral-9: var(--neutral-9);
+    --color-neutral-10: var(--neutral-10);
+
+    --color-destructive-1: var(--destructive-1);
+    --color-destructive-2: var(--destructive-2);
+    --color-destructive-3: var(--destructive-3);
+    --color-destructive-4: var(--destructive-4);
+    --color-destructive-5: var(--destructive-5);
+    --color-destructive-6: var(--destructive-6);
+    --color-destructive-7: var(--destructive-7);
+    --color-destructive-8: var(--destructive-8);
+    --color-destructive-9: var(--destructive-9);
+    --color-destructive-10: var(--destructive-10);
+
+    --color-success-1: var(--success-1);
+    --color-success-2: var(--success-2);
+    --color-success-3: var(--success-3);
+    --color-success-4: var(--success-4);
+    --color-success-5: var(--success-5);
+    --color-success-6: var(--success-6);
+    --color-success-7: var(--success-7);
+    --color-success-8: var(--success-8);
+    --color-success-9: var(--success-9);
+    --color-success-10: var(--success-10);
+
+    --color-background: var(--color-neutral-3);
+    --color-elevation-1: var(--color-neutral-2);
+    --color-elevation-2: var(--color-neutral-1);
+
+    --color-foreground: var(--color-neutral-8);
+    --color-card: var(--color-elevation-1);
+    --color-card-foreground: var(--color-foreground);
+    /* Assuming popovers only show up over cards ??? */
+    --color-popover: var(--color-elevation-2);
+    --color-popover-foreground: var(--color-foreground);
+
+    --color-primary: var(--color-primary-7);
+    --color-primary-foreground: var(--color-primary-2);
+    --color-secondary: var(--color-secondary-7);
+    --color-secondary-foreground: var(--color-secondary-2);
+    --color-muted: var(--color-neutral-7);
+    --color-muted-foreground: var(--color-neutral-4);
+    --color-accent: var(--color-neutral-7);
+    --color-accent-foreground: var(--color-neutral-4);
+    --color-destructive: var(--color-destructive-7);
+    --color-destructive-foreground: var(--color-destructive-2);
+    --color-success: var(--color-success-7);
+    --color-success-foreground: var(--color-success-2);
+
+    --color-border: var(--color-neutral-4);
+    --color-input: var(--color-border);
+    --color-ring: var(--color-neutral-5);
+
+    --color-chart-1: var(--color-primary-5);
+    --color-chart-2: var(--color-primary-4);
+    --color-chart-3: var(--color-secondary-5);
+    --color-chart-4: var(--color-secondary-4);
+    --color-chart-5: var(--color-secondary-2);
+
+    --color-sidebar-background: var(--color-elevation-1);
+    --color-sidebar-foreground: var(--color-foreground);
+
+    --spacing-input: --spacing(8);
+    --spacing-icon: --spacing(4);
+    --spacing-table: --spacing(100);
+
+    --sidebar-width: var(--container-3xs);
+    --sidebar-width-mobile: var(--container-2xs);
+    --sidebar-width-icon: --spacing(12);
+
+    /* Header nav */
+    --spacing-header: --spacing(12);
+    /* Helper for using sidebar with header */
+    --spacing-sidebar: calc(100svh - var(--spacing-header));
+
+    /* Minimum length for fluid grid containers */
+    --fluid-grid-min: var(--container-3xs);
+}
+
+@import 'tw-animate-css';
 @import 'tw-type-css';
-@import './utilities.css';
-@import './base.css';
+
+@utility link {
+    @apply text-primary/70 focus:text-primary hover:text-primary;
+}
+
+/* Fluid grid with minimum width */
+@utility grid-fluid {
+    @apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-icon;
+}
+
+@utility focus-ring {
+    @apply data-[focus-visible]:outline-none focus-visible:outline-none data-[focus-visible]:ring-1 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 focus-visible:outline-hidden focus-visible:ring-offset-2 focus-visible:ring-1 focus-visible:ring-ring;
+}
+
+@utility disabled-muted {
+    @apply disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-70;
+}
+@utility input {
+    @apply border border-input bg-popover px-icon py-2 body-sm placeholder:text-muted-foreground disabled-muted focus-ring;
+}
+
+/* A base set of classes for elements that can be clicked */
+@utility btn {
+    @apply inline-flex gap-1 data-[disabled]:pointer-events-none text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors cursor-pointer ring-offset-background [&_svg:not([class*='size-'])]:size-icon shrink-0 [&_svg]:shrink-0 leading-none outline-none no-underline whitespace-nowrap select-none disabled-muted focus-ring;
+}
+
+@utility btn-link {
+    @apply btn-ghost underline underline-offset-2;
+}
+@utility btn-primary {
+    @apply border border-primary text-primary bg-primary/10 hover:bg-primary/20 data-[hovered]:bg-primary/20 focus:bg-primary/20 data-[focused]:bg-primary/20;
+}
+@utility btn-destructive {
+    @apply border border-destructive text-destructive bg-destructive/10 hover:bg-destructive/20 data-[hovered]:bg-destructive/20 focus:bg-destructive/20 data-[focused]:bg-destructive/20;
+}
+@utility btn-neutral {
+    @apply border border-input text-accent bg-accent/10 hover:bg-accent/20 data-[hovered]:bg-accent/20 focus:bg-accent/20 data-[focused]:bg-accent/20;
+}
+@utility btn-secondary {
+    @apply border border-secondary text-secondary bg-secondary/10 hover:bg-secondary/20 data-[hovered]:bg-secondary/20 focus:bg-secondary/20 data-[focused]:bg-secondary/20;
+}
+@utility btn-ghost {
+    @apply bg-transparent focus:bg-accent/20 data-[focused]:bg-accent/20 hover:bg-accent/20 data-[hovered]:bg-accent/20;
+}
+@utility btn-tab {
+    @apply truncate btn btn-ghost input-dim font-normal text-accent justify-start data-[selected=true]:bg-primary/20 data-[selected=true]:font-medium data-[selected=true]:text-primary;
+}
+/* Dimensions for a standard input */
+@utility input-dim {
+    @apply h-input px-icon py-2 body-sm leading-none;
+}
+
+@utility form-column {
+    @apply flex flex-col gap-input;
+}
+
+@utility form-field {
+    @apply flex flex-col gap-1;
+}
+
+@utility steps {
+    @apply ps-0;
+    > ol {
+        counter-reset: steps-counter;
+        @apply list-none ps-0;
+    }
+
+    > ol > li {
+        counter-increment: steps-counter;
+        @apply relative ps-input pb-2 min-h-12 list-none;
+    }
+    > ol > li + li {
+        @apply mt-0;
+    }
+    > ol > li::before {
+        content: counter(steps-counter);
+        @apply absolute top-0 start-0 size-icon leading-icon bg-accent text-accent-foreground body-sm font-semibold text-center rounded-full;
+    }
+    > ol > li::after {
+        content: '';
+        @apply absolute bg-border w-[1px] top-5 h-1/2 left-2 py-1;
+    }
+    > ol > li:last-child::after {
+        @apply content-none;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+
+    .tw-prose a {
+        @apply link;
+    }
+
+    *::-webkit-scrollbar {
+        @apply size-2;
+    }
+
+    *::-webkit-scrollbar-track {
+        @apply bg-card rounded-none;
+    }
+
+    *::-webkit-scrollbar-thumb {
+        @apply bg-foreground/70 hover:bg-foreground;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.6.6-alpha05",
+  "version": "6.6.6-alpha07",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -49,7 +49,7 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@internationalized/date": "3.8.2",
+    "@internationalized/date": "3.9.0",
     "@tanstack/react-form": "1.6.3",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-table": "8.20.5",
@@ -72,12 +72,13 @@
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "16.0.1",
-    "@storybook/addon-a11y": "9.1.3",
-    "@storybook/addon-docs": "9.1.3",
-    "@storybook/addon-links": "9.1.3",
-    "@storybook/addon-onboarding": "9.1.3",
-    "@storybook/addon-vitest": "9.1.3",
-    "@storybook/react-vite": "9.1.3",
+    "@storybook/addon-a11y": "9.1.4",
+    "@storybook/addon-docs": "9.1.4",
+    "@storybook/addon-links": "9.1.4",
+    "@storybook/addon-onboarding": "9.1.4",
+    "@storybook/addon-vitest": "9.1.4",
+    "@storybook/react-vite": "9.1.4",
+    "@tailwindcss/cli": "4.1.12",
     "@tailwindcss/vite": "4.1.12",
     "@types/node": "^22.7.8",
     "@types/react": "^19.1.0",
@@ -87,22 +88,20 @@
     "@vitest/coverage-v8": "^3.2.4",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.4",
-    "lucide-react": "0.453.0",
+    "lucide-react": "0.541.0",
     "playwright": "^1.55.0",
     "prettier": "3.6.2",
     "rollup-preserve-directives": "1.1.3",
-    "sass": "1.80.6",
-    "storybook": "9.1.3",
-    "typescript": "5.8.3",
-    "typescript-eslint": "8.38.0",
-    "vite": "7.0.6",
+    "sass": "1.89.2",
+    "storybook": "9.1.4",
+    "typescript": "5.9.2",
+    "vite": "7.1.4",
     "vite-plugin-dts": "4.5.4",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "^3.2.4"
   },
   "scripts": {
     "build": "tsc && vite build",
-    "lint": "eslint .",
     "storybook": "storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",
     "build:tokens": "sass --no-source-map ./lib/tokens.scss ./lib/tokens.css",

package/lib/base.css

@@ -1,25 +0,0 @@
-@layer base {
-    * {
-        @apply border-border outline-ring/50;
-    }
-
-    body {
-        @apply bg-background text-foreground;
-    }
-
-    .tw-prose a {
-        @apply link;
-    }
-
-    *::-webkit-scrollbar {
-        @apply size-2;
-    }
-
-    *::-webkit-scrollbar-track {
-        @apply bg-card rounded-none;
-    }
-
-    *::-webkit-scrollbar-thumb {
-        @apply bg-foreground/70 hover:bg-foreground;
-    }
-}

package/lib/theme.css

@@ -1,122 +0,0 @@
-/** https://tailwindcss.com/docs/theme#theme-variable-namespaces */
-@theme {
-    /* Radius */
-    --radius-*: initial;
-
-    /* Text Sizes */
-    /* Reset all default text sizes */
-    --text-*: initial;
-
-    /* No shadows needed so far, just don't use them. */
-    --shadow-*: initial;
-
-    /* Colors */
-    --color-*: initial;
-    --color-primary-1: var(--primary-1);
-    --color-primary-2: var(--primary-2);
-    --color-primary-3: var(--primary-3);
-    --color-primary-4: var(--primary-4);
-    --color-primary-5: var(--primary-5);
-    --color-primary-6: var(--primary-6);
-    --color-primary-7: var(--primary-7);
-    --color-primary-8: var(--primary-8);
-    --color-primary-9: var(--primary-9);
-    --color-primary-10: var(--primary-10);
-
-    --color-secondary-1: var(--secondary-1);
-    --color-secondary-2: var(--secondary-2);
-    --color-secondary-3: var(--secondary-3);
-    --color-secondary-4: var(--secondary-4);
-    --color-secondary-5: var(--secondary-5);
-    --color-secondary-6: var(--secondary-6);
-    --color-secondary-7: var(--secondary-7);
-    --color-secondary-8: var(--secondary-8);
-    --color-secondary-9: var(--secondary-9);
-    --color-secondary-10: var(--secondary-10);
-
-    --color-neutral-1: var(--neutral-1);
-    --color-neutral-2: var(--neutral-2);
-    --color-neutral-3: var(--neutral-3);
-    --color-neutral-4: var(--neutral-4);
-    --color-neutral-5: var(--neutral-5);
-    --color-neutral-6: var(--neutral-6);
-    --color-neutral-7: var(--neutral-7);
-    --color-neutral-8: var(--neutral-8);
-    --color-neutral-9: var(--neutral-9);
-    --color-neutral-10: var(--neutral-10);
-
-    --color-destructive-1: var(--destructive-1);
-    --color-destructive-2: var(--destructive-2);
-    --color-destructive-3: var(--destructive-3);
-    --color-destructive-4: var(--destructive-4);
-    --color-destructive-5: var(--destructive-5);
-    --color-destructive-6: var(--destructive-6);
-    --color-destructive-7: var(--destructive-7);
-    --color-destructive-8: var(--destructive-8);
-    --color-destructive-9: var(--destructive-9);
-    --color-destructive-10: var(--destructive-10);
-
-    --color-success-1: var(--success-1);
-    --color-success-2: var(--success-2);
-    --color-success-3: var(--success-3);
-    --color-success-4: var(--success-4);
-    --color-success-5: var(--success-5);
-    --color-success-6: var(--success-6);
-    --color-success-7: var(--success-7);
-    --color-success-8: var(--success-8);
-    --color-success-9: var(--success-9);
-    --color-success-10: var(--success-10);
-
-    --color-background: var(--color-neutral-3);
-    --color-elevation-1: var(--color-neutral-2);
-    --color-elevation-2: var(--color-neutral-1);
-
-    --color-foreground: var(--color-neutral-8);
-    --color-card: var(--color-elevation-1);
-    --color-card-foreground: var(--color-foreground);
-    /* Assuming popovers only show up over cards ??? */
-    --color-popover: var(--color-elevation-2);
-    --color-popover-foreground: var(--color-foreground);
-
-    --color-primary: var(--color-primary-7);
-    --color-primary-foreground: var(--color-primary-2);
-    --color-secondary: var(--color-secondary-7);
-    --color-secondary-foreground: var(--color-secondary-2);
-    --color-muted: var(--color-neutral-7);
-    --color-muted-foreground: var(--color-neutral-4);
-    --color-accent: var(--color-neutral-7);
-    --color-accent-foreground: var(--color-neutral-4);
-    --color-destructive: var(--color-destructive-7);
-    --color-destructive-foreground: var(--color-destructive-2);
-    --color-success: var(--color-success-7);
-    --color-success-foreground: var(--color-success-2);
-
-    --color-border: var(--color-neutral-4);
-    --color-input: var(--color-border);
-    --color-ring: var(--color-neutral-5);
-
-    --color-chart-1: var(--color-primary-5);
-    --color-chart-2: var(--color-primary-4);
-    --color-chart-3: var(--color-secondary-5);
-    --color-chart-4: var(--color-secondary-4);
-    --color-chart-5: var(--color-secondary-2);
-
-    --color-sidebar-background: var(--color-elevation-1);
-    --color-sidebar-foreground: var(--color-foreground);
-
-    --spacing-input: calc(var(--spacing) * 8);
-    --spacing-icon: calc(var(--spacing-input) / 2);
-    --spacing-table: calc(var(--spacing) * 100);
-
-    --sidebar-width: var(--container-3xs);
-    --sidebar-width-mobile: var(--container-2xs);
-    --sidebar-width-icon: var(--spacing(12));
-
-    /* Header nav */
-    --spacing-header: calc(var(--spacing) * 12);
-    /* Helper for using sidebar with header */
-    --spacing-sidebar: calc(100svh - var(--spacing-header));
-
-    /* Minimum length for fluid grid containers */
-    --fluid-grid-min: var(--container-3xs);
-}

package/lib/utilities.css

@@ -1,85 +0,0 @@
-@utility link {
-    @apply text-primary/70 focus:text-primary hover:text-primary;
-}
-
-/* Fluid grid with minimum width */
-@utility grid-fluid {
-    @apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-icon;
-}
-
-@utility focus-ring {
-    @apply data-[focus-visible]:outline-none focus-visible:outline-none data-[focus-visible]:ring-1 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 focus-visible:outline-hidden focus-visible:ring-offset-2 focus-visible:ring-1 focus-visible:ring-ring;
-}
-
-@utility disabled-muted {
-    @apply disabled:cursor-not-allowed disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:opacity-70 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-70;
-}
-@utility input {
-    @apply border border-input bg-popover px-icon py-2 body-sm placeholder:text-muted-foreground disabled-muted focus-ring;
-}
-
-/* A base set of classes for elements that can be clicked */
-@utility btn {
-    @apply inline-flex gap-1 data-[disabled]:pointer-events-none text-ellipsis overflow-hidden items-center justify-center font-medium transition-colors cursor-pointer ring-offset-background [&_svg:not([class*='size-'])]:size-icon shrink-0 [&_svg]:shrink-0 leading-none outline-none no-underline whitespace-nowrap select-none disabled-muted focus-ring;
-}
-
-@utility btn-link {
-    @apply btn-ghost underline underline-offset-2;
-}
-@utility btn-primary {
-    @apply border border-primary text-primary bg-primary/10 hover:bg-primary/20 data-[hovered]:bg-primary/20 focus:bg-primary/20 data-[focused]:bg-primary/20;
-}
-@utility btn-destructive {
-    @apply border border-destructive text-destructive bg-destructive/10 hover:bg-destructive/20 data-[hovered]:bg-destructive/20 focus:bg-destructive/20 data-[focused]:bg-destructive/20;
-}
-@utility btn-neutral {
-    @apply border border-input text-accent bg-accent/10 hover:bg-accent/20 data-[hovered]:bg-accent/20 focus:bg-accent/20 data-[focused]:bg-accent/20;
-}
-@utility btn-secondary {
-    @apply border border-secondary text-secondary bg-secondary/10 hover:bg-secondary/20 data-[hovered]:bg-secondary/20 focus:bg-secondary/20 data-[focused]:bg-secondary/20;
-}
-@utility btn-ghost {
-    @apply bg-transparent focus:bg-accent/20 data-[focused]:bg-accent/20 hover:bg-accent/20 data-[hovered]:bg-accent/20;
-}
-@utility btn-tab {
-    @apply truncate btn btn-ghost input-dim font-normal text-accent justify-start data-[selected=true]:bg-primary/20 data-[selected=true]:font-medium data-[selected=true]:text-primary;
-}
-/* Dimensions for a standard input */
-@utility input-dim {
-    @apply h-input px-icon py-2 body-sm leading-none;
-}
-
-@utility form-column {
-    @apply flex flex-col gap-input;
-}
-
-@utility form-field {
-    @apply flex flex-col gap-1;
-}
-
-@utility steps {
-    @apply ps-0;
-    > ol {
-        counter-reset: steps-counter;
-        @apply list-none ps-0;
-    }
-
-    > ol > li {
-        counter-increment: steps-counter;
-        @apply relative ps-input pb-2 min-h-12 list-none;
-    }
-    > ol > li + li {
-        @apply mt-0;
-    }
-    > ol > li::before {
-        content: counter(steps-counter);
-        @apply absolute top-0 start-0 size-icon leading-icon bg-accent text-accent-foreground body-sm font-semibold text-center rounded-full;
-    }
-    > ol > li::after {
-        content: '';
-        @apply absolute bg-border w-[1px] top-5 h-1/2 left-2 py-1;
-    }
-    > ol > li:last-child::after {
-        @apply content-none;
-    }
-}