@sixthshift/design-system 0.6.0 → 0.8.0

package/src/components/Steps/index.ts

@@ -0,0 +1 @@
+export { type StepItem, type StepState, Steps, type StepsOrientation, type StepsProps, stepsVariants } from "./Steps";

package/src/components/Steps/steps.recipe.css

@@ -0,0 +1,51 @@
+/**
+ * Steps recipe — the component-token layer for Steps.
+ *
+ * One axis, and it is not `intent`: a step's colour says where it sits in the
+ * sequence, which the component renders as `data-state` on each item
+ * (`complete`, `current`, `upcoming`). Same shape as tabs.css keying its
+ * selected cell on `data-selected` rather than a variant.
+ *
+ * The grammar is `--steps-[{part}-]{context}[-{state}]`. Parts are the
+ * `indicator` (the numbered circle), the `connector` (the rule to the next
+ * step), and the `label`/`description` text. `-hovered` on the indicator only
+ * ever applies to a completed step with `onStepClick`, the one clickable case.
+ *
+ * The connector belongs to the step it leaves, so a completed step's
+ * connector takes the brand colour: the line fills up to the current step.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.css.
+ */
+
+@layer components {
+  /* The floor, and also the upcoming look: an outlined, quiet step. An item
+     with a state a consumer added but did not style renders like this. */
+  .steps-item {
+    --steps-indicator-bg: var(--bg-normal);
+    --steps-indicator-bg-hovered: var(--steps-indicator-bg);
+    --steps-indicator-fg: var(--fg-subtle);
+    --steps-indicator-border: var(--border-normal);
+    --steps-connector-bg: var(--border-normal);
+    --steps-label-fg: var(--fg-subtle);
+    --steps-description-fg: var(--fg-subtle);
+    --steps-ring: var(--focus-ring);
+  }
+
+  /* current — outlined in brand, the label at full strength. */
+  .steps-item[data-state="current"] {
+    --steps-indicator-bg: var(--bg-brand-subtle);
+    --steps-indicator-fg: var(--fg-on-brand-subtle);
+    --steps-indicator-border: var(--border-brand);
+    --steps-label-fg: var(--fg-normal);
+  }
+
+  /* complete — a filled brand disc with the check reversed out. */
+  .steps-item[data-state="complete"] {
+    --steps-indicator-bg: var(--bg-brand);
+    --steps-indicator-bg-hovered: var(--bg-brand-hovered);
+    --steps-indicator-fg: var(--fg-on-brand);
+    --steps-indicator-border: var(--steps-indicator-bg);
+    --steps-connector-bg: var(--border-brand);
+    --steps-label-fg: var(--fg-normal);
+  }
+}

package/src/components/TimePicker/TimePicker.tsx

@@ -8,6 +8,7 @@ import * as React from "react";
 import { useCallback, useId, useMemo, useState } from "react";
 import { fromISOTime, fromISOTimeOrUndefined, type Temporal, toISOTimeOrUndefined } from "../../date-time";
 import { PickerField } from "../../internal";
+import { closestBrand } from "../../internal/brandScope";
 import { useEscapeLayer } from "../../internal/escapeLayers";
 import { Button } from "../Button";
 import { Separator } from "../Separator";
