@jakubmazanec/ui 0.1.0-unstable.081bdf1

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-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",
+    icon: "text-gray-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-gray-100 hover:border-gray-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-gray-100 text-gray-200 cursor-not-allowed",
+        input: "",
+        icon: "text-gray-200",
+        options: "border-gray-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-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    icon: 'text-gray-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-gray-100 hover:border-gray-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-gray-100 text-gray-200 cursor-not-allowed',\n        input: '',\n        icon: 'text-gray-200',\n        options: 'border-gray-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-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=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-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,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/DataTable.d.ts

@@ -0,0 +1,70 @@
+import { type ColumnDef, type RowData } from '@tanstack/react-table';
+import { z } from 'zod';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        filterVariant?: 'range' | 'select' | 'text';
+    }
+}
+export declare const dataTablePaginationSchema: z.ZodObject<{
+    /** Page number, starts with 1. */
+    page: z.ZodNumber;
+    pageSize: z.ZodUnion<[z.ZodLiteral<10>, z.ZodLiteral<25>, z.ZodLiteral<50>, z.ZodLiteral<75>, z.ZodLiteral<100>]>;
+    pageCount: z.ZodNumber;
+}, "strip", z.ZodTypeAny, {
+    page: number;
+    pageCount: number;
+    pageSize: 10 | 25 | 50 | 75 | 100;
+}, {
+    page: number;
+    pageCount: number;
+    pageSize: 10 | 25 | 50 | 75 | 100;
+}>;
+export type DataTablePagination = z.infer<typeof dataTablePaginationSchema>;
+export declare const dataTableSortingSchema: z.ZodUnion<[z.ZodLiteral<false>, z.ZodObject<{
+    column: z.ZodString;
+    direction: z.ZodEnum<["ascending", "descending"]>;
+}, "strip", z.ZodTypeAny, {
+    direction: "ascending" | "descending";
+    column: string;
+}, {
+    direction: "ascending" | "descending";
+    column: string;
+}>]>;
+export type DataTableSorting = z.infer<typeof dataTableSortingSchema>;
+export declare const dataTableFiltersSchema: z.ZodUnion<[z.ZodLiteral<false>, z.ZodArray<z.ZodObject<{
+    column: z.ZodString;
+    filter: z.ZodUnion<[z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodTuple<[z.ZodOptional<z.ZodNullable<z.ZodNumber>>, z.ZodOptional<z.ZodNullable<z.ZodNumber>>], null>]>;
+}, "strip", z.ZodTypeAny, {
+    filter: string | number | boolean | [number | null | undefined, number | null | undefined];
+    column: string;
+}, {
+    filter: string | number | boolean | [number | null | undefined, number | null | undefined];
+    column: string;
+}>, "many">]>;
+export type DataTableFilters = z.infer<typeof dataTableFiltersSchema>;
+export declare const dataTableFacetingSchema: z.ZodRecord<z.ZodString, z.ZodObject<{
+    values: z.ZodOptional<z.ZodArray<z.ZodUnknown, "many">>;
+    min: z.ZodOptional<z.ZodUnknown>;
+    max: z.ZodOptional<z.ZodUnknown>;
+}, "strip", z.ZodTypeAny, {
+    values?: unknown[] | undefined;
+    max?: unknown;
+    min?: unknown;
+}, {
+    values?: unknown[] | undefined;
+    max?: unknown;
+    min?: unknown;
+}>>;
+export type DataTableFaceting = z.infer<typeof dataTableFacetingSchema>;
+export type DataTableProps<D, C> = {
+    data: D[];
+    columns: C;
+    pagination?: DataTablePagination | undefined;
+    onPagination?: ((pagination: Pick<DataTablePagination, 'page'> | Pick<DataTablePagination, 'pageSize'>) => void) | undefined;
+    sorting?: DataTableSorting | undefined;
+    onSorting?: ((sorting: DataTableSorting) => void) | undefined;
+    filters?: DataTableFilters | undefined;
+    onFiltering?: ((filters: DataTableFilters) => void) | undefined;
+    faceting?: DataTableFaceting | undefined;
+};
+export declare function DataTable<D extends RowData, C extends Array<ColumnDef<D>>>({ data, columns, pagination: controlledPagination, onPagination, sorting: controlledSorting, onSorting, filters: controlledFilters, onFiltering, faceting, }: DataTableProps<D, C>): import("react/jsx-runtime").JSX.Element;