@jakubmazanec/ui 0.1.0-unstable.bbcd3f9 → 0.1.0-unstable.bd0959d

package/build/components/Button.d.ts

@@ -1,37 +1,40 @@
 import { type ButtonProps as HeadlessButtonProps } from '@headlessui/react';
 import { type ComponentPropsWithoutRef, type ElementType, type Ref } from 'react';
-import { type ComponentProps } from '../theme/internals.js';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
 export declare const useButtonTheme: ((themeProps: {
-    readonly variant: "text" | "solid" | "outline";
+    readonly variant: "text" | "solid" | "outline" | "invisible";
     readonly size: "small" | "medium" | "large";
     readonly disabled: boolean;
 }) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
     componentThemeName: "Button";
     themeDefinition: {
         readonly variants: {
-            readonly variant: ["solid", "outline", "text"];
+            readonly variant: ["solid", "outline", "text", "invisible"];
             readonly size: ["small", "medium", "large"];
             readonly disabled: [true, false];
         };
     };
 };
-export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> & ComponentPropsWithoutRef<T> & {
+export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> & Omit<ComponentPropsWithoutRef<T>, 'type'> & {
     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";
+    readonly variant: "text" | "solid" | "outline" | "invisible";
     readonly size: "small" | "medium" | "large";
     readonly disabled: boolean;
-}>> & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+}>> & 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;
+    children?: HeadlessButtonProps["children"] | undefined;
 } & {
     ref?: Ref<HTMLElement> | undefined;
-}) => import("react").ReactNode;
+}) => React.ReactNode;
+export declare const buttonTheme: ComponentTheme<typeof useButtonTheme>;

package/build/components/Button.js

@@ -1,18 +1,20 @@
 "use strict";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button as HeadlessButton } from "@headlessui/react";
 import {
   Children,
   cloneElement,
   isValidElement
 } from "react";
-import { createComponentTheme } from "../theme/internals.js";
+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: {
-    variant: ["solid", "outline", "text"],
+    variant: ["solid", "outline", "text", "invisible"],
     size: ["small", "medium", "large"],
     disabled: [true, false]
   }
