@jakubmazanec/ui 0.1.0-unstable.081bdf1

package/build/components/Label.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 useLabelTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Label";
+    themeDefinition: undefined;
+};
+export type LabelProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useLabelTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    className?: string;
+}>;
+export declare const Label: <T extends ElementType = "label">(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 labelTheme: ComponentTheme<typeof useLabelTheme>;

package/build/components/Label.js

@@ -0,0 +1,26 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { Label as HeadlessLabel } from "@headlessui/react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { filterProps, forwardRef } from "./internals.js";
+export const useLabelTheme = createComponentTheme("Label");
+const LABEL_ELEMENT = "label";
+export const Label = forwardRef(
+  ({ as = LABEL_ELEMENT, className, children, ...rest }, ref) => {
+    let theme = useLabelTheme();
+    let props = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      "data-component": "label",
+      ...rest
+    });
+    return /* @__PURE__ */ jsx(HeadlessLabel, { ...props, children });
+  }
+);
+export const labelTheme = {
+  className: "block cursor-pointer font-sans text-sm font-medium"
+};
+//# 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, type LabelProps as HeadlessLabelProps} 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 useLabelTheme = createComponentTheme('Label');\n\nconst LABEL_ELEMENT = 'label';\n\nexport type LabelProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useLabelTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      className?: string;\n    }\n>;\n\nexport const Label = forwardRef(\n  <T extends ElementType = typeof LABEL_ELEMENT>(\n    {as = LABEL_ELEMENT as T, className, children, ...rest}: LabelProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useLabelTheme();\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessLabelProps<any> = filterProps({\n      as,\n      ref,\n      className: theme(null, className),\n      'data-component': 'label',\n      ...rest,\n    });\n\n    return <HeadlessLabel {...props}>{children}</HeadlessLabel>;\n  },\n);\n\nexport const labelTheme: ComponentTheme<typeof useLabelTheme> = {\n  className: 'block cursor-pointer font-sans text-sm font-medium',\n};\n"],
+  "mappings": ";AA0CW;AA1CX,SAAQ,SAAS,qBAA2D;AAQ5E;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,aAAa,kBAAiB;AAE/B,aAAM,gBAAgB,qBAAqB,OAAO;AAEzD,MAAM,gBAAgB;AAUf,aAAM,QAAQ;AAAA,EACnB,CACE,EAAC,KAAK,eAAoB,WAAW,UAAU,GAAG,KAAI,GACtD,QACG;AACH,QAAI,QAAQ,cAAc;AAE1B,QAAI,QAAiC,YAAY;AAAA,MAC/C;AAAA,MACA;AAAA,MACA,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL,CAAC;AAED,WAAO,oBAAC,iBAAe,GAAG,OAAQ,UAAS;AAAA,EAC7C;AACF;AAEO,aAAM,aAAmD;AAAA,EAC9D,WAAW;AACb;",
+  "names": []
+}

package/build/components/Legend.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 useLegendTheme: (() => (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string) & {
+    componentThemeName: "Legend";
+    themeDefinition: undefined;
+};
+export type LegendProps<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useLegendTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    className?: string | undefined;
+}>;
+export declare const Legend: <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 legendTheme: ComponentTheme<typeof useLegendTheme>;

package/build/components/Legend.js

@@ -0,0 +1,26 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { Legend as HeadlessLegend } from "@headlessui/react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { filterProps, forwardRef } from "./internals.js";
+export const useLegendTheme = createComponentTheme("Legend");
+const LEGEND_ELEMENT = "div";
+export const Legend = forwardRef(
+  ({ as = LEGEND_ELEMENT, className, children, ...rest }, ref) => {
+    let theme = useLegendTheme();
+    let props = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      "data-component": "legend",
+      ...rest
+    });
+    return /* @__PURE__ */ jsx(HeadlessLegend, { ...props, children });
+  }
+);
+export const legendTheme = {
+  className: "font-sans font-semibold text-sm"
+};
+//# sourceMappingURL=Legend.js.map

