@yahoo/uds 3.66.1 → 3.67.0-beta.2

package/cli/codemods/flattenButtonVariant.ts

@@ -1,8 +1,8 @@
 import type { Project } from 'ts-morph';
 import { SyntaxKind } from 'ts-morph';
 
-import type { ButtonPalette, ButtonVariant, ButtonVariantFlat } from '~/tokens';
-
+// eslint-disable-next-line n/no-unpublished-import
+import type { ButtonPalette, ButtonVariant, ButtonVariantFlat } from '../../src/tokens';
 import { getGlobPattern, getImportsFromPackage, getProject } from './utils';
 
 const buttonFlatValMap: Record<ButtonVariantFlat, ButtonVariantFlat> = {

package/cli/preload.ts

@@ -5,7 +5,7 @@ spyOn(global.Bun.Glob.prototype, 'scan').mockImplementation(() => {
   return ['/pages/PageA.tsx', '/pages/PageB.tsx'] as unknown as AsyncIterableIterator<string>;
 });
 
-mock.module('@yahoo/uds/tailwind/purger', () => ({
+mock.module('../dist/tailwind/purger', () => ({
   componentsDependencies: {
     Button: ['Icon', 'Pressable', 'Text'],
     Spinner: [],

package/cli/tsconfig.json

@@ -30,23 +30,14 @@
     "module": "esnext",
     "moduleResolution": "bundler",
     "paths": {
-      "~/*": [
-        "../src/*"
-      ],
       "@yahoo/uds/scripts/*": [
         "../scripts/*"
       ],
-      //      "@yahoo/uds/tokens": [
-      //        "../src/tokens/index.ts"
-      //      ],
       "@yahoo/uds/tailwind/purger": [
         "../src/tailwind/purger/index.ts"
       ],
       "@yahoo/uds/tailwind/tsMorph": [
-        "../scripts/utils/tsMorph.ts"
-      ],
-      "root/*": [
-        "../../*"
+        "../src/tailwind/tsMorph.ts"
       ]
     }
   }

package/cli/utils/purgeCSS.ts

@@ -1,32 +1,32 @@
 import path from 'node:path';
 
+import { print, spinStart, spinStop } from 'bluebun';
+import type { BunFile } from 'bun';
+import type { CallExpression, JsxOpeningElement, JsxSelfClosingElement } from 'ts-morph';
+import { Node, Project, SyntaxKind, ts } from 'ts-morph';
+
+import { variants } from '../../dist/styles/variants';
 import {
   componentsDependencies,
   componentToTwClasses,
   componentToVariants,
   variantsList,
-} from '@yahoo/uds/tailwind/purger';
-import { findReferencesAsJsxElements, getUsedPropsInReference } from '@yahoo/uds/tailwind/tsMorph';
-import type { ColorModeConfig, ScaleModeConfig, UniversalTokensConfig } from '@yahoo/uds/tokens';
+} from '../../dist/tailwind/purger';
+import { findReferencesAsJsxElements, getUsedPropsInReference } from '../../dist/tailwind/tsMorph';
 import {
   DARK_COLOR_MODE_CLASSNAME,
   LARGE_SCALE_MODE_CLASSNAME,
   LIGHT_COLOR_MODE_CLASSNAME,
   MEDIUM_SCALE_MODE_CLASSNAME,
   SMALL_SCALE_MODE_CLASSNAME,
-  variants,
   XLARGE_SCALE_MODE_CLASSNAME,
   XSMALL_SCALE_MODE_CLASSNAME,
   XXLARGE_SCALE_MODE_CLASSNAME,
   XXXLARGE_SCALE_MODE_CLASSNAME,
-} from '@yahoo/uds/tokens';
-import { print, spinStart, spinStop } from 'bluebun';
-import type { BunFile } from 'bun';
-import uniq from 'lodash/uniq';
-import type { CallExpression, JsxOpeningElement, JsxSelfClosingElement } from 'ts-morph';
-import { Node, Project, SyntaxKind, ts } from 'ts-morph';
-
+} from '../../dist/tokens/consts/cssTokens';
 import packageJson from '../../package.json';
+// eslint-disable-next-line n/no-unpublished-import
+import type { ColorModeConfig, ScaleModeConfig, UniversalTokensConfig } from '../../src/tokens';
 
 const scaleModeToClass: { [key in keyof ScaleModeConfig]: string } = {
   large: LARGE_SCALE_MODE_CLASSNAME,
@@ -197,7 +197,7 @@ export const getTailwindSafelist = (project: Project, componentList: string[]):
   }
 
   // Return a deduped list and strip out any empty strings
-  return uniq(safeList.filter(Boolean));
+  return Array.from(new Set(safeList)).filter(Boolean);
 };
 
 /**
@@ -380,18 +380,14 @@ async function purge({
   entry: entry = '/src/',
 }: PurgeOptions) {
   const workspaceDir = Bun.env.PWD;
-
   if (!workspaceDir) {
     throw new Error('Workspace directory not found.');
   }
-
   const srcDir = path.join(workspaceDir, '/tsconfig.json');
   const project = new Project({
     tsConfigFilePath: srcDir,
   });
-
   const outputFile = Bun.file(path.join(`${Bun.env.PWD}`, output));
-
   // // we need to load the UDS config
   const configAbsolutePath = path.join(workspaceDir, configPath);
   // The config is currently unused because we haven't implemented the feature to toggle the color and scale modes
@@ -405,29 +401,22 @@ async function purge({
       "Couldn't load the UDS config. Make sure you have uds.config.ts in the root of your project.",
     );
   }
-
   spinStart('Getting used UDS components...');
-
   // 1. Get all files from the current dir
   print('Loading the project...');
   const files = await getFiles(entry);
-
   // 2. For each file get the imports;
   print('Going through the imports...');
   const udsImports = parseFiles(project, files);
-
   // 3. Now that we have the imported components
   print('Finding all the components imported from UDS...');
   const udsComponents = getComponentsToConvertToTW(udsImports);
-
   // 4. Generate the CSS we need
   print('🧑‍🍳 Cooking...');
   const safeList = getTailwindSafelist(project, udsComponents);
   const themesAndScalesClasses = getClassesForEnabledThemesAndScales();
-
   // 5. Write the allowlist to a file
   await saveToFile(safeList.concat(themesAndScalesClasses), outputFile);
-
   spinStop('Generated your safelist!');
 }
 

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,44 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (all, symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+exports.__export = __export;
+exports.__toESM = __toESM;

package/dist/_virtual/rolldown_runtime.js

@@ -0,0 +1,24 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+//#region rolldown:runtime
+var __defProp = Object.defineProperty;
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __export = (all, symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function.");
+});
+
+//#endregion
+export { __commonJSMin, __export, __require };

package/dist/components/Box.cjs

@@ -0,0 +1,105 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../styles/styler.cjs');
+const require_utils_createSlot = require('../utils/createSlot.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Box.tsx
+const Slot = require_utils_createSlot.createSlot();
+/**
+* **📦 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 = (0, react.forwardRef)(function Box$1({ asChild, as: As = "div", className, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display = "flex", overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, dropShadow, insetShadow, nestedBorderRadius, nestedBorderRadiusSize = nestedBorderRadius ? borderRadius : void 0, nestedBorderRadiusSpacing = nestedBorderRadius ? spacing : void 0, nestedBorderRadiusWidth = nestedBorderRadius ? borderWidth : void 0, ...props }, ref) {
+	const styles = require_styles_styler.getStyles({
+		backgroundColor,
+		borderRadius,
+		borderTopStartRadius,
+		borderTopEndRadius,
+		borderBottomStartRadius,
+		borderBottomEndRadius,
+		nestedBorderRadius,
+		nestedBorderRadiusSize,
+		nestedBorderRadiusSpacing,
+		nestedBorderRadiusWidth,
+		borderColor,
+		borderStartColor,
+		borderEndColor,
+		borderTopColor,
+		borderBottomColor,
+		borderWidth,
+		borderVerticalWidth,
+		borderHorizontalWidth,
+		borderStartWidth,
+		borderEndWidth,
+		borderTopWidth,
+		borderBottomWidth,
+		alignContent,
+		alignItems,
+		alignSelf,
+		flex,
+		flexDirection,
+		flexGrow,
+		flexShrink,
+		flexWrap,
+		justifyContent,
+		flexBasis,
+		display,
+		overflow,
+		overflowX,
+		overflowY,
+		position,
+		spacing,
+		spacingHorizontal,
+		spacingVertical,
+		spacingBottom,
+		spacingEnd,
+		spacingStart,
+		spacingTop,
+		offset,
+		offsetVertical,
+		offsetHorizontal,
+		offsetBottom,
+		offsetEnd,
+		offsetStart,
+		offsetTop,
+		columnGap,
+		rowGap,
+		width,
+		height,
+		dropShadow,
+		insetShadow,
+		className
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : As, {
+		className: styles,
+		ref,
+		...props
+	});
+});
+Box.displayName = "Box";
+
+//#endregion
+exports.Box = Box;

package/dist/{Box-Dw6erJKC.d.cts → components/Box.d.cts}

@@ -1,9 +1,10 @@
-import * as react from 'react';
-import { b as UniversalBoxProps } from './universalTokensConfigAuto-D1z2ow2N.cjs';
+import { UniversalBoxProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import * as react2 from "react";
 
+//#region src/components/Box.d.ts
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BoxProps extends UniversalBoxProps, DivProps {
-}
+interface BoxProps extends UniversalBoxProps, DivProps {}
 /**
  * **📦 A layout component that can be used to compose other components**
  *
@@ -29,6 +30,6 @@ interface BoxProps extends UniversalBoxProps, DivProps {
  *
  * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
-
-export { type BoxProps as B, type DivProps as D, Box as a };
+declare const Box: react2.ForwardRefExoticComponent<BoxProps & react2.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Box, type BoxProps, type DivProps };

package/dist/{Box-BkZ2BCj8.d.ts → components/Box.d.ts}

@@ -1,9 +1,10 @@
-import * as react from 'react';
-import { b as UniversalBoxProps } from './universalTokensConfigAuto-BHqbAL0M.js';
+import { UniversalBoxProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import * as react3 from "react";
 
+//#region src/components/Box.d.ts
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
-interface BoxProps extends UniversalBoxProps, DivProps {
-}
+interface BoxProps extends UniversalBoxProps, DivProps {}
 /**
  * **📦 A layout component that can be used to compose other components**
  *
@@ -29,6 +30,6 @@ interface BoxProps extends UniversalBoxProps, DivProps {
  *
  * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
-
-export { type BoxProps as B, type DivProps as D, Box as a };
+declare const Box: react3.ForwardRefExoticComponent<BoxProps & react3.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Box, type BoxProps, type DivProps };

package/dist/components/Box.js

@@ -0,0 +1,104 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { getStyles } from "../styles/styler.js";
+import { createSlot } from "../utils/createSlot.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Box.tsx
+const Slot = createSlot();
+/**
+* **📦 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(function Box$1({ asChild, as: As = "div", className, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display = "flex", overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, width, height, dropShadow, insetShadow, nestedBorderRadius, nestedBorderRadiusSize = nestedBorderRadius ? borderRadius : void 0, nestedBorderRadiusSpacing = nestedBorderRadius ? spacing : void 0, nestedBorderRadiusWidth = nestedBorderRadius ? borderWidth : void 0, ...props }, ref) {
+	const styles = getStyles({
+		backgroundColor,
+		borderRadius,
+		borderTopStartRadius,
+		borderTopEndRadius,
+		borderBottomStartRadius,
+		borderBottomEndRadius,
+		nestedBorderRadius,
+		nestedBorderRadiusSize,
+		nestedBorderRadiusSpacing,
+		nestedBorderRadiusWidth,
+		borderColor,
+		borderStartColor,
+		borderEndColor,
+		borderTopColor,
+		borderBottomColor,
+		borderWidth,
+		borderVerticalWidth,
+		borderHorizontalWidth,
+		borderStartWidth,
+		borderEndWidth,
+		borderTopWidth,
+		borderBottomWidth,
+		alignContent,
+		alignItems,
+		alignSelf,
+		flex,
+		flexDirection,
+		flexGrow,
+		flexShrink,
+		flexWrap,
+		justifyContent,
+		flexBasis,
+		display,
+		overflow,
+		overflowX,
+		overflowY,
+		position,
+		spacing,
+		spacingHorizontal,
+		spacingVertical,
+		spacingBottom,
+		spacingEnd,
+		spacingStart,
+		spacingTop,
+		offset,
+		offsetVertical,
+		offsetHorizontal,
+		offsetBottom,
+		offsetEnd,
+		offsetStart,
+		offsetTop,
+		columnGap,
+		rowGap,
+		width,
+		height,
+		dropShadow,
+		insetShadow,
+		className
+	});
+	return /* @__PURE__ */ jsx(asChild ? Slot : As, {
+		className: styles,
+		ref,
+		...props
+	});
+});
+Box.displayName = "Box";
+
+//#endregion
+export { Box };

package/dist/components/Divider/Divider.cjs

@@ -0,0 +1,47 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_components_Divider_DividerInternal = require('./DividerInternal.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Divider/Divider.tsx
+/**
+* **📦 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 = (0, react.forwardRef)(function Divider$1(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerInternal.DividerInternal, {
+		ref,
+		...props
+	});
+});
+Divider.displayName = "Divider";
+
+//#endregion
+exports.Divider = Divider;

package/dist/components/Divider/Divider.d.cts

@@ -0,0 +1,38 @@
+import { DividerInternalProps } from "./DividerInternal.cjs";
+import * as react26 from "react";
+
+//#region src/components/Divider/Divider.d.ts
+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)
+ */
+declare const Divider: react26.ForwardRefExoticComponent<DividerProps & react26.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Divider, type DividerProps };

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,38 @@
+import { DividerInternalProps } from "./DividerInternal.js";
+import * as react28 from "react";
+
+//#region src/components/Divider/Divider.d.ts
+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)
+ */
+declare const Divider: react28.ForwardRefExoticComponent<DividerProps & react28.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Divider, type DividerProps };

package/dist/components/Divider/Divider.js

@@ -0,0 +1,46 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { DividerInternal } from "./DividerInternal.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Divider/Divider.tsx
+/**
+* **📦 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(function Divider$1(props, ref) {
+	return /* @__PURE__ */ jsx(DividerInternal, {
+		ref,
+		...props
+	});
+});
+Divider.displayName = "Divider";
+
+//#endregion
+export { Divider };