@jakubmazanec/ui 0.1.0-next.86bf251

package/build/components/Combobox.js

@@ -0,0 +1,178 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Combobox as HeadlessCombobox,
+  ComboboxButton as HeadlessComboboxButton,
+  ComboboxInput as HeadlessComboboxInput,
+  ComboboxOptions as HeadlessComboboxOptions
+} from "@headlessui/react";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import {
+  Children,
+  Fragment,
+  useCallback,
+  useState
+} from "react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { ComboboxOption } from "./ComboboxOption.js";
+import { Icon } from "./Icon.js";
+import { forwardRef, useFormId } from "./internals.js";
+import { useField } from "./useField.js";
+import { useFieldName } from "./useFieldName.js";
+export const useComboboxTheme = createComponentTheme("Combobox", {
+  variants: { disabled: [true, false], invalid: [true, false] },
+  elements: ["root", "input", "icon", "options"]
+});
+const COMBOBOX_ELEMENT = Fragment;
+export const Combobox = forwardRef(
+  ({
+    disabled = false,
+    invalid = false,
+    as = COMBOBOX_ELEMENT,
+    value,
+    defaultValue,
+    multiple,
+    items,
+    placeholder,
+    immediate = true,
+    virtual = false,
+    customValue = false,
+    name,
+    className,
+    onChange,
+    children,
+    ...rest
+  }, ref) => {
+    let theme = useComboboxTheme({ disabled, invalid });
+    let formId = useFormId();
+    let field = useField();
+    let fieldName = useFieldName();
+    let [query, setQuery] = useState("");
+    let handleChange = useCallback(
+      (selectedValue) => {
+        if (selectedValue) {
+          onChange?.(selectedValue);
+        }
+        if (selectedValue === null) {
+          onChange?.(void 0);
+        }
+      },
+      [onChange]
+    );
+    let displayValue = useCallback(
+      (option) => {
+        if (items) {
+          let selectedItem = items.find((item) => item.value === option);
+          if (selectedItem) {
+            return selectedItem.label;
+          }
+        }
+        return option;
+      },
+      [items]
+    );
+    let handleQueryChange = useCallback((event) => {
+      setQuery(event.target.value);
+    }, []);
+    if (virtual && !items) {
+      throw new Error("Combobox requires `items` prop in virtual scrolling mode!");
+    }
+    if (virtual && customValue) {
+      throw new Error("Combobox doesn't support `customValue` prop in virtual scrolling mode!");
+    }
+    if (items && children) {
+      throw new Error("Combobox accepts only either `items` prop, or children!");
+    }
+    let filteredItems = query ? items?.filter(
+      (item) => `${item.label}`.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""))
+    ) : items;
+    let filteredChildren = query ? Children.toArray(children).filter((child) => {
+      if (typeof child === "object" && "props" in child && typeof child.props === "object" && typeof child.props.children === "string" && child.props.children.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, ""))) {
+        return true;
+      }
+      return false;
+    }) : children;
+    let props = {
+      as,
+      ref,
+      name: field?.name ?? fieldName ?? name,
+      value: value ?? null,
+      defaultValue,
+      multiple,
+      disabled,
+      immediate,
+      form: formId,
+      onChange: handleChange,
+      ...rest
+    };
+    if (virtual) {
+      props.virtual = {
+        options: filteredItems?.map((item) => item.value) ?? []
+      };
+    }
+    return /* @__PURE__ */ jsxs(HeadlessCombobox, { ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: theme.root("relative", className), "data-component": "combobox", children: [
+        /* @__PURE__ */ jsx(
+          HeadlessComboboxInput,
+          {
+            className: theme.input(null, className),
+            size: 1,
+            displayValue,
+            onChange: handleQueryChange
+          }
+        ),
+        /* @__PURE__ */ jsx(HeadlessComboboxButton, { className: theme.icon("absolute"), children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) }) })
+      ] }),
+      virtual && filteredItems ? /* @__PURE__ */ jsx(HeadlessComboboxOptions, { className: theme.options(), anchor: "bottom start", children: ({ option }) => /* @__PURE__ */ jsx(ComboboxOption, { value: option, children: items?.find((item) => item.value === option)?.label }) }) : null,
+      !virtual && filteredItems ? /* @__PURE__ */ jsxs(HeadlessComboboxOptions, { className: theme.options(), anchor: "bottom start", children: [
+        customValue && query.length ? /* @__PURE__ */ jsx(ComboboxOption, { value: query, children: query }, query) : null,
+        filteredItems.map((item) => /* @__PURE__ */ jsx(ComboboxOption, { value: item.value, children: item.label }, String(item.value)))
+      ] }) : null,
+      !filteredItems && Array.isArray(filteredChildren) ? /* @__PURE__ */ jsxs(HeadlessComboboxOptions, { className: theme.options(), anchor: "bottom start", children: [
+        customValue && query.length ? /* @__PURE__ */ jsx(ComboboxOption, { value: query, children: query }) : null,
+        filteredChildren
+      ] }) : null
+    ] });
+  }
+);
+export const comboboxTheme = {
+  classNames: {
+    root: "w-full min-w-32",
+    input: "flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm",
+    icon: "text-neutral-500 size-5 top-2 right-2 cursor-pointer",
+    options: "flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--input-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors"
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: "border-neutral-100 text-neutral-200 cursor-not-allowed",
+        input: "",
+        icon: "text-neutral-200",
+        options: "border-neutral-100"
+      },
+      false: {
+        root: "",
+        input: "",
+        icon: "",
+        options: ""
+      }
+    },
+    invalid: {
+      true: {
+        root: "",
+        input: "",
+        icon: "",
+        options: ""
+      },
+      false: {
+        root: "",
+        input: "",
+        icon: "",
+        options: ""
+      }
+    }
+  }
+};
+//# sourceMappingURL=Combobox.js.map

package/build/components/Combobox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Combobox.tsx"],
+  "sourcesContent": ["// TODO: fix somehow\n/* eslint-disable complexity -- TODO */\nimport {\n  Combobox as HeadlessCombobox,\n  ComboboxButton as HeadlessComboboxButton,\n  ComboboxInput as HeadlessComboboxInput,\n  ComboboxOptions as HeadlessComboboxOptions,\n  type ComboboxProps as HeadlessComboboxProps,\n} from '@headlessui/react';\nimport {ChevronDownIcon} from '@heroicons/react/24/outline';\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  Fragment,\n  type PropsWithChildren,\n  type Ref,\n  useCallback,\n  useState,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {ComboboxOption} from './ComboboxOption.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 useComboboxTheme = createComponentTheme('Combobox', {\n  variants: {disabled: [true, false], invalid: [true, false]},\n  elements: ['root', 'input', 'icon', 'options'],\n});\n\nconst COMBOBOX_ELEMENT = Fragment;\n\nexport type ComboboxItem<V> = {\n  value: V;\n  label: string;\n};\n\nexport type ComboboxProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = PropsWithChildren<\n  ComponentProps<typeof useComboboxTheme> &\n    ComponentPropsWithoutRef<T> &\n    (\n      | {\n          as?: T | undefined;\n          value?: V | undefined;\n          defaultValue?: V | undefined;\n          multiple?: false | undefined;\n          items?: Array<ComboboxItem<V>> | undefined;\n          placeholder?: string;\n          immediate?: boolean | undefined;\n          virtual?: boolean | undefined;\n          customValue?: boolean | undefined;\n          name?: string | undefined;\n          className?: string;\n          onChange?: (selectedValue: V | undefined) => void;\n        }\n      | {\n          as?: T | undefined;\n          value?: V[] | undefined;\n          defaultValue?: V[] | undefined;\n          multiple: true;\n          items?: Array<ComboboxItem<V>> | undefined;\n          placeholder?: string;\n          immediate?: boolean | undefined;\n          virtual?: boolean | undefined;\n          customValue?: boolean | undefined;\n          name?: string | undefined;\n          className?: string;\n          onChange?: (selectedValue: V[] | undefined) => void;\n        }\n    )\n>;\n\nexport const Combobox = forwardRef(\n  <T extends ElementType = typeof COMBOBOX_ELEMENT, V extends boolean | number | string = string>(\n    {\n      disabled = false,\n      invalid = false,\n      as = COMBOBOX_ELEMENT as unknown as T,\n      value,\n      defaultValue,\n      multiple,\n      items,\n      placeholder,\n      immediate = true,\n      virtual = false,\n      customValue = false,\n      name,\n      className,\n      onChange,\n      children,\n      ...rest\n    }: ComboboxProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useComboboxTheme({disabled, invalid});\n    let formId = useFormId();\n    let field = useField();\n    let fieldName = useFieldName();\n    let [query, setQuery] = useState('');\n\n    let handleChange = useCallback(\n      (selectedValue: V | null) => {\n        if (selectedValue) {\n          onChange?.(selectedValue as V & V[]);\n        }\n\n        if (selectedValue === null) {\n          onChange?.(undefined);\n        }\n      },\n      [onChange],\n    );\n\n    let displayValue = useCallback(\n      (option: string) => {\n        if (items) {\n          let selectedItem = items.find((item) => item.value === option);\n\n          if (selectedItem) {\n            return selectedItem.label;\n          }\n        }\n\n        return option;\n      },\n      [items],\n    );\n\n    let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n      setQuery(event.target.value);\n    }, []);\n\n    if (virtual && !items) {\n      throw new Error('Combobox requires `items` prop in virtual scrolling mode!');\n    }\n\n    if (virtual && customValue) {\n      throw new Error(\"Combobox doesn't support `customValue` prop in virtual scrolling mode!\");\n    }\n\n    if (items && children) {\n      throw new Error('Combobox accepts only either `items` prop, or children!');\n    }\n\n    let filteredItems =\n      query ?\n        items?.filter((item) =>\n          `${item.label as number | string}`\n            .toLowerCase()\n            .replace(/\\s+/g, '')\n            .includes(query.toLowerCase().replace(/\\s+/g, '')),\n        )\n      : items;\n    let filteredChildren =\n      query ?\n        Children.toArray(children).filter((child) => {\n          if (\n            typeof child === 'object' &&\n            'props' in child &&\n            typeof child.props === 'object' &&\n            typeof (child.props as {children?: unknown[] | string}).children === 'string' &&\n            (child.props as {children: string}).children\n              .toLowerCase()\n              .replace(/\\s+/g, '')\n              .includes(query.toLowerCase().replace(/\\s+/g, ''))\n          ) {\n            return true;\n          }\n\n          return false;\n        })\n      : children;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessComboboxProps<any, any, any> = {\n      as,\n      ref,\n      name: field?.name ?? fieldName ?? name,\n      value: value ?? null,\n      defaultValue,\n      multiple,\n      disabled,\n      immediate,\n      form: formId,\n      onChange: handleChange,\n      ...rest,\n    };\n\n    if (virtual) {\n      props.virtual = {\n        options: filteredItems?.map((item) => item.value) ?? [],\n      };\n    }\n\n    return (\n      <HeadlessCombobox {...props}>\n        <div className={theme.root('relative', className)} data-component=\"combobox\">\n          <HeadlessComboboxInput\n            className={theme.input(null, className)}\n            size={1} // so the input default width without styling is small\n            displayValue={displayValue}\n            onChange={handleQueryChange}\n          />\n          <HeadlessComboboxButton className={theme.icon('absolute')}>\n            <Icon>\n              <ChevronDownIcon />\n            </Icon>\n          </HeadlessComboboxButton>\n        </div>\n\n        {virtual && filteredItems ?\n          <HeadlessComboboxOptions className={theme.options()} anchor=\"bottom start\">\n            {({option}: {option: V}) => (\n              <ComboboxOption value={option}>\n                {items?.find((item) => item.value === option)?.label}\n              </ComboboxOption>\n            )}\n          </HeadlessComboboxOptions>\n        : null}\n\n        {!virtual && filteredItems ?\n          <HeadlessComboboxOptions className={theme.options()} anchor=\"bottom start\">\n            {customValue && query.length ?\n              <ComboboxOption key={query} value={query}>\n                {query}\n              </ComboboxOption>\n            : null}\n            {filteredItems.map((item) => (\n              <ComboboxOption key={String(item.value)} value={item.value}>\n                {item.label}\n              </ComboboxOption>\n            ))}\n          </HeadlessComboboxOptions>\n        : null}\n\n        {!filteredItems && Array.isArray(filteredChildren) ?\n          <HeadlessComboboxOptions className={theme.options()} anchor=\"bottom start\">\n            {customValue && query.length ?\n              <ComboboxOption value={query}>{query}</ComboboxOption>\n            : null}\n            {filteredChildren}\n          </HeadlessComboboxOptions>\n        : null}\n      </HeadlessCombobox>\n    );\n  },\n);\n\nexport const comboboxTheme: ComponentTheme<typeof useComboboxTheme> = {\n  classNames: {\n    root: 'w-full min-w-32',\n    input:\n      'flex w-full items-center rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',\n    icon: 'text-neutral-500 size-5 top-2 right-2 cursor-pointer',\n    options:\n      'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-neutral-100 hover:border-neutral-200 bg-white text-left w-[var(--input-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-neutral-100 text-neutral-200 cursor-not-allowed',\n        input: '',\n        icon: 'text-neutral-200',\n        options: 'border-neutral-100',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n    },\n    invalid: {\n      true: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n      false: {\n        root: '',\n        input: '',\n        icon: '',\n        options: '',\n      },\n    },\n  },\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/build/components/ComboboxOption.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useComboboxOptionTheme: ((themeProps: {
+    readonly disabled: boolean;
+}) => {
+    icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+}) & {
+    componentThemeName: "ComboboxOption";
+    themeDefinition: {
+        readonly variants: {
+            readonly disabled: [true, false];
+        };
+        readonly elements: ["root", "icon"];
+    };
+};
+export type ComboboxOptionProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useComboboxOptionTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    value: V;
+    className?: string;
+}>;
+export declare const ComboboxOption: <T extends ElementType = "div", V extends string | number | boolean = string>(props: Partial<import("@jakubmazanec/ts-utils").Writable<{
+    readonly disabled: boolean;
+}>> & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+    as?: T | undefined;
+    value: V;
+    className?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => import("react").ReactNode;
+export declare const comboboxOptionTheme: ComponentTheme<typeof useComboboxOptionTheme>;

package/build/components/ComboboxOption.js

@@ -0,0 +1,59 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ComboboxOption as HeadlessComboboxOption
+} from "@headlessui/react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { Icon } from "./Icon.js";
+import { forwardRef } from "./internals.js";
+export const useComboboxOptionTheme = createComponentTheme("ComboboxOption", {
+  variants: { disabled: [true, false] },
+  elements: ["root", "icon"]
+});
+const LISTBOX_OPTION_ELEMENT = "div";
+export const ComboboxOption = forwardRef(
+  ({
+    disabled = false,
+    as = LISTBOX_OPTION_ELEMENT,
+    value,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    let theme = useComboboxOptionTheme({ disabled });
+    let props = {
+      as,
+      ref,
+      value,
+      disabled,
+      className: theme.root("cursor-pointer", className),
+      "data-component": "combobox-option",
+      ...rest
+    };
+    return /* @__PURE__ */ jsxs(HeadlessComboboxOption, { ...props, children: [
+      /* @__PURE__ */ jsx("span", { className: theme.icon("absolute"), children: /* @__PURE__ */ jsx(Icon, { name: "Check" }) }),
+      children
+    ] });
+  }
+);
+export const comboboxOptionTheme = {
+  classNames: {
+    root: "relative group/option p-1 pr-6 rounded-1 hover:bg-neutral-50 data-[active]:bg-neutral-50 text-sm transition-colors",
+    icon: "hidden group-data-[selected]/option:block right-1 top-1 text-neutral-500"
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: "text-neutral-200 cursor-not-allowed",
+        icon: "text-neutral-200"
+      },
+      false: {
+        root: "",
+        icon: ""
+      }
+    }
+  }
+};
+//# sourceMappingURL=ComboboxOption.js.map

