@sth87/shadcn-design-system 0.1.5 → 0.1.7

package/dist/esm/hooks/use-data-table.js

@@ -1,95 +1,97 @@
-import { useReactTable as oe, getFacetedMinMaxValues as ne, getFacetedUniqueValues as ie, getFacetedRowModel as se, getSortedRowModel as ae, getPaginationRowModel as re, getFilteredRowModel as le, getCoreRowModel as ce } from "@tanstack/react-table";
-import { useQueryState as A, parseAsInteger as v, parseAsArrayOf as ue, parseAsString as Y, useQueryStates as ge } from "nuqs";
+import { useReactTable as ie, getFacetedMinMaxValues as se, getFacetedUniqueValues as ae, getFacetedRowModel as re, getSortedRowModel as le, getPaginationRowModel as ce, getFilteredRowModel as ue, getCoreRowModel as ge } from "@tanstack/react-table";
+import { useQueryState as A, parseAsInteger as v, parseAsArrayOf as de, parseAsString as Y, useQueryStates as fe } from "nuqs";
 import * as t from "react";
-import { useDebouncedCallback as de } from "./use-debounced-callback.js";
-import { getSortingStateParser as fe } from "../utils/parsers.js";
-const pe = "page", me = "perPage", Se = "sort", we = "filters", be = "joinOperator", Me = ",", Re = 300, ye = 50;
-function Ee(j) {
+import { useDebouncedCallback as pe } from "./use-debounced-callback.js";
+import { getSortingStateParser as me } from "../utils/parsers.js";
+const Se = "page", we = "perPage", be = "sort", Ce = "filters", Me = "joinOperator", Re = ",", ye = 300, Pe = 50;
+function Ke(j) {
   const {
     columns: g,
     pageCount: U,
-    initialState: a,
+    initialState: s,
     queryKeys: d,
-    history: E = "replace",
-    debounceMs: p = Re,
-    throttleMs: S = ye,
-    clearOnDefault: K = !1,
+    history: O = "replace",
+    debounceMs: p = ye,
+    throttleMs: S = Pe,
+    clearOnDefault: E = !1,
     enableAdvancedFilter: r = !1,
-    scroll: O = !1,
+    scroll: K = !1,
     shallow: w = !0,
     startTransition: x,
     enableNuqs: i = !1,
     ...b
-  } = j, I = d?.page ?? pe, T = d?.perPage ?? me, _ = d?.sort ?? Se, V = d?.filters ?? we, k = d?.joinOperator ?? be, c = t.useMemo(
+  } = j, I = d?.page ?? Se, T = d?.perPage ?? we, _ = d?.sort ?? be, V = d?.filters ?? Ce, k = d?.joinOperator ?? Me, c = t.useMemo(
     () => ({
-      history: E,
-      scroll: O,
+      history: O,
+      scroll: K,
       shallow: w,
       throttleMs: S,
       debounceMs: p,
-      clearOnDefault: K,
+      clearOnDefault: E,
       startTransition: x
     }),
     [
-      E,
       O,
+      K,
       w,
       S,
       p,
-      K,
+      E,
       x
     ]
   ), [B, N] = t.useState(
-    a?.rowSelection ?? {}
-  ), [G, H] = t.useState(a?.columnVisibility ?? {}), [M, m] = i ? A(
+    s?.rowSelection ?? {}
+  ), [G, H] = t.useState(s?.columnVisibility ?? {}), [L, Q] = t.useState(
+    s?.columnOrder ?? []
+  ), [C, m] = i ? A(
     I,
     v.withOptions(c).withDefault(1)
-  ) : t.useState(a?.pagination?.pageIndex ?? 0), [z, R] = i ? A(
+  ) : t.useState(s?.pagination?.pageIndex ?? 0), [z, M] = i ? A(
     T,
-    v.withOptions(c).withDefault(a?.pagination?.pageSize ?? 10)
-  ) : t.useState(a?.pagination?.pageSize ?? 10), y = t.useMemo(() => ({
-    pageIndex: i ? M - 1 : M,
+    v.withOptions(c).withDefault(s?.pagination?.pageSize ?? 10)
+  ) : t.useState(s?.pagination?.pageSize ?? 10), R = t.useMemo(() => ({
+    pageIndex: i ? C - 1 : C,
     // zero-based index
     pageSize: z
-  }), [M, z, i]), L = t.useCallback(
+  }), [C, z, i]), Z = t.useCallback(
     (e) => {
       if (typeof e == "function") {
-        const o = e(y);
+        const o = e(R);
         m(
           i ? o.pageIndex + 1 : o.pageIndex
-        ), R(o.pageSize);
+        ), M(o.pageSize);
       } else
         m(
           i ? e.pageIndex + 1 : e.pageIndex
-        ), R(e.pageSize);
+        ), M(e.pageSize);
     },
-    [y, m, R, i]
-  ), Q = t.useMemo(() => new Set(
+    [R, m, M, i]
+  ), J = t.useMemo(() => new Set(
     g.map((e) => e.id).filter(Boolean)
-  ), [g]), [C, P] = i ? A(
+  ), [g]), [y, P] = i ? A(
     _,
-    fe(Q).withOptions(c).withDefault(a?.sorting ?? [])
-  ) : t.useState(a?.sorting ?? []), Z = t.useCallback(
+    me(J).withOptions(c).withDefault(s?.sorting ?? [])
+  ) : t.useState(s?.sorting ?? []), W = t.useCallback(
     (e) => {
       if (typeof e == "function") {
-        const o = e(C);
+        const o = e(y);
         P(o);
       } else
         P(e);
     },
-    [C, P]
-  ), u = t.useMemo(() => r ? [] : g.filter((e) => e.enableColumnFilter), [g, r]), J = t.useMemo(() => r ? {} : u.reduce((e, o) => (o.meta?.variant === "multiSelect" ? e[o.id ?? ""] = ue(
+    [y, P]
+  ), u = t.useMemo(() => r ? [] : g.filter((e) => e.enableColumnFilter), [g, r]), X = t.useMemo(() => r ? {} : u.reduce((e, o) => (o.meta?.variant === "multiSelect" ? e[o.id ?? ""] = de(
     Y,
-    Me
-  ).withOptions(c) : e[o.id ?? ""] = Y.withOptions(c), e), {}), [u, c, r]), [D, W] = i ? ge(J) : t.useState({}), q = de(
+    Re
+  ).withOptions(c) : e[o.id ?? ""] = Y.withOptions(c), e), {}), [u, c, r]), [D, $] = i ? fe(X) : t.useState({}), q = pe(
     (e) => {
-      m(1), W(e);
+      m(1), $(e);
     },
     p
-  ), X = t.useMemo(() => r ? [] : Object.entries(D).reduce(
+  ), ee = t.useMemo(() => r ? [] : Object.entries(D).reduce(
     (e, [o, n]) => {
       if (n !== null) {
-        const s = u.find((f) => f.id === o)?.meta?.variant === "multiSelect", l = Array.isArray(n) ? n : s && typeof n == "string" && /[^a-zA-Z0-9]/.test(n) ? n.split(/[^a-zA-Z0-9]+/).filter(Boolean) : s ? [n] : n;
+        const a = u.find((f) => f.id === o)?.meta?.variant === "multiSelect", l = Array.isArray(n) ? n : a && typeof n == "string" && /[^a-zA-Z0-9]/.test(n) ? n.split(/[^a-zA-Z0-9]+/).filter(Boolean) : a ? [n] : n;
         e.push({
           id: o,
           value: l
@@ -98,19 +100,19 @@ function Ee(j) {
       return e;
     },
     []
-  ), [D, r, u]), [$, ee] = t.useState(X), te = t.useCallback(
+  ), [D, r, u]), [te, oe] = t.useState(ee), ne = t.useCallback(
     (e) => {
-      r || ee((o) => {
-        const n = typeof e == "function" ? e(o) : e, F = n.reduce((s, l) => {
+      r || oe((o) => {
+        const n = typeof e == "function" ? e(o) : e, F = n.reduce((a, l) => {
           const f = u.find((h) => h.id === l.id);
           if (f) {
             const h = f.meta?.variant === "multiSelect";
-            s[l.id] = l.value;
+            a[l.id] = l.value;
           }
-          return console.log("filterParsers", f, s), s;
+          return console.log("filterParsers", f, a), a;
         }, {});
-        for (const s of o)
-          n.some((l) => l.id === s.id) || (F[s.id] = null);
+        for (const a of o)
+          n.some((l) => l.id === a.id) || (F[a.id] = null);
         return i && q(F), n;
       });
     },
@@ -121,15 +123,16 @@ function Ee(j) {
       i
     ]
   );
-  return { table: oe({
-    initialState: a,
+  return { table: ie({
+    initialState: s,
     pageCount: U,
     state: {
-      pagination: y,
-      sorting: C,
+      pagination: R,
+      sorting: y,
       columnVisibility: G,
+      columnOrder: L,
       rowSelection: B,
-      columnFilters: $
+      columnFilters: te
     },
     defaultColumn: {
       ...b.defaultColumn,
@@ -140,17 +143,18 @@ function Ee(j) {
     },
     enableRowSelection: !0,
     onRowSelectionChange: N,
-    onPaginationChange: L,
-    onSortingChange: Z,
-    onColumnFiltersChange: te,
+    onPaginationChange: Z,
+    onSortingChange: W,
+    onColumnFiltersChange: ne,
     onColumnVisibilityChange: H,
-    getCoreRowModel: ce(),
-    getFilteredRowModel: le(),
-    getPaginationRowModel: re(),
-    getSortedRowModel: ae(),
-    getFacetedRowModel: se(),
-    getFacetedUniqueValues: ie(),
-    getFacetedMinMaxValues: ne(),
+    onColumnOrderChange: Q,
+    getCoreRowModel: ge(),
+    getFilteredRowModel: ue(),
+    getPaginationRowModel: ce(),
+    getSortedRowModel: le(),
+    getFacetedRowModel: re(),
+    getFacetedUniqueValues: ae(),
+    getFacetedMinMaxValues: se(),
     meta: {
       ...b.meta,
       queryKeys: {
@@ -166,6 +170,6 @@ function Ee(j) {
   }), shallow: w, debounceMs: p, throttleMs: S };
 }
 export {
-  Ee as useDataTable
+  Ke as useDataTable
 };
 //# sourceMappingURL=use-data-table.js.map

package/dist/esm/hooks/use-data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-data-table.js","sources":["../../../src/hooks/use-data-table.ts"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-hooks/rules-of-hooks */\n\nimport {\n  type ColumnFiltersState,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type RowSelectionState,\n  type SortingState,\n  type TableOptions,\n  type TableState,\n  type Updater,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n  parseAsArrayOf,\n  parseAsInteger,\n  parseAsString,\n  type SingleParser,\n  type UseQueryStateOptions,\n  useQueryState,\n  useQueryStates,\n} from \"nuqs\";\nimport * as React from \"react\";\n\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getSortingStateParser } from \"@/utils/parsers\";\nimport type { ExtendedColumnSort, QueryKeys } from \"@/types/data-table\";\n\nconst PAGE_KEY = \"page\";\nconst PER_PAGE_KEY = \"perPage\";\nconst SORT_KEY = \"sort\";\nconst FILTERS_KEY = \"filters\";\nconst JOIN_OPERATOR_KEY = \"joinOperator\";\nconst ARRAY_SEPARATOR = \",\";\nconst DEBOUNCE_MS = 300;\nconst THROTTLE_MS = 50;\n\ninterface UseDataTableProps<TData>\n  extends Omit<\n    TableOptions<TData>,\n    // | \"state\"\n    // | \"pageCount\"\n    \"getCoreRowModel\"\n  > {\n  initialState?: Omit<Partial<TableState>, \"sorting\"> & {\n    sorting?: ExtendedColumnSort<TData>[];\n  };\n  queryKeys?: Partial<QueryKeys>;\n  history?: \"push\" | \"replace\";\n  debounceMs?: number;\n  throttleMs?: number;\n  clearOnDefault?: boolean;\n  enableAdvancedFilter?: boolean;\n  scroll?: boolean;\n  shallow?: boolean;\n  startTransition?: React.TransitionStartFunction;\n  enableNuqs?: boolean;\n}\n\nexport function useDataTable<TData>(props: UseDataTableProps<TData>) {\n  const {\n    columns,\n    pageCount,\n    initialState,\n    queryKeys,\n    history = \"replace\",\n    debounceMs = DEBOUNCE_MS,\n    throttleMs = THROTTLE_MS,\n    clearOnDefault = false,\n    enableAdvancedFilter = false,\n    scroll = false,\n    shallow = true,\n    startTransition,\n    enableNuqs = false,\n    ...tableProps\n  } = props;\n  const pageKey = queryKeys?.page ?? PAGE_KEY;\n  const perPageKey = queryKeys?.perPage ?? PER_PAGE_KEY;\n  const sortKey = queryKeys?.sort ?? SORT_KEY;\n  const filtersKey = queryKeys?.filters ?? FILTERS_KEY;\n  const joinOperatorKey = queryKeys?.joinOperator ?? JOIN_OPERATOR_KEY;\n\n  const queryStateOptions = React.useMemo<\n    Omit<UseQueryStateOptions<string>, \"parse\">\n  >(\n    () => ({\n      history,\n      scroll,\n      shallow,\n      throttleMs,\n      debounceMs,\n      clearOnDefault,\n      startTransition: startTransition as any,\n    }),\n    [\n      history,\n      scroll,\n      shallow,\n      throttleMs,\n      debounceMs,\n      clearOnDefault,\n      startTransition,\n    ]\n  );\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(\n    initialState?.rowSelection ?? {}\n  );\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>(initialState?.columnVisibility ?? {});\n\n  const [page, setPage] = enableNuqs\n    ? useQueryState(\n        pageKey,\n        parseAsInteger.withOptions(queryStateOptions).withDefault(1)\n      )\n    : React.useState(initialState?.pagination?.pageIndex ?? 0);\n\n  const [perPage, setPerPage] = enableNuqs\n    ? useQueryState(\n        perPageKey,\n        parseAsInteger\n          .withOptions(queryStateOptions)\n          .withDefault(initialState?.pagination?.pageSize ?? 10)\n      )\n    : React.useState(initialState?.pagination?.pageSize ?? 10);\n\n  const pagination: PaginationState = React.useMemo(() => {\n    return {\n      pageIndex: enableNuqs ? page - 1 : page, // zero-based index\n      pageSize: perPage,\n    };\n  }, [page, perPage, enableNuqs]);\n\n  const onPaginationChange = React.useCallback(\n    (updaterOrValue: Updater<PaginationState>) => {\n      if (typeof updaterOrValue === \"function\") {\n        const newPagination = updaterOrValue(pagination);\n        void setPage(\n          enableNuqs ? newPagination.pageIndex + 1 : newPagination.pageIndex\n        );\n        void setPerPage(newPagination.pageSize);\n      } else {\n        void setPage(\n          enableNuqs ? updaterOrValue.pageIndex + 1 : updaterOrValue.pageIndex\n        );\n        void setPerPage(updaterOrValue.pageSize);\n      }\n    },\n    [pagination, setPage, setPerPage, enableNuqs]\n  );\n\n  const columnIds = React.useMemo(() => {\n    return new Set(\n      columns.map((column) => column.id).filter(Boolean) as string[]\n    );\n  }, [columns]);\n\n  // Note: enableNuqs should be stable (not change during component lifecycle)\n  // to avoid violating React hooks rules. If it changes, it may cause issues.\n  const [sorting, setSorting] = enableNuqs\n    ? useQueryState(\n        sortKey,\n        getSortingStateParser<TData>(columnIds)\n          .withOptions(queryStateOptions)\n          .withDefault(initialState?.sorting ?? [])\n      )\n    : React.useState(initialState?.sorting ?? []);\n\n  const onSortingChange = React.useCallback(\n    (updaterOrValue: Updater<SortingState>) => {\n      if (typeof updaterOrValue === \"function\") {\n        const newSorting = updaterOrValue(sorting);\n        setSorting(newSorting as ExtendedColumnSort<TData>[]);\n      } else {\n        setSorting(updaterOrValue as ExtendedColumnSort<TData>[]);\n      }\n    },\n    [sorting, setSorting]\n  );\n\n  const filterableColumns = React.useMemo(() => {\n    if (enableAdvancedFilter) return [];\n\n    return columns.filter((column) => column.enableColumnFilter);\n  }, [columns, enableAdvancedFilter]);\n\n  const filterParsers = React.useMemo(() => {\n    if (enableAdvancedFilter) return {};\n\n    return filterableColumns.reduce<\n      Record<string, SingleParser<string> | SingleParser<string[]>>\n    >((acc, column) => {\n      if (column.meta?.variant === \"multiSelect\") {\n        acc[column.id ?? \"\"] = parseAsArrayOf(\n          parseAsString,\n          ARRAY_SEPARATOR\n        ).withOptions(queryStateOptions);\n      } else {\n        acc[column.id ?? \"\"] = parseAsString.withOptions(queryStateOptions);\n      }\n      return acc;\n    }, {});\n  }, [filterableColumns, queryStateOptions, enableAdvancedFilter]);\n\n  // Note: enableNuqs should be stable (not change during component lifecycle)\n  const [filterValues, setFilterValues] = enableNuqs\n    ? useQueryStates(filterParsers)\n    : React.useState<Record<string, string | string[] | null>>({});\n\n  const debouncedSetFilterValues = useDebouncedCallback(\n    (values: typeof filterValues) => {\n      void setPage(1);\n      void setFilterValues(values);\n    },\n    debounceMs\n  );\n\n  const initialColumnFilters: ColumnFiltersState = React.useMemo(() => {\n    if (enableAdvancedFilter) return [];\n\n    return Object.entries(filterValues).reduce<ColumnFiltersState>(\n      (filters, [key, value]) => {\n        if (value !== null) {\n          const column = filterableColumns.find((col) => col.id === key);\n          const isMultiSelect = column?.meta?.variant === \"multiSelect\";\n\n          const processedValue = Array.isArray(value)\n            ? value\n            : isMultiSelect &&\n                typeof value === \"string\" &&\n                /[^a-zA-Z0-9]/.test(value)\n              ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean)\n              : isMultiSelect\n                ? [value]\n                : value;\n\n          filters.push({\n            id: key,\n            value: processedValue,\n          });\n        }\n        return filters;\n      },\n      []\n    );\n  }, [filterValues, enableAdvancedFilter, filterableColumns]);\n\n  const [columnFilters, setColumnFilters] =\n    React.useState<ColumnFiltersState>(initialColumnFilters);\n\n  const onColumnFiltersChange = React.useCallback(\n    (updaterOrValue: Updater<ColumnFiltersState>) => {\n      if (enableAdvancedFilter) return;\n\n      setColumnFilters((prev) => {\n        const next =\n          typeof updaterOrValue === \"function\"\n            ? updaterOrValue(prev)\n            : updaterOrValue;\n\n        const filterUpdates = next.reduce<\n          Record<string, string | string[] | null>\n        >((acc, filter) => {\n          const column = filterableColumns.find((col) => col.id === filter.id);\n          if (column) {\n            const isMultiSelect = column.meta?.variant === \"multiSelect\";\n            acc[filter.id] = isMultiSelect\n              ? (filter.value as string[])\n              : (filter.value as string);\n          }\n          console.log(\"filterParsers\", column, acc);\n          return acc;\n        }, {});\n\n        for (const prevFilter of prev) {\n          if (!next.some((filter) => filter.id === prevFilter.id)) {\n            filterUpdates[prevFilter.id] = null;\n          }\n        }\n\n        if (enableNuqs) {\n          debouncedSetFilterValues(filterUpdates);\n        }\n        return next;\n      });\n    },\n    [\n      debouncedSetFilterValues,\n      filterableColumns,\n      enableAdvancedFilter,\n      enableNuqs,\n    ]\n  );\n\n  const table = useReactTable({\n    initialState,\n    pageCount,\n    state: {\n      pagination,\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n    },\n    defaultColumn: {\n      ...tableProps.defaultColumn,\n      enableColumnFilter: true,\n      enableSorting: false,\n      enableHiding: true,\n      enablePinning: true,\n    },\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onPaginationChange,\n    onSortingChange,\n    onColumnFiltersChange,\n    onColumnVisibilityChange: setColumnVisibility,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    getFacetedMinMaxValues: getFacetedMinMaxValues(),\n    meta: {\n      ...tableProps.meta,\n      queryKeys: {\n        page: pageKey,\n        perPage: perPageKey,\n        sort: sortKey,\n        filters: filtersKey,\n        joinOperator: joinOperatorKey,\n      },\n    },\n    ...tableProps,\n    columns,\n  });\n\n  return { table, shallow, debounceMs, throttleMs };\n}\n"],"names":["PAGE_KEY","PER_PAGE_KEY","SORT_KEY","FILTERS_KEY","JOIN_OPERATOR_KEY","ARRAY_SEPARATOR","DEBOUNCE_MS","THROTTLE_MS","useDataTable","props","columns","pageCount","initialState","queryKeys","history","debounceMs","throttleMs","clearOnDefault","enableAdvancedFilter","scroll","shallow","startTransition","enableNuqs","tableProps","pageKey","perPageKey","sortKey","filtersKey","joinOperatorKey","queryStateOptions","React","rowSelection","setRowSelection","columnVisibility","setColumnVisibility","page","setPage","useQueryState","parseAsInteger","perPage","setPerPage","pagination","onPaginationChange","updaterOrValue","newPagination","columnIds","column","sorting","setSorting","getSortingStateParser","onSortingChange","newSorting","filterableColumns","filterParsers","acc","parseAsArrayOf","parseAsString","filterValues","setFilterValues","useQueryStates","debouncedSetFilterValues","useDebouncedCallback","values","initialColumnFilters","filters","key","value","isMultiSelect","col","processedValue","columnFilters","setColumnFilters","onColumnFiltersChange","prev","next","filterUpdates","filter","prevFilter","useReactTable","getCoreRowModel","getFilteredRowModel","getPaginationRowModel","getSortedRowModel","getFacetedRowModel","getFacetedUniqueValues","getFacetedMinMaxValues"],"mappings":";;;;;AAqCA,MAAMA,KAAW,QACXC,KAAe,WACfC,KAAW,QACXC,KAAc,WACdC,KAAoB,gBACpBC,KAAkB,KAClBC,KAAc,KACdC,KAAc;AAwBb,SAASC,GAAoBC,GAAiC;AACnE,QAAM;AAAA,IACJ,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,YAAAC,IAAaT;AAAA,IACb,YAAAU,IAAaT;AAAA,IACb,gBAAAU,IAAiB;AAAA,IACjB,sBAAAC,IAAuB;AAAA,IACvB,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAU;AAAA,IACV,iBAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,GAAGC;AAAA,EAAA,IACDd,GACEe,IAAUX,GAAW,QAAQb,IAC7ByB,IAAaZ,GAAW,WAAWZ,IACnCyB,IAAUb,GAAW,QAAQX,IAC7ByB,IAAad,GAAW,WAAWV,IACnCyB,IAAkBf,GAAW,gBAAgBT,IAE7CyB,IAAoBC,EAAM;AAAA,IAG9B,OAAO;AAAA,MACL,SAAAhB;AAAA,MACA,QAAAK;AAAA,MACA,SAAAC;AAAA,MACA,YAAAJ;AAAA,MACA,YAAAD;AAAA,MACA,gBAAAE;AAAA,MACA,iBAAAI;AAAA,IAAA;AAAA,IAEF;AAAA,MACEP;AAAA,MACAK;AAAA,MACAC;AAAA,MACAJ;AAAA,MACAD;AAAA,MACAE;AAAA,MACAI;AAAA,IAAA;AAAA,EACF,GAGI,CAACU,GAAcC,CAAe,IAAIF,EAAM;AAAA,IAC5ClB,GAAc,gBAAgB,CAAA;AAAA,EAAC,GAE3B,CAACqB,GAAkBC,CAAmB,IAC1CJ,EAAM,SAA0BlB,GAAc,oBAAoB,EAAE,GAEhE,CAACuB,GAAMC,CAAO,IAAId,IACpBe;AAAA,IACEb;AAAA,IACAc,EAAe,YAAYT,CAAiB,EAAE,YAAY,CAAC;AAAA,EAAA,IAE7DC,EAAM,SAASlB,GAAc,YAAY,aAAa,CAAC,GAErD,CAAC2B,GAASC,CAAU,IAAIlB,IAC1Be;AAAA,IACEZ;AAAA,IACAa,EACG,YAAYT,CAAiB,EAC7B,YAAYjB,GAAc,YAAY,YAAY,EAAE;AAAA,EAAA,IAEzDkB,EAAM,SAASlB,GAAc,YAAY,YAAY,EAAE,GAErD6B,IAA8BX,EAAM,QAAQ,OACzC;AAAA,IACL,WAAWR,IAAaa,IAAO,IAAIA;AAAA;AAAA,IACnC,UAAUI;AAAA,EAAA,IAEX,CAACJ,GAAMI,GAASjB,CAAU,CAAC,GAExBoB,IAAqBZ,EAAM;AAAA,IAC/B,CAACa,MAA6C;AAC5C,UAAI,OAAOA,KAAmB,YAAY;AACxC,cAAMC,IAAgBD,EAAeF,CAAU;AAC/C,QAAKL;AAAA,UACHd,IAAasB,EAAc,YAAY,IAAIA,EAAc;AAAA,QAAA,GAEtDJ,EAAWI,EAAc,QAAQ;AAAA,MACxC;AACE,QAAKR;AAAA,UACHd,IAAaqB,EAAe,YAAY,IAAIA,EAAe;AAAA,QAAA,GAExDH,EAAWG,EAAe,QAAQ;AAAA,IAE3C;AAAA,IACA,CAACF,GAAYL,GAASI,GAAYlB,CAAU;AAAA,EAAA,GAGxCuB,IAAYf,EAAM,QAAQ,MACvB,IAAI;AAAA,IACTpB,EAAQ,IAAI,CAACoC,MAAWA,EAAO,EAAE,EAAE,OAAO,OAAO;AAAA,EAAA,GAElD,CAACpC,CAAO,CAAC,GAIN,CAACqC,GAASC,CAAU,IAAI1B,IAC1Be;AAAA,IACEX;AAAA,IACAuB,GAA6BJ,CAAS,EACnC,YAAYhB,CAAiB,EAC7B,YAAYjB,GAAc,WAAW,CAAA,CAAE;AAAA,EAAA,IAE5CkB,EAAM,SAASlB,GAAc,WAAW,CAAA,CAAE,GAExCsC,IAAkBpB,EAAM;AAAA,IAC5B,CAACa,MAA0C;AACzC,UAAI,OAAOA,KAAmB,YAAY;AACxC,cAAMQ,IAAaR,EAAeI,CAAO;AACzC,QAAAC,EAAWG,CAAyC;AAAA,MACtD;AACE,QAAAH,EAAWL,CAA6C;AAAA,IAE5D;AAAA,IACA,CAACI,GAASC,CAAU;AAAA,EAAA,GAGhBI,IAAoBtB,EAAM,QAAQ,MAClCZ,IAA6B,CAAA,IAE1BR,EAAQ,OAAO,CAACoC,MAAWA,EAAO,kBAAkB,GAC1D,CAACpC,GAASQ,CAAoB,CAAC,GAE5BmC,IAAgBvB,EAAM,QAAQ,MAC9BZ,IAA6B,CAAA,IAE1BkC,EAAkB,OAEvB,CAACE,GAAKR,OACFA,EAAO,MAAM,YAAY,gBAC3BQ,EAAIR,EAAO,MAAM,EAAE,IAAIS;AAAA,IACrBC;AAAA,IACAnD;AAAA,EAAA,EACA,YAAYwB,CAAiB,IAE/ByB,EAAIR,EAAO,MAAM,EAAE,IAAIU,EAAc,YAAY3B,CAAiB,GAE7DyB,IACN,CAAA,CAAE,GACJ,CAACF,GAAmBvB,GAAmBX,CAAoB,CAAC,GAGzD,CAACuC,GAAcC,CAAe,IAAIpC,IACpCqC,GAAeN,CAAa,IAC5BvB,EAAM,SAAmD,EAAE,GAEzD8B,IAA2BC;AAAA,IAC/B,CAACC,MAAgC;AAC/B,MAAK1B,EAAQ,CAAC,GACTsB,EAAgBI,CAAM;AAAA,IAC7B;AAAA,IACA/C;AAAA,EAAA,GAGIgD,IAA2CjC,EAAM,QAAQ,MACzDZ,IAA6B,CAAA,IAE1B,OAAO,QAAQuC,CAAY,EAAE;AAAA,IAClC,CAACO,GAAS,CAACC,GAAKC,CAAK,MAAM;AACzB,UAAIA,MAAU,MAAM;AAElB,cAAMC,IADSf,EAAkB,KAAK,CAACgB,MAAQA,EAAI,OAAOH,CAAG,GAC/B,MAAM,YAAY,eAE1CI,IAAiB,MAAM,QAAQH,CAAK,IACtCA,IACAC,KACE,OAAOD,KAAU,YACjB,eAAe,KAAKA,CAAK,IACzBA,EAAM,MAAM,eAAe,EAAE,OAAO,OAAO,IAC3CC,IACE,CAACD,CAAK,IACNA;AAER,QAAAF,EAAQ,KAAK;AAAA,UACX,IAAIC;AAAA,UACJ,OAAOI;AAAA,QAAA,CACR;AAAA,MACH;AACA,aAAOL;AAAA,IACT;AAAA,IACA,CAAA;AAAA,EAAC,GAEF,CAACP,GAAcvC,GAAsBkC,CAAiB,CAAC,GAEpD,CAACkB,GAAeC,EAAgB,IACpCzC,EAAM,SAA6BiC,CAAoB,GAEnDS,KAAwB1C,EAAM;AAAA,IAClC,CAACa,MAAgD;AAC/C,MAAIzB,KAEJqD,GAAiB,CAACE,MAAS;AACzB,cAAMC,IACJ,OAAO/B,KAAmB,aACtBA,EAAe8B,CAAI,IACnB9B,GAEAgC,IAAgBD,EAAK,OAEzB,CAACpB,GAAKsB,MAAW;AACjB,gBAAM9B,IAASM,EAAkB,KAAK,CAACgB,MAAQA,EAAI,OAAOQ,EAAO,EAAE;AACnE,cAAI9B,GAAQ;AACV,kBAAMqB,IAAgBrB,EAAO,MAAM,YAAY;AAC/C,YAAAQ,EAAIsB,EAAO,EAAE,IACRA,EAAO;AAAA,UAEd;AACA,yBAAQ,IAAI,iBAAiB9B,GAAQQ,CAAG,GACjCA;AAAA,QACT,GAAG,CAAA,CAAE;AAEL,mBAAWuB,KAAcJ;AACvB,UAAKC,EAAK,KAAK,CAACE,MAAWA,EAAO,OAAOC,EAAW,EAAE,MACpDF,EAAcE,EAAW,EAAE,IAAI;AAInC,eAAIvD,KACFsC,EAAyBe,CAAa,GAEjCD;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA;AAAA,MACEd;AAAA,MACAR;AAAA,MACAlC;AAAA,MACAI;AAAA,IAAA;AAAA,EACF;AA+CF,SAAO,EAAE,OA5CKwD,GAAc;AAAA,IAC1B,cAAAlE;AAAA,IACA,WAAAD;AAAA,IACA,OAAO;AAAA,MACL,YAAA8B;AAAA,MACA,SAAAM;AAAA,MACA,kBAAAd;AAAA,MACA,cAAAF;AAAA,MACA,eAAAuC;AAAA,IAAA;AAAA,IAEF,eAAe;AAAA,MACb,GAAG/C,EAAW;AAAA,MACd,oBAAoB;AAAA,MACpB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,eAAe;AAAA,IAAA;AAAA,IAEjB,oBAAoB;AAAA,IACpB,sBAAsBS;AAAA,IACtB,oBAAAU;AAAA,IACA,iBAAAQ;AAAA,IACA,uBAAAsB;AAAA,IACA,0BAA0BtC;AAAA,IAC1B,iBAAiB6C,GAAA;AAAA,IACjB,qBAAqBC,GAAA;AAAA,IACrB,uBAAuBC,GAAA;AAAA,IACvB,mBAAmBC,GAAA;AAAA,IACnB,oBAAoBC,GAAA;AAAA,IACpB,wBAAwBC,GAAA;AAAA,IACxB,wBAAwBC,GAAA;AAAA,IACxB,MAAM;AAAA,MACJ,GAAG9D,EAAW;AAAA,MACd,WAAW;AAAA,QACT,MAAMC;AAAA,QACN,SAASC;AAAA,QACT,MAAMC;AAAA,QACN,SAASC;AAAA,QACT,cAAcC;AAAA,MAAA;AAAA,IAChB;AAAA,IAEF,GAAGL;AAAA,IACH,SAAAb;AAAA,EAAA,CACD,GAEe,SAAAU,GAAS,YAAAL,GAAY,YAAAC,EAAA;AACvC;"}
+{"version":3,"file":"use-data-table.js","sources":["../../../src/hooks/use-data-table.ts"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-hooks/rules-of-hooks */\n\nimport {\n  type ColumnFiltersState,\n  type ColumnOrderState,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type RowSelectionState,\n  type SortingState,\n  type TableOptions,\n  type TableState,\n  type Updater,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n  parseAsArrayOf,\n  parseAsInteger,\n  parseAsString,\n  type SingleParser,\n  type UseQueryStateOptions,\n  useQueryState,\n  useQueryStates,\n} from \"nuqs\";\nimport * as React from \"react\";\n\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getSortingStateParser } from \"@/utils/parsers\";\nimport type { ExtendedColumnSort, QueryKeys } from \"@/types/data-table\";\n\nconst PAGE_KEY = \"page\";\nconst PER_PAGE_KEY = \"perPage\";\nconst SORT_KEY = \"sort\";\nconst FILTERS_KEY = \"filters\";\nconst JOIN_OPERATOR_KEY = \"joinOperator\";\nconst ARRAY_SEPARATOR = \",\";\nconst DEBOUNCE_MS = 300;\nconst THROTTLE_MS = 50;\n\ninterface UseDataTableProps<TData>\n  extends Omit<\n    TableOptions<TData>,\n    // | \"state\"\n    // | \"pageCount\"\n    \"getCoreRowModel\"\n  > {\n  initialState?: Omit<Partial<TableState>, \"sorting\"> & {\n    sorting?: ExtendedColumnSort<TData>[];\n  };\n  queryKeys?: Partial<QueryKeys>;\n  history?: \"push\" | \"replace\";\n  debounceMs?: number;\n  throttleMs?: number;\n  clearOnDefault?: boolean;\n  enableAdvancedFilter?: boolean;\n  scroll?: boolean;\n  shallow?: boolean;\n  startTransition?: React.TransitionStartFunction;\n  enableNuqs?: boolean;\n}\n\nexport function useDataTable<TData>(props: UseDataTableProps<TData>) {\n  const {\n    columns,\n    pageCount,\n    initialState,\n    queryKeys,\n    history = \"replace\",\n    debounceMs = DEBOUNCE_MS,\n    throttleMs = THROTTLE_MS,\n    clearOnDefault = false,\n    enableAdvancedFilter = false,\n    scroll = false,\n    shallow = true,\n    startTransition,\n    enableNuqs = false,\n    ...tableProps\n  } = props;\n  const pageKey = queryKeys?.page ?? PAGE_KEY;\n  const perPageKey = queryKeys?.perPage ?? PER_PAGE_KEY;\n  const sortKey = queryKeys?.sort ?? SORT_KEY;\n  const filtersKey = queryKeys?.filters ?? FILTERS_KEY;\n  const joinOperatorKey = queryKeys?.joinOperator ?? JOIN_OPERATOR_KEY;\n\n  const queryStateOptions = React.useMemo<\n    Omit<UseQueryStateOptions<string>, \"parse\">\n  >(\n    () => ({\n      history,\n      scroll,\n      shallow,\n      throttleMs,\n      debounceMs,\n      clearOnDefault,\n      startTransition: startTransition as any,\n    }),\n    [\n      history,\n      scroll,\n      shallow,\n      throttleMs,\n      debounceMs,\n      clearOnDefault,\n      startTransition,\n    ]\n  );\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(\n    initialState?.rowSelection ?? {}\n  );\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>(initialState?.columnVisibility ?? {});\n  const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>(\n    initialState?.columnOrder ?? []\n  );\n\n  const [page, setPage] = enableNuqs\n    ? useQueryState(\n        pageKey,\n        parseAsInteger.withOptions(queryStateOptions).withDefault(1)\n      )\n    : React.useState(initialState?.pagination?.pageIndex ?? 0);\n\n  const [perPage, setPerPage] = enableNuqs\n    ? useQueryState(\n        perPageKey,\n        parseAsInteger\n          .withOptions(queryStateOptions)\n          .withDefault(initialState?.pagination?.pageSize ?? 10)\n      )\n    : React.useState(initialState?.pagination?.pageSize ?? 10);\n\n  const pagination: PaginationState = React.useMemo(() => {\n    return {\n      pageIndex: enableNuqs ? page - 1 : page, // zero-based index\n      pageSize: perPage,\n    };\n  }, [page, perPage, enableNuqs]);\n\n  const onPaginationChange = React.useCallback(\n    (updaterOrValue: Updater<PaginationState>) => {\n      if (typeof updaterOrValue === \"function\") {\n        const newPagination = updaterOrValue(pagination);\n        void setPage(\n          enableNuqs ? newPagination.pageIndex + 1 : newPagination.pageIndex\n        );\n        void setPerPage(newPagination.pageSize);\n      } else {\n        void setPage(\n          enableNuqs ? updaterOrValue.pageIndex + 1 : updaterOrValue.pageIndex\n        );\n        void setPerPage(updaterOrValue.pageSize);\n      }\n    },\n    [pagination, setPage, setPerPage, enableNuqs]\n  );\n\n  const columnIds = React.useMemo(() => {\n    return new Set(\n      columns.map((column) => column.id).filter(Boolean) as string[]\n    );\n  }, [columns]);\n\n  // Note: enableNuqs should be stable (not change during component lifecycle)\n  // to avoid violating React hooks rules. If it changes, it may cause issues.\n  const [sorting, setSorting] = enableNuqs\n    ? useQueryState(\n        sortKey,\n        getSortingStateParser<TData>(columnIds)\n          .withOptions(queryStateOptions)\n          .withDefault(initialState?.sorting ?? [])\n      )\n    : React.useState(initialState?.sorting ?? []);\n\n  const onSortingChange = React.useCallback(\n    (updaterOrValue: Updater<SortingState>) => {\n      if (typeof updaterOrValue === \"function\") {\n        const newSorting = updaterOrValue(sorting);\n        setSorting(newSorting as ExtendedColumnSort<TData>[]);\n      } else {\n        setSorting(updaterOrValue as ExtendedColumnSort<TData>[]);\n      }\n    },\n    [sorting, setSorting]\n  );\n\n  const filterableColumns = React.useMemo(() => {\n    if (enableAdvancedFilter) return [];\n\n    return columns.filter((column) => column.enableColumnFilter);\n  }, [columns, enableAdvancedFilter]);\n\n  const filterParsers = React.useMemo(() => {\n    if (enableAdvancedFilter) return {};\n\n    return filterableColumns.reduce<\n      Record<string, SingleParser<string> | SingleParser<string[]>>\n    >((acc, column) => {\n      if (column.meta?.variant === \"multiSelect\") {\n        acc[column.id ?? \"\"] = parseAsArrayOf(\n          parseAsString,\n          ARRAY_SEPARATOR\n        ).withOptions(queryStateOptions);\n      } else {\n        acc[column.id ?? \"\"] = parseAsString.withOptions(queryStateOptions);\n      }\n      return acc;\n    }, {});\n  }, [filterableColumns, queryStateOptions, enableAdvancedFilter]);\n\n  // Note: enableNuqs should be stable (not change during component lifecycle)\n  const [filterValues, setFilterValues] = enableNuqs\n    ? useQueryStates(filterParsers)\n    : React.useState<Record<string, string | string[] | null>>({});\n\n  const debouncedSetFilterValues = useDebouncedCallback(\n    (values: typeof filterValues) => {\n      void setPage(1);\n      void setFilterValues(values);\n    },\n    debounceMs\n  );\n\n  const initialColumnFilters: ColumnFiltersState = React.useMemo(() => {\n    if (enableAdvancedFilter) return [];\n\n    return Object.entries(filterValues).reduce<ColumnFiltersState>(\n      (filters, [key, value]) => {\n        if (value !== null) {\n          const column = filterableColumns.find((col) => col.id === key);\n          const isMultiSelect = column?.meta?.variant === \"multiSelect\";\n\n          const processedValue = Array.isArray(value)\n            ? value\n            : isMultiSelect &&\n                typeof value === \"string\" &&\n                /[^a-zA-Z0-9]/.test(value)\n              ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean)\n              : isMultiSelect\n                ? [value]\n                : value;\n\n          filters.push({\n            id: key,\n            value: processedValue,\n          });\n        }\n        return filters;\n      },\n      []\n    );\n  }, [filterValues, enableAdvancedFilter, filterableColumns]);\n\n  const [columnFilters, setColumnFilters] =\n    React.useState<ColumnFiltersState>(initialColumnFilters);\n\n  const onColumnFiltersChange = React.useCallback(\n    (updaterOrValue: Updater<ColumnFiltersState>) => {\n      if (enableAdvancedFilter) return;\n\n      setColumnFilters((prev) => {\n        const next =\n          typeof updaterOrValue === \"function\"\n            ? updaterOrValue(prev)\n            : updaterOrValue;\n\n        const filterUpdates = next.reduce<\n          Record<string, string | string[] | null>\n        >((acc, filter) => {\n          const column = filterableColumns.find((col) => col.id === filter.id);\n          if (column) {\n            const isMultiSelect = column.meta?.variant === \"multiSelect\";\n            acc[filter.id] = isMultiSelect\n              ? (filter.value as string[])\n              : (filter.value as string);\n          }\n          console.log(\"filterParsers\", column, acc);\n          return acc;\n        }, {});\n\n        for (const prevFilter of prev) {\n          if (!next.some((filter) => filter.id === prevFilter.id)) {\n            filterUpdates[prevFilter.id] = null;\n          }\n        }\n\n        if (enableNuqs) {\n          debouncedSetFilterValues(filterUpdates);\n        }\n        return next;\n      });\n    },\n    [\n      debouncedSetFilterValues,\n      filterableColumns,\n      enableAdvancedFilter,\n      enableNuqs,\n    ]\n  );\n\n  const table = useReactTable({\n    initialState,\n    pageCount,\n    state: {\n      pagination,\n      sorting,\n      columnVisibility,\n      columnOrder,\n      rowSelection,\n      columnFilters,\n    },\n    defaultColumn: {\n      ...tableProps.defaultColumn,\n      enableColumnFilter: true,\n      enableSorting: false,\n      enableHiding: true,\n      enablePinning: true,\n    },\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onPaginationChange,\n    onSortingChange,\n    onColumnFiltersChange,\n    onColumnVisibilityChange: setColumnVisibility,\n    onColumnOrderChange: setColumnOrder,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    getFacetedMinMaxValues: getFacetedMinMaxValues(),\n    meta: {\n      ...tableProps.meta,\n      queryKeys: {\n        page: pageKey,\n        perPage: perPageKey,\n        sort: sortKey,\n        filters: filtersKey,\n        joinOperator: joinOperatorKey,\n      },\n    },\n    ...tableProps,\n    columns,\n  });\n\n  return { table, shallow, debounceMs, throttleMs };\n}\n"],"names":["PAGE_KEY","PER_PAGE_KEY","SORT_KEY","FILTERS_KEY","JOIN_OPERATOR_KEY","ARRAY_SEPARATOR","DEBOUNCE_MS","THROTTLE_MS","useDataTable","props","columns","pageCount","initialState","queryKeys","history","debounceMs","throttleMs","clearOnDefault","enableAdvancedFilter","scroll","shallow","startTransition","enableNuqs","tableProps","pageKey","perPageKey","sortKey","filtersKey","joinOperatorKey","queryStateOptions","React","rowSelection","setRowSelection","columnVisibility","setColumnVisibility","columnOrder","setColumnOrder","page","setPage","useQueryState","parseAsInteger","perPage","setPerPage","pagination","onPaginationChange","updaterOrValue","newPagination","columnIds","column","sorting","setSorting","getSortingStateParser","onSortingChange","newSorting","filterableColumns","filterParsers","acc","parseAsArrayOf","parseAsString","filterValues","setFilterValues","useQueryStates","debouncedSetFilterValues","useDebouncedCallback","values","initialColumnFilters","filters","key","value","isMultiSelect","col","processedValue","columnFilters","setColumnFilters","onColumnFiltersChange","prev","next","filterUpdates","filter","prevFilter","useReactTable","getCoreRowModel","getFilteredRowModel","getPaginationRowModel","getSortedRowModel","getFacetedRowModel","getFacetedUniqueValues","getFacetedMinMaxValues"],"mappings":"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"}

package/dist/esm/packages/ui/src/components/alert-dialog.js

@@ -52,7 +52,7 @@ function x({
       {
         "data-slot": "alert-dialog-content",
         className: s(
-          "ds:bg-background ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0 ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95 ds:fixed ds:top-[50%] ds:left-[50%] ds:z-50 ds:grid ds:w-full ds:max-w-[calc(100%-2rem)] ds:translate-x-[-50%] ds:translate-y-[-50%] ds:gap-4 ds:rounded-lg ds:border ds:p-6 ds:shadow-lg ds:duration-200 ds:sm:max-w-lg",
+          "ds:bg-background ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0 ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95 ds:fixed ds:top-[50%] ds:left-[50%] ds:z-50 ds:grid ds:w-full ds:max-w-[calc(100%-2rem)] ds:translate-x-[-50%] ds:translate-y-[-50%] ds:gap-4 ds:rounded-lg ds:border ds:border-border ds:p-6 ds:shadow-lg ds:duration-200 ds:sm:max-w-lg",
           {
             "ds:data-[state=open]:animate-in": !a
           },
@@ -76,7 +76,7 @@ function D({
     }
   );
 }
-function A({
+function b({
   className: t,
   ...a
 }) {
@@ -92,7 +92,7 @@ function A({
     }
   );
 }
-function v({
+function A({
   className: t,
   ...a
 }) {
@@ -105,7 +105,7 @@ function v({
     }
   );
 }
-function b({
+function v({
   className: t,
   ...a
 }) {
@@ -121,12 +121,12 @@ function b({
 export {
   m as AlertDialog,
   x as AlertDialogContent,
-  b as AlertDialogDescription,
-  A as AlertDialogFooter,
+  v as AlertDialogDescription,
+  b as AlertDialogFooter,
   D as AlertDialogHeader,
   g as AlertDialogOverlay,
   n as AlertDialogPortal,
-  v as AlertDialogTitle,
+  A as AlertDialogTitle,
   p as AlertDialogTrigger
 };
 //# sourceMappingURL=alert-dialog.js.map

package/dist/esm/packages/ui/src/components/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","sources":["../../../../../../../../packages/ui/src/components/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\n\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { buttonVariants } from \"@dsui/ui/components/button\";\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  );\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  );\n}\n\nfunction AlertDialogOverlay({\n  className,\n  backdropFilter,\n  overlay = \"dark\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay> & {\n  backdropFilter?: number;\n  overlay?: \"dark\" | \"light\";\n}) {\n  const overlayClass = overlay === \"dark\" ? \"bg-black/50\" : \"bg-white/50\";\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0 ds:fixed ds:inset-0 ds:z-50\",\n        overlayClass,\n        className\n      )}\n      style={\n        backdropFilter\n          ? { backdropFilter: `blur(${backdropFilter}px)` }\n          : undefined\n      }\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogContent({\n  className,\n  noDefaultAnimation,\n  backdropFilter,\n  overlay,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  noDefaultAnimation?: boolean;\n  backdropFilter?: number;\n  overlay?: \"dark\" | \"light\";\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay backdropFilter={backdropFilter} overlay={overlay} />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          \"ds:bg-background ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0 ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95 ds:fixed ds:top-[50%] ds:left-[50%] ds:z-50 ds:grid ds:w-full ds:max-w-[calc(100%-2rem)] ds:translate-x-[-50%] ds:translate-y-[-50%] ds:gap-4 ds:rounded-lg ds:border ds:p-6 ds:shadow-lg ds:duration-200 ds:sm:max-w-lg\",\n          {\n            \"ds:data-[state=open]:animate-in\": !noDefaultAnimation,\n          },\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"ds:flex ds:flex-col ds:gap-2 ds:text-center ds:sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"ds:flex ds:flex-col-reverse ds:gap-2 ds:sm:flex-row ds:sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"ds:text-lg ds:font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"ds:text-muted-foreground ds:text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return (\n    <AlertDialogPrimitive.Action\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n};\n"],"names":["AlertDialog","props","AlertDialogPrimitive","AlertDialogTrigger","AlertDialogPortal","AlertDialogOverlay","className","backdropFilter","overlay","overlayClass","jsx","cn","AlertDialogContent","noDefaultAnimation","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogDescription"],"mappings":";;;;AAQA,SAASA,EAAY;AAAA,EACnB,GAAGC;AACL,GAA2D;AACzD,2BAAQC,EAAqB,MAArB,EAA0B,aAAU,gBAAgB,GAAGD,GAAO;AACxE;AAEA,SAASE,EAAmB;AAAA,EAC1B,GAAGF;AACL,GAA8D;AAC5D,2BACGC,EAAqB,SAArB,EAA6B,aAAU,wBAAwB,GAAGD,GAAO;AAE9E;AAEA,SAASG,EAAkB;AAAA,EACzB,GAAGH;AACL,GAA6D;AAC3D,2BACGC,EAAqB,QAArB,EAA4B,aAAU,uBAAuB,GAAGD,GAAO;AAE5E;AAEA,SAASI,EAAmB;AAAA,EAC1B,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGP;AACL,GAGG;AACD,QAAMQ,IAAeD,MAAY,SAAS,gBAAgB;AAC1D,SACE,gBAAAE;AAAA,IAACR,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAWS;AAAA,QACT;AAAA,QACAF;AAAA,QACAH;AAAA,MAAA;AAAA,MAEF,OACEC,IACI,EAAE,gBAAgB,QAAQA,CAAc,UACxC;AAAA,MAEL,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASW,EAAmB;AAAA,EAC1B,WAAAN;AAAA,EACA,oBAAAO;AAAA,EACA,gBAAAN;AAAA,EACA,SAAAC;AAAA,EACA,GAAGP;AACL,GAIG;AACD,2BACGG,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAM,EAACL,GAAA,EAAmB,gBAAAE,GAAgC,SAAAC,EAAA,CAAkB;AAAA,IACtE,gBAAAE;AAAA,MAACR,EAAqB;AAAA,MAArB;AAAA,QACC,aAAU;AAAA,QACV,WAAWS;AAAA,UACT;AAAA,UACA;AAAA,YACE,mCAAmC,CAACE;AAAA,UAAA;AAAA,UAEtCP;AAAA,QAAA;AAAA,QAED,GAAGL;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;AAEA,SAASa,EAAkB;AAAA,EACzB,WAAAR;AAAA,EACA,GAAGL;AACL,GAAgC;AAC9B,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,+DAA+DL,CAAS;AAAA,MACrF,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASc,EAAkB;AAAA,EACzB,WAAAT;AAAA,EACA,GAAGL;AACL,GAAgC;AAC9B,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASe,EAAiB;AAAA,EACxB,WAAAV;AAAA,EACA,GAAGL;AACL,GAA4D;AAC1D,SACE,gBAAAS;AAAA,IAACR,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAWS,EAAG,+BAA+BL,CAAS;AAAA,MACrD,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASgB,EAAuB;AAAA,EAC9B,WAAAX;AAAA,EACA,GAAGL;AACL,GAAkE;AAChE,SACE,gBAAAS;AAAA,IAACR,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAWS,EAAG,uCAAuCL,CAAS;AAAA,MAC7D,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"alert-dialog.js","sources":["../../../../../../../../packages/ui/src/components/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\n\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { buttonVariants } from \"@dsui/ui/components/button\";\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  );\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  );\n}\n\nfunction AlertDialogOverlay({\n  className,\n  backdropFilter,\n  overlay = \"dark\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay> & {\n  backdropFilter?: number;\n  overlay?: \"dark\" | \"light\";\n}) {\n  const overlayClass = overlay === \"dark\" ? \"bg-black/50\" : \"bg-white/50\";\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0 ds:fixed ds:inset-0 ds:z-50\",\n        overlayClass,\n        className\n      )}\n      style={\n        backdropFilter\n          ? { backdropFilter: `blur(${backdropFilter}px)` }\n          : undefined\n      }\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogContent({\n  className,\n  noDefaultAnimation,\n  backdropFilter,\n  overlay,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  noDefaultAnimation?: boolean;\n  backdropFilter?: number;\n  overlay?: \"dark\" | \"light\";\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay backdropFilter={backdropFilter} overlay={overlay} />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          \"ds:bg-background ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0 ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95 ds:fixed ds:top-[50%] ds:left-[50%] ds:z-50 ds:grid ds:w-full ds:max-w-[calc(100%-2rem)] ds:translate-x-[-50%] ds:translate-y-[-50%] ds:gap-4 ds:rounded-lg ds:border ds:border-border ds:p-6 ds:shadow-lg ds:duration-200 ds:sm:max-w-lg\",\n          {\n            \"ds:data-[state=open]:animate-in\": !noDefaultAnimation,\n          },\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"ds:flex ds:flex-col ds:gap-2 ds:text-center ds:sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"ds:flex ds:flex-col-reverse ds:gap-2 ds:sm:flex-row ds:sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"ds:text-lg ds:font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"ds:text-muted-foreground ds:text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return (\n    <AlertDialogPrimitive.Action\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogPortal,\n  AlertDialogOverlay,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogFooter,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogAction,\n  AlertDialogCancel,\n};\n"],"names":["AlertDialog","props","AlertDialogPrimitive","AlertDialogTrigger","AlertDialogPortal","AlertDialogOverlay","className","backdropFilter","overlay","overlayClass","jsx","cn","AlertDialogContent","noDefaultAnimation","AlertDialogHeader","AlertDialogFooter","AlertDialogTitle","AlertDialogDescription"],"mappings":";;;;AAQA,SAASA,EAAY;AAAA,EACnB,GAAGC;AACL,GAA2D;AACzD,2BAAQC,EAAqB,MAArB,EAA0B,aAAU,gBAAgB,GAAGD,GAAO;AACxE;AAEA,SAASE,EAAmB;AAAA,EAC1B,GAAGF;AACL,GAA8D;AAC5D,2BACGC,EAAqB,SAArB,EAA6B,aAAU,wBAAwB,GAAGD,GAAO;AAE9E;AAEA,SAASG,EAAkB;AAAA,EACzB,GAAGH;AACL,GAA6D;AAC3D,2BACGC,EAAqB,QAArB,EAA4B,aAAU,uBAAuB,GAAGD,GAAO;AAE5E;AAEA,SAASI,EAAmB;AAAA,EAC1B,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGP;AACL,GAGG;AACD,QAAMQ,IAAeD,MAAY,SAAS,gBAAgB;AAC1D,SACE,gBAAAE;AAAA,IAACR,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAWS;AAAA,QACT;AAAA,QACAF;AAAA,QACAH;AAAA,MAAA;AAAA,MAEF,OACEC,IACI,EAAE,gBAAgB,QAAQA,CAAc,UACxC;AAAA,MAEL,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASW,EAAmB;AAAA,EAC1B,WAAAN;AAAA,EACA,oBAAAO;AAAA,EACA,gBAAAN;AAAA,EACA,SAAAC;AAAA,EACA,GAAGP;AACL,GAIG;AACD,2BACGG,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAM,EAACL,GAAA,EAAmB,gBAAAE,GAAgC,SAAAC,EAAA,CAAkB;AAAA,IACtE,gBAAAE;AAAA,MAACR,EAAqB;AAAA,MAArB;AAAA,QACC,aAAU;AAAA,QACV,WAAWS;AAAA,UACT;AAAA,UACA;AAAA,YACE,mCAAmC,CAACE;AAAA,UAAA;AAAA,UAEtCP;AAAA,QAAA;AAAA,QAED,GAAGL;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;AAEA,SAASa,EAAkB;AAAA,EACzB,WAAAR;AAAA,EACA,GAAGL;AACL,GAAgC;AAC9B,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,+DAA+DL,CAAS;AAAA,MACrF,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASc,EAAkB;AAAA,EACzB,WAAAT;AAAA,EACA,GAAGL;AACL,GAAgC;AAC9B,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASe,EAAiB;AAAA,EACxB,WAAAV;AAAA,EACA,GAAGL;AACL,GAA4D;AAC1D,SACE,gBAAAS;AAAA,IAACR,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAWS,EAAG,+BAA+BL,CAAS;AAAA,MACrD,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASgB,EAAuB;AAAA,EAC9B,WAAAX;AAAA,EACA,GAAGL;AACL,GAAkE;AAChE,SACE,gBAAAS;AAAA,IAACR,EAAqB;AAAA,IAArB;AAAA,MACC,aAAU;AAAA,MACV,WAAWS,EAAG,uCAAuCL,CAAS;AAAA,MAC7D,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/packages/ui/src/components/calendar.js

@@ -22,7 +22,7 @@ function j({
     {
       showOutsideDays: d,
       className: e(
-        "ds:bg-background ds:group/calendar ds:p-3 ds:[--cell-size:--spacing(8)] ds:[[data-slot=card-content]_&]:bg-transparent ds:[[data-slot=popover-content]_&]:bg-transparent",
+        "ds:bg-background ds:group/calendar ds:p-3 ds:[--cell-size:--ds-spacing(8)] ds:[[data-slot=card-content]_&]:bg-transparent ds:[[data-slot=popover-content]_&]:bg-transparent",
         String.raw`ds:rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`ds:rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         u

package/dist/esm/packages/ui/src/components/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sources":["../../../../../../../../packages/ui/src/components/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\";\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\";\n\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Button, buttonVariants } from \"@dsui/ui/components/button\";\n\ntype CalendarColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"accent\"\n  | \"destructive\"\n  | \"muted\"\n  | \"success\"\n  | \"error\"\n  | \"warning\"\n  | \"foreground\";\n\ntype CalendarProps = React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n  variant?: \"default\" | \"rounded\";\n  color?: CalendarColor;\n};\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  variant = \"default\",\n  color = \"primary\",\n  formatters,\n  components,\n  ...props\n}: CalendarProps) {\n  const defaultClassNames = getDefaultClassNames();\n  const colorClasses = getColorClasses(color);\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"ds:bg-background ds:group/calendar ds:p-3 ds:[--cell-size:--spacing(8)] ds:[[data-slot=card-content]_&]:bg-transparent ds:[[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`ds:rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`ds:rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"ds:w-fit\", defaultClassNames.root),\n        months: cn(\n          \"ds:flex ds:gap-4 ds:flex-col ds:md:flex-row ds:relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"ds:flex ds:flex-col ds:w-full ds:gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"ds:flex ds:items-center ds:gap-1 ds:w-full ds:absolute ds:top-0 ds:inset-x-0 ds:justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"ds:size-(--cell-size) ds:aria-disabled:opacity-50 ds:p-0 ds:select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"ds:size-(--cell-size) ds:aria-disabled:opacity-50 ds:p-0 ds:select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"ds:flex ds:items-center ds:justify-center ds:h-(--cell-size) ds:w-full ds:px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"ds:w-full ds:flex ds:items-center ds:text-sm ds:font-medium ds:justify-center ds:h-(--cell-size) ds:gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"ds:relative ds:has-focus:border-ring ds:border ds:border-input ds:shadow-xs ds:has-focus:ring-ring/50 ds:has-focus:ring-[3px] ds:rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"ds:absolute ds:bg-popover ds:inset-0 ds:opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"ds:select-none ds:font-medium\",\n          captionLayout === \"label\"\n            ? \"ds:text-sm\"\n            : \"ds:rounded-md ds:pl-2 ds:pr-1 ds:flex ds:items-center ds:gap-1 ds:text-sm ds:h-8 ds:[&>svg]:text-muted-foreground ds:[&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"ds:w-full ds:border-collapse\",\n        weekdays: cn(\"ds:flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"ds:text-muted-foreground ds:rounded-md ds:flex-1 ds:font-normal ds:text-[0.8rem] ds:select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"ds:flex ds:w-full ds:mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"ds:select-none ds:w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"ds:text-[0.8rem] ds:select-none ds:text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"ds:relative ds:w-full ds:h-full ds:p-0 ds:text-center ds:[&:last-child[data-selected=true]_button]:rounded-r-md ds:group/day ds:aspect-square ds:select-none\",\n          props.showWeekNumber\n            ? \"ds:[&:nth-child(2)[data-selected=true]_button]:rounded-l-md\"\n            : \"ds:[&:first-child[data-selected=true]_button]:rounded-l-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          variant === \"rounded\"\n            ? `${colorClasses.rangeBg} ds:rounded-l-full`\n            : \"ds:rounded-l-md ds:bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\n          variant === \"rounded\" ? \"ds:rounded-none\" : \"ds:rounded-none\",\n          defaultClassNames.range_middle\n        ),\n        range_end: cn(\n          variant === \"rounded\"\n            ? `${colorClasses.rangeBg} ds:rounded-r-full`\n            : \"ds:rounded-r-md ds:bg-accent\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          variant === \"rounded\"\n            ? `ds:rounded-full ds:bg-accent ds:data-[selected=true]:rounded-l-none ds:data-[selected=true]:${colorClasses.rangeBg} ds:[&_button[data-range-middle=true]]:bg-transparent`\n            : \"ds:bg-accent ds:text-accent-foreground ds:rounded-md ds:data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"ds:text-muted-foreground ds:aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"ds:text-muted-foreground ds:opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"ds:invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          );\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"ds:size-4\", className)} {...props} />\n            );\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"ds:size-4\", className)}\n                {...props}\n              />\n            );\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"ds:size-4\", className)} {...props} />\n          );\n        },\n        DayButton: (props) => (\n          <CalendarDayButton {...props} variant={variant} color={color} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"ds:flex ds:size-(--cell-size) ds:items-center ds:justify-center ds:text-center\">\n                {children}\n              </div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\ntype CalendarDayButtonProps = Omit<\n  React.ComponentProps<typeof DayButton>,\n  \"color\"\n> & {\n  variant?: \"default\" | \"rounded\";\n  color?: CalendarColor;\n};\n\n// Color variants for calendar day buttons\nconst getColorClasses = (color: CalendarColor = \"foreground\") => {\n  const colorMap = {\n    primary: {\n      selected: \"ds:bg-primary ds:text-primary-foreground\",\n      selectedHover: \"ds:hover:bg-primary/90\",\n      rangeBg: \"ds:bg-primary/20 dark:ds:bg-primary/10\",\n      focusRing: \"ds:ring-primary/20 dark:ds:ring-primary/40\",\n    },\n    secondary: {\n      selected: \"ds:bg-secondary ds:text-secondary-foreground\",\n      selectedHover: \"ds:hover:bg-secondary/90\",\n      rangeBg: \"ds:bg-secondary/20 dark:ds:bg-secondary/10\",\n      focusRing: \"ds:ring-secondary/20 dark:ds:ring-secondary/40\",\n    },\n    accent: {\n      selected: \"ds:bg-accent ds:text-accent-foreground\",\n      selectedHover: \"ds:hover:bg-accent/90\",\n      rangeBg: \"ds:bg-accent/20 dark:ds:bg-accent/10\",\n      focusRing: \"ds:ring-accent/20 dark:ds:ring-accent/40\",\n    },\n    destructive: {\n      selected: \"ds:bg-destructive ds:text-destructive-foreground\",\n      selectedHover: \"ds:hover:bg-destructive/90\",\n      rangeBg: \"ds:bg-destructive/20 dark:ds:bg-destructive/10\",\n      focusRing: \"ds:ring-destructive/20 dark:ds:ring-destructive/40\",\n    },\n    muted: {\n      selected: \"ds:bg-muted ds:text-muted-foreground\",\n      selectedHover: \"ds:hover:bg-muted/90\",\n      rangeBg: \"ds:bg-muted/30 dark:ds:bg-muted/20\",\n      focusRing: \"ds:ring-muted/20 dark:ds:ring-muted/40\",\n    },\n    success: {\n      selected: \"ds:bg-success ds:text-success-foreground\",\n      selectedHover: \"ds:hover:bg-success/90\",\n      rangeBg: \"ds:bg-success/20 dark:ds:bg-success/10\",\n      focusRing: \"ds:ring-success/20 dark:ds:ring-success/40\",\n    },\n    error: {\n      selected: \"ds:bg-error ds:text-error-foreground\",\n      selectedHover: \"ds:hover:bg-error/90\",\n      rangeBg: \"ds:bg-error/20 dark:ds:bg-error/10\",\n      focusRing: \"ds:ring-error/20 dark:ds:ring-error/40\",\n    },\n    warning: {\n      selected: \"ds:bg-warning ds:text-warning-foreground\",\n      selectedHover: \"ds:hover:bg-warning/90\",\n      rangeBg: \"ds:bg-warning/20 dark:ds:bg-warning/10\",\n      focusRing: \"ds:ring-warning/20 dark:ds:ring-warning/40\",\n    },\n    foreground: {\n      selected: \"ds:bg-foreground ds:text-background\",\n      selectedHover: \"ds:hover:bg-foreground/90\",\n      rangeBg: \"ds:bg-foreground/10 dark:ds:bg-foreground/5\",\n      focusRing: \"ds:ring-foreground/20 dark:ds:ring-foreground/40\",\n    },\n  };\n\n  return colorMap[color];\n};\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  variant = \"default\",\n  color = \"foreground\",\n  ...props\n}: CalendarDayButtonProps) {\n  const defaultClassNames = getDefaultClassNames();\n  const colorClasses = getColorClasses(color);\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"ds:flex ds:aspect-square ds:size-auto ds:w-full ds:min-w-(--cell-size) ds:flex-col ds:gap-1 ds:leading-none ds:font-normal\",\n        \"ds:group-data-[focused=true]/day:relative ds:group-data-[focused=true]/day:z-10 ds:group-data-[focused=true]/day:ring-[3px]\",\n        \"ds:group-data-[focused=true]/day:border-ring ds:group-data-[focused=true]/day:ring-ring/50\",\n        \"ds:[&>span]:text-xs ds:[&>span]:opacity-70\",\n        // Hover effect chỉ khi chưa selected\n        !modifiers.selected &&\n          !modifiers.range_start &&\n          !modifiers.range_end &&\n          !modifiers.range_middle &&\n          \"ds:hover:bg-accent ds:hover:text-accent-foreground ds:dark:hover:text-accent-foreground\",\n        // Selected single day - chỉ apply color khi selected\n        modifiers.selected &&\n          !modifiers.range_start &&\n          !modifiers.range_end &&\n          !modifiers.range_middle &&\n          colorClasses.selected,\n        // Range start/end - chỉ apply color khi là range start/end\n        modifiers.range_start && colorClasses.selected,\n        modifiers.range_end && colorClasses.selected,\n        // Range middle - apply rangeBg nhưng giữ text color mặc định\n        modifiers.range_middle &&\n          `${colorClasses.rangeBg} ds:text-accent-foreground`,\n        variant === \"default\" && [\n          \"ds:data-[range-end=true]:rounded-md ds:data-[range-end=true]:rounded-r-md\",\n          \"ds:data-[range-middle=true]:rounded-none\",\n          \"ds:data-[range-start=true]:rounded-md ds:data-[range-start=true]:rounded-l-md\",\n        ],\n        variant === \"rounded\" && [\n          \"ds:data-[selected-single=true]:rounded-full\",\n          \"ds:data-[range-end=true]:rounded-full\",\n          \"ds:data-[range-start=true]:rounded-full\",\n          modifiers.range_start &&\n            `ds:group-data-[focused=true]/day:${colorClasses.focusRing}`,\n          modifiers.range_end &&\n            `ds:group-data-[focused=true]/day:${colorClasses.focusRing}`,\n          modifiers.range_middle && \"ds:rounded-none\",\n          // Chỉ hover:rounded-full khi chưa selected\n          !modifiers.selected &&\n            !modifiers.range_start &&\n            !modifiers.range_end &&\n            !modifiers.range_middle &&\n            \"ds:hover:rounded-full\",\n        ],\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Calendar,\n  CalendarDayButton,\n  type CalendarProps,\n  type CalendarDayButtonProps,\n  type CalendarColor,\n};\n"],"names":["Calendar","className","classNames","showOutsideDays","captionLayout","buttonVariant","variant","color","formatters","components","props","defaultClassNames","getDefaultClassNames","colorClasses","getColorClasses","jsx","DayPicker","cn","date","buttonVariants","rootRef","orientation","ChevronLeftIcon","ChevronRightIcon","ChevronDownIcon","CalendarDayButton","children","day","modifiers","ref","React","Button"],"mappings":"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"}
+{"version":3,"file":"calendar.js","sources":["../../../../../../../../packages/ui/src/components/calendar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\";\nimport { DayButton, DayPicker, getDefaultClassNames } from \"react-day-picker\";\n\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { Button, buttonVariants } from \"@dsui/ui/components/button\";\n\ntype CalendarColor =\n  | \"primary\"\n  | \"secondary\"\n  | \"accent\"\n  | \"destructive\"\n  | \"muted\"\n  | \"success\"\n  | \"error\"\n  | \"warning\"\n  | \"foreground\";\n\ntype CalendarProps = React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n  variant?: \"default\" | \"rounded\";\n  color?: CalendarColor;\n};\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  variant = \"default\",\n  color = \"primary\",\n  formatters,\n  components,\n  ...props\n}: CalendarProps) {\n  const defaultClassNames = getDefaultClassNames();\n  const colorClasses = getColorClasses(color);\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"ds:bg-background ds:group/calendar ds:p-3 ds:[--cell-size:--ds-spacing(8)] ds:[[data-slot=card-content]_&]:bg-transparent ds:[[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`ds:rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`ds:rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"ds:w-fit\", defaultClassNames.root),\n        months: cn(\n          \"ds:flex ds:gap-4 ds:flex-col ds:md:flex-row ds:relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"ds:flex ds:flex-col ds:w-full ds:gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"ds:flex ds:items-center ds:gap-1 ds:w-full ds:absolute ds:top-0 ds:inset-x-0 ds:justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"ds:size-(--cell-size) ds:aria-disabled:opacity-50 ds:p-0 ds:select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"ds:size-(--cell-size) ds:aria-disabled:opacity-50 ds:p-0 ds:select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"ds:flex ds:items-center ds:justify-center ds:h-(--cell-size) ds:w-full ds:px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"ds:w-full ds:flex ds:items-center ds:text-sm ds:font-medium ds:justify-center ds:h-(--cell-size) ds:gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"ds:relative ds:has-focus:border-ring ds:border ds:border-input ds:shadow-xs ds:has-focus:ring-ring/50 ds:has-focus:ring-[3px] ds:rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"ds:absolute ds:bg-popover ds:inset-0 ds:opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"ds:select-none ds:font-medium\",\n          captionLayout === \"label\"\n            ? \"ds:text-sm\"\n            : \"ds:rounded-md ds:pl-2 ds:pr-1 ds:flex ds:items-center ds:gap-1 ds:text-sm ds:h-8 ds:[&>svg]:text-muted-foreground ds:[&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"ds:w-full ds:border-collapse\",\n        weekdays: cn(\"ds:flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"ds:text-muted-foreground ds:rounded-md ds:flex-1 ds:font-normal ds:text-[0.8rem] ds:select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"ds:flex ds:w-full ds:mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"ds:select-none ds:w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"ds:text-[0.8rem] ds:select-none ds:text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"ds:relative ds:w-full ds:h-full ds:p-0 ds:text-center ds:[&:last-child[data-selected=true]_button]:rounded-r-md ds:group/day ds:aspect-square ds:select-none\",\n          props.showWeekNumber\n            ? \"ds:[&:nth-child(2)[data-selected=true]_button]:rounded-l-md\"\n            : \"ds:[&:first-child[data-selected=true]_button]:rounded-l-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          variant === \"rounded\"\n            ? `${colorClasses.rangeBg} ds:rounded-l-full`\n            : \"ds:rounded-l-md ds:bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\n          variant === \"rounded\" ? \"ds:rounded-none\" : \"ds:rounded-none\",\n          defaultClassNames.range_middle\n        ),\n        range_end: cn(\n          variant === \"rounded\"\n            ? `${colorClasses.rangeBg} ds:rounded-r-full`\n            : \"ds:rounded-r-md ds:bg-accent\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          variant === \"rounded\"\n            ? `ds:rounded-full ds:bg-accent ds:data-[selected=true]:rounded-l-none ds:data-[selected=true]:${colorClasses.rangeBg} ds:[&_button[data-range-middle=true]]:bg-transparent`\n            : \"ds:bg-accent ds:text-accent-foreground ds:rounded-md ds:data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"ds:text-muted-foreground ds:aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"ds:text-muted-foreground ds:opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"ds:invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          );\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"ds:size-4\", className)} {...props} />\n            );\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"ds:size-4\", className)}\n                {...props}\n              />\n            );\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"ds:size-4\", className)} {...props} />\n          );\n        },\n        DayButton: (props) => (\n          <CalendarDayButton {...props} variant={variant} color={color} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"ds:flex ds:size-(--cell-size) ds:items-center ds:justify-center ds:text-center\">\n                {children}\n              </div>\n            </td>\n          );\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  );\n}\n\ntype CalendarDayButtonProps = Omit<\n  React.ComponentProps<typeof DayButton>,\n  \"color\"\n> & {\n  variant?: \"default\" | \"rounded\";\n  color?: CalendarColor;\n};\n\n// Color variants for calendar day buttons\nconst getColorClasses = (color: CalendarColor = \"foreground\") => {\n  const colorMap = {\n    primary: {\n      selected: \"ds:bg-primary ds:text-primary-foreground\",\n      selectedHover: \"ds:hover:bg-primary/90\",\n      rangeBg: \"ds:bg-primary/20 dark:ds:bg-primary/10\",\n      focusRing: \"ds:ring-primary/20 dark:ds:ring-primary/40\",\n    },\n    secondary: {\n      selected: \"ds:bg-secondary ds:text-secondary-foreground\",\n      selectedHover: \"ds:hover:bg-secondary/90\",\n      rangeBg: \"ds:bg-secondary/20 dark:ds:bg-secondary/10\",\n      focusRing: \"ds:ring-secondary/20 dark:ds:ring-secondary/40\",\n    },\n    accent: {\n      selected: \"ds:bg-accent ds:text-accent-foreground\",\n      selectedHover: \"ds:hover:bg-accent/90\",\n      rangeBg: \"ds:bg-accent/20 dark:ds:bg-accent/10\",\n      focusRing: \"ds:ring-accent/20 dark:ds:ring-accent/40\",\n    },\n    destructive: {\n      selected: \"ds:bg-destructive ds:text-destructive-foreground\",\n      selectedHover: \"ds:hover:bg-destructive/90\",\n      rangeBg: \"ds:bg-destructive/20 dark:ds:bg-destructive/10\",\n      focusRing: \"ds:ring-destructive/20 dark:ds:ring-destructive/40\",\n    },\n    muted: {\n      selected: \"ds:bg-muted ds:text-muted-foreground\",\n      selectedHover: \"ds:hover:bg-muted/90\",\n      rangeBg: \"ds:bg-muted/30 dark:ds:bg-muted/20\",\n      focusRing: \"ds:ring-muted/20 dark:ds:ring-muted/40\",\n    },\n    success: {\n      selected: \"ds:bg-success ds:text-success-foreground\",\n      selectedHover: \"ds:hover:bg-success/90\",\n      rangeBg: \"ds:bg-success/20 dark:ds:bg-success/10\",\n      focusRing: \"ds:ring-success/20 dark:ds:ring-success/40\",\n    },\n    error: {\n      selected: \"ds:bg-error ds:text-error-foreground\",\n      selectedHover: \"ds:hover:bg-error/90\",\n      rangeBg: \"ds:bg-error/20 dark:ds:bg-error/10\",\n      focusRing: \"ds:ring-error/20 dark:ds:ring-error/40\",\n    },\n    warning: {\n      selected: \"ds:bg-warning ds:text-warning-foreground\",\n      selectedHover: \"ds:hover:bg-warning/90\",\n      rangeBg: \"ds:bg-warning/20 dark:ds:bg-warning/10\",\n      focusRing: \"ds:ring-warning/20 dark:ds:ring-warning/40\",\n    },\n    foreground: {\n      selected: \"ds:bg-foreground ds:text-background\",\n      selectedHover: \"ds:hover:bg-foreground/90\",\n      rangeBg: \"ds:bg-foreground/10 dark:ds:bg-foreground/5\",\n      focusRing: \"ds:ring-foreground/20 dark:ds:ring-foreground/40\",\n    },\n  };\n\n  return colorMap[color];\n};\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  variant = \"default\",\n  color = \"foreground\",\n  ...props\n}: CalendarDayButtonProps) {\n  const defaultClassNames = getDefaultClassNames();\n  const colorClasses = getColorClasses(color);\n\n  const ref = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus();\n  }, [modifiers.focused]);\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"ds:flex ds:aspect-square ds:size-auto ds:w-full ds:min-w-(--cell-size) ds:flex-col ds:gap-1 ds:leading-none ds:font-normal\",\n        \"ds:group-data-[focused=true]/day:relative ds:group-data-[focused=true]/day:z-10 ds:group-data-[focused=true]/day:ring-[3px]\",\n        \"ds:group-data-[focused=true]/day:border-ring ds:group-data-[focused=true]/day:ring-ring/50\",\n        \"ds:[&>span]:text-xs ds:[&>span]:opacity-70\",\n        // Hover effect chỉ khi chưa selected\n        !modifiers.selected &&\n          !modifiers.range_start &&\n          !modifiers.range_end &&\n          !modifiers.range_middle &&\n          \"ds:hover:bg-accent ds:hover:text-accent-foreground ds:dark:hover:text-accent-foreground\",\n        // Selected single day - chỉ apply color khi selected\n        modifiers.selected &&\n          !modifiers.range_start &&\n          !modifiers.range_end &&\n          !modifiers.range_middle &&\n          colorClasses.selected,\n        // Range start/end - chỉ apply color khi là range start/end\n        modifiers.range_start && colorClasses.selected,\n        modifiers.range_end && colorClasses.selected,\n        // Range middle - apply rangeBg nhưng giữ text color mặc định\n        modifiers.range_middle &&\n          `${colorClasses.rangeBg} ds:text-accent-foreground`,\n        variant === \"default\" && [\n          \"ds:data-[range-end=true]:rounded-md ds:data-[range-end=true]:rounded-r-md\",\n          \"ds:data-[range-middle=true]:rounded-none\",\n          \"ds:data-[range-start=true]:rounded-md ds:data-[range-start=true]:rounded-l-md\",\n        ],\n        variant === \"rounded\" && [\n          \"ds:data-[selected-single=true]:rounded-full\",\n          \"ds:data-[range-end=true]:rounded-full\",\n          \"ds:data-[range-start=true]:rounded-full\",\n          modifiers.range_start &&\n            `ds:group-data-[focused=true]/day:${colorClasses.focusRing}`,\n          modifiers.range_end &&\n            `ds:group-data-[focused=true]/day:${colorClasses.focusRing}`,\n          modifiers.range_middle && \"ds:rounded-none\",\n          // Chỉ hover:rounded-full khi chưa selected\n          !modifiers.selected &&\n            !modifiers.range_start &&\n            !modifiers.range_end &&\n            !modifiers.range_middle &&\n            \"ds:hover:rounded-full\",\n        ],\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Calendar,\n  CalendarDayButton,\n  type CalendarProps,\n  type CalendarDayButtonProps,\n  type CalendarColor,\n};\n"],"names":["Calendar","className","classNames","showOutsideDays","captionLayout","buttonVariant","variant","color","formatters","components","props","defaultClassNames","getDefaultClassNames","colorClasses","getColorClasses","jsx","DayPicker","cn","date","buttonVariants","rootRef","orientation","ChevronLeftIcon","ChevronRightIcon","ChevronDownIcon","CalendarDayButton","children","day","modifiers","ref","React","Button"],"mappings":"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"}

package/dist/esm/packages/ui/src/components/combobox.js

@@ -7,7 +7,7 @@ import { Popover as F, PopoverTrigger as G, PopoverContent as T } from "./popove
 import { cn as r } from "../lib/utils.js";
 import { Label as g } from "./label.js";
 const U = I(
-  "ds:justify-between ds:relative ds:dark:bg-background ds:dark:hover:bg-input/50 ds:border-input ds:w-full ds:min-w-0 ds:rounded-md ds:border ds:bg-transparent ds:shadow-xs ds:transition-[color,box-shadow] ds:outline-none ds:file:inline-flex ds:file:h-7 ds:file:border-0 ds:file:bg-transparent ds:file:text-sm ds:file:font-medium ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:opacity-50 ds:focus-visible:border-ring ds:focus-visible:ring-ring/50 ds:focus-visible:ring-[3px] ds:aria-invalid:ring-destructive/20 ds:dark:aria-invalid:ring-destructive/40 ds:aria-invalid:border-destructive",
+  "ds:justify-between ds:relative ds:dark:bg-background ds:dark:hover:bg-input/50 ds:border-input ds:w-full ds:min-w-0 ds:rounded-md ds:border ds:border-border ds:bg-transparent ds:shadow-xs ds:transition-[color,box-shadow] ds:outline-none ds:file:inline-flex ds:file:h-7 ds:file:border-0 ds:file:bg-transparent ds:file:text-sm ds:file:font-medium ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:opacity-50 ds:focus-visible:border-ring ds:focus-visible:ring-ring/50 ds:focus-visible:ring-[3px] ds:aria-invalid:ring-destructive/20 ds:dark:aria-invalid:ring-destructive/40 ds:aria-invalid:border-destructive",
   {
     variants: {
       size: {

package/dist/esm/packages/ui/src/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sources":["../../../../../../../../packages/ui/src/components/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Check, ChevronDown, ChevronUp, X } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"./command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\nimport { cn } from \"../lib/utils\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Label } from \"./label\";\n\nconst comboboxVariants = cva(\n  \"ds:justify-between ds:relative ds:dark:bg-background ds:dark:hover:bg-input/50 ds:border-input ds:w-full ds:min-w-0 ds:rounded-md ds:border ds:bg-transparent ds:shadow-xs ds:transition-[color,box-shadow] ds:outline-none ds:file:inline-flex ds:file:h-7 ds:file:border-0 ds:file:bg-transparent ds:file:text-sm ds:file:font-medium ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:opacity-50 ds:focus-visible:border-ring ds:focus-visible:ring-ring/50 ds:focus-visible:ring-[3px] ds:aria-invalid:ring-destructive/20 ds:dark:aria-invalid:ring-destructive/40 ds:aria-invalid:border-destructive\",\n  {\n    variants: {\n      size: {\n        xs: \"ds:h-6 ds:text-xs ds:px-2 ds:py-0.5\",\n        sm: \"ds:h-8 ds:text-sm ds:px-2.5 ds:py-1\",\n        normal: \"ds:h-9 ds:px-3 ds:py-1\",\n        lg: \"ds:h-11 ds:px-4 ds:py-2\",\n        xl: \"ds:h-14 ds:px-5 ds:py-3\",\n      },\n      state: {\n        default: \"\",\n        success:\n          \"ds:border-success ds:ring-success/30 ds:focus-visible:border-success ds:focus-visible:ring-success/50\",\n        error:\n          \"ds:border-destructive ds:ring-destructive/30 ds:focus-visible:border-destructive ds:focus-visible:ring-destructive/50\",\n        warning:\n          \"ds:border-warning ds:ring-warning/30 ds:focus-visible:border-warning ds:focus-visible:ring-warning/50\",\n      },\n    },\n    defaultVariants: {\n      size: \"normal\",\n      state: \"default\",\n    },\n  }\n);\n\ntype SelectOption = {\n  label: React.ReactNode;\n  value: string;\n  group?: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n};\n\ntype ComboboxProps = Omit<\n  React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n  \"onChange\"\n> & {\n  value?: string;\n  options?: SelectOption[];\n  placeHolder?: string;\n  onChange?: (value?: string | null) => void;\n  clearable?: boolean;\n  emptyText?: string;\n  className?: string;\n  dropdownClassName?: string;\n  children?: React.ReactNode;\n  size?: \"normal\" | \"sm\" | \"xs\" | \"lg\" | \"xl\";\n  state?: \"default\" | \"success\" | \"error\" | \"warning\";\n  searchable?: boolean;\n  tagRender?: (\n    option: SelectOption & { onClick?: () => void }\n  ) => React.ReactNode;\n} & VariantProps<typeof comboboxVariants>;\n\nfunction Combobox({\n  value,\n  options,\n  placeHolder,\n  emptyText,\n  onChange,\n  clearable,\n  className,\n  dropdownClassName,\n  children,\n  size,\n  state = \"default\",\n  searchable = true,\n  tagRender,\n  ...props\n}: ComboboxProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleOpenChange = React.useCallback((newOpen: boolean) => {\n    setOpen(newOpen);\n  }, []);\n\n  return (\n    <Popover open={open} onOpenChange={handleOpenChange} modal={true}>\n      <PopoverTrigger asChild {...props}>\n        {children ?? (\n          <Label className={cn(comboboxVariants({ size, state }), className)}>\n            <span\n              className={cn(\n                \"ds:truncate ds:w-full ds:inline-block ds:align-middle ds:text-left\",\n                {\n                  \"ds:pr-8\": clearable,\n                }\n              )}\n            >\n              {value\n                ? options?.find((option) => option.value === value)?.label\n                : placeHolder}\n            </span>\n            {open && (\n              <ChevronUp\n                className={cn(\n                  \"ds:z-10 ds:opacity-50\",\n                  {\n                    \"ds:size-4 ds:min-w-4\": size === \"sm\" || size === \"xs\",\n                    \"ds:size-5 ds:min-w-5\": size === \"lg\" || size === \"xl\",\n                  },\n                  dropdownClassName\n                )}\n              />\n            )}\n            {!open && (\n              <ChevronDown\n                className={cn(\n                  \"ds:z-10 ds:opacity-50\",\n                  {\n                    \"ds:size-4 ds:min-w-4\": size === \"sm\" || size === \"xs\",\n                    \"ds:size-5 ds:min-w-5\": size === \"lg\" || size === \"xl\",\n                  },\n                  dropdownClassName\n                )}\n              />\n            )}\n          </Label>\n        )}\n      </PopoverTrigger>\n\n      {clearable && value && (\n        <Label\n          onClick={(e) => {\n            e.stopPropagation();\n            onChange?.(\"\");\n          }}\n          className=\"ds:absolute ds:right-11 ds:top-1/2 ds:-translate-y-1/2 ds:rounded-sm ds:p-1 ds:text-muted-foreground ds:hover:bg-accent ds:hover:text-accent-foreground ds:cursor-pointer ds:size-6 ds:opacity-50\"\n        >\n          <X className=\"ds:h-4 ds:w-4\" />\n        </Label>\n      )}\n      <PopoverContent\n        className={cn(\"ds:p-0 ds:w-(--radix-popover-trigger-width)\")}\n        onInteractOutside={(e) => {\n          // Prevent closing when clicking the trigger\n          const target = e.target as HTMLElement;\n          if (target.closest('[data-slot=\"popover-trigger\"]')) {\n            e.preventDefault();\n          }\n        }}\n      >\n        <Command>\n          {searchable && (\n            <CommandInput placeholder={placeHolder} className=\"ds:h-9\" />\n          )}\n          <CommandList>\n            <CommandEmpty>{emptyText || \"Not found\"}</CommandEmpty>\n            <CommandGroup>\n              {options?.map((option) => (\n                <CommandItem\n                  key={option.value}\n                  value={String(option.label)} // Để Command search theo label\n                  onSelect={\n                    option?.disabled\n                      ? undefined\n                      : () => {\n                          onChange?.(option.value); // Lưu value thực sự\n                          setOpen(false);\n                        }\n                  }\n                  className={cn(\n                    option?.disabled &&\n                      \"ds:opacity-50 ds:cursor-not-allowed ds:grayscale\",\n                    value === option.value && \"ds:bg-primary/10 ds:dark:bg-primary/20\"\n                  )}\n                >\n                  {tagRender ? (\n                    tagRender(option)\n                  ) : (\n                    <>\n                      {option.icon && (\n                        <span className=\"ds:mr-2 ds:max-w-4 ds:max-h-4\">\n                          {option.icon}\n                        </span>\n                      )}\n                      {option.label}\n                    </>\n                  )}\n                  <Check\n                    className={cn(\n                      \"ds:ml-auto\",\n                      value === option.value ? \"ds:opacity-100\" : \"ds:opacity-0\" // So sánh theo value\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { Combobox, type ComboboxProps, type SelectOption };\n"],"names":["comboboxVariants","cva","Combobox","value","options","placeHolder","emptyText","onChange","clearable","className","dropdownClassName","children","size","state","searchable","tagRender","props","open","setOpen","React","handleOpenChange","newOpen","Popover","jsx","PopoverTrigger","jsxs","Label","cn","option","ChevronUp","ChevronDown","e","X","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Fragment","Check"],"mappings":"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"}
+{"version":3,"file":"combobox.js","sources":["../../../../../../../../packages/ui/src/components/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Check, ChevronDown, ChevronUp, X } from \"lucide-react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"./command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\nimport { cn } from \"../lib/utils\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Label } from \"./label\";\n\nconst comboboxVariants = cva(\n  \"ds:justify-between ds:relative ds:dark:bg-background ds:dark:hover:bg-input/50 ds:border-input ds:w-full ds:min-w-0 ds:rounded-md ds:border ds:border-border ds:bg-transparent ds:shadow-xs ds:transition-[color,box-shadow] ds:outline-none ds:file:inline-flex ds:file:h-7 ds:file:border-0 ds:file:bg-transparent ds:file:text-sm ds:file:font-medium ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:opacity-50 ds:focus-visible:border-ring ds:focus-visible:ring-ring/50 ds:focus-visible:ring-[3px] ds:aria-invalid:ring-destructive/20 ds:dark:aria-invalid:ring-destructive/40 ds:aria-invalid:border-destructive\",\n  {\n    variants: {\n      size: {\n        xs: \"ds:h-6 ds:text-xs ds:px-2 ds:py-0.5\",\n        sm: \"ds:h-8 ds:text-sm ds:px-2.5 ds:py-1\",\n        normal: \"ds:h-9 ds:px-3 ds:py-1\",\n        lg: \"ds:h-11 ds:px-4 ds:py-2\",\n        xl: \"ds:h-14 ds:px-5 ds:py-3\",\n      },\n      state: {\n        default: \"\",\n        success:\n          \"ds:border-success ds:ring-success/30 ds:focus-visible:border-success ds:focus-visible:ring-success/50\",\n        error:\n          \"ds:border-destructive ds:ring-destructive/30 ds:focus-visible:border-destructive ds:focus-visible:ring-destructive/50\",\n        warning:\n          \"ds:border-warning ds:ring-warning/30 ds:focus-visible:border-warning ds:focus-visible:ring-warning/50\",\n      },\n    },\n    defaultVariants: {\n      size: \"normal\",\n      state: \"default\",\n    },\n  }\n);\n\ntype SelectOption = {\n  label: React.ReactNode;\n  value: string;\n  group?: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n};\n\ntype ComboboxProps = Omit<\n  React.ComponentProps<typeof PopoverPrimitive.Trigger>,\n  \"onChange\"\n> & {\n  value?: string;\n  options?: SelectOption[];\n  placeHolder?: string;\n  onChange?: (value?: string | null) => void;\n  clearable?: boolean;\n  emptyText?: string;\n  className?: string;\n  dropdownClassName?: string;\n  children?: React.ReactNode;\n  size?: \"normal\" | \"sm\" | \"xs\" | \"lg\" | \"xl\";\n  state?: \"default\" | \"success\" | \"error\" | \"warning\";\n  searchable?: boolean;\n  tagRender?: (\n    option: SelectOption & { onClick?: () => void }\n  ) => React.ReactNode;\n} & VariantProps<typeof comboboxVariants>;\n\nfunction Combobox({\n  value,\n  options,\n  placeHolder,\n  emptyText,\n  onChange,\n  clearable,\n  className,\n  dropdownClassName,\n  children,\n  size,\n  state = \"default\",\n  searchable = true,\n  tagRender,\n  ...props\n}: ComboboxProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const handleOpenChange = React.useCallback((newOpen: boolean) => {\n    setOpen(newOpen);\n  }, []);\n\n  return (\n    <Popover open={open} onOpenChange={handleOpenChange} modal={true}>\n      <PopoverTrigger asChild {...props}>\n        {children ?? (\n          <Label className={cn(comboboxVariants({ size, state }), className)}>\n            <span\n              className={cn(\n                \"ds:truncate ds:w-full ds:inline-block ds:align-middle ds:text-left\",\n                {\n                  \"ds:pr-8\": clearable,\n                }\n              )}\n            >\n              {value\n                ? options?.find((option) => option.value === value)?.label\n                : placeHolder}\n            </span>\n            {open && (\n              <ChevronUp\n                className={cn(\n                  \"ds:z-10 ds:opacity-50\",\n                  {\n                    \"ds:size-4 ds:min-w-4\": size === \"sm\" || size === \"xs\",\n                    \"ds:size-5 ds:min-w-5\": size === \"lg\" || size === \"xl\",\n                  },\n                  dropdownClassName\n                )}\n              />\n            )}\n            {!open && (\n              <ChevronDown\n                className={cn(\n                  \"ds:z-10 ds:opacity-50\",\n                  {\n                    \"ds:size-4 ds:min-w-4\": size === \"sm\" || size === \"xs\",\n                    \"ds:size-5 ds:min-w-5\": size === \"lg\" || size === \"xl\",\n                  },\n                  dropdownClassName\n                )}\n              />\n            )}\n          </Label>\n        )}\n      </PopoverTrigger>\n\n      {clearable && value && (\n        <Label\n          onClick={(e) => {\n            e.stopPropagation();\n            onChange?.(\"\");\n          }}\n          className=\"ds:absolute ds:right-11 ds:top-1/2 ds:-translate-y-1/2 ds:rounded-sm ds:p-1 ds:text-muted-foreground ds:hover:bg-accent ds:hover:text-accent-foreground ds:cursor-pointer ds:size-6 ds:opacity-50\"\n        >\n          <X className=\"ds:h-4 ds:w-4\" />\n        </Label>\n      )}\n      <PopoverContent\n        className={cn(\"ds:p-0 ds:w-(--radix-popover-trigger-width)\")}\n        onInteractOutside={(e) => {\n          // Prevent closing when clicking the trigger\n          const target = e.target as HTMLElement;\n          if (target.closest('[data-slot=\"popover-trigger\"]')) {\n            e.preventDefault();\n          }\n        }}\n      >\n        <Command>\n          {searchable && (\n            <CommandInput placeholder={placeHolder} className=\"ds:h-9\" />\n          )}\n          <CommandList>\n            <CommandEmpty>{emptyText || \"Not found\"}</CommandEmpty>\n            <CommandGroup>\n              {options?.map((option) => (\n                <CommandItem\n                  key={option.value}\n                  value={String(option.label)} // Để Command search theo label\n                  onSelect={\n                    option?.disabled\n                      ? undefined\n                      : () => {\n                          onChange?.(option.value); // Lưu value thực sự\n                          setOpen(false);\n                        }\n                  }\n                  className={cn(\n                    option?.disabled &&\n                      \"ds:opacity-50 ds:cursor-not-allowed ds:grayscale\",\n                    value === option.value && \"ds:bg-primary/10 ds:dark:bg-primary/20\"\n                  )}\n                >\n                  {tagRender ? (\n                    tagRender(option)\n                  ) : (\n                    <>\n                      {option.icon && (\n                        <span className=\"ds:mr-2 ds:max-w-4 ds:max-h-4\">\n                          {option.icon}\n                        </span>\n                      )}\n                      {option.label}\n                    </>\n                  )}\n                  <Check\n                    className={cn(\n                      \"ds:ml-auto\",\n                      value === option.value ? \"ds:opacity-100\" : \"ds:opacity-0\" // So sánh theo value\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { Combobox, type ComboboxProps, type SelectOption };\n"],"names":["comboboxVariants","cva","Combobox","value","options","placeHolder","emptyText","onChange","clearable","className","dropdownClassName","children","size","state","searchable","tagRender","props","open","setOpen","React","handleOpenChange","newOpen","Popover","jsx","PopoverTrigger","jsxs","Label","cn","option","ChevronUp","ChevronDown","e","X","PopoverContent","Command","CommandInput","CommandList","CommandEmpty","CommandGroup","CommandItem","Fragment","Check"],"mappings":"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"}

package/dist/esm/packages/ui/src/components/context-menu.js

@@ -70,7 +70,7 @@ function z({
     {
       "data-slot": "context-menu-sub-content",
       className: o(
-        "ds:bg-popover ds:text-popover-foreground ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0 ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95 ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=left]:slide-in-from-right-2 ds:data-[side=right]:slide-in-from-left-2 ds:data-[side=top]:slide-in-from-bottom-2 ds:z-50 ds:min-w-[8rem] ds:origin-(--radix-context-menu-content-transform-origin) ds:overflow-hidden ds:rounded-md ds:border ds:p-1 ds:shadow-lg",
+        "ds:bg-popover ds:text-popover-foreground ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0 ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95 ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=left]:slide-in-from-right-2 ds:data-[side=right]:slide-in-from-left-2 ds:data-[side=top]:slide-in-from-bottom-2 ds:z-50 ds:min-w-[8rem] ds:origin-(--radix-context-menu-content-transform-origin) ds:overflow-hidden ds:rounded-md ds:border ds:border-border ds:p-1 ds:shadow-lg",
         t
       ),
       ...s