@yahoo/uds 3.59.0-beta.1 → 3.60.0

package/src/components/client/Button.tsx

@@ -1,312 +0,0 @@
-import { buttonIconSvgSize } from '@yahoo/uds/fixtures';
-import type { MotionVariant, UniversalButtonProps } from '@yahoo/uds/tokens';
-import { parseDeprecatedButtonPaletteVariant } from '@yahoo/uds/tokens';
-import { Progress } from '@yahoo/uds-icons';
-import type { HTMLMotionProps } from 'motion/react';
-import { AnimatePresence, m, useReducedMotion } from 'motion/react';
-import type { ForwardRefExoticComponent } from 'react';
-import React, {
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react';
-
-import { cx, getStyles } from '../../styles/styler';
-import {
-  buttonMotionVariants,
-  getGapVariant,
-  getStartVariant,
-  iconContainerMotionVariants,
-  iconMotionVariants,
-  loadingMotionVariants,
-} from '../../tokens/consts/buttonMotionTokens';
-import { createSlot } from '../../utils/createSlot';
-import { Icon } from '../Icon';
-import { IconSlot } from '../IconSlot';
-import { SpringMotionConfig } from './SpringMotionConfig';
-
-type HtmlButtonProps = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> &
-  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
-
-interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {}
-
-/**
- * **🖲️ A button element that can be used to trigger an action**
- *
- * @componentType Client component
- *
- * @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.
- *
- * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
- *
- * @example
- * ```tsx
- * 'use client';
- * import { Button, HStack } from "@yahoo/uds";
- *
- * export function Demo() {
- *   return (
- *     <HStack gap="2">
- *       <Button onClick={console.log}>Save</Button>
- *       <Button variant="secondary" onClick={console.log}>Cancel</Button>
- *     </HStack>
- *   )
- * }
- * ```
- *
- * @usage
- * Buttons should be used to clearly indicate and initiate actions that users can take.
- *
- * @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
- **/
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  {
-    // Button config props
-    variant,
-    size: buttonSize,
-    // Icon props
-    startIcon,
-    endIcon,
-    iconVariant,
-    // State props
-    loading,
-    disableEffects,
-    // Misc props
-    children,
-    asChild,
-    // HTML props (className, disabled, aria-*, data-*, onClick, etc.)
-    type = 'button',
-    className,
-    // Size props
-    width,
-    ...rest
-  },
-  forwardedRef,
-) {
-  /* ------------------------------- Setup refs ------------------------------- */
-  const ref = useRef<HTMLButtonElement>(null);
-  useImperativeHandle(forwardedRef, () => ref.current as HTMLButtonElement);
-
-  /* --------------------------- Create motion slot --------------------------- */
-  const Slot = useMemo(() => createSlot<ForwardRefExoticComponent<HtmlButtonProps>>(), []);
-  const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
-
-  /* -------------------------------- Variants -------------------------------- */
-  const endVariant = endIcon ? 'icon' : 'hide';
-  const gapVariant = getGapVariant({ startIcon, endIcon, loading });
-  const startVariant = getStartVariant({ loading, startIcon });
-
-  const { palette: buttonPalette_DEPRECATED, variant: buttonVariant_DEPRECATED } = useMemo(
-    () => parseDeprecatedButtonPaletteVariant({ flatVariant: variant }),
-    [variant],
-  );
-
-  /* ---------------------------- Setup classNames ---------------------------- */
-  const classNames = useMemo(
-    () => ({
-      button: getStyles({
-        width,
-        buttonSize,
-        buttonVariant: buttonVariant_DEPRECATED,
-        buttonPalette: buttonPalette_DEPRECATED,
-        className: cx(
-          // Base class name
-          'uds-button',
-          // Focus ring
-          'uds-ring',
-          // Minimum hit target of 44px
-          'uds-hit-target',
-          // State
-          loading && 'uds-button-loading',
-          disableEffects && 'uds-button-without-effects',
-          gapVariant === 'withIcon' && 'uds-button-with-gap',
-
-          // Consumer class names
-          className,
-        ),
-      }),
-      content: 'uds-button-content truncate',
-      iconContainer: 'uds-button-icon-container flex overflow-clip',
-      loading: 'uds-button-icon start-content animate-spin',
-      start: 'uds-button-icon start-content',
-      end: 'uds-button-icon end-content',
-    }),
-    [
-      width,
-      buttonSize,
-      buttonVariant_DEPRECATED,
-      buttonPalette_DEPRECATED,
-      className,
-      loading,
-      disableEffects,
-      gapVariant,
-    ],
-  );
-
-  /* --------------------- Motion config setup for button --------------------- */
-  const prefersReducedMotion = useReducedMotion();
-  const layoutVariant: MotionVariant = prefersReducedMotion ? 'smooth' : 'subtle';
-
-  /* -------------------------- Start and end content ------------------------- */
-
-  /**
-   * TODO see if we can get these to work as ReactElements like (ie <StartContent />)
-   * Animations aren't currently propagating if I do that
-   **/
-
-  const startContent = useMemo(
-    () => (
-      <m.span
-        className={classNames.iconContainer}
-        initial={false}
-        variants={iconContainerMotionVariants}
-        animate={startVariant}
-      >
-        <AnimatePresence initial={false} mode="popLayout">
-          {loading && (
-            <m.span
-              key="loading"
-              variants={loadingMotionVariants}
-              initial="hide"
-              animate="loading"
-              exit="hide"
-            >
-              <Icon
-                size={buttonIconSvgSize}
-                name={Progress}
-                variant={iconVariant}
-                color="current"
-                className={classNames.loading}
-              />
-            </m.span>
-          )}
-          {startIcon && !loading && (
-            <m.span variants={iconMotionVariants} initial="hide" animate="icon" exit="hide">
-              <IconSlot
-                className={classNames.start}
-                icon={startIcon}
-                iconProps={{
-                  size: buttonIconSvgSize,
-                  variant: iconVariant,
-                  color: 'current',
-                }}
-              />
-            </m.span>
-          )}
-        </AnimatePresence>
-      </m.span>
-    ),
-    [
-      classNames.iconContainer,
-      classNames.loading,
-      classNames.start,
-      startVariant,
-      loading,
-      iconVariant,
-      startIcon,
-    ],
-  );
-
-  const endContent = useMemo(
-    () => (
-      <m.span
-        className={classNames.iconContainer}
-        initial={false}
-        variants={iconContainerMotionVariants}
-        animate={endVariant}
-      >
-        <AnimatePresence initial={false} mode="popLayout">
-          {endIcon && (
-            <m.span variants={iconMotionVariants} initial="hide" animate="icon" exit="hide">
-              <IconSlot
-                className={classNames.end}
-                icon={endIcon}
-                iconProps={{
-                  size: buttonIconSvgSize,
-                  variant: iconVariant,
-                  color: 'current',
-                }}
-              />
-            </m.span>
-          )}
-        </AnimatePresence>
-      </m.span>
-    ),
-    [classNames.iconContainer, classNames.end, endIcon, endVariant, iconVariant],
-  );
-
-  const buttonVariants = useMemo(() => {
-    if (!disableEffects) {
-      return buttonMotionVariants;
-    }
-    return {
-      ...buttonMotionVariants,
-      rest: {},
-      hover: {},
-      pressed: {},
-    };
-  }, [disableEffects]);
-
-  /* -------------------------------------------------------------------------- */
-  /*                                 The button                                 */
-  /* -------------------------------------------------------------------------- */
-
-  /* ---------------------------------- TODO ---------------------------------- */
-  /* ----------------------------- Button asChild ----------------------------- */
-  /* ------------ Remove this cloneElement stuff when UD-734 lands ------------ */
-  if (asChild && isValidElement(children)) {
-    return (
-      <SpringMotionConfig layoutSpeed="3" layoutVariant={layoutVariant}>
-        <MotionSlot
-          type={type}
-          className={classNames.button}
-          initial={['hide', gapVariant]}
-          animate={gapVariant}
-          variants={buttonVariants}
-          whileHover="hover"
-          whileTap="pressed"
-          {...rest}
-        >
-          {cloneElement(
-            children,
-            children.props,
-            <>
-              {startContent}
-              <span className={classNames.content}>{children.props.children}</span>
-              {endContent}
-            </>,
-          )}
-        </MotionSlot>
-      </SpringMotionConfig>
-    );
-  }
-  /* -------------------------------- End TODO -------------------------------- */
-
-  /* ----------------------------- Standard button ---------------------------- */
-  return (
-    <SpringMotionConfig layoutSpeed="3" layoutVariant={layoutVariant}>
-      <m.button
-        ref={ref}
-        type={type}
-        className={classNames.button}
-        initial={['hide', gapVariant]}
-        animate={gapVariant}
-        variants={buttonVariants}
-        whileHover="hover"
-        whileTap="pressed"
-        {...rest}
-      >
-        {startContent}
-        <span className={classNames.content}>{children}</span>
-        {endContent}
-      </m.button>
-    </SpringMotionConfig>
-  );
-});
-
-Button.displayName = 'Button';
-
-export { Button, type ButtonProps };

package/src/components/client/Checkbox.tsx

@@ -1,377 +0,0 @@
-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 };