@jakubmazanec/ui 0.1.0-unstable.0c19abe

package/README.md

@@ -0,0 +1,40 @@
+<!-- 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 section is under development. Please check back later for updates.
+
+## Documentation
+
+See [API reference](./docs) for auto-generated documentation.
+
+## 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,24 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useButtonTheme: ((themeProps: {
+    readonly type: "text" | "icon" | "solid" | "outline";
+    readonly size: "small" | "medium" | "large";
+    readonly disabled: boolean;
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Button";
+    themeDefinition: {
+        readonly variants: {
+            readonly type: ["solid", "outline", "text", "icon"];
+            readonly size: ["small", "medium", "large"];
+            readonly disabled: [true, false];
+        };
+    };
+};
+export type ButtonProps<T extends ElementType> = ComponentProps<typeof useButtonTheme> & ComponentPropsWithoutRef<T> & {
+    className?: string | undefined;
+    submit?: boolean | undefined;
+    as?: T | undefined;
+    onClick?: (() => void) | undefined;
+    'aria-label'?: string | undefined;
+};
+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">>;

package/build/components/Button.js

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

package/build/components/Button.js.map

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

package/build/components/Card.d.ts

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

package/build/components/Card.js

@@ -0,0 +1,7 @@
+"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 });
+}
+//# sourceMappingURL=Card.js.map

package/build/components/Card.js.map

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

package/build/components/Checkbox.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps } 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;
+}) & {
+    componentThemeName: "Checkbox";
+    themeDefinition: {
+        readonly variants: {
+            readonly disabled: [true, false];
+        };
+        readonly elements: ["root", "checked", "unchecked", "icon"];
+    };
+};
+export type CheckboxProps = ComponentProps<typeof useCheckboxTheme> & {
+    name?: string;
+    className?: string;
+    value?: boolean;
+    onChange?: ((value: boolean) => void) | undefined;
+};
+export declare function Checkbox({ name, className, disabled, onChange, value }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/build/components/Checkbox.js

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

package/build/components/Checkbox.js.map

@@ -0,0 +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"]
+}

package/build/components/CheckboxField.d.ts

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

package/build/components/CheckboxField.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 useCheckboxFieldTheme = createComponentTheme("CheckboxField");
+export function CheckboxField({ name, className, children }) {
+  let theme = useCheckboxFieldTheme();
+  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=CheckboxField.js.map

package/build/components/CheckboxField.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/CheckboxField.tsx"],
+  "sourcesContent": ["import {Field as HeadlessField} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\nimport {fieldNameContext} from './internals.js';\n\nexport const useCheckboxFieldTheme = createComponentTheme('CheckboxField');\n\nexport type CheckboxFieldProps = PropsWithChildren<\n  ComponentProps<typeof useCheckboxFieldTheme> & {\n    className?: string | undefined;\n    name?: string | undefined;\n  }\n>;\n\nexport function CheckboxField({name, className, children}: CheckboxFieldProps) {\n  let theme = useCheckboxFieldTheme();\n\n  if (name) {\n    return (\n      <fieldNameContext.Provider value={name}>\n        <HeadlessField className={theme(null, className)}>{children}</HeadlessField>\n      </fieldNameContext.Provider>\n    );\n  }\n\n  return <HeadlessField className={theme(null, className)}>{children}</HeadlessField>;\n}\n"],
+  "mappings": ";AAqBQ;AArBR,SAAQ,SAAS,qBAAoB;AAGrC,SAA6B,4BAA2B;AACxD,SAAQ,wBAAuB;AAExB,aAAM,wBAAwB,qBAAqB,eAAe;AASlE,gBAAS,cAAc,EAAC,MAAM,WAAW,SAAQ,GAAuB;AAC7E,MAAI,QAAQ,sBAAsB;AAElC,MAAI,MAAM;AACR,WACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,MAChC,8BAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS,GAC9D;AAAA,EAEJ;AAEA,SAAO,oBAAC,iBAAc,WAAW,MAAM,MAAM,SAAS,GAAI,UAAS;AACrE;",
+  "names": []
+}

package/build/components/Combobox.d.ts

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

package/build/components/Combobox.js

