@jakubmazanec/ui 0.1.0 → 0.1.1-unstable.91147a2

package/build/components/Button.d.ts

@@ -15,26 +15,26 @@ export declare const useButtonTheme: ((themeProps: {
         };
     };
 };
-export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> & Omit<ComponentPropsWithoutRef<T>, 'type'> & {
+export type ButtonProps<T extends ElementType> = {
     as?: T | undefined;
     submit?: boolean | undefined;
     idle?: boolean | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
     children?: HeadlessButtonProps['children'] | undefined;
-};
-export declare const Button: <T extends ElementType = "button">(props: Partial<import("@jakubmazanec/ts-utils").Writable<{
-    readonly variant: "text" | "solid" | "outline" | "invisible";
-    readonly size: "small" | "medium" | "large";
-    readonly disabled: boolean;
-}>> & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "type"> & {
+} & ComponentProps<typeof useButtonTheme> & Omit<ComponentPropsWithoutRef<T>, 'type'>;
+export declare const Button: <T extends ElementType = "button">(props: {
+    ref?: Ref<HTMLElement> | undefined;
+} & {
     as?: T | undefined;
     submit?: boolean | undefined;
     idle?: boolean | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
     children?: HeadlessButtonProps["children"] | undefined;
-} & {
-    ref?: Ref<HTMLElement> | undefined;
-}) => React.ReactNode;
+} & Partial<import("@jakubmazanec/ts-utils").Writable<{
+    readonly variant: "text" | "solid" | "outline" | "invisible";
+    readonly size: "small" | "medium" | "large";
+    readonly disabled: boolean;
+}>> & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "type">) => React.ReactNode;
 export declare const buttonTheme: ComponentTheme<typeof useButtonTheme>;

package/build/components/Button.js.map

@@ -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  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef} from './internals.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  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    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 const Button = forwardRef(\n  <T extends ElementType = typeof BUTTON_ELEMENT>(\n    {\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      children,\n      ...rest\n    }: ButtonProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\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);\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"],
+  "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  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef} from './internals.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> = {\n  as?: T | undefined;\n  submit?: boolean | undefined;\n  idle?: boolean | undefined;\n  autoFocus?: boolean | undefined;\n  className?: string | 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} & ComponentProps<typeof useButtonTheme> &\n  Omit<ComponentPropsWithoutRef<T>, 'type'>;\n\nexport const Button = forwardRef(\n  <T extends ElementType = typeof BUTTON_ELEMENT>(\n    {\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      children,\n      ...rest\n    }: ButtonProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\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);\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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",
   "names": []
 }

package/build/components/Card.d.ts

