@cdx-ui/components 0.1.4 → 0.1.6

package/src/components/ToggleButton/index.tsx

@@ -0,0 +1,346 @@
+import React, { forwardRef, useMemo, type ReactElement, type ReactNode } from 'react';
+import { Text, View, type StyleProp, type TextProps, type ViewStyle } from 'react-native';
+import {
+  Slot,
+  ToggleButtonGroup as ToggleButtonGroupPrimitive,
+  ToggleButtonRoot as ToggleButtonRootPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  useToggleButtonContext,
+  type IToggleButtonGroupMultipleProps,
+  type IToggleButtonGroupSingleProps,
+  type IToggleButtonProps,
+} from '@cdx-ui/primitives';
+import {
+  cn,
+  flattenChildren,
+  ParentContext,
+  useParentContext,
+  useStyleContext,
+} from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
+import {
+  toggleButtonAttachedVariants,
+  toggleButtonGroupVariants,
+  toggleButtonIconVariants,
+  toggleButtonLabelVariants,
+  toggleButtonRootVariants,
+  type ToggleButtonAttachedPosition,
+  type ToggleButtonGroupVariantProps,
+  type ToggleButtonVariantProps,
+} from './styles';
+
+const SCOPE = 'TOGGLE_BUTTON';
+
+const useToggleButtonStyleContext = () => useStyleContext(SCOPE) as ToggleButtonVariantProps;
+
+// =============================================================================
+// STYLED ROOT COMPONENT
+// =============================================================================
+
+export type ToggleButtonVariant = 'default' | 'outline' | 'ghost';
+export type ToggleButtonShape = NonNullable<ToggleButtonVariantProps['shape']>;
+
+export interface ToggleButtonProps extends IToggleButtonProps {
+  /**
+   * Visual style. `default` is a muted filled surface; `outline` adds a border; `ghost` is transparent.
+   * @default 'default'
+   */
+  variant?: ToggleButtonVariant;
+  /**
+   * Corner geometry — mirrors `Avatar.shape`.
+   * @default 'circle'
+   */
+  shape?: ToggleButtonShape;
+  /**
+   * Height and padding scale.
+   * @default 'default'
+   */
+  size?: 'small' | 'default' | 'large';
+  className?: string;
+  children?: ReactNode;
+}
+
+const ToggleButtonRoot = forwardRef<View, ToggleButtonProps>(
+  (
+    {
+      variant = 'default',
+      shape = 'circle',
+      size = 'default',
+      className,
+      children,
+      style,
+      isDisabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const content = flattenChildren(children);
+    const iconOnly =
+      content.length === 1 &&
+      React.isValidElement(content[0]) &&
+      content[0].type === ToggleButtonIcon;
+    const computedClassName = cn(
+      toggleButtonRootVariants({ variant, shape, size, iconOnly }),
+      className,
+    );
+
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { variant, shape, size } }),
+      [parent, variant, shape, size],
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <ToggleButtonRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          isDisabled={isDisabled}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'toggle-button' }))}
+        >
+          {children}
+        </ToggleButtonRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+ToggleButtonRoot.displayName = 'ToggleButton';
+
+// =============================================================================
+// STYLED LABEL COMPONENT
+// =============================================================================
+
+export interface ToggleButtonLabelProps extends TextProps {
+  /** Render the consumer's child in place of the default `Text` host. */
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const ToggleButtonLabel = forwardRef<Text, ToggleButtonLabelProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { size } = useToggleButtonStyleContext();
+    const { isSelected, hover, active } = useToggleButtonContext();
+    const computedClassName = cn(toggleButtonLabelVariants({ size }), className);
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'toggle-button-label',
+            selected: isSelected,
+            hover,
+            active,
+          }),
+        )}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+ToggleButtonLabel.displayName = 'ToggleButton.Label';
+
+// =============================================================================
+// STYLED ICON COMPONENT
+// =============================================================================
+
+export interface ToggleButtonIconProps extends Omit<IconProps, 'children' | 'as'> {
+  /** Render a custom element instead of the default icon. */
+  asChild?: boolean;
+  /** Forge icon component to render. */
+  as?: IconProps['as'];
+  /** Leading or trailing placement relative to the label. */
+  position?: IconSlotPosition;
+  /**
+   * Render the filled icon variant. Defaults to the toggle's selected state.
+   * Icons without filled path data stay outlined.
+   */
+  filled?: boolean;
+}
+
+const ToggleButtonIcon = ({
+  asChild,
+  className,
+  style,
+  as,
+  position,
+  filled,
+  ...props
+}: ToggleButtonIconProps) => {
+  const { size } = useToggleButtonStyleContext();
+  const { isSelected, hover, active } = useToggleButtonContext();
+  const computedClassName = cn(toggleButtonIconVariants({ size }), className);
+  const resolvedFilled = filled ?? isSelected;
+  const interactionAttributes = dataAttributes({
+    slot: 'toggle-button-icon',
+    selected: isSelected,
+    hover,
+    active,
+  });
+
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        filled={resolvedFilled}
+        {...props}
+        {...mergeDataAttributes(props, interactionAttributes, positionToDataIcon(position))}
+      />
+    );
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      filled={resolvedFilled}
+      {...props}
+      {...mergeDataAttributes(props, interactionAttributes, positionToDataIcon(position))}
+    />
+  );
+};
+
+ToggleButtonIcon.displayName = 'ToggleButton.Icon';
+
+// =============================================================================
+// STYLED GROUP COMPONENT
+// =============================================================================
+
+type ToggleButtonGroupSingleStyledProps = IToggleButtonGroupSingleProps &
+  ToggleButtonGroupVariantProps & {
+    className?: string;
+    children: ReactElement | ReactElement[];
+    /**
+     * Collapse gaps and adjoining corners into a single segmented control.
+     * @default true
+     */
+    isAttached?: boolean;
+  };
+
+type ToggleButtonGroupMultipleStyledProps = IToggleButtonGroupMultipleProps &
+  ToggleButtonGroupVariantProps & {
+    className?: string;
+    children: ReactElement | ReactElement[];
+    /**
+     * Collapse gaps and adjoining corners into a single segmented control.
+     * @default true
+     */
+    isAttached?: boolean;
+  };
+
+export type ToggleButtonGroupProps =
+  | ToggleButtonGroupSingleStyledProps
+  | ToggleButtonGroupMultipleStyledProps;
+
+type AttachedOrientation = NonNullable<ToggleButtonGroupVariantProps['orientation']>;
+
+const ATTACHED_RADIUS_STYLES: Record<
+  AttachedOrientation,
+  Record<ToggleButtonAttachedPosition, ViewStyle | undefined>
+> = {
+  horizontal: {
+    only: undefined,
+    first: { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
+    middle: { borderRadius: 0 },
+    last: { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 },
+  },
+  vertical: {
+    only: undefined,
+    first: { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 },
+    middle: { borderRadius: 0 },
+    last: { borderTopLeftRadius: 0, borderTopRightRadius: 0 },
+  },
+};
+
+function getAttachedPosition(index: number, count: number): ToggleButtonAttachedPosition {
+  if (count <= 1) {
+    return 'only';
+  }
+  if (index === 0) {
+    return 'first';
+  }
+  return index === count - 1 ? 'last' : 'middle';
+}
+
+const ToggleButtonGroup = forwardRef<View, ToggleButtonGroupProps>(
+  (
+    {
+      asChild,
+      className,
+      children,
+      style,
+      orientation = 'horizontal',
+      isAttached = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const childrenArray = React.Children.toArray(flattenChildren(children));
+
+    const computedChildren = isAttached
+      ? childrenArray.map((child, index) => {
+          if (!React.isValidElement<{ className?: string; style?: StyleProp<ViewStyle> }>(child)) {
+            return child;
+          }
+
+          const position = getAttachedPosition(index, childrenArray.length);
+          const radiusStyle = ATTACHED_RADIUS_STYLES[orientation][position];
+
+          return React.cloneElement(child, {
+            className: cn(
+              toggleButtonAttachedVariants({ orientation, position }),
+              child.props.className,
+            ),
+            style: radiusStyle ? [radiusStyle, child.props.style] : child.props.style,
+          });
+        })
+      : childrenArray;
+
+    const groupClassName = cn(toggleButtonGroupVariants({ orientation, isAttached }), className);
+
+    return (
+      <ToggleButtonGroupPrimitive
+        ref={ref}
+        asChild={asChild}
+        className={groupClassName}
+        style={style}
+        orientation={orientation}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'toggle-button-group' }))}
+      >
+        {computedChildren}
+      </ToggleButtonGroupPrimitive>
+    );
+  },
+);
+
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';
+
+export const ToggleButton = Object.assign(ToggleButtonRoot, {
+  Label: ToggleButtonLabel,
+  Icon: ToggleButtonIcon,
+}) as typeof ToggleButtonRoot & {
+  Label: typeof ToggleButtonLabel;
+  Icon: typeof ToggleButtonIcon;
+};
+
+export { ToggleButtonGroup };

