@yahoo/uds 3.59.0-beta.1 → 3.59.0

package/src/components/Box.tsx

@@ -1,181 +0,0 @@
-import type { UniversalBoxProps } from '@yahoo/uds/tokens';
-import { forwardRef } from 'react';
-
-import { getStyles } from '../styles/styler';
-import { createSlot } from '../utils/createSlot';
-
-const Slot = createSlot<React.ComponentType<DivProps>>();
-
-type DivProps = React.HTMLAttributes<HTMLDivElement>;
-
-interface BoxProps extends UniversalBoxProps, DivProps {}
-
-/**
- * **📦 A layout component that can be used to compose other components**
- *
- * @description
- * The most simple component we ship - a div. But with all the power of the UDS design system.
- * By default, `Box` is a flexbox container. When working with vertical or horizontal layouts,
- * consider using [VStack](./v-stack) or [HStack](./h-stack) respectively.
- *
- * @example
- * ```tsx
- * import { Box } from '@yahoo/uds';
- *
- * <Box backgroundColor="primary" spacing="6">
- *   Any kind of content can go here!
- * </Box>
- * ```
- *
- * @usage
- * - If you need to div-like container to apply padding, shapes, or other styling.
- * - If you're creating card components.
- *
- * @see The {@link https://uds.build/docs/components/box Box Docs} for more info
- *
- * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
- */
-const Box = forwardRef<HTMLDivElement, BoxProps>(function Box(
-  {
-    asChild,
-    as: As = 'div',
-    className,
-    // background
-    backgroundColor,
-    // border
-    borderRadius,
-    borderTopStartRadius,
-    borderTopEndRadius,
-    borderBottomStartRadius,
-    borderBottomEndRadius,
-    borderColor,
-    borderStartColor,
-    borderEndColor,
-    borderTopColor,
-    borderBottomColor,
-    borderWidth,
-    borderVerticalWidth,
-    borderHorizontalWidth,
-    borderStartWidth,
-    borderEndWidth,
-    borderTopWidth,
-    borderBottomWidth,
-    // flex
-    alignContent,
-    alignItems,
-    alignSelf,
-    flex,
-    flexDirection,
-    flexGrow,
-    flexShrink,
-    flexWrap,
-    justifyContent,
-    flexBasis,
-    // layout
-    display = 'flex',
-    overflow,
-    overflowX,
-    overflowY,
-    position,
-    // spacing
-    spacing,
-    spacingHorizontal,
-    spacingVertical,
-    spacingBottom,
-    spacingEnd,
-    spacingStart,
-    spacingTop,
-    offset,
-    offsetVertical,
-    offsetHorizontal,
-    offsetBottom,
-    offsetEnd,
-    offsetStart,
-    offsetTop,
-    columnGap,
-    rowGap,
-    // size
-    width,
-    height,
-    // shadow
-    dropShadow,
-    insetShadow,
-    // rest
-    ...props
-  }: BoxProps,
-  ref,
-) {
-  const styles = getStyles({
-    // background
-    backgroundColor,
-    // border
-    borderRadius,
-    borderTopStartRadius,
-    borderTopEndRadius,
-    borderBottomStartRadius,
-    borderBottomEndRadius,
-    borderColor,
-    borderStartColor,
-    borderEndColor,
-    borderTopColor,
-    borderBottomColor,
-    borderWidth,
-    borderVerticalWidth,
-    borderHorizontalWidth,
-    borderStartWidth,
-    borderEndWidth,
-    borderTopWidth,
-    borderBottomWidth,
-    // flex
-    alignContent,
-    alignItems,
-    alignSelf,
-    flex,
-    flexDirection,
-    flexGrow,
-    flexShrink,
-    flexWrap,
-    justifyContent,
-    flexBasis,
-    // layout
-    display,
-    overflow,
-    overflowX,
-    overflowY,
-    position,
-    // spacing
-    spacing,
-    spacingHorizontal,
-    spacingVertical,
-    spacingBottom,
-    spacingEnd,
-    spacingStart,
-    spacingTop,
-    offset,
-    offsetVertical,
-    offsetHorizontal,
-    offsetBottom,
-    offsetEnd,
-    offsetStart,
-    offsetTop,
-    columnGap,
-    rowGap,
-    // size
-    width,
-    height,
-    // shadow
-    dropShadow,
-    insetShadow,
-    // rest
-    className,
-  });
-
-  const Comp = asChild ? Slot : As;
-
-  return <Comp className={styles} ref={ref} {...props} />;
-});
-
-// Need to re-set this because of the forwardRef wrapper
-Box.displayName = 'Box';
-
-export { Box, type BoxProps, type DivProps };

