@yahoo/uds-v5-wip 0.0.1

package/dist/config.js

@@ -0,0 +1,22 @@
+import { defaultColors } from "./config/dist/consts/defaultColors.js";
+import { buildTokenReference, createConfigBuilder, darker, lighter, resolveConfig } from "./config/dist/createConfig.js";
+import { buildReverseMap, deserializeConfig, serializeConfig } from "./config/dist/serialize.js";
+import "./config/dist/index.js";
+import { defaultPreset as defaultPreset$1 } from "./presets/dist/defaultPreset.js";
+import "./presets/dist/index.js";
+//#region src/config.ts
+/** biome-ignore-all lint/suspicious/noExplicitAny: necessary for dynamic builder */
+const uds = createConfigBuilder({
+	atomic: [],
+	modes: [],
+	modifiers: [],
+	macros: {},
+	motion: {},
+	components: {},
+	globalStyles: {},
+	preflight: true,
+	prefix: "uds"
+});
+const defaultPreset = defaultPreset$1;
+//#endregion
+export { buildReverseMap, buildTokenReference, createConfigBuilder, darker, defaultColors, defaultPreset, deserializeConfig, lighter, resolveConfig, serializeConfig, uds };

package/dist/core/dist/createComponent.boundaries.js

@@ -0,0 +1,192 @@
+import { stylePropsTwMap } from "./generated/stylePropsTwMap.js";
+//#region ../core/dist/createComponent.boundaries.js
+const RESERVED_PROP_KEYS = new Set([
+	"children",
+	"motion",
+	"motionConfig",
+	"props",
+	"data-uds-class"
+]);
+function assertTransformedConfig(nameOrConfig) {
+	if (typeof nameOrConfig !== "string") return nameOrConfig;
+	return {
+		name: nameOrConfig,
+		element: "div",
+		slots: ["root"],
+		variants: [],
+		defaultVariants: {},
+		ownPropKeys: [],
+		_udsUntransformed: true
+	};
+}
+function inferComponentNameFromRenderFn(renderFn) {
+	if (typeof renderFn.displayName === "string" && renderFn.displayName.trim().length > 0) return renderFn.displayName;
+	if (typeof renderFn.name === "string" && renderFn.name.trim().length > 0) return renderFn.name;
+	return "Component";
+}
+function partitionMergedProps(mergedProps, ownPropKeySet, slotNames) {
+	const ownProps = {};
+	const resolveProps = {};
+	let children;
+	let injectedClassName;
+	let userMotionConfig;
+	let slotOverrides;
+	for (const key in mergedProps) {
+		if (!Object.hasOwn(mergedProps, key)) continue;
+		const value = mergedProps[key];
+		if (ownPropKeySet.has(key)) {
+			ownProps[key] = value;
+			continue;
+		}
+		if (key === "children") {
+			children = value;
+			continue;
+		}
+		if (key === "data-uds-class") {
+			injectedClassName = typeof value === "string" ? value : void 0;
+			continue;
+		}
+		if (key === "motionConfig") {
+			userMotionConfig = value && typeof value === "object" && !Array.isArray(value) ? value : void 0;
+			continue;
+		}
+		if (slotNames && key.startsWith("_") && value && typeof value === "object" && !Array.isArray(value)) {
+			const slotName = key.slice(1);
+			if (slotNames.has(slotName)) {
+				slotOverrides ??= {};
+				slotOverrides[slotName] = value;
+				continue;
+			}
+		}
+		if (!RESERVED_PROP_KEYS.has(key)) resolveProps[key] = value;
+	}
+	return {
+		ownProps,
+		resolveProps,
+		children,
+		injectedClassName,
+		userMotionConfig,
+		slotOverrides
+	};
+}
+function mergeRootClassName(classes, injectedClassName) {
+	if (!injectedClassName) return classes;
+	return {
+		...classes,
+		root: `${classes.root ?? ""} ${injectedClassName}`.trim()
+	};
+}
+function buildSlotProps(slots, classes, htmlProps, rootClassName) {
+	const slotProps = {};
+	for (const slot of slots) slotProps[slot] = { className: classes[slot] };
+	const rootSlot = slots.includes("root") ? "root" : slots[0];
+	if (!rootSlot) return slotProps;
+	const { className: htmlClassName, motionConfig: _mc, ...rootHtmlProps } = htmlProps;
+	const mergedRootClassName = [rootClassName ?? slotProps[rootSlot]?.className, typeof htmlClassName === "string" ? htmlClassName : void 0].filter(Boolean).join(" ").trim();
+	slotProps[rootSlot] = {
+		...slotProps[rootSlot],
+		...rootHtmlProps,
+		className: mergedRootClassName || void 0
+	};
+	if (!slotProps.root) slotProps.root = slotProps[rootSlot];
+	return slotProps;
+}
+function mergeMotionConfig(defaultMotion, userMotionConfig) {
+	if (!defaultMotion && !userMotionConfig) return;
+	const merged = { ...defaultMotion ?? {} };
+	if (!userMotionConfig) return merged;
+	for (const [slot, slotConfig] of Object.entries(userMotionConfig)) {
+		if (slotConfig && typeof slotConfig === "object" && !Array.isArray(slotConfig) && merged[slot] && typeof merged[slot] === "object" && !Array.isArray(merged[slot])) {
+			merged[slot] = {
+				...merged[slot],
+				...slotConfig
+			};
+			continue;
+		}
+		merged[slot] = slotConfig;
+	}
+	return merged;
+}
+/**
+* Render a component that hasn't been transformed by the build plugin.
+* Strips internal data attributes, runs processStyleProps to extract style
+* props into className, and builds minimal slot props for the render function.
+*
+* Returns both the slot props and any extracted own props (non-HTML-attribute
+* values like arrays and objects that should be passed at the top level of
+* the render props, not inside slot props).
+*/
+function buildUntransformedSlotProps(resolveProps, injectedClassName, processStylePropsFn) {
+	const { "data-uds-id": _internalUdsId, "data-uds-source": _internalUdsSource, ...publicResolveProps } = resolveProps;
+	const { className: userClassName, ...styleAndHtml } = publicResolveProps;
+	const [styleClassName, htmlOnly] = processStylePropsFn(styleAndHtml, {
+		extractNativeProps: true,
+		existingClassName: typeof userClassName === "string" ? userClassName : void 0
+	});
+	const htmlProps = {};
+	const extractedOwnProps = {};
+	for (const key in htmlOnly) {
+		if (!Object.hasOwn(htmlOnly, key)) continue;
+		const value = htmlOnly[key];
+		if (key === "as" || key !== "style" && (Array.isArray(value) || value !== null && typeof value === "object" && !(value instanceof Date))) extractedOwnProps[key] = value;
+		else htmlProps[key] = value;
+	}
+	for (const key in styleAndHtml) {
+		if (!Object.hasOwn(styleAndHtml, key)) continue;
+		if (!(key in htmlOnly)) extractedOwnProps[key] = styleAndHtml[key];
+	}
+	if (typeof userClassName === "string") for (const token of userClassName.split(" ")) {
+		if (!token) continue;
+		const entry = stylePropsTwMap[token];
+		if (!entry) continue;
+		const [propName, propValue] = Object.entries(entry)[0];
+		if (propName && propValue !== void 0 && !(propName in extractedOwnProps)) extractedOwnProps[propName] = propValue;
+	}
+	const rootClassName = [
+		typeof userClassName === "string" ? userClassName : void 0,
+		styleClassName,
+		injectedClassName
+	].filter(Boolean).join(" ").trim();
+	return {
+		slotProps: { root: {
+			...htmlProps,
+			className: rootClassName || void 0
+		} },
+		extractedOwnProps
+	};
+}
+function applySlotOverrides(slotProps, slotOverrides, processStylePropsFn) {
+	if (!slotOverrides) return slotProps;
+	const merged = { ...slotProps };
+	for (const [slotName, overrideProps] of Object.entries(slotOverrides)) {
+		if (!merged[slotName]) continue;
+		const [overrideClassName, overrideHtmlProps] = processStylePropsFn(overrideProps, { extractNativeProps: true });
+		const existing = merged[slotName];
+		const mergedClassName = [
+			typeof existing.className === "string" ? existing.className : "",
+			overrideClassName,
+			typeof overrideHtmlProps.className === "string" ? overrideHtmlProps.className : ""
+		].filter(Boolean).join(" ").trim();
+		const { className: _overrideHtmlCn, ...restHtmlProps } = overrideHtmlProps;
+		merged[slotName] = {
+			...existing,
+			...restHtmlProps,
+			className: mergedClassName || void 0
+		};
+	}
+	return merged;
+}
+function mergeSlotMotionProps(slotProps, motionConfig) {
+	if (!motionConfig) return slotProps;
+	const merged = { ...slotProps };
+	for (const [slot, slotMotion] of Object.entries(motionConfig)) {
+		if (!slotMotion || typeof slotMotion !== "object" || Array.isArray(slotMotion) || !merged[slot]) continue;
+		merged[slot] = {
+			...merged[slot],
+			...slotMotion
+		};
+	}
+	return merged;
+}
+//#endregion
+export { applySlotOverrides, assertTransformedConfig, buildSlotProps, buildUntransformedSlotProps, inferComponentNameFromRenderFn, mergeMotionConfig, mergeRootClassName, mergeSlotMotionProps, partitionMergedProps };

