@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/presets/index.js

@@ -0,0 +1,97 @@
+import { textConfig } from "../text.config.js";
+import { accordionConfig } from "../accordion.config.js";
+import { alertConfig } from "../alert.config.js";
+import { anchorConfig } from "../anchor.config.js";
+import { avatarGroupConfig } from "../avatar-group.config.js";
+import { avatarConfig } from "../avatar.config.js";
+import { badgeConfig } from "../badge.config.js";
+import { breadcrumbConfig } from "../breadcrumb.config.js";
+import { buttonConfig } from "../button.config.js";
+import { cardConfig } from "../card.config.js";
+import { collapsibleConfig } from "../collapsible.config.js";
+import { commandConfig, commandDialogConfig, commandEmptyConfig, commandGroupConfig, commandInputConfig, commandItemConfig, commandListConfig, commandSeparatorConfig, commandShortcutConfig } from "../command.config.js";
+import { controlColorConfig } from "../control-color.config.js";
+import { controlCurveConfig } from "../control-curve.config.js";
+import { controlFolderConfig } from "../control-folder.config.js";
+import { controlGroupConfig } from "../control-group.config.js";
+import { controlKnobConfig } from "../control-knob.config.js";
+import { controlPanelConfig } from "../control-panel.config.js";
+import { controlSelectConfig } from "../control-select.config.js";
+import { controlSliderConfig } from "../control-slider.config.js";
+import { controlSpringConfig } from "../control-spring.config.js";
+import { controlStepperConfig } from "../control-stepper.config.js";
+import { controlToggleConfig } from "../control-toggle.config.js";
+import { dropdownConfig } from "../dropdown.config.js";
+import { emptyStateConfig } from "../empty-state.config.js";
+import { inputConfig } from "../input.config.js";
+import { itemConfig } from "../item.config.js";
+import { modalConfig } from "../modal.config.js";
+import { navHeaderConfig } from "../nav-header.config.js";
+import { presetBarConfig } from "../preset-bar.config.js";
+import { progressConfig } from "../progress.config.js";
+import { selectConfig } from "../select.config.js";
+import { sheetConfig } from "../sheet.config.js";
+import { sidebarConfig } from "../sidebar.config.js";
+import { skeletonConfig } from "../skeleton.config.js";
+import { sliderConfig } from "../slider.config.js";
+import { spinnerConfig } from "../spinner.config.js";
+import { switchConfig } from "../switch.config.js";
+import { tabsConfig } from "../tabs.config.js";
+import { textareaConfig } from "../textarea.config.js";
+import { toastConfig } from "../toast.config.js";
+import { tooltipConfig } from "../tooltip.config.js";
+//#region ../components/dist/presets/index.js
+const defaultComponentConfigs = [
+	anchorConfig,
+	buttonConfig,
+	selectConfig,
+	textConfig,
+	textareaConfig,
+	inputConfig,
+	accordionConfig,
+	alertConfig,
+	avatarConfig,
+	avatarGroupConfig,
+	badgeConfig,
+	cardConfig,
+	collapsibleConfig,
+	commandConfig,
+	commandDialogConfig,
+	commandEmptyConfig,
+	commandGroupConfig,
+	commandInputConfig,
+	commandItemConfig,
+	commandListConfig,
+	commandSeparatorConfig,
+	commandShortcutConfig,
+	controlColorConfig,
+	controlCurveConfig,
+	controlFolderConfig,
+	controlGroupConfig,
+	controlKnobConfig,
+	controlPanelConfig,
+	controlSelectConfig,
+	controlSliderConfig,
+	controlSpringConfig,
+	controlStepperConfig,
+	controlToggleConfig,
+	dropdownConfig,
+	emptyStateConfig,
+	itemConfig,
+	modalConfig,
+	navHeaderConfig,
+	presetBarConfig,
+	progressConfig,
+	sheetConfig,
+	skeletonConfig,
+	switchConfig,
+	tabsConfig,
+	toastConfig,
+	tooltipConfig,
+	breadcrumbConfig,
+	sliderConfig,
+	spinnerConfig,
+	sidebarConfig
+];
+//#endregion
+export { defaultComponentConfigs };

package/dist/components/dist/pressable.d.ts

@@ -0,0 +1,12 @@
+import * as _$react from "react";
+import { HtmlButtonProps, StyleAndModifierProps } from "@uds/types";
+
+//#region ../components/dist/pressable.d.ts
+//#region src/pressable.d.ts
+interface PressableProps extends HtmlButtonProps, StyleAndModifierProps {}
+/**
+ * @description A bare interactive primitive with no predefined styles — you control all visual styling via style props. Use for custom interactive elements: color swatches, size chips, toggle pills, icon buttons, card-like clickable areas, or any tappable element that doesn't look like a standard button. ALWAYS include _hover and _pressed modifier props for visual feedback — a Pressable without these looks broken.
+ */
+declare const Pressable: _$react.FC<PressableProps>; //#endregion
+//#endregion
+export { Pressable, PressableProps };

package/dist/components/dist/pressable.js

@@ -0,0 +1,9 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+//#region ../components/dist/pressable.js
+/**
+* @description A bare interactive primitive with no predefined styles — you control all visual styling via style props. Use for custom interactive elements: color swatches, size chips, toggle pills, icon buttons, card-like clickable areas, or any tappable element that doesn't look like a standard button. ALWAYS include _hover and _pressed modifier props for visual feedback — a Pressable without these looks broken.
+*/
+const Pressable = createComponent("button");
+//#endregion
+export { Pressable };

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

@@ -0,0 +1,297 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/progress.config.d.ts
+//#region src/progress.config.d.ts
+declare const progressConfig: 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)";
+      };
+    };
+  };
+}, {}>;
+type ProgressConfig = typeof progressConfig; //#endregion
+//#endregion
+export { ProgressConfig, progressConfig };

package/dist/components/dist/progress.config.js

@@ -0,0 +1,35 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/progress.config.js
+const progressConfig = defaultFoundationPreset.defineComponent("Progress", ({ tokens }) => ({ base: {
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: tokens.spacing["2"],
+		width: "100%"
+	},
+	label: {
+		...textVariants.label1,
+		color: tokens.color["on-primary"]
+	},
+	value: {
+		...textVariants.label2,
+		color: tokens.color["on-secondary"]
+	},
+	track: {
+		height: "0.5rem",
+		borderRadius: tokens.borderRadius.full,
+		backgroundColor: tokens.bg.secondary,
+		overflow: "hidden",
+		width: "100%"
+	},
+	fill: {
+		height: "100%",
+		borderRadius: tokens.borderRadius.full,
+		backgroundColor: tokens.bg.brand,
+		transition: "width 0.8s cubic-bezier(0.16, 1, 0.3, 1)"
+	}
+} }));
+//#endregion
+export { progressConfig };