@sixthshift/design-system 0.5.0 → 0.7.0

package/src/components/Toast/Toast.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FloatingPortal, type FloatingPortalProps } from "@floating-ui/react";
 import { Button } from "@sixthshift/design-system/button";
 import { usePresence } from "@sixthshift/design-system/hooks";
@@ -19,6 +21,13 @@ export type ToastProps = Omit<MessageProps, "size"> & {
   onAction?: () => void;
   /** Portal root element (default: document.body) */
   root?: FloatingPortalProps["root"];
+  /**
+   * Set to `false` to play the exit animation and then call `onClose`. This is
+   * how a stack dismisses a toast on a timer: the toast stays mounted through
+   * its fade-out, and the stack drops it when `onClose` fires.
+   * @default true
+   */
+  open?: boolean;
   /**
    * Whether Toast should render in a portal and position itself.
    * Set to false when Toast is rendered by a parent that handles positioning (e.g., OverlayContext).
@@ -50,8 +59,8 @@ export type ToastProps = Omit<MessageProps, "size"> & {
  * portals itself (`FloatingPortal`, optionally to a custom `root`) and
  * applies the fixed bottom-center classes itself. Set it to `false` when a
  * parent already handles portalling and position — this is how
- * `OverlayContext`'s toast stack renders it. Toast has no built-in
- * auto-dismiss timer; that's `useToast`'s job, one layer up.
+ * `ToastStack` renders it. Toast has no built-in auto-dismiss timer; that's
+ * `ToastStack`'s job, one layer up, driven through `open`.
  *
  * Exit animation (`usePresence`) keeps Toast mounted through its fade-out,
  * so `onClose` fires only after the animation completes. Toast has no focus
@@ -59,13 +68,20 @@ export type ToastProps = Omit<MessageProps, "size"> & {
  * a dialog.
  */
 export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
-  ({ className, intent = "neutral", title, icon, action, onAction, onClose, root, 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();
 
-    // Start enter animation on mount
+    // `open` drives presence: enter on mount, exit when it flips false. The
+    // close handler is read through a ref so a new identity does not replay
+    // the exit.
+    const onCloseRef = React.useRef(onClose);
+    React.useEffect(() => {
+      onCloseRef.current = onClose;
+    });
     React.useEffect(() => {
-      show();
-    }, [show]);
+      if (open) show();
+      else hide(() => onCloseRef.current?.());
+    }, [open, show, hide]);
 
     // Handle close with exit animation
     const handleClose = React.useCallback(() => {
@@ -102,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

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
 import type { VariantProps } from "class-variance-authority";
@@ -13,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 */
@@ -32,7 +36,7 @@ export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "o
  * Built directly on Button: it calls `buttonRecipe(...)` and takes the same
  * `variant`/`intent`/`size` axes Button does, plus `iconOnly` for a toolbar
  * toggle whose whole content is an icon. The
- * pressed-state colour mapping lives in `src/theme/recipes/toggle.css`,
+ * pressed-state colour mapping lives in `src/components/Toggle/toggle.recipe.css`,
  * keyed off the `data-state="on" | "off"` attribute this component renders
  * alongside `aria-pressed`.
  *
@@ -41,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({
@@ -50,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

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import * as React from "react";
 import { ToggleGroupContainer } from "./ToggleGroupContainer";
@@ -15,10 +17,13 @@ const ToggleGroupMultiple = React.forwardRef<HTMLDivElement, ToggleGroupMultiple
       orientation = "horizontal",
       variant = "solid",
       intent = "neutral",
+      brand,
       size = "md",
       iconOnly = false,
       disabled,
       className,
+      name,
+      form,
       ...props
     },
     ref
@@ -35,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}
@@ -54,6 +59,8 @@ const ToggleGroupMultiple = React.forwardRef<HTMLDivElement, ToggleGroupMultiple
             onClick={() => handleToggle(option.value)}
           />
         ))}
+        {/* Mirrors the selection for native form submission, same contract as Checkbox/DatePicker. */}
+        {name && value.map((v) => <input key={v} type="hidden" name={`${name}[]`} value={v} {...(form ? { form } : {})} />)}
       </ToggleGroupContainer>
     );
   }

