@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/components/client/Checkbox.tsx

@@ -0,0 +1,377 @@
+import type {
+  CheckboxSize,
+  CheckboxValue,
+  CheckboxVariant,
+  UniversalCheckboxProps,
+} from '@yahoo/uds/tokens';
+import { Check, Minus } from '@yahoo/uds-icons';
+import { m, useReducedMotion } from 'motion/react';
+import type { ChangeEvent } from 'react';
+import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+
+import { cx, getStyles } from '../../styles/styler';
+import { Box } from '../Box';
+import { FormLabel } from '../FormLabel';
+import { Icon } from '../Icon';
+import { SpringMotionConfig } from './SpringMotionConfig';
+
+type NativeInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'checked' | 'size' | 'height' | 'width' | 'color'
+>;
+
+type CheckboxChangeEvent = ChangeEvent<HTMLInputElement>;
+
+interface CheckboxProps extends NativeInputProps, UniversalCheckboxProps {
+  layerClassNames?: {
+    root?: string;
+    checkbox?: string;
+    label?: string;
+  };
+}
+
+const VARIANTS = ['primary', 'secondary'] satisfies CheckboxVariant[];
+const SIZES = ['sm', 'md'] satisfies CheckboxSize[];
+
+const VARIANT_ERROR_MAP: Record<CheckboxVariant, 'alert' | 'alert-secondary'> = {
+  primary: 'alert',
+  secondary: 'alert-secondary',
+};
+
+const isIndeterminate = (checked?: CheckboxValue) => checked === 'indeterminate';
+
+const getIcon = (checked: CheckboxProps['checked']) => {
+  if (isIndeterminate(checked)) {
+    return Minus;
+  }
+
+  return Check;
+};
+
+const MotionBox = m.create(Box);
+
+const hoverTransition = { layoutVariant: 'smooth', layoutSpeed: '3' } as const;
+const pressTransition = { layoutVariant: 'veryBouncy', layoutSpeed: '4' } as const;
+
+/**
+ * **⚙️️ An checkbox.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A checkbox component allows users to select one or multiple options from a set. It represents a binary state, typically as checked or unchecked, and optionally includes a third "indeterminate" state to indicate partial selection.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
+ *
+ * @usage
+ * - Forms: checkbox
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Checkbox } from "@yahoo/uds";
+ *
+ * <Checkbox label="Name" required />
+ *```
+ *
+ * @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
+ **/
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  {
+    id,
+    checked: checkedProp,
+    defaultChecked,
+    onChange,
+    label,
+    labelPosition = 'start',
+    variant: variantProp = 'primary',
+    size = 'md',
+    reduceMotion: forceReduceMotion,
+    disabled,
+    required,
+    hasError,
+    className,
+    layerClassNames,
+    ...checkboxProps
+  },
+  parentRef,
+) {
+  const generatedId = useId();
+  const uid = id ?? `uds-input-${generatedId}`;
+
+  const innerRef = useRef<HTMLInputElement | null>(null);
+
+  /**
+   * State
+   */
+  const isControlled = checkedProp !== undefined;
+  const [checked, setChecked] = useState(isControlled ? checkedProp : defaultChecked);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+
+  /**
+   * Derived values
+   */
+  const variant = useMemo(
+    () => (hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp),
+    [hasError, variantProp],
+  );
+
+  const showHoverEffect = !disabled && isHovered;
+  const showPressedEffect = !disabled && isPressed;
+
+  const scale = useMemo(() => {
+    if (showPressedEffect) {
+      return 0.9;
+    }
+
+    if (showHoverEffect) {
+      return 1.1;
+    }
+
+    return 1;
+  }, [showPressedEffect, showHoverEffect]);
+
+  const checkOpacity = useMemo(() => {
+    if (!checked) {
+      return 'opacity-0';
+    }
+
+    if (showPressedEffect) {
+      return 'opacity-55';
+    }
+
+    return 'opacity-100';
+  }, [checked, showPressedEffect]);
+
+  const motionAnimate = useMemo(
+    () => ({
+      scale,
+    }),
+    [scale],
+  );
+
+  const motionTransition = useMemo(
+    () => (isPressed ? pressTransition : hoverTransition),
+    [isPressed],
+  );
+
+  /**
+   * Handlers
+   */
+  const handleChange = useCallback(
+    (e: CheckboxChangeEvent) => {
+      onChange?.(e);
+
+      // If uncontrolled, immediate change internal state.
+      if (!isControlled) {
+        setChecked(e.target.checked);
+      }
+    },
+    [isControlled, onChange],
+  );
+
+  const handleHoverStart = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleHoverEnd = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  const handleTapStart = useCallback(() => {
+    setIsPressed(true);
+  }, []);
+
+  const handleTapEnd = useCallback(() => {
+    setIsPressed(false);
+  }, []);
+
+  /**
+   * Helpers
+   */
+  const setDOMIndeterminate = (checked_: CheckboxProps['checked']) => {
+    if (!innerRef.current) {
+      return;
+    }
+
+    innerRef.current.indeterminate = isIndeterminate(checked_);
+  };
+
+  // Motion
+  const prefersReducedMotion = useReducedMotion();
+  const reduceMotion = forceReduceMotion ? 'always' : 'user';
+
+  const cssAnimationDuration =
+    prefersReducedMotion || forceReduceMotion ? 'duration-0' : 'duration-120';
+
+  /**
+   * Effects
+   */
+  // Reset state if prop changes.
+  useEffect(() => {
+    if (isControlled) {
+      setChecked(checkedProp);
+    }
+  }, [checkedProp, isControlled]);
+
+  // When the checked prop changes, also set DOM indeterminate state.
+  useEffect(() => {
+    setDOMIndeterminate(checked);
+  }, [checked]);
+
+  const valueState = isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked';
+
+  const classNames = {
+    root: getStyles({
+      checkboxSizeRoot: size,
+      checkboxVariantRoot: variant,
+      checkboxVariantValueRoot: valueState,
+      display: 'flex',
+      flexDirection: labelPosition === 'start' ? 'row' : 'row-reverse',
+      alignItems: 'center',
+      className: cx(
+        {
+          'cursor-pointer': !disabled,
+          'cursor-default': disabled,
+          'opacity-50': disabled,
+        },
+
+        className,
+        layerClassNames?.root,
+      ),
+    }),
+
+    checkbox: getStyles({
+      checkboxSizeCheckbox: size,
+      checkboxVariantCheckbox: variant,
+      checkboxVariantValueCheckbox: valueState,
+      className: cx(
+        'border',
+        'rounded-[4px]',
+        'uds-ring',
+        'uds-ring-within',
+
+        cssAnimationDuration,
+        'transition-[background-color,border-color,box-shadow]',
+
+        layerClassNames?.checkbox,
+      ),
+    }),
+
+    check: getStyles({
+      checkboxVariantCheckboxIcon: variant,
+      checkboxVariantValueCheckboxIcon: valueState,
+      className: cx(
+        'pointer-events-none',
+
+        checkOpacity,
+
+        cssAnimationDuration,
+        'transition-opacity',
+      ),
+    }),
+
+    htmlCheckbox: cx(
+      // Control the cursor at the top of the component
+      // and don't let the input override it back to the
+      // default value.
+      'cursor-[inherit]',
+
+      // Overlay the invisible checkbox over the designed
+      // checkbox so that it can be clicked directly.
+      'absolute',
+      'opacity-0',
+      'top-1/2',
+      'left-1/2',
+      'w-[calc(100%+2px)]',
+      'h-[calc(100%+2px)]',
+      'transform',
+      'translate-x-[-50%]',
+      'translate-y-[-50%]',
+    ),
+
+    label: cx(labelPosition === 'start' ? 'text-start' : 'text-end', layerClassNames?.label),
+  };
+
+  const RootElement = label ? m.label : m.div;
+
+  return (
+    <SpringMotionConfig reducedMotion={reduceMotion} {...motionTransition}>
+      <RootElement
+        className={classNames.root}
+        data-testid="container"
+        onHoverStart={handleHoverStart}
+        onHoverEnd={handleHoverEnd}
+        onTapStart={handleTapStart}
+        onTap={handleTapEnd}
+        onTapCancel={handleTapEnd}
+        tabIndex={-1}
+      >
+        <MotionBox
+          position="relative"
+          className={classNames.checkbox}
+          alignItems="center"
+          justifyContent="center"
+          flex="none"
+          animate={motionAnimate}
+        >
+          <input
+            type="checkbox"
+            // Required for Safari to render a focus ring
+            tabIndex={0}
+            // These are standard HTML input props for customization.
+            {...checkboxProps}
+            //
+            // Provide a ref to the underlying input element for customization.
+            ref={(ref) => {
+              // Set internal ref.
+              innerRef.current = ref;
+
+              // Now that we have the ref, apply the current state.
+              setDOMIndeterminate(checked);
+
+              // Forward the ref to parent.
+              if (typeof parentRef === 'function') {
+                parentRef(ref);
+              } else if (parentRef !== null) {
+                parentRef.current = ref;
+              }
+            }}
+            //
+            // Core props for the checkbox.
+            id={uid}
+            disabled={disabled}
+            required={required}
+            aria-invalid={hasError}
+            checked={isControlled ? (isIndeterminate(checked) ? false : checked) : undefined}
+            defaultChecked={isControlled ? undefined : defaultChecked}
+            onChange={handleChange}
+            //
+            // styles
+            className={classNames.htmlCheckbox}
+          />
+
+          <Icon name={getIcon(checked)} size="sm" className={classNames.check} />
+        </MotionBox>
+
+        {label && (
+          <FormLabel
+            as="div"
+            variant="inherit"
+            color="inherit"
+            required={required}
+            label={label}
+            className={classNames.label}
+          />
+        )}
+      </RootElement>
+    </SpringMotionConfig>
+  );
+});
+
+// Need to re-set this because of the forwardRef wrapper
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox, type CheckboxProps, SIZES, VARIANTS };

