@brokenrubik/ui 0.0.0-stage → 0.1.1

package/src/components/field.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '../lib/utils.js';
+import { Label } from './label.js';
+
+/**
+ * Figma: Components · Base › Form Field (2083:229), code FormItem / FormLabel /
+ * FormDescription / FormMessage. Label (Body/Small Medium) · control · helper (Body/Small),
+ * 6 px apart. Not tied to a form library: pass `invalid` / `disabled` and wire the control
+ * with `aria-invalid` (the control turns its border red). FieldError replaces the helper.
+ *
+ *   <Field invalid={!!error}>
+ *     <FieldLabel htmlFor="name">Project name</FieldLabel>
+ *     <Input id="name" aria-invalid={!!error} aria-describedby="name-help" />
+ *     {error ? <FieldError id="name-help">{error}</FieldError>
+ *            : <FieldDescription id="name-help">Shown on the sidebar.</FieldDescription>}
+ *   </Field>
+ */
+function Field({
+  className,
+  invalid,
+  disabled,
+  ...props
+}: React.ComponentProps<'div'> & { invalid?: boolean; disabled?: boolean }) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-invalid={invalid || undefined}
+      data-disabled={disabled || undefined}
+      className={cn(
+        'group/field flex w-full flex-col gap-1.5 data-[disabled]:[&_[data-slot=input]]:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn('group-data-[disabled]/field:text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        'text-body-sm text-muted-foreground group-data-[invalid]/field:text-destructive-strong',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function FieldError({ className, children, ...props }: React.ComponentProps<'p'>) {
+  if (!children) return null;
+  return (
+    <p
+      data-slot="field-error"
+      role="alert"
+      className={cn('text-body-sm text-destructive-strong', className)}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}
+
+export { Field, FieldLabel, FieldDescription, FieldError };

package/src/components/input.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils.js';
+
+/**
+ * The shared look of text controls (Input, Select trigger, Date Picker, Textarea).
+ * Figma: 32 px, 6 px radius, `input` border (3:1), Shadow/xs, Body/Default; Focus = 1.5 px
+ * `ring` border; Disabled = 50 % opacity; Error = `destructive` border.
+ */
+const controlClassName =
+  'w-full min-w-0 rounded-md border border-input bg-background text-body text-foreground shadow-xs transition-[color,border-color,box-shadow] outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-[0.5px] focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20';
+
+type InputProps = React.ComponentProps<'input'> & {
+  /** An icon before the text (16 px, muted), as Figma's Input "Show icon". */
+  startIcon?: React.ReactNode;
+  /** Classes for the wrapper that holds the icon (only with startIcon). */
+  wrapperClassName?: string;
+};
+
+/** Figma: Components · Base › Input (2007:32). */
+function Input({ className, type, startIcon, wrapperClassName, ...props }: InputProps) {
+  const input = (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        controlClassName,
+        'h-8 px-2.5 py-1 file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-body file:font-medium',
+        startIcon && 'pl-[34px]',
+        className,
+      )}
+      {...props}
+    />
+  );
+  if (!startIcon) return input;
+  return (
+    <div data-slot="input-wrapper" className={cn('relative w-full', wrapperClassName)}>
+      <span
+        aria-hidden
+        className="pointer-events-none absolute inset-y-0 left-[11px] flex items-center text-muted-foreground [&_svg]:size-4"
+      >
+        {startIcon}
+      </span>
+      {input}
+    </div>
+  );
+}
+
+export { Input, controlClassName, type InputProps };

package/src/components/kbd.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils.js';
+
+/**
+ * Figma: Components · Base › Key Chip (2006:69), code `<Kbd>` (custom).
+ * highlight: the lime square of a space key (20 px / 5 px radius or 24 px / 6 px radius).
+ * muted: a keyboard hint or ID in Mono/Small on muted (20 px, 4 px radius).
+ */
+const kbdVariants = cva(
+  'inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap',
+  {
+    variants: {
+      variant: {
+        highlight: 'bg-highlight font-sans font-semibold tracking-[0.15px] text-highlight-foreground',
+        muted: 'h-5 min-w-5 rounded-xs bg-muted px-1.5 font-mono text-mono-sm text-muted-foreground',
+      },
+      size: {
+        20: '',
+        24: '',
+      },
+    },
+    compoundVariants: [
+      { variant: 'highlight', size: 20, className: 'size-5 rounded-sm text-[8.4px] leading-none' },
+      { variant: 'highlight', size: 24, className: 'size-6 rounded-md text-[10px] leading-none' },
+    ],
+    defaultVariants: { variant: 'muted', size: 20 },
+  },
+);
+
+function Kbd({
+  className,
+  variant = 'muted',
+  size = 20,
+  ...props
+}: React.ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      data-variant={variant}
+      className={cn(kbdVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, kbdVariants };

package/src/components/label.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import * as React from 'react';
+import { Label as LabelPrimitive } from 'radix-ui';
+
+import { cn } from '../lib/utils.js';
+
+/** Figma: Form Field label, Body/Small Medium. */
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex select-none items-center gap-2 text-body-sm font-medium text-foreground group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:text-muted-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/src/components/pagination.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+
+import { cn } from '../lib/utils.js';
+import { buttonVariants } from './button.js';
+
+/**
+ * Figma: Components · Base › Pagination (2085:245) and Pagination Item (2085:244).
+ * 32 px squares, 6 px radius, Body/Default; active = bordered on background + Medium.
+ * Items are links: pass href (or asChild with the router's Link).
+ */
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
+  return <ul data-slot="pagination-content" className={cn('flex items-center gap-1', className)} {...props} />;
+}
+
+function PaginationItem(props: React.ComponentProps<'li'>) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = { isActive?: boolean } & React.ComponentProps<'a'>;
+
+function PaginationLink({ className, isActive, ...props }: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({ variant: isActive ? 'outline' : 'ghost' }),
+        'size-8 rounded-md px-0 font-normal data-[active=true]:font-medium data-[active=true]:shadow-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function PaginationPrevious({ className, children = 'Previous', ...props }: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      className={cn('w-auto gap-1 px-2.5', className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span>{children}</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({ className, children = 'Next', ...props }: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink aria-label="Go to next page" className={cn('w-auto gap-1 px-2.5', className)} {...props}>
+      <span>{children}</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('flex size-8 items-center justify-center text-muted-foreground', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/src/components/popover.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import * as React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+
+import { cn } from '../lib/utils.js';
+
+/** Figma: Components · Base › Popover (2084:117). 300 px, 16 px padding, 8 px radius, Shadow/md. */
+function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverAnchor(props: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 flex w-[300px] origin-(--radix-popover-content-transform-origin) flex-col gap-3 rounded-lg border border-border bg-popover p-4 text-body text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]: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}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="popover-header" className={cn('flex flex-col gap-1', className)} {...props} />;
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return <h2 data-slot="popover-title" className={cn('text-card-title', className)} {...props} />;
+}
+
+function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p data-slot="popover-description" className={cn('text-body text-muted-foreground', className)} {...props} />
+  );
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+};