package/build/components/Legend.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Legend.tsx"],
+  "sourcesContent": ["import {Legend as HeadlessLegend, type LegendProps as HeadlessLegendProps} 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 useLegendTheme = createComponentTheme('Legend');\n\nconst LEGEND_ELEMENT = 'div';\n\nexport type LegendProps<T extends ElementType> = PropsWithChildren<\n  ComponentProps<typeof useLegendTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      className?: string | undefined;\n    }\n>;\n\nexport const Legend = forwardRef(\n  <T extends ElementType = typeof LEGEND_ELEMENT>(\n    {as = LEGEND_ELEMENT as T, className, children, ...rest}: LegendProps<T>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useLegendTheme();\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessLegendProps<any> = filterProps({\n      as,\n      ref,\n      className: theme(null, className),\n      'data-component': 'legend',\n      ...rest,\n    });\n\n    return <HeadlessLegend {...props}>{children}</HeadlessLegend>;\n  },\n);\n\nexport const legendTheme: ComponentTheme<typeof useLegendTheme> = {\n  className: 'font-sans font-semibold text-sm',\n};\n"],
+  "mappings": ";AA0CW;AA1CX,SAAQ,UAAU,sBAA8D;AAQhF;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,aAAa,kBAAiB;AAE/B,aAAM,iBAAiB,qBAAqB,QAAQ;AAE3D,MAAM,iBAAiB;AAUhB,aAAM,SAAS;AAAA,EACpB,CACE,EAAC,KAAK,gBAAqB,WAAW,UAAU,GAAG,KAAI,GACvD,QACG;AACH,QAAI,QAAQ,eAAe;AAE3B,QAAI,QAAkC,YAAY;AAAA,MAChD;AAAA,MACA;AAAA,MACA,WAAW,MAAM,MAAM,SAAS;AAAA,MAChC,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL,CAAC;AAED,WAAO,oBAAC,kBAAgB,GAAG,OAAQ,UAAS;AAAA,EAC9C;AACF;AAEO,aAAM,cAAqD;AAAA,EAChE,WAAW;AACb;",
+  "names": []
+}

package/build/components/Listbox.d.ts

