@yahoo/uds-v5-wip 1.59.0 → 1.61.0

package/dist/components/dist/empty-state.d.ts

@@ -1,417 +0,0 @@
-import { ComponentConfig } from "../../config/dist/createConfig.js";
-import * as _$react from "react";
-import { ReactNode } from "react";
-import * as _$_uds_types0 from "@uds/types";
-
-//#region ../components/dist/empty-state.d.ts
-//#region src/empty-state.d.ts
-/**
- * @description A centered placeholder shown when a view has no content, with optional icon, title, description, and actions
- */
-declare const EmptyState: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
-  EmptyState: {
-    readonly base: {
-      readonly root: {
-        readonly display: "flex";
-        readonly flexDirection: "column";
-        readonly alignItems: "center";
-        readonly justifyContent: "center";
-        readonly gap: string;
-        readonly padding: string;
-        readonly flex: "1";
-      };
-      readonly icon: {
-        readonly width: "36px";
-        readonly height: "36px";
-        readonly borderRadius: string;
-        readonly backgroundColor: string;
-        readonly display: "flex";
-        readonly alignItems: "center";
-        readonly justifyContent: "center";
-        readonly color: string;
-        readonly flexShrink: "0";
-      };
-      readonly content: {
-        readonly display: "flex";
-        readonly flexDirection: "column";
-        readonly alignItems: "center";
-        readonly gap: string;
-      };
-      readonly title: {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: "1";
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly fontWeight: string;
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      };
-      readonly description: {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: "1";
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: "450";
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: "450";
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: "450";
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      } | {
-        readonly color: string;
-        readonly textAlign: "center";
-        readonly fontSize: "12px";
-        readonly maxInlineSize: "40ch";
-        readonly textWrap: "pretty";
-        readonly fontWeight: string;
-        readonly lineHeight: string;
-        readonly fontFamily: string;
-      };
-      readonly actions: {
-        readonly display: "flex";
-        readonly gap: string;
-        readonly paddingTop: string;
-      };
-    };
-  };
-}, {}>, {
-  icon?: ReactNode;
-  title?: ReactNode;
-  description?: ReactNode;
-  actions?: ReactNode;
-  children?: ReactNode;
-}, {
-  root: "div";
-  icon: "div";
-  content: "div";
-  title: "div";
-  description: "div";
-  actions: "div";
-}>>;
-type EmptyStateProps = React.ComponentProps<typeof EmptyState>; //#endregion
-//#endregion
-export { EmptyState, EmptyStateProps };

package/dist/components/dist/empty-state.js

@@ -1,33 +0,0 @@
-import { createComponent } from "../../core/dist/createComponent.js";
-import "../../core/dist/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../components/dist/empty-state.js
-/**
-* @description A centered placeholder shown when a view has no content, with optional icon, title, description, and actions
-*/
-const EmptyState = createComponent(({ props, children, icon, title, description, actions }) => /* @__PURE__ */ jsxs("div", {
-	...props.root,
-	children: [
-		icon && /* @__PURE__ */ jsx("div", {
-			...props.icon,
-			children: icon
-		}),
-		(title || description) && /* @__PURE__ */ jsxs("div", {
-			...props.content,
-			children: [title && /* @__PURE__ */ jsx("div", {
-				...props.title,
-				children: title
-			}), description && /* @__PURE__ */ jsx("div", {
-				...props.description,
-				children: description
-			})]
-		}),
-		children,
-		actions && /* @__PURE__ */ jsx("div", {
-			...props.actions,
-			children: actions
-		})
-	]
-}));
-//#endregion
-export { EmptyState };

package/dist/components/dist/footer.d.ts

@@ -1,12 +0,0 @@
-import * as _$react from "react";
-import { HtmlFooterProps, StyleAndModifierProps } from "@uds/types";
-
-//#region ../components/dist/footer.d.ts
-//#region src/footer.d.ts
-interface FooterProps extends HtmlFooterProps, StyleAndModifierProps {}
-/**
- * @description A primitive for information about the author of the section, copyright data or links to related documents
- */
-declare const Footer: _$react.FC<FooterProps>; //#endregion
-//#endregion
-export { Footer, FooterProps };

package/dist/components/dist/footer.js

