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

package/dist/components/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../lib/components/toast.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport {\n    UNSTABLE_Toast as AriaToast,\n    UNSTABLE_ToastContent as AriaToastContent,\n    UNSTABLE_ToastQueue as AriaToastQueue,\n    UNSTABLE_ToastRegion as AriaToastRegion,\n} from 'react-aria-components';\nimport { flushSync } from 'react-dom';\nimport { classNames } from '../utilities/theme';\nimport { alertVariants } from './alert';\nimport { Button } from './button';\nimport { IcCheck, IcError, IcInfo } from './icons';\n\nexport interface ToastProps {\n    title: string;\n    description?: string;\n    variant: VariantProps<typeof alertVariants>['variant'];\n    action?: () => void;\n    timeout?: number;\n}\n\n/**\n * Toast queue.\n * @returns The toast queue.\n */\nconst queue = new AriaToastQueue<ToastProps>({\n    wrapUpdate(fn) {\n        if ('startViewTransition' in document) {\n            document.startViewTransition(() => {\n                flushSync(fn);\n            });\n        } else {\n            fn();\n        }\n    },\n});\n\n/**\n * Toast provider.\n * @returns The toast provider.\n */\nexport function ToastProvider() {\n    return (\n        <AriaToastRegion queue={queue} className=\"fixed z-50 top-4 right-4 flex flex-col-reverse justify-end gap-2\">\n            {({ toast }) => (\n                <AriaToast style={{ viewTransitionName: toast.key }} toast={toast}>\n                    <AriaToastContent\n                        className={classNames(\n                            alertVariants({ variant: toast.content.variant }),\n                            'flex flex-row items-center gap-3 w-full'\n                        )}\n                    >\n                        <div className=\"shrink-0\">{getToastIcon(toast.content.variant)}</div>\n                        <div className=\"flex-1 min-w-0\">\n                            <p slot=\"title\">{toast.content.title}</p>\n                            {toast.content.description && <p slot=\"description\">{toast.content.description}</p>}\n                        </div>\n                        <Button slot=\"close\" variant=\"neutral\">\n                            Close\n                        </Button>\n                    </AriaToastContent>\n                </AriaToast>\n            )}\n        </AriaToastRegion>\n    );\n}\n\n/**\n * Get the icon for a toast notification.\n * @param variant - The variant of the toast.\n * @returns The icon for the toast.\n */\nfunction getToastIcon(variant: ToastProps['variant']) {\n    switch (variant) {\n        case 'destructive':\n            return <IcError />;\n        case 'success':\n            return <IcCheck />;\n        case 'muted':\n            return <IcInfo />;\n        default:\n            return <IcInfo />;\n    }\n}\n\n/**\n * Show a toast notification.\n * @param title - The title of the toast.\n * @param description - The description of the toast.\n * @param variant - The variant of the toast.\n * @param timeout - The timeout of the toast.\n */\nexport function toast({\n    title,\n    description,\n    variant,\n    timeout,\n}: {\n    title: string;\n    description?: string;\n    variant: ToastProps['variant'];\n    timeout?: number;\n}) {\n    queue.add({ title, description, variant }, { timeout: timeout ?? 2000 });\n}\n"],"names":["queue","AriaToastQueue","fn","flushSync","ToastProvider","AriaToastRegion","toast","jsx","AriaToast","jsxs","AriaToastContent","classNames","alertVariants","Button","getToastIcon","variant","IcError","IcCheck","IcInfo","title","description","timeout"],"mappings":"8eAyBA,MAAMA,EAAQ,IAAIC,EAA2B,CACzC,WAAWC,EAAI,CACP,wBAAyB,SACzB,SAAS,oBAAoB,IAAM,CAC/BC,EAAUD,CAAE,CAChB,CAAC,EAEDA,EAAA,CAER,CACJ,CAAC,EAMM,SAASE,GAAgB,CAC5B,SACKC,EAAA,CAAgB,MAAAL,EAAc,UAAU,mEACpC,SAAA,CAAC,CAAE,MAAAM,CAAAA,IACAC,EAACC,EAAA,CAAU,MAAO,CAAE,mBAAoBF,EAAM,GAAA,EAAO,MAAOA,EACxD,SAAAG,EAACC,EAAA,CACG,UAAWC,EACPC,EAAc,CAAE,QAASN,EAAM,QAAQ,QAAS,EAChD,yCAAA,EAGJ,SAAA,CAAAC,EAAC,OAAI,UAAU,WAAY,WAAaD,EAAM,QAAQ,OAAO,EAAE,EAC/DG,EAAC,MAAA,CAAI,UAAU,iBACX,SAAA,CAAAF,EAAC,KAAE,KAAK,QAAS,SAAAD,EAAM,QAAQ,MAAM,EACpCA,EAAM,QAAQ,aAAeC,EAAC,IAAA,CAAE,KAAK,cAAe,SAAAD,EAAM,QAAQ,WAAA,CAAY,CAAA,EACnF,IACCO,EAAA,CAAO,KAAK,QAAQ,QAAQ,UAAU,SAAA,OAAA,CAEvC,CAAA,CAAA,CAAA,EAER,CAAA,CAER,CAER,CAOA,SAASC,EAAaC,EAAgC,CAClD,OAAQA,EAAA,CACJ,IAAK,cACD,SAAQC,EAAA,EAAQ,EACpB,IAAK,UACD,SAAQC,EAAA,EAAQ,EACpB,IAAK,QACD,SAAQC,EAAA,EAAO,EACnB,QACI,SAAQA,EAAA,EAAO,CAAA,CAE3B,CASO,SAASZ,EAAM,CAClB,MAAAa,EACA,YAAAC,EACA,QAAAL,EACA,QAAAM,CACJ,EAKG,CACCrB,EAAM,IAAI,CAAE,MAAAmB,EAAO,YAAAC,EAAa,QAAAL,CAAA,EAAW,CAAE,QAASM,GAAW,IAAM,CAC3E"}

