@oneplatformdev/ui 0.1.99-beta.198 → 0.1.99-beta.199

package/Combobox/Combobox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Combobox } from './Combobox';\r\nimport type {\r\n  ComboboxCallbackStateParams,\r\n  ComboboxOption,\r\n  ComboboxProps,\r\n} from './Combobox.types';\r\n\r\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\r\n\r\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\r\n  const res: ComboboxOption[] = [];\r\n  const walk = (list?: ComboboxOption[]) => {\r\n    if (!list?.length) return;\r\n    for (const n of list) {\r\n      res.push(n);\r\n      if (n.items?.length) walk(n.items);\r\n    }\r\n  };\r\n  walk(nodes);\r\n  return res;\r\n};\r\n\r\nconst createFetchOptions =\r\n  (all: ComboboxOption[], delayMs = 350): ComboboxProps['fetchOptions'] =>\r\n    async (search?: string) => {\r\n      await sleep(delayMs);\r\n\r\n      const q = (search ?? '').trim().toLowerCase();\r\n      if (!q) return all;\r\n\r\n      // simple \"contains\" search across flattened options; then return top-level filtered\r\n      // (enough for Storybook demos; your real API can do better)\r\n      const allFlat = flatten(all);\r\n      const matchedValues = new Set(\r\n        allFlat\r\n          .filter((o) => String(o.label).toLowerCase().includes(q))\r\n          .map((o) => String(o.value)),\r\n      );\r\n\r\n      const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\r\n        return list\r\n          .map((n) => {\r\n            const items = n.items?.length ? filterTree(n.items) : undefined;\r\n            const selfMatch =\r\n              matchedValues.has(String(n.value)) ||\r\n              String(n.label).toLowerCase().includes(q);\r\n\r\n            if (!selfMatch && !items?.length) return null;\r\n            return { ...n, items };\r\n          })\r\n          .filter(Boolean) as ComboboxOption[];\r\n      };\r\n\r\n      return filterTree(all);\r\n    };\r\n\r\nconst BASE_OPTIONS: ComboboxOption[] = [\r\n  { value: 'ua', label: 'Ukraine' },\r\n  { value: 'pl', label: 'Poland' },\r\n  { value: 'de', label: 'Germany' },\r\n  { value: 'fr', label: 'France' },\r\n  { value: 'es', label: 'Spain' },\r\n  { value: 'it', label: 'Italy' },\r\n];\r\n\r\nconst NESTED_OPTIONS: ComboboxOption[] = [\r\n  {\r\n    value: 'europe',\r\n    label: 'Europe',\r\n    items: [\r\n      { value: 'ua', label: 'Ukraine' },\r\n      { value: 'pl', label: 'Poland' },\r\n      { value: 'de', label: 'Germany' },\r\n      { value: 'fr', label: 'France' },\r\n    ],\r\n  },\r\n  {\r\n    value: 'north-america',\r\n    label: 'North America',\r\n    items: [\r\n      { value: 'us', label: 'United States' },\r\n      { value: 'ca', label: 'Canada' },\r\n      { value: 'mx', label: 'Mexico' },\r\n    ],\r\n  },\r\n];\r\n\r\ntype ControlledProps = Omit<ComboboxProps, 'value' | 'onChange'> & {\r\n  initialValue?: ComboboxProps['value'];\r\n};\r\n\r\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps) {\r\n  const [value, setValue] = useState<ComboboxProps['value']>(initialValue);\r\n\r\n  // keep stable reference if someone passes inline fetchOptions\r\n  const fetchOptions = useMemo(\r\n    () => args.fetchOptions,\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [],\r\n  );\r\n\r\n  return (\r\n    <div className=\"max-w-sm\">\r\n      <Combobox {...args} value={value} onChange={setValue} fetchOptions={fetchOptions} />\r\n      <div className=\"mt-3 text-xs text-muted-foreground\">\r\n        value: <span className=\"font-mono\">{String(value || '')}</span>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst meta = {\r\n  title: 'Combobox',\r\n  component: Combobox,\r\n  parameters: {\r\n    layout: 'centered',\r\n  },\r\n  args: {\r\n    placeholder: 'Select option...',\r\n    searchLabel: 'Type to search...',\r\n    emptyLabel: 'No options',\r\n    disabled: false,\r\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\r\n  },\r\n  argTypes: {\r\n    fetchOptions: { control: false },\r\n    onChange: { control: false },\r\n    onMount: { control: false },\r\n    emptyAction: { control: false },\r\n    commandInputAction: { control: false },\r\n    listHeadAction: { control: false },\r\n    options: { control: false },\r\n    value: { control: false },\r\n  },\r\n  decorators: [\r\n    (Story) => (\r\n      <div className=\"p-6 w-[420px]\">\r\n        <Story />\r\n      </div>\r\n    ),\r\n  ],\r\n} satisfies Meta<typeof Combobox>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\n/** 1) Default (async options) */\r\nexport const Default: Story = {\r\n  render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 2) With initial selected value */\r\nexport const WithValueSelected: Story = {\r\n  render: (args) => <ControlledCombobox {...args} initialValue=\"pl\" />,\r\n};\r\n\r\n/** 3) Disabled */\r\nexport const Disabled: Story = {\r\n  args: { disabled: true },\r\n  render: (args) => <ControlledCombobox {...args} initialValue=\"de\" />,\r\n};\r\n\r\n/** 4) Static options via `options` prop (no async needed, but fetchOptions still required) */\r\nexport const WithStaticOptionsProp: Story = {\r\n  args: {\r\n    options: BASE_OPTIONS,\r\n    fetchOptions: async () => BASE_OPTIONS,\r\n  },\r\n  render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 5) Slow fetch to show loading state on open/search */\r\nexport const SlowFetchLoading: Story = {\r\n  args: {\r\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 1200),\r\n  },\r\n  render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 6) Empty state with action (search something like \"zzz\") */\r\nexport const EmptyStateWithAction: Story = {\r\n  args: {\r\n    emptyLabel: 'Nothing found',\r\n    emptyAction: (st: ComboboxCallbackStateParams) => {\r\n      const canCreate = Boolean(st.search?.trim());\r\n      return (\r\n        <button\r\n          type=\"button\"\r\n          className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\r\n          disabled={!canCreate}\r\n          onClick={() => {\r\n            const v = st.search.trim();\r\n            const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\r\n            st.setOptions([next]);\r\n            st.setLoading(false);\r\n          }}\r\n        >\r\n          Create option\r\n        </button>\r\n      );\r\n    },\r\n  },\r\n  render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 7) commandInputAction (helper row under input) */\r\nexport const WithCommandInputAction: Story = {\r\n  args: {\r\n    commandInputAction: (st: ComboboxCallbackStateParams) => (\r\n      <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\r\n        <span>\r\n          results: <span className=\"font-mono\">{st.options.length}</span>\r\n        </span>\r\n        <button\r\n          type=\"button\"\r\n          className=\"underline\"\r\n          onClick={() => {\r\n            st.setSearch('');\r\n            st.setLoading(false);\r\n          }}\r\n        >\r\n          Clear search\r\n        </button>\r\n      </div>\r\n    ),\r\n  },\r\n  render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 8) listHeadAction (top action inside list) */\r\nexport const WithListHeadAction: Story = {\r\n  args: {\r\n    listHeadAction: (st: ComboboxCallbackStateParams) => (\r\n      <button\r\n        type=\"button\"\r\n        className=\"w-full text-left px-3 py-2 text-sm\"\r\n        onClick={() => {\r\n          st.setSearch('');\r\n          st.setOpen(false);\r\n        }}\r\n      >\r\n        Close list\r\n      </button>\r\n    ),\r\n  },\r\n  render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 9) listHeadAction (footer action outside of list) */\r\nexport const WithListFooterAction: Story = {\r\n  args: {\r\n    listFooterAction: (st: ComboboxCallbackStateParams) => (\r\n      <button\r\n        type=\"button\"\r\n        className=\"w-full text-left px-3 py-2 text-sm\"\r\n        onClick={() => {\r\n          st.setSearch('');\r\n          st.setOpen(false);\r\n        }}\r\n      >\r\n        Add new option\r\n      </button>\r\n    ),\r\n  },\r\n  render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 10) Nested options tree */\r\nexport const NestedOptions: Story = {\r\n  args: {\r\n    fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\r\n    defaultNodeDisabled: false,\r\n    defaultNodeMatched: false,\r\n    defaultNodeMuted: true,\r\n    defaultNodeInteractive: false,\r\n  },\r\n  render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 11) onMount initial loading (simulate prefetch on mount) */\r\nexport const OnMountPrefetch: Story = {\r\n  args: {\r\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\r\n    onMount: async (st: ComboboxCallbackStateParams) => {\r\n      await sleep(900);\r\n      st.setOptions(BASE_OPTIONS);\r\n      st.setLoading(false);\r\n    },\r\n  },\r\n  render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","BASE_OPTIONS","NESTED_OPTIONS","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","useMemo","jsxs","jsx","Combobox","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","EmptyStateWithAction","st","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","OnMountPrefetch"],"mappings":"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"}
+{"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Combobox } from './Combobox';\nimport type {\n  ComboboxCallbackStateParams,\n  ComboboxOption,\n  ComboboxProps,\n} from './Combobox.types';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\n  const res: ComboboxOption[] = [];\n  const walk = (list?: ComboboxOption[]) => {\n    if (!list?.length) return;\n    for (const n of list) {\n      res.push(n);\n      if (n.items?.length) walk(n.items);\n    }\n  };\n  walk(nodes);\n  return res;\n};\n\nconst createFetchOptions =\n  (all: ComboboxOption[], delayMs = 350): ComboboxProps['fetchOptions'] =>\n    async (search?: string) => {\n      await sleep(delayMs);\n\n      const q = (search ?? '').trim().toLowerCase();\n      if (!q) return all;\n\n      // simple \"contains\" search across flattened options; then return top-level filtered\n      // (enough for Storybook demos; your real API can do better)\n      const allFlat = flatten(all);\n      const matchedValues = new Set(\n        allFlat\n          .filter((o) => String(o.label).toLowerCase().includes(q))\n          .map((o) => String(o.value)),\n      );\n\n      const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\n        return list\n          .map((n) => {\n            const items = n.items?.length ? filterTree(n.items) : undefined;\n            const selfMatch =\n              matchedValues.has(String(n.value)) ||\n              String(n.label).toLowerCase().includes(q);\n\n            if (!selfMatch && !items?.length) return null;\n            return { ...n, items };\n          })\n          .filter(Boolean) as ComboboxOption[];\n      };\n\n      return filterTree(all);\n    };\n\nconst BASE_OPTIONS: ComboboxOption[] = [\n  { value: 'ua', label: 'Ukraine' },\n  { value: 'pl', label: 'Poland' },\n  { value: 'de', label: 'Germany' },\n  { value: 'fr', label: 'France' },\n  { value: 'es', label: 'Spain' },\n  { value: 'it', label: 'Italy' },\n];\n\nconst NESTED_OPTIONS: ComboboxOption[] = [\n  {\n    value: 'europe',\n    label: 'Europe',\n    items: [\n      { value: 'ua', label: 'Ukraine' },\n      { value: 'pl', label: 'Poland' },\n      { value: 'de', label: 'Germany' },\n      { value: 'fr', label: 'France' },\n    ],\n  },\n  {\n    value: 'north-america',\n    label: 'North America',\n    items: [\n      { value: 'us', label: 'United States' },\n      { value: 'ca', label: 'Canada' },\n      { value: 'mx', label: 'Mexico' },\n    ],\n  },\n];\n\ntype ControlledProps = Omit<ComboboxProps, 'value' | 'onChange'> & {\n  initialValue?: ComboboxProps['value'];\n};\n\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps) {\n  const [value, setValue] = useState<ComboboxProps['value']>(initialValue);\n\n  // keep stable reference if someone passes inline fetchOptions\n  const fetchOptions = useMemo(\n    () => args.fetchOptions,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  return (\n    <div className=\"max-w-sm\">\n      <Combobox {...args} value={value} onChange={setValue} fetchOptions={fetchOptions} />\n      <div className=\"mt-3 text-xs text-muted-foreground\">\n        value: <span className=\"font-mono\">{String(value || '')}</span>\n      </div>\n    </div>\n  );\n}\n\nconst meta = {\n  title: 'Combobox',\n  component: Combobox,\n  parameters: {\n    layout: 'centered',\n  },\n  args: {\n    placeholder: 'Select option...',\n    searchLabel: 'Type to search...',\n    emptyLabel: 'No options',\n    disabled: false,\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n  },\n  argTypes: {\n    fetchOptions: { control: false },\n    onChange: { control: false },\n    onMount: { control: false },\n    emptyAction: { control: false },\n    commandInputAction: { control: false },\n    listHeadAction: { control: false },\n    options: { control: false },\n    value: { control: false },\n  },\n  decorators: [\n    (Story) => (\n      <div className=\"p-6 w-[420px]\">\n        <Story />\n      </div>\n    ),\n  ],\n} satisfies Meta<typeof Combobox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/** 1) Default (async options) */\nexport const Default: Story = {\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 2) With initial selected value */\nexport const WithValueSelected: Story = {\n  render: (args) => <ControlledCombobox {...args} initialValue=\"pl\" />,\n};\n\n/** 3) Disabled */\nexport const Disabled: Story = {\n  args: { disabled: true },\n  render: (args) => <ControlledCombobox {...args} initialValue=\"de\" />,\n};\n\n/** 4) Static options via `options` prop (no async needed, but fetchOptions still required) */\nexport const WithStaticOptionsProp: Story = {\n  args: {\n    options: BASE_OPTIONS,\n    fetchOptions: async () => BASE_OPTIONS,\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 5) Slow fetch to show loading state on open/search */\nexport const SlowFetchLoading: Story = {\n  args: {\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 1200),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 6) Empty state with action (search something like \"zzz\") */\nexport const EmptyStateWithAction: Story = {\n  args: {\n    emptyLabel: 'Nothing found',\n    emptyAction: (st: ComboboxCallbackStateParams) => {\n      const canCreate = Boolean(st.search?.trim());\n      return (\n        <button\n          type=\"button\"\n          className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\n          disabled={!canCreate}\n          onClick={() => {\n            const v = st.search.trim();\n            const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\n            st.setOptions([next]);\n            st.setLoading(false);\n          }}\n        >\n          Create option\n        </button>\n      );\n    },\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 7) commandInputAction (helper row under input) */\nexport const WithCommandInputAction: Story = {\n  args: {\n    commandInputAction: (st: ComboboxCallbackStateParams) => (\n      <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\n        <span>\n          results: <span className=\"font-mono\">{st.options.length}</span>\n        </span>\n        <button\n          type=\"button\"\n          className=\"underline\"\n          onClick={() => {\n            st.setSearch('');\n            st.setLoading(false);\n          }}\n        >\n          Clear search\n        </button>\n      </div>\n    ),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 8) listHeadAction (top action inside list) */\nexport const WithListHeadAction: Story = {\n  args: {\n    listHeadAction: (st: ComboboxCallbackStateParams) => (\n      <button\n        type=\"button\"\n        className=\"w-full text-left px-3 py-2 text-sm\"\n        onClick={() => {\n          st.setSearch('');\n          st.setOpen(false);\n        }}\n      >\n        Close list\n      </button>\n    ),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 9) listHeadAction (footer action outside of list) */\nexport const WithListFooterAction: Story = {\n  args: {\n    listFooterAction: (st: ComboboxCallbackStateParams) => (\n      <button\n        type=\"button\"\n        className=\"w-full text-left px-3 py-2 text-sm\"\n        onClick={() => {\n          st.setSearch('');\n          st.setOpen(false);\n        }}\n      >\n        Add new option\n      </button>\n    ),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 10) Nested options tree */\nexport const NestedOptions: Story = {\n  args: {\n    fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\n    defaultNodeDisabled: false,\n    defaultNodeMatched: false,\n    defaultNodeMuted: true,\n    defaultNodeInteractive: false,\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 11) onMount initial loading (simulate prefetch on mount) */\nexport const OnMountPrefetch: Story = {\n  args: {\n    fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n    onMount: async (st: ComboboxCallbackStateParams) => {\n      await sleep(900);\n      st.setOptions(BASE_OPTIONS);\n      st.setLoading(false);\n    },\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","BASE_OPTIONS","NESTED_OPTIONS","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","useMemo","jsxs","jsx","Combobox","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","EmptyStateWithAction","st","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","OnMountPrefetch"],"mappings":"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"}