@@ -24,6 +26,8 @@ export const Button = forwardRef(
     size = "medium",
     disabled = false,
     as = BUTTON_ELEMENT,
+    idle = true,
+    autoFocus = false,
     submit = false,
     className,
     children,
@@ -33,8 +37,10 @@ export const Button = forwardRef(
     let props = {
       as,
       ref,
-      className: theme(null, className),
-      disabled,
+      className: theme(disabled ? "pointer-events-none" : null, className),
+      disabled: disabled || submit && !idle,
+      autoFocus,
+      "data-component": "button",
       ...rest
     };
     if (as === BUTTON_ELEMENT) {
@@ -52,7 +58,82 @@ export const Button = forwardRef(
       }
       return child;
     });
-    return /* @__PURE__ */ jsx(HeadlessButton, { ...props, children: enhancedChildren });
+    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: {
+    variant: {
+      solid: "text-white bg-neutral-900 hover:bg-neutral-800",
+      outline: "text-neutral-950 border-2 border-neutral-100 hover:border-neutral-200",
+      text: "text-neutral-950 border-2 border-transparent hover:border-neutral-200",
+      invisible: "cursor-default text-neutral-200 hover:text-neutral-600 select-none"
+    },
+    size: {
+      small: "text-sm leading-6 px-2.5 h-8 min-w-8 gap-x-2",
+      medium: "leading-6 px-2.5 h-9 min-w-9 gap-x-2",
+      large: "text-lg leading-6 px-3 h-10 min-w-10 gap-x-2"
+    },
+    disabled: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      size: "small",
+      className: "px-3"
+    },
+    {
+      variant: "solid",
+      size: "medium",
+      className: "px-3"
+    },
+    {
+      variant: "solid",
+      size: "large",
+      className: "px-3.5"
+    },
+    {
+      variant: "invisible",
+      size: "small",
+      className: "text-xs px-2 h-5 min-w-5"
+    },
+    {
+      variant: "invisible",
+      size: "medium",
+      className: "px-2 h-6 min-w-6"
+    },
+    {
+      variant: "invisible",
+      size: "large",
+      className: "px-2 h-7 min-w-7"
+    },
+    {
+      variant: "solid",
+      disabled: true,
+      className: "text-white bg-neutral-200 hover:bg-neutral-200"
+    },
+    {
+      variant: "outline",
+      disabled: true,
+      className: "text-neutral-200 hover:border-neutral-100"
+    },
+    {
+      variant: "text",
+      disabled: true,
+      className: "text-neutral-200 hover:border-transparent"
+    },
+    {
+      variant: "invisible",
+      disabled: true,
+      className: "text-neutral-200 "
+    }
+  ]
+};
 //# sourceMappingURL=Button.js.map

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 {type ComponentProps, createComponentTheme} 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'],\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  ComponentPropsWithoutRef<T> & {\n    as?: T | undefined;\n    submit?: 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      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(null, className),\n      disabled,\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 <HeadlessButton {...props}>{enhancedChildren}</HeadlessButton>;\n  },\n);\n"],
-  "mappings": ";AAmEa;AAnEb,SAAQ,UAAU,sBAA8D;AAChF;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,OAEK;AAEP,SAA6B,4BAA2B;AACxD,SAAQ,YAAW;AACnB,SAAQ,kBAAiB;AACzB,SAAQ,eAAc;AAEf,aAAM,iBAAiB,qBAAqB,UAAU;AAAA,EAC3D,UAAU;AAAA,IACR,SAAS,CAAC,SAAS,WAAW,MAAM;AAAA,IACpC,MAAM,CAAC,SAAS,UAAU,OAAO;AAAA,IACjC,UAAU,CAAC,MAAM,KAAK;AAAA,EACxB;AACF,CAAC;AAED,MAAM,iBAAiB;AAWhB,aAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,WAAW;AAAA,IACX,KAAK;AAAA,IACL,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,eAAe,EAAC,SAAS,MAAM,SAAQ,CAAC;AAEpD,QAAI,QAAiC;AAAA,MACnC;AAAA,MACA;AAAA,MACA,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC;AAAA,MACA,GAAG;AAAA,IACL;AAEA,QAAI,OAAO,gBAAgB;AACzB,YAAM,OAAO;AAAA,IACf;AAEA,QAAI,QAAQ;AACV,YAAM,OAAO;AAAA,IACf;AAEA,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,oBAAC,kBAAgB,GAAG,OAAQ,UAAS;AAAA,IAC9C;AAEA,QAAI,mBAAmB,SAAS,IAAI,UAAU,CAAC,UAAU;AACvD,UAAI,eAAe,KAAK,MAAM,MAAM,SAAS,QAAQ,MAAM,SAAS,UAAU;AAE5E,eAAO,aAAkB,OAAO,EAAC,aAAa,GAAE,CAAC;AAAA,MACnD;AAEA,aAAO;AAAA,IACT,CAAC;AAED,WAAO,oBAAC,kBAAgB,GAAG,OAAQ,4BAAiB;AAAA,EACtD;AACF;",
+  "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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",
   "names": []
 }

package/build/components/Card.d.ts

@@ -1,10 +1,19 @@
-import { type PropsWithChildren } from 'react';
-import { type ComponentProps } from '../theme/internals.js';
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
 export declare const useCardTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
     componentThemeName: "Card";
     themeDefinition: undefined;
 };
