@brokenrubik/ui 0.0.0-stage → 0.1.0

package/src/components/alert.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon } from 'lucide-react';
+
+import { resolveTone } from '../lib/tone.js';
+import { cn } from '../lib/utils.js';
+
+/**
+ * Figma: Components · Base › Alert (2085:172). 8 px radius, 12/16 px padding, 12 px gap,
+ * 16 px icon. info = bordered on background (violet icon, muted text); the states are a
+ * tint with the -strong shade for icon, title and text.
+ */
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[auto_1fr] items-start gap-x-3 gap-y-0.5 rounded-lg px-4 py-3 text-body [&>svg]:size-4",
+  {
+    variants: {
+      tone: {
+        info: 'border border-border bg-background text-foreground [&>svg]:text-primary-strong *:data-[slot=alert-description]:text-muted-foreground',
+        success: 'bg-success-tint text-success-strong',
+        warning: 'bg-warning-tint text-warning-strong',
+        destructive: 'bg-destructive-tint text-destructive-strong',
+      },
+    },
+    defaultVariants: { tone: 'info' },
+  },
+);
+
+const defaultIcons = {
+  info: InfoIcon,
+  success: CircleCheckIcon,
+  warning: TriangleAlertIcon,
+  destructive: CircleAlertIcon,
+} as const;
+
+type AlertTone = NonNullable<VariantProps<typeof alertVariants>['tone']>;
+
+type AlertProps = React.ComponentProps<'div'> & {
+  /** Figma "Tone". Default `info`. */
+  tone?: AlertTone | null;
+  /** shadcn name for `tone`. Also accepts `default` (→ `info`). */
+  variant?: AlertTone | 'default' | null;
+  /** The icon. Default: the tone's lucide icon from Figma. `null` = no icon. */
+  icon?: React.ReactNode;
+};
+
+function Alert({ className, tone: toneProp, variant, icon, children, ...props }: AlertProps) {
+  const tone = resolveTone(toneProp, variant, { default: 'info' }, 'info');
+  const DefaultIcon = defaultIcons[tone];
+  const shown = icon === undefined ? <DefaultIcon aria-hidden /> : icon;
+  return (
+    <div
+      data-slot="alert"
+      data-tone={tone}
+      role="alert"
+      className={cn(alertVariants({ tone }), !shown && 'grid-cols-1', className)}
+      {...props}
+    >
+      {shown}
+      {children}
+    </div>
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn('col-start-2 font-medium in-[[data-slot=alert].grid-cols-1]:col-start-1', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'col-start-2 text-body-sm in-[[data-slot=alert].grid-cols-1]:col-start-1 [&_p]:leading-relaxed',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, alertVariants, type AlertProps, type AlertTone };

package/src/components/avatar.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+
+import { resolveTone } from '../lib/tone.js';
+import { cn } from '../lib/utils.js';
+
+/**
+ * Figma: Components · Base › Avatar (2006:62). 20 or 28 px, full radius. Initials use a
+ * soft tint per person with the -strong shade, never a solid saturated fill.
+ */
+const avatarVariants = cva('group/avatar relative flex shrink-0 overflow-hidden rounded-full', {
+  variants: {
+    size: {
+      20: 'size-5',
+      28: 'size-7',
+    },
+  },
+  defaultVariants: { size: 28 },
+});
+
+const avatarFallbackVariants = cva(
+  'flex size-full items-center justify-center rounded-full text-initials group-data-[size=20]/avatar:text-initials-sm',
+  {
+    variants: {
+      tone: {
+        purple: 'bg-primary-tint text-primary-strong',
+        amber: 'bg-warning-tint text-warning-strong',
+        red: 'bg-destructive-tint text-destructive-strong',
+        emerald: 'bg-success-tint text-success-strong',
+        coral: 'bg-secondary text-secondary-foreground',
+        slate: 'bg-secondary text-secondary-foreground',
+      },
+    },
+    defaultVariants: { tone: 'slate' },
+  },
+);
+
+type AvatarTone = NonNullable<VariantProps<typeof avatarFallbackVariants>['tone']>;
+
+const avatarTones: readonly AvatarTone[] = ['purple', 'amber', 'red', 'emerald', 'coral', 'slate'];
+
+/** A stable tone for a person (same name → same tint), for lists without a stored tone. */
+function avatarToneFor(key: string): AvatarTone {
+  let hash = 0;
+  for (let i = 0; i < key.length; i++) hash = (hash * 31 + key.charCodeAt(i)) | 0;
+  return avatarTones[Math.abs(hash) % avatarTones.length] ?? 'slate';
+}
+
+function Avatar({
+  className,
+  size = 28,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(avatarVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full object-cover', className)}
+      {...props}
+    />
+  );
+}
+
+type AvatarFallbackProps = React.ComponentProps<typeof AvatarPrimitive.Fallback> & {
+  /** Figma "Tone". Default `slate`. `avatarToneFor(name)` picks a stable one per person. */
+  tone?: AvatarTone | null;
+  /** Same as `tone` (shadcn-style name). */
+  variant?: AvatarTone | null;
+};
+
+function AvatarFallback({ className, tone: toneProp, variant, ...props }: AvatarFallbackProps) {
+  const tone = resolveTone(toneProp, variant, {}, 'slate');
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      data-tone={tone}
+      className={cn(avatarFallbackVariants({ tone }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  avatarVariants,
+  avatarFallbackVariants,
+  avatarToneFor,
+  type AvatarTone,
+  type AvatarFallbackProps,
+};

package/src/components/badge.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+
+import { resolveTone } from '../lib/tone.js';
+import { cn } from '../lib/utils.js';
+
+/**
+ * Figma: Components · Base › Badge (2006:37). 20 px high, 6 px radius, Label/Caption
+ * Medium. Every tone is a soft tint with the -strong text shade ("one color, one job").
+ * Only status fields get a tone: categorical tags (country, owner…) stay neutral.
+ */
+const badgeVariants = cva(
+  'inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md px-2 py-0.5 text-caption font-medium [&>svg]:pointer-events-none [&>svg]:size-3',
+  {
+    variants: {
+      tone: {
+        neutral: 'bg-muted text-muted-foreground',
+        primary: 'bg-primary-tint text-primary-strong',
+        success: 'bg-success-tint text-success-strong',
+        warning: 'bg-warning-tint text-warning-strong',
+        destructive: 'bg-destructive-tint text-destructive-strong',
+        highlight: 'bg-highlight text-highlight-foreground',
+        info: 'bg-info-tint text-info-strong',
+      },
+    },
+    defaultVariants: {
+      tone: 'neutral',
+    },
+  },
+);
+
+type BadgeTone = NonNullable<VariantProps<typeof badgeVariants>['tone']>;
+
+/** shadcn Badge variants that have no BR tone of the same name. */
+const badgeVariantAliases: Record<string, BadgeTone> = {
+  default: 'neutral',
+  secondary: 'neutral',
+  outline: 'neutral',
+};
+
+type BadgeProps = React.ComponentProps<'span'> & {
+  /** Figma "Tone". Default `neutral`. */
+  tone?: BadgeTone | null;
+  /** shadcn name for `tone`. Also accepts `default`, `secondary`, `outline` (→ `neutral`). */
+  variant?: BadgeTone | 'default' | 'secondary' | 'outline' | null;
+  asChild?: boolean;
+};
+
+function Badge({ className, tone, variant, asChild = false, ...props }: BadgeProps) {
+  const Comp = asChild ? Slot.Root : 'span';
+  const resolved = resolveTone(tone, variant, badgeVariantAliases, 'neutral');
+  return (
+    <Comp
+      data-slot="badge"
+      data-tone={resolved}
+      className={cn(badgeVariants({ tone: resolved }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants, type BadgeProps, type BadgeTone };

package/src/components/button.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+
+import { cn } from '../lib/utils.js';
+
+/**
+ * Figma: Components · Base › Button (2005:49) and Icon Button (2006:24).
+ * md 32 px / sm 28 px high, 8 px radius (radius/lg), Body/Default Medium (md) or
+ * Body/Small Medium (sm). Icon buttons are 28 / 24 px with 6 px radius (radius/md).
+ */
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-lg font-medium transition-[color,background-color,border-color,box-shadow] outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        outline:
+          'border border-border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent',
+        ghost:
+          'text-foreground hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/30',
+        link: 'text-primary-strong underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-8 gap-1.5 px-3 text-body',
+        sm: "h-7 gap-1 px-2.5 text-body-sm [&_svg:not([class*='size-'])]:size-3.5",
+        icon: 'size-7 rounded-md',
+        'icon-sm': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3.5",
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+type ButtonProps = React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    /** Render the child element (a link, for example) with the button styles. */
+    asChild?: boolean;
+  };
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  type,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot.Root : 'button';
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      type={asChild ? type : (type ?? 'button')}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants, type ButtonProps };

package/src/components/calendar.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import * as React from 'react';
+import { DayPicker, getDefaultClassNames, type DayButton } from 'react-day-picker';
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+
+import { cn } from '../lib/utils.js';
+import { buttonVariants } from './button.js';
+
+/**
+ * Figma: Components · Base › Calendar (2083:95) and Calendar Day (2083:94).
+ * 12 px padding; header 28 px with bordered 28 px prev/next (6 px radius) and the month
+ * in Body/Default Medium; weekdays Label/Caption muted; days 32 px, 6 px radius:
+ * today = muted + Medium, selected = primary + Medium, outside = muted text, disabled = 50 %.
+ * No border or shadow of its own: inside a Popover (DatePicker) or a Card it gets them.
+ */
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  const d = getDefaultClassNames();
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      captionLayout={captionLayout}
+      className={cn('group/calendar bg-transparent p-3 [--cell-size:32px]', className)}
+      classNames={{
+        root: cn('w-fit', d.root),
+        months: cn('relative flex flex-col gap-4 sm:flex-row', d.months),
+        month: cn('flex w-full flex-col gap-2', d.month),
+        nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', d.nav),
+        button_previous: cn(
+          buttonVariants({ variant: 'outline', size: 'icon' }),
+          'size-7 select-none shadow-none aria-disabled:opacity-50',
+          d.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: 'outline', size: 'icon' }),
+          'size-7 select-none shadow-none aria-disabled:opacity-50',
+          d.button_next,
+        ),
+        month_caption: cn('flex h-7 w-full items-center justify-center px-8', d.month_caption),
+        dropdowns: cn('flex h-7 w-full items-center justify-center gap-1.5 text-body font-medium', d.dropdowns),
+        dropdown_root: cn('relative rounded-md border border-input shadow-xs has-focus:border-ring', d.dropdown_root),
+        dropdown: cn('absolute inset-0 bg-popover opacity-0', d.dropdown),
+        caption_label: cn(
+          'select-none text-body font-medium',
+          captionLayout !== 'label' &&
+            'flex h-7 items-center gap-1 rounded-md pr-1 pl-2 [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
+          d.caption_label,
+        ),
+        month_grid: 'w-full border-collapse',
+        weekdays: cn('flex pb-1.5', d.weekdays),
+        weekday: cn(
+          'flex h-6 w-(--cell-size) items-center justify-center text-caption font-normal text-muted-foreground select-none',
+          d.weekday,
+        ),
+        week: cn('flex w-full pt-0.5', d.week),
+        week_number_header: cn('w-(--cell-size) select-none', d.week_number_header),
+        week_number: cn('text-caption text-muted-foreground select-none', d.week_number),
+        day: cn('relative size-(--cell-size) p-0 text-center select-none', d.day),
+        range_start: cn('rounded-l-md bg-muted', d.range_start),
+        range_middle: cn('rounded-none', d.range_middle),
+        range_end: cn('rounded-r-md bg-muted', d.range_end),
+        today: cn(d.today),
+        outside: cn('text-muted-foreground', d.outside),
+        disabled: cn('text-muted-foreground opacity-50', d.disabled),
+        hidden: cn('invisible', d.hidden),
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ className: chevronClassName, orientation, ...chevronProps }) => {
+          const Icon =
+            orientation === 'left'
+              ? ChevronLeftIcon
+              : orientation === 'right'
+                ? ChevronRightIcon
+                : ChevronDownIcon;
+          return <Icon className={cn('size-4', chevronClassName)} {...chevronProps} />;
+        },
+        DayButton: CalendarDayButton,
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  const selectedSingle =
+    modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle;
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      data-day={day.date.toLocaleDateString()}
+      data-today={modifiers.today || undefined}
+      data-selected-single={selectedSingle || undefined}
+      data-range-start={modifiers.range_start || undefined}
+      data-range-end={modifiers.range_end || undefined}
+      data-range-middle={modifiers.range_middle || undefined}
+      className={cn(
+        'inline-flex size-(--cell-size) items-center justify-center rounded-md text-body text-inherit transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-3 focus-visible:ring-ring/40 disabled:pointer-events-none',
+        'data-[today=true]:bg-muted data-[today=true]:font-medium',
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:font-medium data-[selected-single=true]:text-primary-foreground',
+        'data-[range-start=true]:bg-primary data-[range-start=true]:font-medium data-[range-start=true]:text-primary-foreground',
+        'data-[range-end=true]:bg-primary data-[range-end=true]:font-medium data-[range-end=true]:text-primary-foreground',
+        'data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

package/src/components/card.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils.js';
+
+/**
+ * Figma: Components · Base › Card (2008:30). "Cards are flat: 8px radius, slate-200
+ * border, no shadow." 16 px padding; title (Heading/Card) and description (Body/Default,
+ * muted) 4 px apart.
+ */
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'flex flex-col gap-4 rounded-lg border border-border bg-card p-4 text-card-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        'grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 has-data-[slot=card-action]:grid-cols-[1fr_auto]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="card-title" className={cn('text-card-title text-foreground', className)} {...props} />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-body text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-content" className={cn(className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="card-footer" className={cn('flex items-center gap-2', className)} {...props} />
+  );
+}
+
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

package/src/components/checkbox.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import { CheckIcon, MinusIcon } from 'lucide-react';
+
+import { cn } from '../lib/utils.js';
+
+/** Figma: Components · Base › Checkbox (2008:29). 16 px, 4 px radius, `input` border. */
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer size-4 shrink-0 rounded-xs border border-input bg-background shadow-xs transition-[background-color,border-color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="group/indicator flex items-center justify-center text-current"
+      >
+        <CheckIcon className="size-3 group-data-[state=indeterminate]/indicator:hidden" strokeWidth={3} />
+        <MinusIcon className="hidden size-3 group-data-[state=indeterminate]/indicator:block" strokeWidth={3} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };