@jakubmazanec/ui 0.1.0-unstable.0c19abe → 0.1.0-unstable.394c9e8

package/README.md

@@ -24,12 +24,17 @@ It cannot be required from a CommonJS module.
 
 ## Usage
 
-🚧 This section is under development. Please check back later for updates.
+⚠️ This is an incomplete package! Expect a lot of breaking changes before the version 1.0.0 release.
+
+Opinionated, pre-styled, but customizable component library based on React, Headless UI, Tailwind
+CSS and Conform, made for very fast UI creation.
 
 ## Documentation
 
 See [API reference](./docs) for auto-generated documentation.
 
+See [Storybook](https://www.chromatic.com/library?appId=666f2dc8033dde8c47f6a278) for preview.
+
 ## Contributing
 
 If you want to contribute, see [CONTRIBUTING](./CONTRIBUTING.md) for details.

package/build/components/Button.d.ts

@@ -1,24 +1,37 @@
-import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren } from 'react';
+import { type ButtonProps as HeadlessButtonProps } from '@headlessui/react';
+import { type ComponentPropsWithoutRef, type ElementType, type Ref } from 'react';
 import { type ComponentProps } from '../theme/internals.js';
 export declare const useButtonTheme: ((themeProps: {
-    readonly type: "text" | "icon" | "solid" | "outline";
+    readonly variant: "text" | "solid" | "outline";
     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 type: ["solid", "outline", "text", "icon"];
+            readonly variant: ["solid", "outline", "text"];
             readonly size: ["small", "medium", "large"];
             readonly disabled: [true, false];
         };
     };
 };
 export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> & ComponentPropsWithoutRef<T> & {
-    className?: string | undefined;
-    submit?: boolean | undefined;
     as?: T | undefined;
-    onClick?: (() => void) | undefined;
-    'aria-label'?: string | undefined;
+    submit?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    children?: HeadlessButtonProps['children'] | undefined;
 };
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<ButtonProps<ElementType>>, "ref"> & import("react").RefAttributes<"symbol" | "object" | "search" | "big" | "link" | "small" | "sub" | "sup" | "map" | "filter" | "progress" | "text" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view">>;
+export declare const Button: <T extends ElementType = "button">(props: Partial<import("@jakubmazanec/ts-utils").Writable<{
+    readonly variant: "text" | "solid" | "outline";
+    readonly size: "small" | "medium" | "large";
+    readonly disabled: boolean;
+}>> & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+    as?: T | undefined;
+    submit?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    children?: HeadlessButtonProps['children'] | undefined;
+} & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => import("react").ReactNode;

package/build/components/Button.js

@@ -1,51 +1,57 @@
 "use strict";
+import { jsx } from "react/jsx-runtime";
 import { Button as HeadlessButton } from "@headlessui/react";
 import {
-  createElement,
-  forwardRef,
-  useCallback
+  Children,
+  cloneElement,
+  isValidElement
 } from "react";
 import { createComponentTheme } from "../theme/internals.js";
-import { useForm } from "./internals.js";
+import { Icon } from "./Icon.js";
+import { forwardRef } from "./internals.js";
 export const useButtonTheme = createComponentTheme("Button", {
   variants: {
-    type: ["solid", "outline", "text", "icon"],
+    variant: ["solid", "outline", "text"],
     size: ["small", "medium", "large"],
     disabled: [true, false]
   }
 });