package/Combobox/ComboboxOptionItem.js

@@ -1,7 +1,7 @@
 import { jsxs as v, jsx as r } from "react/jsx-runtime";
-import { Check as y } from "lucide-react";
+import { CommandItem as y } from "../Command/Command.js";
+import { Check as h } from "lucide-react";
 import { cn as p } from "@oneplatformdev/utils";
-import { CommandItem as h } from "../Command/Command.js";
 const N = 24, O = (f) => {
   const {
     children: u,
@@ -17,7 +17,7 @@ const N = 24, O = (f) => {
     defaultNodeInteractive: t
   } = f;
   return /* @__PURE__ */ v(
-    h,
+    y,
     {
       value: e.value,
       "data-matched": e.matched ?? !0,
@@ -55,7 +55,7 @@ const N = 24, O = (f) => {
           }
         ),
         /* @__PURE__ */ r(
-          y,
+          h,
           {
             className: p(
               "ml-auto",

package/Combobox/ComboboxOptionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\r\nimport { CommandItem } from '../Command';\r\nimport { IComboboxOptionsNodeProps } from './Combobox.types';\r\nimport { Check } from 'lucide-react';\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nconst DEEP_OFFSET = 24;\r\nexport const ComboboxOptionItem = <Data extends object>(\r\n  props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {\r\n    onCollapseToggle?: () => void;\r\n  }\r\n) => {\r\n  const {\r\n    children,\r\n    setOpen,\r\n    option,\r\n    onChangeOption,\r\n    value = '',\r\n    deep = 0,\r\n    onCollapseToggle,\r\n    defaultNodeDisabled,\r\n    defaultNodeMatched,\r\n    defaultNodeMuted,\r\n    defaultNodeInteractive,\r\n  } = props;\r\n  return (\r\n    <CommandItem\r\n      key={option.value}\r\n      value={option.value}\r\n      data-matched={option.matched ?? true}\r\n      onSelect={() => {\r\n        const interactive = typeof defaultNodeInteractive === \"function\"\r\n          ? defaultNodeInteractive(option, deep)\r\n          : defaultNodeInteractive ?? true\r\n        if(!interactive) return onCollapseToggle?.();\r\n\r\n        if (value === option.value) onChangeOption?.({ value: '', label: '' });\r\n        else onChangeOption?.(option);\r\n\r\n        setOpen(false);\r\n      }}\r\n      onClick={(e) => {\r\n        const interactive = typeof defaultNodeInteractive === \"function\"\r\n          ? defaultNodeInteractive(option, deep)\r\n          : defaultNodeInteractive ?? true\r\n\r\n        if(!interactive) {\r\n          e?.preventDefault();\r\n          e?.stopPropagation();\r\n        }\r\n      }}\r\n      className='py-0'\r\n      style={{\r\n        '--deep-space': `${deep * DEEP_OFFSET}px`,\r\n      } as CSSProperties}\r\n      disabled={typeof defaultNodeDisabled === \"function\"\r\n        ? defaultNodeDisabled(option, deep)\r\n        : defaultNodeDisabled ?? false}\r\n    >\r\n      <div\r\n        style={{ paddingLeft: 'var(--deep-space)' }}\r\n        className='relative min-w-10 h-10 aspect-square'\r\n      >\r\n        {children}\r\n      </div>\r\n      <span\r\n        className={cn(\r\n          'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2',\r\n          (() => {\r\n          return typeof defaultNodeMatched === \"function\"\r\n            ? defaultNodeMatched(option, deep)\r\n            : defaultNodeMatched ?? false\r\n          })() && 'font-bold',\r\n          (() => {\r\n            return typeof defaultNodeMuted === \"function\"\r\n              ? defaultNodeMuted(option, deep)\r\n              : defaultNodeMuted ?? false\r\n          })() && 'opacity-60',\r\n          (() => {\r\n            const res = typeof defaultNodeInteractive === \"function\"\r\n              ? defaultNodeInteractive(option, deep)\r\n              : defaultNodeInteractive ?? true\r\n            return !res;\r\n          })() && 'pointer-events-none',\r\n        )}\r\n      >\r\n        {option.label}\r\n      </span>\r\n      <Check\r\n        className={cn(\r\n          'ml-auto',\r\n          value === option.value ? 'opacity-100' : 'opacity-0'\r\n        )}\r\n      />\r\n    </CommandItem>\r\n  );\r\n}\r\n"],"names":["DEEP_OFFSET","ComboboxOptionItem","props","children","setOpen","option","onChangeOption","value","deep","onCollapseToggle","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","jsxs","CommandItem","e","jsx","cn","Check"],"mappings":";;;;AAMA,MAAMA,IAAc,IACPC,IAAqB,CAChCC,MAGG;AACH,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,kBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,IACEX;AACJ,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,OAAOV,EAAO;AAAA,MACd,gBAAcA,EAAO,WAAW;AAAA,MAChC,UAAU,MAAM;AAId,YAAG,EAHiB,OAAOQ,KAA2B,aAClDA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,IACb,QAAOJ,IAAA;AAExB,QAAIF,MAAUF,EAAO,QAAOC,IAAiB,EAAE,OAAO,IAAI,OAAO,IAAI,QAC/CD,CAAM,GAE5BD,EAAQ,EAAK;AAAA,MACf;AAAA,MACA,SAAS,CAACY,MAAM;AAKd,SAJoB,OAAOH,KAA2B,aAClDA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,QAG5BG,GAAG,eAAA,GACHA,GAAG,gBAAA;AAAA,MAEP;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,gBAAgB,GAAGR,IAAOR,CAAW;AAAA,MAAA;AAAA,MAEvC,UAAU,OAAOU,KAAwB,aACrCA,EAAoBL,GAAQG,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,aAAa,oBAAA;AAAA,YACtB,WAAU;AAAA,YAET,UAAAd;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,eAEO,OAAOP,KAAuB,aACjCA,EAAmBN,GAAQG,CAAI,IAC/BG,KAAsB,OAClB;AAAA,eAEC,OAAOC,KAAqB,aAC/BA,EAAiBP,GAAQG,CAAI,IAC7BI,KAAoB,OAClB;AAAA,cAKC,EAHK,OAAOC,KAA2B,aAC1CA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,OAExB;AAAA,YAAA;AAAA,YAGT,UAAAR,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAY;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAX,MAAUF,EAAO,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAlEKA,EAAO;AAAA,EAAA;AAqElB;"}
+{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\nimport { CommandItem } from '../Command';\nimport { IComboboxOptionsNodeProps } from './Combobox.types';\nimport { Check } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\n\nconst DEEP_OFFSET = 24;\nexport const ComboboxOptionItem = <Data extends object>(\n  props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {\n    onCollapseToggle?: () => void;\n  }\n) => {\n  const {\n    children,\n    setOpen,\n    option,\n    onChangeOption,\n    value = '',\n    deep = 0,\n    onCollapseToggle,\n    defaultNodeDisabled,\n    defaultNodeMatched,\n    defaultNodeMuted,\n    defaultNodeInteractive,\n  } = props;\n  return (\n    <CommandItem\n      key={option.value}\n      value={option.value}\n      data-matched={option.matched ?? true}\n      onSelect={() => {\n        const interactive = typeof defaultNodeInteractive === \"function\"\n          ? defaultNodeInteractive(option, deep)\n          : defaultNodeInteractive ?? true\n        if(!interactive) return onCollapseToggle?.();\n\n        if (value === option.value) onChangeOption?.({ value: '', label: '' });\n        else onChangeOption?.(option);\n\n        setOpen(false);\n      }}\n      onClick={(e) => {\n        const interactive = typeof defaultNodeInteractive === \"function\"\n          ? defaultNodeInteractive(option, deep)\n          : defaultNodeInteractive ?? true\n\n        if(!interactive) {\n          e?.preventDefault();\n          e?.stopPropagation();\n        }\n      }}\n      className='py-0'\n      style={{\n        '--deep-space': `${deep * DEEP_OFFSET}px`,\n      } as CSSProperties}\n      disabled={typeof defaultNodeDisabled === \"function\"\n        ? defaultNodeDisabled(option, deep)\n        : defaultNodeDisabled ?? false}\n    >\n      <div\n        style={{ paddingLeft: 'var(--deep-space)' }}\n        className='relative min-w-10 h-10 aspect-square'\n      >\n        {children}\n      </div>\n      <span\n        className={cn(\n          'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2',\n          (() => {\n          return typeof defaultNodeMatched === \"function\"\n            ? defaultNodeMatched(option, deep)\n            : defaultNodeMatched ?? false\n          })() && 'font-bold',\n          (() => {\n            return typeof defaultNodeMuted === \"function\"\n              ? defaultNodeMuted(option, deep)\n              : defaultNodeMuted ?? false\n          })() && 'opacity-60',\n          (() => {\n            const res = typeof defaultNodeInteractive === \"function\"\n              ? defaultNodeInteractive(option, deep)\n              : defaultNodeInteractive ?? true\n            return !res;\n          })() && 'pointer-events-none',\n        )}\n      >\n        {option.label}\n      </span>\n      <Check\n        className={cn(\n          'ml-auto',\n          value === option.value ? 'opacity-100' : 'opacity-0'\n        )}\n      />\n    </CommandItem>\n  );\n}\n"],"names":["DEEP_OFFSET","ComboboxOptionItem","props","children","setOpen","option","onChangeOption","value","deep","onCollapseToggle","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","jsxs","CommandItem","e","jsx","cn","Check"],"mappings":";;;;AAMA,MAAMA,IAAc,IACPC,IAAqB,CAChCC,MAGG;AACH,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,kBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,IACEX;AACJ,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,OAAOV,EAAO;AAAA,MACd,gBAAcA,EAAO,WAAW;AAAA,MAChC,UAAU,MAAM;AAId,YAAG,EAHiB,OAAOQ,KAA2B,aAClDA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,IACb,QAAOJ,IAAA;AAExB,QAAIF,MAAUF,EAAO,QAAOC,IAAiB,EAAE,OAAO,IAAI,OAAO,IAAI,QAC/CD,CAAM,GAE5BD,EAAQ,EAAK;AAAA,MACf;AAAA,MACA,SAAS,CAACY,MAAM;AAKd,SAJoB,OAAOH,KAA2B,aAClDA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,QAG5BG,GAAG,eAAA,GACHA,GAAG,gBAAA;AAAA,MAEP;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,gBAAgB,GAAGR,IAAOR,CAAW;AAAA,MAAA;AAAA,MAEvC,UAAU,OAAOU,KAAwB,aACrCA,EAAoBL,GAAQG,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,aAAa,oBAAA;AAAA,YACtB,WAAU;AAAA,YAET,UAAAd;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,eAEO,OAAOP,KAAuB,aACjCA,EAAmBN,GAAQG,CAAI,IAC/BG,KAAsB,OAClB;AAAA,eAEC,OAAOC,KAAqB,aAC/BA,EAAiBP,GAAQG,CAAI,IAC7BI,KAAoB,OAClB;AAAA,cAKC,EAHK,OAAOC,KAA2B,aAC1CA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,OAExB;AAAA,YAAA;AAAA,YAGT,UAAAR,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAY;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAX,MAAUF,EAAO,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAlEKA,EAAO;AAAA,EAAA;AAqElB;"}

package/Combobox/ComboboxOptions.js

@@ -1,26 +1,27 @@
 import { jsx as e, jsxs as u } from "react/jsx-runtime";
 import { useState as b } from "react";
+import { Collapsible as g, CollapsibleTrigger as h, CollapsibleContent as C } from "../Collapsible/Collapsible.js";
 import { ComboboxOptionItem as p } from "./ComboboxOptionItem.js";
-import { ChevronRightIcon as g } from "lucide-react";
+import { ChevronRightIcon as x } from "lucide-react";
 import { cn as c } from "@oneplatformdev/utils";
-import { Collapsible as h, CollapsibleTrigger as C, CollapsibleContent as x } from "../Collapsible/Collapsible.js";
 import { ButtonIcon as v } from "../ButtonIcon/ButtonIcon.js";
+import "../ButtonIcon/buttonIconVariants.js";
 const m = (t) => {
-  const { option: n, deep: r = 0, defaultNodeOpen: a, defaultNodeDisabled: s, searchTerm: d } = t, [l, i] = b(() => typeof a == "function" ? a(n, r) : a ?? (!!d || !r));
+  const { option: n, deep: r = 0, defaultNodeOpen: a, defaultNodeDisabled: s, searchTerm: d } = t, [i, l] = b(() => typeof a == "function" ? a(n, r) : a ?? (!!d || !r));
   return n?.items?.length ? /* @__PURE__ */ u(
-    h,
+    g,
     {
-      open: l,
-      onOpenChange: i,
-      "data-opened": l,
+      open: i,
+      onOpenChange: l,
+      "data-opened": i,
       className: c("group/collapsible"),
       disabled: typeof s == "function" ? s(n, r) : s ?? !1,
       children: [
-        /* @__PURE__ */ e(p, { ...t, onCollapseToggle: () => i((o) => !o), children: /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "inset-0 absolute top-0 right-2", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(p, { ...t, onCollapseToggle: () => l((o) => !o), children: /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "inset-0 absolute top-0 right-2", children: /* @__PURE__ */ e(
           v,
           {
             onClick: (o) => {
-              o?.preventDefault(), o?.stopPropagation(), i((f) => !f);
+              o?.preventDefault(), o?.stopPropagation(), l((f) => !f);
             },
             type: "button",
             variant: "ghost",
@@ -29,19 +30,19 @@ const m = (t) => {
               "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent"
             ),
             icon: /* @__PURE__ */ e(
-              g,
+              x,
               {
                 strokeWidth: 2,
                 className: c(
                   "text-[#06080D]",
                   "transition-transform",
-                  l && "rotate-90"
+                  i && "rotate-90"
                 )
               }
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n?.items.map((o) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n?.items.map((o) => /* @__PURE__ */ e(
           m,
           {
             ...t,
@@ -53,12 +54,12 @@ const m = (t) => {
       ]
     }
   ) : /* @__PURE__ */ e(p, { ...t });
-}, k = (t) => {
+}, B = (t) => {
   const { options: n = [], ...r } = t;
   return /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n.map((a) => /* @__PURE__ */ e(m, { ...r, option: a }, a.value)) });
 };
 export {
-  k as ComboboxOptions,
+  B as ComboboxOptions,
   m as ComboboxOptionsNode
 };
 //# sourceMappingURL=ComboboxOptions.js.map

package/Combobox/ComboboxOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptions.js","sources":["../../src/Combobox/ComboboxOptions.tsx"],"sourcesContent":["import {\r\n  IComboboxOptionsNodeProps,\r\n  IComboboxOptionsProps,\r\n} from './Combobox.types';\r\nimport { useState } from 'react';\r\nimport {\r\n  Collapsible,\r\n  CollapsibleContent,\r\n  CollapsibleTrigger,\r\n} from '../Collapsible';\r\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\r\nimport { ChevronRightIcon } from 'lucide-react';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { ButtonIcon } from \"../ButtonIcon\";\r\n\r\nexport const ComboboxOptionsNode = <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => {\r\n  const { option, deep = 0, defaultNodeOpen, defaultNodeDisabled, searchTerm } = props;\r\n\r\n  const [open, onOpenChange] = useState(() => {\r\n    const def = !!searchTerm || !deep;\r\n    return typeof defaultNodeOpen === \"function\"\r\n      ? defaultNodeOpen(option, deep)\r\n      : defaultNodeOpen ?? def\r\n  });\r\n\r\n  if (!option?.items?.length) return <ComboboxOptionItem {...props} />;\r\n  return (\r\n    <Collapsible\r\n      open={open}\r\n      onOpenChange={onOpenChange}\r\n      data-opened={open}\r\n      className={cn('group/collapsible')}\r\n      disabled={typeof defaultNodeDisabled === \"function\"\r\n        ? defaultNodeDisabled(option, deep)\r\n        : defaultNodeDisabled ?? false}\r\n    >\r\n      <ComboboxOptionItem {...props} onCollapseToggle={() => onOpenChange(prev => !prev)}>\r\n        <CollapsibleTrigger asChild>\r\n          <div className='inset-0 absolute top-0 right-2'>\r\n            <ButtonIcon\r\n              onClick={(e) => {\r\n                e?.preventDefault();\r\n                e?.stopPropagation();\r\n                onOpenChange((prev) => !prev);\r\n              }}\r\n              type=\"button\"\r\n              variant=\"ghost\"\r\n              color='secondary'\r\n              className={cn(\r\n                'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\r\n              )}\r\n              icon={(\r\n                <ChevronRightIcon\r\n                  strokeWidth={2}\r\n                  className={cn(\r\n                    'text-[#06080D]',\r\n                    'transition-transform',\r\n                    open && 'rotate-90'\r\n                  )}\r\n                />\r\n              )}\r\n            />\r\n          </div>\r\n        </CollapsibleTrigger>\r\n      </ComboboxOptionItem>\r\n\r\n      <CollapsibleContent>\r\n        <div className=\"flex flex-col gap-0\">\r\n          {option?.items.map((opt) => {\r\n            return (\r\n              <ComboboxOptionsNode\r\n                key={opt.value}\r\n                {...props}\r\n                deep={deep + 1}\r\n                option={opt}\r\n              />\r\n            );\r\n          })}\r\n        </div>\r\n      </CollapsibleContent>\r\n    </Collapsible>\r\n  );\r\n}\r\n\r\nexport const ComboboxOptions = <Data extends object>(props: IComboboxOptionsProps<Data>) => {\r\n  const { options = [], ...rest } = props;\r\n  return (\r\n    <div className=\"flex flex-col gap-0\">\r\n      {options.map((option) => (\r\n        <ComboboxOptionsNode key={option.value} {...rest} option={option} />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["ComboboxOptionsNode","props","option","deep","defaultNodeOpen","defaultNodeDisabled","searchTerm","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","prev","CollapsibleTrigger","ButtonIcon","e","ChevronRightIcon","CollapsibleContent","opt","ComboboxOptions","options","rest"],"mappings":";;;;;;;AAeO,MAAMA,IAAsB,CAAsBC,MAA2C;AAClG,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,GAAG,iBAAAC,GAAiB,qBAAAC,GAAqB,YAAAC,MAAeL,GAEzE,CAACM,GAAMC,CAAY,IAAIC,EAAS,MAE7B,OAAOL,KAAoB,aAC9BA,EAAgBF,GAAQC,CAAI,IAC5BC,MAHQ,CAAC,CAACE,KAAc,CAACH,EAI9B;AAED,SAAKD,GAAQ,OAAO,SAElB,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MACjC,UAAU,OAAOP,KAAwB,aACrCA,EAAoBH,GAAQC,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAQ,EAACC,KAAoB,GAAGb,GAAO,kBAAkB,MAAMO,EAAa,CAAAO,MAAQ,CAACA,CAAI,GAC/E,4BAACC,GAAA,EAAmB,SAAO,IACzB,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA,gBAAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,SAAS,CAACC,MAAM;AACd,cAAAA,GAAG,eAAA,GACHA,GAAG,gBAAA,GACHV,EAAa,CAACO,MAAS,CAACA,CAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAWH;AAAA,cACT;AAAA,YAAA;AAAA,YAEF,MACE,gBAAAC;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,aAAa;AAAA,gBACb,WAAWP;AAAA,kBACT;AAAA,kBACA;AAAA,kBACAL,KAAQ;AAAA,gBAAA;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,EAEJ,CACF,GACF,GACF;AAAA,QAEA,gBAAAM,EAACO,GAAA,EACC,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAX,GAAQ,MAAM,IAAI,CAACmB,MAEhB,gBAAAR;AAAA,UAACb;AAAA,UAAA;AAAA,YAEE,GAAGC;AAAA,YACJ,MAAME,IAAO;AAAA,YACb,QAAQkB;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAtD+B,gBAAAR,EAACC,GAAA,EAAoB,GAAGb,GAAO;AAyDpE,GAEaqB,IAAkB,CAAsBrB,MAAuC;AAC1F,QAAM,EAAE,SAAAsB,IAAU,CAAA,GAAI,GAAGC,MAASvB;AAClC,2BACG,OAAA,EAAI,WAAU,uBACZ,UAAAsB,EAAQ,IAAI,CAACrB,MACZ,gBAAAW,EAACb,GAAA,EAAwC,GAAGwB,GAAM,QAAAtB,EAAA,GAAxBA,EAAO,KAAiC,CACnE,GACH;AAEJ;"}
+{"version":3,"file":"ComboboxOptions.js","sources":["../../src/Combobox/ComboboxOptions.tsx"],"sourcesContent":["import {\n  IComboboxOptionsNodeProps,\n  IComboboxOptionsProps,\n} from './Combobox.types';\nimport { useState } from 'react';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../Collapsible';\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { ButtonIcon } from \"../ButtonIcon\";\n\nexport const ComboboxOptionsNode = <Data extends object>(props: IComboboxOptionsNodeProps<Data>) => {\n  const { option, deep = 0, defaultNodeOpen, defaultNodeDisabled, searchTerm } = props;\n\n  const [open, onOpenChange] = useState(() => {\n    const def = !!searchTerm || !deep;\n    return typeof defaultNodeOpen === \"function\"\n      ? defaultNodeOpen(option, deep)\n      : defaultNodeOpen ?? def\n  });\n\n  if (!option?.items?.length) return <ComboboxOptionItem {...props} />;\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={onOpenChange}\n      data-opened={open}\n      className={cn('group/collapsible')}\n      disabled={typeof defaultNodeDisabled === \"function\"\n        ? defaultNodeDisabled(option, deep)\n        : defaultNodeDisabled ?? false}\n    >\n      <ComboboxOptionItem {...props} onCollapseToggle={() => onOpenChange(prev => !prev)}>\n        <CollapsibleTrigger asChild>\n          <div className='inset-0 absolute top-0 right-2'>\n            <ButtonIcon\n              onClick={(e) => {\n                e?.preventDefault();\n                e?.stopPropagation();\n                onOpenChange((prev) => !prev);\n              }}\n              type=\"button\"\n              variant=\"ghost\"\n              color='secondary'\n              className={cn(\n                'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\n              )}\n              icon={(\n                <ChevronRightIcon\n                  strokeWidth={2}\n                  className={cn(\n                    'text-[#06080D]',\n                    'transition-transform',\n                    open && 'rotate-90'\n                  )}\n                />\n              )}\n            />\n          </div>\n        </CollapsibleTrigger>\n      </ComboboxOptionItem>\n\n      <CollapsibleContent>\n        <div className=\"flex flex-col gap-0\">\n          {option?.items.map((opt) => {\n            return (\n              <ComboboxOptionsNode\n                key={opt.value}\n                {...props}\n                deep={deep + 1}\n                option={opt}\n              />\n            );\n          })}\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nexport const ComboboxOptions = <Data extends object>(props: IComboboxOptionsProps<Data>) => {\n  const { options = [], ...rest } = props;\n  return (\n    <div className=\"flex flex-col gap-0\">\n      {options.map((option) => (\n        <ComboboxOptionsNode key={option.value} {...rest} option={option} />\n      ))}\n    </div>\n  );\n}\n"],"names":["ComboboxOptionsNode","props","option","deep","defaultNodeOpen","defaultNodeDisabled","searchTerm","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","prev","CollapsibleTrigger","ButtonIcon","e","ChevronRightIcon","CollapsibleContent","opt","ComboboxOptions","options","rest"],"mappings":";;;;;;;;AAeO,MAAMA,IAAsB,CAAsBC,MAA2C;AAClG,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,GAAG,iBAAAC,GAAiB,qBAAAC,GAAqB,YAAAC,MAAeL,GAEzE,CAACM,GAAMC,CAAY,IAAIC,EAAS,MAE7B,OAAOL,KAAoB,aAC9BA,EAAgBF,GAAQC,CAAI,IAC5BC,MAHQ,CAAC,CAACE,KAAc,CAACH,EAI9B;AAED,SAAKD,GAAQ,OAAO,SAElB,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MACjC,UAAU,OAAOP,KAAwB,aACrCA,EAAoBH,GAAQC,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAQ,EAACC,KAAoB,GAAGb,GAAO,kBAAkB,MAAMO,EAAa,CAAAO,MAAQ,CAACA,CAAI,GAC/E,4BAACC,GAAA,EAAmB,SAAO,IACzB,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA,gBAAAA;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,SAAS,CAACC,MAAM;AACd,cAAAA,GAAG,eAAA,GACHA,GAAG,gBAAA,GACHV,EAAa,CAACO,MAAS,CAACA,CAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,WAAWH;AAAA,cACT;AAAA,YAAA;AAAA,YAEF,MACE,gBAAAC;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,aAAa;AAAA,gBACb,WAAWP;AAAA,kBACT;AAAA,kBACA;AAAA,kBACAL,KAAQ;AAAA,gBAAA;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,EAEJ,CACF,GACF,GACF;AAAA,QAEA,gBAAAM,EAACO,GAAA,EACC,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,uBACZ,UAAAX,GAAQ,MAAM,IAAI,CAACmB,MAEhB,gBAAAR;AAAA,UAACb;AAAA,UAAA;AAAA,YAEE,GAAGC;AAAA,YACJ,MAAME,IAAO;AAAA,YACb,QAAQkB;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAtD+B,gBAAAR,EAACC,GAAA,EAAoB,GAAGb,GAAO;AAyDpE,GAEaqB,IAAkB,CAAsBrB,MAAuC;AAC1F,QAAM,EAAE,SAAAsB,IAAU,CAAA,GAAI,GAAGC,MAASvB;AAClC,2BACG,OAAA,EAAI,WAAU,uBACZ,UAAAsB,EAAQ,IAAI,CAACrB,MACZ,gBAAAW,EAACb,GAAA,EAAwC,GAAGwB,GAAM,QAAAtB,EAAA,GAAxBA,EAAO,KAAiC,CACnE,GACH;AAEJ;"}

package/Command/Command.js

@@ -1,9 +1,10 @@
 import { jsx as o, jsxs as d } from "react/jsx-runtime";
 import { Command as r } from "cmdk";
-import { Command as A } from "cmdk";
-import { SearchIcon as i } from "lucide-react";
+import { Command as E } from "cmdk";
+import { SearchIcon as c } from "lucide-react";
 import { cn as a } from "@oneplatformdev/utils";
 import { Dialog as p, DialogHeader as l, DialogTitle as u, DialogDescription as g, DialogContent as h } from "../Dialog/Dialog.js";
+import "../Dialog/DialogOverlayScope.js";
 function f({
   className: e,
   ...t
@@ -20,15 +21,15 @@ function f({
     }
   );
 }
-function C({
+function N({
   title: e = "Command Palette",
   description: t = "Search for a command to run...",
   children: n,
   className: m,
   showCloseButton: s = !0,
-  ...c
+  ...i
 }) {
-  return /* @__PURE__ */ d(p, { ...c, children: [
+  return /* @__PURE__ */ d(p, { ...i, children: [
     /* @__PURE__ */ d(l, { className: "sr-only", children: [
       /* @__PURE__ */ o(u, { children: e }),
       /* @__PURE__ */ o(g, { children: t })
@@ -43,7 +44,7 @@ function C({
     )
   ] });
 }
-function N(e) {
+function y(e) {
   const {
     className: t,
     slotProps: n,
@@ -60,7 +61,7 @@ function N(e) {
       ),
       children: [
         /* @__PURE__ */ o(
-          i,
+          c,
           {
             strokeWidth: 2,
             className: "size-5 shrink-0 text-[#666A78]"
@@ -81,7 +82,7 @@ function N(e) {
     }
   );
 }
-function y({
+function b({
   className: e,
   ...t
 }) {
@@ -97,7 +98,7 @@ function y({
     }
   );
 }
-function b({
+function D({
   ...e
 }) {
   return /* @__PURE__ */ o(
@@ -109,7 +110,7 @@ function b({
     }
   );
 }
-function D({
+function I({
   className: e,
   ...t
 }) {
@@ -125,7 +126,7 @@ function D({
     }
   );
 }
-function I({
+function S({
   className: e,
   ...t
 }) {
@@ -138,7 +139,7 @@ function I({
     }
   );
 }
-function S({
+function z({
   className: e,
   ...t
 }) {
@@ -157,7 +158,7 @@ function S({
     }
   );
 }
-function z({
+function P({
   className: e,
   ...t
 }) {
@@ -175,14 +176,14 @@ function z({
 }
 export {
   f as Command,
-  C as CommandDialog,
-  b as CommandEmpty,
-  D as CommandGroup,
-  N as CommandInput,
-  S as CommandItem,
-  y as CommandList,
-  A as CommandPrimitive,
-  I as CommandSeparator,
-  z as CommandShortcut
+  N as CommandDialog,
+  D as CommandEmpty,
+  I as CommandGroup,
+  y as CommandInput,
+  z as CommandItem,
+  b as CommandList,
+  E as CommandPrimitive,
+  S as CommandSeparator,
+  P as CommandShortcut
 };
 //# sourceMappingURL=Command.js.map

package/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"file":"Command.js","sources":["../../src/Command/Command.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Command as CommandPrimitive } from \"cmdk\"\r\nimport { SearchIcon } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogDescription,\r\n  DialogHeader,\r\n  DialogTitle,\r\n} from \"../Dialog\"\r\nimport { HTMLAttributes } from \"react\";\r\n\r\nfunction Command({\r\n                   className,\r\n                   ...props\r\n                 }: React.ComponentProps<typeof CommandPrimitive>) {\r\n  return (\r\n    <CommandPrimitive\r\n      data-slot=\"command\"\r\n      className={cn(\r\n        \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction CommandDialog({\r\n                         title = \"Command Palette\",\r\n                         description = \"Search for a command to run...\",\r\n                         children,\r\n                         className,\r\n                         showCloseButton = true,\r\n                         ...props\r\n                       }: React.ComponentProps<typeof Dialog> & {\r\n  title?: string\r\n  description?: string\r\n  className?: string\r\n  showCloseButton?: boolean\r\n}) {\r\n  return (\r\n    <Dialog {...props}>\r\n      <DialogHeader className=\"sr-only\">\r\n        <DialogTitle>{title}</DialogTitle>\r\n        <DialogDescription>{description}</DialogDescription>\r\n      </DialogHeader>\r\n      <DialogContent\r\n        className={cn(\"overflow-hidden p-0\", className)}\r\n        showCloseButton={showCloseButton}\r\n      >\r\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\r\n          {children}\r\n        </Command>\r\n      </DialogContent>\r\n    </Dialog>\r\n  )\r\n}\r\n\r\nfunction CommandInput(\r\n  props: React.ComponentProps<typeof CommandPrimitive.Input> & {\r\n    slotProps?: {\r\n      wrapper?: HTMLAttributes<HTMLDivElement>,\r\n    }\r\n  }\r\n) {\r\n  const {\r\n    className,\r\n    slotProps,\r\n    ...rest\r\n  } = props;\r\n  return (\r\n    <div\r\n      data-slot=\"command-input-wrapper\"\r\n      {...slotProps?.wrapper}\r\n      className={cn(\r\n        \"flex h-9 items-center gap-2 border-b px-3\",\r\n        slotProps?.wrapper?.className\r\n      )}\r\n    >\r\n      <SearchIcon\r\n        strokeWidth={2}\r\n        className=\"size-5 shrink-0 text-[#666A78]\"\r\n      />\r\n      <CommandPrimitive.Input\r\n        data-slot=\"command-input\"\r\n        className={cn(\r\n          \"placeholder:text-[#666A78] flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\r\n          className\r\n        )}\r\n        {...rest}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\n\r\nfunction CommandList({\r\n                       className,\r\n                       ...props\r\n                     }: React.ComponentProps<typeof CommandPrimitive.List>) {\r\n  return (\r\n    <CommandPrimitive.List\r\n      data-slot=\"command-list\"\r\n      className={cn(\r\n        \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction CommandEmpty({\r\n                        ...props\r\n                      }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\r\n  return (\r\n    <CommandPrimitive.Empty\r\n      data-slot=\"command-empty\"\r\n      className=\"py-6 text-center text-sm\"\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction CommandGroup({\r\n                        className,\r\n                        ...props\r\n                      }: React.ComponentProps<typeof CommandPrimitive.Group>) {\r\n  return (\r\n    <CommandPrimitive.Group\r\n      data-slot=\"command-group\"\r\n      className={cn(\r\n        \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction CommandSeparator({\r\n                            className,\r\n                            ...props\r\n                          }: React.ComponentProps<typeof CommandPrimitive.Separator>) {\r\n  return (\r\n    <CommandPrimitive.Separator\r\n      data-slot=\"command-separator\"\r\n      className={cn(\"bg-border -mx-1 h-px\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction CommandItem({\r\n                       className,\r\n                       ...props\r\n                     }: React.ComponentProps<typeof CommandPrimitive.Item>) {\r\n  return (\r\n    <CommandPrimitive.Item\r\n      data-slot=\"command-item\"\r\n      className={cn(\r\n        'relative flex items-center gap-2 rounded-sm px-2 py-1.5 min-h-10 text-sm',\r\n        'cursor-pointer select-none',\r\n        'outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4',\r\n        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction CommandShortcut({\r\n                           className,\r\n                           ...props\r\n                         }: React.ComponentProps<\"span\">) {\r\n  return (\r\n    <span\r\n      data-slot=\"command-shortcut\"\r\n      className={cn(\r\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport {\r\n  Command,\r\n  CommandDialog,\r\n  CommandInput,\r\n  CommandList,\r\n  CommandEmpty,\r\n  CommandGroup,\r\n  CommandItem,\r\n  CommandShortcut,\r\n  CommandSeparator,\r\n  CommandPrimitive\r\n}\r\n"],"names":["Command","className","props","jsx","CommandPrimitive","cn","CommandDialog","title","description","children","showCloseButton","jsxs","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","CommandInput","slotProps","rest","SearchIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut"],"mappings":"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"}
+{"version":3,"file":"Command.js","sources":["../../src/Command/Command.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"../Dialog\"\nimport { HTMLAttributes } from \"react\";\n\nfunction Command({\n                   className,\n                   ...props\n                 }: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n                         title = \"Command Palette\",\n                         description = \"Search for a command to run...\",\n                         children,\n                         className,\n                         showCloseButton = true,\n                         ...props\n                       }: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput(\n  props: React.ComponentProps<typeof CommandPrimitive.Input> & {\n    slotProps?: {\n      wrapper?: HTMLAttributes<HTMLDivElement>,\n    }\n  }\n) {\n  const {\n    className,\n    slotProps,\n    ...rest\n  } = props;\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      {...slotProps?.wrapper}\n      className={cn(\n        \"flex h-9 items-center gap-2 border-b px-3\",\n        slotProps?.wrapper?.className\n      )}\n    >\n      <SearchIcon\n        strokeWidth={2}\n        className=\"size-5 shrink-0 text-[#666A78]\"\n      />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"placeholder:text-[#666A78] flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...rest}\n      />\n    </div>\n  )\n}\n\n\nfunction CommandList({\n                       className,\n                       ...props\n                     }: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n                        ...props\n                      }: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n                        className,\n                        ...props\n                      }: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n                            className,\n                            ...props\n                          }: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n                       className,\n                       ...props\n                     }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        'relative flex items-center gap-2 rounded-sm px-2 py-1.5 min-h-10 text-sm',\n        'cursor-pointer select-none',\n        'outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\\'size-\\'])]:size-4',\n        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandShortcut({\n                           className,\n                           ...props\n                         }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n  CommandPrimitive\n}\n"],"names":["Command","className","props","jsx","CommandPrimitive","cn","CommandDialog","title","description","children","showCloseButton","jsxs","Dialog","DialogHeader","DialogTitle","DialogDescription","DialogContent","CommandInput","slotProps","rest","SearchIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut"],"mappings":"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"}

package/DataTable/DataTable.js

@@ -1,11 +1,13 @@
 import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { Button as m } from "../Button/Button.js";
+import "../Button/buttonVariants.js";
+import "react";
+import { DropdownMenu as h, DropdownMenuTrigger as p, DropdownMenuContent as g, DropdownMenuCheckboxItem as u } from "../DropdownMenu/DropdownMenu.js";
+import { Table as C, TableHeader as f, TableRow as t, TableHead as w, TableBody as x, TableCell as o } from "../Table/Table.js";
 import { flexRender as d } from "@tanstack/react-table";
-import { ChevronDown as m } from "lucide-react";
-import { DropdownMenu as h, DropdownMenuTrigger as g, DropdownMenuContent as p, DropdownMenuCheckboxItem as u } from "../DropdownMenu/DropdownMenu.js";
-import { Button as C } from "../Button/Button.js";
-import { Table as f, TableHeader as w, TableRow as t, TableHead as x, TableBody as b, TableCell as o } from "../Table/Table.js";
-const R = ({
-  table: r,
+import { ChevronDown as b } from "lucide-react";
+const y = ({
+  table: n,
   ToolBar: a,
   tColumns: s = "Columns",
   tNoResults: c = "No results"
@@ -13,42 +15,42 @@ const R = ({
   /* @__PURE__ */ i("div", { className: "flex items-center py-4", children: [
     a,
     /* @__PURE__ */ i(h, { children: [
-      /* @__PURE__ */ l(g, { asChild: !0, children: /* @__PURE__ */ i(C, { variant: "outline", className: "ml-auto", children: [
+      /* @__PURE__ */ l(p, { asChild: !0, children: /* @__PURE__ */ i(m, { variant: "outline", className: "ml-auto", children: [
         s,
         " ",
-        /* @__PURE__ */ l(m, { className: "ml-2 h-4 w-4" })
+        /* @__PURE__ */ l(b, { className: "ml-2 h-4 w-4" })
       ] }) }),
-      /* @__PURE__ */ l(p, { align: "end", children: r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ l(
+      /* @__PURE__ */ l(g, { align: "end", children: n.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ l(
         u,
         {
           className: "capitalize",
           checked: e.getIsVisible(),
-          onCheckedChange: (n) => e.toggleVisibility(!!n),
+          onCheckedChange: (r) => e.toggleVisibility(!!r),
           children: e.id
         },
         e.id
       )) })
     ] })
   ] }),
-  /* @__PURE__ */ l("div", { className: "rounded-md border", children: /* @__PURE__ */ i(f, { children: [
-    /* @__PURE__ */ l(w, { children: r.getHeaderGroups().map((e) => /* @__PURE__ */ l(t, { children: e.headers.map((n) => /* @__PURE__ */ l(x, { children: n.isPlaceholder ? null : d(
-      n.column.columnDef.header,
-      n.getContext()
-    ) }, n.id)) }, e.id)) }),
-    /* @__PURE__ */ l(b, { children: r.getRowModel().rows?.length ? r.getRowModel().rows.map((e) => /* @__PURE__ */ l(
+  /* @__PURE__ */ l("div", { className: "rounded-md border", children: /* @__PURE__ */ i(C, { children: [
+    /* @__PURE__ */ l(f, { children: n.getHeaderGroups().map((e) => /* @__PURE__ */ l(t, { children: e.headers.map((r) => /* @__PURE__ */ l(w, { children: r.isPlaceholder ? null : d(
+      r.column.columnDef.header,
+      r.getContext()
+    ) }, r.id)) }, e.id)) }),
+    /* @__PURE__ */ l(x, { children: n.getRowModel().rows?.length ? n.getRowModel().rows.map((e) => /* @__PURE__ */ l(
       t,
       {
         "data-state": e.getIsSelected() && "selected",
-        children: e.getVisibleCells().map((n) => /* @__PURE__ */ l(o, { children: d(
-          n.column.columnDef.cell,
-          n.getContext()
-        ) }, n.id))
+        children: e.getVisibleCells().map((r) => /* @__PURE__ */ l(o, { children: d(
+          r.column.columnDef.cell,
+          r.getContext()
+        ) }, r.id))
       },
       e.id
     )) : /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l(
       o,
       {
-        colSpan: r.getAllColumns().length,
+        colSpan: n.getAllColumns().length,
         className: "h-24 text-center",
         children: c
       }
@@ -56,6 +58,6 @@ const R = ({
   ] }) })
 ] });
 export {
-  R as DataTable
+  y as DataTable
 };
 //# sourceMappingURL=DataTable.js.map

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Button } from '../Button';\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuCheckboxItem,\r\n  DropdownMenuContent,\r\n  DropdownMenuTrigger,\r\n} from '../DropdownMenu';\r\nimport {\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableHead,\r\n  TableHeader,\r\n  TableRow,\r\n} from '../Table';\r\nimport { flexRender, type Table as ReactTable } from '@tanstack/react-table';\r\nimport { ChevronDown } from 'lucide-react';\r\nimport React, { FC } from 'react';\r\n\r\ninterface IProps {\r\n  table: ReactTable<any>;\r\n  ToolBar?: React.ReactNode;\r\n  tColumns?: string;\r\n  tNoResults?: string;\r\n}\r\n\r\nexport const DataTable: FC<IProps> = ({\r\n  table,\r\n  ToolBar,\r\n  tColumns = 'Columns',\r\n  tNoResults = 'No results',\r\n}) => {\r\n  return (\r\n    <div className=\"w-full\">\r\n      <div className=\"flex items-center py-4\">\r\n        {ToolBar}\r\n        <DropdownMenu>\r\n          <DropdownMenuTrigger asChild>\r\n            <Button variant=\"outline\" className=\"ml-auto\">\r\n              {tColumns} <ChevronDown className=\"ml-2 h-4 w-4\" />\r\n            </Button>\r\n          </DropdownMenuTrigger>\r\n          <DropdownMenuContent align=\"end\">\r\n            {table\r\n              .getAllColumns()\r\n              .filter((column) => column.getCanHide())\r\n              .map((column) => {\r\n                return (\r\n                  <DropdownMenuCheckboxItem\r\n                    key={column.id}\r\n                    className=\"capitalize\"\r\n                    checked={column.getIsVisible()}\r\n                    onCheckedChange={(value) =>\r\n                      column.toggleVisibility(!!value)\r\n                    }\r\n                  >\r\n                    {column.id}\r\n                  </DropdownMenuCheckboxItem>\r\n                );\r\n              })}\r\n          </DropdownMenuContent>\r\n        </DropdownMenu>\r\n      </div>\r\n      <div className=\"rounded-md border\">\r\n        <Table>\r\n          <TableHeader>\r\n            {table.getHeaderGroups().map((headerGroup) => (\r\n              <TableRow key={headerGroup.id}>\r\n                {headerGroup.headers.map((header) => {\r\n                  return (\r\n                    <TableHead key={header.id}>\r\n                      {header.isPlaceholder\r\n                        ? null\r\n                        : flexRender(\r\n                            header.column.columnDef.header,\r\n                            header.getContext()\r\n                          )}\r\n                    </TableHead>\r\n                  );\r\n                })}\r\n              </TableRow>\r\n            ))}\r\n          </TableHeader>\r\n          <TableBody>\r\n            {table.getRowModel().rows?.length ? (\r\n              table.getRowModel().rows.map((row) => (\r\n                <TableRow\r\n                  key={row.id}\r\n                  data-state={row.getIsSelected() && 'selected'}\r\n                >\r\n                  {row.getVisibleCells().map((cell) => (\r\n                    <TableCell key={cell.id}>\r\n                      {flexRender(\r\n                        cell.column.columnDef.cell,\r\n                        cell.getContext()\r\n                      )}\r\n                    </TableCell>\r\n                  ))}\r\n                </TableRow>\r\n              ))\r\n            ) : (\r\n              <TableRow>\r\n                <TableCell\r\n                  colSpan={table.getAllColumns().length}\r\n                  className=\"h-24 text-center\"\r\n                >\r\n                  {tNoResults}\r\n                </TableCell>\r\n              </TableRow>\r\n            )}\r\n          </TableBody>\r\n        </Table>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["DataTable","table","ToolBar","tColumns","tNoResults","jsxs","DropdownMenu","jsx","DropdownMenuTrigger","Button","ChevronDown","DropdownMenuContent","column","DropdownMenuCheckboxItem","value","Table","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","row","cell","TableCell"],"mappings":";;;;;;AA4BO,MAAMA,IAAwB,CAAC;AAAA,EACpC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AACf,MAEI,gBAAAC,EAAC,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,EAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAA;AAAA,IAAAH;AAAA,sBACAI,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAO,IAC1B,UAAA,gBAAAH,EAACI,KAAO,SAAQ,WAAU,WAAU,WACjC,UAAA;AAAA,QAAAN;AAAA,QAAS;AAAA,QAAC,gBAAAI,EAACG,GAAA,EAAY,WAAU,eAAA,CAAe;AAAA,MAAA,EAAA,CACnD,EAAA,CACF;AAAA,wBACCC,GAAA,EAAoB,OAAM,OACxB,UAAAV,EACE,gBACA,OAAO,CAACW,MAAWA,EAAO,WAAA,CAAY,EACtC,IAAI,CAACA,MAEF,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,SAASD,EAAO,aAAA;AAAA,UAChB,iBAAiB,CAACE,MAChBF,EAAO,iBAAiB,CAAC,CAACE,CAAK;AAAA,UAGhC,UAAAF,EAAO;AAAA,QAAA;AAAA,QAPHA,EAAO;AAAA,MAAA,CAUjB,EAAA,CACL;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAAA,EACA,gBAAAL,EAAC,OAAA,EAAI,WAAU,qBACb,4BAACQ,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAR,EAACS,GAAA,EACE,UAAAf,EAAM,gBAAA,EAAkB,IAAI,CAACgB,MAC5B,gBAAAV,EAACW,GAAA,EACE,UAAAD,EAAY,QAAQ,IAAI,CAACE,MAEtB,gBAAAZ,EAACa,GAAA,EACE,UAAAD,EAAO,gBACJ,OACAE;AAAA,MACEF,EAAO,OAAO,UAAU;AAAA,MACxBA,EAAO,WAAA;AAAA,IAAW,EACpB,GANUA,EAAO,EAOvB,CAEH,EAAA,GAZYF,EAAY,EAa3B,CACD,EAAA,CACH;AAAA,IACA,gBAAAV,EAACe,GAAA,EACE,UAAArB,EAAM,YAAA,EAAc,MAAM,SACzBA,EAAM,YAAA,EAAc,KAAK,IAAI,CAACsB,MAC5B,gBAAAhB;AAAA,MAACW;AAAA,MAAA;AAAA,QAEC,cAAYK,EAAI,cAAA,KAAmB;AAAA,QAElC,YAAI,gBAAA,EAAkB,IAAI,CAACC,wBACzBC,GAAA,EACE,UAAAJ;AAAA,UACCG,EAAK,OAAO,UAAU;AAAA,UACtBA,EAAK,WAAA;AAAA,QAAW,EAClB,GAJcA,EAAK,EAKrB,CACD;AAAA,MAAA;AAAA,MAVID,EAAI;AAAA,IAAA,CAYZ,IAED,gBAAAhB,EAACW,GAAA,EACC,UAAA,gBAAAX;AAAA,MAACkB;AAAA,MAAA;AAAA,QACC,SAASxB,EAAM,cAAA,EAAgB;AAAA,QAC/B,WAAU;AAAA,QAET,UAAAG;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CAEJ;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAAA,GACF;"}
+{"version":3,"file":"DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '../Button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../Table';\nimport { flexRender, type Table as ReactTable } from '@tanstack/react-table';\nimport { ChevronDown } from 'lucide-react';\nimport React, { FC } from 'react';\n\ninterface IProps {\n  table: ReactTable<any>;\n  ToolBar?: React.ReactNode;\n  tColumns?: string;\n  tNoResults?: string;\n}\n\nexport const DataTable: FC<IProps> = ({\n  table,\n  ToolBar,\n  tColumns = 'Columns',\n  tNoResults = 'No results',\n}) => {\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-center py-4\">\n        {ToolBar}\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              {tColumns} <ChevronDown className=\"ml-2 h-4 w-4\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => {\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    className=\"capitalize\"\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {column.id}\n                  </DropdownMenuCheckboxItem>\n                );\n              })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  );\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && 'selected'}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={table.getAllColumns().length}\n                  className=\"h-24 text-center\"\n                >\n                  {tNoResults}\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  );\n};\n"],"names":["DataTable","table","ToolBar","tColumns","tNoResults","jsxs","DropdownMenu","jsx","DropdownMenuTrigger","Button","ChevronDown","DropdownMenuContent","column","DropdownMenuCheckboxItem","value","Table","TableHeader","headerGroup","TableRow","header","TableHead","flexRender","TableBody","row","cell","TableCell"],"mappings":";;;;;;;;AA4BO,MAAMA,IAAwB,CAAC;AAAA,EACpC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AACf,MAEI,gBAAAC,EAAC,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,EAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAA;AAAA,IAAAH;AAAA,sBACAI,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAoB,SAAO,IAC1B,UAAA,gBAAAH,EAACI,KAAO,SAAQ,WAAU,WAAU,WACjC,UAAA;AAAA,QAAAN;AAAA,QAAS;AAAA,QAAC,gBAAAI,EAACG,GAAA,EAAY,WAAU,eAAA,CAAe;AAAA,MAAA,EAAA,CACnD,EAAA,CACF;AAAA,wBACCC,GAAA,EAAoB,OAAM,OACxB,UAAAV,EACE,gBACA,OAAO,CAACW,MAAWA,EAAO,WAAA,CAAY,EACtC,IAAI,CAACA,MAEF,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,SAASD,EAAO,aAAA;AAAA,UAChB,iBAAiB,CAACE,MAChBF,EAAO,iBAAiB,CAAC,CAACE,CAAK;AAAA,UAGhC,UAAAF,EAAO;AAAA,QAAA;AAAA,QAPHA,EAAO;AAAA,MAAA,CAUjB,EAAA,CACL;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAAA,EACA,gBAAAL,EAAC,OAAA,EAAI,WAAU,qBACb,4BAACQ,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAR,EAACS,GAAA,EACE,UAAAf,EAAM,gBAAA,EAAkB,IAAI,CAACgB,MAC5B,gBAAAV,EAACW,GAAA,EACE,UAAAD,EAAY,QAAQ,IAAI,CAACE,MAEtB,gBAAAZ,EAACa,GAAA,EACE,UAAAD,EAAO,gBACJ,OACAE;AAAA,MACEF,EAAO,OAAO,UAAU;AAAA,MACxBA,EAAO,WAAA;AAAA,IAAW,EACpB,GANUA,EAAO,EAOvB,CAEH,EAAA,GAZYF,EAAY,EAa3B,CACD,EAAA,CACH;AAAA,IACA,gBAAAV,EAACe,GAAA,EACE,UAAArB,EAAM,YAAA,EAAc,MAAM,SACzBA,EAAM,YAAA,EAAc,KAAK,IAAI,CAACsB,MAC5B,gBAAAhB;AAAA,MAACW;AAAA,MAAA;AAAA,QAEC,cAAYK,EAAI,cAAA,KAAmB;AAAA,QAElC,YAAI,gBAAA,EAAkB,IAAI,CAACC,wBACzBC,GAAA,EACE,UAAAJ;AAAA,UACCG,EAAK,OAAO,UAAU;AAAA,UACtBA,EAAK,WAAA;AAAA,QAAW,EAClB,GAJcA,EAAK,EAKrB,CACD;AAAA,MAAA;AAAA,MAVID,EAAI;AAAA,IAAA,CAYZ,IAED,gBAAAhB,EAACW,GAAA,EACC,UAAA,gBAAAX;AAAA,MAACkB;AAAA,MAAA;AAAA,QACC,SAASxB,EAAM,cAAA,EAAgB;AAAA,QAC/B,WAAU;AAAA,QAET,UAAAG;AAAA,MAAA;AAAA,IAAA,GAEL,EAAA,CAEJ;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAAA,GACF;"}

package/DataTable/DataTableColumnFilter.js

@@ -1,13 +1,14 @@
 import { jsx as n, jsxs as t } from "react/jsx-runtime";
-import { ChevronDown as s } from "lucide-react";
-import { useMemo as m } from "react";
+import { ChevronDown as m } from "lucide-react";
+import { useMemo as s } from "react";
 import { Button as d } from "../Button/Button.js";
+import "../Button/buttonVariants.js";
 import { DropdownMenuCheckboxItem as c, DropdownMenu as u, DropdownMenuTrigger as h, DropdownMenuContent as p } from "../DropdownMenu/DropdownMenu.js";
-const D = (i) => {
+const x = (i) => {
   const {
     table: r,
     columnsLabel: l = "Columns"
-  } = i, o = m(() => r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ n(
+  } = i, o = s(() => r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ n(
     c,
     {
       className: "capitalize",
@@ -20,12 +21,12 @@ const D = (i) => {
   return o.length ? /* @__PURE__ */ t(u, { children: [
     /* @__PURE__ */ n(h, { asChild: !0, children: /* @__PURE__ */ t(d, { variant: "outline", className: "ml-auto", children: [
       l,
-      /* @__PURE__ */ n(s, { className: "ml-2 h-4 w-4" })
+      /* @__PURE__ */ n(m, { className: "ml-2 h-4 w-4" })
     ] }) }),
     /* @__PURE__ */ n(p, { align: "end", children: o })
   ] }) : null;
 };
 export {
-  D as DataTableColumnFilter
+  x as DataTableColumnFilter
 };
 //# sourceMappingURL=DataTableColumnFilter.js.map

package/DataTable/DataTableColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableColumnFilter.js","sources":["../../src/DataTable/DataTableColumnFilter.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ChevronDown } from 'lucide-react';\r\nimport React, { FC, useMemo } from 'react';\r\n\r\nimport { Button } from '../Button';\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuCheckboxItem,\r\n  DropdownMenuContent,\r\n  DropdownMenuTrigger,\r\n} from '../DropdownMenu';\r\nimport { DataTableProps } from './DataTable.types';\r\n\r\n// TODO: refactor this component to use the new Table component\r\nexport const DataTableColumnFilter: FC<DataTableProps> = (props) => {\r\n  const {\r\n    table,\r\n    columnsLabel = 'Columns',\r\n  } = props;\r\n\r\n  const columnsCheckboxRender = useMemo(() => {\r\n    return table\r\n      .getAllColumns()\r\n      .filter((column) => column.getCanHide())\r\n      .map((column) => {\r\n        return (\r\n          <DropdownMenuCheckboxItem\r\n            key={column.id}\r\n            className=\"capitalize\"\r\n            checked={column.getIsVisible()}\r\n            onCheckedChange={(value) =>\r\n              column.toggleVisibility(!!value)\r\n            }\r\n          >\r\n            {column.id}\r\n          </DropdownMenuCheckboxItem>\r\n        );\r\n      })\r\n  }, [table])\r\n\r\n  if(!columnsCheckboxRender.length) return null;\r\n\r\n  return (\r\n    <DropdownMenu>\r\n      <DropdownMenuTrigger asChild>\r\n        <Button variant=\"outline\" className=\"ml-auto\">\r\n          {columnsLabel}\r\n          <ChevronDown className=\"ml-2 h-4 w-4\" />\r\n        </Button>\r\n      </DropdownMenuTrigger>\r\n      <DropdownMenuContent align=\"end\">\r\n        {columnsCheckboxRender}\r\n      </DropdownMenuContent>\r\n    </DropdownMenu>\r\n  );\r\n};\r\n"],"names":["DataTableColumnFilter","props","table","columnsLabel","columnsCheckboxRender","useMemo","column","jsx","DropdownMenuCheckboxItem","value","DropdownMenu","DropdownMenuTrigger","jsxs","Button","ChevronDown","DropdownMenuContent"],"mappings":";;;;;AAeO,MAAMA,IAA4C,CAACC,MAAU;AAClE,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,EAAA,IACbF,GAEEG,IAAwBC,EAAQ,MAC7BH,EACJ,gBACA,OAAO,CAACI,MAAWA,EAAO,WAAA,CAAY,EACtC,IAAI,CAACA,MAEF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,SAASF,EAAO,aAAA;AAAA,MAChB,iBAAiB,CAACG,MAChBH,EAAO,iBAAiB,CAAC,CAACG,CAAK;AAAA,MAGhC,UAAAH,EAAO;AAAA,IAAA;AAAA,IAPHA,EAAO;AAAA,EAAA,CAUjB,GACF,CAACJ,CAAK,CAAC;AAEV,SAAIE,EAAsB,2BAGvBM,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAoB,SAAO,IAC1B,UAAA,gBAAAC,EAACC,KAAO,SAAQ,WAAU,WAAU,WACjC,UAAA;AAAA,MAAAV;AAAA,MACD,gBAAAI,EAACO,GAAA,EAAY,WAAU,eAAA,CAAe;AAAA,IAAA,EAAA,CACxC,EAAA,CACF;AAAA,IACA,gBAAAP,EAACQ,GAAA,EAAoB,OAAM,OACxB,UAAAX,EAAA,CACH;AAAA,EAAA,GACF,IAbuC;AAe3C;"}
+{"version":3,"file":"DataTableColumnFilter.js","sources":["../../src/DataTable/DataTableColumnFilter.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport React, { FC, useMemo } from 'react';\n\nimport { Button } from '../Button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport { DataTableProps } from './DataTable.types';\n\n// TODO: refactor this component to use the new Table component\nexport const DataTableColumnFilter: FC<DataTableProps> = (props) => {\n  const {\n    table,\n    columnsLabel = 'Columns',\n  } = props;\n\n  const columnsCheckboxRender = useMemo(() => {\n    return table\n      .getAllColumns()\n      .filter((column) => column.getCanHide())\n      .map((column) => {\n        return (\n          <DropdownMenuCheckboxItem\n            key={column.id}\n            className=\"capitalize\"\n            checked={column.getIsVisible()}\n            onCheckedChange={(value) =>\n              column.toggleVisibility(!!value)\n            }\n          >\n            {column.id}\n          </DropdownMenuCheckboxItem>\n        );\n      })\n  }, [table])\n\n  if(!columnsCheckboxRender.length) return null;\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" className=\"ml-auto\">\n          {columnsLabel}\n          <ChevronDown className=\"ml-2 h-4 w-4\" />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        {columnsCheckboxRender}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n"],"names":["DataTableColumnFilter","props","table","columnsLabel","columnsCheckboxRender","useMemo","column","jsx","DropdownMenuCheckboxItem","value","DropdownMenu","DropdownMenuTrigger","jsxs","Button","ChevronDown","DropdownMenuContent"],"mappings":";;;;;;AAeO,MAAMA,IAA4C,CAACC,MAAU;AAClE,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,EAAA,IACbF,GAEEG,IAAwBC,EAAQ,MAC7BH,EACJ,gBACA,OAAO,CAACI,MAAWA,EAAO,WAAA,CAAY,EACtC,IAAI,CAACA,MAEF,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,SAASF,EAAO,aAAA;AAAA,MAChB,iBAAiB,CAACG,MAChBH,EAAO,iBAAiB,CAAC,CAACG,CAAK;AAAA,MAGhC,UAAAH,EAAO;AAAA,IAAA;AAAA,IAPHA,EAAO;AAAA,EAAA,CAUjB,GACF,CAACJ,CAAK,CAAC;AAEV,SAAIE,EAAsB,2BAGvBM,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAH,EAACI,GAAA,EAAoB,SAAO,IAC1B,UAAA,gBAAAC,EAACC,KAAO,SAAQ,WAAU,WAAU,WACjC,UAAA;AAAA,MAAAV;AAAA,MACD,gBAAAI,EAACO,GAAA,EAAY,WAAU,eAAA,CAAe;AAAA,IAAA,EAAA,CACxC,EAAA,CACF;AAAA,IACA,gBAAAP,EAACQ,GAAA,EAAoB,OAAM,OACxB,UAAAX,EAAA,CACH;AAAA,EAAA,GACF,IAbuC;AAe3C;"}

package/DataTable/useDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataTable.js","sources":["../../src/DataTable/useDataTable.ts"],"sourcesContent":["import React from 'react';\r\nimport {\r\n  ColumnFiltersState,\r\n  SortingState,\r\n  VisibilityState,\r\n  getCoreRowModel,\r\n  getFilteredRowModel,\r\n  getPaginationRowModel,\r\n  getSortedRowModel,\r\n  useReactTable,\r\n} from '@tanstack/react-table';\r\n\r\n// TODO: refactor any type\r\nexport const useDataTable = (data: any, columns: any) => {\r\n  const [sorting, setSorting] = React.useState<SortingState>([]);\r\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\r\n    []\r\n  );\r\n  const [columnVisibility, setColumnVisibility] =\r\n    React.useState<VisibilityState>({});\r\n\r\n  const table = useReactTable({\r\n    data,\r\n    columns,\r\n    onSortingChange: setSorting,\r\n    onColumnFiltersChange: setColumnFilters,\r\n    getCoreRowModel: getCoreRowModel(),\r\n    getPaginationRowModel: getPaginationRowModel(),\r\n    getSortedRowModel: getSortedRowModel(),\r\n    getFilteredRowModel: getFilteredRowModel(),\r\n    onColumnVisibilityChange: setColumnVisibility,\r\n    enableRowSelection: true,\r\n    manualPagination: true,\r\n    manualSorting: true,\r\n    manualFiltering: true,\r\n    state: {\r\n      sorting,\r\n      columnFilters,\r\n      columnVisibility,\r\n    },\r\n  });\r\n\r\n  return { table };\r\n};\r\n"],"names":["useDataTable","data","columns","sorting","setSorting","React","columnFilters","setColumnFilters","columnVisibility","setColumnVisibility","useReactTable","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel"],"mappings":";;AAaO,MAAMA,IAAe,CAACC,GAAWC,MAAiB;AACvD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAuB,CAAA,CAAE,GACvD,CAACC,GAAeC,CAAgB,IAAIF,EAAM;AAAA,IAC9C,CAAA;AAAA,EAAC,GAEG,CAACG,GAAkBC,CAAmB,IAC1CJ,EAAM,SAA0B,CAAA,CAAE;AAuBpC,SAAO,EAAE,OArBKK,EAAc;AAAA,IAC1B,MAAAT;AAAA,IACA,SAAAC;AAAA,IACA,iBAAiBE;AAAA,IACjB,uBAAuBG;AAAA,IACvB,iBAAiBI,EAAA;AAAA,IACjB,uBAAuBC,EAAA;AAAA,IACvB,mBAAmBC,EAAA;AAAA,IACnB,qBAAqBC,EAAA;AAAA,IACrB,0BAA0BL;AAAA,IAC1B,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,OAAO;AAAA,MACL,SAAAN;AAAA,MACA,eAAAG;AAAA,MACA,kBAAAE;AAAA,IAAA;AAAA,EACF,CACD,EAEQ;AACX;"}
+{"version":3,"file":"useDataTable.js","sources":["../../src/DataTable/useDataTable.ts"],"sourcesContent":["import React from 'react';\nimport {\n  ColumnFiltersState,\n  SortingState,\n  VisibilityState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\n// TODO: refactor any type\nexport const useDataTable = (data: any, columns: any) => {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  );\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({});\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    enableRowSelection: true,\n    manualPagination: true,\n    manualSorting: true,\n    manualFiltering: true,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n    },\n  });\n\n  return { table };\n};\n"],"names":["useDataTable","data","columns","sorting","setSorting","React","columnFilters","setColumnFilters","columnVisibility","setColumnVisibility","useReactTable","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel"],"mappings":";;AAaO,MAAMA,IAAe,CAACC,GAAWC,MAAiB;AACvD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAAuB,CAAA,CAAE,GACvD,CAACC,GAAeC,CAAgB,IAAIF,EAAM;AAAA,IAC9C,CAAA;AAAA,EAAC,GAEG,CAACG,GAAkBC,CAAmB,IAC1CJ,EAAM,SAA0B,CAAA,CAAE;AAuBpC,SAAO,EAAE,OArBKK,EAAc;AAAA,IAC1B,MAAAT;AAAA,IACA,SAAAC;AAAA,IACA,iBAAiBE;AAAA,IACjB,uBAAuBG;AAAA,IACvB,iBAAiBI,EAAA;AAAA,IACjB,uBAAuBC,EAAA;AAAA,IACvB,mBAAmBC,EAAA;AAAA,IACnB,qBAAqBC,EAAA;AAAA,IACrB,0BAA0BL;AAAA,IAC1B,oBAAoB;AAAA,IACpB,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,OAAO;AAAA,MACL,SAAAN;AAAA,MACA,eAAAG;AAAA,MACA,kBAAAE;AAAA,IAAA;AAAA,EACF,CACD,EAEQ;AACX;"}