package/build/components/ComboboxOption.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/ComboboxOption.tsx"],
+  "sourcesContent": ["import {\n  ComboboxOption as HeadlessComboboxOption,\n  type ComboboxOptionProps as HeadlessComboboxOptionProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\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 {Icon} from './Icon.js';\nimport {forwardRef} from './internals.js';\n\nexport const useComboboxOptionTheme = createComponentTheme('ComboboxOption', {\n  variants: {disabled: [true, false]},\n  elements: ['root', 'icon'],\n});\n\nconst LISTBOX_OPTION_ELEMENT = 'div';\n\nexport type ComboboxOptionProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = PropsWithChildren<\n  ComponentProps<typeof useComboboxOptionTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      value: V;\n      className?: string;\n    }\n>;\n\nexport const ComboboxOption = forwardRef(\n  <\n    T extends ElementType = typeof LISTBOX_OPTION_ELEMENT,\n    V extends boolean | number | string = string,\n  >(\n    {\n      disabled = false,\n      as = LISTBOX_OPTION_ELEMENT as T,\n      value,\n      className,\n      children,\n      ...rest\n    }: ComboboxOptionProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useComboboxOptionTheme({disabled});\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessComboboxOptionProps<any, any> = {\n      as,\n      ref,\n      value,\n      disabled,\n      className: theme.root('cursor-pointer', className),\n      'data-component': 'combobox-option',\n      ...rest,\n    };\n\n    return (\n      <HeadlessComboboxOption {...props}>\n        <span className={theme.icon('absolute')}>\n          <Icon name=\"Check\" />\n        </span>\n        {children}\n      </HeadlessComboboxOption>\n    );\n  },\n);\n\nexport const comboboxOptionTheme: ComponentTheme<typeof useComboboxOptionTheme> = {\n  classNames: {\n    root: 'relative group/option p-1 pr-6 rounded-1 hover:bg-neutral-50 data-[active]:bg-neutral-50 text-sm transition-colors',\n    icon: 'hidden group-data-[selected]/option:block right-1 top-1 text-neutral-500',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'text-neutral-200 cursor-not-allowed',\n        icon: 'text-neutral-200',\n      },\n      false: {\n        root: '',\n        icon: '',\n      },\n    },\n  },\n};\n"],
+  "mappings": ";AAmEM,SAEI,KAFJ;AAnEN;AAAA,EACE,kBAAkB;AAAA,OAEb;AAQP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,YAAW;AACnB,SAAQ,kBAAiB;AAElB,aAAM,yBAAyB,qBAAqB,kBAAkB;AAAA,EAC3E,UAAU,EAAC,UAAU,CAAC,MAAM,KAAK,EAAC;AAAA,EAClC,UAAU,CAAC,QAAQ,MAAM;AAC3B,CAAC;AAED,MAAM,yBAAyB;AAcxB,aAAM,iBAAiB;AAAA,EAC5B,CAIE;AAAA,IACE,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,uBAAuB,EAAC,SAAQ,CAAC;AAG7C,QAAI,QAA+C;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,MAAM,KAAK,kBAAkB,SAAS;AAAA,MACjD,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL;AAEA,WACE,qBAAC,0BAAwB,GAAG,OAC1B;AAAA,0BAAC,UAAK,WAAW,MAAM,KAAK,UAAU,GACpC,8BAAC,QAAK,MAAK,SAAQ,GACrB;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AACF;AAEO,aAAM,sBAAqE;AAAA,EAChF,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": []
+}

