@yahoo/uds-v5-wip 1.60.0 → 1.62.0

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

@@ -1,403 +0,0 @@
-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
-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
-export { Button, ButtonOwnProps, ButtonProps };

package/dist/components/dist/button.js

@@ -1,35 +0,0 @@
-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 = jsxs(Fragment, { children: [
-		startIcon && jsx("span", {
-			...props.startIcon,
-			children: startIcon
-		}),
-		children,
-		endIcon && jsx("span", {
-			...props.endIcon,
-			children: endIcon
-		})
-	] });
-	if (asChild) return jsx(ButtonSlot, {
-		onClick: onPress,
-		...props.root,
-		...nativeProps,
-		children: content
-	});
-	return jsx("button", {
-		onClick: onPress,
-		...props.root,
-		...nativeProps,
-		children: content
-	});
-});
-//#endregion
-export { Button };