-export type CardProps = PropsWithChildren<ComponentProps<typeof useCardTheme> & {
+export type CardProps<T extends ElementType> = ComponentProps<typeof useCardTheme> & ComponentPropsWithoutRef<T> & PropsWithChildren<{
+    as?: T | undefined;
     className?: string;
 }>;
-export declare function Card({ className, children }: CardProps): import("react/jsx-runtime").JSX.Element;
+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 cardTheme: ComponentTheme<typeof useCardTheme>;

package/build/components/Card.js

@@ -1,9 +1,26 @@
 "use strict";
-import { jsx } from "react/jsx-runtime";
-import { createComponentTheme } from "../theme/internals.js";
+import {
+  createElement
+} from "react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { forwardRef } from "./internals.js";
 export const useCardTheme = createComponentTheme("Card");
-export function Card({ className, children }) {
-  let theme = useCardTheme();
-  return /* @__PURE__ */ jsx("div", { className: theme(null, className), children });
-}
+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);
+  }
+);
+export const cardTheme = {
+  className: "rounded-2 border border-neutral-100 p-4"
+};
 //# sourceMappingURL=Card.js.map

package/build/components/Card.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../source/components/Card.tsx"],
-  "sourcesContent": ["import {type PropsWithChildren} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\n\nexport const useCardTheme = createComponentTheme('Card');\n\nexport type CardProps = PropsWithChildren<\n  ComponentProps<typeof useCardTheme> & {\n    className?: string;\n  }\n>;\n\nexport function Card({className, children}: CardProps) {\n  let theme = useCardTheme();\n\n  return <div className={theme(null, className)}>{children}</div>;\n}\n"],
-  "mappings": ";AAeS;AAbT,SAA6B,4BAA2B;AAEjD,aAAM,eAAe,qBAAqB,MAAM;AAQhD,gBAAS,KAAK,EAAC,WAAW,SAAQ,GAAc;AACrD,MAAI,QAAQ,aAAa;AAEzB,SAAO,oBAAC,SAAI,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AAC3D;",
+  "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;",
   "names": []
 }

package/build/components/Checkbox.d.ts

@@ -1,22 +1,20 @@
 import { type ComponentPropsWithoutRef, type ElementType, type Ref } from 'react';
-import { type ComponentProps } from '../theme/internals.js';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
 export declare const useCheckboxTheme: ((themeProps: {
     readonly disabled: boolean;
 }) => {
-    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    checked: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    unchecked: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
     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;
 }) & {
     componentThemeName: "Checkbox";
     themeDefinition: {
         readonly variants: {
             readonly disabled: [true, false];
         };
-        readonly elements: ["root", "checked", "unchecked", "icon"];
+        readonly elements: ["root", "icon"];
     };
 };
-export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> & ComponentPropsWithoutRef<T> & {
+export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> & Omit<ComponentPropsWithoutRef<T>, 'onChange'> & {
     as?: T | undefined;
     checked?: boolean | undefined;
     indeterminate?: boolean | undefined;
@@ -27,14 +25,15 @@ export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useChec
 };
 export declare const Checkbox: <T extends ElementType = "span">(props: Partial<import("@jakubmazanec/ts-utils").Writable<{
     readonly disabled: boolean;
-}>> & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+}>> & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "onChange"> & {
     as?: T | undefined;
     checked?: boolean | undefined;
     indeterminate?: boolean | undefined;
     autoFocus?: boolean | undefined;
-    name?: string | undefined;
-    className?: string | undefined;
+    name?: string;
+    className?: string;
     onChange?: ((checked: boolean) => void) | undefined;
 } & {
     ref?: Ref<HTMLElement> | undefined;
-}) => import("react").ReactNode;
+}) => React.ReactNode;
+export declare const checkboxTheme: ComponentTheme<typeof useCheckboxTheme>;

package/build/components/Checkbox.js

@@ -1,11 +1,13 @@
 "use strict";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import {
   Checkbox as HeadlessCheckbox
 } from "@headlessui/react";
-import { CheckIcon } from "@heroicons/react/16/solid";
 import { useCallback } from "react";
-import { createComponentTheme } from "../theme/internals.js";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { Icon } from "./Icon.js";
 import { forwardRef, useFormId } from "./internals.js";
 import { useField } from "./useField.js";
 import { useFieldName } from "./useFieldName.js";