+const BUTTON_ELEMENT = "button";
 export const Button = forwardRef(
   ({
-    as,
-    className,
-    type = "solid",
+    variant = "solid",
     size = "medium",
     disabled = false,
+    as = BUTTON_ELEMENT,
     submit = false,
+    className,
     children,
-    onClick,
     ...rest
   }, ref) => {
-    let theme = useButtonTheme({ type, size, disabled });
-    let form = useForm();
-    let handleClick = useCallback(() => {
-      onClick?.();
-    }, [onClick]);
+    let theme = useButtonTheme({ variant, size, disabled });
     let props = {
+      as,
+      ref,
       className: theme(null, className),
-      onClick: handleClick,
       disabled,
-      ...rest,
-      ref
+      ...rest
     };
-    let element = as ?? "button";
-    if (element === "button") {
+    if (as === BUTTON_ELEMENT) {
       props.type = "button";
     }
-    if (form && submit) {
+    if (submit) {
       props.type = "submit";
     }
-    return createElement(HeadlessButton, props, children);
+    if (typeof children === "function") {
+      return /* @__PURE__ */ jsx(HeadlessButton, { ...props, children });
+    }
+    let enhancedChildren = Children.map(children, (child) => {
+      if (isValidElement(child) && child.type === Icon) {
+        return cloneElement(child, { "data-icon": "" });
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsx(HeadlessButton, { ...props, children: enhancedChildren });
   }
 );
 //# sourceMappingURL=Button.js.map

package/build/components/Button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../source/components/Button.ts"],
-  "sourcesContent": ["import {Button as HeadlessButton} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  createElement,\n  type ElementType,\n  forwardRef,\n  type PropsWithChildren,\n  type Ref,\n  useCallback,\n} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\nimport {useForm} from './internals.js';\n\nexport const useButtonTheme = createComponentTheme('Button', {\n  variants: {\n    type: ['solid', 'outline', 'text', 'icon'],\n    size: ['small', 'medium', 'large'],\n    disabled: [true, false],\n  },\n});\n\nexport type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> &\n  ComponentPropsWithoutRef<T> & {\n    className?: string | undefined;\n    submit?: boolean | undefined;\n    as?: T | undefined;\n    onClick?: (() => void) | undefined;\n    'aria-label'?: string | undefined;\n  };\n\nexport const Button = forwardRef(\n  <T extends ElementType = 'button'>(\n    {\n      as,\n      className,\n      type = 'solid',\n      size = 'medium',\n      disabled = false,\n      submit = false,\n      children,\n      onClick,\n      ...rest\n    }: PropsWithChildren<ButtonProps<T>>,\n    ref: Ref<T>,\n  ) => {\n    let theme = useButtonTheme({type, size, disabled});\n    let form = useForm();\n\n    let handleClick = useCallback(() => {\n      onClick?.();\n    }, [onClick]);\n\n    let props: Record<string, unknown> = {\n      className: theme(null, className),\n      onClick: handleClick,\n      disabled,\n      ...rest,\n      ref,\n    };\n\n    let element = as ?? 'button';\n\n    if (element === 'button') {\n      props.type = 'button';\n    }\n\n    if (form && submit) {\n      props.type = 'submit';\n    }\n\n    return createElement(HeadlessButton, props, children);\n  },\n);\n"],
-  "mappings": ";AAAA,SAAQ,UAAU,sBAAqB;AACvC;AAAA,EAEE;AAAA,EAEA;AAAA,EAGA;AAAA,OACK;AAEP,SAA6B,4BAA2B;AACxD,SAAQ,eAAc;AAEf,aAAM,iBAAiB,qBAAqB,UAAU;AAAA,EAC3D,UAAU;AAAA,IACR,MAAM,CAAC,SAAS,WAAW,QAAQ,MAAM;AAAA,IACzC,MAAM,CAAC,SAAS,UAAU,OAAO;AAAA,IACjC,UAAU,CAAC,MAAM,KAAK;AAAA,EACxB;AACF,CAAC;AAWM,aAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,eAAe,EAAC,MAAM,MAAM,SAAQ,CAAC;AACjD,QAAI,OAAO,QAAQ;AAEnB,QAAI,cAAc,YAAY,MAAM;AAClC,gBAAU;AAAA,IACZ,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAI,QAAiC;AAAA,MACnC,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF;AAEA,QAAI,UAAU,MAAM;AAEpB,QAAI,YAAY,UAAU;AACxB,YAAM,OAAO;AAAA,IACf;AAEA,QAAI,QAAQ,QAAQ;AAClB,YAAM,OAAO;AAAA,IACf;AAEA,WAAO,cAAc,gBAAgB,OAAO,QAAQ;AAAA,EACtD;AACF;",
+  "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';\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;\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) {\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": ";AAkEa;AAlEb,SAAQ,UAAU,sBAA8D;AAChF;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,OAEK;AAEP,SAA6B,4BAA2B;AACxD,SAAQ,YAAW;AACnB,SAAQ,kBAAiB;AAElB,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,KAAK,MAAM,SAAS,MAAM;AAEhD,eAAO,aAAkB,OAAO,EAAC,aAAa,GAAE,CAAC;AAAA,MACnD;AAEA,aAAO;AAAA,IACT,CAAC;AAED,WAAO,oBAAC,kBAAgB,GAAG,OAAQ,4BAAiB;AAAA,EACtD;AACF;",
   "names": []
 }

package/build/components/Card.d.ts

@@ -1,5 +1,10 @@
 import { type PropsWithChildren } from 'react';
-export type CardProps = {
-    className?: string;
+import { type ComponentProps } 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 declare function Card({ className, children }: PropsWithChildren<CardProps>): import("react/jsx-runtime").JSX.Element;
+export type CardProps = PropsWithChildren<ComponentProps<typeof useCardTheme> & {
+    className?: string;
+}>;
+export declare function Card({ className, children }: CardProps): import("react/jsx-runtime").JSX.Element;

package/build/components/Card.js

@@ -1,7 +1,9 @@
 "use strict";
 import { jsx } from "react/jsx-runtime";
-import { twMerge } from "tailwind-merge";
+import { createComponentTheme } from "../theme/internals.js";
+export const useCardTheme = createComponentTheme("Card");
 export function Card({ className, children }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("rounded border border-gray-100 p-4", className), children });
+  let theme = useCardTheme();
+  return /* @__PURE__ */ jsx("div", { className: theme(null, className), children });
 }
 //# 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';\nimport {twMerge} from 'tailwind-merge';\n\nexport type CardProps = {\n  className?: string;\n};\n\nexport function Card({className, children}: PropsWithChildren<CardProps>) {\n  return <div className={twMerge('rounded border border-gray-100 p-4', className)}>{children}</div>;\n}\n"],
-  "mappings": ";AAQS;AAPT,SAAQ,eAAc;AAMf,gBAAS,KAAK,EAAC,WAAW,SAAQ,GAAiC;AACxE,SAAO,oBAAC,SAAI,WAAW,QAAQ,sCAAsC,SAAS,GAAI,UAAS;AAC7F;",
+  "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;",
   "names": []
 }

package/build/components/Checkbox.d.ts

@@ -1,3 +1,4 @@
+import { type ComponentPropsWithoutRef, type ElementType, type Ref } from 'react';
 import { type ComponentProps } from '../theme/internals.js';
 export declare const useCheckboxTheme: ((themeProps: {
     readonly disabled: boolean;
@@ -15,10 +16,25 @@ export declare const useCheckboxTheme: ((themeProps: {
         readonly elements: ["root", "checked", "unchecked", "icon"];
     };
 };
-export type CheckboxProps = ComponentProps<typeof useCheckboxTheme> & {
+export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    checked?: boolean | undefined;
+    indeterminate?: boolean | undefined;
+    autoFocus?: boolean | undefined;
     name?: string;
     className?: string;
-    value?: boolean;
-    onChange?: ((value: boolean) => void) | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
 };
-export declare function Checkbox({ name, className, disabled, onChange, value }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+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>> & {
+    as?: T | undefined;
+    checked?: boolean | undefined;
+    indeterminate?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    name?: string | undefined;
+    className?: string | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+} & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => import("react").ReactNode;

package/build/components/Checkbox.js

@@ -1,63 +1,71 @@
 "use strict";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox as HeadlessCheckbox } from "@headlessui/react";
+import {
+  Checkbox as HeadlessCheckbox
+} from "@headlessui/react";
 import { CheckIcon } from "@heroicons/react/16/solid";
 import { useCallback } from "react";
-import { Controller } from "react-hook-form";
 import { createComponentTheme } from "../theme/internals.js";
-import { useFieldName, useForm } from "./internals.js";
+import { forwardRef, useFormId } from "./internals.js";
+import { useField } from "./useField.js";
+import { useFieldName } from "./useFieldName.js";
 export const useCheckboxTheme = createComponentTheme("Checkbox", {
   variants: {
     disabled: [true, false]
   },
   elements: ["root", "checked", "unchecked", "icon"]
 });
-export function Checkbox({ name, className, disabled = false, onChange, value }) {
-  let theme = useCheckboxTheme({ disabled });
-  let form = useForm();
-  let fieldName = useFieldName();
-  let handleChange = useCallback(() => {
-    onChange?.(!value);
-  }, [onChange, value]);
-  if (fieldName && form) {
-    return /* @__PURE__ */ jsx(
-      Controller,
-      {
-        name: fieldName,
-        control: form.control,
-        render: ({ field }) => {
-          let handleChange2 = field.onChange;
-          let handleBlur = field.onBlur;
-          return /* @__PURE__ */ jsxs(
-            HeadlessCheckbox,
-            {
-              className: theme.root("group relative", className),
-              name: fieldName,
-              checked: Boolean(field.value),
-              onChange: handleChange2,
-              onBlur: handleBlur,
-              children: [
-                /* @__PURE__ */ jsx("div", { className: theme.checked(), children: /* @__PURE__ */ jsx(CheckIcon, { className: theme.icon() }) }),
-                /* @__PURE__ */ jsx("div", { className: theme.unchecked() })
-              ]
-            }
-          );
-        }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    HeadlessCheckbox,
-    {
-      className: theme.root("group relative", className),
-      name: name ?? "",
-      checked: Boolean(value),
-      onChange: handleChange,
-      children: [
+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("group relative", className),
+        ...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() })
-      ]
+      ] });
     }
-  );
-}
+    let props = {
+      as,
+      ref,
+      checked: Boolean(checked),
+      name,
+      indeterminate,
+      autoFocus,
+      className: theme.root("group relative", className),
+      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() })
+    ] });
+  }
+);
 //# sourceMappingURL=Checkbox.js.map