package/src/components/Divider/Divider.tsx

@@ -1,44 +0,0 @@
-import { forwardRef } from 'react';
-
-import type { DividerInternalProps } from './DividerInternal';
-import { DividerInternal } from './DividerInternal';
-
-type DividerProps = Omit<DividerInternalProps, 'layerClassNames'>;
-
-/**
- * **📦 A divider component that can be used to visually separate components**
- *
- * @description
- * The Divider component is a visual element used to separate content and create clear groupings within a layout. It helps establish hierarchy, improve readability, and guide users through sections of an interface. Dividers can appear as horizontal or vertical lines and are commonly used between related content blocks, within menus, or in dense UI areas to reduce visual clutter.
- *
- * @example
- * ```tsx
- * import { Divider } from '@yahoo/uds';
- *
- * // Default primary horizontal divider. Similar to <hr />
- * <Divider />
- *
- * // A vertical divider.
- * <Divider vertical />
- *
- * // A horizontal divider with the secondary styling.
- * <Divider variant="secondary" />
- *
- * // A vertical divider with the tertiary styling.
- * <Divider vertical variant="tertiary" />
- * ```
- *
- * @usage
- * - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
- *
- * @see The {@link https://uds.build/docs/components/divider Divider Docs} for more info
- *
- * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
- */
-const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(props, ref) {
-  return <DividerInternal ref={ref} {...props} />;
-});
-
-Divider.displayName = 'Divider';
-
-export { Divider, type DividerProps };

package/src/components/Divider/DividerCore.tsx

@@ -1,101 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import type { CSSProperties } from 'react';
-import { forwardRef, useMemo } from 'react';
-
-import { cx } from '../../styles/styler';
-import type { UniversalDividerProps, UniversalStackProps } from '../../tokens/types';
-import type { BoxProps } from '../Box';
-import { Box } from '../Box';
-import { HStack } from '../HStack';
-import { Text } from '../Text';
-import { VStack } from '../VStack';
-
-const ORIENTATION_WIDTH_MAP = {
-  horizontal: 'w-full',
-  vertical: '',
-} as const;
-
-interface DividerCoreProps
-  extends Omit<BoxProps, 'color' | 'borderColor' | 'borderWidth'>,
-    Omit<UniversalStackProps, 'separator' | 'asChild'>,
-    Omit<UniversalDividerProps, 'variant'> {
-  layerClassNames?: {
-    root?: string;
-    text?: string;
-    line?: string;
-  };
-}
-
-const DividerCore = forwardRef<HTMLDivElement, DividerCoreProps>(function Divider(
-  {
-    vertical = false,
-    contentPosition = 'center',
-    className,
-    layerClassNames,
-    children,
-    ...boxProps
-  }: DividerCoreProps,
-  ref,
-) {
-  const direction = vertical ? 'vertical' : 'horizontal';
-  const InternalComponent = vertical ? VStack : HStack;
-
-  const classNames = useMemo(
-    () => ({
-      root: cx(ORIENTATION_WIDTH_MAP[direction], className, layerClassNames?.root),
-      label: cx(layerClassNames?.text),
-      line: layerClassNames?.line,
-    }),
-    [className, direction, layerClassNames?.root, layerClassNames?.text, layerClassNames?.line],
-  );
-
-  // This needs to be style rather than classes because the automated configuration classes
-  // have a higher specificity and tailwind !important isn't working.
-  const lineStyle = useMemo(
-    (): CSSProperties =>
-      // Configurator sets all borders to 1.
-      direction === 'vertical'
-        ? // For vertical, we keep only the left border.
-          { borderTopWidth: 0, borderRightWidth: 0, borderBottomWidth: 0 }
-        : // For horizontal, we keep only the top border.
-          { borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth: 0 },
-
-    [direction],
-  );
-
-  // eslint-disable-next-line react/display-name
-  const Line = () => <Box flex="1" className={classNames.line} style={lineStyle} />;
-
-  if (children) {
-    return (
-      <InternalComponent
-        flex="1"
-        alignItems="center"
-        className={classNames.root}
-        ref={ref}
-        {...boxProps}
-      >
-        {contentPosition !== 'start' && <Line />}
-
-        <Box flex="none">
-          <Text color="inherit" variant="inherit" className={classNames.label}>
-            {children}
-          </Text>
-        </Box>
-
-        {contentPosition !== 'end' && <Line />}
-      </InternalComponent>
-    );
-  }
-
-  return (
-    <Box display="flex" flex="none" className={classNames.root} ref={ref} {...boxProps}>
-      <Line />
-    </Box>
-  );
-});
-
-// Need to re-set this because of the forwardRef wrapper
-DividerCore.displayName = 'DividerCore';
-
-export { DividerCore, type DividerCoreProps };