@@ -13,7 +15,7 @@ export const useCheckboxTheme = createComponentTheme("Checkbox", {
   variants: {
     disabled: [true, false]
   },
-  elements: ["root", "checked", "unchecked", "icon"]
+  elements: ["root", "icon"]
 });
 const CHECKBOX_ELEMENT = "span";
 export const Checkbox = forwardRef(
@@ -43,13 +45,11 @@ export const Checkbox = forwardRef(
         name: field?.name ?? fieldName,
         indeterminate,
         autoFocus,
-        className: theme.root("group relative", className),
+        className: theme.root("relative", className),
+        "data-component": "checkbox",
         ...rest
       };
-      return /* @__PURE__ */ jsxs(HeadlessCheckbox, { ...props2, children: [
-        /* @__PURE__ */ jsx("div", { className: theme.checked(), children: /* @__PURE__ */ jsx(CheckIcon, { className: theme.icon() }) }),
-        /* @__PURE__ */ jsx("div", { className: theme.unchecked() })
-      ] });
+      return /* @__PURE__ */ jsx(HeadlessCheckbox, { ...props2, children: /* @__PURE__ */ jsx("span", { className: theme.icon(), children: /* @__PURE__ */ jsx(Icon, { name: "Check" }) }) });
     }
     let props = {
       as,
@@ -58,14 +58,30 @@ export const Checkbox = forwardRef(
       name,
       indeterminate,
       autoFocus,
-      className: theme.root("group relative", className),
+      className: theme.root("relative", className),
+      "data-component": "checkbox",
       onChange: handleChange,
       ...rest
     };
-    return /* @__PURE__ */ jsxs(HeadlessCheckbox, { ...props, children: [
-      /* @__PURE__ */ jsx("div", { className: theme.checked(), children: /* @__PURE__ */ jsx(CheckIcon, { className: theme.icon() }) }),
-      /* @__PURE__ */ jsx("div", { className: theme.unchecked() })
-    ] });
+    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",
+    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"
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: "cursor-not-allowed",
+        icon: "*:hover:text-transparent *:border-neutral-50 *:hover:border-neutral-50 group-data-[checked]/checkbox:*:bg-neutral-100 group-data-[checked]/checkbox:*:border-neutral-100 group-data-[checked]/checkbox:*:text-white"
+      },
+      false: {
+        root: "",
+        icon: ""
+      }
+    }
+  }
+};
 //# sourceMappingURL=Checkbox.js.map

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 {CheckIcon} from '@heroicons/react/16/solid';\nimport {type ComponentPropsWithoutRef, type ElementType, type Ref, useCallback} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.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', 'checked', 'unchecked', 'icon'],\n});\n\nconst CHECKBOX_ELEMENT = 'span';\n\nexport type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> &\n  ComponentPropsWithoutRef<T> & {\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('group relative', className),\n        ...rest,\n      };\n\n      return (\n        <HeadlessCheckbox {...props}>\n          <div className={theme.checked()}>\n            <CheckIcon className={theme.icon()} />\n          </div>\n          <div className={theme.unchecked()} />\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('group relative', className),\n      onChange: handleChange,\n      ...rest,\n    };\n\n    return (\n      <HeadlessCheckbox {...props}>\n        <div className={theme.checked()}>\n          <CheckIcon className={theme.icon()} />\n        </div>\n        <div className={theme.unchecked()} />\n      </HeadlessCheckbox>\n    );\n  },\n);\n"],
-  "mappings": ";AAsEQ,SAEI,KAFJ;AAtER;AAAA,EACE,YAAY;AAAA,OAEP;AACP,SAAQ,iBAAgB;AACxB,SAAmE,mBAAkB;AAErF,SAA6B,4BAA2B;AACxD,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,WAAW,aAAa,MAAM;AACnD,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,kBAAkB,SAAS;AAAA,QACjD,GAAG;AAAA,MACL;AAEA,aACE,qBAAC,oBAAkB,GAAGA,QACpB;AAAA,4BAAC,SAAI,WAAW,MAAM,QAAQ,GAC5B,8BAAC,aAAU,WAAW,MAAM,KAAK,GAAG,GACtC;AAAA,QACA,oBAAC,SAAI,WAAW,MAAM,UAAU,GAAG;AAAA,SACrC;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,kBAAkB,SAAS;AAAA,MACjD,UAAU;AAAA,MACV,GAAG;AAAA,IACL;AAEA,WACE,qBAAC,oBAAkB,GAAG,OACpB;AAAA,0BAAC,SAAI,WAAW,MAAM,QAAQ,GAC5B,8BAAC,aAAU,WAAW,MAAM,KAAK,GAAG,GACtC;AAAA,MACA,oBAAC,SAAI,WAAW,MAAM,UAAU,GAAG;AAAA,OACrC;AAAA,EAEJ;AACF;",
+  "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;",
   "names": ["props"]
 }

