@yahoo/uds-v5-wip 0.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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