package/src/components/client/Chip/Chip.tsx

@@ -0,0 +1,81 @@
+import React, { forwardRef } from 'react';
+
+import type { UniversalChipProps } from '../../../tokens';
+import type { ChipBaseProps } from './ChipBase';
+import { ChipButton } from './ChipButton';
+import { ChipDismissible } from './ChipDismissible';
+import type { ChipLinkProps } from './ChipLink';
+import { ChipLink } from './ChipLink';
+import { ChipToggle } from './ChipToggle';
+
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+
+interface ChipProps extends UniversalChipProps, HtmlDivProps {
+  slotProps?: ChipBaseProps['slotProps'] & {
+    anchor: Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>;
+  };
+}
+
+/**
+ * **⚙️️ A chip.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Chips help people make selections, filter content, link out to other spaces or trigger actions. These actions are contextually driven and are not persistent across the product experiences differing them from buttons.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/chip Chip Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Chip } from "@yahoo/uds";
+ *
+ * <Chip>Label</Chip>
+ *```
+ *
+ * @related [Badge](https://uds.build/docs/components/badge), [Link](https://uds.build/docs/components/link).
+ **/
+const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(
+  { onClick, href, linkProps, onDismiss, onToggle, isToggled, slotProps, ...rest }: ChipProps,
+  ref,
+) {
+  const { anchor: anchorProps, ...restSlotProps } = slotProps ?? {};
+
+  if (onDismiss) {
+    return <ChipDismissible ref={ref} onDismiss={onDismiss} slotProps={restSlotProps} {...rest} />;
+  }
+
+  if (onToggle) {
+    return (
+      <ChipToggle
+        ref={ref}
+        onToggle={onToggle}
+        isToggled={isToggled}
+        slotProps={restSlotProps}
+        {...rest}
+      />
+    );
+  }
+
+  if (href) {
+    return (
+      <ChipLink
+        ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+        href={href}
+        slotProps={restSlotProps}
+        {...(rest as ChipLinkProps)}
+        {...linkProps}
+        {...anchorProps}
+      />
+    );
+  }
+
+  return <ChipButton ref={ref} onClick={onClick} slotProps={restSlotProps} {...rest} />;
+});
+
+// Need to re-set this because of the forwardRef wrapper
+Chip.displayName = 'Chip';
+
+export { Chip, type ChipProps };