package/build/components/CheckboxField.d.ts

@@ -1,6 +1,6 @@
 import { type FieldMetadata, type FieldName } from '@conform-to/react';
 import { type PropsWithChildren } from 'react';
-import { type ComponentProps } from '../theme/internals.js';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
 export declare const useCheckboxFieldTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
     componentThemeName: "CheckboxField";
     themeDefinition: undefined;
@@ -15,3 +15,4 @@ export type CheckboxFieldProps = PropsWithChildren<ComponentProps<typeof useChec
     name?: FieldName<any, any> | string | undefined;
 })>;
 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

@@ -1,17 +1,22 @@
 "use strict";
 import { jsx } from "react/jsx-runtime";
 import { Field as HeadlessField } from "@headlessui/react";
-import { createComponentTheme } from "../theme/internals.js";
+import {
+  createComponentTheme
+} from "../theme/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), children }) });
+    return /* @__PURE__ */ jsx(fieldContext.Provider, { 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), children }) });
+    return /* @__PURE__ */ jsx(fieldNameContext.Provider, { value: name, children: /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), "data-component": "checkbox-field", children }) });
   }
   return /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), children });
 }
+export const checkboxFieldTheme = {
+  className: "grid grid-cols-[theme(spacing.5)_1fr] gap-x-2 gap-y-1 [&>[data-component=description]]:col-start-2"
+};
 //# sourceMappingURL=CheckboxField.js.map

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 {type ComponentProps, createComponentTheme} 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)}>{children}</HeadlessField>\n      </fieldContext.Provider>\n    );\n  }\n\n  if (name) {\n    return (\n      <fieldNameContext.Provider value={name}>\n        <HeadlessField className={theme(null, className)}>{children}</HeadlessField>\n      </fieldNameContext.Provider>\n    );\n  }\n\n  return <HeadlessField className={theme(null, className)}>{children}</HeadlessField>;\n}\n"],
-  "mappings": ";AAiCQ;AAhCR,SAAQ,SAAS,qBAAoB;AAGrC,SAA6B,4BAA2B;AACxD,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,GAAI,UAAS,GAC9D;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,MAChC,8BAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS,GAC9D;AAAA,EAEJ;AAEA,SAAO,oBAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AACrE;",
+  "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;",
   "names": []
 }

package/build/components/Combobox.d.ts

@@ -1,12 +1,12 @@
 import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
-import { type ComponentProps } from '../theme/internals.js';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
 export declare const useComboboxTheme: ((themeProps: {
     readonly disabled: boolean;
     readonly invalid: boolean;
 }) => {
-    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
     input: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    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;
     options: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
 }) & {
     componentThemeName: "Combobox";
@@ -50,7 +50,8 @@ export type ComboboxProps<T extends ElementType, V extends boolean | number | st
     onChange?: (selectedValue: V[] | undefined) => void;
 })>;
 export declare const Combobox: <T extends ElementType = import("react").ExoticComponent<{
-    children?: import("react").ReactNode;
-}>, V extends string | number | boolean = string>(props: ComboboxProps<T, V> & {
+    children?: import("react").ReactNode | undefined;
+}>, V extends boolean | number | string = string>(props: ComboboxProps<T, V> & {
     ref?: Ref<HTMLElement> | undefined;
-}) => import("react").ReactNode;
+}) => React.ReactNode;
+export declare const comboboxTheme: ComponentTheme<typeof useComboboxTheme>;