package/src/components/Divider/DividerInternal.tsx

@@ -1,56 +0,0 @@
-import { forwardRef, useMemo } from 'react';
-
-import { cx, getStyles } from '../../styles/styler';
-import type { UniversalDividerProps } from '../../tokens/types';
-import type { DividerCoreProps } from './DividerCore';
-import { DividerCore } from './DividerCore';
-
-type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
-
-interface DividerInternalProps extends DividerCoreProps {
-  // Add inherit option for configured component composition.
-  variant?: VariantWithInherit;
-}
-
-const DividerInternal = forwardRef<HTMLDivElement, DividerInternalProps>(function Divider(
-  { variant = 'primary', layerClassNames, ...props }: DividerInternalProps,
-  ref,
-) {
-  const coreLayerClassNames = useMemo(
-    (): DividerInternalProps['layerClassNames'] => ({
-      root: cx(
-        variant !== 'inherit' &&
-          getStyles({
-            dividerVariantRoot: variant,
-          }),
-        layerClassNames?.root,
-      ),
-
-      text: cx(
-        variant !== 'inherit'
-          ? getStyles({
-              dividerVariantLabel: variant,
-            })
-          : undefined,
-        layerClassNames?.text,
-      ),
-
-      line: cx(
-        variant !== 'inherit' &&
-          getStyles({
-            dividerVariantLine: variant,
-          }),
-        layerClassNames?.line,
-      ),
-    }),
-
-    [layerClassNames?.line, layerClassNames?.root, layerClassNames?.text, variant],
-  );
-
-  return <DividerCore ref={ref} layerClassNames={coreLayerClassNames} {...props} />;
-});
-
-// Need to re-set this because of the forwardRef wrapper
-DividerInternal.displayName = 'DividerInternal';
-
-export { DividerInternal, type DividerInternalProps };

package/src/components/Divider/index.ts

@@ -1 +0,0 @@
-export { Divider, type DividerProps } from './Divider';

package/src/components/FormLabel.tsx

@@ -1,66 +0,0 @@
-import type { UniversalFormLabelProps } from '@yahoo/uds/tokens';
-import { isFunction } from 'lodash';
-import type { PropsWithChildren } from 'react';
-
-import { cx } from '../styles/styler';
-import type { TextProps } from './Text';
-import { Text } from './Text';
-
-type HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
-
-interface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {}
-
-const FormLabel = ({
-  htmlFor,
-  required,
-  label,
-  children,
-  color = 'muted',
-  variant = 'label3',
-  hasError = false,
-  showRequiredAsterisk = false,
-  as = 'label',
-  className,
-  ...rest
-}: FormLabelProps) => {
-  const contents = label ? (isFunction(label) ? label() : label) : children;
-
-  if (!contents) {
-    return null;
-  }
-
-  return (
-    <Text
-      variant={variant}
-      color={color}
-      as={as as TextProps['as']}
-      htmlFor={htmlFor}
-      className={cx(
-        // Use the same cursor as the wrapping form component.
-        // The form component controls pointer vs disabled so
-        // this keeps Text from resetting it back to text cursor.
-        'cursor-[inherit]',
-        className,
-      )}
-      {...rest}
-    >
-      {contents}
-
-      {required && showRequiredAsterisk && (
-        <Text
-          as="sup"
-          color={hasError ? 'alert' : 'inherit'}
-          variant="inherit"
-          spacingStart="0.5"
-          aria-hidden
-        >
-          *
-        </Text>
-      )}
-    </Text>
-  );
-};
-
-FormLabel.displayName = 'FormLabel';
-
-export { FormLabel, type FormLabelProps };

