@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/card.d.ts

@@ -0,0 +1,353 @@
+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/card.d.ts
+//#region src/card.d.ts
+/**
+ * @description A contained surface for grouping related content with optional title, content, and actions
+ */
+declare const Card: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Card: {
+    readonly base: {
+      readonly root: {
+        readonly borderRadius: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+        readonly backgroundColor: string;
+        readonly padding: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: 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 content: {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly actions: {
+        readonly display: "flex";
+        readonly gap: string;
+        readonly paddingTop: string;
+      };
+    };
+  };
+}, {}>, {
+  title?: ReactNode;
+  content?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+}, {
+  root: "div";
+  title: "div";
+  content: "div";
+  actions: "div";
+}>>; //#endregion
+//#endregion
+export { Card };

package/dist/components/dist/card.js

@@ -0,0 +1,27 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/card.js
+/**
+* @description A contained surface for grouping related content with optional title, content, and actions
+*/
+const Card = createComponent(({ props, children, title, content, actions }) => /* @__PURE__ */ jsxs("div", {
+	...props.root,
+	children: [
+		title && /* @__PURE__ */ jsx("div", {
+			...props.title,
+			children: title
+		}),
+		content && /* @__PURE__ */ jsx("div", {
+			...props.content,
+			children: content
+		}),
+		children,
+		actions && /* @__PURE__ */ jsx("div", {
+			...props.actions,
+			children: actions
+		})
+	]
+}));
+//#endregion
+export { Card };

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

@@ -0,0 +1,46 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/collapsible.config.d.ts
+//#region src/collapsible.config.d.ts
+declare const collapsibleConfig: ComponentConfig<{
+  Collapsible: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+      };
+      readonly trigger: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly padding: "0";
+      };
+      readonly content: {
+        readonly overflow: "hidden";
+        readonly motion: {
+          readonly initial: {
+            readonly height: 0;
+            readonly opacity: 0;
+          };
+          readonly animate: {
+            readonly height: "auto";
+            readonly opacity: 1;
+          };
+          readonly exit: {
+            readonly height: 0;
+            readonly opacity: 0;
+          };
+          readonly transition: {
+            readonly duration: 0.2;
+            readonly ease: [0.16, 1, 0.3, 1];
+          };
+        };
+      };
+    };
+  };
+}, {}>;
+type CollapsibleConfig = typeof collapsibleConfig; //#endregion
+//#endregion
+export { CollapsibleConfig, collapsibleConfig };

package/dist/components/dist/collapsible.config.js

@@ -0,0 +1,46 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+//#region ../components/dist/collapsible.config.js
+const collapsibleConfig = defaultFoundationPreset.defineComponent("Collapsible", (_ctx) => ({ base: {
+	root: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	trigger: {
+		display: "flex",
+		alignItems: "center",
+		width: "100%",
+		cursor: "pointer",
+		backgroundColor: "transparent",
+		borderWidth: "0",
+		padding: "0"
+	},
+	content: {
+		overflow: "hidden",
+		motion: {
+			initial: {
+				height: 0,
+				opacity: 0
+			},
+			animate: {
+				height: "auto",
+				opacity: 1
+			},
+			exit: {
+				height: 0,
+				opacity: 0
+			},
+			transition: {
+				duration: .2,
+				ease: [
+					.16,
+					1,
+					.3,
+					1
+				]
+			}
+		}
+	}
+} }));
+//#endregion
+export { collapsibleConfig };

package/dist/components/dist/collapsible.d.ts

@@ -0,0 +1,62 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/collapsible.d.ts
+//#region src/collapsible.d.ts
+/**
+ * @description A headless collapsible primitive with animated expand/collapse
+ */
+declare const Collapsible: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Collapsible: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+      };
+      readonly trigger: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly width: "100%";
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly padding: "0";
+      };
+      readonly content: {
+        readonly overflow: "hidden";
+        readonly motion: {
+          readonly initial: {
+            readonly height: 0;
+            readonly opacity: 0;
+          };
+          readonly animate: {
+            readonly height: "auto";
+            readonly opacity: 1;
+          };
+          readonly exit: {
+            readonly height: 0;
+            readonly opacity: 0;
+          };
+          readonly transition: {
+            readonly duration: 0.2;
+            readonly ease: [0.16, 1, 0.3, 1];
+          };
+        };
+      };
+    };
+  };
+}, {}>, {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}, {
+  root: "div";
+  trigger: "button";
+  content: "div";
+}>>;
+type CollapsibleProps = React.ComponentProps<typeof Collapsible>; //#endregion
+//#endregion
+export { Collapsible, CollapsibleProps };

package/dist/components/dist/collapsible.js

@@ -0,0 +1,38 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/collapsible.js
+/**
+* @description A headless collapsible primitive with animated expand/collapse
+*/
+const Collapsible = createComponent(({ props, trigger, children, defaultOpen = false, open: controlledOpen, onOpenChange }) => {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const isControlled = controlledOpen !== void 0;
+	const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+	const toggle = useCallback(() => {
+		const next = !isOpen;
+		if (!isControlled) setUncontrolledOpen(next);
+		onOpenChange?.(next);
+	}, [
+		isOpen,
+		isControlled,
+		onOpenChange
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props.root,
+		children: [/* @__PURE__ */ jsx("button", {
+			...props.trigger,
+			type: "button",
+			onClick: toggle,
+			"aria-expanded": isOpen,
+			children: trigger
+		}), isOpen && /* @__PURE__ */ jsx("div", {
+			...props.content,
+			children
+		})]
+	});
+});
+//#endregion
+export { Collapsible };