package/build/components/Container.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useContainerTheme: ((themeProps: {
+    readonly spacing: "small" | "medium" | "large" | "extra-small";
+    readonly direction: "row" | "column";
+    readonly justify: "center" | "normal" | "spaced";
+    readonly align: "center" | "normal";
+}) => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Container";
+    themeDefinition: {
+        readonly variants: {
+            readonly spacing: ["extra-small", "small", "medium", "large"];
+            readonly direction: ["row", "column"];
+            readonly justify: ["normal", "center", "spaced"];
+            readonly align: ["normal", "center"];
+        };
+    };
+};
+export type ContainerProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useContainerTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    className?: string;
+}>;
+export declare const Container: <T extends ElementType = "div">(props: Partial<import("@jakubmazanec/ts-utils").Writable<{
+    readonly spacing: "small" | "medium" | "large" | "extra-small";
+    readonly direction: "row" | "column";
+    readonly justify: "center" | "normal" | "spaced";
+    readonly align: "center" | "normal";
+}>> & 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 containerTheme: ComponentTheme<typeof useContainerTheme>;

package/build/components/Container.js

@@ -0,0 +1,63 @@
+"use strict";
+import {
+  createElement
+} from "react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { forwardRef } from "./internals.js";
+export const useContainerTheme = createComponentTheme("Container", {
+  variants: {
+    spacing: ["extra-small", "small", "medium", "large"],
+    direction: ["row", "column"],
+    justify: ["normal", "center", "spaced"],
+    align: ["normal", "center"]
+  }
+});
+const TEXT_ELEMENT = "div";
+export const Container = forwardRef(
+  ({
+    spacing = "medium",
+    direction = "row",
+    justify = "normal",
+    align = "normal",
+    as: Component = TEXT_ELEMENT,
+    className,
+    children,
+    ...rest
+  }, ref) => {
+    let theme = useContainerTheme({ spacing, direction, justify, align });
+    let props = {
+      ref,
+      className: theme(null, className),
+      "data-component": "container",
+      ...rest
+    };
+    return createElement(Component, props, children);
+  }
+);
+export const containerTheme = {
+  className: "flex",
+  variants: {
+    spacing: {
+      "extra-small": "gap-1",
+      small: "gap-2",
+      medium: "gap-4",
+      large: "gap-6"
+    },
+    direction: {
+      row: "",
+      column: "flex-col"
+    },
+    justify: {
+      normal: "",
+      center: "justify-center",
+      spaced: "justify-between"
+    },
+    align: {
+      normal: "",
+      center: "items-center"
+    }
+  }
+};
+//# sourceMappingURL=Container.js.map

package/build/components/Container.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Container.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 useContainerTheme = createComponentTheme('Container', {\n  variants: {\n    spacing: ['extra-small', 'small', 'medium', 'large'],\n    direction: ['row', 'column'],\n    justify: ['normal', 'center', 'spaced'],\n    align: ['normal', 'center'],\n  },\n});\n\nconst TEXT_ELEMENT = 'div';\n\nexport type ContainerProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useContainerTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      className?: string;\n    }\n>;\n\nexport const Container = forwardRef(\n  <T extends ElementType = typeof TEXT_ELEMENT>(\n    {\n      spacing = 'medium',\n      direction = 'row',\n      justify = 'normal',\n      align = 'normal',\n      as: Component = TEXT_ELEMENT as T,\n      className,\n      children,\n      ...rest\n    }: ContainerProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useContainerTheme({spacing, direction, justify, align});\n    let props = {\n      ref,\n      className: theme(null, className),\n      'data-component': 'container',\n      ...rest,\n    };\n\n    return createElement(Component, props, children);\n  },\n);\n\nexport const containerTheme: ComponentTheme<typeof useContainerTheme> = {\n  className: 'flex',\n  variants: {\n    spacing: {\n      'extra-small': 'gap-1',\n      small: 'gap-2',\n      medium: 'gap-4',\n      large: 'gap-6',\n    },\n    direction: {\n      row: '',\n      column: 'flex-col',\n    },\n    justify: {\n      normal: '',\n      center: 'justify-center',\n      spaced: 'justify-between',\n    },\n    align: {\n      normal: '',\n      center: 'items-center',\n    },\n  },\n};\n"],
+  "mappings": ";AAAA;AAAA,EAEE;AAAA,OAIK;AAEP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,kBAAiB;AAElB,aAAM,oBAAoB,qBAAqB,aAAa;AAAA,EACjE,UAAU;AAAA,IACR,SAAS,CAAC,eAAe,SAAS,UAAU,OAAO;AAAA,IACnD,WAAW,CAAC,OAAO,QAAQ;AAAA,IAC3B,SAAS,CAAC,UAAU,UAAU,QAAQ;AAAA,IACtC,OAAO,CAAC,UAAU,QAAQ;AAAA,EAC5B;AACF,CAAC;AAED,MAAM,eAAe;AAUd,aAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,kBAAkB,EAAC,SAAS,WAAW,SAAS,MAAK,CAAC;AAClE,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,iBAA2D;AAAA,EACtE,WAAW;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,eAAe;AAAA,MACf,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAAA,IACA,WAAW;AAAA,MACT,KAAK;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AACF;",
+  "names": []
+}