package/dist/utilities/form.d.ts

@@ -7,7 +7,7 @@ type FieldContextProps = {
  * @param {boolean} disabled - The disabled prop passed to the component
  * @returns The field context with disabled state properly managed
  */
-export declare const useTfFieldContext: <T>({ disabled }: FieldContextProps) => FieldApi<any, string, T, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+export declare function useTfFieldContext<T>({ disabled }: FieldContextProps): FieldApi<any, string, T, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
 /** Utility type to simplify FormApi usage */
 export type AppFormApi<TValues> = FormApi<TValues, any, any, any, any, any, any, any, any, any>;
 /**

package/dist/utilities/form.js

@@ -1,2 +1,2 @@
-import o from"react";import{useFieldContext as r}from"./form-context.js";import"@tanstack/react-form";const l=({disabled:e})=>{const t=r();return o.useEffect(()=>{t.setMeta(n=>({...n,disabled:!!e}))},[e,t]),t};function d(e){return async({formApi:t})=>{const n=i(t.state.values,t);await e({values:n,formApi:t})}}function i(e,t){const n={};for(const s in e)t.getFieldMeta(s)?.disabled||(n[s]=e[s]);return n}function m(e){return e?.state.meta.errors.map(t=>t?.message).join(",")}export{m as getFieldErrorMessage,d as tfOnSubmit,l as useTfFieldContext};
+import o from"react";import{useFieldContext as r}from"./form-context.js";import"@tanstack/react-form";function l({disabled:e}){const t=r();return o.useEffect(()=>{t.setMeta(n=>({...n,disabled:!!e}))},[e,t]),t}function d(e){return async({formApi:t})=>{const n=i(t.state.values,t);await e({values:n,formApi:t})}}function i(e,t){const n={};for(const s in e)t.getFieldMeta(s)?.disabled||(n[s]=e[s]);return n}function m(e){return e?.state.meta.errors.map(t=>t?.message).join(",")}export{m as getFieldErrorMessage,d as tfOnSubmit,l as useTfFieldContext};
 //# sourceMappingURL=form.js.map

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-alpha08",
   "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",
@@ -61,10 +61,9 @@
     "lodash-es": "4.17.21",
     "openapi-fetch": "0.14.0",
     "react": "^19.1.0",
-    "react-aria-components": "1.11.0",
+    "react-aria-components": "1.12.0",
     "react-dom": "^19.1.0",
     "recharts": "2.15.3",
-    "sonner": "1.7.0",
     "tailwindcss": "4.1.12",
     "tw-animate-css": "1.3.0",
     "tw-type-css": "0.0.1",
@@ -72,12 +71,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 +87,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/dist/components/sonner.d.ts

@@ -1,4 +0,0 @@
-import { Toaster as Sonner } from 'sonner';
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-export declare function Toaster({ ...props }: ToasterProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/sonner.js

@@ -1,2 +0,0 @@
-"use client";import{jsx as o}from"react/jsx-runtime";import{Toaster as r}from"sonner";function s({...t}){return o(r,{className:"toaster group",toastOptions:{classNames:{toast:"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border",description:"group-[.toast]:text-muted-foreground",actionButton:"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",cancelButton:"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground"}},...t})}export{s as Toaster};
-//# sourceMappingURL=sonner.js.map

package/dist/components/sonner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sonner.js","sources":["../../lib/components/sonner.tsx"],"sourcesContent":["'use client';\nimport { Toaster as Sonner } from 'sonner';\n\ntype ToasterProps = React.ComponentProps<typeof Sonner>;\n\n// TODO, this doesn't conform to our styles\nexport function Toaster({ ...props }: ToasterProps) {\n    return (\n        <Sonner\n            className=\"toaster group\"\n            toastOptions={{\n                classNames: {\n                    toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border',\n                    description: 'group-[.toast]:text-muted-foreground',\n                    actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',\n                    cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',\n                },\n            }}\n            {...props}\n        />\n    );\n}\n"],"names":["Toaster","props","jsx","Sonner"],"mappings":"sFAMO,SAASA,EAAQ,CAAE,GAAGC,GAAuB,CAChD,OACIC,EAACC,EAAA,CACG,UAAU,gBACV,aAAc,CACV,WAAY,CACR,MAAO,6GACP,YAAa,uCACb,aAAc,mEACd,aAAc,8DAAA,CAClB,EAEH,GAAGF,CAAA,CAAA,CAGhB"}

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;
-    }
-}