@@ -0,0 +1,59 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type ReactNode, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } from '../theme/internals.js';
+export declare const useListboxTheme: ((themeProps: {
+    readonly disabled: boolean;
+    readonly invalid: boolean;
+}) => {
+    filter: (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;
+    icon: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    root: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+    options: (baseClassName?: import("../theme/internals.js").ClassName, overrideClassName?: import("../theme/internals.js").ClassName) => string;
+}) & {
+    componentThemeName: "Listbox";
+    themeDefinition: {
+        readonly variants: {
+            readonly disabled: [true, false];
+            readonly invalid: [true, false];
+        };
+        readonly elements: ["root", "label", "icon", "options", "filter"];
+    };
+};
+export type ListboxItem<V> = {
+    value: V;
+    label: string;
+};
+export type ListboxProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useListboxTheme> & ComponentPropsWithoutRef<T> & ({
+    as?: T | undefined;
+    value?: V | undefined;
+    defaultValue?: V | undefined;
+    multiple?: false | undefined;
+    hideSelected?: never;
+    items?: Array<ListboxItem<V>> | undefined;
+    placeholder?: string;
+    name?: string | undefined;
+    className?: string | undefined;
+    showFilter?: boolean | undefined;
+    onChange?: (selectedValue: V) => void;
+} | {
+    as?: T | undefined;
+    value?: V[] | undefined;
+    defaultValue?: V[] | undefined;
+    multiple: true;
+    hideSelected?: {
+        limit: number;
+        message?: string | undefined;
+    } | undefined;
+    items?: Array<ListboxItem<V>> | undefined;
+    placeholder?: string;
+    name?: string | undefined;
+    className?: string | undefined;
+    showFilter?: boolean | undefined;
+    onChange?: (selectedValue: V[]) => void;
+})>;
+export declare const Listbox: <T extends ElementType = import("react").ExoticComponent<{
+    children?: ReactNode;
+}>, V extends string | number | boolean = string>(props: ListboxProps<T, V> & {
+    ref?: Ref<HTMLElement> | undefined;
+}) => ReactNode;
+export declare const listboxTheme: ComponentTheme<typeof useListboxTheme>;

package/build/components/Listbox.js

@@ -0,0 +1,254 @@
+"use strict";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Listbox as HeadlessListbox,
+  ListboxButton as HeadlessListboxButton,
+  ListboxOptions as HeadlessListboxOptions
+} from "@headlessui/react";
+import {
+  Children,
+  Fragment as Fragment2,
+  useCallback,
+  useRef,
+  useState
+} from "react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { Icon } from "./Icon.js";
+import { Input } from "./Input.js";
+import { forwardRef, useFormId } from "./internals.js";
+import { ListboxOption } from "./ListboxOption.js";
+import { useField } from "./useField.js";
+import { useFieldName } from "./useFieldName.js";
+export const useListboxTheme = createComponentTheme("Listbox", {
+  variants: { disabled: [true, false], invalid: [true, false] },
+  elements: ["root", "label", "icon", "options", "filter"]
+});
+const LISTBOX_ELEMENT = Fragment2;
+export const Listbox = forwardRef(
+  ({
+    disabled = false,
+    invalid = false,
+    as = LISTBOX_ELEMENT,
+    value,
+    defaultValue,
+    multiple,
+    hideSelected,
+    items,
+    placeholder,
+    name,
+    className,
+    showFilter,
+    onChange,
+    children,
+    ...rest
+  }, ref) => {
+    let theme = useListboxTheme({ disabled, invalid });
+    let formId = useFormId();
+    let field = useField();
+    let fieldName = useFieldName();
+    let [query, setQuery] = useState("");
+    let inputRef = useRef(null);
+    let handleChange = useCallback(
+      (selectedValue) => {
+        onChange?.(selectedValue);
+      },
+      [onChange]
+    );
+    let handleTab = useCallback(
+      (event) => {
+        if (!showFilter) {
+          return;
+        }
+        if (event.key === "Tab" && document.activeElement !== inputRef.current) {
+          event.preventDefault();
+          inputRef.current?.focus();
+        }
+      },
+      [showFilter]
+    );
+    let handleQueryChange = useCallback((event) => {
+      setQuery(event.target.value);
+    }, []);
+    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,
+      invalid,
+      form: formId,
+      onChange: handleChange,
+      ...rest
+    };
+    return /* @__PURE__ */ jsxs(HeadlessListbox, { ...props, children: [
+      /* @__PURE__ */ jsx(
+        HeadlessListboxButton,
+        {
+          className: theme.root("relative", className),
+          "data-multiple": multiple ? true : null,
+          "data-component": "listbox",
+          children: ({ value: selectedValue }) => {
+            if (!items && !multiple) {
+              let selectedItem2;
+              Children.forEach(filteredChildren, (child) => {
+                if (!child) {
+                  return;
+                }
+                if (typeof child === "object" && "props" in child && typeof child.props === "object" && child.props.value === selectedValue) {
+                  selectedItem2 = child.props.children;
+                }
+              });
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: theme.label("overflow-hidden text-ellipsis whitespace-nowrap"), children: selectedItem2 ?? placeholder ?? null }),
+                /* @__PURE__ */ jsx("span", { className: theme.icon("absolute"), children: /* @__PURE__ */ jsx(Icon, { name: "ChevronUpDown" }) })
+              ] });
+            } else if (!items && multiple) {
+              let itemsHidden = false;
+              let selectedItems = [];
+              Children.forEach(filteredChildren, (child) => {
+                if (!child) {
+                  return;
+                }
+                if (typeof child === "object" && "props" in child && typeof child.props === "object" && selectedValue.includes(
+                  child.props.value
+                )) {
+                  selectedItems.push(
+                    child.props.children
+                  );
+                }
+              });
+              if (hideSelected && selectedItems.length > hideSelected.limit) {
+                selectedItems = selectedItems.slice(0, hideSelected.limit);
+                itemsHidden = true;
+              }
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                selectedItems.length ? selectedItems.map((selectedItem2, index) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: theme.label("overflow-hidden text-ellipsis whitespace-nowrap"),
+                    children: selectedItem2
+                  },
+                  index
+                )) : placeholder ?? null,
+                itemsHidden ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-ellipsis": true,
+                    className: theme.label("overflow-hidden text-ellipsis whitespace-nowrap"),
+                    children: hideSelected?.message ?? "\u2026"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("span", { className: theme.icon("absolute"), children: /* @__PURE__ */ jsx(Icon, { name: "ChevronUpDown" }) })
+              ] });
+            } else if (items && multiple) {
+              let itemsHidden = false;
+              let selectedItems = filteredItems?.filter(
+                (item) => selectedValue?.includes(item.value)
+              ) ?? [];
+              if (hideSelected && selectedItems.length > hideSelected.limit) {
+                selectedItems = selectedItems.slice(0, hideSelected.limit);
+                itemsHidden = true;
+              }
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                selectedItems.length ? selectedItems.map((selectedItem2, index) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: theme.label("overflow-hidden text-ellipsis whitespace-nowrap"),
+                    children: selectedItem2.label
+                  },
+                  index
+                )) : placeholder ?? null,
+                itemsHidden ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-ellipsis": true,
+                    className: theme.label("overflow-hidden text-ellipsis whitespace-nowrap"),
+                    children: hideSelected?.message ?? "\u2026"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("span", { className: theme.icon("absolute"), children: /* @__PURE__ */ jsx(Icon, { name: "ChevronUpDown" }) })
+              ] });
+            }
+            let selectedItem = filteredItems?.find((item) => item.value === selectedValue);
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: theme.label("overflow-hidden text-ellipsis whitespace-nowrap"), children: selectedItem?.label ?? placeholder ?? null }),
+              /* @__PURE__ */ jsx("span", { className: theme.icon("absolute"), children: /* @__PURE__ */ jsx(Icon, { name: "ChevronUpDown" }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        HeadlessListboxOptions,
+        {
+          className: theme.options(),
+          anchor: "bottom start",
+          onKeyDown: handleTab,
+          children: [
+            showFilter ? /* @__PURE__ */ jsx("div", { className: theme.filter(), children: /* @__PURE__ */ jsx(Input, { ref: inputRef, showClearButton: true, value: query, onInput: handleQueryChange }) }) : null,
+            items ? filteredItems?.map((item) => /* @__PURE__ */ jsx(ListboxOption, { value: item.value, children: item.label }, item.label)) : filteredChildren
+          ]
+        }
+      )
+    ] });
+  }
+);
+export const listboxTheme = {
+  classNames: {
+    root: "flex w-full min-w-32 items-center rounded-2 border-2 border-gray-100 hover:border-gray-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm",
+    label: "flex gap-x-2",
+    icon: "text-gray-500 size-5 top-1.5 right-1.5 cursor-pointer",
+    options: "flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-gray-100 hover:border-gray-200 bg-white text-left w-[var(--button-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors",
+    filter: "[&>[data-component=input]]:rounded"
+  },
+  variants: {
+    disabled: {
+      true: {
+        root: "border-gray-100 text-gray-200 cursor-not-allowed",
+        label: "",
+        icon: "text-gray-200",
+        options: "border-gray-100",
+        filter: ""
+      },
+      false: {
+        root: "",
+        label: "",
+        icon: "",
+        options: "",
+        filter: ""
+      }
+    },
+    invalid: {
+      true: {
+        root: "",
+        label: "",
+        icon: "",
+        options: "",
+        filter: ""
+      },
+      false: {
+        root: "",
+        label: "",
+        icon: "",
+        options: "",
+        filter: ""
+      }
+    }
+  }
+};
+//# sourceMappingURL=Listbox.js.map