package/build/components/Description.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useDescriptionTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Description";
+    themeDefinition: undefined;
+};
+export type DescriptionProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDescriptionTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    className?: string | undefined;
+}>;
+export declare const Description: <T extends ElementType = "p">(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 descriptionTheme: ComponentTheme<typeof useDescriptionTheme>;

package/build/components/Description.js

@@ -0,0 +1,28 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import {
+  Description as HeadlessDescription
+} from "@headlessui/react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { filterProps, forwardRef } from "./internals.js";
+export const useDescriptionTheme = createComponentTheme("Description");
+const DESCRIPTION_ELEMENT = "p";
+export const Description = forwardRef(
+  ({ as = DESCRIPTION_ELEMENT, className, children, ...rest }, ref) => {
+    let theme = useDescriptionTheme();
+    let props = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      "data-component": "description",
+      ...rest
+    });
+    return /* @__PURE__ */ jsx(HeadlessDescription, { ...props, children });
+  }
+);
+export const descriptionTheme = {
+  className: "font-sans text-sm"
+};
+//# sourceMappingURL=Description.js.map

package/build/components/Description.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Description.tsx"],
+  "sourcesContent": ["import {\n  Description as HeadlessDescription,\n  type DescriptionProps as HeadlessDescriptionProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\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 {filterProps, forwardRef} from './internals.js';\n\nexport const useDescriptionTheme = createComponentTheme('Description');\n\nconst DESCRIPTION_ELEMENT = 'p';\n\nexport type DescriptionProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useDescriptionTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      className?: string | undefined;\n    }\n>;\n\nexport const Description = forwardRef(\n  <T extends ElementType = typeof DESCRIPTION_ELEMENT>(\n    {as = DESCRIPTION_ELEMENT as T, className, children, ...rest}: DescriptionProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useDescriptionTheme();\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessDescriptionProps<any> = filterProps({\n      as,\n      ref,\n      className: theme(null, className),\n      'data-component': 'description',\n      ...rest,\n    });\n\n    return <HeadlessDescription {...props}>{children}</HeadlessDescription>;\n  },\n);\n\nexport const descriptionTheme: ComponentTheme<typeof useDescriptionTheme> = {\n  className: 'font-sans text-sm',\n};\n"],
+  "mappings": ";AA6CW;AA7CX;AAAA,EACE,eAAe;AAAA,OAEV;AAQP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,aAAa,kBAAiB;AAE/B,aAAM,sBAAsB,qBAAqB,aAAa;AAErE,MAAM,sBAAsB;AAUrB,aAAM,cAAc;AAAA,EACzB,CACE,EAAC,KAAK,qBAA0B,WAAW,UAAU,GAAG,KAAI,GAC5D,QACG;AACH,QAAI,QAAQ,oBAAoB;AAEhC,QAAI,QAAuC,YAAY;AAAA,MACrD;AAAA,MACA;AAAA,MACA,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL,CAAC;AAED,WAAO,oBAAC,uBAAqB,GAAG,OAAQ,UAAS;AAAA,EACnD;AACF;AAEO,aAAM,mBAA+D;AAAA,EAC1E,WAAW;AACb;",
+  "names": []
+}

