@jakubmazanec/ui 0.1.0-unstable.0c19abe

package/build/components/DialogPanel.js

@@ -0,0 +1,10 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { Dialog as HeadlessDialog } from "@headlessui/react";
+import { createComponentTheme } from "../theme/internals.js";
+export const useDialogPanelTheme = createComponentTheme("DialogPanel");
+export function DialogPanel({ className, children }) {
+  let theme = useDialogPanelTheme();
+  return /* @__PURE__ */ jsx(HeadlessDialog.Panel, { className: theme(null, className), children });
+}
+//# sourceMappingURL=DialogPanel.js.map

package/build/components/DialogPanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/DialogPanel.tsx"],
+  "sourcesContent": ["import {Dialog as HeadlessDialog} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\n\nexport const useDialogPanelTheme = createComponentTheme('DialogPanel');\n\nexport type DialogPanelProps = PropsWithChildren<\n  ComponentProps<typeof useDialogPanelTheme> & {\n    className?: string;\n  }\n>;\n\nexport function DialogPanel({className, children}: DialogPanelProps) {\n  let theme = useDialogPanelTheme();\n\n  return <HeadlessDialog.Panel className={theme(null, className)}>{children}</HeadlessDialog.Panel>;\n}\n"],
+  "mappings": ";AAgBS;AAhBT,SAAQ,UAAU,sBAAqB;AAGvC,SAA6B,4BAA2B;AAEjD,aAAM,sBAAsB,qBAAqB,aAAa;AAQ9D,gBAAS,YAAY,EAAC,WAAW,SAAQ,GAAqB;AACnE,MAAI,QAAQ,oBAAoB;AAEhC,SAAO,oBAAC,eAAe,OAAf,EAAqB,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AAC5E;",
+  "names": []
+}

package/build/components/DialogTitle.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useDialogTitleTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "DialogTitle";
+    themeDefinition: undefined;
+};
+export type DialogTitleProps = PropsWithChildren<ComponentProps<typeof useDialogTitleTheme> & {
+    className?: string;
+}>;
+export declare function DialogTitle({ className, children }: DialogTitleProps): import("react/jsx-runtime").JSX.Element;

package/build/components/DialogTitle.js

@@ -0,0 +1,10 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { Dialog as HeadlessDialog } from "@headlessui/react";
+import { createComponentTheme } from "../theme/internals.js";
+export const useDialogTitleTheme = createComponentTheme("DialogTitle");
+export function DialogTitle({ className, children }) {
+  let theme = useDialogTitleTheme();
+  return /* @__PURE__ */ jsx(HeadlessDialog.Title, { className: theme(null, className), children });
+}
+//# sourceMappingURL=DialogTitle.js.map

package/build/components/DialogTitle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/DialogTitle.tsx"],
+  "sourcesContent": ["import {Dialog as HeadlessDialog} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\n\nexport const useDialogTitleTheme = createComponentTheme('DialogTitle');\n\nexport type DialogTitleProps = PropsWithChildren<\n  ComponentProps<typeof useDialogTitleTheme> & {\n    className?: string;\n  }\n>;\n\nexport function DialogTitle({className, children}: DialogTitleProps) {\n  let theme = useDialogTitleTheme();\n\n  return <HeadlessDialog.Title className={theme(null, className)}>{children}</HeadlessDialog.Title>;\n}\n"],
+  "mappings": ";AAgBS;AAhBT,SAAQ,UAAU,sBAAqB;AAGvC,SAA6B,4BAA2B;AAEjD,aAAM,sBAAsB,qBAAqB,aAAa;AAQ9D,gBAAS,YAAY,EAAC,WAAW,SAAQ,GAAqB;AACnE,MAAI,QAAQ,oBAAoB;AAEhC,SAAO,oBAAC,eAAe,OAAf,EAAqB,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AAC5E;",
+  "names": []
+}

package/build/components/Error.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useErrorTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Error";
+    themeDefinition: undefined;
+};
+export type ErrorProps = PropsWithChildren<ComponentProps<typeof useErrorTheme> & {
+    className?: string;
+}>;
+export declare function Error({ className, children }: ErrorProps): import("react/jsx-runtime").JSX.Element;

package/build/components/Error.js

