@codefast/ui 0.0.65 → 0.0.67

package/src/react/context-menu.tsx

@@ -1,302 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenu
- * -------------------------------------------------------------------------- */
-
-type ContextMenuProps = React.ComponentProps<typeof ContextMenuPrimitive.Root>;
-const ContextMenu = ContextMenuPrimitive.Root;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuTrigger
- * -------------------------------------------------------------------------- */
-
-type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>;
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuGroup
- * -------------------------------------------------------------------------- */
-
-type ContextMenuGroupProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group>;
-const ContextMenuGroup = ContextMenuPrimitive.Group;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuSub
- * -------------------------------------------------------------------------- */
-
-type ContextMenuSubProps = React.ComponentProps<typeof ContextMenuPrimitive.Sub>;
-const ContextMenuSub = ContextMenuPrimitive.Sub;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuRadioGroup
- * -------------------------------------------------------------------------- */
-
-type ContextMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioGroup>;
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuSubTrigger
- * -------------------------------------------------------------------------- */
-
-type ContextMenuSubTriggerElement = React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>;
-
-interface ContextMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> {
-  inset?: boolean;
-}
-
-const ContextMenuSubTrigger = React.forwardRef<ContextMenuSubTriggerElement, ContextMenuSubTriggerProps>(
-  ({ children, className, inset, ...props }, ref) => (
-    <ContextMenuPrimitive.SubTrigger
-      ref={ref}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none',
-        inset && 'pl-8',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </ContextMenuPrimitive.SubTrigger>
-  ),
-);
-
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuSubContent
- * -------------------------------------------------------------------------- */
-
-type ContextMenuSubContentElement = React.ElementRef<typeof ContextMenuPrimitive.SubContent>;
-type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>;
-
-const ContextMenuSubContent = React.forwardRef<ContextMenuSubContentElement, ContextMenuSubContentProps>(
-  ({ className, ...props }, ref) => (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.SubContent
-        ref={ref}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
-          className,
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  ),
-);
-
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuContent
- * -------------------------------------------------------------------------- */
-
-type ContextMenuContentElement = React.ElementRef<typeof ContextMenuPrimitive.Content>;
-type ContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>;
-
-const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMenuContentProps>(
-  ({ className, ...props }, ref) => (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        ref={ref}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
-          className,
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  ),
-);
-
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuItem
- * -------------------------------------------------------------------------- */
-
-type ContextMenuItemElement = React.ElementRef<typeof ContextMenuPrimitive.Item>;
-
-interface ContextMenuItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> {
-  inset?: boolean;
-}
-
-const ContextMenuItem = React.forwardRef<ContextMenuItemElement, ContextMenuItemProps>(
-  ({ className, inset, ...props }, ref) => (
-    <ContextMenuPrimitive.Item
-      ref={ref}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
-        inset && 'pl-8',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuCheckboxItem
- * -------------------------------------------------------------------------- */
-
-type ContextMenuCheckboxItemElement = React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>;
-type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>;
-
-const ContextMenuCheckboxItem = React.forwardRef<ContextMenuCheckboxItemElement, ContextMenuCheckboxItemProps>(
-  ({ children, className, checked, ...props }, ref) => (
-    <ContextMenuPrimitive.CheckboxItem
-      ref={ref}
-      checked={checked}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.CheckboxItem>
-  ),
-);
-
-ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuRadioItem
- * -------------------------------------------------------------------------- */
-
-type ContextMenuRadioItemElement = React.ElementRef<typeof ContextMenuPrimitive.RadioItem>;
-type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>;
-
-const ContextMenuRadioItem = React.forwardRef<ContextMenuRadioItemElement, ContextMenuRadioItemProps>(
-  ({ children, className, ...props }, ref) => (
-    <ContextMenuPrimitive.RadioItem
-      ref={ref}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <DotFilledIcon className="size-4 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </ContextMenuPrimitive.RadioItem>
-  ),
-);
-
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuLabel
- * -------------------------------------------------------------------------- */
-
-type ContextMenuLabelElement = React.ElementRef<typeof ContextMenuPrimitive.Label>;
-
-interface ContextMenuLabelProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> {
-  inset?: boolean;
-}
-
-const ContextMenuLabel = React.forwardRef<ContextMenuLabelElement, ContextMenuLabelProps>(
-  ({ className, inset, ...props }, ref) => (
-    <ContextMenuPrimitive.Label
-      ref={ref}
-      className={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-      {...props}
-    />
-  ),
-);
-
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuSeparator
- * -------------------------------------------------------------------------- */
-
-type ContextMenuSeparatorElement = React.ElementRef<typeof ContextMenuPrimitive.Separator>;
-type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>;
-
-const ContextMenuSeparator = React.forwardRef<ContextMenuSeparatorElement, ContextMenuSeparatorProps>(
-  ({ className, ...props }, ref) => (
-    <ContextMenuPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />
-  ),
-);
-
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuShortcut
- * -------------------------------------------------------------------------- */
-
-type ContextMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
-
-function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): React.JSX.Element {
-  return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />;
-}
-
-/* -----------------------------------------------------------------------------
- * Component: ContextMenuArrow
- * -------------------------------------------------------------------------- */
-
-type ContextMenuArrowElement = React.ElementRef<typeof ContextMenuPrimitive.Arrow>;
-type ContextMenuArrowProps = ContextMenuPrimitive.ContextMenuArrowProps;
-
-const ContextMenuArrow = React.forwardRef<ContextMenuArrowElement, ContextMenuArrowProps>(
-  ({ className, ...props }, ref) => (
-    <ContextMenuPrimitive.Arrow ref={ref} className={cn('fill-popover', className)} {...props} />
-  ),
-);
-
-ContextMenuArrow.displayName = ContextMenuPrimitive.Arrow.displayName;
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-  ContextMenuArrow,
-  type ContextMenuProps,
-  type ContextMenuTriggerProps,
-  type ContextMenuContentProps,
-  type ContextMenuItemProps,
-  type ContextMenuCheckboxItemProps,
-  type ContextMenuRadioItemProps,
-  type ContextMenuLabelProps,
-  type ContextMenuSeparatorProps,
-  type ContextMenuShortcutProps,
-  type ContextMenuGroupProps,
-  type ContextMenuSubProps,
-  type ContextMenuSubContentProps,
-  type ContextMenuSubTriggerProps,
-  type ContextMenuRadioGroupProps,
-  type ContextMenuArrowProps,
-};

package/src/react/data-table.tsx

@@ -1,249 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CaretSortIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-  EyeNoneIcon,
-  MixerHorizontalIcon,
-} from '@radix-ui/react-icons';
-import type * as ReactTable from '@tanstack/react-table';
-import { cn } from '../lib/utils';
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from './dropdown-menu';
-import { Button } from './button';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
-
-/* -----------------------------------------------------------------------------
- * Component: DataTableViewOptions
- * -------------------------------------------------------------------------- */
-
-interface DataTableViewOptionsProps<TData> {
-  table: ReactTable.Table<TData>;
-}
-
-function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): React.JSX.Element {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button className="ml-auto hidden h-8 lg:flex" size="sm" variant="outline">
-          <MixerHorizontalIcon className="mr-2 size-4" />
-          View
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-36">
-        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {table
-          .getAllColumns()
-          .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
-          .map((column) => {
-            return (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                checked={column.getIsVisible()}
-                className="capitalize"
-                onCheckedChange={(value) => {
-                  column.toggleVisibility(Boolean(value));
-                }}
-              >
-                {column.id}
-              </DropdownMenuCheckboxItem>
-            );
-          })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-/* -----------------------------------------------------------------------------
- * Component: DataTablePagination
- * -------------------------------------------------------------------------- */
-
-interface DataTablePaginationProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
-  table: ReactTable.Table<TData>;
-}
-
-function DataTablePagination<TData>({
-  table,
-  className,
-  ...props
-}: DataTablePaginationProps<TData>): React.JSX.Element {
-  return (
-    <div className={cn('flex items-center justify-between px-2', className)} {...props}>
-      <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">
-        <div className="flex items-center space-x-2">
-          <p className="text-sm font-medium">Rows per page</p>
-          <Select
-            value={String(table.getState().pagination.pageSize)}
-            onValueChange={(value) => {
-              table.setPageSize(Number(value));
-            }}
-          >
-            <SelectTrigger className="w-18 h-8">
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {[10, 20, 30, 40, 50].map((pageSize) => (
-                <SelectItem key={pageSize} value={String(pageSize)}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex w-28 items-center justify-center text-sm font-medium">
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-        </div>
-        <div className="flex items-center space-x-2">
-          <Button
-            className="hidden lg:flex"
-            disabled={!table.getCanPreviousPage()}
-            size="icon-xs"
-            variant="outline"
-            onClick={() => {
-              table.setPageIndex(0);
-            }}
-          >
-            <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="size-4" />
-          </Button>
-          <Button
-            disabled={!table.getCanPreviousPage()}
-            size="icon-xs"
-            variant="outline"
-            onClick={() => {
-              table.previousPage();
-            }}
-          >
-            <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="size-4" />
-          </Button>
-          <Button
-            disabled={!table.getCanNextPage()}
-            size="icon-xs"
-            variant="outline"
-            onClick={() => {
-              table.nextPage();
-            }}
-          >
-            <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="size-4" />
-          </Button>
-          <Button
-            className="hidden lg:flex"
-            disabled={!table.getCanNextPage()}
-            size="icon-xs"
-            variant="outline"
-            onClick={() => {
-              table.setPageIndex(table.getPageCount() - 1);
-            }}
-          >
-            <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="size-4" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* -----------------------------------------------------------------------------
- * Component: DataTableColumnHeader
- * -------------------------------------------------------------------------- */
-
-interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
-  column: ReactTable.Column<TData, TValue>;
-  title: string;
-}
-
-function DataTableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className,
-}: DataTableColumnHeaderProps<TData, TValue>): React.JSX.Element {
-  if (!column.getCanSort()) {
-    return <div className={className}>{title}</div>;
-  }
-
-  return (
-    <div className={cn('flex items-center space-x-2', className)}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button className="data-[state=open]:bg-accent -ml-3" size="xs" variant="ghost">
-            <span>{title}</span>
-            <SortIcon sorted={column.getIsSorted()} />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem
-            onClick={() => {
-              column.toggleSorting(false);
-            }}
-          >
-            <ArrowUpIcon className="text-muted-foreground/70 mr-2 size-3.5" />
-            Asc
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            onClick={() => {
-              column.toggleSorting(true);
-            }}
-          >
-            <ArrowDownIcon className="text-muted-foreground/70 mr-2 size-3.5" />
-            Desc
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onClick={() => {
-              column.toggleVisibility(false);
-            }}
-          >
-            <EyeNoneIcon className="text-muted-foreground/70 mr-2 size-3.5" />
-            Hide
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-}
-
-function SortIcon({ sorted }: { sorted: false | ReactTable.SortDirection }): React.JSX.Element {
-  switch (sorted) {
-    case 'desc':
-      return <ArrowDownIcon className="ml-2 size-4" />;
-
-    case 'asc':
-      return <ArrowUpIcon className="ml-2 size-4" />;
-
-    default:
-      return <CaretSortIcon className="ml-2 size-4" />;
-  }
-}
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  DataTableViewOptions,
-  DataTablePagination,
-  DataTableColumnHeader,
-  type DataTableViewOptionsProps,
-  type DataTablePaginationProps,
-  type DataTableColumnHeaderProps,
-};