@atercates/claude-deck 0.2.1

package/components/a/ADropdownMenu.tsx

@@ -0,0 +1,279 @@
+/**
+ * ADropdownMenu - Declarative dropdown menu component
+ *
+ * @example
+ * ```tsx
+ * <ADropdownMenu
+ *   trigger={<Button><MoreHorizontal /></Button>}
+ *   items={[
+ *     menuItem('Edit', onEdit, { icon: Pencil }),
+ *     toggleItem('Full Width', isFullWidth, onToggle),
+ *     separator(),
+ *     menuItem('Delete', onDelete, { icon: Trash2, variant: 'destructive' }),
+ *   ]}
+ * />
+ * ```
+ */
+
+"use client";
+
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+// Types
+
+interface BaseItem {
+  key?: string;
+  visible?: boolean;
+}
+
+export interface MenuItemConfig extends BaseItem {
+  type: "item";
+  label: string;
+  onClick: () => void;
+  icon?: LucideIcon;
+  disabled?: boolean;
+  variant?: "default" | "destructive";
+}
+
+export interface ToggleItemConfig extends BaseItem {
+  type: "toggle";
+  label: string;
+  checked: boolean;
+  onChange: () => void;
+  icon?: LucideIcon;
+  disabled?: boolean;
+}
+
+export interface SubmenuItemConfig extends BaseItem {
+  type: "submenu";
+  label: string;
+  icon?: LucideIcon;
+  items: DropdownItemConfig[];
+  disabled?: boolean;
+}
+
+export interface SeparatorItemConfig extends BaseItem {
+  type: "separator";
+}
+
+export interface CustomItemConfig extends BaseItem {
+  type: "custom";
+  render: () => ReactNode;
+}
+
+export type DropdownItemConfig =
+  | MenuItemConfig
+  | ToggleItemConfig
+  | SubmenuItemConfig
+  | SeparatorItemConfig
+  | CustomItemConfig;
+
+type FalsyItem = false | null | undefined | "" | 0;
+
+export interface ADropdownMenuProps {
+  trigger?: ReactNode;
+  icon?: LucideIcon;
+  items: (DropdownItemConfig | FalsyItem)[];
+  align?: "start" | "center" | "end";
+  minWidth?: string;
+  className?: string;
+  tooltip?: string;
+}
+
+function filterVisibleItems(
+  items: (DropdownItemConfig | FalsyItem)[]
+): DropdownItemConfig[] {
+  return items.filter(
+    (item): item is DropdownItemConfig => !!item && item.visible !== false
+  );
+}
+
+// Renderers
+
+function ToggleItem({ item }: { item: ToggleItemConfig }) {
+  const Icon = item.icon;
+  return (
+    <div className="flex min-h-[32px] items-center justify-between px-2 py-1.5">
+      <div className="flex items-center gap-2">
+        {Icon && <Icon className="text-muted-foreground h-4 w-4" />}
+        <span className="text-sm">{item.label}</span>
+      </div>
+      <Switch
+        checked={item.checked}
+        onCheckedChange={item.onChange}
+        className="scale-75"
+        disabled={item.disabled}
+      />
+    </div>
+  );
+}
+
+function MenuItem({ item }: { item: MenuItemConfig }) {
+  const Icon = item.icon;
+  return (
+    <DropdownMenuItem
+      onClick={item.onClick}
+      disabled={item.disabled}
+      className={cn(
+        item.variant === "destructive" &&
+          "text-destructive focus:text-destructive"
+      )}
+    >
+      {Icon && <Icon className="mr-2 h-4 w-4" />}
+      {item.label}
+    </DropdownMenuItem>
+  );
+}
+
+function SubmenuItem({ item }: { item: SubmenuItemConfig }) {
+  const Icon = item.icon;
+  const visibleItems = filterVisibleItems(item.items);
+
+  if (visibleItems.length === 0) return null;
+
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger disabled={item.disabled}>
+        {Icon && <Icon className="mr-2 h-4 w-4" />}
+        {item.label}
+      </DropdownMenuSubTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuSubContent>
+          {visibleItems.map((subItem, index) => (
+            <DropdownItemRenderer
+              key={subItem.key ?? `sub-${index}`}
+              item={subItem}
+            />
+          ))}
+        </DropdownMenuSubContent>
+      </DropdownMenuPortal>
+    </DropdownMenuSub>
+  );
+}
+
+function DropdownItemRenderer({ item }: { item: DropdownItemConfig }) {
+  switch (item.type) {
+    case "item":
+      return <MenuItem item={item} />;
+    case "toggle":
+      return <ToggleItem item={item} />;
+    case "submenu":
+      return <SubmenuItem item={item} />;
+    case "separator":
+      return <DropdownMenuSeparator />;
+    case "custom":
+      return <>{item.render()}</>;
+    default:
+      return null;
+  }
+}
+
+// Main Component
+
+export function ADropdownMenu({
+  trigger,
+  icon: Icon,
+  items,
+  align = "end",
+  minWidth = "180px",
+  className,
+  tooltip,
+}: ADropdownMenuProps) {
+  const visibleItems = filterVisibleItems(items);
+
+  const resolvedTrigger =
+    trigger ??
+    (Icon ? (
+      <Button variant="ghost" size="icon-sm">
+        <Icon className="h-4 w-4" />
+      </Button>
+    ) : null);
+
+  const triggerElement = tooltip ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <DropdownMenuTrigger asChild>{resolvedTrigger}</DropdownMenuTrigger>
+      </TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </Tooltip>
+  ) : (
+    <DropdownMenuTrigger asChild>{resolvedTrigger}</DropdownMenuTrigger>
+  );
+
+  return (
+    <DropdownMenu>
+      {triggerElement}
+      <DropdownMenuContent
+        align={align}
+        className={className}
+        style={{ minWidth }}
+      >
+        {visibleItems.map((item, index) => (
+          <DropdownItemRenderer key={item.key ?? index} item={item} />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+// Factory Functions
+
+export function menuItem(
+  label: string,
+  onClick: () => void,
+  options?: Partial<Omit<MenuItemConfig, "type" | "label" | "onClick">>
+): MenuItemConfig {
+  return { type: "item", label, onClick, ...options };
+}
+
+export function toggleItem(
+  label: string,
+  checked: boolean,
+  onChange: () => void,
+  options?: Partial<
+    Omit<ToggleItemConfig, "type" | "label" | "checked" | "onChange">
+  >
+): ToggleItemConfig {
+  return { type: "toggle", label, checked, onChange, ...options };
+}
+
+export function submenuItem(
+  label: string,
+  items: DropdownItemConfig[],
+  options?: Partial<Omit<SubmenuItemConfig, "type" | "label" | "items">>
+): SubmenuItemConfig {
+  return { type: "submenu", label, items, ...options };
+}
+
+export function separator(
+  options?: Partial<Omit<SeparatorItemConfig, "type">>
+): SeparatorItemConfig {
+  return { type: "separator", ...options };
+}
+
+export function customItem(
+  render: () => ReactNode,
+  options?: Partial<Omit<CustomItemConfig, "type" | "render">>
+): CustomItemConfig {
+  return { type: "custom", render, ...options };
+}

package/components/a/AIconButton.tsx

@@ -0,0 +1,190 @@
+/**
+ * AIconButton - Icon button component for the design system
+ *
+ * A consistent icon button with optional tooltip, badge, and dot indicator support.
+ *
+ * @example
+ * ```tsx
+ * // Simple icon button
+ * <AIconButton icon={Settings} onClick={handleClick} />
+ *
+ * // With tooltip
+ * <AIconButton icon={MessageSquare} tooltip="Comments" onClick={handleClick} />
+ *
+ * // With badge (for notifications)
+ * <AIconButton icon={Bell} tooltip="Notifications" badge={5} onClick={handleClick} />
+ *
+ * // With dot indicator (for active state)
+ * <AIconButton icon={Share2} tooltip="Share" dot dotColor="blue" onClick={handleClick} />
+ *
+ * // Active/selected state
+ * <AIconButton icon={MessageSquare} active onClick={handleClick} />
+ * ```
+ */
+
+"use client";
+
+import { forwardRef } from "react";
+import type { LucideIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ATooltip } from "@/components/a/ATooltip";
+import { cn } from "@/lib/utils";
+
+export type AIconButtonSize = "sm" | "md" | "lg";
+export type AIconButtonHighlight =
+  | "blue"
+  | "green"
+  | "red"
+  | "orange"
+  | "purple";
+
+export interface AIconButtonProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> {
+  /** Lucide icon component */
+  icon: LucideIcon;
+  /** Optional tooltip text */
+  tooltip?: string;
+  /** Optional keyboard shortcut hint for tooltip */
+  shortcut?: string;
+  /** Tooltip position */
+  tooltipSide?: "top" | "right" | "bottom" | "left";
+  /** Optional badge count (shows red notification badge) */
+  badge?: number;
+  /** Show a small dot indicator */
+  dot?: boolean;
+  /** Dot color (default: "purple") */
+  dotColor?: AIconButtonHighlight;
+  /** Whether the button is in active/selected state */
+  active?: boolean;
+  /** Highlight color for the icon */
+  highlight?: AIconButtonHighlight;
+  /** Button size variant */
+  size?: AIconButtonSize;
+  /** Button variant */
+  variant?: "ghost" | "default" | "muted";
+  /** Additional className for the icon */
+  iconClassName?: string;
+  /** Additional className */
+  className?: string;
+  /** Accessible label (required if no tooltip) */
+  "aria-label"?: string;
+}
+
+const SIZE_CLASSES: Record<AIconButtonSize, { button: string; icon: string }> =
+  {
+    sm: { button: "h-7 w-7", icon: "h-3.5 w-3.5" },
+    md: { button: "h-8 w-8", icon: "h-4 w-4" },
+    lg: { button: "h-9 w-9", icon: "h-5 w-5" },
+  };
+
+const VARIANT_CLASSES = {
+  ghost: "bg-transparent hover:bg-muted/60",
+  default: "bg-primary text-primary-foreground hover:bg-primary/90",
+  muted: "bg-muted/40 hover:bg-muted/60",
+};
+
+const HIGHLIGHT_CLASSES: Record<AIconButtonHighlight, string> = {
+  blue: "text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300",
+  green:
+    "text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300",
+  red: "text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300",
+  orange:
+    "text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-300",
+  purple:
+    "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300",
+};
+
+const DOT_COLORS: Record<AIconButtonHighlight, string> = {
+  blue: "bg-blue-500 dark:bg-blue-400",
+  green: "bg-green-500 dark:bg-green-400",
+  red: "bg-red-500 dark:bg-red-400",
+  orange: "bg-orange-500 dark:bg-orange-400",
+  purple: "bg-purple-500 dark:bg-purple-400",
+};
+
+export const AIconButton = forwardRef<HTMLButtonElement, AIconButtonProps>(
+  (
+    {
+      icon: Icon,
+      tooltip,
+      shortcut,
+      tooltipSide = "bottom",
+      badge,
+      dot = false,
+      dotColor = "purple",
+      active = false,
+      highlight,
+      size = "md",
+      variant = "ghost",
+      iconClassName,
+      className,
+      disabled,
+      "aria-label": ariaLabel,
+      ...props
+    },
+    ref
+  ) => {
+    const sizeClasses = SIZE_CLASSES[size];
+
+    const button = (
+      <Button
+        ref={ref}
+        variant="ghost"
+        size="sm"
+        disabled={disabled}
+        aria-label={ariaLabel || tooltip}
+        className={cn(
+          "relative p-0",
+          sizeClasses.button,
+          active ? VARIANT_CLASSES.default : VARIANT_CLASSES[variant],
+          highlight && !active && HIGHLIGHT_CLASSES[highlight],
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        )}
+        {...props}
+      >
+        <Icon className={cn(sizeClasses.icon, iconClassName)} />
+
+        {/* Badge with count */}
+        {badge !== undefined && badge > 0 && (
+          <Badge
+            variant="destructive"
+            className="absolute -top-1 -right-1 h-4 min-w-4 px-1 text-[10px] font-medium"
+          >
+            {badge > 99 ? "99+" : badge}
+          </Badge>
+        )}
+
+        {/* Dot indicator */}
+        {dot && !badge && (
+          <div
+            className={cn(
+              "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full",
+              DOT_COLORS[dotColor]
+            )}
+          />
+        )}
+      </Button>
+    );
+
+    if (tooltip) {
+      return (
+        <ATooltip
+          content={tooltip}
+          shortcut={shortcut}
+          side={tooltipSide}
+          disabled={disabled}
+        >
+          {button}
+        </ATooltip>
+      );
+    }
+
+    return button;
+  }
+);
+
+AIconButton.displayName = "AIconButton";

package/components/a/ASheet.tsx

@@ -0,0 +1,150 @@
+/**
+ * ASheet - Design system Sheet component
+ *
+ * A slide-out panel that follows ClaudeDeck design guidelines:
+ * - No strong borders, uses subtle shadows instead
+ * - Consistent styling across the app
+ * - Wraps Radix Sheet primitive
+ */
+
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const ASheet = SheetPrimitive.Root;
+
+const ASheetTrigger = SheetPrimitive.Trigger;
+
+const ASheetClose = SheetPrimitive.Close;
+
+const ASheetPortal = SheetPrimitive.Portal;
+
+const ASheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+ASheetOverlay.displayName = "ASheetOverlay";
+
+const aSheetVariants = cva(
+  "fixed z-50 flex flex-col bg-background shadow-xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+);
+
+interface ASheetContentProps
+  extends
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof aSheetVariants> {
+  /** Hide the default close button */
+  hideCloseButton?: boolean;
+}
+
+const ASheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  ASheetContentProps
+>(
+  (
+    { side = "right", className, children, hideCloseButton = false, ...props },
+    ref
+  ) => (
+    <ASheetPortal>
+      <ASheetOverlay />
+      <SheetPrimitive.Content
+        ref={ref}
+        className={cn(aSheetVariants({ side }), className)}
+        {...props}
+      >
+        {children}
+        {!hideCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </ASheetPortal>
+  )
+);
+ASheetContent.displayName = "ASheetContent";
+
+const ASheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 p-4", className)} {...props} />
+);
+ASheetHeader.displayName = "ASheetHeader";
+
+const ASheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+ASheetFooter.displayName = "ASheetFooter";
+
+const ASheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-foreground text-base font-semibold", className)}
+    {...props}
+  />
+));
+ASheetTitle.displayName = "ASheetTitle";
+
+const ASheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+ASheetDescription.displayName = "ASheetDescription";
+
+export {
+  ASheet,
+  ASheetPortal,
+  ASheetOverlay,
+  ASheetTrigger,
+  ASheetClose,
+  ASheetContent,
+  ASheetHeader,
+  ASheetFooter,
+  ASheetTitle,
+  ASheetDescription,
+};

package/components/a/ATooltip.tsx

@@ -0,0 +1,77 @@
+/**
+ * ATooltip - Simple tooltip wrapper for the design system
+ *
+ * Wraps Radix tooltip primitives into a single, easy-to-use component.
+ *
+ * @example
+ * ```tsx
+ * <ATooltip content="Edit document">
+ *   <Button>Edit</Button>
+ * </ATooltip>
+ *
+ * // With shortcut hint
+ * <ATooltip content="Save" shortcut="Cmd+S">
+ *   <Button>Save</Button>
+ * </ATooltip>
+ * ```
+ */
+
+"use client";
+
+import { type ReactNode } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+export interface ATooltipProps {
+  /** The element that triggers the tooltip */
+  children: ReactNode;
+  /** Tooltip content - can be a string or ReactNode */
+  content: ReactNode;
+  /** Optional keyboard shortcut hint (e.g., "Cmd+S") */
+  shortcut?: string;
+  /** Side of the trigger to render the tooltip (default: "top") */
+  side?: "top" | "right" | "bottom" | "left";
+  /** Alignment of the tooltip relative to trigger (default: "center") */
+  align?: "start" | "center" | "end";
+  /** Delay in ms before showing tooltip (default: 300) */
+  delayDuration?: number;
+  /** Whether the tooltip is disabled */
+  disabled?: boolean;
+  /** Additional className for the tooltip content */
+  className?: string;
+}
+
+export function ATooltip({
+  children,
+  content,
+  shortcut,
+  side = "top",
+  align = "center",
+  delayDuration = 300,
+  disabled = false,
+  className,
+}: ATooltipProps) {
+  if (disabled || !content) {
+    return <>{children}</>;
+  }
+
+  return (
+    <Tooltip delayDuration={delayDuration}>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={side} align={align} className={cn(className)}>
+        <div className="flex items-center gap-2">
+          <span>{content}</span>
+          {shortcut && (
+            <kbd className="bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[10px] font-medium">
+              {shortcut}
+            </kbd>
+          )}
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+}