package/build/components/Checkbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../source/components/Checkbox.tsx"],
-  "sourcesContent": ["/* eslint-disable react/jsx-no-bind -- needed */\nimport {Checkbox as HeadlessCheckbox} from '@headlessui/react';\nimport {CheckIcon} from '@heroicons/react/16/solid';\nimport {useCallback} from 'react';\nimport {Controller} from 'react-hook-form';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\nimport {useFieldName, useForm} from './internals.js';\n\nexport const useCheckboxTheme = createComponentTheme('Checkbox', {\n  variants: {\n    disabled: [true, false],\n  },\n  elements: ['root', 'checked', 'unchecked', 'icon'],\n});\n\nexport type CheckboxProps = ComponentProps<typeof useCheckboxTheme> & {\n  name?: string;\n  className?: string;\n  value?: boolean;\n  onChange?: ((value: boolean) => void) | undefined;\n};\n\nexport function Checkbox({name, className, disabled = false, onChange, value}: CheckboxProps) {\n  let theme = useCheckboxTheme({disabled});\n  let form = useForm();\n  let fieldName = useFieldName();\n\n  let handleChange = useCallback(() => {\n    onChange?.(!value);\n  }, [onChange, value]);\n\n  if (fieldName && form) {\n    return (\n      <Controller\n        name={fieldName}\n        control={form.control}\n        render={({field}) => {\n          let handleChange = field.onChange;\n          let handleBlur = field.onBlur;\n\n          return (\n            <HeadlessCheckbox\n              className={theme.root('group relative', className)}\n              name={fieldName}\n              checked={Boolean(field.value)}\n              onChange={handleChange}\n              onBlur={handleBlur}\n            >\n              <div className={theme.checked()}>\n                <CheckIcon className={theme.icon()} />\n              </div>\n              <div className={theme.unchecked()} />\n            </HeadlessCheckbox>\n          );\n        }}\n      />\n    );\n  }\n\n  // TODO: what to do with name being undefined?\n  return (\n    <HeadlessCheckbox\n      className={theme.root('group relative', className)}\n      name={name ?? ''}\n      checked={Boolean(value)}\n      onChange={handleChange}\n    >\n      <div className={theme.checked()}>\n        <CheckIcon className={theme.icon()} />\n      </div>\n      <div className={theme.unchecked()} />\n    </HeadlessCheckbox>\n  );\n}\n"],
-  "mappings": ";AA0CY,SAQI,KARJ;AAzCZ,SAAQ,YAAY,wBAAuB;AAC3C,SAAQ,iBAAgB;AACxB,SAAQ,mBAAkB;AAC1B,SAAQ,kBAAiB;AAEzB,SAA6B,4BAA2B;AACxD,SAAQ,cAAc,eAAc;AAE7B,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;AASM,gBAAS,SAAS,EAAC,MAAM,WAAW,WAAW,OAAO,UAAU,MAAK,GAAkB;AAC5F,MAAI,QAAQ,iBAAiB,EAAC,SAAQ,CAAC;AACvC,MAAI,OAAO,QAAQ;AACnB,MAAI,YAAY,aAAa;AAE7B,MAAI,eAAe,YAAY,MAAM;AACnC,eAAW,CAAC,KAAK;AAAA,EACnB,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS,KAAK;AAAA,QACd,QAAQ,CAAC,EAAC,MAAK,MAAM;AACnB,cAAIA,gBAAe,MAAM;AACzB,cAAI,aAAa,MAAM;AAEvB,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,MAAM,KAAK,kBAAkB,SAAS;AAAA,cACjD,MAAM;AAAA,cACN,SAAS,QAAQ,MAAM,KAAK;AAAA,cAC5B,UAAUA;AAAA,cACV,QAAQ;AAAA,cAER;AAAA,oCAAC,SAAI,WAAW,MAAM,QAAQ,GAC5B,8BAAC,aAAU,WAAW,MAAM,KAAK,GAAG,GACtC;AAAA,gBACA,oBAAC,SAAI,WAAW,MAAM,UAAU,GAAG;AAAA;AAAA;AAAA,UACrC;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM,KAAK,kBAAkB,SAAS;AAAA,MACjD,MAAM,QAAQ;AAAA,MACd,SAAS,QAAQ,KAAK;AAAA,MACtB,UAAU;AAAA,MAEV;AAAA,4BAAC,SAAI,WAAW,MAAM,QAAQ,GAC5B,8BAAC,aAAU,WAAW,MAAM,KAAK,GAAG,GACtC;AAAA,QACA,oBAAC,SAAI,WAAW,MAAM,UAAU,GAAG;AAAA;AAAA;AAAA,EACrC;AAEJ;",
-  "names": ["handleChange"]
+  "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;",
+  "names": ["props"]
 }