@@ -1,9 +0,0 @@
-import { createComponent } from "../../core/dist/createComponent.js";
-import "../../core/dist/index.js";
-//#region ../components/dist/footer.js
-/**
-* @description A primitive for information about the author of the section, copyright data or links to related documents
-*/
-const Footer = createComponent("footer");
-//#endregion
-export { Footer };

package/dist/components/dist/grid.d.ts

@@ -1,42 +0,0 @@
-import * as _$react from "react";
-import * as _$_uds_types0 from "@uds/types";
-import { ArbitraryValue, GridSpan, GridStartEnd, GridTemplate, HtmlDivProps, StyleAndModifierProps } from "@uds/types";
-
-//#region ../components/dist/grid.d.ts
-//#region src/grid.d.ts
-interface GridOwnProps extends HtmlDivProps, Omit<StyleAndModifierProps, 'columns'> {
-  /** Shorthand for gridTemplateColumns with repeat(n, minmax(0, 1fr)) */
-  columns?: GridTemplate | ArbitraryValue;
-  /** Shorthand for gridTemplateRows with repeat(n, minmax(0, 1fr)) */
-  rows?: GridTemplate | ArbitraryValue;
-  /** Shorthand for repeat(auto-fit, minmax(value, 1fr)) */
-  autoFit?: string;
-  /** Shorthand for repeat(auto-fill, minmax(value, 1fr)) */
-  autoFill?: string;
-  /** Use inline-grid instead of grid */
-  inline?: boolean;
-}
-interface GridItemOwnProps extends HtmlDivProps, StyleAndModifierProps {
-  /** Columns to span. "full" maps to 1 / -1 */
-  colSpan?: GridSpan;
-  /** Rows to span */
-  rowSpan?: GridSpan;
-  /** Grid column start line */
-  colStart?: GridStartEnd;
-  /** Grid column end line */
-  colEnd?: GridStartEnd;
-  /** Grid row start line */
-  rowStart?: GridStartEnd;
-  /** Grid row end line */
-  rowEnd?: GridStartEnd;
-}
-/**
- * @description A CSS Grid layout primitive
- */
-declare const Grid: _$react.FC<_$_uds_types0.CreateComponentProps<string, GridOwnProps, "div">>;
-/**
- * @description A grid item that controls span and position within a Grid
- */
-declare const GridItem: _$react.FC<_$_uds_types0.CreateComponentProps<string, GridItemOwnProps, "div">>; //#endregion
-//#endregion
-export { Grid, GridItem, GridItemOwnProps, GridOwnProps };

package/dist/components/dist/grid.js

@@ -1,34 +0,0 @@
-import { createComponent } from "../../core/dist/createComponent.js";
-import "../../core/dist/index.js";
-import { Box } from "./box.js";
-import { jsx } from "react/jsx-runtime";
-//#region ../components/dist/grid.js
-/**
-* @description A CSS Grid layout primitive
-*/
-const Grid = createComponent(({ children, columns, rows, autoFit, autoFill, inline, display, gridTemplateColumns, gridTemplateRows, ...rest }) => {
-	return /* @__PURE__ */ jsx(Box, {
-		display: display ?? (inline ? "inline-grid" : "grid"),
-		gridTemplateColumns: gridTemplateColumns ?? (autoFit ? `[repeat(auto-fit,minmax(${autoFit},1fr))]` : autoFill ? `[repeat(auto-fill,minmax(${autoFill},1fr))]` : columns),
-		gridTemplateRows: gridTemplateRows ?? rows,
-		...rest,
-		children
-	});
-});
-/**
-* @description A grid item that controls span and position within a Grid
-*/
-const GridItem = createComponent(({ children, colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, gridColumnSpan, gridRowSpan, gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd, ...rest }) => {
-	return /* @__PURE__ */ jsx(Box, {
-		gridColumnSpan: gridColumnSpan ?? colSpan,
-		gridRowSpan: gridRowSpan ?? rowSpan,
-		gridColumnStart: gridColumnStart ?? colStart,
-		gridColumnEnd: gridColumnEnd ?? colEnd,
-		gridRowStart: gridRowStart ?? rowStart,
-		gridRowEnd: gridRowEnd ?? rowEnd,
-		...rest,
-		children
-	});
-});
-//#endregion
-export { Grid, GridItem };