@@ -0,0 +1,14 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { createComponentTheme } from "../theme/internals.js";
+import { useField } from "./internals.js";
+export const useErrorTheme = createComponentTheme("Error");
+export function Error({ className, children }) {
+  let theme = useErrorTheme();
+  let field = useField();
+  if (field) {
+    return /* @__PURE__ */ jsx("div", { className: theme(null, className), children: /* @__PURE__ */ jsx("p", { children: field.state.error?.message }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: theme(null, className), children });
+}
+//# sourceMappingURL=Error.js.map

package/build/components/Error.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Error.tsx"],
+  "sourcesContent": ["import {type PropsWithChildren} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\nimport {useField} from './internals.js';\n\nexport const useErrorTheme = createComponentTheme('Error');\n\nexport type ErrorProps = PropsWithChildren<\n  ComponentProps<typeof useErrorTheme> & {\n    className?: string;\n  }\n>;\n\nexport function Error({className, children}: ErrorProps) {\n  let theme = useErrorTheme();\n  let field = useField();\n\n  if (field) {\n    return (\n      <div className={theme(null, className)}>\n        <p>{field.state.error?.message}</p>\n      </div>\n    );\n  }\n\n  return <div className={theme(null, className)}>{children}</div>;\n}\n"],
+  "mappings": ";AAoBQ;AAlBR,SAA6B,4BAA2B;AACxD,SAAQ,gBAAe;AAEhB,aAAM,gBAAgB,qBAAqB,OAAO;AAQlD,gBAAS,MAAM,EAAC,WAAW,SAAQ,GAAe;AACvD,MAAI,QAAQ,cAAc;AAC1B,MAAI,QAAQ,SAAS;AAErB,MAAI,OAAO;AACT,WACE,oBAAC,SAAI,WAAW,MAAM,MAAM,SAAS,GACnC,8BAAC,OAAG,gBAAM,MAAM,OAAO,SAAQ,GACjC;AAAA,EAEJ;AAEA,SAAO,oBAAC,SAAI,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AAC3D;",
+  "names": []
+}

package/build/components/Field.d.ts

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useFieldTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Field";
+    themeDefinition: undefined;
+};
+export type FieldProps = PropsWithChildren<ComponentProps<typeof useFieldTheme> & {
+    className?: string | undefined;
+    name?: string | undefined;
+}>;
+export declare function Field({ name, className, children }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/build/components/Field.js

@@ -0,0 +1,14 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { Field as HeadlessField } from "@headlessui/react";
+import { createComponentTheme } from "../theme/internals.js";
+import { fieldNameContext } from "./internals.js";
+export const useFieldTheme = createComponentTheme("Field");
+export function Field({ name, className, children }) {
+  let theme = useFieldTheme();
+  if (name) {
+    return /* @__PURE__ */ jsx(fieldNameContext.Provider, { value: name, children: /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), children }) });
+  }
+  return /* @__PURE__ */ jsx(HeadlessField, { className: theme(null, className), children });
+}
+//# sourceMappingURL=Field.js.map

package/build/components/Field.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Field.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 useFieldTheme = createComponentTheme('Field');\n\nexport type FieldProps = PropsWithChildren<\n  ComponentProps<typeof useFieldTheme> & {\n    className?: string | undefined;\n    name?: string | undefined;\n  }\n>;\n\nexport function Field({name, className, children}: FieldProps) {\n  let theme = useFieldTheme();\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,gBAAgB,qBAAqB,OAAO;AASlD,gBAAS,MAAM,EAAC,MAAM,WAAW,SAAQ,GAAe;AAC7D,MAAI,QAAQ,cAAc;AAE1B,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/Form.d.ts

@@ -0,0 +1,13 @@
+import { type PropsWithChildren } from 'react';
+import { type UseFormReturn } from 'react-hook-form';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useFormTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Form";
+    themeDefinition: undefined;
+};
+export type FormProps<D> = PropsWithChildren<ComponentProps<typeof useFormTheme> & {
+    className?: string;
+    form: UseFormReturn<any>;
+    onSubmit: (data: D) => void;
+}>;
+export declare function Form<D>({ className, form, onSubmit, children }: FormProps<D>): import("react/jsx-runtime").JSX.Element;

package/build/components/Form.js

@@ -0,0 +1,11 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { createComponentTheme } from "../theme/internals.js";
+import { formContext } from "./internals.js";
+export const useFormTheme = createComponentTheme("Form");
+export function Form({ className, form, onSubmit, children }) {
+  let theme = useFormTheme();
+  let handleSubmit = form.handleSubmit(onSubmit);
+  return /* @__PURE__ */ jsx(formContext.Provider, { value: form, children: /* @__PURE__ */ jsx("form", { className: theme(null, className), onSubmit: handleSubmit, children }) });
+}
+//# sourceMappingURL=Form.js.map