package/build/components/CheckboxField.d.ts

@@ -1,11 +1,17 @@
+import { type FieldMetadata, type FieldName } from '@conform-to/react';
 import { type PropsWithChildren } from 'react';
 import { type ComponentProps } 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;
 };
-export type CheckboxFieldProps = PropsWithChildren<ComponentProps<typeof useCheckboxFieldTheme> & {
+export type CheckboxFieldProps = PropsWithChildren<ComponentProps<typeof useCheckboxFieldTheme> & ({
     className?: string | undefined;
-    name?: string | undefined;
-}>;
-export declare function CheckboxField({ name, className, children }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+    field?: FieldMetadata<any, any> | undefined;
+    name?: undefined;
+} | {
+    className?: string | undefined;
+    field?: undefined;
+    name?: FieldName<any, any> | string | undefined;
+})>;
+export declare function CheckboxField({ field, name, className, children }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;

package/build/components/CheckboxField.js

@@ -2,10 +2,13 @@
 import { jsx } from "react/jsx-runtime";
 import { Field as HeadlessField } from "@headlessui/react";
 import { createComponentTheme } from "../theme/internals.js";
-import { fieldNameContext } from "./internals.js";
+import { fieldContext, fieldNameContext } from "./internals.js";
 export const useCheckboxFieldTheme = createComponentTheme("CheckboxField");
-export function CheckboxField({ name, className, children }) {
+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 }) });
+  }
   if (name) {
     return /* @__PURE__ */ jsx(fieldNameContext.Provider, { value: name, children: /* @__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 {Field as HeadlessField} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\nimport {fieldNameContext} from './internals.js';\n\nexport const useCheckboxFieldTheme = createComponentTheme('CheckboxField');\n\nexport type CheckboxFieldProps = PropsWithChildren<\n  ComponentProps<typeof useCheckboxFieldTheme> & {\n    className?: string | undefined;\n    name?: string | undefined;\n  }\n>;\n\nexport function CheckboxField({name, className, children}: CheckboxFieldProps) {\n  let theme = useCheckboxFieldTheme();\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": ";AAqBQ;AArBR,SAAQ,SAAS,qBAAoB;AAGrC,SAA6B,4BAA2B;AACxD,SAAQ,wBAAuB;AAExB,aAAM,wBAAwB,qBAAqB,eAAe;AASlE,gBAAS,cAAc,EAAC,MAAM,WAAW,SAAQ,GAAuB;AAC7E,MAAI,QAAQ,sBAAsB;AAElC,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 {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;",
   "names": []
 }

package/build/components/Combobox.d.ts

@@ -1,33 +1,56 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
 import { type ComponentProps } 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;
-    item: (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;
-    label: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    panel: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
-    items: (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";
     themeDefinition: {
         readonly variants: {
             readonly disabled: [true, false];
+            readonly invalid: [true, false];
         };
-        readonly elements: ["root", "label", "icon", "panel", "items", "item", "input"];
+        readonly elements: ["root", "input", "icon", "options"];
     };
 };
-type ComboboxItem<T> = {
-    value: T;
+export type ComboboxItem<V> = {
+    value: V;
     label: string;
 };
-export type ComboboxProps<T> = ComponentProps<typeof useComboboxTheme> & {
+export type ComboboxProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useComboboxTheme> & ComponentPropsWithoutRef<T> & ({
+    as?: T | undefined;
+    value?: V | undefined;
+    defaultValue?: V | undefined;
+    multiple?: false | undefined;
+    items?: Array<ComboboxItem<V>> | undefined;
     placeholder?: string;
-    value?: T | undefined;
-    items: Array<ComboboxItem<T>>;
-    onChange?: (selectedValue: T) => void;
+    immediate?: boolean | undefined;
+    virtual?: boolean | undefined;
+    customValue?: boolean | undefined;
+    name?: string | undefined;
     className?: string;
-};
-export declare function Combobox<T>({ items, placeholder, onChange, value, disabled, className, }: ComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};
+    onChange?: (selectedValue: V) => void;
+} | {
+    as?: T | undefined;
+    value?: V[] | undefined;
+    defaultValue?: V[] | undefined;
+    multiple: true;
+    items?: Array<ComboboxItem<V>> | undefined;
+    placeholder?: string;
+    immediate?: boolean | undefined;
+    virtual?: boolean | undefined;
+    customValue?: boolean | undefined;
+    name?: string | undefined;
+    className?: string;
+    onChange?: (selectedValue: V[]) => 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> & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => import("react").ReactNode;