@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/button.d.ts

@@ -0,0 +1,404 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+import { HtmlButtonProps, SizingStyleProps } from "@uds/types";
+
+//#region ../components/dist/button.d.ts
+//#region src/button.d.ts
+interface ButtonOwnProps extends HtmlButtonProps, SizingStyleProps {
+  /**
+   * @description When asChild is set to true, the component's child will be cloned and passed
+   * the props and behavior required to make it functional.
+   */
+  asChild?: boolean;
+  onPress?: () => void;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+/**
+ * @description A styled button with predefined variants (e.g. brand, ghost, destructive). Use for labeled text actions like "Submit", "Add to Cart", "Cancel". Do NOT use for custom-styled interactive elements like color swatches, size chips, or icon-only buttons — use Pressable instead.
+ */
+declare const Button: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Button: {
+    readonly base: {
+      readonly root: {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "inline-flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly startIcon: {
+        readonly display: "flex";
+        readonly flexShrink: "0";
+      };
+      readonly endIcon: {
+        readonly display: "flex";
+        readonly flexShrink: "0";
+      };
+    };
+    readonly variants: {
+      readonly size: {
+        readonly xs: {
+          readonly root: {
+            readonly padding: `${string} ${string}`;
+            readonly fontSize: "0.6875rem";
+            readonly lineHeight: string;
+            readonly borderRadius: string;
+          };
+        };
+        readonly sm: {
+          readonly root: {
+            readonly padding: `${string} ${string}`;
+            readonly fontSize: "0.75rem";
+            readonly borderRadius: string;
+          };
+        };
+        readonly md: {
+          readonly root: {
+            readonly padding: string;
+            readonly fontSize: "0.875rem";
+          };
+        };
+        readonly lg: {
+          readonly root: {
+            readonly padding: `${string} ${string}`;
+            readonly fontSize: "1rem";
+          };
+        };
+      };
+      readonly variant: {
+        readonly brand: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly outline: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly borderWidth: string;
+            readonly borderColor: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly ghost: {
+          readonly root: {
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly danger: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly positive: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly accent: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+        readonly inverse: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly color: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+      };
+    };
+  };
+}, {}>, ButtonOwnProps, {
+  root: "button";
+  startIcon: "span";
+  endIcon: "span";
+}>>;
+type ButtonProps = React.ComponentProps<typeof Button>; //#endregion
+//#endregion
+export { Button, ButtonOwnProps, ButtonProps };

package/dist/components/dist/button.js

@@ -0,0 +1,35 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { ButtonSlot } from "./_slots.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/button.js
+/**
+* @description A styled button with predefined variants (e.g. brand, ghost, destructive). Use for labeled text actions like "Submit", "Add to Cart", "Cancel". Do NOT use for custom-styled interactive elements like color swatches, size chips, or icon-only buttons — use Pressable instead.
+*/
+const Button = createComponent(({ props, children, asChild, onPress, startIcon, endIcon, ...nativeProps }) => {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		startIcon && /* @__PURE__ */ jsx("span", {
+			...props.startIcon,
+			children: startIcon
+		}),
+		children,
+		endIcon && /* @__PURE__ */ jsx("span", {
+			...props.endIcon,
+			children: endIcon
+		})
+	] });
+	if (asChild) return /* @__PURE__ */ jsx(ButtonSlot, {
+		onClick: onPress,
+		...props.root,
+		...nativeProps,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		onClick: onPress,
+		...props.root,
+		...nativeProps,
+		children: content
+	});
+});
+//#endregion
+export { Button };