package/src/components/ToggleGroup/ToggleGroupSingle.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import * as React from "react";
 import { getRovingTargetIndex } from "../../internal/rovingFocus";
@@ -17,10 +19,13 @@ const ToggleGroupSingle = React.forwardRef<HTMLDivElement, ToggleGroupSingleProp
       orientation = "horizontal",
       variant = "solid",
       intent = "neutral",
+      brand,
       size = "md",
       iconOnly = false,
       disabled,
       className,
+      name,
+      form,
       ...props
     },
     ref
@@ -72,6 +77,7 @@ const ToggleGroupSingle = React.forwardRef<HTMLDivElement, ToggleGroupSingleProp
       <ToggleGroupContainer
         ref={mergedRef}
         role="radiogroup"
+        data-brand={brand}
         onKeyDown={handleKeyDown}
         appearance={appearance}
         orientation={orientation}
@@ -98,6 +104,8 @@ const ToggleGroupSingle = React.forwardRef<HTMLDivElement, ToggleGroupSingleProp
             onClick={() => handleSelect(option.value)}
           />
         ))}
+        {/* Mirrors the selection for native form submission, same contract as Checkbox/DatePicker. */}
+        {name && value && <input type="hidden" name={name} value={value} {...(form ? { form } : {})} />}
       </ToggleGroupContainer>
     );
   }

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

@@ -33,12 +33,25 @@ 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 */
   iconOnly?: boolean;
   /** Disable all options */
   disabled?: boolean;
+  /**
+   * Input name for native form submission. The selection is mirrored into
+   * hidden `<input>`s — `name` in single mode, `${name}[]` in multiple mode.
+   */
+  name?: string;
+  /** The `form` attribute for the hidden input(s), for a group rendered outside its `<form>`. */
+  form?: string;
 };
 
 export type ToggleGroupSingleProps = ToggleGroupBaseProps & {

package/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,8 @@
+"use client";
+
 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";
@@ -53,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

@@ -1,12 +1,21 @@
+"use client";
+
 import { FloatingPortal } from "@floating-ui/react";
 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;
 
@@ -19,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

@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, useContext } from "react";
 
 export type TooltipContextValue = {
@@ -7,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/components/Tooltip/components/TooltipTrigger.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { Slot } from "../../../internal/Slot";
 import { useTooltipContext } from "./TooltipContext";

package/src/hooks/useCollapsible.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useState } from "react";
 
 export function useCollapsible(defaultExpanded = true) {

package/src/hooks/useControllableState.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useRef, useState } from "react";
 
 declare const process: undefined | { env?: { NODE_ENV?: string } };