package/src/components/progress.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Progress as ProgressPrimitive } from 'radix-ui';
+
+import { resolveTone } from '../lib/tone.js';
+import { cn } from '../lib/utils.js';
+
+/** Figma: Components · Base › Progress (2085:210). 8 px muted track, full radius, toned bar. */
+const progressIndicatorVariants = cva('h-full w-full flex-1 rounded-full transition-transform', {
+  variants: {
+    tone: {
+      primary: 'bg-primary',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      destructive: 'bg-destructive',
+    },
+  },
+  defaultVariants: { tone: 'primary' },
+});
+
+type ProgressTone = NonNullable<VariantProps<typeof progressIndicatorVariants>['tone']>;
+
+type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root> & {
+  /** Figma "Tone". Default `primary`. */
+  tone?: ProgressTone | null;
+  /** Same as `tone` (shadcn-style name). */
+  variant?: ProgressTone | null;
+};
+
+function Progress({ className, value, tone: toneProp, variant, ...props }: ProgressProps) {
+  const tone = resolveTone(toneProp, variant, {}, 'primary');
+  const pct = Math.min(100, Math.max(0, value ?? 0));
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      value={value}
+      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-muted', className)}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        data-tone={tone}
+        className={progressIndicatorVariants({ tone })}
+        style={{ transform: `translateX(-${100 - pct}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+
+export { Progress, progressIndicatorVariants, type ProgressProps, type ProgressTone };

package/src/components/radio-group.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from 'react';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+
+import { cn } from '../lib/utils.js';
+
+/** Figma: Components · Base › Radio (2083:207). 16 px ring; checked = violet ring + 8 px dot. */
+function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'peer aspect-square size-4 shrink-0 rounded-full border border-input bg-background shadow-xs transition-[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',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex items-center justify-center"
+      >
+        <span className="size-2 rounded-full bg-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

package/src/components/select.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import * as React from 'react';
+import { Select as SelectPrimitive } from 'radix-ui';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+
+import { cn } from '../lib/utils.js';
+import { controlClassName } from './input.js';
+import { menuContentClassName, menuItemClassName } from './dropdown-menu.js';
+
+/**
+ * Figma: Components · Base › Select (2083:40). The trigger looks like Input (32 px,
+ * `input` border, ring on focus) with a muted chevron; the list is a Dropdown Menu panel.
+ */
+function Select(props: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup(props: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue(props: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & { size?: 'sm' | 'default' }) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        controlClassName,
+        "flex h-8 items-center justify-between gap-2 whitespace-nowrap px-2.5 data-[size=sm]:h-7 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-100" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  align = 'start',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          menuContentClassName,
+          'relative max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto',
+          position === 'popper' &&
+            'w-full min-w-(--radix-select-trigger-width) data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            position === 'popper' &&
+              'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('px-2 py-1.5 text-body-sm font-medium text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(menuItemClassName, 'w-full pr-8', className)}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4 !text-foreground" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn('flex cursor-default items-center justify-center py-1 text-muted-foreground', className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn('flex cursor-default items-center justify-center py-1 text-muted-foreground', className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/components/separator.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+
+import { cn } from '../lib/utils.js';
+
+/** Figma: Components · Base › Separator (2085:227). 1 px `border` line. */
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };