@cryptlex/web-components 1.5.0 → 1.6.1

package/dist/components/data-table/data-table.es.js

@@ -140,19 +140,19 @@ function ae({
     getCoreRowModel: it(),
     rowCount: (x = o.data) == null ? void 0 : x.total,
     manualPagination: !0,
-    // Handle pagination manually
+    // Handle pagination manually since pagination is done server side for data tables
     onPaginationChange: (t) => {
       const e = typeof t == "function" ? t(u) : t;
       a({ pagination: e });
     },
     manualSorting: !0,
-    // Handle sorting manually
+    // Handle sorting manually since sorting is done server side for data tables
     onSortingChange: (t) => {
       const e = typeof t == "function" ? t(p) : t;
-      a({ sorting: e });
+      a({ sorting: e, rowSelection: {} });
     },
     manualFiltering: !0,
-    // Handle filtering manually
+    // Handle filtering manually since filtering is done server side for data tables
     onGlobalFilterChange: (t) => {
       const e = typeof t == "function" ? t(w) : t;
       a({ columnFilters: e });
@@ -199,7 +199,7 @@ function ae({
       }
     ),
     /* @__PURE__ */ i("div", { className: "w-full bg-card overflow-auto border-x", children: /* @__PURE__ */ i(st, { table: s, columns: _, dataQuery: o }) }),
-    /* @__PURE__ */ c("div", { className: "bg-card flex w-full justify-between border gap-4 p-4", children: [
+    /* @__PURE__ */ c("div", { className: "bg-card flex w-full justify-between border gap-4 p-4 overflow-x-auto", children: [
       /* @__PURE__ */ c("div", { className: "flex gap-4", children: [
         /* @__PURE__ */ i(nt, { table: s }),
         /* @__PURE__ */ i(at, { table: s })

package/dist/components/data-table/data-table.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["'use client';\nimport { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n  DEFAULT_FILTERABLE_FIELDS,\n  TABLE_CHECK_BOX_COLUMN,\n  TABLE_DEFAULT_DATE_COLUMNS,\n  TABLE_ID_COLUMN,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/index';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  createColumnHelper,\n  getCoreRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useDebounce } from 'use-debounce';\nimport { ColumnPicker } from './column-picker';\nimport { PageSize } from './page-size';\nimport { Paginator } from './paginator';\nimport Actions from './table-actions';\nimport { TableContent } from './table-content';\nimport type { FilterableProperties, MetadataDto, TableActions, TableFetchFn } from './table-utils';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'actions_button';\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData, TValue = any> {\n  columns: ColumnDef<TData, TValue>[]; // Columns for the table\n  tableName: string; // Table name used as query key\n  fetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n  tableActions: TableActions;\n  filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n  columnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends Record<string, any>, TValue = any>({\n  columns,\n  fetchFn,\n  tableName,\n  tableActions,\n  columnsToHideByDefault,\n  filterableFields,\n}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\n\n  //TODO: This is later to be stored in url as params\n  const [tableState, setTableState] = useState({\n    sorting: [] as SortingState, // Sorting state\n    columnFilters: [] as ColumnFiltersState, // Filters for columns\n    searching: '', // Search query state\n    columnVisibility: {} as VisibilityState, // Visibility of columns\n    rowSelection: {}, // Row selection state\n    pagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n  });\n\n  // Update table state with new values\n  const updateTableState = (updates: Partial<typeof tableState>) => {\n    setTableState((prev) => ({ ...prev, ...updates }));\n  };\n\n  // Destructuring the table state for easier access\n  const { sorting, columnFilters, searching, columnVisibility, rowSelection, pagination } =\n    tableState;\n\n  // Debounce the search query to avoid making a request on every keystroke\n  const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n  // Update column visibility when columnsToHideByDefault changes\n  useEffect(() => {\n    updateTableState({\n      columnVisibility: { id: false, updatedAt: false, ...columnsToHideByDefault },\n    });\n  }, [columnsToHideByDefault]);\n  const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n  const formatedFilters = useMemo(() => {\n    return filters.reduce((acc, filter) => {\n      const { property, value, operator } = filter;\n      if (!acc[property]) {\n        acc[property] = {};\n      }\n      acc[property][operator] = value;\n      return acc;\n    }, {} as Record<string, Record<string, any>>);\n  }, [filters]);\n\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const dataQuery = useQuery({\n    queryKey: [tableName, pagination, sorting, debouncedQuery, formatedFilters],\n    queryFn: () => fetchFn(pagination, sorting, searching.trim(), formatedFilters),\n    placeholderData: keepPreviousData, // Keep previous data while loading new data\n    retry: 0,\n    refetchOnWindowFocus: false,\n  });\n\n  // Create column helpers for dynamic column generation\n  const columnHelper = createColumnHelper<TData>();\n  const metadataColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {\n    const data = dataQuery.data?.data;\n    if (!data?.length) return [];\n    // set of all the keys present in a given view\n    const allMetadataKeys = new Set<string>();\n\n    // Collect all unique metadata keys\n    data.forEach((row: TData) => {\n      if (row.metadata) {\n        row.metadata.forEach((meta: MetadataDto) => {\n          allMetadataKeys.add(meta.key);\n        });\n      }\n    });\n\n    // Generate columns for all unique metadata keys\n    return Array.from(allMetadataKeys).map((key) =>\n      columnHelper.accessor(\n        (row: TData) => {\n          // Find the metadata object with the matching key\n          const metadataEntry = row.metadata?.find((meta: MetadataDto) => meta.key === key);\n          return metadataEntry?.value; // Return the value for the specific key\n        },\n        {\n          header: () => (\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <span className=\"flex gap-1 items-center align-middle\">\n                    {key} <Info size={18} strokeWidth={'1px'} />\n                  </span>\n                </TooltipTrigger>\n                <TooltipContent>Metadata Key</TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ), // Use the metadata key as the column header\n          id: key,\n          enableSorting: false,\n          cell: (info) => {\n            const value = info.getValue();\n            // Handle null/undefined values\n            if (value === null || value === undefined) return '';\n            // For primitive types, return the string representation\n            return String(value);\n          },\n        },\n      ),\n    );\n  }, [dataQuery.data?.data]);\n\n  /**\n   * ID,createdAt and updatedAt will be added by default for all tables\n   * If selection is allowed, checkbox will be added\n   * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n   * If there are actions for the table, they will be placed fixed at the right side of table.\n   */\n  const extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n    const _columns = [\n      ...(tableActions.selection ? TABLE_CHECK_BOX_COLUMN : []),\n      ...TABLE_ID_COLUMN,\n      ...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...TABLE_DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n    ];\n\n    return _columns;\n  }, [columns, metadataColumns, dataQuery.data?.data, tableActions.selection]);\n\n  // Get selected row data\n  const rowSelectedData = useMemo(\n    () => Object.entries(rowSelection).map((d: any) => dataQuery?.data?.data?.[d[0]]),\n    [dataQuery?.data?.data, rowSelection],\n  );\n\n  // Use react-table's hook to create the table instance\n  const table = useReactTable({\n    data: dataQuery.data?.data ?? [],\n    columns: extendedColumns,\n    getCoreRowModel: getCoreRowModel(),\n    rowCount: dataQuery.data?.total,\n    manualPagination: true, // Handle pagination manually\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      updateTableState({ sorting: newSorting });\n    },\n    manualFiltering: true, // Handle filtering manually\n    onGlobalFilterChange: (updater) => {\n      const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n      updateTableState({ columnFilters: newFilters });\n    },\n    onColumnVisibilityChange: (updater) => {\n      const newVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n      updateTableState({ columnVisibility: newVisibility });\n    },\n    onRowSelectionChange: (updater) => {\n      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n      updateTableState({ rowSelection: newSelection });\n    },\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      pagination,\n      rowSelection,\n    },\n    meta: {\n      refetch: dataQuery.refetch,\n    },\n  });\n  const stateToPass = {\n    key: '',\n    stateData: rowSelectedData,\n  };\n\n  return (\n    <>\n      <TableFilter\n        filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n        filters={filters}\n        onFiltersChange={setFilters}\n      />\n\n      {/* Table Actions Section */}\n      <Actions\n        dataQuery={dataQuery}\n        table={table}\n        tableActions={tableActions}\n        stateToPass={stateToPass}\n        handleSearching={(value) => updateTableState({ searching: value })}\n      />\n\n      {/* Table Content Section */}\n      {/* TODO, content tabindex */}\n      {/* TODO set height */}\n      <div className='w-full bg-card overflow-auto border-x'>\n        <TableContent table={table} columns={extendedColumns} dataQuery={dataQuery} />\n      </div>\n\n      {/* Table Footer Section with Pagination and Column Picker */}\n      <div className=\"bg-card flex w-full justify-between border gap-4 p-4\">\n        <div className=\"flex gap-4\">\n          <ColumnPicker table={table} />\n          <PageSize table={table} />\n        </div>\n        <Paginator table={table} rowCount={dataQuery.data?.total ?? 0} />\n      </div>\n    </>\n  );\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","filterableFields","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","filters","setFilters","formatedFilters","useMemo","acc","filter","property","value","operator","dataQuery","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","rowSelectedData","d","_c","table","useReactTable","_d","getCoreRowModel","_e","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","stateToPass","Fragment","TableFilter","DEFAULT_FILTERABLE_FIELDS","Actions","TableContent","ColumnPicker","PageSize","Paginator","_f"],"mappings":"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"}
+{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/data-table/data-table.tsx"],"sourcesContent":["'use client';\nimport { TableFilter, type FilterFormType } from '@/components/data-table/table-filter';\nimport {\n  DEFAULT_FILTERABLE_FIELDS,\n  TABLE_CHECK_BOX_COLUMN,\n  TABLE_DEFAULT_DATE_COLUMNS,\n  TABLE_ID_COLUMN,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/index';\nimport { keepPreviousData, useQuery } from '@tanstack/react-query';\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  createColumnHelper,\n  getCoreRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useDebounce } from 'use-debounce';\nimport { ColumnPicker } from './column-picker';\nimport { PageSize } from './page-size';\nimport { Paginator } from './paginator';\nimport Actions from './table-actions';\nimport { TableContent } from './table-content';\nimport type { FilterableProperties, MetadataDto, TableActions, TableFetchFn } from './table-utils';\n\n/** Reserved name for actions column */\nexport const ACTIONS_COLUMN_ID = 'actions_button';\n\n// Props type for the DataTable component\nexport interface DataTableProps<TData, TValue = any> {\n  columns: ColumnDef<TData, TValue>[]; // Columns for the table\n  tableName: string; // Table name used as query key\n  fetchFn: TableFetchFn<TData>; // Function for fetching data from the server\n  tableActions: TableActions;\n  filterableFields: FilterableProperties<TData>; // Fields that can be filtered\n  columnsToHideByDefault: VisibilityState; // Columns that are hidden by default\n}\nexport function DataTable<TData extends Record<string, any>, TValue = any>({\n  columns,\n  fetchFn,\n  tableName,\n  tableActions,\n  columnsToHideByDefault,\n  filterableFields,\n}: DataTableProps<TData, TValue>) {\n  // State for managing table data and filters\n\n  //TODO: This is later to be stored in url as params\n  const [tableState, setTableState] = useState({\n    sorting: [] as SortingState, // Sorting state\n    columnFilters: [] as ColumnFiltersState, // Filters for columns\n    searching: '', // Search query state\n    columnVisibility: {} as VisibilityState, // Visibility of columns\n    rowSelection: {}, // Row selection state\n    pagination: { pageIndex: 0, pageSize: 20 } as PaginationState, // Pagination state\n  });\n\n  // Update table state with new values\n  const updateTableState = (updates: Partial<typeof tableState>) => {\n    setTableState((prev) => ({ ...prev, ...updates }));\n  };\n\n  // Destructuring the table state for easier access\n  const { sorting, columnFilters, searching, columnVisibility, rowSelection, pagination } =\n    tableState;\n\n  // Debounce the search query to avoid making a request on every keystroke\n  const [debouncedQuery] = useDebounce(searching.trim(), 300);\n\n  // Update column visibility when columnsToHideByDefault changes\n  useEffect(() => {\n    updateTableState({\n      columnVisibility: { id: false, updatedAt: false, ...columnsToHideByDefault },\n    });\n  }, [columnsToHideByDefault]);\n  const [filters, setFilters] = useState<FilterFormType[]>([]);\n\n  const formatedFilters = useMemo(() => {\n    return filters.reduce((acc, filter) => {\n      const { property, value, operator } = filter;\n      if (!acc[property]) {\n        acc[property] = {};\n      }\n      acc[property][operator] = value;\n      return acc;\n    }, {} as Record<string, Record<string, any>>);\n  }, [filters]);\n\n  // Fetch table data using the fetchFn and react-query's useQuery hook\n  const dataQuery = useQuery({\n    queryKey: [tableName, pagination, sorting, debouncedQuery, formatedFilters],\n    queryFn: () => fetchFn(pagination, sorting, searching.trim(), formatedFilters),\n    placeholderData: keepPreviousData, // Keep previous data while loading new data\n    retry: 0,\n    refetchOnWindowFocus: false,\n  });\n\n  // Create column helpers for dynamic column generation\n  const columnHelper = createColumnHelper<TData>();\n  const metadataColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {\n    const data = dataQuery.data?.data;\n    if (!data?.length) return [];\n    // set of all the keys present in a given view\n    const allMetadataKeys = new Set<string>();\n\n    // Collect all unique metadata keys\n    data.forEach((row: TData) => {\n      if (row.metadata) {\n        row.metadata.forEach((meta: MetadataDto) => {\n          allMetadataKeys.add(meta.key);\n        });\n      }\n    });\n\n    // Generate columns for all unique metadata keys\n    return Array.from(allMetadataKeys).map((key) =>\n      columnHelper.accessor(\n        (row: TData) => {\n          // Find the metadata object with the matching key\n          const metadataEntry = row.metadata?.find((meta: MetadataDto) => meta.key === key);\n          return metadataEntry?.value; // Return the value for the specific key\n        },\n        {\n          header: () => (\n            <TooltipProvider delayDuration={0}>\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <span className=\"flex gap-1 items-center align-middle\">\n                    {key} <Info size={18} strokeWidth={'1px'} />\n                  </span>\n                </TooltipTrigger>\n                <TooltipContent>Metadata Key</TooltipContent>\n              </Tooltip>\n            </TooltipProvider>\n          ), // Use the metadata key as the column header\n          id: key,\n          enableSorting: false,\n          cell: (info) => {\n            const value = info.getValue();\n            // Handle null/undefined values\n            if (value === null || value === undefined) return '';\n            // For primitive types, return the string representation\n            return String(value);\n          },\n        },\n      ),\n    );\n  }, [dataQuery.data?.data]);\n\n  /**\n   * ID,createdAt and updatedAt will be added by default for all tables\n   * If selection is allowed, checkbox will be added\n   * If the dto has metadata, dynamics columns for all the metadata key-value will be added(particular for a view)\n   * If there are actions for the table, they will be placed fixed at the right side of table.\n   */\n  const extendedColumns = useMemo<ColumnDef<any, any>[]>(() => {\n    const _columns = [\n      ...(tableActions.selection ? TABLE_CHECK_BOX_COLUMN : []),\n      ...TABLE_ID_COLUMN,\n      ...columns.filter((col) => col.id !== ACTIONS_COLUMN_ID),\n      ...(metadataColumns.length ? metadataColumns : []),\n      ...TABLE_DEFAULT_DATE_COLUMNS,\n      ...columns.filter((col) => col.id === ACTIONS_COLUMN_ID),\n    ];\n\n    return _columns;\n  }, [columns, metadataColumns, dataQuery.data?.data, tableActions.selection]);\n\n  // Get selected row data\n  const rowSelectedData = useMemo(\n    () => Object.entries(rowSelection).map((d: any) => dataQuery?.data?.data?.[d[0]]),\n    [dataQuery?.data?.data, rowSelection],\n  );\n\n  // Use react-table's hook to create the table instance\n  const table = useReactTable({\n    data: dataQuery.data?.data ?? [],\n    columns: extendedColumns,\n    getCoreRowModel: getCoreRowModel(),\n    rowCount: dataQuery.data?.total,\n    manualPagination: true, // Handle pagination manually since pagination is done server side for data tables\n    onPaginationChange: (updater) => {\n      const newPagination = typeof updater === 'function' ? updater(pagination) : updater;\n      updateTableState({ pagination: newPagination });\n    },\n    manualSorting: true, // Handle sorting manually since sorting is done server side for data tables\n    onSortingChange: (updater) => {\n      const newSorting = typeof updater === 'function' ? updater(sorting) : updater;\n      // Reset selection when sorting.\n      updateTableState({ sorting: newSorting, rowSelection: {} });\n    },\n    manualFiltering: true, // Handle filtering manually since filtering is done server side for data tables\n    onGlobalFilterChange: (updater) => {\n      const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;\n      updateTableState({ columnFilters: newFilters });\n    },\n    onColumnVisibilityChange: (updater) => {\n      const newVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;\n      updateTableState({ columnVisibility: newVisibility });\n    },\n    onRowSelectionChange: (updater) => {\n      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater;\n      updateTableState({ rowSelection: newSelection });\n    },\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      pagination,\n      rowSelection,\n    },\n    meta: {\n      refetch: dataQuery.refetch,\n    },\n  });\n  const stateToPass = {\n    key: '',\n    stateData: rowSelectedData,\n  };\n\n  return (\n    <>\n      <TableFilter\n        filterableProperties={{ ...filterableFields, ...DEFAULT_FILTERABLE_FIELDS }}\n        filters={filters}\n        onFiltersChange={setFilters}\n      />\n\n      {/* Table Actions Section */}\n      <Actions\n        dataQuery={dataQuery}\n        table={table}\n        tableActions={tableActions}\n        stateToPass={stateToPass}\n        handleSearching={(value) => updateTableState({ searching: value })}\n      />\n\n      {/* Table Content Section */}\n      {/* TODO, content tabindex */}\n      {/* TODO set height */}\n      <div className='w-full bg-card overflow-auto border-x'>\n        <TableContent table={table} columns={extendedColumns} dataQuery={dataQuery} />\n      </div>\n\n      {/* Table Footer Section with Pagination and Column Picker */}\n      <div className=\"bg-card flex w-full justify-between border gap-4 p-4 overflow-x-auto\">\n        <div className=\"flex gap-4\">\n          <ColumnPicker table={table} />\n          <PageSize table={table} />\n        </div>\n        <Paginator table={table} rowCount={dataQuery.data?.total ?? 0} />\n      </div>\n    </>\n  );\n}\n"],"names":["ACTIONS_COLUMN_ID","DataTable","columns","fetchFn","tableName","tableActions","columnsToHideByDefault","filterableFields","tableState","setTableState","useState","updateTableState","updates","prev","sorting","columnFilters","searching","columnVisibility","rowSelection","pagination","debouncedQuery","useDebounce","useEffect","filters","setFilters","formatedFilters","useMemo","acc","filter","property","value","operator","dataQuery","useQuery","keepPreviousData","columnHelper","createColumnHelper","metadataColumns","data","_a","allMetadataKeys","row","meta","key","metadataEntry","jsx","TooltipProvider","Tooltip","TooltipTrigger","jsxs","Info","TooltipContent","info","extendedColumns","TABLE_CHECK_BOX_COLUMN","TABLE_ID_COLUMN","col","TABLE_DEFAULT_DATE_COLUMNS","_b","rowSelectedData","d","_c","table","useReactTable","_d","getCoreRowModel","_e","updater","newPagination","newSorting","newFilters","newVisibility","newSelection","stateToPass","Fragment","TableFilter","DEFAULT_FILTERABLE_FIELDS","Actions","TableContent","ColumnPicker","PageSize","Paginator","_f"],"mappings":"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"}

package/dist/components/data-table/table-content.es.js

@@ -1,54 +1,54 @@
-import { jsxs as r, jsx as e, Fragment as m } from "react/jsx-runtime";
-import { ACTIONS_COLUMN_ID as d } from "./data-table.es.js";
-import { Table as p, TableHeader as f, TableRow as c, TableCell as i, TableBody as h, TableFooter as x } from "../ui/table.es.js";
+import { jsxs as r, jsx as e, Fragment as c } from "react/jsx-runtime";
+import { ACTIONS_COLUMN_ID as m } from "./data-table.es.js";
+import { Button as u } from "../ui/button.es.js";
+import { Table as f, TableHeader as h, TableRow as a, TableHead as x, TableBody as N, TableCell as d, TableFooter as b } from "../ui/table.es.js";
 import { flexRender as g } from "@tanstack/react-table";
-import { Info as b } from "lucide-react";
-function I({
-  table: n,
-  columns: u,
-  dataQuery: s
+import { Info as w } from "lucide-react";
+function j({
+  table: s,
+  columns: p,
+  dataQuery: o
 }) {
-  var a;
-  return /* @__PURE__ */ r(p, { className: "size-full", children: [
-    /* @__PURE__ */ e(f, { className: "sticky top-0 z-10", children: n.getHeaderGroups().map((o, l) => /* @__PURE__ */ e(c, { children: o.headers.map((t) => /* @__PURE__ */ r(
-      i,
+  var i;
+  return /* @__PURE__ */ r(f, { className: "size-full", children: [
+    /* @__PURE__ */ e(h, { className: "sticky top-0 z-10", children: s.getHeaderGroups().map((n, l) => /* @__PURE__ */ e(a, { children: n.headers.map((t) => /* @__PURE__ */ e(
+      x,
       {
-        className: `px-4 py-2 cursor-pointer text-left text-sm font-medium bg-card whitespace-nowrap ${t.id === d ? "sticky right-0 z-50 text-center" : ""}`,
-        onClick: t.column.getToggleSortingHandler(),
-        children: [
-          t.isPlaceholder ? null : g(t.column.columnDef.header, t.getContext()),
-          {
+        className: `px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${t.id === m ? "sticky right-0 z-50 text-center" : ""}`,
+        children: /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ e("span", { children: t.isPlaceholder ? null : g(t.column.columnDef.header, t.getContext()) }),
+          t.column.getCanSort() && /* @__PURE__ */ e(u, { size: "xs", variant: "outline", className: "font-mono", onClick: t.column.getToggleSortingHandler(), children: {
             asc: "↑",
             desc: "↓"
-          }[t.column.getIsSorted()] ?? null
-        ]
+          }[t.column.getIsSorted()] ?? "." })
+        ] })
       },
       t.id
     )) }, l)) }),
-    /* @__PURE__ */ e(h, { className: "flex-1 overflow-y-auto", children: n.getRowModel().rows.length ? (
+    /* @__PURE__ */ e(N, { className: "flex-1 overflow-y-auto", children: s.getRowModel().rows.length ? (
       // Render table data
-      n.getRowModel().rows.map((o) => /* @__PURE__ */ e(c, { className: "transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20", "data-state": o.getIsSelected() && "selected", children: o.getVisibleCells().map((l) => /* @__PURE__ */ e(
-        i,
+      s.getRowModel().rows.map((n) => /* @__PURE__ */ e(a, { className: "transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20", "data-state": n.getIsSelected() && "selected", children: n.getVisibleCells().map((l) => /* @__PURE__ */ e(
+        d,
         {
           className: `
                     px-4 py-2 text-left text-sm whitespace-nowrap
-                    ${l.column.id === d ? "sticky right-0 w-20 bg-card" : ""}
+                    ${l.column.id === m ? "sticky right-0 w-20 bg-card" : ""}
                   `,
           children: g(l.column.columnDef.cell, l.getContext())
         },
         l.id
-      )) }, o.id))
+      )) }, n.id))
     ) : (
       // Empty table
-      /* @__PURE__ */ e(c, { className: "cursor-not-allowed", children: /* @__PURE__ */ e(i, { colSpan: u.length, className: "border-none", children: /* @__PURE__ */ e("span", { className: "flex gap-3 justify-center items-center", children: !s.isFetching && (s.isError ? /* @__PURE__ */ r(m, { children: [
-        /* @__PURE__ */ e(b, {}),
+      /* @__PURE__ */ e(a, { className: "cursor-not-allowed", children: /* @__PURE__ */ e(d, { colSpan: p.length, className: "border-none", children: /* @__PURE__ */ e("span", { className: "flex gap-3 justify-center items-center", children: !o.isFetching && (o.isError ? /* @__PURE__ */ r(c, { children: [
+        /* @__PURE__ */ e(w, {}),
         " You don't have the required permissions. Please contact your admin."
-      ] }) : (a = s.data) != null && a.data ? null : /* @__PURE__ */ e(m, { children: "No result found." })) }) }) })
+      ] }) : (i = o.data) != null && i.data ? null : /* @__PURE__ */ e(c, { children: "No result found." })) }) }) })
     ) }),
-    s.isFetching && /* @__PURE__ */ e(x, { className: "absolute inset-0 z-20 flex justify-center items-center bg-card/80" })
+    o.isFetching && /* @__PURE__ */ e(b, { className: "absolute inset-0 z-20 flex justify-center items-center bg-card/80" })
   ] });
 }
 export {
-  I as TableContent
+  j as TableContent
 };
 //# sourceMappingURL=table-content.es.js.map

package/dist/components/data-table/table-content.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from '@/components/data-table/data-table';\nimport {\n  TableBody,\n  TableCell,\n  Table as TableComponent,\n  TableFooter,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport { ColumnDef, Table, flexRender } from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\n\nexport function TableContent<TData, TValue>({\n  table,\n  columns,\n  dataQuery,\n}: {\n  table: Table<TData>;\n  columns: ColumnDef<TData, TValue>[];\n  dataQuery: UseQueryResult<any, unknown>;\n}) {\n  return (\n    <TableComponent className=\"size-full\">\n      <TableHeader className=\"sticky top-0 z-10\">\n        {table.getHeaderGroups().map((headerGroup, index) => (\n          <TableRow key={index}>\n            {headerGroup.headers.map((header) => (\n              <TableCell\n                key={header.id}\n                className={`px-4 py-2 cursor-pointer text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? 'sticky right-0 z-50 text-center' : ''}`}\n                onClick={header.column.getToggleSortingHandler()}\n              >\n                {/* TODO Better interaction design here. */}\n                {header.isPlaceholder\n                  ? null\n                  : flexRender(header.column.columnDef.header, header.getContext())}\n\n                {{\n                  asc: '↑',\n                  desc: '↓',\n                }[header.column.getIsSorted() as string] ?? null}\n              </TableCell>\n            ))}\n          </TableRow>\n        ))}\n      </TableHeader>\n      <TableBody className=\"flex-1 overflow-y-auto\">\n        {table.getRowModel().rows.length ?\n          // Render table data\n          (\n            table.getRowModel().rows.map((row) => (\n              <TableRow className='transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20' key={row.id} data-state={row.getIsSelected() && 'selected'}>\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell\n                    key={cell.id}\n                    className={`\n                    px-4 py-2 text-left text-sm whitespace-nowrap\n                    ${cell.column.id === ACTIONS_COLUMN_ID\n                        ? 'sticky right-0 w-20 bg-card'\n                        : ''\n                      }\n                  `}\n                  >\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          )\n          :\n          // Empty table\n          (\n            <TableRow className=\"cursor-not-allowed\">\n              <TableCell colSpan={columns.length} className=\"border-none\">\n                <span className=\"flex gap-3 justify-center items-center\">\n                  {!dataQuery.isFetching && (\n                    dataQuery.isError ? (\n                      <>\n                        <Info /> You don't have the required permissions. Please contact your admin.\n                      </>\n                    ) : !dataQuery.data?.data ? (\n                      <>No result found.</>\n                    ) : null\n                  )}\n                </span>\n              </TableCell>\n            </TableRow>\n          )}\n      </TableBody>\n      {/* Loader positioned to cover entire table viewport */}\n      {dataQuery.isFetching && (\n        <TableFooter className=\"absolute inset-0 z-20 flex justify-center items-center bg-card/80\" />\n      )}\n    </TableComponent>\n  );\n}\n"],"names":["TableContent","table","columns","dataQuery","jsxs","TableComponent","jsx","TableHeader","headerGroup","index","TableRow","header","TableCell","ACTIONS_COLUMN_ID","flexRender","TableBody","row","cell","Fragment","Info","_a","TableFooter"],"mappings":";;;;;AAaO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAIG;;AAEC,SAAA,gBAAAC,EAACC,GAAe,EAAA,WAAU,aACxB,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,WAAU,qBACpB,UAAMN,EAAA,kBAAkB,IAAI,CAACO,GAAaC,wBACxCC,GACE,EAAA,UAAAF,EAAY,QAAQ,IAAI,CAACG,MACxB,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QAEC,WAAW,oFAAoFD,EAAO,OAAOE,IAAoB,oCAAoC,EAAE;AAAA,QACvK,SAASF,EAAO,OAAO,wBAAwB;AAAA,QAG9C,UAAA;AAAA,UAAOA,EAAA,gBACJ,OACAG,EAAWH,EAAO,OAAO,UAAU,QAAQA,EAAO,YAAY;AAAA,UAEjE;AAAA,YACC,KAAK;AAAA,YACL,MAAM;AAAA,UACN,EAAAA,EAAO,OAAO,YAAA,CAAuB,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAZvCA,EAAO;AAAA,IAAA,CAcf,EAAA,GAjBYF,CAkBf,CACD,GACH;AAAA,sBACCM,GAAU,EAAA,WAAU,0BAClB,UAAMd,EAAA,cAAc,KAAK;AAAA;AAAA,MAGtBA,EAAM,cAAc,KAAK,IAAI,CAACe,wBAC3BN,GAAS,EAAA,WAAU,+FAA2G,cAAYM,EAAI,mBAAmB,YAC/J,YAAI,kBAAkB,IAAI,CAACC,MAC1B,gBAAAX;AAAA,QAACM;AAAA,QAAA;AAAA,UAEC,WAAW;AAAA;AAAA,sBAETK,EAAK,OAAO,OAAOJ,IACf,gCACA,EACJ;AAAA;AAAA,UAGD,YAAWI,EAAK,OAAO,UAAU,MAAMA,EAAK,WAAY,CAAA;AAAA,QAAA;AAAA,QATpDA,EAAK;AAAA,MAAA,CAWb,EAAA,GAdoHD,EAAI,EAe3H,CACD;AAAA;AAAA;AAAA,MAKD,gBAAAV,EAACI,KAAS,WAAU,sBAClB,4BAACE,GAAU,EAAA,SAASV,EAAQ,QAAQ,WAAU,eAC5C,UAAC,gBAAAI,EAAA,QAAA,EAAK,WAAU,0CACb,UAAA,CAACH,EAAU,eACVA,EAAU,UAEN,gBAAAC,EAAAc,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAZ,EAACa,GAAK,EAAA;AAAA,QAAE;AAAA,MACV,EAAA,CAAA,KACGC,IAAAjB,EAAU,SAAV,QAAAiB,EAAgB,OAEjB,8BADA,UAAgB,mBAAA,CAAA,GAGxB,CAAA,EACF,CAAA,EACF,CAAA;AAAA,OAEN;AAAA,IAECjB,EAAU,cACR,gBAAAG,EAAAe,GAAA,EAAY,WAAU,oEAAoE,CAAA;AAAA,EAAA,GAE/F;AAEJ;"}
+{"version":3,"file":"table-content.es.js","sources":["../../../lib/components/data-table/table-content.tsx"],"sourcesContent":["import { ACTIONS_COLUMN_ID } from '@/components/data-table/data-table';\nimport { Button } from '@/components/ui/button';\nimport {\n  TableBody,\n  TableCell,\n  Table as TableComponent,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table';\nimport type { UseQueryResult } from '@tanstack/react-query';\nimport { ColumnDef, Table, flexRender } from '@tanstack/react-table';\nimport { Info } from 'lucide-react';\n\nexport function TableContent<TData, TValue>({\n  table,\n  columns,\n  dataQuery,\n}: {\n  table: Table<TData>;\n  columns: ColumnDef<TData, TValue>[];\n  dataQuery: UseQueryResult<any, unknown>;\n}) {\n  return (\n    <TableComponent className=\"size-full\">\n      <TableHeader className=\"sticky top-0 z-10\">\n        {table.getHeaderGroups().map((headerGroup, index) => (\n          <TableRow key={index}>\n            {headerGroup.headers.map((header) => (\n              <TableHead\n                key={header.id}\n                className={`px-4 py-2 text-left text-sm font-medium bg-card whitespace-nowrap ${header.id === ACTIONS_COLUMN_ID ? 'sticky right-0 z-50 text-center' : ''}`}\n              >\n                <span className='inline-flex items-center gap-1'>\n                  {/* Header text */}\n                  <span>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </span>\n                  {/* Sorting button / Indicator */}\n                  {header.column.getCanSort() &&\n                    <Button size=\"xs\" variant='outline' className='font-mono' onClick={header.column.getToggleSortingHandler()}>{{\n                      asc: '↑',\n                      desc: '↓',\n                    }[header.column.getIsSorted() as string] ?? \".\"}</Button>\n                  }\n                </span>\n              </TableHead>\n            ))}\n          </TableRow>\n        ))}\n      </TableHeader>\n      <TableBody className=\"flex-1 overflow-y-auto\">\n        {table.getRowModel().rows.length ?\n          // Render table data\n          (\n            table.getRowModel().rows.map((row) => (\n              <TableRow className='transition-colors data-[state=selected]:bg-muted-foreground/30 hover:bg-muted-foreground/20' key={row.id} data-state={row.getIsSelected() && 'selected'}>\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell\n                    key={cell.id}\n                    className={`\n                    px-4 py-2 text-left text-sm whitespace-nowrap\n                    ${cell.column.id === ACTIONS_COLUMN_ID\n                        ? 'sticky right-0 w-20 bg-card'\n                        : ''\n                      }\n                  `}\n                  >\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          )\n          :\n          // Empty table\n          (\n            <TableRow className=\"cursor-not-allowed\">\n              <TableCell colSpan={columns.length} className=\"border-none\">\n                <span className=\"flex gap-3 justify-center items-center\">\n                  {!dataQuery.isFetching && (\n                    dataQuery.isError ? (\n                      <>\n                        <Info /> You don't have the required permissions. Please contact your admin.\n                      </>\n                    ) : !dataQuery.data?.data ? (\n                      <>No result found.</>\n                    ) : null\n                  )}\n                </span>\n              </TableCell>\n            </TableRow>\n          )}\n      </TableBody>\n      {/* Loader positioned to cover entire table viewport */}\n      {dataQuery.isFetching && (\n        <TableFooter className=\"absolute inset-0 z-20 flex justify-center items-center bg-card/80\" />\n      )}\n    </TableComponent>\n  );\n}\n"],"names":["TableContent","table","columns","dataQuery","jsxs","TableComponent","jsx","TableHeader","headerGroup","index","TableRow","header","TableHead","ACTIONS_COLUMN_ID","flexRender","Button","TableBody","row","cell","TableCell","Fragment","Info","_a","TableFooter"],"mappings":";;;;;;AAeO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAIG;;AAEC,SAAA,gBAAAC,EAACC,GAAe,EAAA,WAAU,aACxB,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAY,WAAU,qBACpB,UAAMN,EAAA,kBAAkB,IAAI,CAACO,GAAaC,wBACxCC,GACE,EAAA,UAAAF,EAAY,QAAQ,IAAI,CAACG,MACxB,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QAEC,WAAW,qEAAqED,EAAO,OAAOE,IAAoB,oCAAoC,EAAE;AAAA,QAExJ,UAAA,gBAAAT,EAAC,QAAK,EAAA,WAAU,kCAEd,UAAA;AAAA,UAAA,gBAAAE,EAAC,QACE,EAAA,UAAAK,EAAO,gBACJ,OACAG,EAAWH,EAAO,OAAO,UAAU,QAAQA,EAAO,WAAY,CAAA,GACpE;AAAA,UAECA,EAAO,OAAO,WACb,KAAA,gBAAAL,EAACS,KAAO,MAAK,MAAK,SAAQ,WAAU,WAAU,aAAY,SAASJ,EAAO,OAAO,wBAA4B,GAAA,UAAA;AAAA,YAC3G,KAAK;AAAA,YACL,MAAM;AAAA,YACNA,EAAO,OAAO,YAAuB,CAAA,KAAK,IAAI,CAAA;AAAA,QAAA,EAEpD,CAAA;AAAA,MAAA;AAAA,MAjBKA,EAAO;AAAA,IAAA,CAmBf,EAAA,GAtBYF,CAuBf,CACD,GACH;AAAA,sBACCO,GAAU,EAAA,WAAU,0BAClB,UAAMf,EAAA,cAAc,KAAK;AAAA;AAAA,MAGtBA,EAAM,cAAc,KAAK,IAAI,CAACgB,wBAC3BP,GAAS,EAAA,WAAU,+FAA2G,cAAYO,EAAI,mBAAmB,YAC/J,YAAI,kBAAkB,IAAI,CAACC,MAC1B,gBAAAZ;AAAA,QAACa;AAAA,QAAA;AAAA,UAEC,WAAW;AAAA;AAAA,sBAETD,EAAK,OAAO,OAAOL,IACf,gCACA,EACJ;AAAA;AAAA,UAGD,YAAWK,EAAK,OAAO,UAAU,MAAMA,EAAK,WAAY,CAAA;AAAA,QAAA;AAAA,QATpDA,EAAK;AAAA,MAAA,CAWb,EAAA,GAdoHD,EAAI,EAe3H,CACD;AAAA;AAAA;AAAA,MAKD,gBAAAX,EAACI,KAAS,WAAU,sBAClB,4BAACS,GAAU,EAAA,SAASjB,EAAQ,QAAQ,WAAU,eAC5C,UAAC,gBAAAI,EAAA,QAAA,EAAK,WAAU,0CACb,UAAA,CAACH,EAAU,eACVA,EAAU,UAEN,gBAAAC,EAAAgB,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAd,EAACe,GAAK,EAAA;AAAA,QAAE;AAAA,MACV,EAAA,CAAA,KACGC,IAAAnB,EAAU,SAAV,QAAAmB,EAAgB,OAEjB,8BADA,UAAgB,mBAAA,CAAA,GAGxB,CAAA,EACF,CAAA,EACF,CAAA;AAAA,OAEN;AAAA,IAECnB,EAAU,cACR,gBAAAG,EAAAiB,GAAA,EAAY,WAAU,oEAAoE,CAAA;AAAA,EAAA,GAE/F;AAEJ;"}

package/dist/components/static-data-table/data-table.es.js

@@ -1,30 +1,30 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { Badge as h } from "../ui/badge.es.js";
-import { Table as g, TableHeader as x, TableRow as c, TableCell as a, TableBody as f } from "../ui/table.es.js";
-import { getResourceDisplayName as u, getValueFromData as y } from "../data-table/table-utils/constants.es.js";
-function b({ accessors: d, data: o, affectedData: n }) {
+import { Table as g, TableHeader as x, TableRow as c, TableHead as f, TableCell as t, TableBody as u } from "../ui/table.es.js";
+import { getResourceDisplayName as y, getValueFromData as N } from "../data-table/table-utils/constants.es.js";
+function A({ accessors: d, data: o, affectedData: n }) {
   return /* @__PURE__ */ i(g, { children: [
     /* @__PURE__ */ e(x, { className: "text-left align-middle sticky top-0 z-10 bg-card", children: /* @__PURE__ */ i(c, { children: [
       d.map((r) => /* @__PURE__ */ e(
-        a,
+        f,
         {
           className: "px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card",
-          children: u(String(r), "admin-portal")
+          children: y(String(r), "admin-portal")
         },
         String(r)
       )),
-      n && /* @__PURE__ */ e(a, { className: "px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card", children: "Affected" })
+      n && /* @__PURE__ */ e(t, { className: "px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card", children: "Affected" })
     ] }) }),
-    /* @__PURE__ */ e(f, { children: o.map((r, m) => /* @__PURE__ */ i(c, { children: [
-      d.map((l) => {
-        const p = r[l];
-        return Array.isArray(p) ? /* @__PURE__ */ e(a, { className: "flex gap-4", children: p.map((t, s) => /* @__PURE__ */ e(h, { children: (t == null ? void 0 : t.name) || t }, s)) }, String(l)) : /* @__PURE__ */ e(a, { children: y(r, l) }, String(l));
+    /* @__PURE__ */ e(u, { children: o.map((r, m) => /* @__PURE__ */ i(c, { children: [
+      d.map((a) => {
+        const p = r[a];
+        return Array.isArray(p) ? /* @__PURE__ */ e(t, { className: "flex gap-4", children: p.map((l, s) => /* @__PURE__ */ e(h, { children: (l == null ? void 0 : l.name) || l }, s)) }, String(a)) : /* @__PURE__ */ e(t, { children: N(r, a) }, String(a));
       }),
-      n && /* @__PURE__ */ e(a, { children: n.includes(r) ? /* @__PURE__ */ e("span", { className: "text-success-foreground", children: "✔" }) : /* @__PURE__ */ e("span", { className: "text-destructive-foreground", children: "✖" }) })
+      n && /* @__PURE__ */ e(t, { children: n.includes(r) ? /* @__PURE__ */ e("span", { className: "text-success-foreground", children: "✔" }) : /* @__PURE__ */ e("span", { className: "text-destructive-foreground", children: "✖" }) })
     ] }, m)) })
   ] });
 }
 export {
-  b as StaticDataTable
+  A as StaticDataTable
 };
 //# sourceMappingURL=data-table.es.js.map

package/dist/components/static-data-table/data-table.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/static-data-table/data-table.tsx"],"sourcesContent":["import { getResourceDisplayName, getValueFromData } from '@/components/data-table';\nimport { Badge } from '@/components/ui/badge';\nimport { Table, TableBody, TableCell, TableHeader, TableRow } from '@/components/ui/table';\n\n\nexport interface StaticDataTableProps<T> {\n  accessors: (keyof T)[];\n  data: T[];\n  affectedData?: T[];\n}\n\nexport function StaticDataTable<T>({ accessors, data, affectedData }: StaticDataTableProps<T>) {\n  return (\n    <Table>\n      <TableHeader className=\"text-left align-middle sticky top-0 z-10 bg-card\">\n        <TableRow>\n          {accessors.map((accessor) => (\n            <TableCell\n              key={String(accessor)}\n              className=\"px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card\"\n            >\n              {getResourceDisplayName(String(accessor), 'admin-portal')}\n            </TableCell>\n          ))}\n          {affectedData && (\n            <TableCell className=\"px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card\">\n              Affected\n            </TableCell>\n          )}\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {data.map((item, index) => (\n          <TableRow key={index}>\n            {accessors.map((accessor) => {\n              const value = item[accessor];\n              // Handle arrays (e.g., userGroups) with badges\n              if (Array.isArray(value)) {\n                return (\n                  <TableCell key={String(accessor)} className=\"flex gap-4\">\n                    {value.map((subItem, subIndex) => (\n                      <Badge key={subIndex}>{subItem?.name || subItem}</Badge>\n                    ))}\n                  </TableCell>\n                );\n              }\n              // Handle other data types\n              return (\n                <TableCell key={String(accessor)}>{getValueFromData(item, accessor)}</TableCell>\n              );\n            })}\n            {affectedData && (\n              <TableCell>\n                {affectedData.includes(item) ? (\n                  <span className=\"text-success-foreground\">✔</span>\n                ) : (\n                  <span className=\"text-destructive-foreground\">✖</span>\n                )}\n              </TableCell>\n            )}\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n}\n"],"names":["StaticDataTable","accessors","data","affectedData","Table","jsx","TableHeader","jsxs","TableRow","accessor","TableCell","getResourceDisplayName","TableBody","item","index","value","subItem","subIndex","Badge","getValueFromData"],"mappings":";;;;AAWO,SAASA,EAAmB,EAAE,WAAAC,GAAW,MAAAC,GAAM,cAAAC,KAAyC;AAC7F,2BACGC,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAY,EAAA,WAAU,oDACrB,UAAA,gBAAAC,EAACC,GACE,EAAA,UAAA;AAAA,MAAUP,EAAA,IAAI,CAACQ,MACd,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAuBC,EAAA,OAAOF,CAAQ,GAAG,cAAc;AAAA,QAAA;AAAA,QAHnD,OAAOA,CAAQ;AAAA,MAAA,CAKvB;AAAA,MACAN,KACC,gBAAAE,EAACK,GAAU,EAAA,WAAU,oFAAmF,UAExG,WAAA,CAAA;AAAA,IAAA,EAAA,CAEJ,EACF,CAAA;AAAA,IACA,gBAAAL,EAACO,KACE,UAAKV,EAAA,IAAI,CAACW,GAAMC,wBACdN,GACE,EAAA,UAAA;AAAA,MAAUP,EAAA,IAAI,CAACQ,MAAa;AACrB,cAAAM,IAAQF,EAAKJ,CAAQ;AAEvB,eAAA,MAAM,QAAQM,CAAK,sBAElBL,GAAiC,EAAA,WAAU,cACzC,UAAMK,EAAA,IAAI,CAACC,GAASC,wBAClBC,GAAsB,EAAA,WAAAF,KAAA,gBAAAA,EAAS,SAAQA,EAA5B,GAAAC,CAAoC,CACjD,EAHa,GAAA,OAAOR,CAAQ,CAI/B,IAKF,gBAAAJ,EAACK,KAAkC,UAAiBS,EAAAN,GAAMJ,CAAQ,EAAlD,GAAA,OAAOA,CAAQ,CAAqC;AAAA,MAAA,CAEvE;AAAA,MACAN,KACE,gBAAAE,EAAAK,GAAA,EACE,YAAa,SAASG,CAAI,IACxB,gBAAAR,EAAA,QAAA,EAAK,WAAU,2BAA0B,eAAC,IAE3C,gBAAAA,EAAC,UAAK,WAAU,+BAA8B,cAAC,CAAA,EAEnD,CAAA;AAAA,IAAA,EAzBW,GAAAS,CA2Bf,CACD,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"data-table.es.js","sources":["../../../lib/components/static-data-table/data-table.tsx"],"sourcesContent":["import { getResourceDisplayName, getValueFromData } from '@/components/data-table';\nimport { Badge } from '@/components/ui/badge';\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';\n\n\nexport interface StaticDataTableProps<T> {\n  accessors: (keyof T)[];\n  data: T[];\n  affectedData?: T[];\n}\n\nexport function StaticDataTable<T>({ accessors, data, affectedData }: StaticDataTableProps<T>) {\n  return (\n    <Table>\n      <TableHeader className=\"text-left align-middle sticky top-0 z-10 bg-card\">\n        <TableRow>\n          {accessors.map((accessor) => (\n            <TableHead\n              key={String(accessor)}\n              className=\"px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card\"\n            >\n              {getResourceDisplayName(String(accessor), 'admin-portal')}\n            </TableHead>\n          ))}\n          {affectedData && (\n            <TableCell className=\"px-4 py-2 text-left text-sm font-medium cursor-pointer whitespace-nowrap bg-card\">\n              Affected\n            </TableCell>\n          )}\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {data.map((item, index) => (\n          <TableRow key={index}>\n            {accessors.map((accessor) => {\n              const value = item[accessor];\n              // Handle arrays (e.g., userGroups) with badges\n              if (Array.isArray(value)) {\n                return (\n                  <TableCell key={String(accessor)} className=\"flex gap-4\">\n                    {value.map((subItem, subIndex) => (\n                      <Badge key={subIndex}>{subItem?.name || subItem}</Badge>\n                    ))}\n                  </TableCell>\n                );\n              }\n              // Handle other data types\n              return (\n                <TableCell key={String(accessor)}>{getValueFromData(item, accessor)}</TableCell>\n              );\n            })}\n            {affectedData && (\n              <TableCell>\n                {affectedData.includes(item) ? (\n                  <span className=\"text-success-foreground\">✔</span>\n                ) : (\n                  <span className=\"text-destructive-foreground\">✖</span>\n                )}\n              </TableCell>\n            )}\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n}\n"],"names":["StaticDataTable","accessors","data","affectedData","Table","jsx","TableHeader","jsxs","TableRow","accessor","TableHead","getResourceDisplayName","TableCell","TableBody","item","index","value","subItem","subIndex","Badge","getValueFromData"],"mappings":";;;;AAWO,SAASA,EAAmB,EAAE,WAAAC,GAAW,MAAAC,GAAM,cAAAC,KAAyC;AAC7F,2BACGC,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAY,EAAA,WAAU,oDACrB,UAAA,gBAAAC,EAACC,GACE,EAAA,UAAA;AAAA,MAAUP,EAAA,IAAI,CAACQ,MACd,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAET,UAAuBC,EAAA,OAAOF,CAAQ,GAAG,cAAc;AAAA,QAAA;AAAA,QAHnD,OAAOA,CAAQ;AAAA,MAAA,CAKvB;AAAA,MACAN,KACC,gBAAAE,EAACO,GAAU,EAAA,WAAU,oFAAmF,UAExG,WAAA,CAAA;AAAA,IAAA,EAAA,CAEJ,EACF,CAAA;AAAA,IACA,gBAAAP,EAACQ,KACE,UAAKX,EAAA,IAAI,CAACY,GAAMC,wBACdP,GACE,EAAA,UAAA;AAAA,MAAUP,EAAA,IAAI,CAACQ,MAAa;AACrB,cAAAO,IAAQF,EAAKL,CAAQ;AAEvB,eAAA,MAAM,QAAQO,CAAK,sBAElBJ,GAAiC,EAAA,WAAU,cACzC,UAAMI,EAAA,IAAI,CAACC,GAASC,wBAClBC,GAAsB,EAAA,WAAAF,KAAA,gBAAAA,EAAS,SAAQA,EAA5B,GAAAC,CAAoC,CACjD,EAHa,GAAA,OAAOT,CAAQ,CAI/B,IAKF,gBAAAJ,EAACO,KAAkC,UAAiBQ,EAAAN,GAAML,CAAQ,EAAlD,GAAA,OAAOA,CAAQ,CAAqC;AAAA,MAAA,CAEvE;AAAA,MACAN,KACE,gBAAAE,EAAAO,GAAA,EACE,YAAa,SAASE,CAAI,IACxB,gBAAAT,EAAA,QAAA,EAAK,WAAU,2BAA0B,eAAC,IAE3C,gBAAAA,EAAC,UAAK,WAAU,+BAA8B,cAAC,CAAA,EAEnD,CAAA;AAAA,IAAA,EAzBW,GAAAU,CA2Bf,CACD,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/ui/button.es.js

@@ -1,5 +1,5 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { Slot as g, Slottable as p } from "@radix-ui/react-slot";
+import { Slot as p, Slottable as g } from "@radix-ui/react-slot";
 import { cva as v } from "class-variance-authority";
 import * as b from "react";
 import { cn as x } from "../../utils/index.es.js";
@@ -17,6 +17,7 @@ const y = v(
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
+        xs: "h-5 px-1 text-xs",
         sm: "h-7 rounded-md px-2 text-sm",
         default: "h-input px-4 py-2 text-sm",
         lg: "h-9 rounded-md px-6 text-body"
@@ -29,7 +30,7 @@ const y = v(
   }
 ), N = b.forwardRef(
   ({ className: n, variant: i, size: s, loading: r, disabled: a, asChild: d = !1, icon: c, children: o, ...u }, f) => {
-    const l = d ? g : "button", t = c;
+    const l = d ? p : "button", t = c;
     return /* @__PURE__ */ m(
       l,
       {
@@ -40,7 +41,7 @@ const y = v(
         children: [
           r ? /* @__PURE__ */ e(h, { className: "size-icon" }) : t ? /* @__PURE__ */ e(t, { className: "size-icon" }) : null,
           " ",
-          /* @__PURE__ */ e(p, { children: o && /* @__PURE__ */ e("div", { className: r || t ? "ml-2" : "", children: o }) })
+          /* @__PURE__ */ e(g, { children: o && /* @__PURE__ */ e("div", { className: r || t ? "ml-2" : "", children: o }) })
         ]
       }
     );

package/dist/components/ui/button.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.es.js","sources":["../../../lib/components/ui/button.tsx"],"sourcesContent":["import { Slot, Slottable } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/utils';\nimport { LucideIcon } from 'lucide-react';\nimport { Loader } from './loader';\n\nconst buttonVariants = cva(\n  'inline-flex items-center cursor-pointer justify-center no-underline whitespace-nowrap rounded-lg font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:text-destructive-foreground',\n        outline:\n          'border border-input text-accent bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'bg-transparent hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        sm: 'h-7 rounded-md px-2 text-sm',\n        default: 'h-input px-4 py-2 text-sm',\n        lg: 'h-9 rounded-md px-6 text-body',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n  VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  loading?: boolean;\n  icon?: LucideIcon;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { className, variant, size, loading, disabled, asChild = false, icon, children, ...props },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button';\n    const Icon = icon;\n\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        disabled={loading || disabled}\n        {...props}\n      >\n        {/* Show loader when loading, otherwise show icon if present */}\n        {loading ? <Loader className=\"size-icon\" /> : Icon ? <Icon className=\"size-icon\" /> : null}\n        {/* Show children with appropriate spacing */}{' '}\n        {/* https://www.radix-ui.com/primitives/docs/utilities/slot */}\n        <Slottable>\n          {children && <div className={loading || Icon ? 'ml-2' : ''}>{children}</div>}\n        </Slottable>\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = 'Button'; // Set display name for better debugging\n\nexport { Button, buttonVariants };\n"],"names":["buttonVariants","cva","Button","React","className","variant","size","loading","disabled","asChild","icon","children","props","ref","Comp","Slot","Icon","jsxs","cn","jsx","Loader","Slottable"],"mappings":";;;;;;AAQA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MAAA;AAAA,IAER;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAUMC,IAASC,EAAM;AAAA,EACnB,CACE,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,SAAAC,GAAS,UAAAC,GAAU,SAAAC,IAAU,IAAO,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GACnFC,MACG;AACG,UAAAC,IAAOL,IAAUM,IAAO,UACxBC,IAAON;AAGX,WAAA,gBAAAO;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,WAAWI,EAAGlB,EAAe,EAAE,SAAAK,GAAS,MAAAC,GAAM,WAAAF,EAAA,CAAW,CAAC;AAAA,QAC1D,KAAAS;AAAA,QACA,UAAUN,KAAWC;AAAA,QACpB,GAAGI;AAAA,QAGH,UAAA;AAAA,UAAUL,IAAA,gBAAAY,EAACC,GAAO,EAAA,WAAU,YAAY,CAAA,IAAKJ,IAAQ,gBAAAG,EAAAH,GAAA,EAAK,WAAU,YAAA,CAAY,IAAK;AAAA,UACvC;AAAA,UAE/C,gBAAAG,EAACE,GACE,EAAA,UAAAV,KAAa,gBAAAQ,EAAA,OAAA,EAAI,WAAWZ,KAAWS,IAAO,SAAS,IAAK,UAAAL,EAAS,CAAA,EACxE,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAEAT,EAAO,cAAc;"}
+{"version":3,"file":"button.es.js","sources":["../../../lib/components/ui/button.tsx"],"sourcesContent":["import { Slot, Slottable } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/utils';\nimport { LucideIcon } from 'lucide-react';\nimport { Loader } from './loader';\n\nconst buttonVariants = cva(\n  'inline-flex items-center cursor-pointer justify-center no-underline whitespace-nowrap rounded-lg font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:text-destructive-foreground',\n        outline:\n          'border border-input text-accent bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'bg-transparent hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        xs: 'h-5 px-1 text-xs',\n        sm: 'h-7 rounded-md px-2 text-sm',\n        default: 'h-input px-4 py-2 text-sm',\n        lg: 'h-9 rounded-md px-6 text-body',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n  VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  loading?: boolean;\n  icon?: LucideIcon;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { className, variant, size, loading, disabled, asChild = false, icon, children, ...props },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button';\n    const Icon = icon;\n\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        disabled={loading || disabled}\n        {...props}\n      >\n        {/* Show loader when loading, otherwise show icon if present */}\n        {loading ? <Loader className=\"size-icon\" /> : Icon ? <Icon className=\"size-icon\" /> : null}\n        {/* Show children with appropriate spacing */}{' '}\n        {/* https://www.radix-ui.com/primitives/docs/utilities/slot */}\n        <Slottable>\n          {children && <div className={loading || Icon ? 'ml-2' : ''}>{children}</div>}\n        </Slottable>\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = 'Button'; // Set display name for better debugging\n\nexport { Button, buttonVariants };\n"],"names":["buttonVariants","cva","Button","React","className","variant","size","loading","disabled","asChild","icon","children","props","ref","Comp","Slot","Icon","jsxs","cn","jsx","Loader","Slottable"],"mappings":";;;;;;AAQA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MAAA;AAAA,IAER;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAUMC,IAASC,EAAM;AAAA,EACnB,CACE,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,SAAAC,GAAS,UAAAC,GAAU,SAAAC,IAAU,IAAO,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GACnFC,MACG;AACG,UAAAC,IAAOL,IAAUM,IAAO,UACxBC,IAAON;AAGX,WAAA,gBAAAO;AAAA,MAACH;AAAA,MAAA;AAAA,QACC,WAAWI,EAAGlB,EAAe,EAAE,SAAAK,GAAS,MAAAC,GAAM,WAAAF,EAAA,CAAW,CAAC;AAAA,QAC1D,KAAAS;AAAA,QACA,UAAUN,KAAWC;AAAA,QACpB,GAAGI;AAAA,QAGH,UAAA;AAAA,UAAUL,IAAA,gBAAAY,EAACC,GAAO,EAAA,WAAU,YAAY,CAAA,IAAKJ,IAAQ,gBAAAG,EAAAH,GAAA,EAAK,WAAU,YAAA,CAAY,IAAK;AAAA,UACvC;AAAA,UAE/C,gBAAAG,EAACE,GACE,EAAA,UAAAV,KAAa,gBAAAQ,EAAA,OAAA,EAAI,WAAWZ,KAAWS,IAAO,SAAS,IAAK,UAAAL,EAAS,CAAA,EACxE,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAEAT,EAAO,cAAc;"}

package/dist/components/ui/copy-button.es.js

@@ -51,7 +51,7 @@ function $({
   };
   if (r)
     return /* @__PURE__ */ t(T, { children: /* @__PURE__ */ n(u, { delayDuration: 0, children: [
-      /* @__PURE__ */ t(f, { asChild: !0, children: /* @__PURE__ */ t(l, { onClick: e, variant: "outline", size: "sm", icon: i ? a : s }) }),
+      /* @__PURE__ */ t(f, { asChild: !0, children: /* @__PURE__ */ t(l, { onClick: e, variant: "outline", size: "xs", icon: i ? a : s }) }),
       /* @__PURE__ */ t(h, { children: i ? "Copied" : m })
     ] }) });
 }

package/dist/components/ui/copy-button.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.es.js","sources":["../../../lib/components/ui/copy-button.tsx"],"sourcesContent":["'use client';\nimport { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/index';\nimport { CheckCheck, Copy } from 'lucide-react';\nimport { useState } from 'react';\n\ninterface CopyProps {\n  value: string;\n  tooltipMessage?: string;\n  onCopy?: () => void;\n}\n\nexport const COPY_BUTTON_STATE_TIMEOUT = 5000;\nexport function CopyButton({\n  value,\n  tooltipMessage = 'Copy to clipboard',\n  onCopy,\n}: CopyProps) {\n  const [copied, setCopied] = useState(false);\n\n  const copyToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      onCopy?.();\n\n      setTimeout(() => {\n        setCopied(false);\n      }, COPY_BUTTON_STATE_TIMEOUT);\n    } catch (err) {\n      console.error('Failed to copy text:', err);\n    }\n  };\n  if (!value) return;\n  return (\n    <TooltipProvider>\n      <Tooltip delayDuration={0}>\n        <TooltipTrigger asChild>\n          <Button onClick={copyToClipboard} variant=\"outline\" size=\"sm\" icon={copied ? CheckCheck : Copy} />\n        </TooltipTrigger>\n        <TooltipContent>{copied ? 'Copied' : tooltipMessage}</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"],"names":["COPY_BUTTON_STATE_TIMEOUT","CopyButton","value","tooltipMessage","onCopy","copied","setCopied","useState","copyToClipboard","err","jsx","TooltipProvider","jsxs","Tooltip","TooltipTrigger","Button","CheckCheck","Copy","TooltipContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAA4B;AAClC,SAASC,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AACF,GAAc;AACZ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAkB,YAAY;AAC9B,QAAA;AACI,YAAA,UAAU,UAAU,UAAUN,CAAK,GACzCI,EAAU,EAAI,GACLF,KAAA,QAAAA,KAET,WAAW,MAAM;AACf,QAAAE,EAAU,EAAK;AAAA,SACdN,CAAyB;AAAA,aACrBS,GAAK;AACJ,cAAA,MAAM,wBAAwBA,CAAG;AAAA,IAAA;AAAA,EAE7C;AACA,MAAKP;AACL,WACG,gBAAAQ,EAAAC,GAAA,EACC,UAAC,gBAAAC,EAAAC,GAAA,EAAQ,eAAe,GACtB,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAe,EAAA,SAAO,IACrB,UAAA,gBAAAJ,EAACK,KAAO,SAASP,GAAiB,SAAQ,WAAU,MAAK,MAAK,MAAMH,IAASW,IAAaC,EAAM,CAAA,GAClG;AAAA,MACC,gBAAAP,EAAAQ,GAAA,EAAgB,UAASb,IAAA,WAAWF,EAAe,CAAA;AAAA,IAAA,EAAA,CACtD,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"copy-button.es.js","sources":["../../../lib/components/ui/copy-button.tsx"],"sourcesContent":["'use client';\nimport { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/index';\nimport { CheckCheck, Copy } from 'lucide-react';\nimport { useState } from 'react';\n\ninterface CopyProps {\n  value: string;\n  tooltipMessage?: string;\n  onCopy?: () => void;\n}\n\nexport const COPY_BUTTON_STATE_TIMEOUT = 5000;\nexport function CopyButton({\n  value,\n  tooltipMessage = 'Copy to clipboard',\n  onCopy,\n}: CopyProps) {\n  const [copied, setCopied] = useState(false);\n\n  const copyToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      onCopy?.();\n\n      setTimeout(() => {\n        setCopied(false);\n      }, COPY_BUTTON_STATE_TIMEOUT);\n    } catch (err) {\n      console.error('Failed to copy text:', err);\n    }\n  };\n  if (!value) return;\n  return (\n    <TooltipProvider>\n      <Tooltip delayDuration={0}>\n        <TooltipTrigger asChild>\n          <Button onClick={copyToClipboard} variant=\"outline\" size=\"xs\" icon={copied ? CheckCheck : Copy} />\n        </TooltipTrigger>\n        <TooltipContent>{copied ? 'Copied' : tooltipMessage}</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"],"names":["COPY_BUTTON_STATE_TIMEOUT","CopyButton","value","tooltipMessage","onCopy","copied","setCopied","useState","copyToClipboard","err","jsx","TooltipProvider","jsxs","Tooltip","TooltipTrigger","Button","CheckCheck","Copy","TooltipContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,IAA4B;AAClC,SAASC,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,QAAAC;AACF,GAAc;AACZ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAkB,YAAY;AAC9B,QAAA;AACI,YAAA,UAAU,UAAU,UAAUN,CAAK,GACzCI,EAAU,EAAI,GACLF,KAAA,QAAAA,KAET,WAAW,MAAM;AACf,QAAAE,EAAU,EAAK;AAAA,SACdN,CAAyB;AAAA,aACrBS,GAAK;AACJ,cAAA,MAAM,wBAAwBA,CAAG;AAAA,IAAA;AAAA,EAE7C;AACA,MAAKP;AACL,WACG,gBAAAQ,EAAAC,GAAA,EACC,UAAC,gBAAAC,EAAAC,GAAA,EAAQ,eAAe,GACtB,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAe,EAAA,SAAO,IACrB,UAAA,gBAAAJ,EAACK,KAAO,SAASP,GAAiB,SAAQ,WAAU,MAAK,MAAK,MAAMH,IAASW,IAAaC,EAAM,CAAA,GAClG;AAAA,MACC,gBAAAP,EAAAQ,GAAA,EAAgB,UAASb,IAAA,WAAWF,EAAe,CAAA;AAAA,IAAA,EAAA,CACtD,EACF,CAAA;AAEJ;"}

package/dist/components/ui/table.es.js

@@ -1,13 +1,13 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as t from "react";
+import { jsx as t } from "react/jsx-runtime";
+import * as o from "react";
 import { cn as l } from "../../utils/index.es.js";
-const d = t.forwardRef(
-  ({ className: e, ...a }, o) => /* @__PURE__ */ r(
+const d = o.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ t(
     "table",
     {
-      ref: o,
+      ref: r,
       className: l(
-        "w-full caption-bottom text-sm [&_tr:last-child]:border-0 my-0 overflow-x-auto whitespace-nowrap",
+        "w-full caption-bottom text-sm [&_tr:last-child]:border-0 my-0 whitespace-nowrap",
         e
       ),
       ...a
@@ -15,19 +15,19 @@ const d = t.forwardRef(
   )
 );
 d.displayName = "Table";
-const s = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+const s = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ t(
   "thead",
   {
-    ref: o,
+    ref: r,
     className: l("[&_tr]:border-b border-b", e),
     ...a
   }
 ));
 s.displayName = "TableHeader";
-const b = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+const b = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ t(
   "tbody",
   {
-    ref: o,
+    ref: r,
     className: l(
       "[&_tr:last-child]:border-b-2 [&_tr:last-child]:border-dotted",
       // Updated to 2px dotted border for the last row
@@ -37,20 +37,20 @@ const b = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
   }
 ));
 b.displayName = "TableBody";
-const m = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+const m = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ t(
   "tfoot",
   {
-    ref: o,
-    className: l("border-t bg-card/50 font-medium last:[&>tr]:border-b-0", e),
+    ref: r,
+    className: l("border-t font-medium last:[&>tr]:border-b-0", e),
     ...a
   }
 ));
 m.displayName = "TableFooter";
-const c = t.forwardRef(
-  ({ className: e, ...a }, o) => /* @__PURE__ */ r(
+const c = o.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ t(
     "tr",
     {
-      ref: o,
+      ref: r,
       className: l(
         "border-b border-border",
         e
@@ -60,36 +60,36 @@ const c = t.forwardRef(
   )
 );
 c.displayName = "TableRow";
-const f = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+const f = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ t(
   "th",
   {
-    ref: o,
+    ref: r,
     className: l(
-      "px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "text-left align-middle font-medium",
       e
     ),
     ...a
   }
 ));
 f.displayName = "TableHead";
-const i = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r(
+const i = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ t(
   "td",
   {
-    ref: o,
+    ref: r,
     className: l(
-      "[&:has([role=checkbox])]:pr-0 [&_tr:last-child]:border-dotted",
+      "[&_tr:last-child]:border-dotted",
       e
     ),
     ...a
   }
 ));
 i.displayName = "TableCell";
-const p = t.forwardRef(({ className: e, ...a }, o) => /* @__PURE__ */ r("caption", { ref: o, className: l("mt-4 text-sm text-muted-foreground", e), ...a }));
-p.displayName = "TableCaption";
+const n = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ t("caption", { ref: r, className: l("mt-4 text-sm text-muted-foreground", e), ...a }));
+n.displayName = "TableCaption";
 export {
   d as Table,
   b as TableBody,
-  p as TableCaption,
+  n as TableCaption,
   i as TableCell,
   m as TableFooter,
   f as TableHead,

package/dist/components/ui/table.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.es.js","sources":["../../../lib/components/ui/table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/utils';\n\nconst Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(\n  ({ className, ...props }, ref) => (\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom text-sm [&_tr:last-child]:border-0 my-0 overflow-x-auto whitespace-nowrap',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead\n    ref={ref}\n    className={cn('[&_tr]:border-b border-b', className)} // Added border-b to apply a bottom border\n    {...props}\n  />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\n      '[&_tr:last-child]:border-b-2 [&_tr:last-child]:border-dotted', // Updated to 2px dotted border for the last row\n      className,\n    )}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn('border-t bg-card/50 font-medium last:[&>tr]:border-b-0', className)}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <tr\n      ref={ref}\n      className={cn(\n        'border-b border-border',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      'px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',\n      className,\n    )}\n    {...props}\n  />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      '[&:has([role=checkbox])]:pr-0 [&_tr:last-child]:border-dotted',\n      className,\n    )}\n    {...props}\n  />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"mappings":";;;AAIA,MAAMA,IAAQC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAM,cAAc;AAEd,MAAAO,IAAcN,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,4BAA4BJ,CAAS;AAAA,IAClD,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAY,cAAc;AAEpB,MAAAC,IAAYP,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAU,cAAc;AAElB,MAAAC,IAAcR,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,0DAA0DJ,CAAS;AAAA,IAChF,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAY,cAAc;AAE1B,MAAMC,IAAWT,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAO,EAAS,cAAc;AAEjB,MAAAC,IAAYV,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAU,cAAc;AAElB,MAAAC,IAAYX,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDS,EAAU,cAAc;AAElB,MAAAC,IAAeZ,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAS,GAAAC,wBACzB,WAAQ,EAAA,KAAAA,GAAU,WAAWE,EAAG,sCAAsCJ,CAAS,GAAI,GAAGC,GAAO,CAC/F;AACDU,EAAa,cAAc;"}
+{"version":3,"file":"table.es.js","sources":["../../../lib/components/ui/table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/utils';\n\nconst Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(\n  ({ className, ...props }, ref) => (\n    <table\n      ref={ref}\n      className={cn(\n        'w-full caption-bottom text-sm [&_tr:last-child]:border-0 my-0 whitespace-nowrap',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nTable.displayName = 'Table';\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead\n    ref={ref}\n    className={cn('[&_tr]:border-b border-b', className)} // Added border-b to apply a bottom border\n    {...props}\n  />\n));\nTableHeader.displayName = 'TableHeader';\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\n      '[&_tr:last-child]:border-b-2 [&_tr:last-child]:border-dotted', // Updated to 2px dotted border for the last row\n      className,\n    )}\n    {...props}\n  />\n));\nTableBody.displayName = 'TableBody';\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn('border-t font-medium last:[&>tr]:border-b-0', className)}\n    {...props}\n  />\n));\nTableFooter.displayName = 'TableFooter';\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <tr\n      ref={ref}\n      className={cn(\n        'border-b border-border',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nTableRow.displayName = 'TableRow';\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      'text-left align-middle font-medium',\n      className,\n    )}\n    {...props}\n  />\n));\nTableHead.displayName = 'TableHead';\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      '[&_tr:last-child]:border-dotted',\n      className,\n    )}\n    {...props}\n  />\n));\nTableCell.displayName = 'TableCell';\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />\n));\nTableCaption.displayName = 'TableCaption';\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };\n"],"names":["Table","React","className","props","ref","jsx","cn","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],"mappings":";;;AAIA,MAAMA,IAAQC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAM,cAAc;AAEd,MAAAO,IAAcN,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,4BAA4BJ,CAAS;AAAA,IAClD,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAY,cAAc;AAEpB,MAAAC,IAAYP,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAU,cAAc;AAElB,MAAAC,IAAcR,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,+CAA+CJ,CAAS;AAAA,IACrE,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAY,cAAc;AAE1B,MAAMC,IAAWT,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAO,EAAS,cAAc;AAEjB,MAAAC,IAAYV,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAU,cAAc;AAElB,MAAAC,IAAYX,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAM,GAAGC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IACF;AAAA,IACC,GAAGC;AAAA,EAAA;AACN,CACD;AACDS,EAAU,cAAc;AAElB,MAAAC,IAAeZ,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAS,GAAAC,wBACzB,WAAQ,EAAA,KAAAA,GAAU,WAAWE,EAAG,sCAAsCJ,CAAS,GAAI,GAAGC,GAAO,CAC/F;AACDU,EAAa,cAAc;"}

package/dist/index.es.d.ts

@@ -133,7 +133,7 @@ export declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLBu
 
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Calendar: React_2.FC<CalendarProps>;

package/lib/index.css

@@ -36,7 +36,7 @@
   }
 
   body {
-    @apply bg-background/50 text-foreground;
+    @apply bg-background text-foreground;
   }
 
   *::-webkit-scrollbar {

package/lib/tailwind.preset.css

@@ -90,8 +90,8 @@
 
     --color-card: var(--color-neutral-1);
     --color-card-foreground: var(--color-foreground);
-
-    --color-popover: var(--color-card);
+    /* Assuming popovers only show up over cards ??? */
+    --color-popover: var(--color-background);
     --color-popover-foreground: var(--color-foreground);
 
     --color-primary: var(--color-primary-7);
@@ -130,11 +130,8 @@
     --color-sidebar-border: var(--color-border);
     --color-sidebar-ring: var(--color-ring);
 
-    /** TODO Grid Tokens */
-    /* --grid-fluid-min: 16rem;
-    gridTemplateColumns: {
-        fluid: 'repeat(auto-fill, minmax(var(--grid-fluid-min), 1fr))',
-      }, */
+    /* Minimum length for fluid grid containers */
+    --fluid-grid-min: var(--container-3xs);
 
     --animate-accordion-down: accordion-down 0.2s ease-out;
 
@@ -229,4 +226,9 @@
 /* Standard size for icons */
 @utility size-icon {
     @apply size-4;
+}
+
+/* Fluid grid with minimum width */
+@utility grid-fluid {
+    @apply grid grid-cols-[repeat(auto-fill,_minmax(var(--fluid-grid-min),_1fr))] gap-4;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",