@@ -0,0 +1,121 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox as HeadlessCombobox } from "@headlessui/react";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { useCallback, useState } from "react";
+import { Controller } from "react-hook-form";
+import { createComponentTheme } from "../theme/internals.js";
+import { useFieldName, useForm } from "./internals.js";
+export const useComboboxTheme = createComponentTheme("Combobox", {
+  variants: { disabled: [true, false] },
+  elements: ["root", "label", "icon", "panel", "items", "item", "input"]
+});
+export function Combobox({
+  items,
+  placeholder,
+  onChange,
+  value,
+  disabled = false,
+  className
+}) {
+  let theme = useComboboxTheme({ disabled });
+  let form = useForm();
+  let fieldName = useFieldName();
+  const [query, setQuery] = useState("");
+  const handleChange = useCallback(
+    (selectedValue) => {
+      onChange?.(selectedValue.value);
+    },
+    [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 filteredItems2 = query ? items.filter(
+            (item) => item.label.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""))
+          ) : items;
+          return /* @__PURE__ */ jsx(
+            HeadlessCombobox,
+            {
+              disabled,
+              value: selectedItem2 ?? {},
+              by: "value",
+              onChange: (item) => {
+                if (item) {
+                  field.onChange(item.value);
+                }
+              },
+              children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                /* @__PURE__ */ jsxs(HeadlessCombobox.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__ */ jsxs(HeadlessCombobox.Options, { className: theme.panel(), modal: false, children: [
+                  /* @__PURE__ */ jsx(
+                    HeadlessCombobox.Input,
+                    {
+                      className: theme.input(null, className),
+                      onChange: (event) => setQuery(event.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: theme.items(), children: filteredItems2.length ? filteredItems2.map((item) => /* @__PURE__ */ jsx(
+                    HeadlessCombobox.Option,
+                    {
+                      value: item,
+                      className: theme.item("cursor-pointer"),
+                      children: item.label
+                    },
+                    String(item.value)
+                  )) : /* @__PURE__ */ jsx("span", { className: theme.item("cursor-pointer"), children: "\u2015" }) })
+                ] })
+              ] })
+            }
+          );
+        }
+      }
+    );
+  }
+  let selectedItem = items.find((item) => item.value === value);
+  let filteredItems = query ? items.filter(
+    (item) => item.label.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""))
+  ) : items;
+  return /* @__PURE__ */ jsx(
+    HeadlessCombobox,
+    {
+      disabled,
+      value: selectedItem ?? {},
+      by: "value",
+      onChange: handleChange,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(HeadlessCombobox.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__ */ jsxs(HeadlessCombobox.Options, { className: theme.panel(), modal: false, children: [
+          /* @__PURE__ */ jsx(
+            HeadlessCombobox.Input,
+            {
+              className: theme.input(null, className),
+              onChange: (event) => setQuery(event.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: theme.items(), children: filteredItems.length ? filteredItems.map((item) => /* @__PURE__ */ jsx(
+            HeadlessCombobox.Option,
+            {
+              value: item,
+              className: theme.item("cursor-pointer"),
+              children: item.label
+            },
+            String(item.value)
+          )) : /* @__PURE__ */ jsx("span", { className: theme.item("cursor-pointer"), children: "\u2015" }) })
+        ] })
+      ] })
+    }
+  );
+}
+//# sourceMappingURL=Combobox.js.map

