@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/progress.d.ts

@@ -0,0 +1,312 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/progress.d.ts
+//#region src/progress.d.ts
+/**
+ * @description A bar that indicates the completion progress of a task
+ */
+declare const Progress: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Progress: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+        readonly width: "100%";
+      };
+      readonly label: {
+        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 value: {
+        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 track: {
+        readonly height: "0.5rem";
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly overflow: "hidden";
+        readonly width: "100%";
+      };
+      readonly fill: {
+        readonly height: "100%";
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly transition: "width 0.8s cubic-bezier(0.16, 1, 0.3, 1)";
+      };
+    };
+  };
+}, {}>, {
+  value: number;
+  label?: string;
+}, {
+  root: "div";
+  label: "span";
+  value: "span";
+  track: "div";
+  fill: "div";
+}>>;
+type ProgressProps = React.ComponentProps<typeof Progress>; //#endregion
+//#endregion
+export { Progress, ProgressProps };

package/dist/components/dist/progress.js

@@ -0,0 +1,43 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/progress.js
+/**
+* @description A bar that indicates the completion progress of a task
+*/
+const Progress = createComponent(({ props, value, label }) => {
+	const rootStyle = {
+		...props.root.style,
+		"--uds-progress-value": `${value}%`
+	};
+	const fillStyle = {
+		...props.fill.style,
+		width: `${value}%`
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...props.root,
+		style: rootStyle,
+		children: [label && /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				justifyContent: "space-between"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				...props.label,
+				children: label
+			}), /* @__PURE__ */ jsxs("span", {
+				...props.value,
+				children: [value, "%"]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			...props.track,
+			children: /* @__PURE__ */ jsx("div", {
+				...props.fill,
+				style: fillStyle
+			})
+		})]
+	});
+});
+//#endregion
+export { Progress };

package/dist/components/dist/section.d.ts

@@ -0,0 +1,12 @@
+import * as _$react from "react";
+import { HtmlSectionProps, StyleAndModifierProps } from "@uds/types";
+
+//#region ../components/dist/section.d.ts
+//#region src/section.d.ts
+interface SectionProps extends HtmlSectionProps, StyleAndModifierProps {}
+/**
+ * @description A generic standalone section of a document, which doesn't have a more Definitionific semantic element to represent it
+ */
+declare const Section: _$react.FC<SectionProps>; //#endregion
+//#endregion
+export { Section, SectionProps };

package/dist/components/dist/section.js

@@ -0,0 +1,9 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+//#region ../components/dist/section.js
+/**
+* @description A generic standalone section of a document, which doesn't have a more Definitionific semantic element to represent it
+*/
+const Section = createComponent("section");
+//#endregion
+export { Section };

package/dist/components/dist/select.config.d.ts

@@ -0,0 +1,32 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/select.config.d.ts
+//#region src/select.config.d.ts
+declare const selectConfig: ComponentConfig<{
+  Select: {
+    readonly base: {
+      readonly root: {
+        readonly appearance: "none";
+        readonly backgroundColor: string;
+        readonly color: string;
+        readonly spacingY: string;
+        readonly spacingLeft: string;
+        readonly spacingRight: string;
+        readonly borderRadius: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+        readonly outlineStyle: "none";
+        readonly backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")";
+        readonly backgroundRepeat: "no-repeat";
+        readonly backgroundPosition: "right 0.75rem center";
+        readonly backgroundSize: "1rem";
+        readonly _focus: {
+          readonly borderColor: string;
+          readonly outlineStyle: "none";
+        };
+      };
+    };
+  };
+}, {}>;
+type SelectConfig = typeof selectConfig; //#endregion
+//#endregion
+export { SelectConfig, selectConfig };

package/dist/components/dist/select.config.js

@@ -0,0 +1,25 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+//#region ../components/dist/select.config.js
+const selectConfig = defaultFoundationPreset.defineComponent("Select", ({ tokens }) => ({ base: { root: {
+	appearance: "none",
+	backgroundColor: tokens.bg.primary,
+	color: tokens.color["on-primary"],
+	spacingY: tokens.spacing["2"],
+	spacingLeft: tokens.spacing["3"],
+	spacingRight: tokens.spacing["8"],
+	borderRadius: tokens.borderRadius.md,
+	borderWidth: tokens.borderWidth.thin,
+	borderColor: tokens.borderColor.secondary,
+	outlineStyle: "none",
+	backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`,
+	backgroundRepeat: "no-repeat",
+	backgroundPosition: "right 0.75rem center",
+	backgroundSize: "1rem",
+	_focus: {
+		borderColor: tokens.borderColor.brand,
+		outlineStyle: "none"
+	}
+} } }));
+//#endregion
+export { selectConfig };

package/dist/components/dist/select.d.ts

@@ -0,0 +1,46 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+import { HtmlOptionProps, HtmlSelectProps, StyleAndModifierProps } from "@uds/types";
+
+//#region ../components/dist/select.d.ts
+//#region src/select.d.ts
+interface SelectOwnProps extends HtmlSelectProps, StyleAndModifierProps {
+  children?: React.ReactNode;
+}
+interface OptionProps extends HtmlOptionProps, StyleAndModifierProps {}
+/**
+ * @description A primtive that provides a menu of options
+ */
+declare const Select: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Select: {
+    readonly base: {
+      readonly root: {
+        readonly appearance: "none";
+        readonly backgroundColor: string;
+        readonly color: string;
+        readonly spacingY: string;
+        readonly spacingLeft: string;
+        readonly spacingRight: string;
+        readonly borderRadius: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+        readonly outlineStyle: "none";
+        readonly backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")";
+        readonly backgroundRepeat: "no-repeat";
+        readonly backgroundPosition: "right 0.75rem center";
+        readonly backgroundSize: "1rem";
+        readonly _focus: {
+          readonly borderColor: string;
+          readonly outlineStyle: "none";
+        };
+      };
+    };
+  };
+}, {}>, SelectOwnProps, keyof _$react.JSX.IntrinsicElements>>;
+/**
+ * @description A primitive that provides a set of options for a user to choose from
+ */
+declare const Option: _$react.FC<OptionProps>; //#endregion
+//#endregion
+export { Option, OptionProps, Select, SelectOwnProps };

package/dist/components/dist/select.js

@@ -0,0 +1,13 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+//#region ../components/dist/select.js
+/**
+* @description A primtive that provides a menu of options
+*/
+const Select = createComponent("select");
+/**
+* @description A primitive that provides a set of options for a user to choose from
+*/
+const Option = createComponent("option");
+//#endregion
+export { Option, Select };