package/build/components/Form.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Form.tsx"],
+  "sourcesContent": ["import {type PropsWithChildren} from 'react';\nimport {type UseFormReturn} from 'react-hook-form';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\nimport {formContext} from './internals.js';\n\nexport const useFormTheme = createComponentTheme('Form');\n\nexport type FormProps<D> = PropsWithChildren<\n  ComponentProps<typeof useFormTheme> & {\n    className?: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    form: UseFormReturn<any>;\n    onSubmit: (data: D) => void;\n  }\n>;\n\nexport function Form<D>({className, form, onSubmit, children}: FormProps<D>) {\n  let theme = useFormTheme();\n\n  let handleSubmit = form.handleSubmit(onSubmit);\n\n  return (\n    <formContext.Provider value={form}>\n      <form className={theme(null, className)} onSubmit={handleSubmit}>\n        {children}\n      </form>\n    </formContext.Provider>\n  );\n}\n"],
+  "mappings": ";AAwBM;AArBN,SAA6B,4BAA2B;AACxD,SAAQ,mBAAkB;AAEnB,aAAM,eAAe,qBAAqB,MAAM;AAWhD,gBAAS,KAAQ,EAAC,WAAW,MAAM,UAAU,SAAQ,GAAiB;AAC3E,MAAI,QAAQ,aAAa;AAEzB,MAAI,eAAe,KAAK,aAAa,QAAQ;AAE7C,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,MAC3B,8BAAC,UAAK,WAAW,MAAM,MAAM,SAAS,GAAG,UAAU,cAChD,UACH,GACF;AAEJ;",
+  "names": []
+}

package/build/components/Input.d.ts

@@ -0,0 +1,42 @@
+import { type ComponentType } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useInputTheme: ((themeProps: {
+    readonly disabled: boolean;
+}) => {
+    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    input: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    clearButton: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+}) & {
+    componentThemeName: "Input";
+    themeDefinition: {
+        readonly variants: {
+            readonly disabled: [true, false];
+        };
+        readonly elements: ["root", "input", "icon", "clearButton"];
+    };
+};
+export type InputProps = ComponentProps<typeof useInputTheme> & {
+    type?: 'number' | 'text' | undefined;
+    name?: string | undefined;
+    value?: number | string | undefined;
+    className?: string | undefined;
+    icon?: ComponentType<any> | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onBlur?: ((value: string) => void) | undefined;
+    placeholder?: string | undefined;
+    showClearButton?: boolean | undefined;
+};
+export declare const Input: import("react").ForwardRefExoticComponent<Partial<import("@jakubmazanec/ts-utils").Writable<{
+    readonly disabled: boolean;
+}>> & {
+    type?: 'number' | 'text' | undefined;
+    name?: string | undefined;
+    value?: number | string | undefined;
+    className?: string | undefined;
+    icon?: ComponentType<any> | undefined;
+    onChange?: ((value: string) => void) | undefined;
+    onBlur?: ((value: string) => void) | undefined;
+    placeholder?: string | undefined;
+    showClearButton?: boolean | undefined;
+} & 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">>;

package/build/components/Input.js