package/dist/core/dist/createComponent.d.ts

@@ -0,0 +1,57 @@
+import { CreateComponentConfig, CreateComponentProps, CreateComponentRenderFn, CreateComponentSlotTagConfig, CreateComponentTypeInput } from "@uds/types";
+
+//#region ../core/dist/createComponent.d.ts
+//#region src/createComponent.d.ts
+type PrimitiveTag = keyof React.JSX.IntrinsicElements;
+type SpecConfig<TSpec> = TSpec extends {
+  config: infer TConfig extends CreateComponentTypeInput;
+} ? TConfig : string;
+type SpecOwnProps<TSpec> = TSpec extends {
+  props: infer TOwnProps;
+} ? TOwnProps : TSpec;
+type SpecSlotConfig<TSpec> = SpecConfig<TSpec> extends infer TConfig extends CreateComponentTypeInput ? TSpec extends {
+  slots: infer TSlots;
+} ? TSlots extends CreateComponentSlotTagConfig<TConfig> ? TSlots : 'div' : 'div' : 'div';
+type PrimitiveOwnProps<TSpecOrProps> = TSpecOrProps extends {
+  props: infer TOwnProps;
+} ? TOwnProps : TSpecOrProps;
+/**
+ * Create a custom uds component with automatic style/variant resolution.
+ *
+ * At author-time, call `createComponent(renderFn)`. The loader infers the
+ * component name from the assigned variable (e.g. `const Name = createComponent(...)`).
+ *
+ * The uds-loader build plugin rewrites calls to inline a config object so
+ * the runtime can resolve styles without an extra manifest import.
+ *
+ * @example
+ * ```tsx
+ * type CardConfig = typeof cardConfig;
+ *
+ * interface CardSpec {
+ *   config: CardConfig;
+ *   props: CardOwnProps;
+ * }
+ *
+ * export const Card = createComponent<CardSpec>(
+ *   ({ props, children, title, actions }) => (
+ *     <VStack {...props.root}>
+ *       <Text {...props.title}>{title}</Text>
+ *       {children}
+ *     </VStack>
+ *   )
+ * );
+ * ```
+ */
+declare function createComponent<TSpecOrProps = {}>(tag: PrimitiveTag): React.FC<TSpecOrProps extends {
+  config: infer TConfig extends CreateComponentTypeInput;
+  props: infer TOwnProps;
+  slots: infer TSlots;
+} ? CreateComponentProps<TConfig, TOwnProps, TSlots extends CreateComponentSlotTagConfig<TConfig> ? TSlots : PrimitiveTag> : TSpecOrProps extends {
+  config: infer TConfig extends CreateComponentTypeInput;
+  props: infer TOwnProps;
+} ? CreateComponentProps<TConfig, TOwnProps, PrimitiveTag> : PrimitiveOwnProps<TSpecOrProps>>;
+declare function createComponent<TSpec>(renderFn: CreateComponentRenderFn<SpecConfig<TSpec>, SpecOwnProps<TSpec>, SpecSlotConfig<TSpec>>): React.FC<CreateComponentProps<SpecConfig<TSpec>, SpecOwnProps<TSpec>, SpecSlotConfig<TSpec>>>;
+declare function createComponent(config: CreateComponentConfig<string>, renderFn: CreateComponentRenderFn<any, any, any>): React.FC<any>; //#endregion
+//#endregion
+export { createComponent };

