@jakubmazanec/ui 0.1.0-unstable.0c19abe → 0.1.0-unstable.14b8d65

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,40 @@
-import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren } from 'react';
-import { type ComponentProps } from '../theme/internals.js';
+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 type: "text" | "icon" | "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 type: ["solid", "outline", "text", "icon"];
+            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> & {
-    className?: string | undefined;
-    submit?: boolean | undefined;
+export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> & Omit<ComponentPropsWithoutRef<T>, 'type'> & {
     as?: T | undefined;
-    onClick?: (() => void) | undefined;
-    'aria-label'?: string | undefined;
+    submit?: boolean | undefined;
+    idle?: 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" | "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

@@ -1,51 +1,139 @@
 "use strict";
+import { jsx, jsxs } 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 {
+  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: {
-    type: ["solid", "outline", "text", "icon"],
+    variant: ["solid", "outline", "text", "invisible"],
     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,
+    idle = true,
+    autoFocus = false,
     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 = {
-      className: theme(null, className),
-      onClick: handleClick,
-      disabled,
-      ...rest,
-      ref
+      as,
+      ref,
+      className: theme(disabled ? "pointer-events-none" : null, className),
+      disabled: disabled || submit && !idle,
+      autoFocus,
+      "data-component": "button",
+      ...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 || 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

@@ -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 {\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

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

@@ -1,7 +1,26 @@
 "use strict";
-import { jsx } from "react/jsx-runtime";
-import { twMerge } from "tailwind-merge";
-export function Card({ className, children }) {
-  return /* @__PURE__ */ jsx("div", { className: twMerge("rounded border border-gray-100 p-4", className), children });
-}
+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

@@ -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;",
+  "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

@@ -1,24 +1,39 @@
-import { type ComponentProps } from '../theme/internals.js';
+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;
 }) => {
-    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 = ComponentProps<typeof useCheckboxTheme> & {
+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;
-    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;
+}>> & 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

@@ -1,63 +1,87 @@
 "use strict";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Checkbox as HeadlessCheckbox } from "@headlessui/react";
-import { CheckIcon } from "@heroicons/react/16/solid";
+import { jsx } from "react/jsx-runtime";
+import {
+  Checkbox as HeadlessCheckbox
+} from "@headlessui/react";
 import { useCallback } from "react";
-import { Controller } from "react-hook-form";
-import { createComponentTheme } from "../theme/internals.js";
-import { useFieldName, useForm } from "./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";
 export const useCheckboxTheme = createComponentTheme("Checkbox", {
   variants: {
     disabled: [true, false]
   },
-  elements: ["root", "checked", "unchecked", "icon"]
+  elements: ["root", "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),
+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,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: theme.checked(), children: /* @__PURE__ */ jsx(CheckIcon, { className: theme.icon() }) }),
-        /* @__PURE__ */ jsx("div", { className: theme.unchecked() })
-      ]
+      ...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

@@ -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 {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

@@ -1,11 +1,18 @@
+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;
 };
-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;
+export declare const checkboxFieldTheme: ComponentTheme<typeof useCheckboxFieldTheme>;