learning_ai_notes/web/src/components/ui/Primitives.tsx

import {
  Badge as BytelystBadge,
  Button as BytelystButton,
  Card as BytelystCard,
  Checkbox,
  DataList as BytelystDataList,
  DataListItem as BytelystDataListItem,
  DataListMeta,
  DataTable,
  DataTableBody,
  DataTableCell,
  DataTableHead,
  DataTableHeader,
  DataTableRow,
  DiffCard as BytelystDiffCard,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
  EmptyState as BytelystEmptyState,
  IconButton as BytelystIconButton,
  Input as BytelystInput,
  Label as BytelystLabel,
  ListItemButton as BytelystListItemButton,
  LoadingSpinner as BytelystLoadingSpinner,
  Panel as BytelystPanel,
  PanelBody as BytelystPanelBody,
  PanelDescription as BytelystPanelDescription,
  PanelHeader as BytelystPanelHeader,
  PanelTitle as BytelystPanelTitle,
  RadioGroup,
  RadioGroupItem,
  SegmentedControl,
  Select as BytelystSelect,
  StatusBadge as BytelystStatusBadge,
  Surface as BytelystSurface,
  SurfaceList as BytelystSurfaceList,
  SurfaceListItem as BytelystSurfaceListItem,
  Switch,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
  Textarea as BytelystTextarea,
  Timeline as BytelystTimeline,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  type BadgeProps,
  type ButtonProps,
  type CardProps,
  type DataListItemProps,
  type DataListProps,
  type DiffCardProps,
  type EmptyStateProps,
  type IconButtonProps,
  type InputProps,
  type LabelProps,
  type ListItemButtonProps,
  type LoadingSpinnerProps,
  type PanelBodyProps,
  type PanelDescriptionProps,
  type PanelHeaderProps,
  type PanelProps,
  type PanelTitleProps,
  type SelectProps,
  type StatusBadgeProps,
  type StatusTone,
  type SurfaceListItemProps,
  type SurfaceListProps,
  type SurfaceProps,
  type TextareaProps,
  type TimelineProps,
} from "@bytelyst/ui";

function mergeClassNames(...classes: Array<string | undefined>) {
  return classes.filter(Boolean).join(" ");
}

export {
  Checkbox,
  DataListMeta,
  DataTable,
  DataTableBody,
  DataTableCell,
  DataTableHead,
  DataTableHeader,
  DataTableRow,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
  RadioGroup,
  RadioGroupItem,
  SegmentedControl,
  Switch,
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
};

export type NoteLettStatus =
  | "applied"
  | "approved"
  | "archived"
  | "draft"
  | "error"
  | "failed"
  | "pending"
  | "proposed"
  | "published"
  | "rejected"
  | "review";

const statusToneMap: Record<NoteLettStatus, StatusTone> = {
  applied: "success",
  approved: "success",
  archived: "neutral",
  draft: "neutral",
  error: "danger",
  failed: "danger",
  pending: "warning",
  proposed: "info",
  published: "success",
  rejected: "danger",
  review: "accent",
};

export function getStatusTone(status: NoteLettStatus): StatusTone {
  return statusToneMap[status];
}

export function Button({ className, ...props }: ButtonProps) {
  return (
    <BytelystButton
      className={mergeClassNames("rounded-[var(--nl-radius-sm)]", className)}
      {...props}
    />
  );
}

export function Badge({ className, ...props }: BadgeProps) {
  return <BytelystBadge className={className} {...props} />;
}

export function Card({ className, ...props }: CardProps) {
  return (
    <BytelystCard
      className={mergeClassNames(
        "rounded-[var(--nl-radius-md)] shadow-[var(--nl-elevation-md)]",
        className,
      )}
      {...props}
    />
  );
}

export function Panel({ className, ...props }: PanelProps) {
  return (
    <BytelystPanel
      className={mergeClassNames(
        "rounded-[var(--nl-radius-md)] shadow-[var(--nl-elevation-md)]",
        className,
      )}
      {...props}
    />
  );
}