package/dist/core/dist/createComponent.js

@@ -0,0 +1,67 @@
+import { processStyleProps } from "./getStyles.js";
+import { createComponentStyler } from "./getComponentStyles.js";
+import { applySlotOverrides, assertTransformedConfig, buildSlotProps, buildUntransformedSlotProps, inferComponentNameFromRenderFn, mergeMotionConfig, mergeRootClassName, mergeSlotMotionProps, partitionMergedProps } from "./createComponent.boundaries.js";
+import { createElement } from "react";
+//#region ../core/dist/createComponent.js
+function createPrimitiveRenderFn(tag) {
+	return ({ props, children }) => {
+		const { as, ...rootProps } = props.root;
+		return createElement(as ?? tag, rootProps, children);
+	};
+}
+function toRenderProps(ownProps, props, children) {
+	return {
+		...ownProps,
+		props,
+		children
+	};
+}
+function createComponent(nameOrConfigOrRenderFn, renderFnArg) {
+	let nameOrConfig;
+	let renderFn = null;
+	let isRenderFunctionAuthoringCall = false;
+	if (typeof nameOrConfigOrRenderFn === "function") {
+		isRenderFunctionAuthoringCall = true;
+		renderFn = nameOrConfigOrRenderFn;
+		nameOrConfig = inferComponentNameFromRenderFn(nameOrConfigOrRenderFn);
+	} else if (typeof nameOrConfigOrRenderFn === "string") {
+		if (typeof renderFnArg === "function") throw new Error("createComponent(\"Name\", renderFn) is no longer supported. Use createComponent(renderFn).");
+		renderFn = createPrimitiveRenderFn(typeof renderFnArg === "string" ? renderFnArg : nameOrConfigOrRenderFn);
+		nameOrConfig = nameOrConfigOrRenderFn;
+	} else {
+		nameOrConfig = nameOrConfigOrRenderFn;
+		if (typeof renderFnArg === "function") renderFn = renderFnArg;
+		else if (typeof renderFnArg === "string") renderFn = createPrimitiveRenderFn(renderFnArg);
+	}
+	if (!renderFn) throw new Error("createComponent requires a render function or a tag");
+	const config = assertTransformedConfig(nameOrConfig);
+	const { name, element, slots, variants, defaultVariants, ownPropKeys, motion } = config;
+	const shouldPassThroughFallbackProps = config._udsUntransformed === true && isRenderFunctionAuthoringCall;
+	const styler = createComponentStyler(name, slots, element, variants);
+	const ownPropKeySet = new Set(ownPropKeys);
+	const slotNameSet = new Set(slots);
+	const Component = (props) => {
+		const { ownProps, resolveProps, children, injectedClassName, userMotionConfig, slotOverrides } = partitionMergedProps({
+			...defaultVariants,
+			...props
+		}, ownPropKeySet, slotNameSet);
+		if (shouldPassThroughFallbackProps) {
+			const { slotProps, extractedOwnProps } = buildUntransformedSlotProps(resolveProps, injectedClassName, processStyleProps);
+			return renderFn(toRenderProps({
+				...ownProps,
+				...extractedOwnProps
+			}, slotProps, children));
+		}
+		const { classes: resolvedClasses, htmlProps, className: resolvedClassName } = styler.resolve(resolveProps);
+		const classes = mergeRootClassName(resolvedClasses, injectedClassName);
+		const mergedRootClassName = [resolvedClassName, injectedClassName].filter(Boolean).join(" ").trim();
+		const mergedMotionConfig = mergeMotionConfig(motion, userMotionConfig);
+		const finalSlotProps = mergeSlotMotionProps(applySlotOverrides(buildSlotProps(slots, classes, htmlProps, mergedRootClassName || void 0), slotOverrides, processStyleProps), mergedMotionConfig);
+		return renderFn(toRenderProps(ownProps, finalSlotProps, children));
+	};
+	Component.displayName = name;
+	Component.__udsVariantValues = config.variantValues;
+	return Component;
+}
+//#endregion
+export { createComponent };

