@carefully-built/cli 0.1.1 → 0.1.2

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

@@ -0,0 +1,132 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { SheetActionFooter } from '@/components/ui/responsive-sheet.footer';
+import { DesktopSheetLayout, MobileSheetLayout } from '@/components/ui/responsive-sheet.layouts';
+import {
+  useDesktopConfirmShortcut,
+  useDesktopShortcutModifierLabel,
+} from '@/components/ui/responsive-sheet.shortcuts';
+import { cn } from '@/lib/utils';
+import { useIsMobile } from '@/components/ui/use-media-query';
+
+export interface SheetOutsideInteractionGuard {
+  readonly selectors: readonly string[];
+}
+
+export interface ResponsiveSheetClassNames {
+  readonly desktopContent?: string;
+  readonly mobileContent?: string;
+  readonly header?: string;
+  readonly body?: string;
+  readonly footer?: string;
+  readonly title?: string;
+  readonly description?: string;
+}
+
+export interface ResponsiveSheetProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly title: ReactNode;
+  readonly description?: ReactNode;
+  readonly children: ReactNode;
+  readonly footer?: ReactNode;
+  readonly onCancel?: () => void;
+  readonly cancelLabel?: ReactNode;
+  readonly onConfirm?: () => void;
+  readonly confirmLabel?: ReactNode;
+  readonly confirmDisabled?: boolean;
+  readonly confirmLoading?: boolean;
+  readonly width?: number;
+  readonly modal?: boolean;
+  readonly outsideInteractionGuard?: SheetOutsideInteractionGuard;
+  readonly enableDesktopConfirmShortcut?: boolean;
+  readonly mobileDrawerContentClassName?: string;
+  readonly className?: string;
+  readonly contentClassName?: string;
+  readonly footerClassName?: string;
+  readonly classes?: ResponsiveSheetClassNames;
+}
+
+export function ResponsiveSheet({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  onCancel,
+  cancelLabel = 'Cancel',
+  onConfirm,
+  confirmLabel = 'Save',
+  confirmDisabled = false,
+  confirmLoading = false,
+  width = 550,
+  modal = true,
+  outsideInteractionGuard,
+  enableDesktopConfirmShortcut = true,
+  mobileDrawerContentClassName,
+  className,
+  contentClassName,
+  footerClassName,
+  classes,
+}: ResponsiveSheetProps): React.ReactElement {
+  const isMobile = useIsMobile();
+  const desktopConfirmShortcutEnabled =
+    !isMobile && enableDesktopConfirmShortcut && Boolean(onConfirm);
+  const desktopModifierLabel = useDesktopShortcutModifierLabel(desktopConfirmShortcutEnabled);
+
+  useDesktopConfirmShortcut({
+    open,
+    enabled: desktopConfirmShortcutEnabled,
+    confirmDisabled,
+    confirmLoading,
+    onConfirm: onConfirm
+      ? () => {
+          onConfirm();
+        }
+      : undefined,
+  });
+
+  const resolvedFooter = (
+    <SheetActionFooter
+      footer={footer}
+      onCancel={onCancel}
+      cancelLabel={cancelLabel}
+      onConfirm={onConfirm}
+      confirmLabel={confirmLabel}
+      confirmDisabled={confirmDisabled}
+      confirmLoading={confirmLoading}
+      desktopConfirmShortcutEnabled={desktopConfirmShortcutEnabled}
+      desktopModifierLabel={desktopModifierLabel}
+    />
+  );
+  const hasFooter = [footer, onCancel, onConfirm].some(
+    (value) => value !== null && value !== undefined,
+  );
+  const sharedLayoutProps = {
+    open,
+    onOpenChange,
+    modal,
+    outsideInteractionGuard,
+    title,
+    description,
+    footer: hasFooter ? resolvedFooter : null,
+    children,
+    contentClassName,
+    footerClassName,
+    mobileDrawerContentClassName,
+    classes: {
+      ...classes,
+      desktopContent: cn(className, classes?.desktopContent),
+      mobileContent: cn(className, mobileDrawerContentClassName, classes?.mobileContent),
+    },
+  };
+
+  return isMobile ? (
+    <MobileSheetLayout {...sharedLayoutProps} />
+  ) : (
+    <DesktopSheetLayout {...sharedLayoutProps} width={width} />
+  );
+}

package/registry/ui/table-toolbar/primitives/button.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:brightness-90 [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonVariant =
+  | "default"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "destructive"
+  | "link";
+type ButtonSize =
+  | "default"
+  | "xs"
+  | "sm"
+  | "lg"
+  | "icon"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-lg";
+
+interface ButtonProps extends React.ComponentProps<"button"> {
+  readonly asChild?: boolean;
+  readonly size?: ButtonSize;
+  readonly variant?: ButtonVariant;
+}
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
+export type { ButtonProps, ButtonSize, ButtonVariant };

package/registry/ui/table-toolbar/primitives/drawer.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '@/lib/utils';
+
+function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 backdrop-blur-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          'bg-background group/drawer-content fixed z-50 flex h-auto flex-col overflow-visible text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn('text-foreground text-base font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+};