package/src/components/client/Chip/ChipBase.tsx

@@ -0,0 +1,151 @@
+import { useReducedMotion } from 'motion/react';
+import React, { forwardRef, useMemo } from 'react';
+
+import { cx, getStyles } from '../../../styles/styler';
+import type {
+  ChipSize,
+  ChipVariant,
+  IconPropsWithSVGProps,
+  UniversalChipBaseProps,
+} from '../../../tokens';
+import { HStack } from '../../HStack';
+import { IconSlot } from '../../IconSlot';
+import type { TextProps } from '../../Text';
+import { Text } from '../../Text';
+
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+
+// Required because of: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69864
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+
+interface ChipBaseProps extends HtmlDivProps, Omit<UniversalChipBaseProps, 'variant'> {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+    text?: Partial<TextProps & DataAttributes>;
+  };
+}
+
+const SIZE_DEFAULT: ChipSize = 'md';
+const VARIANT_DEFAULT: ChipVariant = 'primary';
+const MAX_WIDTH_DEFAULT = 200;
+
+const ChipBase = forwardRef<HTMLDivElement, ChipBaseProps>(function ChipBase(
+  {
+    size = SIZE_DEFAULT,
+    minWidth,
+    maxWidth = MAX_WIDTH_DEFAULT,
+    startIcon,
+    endIcon,
+    as: As = 'div',
+    reduceMotion: forceReduceMotion,
+    disabled = false,
+    className,
+    slotProps,
+    children,
+    ...rest
+  }: ChipBaseProps,
+  ref,
+) {
+  // Motion
+  const prefersReducedMotion = useReducedMotion();
+  const cssAnimationDuration =
+    prefersReducedMotion || forceReduceMotion ? 'duration-0' : 'duration-120';
+
+  const { className: textClassName, ...textProps } = slotProps?.text ?? {};
+  const { className: startIconClassName, ...startIconProps } = slotProps?.startIcon ?? {};
+  const { className: endIconClassName, ...endIconProps } = slotProps?.endIcon ?? {};
+
+  /**
+   * Styles
+   */
+  const classNames = useMemo(
+    () => ({
+      root: getStyles({
+        chipSizeRoot: size,
+
+        className: cx(
+          {
+            'pointer-events-none': disabled,
+            'cursor-default': disabled,
+            'opacity-50': disabled,
+          },
+
+          // Layout
+          'inline-flex',
+          'items-center',
+
+          // focus state
+          'focus-visible:-outline-offset-2',
+          'uds-ring',
+
+          // Animations
+          cssAnimationDuration,
+          'transition-[background-color,outline-color,box-shadow]',
+
+          className,
+        ),
+      }),
+
+      text: cx('truncate', 'whitespace-nowrap', 'text-center', 'flex-1', textClassName),
+
+      icon: getStyles({
+        chipSizeIcon: size,
+      }),
+    }),
+    [className, cssAnimationDuration, disabled, size, textClassName],
+  );
+
+  const inlineStyles = useMemo(
+    () => ({
+      root: { maxWidth: `${maxWidth}px`, ...(minWidth ? { minWidth: `${minWidth}px` } : {}) },
+    }),
+    [maxWidth, minWidth],
+  );
+
+  return (
+    <HStack asChild ref={ref} className={classNames.root} style={inlineStyles.root} {...rest}>
+      <As disabled={disabled}>
+        {startIcon && (
+          <IconSlot
+            icon={startIcon}
+            iconProps={{
+              variant: 'fill',
+              className: cx(classNames.icon, startIconClassName),
+              ...startIconProps,
+            }}
+          />
+        )}
+
+        <Text
+          as="span"
+          color="current"
+          variant="inherit"
+          className={classNames.text}
+          {...textProps}
+        >
+          {children}
+        </Text>
+
+        {endIcon && (
+          <IconSlot
+            icon={endIcon}
+            iconProps={{
+              variant: 'fill',
+              className: cx(classNames.icon, endIconClassName),
+              ...endIconProps,
+            }}
+          />
+        )}
+      </As>
+    </HStack>
+  );
+});
+
+// Need to re-set this because of the forwardRef wrapper
+ChipBase.displayName = 'ChipBase';
+
+export { ChipBase, type ChipBaseProps, VARIANT_DEFAULT };

