raft-ui 0.0.1

package/src/index.ts

@@ -0,0 +1,404 @@
+export { Button, buttonVariants } from "./components/button/index.ts";
+export type { ButtonProps } from "./components/button/index.ts";
+
+export { Checkbox } from "./components/checkbox/index.ts";
+export type { CheckboxProps } from "./components/checkbox/index.ts";
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuCheckboxItemIndicator,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuRadioItemIndicator,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSubmenu,
+  ContextMenuSubmenuTrigger,
+  ContextMenuTrigger,
+} from "./components/context-menu/index.ts";
+export type {
+  ContextMenuCheckboxItemIndicatorProps,
+  ContextMenuCheckboxItemProps,
+  ContextMenuContentProps,
+  ContextMenuItemProps,
+  ContextMenuLabelProps,
+  ContextMenuPortalProps,
+  ContextMenuProps,
+  ContextMenuRadioGroupProps,
+  ContextMenuRadioItemIndicatorProps,
+  ContextMenuRadioItemProps,
+  ContextMenuSeparatorProps,
+  ContextMenuShortcutProps,
+  ContextMenuSubmenuProps,
+  ContextMenuSubmenuTriggerProps,
+  ContextMenuTriggerProps,
+} from "./components/context-menu/index.ts";
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuCheckboxItemIndicator,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemCount,
+  DropdownMenuLabel,
+  DropdownMenuPopup,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuRadioItemIndicator,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSubmenu,
+  DropdownMenuSubmenuTrigger,
+  DropdownMenuTrigger,
+} from "./components/dropdown-menu/index.ts";
+export type {
+  DropdownMenuCheckboxItemIndicatorProps,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuContentProps,
+  DropdownMenuItemCountProps,
+  DropdownMenuItemProps,
+  DropdownMenuLabelProps,
+  DropdownMenuPopupProps,
+  DropdownMenuPortalProps,
+  DropdownMenuProps,
+  DropdownMenuRadioGroupProps,
+  DropdownMenuRadioItemIndicatorProps,
+  DropdownMenuRadioItemProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuShortcutProps,
+  DropdownMenuSubmenuProps,
+  DropdownMenuSubmenuTriggerProps,
+  DropdownMenuTriggerProps,
+} from "./components/dropdown-menu/index.ts";
+
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./components/tooltip/index.ts";
+export type {
+  TooltipContentProps,
+  TooltipPortalProps,
+  TooltipProps,
+  TooltipProviderProps,
+  TooltipTriggerProps,
+} from "./components/tooltip/index.ts";
+
+export {
+  Popover,
+  PopoverArrow,
+  PopoverBackdrop,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverSeparator,
+  PopoverTitle,
+  PopoverTrigger,
+  PopoverViewport,
+} from "./components/popover/index.ts";
+export type {
+  PopoverArrowProps,
+  PopoverBackdropProps,
+  PopoverCloseProps,
+  PopoverContentProps,
+  PopoverDescriptionProps,
+  PopoverHeaderProps,
+  PopoverPopupProps,
+  PopoverPortalProps,
+  PopoverProps,
+  PopoverSeparatorProps,
+  PopoverTitleProps,
+  PopoverTriggerProps,
+  PopoverViewportProps,
+} from "./components/popover/index.ts";
+
+export { Label, LabelAsterisk, LabelOptional, LabelSub } from "./components/label/index.ts";
+export type {
+  LabelAsteriskProps,
+  LabelOptionalProps,
+  LabelProps,
+  LabelSubProps,
+} from "./components/label/index.ts";
+
+export { Input } from "./components/input/index.ts";
+export type { InputProps } from "./components/input/index.ts";
+
+export { InputGroup, InputGroupAddon, InputGroupInput } from "./components/input-group/index.ts";
+export type {
+  InputGroupAddonProps,
+  InputGroupAddonTextProps,
+  InputGroupInputProps,
+  InputGroupProps,
+} from "./components/input-group/index.ts";
+
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChipRemove,
+  ComboboxChips,
+  ComboboxClear,
+  ComboboxCollection,
+  ComboboxControl,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxHeader,
+  ComboboxInput,
+  ComboboxInputGroup,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxPortal,
+  ComboboxRow,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxTriggerIndicator,
+  ComboboxValue,
+} from "./components/combobox/index.ts";
+export type {
+  ComboboxChipProps,
+  ComboboxChipRemoveProps,
+  ComboboxChipsProps,
+  ComboboxClearProps,
+  ComboboxCollectionProps,
+  ComboboxControlProps,
+  ComboboxContentProps,
+  ComboboxEmptyProps,
+  ComboboxGroupLabelProps,
+  ComboboxGroupProps,
+  ComboboxHeaderProps,
+  ComboboxInputGroupProps,
+  ComboboxInputProps,
+  ComboboxItemIndicatorProps,
+  ComboboxItemProps,
+  ComboboxLabelProps,
+  ComboboxListProps,
+  ComboboxPopupProps,
+  ComboboxPortalProps,
+  ComboboxProps,
+  ComboboxRowProps,
+  ComboboxSeparatorProps,
+  ComboboxTriggerIndicatorProps,
+  ComboboxTriggerProps,
+  ComboboxValueProps,
+} from "./components/combobox/index.ts";
+
+export {
+  Select,
+  SelectArrow,
+  SelectContent,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectScrollDownArrow,
+  SelectScrollUpArrow,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./components/select/index.ts";
+export type {
+  SelectArrowProps,
+  SelectContentProps,
+  SelectGroupLabelProps,
+  SelectGroupProps,
+  SelectIconProps,
+  SelectItemIndicatorProps,
+  SelectItemProps,
+  SelectItemTextProps,
+  SelectLabelProps,
+  SelectListProps,
+  SelectPopupProps,
+  SelectPortalProps,
+  SelectProps,
+  SelectScrollDownArrowProps,
+  SelectScrollUpArrowProps,
+  SelectSeparatorProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from "./components/select/index.ts";
+
+export { RadioGroup, RadioGroupIndicator, RadioGroupItem } from "./components/radio-group/index.ts";
+export type {
+  RadioGroupIndicatorProps,
+  RadioGroupItemProps,
+  RadioGroupProps,
+} from "./components/radio-group/index.ts";
+
+export {
+  SegmentedControl,
+  SegmentedControlCount,
+  SegmentedControlItem,
+  SegmentedControlLabel,
+} from "./components/segmented-control/index.ts";
+export type {
+  SegmentedControlCountProps,
+  SegmentedControlItemProps,
+  SegmentedControlLabelProps,
+  SegmentedControlProps,
+} from "./components/segmented-control/index.ts";
+
+export { Textarea, TextareaCounter, TextareaGroup } from "./components/textarea/index.ts";
+export type {
+  TextareaCounterProps,
+  TextareaGroupProps,
+  TextareaProps,
+} from "./components/textarea/index.ts";
+
+export { Badge } from "./components/badge/index.ts";
+export type { BadgeProps } from "./components/badge/index.ts";
+
+export {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+  type AvatarSize,
+} from "./components/avatar/index.ts";
+export type {
+  AvatarBadgeProps,
+  AvatarFallbackProps,
+  AvatarGroupCountProps,
+  AvatarGroupProps,
+  AvatarImageProps,
+  AvatarProps,
+} from "./components/avatar/index.ts";
+
+export { InlineCode } from "./components/inline-code/index.ts";
+export type { InlineCodeProps } from "./components/inline-code/index.ts";
+
+export { Kbd, KbdGroup } from "./components/kbd/index.ts";
+export type { KbdGroupProps, KbdProps } from "./components/kbd/index.ts";
+
+export { Status } from "./components/status/index.ts";
+export type { StatusProps } from "./components/status/index.ts";
+
+export { Spinner } from "./components/spinner/index.ts";
+export type { SpinnerProps } from "./components/spinner/index.ts";
+
+export { Banner, BannerAction, BannerDescription, BannerTitle } from "./components/banner/index.ts";
+export type {
+  BannerActionProps,
+  BannerDescriptionProps,
+  BannerProps,
+  BannerStatus,
+  BannerTitleProps,
+} from "./components/banner/index.ts";
+
+export {
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateContent,
+  EmptyStateDescription,
+  EmptyStateIcon,
+  EmptyStateTitle,
+} from "./components/empty-state/index.ts";
+export type {
+  EmptyStateActionsProps,
+  EmptyStateContentProps,
+  EmptyStateDescriptionProps,
+  EmptyStateIconProps,
+  EmptyStateProps,
+  EmptyStateTitleProps,
+} from "./components/empty-state/index.ts";
+
+export {
+  NotificationCenter,
+  NotificationCenterActionButton,
+  NotificationCenterCount,
+  NotificationCenterEmptyState,
+  NotificationCenterHeader,
+  NotificationCenterItem,
+  NotificationCenterItemActions,
+  NotificationCenterItemBody,
+  NotificationCenterItemContent,
+  NotificationCenterItemIcon,
+  NotificationCenterItemRow,
+  NotificationCenterItemTitle,
+  NotificationCenterList,
+  NotificationCenterPopup,
+  NotificationCenterScroller,
+  NotificationCenterTitle,
+  NotificationCenterTrigger,
+} from "./components/notification-center/index.ts";
+export type {
+  NotificationCenterActionButtonProps,
+  NotificationCenterCountProps,
+  NotificationCenterEmptyStateProps,
+  NotificationCenterHeaderProps,
+  NotificationCenterItemActionsProps,
+  NotificationCenterItemBodyProps,
+  NotificationCenterItemContentProps,
+  NotificationCenterItemIconProps,
+  NotificationCenterItemProps,
+  NotificationCenterItemRowProps,
+  NotificationCenterItemTitleProps,
+  NotificationCenterListProps,
+  NotificationCenterPopupProps,
+  NotificationCenterPortalProps,
+  NotificationCenterProps,
+  NotificationCenterScrollerProps,
+  NotificationCenterTitleProps,
+  NotificationCenterTriggerProps,
+} from "./components/notification-center/index.ts";
+
+export {
+  SortableTabsList,
+  SortableTabsTab,
+  Tabs,
+  TabsBackground,
+  TabsIndicator,
+  TabsLabel,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+  useOrderedTabs,
+} from "./components/tabs/index.ts";
+export type {
+  OrderedTabItem,
+  SortableTabsListProps,
+  SortableTabsTabProps,
+  TabsBackgroundProps,
+  TabsIndicatorProps,
+  TabsLabelProps,
+  TabsListProps,
+  TabsPanelProps,
+  TabsProps,
+  TabsTabProps,
+} from "./components/tabs/index.ts";
+
+export { cn } from "./lib/cn.ts";
+export { ThemeProvider } from "./lib/theme/theme-provider.tsx";
+export type { ThemeProviderProps } from "./lib/theme/theme-provider.tsx";
+export { useTheme, useThemeFamily } from "./lib/theme/use-theme.ts";
+export type {
+  ResolvedThemeMode,
+  SetTheme,
+  SetThemeOptions,
+  Theme,
+  ThemeMode,
+  ThemeState,
+} from "./lib/theme/theme-context.ts";

package/src/legacy/AttentionDot.tsx

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "react";
+
+type SpanPassthroughProps = HTMLAttributes<HTMLSpanElement> &
+  Record<`data-${string}`, string | undefined>;
+
+export interface AttentionDotProps extends Omit<SpanPassthroughProps, "children"> {
+  size?: "sm" | "lg";
+  tone?: string;
+}
+
+const SIZE_CLASS: Record<NonNullable<AttentionDotProps["size"]>, string> = {
+  sm: "size-1",
+  lg: "size-2.5",
+};
+
+export default function AttentionDot({
+  size = "lg",
+  tone = "bg-brutal-pink",
+  className,
+  ...rest
+}: AttentionDotProps) {
+  return (
+    <span
+      {...rest}
+      className={`inline-block shrink-0 rounded-full border border-black ${SIZE_CLASS[size]} ${tone} ${className ?? ""}`}
+    />
+  );
+}

package/src/legacy/AvatarListRow.tsx

@@ -0,0 +1,87 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import SurfaceListItem from "./SurfaceListItem.tsx";
+
+export interface AvatarListRowProps {
+  avatar: ReactNode;
+  name: ReactNode;
+  subtitle?: ReactNode;
+  rightContent?: ReactNode;
+  onClick?: () => void;
+  selected?: boolean;
+  align?: "start" | "center";
+  actionContent?: ReactNode;
+  className?: string;
+  buttonProps?: HTMLAttributes<HTMLButtonElement> & Record<`data-${string}`, string | undefined>;
+}
+
+export default function AvatarListRow({
+  avatar,
+  name,
+  subtitle,
+  rightContent,
+  onClick,
+  selected = false,
+  align = "center",
+  actionContent,
+  className = "",
+  buttonProps,
+}: AvatarListRowProps) {
+  const interactive = onClick !== undefined;
+  const itemsAlignClass = align === "start" ? "items-start" : "items-center";
+  const textColumn = (
+    <div className="min-w-0 flex-1">
+      {align === "start" ? (
+        <div className="flex min-w-0 flex-col gap-1">
+          <span className="truncate text-sm font-bold text-black">{name}</span>
+          {subtitle != null && subtitle !== false && (
+            <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs font-mono text-black/50">
+              {subtitle}
+            </span>
+          )}
+        </div>
+      ) : (
+        <div className="flex min-w-0 flex-wrap items-baseline gap-x-2">
+          <span className="truncate text-sm font-bold text-black">{name}</span>
+          {subtitle != null && subtitle !== false && (
+            <span className="text-xs font-mono text-black/50">{subtitle}</span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+  const body = (
+    <>
+      {avatar}
+      {textColumn}
+      {rightContent != null && rightContent !== false && (
+        <div className="flex shrink-0 self-center items-center gap-1.5">{rightContent}</div>
+      )}
+    </>
+  );
+  const hasAction = actionContent != null && actionContent !== false;
+  return (
+    <SurfaceListItem
+      selected={selected}
+      interactive={interactive}
+      className={`group px-3 py-2 ${className}`}
+    >
+      <div className={`flex w-full min-w-0 gap-3 ${itemsAlignClass}`}>
+        {interactive ? (
+          <button
+            {...buttonProps}
+            type="button"
+            onClick={onClick}
+            className={`flex min-w-0 flex-1 gap-3 text-left ${itemsAlignClass}`}
+          >
+            {body}
+          </button>
+        ) : (
+          <div className={`flex min-w-0 flex-1 gap-3 ${itemsAlignClass}`}>{body}</div>
+        )}
+        {hasAction && (
+          <div className="flex shrink-0 self-center items-center gap-1.5">{actionContent}</div>
+        )}
+      </div>
+    </SurfaceListItem>
+  );
+}

package/src/legacy/AvatarSlot.tsx

@@ -0,0 +1,157 @@
+import { User } from "lucide-react";
+
+export type AvatarContext =
+  | "profile-tile"
+  | "account-tile"
+  | "mention-card"
+  | "panel-header"
+  | "surface-list"
+  | "members-row"
+  | "creator-link"
+  | "sidebar-list"
+  | "compact-list"
+  | "preview-mini";
+
+type ContextSpec = {
+  size: string;
+  border: string;
+  agentPixel: number;
+  gravatarSize: number;
+  gravatarIcon: number;
+  placeholderIcon: number;
+};
+
+const SPEC: Record<AvatarContext, ContextSpec> = {
+  "profile-tile": {
+    size: "size-16",
+    border: "border-2",
+    agentPixel: 60,
+    gravatarSize: 60,
+    gravatarIcon: 32,
+    placeholderIcon: 32,
+  },
+  "account-tile": {
+    size: "size-14",
+    border: "border-2",
+    agentPixel: 52,
+    gravatarSize: 52,
+    gravatarIcon: 24,
+    placeholderIcon: 24,
+  },
+  "mention-card": {
+    size: "size-12",
+    border: "border-2",
+    agentPixel: 44,
+    gravatarSize: 44,
+    gravatarIcon: 24,
+    placeholderIcon: 24,
+  },
+  "panel-header": {
+    size: "size-9",
+    border: "border-2",
+    agentPixel: 32,
+    gravatarSize: 32,
+    gravatarIcon: 16,
+    placeholderIcon: 18,
+  },
+  "surface-list": {
+    size: "size-8",
+    border: "border-2",
+    agentPixel: 28,
+    gravatarSize: 28,
+    gravatarIcon: 16,
+    placeholderIcon: 16,
+  },
+  "members-row": {
+    size: "size-7",
+    border: "border",
+    agentPixel: 26,
+    gravatarSize: 24,
+    gravatarIcon: 14,
+    placeholderIcon: 14,
+  },
+  "creator-link": {
+    size: "size-[22px]",
+    border: "border",
+    agentPixel: 20,
+    gravatarSize: 20,
+    gravatarIcon: 12,
+    placeholderIcon: 12,
+  },
+  "sidebar-list": {
+    size: "size-[18px]",
+    border: "border",
+    agentPixel: 16,
+    gravatarSize: 16,
+    gravatarIcon: 10,
+    placeholderIcon: 10,
+  },
+  "compact-list": {
+    size: "size-5",
+    border: "border",
+    agentPixel: 18,
+    gravatarSize: 18,
+    gravatarIcon: 12,
+    placeholderIcon: 12,
+  },
+  "preview-mini": {
+    size: "size-[14px]",
+    border: "border",
+    agentPixel: 14,
+    gravatarSize: 14,
+    gravatarIcon: 10,
+    placeholderIcon: 10,
+  },
+};
+
+export type AvatarSlotProps = {
+  context: AvatarContext;
+  type: "agent" | "human";
+  agentAvatarUrl?: string | null;
+  gravatarHash?: string | null;
+  humanAvatarUrl?: string | null;
+  email?: string | null;
+  humanPlaceholder?: boolean;
+  className?: string;
+};
+
+export default function AvatarSlot({
+  context,
+  type,
+  agentAvatarUrl,
+  humanAvatarUrl,
+  humanPlaceholder,
+  className = "",
+}: AvatarSlotProps) {
+  const spec = SPEC[context];
+  const fallbackBg = type === "agent" ? "bg-brutal-cyan" : "bg-brutal-lavender";
+  const baseClass = `flex shrink-0 items-center justify-center overflow-hidden ${spec.size} ${spec.border} border-black ${fallbackBg}`;
+
+  if (type === "agent") {
+    return (
+      <div className={`${baseClass} ${className}`.trim()}>
+        {agentAvatarUrl ? (
+          <img src={agentAvatarUrl} alt="Agent avatar" className="h-full w-full object-cover" />
+        ) : (
+          <User size={spec.placeholderIcon} />
+        )}
+      </div>
+    );
+  }
+
+  const humanBase = `${baseClass} text-black`;
+
+  if (humanAvatarUrl && !humanPlaceholder) {
+    return (
+      <div className={`${humanBase} ${className}`.trim()}>
+        <img src={humanAvatarUrl} alt="" className="h-full w-full object-cover" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`${humanBase} ${className}`.trim()}>
+      <User size={humanPlaceholder ? spec.placeholderIcon : spec.gravatarIcon} />
+    </div>
+  );
+}