@@ -4,16 +4,16 @@ export declare const useCardTheme: (() => (baseClassName?: import("../theme/inte
     componentThemeName: "Card";
     themeDefinition: undefined;
 };
-export type CardProps<T extends ElementType> = ComponentProps<typeof useCardTheme> & ComponentPropsWithoutRef<T> & PropsWithChildren<{
+export type CardProps<T extends ElementType> = {
     as?: T | undefined;
     className?: string;
-}>;
-export declare const Card: <T extends ElementType = "div">(props: import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+} & ComponentProps<typeof useCardTheme> & ComponentPropsWithoutRef<T> & PropsWithChildren;
+export declare const Card: <T extends ElementType = "div">(props: {
+    ref?: Ref<HTMLElement> | undefined;
+} & {
     as?: T | undefined;
     className?: string;
-} & {
+} & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
     children?: import("react").ReactNode | undefined;
-} & {
-    ref?: Ref<HTMLElement> | undefined;
 }) => React.ReactNode;
 export declare const cardTheme: ComponentTheme<typeof useCardTheme>;

package/build/components/Card.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Card.ts"],
-  "sourcesContent": ["import {\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {forwardRef} from './internals.js';\n\nexport const useCardTheme = createComponentTheme('Card');\n\nconst CARD_ELEMENT = 'div';\n\nexport type CardProps<T extends ElementType> = ComponentProps<typeof useCardTheme> &\n  ComponentPropsWithoutRef<T> &\n  PropsWithChildren<{\n    as?: T | undefined;\n    className?: string;\n  }>;\n\nexport const Card = forwardRef(\n  <T extends ElementType = typeof CARD_ELEMENT>(\n    {as: Component = CARD_ELEMENT as T, className, children, ...rest}: CardProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useCardTheme();\n    let props = {\n      ref,\n      className: theme(null, className),\n      'data-component': 'card',\n      ...rest,\n    };\n\n    return createElement(Component, props, children);\n  },\n);\n\nexport const cardTheme: ComponentTheme<typeof useCardTheme> = {\n  className: 'rounded-2 border border-neutral-100 p-4',\n};\n"],
+  "sourcesContent": ["import {\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {forwardRef} from './internals.js';\n\nexport const useCardTheme = createComponentTheme('Card');\n\nconst CARD_ELEMENT = 'div';\n\nexport type CardProps<T extends ElementType> = {\n  as?: T | undefined;\n  className?: string;\n} & ComponentProps<typeof useCardTheme> &\n  ComponentPropsWithoutRef<T> &\n  PropsWithChildren;\n\nexport const Card = forwardRef(\n  <T extends ElementType = typeof CARD_ELEMENT>(\n    {as: Component = CARD_ELEMENT as T, className, children, ...rest}: CardProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useCardTheme();\n    let props = {\n      ref,\n      className: theme(null, className),\n      'data-component': 'card',\n      ...rest,\n    };\n\n    return createElement(Component, props, children);\n  },\n);\n\nexport const cardTheme: ComponentTheme<typeof useCardTheme> = {\n  className: 'rounded-2 border border-neutral-100 p-4',\n};\n"],
   "mappings": ";AAAA;AAAA,EAEE;AAAA,OAIK;AAEP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,kBAAiB;AAElB,aAAM,eAAe,qBAAqB,MAAM;AAEvD,MAAM,eAAe;AASd,aAAM,OAAO;AAAA,EAClB,CACE,EAAC,IAAI,YAAY,cAAmB,WAAW,UAAU,GAAG,KAAI,GAChE,QACG;AACH,QAAI,QAAQ,aAAa;AACzB,QAAI,QAAQ;AAAA,MACV;AAAA,MACA,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL;AAEA,WAAO,cAAc,WAAW,OAAO,QAAQ;AAAA,EACjD;AACF;AAEO,aAAM,YAAiD;AAAA,EAC5D,WAAW;AACb;",
   "names": []
 }

package/build/components/Checkbox.d.ts

@@ -14,7 +14,7 @@ export declare const useCheckboxTheme: ((themeProps: {
         readonly elements: ["root", "icon"];
     };
 };
-export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> & Omit<ComponentPropsWithoutRef<T>, 'onChange'> & {
+export type CheckboxProps<T extends ElementType> = {
     as?: T | undefined;
     checked?: boolean | undefined;
     indeterminate?: boolean | undefined;
@@ -22,10 +22,10 @@ export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useChec
     name?: string;
     className?: string;
     onChange?: ((checked: boolean) => void) | undefined;
-};
-export declare const Checkbox: <T extends ElementType = "span">(props: Partial<import("@jakubmazanec/ts-utils").Writable<{
-    readonly disabled: boolean;
-}>> & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "onChange"> & {
+} & ComponentProps<typeof useCheckboxTheme> & Omit<ComponentPropsWithoutRef<T>, 'onChange'>;
+export declare const Checkbox: <T extends ElementType = "span">(props: {
+    ref?: Ref<HTMLElement> | undefined;
+} & {
     as?: T | undefined;
     checked?: boolean | undefined;
     indeterminate?: boolean | undefined;
@@ -33,7 +33,7 @@ export declare const Checkbox: <T extends ElementType = "span">(props: Partial<i
     name?: string;
     className?: string;
     onChange?: ((checked: boolean) => void) | undefined;
-} & {
-    ref?: Ref<HTMLElement> | undefined;
-}) => React.ReactNode;
+} & Partial<import("@jakubmazanec/ts-utils").Writable<{
+    readonly disabled: boolean;
+}>> & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "onChange">) => React.ReactNode;
 export declare const checkboxTheme: ComponentTheme<typeof useCheckboxTheme>;

package/build/components/Checkbox.js.map

@@ -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, type Ref, useCallback} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef, 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  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 const Checkbox = forwardRef(\n  <T extends ElementType = typeof CHECKBOX_ELEMENT>(\n    {\n      disabled = false,\n      as = CHECKBOX_ELEMENT as T,\n      checked,\n      indeterminate,\n      autoFocus,\n      name,\n      className,\n      onChange,\n      ...rest\n    }: CheckboxProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\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);\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, type Ref, useCallback} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef, 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> = {\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} & ComponentProps<typeof useCheckboxTheme> &\n  Omit<ComponentPropsWithoutRef<T>, 'onChange'>;\n\nexport const Checkbox = forwardRef(\n  <T extends ElementType = typeof CHECKBOX_ELEMENT>(\n    {\n      disabled = false,\n      as = CHECKBOX_ELEMENT as T,\n      checked,\n      indeterminate,\n      autoFocus,\n      name,\n      className,\n      onChange,\n      ...rest\n    }: CheckboxProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\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);\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"],
   "mappings": ";AA6EY;AA7EZ;AAAA,EACE,YAAY;AAAA,OAEP;AACP,SAAmE,mBAAkB;AAErF;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,YAAW;AACnB,SAAQ,YAAY,iBAAgB;AACpC,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;AAalB,aAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,iBAAiB,EAAC,SAAQ,CAAC;AACvC,QAAI,YAAY,aAAa;AAC7B,QAAI,QAAQ,SAAS;AACrB,QAAI,SAAS,UAAU;AAEvB,QAAI,eAAe,YAAY,MAAM;AACnC,iBAAW,CAAC,OAAO;AAAA,IACrB,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,QAAI,SAAS,WAAW;AAEtB,UAAIA,SAAoC;AAAA,QACtC;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,MAAM,OAAO,QAAQ;AAAA,QACrB;AAAA,QACA;AAAA,QACA,WAAW,MAAM,KAAK,YAAY,SAAS;AAAA,QAC3C,kBAAkB;AAAA,QAClB,GAAG;AAAA,MACL;AAEA,aACE,oBAAC,oBAAkB,GAAGA,QACpB,8BAAC,UAAK,WAAW,MAAM,KAAK,GAC1B,8BAAC,QAAK,MAAK,SAAQ,GACrB,GACF;AAAA,IAEJ;AAGA,QAAI,QAAoC;AAAA,MACtC;AAAA,MACA;AAAA,MACA,SAAS,QAAQ,OAAO;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,MAAM,KAAK,YAAY,SAAS;AAAA,MAC3C,kBAAkB;AAAA,MAClB,UAAU;AAAA,MACV,GAAG;AAAA,IACL;AAEA,WACE,oBAAC,oBAAkB,GAAG,OACpB,8BAAC,UAAK,WAAW,MAAM,KAAK,GAC1B,8BAAC,QAAK,MAAK,SAAQ,GACrB,GACF;AAAA,EAEJ;AACF;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/CheckboxField.d.ts

@@ -5,7 +5,7 @@ export declare const useCheckboxFieldTheme: (() => (baseClassName?: import("../t
     componentThemeName: "CheckboxField";
     themeDefinition: undefined;
 };
-export type CheckboxFieldProps = PropsWithChildren<ComponentProps<typeof useCheckboxFieldTheme> & ({
+export type CheckboxFieldProps = PropsWithChildren<({
     className?: string | undefined;
     field?: FieldMetadata<any, any> | undefined;
     name?: undefined;
@@ -13,6 +13,6 @@ export type CheckboxFieldProps = PropsWithChildren<ComponentProps<typeof useChec
     className?: string | undefined;
     field?: undefined;
     name?: FieldName<any, any> | string | undefined;
-})>;
+}) & ComponentProps<typeof useCheckboxFieldTheme>>;
 export declare function CheckboxField({ field, name, className, children }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
 export declare const checkboxFieldTheme: ComponentTheme<typeof useCheckboxFieldTheme>;

package/build/components/CheckboxField.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/CheckboxField.tsx"],
-  "sourcesContent": ["import {type FieldMetadata, type FieldName} from '@conform-to/react';\nimport {Field as HeadlessField} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {fieldContext, fieldNameContext} from './internals.js';\n\nexport const useCheckboxFieldTheme = createComponentTheme('CheckboxField');\n\nexport type CheckboxFieldProps = PropsWithChildren<\n  ComponentProps<typeof useCheckboxFieldTheme> &\n    (\n      | {\n          className?: string | undefined;\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n          field?: FieldMetadata<any, any> | undefined;\n          name?: undefined;\n        }\n      | {\n          className?: string | undefined;\n          field?: undefined;\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n          name?: FieldName<any, any> | string | undefined;\n        }\n    )\n>;\n\nexport function CheckboxField({field, name, className, children}: CheckboxFieldProps) {\n  let theme = useCheckboxFieldTheme();\n\n  if (field) {\n    return (\n      <fieldContext.Provider value={field}>\n        <HeadlessField className={theme(null, className)} data-component=\"checkbox-field\">\n          {children}\n        </HeadlessField>\n      </fieldContext.Provider>\n    );\n  }\n\n  if (name) {\n    return (\n      <fieldNameContext.Provider value={name}>\n        <HeadlessField className={theme(null, className)} data-component=\"checkbox-field\">\n          {children}\n        </HeadlessField>\n      </fieldNameContext.Provider>\n    );\n  }\n\n  return <HeadlessField className={theme(null, className)}>{children}</HeadlessField>;\n}\n\nexport const checkboxFieldTheme: ComponentTheme<typeof useCheckboxFieldTheme> = {\n  className:\n    'grid grid-cols-[theme(spacing.5)_1fr] gap-x-2 gap-y-1 [&>[data-component=description]]:col-start-2',\n};\n"],
+  "sourcesContent": ["import {type FieldMetadata, type FieldName} from '@conform-to/react';\nimport {Field as HeadlessField} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {fieldContext, fieldNameContext} from './internals.js';\n\nexport const useCheckboxFieldTheme = createComponentTheme('CheckboxField');\n\nexport type CheckboxFieldProps = PropsWithChildren<\n  (\n    | {\n        className?: string | undefined;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n        field?: FieldMetadata<any, any> | undefined;\n        name?: undefined;\n      }\n    | {\n        className?: string | undefined;\n        field?: undefined;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n        name?: FieldName<any, any> | string | undefined;\n      }\n  ) &\n    ComponentProps<typeof useCheckboxFieldTheme>\n>;\n\nexport function CheckboxField({field, name, className, children}: CheckboxFieldProps) {\n  let theme = useCheckboxFieldTheme();\n\n  if (field) {\n    return (\n      <fieldContext.Provider value={field}>\n        <HeadlessField className={theme(null, className)} data-component=\"checkbox-field\">\n          {children}\n        </HeadlessField>\n      </fieldContext.Provider>\n    );\n  }\n\n  if (name) {\n    return (\n      <fieldNameContext.Provider value={name}>\n        <HeadlessField className={theme(null, className)} data-component=\"checkbox-field\">\n          {children}\n        </HeadlessField>\n      </fieldNameContext.Provider>\n    );\n  }\n\n  return <HeadlessField className={theme(null, className)}>{children}</HeadlessField>;\n}\n\nexport const checkboxFieldTheme: ComponentTheme<typeof useCheckboxFieldTheme> = {\n  className:\n    'grid grid-cols-[theme(spacing.5)_1fr] gap-x-2 gap-y-1 [&>[data-component=description]]:col-start-2',\n};\n"],
   "mappings": ";AAqCQ;AApCR,SAAQ,SAAS,qBAAoB;AAGrC;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,cAAc,wBAAuB;AAEtC,aAAM,wBAAwB,qBAAqB,eAAe;AAoBlE,gBAAS,cAAc,EAAC,OAAO,MAAM,WAAW,SAAQ,GAAuB;AACpF,MAAI,QAAQ,sBAAsB;AAElC,MAAI,OAAO;AACT,WACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAC5B,8BAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAG,kBAAe,kBAC9D,UACH,GACF;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,MAChC,8BAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAG,kBAAe,kBAC9D,UACH,GACF;AAAA,EAEJ;AAEA,SAAO,oBAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AACrE;AAEO,aAAM,qBAAmE;AAAA,EAC9E,WACE;AACJ;",
   "names": []
 }

package/build/components/Combobox.d.ts

@@ -22,10 +22,10 @@ export type ComboboxItem<V> = {
     value: V;
     label: string;
 };
-export type ComboboxProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useComboboxTheme> & ComponentPropsWithoutRef<T> & ({
+export type ComboboxProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<({
     as?: T | undefined;
-    value?: V | undefined;
-    defaultValue?: V | undefined;
+    value?: undefined | V;
+    defaultValue?: undefined | V;
     multiple?: false | undefined;
     items?: Array<ComboboxItem<V>> | undefined;
     placeholder?: string;
@@ -34,11 +34,11 @@ export type ComboboxProps<T extends ElementType, V extends boolean | number | st
     customValue?: boolean | undefined;
     name?: string | undefined;
     className?: string;
-    onChange?: (selectedValue: V | undefined) => void;
+    onChange?: (selectedValue: undefined | V) => void;
 } | {
     as?: T | undefined;
-    value?: V[] | undefined;
-    defaultValue?: V[] | undefined;
+    value?: undefined | V[];
+    defaultValue?: undefined | V[];
     multiple: true;
     items?: Array<ComboboxItem<V>> | undefined;
     placeholder?: string;
@@ -47,11 +47,11 @@ export type ComboboxProps<T extends ElementType, V extends boolean | number | st
     customValue?: boolean | undefined;
     name?: string | undefined;
     className?: string;
-    onChange?: (selectedValue: V[] | undefined) => void;
-})>;
+    onChange?: (selectedValue: undefined | V[]) => void;
+}) & ComponentProps<typeof useComboboxTheme> & ComponentPropsWithoutRef<T>>;
 export declare const Combobox: <T extends ElementType = import("react").ExoticComponent<{
     children?: import("react").ReactNode | undefined;
-}>, V extends boolean | number | string = string>(props: ComboboxProps<T, V> & {
+}>, V extends boolean | number | string = string>(props: {
     ref?: Ref<HTMLElement> | undefined;
-}) => React.ReactNode;
+} & ComboboxProps<T, V>) => React.ReactNode;
 export declare const comboboxTheme: ComponentTheme<typeof useComboboxTheme>;

package/build/components/Combobox.js

@@ -118,19 +118,19 @@ export const Combobox = forwardRef(
           HeadlessComboboxInput,
           {
             className: theme.input(null, className),
-            size: 1,
             displayValue,
+            size: 1,
             onChange: handleQueryChange
           }
         ),
         /* @__PURE__ */ jsx(HeadlessComboboxButton, { className: theme.icon("absolute"), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) }) })
       ] }),