@@ -0,0 +1,129 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input as HeadlessInput } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/16/solid";
+import {
+  forwardRef,
+  useCallback
+} from "react";
+import { createComponentTheme } from "../theme/internals.js";
+import { useFieldName, useForm } from "./internals.js";
+export const useInputTheme = createComponentTheme("Input", {
+  variants: {
+    disabled: [true, false]
+  },
+  elements: ["root", "input", "icon", "clearButton"]
+});
+export const Input = forwardRef(
+  ({
+    type = "text",
+    name,
+    value,
+    className,
+    disabled = false,
+    icon: Icon,
+    onChange,
+    onBlur,
+    placeholder,
+    showClearButton = false
+  }, ref) => {
+    let theme = useInputTheme({ disabled });
+    let form = useForm();
+    let fieldName = useFieldName();
+    let handleChange = useCallback(
+      (event) => {
+        onChange?.(event.target.value);
+      },
+      [onChange]
+    );
+    let handleBlur = useCallback(
+      (event) => {
+        onBlur?.(event.target.value);
+      },
+      [onBlur]
+    );
+    let handleClear = useCallback(() => {
+      if (fieldName && form && !name) {
+        form.setValue(fieldName, "");
+      } else {
+        onChange?.("");
+      }
+    }, [fieldName, form, name, onChange]);
+    let rootProps = {
+      className: theme.root("relative", className),
+      type,
+      disabled
+    };
+    let inputProps = {
+      className: theme.input(null, className),
+      type,
+      disabled,
+      placeholder,
+      ref
+    };
+    let iconProps = {
+      className: theme.icon("absolute")
+    };
+    let clearButtonProps = {
+      className: theme.clearButton("absolute")
+    };
+    if (Icon) {
+      rootProps["data-headlessui-icon"] = "";
+      inputProps["data-headlessui-icon"] = "";
+      iconProps["data-headlessui-icon"] = "";
+      clearButtonProps["data-headlessui-icon"] = "";
+    }
+    if (showClearButton) {
+      rootProps["data-headlessui-clear-button"] = "";
+      inputProps["data-headlessui-clear-button"] = "";
+      iconProps["data-headlessui-clear-button"] = "";
+      clearButtonProps["data-headlessui-clear-button"] = "";
+    }
+    if (fieldName && form && !name) {
+      if (ref) {
+        let register = form.register(fieldName, {
+          valueAsNumber: type === "number"
+        });
+        inputProps = {
+          ...inputProps,
+          ...register
+        };
+        inputProps.ref = (instance) => {
+          if (typeof ref === "function") {
+            throw new TypeError("Ref can't be a function!");
+          }
+          ref.current = instance;
+          register.ref(instance);
+        };
+      } else {
+        inputProps = {
+          ...inputProps,
+          ...form.register(fieldName, {
+            valueAsNumber: type === "number"
+          })
+        };
+      }
+      return /* @__PURE__ */ jsxs("span", { ...rootProps, children: [
+        /* @__PURE__ */ jsx(HeadlessInput, { ...inputProps }),
+        Icon ? /* @__PURE__ */ jsx(Icon, { ...iconProps }) : null,
+        showClearButton ? /* @__PURE__ */ jsx(XMarkIcon, { ...clearButtonProps, onClick: handleClear }) : null
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("span", { ...rootProps, children: [
+      /* @__PURE__ */ jsx(
+        HeadlessInput,
+        {
+          name: name ?? "",
+          value: String(value ?? ""),
+          placeholder,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          ...inputProps
+        }
+      ),
+      Icon ? /* @__PURE__ */ jsx(Icon, { ...iconProps }) : null,
+      showClearButton ? /* @__PURE__ */ jsx(XMarkIcon, { ...clearButtonProps, onClick: handleClear }) : null
+    ] });
+  }
+);
+//# sourceMappingURL=Input.js.map

package/build/components/Input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Input.tsx"],
+  "sourcesContent": ["import {Input as HeadlessInput} from '@headlessui/react';\nimport {XMarkIcon} from '@heroicons/react/16/solid';\nimport {\n  type ChangeEvent,\n  type ComponentType,\n  type ElementType,\n  type FocusEvent,\n  forwardRef,\n  type Ref,\n  useCallback,\n} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\nimport {useFieldName, useForm} from './internals.js';\n\nexport const useInputTheme = createComponentTheme('Input', {\n  variants: {\n    disabled: [true, false],\n  },\n  elements: ['root', 'input', 'icon', 'clearButton'],\n});\n\nexport type InputProps = ComponentProps<typeof useInputTheme> & {\n  type?: 'number' | 'text' | undefined;\n  name?: string | undefined;\n  value?: number | string | undefined;\n  className?: string | undefined;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  icon?: ComponentType<any> | undefined;\n  onChange?: ((value: string) => void) | undefined;\n  onBlur?: ((value: string) => void) | undefined;\n  placeholder?: string | undefined;\n  showClearButton?: boolean | undefined;\n};\n\nexport const Input = forwardRef(\n  <T extends ElementType = 'input'>(\n    {\n      type = 'text',\n      name,\n      value,\n      className,\n      disabled = false,\n      icon: Icon,\n      onChange,\n      onBlur,\n      placeholder,\n      showClearButton = false,\n    }: InputProps,\n    ref: Ref<T>,\n  ) => {\n    let theme = useInputTheme({disabled});\n    let form = useForm();\n    let fieldName = useFieldName();\n\n    let handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.value);\n      },\n      [onChange],\n    );\n\n    let handleBlur = useCallback(\n      (event: FocusEvent<HTMLInputElement>) => {\n        onBlur?.(event.target.value);\n      },\n      [onBlur],\n    );\n\n    let handleClear = useCallback(() => {\n      if (fieldName && form && !name) {\n        form.setValue(fieldName, '');\n      } else {\n        onChange?.('');\n      }\n    }, [fieldName, form, name, onChange]);\n\n    let rootProps: Record<string, unknown> = {\n      className: theme.root('relative', className),\n      type,\n      disabled,\n    };\n\n    let inputProps: Record<string, unknown> = {\n      className: theme.input(null, className),\n      type,\n      disabled,\n      placeholder,\n      ref,\n    };\n\n    let iconProps: Record<string, unknown> = {\n      className: theme.icon('absolute'),\n    };\n\n    let clearButtonProps: Record<string, unknown> = {\n      className: theme.clearButton('absolute'),\n    };\n\n    if (Icon) {\n      rootProps['data-headlessui-icon'] = '';\n      inputProps['data-headlessui-icon'] = '';\n      iconProps['data-headlessui-icon'] = '';\n      clearButtonProps['data-headlessui-icon'] = '';\n    }\n\n    if (showClearButton) {\n      rootProps['data-headlessui-clear-button'] = '';\n      inputProps['data-headlessui-clear-button'] = '';\n      iconProps['data-headlessui-clear-button'] = '';\n      clearButtonProps['data-headlessui-clear-button'] = '';\n    }\n\n    if (fieldName && form && !name) {\n      if (ref) {\n        let register = form.register(fieldName, {\n          valueAsNumber: type === 'number',\n        });\n\n        inputProps = {\n          ...inputProps,\n          ...register,\n        };\n        inputProps.ref = (instance: unknown) => {\n          if (typeof ref === 'function') {\n            throw new TypeError(\"Ref can't be a function!\");\n          }\n\n          // @ts-expect-error -- we need to assign, and it actually works\n          // eslint-disable-next-line no-param-reassign -- needed\n          ref.current = instance;\n\n          register.ref(instance);\n        };\n      } else {\n        inputProps = {\n          ...inputProps,\n          ...form.register(fieldName, {\n            valueAsNumber: type === 'number',\n          }),\n        };\n      }\n\n      return (\n        <span {...rootProps}>\n          <HeadlessInput {...inputProps} />\n          {Icon ?\n            <Icon {...iconProps} />\n          : null}\n          {showClearButton ?\n            <XMarkIcon {...clearButtonProps} onClick={handleClear} />\n          : null}\n        </span>\n      );\n    }\n\n    return (\n      <span {...rootProps}>\n        <HeadlessInput\n          name={name ?? ''}\n          value={String(value ?? '')}\n          placeholder={placeholder}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          {...inputProps}\n        />\n        {Icon ?\n          <Icon {...iconProps} />\n        : null}\n        {showClearButton ?\n          <XMarkIcon {...clearButtonProps} onClick={handleClear} />\n        : null}\n      </span>\n    );\n  },\n);\n"],
+  "mappings": "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",
+  "names": []
+}

package/build/components/Label.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useLabelTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Label";
+    themeDefinition: undefined;
+};
+export type LabelProps = PropsWithChildren<ComponentProps<typeof useLabelTheme> & {
+    className?: string;
+}>;
+export declare function Label({ className, children }: LabelProps): import("react/jsx-runtime").JSX.Element;

package/build/components/Label.js

@@ -0,0 +1,10 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { Label as HeadlessLabel } from "@headlessui/react";
+import { createComponentTheme } from "../theme/internals.js";
+export const useLabelTheme = createComponentTheme("Label");
+export function Label({ className, children }) {
+  let theme = useLabelTheme();
+  return /* @__PURE__ */ jsx(HeadlessLabel, { className: theme(null, className), children });
+}
+//# sourceMappingURL=Label.js.map

package/build/components/Label.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Label.tsx"],
+  "sourcesContent": ["import {Label as HeadlessLabel} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\n\nexport const useLabelTheme = createComponentTheme('Label');\n\nexport type LabelProps = PropsWithChildren<\n  ComponentProps<typeof useLabelTheme> & {\n    className?: string;\n  }\n>;\n\nexport function Label({className, children}: LabelProps) {\n  let theme = useLabelTheme();\n\n  return <HeadlessLabel className={theme(null, className)}>{children}</HeadlessLabel>;\n}\n"],
+  "mappings": ";AAgBS;AAhBT,SAAQ,SAAS,qBAAoB;AAGrC,SAA6B,4BAA2B;AAEjD,aAAM,gBAAgB,qBAAqB,OAAO;AAQlD,gBAAS,MAAM,EAAC,WAAW,SAAQ,GAAe;AACvD,MAAI,QAAQ,cAAc;AAE1B,SAAO,oBAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AACrE;",
+  "names": []
+}

package/build/components/Listbox.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useListboxTheme: ((themeProps: {
+    readonly disabled: 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;
+    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;
+}) & {
+    componentThemeName: "Listbox";
+    themeDefinition: {
+        readonly variants: {
+            readonly disabled: [true, false];
+        };
+        readonly elements: ["root", "label", "icon", "panel", "items", "item"];
+    };
+};
+type ListboxItem<T> = {
+    value: T;
+    label: string;
+};
+export type ListboxProps<T> = ComponentProps<typeof useListboxTheme> & {
+    placeholder?: string;
+    value?: T | undefined;
+    items: Array<ListboxItem<T>>;
+    onChange?: (selectedValue: T) => void;
+    className?: string;
+};
+export declare function Listbox<T>({ items, placeholder, onChange, value, disabled, className, }: ListboxProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/Listbox.js

@@ -0,0 +1,75 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Listbox as HeadlessListbox } from "@headlessui/react";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { useCallback } from "react";
+import { Controller } from "react-hook-form";
+import { createComponentTheme } from "../theme/internals.js";
+import { useFieldName, useForm } from "./internals.js";
+export const useListboxTheme = createComponentTheme("Listbox", {
+  variants: { disabled: [true, false] },
+  elements: ["root", "label", "icon", "panel", "items", "item"]
+});
+export function Listbox({
+  items,
+  placeholder,
+  onChange,
+  value,
+  disabled = false,
+  className
+}) {
+  let theme = useListboxTheme({ disabled });
+  let form = useForm();
+  let fieldName = useFieldName();
+  const handleChange = useCallback(
+    (selectedValue) => {
+      onChange?.(selectedValue);
+    },
+    [onChange]
+  );
+  if (fieldName && form) {
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name: fieldName,
+        control: form.control,
+        render: ({ field }) => {
+          let selectedItem2 = items.find((item) => item.value === field.value);
+          let handleChange2 = field.onChange;
+          return /* @__PURE__ */ jsx(HeadlessListbox, { disabled, value: field.value, onChange: handleChange2, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(HeadlessListbox.Button, { className: theme.root(null, className), children: [
+              /* @__PURE__ */ jsx("span", { className: theme.label("overflow-hidden text-ellipsis whitespace-nowrap"), children: selectedItem2?.label ?? placeholder ?? null }),
+              /* @__PURE__ */ jsx(ChevronDownIcon, { className: theme.icon() })
+            ] }),
+            /* @__PURE__ */ jsx(HeadlessListbox.Options, { className: theme.panel(), children: /* @__PURE__ */ jsx("div", { className: theme.items(), children: items.map((item) => /* @__PURE__ */ jsx(
+              HeadlessListbox.Option,
+              {
+                value: item.value,
+                className: theme.item("cursor-pointer"),
+                children: item.label
+              },
+              item.label
+            )) }) })
+          ] }) });
+        }
+      }
+    );
+  }
+  let selectedItem = items.find((item) => item.value === value);
+  return /* @__PURE__ */ jsx(HeadlessListbox, { disabled, value, onChange: handleChange, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(HeadlessListbox.Button, { className: theme.root(null, className), children: [
+      /* @__PURE__ */ jsx("span", { className: theme.label("overflow-hidden text-ellipsis whitespace-nowrap"), children: selectedItem?.label ?? placeholder ?? null }),
+      /* @__PURE__ */ jsx(ChevronDownIcon, { className: theme.icon() })
+    ] }),
+    /* @__PURE__ */ jsx(HeadlessListbox.Options, { className: theme.panel(), children: /* @__PURE__ */ jsx("div", { className: theme.items(), children: items.map((item) => /* @__PURE__ */ jsx(
+      HeadlessListbox.Option,
+      {
+        value: item.value,
+        className: theme.item("cursor-pointer"),
+        children: item.label
+      },
+      item.label
+    )) }) })
+  ] }) });
+}
+//# sourceMappingURL=Listbox.js.map