export function PanelHeader({ className, ...props }: PanelHeaderProps) {
  return <BytelystPanelHeader className={mergeClassNames("gap-[var(--nl-space-3)]", className)} {...props} />;
}

export function PanelBody({ className, ...props }: PanelBodyProps) {
  return <BytelystPanelBody className={mergeClassNames("gap-[var(--nl-space-3)]", className)} {...props} />;
}

export function PanelTitle({ className, ...props }: PanelTitleProps) {
  return <BytelystPanelTitle className={className} {...props} />;
}

export function PanelDescription({ className, ...props }: PanelDescriptionProps) {
  return <BytelystPanelDescription className={className} {...props} />;
}

export function IconButton({ className, ...props }: IconButtonProps) {
  return <BytelystIconButton className={mergeClassNames("rounded-[var(--nl-radius-sm)]", className)} {...props} />;
}

export function ListItemButton({ className, ...props }: ListItemButtonProps) {
  return (
    <BytelystListItemButton
      className={mergeClassNames(
        "rounded-[var(--nl-radius-sm)]",
        className,
      )}
      {...props}
    />
  );
}

export interface NoteLettStatusBadgeProps extends StatusBadgeProps {
  status?: NoteLettStatus;
}

export function StatusBadge({ className, status, tone, ...props }: NoteLettStatusBadgeProps) {
  return <BytelystStatusBadge className={className} tone={tone ?? (status ? getStatusTone(status) : undefined)} {...props} />;
}

export function Input({ className, ...props }: InputProps) {
  return (
    <BytelystInput
      className={mergeClassNames(
        "rounded-[var(--nl-radius-sm)]",
        className,
      )}
      {...props}
    />
  );
}

export function Textarea({ className, ...props }: TextareaProps) {
  return (
    <BytelystTextarea
      className={mergeClassNames(
        "rounded-[var(--nl-radius-sm)]",
        className,
      )}
      {...props}
    />
  );
}

export function Select({ className, ...props }: SelectProps) {
  return (
    <BytelystSelect
      className={mergeClassNames(
        "rounded-[var(--nl-radius-sm)]",
        className,
      )}
      {...props}
    />
  );
}

export function Label({ className, ...props }: LabelProps) {
  return <BytelystLabel className={className} {...props} />;
}

export function Timeline({ className, ...props }: TimelineProps) {
  return <BytelystTimeline className={mergeClassNames("gap-[var(--nl-space-3)]", className)} {...props} />;
}

export function DiffCard({ className, ...props }: DiffCardProps) {
  return <BytelystDiffCard className={mergeClassNames("gap-[var(--nl-space-3)]", className)} {...props} />;
}

export function Surface({ className, padding = "md", ...props }: SurfaceProps) {
  return (
    <BytelystSurface
      padding={padding}
      className={mergeClassNames("rounded-[var(--nl-radius-md)]", className)}
      {...props}
    />
  );
}

export function SurfaceList({ density = "normal", className, ...props }: SurfaceListProps) {
  return <BytelystSurfaceList density={density} className={mergeClassNames("gap-[var(--nl-space-3)]", className)} {...props} />;
}

export function SurfaceListItem({ className, ...props }: SurfaceListItemProps) {
  return <BytelystSurfaceListItem className={mergeClassNames("rounded-[var(--nl-radius-sm)]", className)} {...props} />;
}

export function DataList({ density = "normal", className, ...props }: DataListProps) {
  return <BytelystDataList density={density} className={mergeClassNames("gap-[var(--nl-space-3)]", className)} {...props} />;
}

export function DataListItem({ className, ...props }: DataListItemProps) {
  return <BytelystDataListItem className={mergeClassNames("rounded-[var(--nl-radius-sm)]", className)} {...props} />;
}

export const OperationalList = DataList;
export const OperationalListItem = DataListItem;

export function EmptyState({ className, ...props }: EmptyStateProps) {
  return <BytelystEmptyState className={mergeClassNames("rounded-[var(--nl-radius-md)]", className)} {...props} />;
}

export function LoadingSpinner({ className, ...props }: LoadingSpinnerProps) {
  return <BytelystLoadingSpinner className={className} {...props} />;
}