package/dist/core/dist/createComponentExample.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps, ComponentType } from "react";
+
+//#region ../core/dist/createComponentExample.d.ts
+//#region src/createComponentExample.d.ts
+/**
+ * Extracts variant fixtures from a Component's props type.
+ * If Button has `variant?: 'brand' | 'outline'` and `size?: 'sm' | 'md'`,
+ * fixtures becomes `{ variant: ('brand' | 'outline')[], size: ('sm' | 'md')[] }`.
+ */
+type VariantFixtures<TComponent extends ComponentType<any>> = { [K in keyof ComponentProps<TComponent> as ComponentProps<TComponent>[K] extends string | undefined ? K extends 'children' | 'className' | 'style' | `on${string}` | `aria-${string}` | `data-${string}` | keyof React.JSX.IntrinsicElements['div'] ? never : K : never]: NonNullable<ComponentProps<TComponent>[K]>[] };
+type ExampleProps<TComponent extends ComponentType<any>> = Partial<ComponentProps<TComponent>>;
+type ExampleFn<TComponent extends ComponentType<any>> = ComponentType<ExampleProps<TComponent>>;
+interface ComponentExample<T extends Record<string, ComponentType<any>>> {
+  componentName: string;
+  examples: T;
+  icon?: string;
+  minWidth?: number;
+  subcomponents: ComponentExample<any>[];
+}
+/** Return type of the examples callback — example fns plus optional metadata. */
+type ExamplesResult<TComponent extends ComponentType<any>> = {
+  [key: string]: ExampleFn<TComponent> | string | number | ComponentExample<any>[] | undefined;
+  icon?: string;
+  minWidth?: number;
+  subcomponents?: ComponentExample<any>[];
+};
+/**
+ * Define examples for a UDS component. Props and fixtures are automatically
+ * typed from the Component — no config import or manual annotations needed.
+ *
+ * @example
+ * ```tsx
+ * export default createComponentExample(Button, (fixtures) => ({
+ *   icon: 'M5 5h14v14H5V5zm3 3h8v8H8V8z',
+ *   default: (props) => <Button variant="brand" {...props}>{props.children ?? 'Brand'}</Button>,
+ *   anatomy: () => <Button>Default</Button>,
+ * }));
+ * ```
+ */
+declare function createComponentExample<TComponent extends ComponentType<any>, T extends Record<string, ExampleFn<TComponent>>>(Component: TComponent, examplesFn: (fixtures: VariantFixtures<TComponent>) => ExamplesResult<TComponent>): ComponentExample<T>; //#endregion
+//#endregion
+export { ComponentExample, createComponentExample };

