@oneplatformdev/ui 0.1.99-beta.36 → 0.1.99-beta.37

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: 'UI/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) Nested options tree */\r\nexport const NestedOptions: Story = {\r\n  args: {\r\n    fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\r\n  },\r\n  render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 10) 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","NestedOptions","OnMountPrefetch"],"mappings":";;;AAUA,MAAMA,IAAQ,CAACC,MAAe,IAAI,QAAQ,CAACC,MAAM,WAAWA,GAAGD,CAAE,CAAC,GAE5DE,IAAU,CAACC,IAA0B,OAAyB;AAClE,QAAMC,IAAwB,CAAA,GACxBC,IAAO,CAACC,MAA4B;AACxC,QAAKA,GAAM;AACX,iBAAWC,KAAKD;AACd,QAAAF,EAAI,KAAKG,CAAC,GACNA,EAAE,OAAO,UAAQF,EAAKE,EAAE,KAAK;AAAA,EAErC;AACA,SAAAF,EAAKF,CAAK,GACHC;AACT,GAEMI,IACJ,CAACC,GAAuBC,IAAU,QAChC,OAAOC,MAAoB;AACzB,QAAMZ,EAAMW,CAAO;AAEnB,QAAME,KAAKD,KAAU,IAAI,KAAA,EAAO,YAAA;AAChC,MAAI,CAACC,EAAG,QAAOH;AAIf,QAAMI,IAAUX,EAAQO,CAAG,GACrBK,IAAgB,IAAI;AAAA,IACxBD,EACG,OAAO,CAACE,MAAM,OAAOA,EAAE,KAAK,EAAE,YAAA,EAAc,SAASH,CAAC,CAAC,EACvD,IAAI,CAACG,MAAM,OAAOA,EAAE,KAAK,CAAC;AAAA,EAAA,GAGzBC,IAAa,CAACV,MACXA,EACJ,IAAI,CAACC,MAAM;AACV,UAAMU,IAAQV,EAAE,OAAO,SAASS,EAAWT,EAAE,KAAK,IAAI;AAKtD,WAAI,EAHFO,EAAc,IAAI,OAAOP,EAAE,KAAK,CAAC,KACjC,OAAOA,EAAE,KAAK,EAAE,YAAA,EAAc,SAASK,CAAC,MAExB,CAACK,GAAO,SAAe,OAClC,EAAE,GAAGV,GAAG,OAAAU,EAAA;AAAA,EACjB,CAAC,EACA,OAAO,OAAO;AAGnB,SAAOD,EAAWP,CAAG;AACvB,GAEES,IAAiC;AAAA,EACrC,EAAE,OAAO,MAAM,OAAO,UAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,UAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,QAAA;AAAA,EACtB,EAAE,OAAO,MAAM,OAAO,QAAA;AACxB,GAEMC,IAAmC;AAAA,EACvC;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,MACL,EAAE,OAAO,MAAM,OAAO,UAAA;AAAA,MACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,MACtB,EAAE,OAAO,MAAM,OAAO,UAAA;AAAA,MACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,IAAS;AAAA,EACjC;AAAA,EAEF;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,MACL,EAAE,OAAO,MAAM,OAAO,gBAAA;AAAA,MACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,MACtB,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,IAAS;AAAA,EACjC;AAEJ;AAMA,SAASC,EAAmB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC3E,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAiCJ,CAAY,GAGjEK,IAAeC;AAAA,IACnB,MAAML,EAAK;AAAA;AAAA,IAEX,CAAA;AAAA,EAAC;AAGH,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAU,GAAGR,GAAM,OAAAC,GAAc,UAAUC,GAAU,cAAAE,GAA4B;AAAA,IAClF,gBAAAE,EAAC,OAAA,EAAI,WAAU,sCAAqC,UAAA;AAAA,MAAA;AAAA,wBAC1C,QAAA,EAAK,WAAU,aAAa,UAAA,OAAOL,KAAS,EAAE,EAAA,CAAE;AAAA,IAAA,EAAA,CAC1D;AAAA,EAAA,GACF;AAEJ;AAEA,MAAMQ,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAActB,EAAmBU,GAAc,GAAG;AAAA,EAAA;AAAA,EAEpD,UAAU;AAAA,IACR,cAAc,EAAE,SAAS,GAAA;AAAA,IACzB,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,aAAa,EAAE,SAAS,GAAA;AAAA,IACxB,oBAAoB,EAAE,SAAS,GAAA;AAAA,IAC/B,gBAAgB,EAAE,SAAS,GAAA;AAAA,IAC3B,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,OAAO,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAE1B,YAAY;AAAA,IACV,CAACc,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GAOaC,IAAiB;AAAA,EAC5B,QAAQ,CAACX,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGaY,IAA2B;AAAA,EACtC,QAAQ,CAACZ,MAAS,gBAAAO,EAACT,KAAoB,GAAGE,GAAM,cAAa,KAAA,CAAK;AACpE,GAGaa,IAAkB;AAAA,EAC7B,MAAM,EAAE,UAAU,GAAA;AAAA,EAClB,QAAQ,CAACb,MAAS,gBAAAO,EAACT,KAAoB,GAAGE,GAAM,cAAa,KAAA,CAAK;AACpE,GAGac,IAA+B;AAAA,EAC1C,MAAM;AAAA,IACJ,SAASlB;AAAA,IACT,cAAc,YAAYA;AAAA,EAAA;AAAA,EAE5B,QAAQ,CAACI,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGae,IAA0B;AAAA,EACrC,MAAM;AAAA,IACJ,cAAc7B,EAAmBU,GAAc,IAAI;AAAA,EAAA;AAAA,EAErD,QAAQ,CAACI,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGagB,IAA8B;AAAA,EACzC,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,aAAa,CAACC,MAAoC;AAChD,YAAMC,IAAY,EAAQD,EAAG,QAAQ;AACrC,aACE,gBAAAV;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,UAAU,CAACW;AAAA,UACX,SAAS,MAAM;AACb,kBAAMC,IAAIF,EAAG,OAAO,KAAA,GACdG,IAAuB,EAAE,OAAOD,GAAG,OAAO,WAAWA,CAAC,IAAA;AAC5D,YAAAF,EAAG,WAAW,CAACG,CAAI,CAAC,GACpBH,EAAG,WAAW,EAAK;AAAA,UACrB;AAAA,UACD,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAIL;AAAA,EAAA;AAAA,EAEF,QAAQ,CAACjB,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGaqB,IAAgC;AAAA,EAC3C,MAAM;AAAA,IACJ,oBAAoB,CAACJ,MACnB,gBAAAX,EAAC,OAAA,EAAI,WAAU,6EACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,QAAA,EAAK,UAAA;AAAA,QAAA;AAAA,0BACM,QAAA,EAAK,WAAU,aAAa,UAAAW,EAAG,QAAQ,OAAA,CAAO;AAAA,MAAA,GAC1D;AAAA,MACA,gBAAAV;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM;AACb,YAAAU,EAAG,UAAU,EAAE,GACfA,EAAG,WAAW,EAAK;AAAA,UACrB;AAAA,UACD,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,EAAA,CACF;AAAA,EAAA;AAAA,EAGJ,QAAQ,CAACjB,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGasB,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,gBAAgB,CAACL,MACf,gBAAAV;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM;AACb,UAAAU,EAAG,UAAU,EAAE,GACfA,EAAG,QAAQ,EAAK;AAAA,QAClB;AAAA,QACD,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED;AAAA,EAGJ,QAAQ,CAACjB,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGauB,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,cAAcrC,EAAmBW,GAAgB,GAAG;AAAA,EAAA;AAAA,EAEtD,QAAQ,CAACG,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD,GAGawB,IAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,cAActC,EAAmBU,GAAc,GAAG;AAAA,IAClD,SAAS,OAAOqB,MAAoC;AAClD,YAAMxC,EAAM,GAAG,GACfwC,EAAG,WAAWrB,CAAY,GAC1BqB,EAAG,WAAW,EAAK;AAAA,IACrB;AAAA,EAAA;AAAA,EAEF,QAAQ,CAACjB,MAAS,gBAAAO,EAACT,GAAA,EAAoB,GAAGE,EAAA,CAAM;AAClD;"}
+{"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: 'UI/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) Nested options tree */\nexport const NestedOptions: Story = {\n  args: {\n    fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\n  },\n  render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 10) 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","NestedOptions","OnMountPrefetch"],"mappings":"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"}

package/Combobox/ComboboxOptionItem.js

@@ -1,12 +1,12 @@
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import { Check as f } from "lucide-react";
+import { CommandItem as f } from "../Command/Command.js";
+import { Check as d } from "lucide-react";
 import { cn as t } from "@oneplatformdev/utils";
-import { CommandItem as d } from "../Command/Command.js";
 const u = 8, C = c((i, n) => {
   const { children: r, setOpen: m, option: e, onChangeOption: o, value: l = "", deep: p = 0 } = i;
   return /* @__PURE__ */ s(
-    d,
+    f,
     {
       ref: n,
       value: e.value,
@@ -28,7 +28,7 @@ const u = 8, C = c((i, n) => {
           }
         ),
         /* @__PURE__ */ a(
-          f,
+          d,
           {
             className: t(
               "ml-auto",

package/Combobox/ComboboxOptionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { forwardRef, 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 = 8;\r\n\r\nexport const ComboboxOptionItem = forwardRef<\r\n  HTMLDivElement,\r\n  PropsWithChildren<IComboboxOptionsNodeProps>\r\n>((props, ref) => {\r\n  const { children, setOpen, option, onChangeOption, value = '', deep = 0 } = props;\r\n  return (\r\n    <CommandItem\r\n      ref={ref}\r\n      key={option.value}\r\n      value={option.value}\r\n      onSelect={() => {\r\n        if (value === option.value) {\r\n          onChangeOption?.({ value: '', label: '' });\r\n        } else {\r\n          onChangeOption?.(option);\r\n        }\r\n        setOpen(false);\r\n      }}\r\n      style={{\r\n        paddingLeft: (deep + 1) * DEEP_OFFSET,\r\n      }}\r\n    >\r\n      {children}\r\n      <span\r\n        className={cn(\r\n          'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2'\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","forwardRef","props","ref","children","setOpen","option","onChangeOption","value","deep","jsxs","CommandItem","jsx","cn","Check"],"mappings":";;;;;AAMA,MAAMA,IAAc,GAEPC,IAAqBC,EAGhC,CAACC,GAAOC,MAAQ;AAChB,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,QAAAC,GAAQ,gBAAAC,GAAgB,OAAAC,IAAQ,IAAI,MAAAC,IAAO,EAAA,IAAMP;AAC5E,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MAEA,OAAOG,EAAO;AAAA,MACd,UAAU,MAAM;AACd,QAAIE,MAAUF,EAAO,QACnBC,IAAiB,EAAE,OAAO,IAAI,OAAO,IAAI,IAEzCA,IAAiBD,CAAM,GAEzBD,EAAQ,EAAK;AAAA,MACf;AAAA,MACA,OAAO;AAAA,QACL,cAAcI,IAAO,KAAKV;AAAA,MAAA;AAAA,MAG3B,UAAA;AAAA,QAAAK;AAAA,QACD,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,YAAA;AAAA,YAGD,UAAAP,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAM;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAL,MAAUF,EAAO,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IA3BKA,EAAO;AAAA,EAAA;AA8BlB,CAAC;"}
+{"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { forwardRef, 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 = 8;\n\nexport const ComboboxOptionItem = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<IComboboxOptionsNodeProps>\n>((props, ref) => {\n  const { children, setOpen, option, onChangeOption, value = '', deep = 0 } = props;\n  return (\n    <CommandItem\n      ref={ref}\n      key={option.value}\n      value={option.value}\n      onSelect={() => {\n        if (value === option.value) {\n          onChangeOption?.({ value: '', label: '' });\n        } else {\n          onChangeOption?.(option);\n        }\n        setOpen(false);\n      }}\n      style={{\n        paddingLeft: (deep + 1) * DEEP_OFFSET,\n      }}\n    >\n      {children}\n      <span\n        className={cn(\n          'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2'\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","forwardRef","props","ref","children","setOpen","option","onChangeOption","value","deep","jsxs","CommandItem","jsx","cn","Check"],"mappings":";;;;;AAMA,MAAMA,IAAc,GAEPC,IAAqBC,EAGhC,CAACC,GAAOC,MAAQ;AAChB,QAAM,EAAE,UAAAC,GAAU,SAAAC,GAAS,QAAAC,GAAQ,gBAAAC,GAAgB,OAAAC,IAAQ,IAAI,MAAAC,IAAO,EAAA,IAAMP;AAC5E,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MAEA,OAAOG,EAAO;AAAA,MACd,UAAU,MAAM;AACd,QAAIE,MAAUF,EAAO,QACnBC,IAAiB,EAAE,OAAO,IAAI,OAAO,IAAI,IAEzCA,IAAiBD,CAAM,GAEzBD,EAAQ,EAAK;AAAA,MACf;AAAA,MACA,OAAO;AAAA,QACL,cAAcI,IAAO,KAAKV;AAAA,MAAA;AAAA,MAG3B,UAAA;AAAA,QAAAK;AAAA,QACD,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,YAAA;AAAA,YAGD,UAAAP,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAM;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAL,MAAUF,EAAO,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IA3BKA,EAAO;AAAA,EAAA;AA8BlB,CAAC;"}

package/Combobox/ComboboxOptions.js

@@ -1,14 +1,15 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
 import { forwardRef as m, useState as b } from "react";
+import { Collapsible as u, CollapsibleTrigger as g, CollapsibleContent as h } from "../Collapsible/Collapsible.js";
 import { ComboboxOptionItem as c } from "./ComboboxOptionItem.js";
-import { ChevronDownIcon as u } from "lucide-react";
+import { ChevronDownIcon as v } from "lucide-react";
 import { cn as i } from "@oneplatformdev/utils";
-import { Collapsible as g, CollapsibleTrigger as h, CollapsibleContent as v } from "../Collapsible/Collapsible.js";
 import { ButtonIcon as C } from "../ButtonIcon/ButtonIcon.js";
+import "../ButtonIcon/buttonIconVariants.js";
 const p = m((o, n) => {
   const { option: a, deep: s = 0 } = o, [t, l] = b(!0);
   return a?.items?.length ? /* @__PURE__ */ f(
-    g,
+    u,
     {
       ref: n,
       open: t,
@@ -16,7 +17,7 @@ const p = m((o, n) => {
       "data-opened": t,
       className: i("group/collapsible"),
       children: [
-        /* @__PURE__ */ e(c, { ...o, children: /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "aspect-square size-6 relative", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(c, { ...o, children: /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "aspect-square size-6 relative", children: /* @__PURE__ */ e(
           C,
           {
             onClick: (r) => {
@@ -31,7 +32,7 @@ const p = m((o, n) => {
               "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent"
             ),
             icon: /* @__PURE__ */ e(
-              u,
+              v,
               {
                 className: i(
                   "transition-transform",
@@ -41,7 +42,7 @@ const p = m((o, n) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: a?.items.map((r) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: a?.items.map((r) => /* @__PURE__ */ e(
           p,
           {
             ...o,
@@ -53,12 +54,12 @@ const p = m((o, n) => {
       ]
     }
   ) : /* @__PURE__ */ e(c, { ...o, ref: n });
-}), y = m((o, n) => {
+}), D = m((o, n) => {
   const { options: a = [], ...s } = o;
   return /* @__PURE__ */ e("div", { ref: n, className: "flex flex-col gap-0", children: a.map((t) => /* @__PURE__ */ e(p, { ...s, option: t }, t.value)) });
 });
 export {
-  y as ComboboxOptions,
+  D as ComboboxOptions,
   p 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 { forwardRef, 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 { ChevronDownIcon } from 'lucide-react';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { ButtonIcon } from \"../ButtonIcon\";\r\n\r\nexport const ComboboxOptionsNode = forwardRef<\r\n  HTMLDivElement,\r\n  IComboboxOptionsNodeProps\r\n>((props, ref) => {\r\n  const { option, deep = 0 } = props;\r\n\r\n  const [open, onOpenChange] = useState(true);\r\n\r\n  if (!option?.items?.length) {\r\n    return <ComboboxOptionItem {...props} ref={ref} />;\r\n  }\r\n  return (\r\n    <Collapsible\r\n      ref={ref}\r\n      open={open}\r\n      onOpenChange={onOpenChange}\r\n      data-opened={open}\r\n      className={cn('group/collapsible')}\r\n    >\r\n      <ComboboxOptionItem {...props}>\r\n        <CollapsibleTrigger asChild>\r\n          <div className='aspect-square size-6 relative'>\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              size=\"md\"\r\n              className={cn(\r\n                'absolute -top-1.5 -left-2 size-9',\r\n                'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\r\n              )}\r\n              icon={(\r\n                <ChevronDownIcon\r\n                  className={cn(\r\n                    'transition-transform',\r\n                    open && 'rotate-180'\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 = forwardRef<\r\n  HTMLDivElement,\r\n  IComboboxOptionsProps\r\n>((props, ref) => {\r\n  const { options = [], ...rest } = props;\r\n  return (\r\n    <div ref={ref} 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","forwardRef","props","ref","option","deep","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","CollapsibleTrigger","ButtonIcon","e","prev","ChevronDownIcon","CollapsibleContent","opt","ComboboxOptions","options","rest"],"mappings":";;;;;;;AAeO,MAAMA,IAAsBC,EAGjC,CAACC,GAAOC,MAAQ;AAChB,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,EAAA,IAAMH,GAEvB,CAACI,GAAMC,CAAY,IAAIC,EAAS,EAAI;AAE1C,SAAKJ,GAAQ,OAAO,SAIlB,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,MAAAG;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MAEjC,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAoB,GAAGX,GACtB,UAAA,gBAAAU,EAACE,GAAA,EAAmB,SAAO,IACzB,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,SAAS,CAACC,MAAM;AACd,cAAAA,GAAG,eAAA,GACHA,GAAG,gBAAA,GACHT,EAAa,CAACU,MAAS,CAACA,CAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAK;AAAA,YACL,WAAWN;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,MACE,gBAAAC;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,WAAWP;AAAA,kBACT;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,UAAAR,GAAQ,MAAM,IAAI,CAACgB,MAEhB,gBAAAR;AAAA,UAACZ;AAAA,UAAA;AAAA,YAEE,GAAGE;AAAA,YACJ,MAAMG,IAAO;AAAA,YACb,QAAQe;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IArDK,gBAAAR,EAACC,GAAA,EAAoB,GAAGX,GAAO,KAAAC,EAAA,CAAU;AAwDpD,CAAC,GAEYkB,IAAkBpB,EAG7B,CAACC,GAAOC,MAAQ;AAChB,QAAM,EAAE,SAAAmB,IAAU,CAAA,GAAI,GAAGC,MAASrB;AAClC,2BACG,OAAA,EAAI,KAAAC,GAAU,WAAU,uBACtB,YAAQ,IAAI,CAACC,MACZ,gBAAAQ,EAACZ,KAAwC,GAAGuB,GAAM,QAAAnB,KAAxBA,EAAO,KAAiC,CACnE,GACH;AAEJ,CAAC;"}
+{"version":3,"file":"ComboboxOptions.js","sources":["../../src/Combobox/ComboboxOptions.tsx"],"sourcesContent":["import {\n  IComboboxOptionsNodeProps,\n  IComboboxOptionsProps,\n} from './Combobox.types';\nimport { forwardRef, useState } from 'react';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '../Collapsible';\nimport { ComboboxOptionItem } from './ComboboxOptionItem';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\nimport { ButtonIcon } from \"../ButtonIcon\";\n\nexport const ComboboxOptionsNode = forwardRef<\n  HTMLDivElement,\n  IComboboxOptionsNodeProps\n>((props, ref) => {\n  const { option, deep = 0 } = props;\n\n  const [open, onOpenChange] = useState(true);\n\n  if (!option?.items?.length) {\n    return <ComboboxOptionItem {...props} ref={ref} />;\n  }\n  return (\n    <Collapsible\n      ref={ref}\n      open={open}\n      onOpenChange={onOpenChange}\n      data-opened={open}\n      className={cn('group/collapsible')}\n    >\n      <ComboboxOptionItem {...props}>\n        <CollapsibleTrigger asChild>\n          <div className='aspect-square size-6 relative'>\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              size=\"md\"\n              className={cn(\n                'absolute -top-1.5 -left-2 size-9',\n                'bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent'\n              )}\n              icon={(\n                <ChevronDownIcon\n                  className={cn(\n                    'transition-transform',\n                    open && 'rotate-180'\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 = forwardRef<\n  HTMLDivElement,\n  IComboboxOptionsProps\n>((props, ref) => {\n  const { options = [], ...rest } = props;\n  return (\n    <div ref={ref} 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","forwardRef","props","ref","option","deep","open","onOpenChange","useState","jsxs","Collapsible","cn","jsx","ComboboxOptionItem","CollapsibleTrigger","ButtonIcon","e","prev","ChevronDownIcon","CollapsibleContent","opt","ComboboxOptions","options","rest"],"mappings":";;;;;;;;AAeO,MAAMA,IAAsBC,EAGjC,CAACC,GAAOC,MAAQ;AAChB,QAAM,EAAE,QAAAC,GAAQ,MAAAC,IAAO,EAAA,IAAMH,GAEvB,CAACI,GAAMC,CAAY,IAAIC,EAAS,EAAI;AAE1C,SAAKJ,GAAQ,OAAO,SAIlB,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,MAAAG;AAAA,MACA,cAAAC;AAAA,MACA,eAAaD;AAAA,MACb,WAAWK,EAAG,mBAAmB;AAAA,MAEjC,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAoB,GAAGX,GACtB,UAAA,gBAAAU,EAACE,GAAA,EAAmB,SAAO,IACzB,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,iCACb,UAAA,gBAAAA;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,SAAS,CAACC,MAAM;AACd,cAAAA,GAAG,eAAA,GACHA,GAAG,gBAAA,GACHT,EAAa,CAACU,MAAS,CAACA,CAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,MAAK;AAAA,YACL,WAAWN;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,MACE,gBAAAC;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,WAAWP;AAAA,kBACT;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,UAAAR,GAAQ,MAAM,IAAI,CAACgB,MAEhB,gBAAAR;AAAA,UAACZ;AAAA,UAAA;AAAA,YAEE,GAAGE;AAAA,YACJ,MAAMG,IAAO;AAAA,YACb,QAAQe;AAAA,UAAA;AAAA,UAHHA,EAAI;AAAA,QAAA,CAMd,GACH,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IArDK,gBAAAR,EAACC,GAAA,EAAoB,GAAGX,GAAO,KAAAC,EAAA,CAAU;AAwDpD,CAAC,GAEYkB,IAAkBpB,EAG7B,CAACC,GAAOC,MAAQ;AAChB,QAAM,EAAE,SAAAmB,IAAU,CAAA,GAAI,GAAGC,MAASrB;AAClC,2BACG,OAAA,EAAI,KAAAC,GAAU,WAAU,uBACtB,YAAQ,IAAI,CAACC,MACZ,gBAAAQ,EAACZ,KAAwC,GAAGuB,GAAM,QAAAnB,KAAxBA,EAAO,KAAiC,CACnE,GACH;AAEJ,CAAC;"}

package/Command/Command.js

@@ -1,9 +1,10 @@
 import { jsx as o, jsxs as r } from "react/jsx-runtime";
 import { Command as n } from "cmdk";
-import { Command as G } from "cmdk";
-import { SearchIcon as i } from "lucide-react";
+import { Command as L } from "cmdk";
+import { SearchIcon as c } from "lucide-react";
 import { cn as a } from "@oneplatformdev/utils";
-import { Dialog as l, DialogHeader as u, DialogTitle as p, DialogDescription as g, DialogContent as f } from "../Dialog/Dialog.js";
+import { Dialog as l, DialogHeader as p, DialogTitle as u, DialogDescription as g, DialogContent as f } from "../Dialog/Dialog.js";
+import "../Dialog/DialogOverlayScope.js";
 function h({
   className: e,
   ...t
@@ -20,17 +21,17 @@ function h({
     }
   );
 }
-function C({
+function y({
   title: e = "Command Palette",
   description: t = "Search for a command to run...",
   children: d,
   className: m,
   showCloseButton: s = !0,
-  ...c
+  ...i
 }) {
-  return /* @__PURE__ */ r(l, { ...c, children: [
-    /* @__PURE__ */ r(u, { className: "sr-only", children: [
-      /* @__PURE__ */ o(p, { children: e }),
+  return /* @__PURE__ */ r(l, { ...i, children: [
+    /* @__PURE__ */ r(p, { className: "sr-only", children: [
+      /* @__PURE__ */ o(u, { children: e }),
       /* @__PURE__ */ o(g, { children: t })
     ] }),
     /* @__PURE__ */ o(
@@ -43,7 +44,7 @@ function C({
     )
   ] });
 }
-function y({
+function N({
   className: e,
   ...t
 }) {
@@ -53,7 +54,7 @@ function y({
       "data-slot": "command-input-wrapper",
       className: "flex h-9 items-center gap-2 border-b px-3",
       children: [
-        /* @__PURE__ */ o(i, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ o(c, { className: "size-4 shrink-0 opacity-50" }),
         /* @__PURE__ */ o(
           n.Input,
           {
@@ -69,7 +70,7 @@ function y({
     }
   );
 }
-function N({
+function b({
   className: e,
   ...t
 }) {
@@ -85,7 +86,7 @@ function N({
     }
   );
 }
-function b({
+function D({
   ...e
 }) {
   return /* @__PURE__ */ o(
@@ -97,7 +98,7 @@ function b({
     }
   );
 }
-function D({
+function I({
   className: e,
   ...t
 }) {
@@ -113,7 +114,7 @@ function D({
     }
   );
 }
-function I({
+function S({
   className: e,
   ...t
 }) {
@@ -126,7 +127,7 @@ function I({
     }
   );
 }
-function S({
+function z({
   className: e,
   ...t
 }) {
@@ -142,7 +143,7 @@ function S({
     }
   );
 }
-function z({
+function j({
   className: e,
   ...t
 }) {
@@ -160,14 +161,14 @@ function z({
 }
 export {
   h as Command,
-  C as CommandDialog,
-  b as CommandEmpty,
-  D as CommandGroup,
-  y as CommandInput,
-  S as CommandItem,
-  N as CommandList,
-  G as CommandPrimitive,
-  I as CommandSeparator,
-  z as CommandShortcut
+  y as CommandDialog,
+  D as CommandEmpty,
+  I as CommandGroup,
+  N as CommandInput,
+  z as CommandItem,
+  b as CommandList,
+  L as CommandPrimitive,
+  S as CommandSeparator,
+  j 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\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                        className,\r\n                        ...props\r\n                      }: React.ComponentProps<typeof CommandPrimitive.Input>) {\r\n  return (\r\n    <div\r\n      data-slot=\"command-input-wrapper\"\r\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\r\n    >\r\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\r\n      <CommandPrimitive.Input\r\n        data-slot=\"command-input\"\r\n        className={cn(\r\n          \"placeholder:text-muted-foreground 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        {...props}\r\n      />\r\n    </div>\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        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none 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        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","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\"\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                        className,\n                        ...props\n                      }: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\n    >\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"placeholder:text-muted-foreground 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        {...props}\n      />\n    </div>\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        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none 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        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","SearchIcon","CommandList","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut"],"mappings":"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"}

package/DataTable/DataTable.js

@@ -1,10 +1,11 @@
 import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { Button as m } from "../Button/Button.js";
+import "../Button/buttonVariants.js";
+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 = ({
+import { ChevronDown as b } from "lucide-react";
+const k = ({
   table: r,
   ToolBar: a,
   tColumns: s = "Columns",
@@ -13,12 +14,12 @@ 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: r.getAllColumns().filter((e) => e.getCanHide()).map((e) => /* @__PURE__ */ l(
         u,
         {
           className: "capitalize",
@@ -30,12 +31,12 @@ const R = ({
       )) })
     ] })
   ] }),
-  /* @__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(
+  /* @__PURE__ */ l("div", { className: "rounded-md border", children: /* @__PURE__ */ i(C, { children: [
+    /* @__PURE__ */ l(f, { children: r.getHeaderGroups().map((e) => /* @__PURE__ */ l(t, { children: e.headers.map((n) => /* @__PURE__ */ l(w, { 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(x, { children: r.getRowModel().rows?.length ? r.getRowModel().rows.map((e) => /* @__PURE__ */ l(
       t,
       {
         "data-state": e.getIsSelected() && "selected",
@@ -56,6 +57,6 @@ const R = ({
   ] }) })
 ] });
 export {
-  R as DataTable
+  k 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.d.ts

@@ -1,4 +1,4 @@
 export declare const useDataTable: (data: any, columns: any) => {
-    table: import('@tanstack/table-core').Table<unknown>;
+    table: import('@tanstack/react-table').Table<unknown>;
 };
 //# sourceMappingURL=useDataTable.d.ts.map

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;"}

package/DatePicker/DatePicker.js

@@ -1,32 +1,33 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import * as i from "react";
 import { format as d } from "date-fns";
 import { Calendar as s } from "lucide-react";
 import { cn as c } from "@oneplatformdev/utils";
-import { uk as t } from "date-fns/locale";
 import { Button as f } from "../Button/Button.js";
+import "../Button/buttonVariants.js";
 import { Calendar as p } from "../Calendar/Calendar.js";
 import { Popover as u, PopoverTrigger as h, PopoverContent as y } from "../Popover/Popover.js";
+import { uk as t } from "date-fns/locale";
 const g = i.forwardRef(
-  (a, l) => {
+  (a, m) => {
     const {
-      selectedDate: e,
-      onDateChange: m,
+      selectedDate: o,
+      onDateChange: l,
       disabled: n = !1
     } = a;
-    return /* @__PURE__ */ o(u, { children: [
-      /* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ e(u, { children: [
+      /* @__PURE__ */ r(h, { asChild: !0, children: /* @__PURE__ */ e(
         f,
         {
-          ref: l,
+          ref: m,
           disabled: n,
           variant: "outline-solid",
           className: c(
             "w-full justify-start text-left font-normal border h-10",
-            !e && "text-muted-foreground"
+            !o && "text-muted-foreground"
           ),
           children: [
-            e ? d(e, "LLL dd, y", { locale: t }) : /* @__PURE__ */ r("span", { children: "dd/mm/yyyy" }),
+            o ? d(o, "LLL dd, y", { locale: t }) : /* @__PURE__ */ r("span", { children: "dd/mm/yyyy" }),
             /* @__PURE__ */ r(s, { className: "mr-2 h-4 w-4 ml-auto" })
           ]
         }
@@ -36,8 +37,8 @@ const g = i.forwardRef(
         {
           mode: "single",
           captionLayout: "dropdown-buttons",
-          selected: e,
-          onSelect: m,
+          selected: o,
+          onSelect: l,
           fromYear: 1960,
           toYear: 2030,
           locale: t