package/build/components/Dialog.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } 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<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDialogTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    open: boolean;
+    static?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string;
+    onClose?: () => void;
+}>;
+export declare const Dialog: <T extends ElementType = "div">(props: import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+    as?: T | undefined;
+    open: boolean;
+    static?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    onClose?: (() => void) | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => import("react").ReactNode;
+export declare const dialogTheme: ComponentTheme<typeof useDialogTheme>;

package/build/components/Dialog.js

@@ -0,0 +1,55 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog as HeadlessDialog,
+  DialogBackdrop as HeadlessDialogBackdrop
+} from "@headlessui/react";
+import {
+  useCallback
+} from "react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { filterProps, forwardRef } from "./internals.js";
+export const useDialogTheme = createComponentTheme("Dialog", {
+  elements: ["root", "backdrop"]
+});
+const DIALOG_ELEMENT = "div";
+export const Dialog = forwardRef(
+  ({
+    as = DIALOG_ELEMENT,
+    open,
+    static: isStatic,
+    autoFocus,
+    className,
+    onClose,
+    children,
+    ...rest
+  }, ref) => {
+    let theme = useDialogTheme();
+    let handleClose = useCallback(() => {
+      onClose?.();
+    }, [onClose]);
+    let props = filterProps({
+      as,
+      ref,
+      open,
+      static: isStatic,
+      transition: true,
+      onClose: handleClose,
+      "data-component": "dialog",
+      ...rest
+    });
+    return /* @__PURE__ */ jsxs(HeadlessDialog, { ...props, children: [
+      /* @__PURE__ */ jsx(HeadlessDialogBackdrop, { transition: true, className: theme.backdrop("fixed inset-0") }),
+      /* @__PURE__ */ jsx("div", { className: theme.root("fixed inset-0", className), children })
+    ] });
+  }
+);
+export const dialogTheme = {
+  classNames: {
+    root: "flex w-screen items-center justify-center p-4 z-30",
+    backdrop: "bg-black/30 z-30"
+  }
+};
+//# sourceMappingURL=Dialog.js.map