-      virtual && filteredItems ? /* @__PURE__ */ jsx(HeadlessComboboxOptions, { className: theme.options(), anchor: "bottom start", children: ({ option }) => /* @__PURE__ */ jsx(ComboboxOption, { value: option, children: items?.find((item) => item.value === option)?.label }) }) : null,
-      !virtual && filteredItems ? /* @__PURE__ */ jsxs(HeadlessComboboxOptions, { className: theme.options(), anchor: "bottom start", children: [
+      virtual && filteredItems ? /* @__PURE__ */ jsx(HeadlessComboboxOptions, { anchor: "bottom start", className: theme.options(), children: ({ option }) => /* @__PURE__ */ jsx(ComboboxOption, { value: option, children: items?.find((item) => item.value === option)?.label }) }) : null,
+      !virtual && filteredItems ? /* @__PURE__ */ jsxs(HeadlessComboboxOptions, { anchor: "bottom start", className: theme.options(), children: [
         customValue && query.length ? /* @__PURE__ */ jsx(ComboboxOption, { value: query, children: query }, query) : null,
         filteredItems.map((item) => /* @__PURE__ */ jsx(ComboboxOption, { value: item.value, children: item.label }, String(item.value)))
       ] }) : null,
-      !filteredItems && Array.isArray(filteredChildren) ? /* @__PURE__ */ jsxs(HeadlessComboboxOptions, { className: theme.options(), anchor: "bottom start", children: [
+      !filteredItems && Array.isArray(filteredChildren) ? /* @__PURE__ */ jsxs(HeadlessComboboxOptions, { anchor: "bottom start", className: theme.options(), children: [
         customValue && query.length ? /* @__PURE__ */ jsx(ComboboxOption, { value: query, children: query }) : null,
         filteredChildren
       ] }) : null

package/build/components/Combobox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Combobox.tsx"],
-  "sourcesContent": ["// TODO: fix somehow\n/* eslint-disable complexity -- TODO */\nimport {\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  type Ref,\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 {Icon} from './Icon.js';\nimport {forwardRef, 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> = PropsWithChildren<\n  ComponentProps<typeof useComboboxTheme> &\n    ComponentPropsWithoutRef<T> &\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          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>;\n\nexport const Combobox = forwardRef(\n  <T extends ElementType = typeof COMBOBOX_ELEMENT, 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      children,\n      ...rest\n    }: ComboboxProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\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            .replace(/\\s+/g, '')\n            .includes(query.toLowerCase().replace(/\\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              .replace(/\\s+/g, '')\n              .includes(query.toLowerCase().replace(/\\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 ?? null,\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            size={1} // so the input default width without styling is small\n            displayValue={displayValue}\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 className={theme.options()} anchor=\"bottom start\">\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 className={theme.options()} anchor=\"bottom start\">\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 className={theme.options()} anchor=\"bottom start\">\n            {customValue && query.length ?\n              <ComboboxOption value={query}>{query}</ComboboxOption>\n            : null}\n            {filteredChildren}\n          </HeadlessComboboxOptions>\n        : null}\n      </HeadlessCombobox>\n    );\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"],
-  "mappings": "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",
+  "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  type Ref,\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 {Icon} from './Icon.js';\nimport {forwardRef, 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> = PropsWithChildren<\n  (\n    | {\n        as?: T | undefined;\n        value?: undefined | V;\n        defaultValue?: undefined | V;\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: undefined | V) => void;\n      }\n    | {\n        as?: T | undefined;\n        value?: undefined | V[];\n        defaultValue?: undefined | V[];\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: undefined | V[]) => void;\n      }\n  ) &\n    ComponentProps<typeof useComboboxTheme> &\n    ComponentPropsWithoutRef<T>\n>;\n\nexport const Combobox = forwardRef(\n  <T extends ElementType = typeof COMBOBOX_ELEMENT, 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      children,\n      ...rest\n    }: ComboboxProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\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: null | V) => {\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            .replace(/\\s+/g, '')\n            .includes(query.toLowerCase().replace(/\\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?: string | unknown[]}).children === 'string' &&\n            (child.props as {children: string}).children\n              .toLowerCase()\n              .replace(/\\s+/g, '')\n              .includes(query.toLowerCase().replace(/\\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 ?? null,\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);\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"],
+  "mappings": ";AA4MQ,SACE,KADF;AA5MR;AAAA,EACE,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,OAEd;AACP,SAAQ,uBAAsB;AAC9B;AAAA,EAEE;AAAA,EAGA;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,sBAAqB;AAC7B,SAAQ,YAAW;AACnB,SAAQ,YAAY,iBAAgB;AACpC,SAAQ,gBAAe;AACvB,SAAQ,oBAAmB;AAEpB,aAAM,mBAAmB,qBAAqB,YAAY;AAAA,EAC/D,UAAU,EAAC,UAAU,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,KAAK,EAAC;AAAA,EAC1D,UAAU,CAAC,QAAQ,SAAS,QAAQ,SAAS;AAC/C,CAAC;AAED,MAAM,mBAAmB;AA6ClB,aAAM,WAAW;AAAA,EACtB,CACE;AAAA,IACE,WAAW;AAAA,IACX,UAAU;AAAA,IACV,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,iBAAiB,EAAC,UAAU,QAAO,CAAC;AAChD,QAAI,SAAS,UAAU;AACvB,QAAI,QAAQ,SAAS;AACrB,QAAI,YAAY,aAAa;AAC7B,QAAI,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AAEnC,QAAI,eAAe;AAAA,MACjB,CAAC,kBAA4B;AAC3B,YAAI,eAAe;AACjB,qBAAW,aAAwB;AAAA,QACrC;AAEA,YAAI,kBAAkB,MAAM;AAC1B,qBAAW,MAAS;AAAA,QACtB;AAAA,MACF;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,QAAI,eAAe;AAAA,MACjB,CAAC,WAAmB;AAClB,YAAI,OAAO;AACT,cAAI,eAAe,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,MAAM;AAE7D,cAAI,cAAc;AAChB,mBAAO,aAAa;AAAA,UACtB;AAAA,QACF;AAEA,eAAO;AAAA,MACT;AAAA,MACA,CAAC,KAAK;AAAA,IACR;AAEA,QAAI,oBAAoB,YAAY,CAAC,UAAyC;AAC5E,eAAS,MAAM,OAAO,KAAK;AAAA,IAC7B,GAAG,CAAC,CAAC;AAEL,QAAI,WAAW,CAAC,OAAO;AACrB,YAAM,IAAI,MAAM,2DAA2D;AAAA,IAC7E;AAEA,QAAI,WAAW,aAAa;AAC1B,YAAM,IAAI,MAAM,wEAAwE;AAAA,IAC1F;AAEA,QAAI,SAAS,UAAU;AACrB,YAAM,IAAI,MAAM,yDAAyD;AAAA,IAC3E;AAEA,QAAI,gBACF,QACE,OAAO;AAAA,MAAO,CAAC,SACb,GAAG,KAAK,KAAwB,GAC7B,YAAY,EACZ,QAAQ,QAAQ,EAAE,EAClB,SAAS,MAAM,YAAY,EAAE,QAAQ,QAAQ,EAAE,CAAC;AAAA,IACrD,IACA;AACJ,QAAI,mBACF,QACE,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAC,UAAU;AAC3C,UACE,OAAO,UAAU,YACjB,WAAW,SACX,OAAO,MAAM,UAAU,YACvB,OAAQ,MAAM,MAA0C,aAAa,YACpE,MAAM,MAA6B,SACjC,YAAY,EACZ,QAAQ,QAAQ,EAAE,EAClB,SAAS,MAAM,YAAY,EAAE,QAAQ,QAAQ,EAAE,CAAC,GACnD;AACA,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT,CAAC,IACD;AAEJ,QAAI,QAA8C;AAAA,MAChD;AAAA,MACA;AAAA,MACA,MAAM,OAAO,QAAQ,aAAa;AAAA,MAClC,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,UAAU;AAAA,MACV,GAAG;AAAA,IACL;AAEA,QAAI,SAAS;AACX,YAAM,UAAU;AAAA,QACd,SAAS,eAAe,IAAI,CAAC,SAAS,KAAK,KAAK,KAAK,CAAC;AAAA,MACxD;AAAA,IACF;AAEA,WACE,qBAAC,oBAAkB,GAAG,OACpB;AAAA,2BAAC,SAAI,WAAW,MAAM,KAAK,YAAY,SAAS,GAAG,kBAAe,YAChE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,MAAM,MAAM,MAAM,SAAS;AAAA,YACtC;AAAA,YACA,MAAM;AAAA,YACN,UAAU;AAAA;AAAA,QACZ;AAAA,QACA,oBAAC,0BAAuB,WAAW,MAAM,KAAK,UAAU,GACtD,8BAAC,QACC,8BAAC,mBAAgB,GACnB,GACF;AAAA,SACF;AAAA,MAEC,WAAW,gBACV,oBAAC,2BAAwB,QAAO,gBAAe,WAAW,MAAM,QAAQ,GACrE,WAAC,EAAC,OAAM,MACP,oBAAC,kBAAe,OAAO,QACpB,iBAAO,KAAK,CAAC,SAAS,KAAK,UAAU,MAAM,GAAG,OACjD,GAEJ,IACA;AAAA,MAED,CAAC,WAAW,gBACX,qBAAC,2BAAwB,QAAO,gBAAe,WAAW,MAAM,QAAQ,GACrE;AAAA,uBAAe,MAAM,SACpB,oBAAC,kBAA2B,OAAO,OAChC,mBADkB,KAErB,IACA;AAAA,QACD,cAAc,IAAI,CAAC,SAClB,oBAAC,kBAAwC,OAAO,KAAK,OAClD,eAAK,SADa,OAAO,KAAK,KAAK,CAEtC,CACD;AAAA,SACH,IACA;AAAA,MAED,CAAC,iBAAiB,MAAM,QAAQ,gBAAgB,IAC/C,qBAAC,2BAAwB,QAAO,gBAAe,WAAW,MAAM,QAAQ,GACrE;AAAA,uBAAe,MAAM,SACpB,oBAAC,kBAAe,OAAO,OAAQ,iBAAM,IACrC;AAAA,QACD;AAAA,SACH,IACA;AAAA,OACJ;AAAA,EAEJ;AACF;AAEO,aAAM,gBAAyD;AAAA,EACpE,YAAY;AAAA,IACV,MAAM;AAAA,IACN,OACE;AAAA,IACF,MAAM;AAAA,IACN,SACE;AAAA,EACJ;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/build/components/ComboboxOption.d.ts

@@ -14,20 +14,20 @@ export declare const useComboboxOptionTheme: ((themeProps: {
         readonly elements: ["root", "icon"];
     };
 };
-export type ComboboxOptionProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useComboboxOptionTheme> & ComponentPropsWithoutRef<T> & {
+export type ComboboxOptionProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<{
     as?: T | undefined;
     value: V;
     className?: string;
-}>;
-export declare const ComboboxOption: <T extends ElementType = "div", V extends boolean | number | string = string>(props: Partial<import("@jakubmazanec/ts-utils").Writable<{
-    readonly disabled: boolean;
-}>> & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+} & ComponentProps<typeof useComboboxOptionTheme> & ComponentPropsWithoutRef<T>>;
+export declare const ComboboxOption: <T extends ElementType = "div", V extends boolean | number | string = string>(props: {
+    ref?: Ref<HTMLElement> | undefined;
+} & {
     as?: T | undefined;
     value: V;
     className?: string;
-} & {
+} & Partial<import("@jakubmazanec/ts-utils").Writable<{
+    readonly disabled: boolean;
+}>> & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
     children?: import("react").ReactNode | undefined;
-} & {
-    ref?: Ref<HTMLElement> | undefined;
 }) => React.ReactNode;
 export declare const comboboxOptionTheme: ComponentTheme<typeof useComboboxOptionTheme>;

package/build/components/ComboboxOption.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/ComboboxOption.tsx"],
-  "sourcesContent": ["import {\n  ComboboxOption as HeadlessComboboxOption,\n  type ComboboxOptionProps as HeadlessComboboxOptionProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef} from './internals.js';\n\nexport const useComboboxOptionTheme = createComponentTheme('ComboboxOption', {\n  variants: {disabled: [true, false]},\n  elements: ['root', 'icon'],\n});\n\nconst LISTBOX_OPTION_ELEMENT = 'div';\n\nexport type ComboboxOptionProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = PropsWithChildren<\n  ComponentProps<typeof useComboboxOptionTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      value: V;\n      className?: string;\n    }\n>;\n\nexport const ComboboxOption = forwardRef(\n  <\n    T extends ElementType = typeof LISTBOX_OPTION_ELEMENT,\n    V extends boolean | number | string = string,\n  >(\n    {\n      disabled = false,\n      as = LISTBOX_OPTION_ELEMENT as T,\n      value,\n      className,\n      children,\n      ...rest\n    }: ComboboxOptionProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useComboboxOptionTheme({disabled});\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessComboboxOptionProps<any, any> = {\n      as,\n      ref,\n      value,\n      disabled,\n      className: theme.root('cursor-pointer', className),\n      'data-component': 'combobox-option',\n      ...rest,\n    };\n\n    return (\n      <HeadlessComboboxOption {...props}>\n        <span className={theme.icon('absolute')}>\n          <Icon name=\"Check\" />\n        </span>\n        {children}\n      </HeadlessComboboxOption>\n    );\n  },\n);\n\nexport const comboboxOptionTheme: ComponentTheme<typeof useComboboxOptionTheme> = {\n  classNames: {\n    root: 'relative 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  ComboboxOption as HeadlessComboboxOption,\n  type ComboboxOptionProps as HeadlessComboboxOptionProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {forwardRef} from './internals.js';\n\nexport const useComboboxOptionTheme = createComponentTheme('ComboboxOption', {\n  variants: {disabled: [true, false]},\n  elements: ['root', 'icon'],\n});\n\nconst LISTBOX_OPTION_ELEMENT = 'div';\n\nexport type ComboboxOptionProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = PropsWithChildren<\n  {\n    as?: T | undefined;\n    value: V;\n    className?: string;\n  } & ComponentProps<typeof useComboboxOptionTheme> &\n    ComponentPropsWithoutRef<T>\n>;\n\nexport const ComboboxOption = forwardRef(\n  <\n    T extends ElementType = typeof LISTBOX_OPTION_ELEMENT,\n    V extends boolean | number | string = string,\n  >(\n    {\n      disabled = false,\n      as = LISTBOX_OPTION_ELEMENT as T,\n      value,\n      className,\n      children,\n      ...rest\n    }: ComboboxOptionProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useComboboxOptionTheme({disabled});\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessComboboxOptionProps<any, any> = {\n      as,\n      ref,\n      value,\n      disabled,\n      className: theme.root('cursor-pointer', className),\n      'data-component': 'combobox-option',\n      ...rest,\n    };\n\n    return (\n      <HeadlessComboboxOption {...props}>\n        <span className={theme.icon('absolute')}>\n          <Icon name=\"Check\" />\n        </span>\n        {children}\n      </HeadlessComboboxOption>\n    );\n  },\n);\n\nexport const comboboxOptionTheme: ComponentTheme<typeof useComboboxOptionTheme> = {\n  classNames: {\n    root: 'relative 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"],
   "mappings": ";AAmEM,SAEI,KAFJ;AAnEN;AAAA,EACE,kBAAkB;AAAA,OAEb;AAQP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,YAAW;AACnB,SAAQ,kBAAiB;AAElB,aAAM,yBAAyB,qBAAqB,kBAAkB;AAAA,EAC3E,UAAU,EAAC,UAAU,CAAC,MAAM,KAAK,EAAC;AAAA,EAClC,UAAU,CAAC,QAAQ,MAAM;AAC3B,CAAC;AAED,MAAM,yBAAyB;AAcxB,aAAM,iBAAiB;AAAA,EAC5B,CAIE;AAAA,IACE,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,uBAAuB,EAAC,SAAQ,CAAC;AAG7C,QAAI,QAA+C;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,MAAM,KAAK,kBAAkB,SAAS;AAAA,MACjD,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL;AAEA,WACE,qBAAC,0BAAwB,GAAG,OAC1B;AAAA,0BAAC,UAAK,WAAW,MAAM,KAAK,UAAU,GACpC,8BAAC,QAAK,MAAK,SAAQ,GACrB;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AACF;AAEO,aAAM,sBAAqE;AAAA,EAChF,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/Container.d.ts

@@ -16,21 +16,21 @@ export declare const useContainerTheme: ((themeProps: {
         };
     };
 };
-export type ContainerProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useContainerTheme> & ComponentPropsWithoutRef<T> & {
+export type ContainerProps<T extends ElementType> = PropsWithChildren<{
     as?: T | undefined;
     className?: string;
-}>;
-export declare const Container: <T extends ElementType = "div">(props: Partial<import("@jakubmazanec/ts-utils").Writable<{
+} & ComponentProps<typeof useContainerTheme> & ComponentPropsWithoutRef<T>>;
+export declare const Container: <T extends ElementType = "div">(props: {
+    ref?: Ref<HTMLElement> | undefined;
+} & {
+    as?: T | undefined;
+    className?: string;
+} & Partial<import("@jakubmazanec/ts-utils").Writable<{
     readonly spacing: "small" | "medium" | "large" | "extra-small";
     readonly direction: "row" | "column";
     readonly justify: "center" | "normal" | "spaced";
     readonly align: "center" | "normal";
 }>> & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
-    as?: T | undefined;
-    className?: string;
-} & {
     children?: import("react").ReactNode | undefined;
-} & {
-    ref?: Ref<HTMLElement> | undefined;
 }) => React.ReactNode;
 export declare const containerTheme: ComponentTheme<typeof useContainerTheme>;

package/build/components/Container.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Container.ts"],
-  "sourcesContent": ["import {\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {forwardRef} from './internals.js';\n\nexport const useContainerTheme = createComponentTheme('Container', {\n  variants: {\n    spacing: ['extra-small', 'small', 'medium', 'large'],\n    direction: ['row', 'column'],\n    justify: ['normal', 'center', 'spaced'],\n    align: ['normal', 'center'],\n  },\n});\n\nconst TEXT_ELEMENT = 'div';\n\nexport type ContainerProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useContainerTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      className?: string;\n    }\n>;\n\nexport const Container = forwardRef(\n  <T extends ElementType = typeof TEXT_ELEMENT>(\n    {\n      spacing = 'medium',\n      direction = 'row',\n      justify = 'normal',\n      align = 'normal',\n      as: Component = TEXT_ELEMENT as T,\n      className,\n      children,\n      ...rest\n    }: ContainerProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useContainerTheme({spacing, direction, justify, align});\n    let props = {\n      ref,\n      className: theme(null, className),\n      'data-component': 'container',\n      ...rest,\n    };\n\n    return createElement(Component, props, children);\n  },\n);\n\nexport const containerTheme: ComponentTheme<typeof useContainerTheme> = {\n  className: 'flex',\n  variants: {\n    spacing: {\n      'extra-small': 'gap-1',\n      small: 'gap-2',\n      medium: 'gap-4',\n      large: 'gap-6',\n    },\n    direction: {\n      row: '',\n      column: 'flex-col',\n    },\n    justify: {\n      normal: '',\n      center: 'justify-center',\n      spaced: 'justify-between',\n    },\n    align: {\n      normal: '',\n      center: 'items-center',\n    },\n  },\n};\n"],
+  "sourcesContent": ["import {\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {forwardRef} from './internals.js';\n\nexport const useContainerTheme = createComponentTheme('Container', {\n  variants: {\n    spacing: ['extra-small', 'small', 'medium', 'large'],\n    direction: ['row', 'column'],\n    justify: ['normal', 'center', 'spaced'],\n    align: ['normal', 'center'],\n  },\n});\n\nconst TEXT_ELEMENT = 'div';\n\nexport type ContainerProps<T extends ElementType> = PropsWithChildren<\n  {\n    as?: T | undefined;\n    className?: string;\n  } & ComponentProps<typeof useContainerTheme> &\n    ComponentPropsWithoutRef<T>\n>;\n\nexport const Container = forwardRef(\n  <T extends ElementType = typeof TEXT_ELEMENT>(\n    {\n      spacing = 'medium',\n      direction = 'row',\n      justify = 'normal',\n      align = 'normal',\n      as: Component = TEXT_ELEMENT as T,\n      className,\n      children,\n      ...rest\n    }: ContainerProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useContainerTheme({spacing, direction, justify, align});\n    let props = {\n      ref,\n      className: theme(null, className),\n      'data-component': 'container',\n      ...rest,\n    };\n\n    return createElement(Component, props, children);\n  },\n);\n\nexport const containerTheme: ComponentTheme<typeof useContainerTheme> = {\n  className: 'flex',\n  variants: {\n    spacing: {\n      'extra-small': 'gap-1',\n      small: 'gap-2',\n      medium: 'gap-4',\n      large: 'gap-6',\n    },\n    direction: {\n      row: '',\n      column: 'flex-col',\n    },\n    justify: {\n      normal: '',\n      center: 'justify-center',\n      spaced: 'justify-between',\n    },\n    align: {\n      normal: '',\n      center: 'items-center',\n    },\n  },\n};\n"],
   "mappings": ";AAAA;AAAA,EAEE;AAAA,OAIK;AAEP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,kBAAiB;AAElB,aAAM,oBAAoB,qBAAqB,aAAa;AAAA,EACjE,UAAU;AAAA,IACR,SAAS,CAAC,eAAe,SAAS,UAAU,OAAO;AAAA,IACnD,WAAW,CAAC,OAAO,QAAQ;AAAA,IAC3B,SAAS,CAAC,UAAU,UAAU,QAAQ;AAAA,IACtC,OAAO,CAAC,UAAU,QAAQ;AAAA,EAC5B;AACF,CAAC;AAED,MAAM,eAAe;AAUd,aAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,kBAAkB,EAAC,SAAS,WAAW,SAAS,MAAK,CAAC;AAClE,QAAI,QAAQ;AAAA,MACV;AAAA,MACA,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL;AAEA,WAAO,cAAc,WAAW,OAAO,QAAQ;AAAA,EACjD;AACF;AAEO,aAAM,iBAA2D;AAAA,EACtE,WAAW;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAAA,IACA,WAAW;AAAA,MACT,KAAK;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AACF;",
   "names": []
 }

package/build/components/Description.d.ts

@@ -4,16 +4,16 @@ export declare const useDescriptionTheme: (() => (baseClassName?: import("../the
     componentThemeName: "Description";
     themeDefinition: undefined;
 };
-export type DescriptionProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDescriptionTheme> & ComponentPropsWithoutRef<T> & {
+export type DescriptionProps<T extends ElementType> = PropsWithChildren<{
     as?: T | undefined;
     className?: string | undefined;
-}>;
-export declare const Description: <T extends ElementType = "p">(props: import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+} & ComponentProps<typeof useDescriptionTheme> & ComponentPropsWithoutRef<T>>;
+export declare const Description: <T extends ElementType = "p">(props: {
+    ref?: Ref<HTMLElement> | undefined;
+} & {
     as?: T | undefined;
     className?: string | undefined;
-} & {
+} & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
     children?: import("react").ReactNode | undefined;
-} & {
-    ref?: Ref<HTMLElement> | undefined;
 }) => React.ReactNode;
 export declare const descriptionTheme: ComponentTheme<typeof useDescriptionTheme>;

package/build/components/Description.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Description.tsx"],
-  "sourcesContent": ["import {\n  Description as HeadlessDescription,\n  type DescriptionProps as HeadlessDescriptionProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {filterProps, forwardRef} from './internals.js';\n\nexport const useDescriptionTheme = createComponentTheme('Description');\n\nconst DESCRIPTION_ELEMENT = 'p';\n\nexport type DescriptionProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useDescriptionTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      className?: string | undefined;\n    }\n>;\n\nexport const Description = forwardRef(\n  <T extends ElementType = typeof DESCRIPTION_ELEMENT>(\n    {as = DESCRIPTION_ELEMENT as T, className, children, ...rest}: DescriptionProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useDescriptionTheme();\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessDescriptionProps<any> = filterProps({\n      as,\n      ref,\n      className: theme(null, className),\n      'data-component': 'description',\n      ...rest,\n    });\n\n    return <HeadlessDescription {...props}>{children}</HeadlessDescription>;\n  },\n);\n\nexport const descriptionTheme: ComponentTheme<typeof useDescriptionTheme> = {\n  className: 'font-sans text-sm',\n};\n"],
+  "sourcesContent": ["import {\n  Description as HeadlessDescription,\n  type DescriptionProps as HeadlessDescriptionProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {filterProps, forwardRef} from './internals.js';\n\nexport const useDescriptionTheme = createComponentTheme('Description');\n\nconst DESCRIPTION_ELEMENT = 'p';\n\nexport type DescriptionProps<T extends ElementType> = PropsWithChildren<\n  {\n    as?: T | undefined;\n    className?: string | undefined;\n  } & ComponentProps<typeof useDescriptionTheme> &\n    ComponentPropsWithoutRef<T>\n>;\n\nexport const Description = forwardRef(\n  <T extends ElementType = typeof DESCRIPTION_ELEMENT>(\n    {as = DESCRIPTION_ELEMENT as T, className, children, ...rest}: DescriptionProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useDescriptionTheme();\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessDescriptionProps<any> = filterProps({\n      as,\n      ref,\n      className: theme(null, className),\n      'data-component': 'description',\n      ...rest,\n    });\n\n    return <HeadlessDescription {...props}>{children}</HeadlessDescription>;\n  },\n);\n\nexport const descriptionTheme: ComponentTheme<typeof useDescriptionTheme> = {\n  className: 'font-sans text-sm',\n};\n"],
   "mappings": ";AA6CW;AA7CX;AAAA,EACE,eAAe;AAAA,OAEV;AAQP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,aAAa,kBAAiB;AAE/B,aAAM,sBAAsB,qBAAqB,aAAa;AAErE,MAAM,sBAAsB;AAUrB,aAAM,cAAc;AAAA,EACzB,CACE,EAAC,KAAK,qBAA0B,WAAW,UAAU,GAAG,KAAI,GAC5D,QACG;AACH,QAAI,QAAQ,oBAAoB;AAEhC,QAAI,QAAuC,YAAY;AAAA,MACrD;AAAA,MACA;AAAA,MACA,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL,CAAC;AAED,WAAO,oBAAC,uBAAqB,GAAG,OAAQ,UAAS;AAAA,EACnD;AACF;AAEO,aAAM,mBAA+D;AAAA,EAC1E,WAAW;AACb;",
   "names": []
 }

package/build/components/Dialog.d.ts

@@ -9,24 +9,24 @@ export declare const useDialogTheme: (() => {
         readonly elements: ["root", "backdrop"];
     };
 };
-export type DialogProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDialogTheme> & ComponentPropsWithoutRef<T> & {
+export type DialogProps<T extends ElementType> = PropsWithChildren<{
     as?: T | undefined;
     open: boolean;
     static?: boolean | undefined;
     autoFocus?: boolean | undefined;
     className?: string;
     onClose?: () => void;
-}>;
-export declare const Dialog: <T extends ElementType = "div">(props: import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+} & ComponentProps<typeof useDialogTheme> & ComponentPropsWithoutRef<T>>;
+export declare const Dialog: <T extends ElementType = "div">(props: {
+    ref?: Ref<HTMLElement> | undefined;
+} & {
     as?: T | undefined;
     open: boolean;
     static?: boolean | undefined;
     autoFocus?: boolean | undefined;
     className?: string;
     onClose?: () => void;
-} & {
+} & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
     children?: import("react").ReactNode | undefined;
-} & {
-    ref?: Ref<HTMLElement> | undefined;
 }) => React.ReactNode;
 export declare const dialogTheme: ComponentTheme<typeof useDialogTheme>;

package/build/components/Dialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Dialog.tsx"],
-  "sourcesContent": ["import {\n  Dialog as HeadlessDialog,\n  DialogBackdrop as HeadlessDialogBackdrop,\n  type DialogProps as HeadlessDialogProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n  useCallback,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {filterProps, forwardRef} from './internals.js';\n\nexport const useDialogTheme = createComponentTheme('Dialog', {\n  elements: ['root', 'backdrop'],\n});\n\nconst DIALOG_ELEMENT = 'div';\n\nexport type DialogProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useDialogTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      open: boolean;\n      static?: boolean | undefined;\n      autoFocus?: boolean | undefined;\n      className?: string;\n      onClose?: () => void;\n    }\n>;\n\nexport const Dialog = forwardRef(\n  <T extends ElementType = typeof DIALOG_ELEMENT>(\n    {\n      as = DIALOG_ELEMENT as T,\n      open,\n      static: isStatic,\n      autoFocus,\n      className,\n      onClose,\n      children,\n      ...rest\n    }: DialogProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useDialogTheme();\n\n    let handleClose = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessDialogProps<any> = filterProps({\n      as,\n      ref,\n      open,\n      static: isStatic,\n      transition: true,\n      onClose: handleClose,\n      'data-component': 'dialog',\n      ...rest,\n    });\n\n    return (\n      <HeadlessDialog {...props}>\n        <HeadlessDialogBackdrop transition className={theme.backdrop('fixed inset-0')} />\n        <div className={theme.root('fixed inset-0', className)}>{children}</div>\n      </HeadlessDialog>\n    );\n  },\n);\n\nexport const dialogTheme: ComponentTheme<typeof useDialogTheme> = {\n  classNames: {\n    root: 'flex w-screen items-center justify-center p-4 z-30',\n    backdrop: 'bg-black/30 z-30',\n  },\n};\n"],
+  "sourcesContent": ["import {\n  Dialog as HeadlessDialog,\n  DialogBackdrop as HeadlessDialogBackdrop,\n  type DialogProps as HeadlessDialogProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n  useCallback,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {filterProps, forwardRef} from './internals.js';\n\nexport const useDialogTheme = createComponentTheme('Dialog', {\n  elements: ['root', 'backdrop'],\n});\n\nconst DIALOG_ELEMENT = 'div';\n\nexport type DialogProps<T extends ElementType> = PropsWithChildren<\n  {\n    as?: T | undefined;\n    open: boolean;\n    static?: boolean | undefined;\n    autoFocus?: boolean | undefined;\n    className?: string;\n    onClose?: () => void;\n  } & ComponentProps<typeof useDialogTheme> &\n    ComponentPropsWithoutRef<T>\n>;\n\nexport const Dialog = forwardRef(\n  <T extends ElementType = typeof DIALOG_ELEMENT>(\n    {\n      as = DIALOG_ELEMENT as T,\n      open,\n      static: isStatic,\n      autoFocus,\n      className,\n      onClose,\n      children,\n      ...rest\n    }: DialogProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useDialogTheme();\n\n    let handleClose = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessDialogProps<any> = filterProps({\n      as,\n      ref,\n      open,\n      static: isStatic,\n      transition: true,\n      onClose: handleClose,\n      'data-component': 'dialog',\n      ...rest,\n    });\n\n    return (\n      <HeadlessDialog {...props}>\n        <HeadlessDialogBackdrop transition className={theme.backdrop('fixed inset-0')} />\n        <div className={theme.root('fixed inset-0', className)}>{children}</div>\n      </HeadlessDialog>\n    );\n  },\n);\n\nexport const dialogTheme: ComponentTheme<typeof useDialogTheme> = {\n  classNames: {\n    root: 'flex w-screen items-center justify-center p-4 z-30',\n    backdrop: 'bg-black/30 z-30',\n  },\n};\n"],
   "mappings": ";AAuEM,SACE,KADF;AAvEN;AAAA,EACE,UAAU;AAAA,EACV,kBAAkB;AAAA,OAEb;AACP;AAAA,EAKE;AAAA,OACK;AAEP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,aAAa,kBAAiB;AAE/B,aAAM,iBAAiB,qBAAqB,UAAU;AAAA,EAC3D,UAAU,CAAC,QAAQ,UAAU;AAC/B,CAAC;AAED,MAAM,iBAAiB;AAchB,aAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,eAAe;AAE3B,QAAI,cAAc,YAAY,MAAM;AAClC,gBAAU;AAAA,IACZ,GAAG,CAAC,OAAO,CAAC;AAGZ,QAAI,QAAkC,YAAY;AAAA,MAChD;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL,CAAC;AAED,WACE,qBAAC,kBAAgB,GAAG,OAClB;AAAA,0BAAC,0BAAuB,YAAU,MAAC,WAAW,MAAM,SAAS,eAAe,GAAG;AAAA,MAC/E,oBAAC,SAAI,WAAW,MAAM,KAAK,iBAAiB,SAAS,GAAI,UAAS;AAAA,OACpE;AAAA,EAEJ;AACF;AAEO,aAAM,cAAqD;AAAA,EAChE,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;",
   "names": []
 }

package/build/components/DialogPanel.d.ts

@@ -4,16 +4,16 @@ export declare const useDialogPanelTheme: (() => (baseClassName?: import("../the
     componentThemeName: "DialogPanel";
     themeDefinition: undefined;
 };
-export type DialogPanelProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDialogPanelTheme> & ComponentPropsWithoutRef<T> & {
+export type DialogPanelProps<T extends ElementType> = PropsWithChildren<{
     as?: T | undefined;
     className?: string;
-}>;
-export declare const DialogPanel: <T extends ElementType = "div">(props: import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+} & ComponentProps<typeof useDialogPanelTheme> & ComponentPropsWithoutRef<T>>;
+export declare const DialogPanel: <T extends ElementType = "div">(props: {
+    ref?: Ref<HTMLElement> | undefined;
+} & {
     as?: T | undefined;
     className?: string;
-} & {
+} & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
     children?: import("react").ReactNode | undefined;
-} & {
-    ref?: Ref<HTMLElement> | undefined;
 }) => React.ReactNode;
 export declare const dialogPanelTheme: ComponentTheme<typeof useDialogPanelTheme>;