package/src/hooks/useDebouncedCallback.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useRef } from "react";
 
 /**

package/src/hooks/useDebouncedState.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 /**

package/src/hooks/useDeviceFormFactor.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useSyncExternalStore } from "react";
 
 /**

package/src/hooks/useLocalStorage.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useSyncExternalStore } from "react";
 
 type SetValue<T> = T | ((prev: T) => T);

package/src/hooks/useMergedFloatingRef.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback } from "react";
 import type { WritableRefObject } from "../internal/types";
 

package/src/hooks/usePresence.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { type RefCallback, useCallback, useEffect, useRef, useState } from "react";
 
 // =============================================================================

package/src/hooks/useStack.ts

@@ -1,4 +1,6 @@
-import { type Dispatch, type Reducer, startTransition, useCallback, useEffect, useReducer } from "react";
+"use client";
+
+import { type Dispatch, type Reducer, startTransition, useCallback, useEffect, useReducer, useRef } from "react";
 
 type Id = string | number;
 type Transition = {
@@ -70,23 +72,44 @@ export function useStack<T extends StackItem>(initialStack: T[] = []): [T[], Sta
 
   const [state, dispatch] = useReducer(reducer, initialStack);
 
+  // One removal timer per transitioning item. The effect re-runs on every
+  // state change, so timers are tracked in a ref keyed by item id: an item
+  // already scheduled is never scheduled again (re-running the effect must not
+  // reset or duplicate its countdown), and a timer whose item has left the
+  // stack by other means is cancelled rather than left to fire at a reused id.
+  const removalTimersRef = useRef(new Map<Id, ReturnType<typeof setTimeout>>());
+
   useEffect(() => {
-    const itemsToRemove = state.filter((item) => item.transition);
+    const timers = removalTimersRef.current;
+    const transitioning = new Set(state.filter((item) => item.transition).map((item) => item.id));
 
-    if (itemsToRemove.length === 0) {
-      return;
+    for (const [id, timer] of timers) {
+      if (!transitioning.has(id)) {
+        clearTimeout(timer);
+        timers.delete(id);
+      }
     }
 
-    itemsToRemove.reverse().forEach((itemToRemove) => {
-      setTimeout(
-        () => {
-          dispatch({ type: "remove", id: itemToRemove.id });
-        }, // We found the item by the `transition` property, so we can be sure it exists.
-        (itemToRemove.transition as Transition).duration
-      );
-    });
+    for (const item of state) {
+      if (!item.transition || timers.has(item.id)) continue;
+      const timer = setTimeout(() => {
+        timers.delete(item.id);
+        dispatch({ type: "remove", id: item.id });
+      }, item.transition.duration);
+      timers.set(item.id, timer);
+    }
   }, [state]);
 
+  // Unmount only: without this, a stack unmounted mid-transition dispatches
+  // into an unmounted reducer.
+  useEffect(() => {
+    const timers = removalTimersRef.current;
+    return () => {
+      for (const timer of timers.values()) clearTimeout(timer);
+      timers.clear();
+    };
+  }, []);
+
   // Memoize the dispatch wrapper to prevent unnecessary re-renders
   // dispatch from useReducer is stable, so this only creates once
   const wrappedDispatch = useCallback((params: Action<T>) => {

package/src/hooks/useTheme.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useSyncExternalStore } from "react";
 
 export type Theme = "light" | "dark" | "system";

package/src/internal/PickerField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import { X } from "lucide-react";
 import * as React from "react";

package/src/internal/SegmentedField.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
 import { useRef, useState } from "react";

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/internal/escapeLayers.ts

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Registry of open "escape layers" — transient floating overlays (popovers,
+ * select dropdowns, picker calendars) that should consume an Escape press
+ * before any dialog beneath them reacts to it.
+ *
+ * The dialogs and these overlays each listen for Escape on `document`
+ * independently (floating-ui's `useDismiss` has no tree here), and document
+ * listeners fire in registration order — usually the dialog's first, since it
+ * opened first. So a dialog cannot rely on `defaultPrevented`; instead it asks
+ * this registry whether a layer is open and, if so, leaves the Escape to it.
+ * The registry is read synchronously during the event, before React commits
+ * the layer's close, so the layer that is handling this Escape still counts.
+ *
+ * Module-level on purpose: Popover, Select and Modal live in separate subpath
+ * entries with no shared context, and a context would also miss overlays
+ * rendered outside an `OverlayProvider`.
+ */
+const transientLayers = new Set<symbol>();
+const dialogLayers = new Set<symbol>();
+
+/** True while any transient escape-consuming overlay (popover-like) is open. */
+export const hasOpenEscapeLayer = () => transientLayers.size > 0;
+
+/** True while any modal dialog is open. A non-modal Sheet under a Modal defers Escape to it. */
+export const hasOpenEscapeDialog = () => dialogLayers.size > 0;
+
+function useRegistration(registry: Set<symbol>, active: boolean) {
+  useEffect(() => {
+    if (!active) return;
+    const token = Symbol("escape-layer");
+    registry.add(token);
+    return () => {
+      registry.delete(token);
+    };
+  }, [registry, active]);
+}
+
+/**
+ * Marks this component as an open transient escape layer while `active` is
+ * true. Call with the overlay's `open` state.
+ */
+export function useEscapeLayer(active: boolean) {
+  useRegistration(transientLayers, active);
+}
+
+/** Marks this component as an open modal dialog while `active` is true. */
+export function useEscapeDialog(active: boolean) {
+  useRegistration(dialogLayers, active);
+}

package/src/lib/ErrorBoundary.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Component, type ErrorInfo, type ReactNode } from "react";
 
 export type ErrorFallbackProps = {

package/src/lib/contexts/ComponentsContext/ComponentsContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, type PropsWithChildren, type ReactNode, useContext } from "react";
 
 type LinkProps = {