@@ -354,6 +355,8 @@ export const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>((pro
             role="dialog"
             aria-label="Choose time"
             style={floatingStyles}
+            // Portalled out of the trigger's brand scope, so carry it across.
+            data-brand={closestBrand(context.elements.domReference)}
             className="z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg"
             {...getFloatingProps()}
           >

package/src/components/Toast/Toast.tsx

@@ -68,7 +68,7 @@ export type ToastProps = Omit<MessageProps, "size"> & {
  * a dialog.
  */
 export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
-  ({ className, intent = "neutral", title, icon, action, onAction, onClose, root, open = true, standalone = true, children, ...props }, ref) => {
+  ({ className, intent = "neutral", brand, title, icon, action, onAction, onClose, root, open = true, standalone = true, children, ...props }, ref) => {
     const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
 
     // `open` drives presence: enter on mount, exit when it flips false. The
@@ -118,6 +118,10 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
           isExiting && "animate-fade-out",
           className
         )}
+        // On the wrapper rather than the Message, so the dismiss and action
+        // buttons are in the same scope. A toast has no trigger to inherit
+        // from: it is opened from code, often long after the click.
+        data-brand={brand}
         {...props}
       >
         <Message intent={intent}>

package/src/components/Toggle/Toggle.tsx

@@ -15,6 +15,8 @@ export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "o
   VariantProps<typeof buttonVariants> & {
     variant?: ButtonVariant | undefined;
     intent?: ButtonIntent | undefined;
+    /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the toggle follows the nearest `data-brand` ancestor. */
+    brand?: string | undefined;
     /** Square the toggle at its current size, for an icon with no label. */
     iconOnly?: boolean;
     /** Controlled pressed state */
@@ -43,7 +45,20 @@ export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "o
  */
 const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
   (
-    { className, variant, intent, size, iconOnly = false, pressed: controlledPressed, defaultPressed = false, onPressedChange, disabled, children, ...props },
+    {
+      className,
+      variant,
+      intent,
+      brand,
+      size,
+      iconOnly = false,
+      pressed: controlledPressed,
+      defaultPressed = false,
+      onPressedChange,
+      disabled,
+      children,
+      ...props
+    },
     ref
   ) => {
     const [pressed, setPressed] = useControllableState({
@@ -52,7 +67,7 @@ const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
       onChange: onPressedChange,
     });
 
-    const recipe = buttonRecipe({ variant, intent, size, iconOnly });
+    const recipe = buttonRecipe({ variant, intent, brand, size, iconOnly });
 
     return (
       <button

package/src/components/ToggleGroup/ToggleGroupMultiple.tsx

@@ -17,6 +17,7 @@ const ToggleGroupMultiple = React.forwardRef<HTMLDivElement, ToggleGroupMultiple
       orientation = "horizontal",
       variant = "solid",
       intent = "neutral",
+      brand,
       size = "md",
       iconOnly = false,
       disabled,
@@ -39,7 +40,7 @@ const ToggleGroupMultiple = React.forwardRef<HTMLDivElement, ToggleGroupMultiple
     };
 
     return (
-      <ToggleGroupContainer ref={ref} role="group" appearance={appearance} orientation={orientation} className={className} {...props}>
+      <ToggleGroupContainer ref={ref} role="group" data-brand={brand} appearance={appearance} orientation={orientation} className={className} {...props}>
         {options.map((option, index) => (
           <ToggleGroupItem
             key={option.value}

package/src/components/ToggleGroup/ToggleGroupSingle.tsx

@@ -19,6 +19,7 @@ const ToggleGroupSingle = React.forwardRef<HTMLDivElement, ToggleGroupSingleProp
       orientation = "horizontal",
       variant = "solid",
       intent = "neutral",
+      brand,
       size = "md",
       iconOnly = false,
       disabled,
@@ -76,6 +77,7 @@ const ToggleGroupSingle = React.forwardRef<HTMLDivElement, ToggleGroupSingleProp
       <ToggleGroupContainer
         ref={mergedRef}
         role="radiogroup"
+        data-brand={brand}
         onKeyDown={handleKeyDown}
         appearance={appearance}
         orientation={orientation}

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

@@ -33,6 +33,12 @@ export type ToggleGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "o
   variant?: Exclude<ButtonVariantName, "link">;
   /** Color intent */
   intent?: ButtonIntentName;
+  /**
+   * 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">;
   /** Square every item at the current size, for icon-only options */

package/src/components/Tooltip/Tooltip.tsx

@@ -2,6 +2,7 @@
 
 import { autoUpdate, flip, offset, type Placement, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
+import { closestBrand } from "../../internal/brandScope";
 import { TooltipBody } from "./components/TooltipBody";
 import { TooltipContext } from "./components/TooltipContext";
 import { TooltipTrigger } from "./components/TooltipTrigger";
@@ -55,6 +56,8 @@ const TooltipRoot = ({ open: controlledOpen, onOpenChange, placement = "top", de
       setFloating: refs.setFloating,
     },
     floatingStyles,
+    // Read at render: `domReference` is state, so this updates once the trigger mounts.
+    inheritedBrand: closestBrand(context.elements.domReference),
     getReferenceProps,
     getFloatingProps,
   };

package/src/components/Tooltip/components/TooltipBody.tsx

@@ -5,10 +5,17 @@ import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
 import { useTooltipContext } from "./TooltipContext";
 
-export type TooltipBodyProps = React.HTMLAttributes<HTMLDivElement>;
+export type TooltipBodyProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * Name of a brand the theme defines, rendered as `data-brand`. Omitted, the
+   * body copies the brand scope of its trigger, which the portal would
+   * otherwise leave behind.
+   */
+  brand?: string | undefined;
+};
 
-export const TooltipBody = React.forwardRef<HTMLDivElement, TooltipBodyProps>(({ className, children, ...props }, forwardedRef) => {
-  const { open, refs, floatingStyles, getFloatingProps } = useTooltipContext();
+export const TooltipBody = React.forwardRef<HTMLDivElement, TooltipBodyProps>(({ className, brand, children, ...props }, forwardedRef) => {
+  const { open, refs, floatingStyles, inheritedBrand, getFloatingProps } = useTooltipContext();
 
   if (!open) return null;
 
@@ -21,6 +28,7 @@ export const TooltipBody = React.forwardRef<HTMLDivElement, TooltipBodyProps>(({
           else if (forwardedRef) forwardedRef.current = node;
         }}
         style={floatingStyles}
+        data-brand={brand ?? inheritedBrand}
         className={cn("z-popover rounded-lg border border-border-normal bg-bg-normal px-2.5 py-1.5 text-fg-normal text-xs shadow-lg", className)}
         {...getFloatingProps(props)}
       >

package/src/components/Tooltip/components/TooltipContext.tsx

@@ -9,6 +9,8 @@ export type TooltipContextValue = {
     setFloating: (node: HTMLElement | null) => void;
   };
   floatingStyles: React.CSSProperties;
+  /** The trigger's brand scope, re-stamped on the portalled body. */
+  inheritedBrand: string | undefined;
   getReferenceProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
   getFloatingProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
 };

package/src/internal/brandScope.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+
+/**
+ * The brand an element sits in: the `data-brand` of it or its nearest
+ * ancestor, or `undefined` outside any scope.
+ *
+ * Overlays need this because a portal moves their content out from under the
+ * element that set `data-brand`, so CSS inheritance no longer carries it. The
+ * overlay reads the brand off its trigger and re-stamps it on its own element.
+ * The value is copied verbatim, unknown names included: the theme only gives
+ * listed names meaning, so an unknown one resolves exactly as it would have in
+ * place.
+ */
+export function closestBrand(element: Element | null | undefined): string | undefined {
+  return element?.closest?.("[data-brand]")?.getAttribute("data-brand") ?? undefined;
+}
+
+const focusedBrand = () => (typeof document === "undefined" ? undefined : closestBrand(document.activeElement));
+
+/**
+ * The brand of whatever held focus when the calling overlay opened.
+ *
+ * For Modal and Sheet, which have no reference element: the thing that opened
+ * them is almost always the focused control, and it still holds focus during
+ * the render that opens them, before the focus manager moves it. Captured on
+ * each closed → open transition and kept through the close, so neither focus
+ * moving into the dialog nor the exit animation changes it. When nothing useful
+ * was focused (Safari does not focus a clicked button) this is `undefined`, and
+ * the overlay inherits from wherever its portal landed.
+ */
+export function useOpenerBrand(open: boolean): string | undefined {
+  const [captured, setCaptured] = useState(() => ({ open, brand: open ? focusedBrand() : undefined }));
+  // Adjusting state during render, React's pattern for deriving from a prop
+  // change: an effect would run after the focus manager has already moved focus.
+  if (captured.open !== open) setCaptured({ open, brand: open ? focusedBrand() : captured.brand });
+  return captured.brand;
+}

package/src/theming/tailwind.css

@@ -41,6 +41,11 @@
 @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";
 
 /* =============================================================================
    3. TAILWIND THEME