@codefast/ui 0.0.66 → 0.0.68

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

package/src/react/dialog.tsx

@@ -1,160 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Cross2Icon } from '@radix-ui/react-icons';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: Dialog
- * -------------------------------------------------------------------------- */
-
-type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;
-const Dialog = DialogPrimitive.Root;
-
-/* -----------------------------------------------------------------------------
- * Component: DialogTrigger
- * -------------------------------------------------------------------------- */
-
-type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
-const DialogTrigger = DialogPrimitive.Trigger;
-
-/* -----------------------------------------------------------------------------
- * Component: DialogClose
- * -------------------------------------------------------------------------- */
-
-type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
-const DialogClose = DialogPrimitive.Close;
-
-/* -----------------------------------------------------------------------------
- * Component: DialogContent
- * -------------------------------------------------------------------------- */
-
-type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
-type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
-
-const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
-  ({ children, className, ...props }, forwardedRef) => (
-    <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="data-[state=open]:animate-duration-200 data-[state=closed]:animate-duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 grid place-items-center overflow-auto bg-black/80 p-4 sm:pb-12 sm:pt-8">
-        <DialogPrimitive.Content
-          ref={forwardedRef}
-          className={cn(
-            'bg-background data-[state=open]:animate-in data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-200 data-[state=closed]:animate-duration-200 data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:fade-out relative z-50 flex w-full max-w-lg flex-col rounded-lg border shadow-lg',
-            className,
-          )}
-          {...props}
-        >
-          {children}
-          <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm p-1 opacity-70 transition hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none">
-            <Cross2Icon className="size-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Overlay>
-    </DialogPrimitive.Portal>
-  ),
-);
-
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DialogHeader
- * -------------------------------------------------------------------------- */
-
-type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-
-function DialogHeader({ className, ...props }: DialogHeaderProps): React.JSX.Element {
-  return (
-    <header
-      className={cn('flex shrink-0 flex-col gap-1.5 px-6 pb-4 pt-6 text-center sm:text-left', className)}
-      {...props}
-    />
-  );
-}
-
-/* -----------------------------------------------------------------------------
- * Component: DialogBody
- * -------------------------------------------------------------------------- */
-
-type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
-
-function DialogBody({ className, ...props }: DialogBodyProps): React.JSX.Element {
-  return <main className={cn('overflow-auto px-6 py-2', className)} {...props} />;
-}
-
-/* -----------------------------------------------------------------------------
- * Component: DialogFooter
- * -------------------------------------------------------------------------- */
-
-type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
-
-function DialogFooter({ className, ...props }: DialogFooterProps): React.JSX.Element {
-  return (
-    <footer
-      className={cn('flex shrink-0 flex-col-reverse gap-2 px-6 pb-6 pt-4 sm:flex-row sm:justify-end', className)}
-      {...props}
-    />
-  );
-}
-
-/* -----------------------------------------------------------------------------
- * Component: DialogTitle
- * -------------------------------------------------------------------------- */
-
-type DialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;
-type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
-
-const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(({ className, ...props }, forwardedRef) => (
-  <DialogPrimitive.Title
-    ref={forwardedRef}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-));
-
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DialogDescription
- * -------------------------------------------------------------------------- */
-
-type DialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;
-type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
-
-const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <DialogPrimitive.Description
-      ref={forwardedRef}
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  ),
-);
-
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  Dialog,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  type DialogProps,
-  type DialogTriggerProps,
-  type DialogCloseProps,
-  type DialogContentProps,
-  type DialogHeaderProps,
-  type DialogBodyProps,
-  type DialogFooterProps,
-  type DialogTitleProps,
-  type DialogDescriptionProps,
-};

package/src/react/drawer.tsx

@@ -1,136 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Drawer as DrawerPrimitive } from 'vaul';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: Drawer
- * -------------------------------------------------------------------------- */
-
-type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
-
-function Drawer({ shouldScaleBackground = true, ...props }: DrawerProps): React.JSX.Element {
-  return <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />;
-}
-
-/* -----------------------------------------------------------------------------
- * Component: DrawerTrigger
- * -------------------------------------------------------------------------- */
-
-type DrawerTriggerProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Trigger>;
-const DrawerTrigger = DrawerPrimitive.Trigger;
-
-/* -----------------------------------------------------------------------------
- * Component: DrawerClose
- * -------------------------------------------------------------------------- */
-
-type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>;
-const DrawerClose = DrawerPrimitive.Close;
-
-/* -----------------------------------------------------------------------------
- * Component: DrawerContent
- * -------------------------------------------------------------------------- */
-
-type DrawerContentElement = React.ElementRef<typeof DrawerPrimitive.Content>;
-type DrawerContentProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>;
-
-const DrawerContent = React.forwardRef<DrawerContentElement, DrawerContentProps>(
-  ({ children, className, ...props }, forwardedRef) => (
-    <DrawerPrimitive.Portal>
-      <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
-      <DrawerPrimitive.Content
-        ref={forwardedRef}
-        className={cn(
-          'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-xl border',
-          className,
-        )}
-        {...props}
-      >
-        <div className="bg-muted mx-auto mt-4 h-2 w-24 rounded-full" />
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPrimitive.Portal>
-  ),
-);
-
-DrawerContent.displayName = 'DrawerContent';
-
-/* -----------------------------------------------------------------------------
- * Component: DrawerHeader
- * -------------------------------------------------------------------------- */
-
-type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-
-function DrawerHeader({ className, ...props }: DrawerHeaderProps): React.JSX.Element {
-  return <div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />;
-}
-
-/* -----------------------------------------------------------------------------
- * Component: DrawerFooter
- * -------------------------------------------------------------------------- */
-
-type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
-
-function DrawerFooter({ className, ...props }: DrawerFooterProps): React.JSX.Element {
-  return <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;
-}
-
-/* -----------------------------------------------------------------------------
- * Component: DrawerTitle
- * -------------------------------------------------------------------------- */
-
-type DrawerTitleElement = React.ElementRef<typeof DrawerPrimitive.Title>;
-type DrawerTitleProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>;
-
-const DrawerTitle = React.forwardRef<DrawerTitleElement, DrawerTitleProps>(({ className, ...props }, forwardedRef) => (
-  <DrawerPrimitive.Title
-    ref={forwardedRef}
-    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
-    {...props}
-  />
-));
-
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: DrawerDescription
- * -------------------------------------------------------------------------- */
-
-type DrawerDescriptionElement = React.ElementRef<typeof DrawerPrimitive.Description>;
-type DrawerDescriptionProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>;
-
-const DrawerDescription = React.forwardRef<DrawerDescriptionElement, DrawerDescriptionProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <DrawerPrimitive.Description
-      ref={forwardedRef}
-      className={cn('text-muted-foreground text-sm', className)}
-      {...props}
-    />
-  ),
-);
-
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  Drawer,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-  type DrawerProps,
-  type DrawerTriggerProps,
-  type DrawerCloseProps,
-  type DrawerContentProps,
-  type DrawerHeaderProps,
-  type DrawerFooterProps,
-  type DrawerTitleProps,
-  type DrawerDescriptionProps,
-};