package/build/components/Listbox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Listbox.tsx"],
+  "sourcesContent": ["/* eslint-disable react/jsx-no-bind -- needed */\nimport {Listbox as HeadlessListbox} from '@headlessui/react';\nimport {ChevronDownIcon} from '@heroicons/react/24/outline';\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 useListboxTheme = createComponentTheme('Listbox', {\n  variants: {disabled: [true, false]},\n  elements: ['root', 'label', 'icon', 'panel', 'items', 'item'],\n});\n\ntype ListboxItem<T> = {\n  value: T;\n  label: string;\n};\n\nexport type ListboxProps<T> = ComponentProps<typeof useListboxTheme> & {\n  placeholder?: string;\n  value?: T | undefined;\n  items: Array<ListboxItem<T>>;\n  onChange?: (selectedValue: T) => void;\n  className?: string;\n};\n\nexport function Listbox<T>({\n  items,\n  placeholder,\n  onChange,\n  value,\n  disabled = false,\n  className,\n}: ListboxProps<T>) {\n  let theme = useListboxTheme({disabled});\n  let form = useForm();\n  let fieldName = useFieldName();\n\n  const handleChange = useCallback(\n    (selectedValue: T) => {\n      onChange?.(selectedValue);\n    },\n    [onChange],\n  );\n\n  if (fieldName && form) {\n    return (\n      <Controller\n        name={fieldName}\n        control={form.control}\n        render={({field}) => {\n          let selectedItem = items.find((item) => item.value === field.value);\n          let handleChange = field.onChange;\n\n          return (\n            <HeadlessListbox disabled={disabled} value={field.value as T} onChange={handleChange}>\n              <div className=\"relative\">\n                <HeadlessListbox.Button className={theme.root(null, className)}>\n                  <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n                    {selectedItem?.label ?? placeholder ?? null}\n                  </span>\n                  <ChevronDownIcon className={theme.icon()} />\n                </HeadlessListbox.Button>\n                <HeadlessListbox.Options className={theme.panel()}>\n                  <div className={theme.items()}>\n                    {items.map((item) => (\n                      <HeadlessListbox.Option\n                        key={item.label}\n                        value={item.value}\n                        className={theme.item('cursor-pointer')}\n                      >\n                        {item.label}\n                      </HeadlessListbox.Option>\n                    ))}\n                  </div>\n                </HeadlessListbox.Options>\n              </div>\n            </HeadlessListbox>\n          );\n        }}\n      />\n    );\n  }\n\n  let selectedItem = items.find((item) => item.value === value);\n\n  return (\n    <HeadlessListbox disabled={disabled} value={value} onChange={handleChange}>\n      <div className=\"relative\">\n        <HeadlessListbox.Button className={theme.root(null, className)}>\n          <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n            {selectedItem?.label ?? placeholder ?? null}\n          </span>\n          <ChevronDownIcon className={theme.icon()} />\n        </HeadlessListbox.Button>\n        <HeadlessListbox.Options className={theme.panel()}>\n          <div className={theme.items()}>\n            {items.map((item) => (\n              <HeadlessListbox.Option\n                key={item.label}\n                value={item.value}\n                className={theme.item('cursor-pointer')}\n              >\n                {item.label}\n              </HeadlessListbox.Option>\n            ))}\n          </div>\n        </HeadlessListbox.Options>\n      </div>\n    </HeadlessListbox>\n  );\n}\n"],
+  "mappings": ";AA0DgB,SACE,KADF;AAzDhB,SAAQ,WAAW,uBAAsB;AACzC,SAAQ,uBAAsB;AAC9B,SAAQ,mBAAkB;AAC1B,SAAQ,kBAAiB;AAEzB,SAA6B,4BAA2B;AACxD,SAAQ,cAAc,eAAc;AAE7B,aAAM,kBAAkB,qBAAqB,WAAW;AAAA,EAC7D,UAAU,EAAC,UAAU,CAAC,MAAM,KAAK,EAAC;AAAA,EAClC,UAAU,CAAC,QAAQ,SAAS,QAAQ,SAAS,SAAS,MAAM;AAC9D,CAAC;AAeM,gBAAS,QAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAAoB;AAClB,MAAI,QAAQ,gBAAgB,EAAC,SAAQ,CAAC;AACtC,MAAI,OAAO,QAAQ;AACnB,MAAI,YAAY,aAAa;AAE7B,QAAM,eAAe;AAAA,IACnB,CAAC,kBAAqB;AACpB,iBAAW,aAAa;AAAA,IAC1B;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,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,KAAK,CAAC,SAAS,KAAK,UAAU,MAAM,KAAK;AAClE,cAAIC,gBAAe,MAAM;AAEzB,iBACE,oBAAC,mBAAgB,UAAoB,OAAO,MAAM,OAAY,UAAUA,eACtE,+BAAC,SAAI,WAAU,YACb;AAAA,iCAAC,gBAAgB,QAAhB,EAAuB,WAAW,MAAM,KAAK,MAAM,SAAS,GAC3D;AAAA,kCAAC,UAAK,WAAW,MAAM,MAAM,iDAAiD,GAC3E,UAAAD,eAAc,SAAS,eAAe,MACzC;AAAA,cACA,oBAAC,mBAAgB,WAAW,MAAM,KAAK,GAAG;AAAA,eAC5C;AAAA,YACA,oBAAC,gBAAgB,SAAhB,EAAwB,WAAW,MAAM,MAAM,GAC9C,8BAAC,SAAI,WAAW,MAAM,MAAM,GACzB,gBAAM,IAAI,CAAC,SACV;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBAEC,OAAO,KAAK;AAAA,gBACZ,WAAW,MAAM,KAAK,gBAAgB;AAAA,gBAErC,eAAK;AAAA;AAAA,cAJD,KAAK;AAAA,YAKZ,CACD,GACH,GACF;AAAA,aACF,GACF;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,MAAI,eAAe,MAAM,KAAK,CAAC,SAAS,KAAK,UAAU,KAAK;AAE5D,SACE,oBAAC,mBAAgB,UAAoB,OAAc,UAAU,cAC3D,+BAAC,SAAI,WAAU,YACb;AAAA,yBAAC,gBAAgB,QAAhB,EAAuB,WAAW,MAAM,KAAK,MAAM,SAAS,GAC3D;AAAA,0BAAC,UAAK,WAAW,MAAM,MAAM,iDAAiD,GAC3E,wBAAc,SAAS,eAAe,MACzC;AAAA,MACA,oBAAC,mBAAgB,WAAW,MAAM,KAAK,GAAG;AAAA,OAC5C;AAAA,IACA,oBAAC,gBAAgB,SAAhB,EAAwB,WAAW,MAAM,MAAM,GAC9C,8BAAC,SAAI,WAAW,MAAM,MAAM,GACzB,gBAAM,IAAI,CAAC,SACV;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QAEC,OAAO,KAAK;AAAA,QACZ,WAAW,MAAM,KAAK,gBAAgB;AAAA,QAErC,eAAK;AAAA;AAAA,MAJD,KAAK;AAAA,IAKZ,CACD,GACH,GACF;AAAA,KACF,GACF;AAEJ;",
+  "names": ["selectedItem", "handleChange"]
+}

