@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.1

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@yahoo/uds",
   "description": "Yahoo Universal System",
-  "version": "3.58.2-beta.1",
+  "version": "3.59.0-beta.1",
   "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "bin": {
     "uds": "./cli/uds-cli.js"
   },
@@ -10,6 +13,8 @@
     "cli/**",
     "!cli/**/*.test.*",
     "!cli/README.md",
+    "src/**",
+    "!src/**/*.test.*",
     "dist/**",
     "fonts/**"
   ],
@@ -37,52 +42,52 @@
     },
     "./client": {
       "import": {
-        "types": "./dist/client/index.d.ts",
-        "default": "./dist/client/index.js"
+        "types": "./dist/components/client/index.d.ts",
+        "default": "./dist/components/client/index.js"
       },
       "require": {
-        "types": "./dist/client/index.d.cts",
-        "default": "./dist/client/index.cjs"
+        "types": "./dist/components/client/index.d.cts",
+        "default": "./dist/components/client/index.cjs"
       }
     },
-    "./client/Menu": {
+    "./experimental": {
       "import": {
-        "types": "./dist/client/Menu.d.ts",
-        "default": "./dist/client/Menu.js"
+        "types": "./dist/components/experimental/index.d.ts",
+        "default": "./dist/components/experimental/index.js"
       },
       "require": {
-        "types": "./dist/client/Menu.d.cts",
-        "default": "./dist/client/Menu.cjs"
+        "types": "./dist/components/experimental/index.d.cts",
+        "default": "./dist/components/experimental/index.cjs"
       }
     },
-    "./experimental": {
+    "./experimental/client": {
       "import": {
-        "types": "./dist/experimental/index.d.ts",
-        "default": "./dist/experimental/index.js"
+        "types": "./dist/components/experimental/client/index.d.ts",
+        "default": "./dist/components/experimental/client/index.js"
       },
       "require": {
-        "types": "./dist/experimental/index.d.cts",
-        "default": "./dist/experimental/index.cjs"
+        "types": "./dist/components/experimental/client/index.d.cts",
+        "default": "./dist/components/experimental/client/index.cjs"
       }
     },
-    "./experimental/client": {
+    "./__private/motionFeatures/domMax": {
       "import": {
-        "types": "./dist/experimental/client/index.d.ts",
-        "default": "./dist/experimental/client/index.js"
+        "types": "./dist/components/client/motionFeatures/domMax.d.ts",
+        "default": "./dist/components/client/motionFeatures/domMax.js"
       },
       "require": {
-        "types": "./dist/experimental/client/index.d.cts",
-        "default": "./dist/experimental/client/index.cjs"
+        "types": "./dist/components/client/motionFeatures/domMax.d.cts",
+        "default": "./dist/components/client/motionFeatures/domMax.cjs"
       }
     },
-    "./experimental/client/SwitchV2": {
+    "./__private/motionFeatures/domAnimation": {
       "import": {
-        "types": "./dist/experimental/client/SwitchV2.d.ts",
-        "default": "./dist/experimental/client/SwitchV2.js"
+        "types": "./dist/components/client/motionFeatures/domAnimation.d.ts",
+        "default": "./dist/components/client/motionFeatures/domAnimation.js"
       },
       "require": {
-        "types": "./dist/experimental/client/SwitchV2.d.cts",
-        "default": "./dist/experimental/client/SwitchV2.cjs"
+        "types": "./dist/components/client/motionFeatures/domAnimation.d.cts",
+        "default": "./dist/components/client/motionFeatures/domAnimation.cjs"
       }
     },
     "./fixtures": {
@@ -106,32 +111,32 @@
     "./styles/*": "./dist/styles/*",
     "./tailwind/plugin": {
       "import": {
-        "types": "./dist/tailwind/plugin.d.ts",
-        "default": "./dist/tailwind/plugin.js"
+        "types": "./dist/tailwind/tailwindPlugin.d.ts",
+        "default": "./dist/tailwind/tailwindPlugin.js"
       },
       "require": {
-        "types": "./dist/tailwind/plugin.d.cts",
-        "default": "./dist/tailwind/plugin.cjs"
+        "types": "./dist/tailwind/tailwindPlugin.d.cts",
+        "default": "./dist/tailwind/tailwindPlugin.cjs"
       }
     },
-    "./tailwind/utils": {
+    "./tailwind/purger": {
       "import": {
-        "types": "./dist/tailwind/utils.d.ts",
-        "default": "./dist/tailwind/utils.js"
+        "types": "./dist/tailwind/purger/index.d.ts",
+        "default": "./dist/tailwind/purger/index.js"
       },
       "require": {
-        "types": "./dist/tailwind/utils.d.cts",
-        "default": "./dist/tailwind/utils.cjs"
+        "types": "./dist/tailwind/purger/index.d.cts",
+        "default": "./dist/tailwind/purger/index.cjs"
       }
     },
-    "./tailwind/purger": {
+    "./tailwind/utils": {
       "import": {
-        "types": "./dist/tailwind/purger.d.ts",
-        "default": "./dist/tailwind/purger.js"
+        "types": "./dist/tailwind/utils/index.d.ts",
+        "default": "./dist/tailwind/utils/index.js"
       },
       "require": {
-        "types": "./dist/tailwind/purger.d.cts",
-        "default": "./dist/tailwind/purger.cjs"
+        "types": "./dist/tailwind/utils/index.d.cts",
+        "default": "./dist/tailwind/utils/index.cjs"
       }
     },
     "./tailwind/tsMorph": {
@@ -166,12 +171,12 @@
     },
     "./tokens/automation/configs": {
       "import": {
-        "types": "./dist/tokens/automation/configs.d.ts",
-        "default": "./dist/tokens/automation/configs.js"
+        "types": "./dist/tokens/automation/configs/index.d.ts",
+        "default": "./dist/tokens/automation/configs/index.js"
       },
       "require": {
-        "types": "./dist/tokens/automation/configs.d.cts",
-        "default": "./dist/tokens/automation/configs.cjs"
+        "types": "./dist/tokens/automation/configs/index.d.cts",
+        "default": "./dist/tokens/automation/configs/index.cjs"
       }
     },
     "./tokens/automation/properties": {
@@ -204,7 +209,7 @@
     "dev": "concurrently bun:dev:*",
     "dev:fixtures": "bun run ./scripts/buildFixtures.ts --watch",
     "dev:purgeCSSData": "bun run ./scripts/generatePurgeCSSData.ts --watch",
-    "dev:ts": "tsup --watch",
+    "dev:ts": "tsdown --watch",
     "format:pkg": "bun --cwd ../../ syncpack format",
     "lint": "eslint -c eslint.config.mjs .",
     "lint:fix": "bun run lint --fix",
@@ -231,6 +236,7 @@
     "bluebun": "^0.0.34",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "motion": "^12.23.12",
     "prompts": "^2.4.2",
     "react-toastify": "^11.0.5",
@@ -244,6 +250,7 @@
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^7.0.0",
     "@next/env": "^14.2.15",
+    "@optimize-lodash/transform": "^3.0.6",
     "@types/bun": "1.2.17",
     "@types/lodash": "^4.17.20",
     "@types/prompts": "^2.4.9",
@@ -259,7 +266,7 @@
     "tailwindcss": "^3.4.13",
     "terser": "^5.43.1",
     "tsconfig": "workspace:*",
-    "tsup": "^8.5.0"
+    "tsdown": "^0.16.0"
   },
   "peerDependencies": {
     "react": "^18.3.1 || ^19.0.0",

package/src/components/Box.tsx

@@ -0,0 +1,181 @@
+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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,101 @@
+/* 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

@@ -0,0 +1,56 @@
+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

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

package/src/components/FormLabel.tsx

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