@carefully-built/cli 0.1.1 → 0.1.2

package/registry/ui/switch/primitives/switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background pointer-events-none block size-5 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0.5"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/registry/ui/switch/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/table/manifest.json

@@ -0,0 +1,38 @@
+{
+  "name": "table",
+  "description": "Editable source registry entry for table.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "Table",
+    "TableBody",
+    "TableCaption",
+    "TableCell",
+    "TableFooter",
+    "TableHead",
+    "TableHeader",
+    "TableRow"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "primitives/table.tsx",
+      "target": "components/ui/table.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}

package/registry/ui/table/primitives/table.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div data-slot="table-container" className="relative w-full min-w-0 overflow-x-auto">
+      <table
+        data-slot="table"
+        className={cn('w-full min-w-0 caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 overflow-hidden px-2 text-left align-middle font-medium text-ellipsis whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'overflow-hidden p-2 align-middle text-ellipsis whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/registry/ui/table/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}

package/registry/ui/table-toolbar/manifest.json

@@ -0,0 +1,93 @@
+{
+  "name": "table-toolbar",
+  "description": "Editable source registry entry for table-toolbar.",
+  "importPath": "@carefully-built/ui",
+  "exports": [
+    "CustomTableToolbarFilter",
+    "FilterConfig",
+    "FilterDropdown",
+    "FilterOption",
+    "SearchInput",
+    "TableToolbar",
+    "TableToolbarProps"
+  ],
+  "dependencies": [
+    "class-variance-authority",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "peerDependencies": [
+    "react",
+    "react-dom",
+    "radix-ui",
+    "lucide-react",
+    "react-day-picker",
+    "vaul"
+  ],
+  "files": [
+    {
+      "source": "overlays/responsive-sheet.footer.tsx",
+      "target": "components/ui/responsive-sheet.footer.tsx"
+    },
+    {
+      "source": "overlays/responsive-sheet.layouts.tsx",
+      "target": "components/ui/responsive-sheet.layouts.tsx"
+    },
+    {
+      "source": "overlays/responsive-sheet.shortcuts.ts",
+      "target": "components/ui/responsive-sheet.shortcuts.ts"
+    },
+    {
+      "source": "overlays/responsive-sheet.tsx",
+      "target": "components/ui/responsive-sheet.tsx"
+    },
+    {
+      "source": "primitives/button.tsx",
+      "target": "components/ui/button.tsx"
+    },
+    {
+      "source": "primitives/drawer.tsx",
+      "target": "components/ui/drawer.tsx"
+    },
+    {
+      "source": "primitives/input.tsx",
+      "target": "components/ui/input.tsx"
+    },
+    {
+      "source": "primitives/keyboard-shortcut-hint.tsx",
+      "target": "components/ui/keyboard-shortcut-hint.tsx"
+    },
+    {
+      "source": "primitives/sheet.tsx",
+      "target": "components/ui/sheet.tsx"
+    },
+    {
+      "source": "search/searchable-select-position.ts",
+      "target": "components/ui/search/searchable-select-position.ts"
+    },
+    {
+      "source": "search/searchable-select.tsx",
+      "target": "components/ui/search/searchable-select.tsx"
+    },
+    {
+      "source": "table-toolbar/index.ts",
+      "target": "components/ui/table-toolbar/index.ts"
+    },
+    {
+      "source": "table-toolbar/table-toolbar.tsx",
+      "target": "components/ui/table-toolbar/table-toolbar.tsx"
+    },
+    {
+      "source": "utils/cn.ts",
+      "target": "lib/utils.ts"
+    },
+    {
+      "source": "utils/search.ts",
+      "target": "components/ui/search.ts"
+    },
+    {
+      "source": "utils/use-media-query.ts",
+      "target": "components/ui/use-media-query.ts"
+    }
+  ]
+}

package/registry/ui/table-toolbar/overlays/responsive-sheet.footer.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { CornerDownLeft } from 'lucide-react';
+
+import type { ReactNode } from 'react';
+
+import { Button } from '@/components/ui/button';
+import { KeyboardKeycap, ShortcutModifierKeycap } from '@/components/ui/keyboard-shortcut-hint';
+
+export function DesktopConfirmShortcutHint({
+  desktopModifierLabel,
+}: {
+  readonly desktopModifierLabel: string;
+}): React.ReactElement {
+  const keycapClassName = 'border-primary-foreground/20 bg-primary-foreground/10';
+
+  return (
+    <span className="text-primary-foreground/70 inline-flex items-center gap-1">
+      <ShortcutModifierKeycap modifierLabel={desktopModifierLabel} className={keycapClassName} />
+      <KeyboardKeycap className={keycapClassName}>
+        <CornerDownLeft className="size-[10px]" />
+      </KeyboardKeycap>
+    </span>
+  );
+}
+
+interface SheetActionFooterProps {
+  readonly footer?: ReactNode;
+  readonly onCancel?: () => void;
+  readonly cancelLabel: ReactNode;
+  readonly onConfirm?: () => void;
+  readonly confirmLabel: ReactNode;
+  readonly confirmDisabled: boolean;
+  readonly confirmLoading: boolean;
+  readonly desktopConfirmShortcutEnabled?: boolean;
+  readonly desktopModifierLabel?: string | null;
+}
+
+export function SheetActionFooter({
+  footer,
+  onCancel,
+  cancelLabel,
+  onConfirm,
+  confirmLabel,
+  confirmDisabled,
+  confirmLoading,
+  desktopConfirmShortcutEnabled = false,
+  desktopModifierLabel = null,
+}: SheetActionFooterProps): React.ReactNode {
+  if (footer) return footer;
+
+  if (!onCancel && !onConfirm) return null;
+
+  const actionCount = Number(Boolean(onCancel)) + Number(Boolean(onConfirm));
+  const footerButtonClassName = actionCount === 1 ? 'w-full' : 'min-w-0 flex-1';
+
+  return (
+    <div className="flex w-full flex-nowrap items-center gap-2">
+      {onCancel ? (
+        <Button
+          type="button"
+          variant="outline"
+          onClick={onCancel}
+          className={footerButtonClassName}
+        >
+          {cancelLabel}
+        </Button>
+      ) : null}
+      {onConfirm ? (
+        <Button
+          type="button"
+          onClick={onConfirm}
+          disabled={confirmDisabled}
+          className={`${footerButtonClassName} relative`}
+        >
+          <span className="inline-flex w-full items-center justify-center">
+            <span>{confirmLoading ? 'Saving...' : confirmLabel}</span>
+            {desktopConfirmShortcutEnabled && desktopModifierLabel ? (
+              <span className="absolute top-1/2 right-2 -translate-y-1/2">
+                <DesktopConfirmShortcutHint desktopModifierLabel={desktopModifierLabel} />
+              </span>
+            ) : null}
+          </span>
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/registry/ui/table-toolbar/overlays/responsive-sheet.layouts.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import type { SheetOutsideInteractionGuard } from '@/components/ui/responsive-sheet';
+import type { ResponsiveSheetClassNames } from '@/components/ui/responsive-sheet';
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from '@/components/ui/drawer';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { cn } from '@/lib/utils';
+
+interface SheetDescriptionBlockProps {
+  readonly title: ReactNode;
+  readonly description?: ReactNode;
+  readonly classes?: ResponsiveSheetClassNames;
+}
+
+function SheetDescriptionBlock({
+  title,
+  description,
+  classes,
+}: SheetDescriptionBlockProps): React.ReactElement {
+  return (
+    <>
+      <SheetTitle className={classes?.title}>{title}</SheetTitle>
+      {description ? (
+        <SheetDescription className={classes?.description}>{description}</SheetDescription>
+      ) : null}
+    </>
+  );
+}
+
+interface SharedSheetLayoutProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly modal: boolean;
+  readonly outsideInteractionGuard?: SheetOutsideInteractionGuard;
+  readonly title: ReactNode;
+  readonly description?: ReactNode;
+  readonly children: ReactNode;
+  readonly footer: ReactNode;
+  readonly mobileDrawerContentClassName?: string;
+  readonly contentClassName?: string;
+  readonly footerClassName?: string;
+  readonly classes?: ResponsiveSheetClassNames;
+}
+
+function shouldPreventOutsideInteraction(
+  target: EventTarget | null,
+  guard?: SheetOutsideInteractionGuard,
+): boolean {
+  const element =
+    target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+
+  if (!element) {
+    return false;
+  }
+
+  if (element.closest('[data-searchable-select-content]')) {
+    return true;
+  }
+
+  return guard?.selectors.some((selector) => element.closest(selector)) ?? false;
+}
+
+type MobileSheetLayoutProps = SharedSheetLayoutProps;
+
+export function MobileSheetLayout({
+  open,
+  onOpenChange,
+  modal,
+  outsideInteractionGuard,
+  title,
+  description,
+  children,
+  footer,
+  mobileDrawerContentClassName,
+  contentClassName,
+  footerClassName,
+  classes,
+}: MobileSheetLayoutProps): React.ReactElement {
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange} modal={modal}>
+      <DrawerContent
+        aria-describedby={description ? undefined : 'responsive-sheet-description-empty'}
+        className={cn(
+          'px-4 pb-[calc(env(safe-area-inset-bottom)+20px)]',
+          mobileDrawerContentClassName,
+          classes?.mobileContent,
+        )}
+        onInteractOutside={(event) => {
+          if (shouldPreventOutsideInteraction(event.target, outsideInteractionGuard)) {
+            event.preventDefault();
+          }
+        }}
+        onPointerDownOutside={(event) => {
+          if (shouldPreventOutsideInteraction(event.target, outsideInteractionGuard)) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <DrawerHeader className={cn('px-0 pb-4', classes?.header)}>
+          <DrawerTitle className={classes?.title}>{title}</DrawerTitle>
+          {description ? (
+            <DrawerDescription className={classes?.description}>{description}</DrawerDescription>
+          ) : (
+            <DrawerDescription id="responsive-sheet-description-empty" className="sr-only">
+              Dialog
+            </DrawerDescription>
+          )}
+        </DrawerHeader>
+        <div className="flex min-h-0 flex-1 flex-col gap-4">
+          <div
+            className={cn(
+              '-mx-1 flex-1 overflow-y-auto px-1 pb-3 [scrollbar-gutter:stable]',
+              contentClassName,
+              classes?.body,
+            )}
+          >
+            {children}
+          </div>
+          {footer ? (
+            <div className={cn('shrink-0 border-t pt-4 pb-3', footerClassName, classes?.footer)}>
+              {footer}
+            </div>
+          ) : null}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+interface DesktopSheetLayoutProps extends SharedSheetLayoutProps {
+  readonly width: number;
+}
+
+export function DesktopSheetLayout({
+  open,
+  onOpenChange,
+  modal,
+  outsideInteractionGuard,
+  title,
+  description,
+  children,
+  footer,
+  width,
+  contentClassName,
+  footerClassName,
+  classes,
+}: DesktopSheetLayoutProps): React.ReactElement {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange} modal={modal}>
+      <SheetContent
+        aria-describedby={description ? undefined : 'responsive-sheet-description-empty'}
+        style={{ width: `${String(width)}px`, maxWidth: '85vw' }}
+        className={cn('flex flex-col gap-0 p-0', classes?.desktopContent)}
+        onInteractOutside={(event) => {
+          if (shouldPreventOutsideInteraction(event.target, outsideInteractionGuard)) {
+            event.preventDefault();
+          }
+        }}
+        onPointerDownOutside={(event) => {
+          if (shouldPreventOutsideInteraction(event.target, outsideInteractionGuard)) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <SheetHeader className={cn('border-b px-4 py-4', classes?.header)}>
+          <SheetDescriptionBlock title={title} description={description} classes={classes} />
+        </SheetHeader>
+        {description ? null : (
+          <SheetDescription id="responsive-sheet-description-empty" className="sr-only">
+            Dialog
+          </SheetDescription>
+        )}
+        <div className="flex min-h-0 flex-1 flex-col">
+          <div
+            className={cn(
+              'flex-1 overflow-x-visible overflow-y-auto px-4 pt-4 pb-6 [scrollbar-gutter:stable]',
+              contentClassName,
+              classes?.body,
+            )}
+          >
+            {children}
+          </div>
+          {footer ? (
+            <div className={cn('border-t px-4 py-4', footerClassName, classes?.footer)}>
+              {footer}
+            </div>
+          ) : null}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/registry/ui/table-toolbar/overlays/responsive-sheet.shortcuts.ts

@@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+
+interface NavigatorWithUserAgentData extends Navigator {
+  readonly userAgentData?: {
+    readonly platform?: string;
+  };
+}
+
+export function getDesktopShortcutModifierLabel(): string {
+  if (typeof navigator === "undefined") {
+    return "Ctrl";
+  }
+
+  const navigatorWithUserAgentData = navigator as NavigatorWithUserAgentData;
+  const platform =
+    navigatorWithUserAgentData.userAgentData?.platform ?? navigator.userAgent;
+
+  return /Mac|iPhone|iPad|iPod/i.test(platform) ? "Cmd" : "Ctrl";
+}
+
+export function isAllowedConfirmShortcutEvent(
+  event: KeyboardEvent,
+  desktopModifierLabel: string,
+): boolean {
+  if (event.key !== "Enter" || event.repeat || event.isComposing) {
+    return false;
+  }
+
+  const expectsMetaKey = desktopModifierLabel === "Cmd";
+  const usedExpectedModifier = expectsMetaKey ? event.metaKey : event.ctrlKey;
+  const usedOtherModifier = expectsMetaKey ? event.ctrlKey : event.metaKey;
+  const usedShiftModifier = event.shiftKey;
+  const usedAltModifier = event.altKey;
+
+  if (
+    !usedExpectedModifier ||
+    usedOtherModifier ||
+    usedShiftModifier ||
+    usedAltModifier
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+export function useDesktopShortcutModifierLabel(
+  enabled: boolean,
+): string | null {
+  const [desktopModifierLabel, setDesktopModifierLabel] = useState<
+    string | null
+  >(null);
+
+  useEffect(() => {
+    if (!enabled) {
+      setDesktopModifierLabel(null);
+      return;
+    }
+
+    setDesktopModifierLabel(getDesktopShortcutModifierLabel());
+  }, [enabled]);
+
+  return desktopModifierLabel;
+}
+
+interface UseDesktopConfirmShortcutOptions {
+  readonly open: boolean;
+  readonly enabled: boolean;
+  readonly confirmDisabled: boolean;
+  readonly confirmLoading: boolean;
+  readonly onConfirm?: () => void;
+}
+
+export function useDesktopConfirmShortcut({
+  open,
+  enabled,
+  confirmDisabled,
+  confirmLoading,
+  onConfirm,
+}: UseDesktopConfirmShortcutOptions): void {
+  useEffect(() => {
+    if (!open || !enabled || !onConfirm || confirmDisabled || confirmLoading) {
+      return;
+    }
+
+    const desktopModifierLabel = getDesktopShortcutModifierLabel();
+
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (!isAllowedConfirmShortcutEvent(event, desktopModifierLabel)) {
+        return;
+      }
+
+      event.preventDefault();
+      onConfirm();
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [confirmDisabled, confirmLoading, enabled, onConfirm, open]);
+}