package/src/components/HStack.tsx

@@ -1,53 +0,0 @@
-import type { UniversalStackProps } from '@yahoo/uds/tokens';
-import { forwardRef } from 'react';
-
-import { intersperseReactChildren } from '../utils/intersperse';
-import type { DivProps } from './Box';
-import { Box } from './Box';
-
-interface HStackProps extends UniversalStackProps, DivProps {}
-
-/**
- * **📏 A layout component that arranges its children in columns using flexbox** 
- * 
- * @description
- * HStack is a layout primitive that arranges its children in a columns [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
- * and can be used to compose larger layouts. HStack is similar to [Box](./box) but provides additional features like a `gap` property to
- * add spacing between children.
- *
- * @example
- * ```tsx
- * import { HStack, Text } from '@yahoo/uds';
-
- * <HStack gap="6">
- *   <Text variant="body1" color="primary">First</Text>
- *   <Text variant="body1" color="primary">Second</Text>
- *   <Text variant="body1" color="primary">Third</Text>
- * </HStack>
- * ```
- * 
- * @usage
- * - Create a row of items, optionally with gaps between items.
- * - Create columns that are sized to their content.
- * - Create columns that fill the available space within the parent container.
- * - Create columns of proportionate size to each other (also known as a ratio-based layout).
- *
- * @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
- *
- * @related [Box](https://uds.build/docs/components/box), [VStack](https://uds.build/docs/components/v-stack)
- **/
-const HStack = forwardRef<HTMLDivElement, HStackProps>(function HStack(
-  { gap, children, separator, ...props }: HStackProps,
-  ref,
-) {
-  return (
-    <Box ref={ref} flexDirection="row" rowGap={gap} columnGap={gap} {...props}>
-      {separator ? intersperseReactChildren(children, separator) : children}
-    </Box>
-  );
-});
-
-// Need to re-set this because of the forwardRef wrapper
-HStack.displayName = 'HStack';
-
-export { HStack, type HStackProps };

package/src/components/Icon.tsx

