npm - @jakubmazanec/ui - Versions diffs - 0.4.2 → 0.5.0-unstable.0c48dd7e - Mend

@jakubmazanec/ui 0.4.2 → 0.5.0-unstable.0c48dd7e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/build/components/Button.js CHANGED Viewed

@@ -53,7 +53,10 @@ export function Button({
   }
   let enhancedChildren = Children.map(children, (child) => {
     if (isValidElement(child) && (child.type === Icon || child.type === Spinner)) {
-      return cloneElement(child, { "data-icon": "" });
+      return cloneElement(child, { "data-slot": "icon" });
+    }
+    if (!isValidElement(child) && typeof child === "string") {
+      return /* @__PURE__ */ jsx("span", { "data-slot": "text", children: child });
     }
     return child;
   });
@@ -63,7 +66,7 @@ export function Button({
   ] });
 }
 export const buttonTheme = {
-  className: "rounded-2 flex items-center justify-center text-nowrap font-sans font-medium text-sm transition-colors",
+  className: "rounded-2 inline-flex items-center justify-center text-nowrap font-sans font-medium text-sm transition-colors",
   variants: {
     variant: {
       solid: "text-white bg-neutral-900 hover:bg-neutral-800",
@@ -72,9 +75,9 @@ export const buttonTheme = {
       invisible: "cursor-default text-neutral-200 hover:text-neutral-600 select-none"
     },
     size: {
-      small: "text-sm leading-6 px-2.5 h-8 min-w-8 gap-x-2",
-      medium: "leading-6 px-2.5 h-9 min-w-9 gap-x-2",
-      large: "text-lg leading-6 px-3 h-10 min-w-10 gap-x-2"
+      small: "text-sm leading-6 px-2.5 h-8 min-w-8 gap-x-1 *:first:data-[slot=icon]:-ml-2 *:last:data-[slot=icon]:-mr-2",
+      medium: "leading-6 px-2.5 h-9 min-w-9 gap-x-1 *:first:data-[slot=icon]:-ml-1.5 *:last:data-[slot=icon]:-mr-1.5",
+      large: "text-lg leading-6 px-3 h-10 min-w-10 gap-x-1 *:first:data-[slot=icon]:-ml-1 *:last:data-[slot=icon]:-mr-1"
     },
     disabled: {
       true: "",

package/build/components/Button.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Button.tsx"],
-  "sourcesContent": ["import {Button as HeadlessButton, type ButtonProps as HeadlessButtonProps} from '@headlessui/react';\nimport {\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  isValidElement,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {Spinner} from './Spinner.js';\n\nexport const useButtonTheme = createComponentTheme('Button', {\n  variants: {\n    variant: ['solid', 'outline', 'text', 'invisible'],\n    size: ['small', 'medium', 'large'],\n    disabled: [true, false],\n  },\n});\n\nconst BUTTON_ELEMENT = 'button';\n\nexport type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> &\n  ComponentRef<T> &\n  Omit<ComponentPropsWithoutRef<T>, 'type'> & {\n    as?: T | undefined;\n    submit?: boolean | undefined;\n    idle?: boolean | undefined;\n    autoFocus?: boolean | undefined;\n    className?: string | undefined;\n    // ref?: Ref<R> | undefined;\n    children?: HeadlessButtonProps['children'] | undefined; // sadly, we cannot use `T`'s children type, because Headless UI always, if `children` is function, calls it with its own render props documented here: https://headlessui.com/react/button#using-render-props\n  };\n\nexport function Button<T extends ElementType = typeof BUTTON_ELEMENT>({\n  variant = 'solid',\n  size = 'medium',\n  disabled = false,\n  as = BUTTON_ELEMENT as T,\n  idle = true,\n  autoFocus = false,\n  submit = false,\n  className,\n  ref,\n  children,\n  ...rest\n}: ButtonProps<T>) {\n  let theme = useButtonTheme({variant, size, disabled});\n\n  let props: Record<string, unknown> = {\n    as,\n    ref,\n    className: theme(disabled ? 'pointer-events-none' : null, className),\n    disabled: disabled || (submit && !idle),\n    autoFocus,\n    'data-component': 'button',\n    ...rest,\n  };\n\n  if (as === BUTTON_ELEMENT) {\n    props.type = 'button';\n  }\n\n  if (submit) {\n    props.type = 'submit';\n  }\n\n  if (typeof children === 'function') {\n    return <HeadlessButton {...props}>{children}</HeadlessButton>;\n  }\n\n  let enhancedChildren = Children.map(children, (child) => {\n    if (isValidElement(child) && (child.type === Icon || child.type === Spinner)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n      return cloneElement<any>(child, {'data-icon': ''});\n    }\n\n    return child;\n  });\n\n  return (\n    <HeadlessButton {...props}>\n      {submit && !idle ?\n        <Spinner data-icon />\n      : null}\n      {enhancedChildren}\n    </HeadlessButton>\n  );\n}\n\nexport const buttonTheme: ComponentTheme<typeof useButtonTheme> = {\n  className:\n    'rounded-2 flex items-center justify-center text-nowrap font-sans font-medium text-sm transition-colors',\n  variants: {\n    variant: {\n      solid: 'text-white bg-neutral-900 hover:bg-neutral-800',\n      outline: 'text-neutral-950 border-2 border-neutral-100 hover:border-neutral-200',\n      text: 'text-neutral-950 border-2 border-transparent hover:border-neutral-200',\n      invisible: 'cursor-default text-neutral-200 hover:text-neutral-600 select-none',\n    },\n    size: {\n      small: 'text-sm leading-6 px-2.5 h-8 min-w-8 gap-x-2',\n      medium: 'leading-6 px-2.5 h-9 min-w-9 gap-x-2',\n      large: 'text-lg leading-6 px-3 h-10 min-w-10 gap-x-2',\n    },\n    disabled: {\n      true: '',\n      false: '',\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'solid',\n      size: 'small',\n      className: 'px-3',\n    },\n    {\n      variant: 'solid',\n      size: 'medium',\n      className: 'px-3',\n    },\n    {\n      variant: 'solid',\n      size: 'large',\n      className: 'px-3.5',\n    },\n    {\n      variant: 'invisible',\n      size: 'small',\n      className: 'text-xs px-2 h-5 min-w-5',\n    },\n    {\n      variant: 'invisible',\n      size: 'medium',\n      className: 'px-2 h-6 min-w-6',\n    },\n    {\n      variant: 'invisible',\n      size: 'large',\n      className: 'px-2 h-7 min-w-7',\n    },\n    {\n      variant: 'solid',\n      disabled: true,\n      className: 'text-white bg-neutral-200 hover:bg-neutral-200',\n    },\n    {\n      variant: 'outline',\n      disabled: true,\n      className: 'text-neutral-200 hover:border-neutral-100',\n    },\n    {\n      variant: 'text',\n      disabled: true,\n      className: 'text-neutral-200 hover:border-transparent',\n    },\n    {\n      variant: 'invisible',\n      disabled: true,\n      className: 'text-neutral-200 ',\n    },\n  ],\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {Button as HeadlessButton, type ButtonProps as HeadlessButtonProps} from '@headlessui/react';\nimport {\n  Children,\n  cloneElement,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  isValidElement,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {Spinner} from './Spinner.js';\n\nexport const useButtonTheme = createComponentTheme('Button', {\n  variants: {\n    variant: ['solid', 'outline', 'text', 'invisible'],\n    size: ['small', 'medium', 'large'],\n    disabled: [true, false],\n  },\n});\n\nconst BUTTON_ELEMENT = 'button';\n\nexport type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> &\n  ComponentRef<T> &\n  Omit<ComponentPropsWithoutRef<T>, 'type'> & {\n    as?: T | undefined;\n    submit?: boolean | undefined;\n    idle?: boolean | undefined;\n    autoFocus?: boolean | undefined;\n    className?: string | undefined;\n    // ref?: Ref<R> | undefined;\n    children?: HeadlessButtonProps['children'] | undefined; // sadly, we cannot use `T`'s children type, because Headless UI always, if `children` is function, calls it with its own render props documented here: https://headlessui.com/react/button#using-render-props\n  };\n\nexport function Button<T extends ElementType = typeof BUTTON_ELEMENT>({\n  variant = 'solid',\n  size = 'medium',\n  disabled = false,\n  as = BUTTON_ELEMENT as T,\n  idle = true,\n  autoFocus = false,\n  submit = false,\n  className,\n  ref,\n  children,\n  ...rest\n}: ButtonProps<T>) {\n  let theme = useButtonTheme({variant, size, disabled});\n\n  let props: Record<string, unknown> = {\n    as,\n    ref,\n    className: theme(disabled ? 'pointer-events-none' : null, className),\n    disabled: disabled || (submit && !idle),\n    autoFocus,\n    'data-component': 'button',\n    ...rest,\n  };\n\n  if (as === BUTTON_ELEMENT) {\n    props.type = 'button';\n  }\n\n  if (submit) {\n    props.type = 'submit';\n  }\n\n  if (typeof children === 'function') {\n    return <HeadlessButton {...props}>{children}</HeadlessButton>;\n  }\n\n  let enhancedChildren = Children.map(children, (child) => {\n    if (isValidElement(child) && (child.type === Icon || child.type === Spinner)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n      return cloneElement<any>(child, {'data-slot': 'icon'});\n    }\n\n    if (!isValidElement(child) && typeof child === 'string') {\n      return <span data-slot=\"text\">{child}</span>;\n    }\n\n    return child;\n  });\n\n  return (\n    <HeadlessButton {...props}>\n      {submit && !idle ?\n        <Spinner data-icon />\n      : null}\n      {enhancedChildren}\n    </HeadlessButton>\n  );\n}\n\nexport const buttonTheme: ComponentTheme<typeof useButtonTheme> = {\n  className:\n    'rounded-2 inline-flex items-center justify-center text-nowrap font-sans font-medium text-sm transition-colors',\n  variants: {\n    variant: {\n      solid: 'text-white bg-neutral-900 hover:bg-neutral-800',\n      outline: 'text-neutral-950 border-2 border-neutral-100 hover:border-neutral-200',\n      text: 'text-neutral-950 border-2 border-transparent hover:border-neutral-200',\n      invisible: 'cursor-default text-neutral-200 hover:text-neutral-600 select-none',\n    },\n    size: {\n      small:\n        'text-sm leading-6 px-2.5 h-8 min-w-8 gap-x-1 *:first:data-[slot=icon]:-ml-2 *:last:data-[slot=icon]:-mr-2',\n      medium:\n        'leading-6 px-2.5 h-9 min-w-9 gap-x-1 *:first:data-[slot=icon]:-ml-1.5 *:last:data-[slot=icon]:-mr-1.5',\n      large:\n        'text-lg leading-6 px-3 h-10 min-w-10 gap-x-1 *:first:data-[slot=icon]:-ml-1 *:last:data-[slot=icon]:-mr-1',\n    },\n    disabled: {\n      true: '',\n      false: '',\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'solid',\n      size: 'small',\n      className: 'px-3',\n    },\n    {\n      variant: 'solid',\n      size: 'medium',\n      className: 'px-3',\n    },\n    {\n      variant: 'solid',\n      size: 'large',\n      className: 'px-3.5',\n    },\n    {\n      variant: 'invisible',\n      size: 'small',\n      className: 'text-xs px-2 h-5 min-w-5',\n    },\n    {\n      variant: 'invisible',\n      size: 'medium',\n      className: 'px-2 h-6 min-w-6',\n    },\n    {\n      variant: 'invisible',\n      size: 'large',\n      className: 'px-2 h-7 min-w-7',\n    },\n    {\n      variant: 'solid',\n      disabled: true,\n      className: 'text-white bg-neutral-200 hover:bg-neutral-200',\n    },\n    {\n      variant: 'outline',\n      disabled: true,\n      className: 'text-neutral-200 hover:border-neutral-100',\n    },\n    {\n      variant: 'text',\n      disabled: true,\n      className: 'text-neutral-200 hover:border-transparent',\n    },\n    {\n      variant: 'invisible',\n      disabled: true,\n      className: 'text-neutral-200 ',\n    },\n  ],\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/build/components/Checkbox.js CHANGED Viewed

@@ -68,13 +68,13 @@ export function Checkbox({
 export const checkboxTheme = {
   classNames: {
     root: "group/checkbox inline-block size-5 cursor-pointer",
-    icon: "flex justify-content justify-item size-5 *:rounded-2 *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/checkbox:*:bg-neutral-950 group-data-[checked]/checkbox:*:border-neutral-950 group-data-[checked]/checkbox:*:text-white"
+    icon: "flex justify-content justify-item size-5 *:rounded-2 *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/checkbox:*:bg-neutral-950 group-data-[checked]/checkbox:*:border-neutral-950 group-data-[checked]/checkbox:*:text-white hover:group-data-[checked]/checkbox:*:border-neutral-950 hover:group-data-[checked]/checkbox:*:text-white"
   },
   variants: {
     disabled: {
       true: {
         root: "cursor-not-allowed",
-        icon: "*:hover:text-transparent *:border-neutral-50 *:hover:border-neutral-50 group-data-[checked]/checkbox:*:bg-neutral-100 group-data-[checked]/checkbox:*:border-neutral-100 group-data-[checked]/checkbox:*:text-white"
+        icon: "*:hover:text-transparent *:border-neutral-50 *:hover:border-neutral-50 group-data-[checked]/checkbox:*:bg-neutral-100 group-data-[checked]/checkbox:*:border-neutral-100 group-data-[checked]/checkbox:*:text-white hover:group-data-[checked]/checkbox:*:border-neutral-100 hover:group-data-[checked]/checkbox:*:text-white"
       },
       false: {
         root: "",

package/build/components/Checkbox.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Checkbox.tsx"],
-  "sourcesContent": ["import {\n  Checkbox as HeadlessCheckbox,\n  type CheckboxProps as HeadlessCheckboxProps,\n} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, useCallback} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {useFormId} from './internals.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useCheckboxTheme = createComponentTheme('Checkbox', {\n  variants: {\n    disabled: [true, false],\n  },\n  elements: ['root', 'icon'],\n});\n\nconst CHECKBOX_ELEMENT = 'span';\n\nexport type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> &\n  ComponentRef<T> &\n  Omit<ComponentPropsWithoutRef<T>, 'onChange'> & {\n    as?: T | undefined;\n    checked?: boolean | undefined;\n    indeterminate?: boolean | undefined;\n    autoFocus?: boolean | undefined;\n    name?: string;\n    className?: string;\n    onChange?: ((checked: boolean) => void) | undefined;\n  };\n\nexport function Checkbox<T extends ElementType = typeof CHECKBOX_ELEMENT>({\n  disabled = false,\n  as = CHECKBOX_ELEMENT as T,\n  checked,\n  indeterminate,\n  autoFocus,\n  name,\n  className,\n  onChange,\n  ref,\n  ...rest\n}: CheckboxProps<T>) {\n  let theme = useCheckboxTheme({disabled});\n  let fieldName = useFieldName();\n  let field = useField();\n  let formId = useFormId();\n\n  let handleChange = useCallback(() => {\n    onChange?.(!checked);\n  }, [checked, onChange]);\n\n  if (field || fieldName) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessCheckboxProps<any> = {\n      as,\n      ref,\n      form: formId,\n      name: field?.name ?? fieldName,\n      indeterminate,\n      autoFocus,\n      className: theme.root('relative', className),\n      'data-component': 'checkbox',\n      ...rest,\n    };\n\n    return (\n      <HeadlessCheckbox {...props}>\n        <span className={theme.icon()}>\n          <Icon name=\"Check\" />\n        </span>\n      </HeadlessCheckbox>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessCheckboxProps<any> = {\n    as,\n    ref,\n    checked: Boolean(checked),\n    name,\n    indeterminate,\n    autoFocus,\n    className: theme.root('relative', className),\n    'data-component': 'checkbox',\n    onChange: handleChange,\n    ...rest,\n  };\n\n  return (\n    <HeadlessCheckbox {...props}>\n      <span className={theme.icon()}>\n        <Icon name=\"Check\" />\n      </span>\n    </HeadlessCheckbox>\n  );\n}\n\nexport const checkboxTheme: ComponentTheme<typeof useCheckboxTheme> = {\n  classNames: {\n    root: 'group/checkbox inline-block size-5 cursor-pointer',\n    icon: 'flex justify-content justify-item size-5 *:rounded-2 *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/checkbox:*:bg-neutral-950 group-data-[checked]/checkbox:*:border-neutral-950 group-data-[checked]/checkbox:*:text-white',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'cursor-not-allowed',\n        icon: '*:hover:text-transparent *:border-neutral-50 *:hover:border-neutral-50 group-data-[checked]/checkbox:*:bg-neutral-100 group-data-[checked]/checkbox:*:border-neutral-100 group-data-[checked]/checkbox:*:text-white',\n      },\n      false: {\n        root: '',\n        icon: '',\n      },\n    },\n  },\n};\n"],
+  "sourcesContent": ["import {\n  Checkbox as HeadlessCheckbox,\n  type CheckboxProps as HeadlessCheckboxProps,\n} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, useCallback} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {useFormId} from './internals.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useCheckboxTheme = createComponentTheme('Checkbox', {\n  variants: {\n    disabled: [true, false],\n  },\n  elements: ['root', 'icon'],\n});\n\nconst CHECKBOX_ELEMENT = 'span';\n\nexport type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> &\n  ComponentRef<T> &\n  Omit<ComponentPropsWithoutRef<T>, 'onChange'> & {\n    as?: T | undefined;\n    checked?: boolean | undefined;\n    indeterminate?: boolean | undefined;\n    autoFocus?: boolean | undefined;\n    name?: string;\n    className?: string;\n    onChange?: ((checked: boolean) => void) | undefined;\n  };\n\nexport function Checkbox<T extends ElementType = typeof CHECKBOX_ELEMENT>({\n  disabled = false,\n  as = CHECKBOX_ELEMENT as T,\n  checked,\n  indeterminate,\n  autoFocus,\n  name,\n  className,\n  onChange,\n  ref,\n  ...rest\n}: CheckboxProps<T>) {\n  let theme = useCheckboxTheme({disabled});\n  let fieldName = useFieldName();\n  let field = useField();\n  let formId = useFormId();\n\n  let handleChange = useCallback(() => {\n    onChange?.(!checked);\n  }, [checked, onChange]);\n\n  if (field || fieldName) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessCheckboxProps<any> = {\n      as,\n      ref,\n      form: formId,\n      name: field?.name ?? fieldName,\n      indeterminate,\n      autoFocus,\n      className: theme.root('relative', className),\n      'data-component': 'checkbox',\n      ...rest,\n    };\n\n    return (\n      <HeadlessCheckbox {...props}>\n        <span className={theme.icon()}>\n          <Icon name=\"Check\" />\n        </span>\n      </HeadlessCheckbox>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessCheckboxProps<any> = {\n    as,\n    ref,\n    checked: Boolean(checked),\n    name,\n    indeterminate,\n    autoFocus,\n    className: theme.root('relative', className),\n    'data-component': 'checkbox',\n    onChange: handleChange,\n    ...rest,\n  };\n\n  return (\n    <HeadlessCheckbox {...props}>\n      <span className={theme.icon()}>\n        <Icon name=\"Check\" />\n      </span>\n    </HeadlessCheckbox>\n  );\n}\n\nexport const checkboxTheme: ComponentTheme<typeof useCheckboxTheme> = {\n  classNames: {\n    root: 'group/checkbox inline-block size-5 cursor-pointer',\n    icon: 'flex justify-content justify-item size-5 *:rounded-2 *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/checkbox:*:bg-neutral-950 group-data-[checked]/checkbox:*:border-neutral-950 group-data-[checked]/checkbox:*:text-white hover:group-data-[checked]/checkbox:*:border-neutral-950 hover:group-data-[checked]/checkbox:*:text-white',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'cursor-not-allowed',\n        icon: '*:hover:text-transparent *:border-neutral-50 *:hover:border-neutral-50 group-data-[checked]/checkbox:*:bg-neutral-100 group-data-[checked]/checkbox:*:border-neutral-100 group-data-[checked]/checkbox:*:text-white hover:group-data-[checked]/checkbox:*:border-neutral-100 hover:group-data-[checked]/checkbox:*:text-white',\n      },\n      false: {\n        root: '',\n        icon: '',\n      },\n    },\n  },\n};\n"],
   "mappings": ";AA4EU;AA5EV;AAAA,EACE,YAAY;AAAA,OAEP;AACP,SAAyD,mBAAkB;AAE3E;AAAA,EAGE;AAAA,OACK;AAEP,SAAQ,YAAW;AACnB,SAAQ,iBAAgB;AACxB,SAAQ,gBAAe;AACvB,SAAQ,oBAAmB;AAEpB,aAAM,mBAAmB,qBAAqB,YAAY;AAAA,EAC/D,UAAU;AAAA,IACR,UAAU,CAAC,MAAM,KAAK;AAAA,EACxB;AAAA,EACA,UAAU,CAAC,QAAQ,MAAM;AAC3B,CAAC;AAED,MAAM,mBAAmB;AAclB,gBAAS,SAA0D;AAAA,EACxE,WAAW;AAAA,EACX,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,MAAI,QAAQ,iBAAiB,EAAC,SAAQ,CAAC;AACvC,MAAI,YAAY,aAAa;AAC7B,MAAI,QAAQ,SAAS;AACrB,MAAI,SAAS,UAAU;AAEvB,MAAI,eAAe,YAAY,MAAM;AACnC,eAAW,CAAC,OAAO;AAAA,EACrB,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,MAAI,SAAS,WAAW;AAEtB,QAAIA,SAAoC;AAAA,MACtC;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM,OAAO,QAAQ;AAAA,MACrB;AAAA,MACA;AAAA,MACA,WAAW,MAAM,KAAK,YAAY,SAAS;AAAA,MAC3C,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL;AAEA,WACE,oBAAC,oBAAkB,GAAGA,QACpB,8BAAC,UAAK,WAAW,MAAM,KAAK,GAC1B,8BAAC,QAAK,MAAK,SAAQ,GACrB,GACF;AAAA,EAEJ;AAGA,MAAI,QAAoC;AAAA,IACtC;AAAA,IACA;AAAA,IACA,SAAS,QAAQ,OAAO;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,MAAM,KAAK,YAAY,SAAS;AAAA,IAC3C,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,GAAG;AAAA,EACL;AAEA,SACE,oBAAC,oBAAkB,GAAG,OACpB,8BAAC,UAAK,WAAW,MAAM,KAAK,GAC1B,8BAAC,QAAK,MAAK,SAAQ,GACrB,GACF;AAEJ;AAEO,aAAM,gBAAyD;AAAA,EACpE,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["props"]
 }

package/build/components/Combobox.js CHANGED Viewed

@@ -141,7 +141,7 @@ export const comboboxTheme = {
     root: "w-full min-w-32",
     input: "flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm",
     icon: "text-neutral-500 size-5 top-2 right-2 cursor-pointer",
-    options: "flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--input-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors"
+    options: "flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--input-width)] [--anchor-gap:var(--spacing)] [--anchor-padding:calc(var(--spacing)*2)] [scrollbar-width:thin] empty:invisible transition-colors"
   },
   variants: {
     disabled: {

package/build/components/Combobox.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Combobox.tsx"],
-  "sourcesContent": ["import {\n  Combobox as HeadlessCombobox,\n  ComboboxButton as HeadlessComboboxButton,\n  ComboboxInput as HeadlessComboboxInput,\n  ComboboxOptions as HeadlessComboboxOptions,\n  type ComboboxProps as HeadlessComboboxProps,\n} from '@headlessui/react';\nimport {ChevronDownIcon} from '@heroicons/react/24/outline';\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  Fragment,\n  type PropsWithChildren,\n  useCallback,\n  useState,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {ComboboxOption} from './ComboboxOption.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {useFormId} from './internals.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useComboboxTheme = createComponentTheme('Combobox', {\n  variants: {disabled: [true, false], invalid: [true, false]},\n  elements: ['root', 'input', 'icon', 'options'],\n});\n\nconst COMBOBOX_ELEMENT = Fragment;\n\nexport type ComboboxItem<V> = {\n  value: V;\n  label: string;\n};\n\nexport type ComboboxProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = ComponentProps<typeof useComboboxTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren &\n  (\n    | {\n        as?: T | undefined;\n        value?: V[] | undefined;\n        defaultValue?: V[] | undefined;\n        multiple: true;\n        items?: Array<ComboboxItem<V>> | undefined;\n        placeholder?: string;\n        immediate?: boolean | undefined;\n        virtual?: boolean | undefined;\n        customValue?: boolean | undefined;\n        name?: string | undefined;\n        className?: string;\n        onChange?: (selectedValue: V[] | undefined) => void;\n      }\n    | {\n        as?: T | undefined;\n        value?: V | undefined;\n        defaultValue?: V | undefined;\n        multiple?: false | undefined;\n        items?: Array<ComboboxItem<V>> | undefined;\n        placeholder?: string;\n        immediate?: boolean | undefined;\n        virtual?: boolean | undefined;\n        customValue?: boolean | undefined;\n        name?: string | undefined;\n        className?: string;\n        onChange?: (selectedValue: V | undefined) => void;\n      }\n  );\n\nexport function Combobox<\n  T extends ElementType = typeof COMBOBOX_ELEMENT,\n  V extends boolean | number | string = string,\n>({\n  disabled = false,\n  invalid = false,\n  as = COMBOBOX_ELEMENT as unknown as T,\n  value,\n  defaultValue,\n  multiple,\n  items,\n  placeholder,\n  immediate = true,\n  virtual = false,\n  customValue = false,\n  name,\n  className,\n  onChange,\n  ref,\n  children,\n  ...rest\n}: ComboboxProps<T, V>) {\n  let theme = useComboboxTheme({disabled, invalid});\n  let formId = useFormId();\n  let field = useField();\n  let fieldName = useFieldName();\n  let [query, setQuery] = useState('');\n\n  let handleChange = useCallback(\n    (selectedValue: V | null) => {\n      if (selectedValue) {\n        onChange?.(selectedValue as V & V[]);\n      }\n\n      if (selectedValue === null) {\n        onChange?.(undefined);\n      }\n    },\n    [onChange],\n  );\n\n  let displayValue = useCallback(\n    (option: string) => {\n      if (items) {\n        let selectedItem = items.find((item) => item.value === option);\n\n        if (selectedItem) {\n          return selectedItem.label;\n        }\n      }\n\n      return option;\n    },\n    [items],\n  );\n\n  let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value);\n  }, []);\n\n  if (virtual && !items) {\n    throw new Error('Combobox requires `items` prop in virtual scrolling mode!');\n  }\n\n  if (virtual && customValue) {\n    throw new Error(\"Combobox doesn't support `customValue` prop in virtual scrolling mode!\");\n  }\n\n  if (items && children) {\n    throw new Error('Combobox accepts only either `items` prop, or children!');\n  }\n\n  let filteredItems =\n    query ?\n      items?.filter((item) =>\n        `${item.label as number | string}`\n          .toLowerCase()\n          .replaceAll(/\\s+/g, '')\n          .includes(query.toLowerCase().replaceAll(/\\s+/g, '')),\n      )\n    : items;\n  let filteredChildren =\n    query ?\n      Children.toArray(children).filter((child) => {\n        if (\n          typeof child === 'object' &&\n          'props' in child &&\n          typeof child.props === 'object' &&\n          typeof (child.props as {children?: unknown[] | string}).children === 'string' &&\n          (child.props as {children: string}).children\n            .toLowerCase()\n            .replaceAll(/\\s+/g, '')\n            .includes(query.toLowerCase().replaceAll(/\\s+/g, ''))\n        ) {\n          return true;\n        }\n\n        return false;\n      })\n    : children;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessComboboxProps<any, any, any> = {\n    as,\n    ref,\n    name: field?.name ?? fieldName ?? name,\n    value: value ?? undefined,\n    defaultValue,\n    multiple,\n    disabled,\n    immediate,\n    form: formId,\n    onChange: handleChange,\n    ...rest,\n  };\n\n  if (virtual) {\n    props.virtual = {\n      options: filteredItems?.map((item) => item.value) ?? [],\n    };\n  }\n\n  return (\n    <HeadlessCombobox {...props}>\n      <div className={theme.root('relative', className)} data-component=\"combobox\">\n        <HeadlessComboboxInput\n          className={theme.input(null, className)}\n          displayValue={displayValue}\n          size={1} // so the input default width without styling is small\n          onChange={handleQueryChange}\n        />\n        <HeadlessComboboxButton className={theme.icon('absolute')}>\n          <Icon>\n            <ChevronDownIcon />\n          </Icon>\n        </HeadlessComboboxButton>\n      </div>\n\n      {virtual && filteredItems ?\n        <HeadlessComboboxOptions anchor=\"bottom start\" className={theme.options()}>\n          {({option}: {option: V}) => (\n            <ComboboxOption value={option}>\n              {items?.find((item) => item.value === option)?.label}\n            </ComboboxOption>\n          )}\n        </HeadlessComboboxOptions>\n      : null}\n\n      {!virtual && filteredItems ?\n        <HeadlessComboboxOptions anchor=\"bottom start\" className={theme.options()}>\n          {customValue && query.length ?\n            <ComboboxOption key={query} value={query}>\n              {query}\n            </ComboboxOption>\n          : null}\n          {filteredItems.map((item) => (\n            <ComboboxOption key={String(item.value)} value={item.value}>\n              {item.label}\n            </ComboboxOption>\n          ))}\n        </HeadlessComboboxOptions>\n      : null}\n\n      {!filteredItems && Array.isArray(filteredChildren) ?\n        <HeadlessComboboxOptions anchor=\"bottom start\" className={theme.options()}>\n          {customValue && query.length ?\n            <ComboboxOption value={query}>{query}</ComboboxOption>\n          : null}\n          {filteredChildren}\n        </HeadlessComboboxOptions>\n      : null}\n    </HeadlessCombobox>\n  );\n}\n\nexport const comboboxTheme: ComponentTheme<typeof useComboboxTheme> = {\n  classNames: {\n    root: 'w-full min-w-32',\n    input:\n      'flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',\n    icon: 'text-neutral-500 size-5 top-2 right-2 cursor-pointer',\n    options:\n      'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--input-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        input: '',\n        icon: 'text-neutral-200',\n        options: 'border-neutral-100',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n    },\n    invalid: {\n      true: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n    },\n  },\n};\n"],
+  "sourcesContent": ["import {\n  Combobox as HeadlessCombobox,\n  ComboboxButton as HeadlessComboboxButton,\n  ComboboxInput as HeadlessComboboxInput,\n  ComboboxOptions as HeadlessComboboxOptions,\n  type ComboboxProps as HeadlessComboboxProps,\n} from '@headlessui/react';\nimport {ChevronDownIcon} from '@heroicons/react/24/outline';\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  Fragment,\n  type PropsWithChildren,\n  useCallback,\n  useState,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {ComboboxOption} from './ComboboxOption.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {useFormId} from './internals.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useComboboxTheme = createComponentTheme('Combobox', {\n  variants: {disabled: [true, false], invalid: [true, false]},\n  elements: ['root', 'input', 'icon', 'options'],\n});\n\nconst COMBOBOX_ELEMENT = Fragment;\n\nexport type ComboboxItem<V> = {\n  value: V;\n  label: string;\n};\n\nexport type ComboboxProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = ComponentProps<typeof useComboboxTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren &\n  (\n    | {\n        as?: T | undefined;\n        value?: V[] | undefined;\n        defaultValue?: V[] | undefined;\n        multiple: true;\n        items?: Array<ComboboxItem<V>> | undefined;\n        placeholder?: string;\n        immediate?: boolean | undefined;\n        virtual?: boolean | undefined;\n        customValue?: boolean | undefined;\n        name?: string | undefined;\n        className?: string;\n        onChange?: (selectedValue: V[] | undefined) => void;\n      }\n    | {\n        as?: T | undefined;\n        value?: V | undefined;\n        defaultValue?: V | undefined;\n        multiple?: false | undefined;\n        items?: Array<ComboboxItem<V>> | undefined;\n        placeholder?: string;\n        immediate?: boolean | undefined;\n        virtual?: boolean | undefined;\n        customValue?: boolean | undefined;\n        name?: string | undefined;\n        className?: string;\n        onChange?: (selectedValue: V | undefined) => void;\n      }\n  );\n\nexport function Combobox<\n  T extends ElementType = typeof COMBOBOX_ELEMENT,\n  V extends boolean | number | string = string,\n>({\n  disabled = false,\n  invalid = false,\n  as = COMBOBOX_ELEMENT as unknown as T,\n  value,\n  defaultValue,\n  multiple,\n  items,\n  placeholder,\n  immediate = true,\n  virtual = false,\n  customValue = false,\n  name,\n  className,\n  onChange,\n  ref,\n  children,\n  ...rest\n}: ComboboxProps<T, V>) {\n  let theme = useComboboxTheme({disabled, invalid});\n  let formId = useFormId();\n  let field = useField();\n  let fieldName = useFieldName();\n  let [query, setQuery] = useState('');\n\n  let handleChange = useCallback(\n    (selectedValue: V | null) => {\n      if (selectedValue) {\n        onChange?.(selectedValue as V & V[]);\n      }\n\n      if (selectedValue === null) {\n        onChange?.(undefined);\n      }\n    },\n    [onChange],\n  );\n\n  let displayValue = useCallback(\n    (option: string) => {\n      if (items) {\n        let selectedItem = items.find((item) => item.value === option);\n\n        if (selectedItem) {\n          return selectedItem.label;\n        }\n      }\n\n      return option;\n    },\n    [items],\n  );\n\n  let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value);\n  }, []);\n\n  if (virtual && !items) {\n    throw new Error('Combobox requires `items` prop in virtual scrolling mode!');\n  }\n\n  if (virtual && customValue) {\n    throw new Error(\"Combobox doesn't support `customValue` prop in virtual scrolling mode!\");\n  }\n\n  if (items && children) {\n    throw new Error('Combobox accepts only either `items` prop, or children!');\n  }\n\n  let filteredItems =\n    query ?\n      items?.filter((item) =>\n        `${item.label as number | string}`\n          .toLowerCase()\n          .replaceAll(/\\s+/g, '')\n          .includes(query.toLowerCase().replaceAll(/\\s+/g, '')),\n      )\n    : items;\n  let filteredChildren =\n    query ?\n      Children.toArray(children).filter((child) => {\n        if (\n          typeof child === 'object' &&\n          'props' in child &&\n          typeof child.props === 'object' &&\n          typeof (child.props as {children?: unknown[] | string}).children === 'string' &&\n          (child.props as {children: string}).children\n            .toLowerCase()\n            .replaceAll(/\\s+/g, '')\n            .includes(query.toLowerCase().replaceAll(/\\s+/g, ''))\n        ) {\n          return true;\n        }\n\n        return false;\n      })\n    : children;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessComboboxProps<any, any, any> = {\n    as,\n    ref,\n    name: field?.name ?? fieldName ?? name,\n    value: value ?? undefined,\n    defaultValue,\n    multiple,\n    disabled,\n    immediate,\n    form: formId,\n    onChange: handleChange,\n    ...rest,\n  };\n\n  if (virtual) {\n    props.virtual = {\n      options: filteredItems?.map((item) => item.value) ?? [],\n    };\n  }\n\n  return (\n    <HeadlessCombobox {...props}>\n      <div className={theme.root('relative', className)} data-component=\"combobox\">\n        <HeadlessComboboxInput\n          className={theme.input(null, className)}\n          displayValue={displayValue}\n          size={1} // so the input default width without styling is small\n          onChange={handleQueryChange}\n        />\n        <HeadlessComboboxButton className={theme.icon('absolute')}>\n          <Icon>\n            <ChevronDownIcon />\n          </Icon>\n        </HeadlessComboboxButton>\n      </div>\n\n      {virtual && filteredItems ?\n        <HeadlessComboboxOptions anchor=\"bottom start\" className={theme.options()}>\n          {({option}: {option: V}) => (\n            <ComboboxOption value={option}>\n              {items?.find((item) => item.value === option)?.label}\n            </ComboboxOption>\n          )}\n        </HeadlessComboboxOptions>\n      : null}\n\n      {!virtual && filteredItems ?\n        <HeadlessComboboxOptions anchor=\"bottom start\" className={theme.options()}>\n          {customValue && query.length ?\n            <ComboboxOption key={query} value={query}>\n              {query}\n            </ComboboxOption>\n          : null}\n          {filteredItems.map((item) => (\n            <ComboboxOption key={String(item.value)} value={item.value}>\n              {item.label}\n            </ComboboxOption>\n          ))}\n        </HeadlessComboboxOptions>\n      : null}\n\n      {!filteredItems && Array.isArray(filteredChildren) ?\n        <HeadlessComboboxOptions anchor=\"bottom start\" className={theme.options()}>\n          {customValue && query.length ?\n            <ComboboxOption value={query}>{query}</ComboboxOption>\n          : null}\n          {filteredChildren}\n        </HeadlessComboboxOptions>\n      : null}\n    </HeadlessCombobox>\n  );\n}\n\nexport const comboboxTheme: ComponentTheme<typeof useComboboxTheme> = {\n  classNames: {\n    root: 'w-full min-w-32',\n    input:\n      'flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',\n    icon: 'text-neutral-500 size-5 top-2 right-2 cursor-pointer',\n    options:\n      'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--input-width)] [--anchor-gap:var(--spacing)] [--anchor-padding:calc(var(--spacing)*2)] [scrollbar-width:thin] empty:invisible transition-colors',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        input: '',\n        icon: 'text-neutral-200',\n        options: 'border-neutral-100',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n    },\n    invalid: {\n      true: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n    },\n  },\n};\n"],
   "mappings": "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",
   "names": []
 }

package/build/components/DialogPanel.js CHANGED Viewed

@@ -28,6 +28,6 @@ export function DialogPanel({
   return /* @__PURE__ */ jsx(HeadlessDialogPanel, { ...props, children });
 }
 export const dialogPanelTheme = {
-  className: "shadow-1 relative flex w-full min-w-[300px] max-w-[900px] flex-col gap-y-6 rounded-4 bg-white p-6 max-h-[calc(100vh-3rem)] overflow-hidden overflow-y-auto"
+  className: "shadow-1 relative w-full min-w-[300px] max-w-full sm:max-w-[900px] gap-y-6 rounded-4 bg-white p-6 max-h-full overflow-auto"
 };
 //# sourceMappingURL=DialogPanel.js.map

package/build/components/DialogPanel.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/DialogPanel.tsx"],
-  "sourcesContent": ["import {\n  DialogPanel as HeadlessDialogPanel,\n  type DialogPanelProps as HeadlessDialogPanelProps,\n} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {filterProps} from './internals.js';\n\nexport const useDialogPanelTheme = createComponentTheme('DialogPanel');\n\nconst DIALOG_PANEL_ELEMENT = 'div';\n\nexport type DialogPanelProps<T extends ElementType> = ComponentProps<typeof useDialogPanelTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    className?: string;\n  };\n\nexport function DialogPanel<T extends ElementType = typeof DIALOG_PANEL_ELEMENT>({\n  as = DIALOG_PANEL_ELEMENT as T,\n  className,\n  ref,\n  children,\n  ...rest\n}: DialogPanelProps<T>) {\n  let theme = useDialogPanelTheme();\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessDialogPanelProps<any> = filterProps({\n    as,\n    ref,\n    className: theme(null, className),\n    transition: true,\n    'data-component': 'dialog-panel',\n    ...rest,\n  });\n\n  return <HeadlessDialogPanel {...props}>{children}</HeadlessDialogPanel>;\n}\n\nexport const dialogPanelTheme: ComponentTheme<typeof useDialogPanelTheme> = {\n  className:\n    'shadow-1 relative flex w-full min-w-[300px] max-w-[900px] flex-col gap-y-6 rounded-4 bg-white p-6 max-h-[calc(100vh-3rem)] overflow-hidden overflow-y-auto',\n};\n"],
+  "sourcesContent": ["import {\n  DialogPanel as HeadlessDialogPanel,\n  type DialogPanelProps as HeadlessDialogPanelProps,\n} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {filterProps} from './internals.js';\n\nexport const useDialogPanelTheme = createComponentTheme('DialogPanel');\n\nconst DIALOG_PANEL_ELEMENT = 'div';\n\nexport type DialogPanelProps<T extends ElementType> = ComponentProps<typeof useDialogPanelTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    className?: string;\n  };\n\nexport function DialogPanel<T extends ElementType = typeof DIALOG_PANEL_ELEMENT>({\n  as = DIALOG_PANEL_ELEMENT as T,\n  className,\n  ref,\n  children,\n  ...rest\n}: DialogPanelProps<T>) {\n  let theme = useDialogPanelTheme();\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessDialogPanelProps<any> = filterProps({\n    as,\n    ref,\n    className: theme(null, className),\n    transition: true,\n    'data-component': 'dialog-panel',\n    ...rest,\n  });\n\n  return <HeadlessDialogPanel {...props}>{children}</HeadlessDialogPanel>;\n}\n\nexport const dialogPanelTheme: ComponentTheme<typeof useDialogPanelTheme> = {\n  className:\n    'shadow-1 relative w-full min-w-[300px] max-w-full sm:max-w-[900px] gap-y-6 rounded-4 bg-white p-6 max-h-full overflow-auto',\n};\n"],
   "mappings": ";AA4CS;AA5CT;AAAA,EACE,eAAe;AAAA,OAEV;AAGP;AAAA,EAGE;AAAA,OACK;AAEP,SAAQ,mBAAkB;AAEnB,aAAM,sBAAsB,qBAAqB,aAAa;AAErE,MAAM,uBAAuB;AAUtB,gBAAS,YAAiE;AAAA,EAC/E,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,MAAI,QAAQ,oBAAoB;AAEhC,MAAI,QAAuC,YAAY;AAAA,IACrD;AAAA,IACA;AAAA,IACA,WAAW,MAAM,MAAM,SAAS;AAAA,IAChC,YAAY;AAAA,IACZ,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL,CAAC;AAED,SAAO,oBAAC,uBAAqB,GAAG,OAAQ,UAAS;AACnD;AAEO,aAAM,mBAA+D;AAAA,EAC1E,WACE;AACJ;",
   "names": []
 }

package/build/components/DialogTitle.js CHANGED Viewed

@@ -25,6 +25,6 @@ export const DialogTitle = ({
   return /* @__PURE__ */ jsx(react.DialogTitle, { ...props, children });
 };
 export const dialogTitleTheme = {
-  className: "text-xl font-bold"
+  className: "text-lg font-medium"
 };
 //# sourceMappingURL=DialogTitle.js.map

package/build/components/DialogTitle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/DialogTitle.tsx"],
-  "sourcesContent": ["import * as react from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {filterProps} from './internals.js';\n\nexport const useDialogTitleTheme = createComponentTheme('DialogTitle');\n\nconst DIALOG_TITLE_ELEMENT = 'h2';\n\nexport type DialogTitleProps<T extends ElementType> = ComponentProps<typeof useDialogTitleTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    className?: string;\n  };\n\nexport const DialogTitle = <T extends ElementType = typeof DIALOG_TITLE_ELEMENT>({\n  as = DIALOG_TITLE_ELEMENT as T,\n  className,\n  ref,\n  children,\n  ...rest\n}: DialogTitleProps<T>) => {\n  let theme = useDialogTitleTheme();\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: react.DialogTitleProps<any> = filterProps({\n    as,\n    ref,\n    className: theme(null, className),\n    'data-component': 'dialog-title',\n    ...rest,\n  });\n\n  return <react.DialogTitle {...props}>{children}</react.DialogTitle>;\n};\n\nexport const dialogTitleTheme: ComponentTheme<typeof useDialogTitleTheme> = {\n  className: 'text-xl font-bold',\n};\n"],
+  "sourcesContent": ["import * as react from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {filterProps} from './internals.js';\n\nexport const useDialogTitleTheme = createComponentTheme('DialogTitle');\n\nconst DIALOG_TITLE_ELEMENT = 'h2';\n\nexport type DialogTitleProps<T extends ElementType> = ComponentProps<typeof useDialogTitleTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    className?: string;\n  };\n\nexport const DialogTitle = <T extends ElementType = typeof DIALOG_TITLE_ELEMENT>({\n  as = DIALOG_TITLE_ELEMENT as T,\n  className,\n  ref,\n  children,\n  ...rest\n}: DialogTitleProps<T>) => {\n  let theme = useDialogTitleTheme();\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: react.DialogTitleProps<any> = filterProps({\n    as,\n    ref,\n    className: theme(null, className),\n    'data-component': 'dialog-title',\n    ...rest,\n  });\n\n  return <react.DialogTitle {...props}>{children}</react.DialogTitle>;\n};\n\nexport const dialogTitleTheme: ComponentTheme<typeof useDialogTitleTheme> = {\n  className: 'text-lg font-medium',\n};\n"],
   "mappings": ";AAwCS;AAxCT,YAAY,WAAW;AAGvB;AAAA,EAGE;AAAA,OACK;AAEP,SAAQ,mBAAkB;AAEnB,aAAM,sBAAsB,qBAAqB,aAAa;AAErE,MAAM,uBAAuB;AAUtB,aAAM,cAAc,CAAsD;AAAA,EAC/E,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,MAAI,QAAQ,oBAAoB;AAEhC,MAAI,QAAqC,YAAY;AAAA,IACnD;AAAA,IACA;AAAA,IACA,WAAW,MAAM,MAAM,SAAS;AAAA,IAChC,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL,CAAC;AAED,SAAO,oBAAC,MAAM,aAAN,EAAmB,GAAG,OAAQ,UAAS;AACjD;AAEO,aAAM,mBAA+D;AAAA,EAC1E,WAAW;AACb;",
   "names": []
 }

package/build/components/Heading.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+import { type ComponentRef } from './ComponentRef.js';
+export declare const useHeadingTheme: {
+    componentThemeName: "Heading";
+    themeDefinition: {
+        readonly variants: {
+            readonly size: ["small", "medium", "large"];
+        };
+    };
+} & ((themeProps: {
+    readonly size: "small" | "medium" | "large";
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
+declare const HEADING_ELEMENT = "h1";
+export type HeadingProps<T extends ElementType> = ComponentProps<typeof useHeadingTheme> & ComponentPropsWithoutRef<T> & ComponentRef<T> & PropsWithChildren & {
+    as?: T | undefined;
+    className?: string;
+};
+export declare function Heading<T extends ElementType = typeof HEADING_ELEMENT>({ size, as: Component, className, ref, children, ...rest }: HeadingProps<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const headingTheme: ComponentTheme<typeof useHeadingTheme>;
+export {};

package/build/components/Heading.js ADDED Viewed

@@ -0,0 +1,48 @@
+"use strict";
+import {
+  createElement
+} from "react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+export const useHeadingTheme = createComponentTheme("Heading", {
+  variants: {
+    size: ["small", "medium", "large"]
+  }
+});
+const HEADING_ELEMENT = "h1";
+export function Heading({
+  size = "medium",
+  as: Component,
+  className,
+  ref,
+  children,
+  ...rest
+}) {
+  let theme = useHeadingTheme({ size });
+  let props = {
+    ref,
+    className: theme(null, className),
+    "data-component": "heading",
+    ...rest
+  };
+  let DefaultComponent = HEADING_ELEMENT;
+  if (size === "small") {
+    DefaultComponent = "h3";
+  }
+  if (size === "medium") {
+    DefaultComponent = "h2";
+  }
+  return createElement(Component ?? DefaultComponent, props, children);
+}
+export const headingTheme = {
+  className: "m-0",
+  variants: {
+    size: {
+      small: "text-lg font-medium",
+      medium: "text-xl font-medium",
+      large: "text-2xl font-medium"
+    }
+  }
+};
+//# sourceMappingURL=Heading.js.map

package/build/components/Heading.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Heading.ts"],
+  "sourcesContent": ["import {\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  type PropsWithChildren,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\n\nexport const useHeadingTheme = createComponentTheme('Heading', {\n  variants: {\n    size: ['small', 'medium', 'large'],\n  },\n});\n\nconst HEADING_ELEMENT = 'h1';\n\nexport type HeadingProps<T extends ElementType> = ComponentProps<typeof useHeadingTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    className?: string;\n  };\n\nexport function Heading<T extends ElementType = typeof HEADING_ELEMENT>({\n  size = 'medium',\n  as: Component,\n  className,\n  ref,\n  children,\n  ...rest\n}: HeadingProps<T>) {\n  let theme = useHeadingTheme({size});\n  let props = {\n    ref,\n    className: theme(null, className),\n    'data-component': 'heading',\n    ...rest,\n  };\n  // TODO: is this ok typings-wise? Are types for <h1> and <h2> different?\n  let DefaultComponent = HEADING_ELEMENT;\n\n  if (size === 'small') {\n    DefaultComponent = 'h3';\n  }\n\n  if (size === 'medium') {\n    DefaultComponent = 'h2';\n  }\n\n  return createElement(Component ?? DefaultComponent, props, children);\n}\n\nexport const headingTheme: ComponentTheme<typeof useHeadingTheme> = {\n  className: 'm-0',\n  variants: {\n    size: {\n      small: 'text-lg font-medium',\n      medium: 'text-xl font-medium',\n      large: 'text-2xl font-medium',\n    },\n  },\n};\n"],
+  "mappings": ";AAAA;AAAA,EAEE;AAAA,OAGK;AAEP;AAAA,EAGE;AAAA,OACK;AAGA,aAAM,kBAAkB,qBAAqB,WAAW;AAAA,EAC7D,UAAU;AAAA,IACR,MAAM,CAAC,SAAS,UAAU,OAAO;AAAA,EACnC;AACF,CAAC;AAED,MAAM,kBAAkB;AAUjB,gBAAS,QAAwD;AAAA,EACtE,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,MAAI,QAAQ,gBAAgB,EAAC,KAAI,CAAC;AAClC,MAAI,QAAQ;AAAA,IACV;AAAA,IACA,WAAW,MAAM,MAAM,SAAS;AAAA,IAChC,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL;AAEA,MAAI,mBAAmB;AAEvB,MAAI,SAAS,SAAS;AACpB,uBAAmB;AAAA,EACrB;AAEA,MAAI,SAAS,UAAU;AACrB,uBAAmB;AAAA,EACrB;AAEA,SAAO,cAAc,aAAa,kBAAkB,OAAO,QAAQ;AACrE;AAEO,aAAM,eAAuD;AAAA,EAClE,WAAW;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "names": []
+}

package/build/components/Icon.js CHANGED Viewed

@@ -47,7 +47,7 @@ export function Icon({
   return createElement(Component, props, Child ? /* @__PURE__ */ jsx(Child, {}) : children);
 }
 export const iconTheme = {
-  className: "inline-block shrink-0 *:w-full *:h-full data-[icon]:-mx-1 select-none",
+  className: "inline-block shrink-0 *:w-full *:h-full select-none",
   variants: {
     size: {
       small: "size-4",

package/build/components/Icon.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Icon.tsx"],
-  "sourcesContent": ["import * as icons16 from '@heroicons/react/16/solid';\nimport * as icons20 from '@heroicons/react/20/solid';\nimport * as icons24 from '@heroicons/react/24/outline';\nimport {\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\n\nexport const useIconTheme = createComponentTheme('Icon', {\n  variants: {\n    size: ['small', 'medium', 'large'],\n    variant: ['default', 'light'],\n  },\n});\n\nconst ICON_ELEMENT = 'span';\n\nexport type IconProps<T extends ElementType> = ComponentProps<typeof useIconTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    name?: string | undefined;\n    className?: string | undefined;\n  };\n\nexport function Icon<T extends ElementType = typeof ICON_ELEMENT>({\n  size = 'medium',\n  variant = 'default',\n  as: Component = ICON_ELEMENT as T,\n  name,\n  className,\n  ref,\n  children,\n  ...rest\n}: IconProps<T>) {\n  let theme = useIconTheme({size, variant});\n  let props: Record<string, unknown> = {\n    ref,\n    className: theme(null, className),\n    'data-component': 'icon',\n    ...rest,\n  };\n  let Child: ElementType | undefined;\n  let resolvedName = `${name}Icon`;\n\n  if (\n    size === 'medium' &&\n    resolvedName &&\n    (icons20[resolvedName as keyof typeof icons20] as unknown)\n  ) {\n    Child = icons20[resolvedName as keyof typeof icons20] as ElementType;\n  }\n\n  if (\n    size === 'small' &&\n    resolvedName &&\n    (icons16[resolvedName as keyof typeof icons16] as unknown)\n  ) {\n    Child = icons16[resolvedName as keyof typeof icons16] as ElementType;\n  }\n\n  if (\n    size === 'large' &&\n    resolvedName &&\n    (icons24[resolvedName as keyof typeof icons24] as unknown)\n  ) {\n    Child = icons24[resolvedName as keyof typeof icons24] as ElementType;\n  }\n\n  return createElement(Component, props, (Child ? <Child /> : children) as ReactNode);\n}\n\nexport const iconTheme: ComponentTheme<typeof useIconTheme> = {\n  className: 'inline-block shrink-0 *:w-full *:h-full data-[icon]:-mx-1 select-none',\n  variants: {\n    size: {\n      small: 'size-4',\n      medium: 'size-5',\n      large: 'size-6',\n    },\n    variant: {\n      default: '',\n      light: 'text-neutral-200',\n    },\n  },\n};\n"],
+  "sourcesContent": ["import * as icons16 from '@heroicons/react/16/solid';\nimport * as icons20 from '@heroicons/react/20/solid';\nimport * as icons24 from '@heroicons/react/24/outline';\nimport {\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\n\nexport const useIconTheme = createComponentTheme('Icon', {\n  variants: {\n    size: ['small', 'medium', 'large'],\n    variant: ['default', 'light'],\n  },\n});\n\nconst ICON_ELEMENT = 'span';\n\nexport type IconProps<T extends ElementType> = ComponentProps<typeof useIconTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    name?: string | undefined;\n    className?: string | undefined;\n  };\n\nexport function Icon<T extends ElementType = typeof ICON_ELEMENT>({\n  size = 'medium',\n  variant = 'default',\n  as: Component = ICON_ELEMENT as T,\n  name,\n  className,\n  ref,\n  children,\n  ...rest\n}: IconProps<T>) {\n  let theme = useIconTheme({size, variant});\n  let props: Record<string, unknown> = {\n    ref,\n    className: theme(null, className),\n    'data-component': 'icon',\n    ...rest,\n  };\n  let Child: ElementType | undefined;\n  let resolvedName = `${name}Icon`;\n\n  if (\n    size === 'medium' &&\n    resolvedName &&\n    (icons20[resolvedName as keyof typeof icons20] as unknown)\n  ) {\n    Child = icons20[resolvedName as keyof typeof icons20] as ElementType;\n  }\n\n  if (\n    size === 'small' &&\n    resolvedName &&\n    (icons16[resolvedName as keyof typeof icons16] as unknown)\n  ) {\n    Child = icons16[resolvedName as keyof typeof icons16] as ElementType;\n  }\n\n  if (\n    size === 'large' &&\n    resolvedName &&\n    (icons24[resolvedName as keyof typeof icons24] as unknown)\n  ) {\n    Child = icons24[resolvedName as keyof typeof icons24] as ElementType;\n  }\n\n  return createElement(Component, props, (Child ? <Child /> : children) as ReactNode);\n}\n\nexport const iconTheme: ComponentTheme<typeof useIconTheme> = {\n  className: 'inline-block shrink-0 *:w-full *:h-full select-none',\n  variants: {\n    size: {\n      small: 'size-4',\n      medium: 'size-5',\n      large: 'size-6',\n    },\n    variant: {\n      default: '',\n      light: 'text-neutral-200',\n    },\n  },\n};\n"],
   "mappings": ";AAgFkD;AAhFlD,YAAY,aAAa;AACzB,YAAY,aAAa;AACzB,YAAY,aAAa;AACzB;AAAA,EAEE;AAAA,OAIK;AAEP;AAAA,EAGE;AAAA,OACK;AAGA,aAAM,eAAe,qBAAqB,QAAQ;AAAA,EACvD,UAAU;AAAA,IACR,MAAM,CAAC,SAAS,UAAU,OAAO;AAAA,IACjC,SAAS,CAAC,WAAW,OAAO;AAAA,EAC9B;AACF,CAAC;AAED,MAAM,eAAe;AAWd,gBAAS,KAAkD;AAAA,EAChE,OAAO;AAAA,EACP,UAAU;AAAA,EACV,IAAI,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,MAAI,QAAQ,aAAa,EAAC,MAAM,QAAO,CAAC;AACxC,MAAI,QAAiC;AAAA,IACnC;AAAA,IACA,WAAW,MAAM,MAAM,SAAS;AAAA,IAChC,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL;AACA,MAAI;AACJ,MAAI,eAAe,GAAG,IAAI;AAE1B,MACE,SAAS,YACT,gBACC,QAAQ,YAAoC,GAC7C;AACA,YAAQ,QAAQ,YAAoC;AAAA,EACtD;AAEA,MACE,SAAS,WACT,gBACC,QAAQ,YAAoC,GAC7C;AACA,YAAQ,QAAQ,YAAoC;AAAA,EACtD;AAEA,MACE,SAAS,WACT,gBACC,QAAQ,YAAoC,GAC7C;AACA,YAAQ,QAAQ,YAAoC;AAAA,EACtD;AAEA,SAAO,cAAc,WAAW,OAAQ,QAAQ,oBAAC,SAAM,IAAK,QAAsB;AACpF;AAEO,aAAM,YAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF;AACF;",
   "names": []
 }

package/build/components/Input.js CHANGED Viewed

@@ -79,15 +79,15 @@ export function Input({
   return /* @__PURE__ */ jsxs("span", { ...rootProps, children: [
     /* @__PURE__ */ jsx(HeadlessInput, { ...inputProps }),
     IconComponent ? /* @__PURE__ */ jsx("span", { ...iconProps, children: typeof IconComponent === "string" ? /* @__PURE__ */ jsx(Icon, { name: IconComponent }) : /* @__PURE__ */ jsx(Icon, { size: "large", children: /* @__PURE__ */ jsx(IconComponent, {}) }) }) : null,
-    showClearButton ? /* @__PURE__ */ jsx("span", { ...clearButtonProps, onClick: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "XMark" }) }) : null
+    showClearButton ? /* @__PURE__ */ jsx("button", { type: "button", ...clearButtonProps, onClick: handleClear, children: /* @__PURE__ */ jsx(Icon, { name: "XMark" }) }) : null
   ] });
 }
 export const inputTheme = {
   classNames: {
-    root: "group flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 px-2.5 h-9 bg-white shadow-inner transition-colors",
-    input: "p-0 focus-visible:outline-none w-full group-data-[icon]:pl-6 group-data-[clear-button]:pr-4 bg-transparent font-sans text-sm",
+    root: "group flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 px-2.5 h-9 bg-white shadow-inner transition-colors focus-within:outline-solid focus-within:outline-2 focus-within:outline-blue-400/50 focus-within:outline-offset-[calc(var(--spacing)*0.5)]",
+    input: "p-0 focus:outline-none w-full group-data-[icon]:pl-6 group-data-[clear-button]:pr-4 bg-transparent font-sans text-sm",
     icon: "size-6 left-[0.3125rem] top-[0.3125rem] text-neutral-300",
-    clearButton: "text-neutral-500 size-5 right-2 cursor-pointer"
+    clearButton: "rounded-1 text-neutral-500 size-5 right-2 cursor-pointer"
   },
   variants: {
     disabled: {

package/build/components/Input.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Input.tsx"],
-  "sourcesContent": ["import {getInputProps} from '@conform-to/react';\nimport {Input as HeadlessInput} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ElementType,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useInputTheme = createComponentTheme('Input', {\n  variants: {\n    disabled: [true, false],\n  },\n  elements: ['root', 'input', 'icon', 'clearButton'],\n});\n\nconst INPUT_ELEMENT = 'input';\n\nexport type InputProps<T extends ElementType> = ComponentProps<typeof useInputTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> & {\n    as?: T | undefined;\n    name?: string | undefined;\n    className?: string | undefined;\n    icon?: ComponentType<object> | string | undefined;\n    showClearButton?: boolean | undefined;\n  };\n\nexport function Input<T extends ElementType = typeof INPUT_ELEMENT>({\n  disabled = false,\n  as = INPUT_ELEMENT as T,\n  name,\n  className,\n  icon: IconComponent,\n  showClearButton = false,\n  ref,\n  ...rest\n}: InputProps<T>) {\n  let theme = useInputTheme({disabled});\n  let fieldName = useFieldName();\n  let field = useField();\n  let inputRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(ref, () => {\n    if (inputRef.current) {\n      return inputRef.current;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- false positive\n    return {} as HTMLElement;\n  });\n\n  let handleClear = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.value = '';\n      inputRef.current.dispatchEvent(new Event('input', {bubbles: true}));\n    }\n  }, []);\n\n  let rootProps: Record<string, unknown> = {\n    className: theme.root('relative', className),\n    'data-component': 'input',\n  };\n  let inputProps: Record<string, unknown> = {\n    as,\n    ref: inputRef,\n    disabled,\n    name: field?.name ?? fieldName ?? name,\n    className: theme.input(),\n    size: 1, // so the input default width without styling is small\n    ...rest,\n  };\n  let iconProps: Record<string, unknown> = {\n    className: theme.icon('absolute'),\n  };\n  let clearButtonProps: Record<string, unknown> = {\n    className: theme.clearButton('absolute'),\n  };\n\n  if (IconComponent) {\n    rootProps['data-icon'] = '';\n  }\n\n  if (showClearButton) {\n    rootProps['data-clear-button'] = '';\n  }\n\n  if (field) {\n    let {key, ...restProps} = getInputProps(field, {type: 'text'});\n\n    inputProps = {...restProps, ...inputProps};\n  }\n\n  return (\n    <span {...rootProps}>\n      <HeadlessInput {...inputProps} />\n      {IconComponent ?\n        <span {...iconProps}>\n          {typeof IconComponent === 'string' ?\n            <Icon name={IconComponent} />\n          : <Icon size=\"large\">\n              <IconComponent />\n            </Icon>\n          }\n        </span>\n      : null}\n      {showClearButton ?\n        <span {...clearButtonProps} onClick={handleClear}>\n          <Icon name=\"XMark\" />\n        </span>\n      : null}\n    </span>\n  );\n}\n\nexport const inputTheme: ComponentTheme<typeof useInputTheme> = {\n  classNames: {\n    root: 'group flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 px-2.5 h-9 bg-white shadow-inner transition-colors',\n    input:\n      'p-0 focus-visible:outline-none w-full group-data-[icon]:pl-6 group-data-[clear-button]:pr-4 bg-transparent font-sans text-sm',\n    icon: 'size-6 left-[0.3125rem] top-[0.3125rem] text-neutral-300',\n    clearButton: 'text-neutral-500 size-5 right-2 cursor-pointer',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        input: '',\n        icon: '',\n        clearButton: '',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        clearButton: '',\n      },\n    },\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {getInputProps} from '@conform-to/react';\nimport {Input as HeadlessInput} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type ElementType,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useInputTheme = createComponentTheme('Input', {\n  variants: {\n    disabled: [true, false],\n  },\n  elements: ['root', 'input', 'icon', 'clearButton'],\n});\n\nconst INPUT_ELEMENT = 'input';\n\nexport type InputProps<T extends ElementType> = ComponentProps<typeof useInputTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> & {\n    as?: T | undefined;\n    name?: string | undefined;\n    className?: string | undefined;\n    icon?: ComponentType<object> | string | undefined;\n    showClearButton?: boolean | undefined;\n  };\n\nexport function Input<T extends ElementType = typeof INPUT_ELEMENT>({\n  disabled = false,\n  as = INPUT_ELEMENT as T,\n  name,\n  className,\n  icon: IconComponent,\n  showClearButton = false,\n  ref,\n  ...rest\n}: InputProps<T>) {\n  let theme = useInputTheme({disabled});\n  let fieldName = useFieldName();\n  let field = useField();\n  let inputRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(ref, () => {\n    if (inputRef.current) {\n      return inputRef.current;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- false positive\n    return {} as HTMLElement;\n  });\n\n  let handleClear = useCallback(() => {\n    if (inputRef.current) {\n      inputRef.current.value = '';\n      inputRef.current.dispatchEvent(new Event('input', {bubbles: true}));\n    }\n  }, []);\n\n  let rootProps: Record<string, unknown> = {\n    className: theme.root('relative', className),\n    'data-component': 'input',\n  };\n  let inputProps: Record<string, unknown> = {\n    as,\n    ref: inputRef,\n    disabled,\n    name: field?.name ?? fieldName ?? name,\n    className: theme.input(),\n    size: 1, // so the input default width without styling is small\n    ...rest,\n  };\n  let iconProps: Record<string, unknown> = {\n    className: theme.icon('absolute'),\n  };\n  let clearButtonProps: Record<string, unknown> = {\n    className: theme.clearButton('absolute'),\n  };\n\n  if (IconComponent) {\n    rootProps['data-icon'] = '';\n  }\n\n  if (showClearButton) {\n    rootProps['data-clear-button'] = '';\n  }\n\n  if (field) {\n    let {key, ...restProps} = getInputProps(field, {type: 'text'});\n\n    inputProps = {...restProps, ...inputProps};\n  }\n\n  return (\n    <span {...rootProps}>\n      <HeadlessInput {...inputProps} />\n      {IconComponent ?\n        <span {...iconProps}>\n          {typeof IconComponent === 'string' ?\n            <Icon name={IconComponent} />\n          : <Icon size=\"large\">\n              <IconComponent />\n            </Icon>\n          }\n        </span>\n      : null}\n      {showClearButton ?\n        <button type=\"button\" {...clearButtonProps} onClick={handleClear}>\n          <Icon name=\"XMark\" />\n        </button>\n      : null}\n    </span>\n  );\n}\n\nexport const inputTheme: ComponentTheme<typeof useInputTheme> = {\n  classNames: {\n    root: 'group flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 px-2.5 h-9 bg-white shadow-inner transition-colors focus-within:outline-solid focus-within:outline-2 focus-within:outline-blue-400/50 focus-within:outline-offset-[calc(var(--spacing)*0.5)]',\n    input:\n      'p-0 focus:outline-none w-full group-data-[icon]:pl-6 group-data-[clear-button]:pr-4 bg-transparent font-sans text-sm',\n    icon: 'size-6 left-[0.3125rem] top-[0.3125rem] text-neutral-300',\n    clearButton: 'rounded-1 text-neutral-500 size-5 right-2 cursor-pointer',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        input: '',\n        icon: '',\n        clearButton: '',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        clearButton: '',\n      },\n    },\n  },\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/build/components/Legend.js CHANGED Viewed

@@ -25,6 +25,6 @@ export function Legend({
   return /* @__PURE__ */ jsx(HeadlessLegend, { ...props, children });
 }
 export const legendTheme = {
-  className: "font-sans font-semibold text-sm"
+  className: "font-sans font-medium text-sm"
 };
 //# sourceMappingURL=Legend.js.map

package/build/components/Legend.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Legend.tsx"],
-  "sourcesContent": ["import {Legend as HeadlessLegend, type LegendProps as HeadlessLegendProps} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {filterProps} from './internals.js';\n\nexport const useLegendTheme = createComponentTheme('Legend');\n\nconst LEGEND_ELEMENT = 'div';\n\nexport type LegendProps<T extends ElementType> = ComponentProps<typeof useLegendTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    className?: string | undefined;\n  };\n\nexport function Legend<T extends ElementType = typeof LEGEND_ELEMENT>({\n  as = LEGEND_ELEMENT as T,\n  className,\n  ref,\n  children,\n  ...rest\n}: LegendProps<T>) {\n  let theme = useLegendTheme();\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessLegendProps<any> = filterProps({\n    as,\n    ref,\n    className: theme(null, className),\n    'data-component': 'legend',\n    ...rest,\n  });\n\n  return <HeadlessLegend {...props}>{children}</HeadlessLegend>;\n}\n\nexport const legendTheme: ComponentTheme<typeof useLegendTheme> = {\n  className: 'font-sans font-semibold text-sm',\n};\n"],
+  "sourcesContent": ["import {Legend as HeadlessLegend, type LegendProps as HeadlessLegendProps} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {filterProps} from './internals.js';\n\nexport const useLegendTheme = createComponentTheme('Legend');\n\nconst LEGEND_ELEMENT = 'div';\n\nexport type LegendProps<T extends ElementType> = ComponentProps<typeof useLegendTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    className?: string | undefined;\n  };\n\nexport function Legend<T extends ElementType = typeof LEGEND_ELEMENT>({\n  as = LEGEND_ELEMENT as T,\n  className,\n  ref,\n  children,\n  ...rest\n}: LegendProps<T>) {\n  let theme = useLegendTheme();\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessLegendProps<any> = filterProps({\n    as,\n    ref,\n    className: theme(null, className),\n    'data-component': 'legend',\n    ...rest,\n  });\n\n  return <HeadlessLegend {...props}>{children}</HeadlessLegend>;\n}\n\nexport const legendTheme: ComponentTheme<typeof useLegendTheme> = {\n  className: 'font-sans font-medium text-sm',\n};\n"],
   "mappings": ";AAwCS;AAxCT,SAAQ,UAAU,sBAA8D;AAGhF;AAAA,EAGE;AAAA,OACK;AAEP,SAAQ,mBAAkB;AAEnB,aAAM,iBAAiB,qBAAqB,QAAQ;AAE3D,MAAM,iBAAiB;AAUhB,gBAAS,OAAsD;AAAA,EACpE,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,MAAI,QAAQ,eAAe;AAE3B,MAAI,QAAkC,YAAY;AAAA,IAChD;AAAA,IACA;AAAA,IACA,WAAW,MAAM,MAAM,SAAS;AAAA,IAChC,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL,CAAC;AAED,SAAO,oBAAC,kBAAgB,GAAG,OAAQ,UAAS;AAC9C;AAEO,aAAM,cAAqD;AAAA,EAChE,WAAW;AACb;",
   "names": []
 }

package/build/components/ListboxOption.js CHANGED Viewed

@@ -38,7 +38,7 @@ export function ListboxOption({
 }
 export const listboxOptionTheme = {
   classNames: {
-    root: "group/option p-1 pr-6 rounded-1 hover:bg-neutral-50 data-[active]:bg-neutral-50 text-sm transition-colors",
+    root: "group/option p-1 pr-6 rounded-1 hover:bg-neutral-50 data-[active]:bg-neutral-50 text-sm transition-colors relative",
     icon: "hidden group-data-[selected]/option:block right-1 top-1 text-neutral-500"
   },
   variants: {

package/build/components/ListboxOption.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/ListboxOption.tsx"],
-  "sourcesContent": ["import {\n  ListboxOption as HeadlessListboxOption,\n  type ListboxOptionProps as HeadlessListboxOptionProps,\n} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\n\nexport const useListboxOptionTheme = createComponentTheme('ListboxOption', {\n  variants: {disabled: [true, false]},\n  elements: ['root', 'icon'],\n});\n\nconst LISTBOX_OPTION_ELEMENT = 'div';\n\nexport type ListboxOptionProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = ComponentProps<typeof useListboxOptionTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    value: V;\n    className?: string;\n  };\n\nexport function ListboxOption<\n  T extends ElementType = typeof LISTBOX_OPTION_ELEMENT,\n  V extends boolean | number | string = string,\n>({\n  disabled = false,\n  as = LISTBOX_OPTION_ELEMENT as T,\n  value,\n  className,\n  ref,\n  children,\n  ...rest\n}: ListboxOptionProps<T, V>) {\n  let theme = useListboxOptionTheme({disabled});\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessListboxOptionProps<any, any> = {\n    as,\n    ref,\n    value,\n    disabled,\n    className: theme.root('cursor-pointer', className),\n    'data-component': 'listbox-option',\n    ...rest,\n  };\n\n  return (\n    <HeadlessListboxOption {...props}>\n      <span className={theme.icon('absolute')}>\n        <Icon name=\"Check\" />\n      </span>\n      {children}\n    </HeadlessListboxOption>\n  );\n}\n\nexport const listboxOptionTheme: ComponentTheme<typeof useListboxOptionTheme> = {\n  classNames: {\n    root: 'group/option p-1 pr-6 rounded-1 hover:bg-neutral-50 data-[active]:bg-neutral-50 text-sm transition-colors',\n    icon: 'hidden group-data-[selected]/option:block right-1 top-1 text-neutral-500',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'text-neutral-200 cursor-not-allowed',\n        icon: 'text-neutral-200',\n      },\n      false: {\n        root: '',\n        icon: '',\n      },\n    },\n  },\n};\n"],
+  "sourcesContent": ["import {\n  ListboxOption as HeadlessListboxOption,\n  type ListboxOptionProps as HeadlessListboxOptionProps,\n} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\n\nexport const useListboxOptionTheme = createComponentTheme('ListboxOption', {\n  variants: {disabled: [true, false]},\n  elements: ['root', 'icon'],\n});\n\nconst LISTBOX_OPTION_ELEMENT = 'div';\n\nexport type ListboxOptionProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = ComponentProps<typeof useListboxOptionTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    value: V;\n    className?: string;\n  };\n\nexport function ListboxOption<\n  T extends ElementType = typeof LISTBOX_OPTION_ELEMENT,\n  V extends boolean | number | string = string,\n>({\n  disabled = false,\n  as = LISTBOX_OPTION_ELEMENT as T,\n  value,\n  className,\n  ref,\n  children,\n  ...rest\n}: ListboxOptionProps<T, V>) {\n  let theme = useListboxOptionTheme({disabled});\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessListboxOptionProps<any, any> = {\n    as,\n    ref,\n    value,\n    disabled,\n    className: theme.root('cursor-pointer', className),\n    'data-component': 'listbox-option',\n    ...rest,\n  };\n\n  return (\n    <HeadlessListboxOption {...props}>\n      <span className={theme.icon('absolute')}>\n        <Icon name=\"Check\" />\n      </span>\n      {children}\n    </HeadlessListboxOption>\n  );\n}\n\nexport const listboxOptionTheme: ComponentTheme<typeof useListboxOptionTheme> = {\n  classNames: {\n    root: 'group/option p-1 pr-6 rounded-1 hover:bg-neutral-50 data-[active]:bg-neutral-50 text-sm transition-colors relative',\n    icon: 'hidden group-data-[selected]/option:block right-1 top-1 text-neutral-500',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'text-neutral-200 cursor-not-allowed',\n        icon: 'text-neutral-200',\n      },\n      false: {\n        root: '',\n        icon: '',\n      },\n    },\n  },\n};\n"],
   "mappings": ";AA2DI,SAEI,KAFJ;AA3DJ;AAAA,EACE,iBAAiB;AAAA,OAEZ;AAGP;AAAA,EAGE;AAAA,OACK;AAEP,SAAQ,YAAW;AAEZ,aAAM,wBAAwB,qBAAqB,iBAAiB;AAAA,EACzE,UAAU,EAAC,UAAU,CAAC,MAAM,KAAK,EAAC;AAAA,EAClC,UAAU,CAAC,QAAQ,MAAM;AAC3B,CAAC;AAED,MAAM,yBAAyB;AAcxB,gBAAS,cAGd;AAAA,EACA,WAAW;AAAA,EACX,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,MAAI,QAAQ,sBAAsB,EAAC,SAAQ,CAAC;AAG5C,MAAI,QAA8C;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,MAAM,KAAK,kBAAkB,SAAS;AAAA,IACjD,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL;AAEA,SACE,qBAAC,yBAAuB,GAAG,OACzB;AAAA,wBAAC,UAAK,WAAW,MAAM,KAAK,UAAU,GACpC,8BAAC,QAAK,MAAK,SAAQ,GACrB;AAAA,IACC;AAAA,KACH;AAEJ;AAEO,aAAM,qBAAmE;AAAA,EAC9E,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/build/components/Radio.js CHANGED Viewed

@@ -36,8 +36,8 @@ export function Radio({
 }
 export const radioTheme = {
   classNames: {
-    root: "group/radio inline-block size-5",
-    icon: "flex justify-content justify-item size-5 *:rounded-full *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/radio:*:bg-neutral-950 group-data-[checked]/radio:*:border-neutral-950 group-data-[checked]/radio:*:text-white"
+    root: "group/radio inline-block size-5 rounded-full",
+    icon: "flex justify-content justify-item size-5 *:rounded-full *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/radio:*:bg-neutral-950 group-data-[checked]/radio:*:border-neutral-950 group-data-[checked]/radio:*:text-white group-data-[checked]/radio:*:hover:border-neutral-950"
   },
   variants: {
     disabled: {

package/build/components/Radio.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Radio.tsx"],
-  "sourcesContent": ["import {Radio as HeadlessRadio, type RadioProps as HeadlessRadioProps} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\n\nexport const useRadioTheme = createComponentTheme('Radio', {\n  variants: {\n    disabled: [true, false],\n  },\n  elements: ['root', 'icon'],\n});\n\nconst RADIO_ELEMENT = 'span';\n\nexport type RadioProps<T extends ElementType, V extends boolean | number | string> = ComponentProps<\n  typeof useRadioTheme\n> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> & {\n    as?: T | undefined;\n    value: V;\n    autoFocus?: boolean | undefined;\n    className?: string;\n  };\n\nexport function Radio<\n  T extends ElementType = typeof RADIO_ELEMENT,\n  V extends boolean | number | string = string,\n>({\n  disabled = false,\n  as = RADIO_ELEMENT as T,\n  value,\n  autoFocus,\n  className,\n  ref,\n  ...rest\n}: RadioProps<T, V>) {\n  let theme = useRadioTheme({disabled});\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessRadioProps<any, V> = {\n    as,\n    ref,\n    value,\n    disabled,\n    autoFocus,\n    className: theme.root('relative', className),\n    'data-component': 'radio',\n    ...rest,\n  };\n\n  return (\n    <HeadlessRadio {...props}>\n      <span className={theme.icon()}>\n        <Icon>\n          <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\" xmlSpace=\"preserve\">\n            <circle cx=\"10\" cy=\"10\" fill=\"currentColor\" r=\"4\" />\n          </svg>\n        </Icon>\n      </span>\n    </HeadlessRadio>\n  );\n}\n\nexport const radioTheme: ComponentTheme<typeof useRadioTheme> = {\n  classNames: {\n    root: 'group/radio inline-block size-5',\n    icon: 'flex justify-content justify-item size-5 *:rounded-full *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/radio:*:bg-neutral-950 group-data-[checked]/radio:*:border-neutral-950 group-data-[checked]/radio:*:text-white',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        icon: 'opacity-0',\n      },\n      false: {\n        root: '',\n        icon: '',\n      },\n    },\n  },\n};\n"],
+  "sourcesContent": ["import {Radio as HeadlessRadio, type RadioProps as HeadlessRadioProps} from '@headlessui/react';\nimport {type ComponentPropsWithoutRef, type ElementType} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\nimport {Icon} from './Icon.js';\n\nexport const useRadioTheme = createComponentTheme('Radio', {\n  variants: {\n    disabled: [true, false],\n  },\n  elements: ['root', 'icon'],\n});\n\nconst RADIO_ELEMENT = 'span';\n\nexport type RadioProps<T extends ElementType, V extends boolean | number | string> = ComponentProps<\n  typeof useRadioTheme\n> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> & {\n    as?: T | undefined;\n    value: V;\n    autoFocus?: boolean | undefined;\n    className?: string;\n  };\n\nexport function Radio<\n  T extends ElementType = typeof RADIO_ELEMENT,\n  V extends boolean | number | string = string,\n>({\n  disabled = false,\n  as = RADIO_ELEMENT as T,\n  value,\n  autoFocus,\n  className,\n  ref,\n  ...rest\n}: RadioProps<T, V>) {\n  let theme = useRadioTheme({disabled});\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let props: HeadlessRadioProps<any, V> = {\n    as,\n    ref,\n    value,\n    disabled,\n    autoFocus,\n    className: theme.root('relative', className),\n    'data-component': 'radio',\n    ...rest,\n  };\n\n  return (\n    <HeadlessRadio {...props}>\n      <span className={theme.icon()}>\n        <Icon>\n          <svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\" xmlSpace=\"preserve\">\n            <circle cx=\"10\" cy=\"10\" fill=\"currentColor\" r=\"4\" />\n          </svg>\n        </Icon>\n      </span>\n    </HeadlessRadio>\n  );\n}\n\nexport const radioTheme: ComponentTheme<typeof useRadioTheme> = {\n  classNames: {\n    root: 'group/radio inline-block size-5 rounded-full',\n    icon: 'flex justify-content justify-item size-5 *:rounded-full *:bg-white *:border-2 *:border-neutral-100 *:hover:border-neutral-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-neutral-100 group-data-[checked]/radio:*:bg-neutral-950 group-data-[checked]/radio:*:border-neutral-950 group-data-[checked]/radio:*:text-white group-data-[checked]/radio:*:hover:border-neutral-950',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        icon: 'opacity-0',\n      },\n      false: {\n        root: '',\n        icon: '',\n      },\n    },\n  },\n};\n"],
   "mappings": ";AA8DY;AA9DZ,SAAQ,SAAS,qBAA2D;AAG5E;AAAA,EAGE;AAAA,OACK;AAEP,SAAQ,YAAW;AAEZ,aAAM,gBAAgB,qBAAqB,SAAS;AAAA,EACzD,UAAU;AAAA,IACR,UAAU,CAAC,MAAM,KAAK;AAAA,EACxB;AAAA,EACA,UAAU,CAAC,QAAQ,MAAM;AAC3B,CAAC;AAED,MAAM,gBAAgB;AAaf,gBAAS,MAGd;AAAA,EACA,WAAW;AAAA,EACX,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,MAAI,QAAQ,cAAc,EAAC,SAAQ,CAAC;AAGpC,MAAI,QAAoC;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,MAAM,KAAK,YAAY,SAAS;AAAA,IAC3C,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL;AAEA,SACE,oBAAC,iBAAe,GAAG,OACjB,8BAAC,UAAK,WAAW,MAAM,KAAK,GAC1B,8BAAC,QACC,8BAAC,SAAI,SAAQ,aAAY,OAAM,8BAA6B,UAAS,YACnE,8BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,MAAK,gBAAe,GAAE,KAAI,GACpD,GACF,GACF,GACF;AAEJ;AAEO,aAAM,aAAmD;AAAA,EAC9D,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/build/components/Spinner.js CHANGED Viewed

@@ -43,7 +43,7 @@ export const Spinner = memo(({ size = "medium", className, ...rest }) => {
 });
 export const spinnerTheme = {
   classNames: {
-    root: "inline-flex items-center justify-center fill-neutral-900 text-neutral-200 data-[icon]:-mx-1",
+    root: "inline-flex items-center justify-center fill-neutral-900 text-neutral-200",
     icon: "animate-spin"
   },
   variants: {

package/build/components/Spinner.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Spinner.tsx"],
-  "sourcesContent": ["import {memo} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\n\nexport const useSpinnerTheme = createComponentTheme('Spinner', {\n  variants: {\n    size: ['small', 'medium', 'large', 'surface'],\n  },\n  elements: ['root', 'icon'],\n});\n\nexport type SpinnerProps = ComponentProps<typeof useSpinnerTheme> & {\n  className?: string;\n};\n\nexport const Spinner = memo(({size = 'medium', className, ...rest}: SpinnerProps) => {\n  let theme = useSpinnerTheme({size});\n\n  return (\n    <output className={theme.root(null, className)} data-component=\"spinner\" {...rest}>\n      <svg\n        aria-hidden=\"true\"\n        className={theme.icon()}\n        viewBox=\"0 0 101 101\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z\"\n          fill=\"currentColor\"\n        />\n        <path\n          d=\"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z\"\n          fill=\"currentFill\"\n        />\n      </svg>\n      <span className=\"sr-only\">Loading...</span>\n    </output>\n  );\n});\n\nexport const spinnerTheme: ComponentTheme<typeof useSpinnerTheme> = {\n  classNames: {\n    root: 'inline-flex items-center justify-center fill-neutral-900 text-neutral-200 data-[icon]:-mx-1',\n    icon: 'animate-spin',\n  },\n  variants: {\n    size: {\n      small: {\n        root: '',\n        icon: 'w-4 h-4',\n      },\n      medium: {\n        root: '',\n        icon: 'w-5 h-5',\n      },\n      large: {\n        root: '',\n        icon: 'w-6 h-6',\n      },\n      surface: {\n        root: 'flex',\n        icon: 'w-12 h-12',\n      },\n    },\n  },\n};\n"],
+  "sourcesContent": ["import {memo} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\n\nexport const useSpinnerTheme = createComponentTheme('Spinner', {\n  variants: {\n    size: ['small', 'medium', 'large', 'surface'],\n  },\n  elements: ['root', 'icon'],\n});\n\nexport type SpinnerProps = ComponentProps<typeof useSpinnerTheme> & {\n  className?: string;\n};\n\nexport const Spinner = memo(({size = 'medium', className, ...rest}: SpinnerProps) => {\n  let theme = useSpinnerTheme({size});\n\n  return (\n    <output className={theme.root(null, className)} data-component=\"spinner\" {...rest}>\n      <svg\n        aria-hidden=\"true\"\n        className={theme.icon()}\n        viewBox=\"0 0 101 101\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z\"\n          fill=\"currentColor\"\n        />\n        <path\n          d=\"M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z\"\n          fill=\"currentFill\"\n        />\n      </svg>\n      <span className=\"sr-only\">Loading...</span>\n    </output>\n  );\n});\n\nexport const spinnerTheme: ComponentTheme<typeof useSpinnerTheme> = {\n  classNames: {\n    root: 'inline-flex items-center justify-center fill-neutral-900 text-neutral-200',\n    icon: 'animate-spin',\n  },\n  variants: {\n    size: {\n      small: {\n        root: '',\n        icon: 'w-4 h-4',\n      },\n      medium: {\n        root: '',\n        icon: 'w-5 h-5',\n      },\n      large: {\n        root: '',\n        icon: 'w-6 h-6',\n      },\n      surface: {\n        root: 'flex',\n        icon: 'w-12 h-12',\n      },\n    },\n  },\n};\n"],
   "mappings": ";AAwBM,SAME,KANF;AAxBN,SAAQ,YAAW;AAEnB;AAAA,EAGE;AAAA,OACK;AAEA,aAAM,kBAAkB,qBAAqB,WAAW;AAAA,EAC7D,UAAU;AAAA,IACR,MAAM,CAAC,SAAS,UAAU,SAAS,SAAS;AAAA,EAC9C;AAAA,EACA,UAAU,CAAC,QAAQ,MAAM;AAC3B,CAAC;AAMM,aAAM,UAAU,KAAK,CAAC,EAAC,OAAO,UAAU,WAAW,GAAG,KAAI,MAAoB;AACnF,MAAI,QAAQ,gBAAgB,EAAC,KAAI,CAAC;AAElC,SACE,qBAAC,YAAO,WAAW,MAAM,KAAK,MAAM,SAAS,GAAG,kBAAe,WAAW,GAAG,MAC3E;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAW,MAAM,KAAK;AAAA,QACtB,SAAQ;AAAA,QACR,OAAM;AAAA,QAEN;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA;AAAA,UACP;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,GAAE;AAAA,cACF,MAAK;AAAA;AAAA,UACP;AAAA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,UAAK,WAAU,WAAU,wBAAU;AAAA,KACtC;AAEJ,CAAC;AAEM,aAAM,eAAuD;AAAA,EAClE,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/build/components/TableHead.js CHANGED Viewed

@@ -24,6 +24,6 @@ export function TableHead({
   return createElement(Component, props, children);
 }
 export const tableHeadTheme = {
-  className: "font-sans border-b-2 border-neutral-100"
+  className: "font-sans border-t-2 border-b-2 border-neutral-100"
 };
 //# sourceMappingURL=TableHead.js.map

package/build/components/TableHead.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/TableHead.ts"],
-  "sourcesContent": ["import {\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  type PropsWithChildren,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\n\nexport const useTableHeadTheme = createComponentTheme('TableHead');\n\nconst TABLE_HEAD_ELEMENT = 'thead';\n\nexport type TableHeadProps<T extends ElementType> = ComponentProps<typeof useTableHeadTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    className?: string;\n  };\n\nexport function TableHead<T extends ElementType = typeof TABLE_HEAD_ELEMENT>({\n  as: Component = TABLE_HEAD_ELEMENT as T,\n  className,\n  ref,\n  children,\n  ...rest\n}: TableHeadProps<T>) {\n  let theme = useTableHeadTheme();\n  let props = {\n    ref,\n    className: theme(null, className),\n    'data-component': 'table-head',\n    ...rest,\n  };\n\n  return createElement(Component, props, children);\n}\n\nexport const tableHeadTheme: ComponentTheme<typeof useTableHeadTheme> = {\n  className: 'font-sans border-b-2 border-neutral-100',\n};\n"],
+  "sourcesContent": ["import {\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  type PropsWithChildren,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {type ComponentRef} from './ComponentRef.js';\n\nexport const useTableHeadTheme = createComponentTheme('TableHead');\n\nconst TABLE_HEAD_ELEMENT = 'thead';\n\nexport type TableHeadProps<T extends ElementType> = ComponentProps<typeof useTableHeadTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren & {\n    as?: T | undefined;\n    className?: string;\n  };\n\nexport function TableHead<T extends ElementType = typeof TABLE_HEAD_ELEMENT>({\n  as: Component = TABLE_HEAD_ELEMENT as T,\n  className,\n  ref,\n  children,\n  ...rest\n}: TableHeadProps<T>) {\n  let theme = useTableHeadTheme();\n  let props = {\n    ref,\n    className: theme(null, className),\n    'data-component': 'table-head',\n    ...rest,\n  };\n\n  return createElement(Component, props, children);\n}\n\nexport const tableHeadTheme: ComponentTheme<typeof useTableHeadTheme> = {\n  className: 'font-sans border-t-2 border-b-2 border-neutral-100',\n};\n"],
   "mappings": ";AAAA;AAAA,EAEE;AAAA,OAGK;AAEP;AAAA,EAGE;AAAA,OACK;AAGA,aAAM,oBAAoB,qBAAqB,WAAW;AAEjE,MAAM,qBAAqB;AAUpB,gBAAS,UAA6D;AAAA,EAC3E,IAAI,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,MAAI,QAAQ,kBAAkB;AAC9B,MAAI,QAAQ;AAAA,IACV;AAAA,IACA,WAAW,MAAM,MAAM,SAAS;AAAA,IAChC,kBAAkB;AAAA,IAClB,GAAG;AAAA,EACL;AAEA,SAAO,cAAc,WAAW,OAAO,QAAQ;AACjD;AAEO,aAAM,iBAA2D;AAAA,EACtE,WAAW;AACb;",
   "names": []
 }