package/dist/components/dist/header.d.ts

@@ -1,12 +0,0 @@
-import * as _$react from "react";
-import { HtmlHeaderProps, StyleAndModifierProps } from "@uds/types";
-
-//#region ../components/dist/header.d.ts
-//#region src/header.d.ts
-interface HeaderProps extends HtmlHeaderProps, StyleAndModifierProps {}
-/**
- * @description A primitive for introductory content or a set of navigational links.
- */
-declare const Header: _$react.FC<HeaderProps>; //#endregion
-//#endregion
-export { Header, HeaderProps };

package/dist/components/dist/header.js

@@ -1,9 +0,0 @@
-import { createComponent } from "../../core/dist/createComponent.js";
-import "../../core/dist/index.js";
-//#region ../components/dist/header.js
-/**
-* @description A primitive for introductory content or a set of navigational links.
-*/
-const Header = createComponent("header");
-//#endregion
-export { Header };

package/dist/components/dist/hstack.d.ts

@@ -1,16 +0,0 @@
-import * as _$react from "react";
-import * as _$_uds_types0 from "@uds/types";
-import { BoxAsTag, HtmlDivProps, StyleAndModifierProps } from "@uds/types";
-
-//#region ../components/dist/hstack.d.ts
-//#region src/hstack.d.ts
-interface HStackOwnProps extends HtmlDivProps, StyleAndModifierProps {
-  /** Render as a different semantic HTML element. Defaults to `div`. */
-  as?: BoxAsTag;
-}
-/**
- * @description A primitive that arranges its children horizontally
- */
-declare const HStack: _$react.FC<_$_uds_types0.CreateComponentProps<string, HStackOwnProps, "div">>; //#endregion
-//#endregion
-export { HStack, HStackOwnProps };

package/dist/components/dist/hstack.js

@@ -1,21 +0,0 @@
-import { createComponent } from "../../core/dist/createComponent.js";
-import "../../core/dist/index.js";
-import { Box } from "./box.js";
-import { jsx } from "react/jsx-runtime";
-//#region ../components/dist/hstack.js
-/**
-* @description A primitive that arranges its children horizontally
-*/
-const HStack = createComponent(({ children, as, gap, gapX, display = "flex", flexDirection = display === "flex" ? "row" : void 0, alignItems = display === "flex" ? "center" : void 0, ...rest }) => {
-	return /* @__PURE__ */ jsx(Box, {
-		as,
-		display,
-		flexDirection,
-		alignItems,
-		gapX: gapX ?? gap,
-		...rest,
-		children
-	});
-});
-//#endregion
-export { HStack };

package/dist/components/dist/image.d.ts

@@ -1,20 +0,0 @@
-import * as _$react from "react";
-import { HtmlImgProps, StyleAndModifierProps } from "@uds/types";
-
-//#region ../components/dist/image.d.ts
-//#region src/image.d.ts
-interface UniversalImageProps extends StyleAndModifierProps {
-  /**
-   * @description The source URL of the image. */
-  src?: string;
-  /**
-   * @description Provides fallback (alternate) text to display when the image Definitionified by the Image element is not loaded. */
-  alt?: string;
-}
-interface ImageProps extends HtmlImgProps, UniversalImageProps {}
-/**
- * @description Use for photos, product images, avatars, hero images, and thumbnails. Use real image URLs from Unsplash (https://images.unsplash.com/photo-...) for realistic content. Do NOT use SVG or a colored Box where a real image belongs.
- */
-declare const Image: _$react.FC<ImageProps>; //#endregion
-//#endregion
-export { Image, ImageProps, UniversalImageProps };

package/dist/components/dist/image.js

@@ -1,9 +0,0 @@
-import { createComponent } from "../../core/dist/createComponent.js";
-import "../../core/dist/index.js";
-//#region ../components/dist/image.js
-/**
-* @description Use for photos, product images, avatars, hero images, and thumbnails. Use real image URLs from Unsplash (https://images.unsplash.com/photo-...) for realistic content. Do NOT use SVG or a colored Box where a real image belongs.
-*/
-const Image = createComponent("img");
-//#endregion
-export { Image };