@cdx-ui/components 0.1.6 → 0.2.0

package/src/components/Toast/index.tsx

@@ -1,4 +1,13 @@
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
 import { Platform, View } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
@@ -26,7 +35,12 @@ import {
   toastLabelVariants,
   toastDescriptionVariants,
   toastIconVariants,
+  toastActionRootVariants,
+  toastActionLabelVariants,
+  toastCloseRootVariants,
+  toastCloseIconVariants,
   toastStyleSheet,
+  toastTextVariants,
   toastWrapperVariants,
 } from './styles';
 import type {
@@ -64,6 +78,26 @@ type ToastDataState = 'entering' | 'open' | 'closed';
 
 // --------------------------------------------------
 
+const isTrailingChild = (child: ReactNode) =>
+  isValidElement(child) && (child.type === ToastAction || child.type === ToastClose);
+
+const renderToastRow = (children: ReactNode) => {
+  const childArray = Children.toArray(children);
+  const iconChild = childArray.find((child) => isValidElement(child) && child.type === ToastIcon);
+  const trailingChildren = childArray.filter(isTrailingChild);
+  const textChildren = childArray.filter(
+    (child) => !(isValidElement(child) && child.type === ToastIcon) && !isTrailingChild(child),
+  );
+
+  return (
+    <>
+      {iconChild}
+      {textChildren.length > 0 ? <View className={toastTextVariants()}>{textChildren}</View> : null}
+      {trailingChildren}
+    </>
+  );
+};
+
 const ToastRoot = forwardRef<View, ToastProps>((props, ref) => {
   const globalConfig = useToastConfig();
 
@@ -225,6 +259,10 @@ const ToastRoot = forwardRef<View, ToastProps>((props, ref) => {
 
   const wrapperClassName = cn(toastWrapperVariants({ placement }));
 
+  // Shared by the visible toast and the native measuring node so the measured
+  // height matches what is on screen.
+  const content = renderToastRow(children);
+
   return (
     <AnimationSettingsProvider value={animationSettingsContextValue}>
       <ParentContext.Provider value={ctx}>
@@ -256,7 +294,7 @@ const ToastRoot = forwardRef<View, ToastProps>((props, ref) => {
                 }),
               )}
             >
-              {children}
+              {content}
               {/*
                 When visible toasts have different heights, the toast adapts to the last visible toast height.
                 In cases where a toast originally has one height and gets smaller when a new toast comes to stack,
@@ -286,7 +324,7 @@ const ToastRoot = forwardRef<View, ToastProps>((props, ref) => {
                 }}
                 {...restProps}
               >
-                {children}
+                {content}
               </AnimatedToastRoot>
             )}
           </Animated.View>
@@ -381,10 +419,8 @@ const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
   const { children, variant, color, size = 'small', className, ...restProps } = props;
 
   const { color: toastColor } = useToastStyleContext();
-
-  // TODO: Add toastActionVariants to styles.ts to restore color-aware action styling
-
   const buttonColor = useButtonColor({ color, toastColor });
+  const usesNeutralStandIn = toastColor === 'neutral' && !color;
 
   return (
     <Button
@@ -392,10 +428,12 @@ const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
       variant={variant ?? 'outline'}
       color={buttonColor}
       size={size}
-      className={className}
+      className={cn(usesNeutralStandIn ? toastActionRootVariants() : undefined, className)}
       {...restProps}
     >
-      <Button.Label>{children}</Button.Label>
+      <Button.Label className={usesNeutralStandIn ? toastActionLabelVariants() : undefined}>
+        {children}
+      </Button.Label>
     </Button>
   );
 });
@@ -403,8 +441,9 @@ const ToastAction = forwardRef<View, ToastActionProps>((props, ref) => {
 // --------------------------------------------------
 
 const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
-  const { children, size = 'small', className, onPress, ...restProps } = props;
-  const { hide, id } = useToastStyleContext();
+  const { children, size = 'small', className, onPress, iconClassName, ...restProps } = props;
+  const { hide, id, color: toastColor } = useToastStyleContext();
+  const usesNeutralStandIn = toastColor === 'neutral';
 
   /**
    * Handle close button press
@@ -426,7 +465,8 @@ const ToastClose = forwardRef<View, ToastCloseProps>((props, ref) => {
       variant="ghost"
       size={size}
       aria-label="Close"
-      className={className}
+      className={cn(usesNeutralStandIn ? toastCloseRootVariants() : undefined, className)}
+      iconClassName={cn(usesNeutralStandIn ? toastCloseIconVariants() : undefined, iconClassName)}
       onPress={handlePress}
       as={CloseIcon}
       {...restProps}
@@ -494,18 +534,15 @@ export function DefaultToast(props: DefaultToastProps) {
       placement={placement}
       isSwipeable={isSwipeable}
       animation={animation}
-      className="flex-row gap-3"
       hide={hide}
       show={show}
       {...(color === 'danger' && { role: 'alert' as const })}
       {...toastComponentProps}
     >
       {icon ? <ToastIcon as={icon} /> : null}
-      <View className="flex-1">
-        {label && <ToastTitle>{label}</ToastTitle>}
-        {description && <ToastDescription>{description}</ToastDescription>}
-      </View>
-      {actionLabel && <ToastAction onPress={handleActionPress}>{actionLabel}</ToastAction>}
+      {label ? <ToastTitle>{label}</ToastTitle> : null}
+      {description ? <ToastDescription>{description}</ToastDescription> : null}
+      {actionLabel ? <ToastAction onPress={handleActionPress}>{actionLabel}</ToastAction> : null}
     </ToastRoot>
   );
 }
@@ -527,6 +564,21 @@ type ToastCompoundComponent = typeof ToastRoot & {
   Close: typeof ToastClose;
 };
 
+/**
+ * Presentational toast root, rendered inside a `toast.show({ component })`
+ * render function with the supplied props spread onto it.
+ *
+ * The root lays out its direct children as a fixed row regardless of JSX
+ * order: the first `Toast.Icon` at the start, every `Toast.Action` and
+ * `Toast.Close` at the end in source order, and every other child
+ * (`Toast.Title`, `Toast.Description`, custom content) in a text column
+ * between them. Additional `Toast.Icon` children are dropped.
+ *
+ * `Toast.Icon`, `Toast.Action`, and `Toast.Close` must be direct children.
+ * They are matched by component identity, so wrapping them in `memo()`, an
+ * HOC, or a custom component hides them from the root and they render in the
+ * text column instead.
+ */
 export const Toast = Object.assign(ToastRoot, {
   Title: ToastTitle,
   Description: ToastDescription,

package/src/components/Toast/styles.ts

@@ -1,6 +1,15 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { cva, type VariantProps } from '@cdx-ui/utils';
 
+const NEUTRAL_ON_STRONG_INTERACTION = Platform.select({
+  default: 'data-[active=true]:bg-surface-neutral-strong',
+  web: [
+    'data-[hover=true]:bg-surface-neutral-strong-hover',
+    'data-[active=true]:data-[hover=true]:bg-surface-neutral-strong',
+    'web:data-[focus-visible=true]:ring-offset-surface-neutral-strong-active',
+  ].join(' '),
+});
+
 /**
  * Toast root styles
  *
@@ -40,17 +49,18 @@ export const toastRootVariants = cva(
     // shadow and clips the child's transform mid-transition, producing a
     // visual "cut off" during enter/exit. Consumers that need clipping for
     // custom child content (e.g. a background image) can add it themselves.
-    'flex-row items-center gap-2 rounded-[var(--border-radius-default)] min-h-12 px-4 py-2 shadow-lg bg-surface-primary border border-stroke-secondary',
+    'flex-row items-center gap-3 rounded-[var(--border-radius-default)] min-h-12 px-4 py-2 shadow-lg border border-transparent',
     'native:overflow-hidden',
   ],
   {
     variants: {
       color: {
-        neutral: '',
-        info: '',
-        success: '',
-        warning: '',
-        danger: '',
+        // color.component.toast.neutral.surface
+        neutral: 'bg-surface-neutral-strong-active',
+        info: 'bg-surface-info-subtle',
+        success: 'bg-surface-success-subtle',
+        warning: 'bg-surface-warning-subtle',
+        danger: 'bg-surface-danger-subtle',
       },
     },
     defaultVariants: {
@@ -72,6 +82,10 @@ export const toastRootVariants = cva(
  * on the `top-*` / `bottom-*` variants also seeds the entering-state offset synchronously
  * — CSS transitions to `translate-y-0` when `data-state` flips to `open`.
  *
+ * Centered placements span the row (`inset-x-0`) and center a `w-fit` box with auto margins.
+ * Do not center with `left-1/2` + `-translate-x-1/2`: an absolute box that starts at the
+ * midpoint shrink-to-fits into half the container, so short labels wrap long before 460px.
+ *
  * `motion-reduce:transition-none` collapses the transition for users with
  * `prefers-reduced-motion: reduce`. In that case `transitionend` may never fire, so
  * the Toast component's safety timeout handles removal.
@@ -96,7 +110,7 @@ export const toastWrapperVariants = cva(
         ],
         top: [
           'top-0 native:left-0 native:right-0',
-          'web:left-1/2 web:-translate-x-1/2 web:max-w-[460px]',
+          'web:inset-x-0 web:mx-auto web:w-fit web:max-w-[460px]',
           'web:data-[state=entering]:-translate-y-2',
           'web:data-[state=closed]:-translate-y-2',
         ],
@@ -114,7 +128,7 @@ export const toastWrapperVariants = cva(
         ],
         bottom: [
           'bottom-0 native:left-0 native:right-0',
-          'web:left-1/2 web:-translate-x-1/2 web:max-w-[460px]',
+          'web:inset-x-0 web:mx-auto web:w-fit web:max-w-[460px]',
           'web:data-[state=entering]:translate-y-2',
           'web:data-[state=closed]:translate-y-2',
         ],
@@ -132,14 +146,22 @@ export const toastWrapperVariants = cva(
   },
 );
 
+/**
+ * Internal text column the root renders between the leading icon and the
+ * trailing controls. Holds `Toast.Title`, `Toast.Description`, and any
+ * unrecognized children.
+ */
+export const toastTextVariants = cva(['flex-1 flex-col min-w-0']);
+
 export const toastLabelVariants = cva(['text-base font-medium'], {
   variants: {
     color: {
-      neutral: 'text-content-primary',
-      info: 'text-content-info',
-      success: 'text-content-success',
-      warning: 'text-content-warning',
-      danger: 'text-content-danger',
+      // color.component.toast.neutral.content
+      neutral: 'text-content-neutral-on-strong',
+      info: 'text-content-info-on-subtle',
+      success: 'text-content-success-on-subtle',
+      warning: 'text-content-warning-on-subtle',
+      danger: 'text-content-danger-on-subtle',
     },
   },
   defaultVariants: {
@@ -147,14 +169,15 @@ export const toastLabelVariants = cva(['text-base font-medium'], {
   },
 });
 
-export const toastDescriptionVariants = cva(['text-sm text-content-primary'], {
+export const toastDescriptionVariants = cva(['text-sm'], {
   variants: {
     color: {
-      neutral: 'text-content-primary',
-      info: 'text-content-info',
-      success: 'text-content-success',
-      warning: 'text-content-warning',
-      danger: 'text-content-danger',
+      // color.component.toast.neutral.content
+      neutral: 'text-content-neutral-on-strong',
+      info: 'text-content-info-on-subtle',
+      success: 'text-content-success-on-subtle',
+      warning: 'text-content-warning-on-subtle',
+      danger: 'text-content-danger-on-subtle',
     },
   },
   defaultVariants: {
@@ -165,7 +188,8 @@ export const toastDescriptionVariants = cva(['text-sm text-content-primary'], {
 export const toastIconVariants = cva(['size-5'], {
   variants: {
     color: {
-      neutral: 'text-content-primary',
+      // color.component.toast.neutral.content
+      neutral: 'text-content-neutral-on-strong',
       info: 'text-content-info',
       success: 'text-content-success',
       warning: 'text-content-warning',
@@ -177,6 +201,21 @@ export const toastIconVariants = cva(['size-5'], {
   },
 });
 
+export const toastActionRootVariants = cva([
+  'border-content-neutral-on-strong', // color.component.toast.neutral.action
+  NEUTRAL_ON_STRONG_INTERACTION,
+]);
+
+export const toastActionLabelVariants = cva([
+  'text-content-neutral-on-strong', // color.component.toast.neutral.action
+]);
+
+export const toastCloseRootVariants = cva([NEUTRAL_ON_STRONG_INTERACTION]);
+
+export const toastCloseIconVariants = cva([
+  'text-content-neutral-on-strong', // color.component.toast.neutral.content
+]);
+
 export const toastStyleSheet = StyleSheet.create({
   root: {
     borderCurve: 'continuous',

package/src/components/Toast/types.ts

@@ -186,6 +186,15 @@ export interface ToastProps extends ToastRootProps, Omit<ToastComponentProps, 'i
    * @default true
    */
   isAnimatedStyleActive?: boolean;
+  /**
+   * Laid out automatically: the first `Toast.Icon` at the start, `Toast.Action`
+   * and `Toast.Close` at the end, and everything else in a text column between
+   * them. Additional `Toast.Icon` children are dropped. `Toast.Icon`,
+   * `Toast.Action`, and `Toast.Close` must be **direct** children — wrapping
+   * them in `memo()` or an HOC hides them from the layout, and they render in
+   * the text column instead.
+   */
+  children?: React.ReactNode;
 }
 
 /**
@@ -219,7 +228,7 @@ export interface ToastDescriptionProps {
 /**
  * Props for the Toast.Icon component
  */
-export interface ToastIconProps extends Omit<IconProps, 'children' | 'as'> {
+export interface ToastIconProps extends Omit<IconProps, 'children' | 'as' | 'color'> {
   asChild?: boolean;
   /**
    * Forge icon component to render. Required unless `asChild` is set.

package/src/components/ToggleButton/index.tsx

@@ -157,7 +157,7 @@ ToggleButtonLabel.displayName = 'ToggleButton.Label';
 // STYLED ICON COMPONENT
 // =============================================================================
 
-export interface ToggleButtonIconProps extends Omit<IconProps, 'children' | 'as'> {
+export interface ToggleButtonIconProps extends Omit<IconProps, 'children' | 'as' | 'color'> {
   /** Render a custom element instead of the default icon. */
   asChild?: boolean;
   /** Forge icon component to render. */
@@ -333,14 +333,16 @@ const ToggleButtonGroup = forwardRef<View, ToggleButtonGroupProps>(
   },
 );
 
-ToggleButtonGroup.displayName = 'ToggleButtonGroup';
+ToggleButtonGroup.displayName = 'ToggleButton.Group';
 
-export const ToggleButton = Object.assign(ToggleButtonRoot, {
-  Label: ToggleButtonLabel,
-  Icon: ToggleButtonIcon,
-}) as typeof ToggleButtonRoot & {
+type ToggleButtonCompoundComponent = typeof ToggleButtonRoot & {
   Label: typeof ToggleButtonLabel;
   Icon: typeof ToggleButtonIcon;
+  Group: typeof ToggleButtonGroup;
 };
 
-export { ToggleButtonGroup };
+export const ToggleButton = Object.assign(ToggleButtonRoot, {
+  Label: ToggleButtonLabel,
+  Icon: ToggleButtonIcon,
+  Group: ToggleButtonGroup,
+}) as ToggleButtonCompoundComponent;

package/src/components/index.ts

@@ -10,6 +10,12 @@ export * from './Card';
 export * from './Carousel';
 export * from './Checkbox';
 export * from './Chip';
+export * from './ColorArea';
+export * from './ColorField';
+export * from './ColorPicker';
+export * from './ColorSlider';
+export { ColorSwatch, type ColorSwatchProps, type ColorSwatchVariantProps } from './ColorSwatch';
+export * from './ColorSwatchPicker';
 export * from './CurrencyInput';
 export * from './DateField';
 export * from './Calendar';
@@ -26,6 +32,7 @@ export * from './Divider';
 export * from './Drawer';
 export * from './Field';
 export * from './Form';
+export * from './FullScreenDialog';
 export * from './Image';
 export * from './InsuranceDisclosure';
 export * from './Input';

package/src/components/picker/styles.ts

@@ -1,8 +1,12 @@
 import { Platform } from 'react-native';
+import { MODAL_OVERLAY_Z_INDEX } from '@cdx-ui/primitives';
 import { cva } from '@cdx-ui/utils';
 
-/** Keeps the picker popover above app chrome and other absolutely-positioned surfaces. */
-export const PICKER_POPOVER_Z_INDEX = 9999;
+/**
+ * Modal layer, so on web a popover opened from a `Dialog` or `FullScreenDialog` paints above it:
+ * equal z-index, and the popover mounts later in `document.body`.
+ */
+export const PICKER_POPOVER_Z_INDEX = MODAL_OVERLAY_Z_INDEX;
 
 export const pickerPopoverContentVariants = cva([
   'bg-surface-primary',

package/src/components/picker/surfaces.tsx

@@ -2,10 +2,12 @@ import { useCallback, useEffect, useRef, useState, type ReactNode, type RefObjec
 import { ScrollView, View } from 'react-native';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import {
+  dataAttributes,
   OverlayContainer,
   useAnchoredOverlay,
   useDismissOverlay,
   useEscapeKey,
+  type OverlayWidthPolicy,
 } from '@cdx-ui/primitives';
 import { cn, mergeRefs } from '@cdx-ui/utils';
 import { Dialog } from '../Dialog';
@@ -107,6 +109,9 @@ interface PickerPopoverSurfaceProps {
   triggerRef?: RefObject<View | null>;
   children: ReactNode;
   className?: string;
+  contentClassName?: string;
+  dataSlot?: string;
+  width?: OverlayWidthPolicy;
 }
 
 export function PickerPopoverSurface({
@@ -117,6 +122,9 @@ export function PickerPopoverSurface({
   triggerRef,
   children,
   className,
+  contentClassName,
+  dataSlot,
+  width = 'anchor',
 }: PickerPopoverSurfaceProps) {
   const contentRef = useRef<View>(null);
   const [dismissEnabled, setDismissEnabled] = useState(false);
@@ -144,7 +152,7 @@ export function PickerPopoverSurface({
     placement: 'bottom-start',
     offset: 4,
     collisionBehavior: 'flip-shift',
-    width: 'anchor',
+    width,
   });
 
   const excludeRefs = triggerRef ? [anchorRef, triggerRef] : [anchorRef];
@@ -168,8 +176,13 @@ export function PickerPopoverSurface({
         className={cn(pickerPopoverContentVariants(), className)}
         style={style}
         accessibilityViewIsModal
+        {...dataAttributes({ slot: dataSlot })}
       >
-        <ScrollView scrollEventThrottle={16} showsVerticalScrollIndicator={false}>
+        <ScrollView
+          contentContainerClassName={contentClassName}
+          scrollEventThrottle={16}
+          showsVerticalScrollIndicator={false}
+        >
           {children}
         </ScrollView>
       </View>

package/src/components/sheet-header/index.tsx

@@ -0,0 +1,148 @@
+import { forwardRef, type ComponentRef, type ReactNode, type Ref } from 'react';
+import { Platform, View, type ViewProps } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import { ArrowBack, Close, type ForgeIcon } from '@cdx-ui/icons';
+import { Heading } from '../Heading';
+import { IconButton } from '../IconButton';
+import { Text } from '../Text';
+import {
+  SHEET_HEADER_BUTTON_SPACER,
+  SHEET_HEADER_DEFAULT_BACKGROUND,
+  SHEET_HEADER_FOCUSABLE_TITLE,
+  sheetHeaderVariants,
+} from './styles';
+
+// Shared back / title / close header row for sheet-style surfaces. Not exported from the package.
+
+const WEB_PROGRAMMATIC_FOCUS = Platform.OS === 'web' ? { tabIndex: -1 } : undefined;
+
+export type SheetHeaderTitleRef = ComponentRef<typeof Heading>;
+
+export interface SheetHeaderProps extends Omit<ViewProps, 'children'> {
+  title?: string;
+  subtitle?: string;
+  children?: ReactNode;
+  className?: string;
+  onClose?: () => void;
+  closeAccessibilityLabel?: string;
+  onBack?: () => void;
+  backAccessibilityLabel?: string;
+  /** `nativeID` for the default title, so a host surface can point `aria-labelledby` at it. */
+  titleNativeID?: string;
+  /** Ref to the default title. Not attached when `children` replaces the title. */
+  titleRef?: Ref<SheetHeaderTitleRef>;
+  /** Lets the host move focus to the default title. On web it gets `tabIndex={-1}`, so it stays out of the tab order. */
+  titleFocusable?: boolean;
+  /** Replaces the default header surface class. */
+  backgroundClassName?: string;
+}
+
+export const SheetHeader = forwardRef<View, SheetHeaderProps>(
+  (
+    {
+      title,
+      subtitle,
+      children,
+      className,
+      onClose,
+      closeAccessibilityLabel = 'Close',
+      onBack,
+      backAccessibilityLabel = 'Go back',
+      titleNativeID,
+      titleRef,
+      titleFocusable = false,
+      backgroundClassName = SHEET_HEADER_DEFAULT_BACKGROUND,
+      ...props
+    },
+    ref,
+  ) => {
+    const hasTitle = title !== undefined && title !== '';
+    const hasContent = hasTitle || !!children || !!onBack;
+    const computedClassName = cn(
+      sheetHeaderVariants({ hasTitle: hasContent }),
+      backgroundClassName,
+      className,
+    );
+
+    return (
+      <View ref={ref} className={computedClassName} {...props}>
+        {onBack ? (
+          <SheetHeaderButton
+            as={ArrowBack}
+            onPress={onBack}
+            accessibilityLabel={backAccessibilityLabel}
+          />
+        ) : (
+          <SheetHeaderButtonSpacer />
+        )}
+        <View className="flex-1">
+          {children ??
+            (hasTitle ? (
+              <View>
+                <Heading
+                  ref={titleRef}
+                  size="sm"
+                  className={cn('text-center', titleFocusable && SHEET_HEADER_FOCUSABLE_TITLE)}
+                  nativeID={titleNativeID}
+                  {...(titleFocusable ? WEB_PROGRAMMATIC_FOCUS : undefined)}
+                >
+                  {title}
+                </Heading>
+                {subtitle ? (
+                  <Text size="sm" className="text-center text-content-secondary">
+                    {subtitle}
+                  </Text>
+                ) : null}
+              </View>
+            ) : null)}
+        </View>
+        {onClose ? (
+          <SheetHeaderButton
+            as={Close}
+            onPress={onClose}
+            accessibilityLabel={closeAccessibilityLabel}
+          />
+        ) : (
+          <SheetHeaderButtonSpacer />
+        )}
+      </View>
+    );
+  },
+);
+
+SheetHeader.displayName = 'SheetHeader';
+
+interface SheetHeaderButtonProps {
+  as: ForgeIcon;
+  onPress: () => void;
+  accessibilityLabel: string;
+}
+
+function SheetHeaderButton({ as, onPress, accessibilityLabel }: Readonly<SheetHeaderButtonProps>) {
+  return (
+    <IconButton
+      as={as}
+      variant="solid"
+      color="neutral"
+      size="default"
+      onPress={onPress}
+      hitSlop={12}
+      accessibilityLabel={accessibilityLabel}
+    />
+  );
+}
+
+SheetHeaderButton.displayName = 'SheetHeader.Button';
+
+function SheetHeaderButtonSpacer() {
+  return (
+    <View
+      className={SHEET_HEADER_BUTTON_SPACER}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      aria-hidden
+    />
+  );
+}
+
+SheetHeaderButtonSpacer.displayName = 'SheetHeader.ButtonSpacer';

package/src/components/sheet-header/styles.ts

@@ -0,0 +1,28 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { iconButtonSizeClassNames } from '../IconButton/styles';
+
+/** Surface behind the header row unless the host passes `backgroundClassName`. */
+export const SHEET_HEADER_DEFAULT_BACKGROUND = 'bg-surface-primary';
+
+/** Holds an absent back or close button's place so the title stays centered. */
+export const SHEET_HEADER_BUTTON_SPACER = iconButtonSizeClassNames.default;
+
+/** The title only takes programmatic focus, so it never shows a focus ring. */
+export const SHEET_HEADER_FOCUSABLE_TITLE = 'web:outline-none';
+
+export const sheetHeaderVariants = cva(
+  ['flex-row items-center justify-between min-h-11 px-4 pt-3 pb-2.5', 'text-content-primary'],
+  {
+    variants: {
+      hasTitle: {
+        true: '',
+        false: 'justify-end',
+      },
+    },
+    defaultVariants: {
+      hasTitle: true,
+    },
+  },
+);
+
+export type SheetHeaderVariants = VariantProps<typeof sheetHeaderVariants>;