package/build/components/Dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Dialog.tsx"],
+  "sourcesContent": ["import {\n  Dialog as HeadlessDialog,\n  DialogBackdrop as HeadlessDialogBackdrop,\n  type DialogProps as HeadlessDialogProps,\n} from '@headlessui/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type PropsWithChildren,\n  type Ref,\n  useCallback,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {filterProps, forwardRef} from './internals.js';\n\nexport const useDialogTheme = createComponentTheme('Dialog', {\n  elements: ['root', 'backdrop'],\n});\n\nconst DIALOG_ELEMENT = 'div';\n\nexport type DialogProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useDialogTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      open: boolean;\n      static?: boolean | undefined;\n      autoFocus?: boolean | undefined;\n      className?: string;\n      onClose?: () => void;\n    }\n>;\n\nexport const Dialog = forwardRef(\n  <T extends ElementType = typeof DIALOG_ELEMENT>(\n    {\n      as = DIALOG_ELEMENT as T,\n      open,\n      static: isStatic,\n      autoFocus,\n      className,\n      onClose,\n      children,\n      ...rest\n    }: DialogProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useDialogTheme();\n\n    let handleClose = useCallback(() => {\n      onClose?.();\n    }, [onClose]);\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessDialogProps<any> = filterProps({\n      as,\n      ref,\n      open,\n      static: isStatic,\n      transition: true,\n      onClose: handleClose,\n      'data-component': 'dialog',\n      ...rest,\n    });\n\n    return (\n      <HeadlessDialog {...props}>\n        <HeadlessDialogBackdrop transition className={theme.backdrop('fixed inset-0')} />\n        <div className={theme.root('fixed inset-0', className)}>{children}</div>\n      </HeadlessDialog>\n    );\n  },\n);\n\nexport const dialogTheme: ComponentTheme<typeof useDialogTheme> = {\n  classNames: {\n    root: 'flex w-screen items-center justify-center p-4 z-30',\n    backdrop: 'bg-black/30 z-30',\n  },\n};\n"],
+  "mappings": ";AAuEM,SACE,KADF;AAvEN;AAAA,EACE,UAAU;AAAA,EACV,kBAAkB;AAAA,OAEb;AACP;AAAA,EAKE;AAAA,OACK;AAEP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,aAAa,kBAAiB;AAE/B,aAAM,iBAAiB,qBAAqB,UAAU;AAAA,EAC3D,UAAU,CAAC,QAAQ,UAAU;AAC/B,CAAC;AAED,MAAM,iBAAiB;AAchB,aAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE,KAAK;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,eAAe;AAE3B,QAAI,cAAc,YAAY,MAAM;AAClC,gBAAU;AAAA,IACZ,GAAG,CAAC,OAAO,CAAC;AAGZ,QAAI,QAAkC,YAAY;AAAA,MAChD;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL,CAAC;AAED,WACE,qBAAC,kBAAgB,GAAG,OAClB;AAAA,0BAAC,0BAAuB,YAAU,MAAC,WAAW,MAAM,SAAS,eAAe,GAAG;AAAA,MAC/E,oBAAC,SAAI,WAAW,MAAM,KAAK,iBAAiB,SAAS,GAAI,UAAS;AAAA,OACpE;AAAA,EAEJ;AACF;AAEO,aAAM,cAAqD;AAAA,EAChE,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;",
+  "names": []
+}