package/src/components/ToggleButton/styles.ts

@@ -0,0 +1,191 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+// `data-toggle-state` is a single derived value (see the primitive's `getToggleState`), so these
+// selectors never tie on specificity and match on native, where compound `data-[]` chains don't.
+const selectedTint = [
+  'data-[toggle-state=selected]:bg-surface-action-tint',
+  'data-[toggle-state=selected-active]:bg-surface-action-tint-active',
+  Platform.select({
+    default: '',
+    web: 'data-[toggle-state=selected-hover]:bg-surface-action-tint-hover',
+  }),
+];
+
+const unselectedTint = [
+  'data-[toggle-state=active]:bg-surface-action-tint-active',
+  Platform.select({
+    default: '',
+    web: 'data-[toggle-state=hover]:bg-surface-action-tint-hover',
+  }),
+];
+
+export const toggleButtonRootVariants = cva(
+  [
+    'flex-row items-center justify-center self-start shrink-0 web:inline-flex',
+    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+    TRANSITION_COLORS,
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+    DISABLED_CURSOR,
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+  ],
+  {
+    variants: {
+      variant: {
+        /** Muted filled surface. */
+        default: ['bg-surface-secondary', 'border-0'],
+        outline: [
+          'bg-transparent',
+          'border border-stroke-primary',
+          'web:border-default native:border-[length:var(--border-width-default)]',
+        ],
+        ghost: ['bg-transparent', 'border-0'],
+      },
+      shape: {
+        circle: 'rounded-[var(--border-radius-round)]',
+        rounded: 'rounded-[var(--border-radius-default)]',
+      },
+      size: {
+        small: 'h-8 min-h-8 px-3 gap-1.5',
+        default: 'h-11 min-h-11 px-4 gap-2',
+        large: 'h-12 min-h-12 px-5 gap-2.5',
+      },
+      /** Square footprint when the only content is a single `ToggleButton.Icon`. */
+      iconOnly: {
+        true: 'px-0',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      { iconOnly: true, size: 'small', className: 'w-8 min-w-8' },
+      { iconOnly: true, size: 'default', className: 'w-11 min-w-11' },
+      { iconOnly: true, size: 'large', className: 'w-12 min-w-12' },
+      {
+        variant: 'default',
+        className: [
+          ...selectedTint,
+          'data-[toggle-state=active]:bg-surface-secondary-active',
+          Platform.select({
+            default: '',
+            web: 'data-[toggle-state=hover]:bg-surface-secondary-hover',
+          }),
+        ],
+      },
+      {
+        variant: ['outline', 'ghost'],
+        className: [...selectedTint, ...unselectedTint],
+      },
+      {
+        variant: 'outline',
+        className: 'data-[selected=true]:border-stroke-action',
+      },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      shape: 'circle',
+      size: 'default',
+      iconOnly: false,
+    },
+  },
+);
+
+/**
+ * Classes for an item inside an attached group. Every item after the first overlaps its
+ * predecessor by one border width so adjoining borders collapse into a single line; the
+ * interacted or selected item is raised so its full border stays visible.
+ */
+export const toggleButtonAttachedVariants = cva(
+  ['relative data-[hover=true]:z-[1] data-[active=true]:z-[1] data-[selected=true]:z-[1]'],
+  {
+    variants: {
+      orientation: {
+        horizontal: '',
+        vertical: 'self-stretch',
+      },
+      position: {
+        only: '',
+        first: '',
+        middle: '',
+        last: '',
+      },
+    },
+    compoundVariants: [
+      {
+        orientation: 'horizontal',
+        position: ['middle', 'last'],
+        className: '-ms-[length:var(--border-width-default)]',
+      },
+      {
+        orientation: 'vertical',
+        position: ['middle', 'last'],
+        className: '-mt-[length:var(--border-width-default)]',
+      },
+    ],
+    defaultVariants: {
+      orientation: 'horizontal',
+      position: 'only',
+    },
+  },
+);
+
+export type ToggleButtonAttachedPosition = NonNullable<
+  VariantProps<typeof toggleButtonAttachedVariants>['position']
+>;
+
+export const toggleButtonGroupVariants = cva(['self-start'], {
+  variants: {
+    orientation: {
+      horizontal: 'flex-row',
+      vertical: 'flex-col items-stretch w-max max-w-full',
+    },
+    isAttached: {
+      true: 'gap-0',
+      false: 'gap-2',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    isAttached: true,
+  },
+});
+
+// Label and Icon emit their own `data-selected` / `data-active` / `data-hover` because
+// native Uniwind cannot style a child from its parent's data attributes.
+const contentColor = [
+  'text-content-primary',
+  'data-[selected=true]:text-content-action',
+  Platform.select({
+    default: 'data-[active=true]:text-content-action',
+    web: 'data-[hover=true]:text-content-action data-[active=true]:text-content-action',
+  }),
+];
+
+export const toggleButtonLabelVariants = cva(['shrink-0 font-medium', ...contentColor], {
+  variants: {
+    size: {
+      small: 'text-sm',
+      default: 'text-base',
+      large: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const toggleButtonIconVariants = cva(['shrink-0', ...contentColor], {
+  variants: {
+    size: {
+      small: 'size-4',
+      default: 'size-5',
+      large: 'size-6',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export type ToggleButtonVariantProps = VariantProps<typeof toggleButtonRootVariants>;
+export type ToggleButtonGroupVariantProps = VariantProps<typeof toggleButtonGroupVariants>;

package/src/components/index.ts

@@ -50,6 +50,7 @@ export * from './Tabs';
 export * from './Table';
 export * from './Textarea';
 export * from './Tile';
+export * from './ToggleButton';
 export * from './Toast';
 export * from './Tooltip';
 export { HStack, VStack } from './Stack';