package/build/components/Listbox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/Listbox.tsx"],
+  "sourcesContent": ["// TODO: fix somehow\n/* eslint-disable complexity -- TODO */\nimport {\n  Listbox as HeadlessListbox,\n  ListboxButton as HeadlessListboxButton,\n  ListboxOptions as HeadlessListboxOptions,\n  type ListboxProps as HeadlessListboxProps,\n} from '@headlessui/react';\nimport {\n  type ChangeEvent,\n  Children,\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  Fragment,\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type ComponentProps,\n  type ComponentTheme,\n  createComponentTheme,\n} from '../theme/internals.js';\nimport {Icon} from './Icon.js';\nimport {Input} from './Input.js';\nimport {forwardRef, useFormId} from './internals.js';\nimport {ListboxOption} from './ListboxOption.js';\nimport {useField} from './useField.js';\nimport {useFieldName} from './useFieldName.js';\n\nexport const useListboxTheme = createComponentTheme('Listbox', {\n  variants: {disabled: [true, false], invalid: [true, false]},\n  elements: ['root', 'label', 'icon', 'options', 'filter'],\n});\n\nconst LISTBOX_ELEMENT = Fragment;\n\nexport type ListboxItem<V> = {\n  value: V;\n  label: string;\n};\n\nexport type ListboxProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = PropsWithChildren<\n  ComponentProps<typeof useListboxTheme> &\n    ComponentPropsWithoutRef<T> &\n    (\n      | {\n          as?: T | undefined;\n          value?: V | undefined;\n          defaultValue?: V | undefined;\n          multiple?: false | undefined;\n          hideSelected?: never; // must be here so the type of props is correct\n          items?: Array<ListboxItem<V>> | undefined;\n          placeholder?: string;\n          name?: string | undefined;\n          className?: string | undefined;\n          showFilter?: boolean | undefined;\n          onChange?: (selectedValue: V) => void;\n        }\n      | {\n          as?: T | undefined;\n          value?: V[] | undefined;\n          defaultValue?: V[] | undefined;\n          multiple: true;\n          hideSelected?:\n            | {\n                limit: number;\n                message?: string | undefined;\n              }\n            | undefined;\n          items?: Array<ListboxItem<V>> | undefined;\n          placeholder?: string;\n          name?: string | undefined;\n          className?: string | undefined;\n          showFilter?: boolean | undefined;\n          onChange?: (selectedValue: V[]) => void;\n        }\n    )\n>;\n\nexport const Listbox = forwardRef(\n  <T extends ElementType = typeof LISTBOX_ELEMENT, V extends boolean | number | string = string>(\n    {\n      disabled = false,\n      invalid = false,\n      as = LISTBOX_ELEMENT as unknown as T,\n      value,\n      defaultValue,\n      multiple,\n      hideSelected,\n      items,\n      placeholder,\n      name,\n      className,\n      showFilter,\n      onChange,\n      children,\n      ...rest\n    }: ListboxProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useListboxTheme({disabled, invalid});\n    let formId = useFormId();\n    let field = useField();\n    let fieldName = useFieldName();\n    let [query, setQuery] = useState('');\n    let inputRef = useRef<HTMLElement>(null);\n\n    let handleChange = useCallback(\n      (selectedValue: V) => {\n        onChange?.(selectedValue as V & V[]);\n      },\n      [onChange],\n    );\n\n    // hacky solution so the user is able to focus inout used for filtering\n    let handleTab = useCallback(\n      (event: KeyboardEvent) => {\n        if (!showFilter) {\n          return;\n        }\n\n        if (event.key === 'Tab' && document.activeElement !== inputRef.current) {\n          event.preventDefault();\n          inputRef.current?.focus();\n        }\n      },\n      [showFilter],\n    );\n\n    let handleQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n      setQuery(event.target.value);\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\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\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessListboxProps<any, any> = {\n      as,\n      ref,\n      name: field?.name ?? fieldName ?? name,\n      value: value ?? null,\n      defaultValue,\n      multiple,\n      disabled,\n      invalid,\n      form: formId,\n      onChange: handleChange,\n      ...rest,\n    };\n\n    return (\n      <HeadlessListbox {...props}>\n        <HeadlessListboxButton\n          className={theme.root('relative', className)}\n          data-multiple={multiple ? true : null}\n          data-component=\"listbox\"\n        >\n          {({value: selectedValue}) => {\n            if (!items && !multiple) {\n              let selectedItem: ReactNode;\n\n              Children.forEach(filteredChildren, (child) => {\n                if (!child) {\n                  return;\n                }\n\n                if (\n                  typeof child === 'object' &&\n                  'props' in child &&\n                  typeof child.props === 'object' &&\n                  (child.props as Record<string, unknown>).value === selectedValue\n                ) {\n                  selectedItem = (child.props as Record<string, unknown>).children as ReactNode;\n                }\n              });\n\n              return (\n                <>\n                  <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n                    {selectedItem ?? placeholder ?? null}\n                  </span>\n                  <span className={theme.icon('absolute')}>\n                    <Icon name=\"ChevronUpDown\" />\n                  </span>\n                </>\n              );\n            } else if (!items && multiple) {\n              let itemsHidden = false;\n              let selectedItems: ReactNode[] = [];\n\n              Children.forEach(filteredChildren, (child) => {\n                if (!child) {\n                  return;\n                }\n\n                if (\n                  typeof child === 'object' &&\n                  'props' in child &&\n                  typeof child.props === 'object' &&\n                  (selectedValue as unknown[]).includes(\n                    (child.props as Record<string, unknown>).value,\n                  )\n                ) {\n                  selectedItems.push(\n                    (child.props as Record<string, unknown>).children as ReactNode,\n                  );\n                }\n              });\n\n              if (hideSelected && selectedItems.length > hideSelected.limit) {\n                selectedItems = selectedItems.slice(0, hideSelected.limit);\n                itemsHidden = true;\n              }\n\n              return (\n                <>\n                  {selectedItems.length ?\n                    selectedItems.map((selectedItem, index) => (\n                      <span\n                        // eslint-disable-next-line react/no-array-index-key -- needed\n                        key={index}\n                        className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                      >\n                        {selectedItem}\n                      </span>\n                    ))\n                  : placeholder ?? null}\n                  {itemsHidden ?\n                    <span\n                      data-ellipsis\n                      className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                    >\n                      {hideSelected?.message ?? '\u2026'}\n                    </span>\n                  : null}\n                  <span className={theme.icon('absolute')}>\n                    <Icon name=\"ChevronUpDown\" />\n                  </span>\n                </>\n              );\n            } else if (items && multiple) {\n              let itemsHidden = false;\n              let selectedItems =\n                filteredItems?.filter((item) =>\n                  (selectedValue as unknown[] | undefined)?.includes(item.value),\n                ) ?? [];\n\n              if (hideSelected && selectedItems.length > hideSelected.limit) {\n                selectedItems = selectedItems.slice(0, hideSelected.limit);\n                itemsHidden = true;\n              }\n\n              return (\n                <>\n                  {selectedItems.length ?\n                    selectedItems.map((selectedItem, index) => (\n                      <span\n                        // eslint-disable-next-line react/no-array-index-key -- needed\n                        key={index}\n                        className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                      >\n                        {selectedItem.label}\n                      </span>\n                    ))\n                  : placeholder ?? null}\n                  {itemsHidden ?\n                    <span\n                      data-ellipsis\n                      className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}\n                    >\n                      {hideSelected?.message ?? '\u2026'}\n                    </span>\n                  : null}\n                  <span className={theme.icon('absolute')}>\n                    <Icon name=\"ChevronUpDown\" />\n                  </span>\n                </>\n              );\n            }\n\n            let selectedItem = filteredItems?.find((item) => item.value === selectedValue);\n\n            return (\n              <>\n                <span className={theme.label('overflow-hidden text-ellipsis whitespace-nowrap')}>\n                  {selectedItem?.label ?? placeholder ?? null}\n                </span>\n                <span className={theme.icon('absolute')}>\n                  <Icon name=\"ChevronUpDown\" />\n                </span>\n              </>\n            );\n          }}\n        </HeadlessListboxButton>\n        <HeadlessListboxOptions\n          className={theme.options()}\n          anchor=\"bottom start\"\n          onKeyDown={handleTab}\n        >\n          {showFilter ?\n            <div className={theme.filter()}>\n              <Input ref={inputRef} showClearButton value={query} onInput={handleQueryChange} />\n            </div>\n          : null}\n          {items ?\n            filteredItems?.map((item) => (\n              <ListboxOption key={item.label} value={item.value}>\n                {item.label}\n              </ListboxOption>\n            ))\n          : filteredChildren}\n        </HeadlessListboxOptions>\n      </HeadlessListbox>\n    );\n  },\n);\n\nexport const listboxTheme: ComponentTheme<typeof useListboxTheme> = {\n  classNames: {\n    root: 'flex w-full min-w-32 items-center rounded-2 border-2 border-gray-100 hover:border-gray-200 bg-white px-2.5 h-9 pr-9 gap-x-2 transition-colors shadow-inner font-sans text-sm',\n    label: 'flex gap-x-2',\n    icon: 'text-gray-500 size-5 top-1.5 right-1.5 cursor-pointer',\n    options:\n      'flex flex-col gap-y-1 shadow p-1 z-30 rounded-2 border-2 border-gray-100 hover:border-gray-200 bg-white text-left w-[var(--button-width)] [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)] [scrollbar-width:thin] empty:invisible transition-colors',\n    filter: '[&>[data-component=input]]:rounded',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'border-gray-100 text-gray-200 cursor-not-allowed',\n        label: '',\n        icon: 'text-gray-200',\n        options: 'border-gray-100',\n        filter: '',\n      },\n      false: {\n        root: '',\n        label: '',\n        icon: '',\n        options: '',\n        filter: '',\n      },\n    },\n    invalid: {\n      true: {\n        root: '',\n        label: '',\n        icon: '',\n        options: '',\n        filter: '',\n      },\n      false: {\n        root: '',\n        label: '',\n        icon: '',\n        options: '',\n        filter: '',\n      },\n    },\n  },\n};\n"],
+  "mappings": "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",
+  "names": ["Fragment", "selectedItem"]
+}

