@jakubmazanec/ui 0.1.6 → 0.1.7-unstable.5350d526

package/README.md

@@ -17,10 +17,13 @@ npm install @jakubmazanec/ui
 ⚠️ This is an [ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) package!
 It cannot be required from a CommonJS module.
 
+<!-- prerequisites -->
+
 #### Prerequisites
 
-- Node.js 20 or later
+- Node.js 22 or later
 - TypeScript 5 or later
+<!-- prerequisites -->
 
 ## Usage
 

package/build/components/Button.d.ts

@@ -1,6 +1,7 @@
 import { type ButtonProps as HeadlessButtonProps } from '@headlessui/react';
-import { type ComponentPropsWithoutRef, type ElementType, type Ref } from 'react';
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+import { type ComponentRef } from './ComponentRef.js';
 export declare const useButtonTheme: {
     componentThemeName: "Button";
     themeDefinition: {
@@ -15,7 +16,8 @@ export declare const useButtonTheme: {
     readonly size: "small" | "medium" | "large";
     readonly disabled: boolean;
 }) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
-export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> & Omit<ComponentPropsWithoutRef<T>, 'type'> & {
+declare const BUTTON_ELEMENT = "button";
+export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> & ComponentRef<T> & Omit<ComponentPropsWithoutRef<T>, 'type'> & {
     as?: T | undefined;
     submit?: boolean | undefined;
     idle?: boolean | undefined;
@@ -23,18 +25,6 @@ export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButton
     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"> & {
-    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;
+export declare function Button<T extends ElementType = typeof BUTTON_ELEMENT>({ variant, size, disabled, as, idle, autoFocus, submit, className, ref, children, ...rest }: ButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare const buttonTheme: ComponentTheme<typeof useButtonTheme>;
+export {};

package/build/components/Button.js

@@ -10,7 +10,6 @@ import {
   createComponentTheme
 } from "../theme/internals.js";
 import { Icon } from "./Icon.js";
-import { forwardRef } from "./internals.js";
 import { Spinner } from "./Spinner.js";
 export const useButtonTheme = createComponentTheme("Button", {
   variants: {
@@ -20,50 +19,49 @@ export const useButtonTheme = createComponentTheme("Button", {
   }
 });
 const BUTTON_ELEMENT = "button";
-export const Button = forwardRef(
-  ({
-    variant = "solid",
-    size = "medium",
-    disabled = false,
-    as = BUTTON_ELEMENT,
-    idle = true,
-    autoFocus = false,
-    submit = false,
-    className,
-    children,
+export function Button({
+  variant = "solid",
+  size = "medium",
+  disabled = false,
+  as = BUTTON_ELEMENT,
+  idle = true,
+  autoFocus = false,
+  submit = false,
+  className,
+  ref,
+  children,
+  ...rest
+}) {
+  let theme = useButtonTheme({ variant, size, disabled });
+  let props = {
+    as,
+    ref,
+    className: theme(disabled ? "pointer-events-none" : null, className),
+    disabled: disabled || submit && !idle,
+    autoFocus,
+    "data-component": "button",
     ...rest
-  }, ref) => {
-    let theme = useButtonTheme({ variant, size, disabled });
-    let props = {
-      as,
-      ref,
-      className: theme(disabled ? "pointer-events-none" : null, className),
-      disabled: disabled || submit && !idle,
-      autoFocus,
-      "data-component": "button",
-      ...rest
-    };
-    if (as === BUTTON_ELEMENT) {
-      props.type = "button";
-    }
-    if (submit) {
-      props.type = "submit";
-    }
-    if (typeof children === "function") {
-      return /* @__PURE__ */ jsx(HeadlessButton, { ...props, children });
-    }
-    let enhancedChildren = Children.map(children, (child) => {
-      if (isValidElement(child) && (child.type === Icon || child.type === Spinner)) {
-        return cloneElement(child, { "data-icon": "" });
-      }
-      return child;
-    });
-    return /* @__PURE__ */ jsxs(HeadlessButton, { ...props, children: [
-      submit && !idle ? /* @__PURE__ */ jsx(Spinner, { "data-icon": true }) : null,
-      enhancedChildren
-    ] });
+  };
+  if (as === BUTTON_ELEMENT) {
+    props.type = "button";
   }
-);
+  if (submit) {
+    props.type = "submit";
+  }
+  if (typeof children === "function") {
+    return /* @__PURE__ */ jsx(HeadlessButton, { ...props, children });
+  }
+  let enhancedChildren = Children.map(children, (child) => {
+    if (isValidElement(child) && (child.type === Icon || child.type === Spinner)) {
+      return cloneElement(child, { "data-icon": "" });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsxs(HeadlessButton, { ...props, children: [
+    submit && !idle ? /* @__PURE__ */ jsx(Spinner, { "data-icon": true }) : null,
+    enhancedChildren
+  ] });
+}
 export const buttonTheme = {
   className: "rounded-2 flex items-center justify-center text-nowrap font-sans font-medium text-sm transition-colors",
   variants: {

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"],
-  "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-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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",
   "names": []
 }

package/build/components/Card.d.ts

@@ -1,19 +1,15 @@
-import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+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 useCardTheme: {
     componentThemeName: "Card";
     themeDefinition: undefined;
 } & (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string);
-export type CardProps<T extends ElementType> = ComponentProps<typeof useCardTheme> & ComponentPropsWithoutRef<T> & PropsWithChildren<{
+declare const CARD_ELEMENT = "button";
+export type CardProps<T extends ElementType> = ComponentProps<typeof useCardTheme> & ComponentPropsWithoutRef<T> & ComponentRef<T> & PropsWithChildren<{
     as?: T | undefined;
     className?: string;
 }>;
-export declare const Card: <T extends ElementType = "div">(props: 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 Card: <T extends ElementType = "button">({ as: Component, className, ref, children, ...rest }: CardProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare const cardTheme: ComponentTheme<typeof useCardTheme>;
+export {};

package/build/components/Card.js

@@ -5,21 +5,24 @@ import {
 import {
   createComponentTheme
 } from "../theme/internals.js";
-import { forwardRef } from "./internals.js";
 export const useCardTheme = createComponentTheme("Card");
-const CARD_ELEMENT = "div";
-export const Card = forwardRef(
-  ({ as: Component = CARD_ELEMENT, className, children, ...rest }, ref) => {
-    let theme = useCardTheme();
-    let props = {
-      ref,
-      className: theme(null, className),
-      "data-component": "card",
-      ...rest
-    };
-    return createElement(Component, props, children);
-  }
-);
+const CARD_ELEMENT = "button";
+export const Card = ({
+  as: Component = CARD_ELEMENT,
+  className,
+  ref,
+  children,
+  ...rest
+}) => {
+  let theme = useCardTheme();
+  let props = {
+    ref,
+    className: theme(null, className),
+    "data-component": "card",
+    ...rest
+  };
+  return createElement(Component, props, children);
+};
 export const cardTheme = {
   className: "rounded-2 border border-neutral-100 p-4"
 };

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"],
-  "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;",
+  "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 useCardTheme = createComponentTheme('Card');\n\nconst CARD_ELEMENT = 'button';\n\nexport type CardProps<T extends ElementType> = ComponentProps<typeof useCardTheme> &\n  ComponentPropsWithoutRef<T> &\n  ComponentRef<T> &\n  PropsWithChildren<{\n    as?: T | undefined;\n    className?: string;\n  }>;\n\nexport const Card = <T extends ElementType = typeof CARD_ELEMENT>({\n  as: Component = CARD_ELEMENT as T,\n  className,\n  ref,\n  children,\n  ...rest\n}: CardProps<T>) => {\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\nexport const cardTheme: ComponentTheme<typeof useCardTheme> = {\n  className: 'rounded-2 border border-neutral-100 p-4',\n};\n"],
+  "mappings": ";AAAA;AAAA,EAEE;AAAA,OAGK;AAEP;AAAA,EAGE;AAAA,OACK;AAGA,aAAM,eAAe,qBAAqB,MAAM;AAEvD,MAAM,eAAe;AAUd,aAAM,OAAO,CAA8C;AAAA,EAChE,IAAI,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoB;AAClB,MAAI,QAAQ,aAAa;AACzB,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,YAAiD;AAAA,EAC5D,WAAW;AACb;",
   "names": []
 }

package/build/components/Checkbox.d.ts

@@ -1,5 +1,6 @@
-import { type ComponentPropsWithoutRef, type ElementType, type Ref } from 'react';
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
 import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+import { type ComponentRef } from './ComponentRef.js';
 export declare const useCheckboxTheme: {
     componentThemeName: "Checkbox";
     themeDefinition: {
@@ -14,7 +15,8 @@ export declare const useCheckboxTheme: {
     icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
     root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
 });
-export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> & Omit<ComponentPropsWithoutRef<T>, 'onChange'> & {
+declare const CHECKBOX_ELEMENT = "span";
+export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> & ComponentRef<T> & Omit<ComponentPropsWithoutRef<T>, 'onChange'> & {
     as?: T | undefined;
     checked?: boolean | undefined;
     indeterminate?: boolean | undefined;
@@ -23,17 +25,6 @@ export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useChec
     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"> & {
-    as?: T | undefined;
-    checked?: boolean | undefined;
-    indeterminate?: boolean | undefined;
-    autoFocus?: boolean | undefined;
-    name?: string;
-    className?: string;
-    onChange?: ((checked: boolean) => void) | undefined;
-} & {
-    ref?: Ref<HTMLElement> | undefined;
-}) => React.ReactNode;
+export declare const Checkbox: <T extends ElementType = "span">({ disabled, as, checked, indeterminate, autoFocus, name, className, onChange, ref, ...rest }: CheckboxProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const checkboxTheme: ComponentTheme<typeof useCheckboxTheme>;
+export {};

package/build/components/Checkbox.js

@@ -8,7 +8,7 @@ import {
   createComponentTheme
 } from "../theme/internals.js";
 import { Icon } from "./Icon.js";
-import { forwardRef, useFormId } from "./internals.js";
+import { useFormId } from "./internals.js";
 import { useField } from "./useField.js";
 import { useFieldName } from "./useFieldName.js";
 export const useCheckboxTheme = createComponentTheme("Checkbox", {
@@ -18,54 +18,53 @@ export const useCheckboxTheme = createComponentTheme("Checkbox", {
   elements: ["root", "icon"]
 });
 const CHECKBOX_ELEMENT = "span";
-export const Checkbox = forwardRef(
-  ({
-    disabled = false,
-    as = CHECKBOX_ELEMENT,
-    checked,
-    indeterminate,
-    autoFocus,
-    name,
-    className,
-    onChange,
-    ...rest
-  }, ref) => {
-    let theme = useCheckboxTheme({ disabled });
-    let fieldName = useFieldName();
-    let field = useField();
-    let formId = useFormId();
-    let handleChange = useCallback(() => {
-      onChange?.(!checked);
-    }, [checked, onChange]);
-    if (field || fieldName) {
-      let props2 = {
-        as,
-        ref,
-        form: formId,
-        name: field?.name ?? fieldName,
-        indeterminate,
-        autoFocus,
-        className: theme.root("relative", className),
-        "data-component": "checkbox",
-        ...rest
-      };
-      return /* @__PURE__ */ jsx(HeadlessCheckbox, { ...props2, children: /* @__PURE__ */ jsx("span", { className: theme.icon(), children: /* @__PURE__ */ jsx(Icon, { name: "Check" }) }) });
-    }
-    let props = {
+export const Checkbox = ({
+  disabled = false,
+  as = CHECKBOX_ELEMENT,
+  checked,
+  indeterminate,
+  autoFocus,
+  name,
+  className,
+  onChange,
+  ref,
+  ...rest
+}) => {
+  let theme = useCheckboxTheme({ disabled });
+  let fieldName = useFieldName();
+  let field = useField();
+  let formId = useFormId();
+  let handleChange = useCallback(() => {
+    onChange?.(!checked);
+  }, [checked, onChange]);
+  if (field || fieldName) {
+    let props2 = {
       as,
       ref,
-      checked: Boolean(checked),
-      name,
+      form: formId,
+      name: field?.name ?? fieldName,
       indeterminate,
       autoFocus,
       className: theme.root("relative", className),
       "data-component": "checkbox",
-      onChange: handleChange,
       ...rest
     };
-    return /* @__PURE__ */ jsx(HeadlessCheckbox, { ...props, children: /* @__PURE__ */ jsx("span", { className: theme.icon(), children: /* @__PURE__ */ jsx(Icon, { name: "Check" }) }) });
+    return /* @__PURE__ */ jsx(HeadlessCheckbox, { ...props2, children: /* @__PURE__ */ jsx("span", { className: theme.icon(), children: /* @__PURE__ */ jsx(Icon, { name: "Check" }) }) });
   }
-);
+  let props = {
+    as,
+    ref,
+    checked: Boolean(checked),
+    name,
+    indeterminate,
+    autoFocus,
+    className: theme.root("relative", className),
+    "data-component": "checkbox",
+    onChange: handleChange,
+    ...rest
+  };
+  return /* @__PURE__ */ jsx(HeadlessCheckbox, { ...props, children: /* @__PURE__ */ jsx("span", { className: theme.icon(), children: /* @__PURE__ */ jsx(Icon, { name: "Check" }) }) });
+};
 export const checkboxTheme = {
   classNames: {
     root: "group/checkbox inline-block size-5 cursor-pointer",

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"],
-  "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;",
+  "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 const 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"],
+  "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,aAAM,WAAW,CAAkD;AAAA,EACxE,WAAW;AAAA,EACX,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,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/CheckboxField.js

@@ -4,15 +4,15 @@ import { Field as HeadlessField } from "@headlessui/react";
 import {
   createComponentTheme
 } from "../theme/internals.js";
-import { fieldContext, fieldNameContext } from "./internals.js";
+import { FieldContext, FieldNameContext } from "./internals.js";
 export const useCheckboxFieldTheme = createComponentTheme("CheckboxField");
 export function CheckboxField({ field, name, className, children }) {
   let theme = useCheckboxFieldTheme();
   if (field) {
-    return /* @__PURE__ */ jsx(fieldContext.Provider, { value: field, children: /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), "data-component": "checkbox-field", children }) });
+    return /* @__PURE__ */ jsx(FieldContext, { value: field, children: /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), "data-component": "checkbox-field", children }) });
   }
   if (name) {
-    return /* @__PURE__ */ jsx(fieldNameContext.Provider, { value: name, children: /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), "data-component": "checkbox-field", children }) });
+    return /* @__PURE__ */ jsx(FieldNameContext, { value: name, children: /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), "data-component": "checkbox-field", children }) });
   }
   return /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), children });
 }

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"],
-  "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;",
+  "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 value={field}>\n        <HeadlessField className={theme(null, className)} data-component=\"checkbox-field\">\n          {children}\n        </HeadlessField>\n      </FieldContext>\n    );\n  }\n\n  if (name) {\n    return (\n      <FieldNameContext value={name}>\n        <HeadlessField className={theme(null, className)} data-component=\"checkbox-field\">\n          {children}\n        </HeadlessField>\n      </FieldNameContext>\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,gBAAa,OAAO,OACnB,8BAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAG,kBAAe,kBAC9D,UACH,GACF;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WACE,oBAAC,oBAAiB,OAAO,MACvB,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

@@ -1,5 +1,6 @@
-import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+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 useComboboxTheme: {
     componentThemeName: "Combobox";
     themeDefinition: {
@@ -18,11 +19,14 @@ export declare const useComboboxTheme: {
     root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
     options: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
 });
+declare const COMBOBOX_ELEMENT: import("react").ExoticComponent<{
+    children?: import("react").ReactNode | undefined;
+}>;
 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> = ComponentProps<typeof useComboboxTheme> & ComponentPropsWithoutRef<T> & ComponentRef<T> & PropsWithChildren & ({
     as?: T | undefined;
     value?: V[] | undefined;
     defaultValue?: V[] | undefined;
@@ -48,10 +52,9 @@ export type ComboboxProps<T extends ElementType, V extends boolean | number | st
     name?: string | undefined;
     className?: string;
     onChange?: (selectedValue: V | undefined) => void;
-})>;
+});
 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> & {
-    ref?: Ref<HTMLElement> | undefined;
-}) => React.ReactNode;
+}>, V extends boolean | number | string = string>({ disabled, invalid, as, value, defaultValue, multiple, items, placeholder, immediate, virtual, customValue, name, className, onChange, ref, children, ...rest }: ComboboxProps<T, V>) => import("react/jsx-runtime").JSX.Element;
 export declare const comboboxTheme: ComponentTheme<typeof useComboboxTheme>;
+export {};