@@ -1,82 +0,0 @@
-import { forwardRef } from 'react';
-
-import { cx, getStyles } from '../styles/styler';
-import type { IconPropsWithSVGProps as IconProps } from '../tokens';
-import { normalIconSizes } from '../tokens/configs/sizes';
-
-/**
- * **🎨 A component for displaying icons**
- *
- * @description
- * [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or
- * other items. They are available in four different sizes: `xs`, `sm`, `md`, and
- * `lg`. Each size also supports an outline and fill variant. Icons can be
- * colored using the `color` prop.
- *
- * The component is available in the `@yahoo/uds` package but is meant to be used
- * with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
- * A separate package provides modularity from the core library, better
- * versioning strategies, and tree shakeability.
- *
- * @example
- * ```tsx
- * import { Icon } from '@yahoo/uds';
- * import { AddFolder } from '@yahoo/uds-icons';
- *
- * <Icon name={AddFolder} variant="fill" size="sm" />
- * ```
- *
- * @usage
- * - If you need to display an icon.
- *
- * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
- *
- * @related [IconButton](https://uds.build/docs/components/icon-button)
- */
-
-const Icon = forwardRef<SVGSVGElement, IconProps>(function BaseIcon(
-  {
-    name: SVGIcon,
-    size = 'md',
-    variant = 'outline',
-    color = 'primary',
-    className,
-    ...props
-  }: IconProps,
-  ref,
-) {
-  // Check if the requested variant is available
-  const availableVariants = SVGIcon.metadata?.variants ?? [];
-  const effectiveVariant = availableVariants.includes(variant)
-    ? variant
-    : (availableVariants[0] ?? 'fill');
-
-  const isMulticolor = effectiveVariant === 'multicolor';
-  const styles = getStyles({
-    flex: 'none',
-    color: isMulticolor ? undefined : color,
-    className: cx(className, !isMulticolor && '[&_path]:fill-current'),
-  });
-  const sizePx = normalIconSizes[size]; // TODO: use scale modes when they are available.
-
-  return (
-    <svg
-      ref={ref}
-      xmlns="http://www.w3.org/2000/svg"
-      width={sizePx}
-      height={sizePx}
-      viewBox={`0 0 ${sizePx} ${sizePx}`}
-      aria-hidden="true"
-      focusable="false"
-      className={styles}
-      {...props}
-    >
-      <SVGIcon size={size} variant={effectiveVariant} />
-    </svg>
-  );
-});
-
-// Need to re-set this because of the forwardRef wrapper
-Icon.displayName = 'Icon';
-
-export { Icon, type IconProps };

package/src/components/IconSlot.tsx

@@ -1,82 +0,0 @@
-import type { SvgIcon } from '@yahoo/uds-icons/types';
-import { isFunction } from 'lodash';
-import type { ReactElement } from 'react';
-import React, { cloneElement, isValidElement, memo } from 'react';
-
-import { cx } from '../styles/styler';
-import type { IconPropsWithSVGProps, UniversalIconSlot } from '../tokens';
-import { Icon } from './Icon';
-
-interface IconSlotProps {
-  /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that a ReactNode. */
-  icon?: UniversalIconSlot;
-  /** Props to spread onto the icon. */
-  iconProps?: Omit<IconPropsWithSVGProps, 'name'>;
-  className?: string;
-}
-
-/**
- * A helper container to render a SvgIcon, Icon component, or ReactNode.
- *
- * Useful in components that use icons and have a startIcon and endIcon. It allows
- * consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they
- * need to override props on the icon. For example, pass an `<Icon>` to override
- * the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.
- *
- * Examples:
- * ```
- * <Input startIcon={Info} />
- * <Input startIcon={<Icon name={Info} variant="fill" />} />
- * <Input startIcon={() => <Icon name={Info} variant="fill" />} />
- * <Input endIcon={() => <IconButton name={Info} aria-label="My label" />} />
- * ```
- */
-const IconSlot = memo(function IconSlot({
-  icon,
-  iconProps,
-  className: slotClassName,
-  ...rest
-}: IconSlotProps) {
-  if (!icon) {
-    return null;
-  }
-
-  const { className: iconPropsClassName, ...props } = iconProps || {};
-
-  const mergedClassName = cx(slotClassName, iconPropsClassName);
-
-  // Try as UDS SvgIcon first
-  const svgIcon = icon as SvgIcon;
-  if (svgIcon.metadata?.isSvgIcon) {
-    return <Icon name={svgIcon} {...props} {...rest} className={mergedClassName} />;
-  }
-
-  if (isFunction(icon)) {
-    const iconEl = icon(iconProps || {}) as ReactElement;
-    const renderedElementClassName = iconEl?.props.className;
-
-    return (
-      isValidElement(iconEl) &&
-      cloneElement(iconEl, {
-        ...rest,
-        className: cx(mergedClassName, renderedElementClassName),
-
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } as any)
-    );
-  }
-
-  return (
-    isValidElement(icon) &&
-    cloneElement(icon, {
-      ...props, // default icons props from input
-      ...(icon as ReactElement).props, // user's props on <Icon>
-      ...rest, // anything else
-      className: cx(mergedClassName, (icon as ReactElement).props.className),
-    })
-  );
-});
-
-IconSlot.displayName = 'IconSlot';
-
-export { IconSlot, type IconSlotProps };