@sixthshift/design-system 0.4.0 → 0.6.0

package/src/components/Select/useSelectKeyboard.ts

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

package/src/components/Sheet/Sheet.tsx

@@ -1,7 +1,10 @@
-import { FloatingFocusManager, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+"use client";
+
+import { FloatingFocusManager, FloatingPortal, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
 import { useMergedFloatingRef, usePresence } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
 import { forwardRef, type HTMLAttributes, type ReactNode, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { hasOpenEscapeDialog, hasOpenEscapeLayer } from "../../internal/escapeLayers";
 import { SheetBody, SheetContext, SheetFooter, SheetHeader } from "./components";
 
 // =============================================================================
@@ -78,8 +81,14 @@ const SheetRoot = forwardRef<HTMLDivElement, SheetProps>(
 
     const { refs, context } = useFloating({
       open,
-      onOpenChange: (nextOpen) => {
-        if (!nextOpen) requestClose();
+      onOpenChange: (nextOpen, _event, reason) => {
+        if (nextOpen) return;
+        // The sheet is non-modal, so overlays above it keep their own Escape
+        // handling: a transient layer (Select dropdown, Popover, picker)
+        // consumes the press, and an open Modal owns it. Only a bare Escape
+        // — nothing stacked above — closes the sheet.
+        if (reason === "escape-key" && (hasOpenEscapeLayer() || hasOpenEscapeDialog())) return;
+        requestClose();
       },
     });
 
@@ -114,37 +123,43 @@ const SheetRoot = forwardRef<HTMLDivElement, SheetProps>(
     const isExiting = state === "exiting";
 
     return (
-      <FloatingFocusManager context={context} modal={false}>
-        <div
-          ref={mergedRef}
-          // Explicit, though `getFloatingProps` also supplies it from `useRole`:
-          // the ARIA attributes below are only valid on a dialog, and static
-          // analysis cannot see a role that arrives through a spread. Matches Modal.
-          role="dialog"
-          aria-label={ariaLabel}
-          aria-labelledby={labelledBy}
-          aria-describedby={ariaDescribedBy}
-          tabIndex={-1}
-          data-state={state}
-          data-side={side}
-          className={cn(
-            "sheet fixed top-0 bottom-0 z-sheet flex flex-col overflow-hidden bg-(--sheet-bg) outline-hidden",
-            "border-(color:--sheet-border) shadow-lg",
-            side === "right" ? "right-0 border-l" : "left-0 border-r",
-            sizeClasses[size],
-            "max-sm:inset-x-0",
-            isEntering && side === "right" && "animate-slide-right-in",
-            isExiting && side === "right" && "animate-slide-right-out",
-            isEntering && side === "left" && "animate-slide-left-in",
-            isExiting && side === "left" && "animate-slide-left-out",
-            className
-          )}
-          style={style}
-          {...getFloatingProps({})}
-        >
-          <SheetContext.Provider value={sheetContextValue}>{children}</SheetContext.Provider>
-        </div>
-      </FloatingFocusManager>
+      // Self-portalled for the same reason as Modal: `position: fixed` inside
+      // a transformed/filtered ancestor would anchor (and clip) the sheet to
+      // that ancestor instead of the viewport. `FloatingPortal` preserves tab
+      // order around the trigger for non-modal focus management.
+      <FloatingPortal>
+        <FloatingFocusManager context={context} modal={false}>
+          <div
+            ref={mergedRef}
+            // Explicit, though `getFloatingProps` also supplies it from `useRole`:
+            // the ARIA attributes below are only valid on a dialog, and static
+            // analysis cannot see a role that arrives through a spread. Matches Modal.
+            role="dialog"
+            aria-label={ariaLabel}
+            aria-labelledby={labelledBy}
+            aria-describedby={ariaDescribedBy}
+            tabIndex={-1}
+            data-state={state}
+            data-side={side}
+            className={cn(
+              "sheet fixed top-0 bottom-0 z-sheet flex flex-col overflow-hidden bg-(--sheet-bg) outline-hidden",
+              "border-(color:--sheet-border) shadow-lg",
+              side === "right" ? "right-0 border-l" : "left-0 border-r",
+              sizeClasses[size],
+              "max-sm:inset-x-0",
+              isEntering && side === "right" && "animate-slide-right-in",
+              isExiting && side === "right" && "animate-slide-right-out",
+              isEntering && side === "left" && "animate-slide-left-in",
+              isExiting && side === "left" && "animate-slide-left-out",
+              className
+            )}
+            style={style}
+            {...getFloatingProps({})}
+          >
+            <SheetContext.Provider value={sheetContextValue}>{children}</SheetContext.Provider>
+          </div>
+        </FloatingFocusManager>
+      </FloatingPortal>
     );
   }
 );

package/src/components/Sheet/components/SheetContext.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { createContext, type KeyboardEvent, type MouseEvent, type PropsWithChildren, useContext, useMemo } from "react";
 
 export type OnClose = (event?: MouseEvent<Element> | KeyboardEvent<Element>) => void;

package/src/components/Sheet/components/SheetHeader.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/components/Spinner/Spinner.tsx

@@ -8,7 +8,7 @@ import * as React from "react";
  * The colour used to be `text-fg-subtle`, a semantic token named directly in
  * the class string — the one thing a consumer could not do was recolour a
  * spinner without fighting `className` against it. `--spinner-fg` in
- * src/theme/recipes/spinner.css is now that seam: a consumer overrides the
+ * src/components/Spinner/spinner.recipe.css is now that seam: a consumer overrides the
  * variable, scoped to whatever subtree they like, instead of overriding a
  * class.
  */
@@ -40,7 +40,7 @@ export type SpinnerProps = React.SVGAttributes<SVGElement> & VariantProps<typeof
  * live region) if the loading state needs to be announced.
  *
  * Colour reads the `--spinner-fg` component token
- * (src/theme/recipes/spinner.css) rather than a class name, so a consumer
+ * (src/components/Spinner/spinner.recipe.css) rather than a class name, so a consumer
  * can recolour a spinner scoped to a subtree without fighting `className`.
  */
 const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(({ className, size, ...props }, ref) => (

package/src/components/Switch/Switch.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { Label } from "@sixthshift/design-system/label";
 import { cn } from "@sixthshift/design-system/utils";

package/src/components/Tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import type * as React from "react";
 import { useId } from "react";

package/src/components/Tabs/components/TabsContext.tsx

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

package/src/components/Tabs/components/TabsList.tsx

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

package/src/components/Tabs/components/TabsPanels.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import { forwardRef } from "react";
 import { useTabsContext } from "./TabsContext";

package/src/components/Tabs/components/TabsTrigger.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Badge } from "@sixthshift/design-system/badge";
 import { cn } from "@sixthshift/design-system/utils";
 import { cva } from "class-variance-authority";
@@ -9,7 +11,7 @@ import { type TabItem, useTabsContext } from "./TabsContext";
  *
  * Colour reads `--tabs-trigger-bg` / `--tabs-trigger-fg` component tokens
  * (each with a `-hovered` state) whose values are decided by
- * src/theme/recipes/tabs.css. That file is the mapping from `selected` to a
+ * src/components/Tabs/tabs.recipe.css. That file is the mapping from `selected` to a
  * semantic token — the layer that used to be the two branches of a `cva`
  * `selected` variant here, compiled into class-name literals and unreachable
  * from outside. Nothing in this file names a colour, which is the point: the

package/src/{theme/recipes/tabs.css → components/Tabs/tabs.recipe.css}

@@ -7,7 +7,7 @@
  * data, so a consumer can re-point a cell or scope a change to a subtree.
  *
  * The grammar is `--tabs-trigger-{context}[-{state}]` — the same `context`
- * and `state` words the semantic layer uses (src/theme/schema.ts). `selected`
+ * and `state` words the semantic layer uses (src/theming/vocabulary.ts). `selected`
  * never appears in a token name: it selects, via the `data-selected`
  * attribute below. Putting it in the name (`--tabs-trigger-bg-selected`)
  * would restore the combinatorial explosion this layer exists to remove.

package/src/components/TagChip/TagChip.tsx

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

package/src/components/TagInput/TagInput.tsx

@@ -1,32 +1,40 @@
+"use client";
+
 import { TagChip } from "@sixthshift/design-system/tag-chip";
 import { cn } from "@sixthshift/design-system/utils";
 import { forwardRef, type KeyboardEvent, useState } from "react";
 
 export type TagInputProps = {
   value: string[];
-  onChange: (tags: string[]) => void;
+  onValueChange: (tags: string[]) => void;
   placeholder?: string;
   id?: string;
   className?: string;
+  /** Input name for native form submission. Each tag is mirrored into a hidden `<input name="${name}[]">`. */
+  name?: string;
+  /** The `form` attribute for the hidden inputs, for a TagInput rendered outside its `<form>`. */
+  form?: string;
 };
 
 /**
  * Token input for tags: existing tags render as removable `TagChip`s, typing
  * plus Enter or comma commits a new one, Backspace on an empty field removes
  * the last. Duplicates are ignored. Controlled only — there is no
- * `defaultValue`, the parent always owns `value`.
+ * `defaultValue`, the parent always owns `value` and receives changes via
+ * `onValueChange`. With `name` set, each tag is mirrored into a hidden
+ * `<input name="${name}[]">` for native form submission.
  *
  * The chrome matches `Input` (same border/focus tokens) so it sits naturally
  * among other form fields; the field has no visible label of its own, so
  * give it an accessible name via a `<label htmlFor={id}>` (pass `id`) or
  * `aria-label`.
  */
-export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(({ value, onChange, placeholder = "Add a tag…", id, className }, ref) => {
+export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(({ value, onValueChange, placeholder = "Add a tag…", id, className, name, form }, ref) => {
   const [draft, setDraft] = useState("");
 
   const commit = () => {
     const tag = draft.trim();
-    if (tag && !value.includes(tag)) onChange([...value, tag]);
+    if (tag && !value.includes(tag)) onValueChange([...value, tag]);
     setDraft("");
   };
 
@@ -35,7 +43,7 @@ export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(({ value, onCh
       e.preventDefault();
       commit();
     } else if (e.key === "Backspace" && draft === "" && value.length > 0) {
-      onChange(value.slice(0, -1));
+      onValueChange(value.slice(0, -1));
     }
   };
 
@@ -48,8 +56,9 @@ export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(({ value, onCh
       )}
     >
       {value.map((tag) => (
-        <TagChip key={tag} tag={tag} onRemove={() => onChange(value.filter((t) => t !== tag))} />
+        <TagChip key={tag} tag={tag} onRemove={() => onValueChange(value.filter((t) => t !== tag))} />
       ))}
+      {name && value.map((tag) => <input key={tag} type="hidden" name={`${name}[]`} value={tag} {...(form ? { form } : {})} />)}
       <input
         id={id}
         value={draft}

package/src/components/Textarea/Textarea.tsx

@@ -1,28 +1,64 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
+import type { WritableRefObject } from "../../internal/types";
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  /**
+   * Grows the textarea to fit its content instead of scrolling internally.
+   * Off by default — a fixed box that scrolls is still correct for e.g. a
+   * bounded comment field. `rows` still sets the starting height.
+   */
+  autosize?: boolean;
+};
 
 /**
  * Multi-line text input for longer free-form text.
  *
  * A thin styled wrapper around `<textarea>` — no custom props beyond
- * `React.TextareaHTMLAttributes`, no auto-resize, and no maximum-length UI of
+ * `autosize` and `React.TextareaHTMLAttributes`, and no maximum-length UI of
  * its own. Height comes from a `min-h-[60px]` default plus whatever `rows`
- * or `className` the caller passes; growing with content is the caller's
- * responsibility. Controlled or uncontrolled exactly like a native textarea.
+ * or `className` the caller passes. With `autosize`, that starting height
+ * grows with content instead; without it, growing with content is the
+ * caller's responsibility. Controlled or uncontrolled exactly like a native
+ * textarea.
  *
  * Meant to be wrapped by `FormField` for label, description and validation
  * wiring.
  */
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, autosize = false, onInput, value, ...props }, ref) => {
+  const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
+
+  const resize = React.useCallback(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: value only triggers the resize, it isn't read here
+  React.useLayoutEffect(() => {
+    if (autosize) resize();
+  }, [autosize, resize, value]);
+
   return (
     <textarea
+      value={value}
       className={cn(
         "textarea border-(color:--textarea-border) focus-visible:ring-(color:--textarea-ring) flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-(--textarea-placeholder-fg) focus-visible:outline-hidden focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+        autosize && "resize-none overflow-hidden",
         className
       )}
-      ref={ref}
+      ref={(node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) (ref as WritableRefObject<HTMLTextAreaElement | null>).current = node;
+      }}
+      onInput={(event) => {
+        if (autosize) resize();
+        onInput?.(event);
+      }}
       {...props}
     />
   );

package/src/{theme/recipes/textarea.css → components/Textarea/textarea.recipe.css}

@@ -5,7 +5,7 @@
  * button.css's header for why `@layer components` is load-bearing.
  *
  * Textarea's background is literal `bg-transparent` in the markup, not a
- * semantic token today — there is nothing in tier 2 to point a `--textarea-bg`
+ * semantic token today — there is nothing in the semantic layer to point a `--textarea-bg`
  * at, so no such token is introduced here. Border, placeholder and focus ring
  * are the tokens that existed as semantic classes before this file, and are
  * the ones made overridable.

package/src/components/TimePicker/PeriodSelector.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@sixthshift/design-system/utils";
 import type { TimePeriod } from "./timepicker.types";
 

package/src/components/TimePicker/TimeColumn.tsx

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

package/src/components/TimePicker/TimePicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { autoUpdate, FloatingPortal, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
@@ -6,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 { useEscapeLayer } from "../../internal/escapeLayers";
 import { Button } from "../Button";
 import { Separator } from "../Separator";
 import { PeriodSelector } from "./PeriodSelector";
@@ -241,6 +244,10 @@ export const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>((pro
 
   const click = useClick(context);
   const dismiss = useDismiss(context);
+
+  // While open, an Escape press closes this picker's popover and must not
+  // also close a Modal/Sheet it is rendered inside.
+  useEscapeLayer(open);
   const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
 
   // IDs for accessibility

package/src/components/TimePicker/TimeSegments.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import type { Temporal } from "../../date-time";
 import { SegmentedField, type SegmentSpec, type SegmentValues } from "../../internal";
 import { parsedToTemporal, temporalTimeToISO, to12Hour, to24Hour } from "./timepicker.hooks";

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", 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(() => {

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";
@@ -32,7 +34,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`.
  *

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";
@@ -19,6 +21,8 @@ const ToggleGroupMultiple = React.forwardRef<HTMLDivElement, ToggleGroupMultiple
       iconOnly = false,
       disabled,
       className,
+      name,
+      form,
       ...props
     },
     ref
@@ -54,6 +58,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";
@@ -21,6 +23,8 @@ const ToggleGroupSingle = React.forwardRef<HTMLDivElement, ToggleGroupSingleProp
       iconOnly = false,
       disabled,
       className,
+      name,
+      form,
       ...props
     },
     ref
@@ -98,6 +102,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

@@ -39,6 +39,13 @@ export type ToggleGroupBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "o
   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,3 +1,5 @@
+"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 { TooltipBody } from "./components/TooltipBody";

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

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

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

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

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";
 
 // =============================================================================