@brokenrubik/ui 0.0.0-stage → 0.1.0

package/src/components/sheet.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import * as React from 'react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '../lib/utils.js';
+import { closeButtonClassName, overlayClassName } from './dialog.js';
+
+/**
+ * Figma: Components · Base › Sheet (2084:161), code `<Sheet side="right">`. 400 px panel,
+ * 24 px padding, 16 px gap, border on the open side, Shadow/lg. Header like Dialog.
+ */
+function Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger(props: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose(props: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...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(overlayClassName, 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(
+          'fixed z-50 flex flex-col gap-4 overflow-y-auto bg-background p-6 text-body text-foreground shadow-lg outline-none transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=open]:duration-300',
+          side === 'right' &&
+            'inset-y-0 right-0 h-full w-full border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:w-[400px]',
+          side === 'left' &&
+            'inset-y-0 left-0 h-full w-full border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:w-[400px]',
+          side === 'top' &&
+            'inset-x-0 top-0 h-auto border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+          side === 'bottom' &&
+            'inset-x-0 bottom-0 h-auto border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" className={cn(closeButtonClassName, 'absolute top-6 right-6')}>
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="sheet-header" className={cn('flex flex-col gap-1.5 pr-9', className)} {...props} />;
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="sheet-footer" className={cn('mt-auto flex justify-end gap-2', className)} {...props} />
+  );
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return <SheetPrimitive.Title data-slot="sheet-title" className={cn('text-page-title', className)} {...props} />;
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-body text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/src/components/skeleton.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils.js';
+
+/** Figma: Components · Base › Skeleton (2085:214). Muted, 6 px radius (rounded-full for circles). */
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('animate-pulse rounded-md bg-muted motion-reduce:animate-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components/sonner.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import { Toaster as Sonner, toast, type ToasterProps } from 'sonner';
+import {
+  CircleAlertIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  TriangleAlertIcon,
+} from 'lucide-react';
+
+import { cn } from '../lib/utils.js';
+import { buttonVariants } from './button.js';
+
+/**
+ * Figma: Components · Base › Toast (2085:201), code `<Toaster>` (sonner). 360 px popover,
+ * 8 px radius, 12/12/12/16 px padding, Shadow/lg. Title Body/Default Medium, description
+ * Body/Small muted, action = small outline button. Success and error add a -strong icon.
+ *
+ * Mount <Toaster /> once. Call toast('Task moved', { description, action }) anywhere.
+ * `theme` follows the `.dark` class by default; pass theme="dark" | "light" to force it.
+ */
+function Toaster({ className, toastOptions, ...props }: ToasterProps) {
+  return (
+    <Sonner
+      className={cn('toaster group', className)}
+      icons={{
+        success: <CircleCheckIcon className="size-4 text-success-strong" />,
+        info: <InfoIcon className="size-4 text-primary-strong" />,
+        warning: <TriangleAlertIcon className="size-4 text-warning-strong" />,
+        error: <CircleAlertIcon className="size-4 text-destructive-strong" />,
+        loading: <Loader2Icon className="size-4 animate-spin text-muted-foreground" />,
+      }}
+      toastOptions={{
+        unstyled: true,
+        ...toastOptions,
+        classNames: {
+          toast:
+            'group/toast flex w-[var(--width)] items-center gap-3 rounded-lg border border-border bg-popover py-3 pr-3 pl-4 text-popover-foreground shadow-lg font-sans',
+          content: 'flex min-w-0 flex-1 flex-col gap-0.5',
+          title: 'text-body font-medium text-foreground',
+          description: 'text-body-sm text-muted-foreground',
+          icon: 'flex size-4 shrink-0 items-center justify-center',
+          actionButton: cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'shrink-0'),
+          cancelButton: cn(buttonVariants({ variant: 'ghost', size: 'sm' }), 'shrink-0'),
+          closeButton:
+            'absolute -top-2 -left-2 flex size-5 items-center justify-center rounded-full border border-border bg-popover text-muted-foreground hover:text-foreground',
+          ...toastOptions?.classNames,
+        },
+      }}
+      style={{ '--width': '360px' } as React.CSSProperties}
+      {...props}
+    />
+  );
+}
+
+export { Toaster, toast };

package/src/components/switch.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import * as React from 'react';
+import { Switch as SwitchPrimitive } from 'radix-ui';
+
+import { cn } from '../lib/utils.js';
+
+/** Figma: Components · Base › Switch (2007:47). 32×18 track (`input` off, `primary` on), 14 px thumb. */
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer inline-flex h-[18px] w-8 shrink-0 items-center rounded-full px-0.5 transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block size-3.5 rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/src/components/tabs.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import { Tabs as TabsPrimitive } from 'radix-ui';
+
+import { cn } from '../lib/utils.js';
+
+/**
+ * Figma: Components · Base › Tab (2007:42). Underline tabs: 40 px high, 10 px side
+ * padding; active = foreground + Medium + 2 px violet underline; inactive = muted.
+ * For segmented controls (List / Board) use ToggleGroup.
+ */
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-4', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn('flex items-center border-b border-border', className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative -mb-px inline-flex h-10 items-center justify-center gap-1.5 whitespace-nowrap px-2.5 text-body text-muted-foreground transition-colors outline-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-transparent hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-medium data-[state=active]:text-foreground data-[state=active]:after:bg-primary [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/textarea.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils.js';
+import { controlClassName } from './input.js';
+
+/** Figma: Components · Base › Textarea (2083:56). 80 px minimum, 8/10 px padding. */
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(controlClassName, 'field-sizing-content flex min-h-20 px-2.5 py-2', className)}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/components/toggle-group.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from 'react';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
+
+import { cn } from '../lib/utils.js';
+
+/**
+ * Figma: Components · Base › Toggle Group (2085:233) and Toggle Group Item (2085:232).
+ * A segmented control: 28 px muted track, 2 px padding; items 24 px, 5 px radius,
+ * Body/Small; "on" = background + Shadow/xs + Medium.
+ */
+function ToggleGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      className={cn('inline-flex h-7 w-fit items-center gap-0.5 rounded-md bg-muted p-0.5', className)}
+      {...props}
+    />
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item>) {
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      className={cn(
+        "inline-flex h-6 items-center justify-center gap-1.5 whitespace-nowrap rounded-sm px-2.5 text-body-sm text-muted-foreground transition-[color,background-color,box-shadow] outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-background data-[state=on]:font-medium data-[state=on]:text-foreground data-[state=on]:shadow-xs [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };

package/src/components/tooltip.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+
+import { cn } from '../lib/utils.js';
+
+/**
+ * Figma: Components · Base › Tooltip (2007:61). Inverted (foreground fill, background
+ * text), Body/Small, 4/8 px padding, 6 px radius, Shadow/md, no arrow.
+ * Put one <TooltipProvider> near the app root; <Tooltip> works without it too.
+ */
+function TooltipProvider({
+  delayDuration = 300,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
+
+function Tooltip(props: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger(props: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 6,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md border border-sidebar-border bg-foreground px-2 py-1 text-body-sm text-background shadow-md text-balance animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/index.ts

@@ -0,0 +1,35 @@
+// @brokenrubik/ui — every component. Per-component imports also work:
+//   import { Button } from '@brokenrubik/ui/components/button';
+export * from './lib/utils.js';
+export * from './components/accordion.js';
+export * from './components/alert.js';
+export * from './components/alert-dialog.js';
+export * from './components/avatar.js';
+export * from './components/badge.js';
+export * from './components/button.js';
+export * from './components/calendar.js';
+export * from './components/card.js';
+export * from './components/checkbox.js';
+export * from './components/command.js';
+export * from './components/date-picker.js';
+export * from './components/dialog.js';
+export * from './components/dropdown-menu.js';
+export * from './components/empty-state.js';
+export * from './components/field.js';
+export * from './components/input.js';
+export * from './components/kbd.js';
+export * from './components/label.js';
+export * from './components/pagination.js';
+export * from './components/popover.js';
+export * from './components/progress.js';
+export * from './components/radio-group.js';
+export * from './components/select.js';
+export * from './components/separator.js';
+export * from './components/sheet.js';
+export * from './components/skeleton.js';
+export * from './components/sonner.js';
+export * from './components/switch.js';
+export * from './components/tabs.js';
+export * from './components/textarea.js';
+export * from './components/toggle-group.js';
+export * from './components/tooltip.js';

package/src/lib/tone.ts

@@ -0,0 +1,16 @@
+/**
+ * `tone` and `variant` are two names for the same prop on Badge, Alert, Progress and
+ * AvatarFallback. `tone` is the Figma name; `variant` is the shadcn name, so shadcn code
+ * (`<Badge variant="secondary">`) works without edits. When both are set, `tone` wins.
+ * `aliases` maps shadcn-only values (`default`, `secondary`, `outline`) to a BR tone.
+ */
+export function resolveTone<T extends string>(
+  tone: T | null | undefined,
+  variant: string | null | undefined,
+  aliases: Readonly<Record<string, T>>,
+  fallback: T,
+): T {
+  if (tone) return tone;
+  if (!variant) return fallback;
+  return aliases[variant] ?? (variant as T);
+}

package/src/lib/utils.ts

@@ -0,0 +1,46 @@
+import { clsx, type ClassValue } from 'clsx';
+import { extendTailwindMerge, mergeConfigs, type ConfigExtension } from 'tailwind-merge';
+
+/**
+ * The BR text styles registered as `text-*` font sizes in theme.css. tailwind-merge must
+ * know them: by default it reads an unknown `text-foo` as a color, so `cn('text-body',
+ * 'text-muted-foreground')` would drop `text-body`.
+ */
+export const brTextSizes = [
+  'display',
+  'page-title',
+  'section',
+  'card-title',
+  'body-lg',
+  'body',
+  'body-sm',
+  'caption',
+  'overline',
+  'nav',
+  'nav-label',
+  'initials',
+  'initials-sm',
+  'mono',
+  'mono-sm',
+  'doc-title',
+  'doc-h2',
+  'doc-body',
+] as const;
+
+type MergeConfig = ConfigExtension<string, string>;
+
+/**
+ * Builds a `cn` for an app that adds its own scales on top of the BR theme (for example
+ * extra `text-*` sizes or `shadow-*` names), so tailwind-merge groups them right.
+ *
+ *   export const cn = createCn({ extend: { theme: { text: ['hero'] } } });
+ */
+export function createCn(config?: MergeConfig) {
+  const merge = extendTailwindMerge({ extend: { theme: { text: [...brTextSizes] } } }, (base) =>
+    config ? mergeConfigs(base, config) : base,
+  );
+  return (...inputs: ClassValue[]) => merge(clsx(inputs));
+}
+
+/** Joins class names and resolves Tailwind conflicts (the last class wins). */
+export const cn = createCn();

package/src/styles/base.css

@@ -0,0 +1,37 @@
+/*
+ * @brokenrubik/ui — base styles (optional). Page defaults from the BR Admin Library:
+ * Body/Default (13/20 IBM Plex Sans) on --background, slate borders, balanced headings.
+ * Skip this file if the app sets its own base; tokens.css and theme.css work without it.
+ */
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--color-border);
+    outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+  }
+
+  html {
+    font-family: var(--font-sans);
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  h1,
+  h2,
+  h3 {
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+}

package/src/styles/fonts.css

@@ -0,0 +1,16 @@
+/*
+ * @brokenrubik/ui — fonts: IBM Plex Sans 400/500/600 and IBM Plex Mono 400/500 (the weights
+ * the BR Admin Library uses). styles.css imports this file, so apps get the fonts with no
+ * extra setup. The font files come from the @fontsource packages (dependencies of this
+ * package); the app's bundler copies them. Each @font-face has a unicode-range, so the
+ * browser downloads only the subsets (latin, latin-ext…) that the page uses.
+ *
+ * The families are "IBM Plex Sans" and "IBM Plex Mono", the default of --font-sans and
+ * --font-mono in theme.css. An app that loads the fonts in a different way (next/font) can
+ * set --font-plex-sans / --font-plex-mono; these faces are then never downloaded.
+ */
+@import "@fontsource/ibm-plex-sans/400.css";
+@import "@fontsource/ibm-plex-sans/500.css";
+@import "@fontsource/ibm-plex-sans/600.css";
+@import "@fontsource/ibm-plex-mono/400.css";
+@import "@fontsource/ibm-plex-mono/500.css";

package/src/styles/styles.css

@@ -0,0 +1,14 @@
+/*
+ * @brokenrubik/ui — everything: fonts, tokens, Tailwind theme, animations, base styles.
+ *
+ *   @import "tailwindcss";
+ *   @import "@brokenrubik/ui/styles.css";
+ *
+ * Need less? Import the parts: fonts.css (IBM Plex), tokens.css (CSS variables only),
+ * theme.css (Tailwind mapping), base.css (page defaults). Components need tokens.css + theme.css + tw-animate-css.
+ */
+@import "./fonts.css";
+@import "tw-animate-css";
+@import "./tokens.css";
+@import "./theme.css";
+@import "./base.css";