package/src/components/client/Chip/ChipButton.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef, useMemo } from 'react';
+
+import { getStyles } from '../../../styles/styler';
+import type { UniversalChipButtonProps } from '../../../tokens';
+import { mergeSlotProps } from '../../../utils/mergeSlotProps';
+import type { ChipBaseProps } from './ChipBase';
+import { ChipBase, VARIANT_DEFAULT } from './ChipBase';
+
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onToggle' | 'label'>;
+
+interface ChipButtonProps extends HtmlDivProps, Omit<UniversalChipButtonProps, 'type'> {
+  slotProps?: ChipBaseProps['slotProps'];
+}
+
+const ChipButton = forwardRef<HTMLDivElement, ChipButtonProps>(function ChipButton(
+  { variant = VARIANT_DEFAULT, slotProps, className, ...rest }: ChipButtonProps,
+  ref,
+) {
+  const classNames = useMemo(
+    () => ({
+      root: getStyles({
+        chipLinkVariantRoot: variant,
+        className,
+      }),
+
+      icon: getStyles({
+        chipLinkVariantIcon: variant,
+      }),
+    }),
+    [className, variant],
+  );
+
+  const mergedSlotProps = mergeSlotProps(slotProps, {
+    startIcon: { className: classNames.icon },
+    endIcon: { className: classNames.icon },
+  });
+
+  return (
+    <ChipBase
+      as="button"
+      ref={ref}
+      // Required for Safari to render a focus ring
+      tabIndex={0}
+      className={classNames.root}
+      slotProps={mergedSlotProps}
+      {...rest}
+    />
+  );
+});
+
+// Need to re-set this because of the forwardRef wrapper
+ChipButton.displayName = 'ChipButton';
+
+export { ChipButton, type ChipButtonProps };