package/build/components/Menu.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useMenuTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Menu";
+    themeDefinition: undefined;
+};
+export type MenuProps = PropsWithChildren<ComponentProps<typeof useMenuTheme> & {
+    className?: string;
+}>;
+export declare function Menu({ className, children }: MenuProps): import("react/jsx-runtime").JSX.Element;

package/build/components/Menu.js

@@ -0,0 +1,10 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { Menu as HeadlessMenu } from "@headlessui/react";
+import { createComponentTheme } from "../theme/internals.js";
+export const useMenuTheme = createComponentTheme("Menu");
+export function Menu({ className, children }) {
+  let theme = useMenuTheme();
+  return /* @__PURE__ */ jsx(HeadlessMenu, { className: theme(null, className), children });
+}
+//# sourceMappingURL=Menu.js.map

package/build/components/Menu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Menu.tsx"],
+  "sourcesContent": ["import {Menu as HeadlessMenu} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\n\nexport const useMenuTheme = createComponentTheme('Menu');\n\nexport type MenuProps = PropsWithChildren<\n  ComponentProps<typeof useMenuTheme> & {\n    className?: string;\n  }\n>;\n\nexport function Menu({className, children}: MenuProps) {\n  let theme = useMenuTheme();\n\n  // @ts-expect-error - `className` should exist on the `MenuItem` from Headless UI, and it actually works; search for more info\n  return <HeadlessMenu className={theme(null, className)}>{children}</HeadlessMenu>;\n}\n"],
+  "mappings": ";AAiBS;AAjBT,SAAQ,QAAQ,oBAAmB;AAGnC,SAA6B,4BAA2B;AAEjD,aAAM,eAAe,qBAAqB,MAAM;AAQhD,gBAAS,KAAK,EAAC,WAAW,SAAQ,GAAc;AACrD,MAAI,QAAQ,aAAa;AAGzB,SAAO,oBAAC,gBAAa,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AACpE;",
+  "names": []
+}

