@jakubmazanec/ui 0.1.0-unstable.081bdf1

package/README.md

@@ -0,0 +1,45 @@
+<!-- header -->
+<div align="center">
+
+# @jakubmazanec/ui
+
+React component library.
+
+</div>
+<!-- header -->
+
+## Installation
+
+```sh
+npm install @jakubmazanec/ui
+```
+
+⚠️ This is an [ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c) package!
+It cannot be required from a CommonJS module.
+
+#### Prerequisites
+
+- Node.js 20 or later
+- TypeScript 5 or later
+
+## Usage
+
+⚠️ 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.
+
+## License
+
+This package is licensed under the GNU Lesser General Public License v3. See [LICENSE](./LICENSE.md)
+for details.

package/build/components/Button.d.ts

@@ -0,0 +1,40 @@
+import { type ButtonProps as HeadlessButtonProps } from '@headlessui/react';
+import { type ComponentPropsWithoutRef, type ElementType, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useButtonTheme: ((themeProps: {
+    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", "invisible"];
+            readonly size: ["small", "medium", "large"];
+            readonly disabled: [true, false];
+        };
+    };
+};
+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" | "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;
+}) => import("react").ReactNode;
+export declare const buttonTheme: ComponentTheme<typeof useButtonTheme>;

package/build/components/Button.js

@@ -0,0 +1,139 @@
+"use strict";
+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 { Icon } from "./Icon.js";
+import { forwardRef } from "./internals.js";
+import { Spinner } from "./Spinner.js";
+export const useButtonTheme = createComponentTheme("Button", {
+  variants: {
+    variant: ["solid", "outline", "text", "invisible"],
+    size: ["small", "medium", "large"],
+    disabled: [true, false]
+  }
+});
+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,
+    ...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
+    ] });
+  }
+);
+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-gray-900 hover:bg-gray-800",
+      outline: "text-gray-950 border-2 border-gray-100 hover:border-gray-200",
+      text: "text-gray-950 border-2 border-transparent hover:border-gray-200",
+      invisible: "cursor-default text-gray-600"
+    },
+    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-gray-200 hover:bg-gray-200"
+    },
+    {
+      variant: "outline",
+      disabled: true,
+      className: "text-gray-200 hover:border-gray-100"
+    },
+    {
+      variant: "text",
+      disabled: true,
+      className: "text-gray-200 hover:border-transparent"
+    },
+    {
+      variant: "invisible",
+      disabled: true,
+      className: "text-gray-200 "
+    }
+  ]
+};
+//# sourceMappingURL=Button.js.map

package/build/components/Button.js.map

@@ -0,0 +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-gray-900 hover:bg-gray-800',\n      outline: 'text-gray-950 border-2 border-gray-100 hover:border-gray-200',\n      text: 'text-gray-950 border-2 border-transparent hover:border-gray-200',\n      invisible: 'cursor-default text-gray-600',\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-gray-200 hover:bg-gray-200',\n    },\n    {\n      variant: 'outline',\n      disabled: true,\n      className: 'text-gray-200 hover:border-gray-100',\n    },\n    {\n      variant: 'text',\n      disabled: true,\n      className: 'text-gray-200 hover:border-transparent',\n    },\n    {\n      variant: 'invisible',\n      disabled: true,\n      className: 'text-gray-200 ',\n    },\n  ],\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/build/components/Card.d.ts

@@ -0,0 +1,19 @@
+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<T extends ElementType> = ComponentProps<typeof useCardTheme> & ComponentPropsWithoutRef<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 | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => import("react").ReactNode;
+export declare const cardTheme: ComponentTheme<typeof useCardTheme>;

package/build/components/Card.js

@@ -0,0 +1,26 @@
+"use strict";
+import {
+  createElement
+} from "react";
+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);
+  }
+);
+export const cardTheme = {
+  className: "rounded-2 border border-gray-100 p-4"
+};
+//# sourceMappingURL=Card.js.map

package/build/components/Card.js.map

@@ -0,0 +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-gray-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

