@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,220 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/alert.config.d.ts
+//#region src/alert.config.d.ts
+declare const alertConfig: ComponentConfig<{
+  Alert: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly borderWidth: string;
+      };
+      readonly text: {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+    };
+    readonly variants: {
+      readonly severity: {
+        readonly positive: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+        readonly success: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+        readonly alert: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+        readonly error: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+        readonly warning: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+        readonly brand: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+      };
+    };
+  };
+}, {}>;
+type AlertConfig = typeof alertConfig; //#endregion
+//#endregion
+export { AlertConfig, alertConfig };

package/dist/components/dist/alert.config.js

@@ -0,0 +1,54 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/alert.config.js
+const alertConfig = defaultFoundationPreset.defineComponent("Alert", ({ tokens }) => ({
+	base: {
+		root: {
+			display: "flex",
+			alignItems: "center",
+			padding: tokens.spacing["4"],
+			borderRadius: tokens.borderRadius.md,
+			borderWidth: tokens.borderWidth.thin
+		},
+		text: {
+			...textVariants.label2,
+			maxInlineSize: "65ch",
+			textWrap: "pretty"
+		}
+	},
+	variants: { severity: {
+		positive: { root: {
+			backgroundColor: tokens.bg["positive-wash"],
+			borderColor: tokens.borderColor.positive,
+			color: tokens.color.positive
+		} },
+		success: { root: {
+			backgroundColor: tokens.bg["positive-wash"],
+			borderColor: tokens.borderColor.positive,
+			color: tokens.color.positive
+		} },
+		alert: { root: {
+			backgroundColor: tokens.bg["alert-wash"],
+			borderColor: tokens.borderColor.alert,
+			color: tokens.color.alert
+		} },
+		error: { root: {
+			backgroundColor: tokens.bg["alert-wash"],
+			borderColor: tokens.borderColor.alert,
+			color: tokens.color.alert
+		} },
+		warning: { root: {
+			backgroundColor: tokens.bg["warning-wash"],
+			borderColor: tokens.borderColor.warning,
+			color: tokens.color.warning
+		} },
+		brand: { root: {
+			backgroundColor: tokens.bg["brand-wash"],
+			borderColor: tokens.borderColor.brand,
+			color: tokens.color.brand
+		} }
+	} }
+}));
+//#endregion
+export { alertConfig };

package/dist/components/dist/alert.d.ts

@@ -0,0 +1,231 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/alert.d.ts
+//#region src/alert.d.ts
+/**
+ * @description A message that communicates important information to the user
+ */
+declare const Alert: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Alert: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly borderWidth: string;
+      };
+      readonly text: {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+    };
+    readonly variants: {
+      readonly severity: {
+        readonly positive: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+        readonly success: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+        readonly alert: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+        readonly error: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+        readonly warning: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+        readonly brand: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly borderColor: string;
+            readonly color: string;
+          };
+        };
+      };
+    };
+  };
+}, {}>, {
+  children?: React.ReactNode;
+}, {
+  root: "div";
+  text: "span";
+}>>;
+type AlertProps = React.ComponentProps<typeof Alert>; //#endregion
+//#endregion
+export { Alert, AlertProps };

package/dist/components/dist/alert.js

@@ -0,0 +1,16 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../components/dist/alert.js
+/**
+* @description A message that communicates important information to the user
+*/
+const Alert = createComponent(({ props, children }) => /* @__PURE__ */ jsx("div", {
+	...props.root,
+	children: /* @__PURE__ */ jsx("span", {
+		...props.text,
+		children
+	})
+}));
+//#endregion
+export { Alert };