@cryptlex/web-components 6.6.6-alpha80 → 6.6.6-alpha82

package/dist/components/form.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as a,Fragment as d,jsx as n}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{Group as u,composeRenderProps as m,Label as f,Text as p,Button as g}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import{IcInfo as b,IcError as x}from"./icons.js";import"clsx";import"react";const h=l(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function F({className:t,...e}){return n(f,{className:i(h(),t),...e})}function N({className:t,children:e,...r}){return a(p,{className:i("body-sm text-muted leading-tight",t),...r,slot:"description",children:[e,n(b,{className:"inline size-2 align-text-top ms-0.5"})]})}function v({className:t,children:e,...r}){return a("label",{role:"alert",className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in",t),...r,children:[e,n(x,{className:"inline size-2 align-text-top ms-0.5"})]})}const y=l("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-elevation-2 input-dim ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function S({className:t,variant:e,...r}){return n(u,{className:m(t,o=>i(y({variant:e}),o)),...r})}function V({label:t,description:e,errorMessage:r,children:o,requiredIndicator:c,htmlFor:s}){return a(d,{children:[t&&a(F,{htmlFor:s,children:[t,c&&n("sup",{className:"text-destructive",children:"*"})]}),o,e&&n(N,{children:e}),r&&n(v,{htmlFor:s,children:r})]})}function B({className:t,...e}){return n(g,{className:m(t,r=>i("btn btn-ghost h-input px-2 -me-2",r)),...e})}function D({className:t,onSubmit:e,...r}){return n("form",{className:i(t),onSubmit:o=>{o.preventDefault(),e?.(o)},...r})}function E({className:t,...e}){return n("section",{className:i("flex flex-col gap-input py-icon pb-input",t),...e})}function T({className:t,...e}){return n("h2",{className:i("heading-3",t),...e})}function A({className:t,...e}){return n("nav",{className:i("flex items-center justify-end h-header bg-background sticky bottom-0 z-50 py-icon px-input border-t",t),...e})}function P({className:t,...e}){return n("div",{className:"grid grid-cols-1 gap-input mt-icon my-header max-w-3xl",...e})}export{S as FieldGroup,D as Form,A as FormActionFooter,V as FormField,B as FormFieldButton,N as FormFieldDescription,v as FormFieldError,F as FormFieldLabel,P as FormLayout,E as FormSection,T as FormSectionTitle,y as fieldGroupVariants,h as labelVariants};
+"use client";import{jsxs as a,Fragment as u,jsx as n}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{Group as d,composeRenderProps as m,Label as f,Text as p,Button as g}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import{IcInfo as b,IcError as x}from"./icons.js";import"clsx";import"react";const h=l(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function F({className:t,...e}){return n(f,{className:i(h(),t),...e})}function v({className:t,children:e,...r}){return a(p,{className:i("body-sm text-muted leading-tight",t),...r,slot:"description",children:[e,n(b,{className:"inline size-2 align-text-top ms-0.5"})]})}function N({className:t,children:e,...r}){return a("label",{role:"alert",className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in",t),...r,children:[e,n(x,{className:"inline size-2 align-text-top ms-0.5"})]})}const y=l("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-elevation-2 input-dim ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function L({className:t,variant:e,...r}){return n(d,{className:m(t,o=>i(y({variant:e}),o)),...r})}function S({label:t,description:e,errorMessage:r,children:o,requiredIndicator:c,htmlFor:s}){return a(u,{children:[t&&a(F,{htmlFor:s,children:[t,c&&n("sup",{className:"text-destructive",children:"*"})]}),o,e&&n(v,{children:e}),r&&n(N,{htmlFor:s,children:r})]})}function V({className:t,...e}){return n(g,{className:m(t,r=>i("btn btn-ghost h-input px-2 -me-2",r)),...e})}function B({className:t,onSubmit:e,...r}){return n("form",{className:i(t),onSubmit:o=>{o.preventDefault(),document?.activeElement?.blur(),e?.(o)},...r})}function D({className:t,...e}){return n("section",{className:i("flex flex-col gap-input py-icon pb-input",t),...e})}function T({className:t,...e}){return n("h2",{className:i("heading-3",t),...e})}function A({className:t,...e}){return n("nav",{className:i("flex items-center justify-end h-header bg-background sticky bottom-0 z-50 py-icon px-input border-t",t),...e})}function P({className:t,...e}){return n("div",{className:"grid grid-cols-1 gap-input mt-icon my-header max-w-3xl",...e})}export{L as FieldGroup,B as Form,A as FormActionFooter,S as FormField,V as FormFieldButton,v as FormFieldDescription,N as FormFieldError,F as FormFieldLabel,P as FormLayout,D as FormSection,T as FormSectionTitle,y as fieldGroupVariants,h as labelVariants};
 //# sourceMappingURL=form.js.map

package/dist/components/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../lib/components/form.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Button as AriaButton,\n    ButtonProps as AriaButtonProps,\n    Group as AriaGroup,\n    GroupProps as AriaGroupProps,\n    Label as AriaLabel,\n    LabelProps as AriaLabelProps,\n    Text as AriaText,\n    TextProps as AriaTextProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { IcError, IcInfo } from './icons';\n\n/**\n * Class variance authority variants for form field labels.\n * Provides styling for different states including disabled and invalid.\n */\nexport const labelVariants = cva([\n    'select-none body-sm font-medium leading-none',\n    /* Disabled */\n    'disabled-muted',\n    /* Invalid */\n    'group-data-[invalid]:text-destructive',\n]);\n\n/**\n * A form field label component that extends React Aria's Label component.\n * Applies consistent styling for form labels including disabled and invalid states.\n *\n * @param className - Optional additional CSS classes to apply\n * @param props - All other props from AriaLabelProps\n * @returns A styled label element\n */\nexport function FormFieldLabel({ className, ...props }: AriaLabelProps) {\n    return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\n/**\n * A form field description component that provides additional context or help text.\n * Automatically includes an info icon and uses the \"description\" slot for accessibility.\n */\nexport function FormFieldDescription({ className, children, ...props }: AriaTextProps) {\n    return (\n        <AriaText className={classNames('body-sm text-muted leading-tight', className)} {...props} slot=\"description\">\n            {children}\n            <IcInfo className=\"inline size-2 align-text-top ms-0.5\" />\n        </AriaText>\n    );\n}\n/**\n * A form field error component that displays validation error messages.\n *\n * @remarks\n * Currently uses a div instead of AriaFieldError to avoid overlap with Tanstack Form.\n * This approach needs further discussion and exploration.\n *\n */\nexport function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'label'>) {\n    return (\n        <label\n            role=\"alert\"\n            className={classNames(\n                'body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in',\n                className\n            )}\n            {...props}\n        >\n            {children}\n            <IcError className=\"inline size-2 align-text-top ms-0.5\" />\n        </label>\n    );\n}\n\n/**\n * Class variance authority variants for field groups.\n * Provides styling variants for different types of form field containers.\n */\nexport const fieldGroupVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'relative flex w-full items-center overflow-hidden border border-input bg-elevation-2 input-dim ring-offset-background placeholder:text-muted-foreground',\n                /* Focus Within */\n                'focus-ring',\n                /* Disabled */\n                'disabled-muted',\n            ],\n            ghost: '',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n    },\n});\n\n/**\n * Props interface for FieldGroup component.\n * Extends AriaGroupProps with variant styling options.\n */\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\n\n/**\n * A field group component that wraps form inputs with consistent styling.\n * Supports different variants for various use cases.\n */\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n    return (\n        <AriaGroup\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Props for the FormField component.\n * Defines the structure for form field configuration.\n */\nexport type FormFieldProps = {\n    /** Optional label text for the form field */\n    label?: React.ReactNode;\n    /** Optional description or help text */\n    description?: React.ReactNode;\n    /** Optional error message to display */\n    errorMessage?: string;\n    /** Show required indicator on field label */\n    requiredIndicator?: boolean;\n    /** Not defining the htmlFor on labels will lead to accessibilty warnings */\n    htmlFor?: string;\n};\n\n/**\n * A wrapper component for form fields that provides consistent layout and styling.\n * Automatically renders label, children, description, and error message in the correct order.\n * @returns A complete form field with all associated elements\n */\nexport function FormField({\n    label,\n    description,\n    errorMessage,\n    children,\n    requiredIndicator,\n    htmlFor,\n}: FormFieldProps & {\n    children: React.ReactNode;\n}) {\n    return (\n        <>\n            {label && (\n                <FormFieldLabel htmlFor={htmlFor}>\n                    {label}\n                    {requiredIndicator && <sup className=\"text-destructive\">*</sup>}\n                </FormFieldLabel>\n            )}\n            {children}\n            {description && <FormFieldDescription>{description}</FormFieldDescription>}\n            {errorMessage && <FormFieldError htmlFor={htmlFor}>{errorMessage}</FormFieldError>}\n        </>\n    );\n}\n\n/**\n * A button component designed to be used within form fields.\n * Styled to fit nicely alongside form inputs with ghost styling.\n */\nexport function FormFieldButton({ className, ...props }: AriaButtonProps) {\n    return (\n        <AriaButton\n            className={composeRenderProps(className, className =>\n                classNames('btn btn-ghost h-input px-2 -me-2', className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * A form component that prevents default form submission and handles submit events.\n * All forms in this application are controlled components, not pure HTML forms.\n */\nexport function Form({ className, onSubmit, ...props }: React.ComponentProps<'form'>) {\n    return (\n        <form\n            className={classNames(className)}\n            onSubmit={e => {\n                // None of the forms in our applications are pure HTML forms.\n                e.preventDefault();\n                // If onSubmit is provided, call it.\n                onSubmit?.(e);\n            }}\n            {...props}\n        />\n    );\n}\n\n/**\n * A section component for organizing form content into logical groups.\n * Provides consistent spacing and visual separation between form sections.\n */\nexport function FormSection({ className, ...props }: React.ComponentProps<'section'>) {\n    return <section className={classNames('flex flex-col gap-input py-icon pb-input', className)} {...props} />;\n}\n\n/**\n * A title component for form sections.\n */\nexport function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n    return <h2 className={classNames('heading-3', className)} {...props} />;\n}\n\nexport function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>) {\n    return (\n        <nav\n            className={classNames(\n                'flex items-center justify-end h-header bg-background sticky bottom-0 z-50 py-icon px-input border-t',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function FormLayout({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={'grid grid-cols-1 gap-input mt-icon my-header max-w-3xl'} {...props} />;\n}\n"],"names":["labelVariants","cva","FormFieldLabel","className","props","jsx","AriaLabel","classNames","FormFieldDescription","children","jsxs","AriaText","IcInfo","FormFieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","requiredIndicator","htmlFor","Fragment","FormFieldButton","AriaButton","Form","onSubmit","e","FormSection","FormSectionTitle","FormActionFooter","FormLayout"],"mappings":"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"}
+{"version":3,"file":"form.js","sources":["../../lib/components/form.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Button as AriaButton,\n    ButtonProps as AriaButtonProps,\n    Group as AriaGroup,\n    GroupProps as AriaGroupProps,\n    Label as AriaLabel,\n    LabelProps as AriaLabelProps,\n    Text as AriaText,\n    TextProps as AriaTextProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { IcError, IcInfo } from './icons';\n\n/**\n * Class variance authority variants for form field labels.\n * Provides styling for different states including disabled and invalid.\n */\nexport const labelVariants = cva([\n    'select-none body-sm font-medium leading-none',\n    /* Disabled */\n    'disabled-muted',\n    /* Invalid */\n    'group-data-[invalid]:text-destructive',\n]);\n\n/**\n * A form field label component that extends React Aria's Label component.\n * Applies consistent styling for form labels including disabled and invalid states.\n *\n * @param className - Optional additional CSS classes to apply\n * @param props - All other props from AriaLabelProps\n * @returns A styled label element\n */\nexport function FormFieldLabel({ className, ...props }: AriaLabelProps) {\n    return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\n/**\n * A form field description component that provides additional context or help text.\n * Automatically includes an info icon and uses the \"description\" slot for accessibility.\n */\nexport function FormFieldDescription({ className, children, ...props }: AriaTextProps) {\n    return (\n        <AriaText className={classNames('body-sm text-muted leading-tight', className)} {...props} slot=\"description\">\n            {children}\n            <IcInfo className=\"inline size-2 align-text-top ms-0.5\" />\n        </AriaText>\n    );\n}\n/**\n * A form field error component that displays validation error messages.\n *\n * @remarks\n * Currently uses a div instead of AriaFieldError to avoid overlap with Tanstack Form.\n * This approach needs further discussion and exploration.\n *\n */\nexport function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'label'>) {\n    return (\n        <label\n            role=\"alert\"\n            className={classNames(\n                'body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in',\n                className\n            )}\n            {...props}\n        >\n            {children}\n            <IcError className=\"inline size-2 align-text-top ms-0.5\" />\n        </label>\n    );\n}\n\n/**\n * Class variance authority variants for field groups.\n * Provides styling variants for different types of form field containers.\n */\nexport const fieldGroupVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'relative flex w-full items-center overflow-hidden border border-input bg-elevation-2 input-dim ring-offset-background placeholder:text-muted-foreground',\n                /* Focus Within */\n                'focus-ring',\n                /* Disabled */\n                'disabled-muted',\n            ],\n            ghost: '',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n    },\n});\n\n/**\n * Props interface for FieldGroup component.\n * Extends AriaGroupProps with variant styling options.\n */\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\n\n/**\n * A field group component that wraps form inputs with consistent styling.\n * Supports different variants for various use cases.\n */\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n    return (\n        <AriaGroup\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Props for the FormField component.\n * Defines the structure for form field configuration.\n */\nexport type FormFieldProps = {\n    /** Optional label text for the form field */\n    label?: React.ReactNode;\n    /** Optional description or help text */\n    description?: React.ReactNode;\n    /** Optional error message to display */\n    errorMessage?: string;\n    /** Show required indicator on field label */\n    requiredIndicator?: boolean;\n    /** Not defining the htmlFor on labels will lead to accessibilty warnings */\n    htmlFor?: string;\n};\n\n/**\n * A wrapper component for form fields that provides consistent layout and styling.\n * Automatically renders label, children, description, and error message in the correct order.\n * @returns A complete form field with all associated elements\n */\nexport function FormField({\n    label,\n    description,\n    errorMessage,\n    children,\n    requiredIndicator,\n    htmlFor,\n}: FormFieldProps & {\n    children: React.ReactNode;\n}) {\n    return (\n        <>\n            {label && (\n                <FormFieldLabel htmlFor={htmlFor}>\n                    {label}\n                    {requiredIndicator && <sup className=\"text-destructive\">*</sup>}\n                </FormFieldLabel>\n            )}\n            {children}\n            {description && <FormFieldDescription>{description}</FormFieldDescription>}\n            {errorMessage && <FormFieldError htmlFor={htmlFor}>{errorMessage}</FormFieldError>}\n        </>\n    );\n}\n\n/**\n * A button component designed to be used within form fields.\n * Styled to fit nicely alongside form inputs with ghost styling.\n */\nexport function FormFieldButton({ className, ...props }: AriaButtonProps) {\n    return (\n        <AriaButton\n            className={composeRenderProps(className, className =>\n                classNames('btn btn-ghost h-input px-2 -me-2', className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * A form component that prevents default form submission and handles submit events.\n * All forms in this application are controlled components, not pure HTML forms.\n */\nexport function Form({ className, onSubmit, ...props }: React.ComponentProps<'form'>) {\n    return (\n        <form\n            className={classNames(className)}\n            onSubmit={e => {\n                // None of the forms in our applications are pure HTML forms.\n                e.preventDefault();\n\n                // Blur the active input field.\n                (document?.activeElement as HTMLElement)?.blur();\n\n                // If onSubmit is provided, call it.\n                onSubmit?.(e);\n            }}\n            {...props}\n        />\n    );\n}\n\n/**\n * A section component for organizing form content into logical groups.\n * Provides consistent spacing and visual separation between form sections.\n */\nexport function FormSection({ className, ...props }: React.ComponentProps<'section'>) {\n    return <section className={classNames('flex flex-col gap-input py-icon pb-input', className)} {...props} />;\n}\n\n/**\n * A title component for form sections.\n */\nexport function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n    return <h2 className={classNames('heading-3', className)} {...props} />;\n}\n\nexport function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>) {\n    return (\n        <nav\n            className={classNames(\n                'flex items-center justify-end h-header bg-background sticky bottom-0 z-50 py-icon px-input border-t',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function FormLayout({ className, ...props }: React.ComponentProps<'div'>) {\n    return <div className={'grid grid-cols-1 gap-input mt-icon my-header max-w-3xl'} {...props} />;\n}\n"],"names":["labelVariants","cva","FormFieldLabel","className","props","jsx","AriaLabel","classNames","FormFieldDescription","children","jsxs","AriaText","IcInfo","FormFieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","requiredIndicator","htmlFor","Fragment","FormFieldButton","AriaButton","Form","onSubmit","e","FormSection","FormSectionTitle","FormActionFooter","FormLayout"],"mappings":"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"}

package/lib/tokens.css

@@ -3,8 +3,8 @@
     Instead, compile the SCSS file again to create modifications.
 */
 :root {
-    --lc-range-start: 0.12;
-    --lc-range-end: 0.92;
+    --lc-range-start: 0.1;
+    --lc-range-end: 0.98;
     --c-range-start: 0.01;
     --c-range-end: 0.25;
     --primary-hue: 240;
@@ -277,6 +277,8 @@
 }
 @media (prefers-color-scheme: dark) {
     :root {
+        --lc-range-start: 0.12;
+        --lc-range-end: 0.92;
         --primary-1: var(--xprimary-10);
         --primary-2: var(--xprimary-9);
         --primary-3: var(--xprimary-8);
@@ -327,5 +329,7 @@
         --neutral-8: var(--xneutral-3);
         --neutral-9: var(--xneutral-2);
         --neutral-10: var(--xneutral-1);
+        --neutral-c-start: 0;
+        --neutral-c-end: 0.1;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.6.6-alpha80",
+  "version": "6.6.6-alpha82",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -48,7 +48,7 @@
     "*.{ts,tsx,css,scss,json}": "prettier --write"
   },
   "peerDependencies": {
-    "@cryptlex/web-api-types": "2.123.0",
+    "@cryptlex/web-api-types": "2.125.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",