@sixthshift/design-system 0.7.0 → 0.9.0

package/src/components/ToggleGroup/ToggleGroupItem.tsx

@@ -1,8 +1,44 @@
 import { cn } from "@sixthshift/design-system/utils";
+import { cva } from "class-variance-authority";
 import * as React from "react";
-import { buttonRecipe } from "../Button/Button";
 import type { ToggleGroupBaseProps, ToggleGroupOption } from "./toggleGroup.types";
 
+/**
+ * An item's geometry. Duplicated from Button's on purpose — ToggleGroup is its
+ * own component and imports neither Button nor Toggle. Every colour reads a
+ * `--toggle-group-item-*` token from toggle-group.recipe.css.
+ */
+const itemVariants = cva(
+  // One literal, deliberately — see Button.tsx for the sorter trap.
+  "toggle-group-item border-(color:--toggle-group-item-border) focus-visible:ring-(color:--toggle-group-item-ring) inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md bg-(--toggle-group-item-bg) font-medium text-(--toggle-group-item-fg) text-sm transition-colors hover:bg-(--toggle-group-item-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-(--toggle-group-item-bg-pressed) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        xs: "h-7 rounded-md px-2 text-xs",
+        sm: "h-8 rounded-md px-3 text-xs",
+        md: "h-9 px-4 py-2",
+        lg: "h-10 rounded-md px-8",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+);
+
+/** The non-colour half of `variant` — border width and elevation. */
+const variantStructure: Record<string, string> = {
+  solid: "shadow",
+  outline: "border shadow-xs",
+  ghost: "",
+};
+
+/** Squares the item at whatever size is set, and drops the horizontal padding. */
+const iconOnlyGeometry: Record<string, string> = {
+  xs: "w-7 px-0",
+  sm: "w-8 px-0",
+  md: "w-9 px-0",
+  lg: "w-10 px-0",
+};
+
 type ItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   Required<Pick<ToggleGroupBaseProps, "appearance" | "orientation" | "variant" | "intent" | "size" | "iconOnly">> & {
     option: ToggleGroupOption;
@@ -20,24 +56,23 @@ const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ItemProps>(
     const isVertical = orientation === "vertical";
     const isSegmented = appearance === "segmented";
 
-    // Both modes share the same base: buttonVariants + the pressed-state cells
-    // in recipes/toggle.css. Segmented just overrides border/shadow/rounding
-    // so items join cleanly.
-    const recipe = buttonRecipe({ variant, intent, size, iconOnly });
-
+    // Both appearances share the same base and the pressed-state cells in
+    // toggle-group.recipe.css. Segmented just overrides the rounding so items
+    // join cleanly.
     return (
       <button
         ref={ref}
-        {...recipe}
+        data-variant={variant}
+        data-intent={intent}
         type="button"
-        // Same attribute Toggle renders for `pressed` — recipes/toggle.css
-        // selects on it, so selected/unselected items pick up the same cells.
+        // toggle-group.recipe.css selects the selected state on this.
         data-state={selected ? "on" : "off"}
         disabled={isDisabled}
         aria-label={option.ariaLabel}
         className={cn(
-          recipe.className,
-          // Segmented: only override rounding (let buttonVariants handle border/color).
+          variantStructure[variant],
+          itemVariants({ size, className: iconOnly ? iconOnlyGeometry[size] : undefined }),
+          // Segmented: only override rounding (the variant handles border/colour).
           // Negative margin collapses double borders between outline items.
           isSegmented &&
             (isVertical

package/src/components/ToggleGroup/index.ts

@@ -1,2 +1,10 @@
 export { ToggleGroup } from "./ToggleGroup";
-export type { ToggleGroupOption, ToggleGroupProps } from "./toggleGroup.types";
+export type {
+  ToggleGroupIntent,
+  ToggleGroupIntentName,
+  ToggleGroupOption,
+  ToggleGroupProps,
+  ToggleGroupSize,
+  ToggleGroupVariant,
+  ToggleGroupVariantName,
+} from "./toggleGroup.types";

package/src/components/ToggleGroup/toggle-group.recipe.css

@@ -0,0 +1,62 @@
+/**
+ * ToggleGroup recipe — the component-token layer for ToggleGroup's items.
+ *
+ * Its own `--toggle-group-item-*` tokens on its own `.toggle-group-item` hook.
+ * The cells start as copies of Toggle's, which start as copies of Button's —
+ * duplicated on purpose: each is a separate component, re-pointing one does
+ * not reach the others, and each is free to change alone.
+ *
+ * Every cell paints with the intent slots (src/theming/intents.css). The
+ * selected state is `[data-state="on"]`.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.recipe.css.
+ */
+
+@layer components {
+  /* The floor — a plain, legible item when no cell below matches. */
+  .toggle-group-item {
+    --toggle-group-item-bg: transparent;
+    --toggle-group-item-bg-hovered: var(--toggle-group-item-bg); /* no shift on hover */
+    --toggle-group-item-bg-pressed: var(--toggle-group-item-bg-hovered);
+    --toggle-group-item-fg: var(--fg-normal);
+    --toggle-group-item-border: var(--border-normal);
+    --toggle-group-item-ring: var(--focus-ring);
+  }
+
+  /* solid — a filled surface, with text read on top of it. */
+  .toggle-group-item[data-variant="solid"] {
+    --toggle-group-item-bg: var(--intent-solid-bg);
+    --toggle-group-item-bg-hovered: var(--intent-solid-bg-hovered);
+    --toggle-group-item-bg-pressed: var(--intent-solid-bg-pressed);
+    --toggle-group-item-fg: var(--intent-solid-fg);
+  }
+
+  /* outline and ghost share the family's text colour and its tint wash. */
+  .toggle-group-item[data-variant="outline"],
+  .toggle-group-item[data-variant="ghost"] {
+    --toggle-group-item-bg-hovered: var(--intent-tint-bg-hovered);
+    --toggle-group-item-bg-pressed: var(--intent-tint-bg-pressed);
+    --toggle-group-item-fg: var(--intent-fg);
+  }
+
+  /* outline alone carries a resting surface and a border. */
+  .toggle-group-item[data-variant="outline"] {
+    --toggle-group-item-bg: var(--bg-normal);
+    --toggle-group-item-border: var(--intent-border);
+  }
+
+  /* On. Every cell repeats its resting value into `-hovered`: a selected item
+     deliberately does not shift on hover. solid holds the fill's -pressed
+     step; outline and ghost hold the tint's, with its text partner. */
+  .toggle-group-item[data-state="on"][data-variant="solid"] {
+    --toggle-group-item-bg: var(--intent-solid-bg-pressed);
+    --toggle-group-item-bg-hovered: var(--intent-solid-bg-pressed);
+  }
+
+  .toggle-group-item[data-state="on"][data-variant="outline"],
+  .toggle-group-item[data-state="on"][data-variant="ghost"] {
+    --toggle-group-item-bg: var(--intent-tint-bg-pressed);
+    --toggle-group-item-bg-hovered: var(--intent-tint-bg-pressed);
+    --toggle-group-item-fg: var(--intent-tint-fg-pressed);
+  }
+}

package/src/components/ToggleGroup/toggleGroup.types.ts

@@ -1,9 +1,17 @@
 import type * as React from "react";
-import type { ButtonIntentName, ButtonVariantName } from "../Button/Button";
-import type { ToggleProps } from "../Toggle/Toggle";
 
-/** Extract a prop's union type from ToggleProps, stripping null added by CVA */
-type ToggleProp<K extends keyof ToggleProps> = NonNullable<ToggleProps[K]>;
+/**
+ * ToggleGroup's own axes. They match Toggle's and Button's, deliberately
+ * duplicated rather than imported: a group of toggle buttons is its own
+ * component, and importing it must not pull in either.
+ */
+type Loose<T extends string> = T | (string & {});
+export type ToggleGroupVariantName = "solid" | "outline" | "ghost";
+export type ToggleGroupIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
+export type ToggleGroupVariant = Loose<ToggleGroupVariantName>;
+export type ToggleGroupIntent = Loose<ToggleGroupIntentName>;
+/** `xl` is left out — too large for grouped toggles. */
+export type ToggleGroupSize = "xs" | "sm" | "md" | "lg";
 
 export type ToggleGroupOption = {
   /** Unique value for the option */
@@ -23,24 +31,18 @@ export type ToggleGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "o
   appearance?: "segmented" | "separate";
   /** Layout orientation */
   orientation?: "vertical" | "horizontal";
-  /**
-   * Button variant (link excluded as it has no clear pressed state in groups).
-   *
-   * Deliberately the closed union, not Button's widened `ButtonVariant`: an
-   * `Exclude` cannot remove `link` from a type that already admits any string,
-   * so narrowing here requires narrowing from the closed names.
-   */
-  variant?: Exclude<ButtonVariantName, "link">;
-  /** Color intent */
-  intent?: ButtonIntentName;
+  /** The items' treatment. */
+  variant?: ToggleGroupVariant;
+  /** Colour intent — widened, so a consumer-defined intent reaches the group. */
+  intent?: ToggleGroupIntent;
   /**
    * Name of a brand the theme defines. Rendered once, as `data-brand` on the
    * group element, so every item inherits it. Omitted, the group follows the
    * nearest `data-brand` ancestor.
    */
   brand?: string | undefined;
-  /** Button size (xl excluded — too large for grouped toggles) */
-  size?: Exclude<ToggleProp<"size">, "xl">;
+  /** Item size (xl excluded — too large for grouped toggles) */
+  size?: ToggleGroupSize;
   /** Square every item at the current size, for icon-only options */
   iconOnly?: boolean;
   /** Disable all options */

package/src/theme/linen/theme.css

@@ -1,12 +1,33 @@
 /*
  * Linen — the semantic layer (layer 1). This file is the theme.
  *
+ * What a theme defines, and so what any theme replacing this one must define:
+ *   - the radius scale, `--border-radius-{xs,sm,md,lg,xl}`, in a mode-free
+ *     `:root` block — miss a step and every corner on it renders square;
+ *   - the semantic colour tokens, the same names in both mode blocks.
+ * Everything else — recipes, intent slots, the Tailwind bridge — is
+ * theme-independent and comes from src/theming/tailwind.css.
+ *
  * Trade-off, accepted: the warm cast is a commitment. A consumer whose brand
  * fights the temperature replaces the neutral, not just the accent.
  */
 
 @import "./palette.css";
 
+/* Corner radius — five steps, `md` the middle and the default. Mode-free: a
+   corner is the same shape in light and dark. Tailwind's `rounded-*`
+   utilities read these (src/theming/tailwind.css), so a theme reshapes every
+   corner in the library here. The values are Tailwind's own, unchanged.
+   `rounded-none` and `rounded-full` are geometry, not steps, and are not
+   themed; `bun run check:radius` keeps component source on the scale. */
+:root {
+  --border-radius-xs: 0.125rem;
+  --border-radius-sm: 0.25rem;
+  --border-radius-md: 0.375rem;
+  --border-radius-lg: 0.5rem;
+  --border-radius-xl: 0.75rem;
+}
+
 :root:not([data-theme]),
 :root[data-theme="light"] {
   --bg-strong: var(--color-sand-800);

package/src/theming/intents.css

@@ -0,0 +1,112 @@
+/**
+ * Intent slots — each intent defined once, for every component.
+ *
+ * `intent` and `variant` are independent axes (docs/component-axes.md, rule 3),
+ * but a recipe that writes one cell per `(variant, intent)` pair couples them
+ * again: every component repeats the intent list, and adding an intent means
+ * editing every recipe. This layer sits between the semantic tokens and the
+ * recipes and breaks that product apart:
+ *
+ *   - here, each intent names its colour family once, as a fixed set of slots;
+ *   - in a recipe, each variant picks which slots it paints with.
+ *
+ * A new intent is one block below and every component picks it up. A new
+ * variant is one cell per component, and works in every intent.
+ *
+ * Slots are named for the treatment they serve, not for a weight:
+ *
+ *   --intent-solid-bg[-hovered|-pressed]   a filled surface in the family
+ *   --intent-solid-fg                      text read on that fill
+ *   --intent-tint-bg[-hovered|-pressed]    a light wash of the family
+ *   --intent-tint-fg[-pressed]             text read on that wash
+ *   --intent-fg                            the family's text on a resting surface
+ *   --intent-border                        the family's border
+ *
+ * The slots are declared on the element carrying `data-intent`, which every
+ * intent-bearing component renders on its own element. That matters twice over.
+ * A `var()` inside a custom property resolves on the element that declares it,
+ * so `--intent-solid-bg: var(--bg-brand)` sees that element's own `data-brand`
+ * mapping (see the Scoped brands docs). And each intent-bearing element resets
+ * the whole set, so a component never inherits its parent's intent — a
+ * neutral Badge inside a danger Message stays neutral.
+ *
+ * `@layer components`, like the recipes: a consumer's unlayered
+ * `[data-intent="info"] { … }` outranks everything here without `!important`.
+ */
+
+@layer components {
+  /* neutral — no colour family, the grey ramp. It is also the floor: this
+     selector matches any `data-intent`, so an intent a consumer has named but
+     not yet defined renders as neutral, legibly, rather than unstyled. The
+     `neutral` spelling is listed too so tooling can find it by name. */
+  [data-intent],
+  [data-intent="neutral"] {
+    --intent-solid-bg: var(--bg-strong);
+    --intent-solid-bg-hovered: var(--bg-strong-hovered);
+    --intent-solid-bg-pressed: var(--bg-strong-pressed);
+    --intent-solid-fg: var(--fg-on-strong);
+    --intent-tint-bg: var(--bg-subtle);
+    --intent-tint-bg-hovered: var(--bg-subtle-hovered);
+    --intent-tint-bg-pressed: var(--bg-subtle-pressed);
+    --intent-tint-fg: var(--fg-normal);
+    --intent-tint-fg-pressed: var(--fg-normal);
+    --intent-fg: var(--fg-normal);
+    --intent-border: var(--border-normal);
+  }
+
+  [data-intent="brand"] {
+    --intent-solid-bg: var(--bg-brand);
+    --intent-solid-bg-hovered: var(--bg-brand-hovered);
+    --intent-solid-bg-pressed: var(--bg-brand-pressed);
+    --intent-solid-fg: var(--fg-on-brand);
+    --intent-tint-bg: var(--bg-brand-subtle);
+    --intent-tint-bg-hovered: var(--bg-brand-subtle-hovered);
+    --intent-tint-bg-pressed: var(--bg-brand-subtle-pressed);
+    --intent-tint-fg: var(--fg-on-brand-subtle);
+    --intent-tint-fg-pressed: var(--fg-on-brand-subtle-pressed);
+    --intent-fg: var(--fg-brand);
+    --intent-border: var(--border-brand);
+  }
+
+  [data-intent="danger"] {
+    --intent-solid-bg: var(--bg-danger);
+    --intent-solid-bg-hovered: var(--bg-danger-hovered);
+    --intent-solid-bg-pressed: var(--bg-danger-pressed);
+    --intent-solid-fg: var(--fg-on-danger);
+    --intent-tint-bg: var(--bg-danger-subtle);
+    --intent-tint-bg-hovered: var(--bg-danger-subtle-hovered);
+    --intent-tint-bg-pressed: var(--bg-danger-subtle-pressed);
+    --intent-tint-fg: var(--fg-on-danger-subtle);
+    --intent-tint-fg-pressed: var(--fg-on-danger-subtle-pressed);
+    --intent-fg: var(--fg-danger);
+    --intent-border: var(--border-danger);
+  }
+
+  [data-intent="success"] {
+    --intent-solid-bg: var(--bg-success);
+    --intent-solid-bg-hovered: var(--bg-success-hovered);
+    --intent-solid-bg-pressed: var(--bg-success-pressed);
+    --intent-solid-fg: var(--fg-on-success);
+    --intent-tint-bg: var(--bg-success-subtle);
+    --intent-tint-bg-hovered: var(--bg-success-subtle-hovered);
+    --intent-tint-bg-pressed: var(--bg-success-subtle-pressed);
+    --intent-tint-fg: var(--fg-on-success-subtle);
+    --intent-tint-fg-pressed: var(--fg-on-success-subtle-pressed);
+    --intent-fg: var(--fg-success);
+    --intent-border: var(--border-success);
+  }
+
+  [data-intent="warning"] {
+    --intent-solid-bg: var(--bg-warning);
+    --intent-solid-bg-hovered: var(--bg-warning-hovered);
+    --intent-solid-bg-pressed: var(--bg-warning-pressed);
+    --intent-solid-fg: var(--fg-on-warning);
+    --intent-tint-bg: var(--bg-warning-subtle);
+    --intent-tint-bg-hovered: var(--bg-warning-subtle-hovered);
+    --intent-tint-bg-pressed: var(--bg-warning-subtle-pressed);
+    --intent-tint-fg: var(--fg-on-warning-subtle);
+    --intent-tint-fg-pressed: var(--fg-on-warning-subtle-pressed);
+    --intent-fg: var(--fg-warning);
+    --intent-border: var(--border-warning);
+  }
+}

package/src/theming/tailwind.css

@@ -3,7 +3,8 @@
  * folder does NOT contain. A theme imports its own theme.css plus this file,
  * and is complete:
  *
- *   - the component recipes (layer 2), imported first: every component's
+ *   - the intent slots (intents.css), then the component recipes (layer 2),
+ *     imported first: every component's
  *     `*.recipe.css`, each inside `@layer components`. Adding a component
  *     adds one import line here; `check:recipes` fails the build on a recipe
  *     nobody imports, or an import pointing at nothing.
@@ -23,12 +24,16 @@
 
 @layer theme, base, components, utilities, overrides;
 
+/* The intent slots every recipe paints with — one block per intent. */
+@import "./intents.css";
+
 @import "../components/Button/button.recipe.css";
 @import "../components/Badge/badge.recipe.css";
 @import "../components/Message/message.recipe.css";
 @import "../components/Spinner/spinner.recipe.css";
 @import "../components/Tabs/tabs.recipe.css";
 @import "../components/Toggle/toggle.recipe.css";
+@import "../components/ToggleGroup/toggle-group.recipe.css";
 @import "../components/Input/input.recipe.css";
 @import "../components/Textarea/textarea.recipe.css";
 @import "../components/SearchInput/search-input.recipe.css";
@@ -41,6 +46,12 @@
 @import "../components/Sheet/sheet.recipe.css";
 @import "../components/Select/select.recipe.css";
 @import "../components/TagChip/tag-chip.recipe.css";
+@import "../components/NumberStepper/number-stepper.recipe.css";
+@import "../components/Steps/steps.recipe.css";
+@import "../components/ImageGallery/image-gallery.recipe.css";
+@import "../components/DataTable/data-table.recipe.css";
+@import "../components/FileDropzone/file-dropzone.recipe.css";
+@import "../components/ProgressBar/progress-bar.recipe.css";
 
 /* =============================================================================
    3. TAILWIND THEME
@@ -57,6 +68,16 @@
   --color-white: #ffffff;
   --color-black: #000000;
 
+  /* Radius — the theme's five steps, and only those. Resetting Tailwind's own
+     scale first means `rounded-2xl` generates nothing instead of a corner no
+     theme can reach; `check:radius` turns that silence into a failure. */
+  --radius-*: initial;
+  --radius-xs: var(--border-radius-xs);
+  --radius-sm: var(--border-radius-sm);
+  --radius-md: var(--border-radius-md);
+  --radius-lg: var(--border-radius-lg);
+  --radius-xl: var(--border-radius-xl);
+
   /* Background */
   --color-bg-strong: var(--bg-strong);
   --color-bg-strong-hovered: var(--bg-strong-hovered);

package/src/typography/Code.tsx

@@ -3,6 +3,6 @@ import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
 
 export const Code = React.forwardRef<HTMLElement, TextProps>(({ className, ...props }, ref) => (
-  <Text ref={ref} as="code" className={cn("rounded bg-bg-subtle px-1.5 py-0.5 font-mono text-sm", className)} {...props} />
+  <Text ref={ref} as="code" className={cn("rounded-sm bg-bg-subtle px-1.5 py-0.5 font-mono text-sm", className)} {...props} />
 ));
 Code.displayName = "Code";