@k3-universe/react-kit 0.0.41 → 0.0.42

package/src/kit/builder/data-table/components/DataTableColumnHeader.tsx

@@ -1,67 +1,67 @@
-import type { Column } from '@tanstack/react-table';
-import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from 'lucide-react';
-import { cn } from '../../../../shadcn/lib/utils';
-import { Button } from '../../../../shadcn/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../../../../shadcn/ui/dropdown-menu';
-import type { HTMLAttributes } from 'react';
-
-export interface DataTableColumnHeaderProps<TData, TValue>
-  extends HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>;
-  label?: string;
-}
-
-export function DataTableColumnHeader<TData, TValue>({
-  column,
-  label,
-  className,
-}: DataTableColumnHeaderProps<TData, TValue>) {
-  label = (column.columnDef.meta as { label?: string })?.label ?? label;
-
-  if (!column.getCanSort()) {
-    return <div className={cn(className)}>{label}</div>;
-  }
-
-  return (
-    <div className={cn('flex items-center gap-2', className)}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="data-[state=open]:bg-accent -ml-3 h-8"
-          >
-            <span>{label}</span>
-            {column.getIsSorted() === 'desc' ? (
-              <ArrowDown className="ml-2 size-4" />
-            ) : column.getIsSorted() === 'asc' ? (
-              <ArrowUp className="ml-2 size-4" />
-            ) : (
-              <ChevronsUpDown className="ml-2 size-4" />
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUp className="mr-2 size-4" /> Asc
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDown className="mr-2 size-4" /> Desc
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          {column.getCanHide() && (
-            <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-              <EyeOff className="mr-2 size-4" /> Hide
-            </DropdownMenuItem>
-          )}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}
+import type { Column } from '@tanstack/react-table';
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from 'lucide-react';
+import { cn } from '../../../../shadcn/lib/utils';
+import { Button } from '../../../../shadcn/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../../../shadcn/ui/dropdown-menu';
+import type { HTMLAttributes } from 'react';
+
+export interface DataTableColumnHeaderProps<TData, TValue>
+  extends HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  label?: string;
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  label,
+  className,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  label = (column.columnDef.meta as { label?: string })?.label ?? label;
+
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{label}</div>;
+  }
+
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="data-[state=open]:bg-accent -ml-3 h-8"
+          >
+            <span>{label}</span>
+            {column.getIsSorted() === 'desc' ? (
+              <ArrowDown className="ml-2 size-4" />
+            ) : column.getIsSorted() === 'asc' ? (
+              <ArrowUp className="ml-2 size-4" />
+            ) : (
+              <ChevronsUpDown className="ml-2 size-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp className="mr-2 size-4" /> Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown className="mr-2 size-4" /> Desc
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          {column.getCanHide() && (
+            <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+              <EyeOff className="mr-2 size-4" /> Hide
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/kit/builder/data-table/components/DataTablePagination.tsx

@@ -1,112 +1,112 @@
-import type { Table } from '@tanstack/react-table';
-import {
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-} from 'lucide-react';
-import { Button } from '../../../../shadcn/ui/button';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../../../shadcn/ui/select';
-
-export interface DataTablePaginationProps<TData> {
-  table: Table<TData>;
-  paginationVariant?: 'full' | 'compact';
-}
-
-export function DataTablePagination<TData>({
-  table,
-  paginationVariant = 'full',
-}: DataTablePaginationProps<TData>) {
-  const pagination = table.getState().pagination ?? {
-    pageIndex: 0,
-    pageSize: 10,
-  };
-
-  return (
-    <div className="flex items-center justify-between px-2">
-      {paginationVariant === 'full' && (
-        <div className="text-muted-foreground flex-1 text-sm">
-          {table.getFilteredSelectedRowModel().rows.length} of{' '}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
-        </div>
-      )}
-      <div className="flex items-center space-x-6 lg:space-x-8">
-        {paginationVariant === 'full' && (
-          <div className="flex items-center space-x-2">
-            <p className="text-sm font-medium">Rows per page</p>
-            <Select
-              value={`${pagination.pageSize}`}
-              onValueChange={(value) => table.setPageSize(Number(value))}
-            >
-              <SelectTrigger className="h-8 w-[70px]">
-                <SelectValue placeholder={pagination.pageSize} />
-              </SelectTrigger>
-              <SelectContent side="top">
-                {[10, 20, 25, 30, 40, 50].map((pageSize) => (
-                  <SelectItem key={pageSize} value={`${pageSize}`}>
-                    {pageSize}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-        )}
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          Page {pagination.pageIndex + 1} of {table.getPageCount()}
-        </div>
-        <div className="flex items-center space-x-2">
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="hidden size-8 lg:flex"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Go to first page</span>
-            <ChevronsLeft className="size-4" />
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="size-8"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Go to previous page</span>
-            <ChevronLeft className="size-4" />
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="size-8"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to next page</span>
-            <ChevronRight className="size-4" />
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="hidden size-8 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to last page</span>
-            <ChevronsRight className="size-4" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
+import type { Table } from '@tanstack/react-table';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react';
+import { Button } from '../../../../shadcn/ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../../../shadcn/ui/select';
+
+export interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+  paginationVariant?: 'full' | 'compact';
+}
+
+export function DataTablePagination<TData>({
+  table,
+  paginationVariant = 'full',
+}: DataTablePaginationProps<TData>) {
+  const pagination = table.getState().pagination ?? {
+    pageIndex: 0,
+    pageSize: 10,
+  };
+
+  return (
+    <div className="flex items-center justify-between px-2">
+      {paginationVariant === 'full' && (
+        <div className="text-muted-foreground flex-1 text-sm">
+          {table.getFilteredSelectedRowModel().rows.length} of{' '}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+      )}
+      <div className="flex items-center space-x-6 lg:space-x-8">
+        {paginationVariant === 'full' && (
+          <div className="flex items-center space-x-2">
+            <p className="text-sm font-medium">Rows per page</p>
+            <Select
+              value={`${pagination.pageSize}`}
+              onValueChange={(value) => table.setPageSize(Number(value))}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue placeholder={pagination.pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {[10, 20, 25, 30, 40, 50].map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+          Page {pagination.pageIndex + 1} of {table.getPageCount()}
+        </div>
+        <div className="flex items-center space-x-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="hidden size-8 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeft className="size-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeft className="size-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="size-8"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRight className="size-4" />
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="hidden size-8 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRight className="size-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/kit/builder/data-table/components/DataTableViewOptions.tsx

@@ -1,51 +1,51 @@
-import type { Table } from '@tanstack/react-table';
-import { Settings2 } from 'lucide-react';
-import { Button } from '../../../../shadcn/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../../../../shadcn/ui/dropdown-menu';
-
-export function DataTableViewOptions<TData>({
-  table,
-}: {
-  table: Table<TData>;
-}) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="ml-auto hidden h-8 lg:flex"
-        >
-          <Settings2 className="mr-2 size-4" /> View
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[180px]">
-        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {table
-          .getAllColumns()
-          .filter((column) => column.getCanHide())
-          .map((column) => {
-            return (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                className="capitalize"
-                checked={column.getIsVisible()}
-                onCheckedChange={(value) => column.toggleVisibility(!!value)}
-              >
-                {(column?.columnDef.meta as { label?: string })?.label ??
-                  column.id}
-              </DropdownMenuCheckboxItem>
-            );
-          })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
+import type { Table } from '@tanstack/react-table';
+import { Settings2 } from 'lucide-react';
+import { Button } from '../../../../shadcn/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../../../shadcn/ui/dropdown-menu';
+
+export function DataTableViewOptions<TData>({
+  table,
+}: {
+  table: Table<TData>;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 lg:flex"
+        >
+          <Settings2 className="mr-2 size-4" /> View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[180px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter((column) => column.getCanHide())
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {(column?.columnDef.meta as { label?: string })?.label ??
+                  column.id}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/kit/builder/data-table/index.ts

@@ -1,6 +1,6 @@
-export * from './components/DataTable';
-export * from './components/DataTableColumnHeader';
-export * from './components/DataTablePagination';
-export * from './components/DataTableViewOptions';
-export * from './types';
-export * from './utils/dotAccessor';
+export * from './components/DataTable';
+export * from './components/DataTableColumnHeader';
+export * from './components/DataTablePagination';
+export * from './components/DataTableViewOptions';
+export * from './types';
+export * from './utils/dotAccessor';

package/src/kit/builder/data-table/types.ts

@@ -1,44 +1,44 @@
-import type { FormBuilderSectionConfig } from '../form';
-
-export type DataTableFiltersProp = FormBuilderSectionConfig[];
-
-export type IconPosition = 'left' | 'right';
-
-export interface DataTableAction {
-  key: string;
-  label?: React.ReactNode; // string or component
-  icon?: React.ReactNode;
-  iconPosition?: IconPosition;
-  variant?:
-    | 'default'
-    | 'destructive'
-    | 'outline'
-    | 'secondary'
-    | 'ghost'
-    | 'link';
-  disabled?: boolean;
-  onClick?: () => void | Promise<void>;
-  // If provided, this element will be rendered directly instead of constructing a Button
-  element?: React.ReactNode;
-}
-
-export interface DataTableBatchAction<TData = unknown> {
-  key: string;
-  label?: React.ReactNode;
-  icon?: React.ReactNode;
-  iconPosition?: IconPosition;
-  variant?:
-    | 'default'
-    | 'destructive'
-    | 'outline'
-    | 'secondary'
-    | 'ghost'
-    | 'link';
-  disabled?: boolean;
-  // Receives selected rows and helpers
-  onClick?: (args: {
-    selectedRows: TData[];
-    clearSelection: () => void;
-  }) => void | Promise<void>;
-  element?: React.ReactNode;
-}
+import type { FormBuilderSectionConfig } from '../form';
+
+export type DataTableFiltersProp = FormBuilderSectionConfig[];
+
+export type IconPosition = 'left' | 'right';
+
+export interface DataTableAction {
+  key: string;
+  label?: React.ReactNode; // string or component
+  icon?: React.ReactNode;
+  iconPosition?: IconPosition;
+  variant?:
+    | 'default'
+    | 'destructive'
+    | 'outline'
+    | 'secondary'
+    | 'ghost'
+    | 'link';
+  disabled?: boolean;
+  onClick?: () => void | Promise<void>;
+  // If provided, this element will be rendered directly instead of constructing a Button
+  element?: React.ReactNode;
+}
+
+export interface DataTableBatchAction<TData = unknown> {
+  key: string;
+  label?: React.ReactNode;
+  icon?: React.ReactNode;
+  iconPosition?: IconPosition;
+  variant?:
+    | 'default'
+    | 'destructive'
+    | 'outline'
+    | 'secondary'
+    | 'ghost'
+    | 'link';
+  disabled?: boolean;
+  // Receives selected rows and helpers
+  onClick?: (args: {
+    selectedRows: TData[];
+    clearSelection: () => void;
+  }) => void | Promise<void>;
+  element?: React.ReactNode;
+}

package/src/kit/builder/data-table/utils/dotAccessor.ts

@@ -1,6 +1,6 @@
-import { get } from 'lodash';
-
-export function dotAccessor<TData, TValue = unknown>(path: string) {
-  return (row: TData) =>
-    get(row as unknown as Record<string, unknown>, path) as TValue;
-}
+import { get } from 'lodash';
+
+export function dotAccessor<TData, TValue = unknown>(path: string) {
+  return (row: TData) =>
+    get(row as unknown as Record<string, unknown>, path) as TValue;
+}

package/src/kit/builder/dialog/index.ts

@@ -1,6 +1,6 @@
-export {
-  default as DialogProvider,
-  useDialog,
-  useDialogController,
-} from './provider';
-export type { ConfirmOptions, CustomModalOptions } from './provider';
+export {
+  default as DialogProvider,
+  useDialog,
+  useDialogController,
+} from './provider';
+export type { ConfirmOptions, CustomModalOptions } from './provider';