@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,307 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/text.config.d.ts
+//#region src/text.config.d.ts
+declare const textConfig: ComponentConfig<{
+  Text: {
+    readonly base: {
+      readonly root: {};
+    };
+    readonly variants: {
+      readonly variant: {
+        readonly superDisplay1: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          };
+        };
+        readonly superDisplay2: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly superDisplay3: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly display1: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly display2: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly display3: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly display4: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly title1: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly title2: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly title3: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly title4: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly subtitle1: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly subtitle2: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly caption: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly headline: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly body: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly label1: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly label2: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly label3: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly label4: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly legal: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly code: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+      };
+    };
+  };
+}, {}>;
+type TextConfig = typeof textConfig;
+/** Flattened text variant styles — use `...textVariants.label1` directly in slot definitions. */
+declare const textVariants: {
+  [x: string]: {
+    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;
+  };
+}; //#endregion
+//#endregion
+export { TextConfig, textConfig, textVariants };

package/dist/components/dist/text.config.js

@@ -0,0 +1,149 @@
+import { fromEntries } from "../../utils/dist/object-utils/fromEntries.js";
+import "../../utils/dist/index.js";
+import { rem } from "../../config/dist/createConfig.js";
+import "../../config/dist/index.js";
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+//#region ../components/dist/text.config.js
+const textConfig = defaultFoundationPreset.defineComponent("Text", ({ tokens }) => ({
+	base: { root: {} },
+	variants: { variant: {
+		superDisplay1: { root: {
+			fontSize: rem(192),
+			fontWeight: tokens.fontWeight.bold,
+			lineHeight: "1",
+			fontFamily: tokens.fontFamily.sans
+		} },
+		superDisplay2: { root: {
+			fontSize: rem(128),
+			fontWeight: tokens.fontWeight.bold,
+			lineHeight: tokens.lineHeight.tight,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		superDisplay3: { root: {
+			fontSize: rem(80),
+			fontWeight: tokens.fontWeight.bold,
+			lineHeight: tokens.lineHeight.tight,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		display1: { root: {
+			fontSize: rem(96),
+			fontWeight: tokens.fontWeight.medium,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		display2: { root: {
+			fontSize: rem(56),
+			fontWeight: tokens.fontWeight.medium,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		display3: { root: {
+			fontSize: rem(40),
+			fontWeight: "450",
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		display4: { root: {
+			fontSize: rem(40),
+			fontWeight: tokens.fontWeight.normal,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		title1: { root: {
+			fontSize: rem(28),
+			fontWeight: tokens.fontWeight.bold,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		title2: { root: {
+			fontSize: rem(28),
+			fontWeight: "450",
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		title3: { root: {
+			fontSize: rem(22),
+			fontWeight: tokens.fontWeight.bold,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		title4: { root: {
+			fontSize: rem(22),
+			fontWeight: "450",
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		subtitle1: { root: {
+			fontSize: rem(32),
+			fontWeight: tokens.fontWeight.medium,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		subtitle2: { root: {
+			fontSize: rem(24),
+			fontWeight: tokens.fontWeight.medium,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		caption: { root: {
+			fontSize: rem(20),
+			fontWeight: tokens.fontWeight.normal,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		headline: { root: {
+			fontSize: rem(16),
+			fontWeight: tokens.fontWeight.medium,
+			lineHeight: tokens.lineHeight.tight,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		body: { root: {
+			fontSize: rem(16),
+			fontWeight: tokens.fontWeight.normal,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		label1: { root: {
+			fontSize: rem(14),
+			fontWeight: tokens.fontWeight.medium,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		label2: { root: {
+			fontSize: rem(14),
+			fontWeight: tokens.fontWeight.normal,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		label3: { root: {
+			fontSize: rem(12),
+			fontWeight: tokens.fontWeight.medium,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		label4: { root: {
+			fontSize: rem(12),
+			fontWeight: tokens.fontWeight.normal,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		legal: { root: {
+			fontSize: rem(10),
+			fontWeight: tokens.fontWeight.normal,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.sans
+		} },
+		code: { root: {
+			fontSize: rem(14),
+			fontWeight: tokens.fontWeight.normal,
+			lineHeight: tokens.lineHeight.normal,
+			fontFamily: tokens.fontFamily.mono
+		} }
+	} }
+}));
+const _textVariants = textConfig.components.Text.variants.variant;
+/** Flattened text variant styles — use `...textVariants.label1` directly in slot definitions. */
+const textVariants = fromEntries(Object.entries(_textVariants).map(([key, value]) => [key, value.root]));
+//#endregion
+export { textConfig, textVariants };

package/dist/components/dist/text.d.ts

@@ -0,0 +1,206 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+import { BackgroundStyleProps, BorderStyleProps, FlexStyleProps, HtmlTextProps, ModifierProps, NativeTextElementTag, OpacityStyleProps, SizingStyleProps, SpacingStyleProps, TypographyStyleProps } from "@uds/types";
+
+//#region ../components/dist/text.d.ts
+//#region src/text.d.ts
+interface TextStyleProps extends TypographyStyleProps, SpacingStyleProps, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, SizingStyleProps, OpacityStyleProps {}
+interface TextProps extends HtmlTextProps<NativeTextElementTag>, TextStyleProps, ModifierProps<TextStyleProps> {
+  as?: NativeTextElementTag;
+  children?: React.ReactNode;
+}
+/**
+ * @description A primitive that renders a text element
+ */
+declare const Text: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Text: {
+    readonly base: {
+      readonly root: {};
+    };
+    readonly variants: {
+      readonly variant: {
+        readonly superDisplay1: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          };
+        };
+        readonly superDisplay2: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly superDisplay3: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly display1: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly display2: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly display3: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly display4: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly title1: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly title2: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly title3: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly title4: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly subtitle1: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly subtitle2: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly caption: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly headline: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly body: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly label1: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly label2: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly label3: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly label4: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly legal: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly code: {
+          readonly root: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+      };
+    };
+  };
+}, {}>, TextProps, {
+  root: "p";
+}>>; //#endregion
+//#endregion
+export { Text, TextProps };

package/dist/components/dist/text.js

@@ -0,0 +1,12 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { createElement } from "react";
+//#region ../components/dist/text.js
+/**
+* @description A primitive that renders a text element
+*/
+const Text = createComponent(({ props, children, as = "p" }) => {
+	return createElement(typeof as === "string" ? as : "p", props.root, children);
+});
+//#endregion
+export { Text };