package/build/components/ListboxOption.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 useListboxOptionTheme: ((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: "ListboxOption";
+    themeDefinition: {
+        readonly variants: {
+            readonly disabled: [true, false];
+        };
+        readonly elements: ["root", "icon"];
+    };
+};
+export type ListboxOptionProps<T extends ElementType, V extends boolean | number | string> = PropsWithChildren<ComponentProps<typeof useListboxOptionTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    value: V;
+    className?: string;
+}>;
+export declare const ListboxOption: <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 listboxOptionTheme: ComponentTheme<typeof useListboxOptionTheme>;

package/build/components/ListboxOption.js

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

package/build/components/ListboxOption.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../source/components/ListboxOption.tsx"],
+  "sourcesContent": ["import {\n  ListboxOption as HeadlessListboxOption,\n  type ListboxOptionProps as HeadlessListboxOptionProps,\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 useListboxOptionTheme = createComponentTheme('ListboxOption', {\n  variants: {disabled: [true, false]},\n  elements: ['root', 'icon'],\n});\n\nconst LISTBOX_OPTION_ELEMENT = 'div';\n\nexport type ListboxOptionProps<\n  T extends ElementType,\n  V extends boolean | number | string,\n> = PropsWithChildren<\n  ComponentProps<typeof useListboxOptionTheme> &\n    ComponentPropsWithoutRef<T> & {\n      as?: T | undefined;\n      value: V;\n      className?: string;\n    }\n>;\n\nexport const ListboxOption = 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    }: ListboxOptionProps<T, V>,\n    ref: Ref<HTMLElement>,\n  ) => {\n    let theme = useListboxOptionTheme({disabled});\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n    let props: HeadlessListboxOptionProps<any, any> = {\n      as,\n      ref,\n      value,\n      disabled,\n      className: theme.root('cursor-pointer', className),\n      'data-component': 'listbox-option',\n      ...rest,\n    };\n\n    return (\n      <HeadlessListboxOption {...props}>\n        <span className={theme.icon('absolute')}>\n          <Icon name=\"Check\" />\n        </span>\n        {children}\n      </HeadlessListboxOption>\n    );\n  },\n);\n\nexport const listboxOptionTheme: ComponentTheme<typeof useListboxOptionTheme> = {\n  classNames: {\n    root: 'relative group/option p-1 pr-6 rounded-1 hover:bg-gray-50 data-[active]:bg-gray-50 text-sm transition-colors',\n    icon: 'hidden group-data-[selected]/option:block right-1 top-1 text-gray-500',\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'text-gray-200 cursor-not-allowed',\n        icon: 'text-gray-200',\n      },\n      false: {\n        root: '',\n        icon: '',\n      },\n    },\n  },\n};\n"],
+  "mappings": ";AAmEM,SAEI,KAFJ;AAnEN;AAAA,EACE,iBAAiB;AAAA,OAEZ;AAQP;AAAA,EAGE;AAAA,OACK;AACP,SAAQ,YAAW;AACnB,SAAQ,kBAAiB;AAElB,aAAM,wBAAwB,qBAAqB,iBAAiB;AAAA,EACzE,UAAU,EAAC,UAAU,CAAC,MAAM,KAAK,EAAC;AAAA,EAClC,UAAU,CAAC,QAAQ,MAAM;AAC3B,CAAC;AAED,MAAM,yBAAyB;AAcxB,aAAM,gBAAgB;AAAA,EAC3B,CAIE;AAAA,IACE,WAAW;AAAA,IACX,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,QAAI,QAAQ,sBAAsB,EAAC,SAAQ,CAAC;AAG5C,QAAI,QAA8C;AAAA,MAChD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,MAAM,KAAK,kBAAkB,SAAS;AAAA,MACjD,kBAAkB;AAAA,MAClB,GAAG;AAAA,IACL;AAEA,WACE,qBAAC,yBAAuB,GAAG,OACzB;AAAA,0BAAC,UAAK,WAAW,MAAM,KAAK,UAAU,GACpC,8BAAC,QAAK,MAAK,SAAQ,GACrB;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AACF;AAEO,aAAM,qBAAmE;AAAA,EAC9E,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/Menu.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithoutRef, type ElementType, type PropsWithChildren, type Ref } from 'react';
+import { type ComponentProps, type ComponentTheme } 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<T extends ElementType> = PropsWithChildren<ComponentProps<typeof useMenuTheme> & ComponentPropsWithoutRef<T> & {
+    as?: T | undefined;
+    className?: string;
+}>;
+export declare const Menu: <T extends ElementType = import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>>(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 menuTheme: ComponentTheme<typeof useMenuTheme>;

package/build/components/Menu.js

@@ -0,0 +1,29 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { Menu as HeadlessMenu } from "@headlessui/react";
+import {
+  Fragment
+} from "react";
+import {
+  createComponentTheme
+} from "../theme/internals.js";
+import { filterProps, forwardRef } from "./internals.js";
+export const useMenuTheme = createComponentTheme("Menu");
+const MENU_ELEMENT = Fragment;
+export const Menu = forwardRef(
+  ({ as = MENU_ELEMENT, className, children, ...rest }, ref) => {
+    let theme = useMenuTheme();
+    let props = filterProps({
+      as,
+      ref,
+      className: theme(null, className),
+      "data-component": "menu",
+      ...rest
+    });
+    return /* @__PURE__ */ jsx(HeadlessMenu, { ...props, children });
+  }
+);
+export const menuTheme = {
+  className: null
+};
+//# sourceMappingURL=Menu.js.map