package/build/components/Combobox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Combobox.tsx"],
+  "sourcesContent": ["/* eslint-disable react/jsx-no-bind -- needed */\nimport {Combobox as HeadlessCombobox} from '@headlessui/react';\nimport {ChevronDownIcon} from '@heroicons/react/24/outline';\nimport {useCallback, useState} 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 useComboboxTheme = createComponentTheme('Combobox', {\n  variants: {disabled: [true, false]},\n  elements: ['root', 'label', 'icon', 'panel', 'items', 'item', 'input'],\n});\n\ntype ComboboxItem<T> = {\n  value: T;\n  label: string;\n};\n\nexport type ComboboxProps<T> = ComponentProps<typeof useComboboxTheme> & {\n  placeholder?: string;\n  value?: T | undefined;\n  items: Array<ComboboxItem<T>>;\n  onChange?: (selectedValue: T) => void;\n  className?: string;\n};\n\nexport function Combobox<T>({\n  items,\n  placeholder,\n  onChange,\n  value,\n  disabled = false,\n  className,\n}: ComboboxProps<T>) {\n  let theme = useComboboxTheme({disabled});\n  let form = useForm();\n  let fieldName = useFieldName();\n  const [query, setQuery] = useState('');\n\n  const handleChange = useCallback(\n    (selectedValue: ComboboxItem<T>) => {\n      onChange?.(selectedValue.value);\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 filteredItems =\n            query ?\n              items.filter((item) =>\n                item.label\n                  .toLowerCase()\n                  .replace(/\\s+/g, '')\n                  .includes(query.toLowerCase().replace(/\\s+/g, '')),\n              )\n            : items;\n\n          // TODO: `HeadlessCombobox.Button` sets its `tabindex` to `-1`, and is not thus focusable; fidn the way to fix it, setting `tabindex` or `tabIndex` doesn't work.\n          return (\n            <HeadlessCombobox\n              disabled={disabled}\n              value={(selectedItem ?? {}) as ComboboxItem<T>}\n              by=\"value\"\n              onChange={(item) => {\n                if (item) {\n                  field.onChange(item.value);\n                }\n              }}\n            >\n              <div className=\"relative\">\n                <HeadlessCombobox.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                </HeadlessCombobox.Button>\n\n                <HeadlessCombobox.Options className={theme.panel()} modal={false}>\n                  <HeadlessCombobox.Input\n                    className={theme.input(null, className)}\n                    onChange={(event) => setQuery(event.target.value)}\n                  />\n                  <div className={theme.items()}>\n                    {filteredItems.length ?\n                      filteredItems.map((item) => (\n                        <HeadlessCombobox.Option\n                          key={String(item.value)}\n                          value={item}\n                          className={theme.item('cursor-pointer')}\n                        >\n                          {item.label}\n                        </HeadlessCombobox.Option>\n                      ))\n                    : <span className={theme.item('cursor-pointer')}>\u2015</span>}\n                  </div>\n                </HeadlessCombobox.Options>\n              </div>\n            </HeadlessCombobox>\n          );\n        }}\n      />\n    );\n  }\n\n  let selectedItem = items.find((item) => item.value === value);\n  let filteredItems =\n    query ?\n      items.filter((item) =>\n        item.label\n          .toLowerCase()\n          .replace(/\\s+/g, '')\n          .includes(query.toLowerCase().replace(/\\s+/g, '')),\n      )\n    : items;\n\n  return (\n    <HeadlessCombobox\n      disabled={disabled}\n      value={(selectedItem ?? {}) as ComboboxItem<T>}\n      by=\"value\"\n      onChange={handleChange}\n    >\n      <div className=\"relative\">\n        <HeadlessCombobox.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        </HeadlessCombobox.Button>\n\n        <HeadlessCombobox.Options className={theme.panel()} modal={false}>\n          <HeadlessCombobox.Input\n            className={theme.input(null, className)}\n            onChange={(event) => setQuery(event.target.value)}\n          />\n          <div className={theme.items()}>\n            {filteredItems.length ?\n              filteredItems.map((item) => (\n                <HeadlessCombobox.Option\n                  key={String(item.value)}\n                  value={item}\n                  className={theme.item('cursor-pointer')}\n                >\n                  {item.label}\n                </HeadlessCombobox.Option>\n              ))\n            : <span className={theme.item('cursor-pointer')}>\u2015</span>}\n          </div>\n        </HeadlessCombobox.Options>\n      </div>\n    </HeadlessCombobox>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["selectedItem", "filteredItems"]
+}

package/build/components/ConfirmDialog.d.ts