@@ -0,0 +1,39 @@
+import { type ComponentPropsWithoutRef, type ElementType, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useCheckboxTheme: ((themeProps: {
+    readonly disabled: boolean;
+}) => {
+    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", "icon"];
+    };
+};
+export type CheckboxProps<T extends ElementType> = ComponentProps<typeof useCheckboxTheme> & Omit<ComponentPropsWithoutRef<T>, 'onChange'> & {
+    as?: T | undefined;
+    checked?: boolean | undefined;
+    indeterminate?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    name?: string;
+    className?: string;
+    onChange?: ((checked: boolean) => void) | undefined;
+};
+export declare const Checkbox: <T extends ElementType = "span">(props: Partial<import("@jakubmazanec/ts-utils").Writable<{
+    readonly disabled: boolean;
+}>> & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, "onChange"> & {
+    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;
+export declare const checkboxTheme: ComponentTheme<typeof useCheckboxTheme>;

package/build/components/Checkbox.js

@@ -0,0 +1,87 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import {
+  Checkbox as HeadlessCheckbox
+} from "@headlessui/react";
+import { useCallback } from "react";
+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";
+export const useCheckboxTheme = createComponentTheme("Checkbox", {
+  variants: {
+    disabled: [true, false]
+  },
+  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 = {
+      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",
+    icon: "flex justify-content justify-item size-5 *:rounded-2 *:bg-white *:border-2 *:border-gray-100 *:hover:border-gray-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-gray-100 group-data-[checked]/checkbox:*:bg-gray-950 group-data-[checked]/checkbox:*:border-gray-950 group-data-[checked]/checkbox:*:text-white"
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: "cursor-not-allowed",
+        icon: "*:hover:text-transparent *:border-gray-50 *:hover:border-gray-50 group-data-[checked]/checkbox:*:bg-gray-100 group-data-[checked]/checkbox:*:border-gray-100 group-data-[checked]/checkbox:*:text-white"
+      },
+      false: {
+        root: "",
+        icon: ""
+      }
+    }
+  }
+};
+//# sourceMappingURL=Checkbox.js.map

package/build/components/Checkbox.js.map

@@ -0,0 +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-gray-100 *:hover:border-gray-200 *:shadow-inner *:transition-colors *:text-transparent *:hover:text-gray-100 group-data-[checked]/checkbox:*:bg-gray-950 group-data-[checked]/checkbox:*:border-gray-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-gray-50 *:hover:border-gray-50 group-data-[checked]/checkbox:*:bg-gray-100 group-data-[checked]/checkbox:*:border-gray-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

@@ -0,0 +1,18 @@
+import { type FieldMetadata, type FieldName } from '@conform-to/react';
+import { type PropsWithChildren } from 'react';
+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;
+};
+export type CheckboxFieldProps = PropsWithChildren<ComponentProps<typeof useCheckboxFieldTheme> & ({
+    className?: string | undefined;
+    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;
+export declare const checkboxFieldTheme: ComponentTheme<typeof useCheckboxFieldTheme>;

package/build/components/CheckboxField.js

@@ -0,0 +1,22 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { Field as HeadlessField } from "@headlessui/react";
+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), "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(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

@@ -0,0 +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;",
+  "names": []
+}

package/build/components/Combobox.d.ts

@@ -0,0 +1,57 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useComboboxTheme: ((themeProps: {
+    readonly disabled: boolean;
+    readonly invalid: boolean;
+}) => {
+    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";
+    themeDefinition: {
+        readonly variants: {
+            readonly disabled: [true, false];
+            readonly invalid: [true, false];
+        };
+        readonly elements: ["root", "input", "icon", "options"];
+    };
+};
+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> & ({
+    as?: T | undefined;
+    value?: V | undefined;
+    defaultValue?: V | undefined;
+    multiple?: false | undefined;
+    items?: Array<ComboboxItem<V>> | undefined;
+    placeholder?: string;
+    immediate?: boolean | undefined;
+    virtual?: boolean | undefined;
+    customValue?: boolean | undefined;
+    name?: string | undefined;
+    className?: string;
+    onChange?: (selectedValue: V | undefined) => 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[] | 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> & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => import("react").ReactNode;
+export declare const comboboxTheme: ComponentTheme<typeof useComboboxTheme>;