package/dist/core/dist/createComponentExample.js

@@ -0,0 +1,27 @@
+//#region ../core/dist/createComponentExample.js
+/**
+* Define examples for a UDS component. Props and fixtures are automatically
+* typed from the Component — no config import or manual annotations needed.
+*
+* @example
+* ```tsx
+* export default createComponentExample(Button, (fixtures) => ({
+*   icon: 'M5 5h14v14H5V5zm3 3h8v8H8V8z',
+*   default: (props) => <Button variant="brand" {...props}>{props.children ?? 'Brand'}</Button>,
+*   anatomy: () => <Button>Default</Button>,
+* }));
+* ```
+*/
+function createComponentExample(Component, examplesFn) {
+	const componentName = Component.displayName || Component.name || "Unknown";
+	const { icon, minWidth, subcomponents, ...examples } = examplesFn(Component.__udsVariantValues ?? {});
+	return {
+		componentName,
+		examples,
+		icon,
+		minWidth,
+		subcomponents: subcomponents ?? []
+	};
+}
+//#endregion
+export { createComponentExample };

package/dist/core/dist/createProvider.d.ts

@@ -0,0 +1,13 @@
+//#region ../core/dist/createProvider.d.ts
+//#region src/createProvider.d.ts
+type ProviderRenderFn<TContext, TProps = Record<never, never>> = (props: {
+  children: React.ReactNode;
+} & TProps) => {
+  context: TContext;
+  render: React.ReactNode;
+};
+declare function createProvider<TContext, TProps = Record<never, never>>(name: string, renderFn: ProviderRenderFn<TContext, TProps>): [React.FC<{
+  children: React.ReactNode;
+} & TProps>, () => TContext]; //#endregion
+//#endregion
+export { createProvider };

package/dist/core/dist/createProvider.js

@@ -0,0 +1,24 @@
+"use client";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region ../core/dist/createProvider.js
+function createProvider(name, renderFn) {
+	const Context = createContext(null);
+	function Provider(props) {
+		const result = renderFn(props);
+		return /* @__PURE__ */ jsx(Context.Provider, {
+			value: result.context,
+			children: result.render
+		});
+	}
+	Provider.displayName = `${name}Provider`;
+	Provider.__udsProvider = { name };
+	function useProviderContext() {
+		const ctx = useContext(Context);
+		if (!ctx) throw new Error(`use${name} must be used within ${name}Provider`);
+		return ctx;
+	}
+	return [Provider, useProviderContext];
+}
+//#endregion
+export { createProvider };