@@ -0,0 +1,23 @@
+import { type PropsWithChildren } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useConfirmDialogTheme: (() => {
+    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    backdrop: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+}) & {
+    componentThemeName: "ConfirmDialog";
+    themeDefinition: {
+        readonly elements: ["root", "backdrop"];
+    };
+};
+export type ConfirmDialogProps = PropsWithChildren<ComponentProps<typeof useConfirmDialogTheme> & {
+    open: boolean;
+    className?: string;
+    onClose: () => void;
+    onConfirm: () => void;
+    title?: string;
+    confirmMessage?: string;
+    enableBackdropClick?: boolean;
+    cancelText?: string;
+    confirmText?: string;
+}>;
+export declare function ConfirmDialog({ open, className, onClose, onConfirm, confirmMessage, title, enableBackdropClick, cancelText, confirmText, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/build/components/ConfirmDialog.js

@@ -0,0 +1,40 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog as HeadlessDialog } from "@headlessui/react";
+import { createComponentTheme } from "../theme/internals.js";
+import { Button } from "./Button.js";
+import { DialogPanel } from "./DialogPanel.js";
+import { DialogTitle } from "./DialogTitle.js";
+export const useConfirmDialogTheme = createComponentTheme("ConfirmDialog", {
+  elements: ["root", "backdrop"]
+});
+export function ConfirmDialog({
+  open,
+  className,
+  onClose,
+  onConfirm,
+  confirmMessage,
+  title,
+  enableBackdropClick,
+  cancelText = "Cancel",
+  confirmText = "Confirm"
+}) {
+  let theme = useConfirmDialogTheme();
+  const handleBackdropClick = () => {
+    if (enableBackdropClick) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxs(HeadlessDialog, { open, onClose: handleBackdropClick, children: [
+    /* @__PURE__ */ jsx("div", { className: theme.backdrop("fixed inset-0"), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("div", { className: theme.root("fixed inset-0", className), children: /* @__PURE__ */ jsxs(DialogPanel, { className: "max-w-[500px]", children: [
+      title ? /* @__PURE__ */ jsx(DialogTitle, { className: "font-normal", children: title }) : null,
+      confirmMessage ? /* @__PURE__ */ jsx("div", { children: confirmMessage }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-4", children: [
+        /* @__PURE__ */ jsx(Button, { type: "outline", onClick: onClose, children: cancelText }),
+        /* @__PURE__ */ jsx(Button, { onClick: onConfirm, children: confirmText })
+      ] })
+    ] }) })
+  ] });
+}
+//# sourceMappingURL=ConfirmDialog.js.map

package/build/components/ConfirmDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/ConfirmDialog.tsx"],
+  "sourcesContent": ["import {Dialog as HeadlessDialog} from '@headlessui/react';\nimport {type PropsWithChildren} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\nimport {Button} from './Button.js';\nimport {DialogPanel} from './DialogPanel.js';\nimport {DialogTitle} from './DialogTitle.js';\n\nexport const useConfirmDialogTheme = createComponentTheme('ConfirmDialog', {\n  elements: ['root', 'backdrop'],\n});\n\nexport type ConfirmDialogProps = PropsWithChildren<\n  ComponentProps<typeof useConfirmDialogTheme> & {\n    open: boolean;\n    className?: string;\n    onClose: () => void;\n    onConfirm: () => void;\n    title?: string;\n    confirmMessage?: string;\n    enableBackdropClick?: boolean;\n    cancelText?: string;\n    confirmText?: string;\n  }\n>;\n\nexport function ConfirmDialog({\n  open,\n  className,\n  onClose,\n  onConfirm,\n  confirmMessage,\n  title,\n  enableBackdropClick,\n  cancelText = 'Cancel',\n  confirmText = 'Confirm',\n}: ConfirmDialogProps) {\n  let theme = useConfirmDialogTheme();\n\n  const handleBackdropClick = () => {\n    if (enableBackdropClick) {\n      onClose();\n    }\n  };\n\n  return (\n    <HeadlessDialog open={open} onClose={handleBackdropClick}>\n      <div className={theme.backdrop('fixed inset-0')} aria-hidden=\"true\" />\n      <div className={theme.root('fixed inset-0', className)}>\n        <DialogPanel className=\"max-w-[500px]\">\n          {title ?\n            <DialogTitle className=\"font-normal\">{title}</DialogTitle>\n          : null}\n          {confirmMessage ?\n            <div>{confirmMessage}</div>\n          : null}\n          <div className=\"flex justify-end gap-4\">\n            <Button type=\"outline\" onClick={onClose}>\n              {cancelText}\n            </Button>\n            <Button onClick={onConfirm}>{confirmText}</Button>\n          </div>\n        </DialogPanel>\n      </div>\n    </HeadlessDialog>\n  );\n}\n"],
+  "mappings": ";AA+CM,cASI,YATJ;AA/CN,SAAQ,UAAU,sBAAqB;AAGvC,SAA6B,4BAA2B;AACxD,SAAQ,cAAa;AACrB,SAAQ,mBAAkB;AAC1B,SAAQ,mBAAkB;AAEnB,aAAM,wBAAwB,qBAAqB,iBAAiB;AAAA,EACzE,UAAU,CAAC,QAAQ,UAAU;AAC/B,CAAC;AAgBM,gBAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAChB,GAAuB;AACrB,MAAI,QAAQ,sBAAsB;AAElC,QAAM,sBAAsB,MAAM;AAChC,QAAI,qBAAqB;AACvB,cAAQ;AAAA,IACV;AAAA,EACF;AAEA,SACE,qBAAC,kBAAe,MAAY,SAAS,qBACnC;AAAA,wBAAC,SAAI,WAAW,MAAM,SAAS,eAAe,GAAG,eAAY,QAAO;AAAA,IACpE,oBAAC,SAAI,WAAW,MAAM,KAAK,iBAAiB,SAAS,GACnD,+BAAC,eAAY,WAAU,iBACpB;AAAA,cACC,oBAAC,eAAY,WAAU,eAAe,iBAAM,IAC5C;AAAA,MACD,iBACC,oBAAC,SAAK,0BAAe,IACrB;AAAA,MACF,qBAAC,SAAI,WAAU,0BACb;AAAA,4BAAC,UAAO,MAAK,WAAU,SAAS,SAC7B,sBACH;AAAA,QACA,oBAAC,UAAO,SAAS,WAAY,uBAAY;AAAA,SAC3C;AAAA,OACF,GACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/build/components/Dialog.d.ts

@@ -0,0 +1,18 @@
+import { type PropsWithChildren } from 'react';
+import { type ComponentProps } from '../theme/internals.js';
+export declare const useDialogTheme: (() => {
+    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    backdrop: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+}) & {
+    componentThemeName: "Dialog";
+    themeDefinition: {
+        readonly elements: ["root", "backdrop"];
+    };
+};
+export type DialogProps = PropsWithChildren<ComponentProps<typeof useDialogTheme> & {
+    open: boolean;
+    className?: string;
+    onClose: () => void;
+    enableBackdropClick?: boolean;
+}>;
+export declare function Dialog({ open, className, onClose, children, enableBackdropClick }: DialogProps): import("react/jsx-runtime").JSX.Element;

package/build/components/Dialog.js

@@ -0,0 +1,21 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog as HeadlessDialog } from "@headlessui/react";
+import { useCallback } from "react";
+import { createComponentTheme } from "../theme/internals.js";
+export const useDialogTheme = createComponentTheme("Dialog", {
+  elements: ["root", "backdrop"]
+});
+export function Dialog({ open, className, onClose, children, enableBackdropClick }) {
+  let theme = useDialogTheme();
+  let handleBackdropClick = useCallback(() => {
+    if (enableBackdropClick) {
+      onClose();
+    }
+  }, [enableBackdropClick, onClose]);
+  return /* @__PURE__ */ jsxs(HeadlessDialog, { open, onClose: handleBackdropClick, children: [
+    /* @__PURE__ */ jsx("div", { className: theme.backdrop("fixed inset-0"), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("div", { className: theme.root("fixed inset-0", className), children })
+  ] });
+}
+//# sourceMappingURL=Dialog.js.map

package/build/components/Dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Dialog.tsx"],
+  "sourcesContent": ["import {Dialog as HeadlessDialog} from '@headlessui/react';\nimport {type PropsWithChildren, useCallback} from 'react';\n\nimport {type ComponentProps, createComponentTheme} from '../theme/internals.js';\n\nexport const useDialogTheme = createComponentTheme('Dialog', {\n  elements: ['root', 'backdrop'],\n});\n\nexport type DialogProps = PropsWithChildren<\n  ComponentProps<typeof useDialogTheme> & {\n    open: boolean;\n    className?: string;\n    onClose: () => void;\n    enableBackdropClick?: boolean;\n  }\n>;\n\nexport function Dialog({open, className, onClose, children, enableBackdropClick}: DialogProps) {\n  let theme = useDialogTheme();\n\n  let handleBackdropClick = useCallback(() => {\n    if (enableBackdropClick) {\n      onClose();\n    }\n  }, [enableBackdropClick, onClose]);\n\n  return (\n    <HeadlessDialog open={open} onClose={handleBackdropClick}>\n      <div className={theme.backdrop('fixed inset-0')} aria-hidden=\"true\" />\n      <div className={theme.root('fixed inset-0', className)}>{children}</div>\n    </HeadlessDialog>\n  );\n}\n"],
+  "mappings": ";AA4BI,SACE,KADF;AA5BJ,SAAQ,UAAU,sBAAqB;AACvC,SAAgC,mBAAkB;AAElD,SAA6B,4BAA2B;AAEjD,aAAM,iBAAiB,qBAAqB,UAAU;AAAA,EAC3D,UAAU,CAAC,QAAQ,UAAU;AAC/B,CAAC;AAWM,gBAAS,OAAO,EAAC,MAAM,WAAW,SAAS,UAAU,oBAAmB,GAAgB;AAC7F,MAAI,QAAQ,eAAe;AAE3B,MAAI,sBAAsB,YAAY,MAAM;AAC1C,QAAI,qBAAqB;AACvB,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,qBAAqB,OAAO,CAAC;AAEjC,SACE,qBAAC,kBAAe,MAAY,SAAS,qBACnC;AAAA,wBAAC,SAAI,WAAW,MAAM,SAAS,eAAe,GAAG,eAAY,QAAO;AAAA,IACpE,oBAAC,SAAI,WAAW,MAAM,KAAK,iBAAiB,SAAS,GAAI,UAAS;AAAA,KACpE;AAEJ;",
+  "names": []
+}

package/build/components/DialogPanel.d.ts

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