@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/nav-header.config.d.ts

@@ -0,0 +1,159 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/nav-header.config.d.ts
+//#region src/nav-header.config.d.ts
+declare const navHeaderConfig: ComponentConfig<{
+  NavHeader: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
+        readonly padding: `${string} ${string}`;
+        readonly borderBottomWidth: string;
+        readonly borderColor: string;
+        readonly backgroundColor: string;
+      };
+      readonly title: {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly actions: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+      };
+    };
+  };
+}, {}>;
+type NavHeaderConfig = typeof navHeaderConfig; //#endregion
+//#endregion
+export { NavHeaderConfig, navHeaderConfig };

package/dist/components/dist/nav-header.config.js

@@ -0,0 +1,26 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/nav-header.config.js
+const navHeaderConfig = defaultFoundationPreset.defineComponent("NavHeader", ({ tokens }) => ({ base: {
+	root: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: `${tokens.spacing["4"]} ${tokens.spacing["5"]}`,
+		borderBottomWidth: tokens.borderWidth.thin,
+		borderColor: tokens.borderColor.secondary,
+		backgroundColor: tokens.bg.primary
+	},
+	title: {
+		...textVariants.headline,
+		color: tokens.color["on-primary"]
+	},
+	actions: {
+		display: "flex",
+		alignItems: "center",
+		gap: tokens.spacing["2"]
+	}
+} }));
+//#endregion
+export { navHeaderConfig };

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

@@ -0,0 +1,174 @@
+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/nav-header.d.ts
+//#region src/nav-header.d.ts
+/**
+ * @description A navigation header bar with title and optional action areas
+ */
+declare const NavHeader: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  NavHeader: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
+        readonly padding: `${string} ${string}`;
+        readonly borderBottomWidth: string;
+        readonly borderColor: string;
+        readonly backgroundColor: string;
+      };
+      readonly title: {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly actions: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+      };
+    };
+  };
+}, {}>, {
+  title?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+}, {
+  root: "div";
+  title: "span";
+  actions: "div";
+}>>;
+type NavHeaderProps = React.ComponentProps<typeof NavHeader>; //#endregion
+//#endregion
+export { NavHeader, NavHeaderProps };

package/dist/components/dist/nav-header.js

@@ -0,0 +1,23 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/nav-header.js
+/**
+* @description A navigation header bar with title and optional action areas
+*/
+const NavHeader = createComponent(({ props, children, title, actions }) => /* @__PURE__ */ jsxs("div", {
+	...props.root,
+	children: [
+		title && /* @__PURE__ */ jsx("span", {
+			...props.title,
+			children: title
+		}),
+		children,
+		actions && /* @__PURE__ */ jsx("div", {
+			...props.actions,
+			children: actions
+		})
+	]
+}));
+//#endregion
+export { NavHeader };

package/dist/components/dist/nav.d.ts

@@ -0,0 +1,12 @@
+import * as _$react from "react";
+import { HtmlNavProps, StyleAndModifierProps } from "@uds/types";
+
+//#region ../components/dist/nav.d.ts
+//#region src/nav.d.ts
+interface NavProps extends HtmlNavProps, StyleAndModifierProps {}
+/**
+ * @description A primitive which provides navigation links, either within the current document or to other documents
+ */
+declare const Nav: _$react.FC<NavProps>; //#endregion
+//#endregion
+export { Nav, NavProps };

package/dist/components/dist/nav.js

@@ -0,0 +1,9 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+//#region ../components/dist/nav.js
+/**
+* @description A primitive which provides navigation links, either within the current document or to other documents
+*/
+const Nav = createComponent("nav");
+//#endregion
+export { Nav };

package/dist/components/dist/preset-bar.config.d.ts

@@ -0,0 +1,193 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/preset-bar.config.d.ts
+//#region src/preset-bar.config.d.ts
+declare const presetBarConfig: ComponentConfig<{
+  PresetBar: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+      };
+      readonly inputRow: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+      };
+      readonly inputWrapper: {
+        readonly flex: "1";
+      };
+      readonly list: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+      };
+      readonly item: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly padding: `${string} 0`;
+      };
+      readonly itemName: {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      };
+    };
+    readonly variants: {};
+    readonly defaultVariants: {};
+  };
+}, {}>;
+type PresetBarConfig = typeof presetBarConfig; //#endregion
+//#endregion
+export { PresetBarConfig, presetBarConfig };

package/dist/components/dist/preset-bar.config.js

@@ -0,0 +1,39 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/preset-bar.config.js
+const presetBarConfig = defaultFoundationPreset.defineComponent("PresetBar", ({ tokens }) => ({
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: tokens.spacing["3"]
+		},
+		inputRow: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing["2"]
+		},
+		inputWrapper: { flex: "1" },
+		list: {
+			display: "flex",
+			flexDirection: "column",
+			gap: tokens.spacing["1"]
+		},
+		item: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing["2"],
+			padding: `${tokens.spacing["1"]} 0`
+		},
+		itemName: {
+			flex: "1",
+			...textVariants.label1,
+			color: tokens.color["on-primary"]
+		}
+	},
+	variants: {},
+	defaultVariants: {}
+}));
+//#endregion
+export { presetBarConfig };