package/build/components/MenuButton.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useMenuButtonTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "MenuButton";
+    themeDefinition: undefined;
+};
+export type MenuButtonProps = PropsWithChildren<ComponentProps<typeof useMenuButtonTheme> & {
+    className?: string;
+}>;
+export declare function MenuButton({ className, children }: MenuButtonProps): import("react/jsx-runtime").JSX.Element;

package/build/components/MenuButton.js

@@ -0,0 +1,10 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { MenuButton as HeadlessMenuButton } from "@headlessui/react";
+import { createComponentTheme } from "../theme/internals.js";
+export const useMenuButtonTheme = createComponentTheme("MenuButton");
+export function MenuButton({ className, children }) {
+  let theme = useMenuButtonTheme();
+  return /* @__PURE__ */ jsx(HeadlessMenuButton, { className: theme(null, className), children });
+}
+//# sourceMappingURL=MenuButton.js.map

package/build/components/MenuButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/MenuButton.tsx"],
+  "sourcesContent": ["import {MenuButton as HeadlessMenuButton} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\n\nexport const useMenuButtonTheme = createComponentTheme('MenuButton');\n\nexport type MenuButtonProps = PropsWithChildren<\n  ComponentProps<typeof useMenuButtonTheme> & {\n    className?: string;\n  }\n>;\n\nexport function MenuButton({className, children}: MenuButtonProps) {\n  let theme = useMenuButtonTheme();\n\n  return <HeadlessMenuButton className={theme(null, className)}>{children}</HeadlessMenuButton>;\n}\n"],
+  "mappings": ";AAgBS;AAhBT,SAAQ,cAAc,0BAAyB;AAG/C,SAA6B,4BAA2B;AAEjD,aAAM,qBAAqB,qBAAqB,YAAY;AAQ5D,gBAAS,WAAW,EAAC,WAAW,SAAQ,GAAoB;AACjE,MAAI,QAAQ,mBAAmB;AAE/B,SAAO,oBAAC,sBAAmB,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AAC1E;",
+  "names": []
+}

package/build/components/MenuItem.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useMenuItemTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "MenuItem";
+    themeDefinition: undefined;
+};
+export type MenuItemProps = PropsWithChildren<ComponentProps<typeof useMenuItemTheme> & {
+    className?: string;
+}>;
+export declare function MenuItem({ className, children }: MenuItemProps): import("react/jsx-runtime").JSX.Element;

package/build/components/MenuItem.js

@@ -0,0 +1,10 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { MenuItem as HeadlessMenuItem } from "@headlessui/react";
+import { createComponentTheme } from "../theme/internals.js";
+export const useMenuItemTheme = createComponentTheme("MenuItem");
+export function MenuItem({ className, children }) {
+  let theme = useMenuItemTheme();
+  return /* @__PURE__ */ jsx(HeadlessMenuItem, { className: theme(null, className), children });
+}
+//# sourceMappingURL=MenuItem.js.map