@cdx-ui/components 0.0.1-beta.13 → 0.0.1-beta.131

package/src/components/OtpInput/index.tsx

@@ -1,11 +1,20 @@
-import type { ComponentProps, ComponentRef, ForwardedRef } from 'react';
-import { forwardRef } from 'react';
-import type { View } from 'react-native';
-import { createOtpInput, type IOtpInputRootProps } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
-import { HStack } from '../Stack/HStack';
+import type { ForwardedRef } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { View, type TextInput, type ViewProps } from 'react-native';
+import {
+  OtpCellIndexProvider,
+  OtpInputField,
+  OtpInputProvider,
+  dataAttributes,
+  mergeDataAttributes,
+  useInputContext,
+  useOtpInput,
+  type IOtpInputRootProps,
+  type OtpInputFieldProps,
+} from '@cdx-ui/primitives';
+import { ParentContext, cn, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Input, type InputProps } from '../Input';
-import type { InputVariantProps } from '../Input/styles';
+import { type InputVariantProps, inputFieldVariants } from '../Input/styles';
 import {
   otpCellVariants,
   otpFieldVariants,
@@ -15,13 +24,24 @@ import {
 
 const SCOPE = 'OTP_INPUT';
 
-const OtpRoot = withStyleContext(HStack, SCOPE);
+const useOtpInputStyleContext = () => useStyleContext(SCOPE) as Partial<InputVariantProps>;
 
-const useOtpInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
+export interface OtpInputCellProps extends ViewProps, InputVariantProps {
+  className?: string;
+  children?: React.ReactNode;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  isDisabled?: boolean;
+}
 
-const OtpStyledCell = forwardRef<View, InputProps>(
-  ({ className, children, ...props }, ref: ForwardedRef<View>) => {
-    const { size, variant } = useOtpInputStyleContext();
+const OtpStyledCell = forwardRef<View, OtpInputCellProps>(
+  (
+    { className, children, variant: variantProp, size: sizeProp, ...props },
+    ref: ForwardedRef<View>,
+  ) => {
+    const context = useOtpInputStyleContext();
+    const variant = variantProp ?? context.variant ?? 'outline';
+    const size = sizeProp ?? context.size ?? 'default';
     return (
       <Input
         ref={ref}
@@ -38,42 +58,137 @@ const OtpStyledCell = forwardRef<View, InputProps>(
 
 OtpStyledCell.displayName = 'OtpInput.Cell';
 
-const OtpStyledField = forwardRef<
-  ComponentRef<typeof Input.Field>,
-  ComponentProps<typeof Input.Field>
->(({ className, ...props }, ref) => {
-  const { size } = useOtpInputStyleContext();
-  return <Input.Field ref={ref} className={cn(otpFieldVariants({ size }), className)} {...props} />;
+export type OtpInputFieldStyledProps = OtpInputFieldProps & { className?: string };
+
+/**
+ * Bridges OtpInputField focus/blur events to the parent Input's context so
+ * InputRoot emits `data-focus=true` and the `border-stroke-action` CSS activates.
+ * The primitive OtpInputField doesn't know about InputContext — that coupling
+ * belongs here in the styled layer.
+ */
+const OtpStyledField = forwardRef<TextInput, OtpInputFieldStyledProps>((props, ref) => {
+  const { setIsFocused } = useInputContext();
+  return (
+    <OtpInputField
+      ref={ref}
+      {...props}
+      onFocus={(e) => {
+        setIsFocused?.(true);
+        props.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused?.(false);
+        props.onBlur?.(e);
+      }}
+    />
+  );
 });
 
 OtpStyledField.displayName = 'OtpInput.Field';
 
-const OtpPrimitive = createOtpInput({
-  Root: OtpRoot,
-  Cell: OtpStyledCell,
-  Field: OtpStyledField,
-});
-
 export interface OtpInputProps extends Omit<IOtpInputRootProps, 'size'>, OtpInputVariantProps {
   variant?: NonNullable<InputProps['variant']>;
   size?: NonNullable<InputProps['size']>;
   className?: string;
 }
 
-export const OtpInput = forwardRef<View, OtpInputProps>(
-  ({ variant = 'outline', size = 'default', fullWidth = true, className, style, ...rest }, ref) => {
+const OtpInputRoot = forwardRef<View, OtpInputProps>(
+  (
+    {
+      variant = 'outline',
+      size,
+      fullWidth,
+      className,
+      style,
+      cellCount,
+      value,
+      onChangeText,
+      onComplete,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      smsOtpAutofill,
+      filterInput,
+      allowedCharacters,
+      characterPattern,
+      getCellProps,
+      cellTestIdPrefix,
+      accessibilityLabel,
+      ...rest
+    },
+    ref,
+  ) => {
+    const otpContext = useOtpInput({
+      cellCount,
+      value,
+      onChangeText,
+      onComplete,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      smsOtpAutofill,
+      filterInput,
+      allowedCharacters,
+      characterPattern,
+      getCellProps,
+      cellTestIdPrefix,
+      accessibilityLabel,
+    });
+
     const rootClassName = cn(otpRootVariants({ size, fullWidth }), className);
 
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { variant, size } }), [parent, variant, size]);
+
+    const fieldClassName = cn(inputFieldVariants({ size }), otpFieldVariants({ size }));
+
+    const {
+      isDisabled: resolvedDisabled,
+      isInvalid: resolvedInvalid,
+      isReadOnly: resolvedReadOnly,
+    } = otpContext;
+
+    const cells: React.ReactElement[] = [];
+    for (let i = 0; i < cellCount; i++) {
+      cells.push(
+        <OtpCellIndexProvider key={i} value={{ cellIndex: i }}>
+          <OtpStyledCell
+            isDisabled={resolvedDisabled}
+            isInvalid={resolvedInvalid}
+            isReadOnly={resolvedReadOnly}
+          >
+            <OtpStyledField className={fieldClassName} />
+          </OtpStyledCell>
+        </OtpCellIndexProvider>,
+      );
+    }
+
     return (
-      <OtpPrimitive
-        ref={ref}
-        className={rootClassName}
-        style={style}
-        context={{ variant, size }}
-        {...rest}
-      />
+      <ParentContext.Provider value={ctx}>
+        <OtpInputProvider value={otpContext}>
+          <View
+            ref={ref}
+            className={rootClassName}
+            style={style}
+            {...rest}
+            {...mergeDataAttributes(rest, dataAttributes({ slot: 'otp-input' }))}
+          >
+            {cells}
+          </View>
+        </OtpInputProvider>
+      </ParentContext.Provider>
     );
   },
 );
 
-OtpInput.displayName = 'OtpInput';
+OtpInputRoot.displayName = 'OtpInput';
+
+type OtpInputCompoundComponent = typeof OtpInputRoot & {
+  Cell: typeof OtpStyledCell;
+  Field: typeof OtpStyledField;
+};
+
+export const OtpInput = Object.assign(OtpInputRoot, {
+  Cell: OtpStyledCell,
+  Field: OtpStyledField,
+}) as OtpInputCompoundComponent;

package/src/components/OtpInput/styles.ts

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
-export const otpRootVariants = cva('flex-row items-stretch gap-2.5', {
+export const otpRootVariants = cva('flex-row items-stretch gap-2', {
   variants: {
     size: {
       default: '',
@@ -13,28 +13,35 @@ export const otpRootVariants = cva('flex-row items-stretch gap-2.5', {
   },
   defaultVariants: {
     size: 'default',
-    fullWidth: true,
+    fullWidth: false,
   },
 });
 
 /** Narrow cell chrome: overrides Input root `w-full` / wide horizontal padding for one digit. */
-export const otpCellVariants = cva('shrink-0 justify-center', {
-  variants: {
-    size: {
-      default: 'w-12 min-w-12 max-w-12 px-1',
-      small: 'w-10 min-w-10 max-w-10 px-0.5',
+export const otpCellVariants = cva(
+  [
+    'shrink-0 justify-center gap-0',
+    // Figma read-only: surface-secondary + stroke-primary + opacity-disabled (text stays content-primary).
+    'data-[readonly=true]:opacity-[var(--opacity-disabled)]',
+  ],
+  {
+    variants: {
+      size: {
+        default: ['w-11 min-w-11 max-w-11 pl-2 pr-2', 'h-14 min-h-14'],
+        small: ['w-9 min-w-9 max-w-9 pl-1.5 pr-1.5', 'h-10 min-h-10'],
+      },
+    },
+    defaultVariants: {
+      size: 'default',
     },
   },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+);
 
-export const otpFieldVariants = cva('min-w-0 w-full text-center tabular-nums', {
+export const otpFieldVariants = cva('min-w-0 w-full text-center tabular-nums font-medium', {
   variants: {
     size: {
       default: 'text-xl leading-6',
-      small: 'text-base leading-5',
+      small: 'text-lg leading-[calc(var(--spacing-5)+var(--spacing-0-5))]',
     },
   },
   defaultVariants: {

package/src/components/ProgressBar/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
-import { createProgress, type IProgressProps } from '@cdx-ui/primitives';
+import { ProgressBarRoot, ProgressBarIndicator, type IProgressProps } from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import {
   progressBarIndicatorVariants,
@@ -8,11 +8,6 @@ import {
   type ProgressBarTrackVariantProps,
 } from './styles';
 
-const ProgressPrimitive = createProgress({
-  Root: View,
-  Indicator: View,
-});
-
 export interface ProgressBarProps extends IProgressProps, ProgressBarTrackVariantProps {
   readonly className?: string;
 }
@@ -21,19 +16,19 @@ export interface ProgressBarIndicatorProps extends ViewProps {
   readonly className?: string;
 }
 
-const ProgressBarRoot = forwardRef<View, ProgressBarProps>(
+const ProgressBarRootComponent = forwardRef<View, ProgressBarProps>(
   ({ className, style, ...props }, ref) => {
     const trackClass = cn(progressBarTrackVariants(), className);
 
-    return <ProgressPrimitive ref={ref} className={trackClass} style={style} {...props} />;
+    return <ProgressBarRoot ref={ref} className={trackClass} style={style} {...props} />;
   },
 );
 
-ProgressBarRoot.displayName = 'ProgressBar';
+ProgressBarRootComponent.displayName = 'ProgressBar';
 
-const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
+const ProgressBarIndicatorComponent = forwardRef<View, ProgressBarIndicatorProps>(
   ({ className, style, ...props }, ref) => (
-    <ProgressPrimitive.Indicator
+    <ProgressBarIndicator
       ref={ref}
       className={cn(progressBarIndicatorVariants(), className)}
       style={style}
@@ -42,12 +37,12 @@ const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
   ),
 );
 
-ProgressBarIndicator.displayName = 'ProgressBar.Indicator';
+ProgressBarIndicatorComponent.displayName = 'ProgressBar.Indicator';
 
-type ProgressBarCompoundComponent = typeof ProgressBarRoot & {
-  Indicator: typeof ProgressBarIndicator;
+type ProgressBarCompoundComponent = typeof ProgressBarRootComponent & {
+  Indicator: typeof ProgressBarIndicatorComponent;
 };
 
-export const ProgressBar = Object.assign(ProgressBarRoot, {
-  Indicator: ProgressBarIndicator,
+export const ProgressBar = Object.assign(ProgressBarRootComponent, {
+  Indicator: ProgressBarIndicatorComponent,
 }) as ProgressBarCompoundComponent;

package/src/components/ProgressBar/styles.ts

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const progressBarTrackVariants = cva([
-  'w-full flex-row overflow-hidden rounded-full bg-surface-action-tint h-1',
+  'w-full flex-row overflow-hidden rounded-full bg-surface-action-subtle h-1',
 ]);
 
 export const progressBarIndicatorVariants = cva(['rounded-full bg-surface-action-strong']);

package/src/components/ProgressSegmented/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useEffect, useMemo } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { cn } from '@cdx-ui/utils';
 import {
@@ -7,15 +7,32 @@ import {
   type ProgressSegmentedVariants,
 } from './styles';
 
+/* `ProgressSegmentedProps.total` remains in the public API until the next major release. */
+/* eslint-disable @typescript-eslint/no-deprecated */
 export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
   /** Current step (1-based index into the segment count) */
   readonly step: number;
-  /** Total number of segments */
+  /**
+   * Number of segments in the bar. Matches the Figma `segments` variant (2–6 in the design
+   * system file); the prop accepts any positive integer for backward compatibility.
+   */
+  readonly segments?: number;
+  /**
+   * @deprecated Use {@link ProgressSegmentedProps.segments} instead. This alias will be removed
+   * in a future major release.
+   */
   readonly total?: number;
   /** When true, the current step segment is marked as complete rather than in-progress */
   readonly isStepComplete?: boolean;
-  /** Returns the accessibility value text announced by screen readers. Receives the clamped step, total, and whether the step is complete. */
-  readonly getAccessibilityText?: (step: number, total: number, isStepComplete: boolean) => string;
+  /**
+   * Returns the accessibility value text announced by screen readers. Receives the clamped
+   * step, segment count, and whether the step is complete.
+   */
+  readonly getAccessibilityText?: (
+    step: number,
+    segmentCount: number,
+    isStepComplete: boolean,
+  ) => string;
   readonly className?: string;
 }
 
@@ -23,7 +40,8 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
   (
     {
       step,
-      total = 5,
+      segments,
+      total,
       isStepComplete = false,
       getAccessibilityText,
       className,
@@ -32,10 +50,21 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
     },
     ref,
   ) => {
-    const clampedStep = Math.max(0, Math.min(step, total));
+    const segmentCount = segments ?? total ?? 5;
 
-    const segments = useMemo(() => {
-      return Array.from({ length: total }, (_, index) => {
+    // TODO: Remove this once the `total` prop is removed.
+    useEffect(() => {
+      if (__DEV__ && total !== undefined && segments === undefined) {
+        console.warn(
+          '[ProgressSegmented] The `total` prop is deprecated and will be removed in a future major release. Use `segments` instead.',
+        );
+      }
+    }, [total, segments]);
+
+    const clampedStep = Math.max(0, Math.min(step, segmentCount));
+
+    const segmentStates = useMemo(() => {
+      return Array.from({ length: segmentCount }, (_, index) => {
         const segmentIndex = index + 1;
         let state: 'complete' | 'incomplete' | 'inprogress' = 'incomplete';
 
@@ -47,13 +76,13 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
 
         return state;
       });
-    }, [total, clampedStep, isStepComplete]);
+    }, [segmentCount, clampedStep, isStepComplete]);
 
-    let accessibilityText = `Step ${String(clampedStep)} of ${String(total)}`;
+    let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
     if (getAccessibilityText) {
-      accessibilityText = getAccessibilityText(clampedStep, total, isStepComplete);
+      accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
     } else if (isStepComplete) {
-      accessibilityText = `Step ${String(clampedStep)} of ${String(total)}, completed`;
+      accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}, completed`;
     }
 
     return (
@@ -63,14 +92,14 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
         accessibilityLabel={accessibilityLabel}
         accessibilityValue={{
           min: 0,
-          max: total,
+          max: segmentCount,
           now: clampedStep,
           text: accessibilityText,
         }}
         className={cn(progressSegmentedVariants(), className)}
         {...props}
       >
-        {segments.map((state, index) => (
+        {segmentStates.map((state, index) => (
           <View key={index} className={cn(segmentVariants({ state }))} />
         ))}
       </View>
@@ -79,3 +108,5 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
 );
 
 ProgressSegmented.displayName = 'ProgressSegmented';
+
+/* eslint-enable @typescript-eslint/no-deprecated */

package/src/components/ProgressSegmented/styles.ts

@@ -6,9 +6,9 @@ export const segmentVariants = cva(['flex-1 h-1'], {
   variants: {
     state: {
       complete: 'bg-surface-action-strong',
-      incomplete: 'bg-surface-action-tint',
+      incomplete: 'bg-surface-action-subtle',
       inprogress:
-        'bg-gradient-to-r from-surface-action-strong from-50% to-surface-action-tint to-50%',
+        'bg-gradient-to-r from-surface-action-strong from-50% to-surface-action-subtle to-50%',
     },
   },
   defaultVariants: {

package/src/components/QuickActionButton/index.tsx

@@ -0,0 +1,161 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type PressableProps, type TextProps, type ViewProps } from 'react-native';
+import {
+  ButtonRoot,
+  dataAttributes,
+  mergeDataAttributes,
+  type IButtonProps,
+  useButtonContext,
+} from '@cdx-ui/primitives';
+import type { ForgeIcon } from '@cdx-ui/icons';
+import { cn } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import {
+  quickActionButtonGlyphVariants,
+  quickActionButtonIndicatorVariants,
+  quickActionButtonLabelVariants,
+  quickActionButtonRootVariants,
+  type QuickActionButtonVariantProps,
+} from './styles';
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+export interface QuickActionButtonProps extends PressableProps, IButtonProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const QuickActionButtonRoot = forwardRef<View, QuickActionButtonProps>(
+  ({ className, style, children, accessibilityRole = 'button', ...props }, ref) => (
+    <ButtonRoot
+      ref={ref}
+      accessibilityRole={accessibilityRole}
+      className={cn(quickActionButtonRootVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'quick-action-button' }))}
+    >
+      {children}
+    </ButtonRoot>
+  ),
+);
+QuickActionButtonRoot.displayName = 'QuickActionButton';
+
+// =============================================================================
+// INDICATOR
+// Circular container. Auto-rendered by `QuickActionButton.Icon` in standard usage.
+// Exposed as a compound member for Code Connect parity and custom compositions.
+// =============================================================================
+
+export interface QuickActionButtonIndicatorProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const QuickActionButtonIndicator = forwardRef<View, QuickActionButtonIndicatorProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { hover, focus, active, disabled, focusVisible } = useButtonContext();
+    return (
+      <View
+        ref={ref}
+        className={cn(quickActionButtonIndicatorVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'quick-action-button-indicator',
+            hover,
+            focus,
+            active,
+            disabled,
+            focusVisible,
+          }),
+        )}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+QuickActionButtonIndicator.displayName = 'QuickActionButton.Indicator';
+
+// =============================================================================
+// ICON
+// Renders the Indicator circle + icon glyph as one convenient sub-component.
+// This is the primary way consumers add the icon to a QuickActionButton.
+// =============================================================================
+
+export interface QuickActionButtonIconProps {
+  /** Forge icon component to render inside the circular indicator. */
+  as: ForgeIcon;
+  /** Applied to the icon glyph, not the indicator circle. */
+  className?: IconProps['className'];
+  /** Applied to the indicator circle wrapper. */
+  indicatorClassName?: string;
+}
+
+function QuickActionButtonIcon({
+  as: IconComponent,
+  className,
+  indicatorClassName,
+}: QuickActionButtonIconProps) {
+  return (
+    <QuickActionButtonIndicator className={indicatorClassName}>
+      <Icon as={IconComponent} className={cn(quickActionButtonGlyphVariants(), className)} />
+    </QuickActionButtonIndicator>
+  );
+}
+QuickActionButtonIcon.displayName = 'QuickActionButton.Icon';
+
+// =============================================================================
+// LABEL
+// =============================================================================
+
+export interface QuickActionButtonLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const QuickActionButtonLabel = forwardRef<Text, QuickActionButtonLabelProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { disabled } = useButtonContext();
+    return (
+      <Text
+        ref={ref}
+        numberOfLines={2}
+        ellipsizeMode="tail"
+        className={cn(quickActionButtonLabelVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'quick-action-button-label', disabled }),
+        )}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
+QuickActionButtonLabel.displayName = 'QuickActionButton.Label';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type QuickActionButtonCompoundComponent = typeof QuickActionButtonRoot & {
+  Indicator: typeof QuickActionButtonIndicator;
+  Icon: typeof QuickActionButtonIcon;
+  Label: typeof QuickActionButtonLabel;
+};
+
+export const QuickActionButton = Object.assign(QuickActionButtonRoot, {
+  Indicator: QuickActionButtonIndicator,
+  Icon: QuickActionButtonIcon,
+  Label: QuickActionButtonLabel,
+}) as QuickActionButtonCompoundComponent;
+
+export type { QuickActionButtonVariantProps };

package/src/components/QuickActionButton/styles.ts

@@ -0,0 +1,42 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const quickActionButtonRootVariants = cva([
+  'flex flex-col items-center gap-2',
+  'min-w-[60px] max-w-20',
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  DISABLED_CURSOR,
+]);
+
+export const quickActionButtonIndicatorVariants = cva([
+  'flex items-center justify-center shrink-0',
+  'h-[60px] w-[60px] min-h-[60px] min-w-[60px] p-2',
+  'rounded-[var(--border-radius-round)]',
+  'border border-stroke-secondary',
+  'bg-surface-primary',
+  'overflow-hidden',
+  TRANSITION_COLORS,
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  Platform.select({
+    default: 'data-[active=true]:bg-surface-primary-active',
+    web: [
+      'data-[hover=true]:bg-surface-primary-hover',
+      'data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
+      'web:data-[focus-visible=true]:ring-2',
+      'web:data-[focus-visible=true]:ring-[var(--color-stroke-ring)]',
+      'web:data-[focus-visible=true]:ring-offset-2',
+    ].join(' '),
+  }),
+]);
+
+export const quickActionButtonGlyphVariants = cva(['size-6', 'text-content-action']);
+
+export const quickActionButtonLabelVariants = cva([
+  'body-sm font-medium',
+  'text-content-primary text-center',
+  'w-full min-w-0 max-w-20 self-center',
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+]);
+
+export type QuickActionButtonVariantProps = VariantProps<typeof quickActionButtonRootVariants>;