package/registry/ui/table-toolbar/primitives/input.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/registry/ui/table-toolbar/primitives/keyboard-shortcut-hint.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { Command } from 'lucide-react';
+
+import type { ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+export function KeyboardKeycap({
+  children,
+  className,
+}: {
+  readonly children: ReactNode;
+  readonly className?: string;
+}): React.ReactElement {
+  return (
+    <span
+      className={cn(
+        'inline-flex h-4 min-w-4 items-center justify-center rounded-[4px] border px-1 text-[9px] font-semibold leading-none',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function ShortcutModifierKeycap({
+  modifierLabel,
+  className,
+}: {
+  readonly modifierLabel: string;
+  readonly className?: string;
+}): React.ReactElement {
+  return (
+    <KeyboardKeycap className={className}>
+      {modifierLabel === 'Cmd' ? <Command className="size-[10px]" /> : 'Ctrl'}
+    </KeyboardKeycap>
+  );
+}

package/registry/ui/table-toolbar/primitives/sheet.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { X } from 'lucide-react';
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 backdrop-blur-xs duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          'bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 overflow-visible bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:rounded-r-xl data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:rounded-l-xl data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+              <X className="size-4" />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        ) : null}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-0.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('text-foreground text-base font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle };

package/registry/ui/table-toolbar/search/searchable-select-position.ts

@@ -0,0 +1,95 @@
+export interface SearchableSelectRect {
+  readonly top: number;
+  readonly left: number;
+  readonly right: number;
+  readonly bottom: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+interface ResolveSearchableSelectDropdownPositionArgs {
+  readonly triggerRect: SearchableSelectRect;
+  readonly boundaryRect?: SearchableSelectRect;
+  readonly portalRect?: SearchableSelectRect;
+  readonly contentWidth: number;
+  readonly contentHeight: number;
+  readonly viewportWidth: number;
+  readonly viewportHeight: number;
+  readonly offset?: number;
+  readonly padding?: number;
+}
+
+interface SearchableSelectDropdownPosition {
+  readonly top: number;
+  readonly left: number;
+  readonly width: number;
+  readonly maxHeight: number;
+  readonly direction: 'up' | 'down';
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (max < min) {
+    return min;
+  }
+
+  return Math.min(Math.max(value, min), max);
+}
+
+export function resolveSearchableSelectDropdownPosition({
+  triggerRect,
+  boundaryRect,
+  portalRect,
+  contentWidth,
+  contentHeight,
+  viewportWidth,
+  viewportHeight,
+  offset = 8,
+  padding = 8,
+}: ResolveSearchableSelectDropdownPositionArgs): SearchableSelectDropdownPosition {
+  const boundaryLeftEdge = boundaryRect?.left ?? 0;
+  const boundaryRightEdge = boundaryRect?.right ?? viewportWidth;
+  const boundaryTopEdge = boundaryRect?.top ?? 0;
+  const boundaryBottomEdge = boundaryRect?.bottom ?? viewportHeight;
+  const boundaryLeft = Math.max(padding, boundaryLeftEdge + padding);
+  const boundaryRight = Math.min(
+    viewportWidth - padding,
+    boundaryRightEdge - padding,
+  );
+  const boundaryTop = Math.max(padding, boundaryTopEdge + padding);
+  const boundaryBottom = Math.min(
+    viewportHeight - padding,
+    boundaryBottomEdge - padding,
+  );
+  const availableWidth = Math.max(0, boundaryRight - boundaryLeft);
+  const width = Math.min(contentWidth, availableWidth);
+  const alignedRightLeft = triggerRect.right - width;
+  const defaultLeft = triggerRect.left;
+  const shouldAlignRight =
+    defaultLeft + width > boundaryRight && alignedRightLeft >= boundaryLeft;
+  const left = clamp(
+    shouldAlignRight ? alignedRightLeft : defaultLeft,
+    boundaryLeft,
+    boundaryRight - width,
+  );
+
+  const spaceAbove = triggerRect.top - boundaryTop;
+  const spaceBelow = boundaryBottom - triggerRect.bottom;
+  const shouldOpenUp = spaceBelow < contentHeight + offset && spaceAbove > spaceBelow;
+  const direction = shouldOpenUp ? 'up' : 'down';
+  const maxHeight = Math.max(
+    120,
+    Math.floor((shouldOpenUp ? spaceAbove : spaceBelow) - offset),
+  );
+  const renderedHeight = Math.min(contentHeight, maxHeight);
+  const viewportTop = shouldOpenUp
+    ? Math.max(boundaryTop, triggerRect.top - offset - renderedHeight)
+    : Math.min(boundaryBottom - renderedHeight, triggerRect.bottom + offset);
+
+  return {
+    top: viewportTop - (portalRect?.top ?? 0),
+    left: left - (portalRect?.left ?? 0),
+    width,
+    maxHeight,
+    direction,
+  };
+}