@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/badge.d.ts

@@ -0,0 +1,490 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/badge.d.ts
+//#region src/badge.d.ts
+/**
+ * @description A small label for status, category, or metadata
+ */
+declare const Badge: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Badge: {
+    readonly base: {
+      readonly root: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+      };
+      readonly dot: {
+        readonly width: "0.375rem";
+        readonly height: "0.375rem";
+        readonly borderRadius: string;
+        readonly display: "none";
+      };
+      readonly text: {
+        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 variants: {
+      readonly variant: {
+        readonly brand: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly positive: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly alert: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly accent: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly outline: {
+          readonly root: {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: string;
+            readonly borderColor: string;
+          };
+        };
+        readonly 'on-brand': {
+          readonly root: {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: string;
+            readonly borderColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly 'dot-positive': {
+          readonly dot: {
+            readonly display: "block";
+            readonly backgroundColor: string;
+          };
+        };
+        readonly 'dot-alert': {
+          readonly dot: {
+            readonly display: "block";
+            readonly backgroundColor: string;
+          };
+        };
+        readonly 'dot-brand': {
+          readonly dot: {
+            readonly display: "block";
+            readonly backgroundColor: string;
+          };
+        };
+      };
+      readonly size: {
+        readonly sm: {
+          readonly root: {
+            readonly gap: string;
+            readonly padding: `${string} ${string}`;
+          };
+          readonly dot: {
+            readonly width: "0.3rem";
+            readonly height: "0.3rem";
+          };
+          readonly text: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly md: {};
+        readonly lg: {
+          readonly root: {
+            readonly gap: string;
+            readonly padding: `${string} ${string}`;
+          };
+          readonly dot: {
+            readonly width: "0.45rem";
+            readonly height: "0.45rem";
+          };
+          readonly text: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+      };
+    };
+    readonly defaultVariants: {
+      readonly size: "md";
+    };
+  };
+}, {}>, {
+  children?: React.ReactNode;
+}, {
+  root: "span";
+  dot: "span";
+  text: "span";
+}>>;
+type BadgeProps = React.ComponentProps<typeof Badge>; //#endregion
+//#endregion
+export { Badge, BadgeProps };

package/dist/components/dist/badge.js

@@ -0,0 +1,16 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/badge.js
+/**
+* @description A small label for status, category, or metadata
+*/
+const Badge = createComponent(({ props, children }) => /* @__PURE__ */ jsxs("span", {
+	...props.root,
+	children: [/* @__PURE__ */ jsx("span", { ...props.dot }), /* @__PURE__ */ jsx("span", {
+		...props.text,
+		children
+	})]
+}));
+//#endregion
+export { Badge };

package/dist/components/dist/box.d.ts

@@ -0,0 +1,15 @@
+import * as _$react from "react";
+import { BoxAsTag, HtmlDivProps, StyleAndModifierProps } from "@uds/types";
+
+//#region ../components/dist/box.d.ts
+//#region src/box.d.ts
+interface BoxProps extends HtmlDivProps, StyleAndModifierProps {
+  /** Render as a different semantic HTML element. Defaults to `div`. */
+  as?: BoxAsTag;
+}
+/**
+ * @description The fundamental primitive component that includes styling utility properties, and corresponding design variables as values
+ */
+declare const Box: _$react.FC<BoxProps>; //#endregion
+//#endregion
+export { Box, BoxProps };

package/dist/components/dist/box.js

@@ -0,0 +1,9 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+//#region ../components/dist/box.js
+/**
+* @description The fundamental primitive component that includes styling utility properties, and corresponding design variables as values
+*/
+const Box = createComponent("div");
+//#endregion
+export { Box };