package/build/components/DialogPanel.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useDialogPanelTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "DialogPanel";
+    themeDefinition: undefined;
+};
+export type DialogPanelProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useDialogPanelTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    className?: string;
+}>;
+export declare const DialogPanel: <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 dialogPanelTheme: ComponentTheme<typeof useDialogPanelTheme>;

package/build/components/DialogPanel.js

@@ -0,0 +1,29 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import {
+  DialogPanel as HeadlessDialogPanel
+} from "@headlessui/react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { filterProps, forwardRef } from "./internals.js";
+export const useDialogPanelTheme = createComponentTheme("DialogPanel");
+const DIALOG_PANEL_ELEMENT = "div";
+export const DialogPanel = forwardRef(
+  ({ as = DIALOG_PANEL_ELEMENT, className, children, ...rest }, ref) => {
+    let theme = useDialogPanelTheme();
+    let props = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      transition: true,
+      "data-component": "dialog-panel",
+      ...rest
+    });
+    return /* @__PURE__ */ jsx(HeadlessDialogPanel, { ...props, children });
+  }
+);
+export const dialogPanelTheme = {
+  className: "shadow-1 relative flex w-full min-w-[300px] max-w-[900px] flex-col gap-y-6 rounded-4 bg-white p-6 max-h-[calc(100vh-3rem)] overflow-hidden overflow-y-auto"
+};
+//# sourceMappingURL=DialogPanel.js.map