@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,59 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/input.config.d.ts
+//#region src/input.config.d.ts
+declare const inputConfig: ComponentConfig<{
+  Input: {
+    readonly base: {
+      readonly root: {
+        readonly backgroundColor: string;
+        readonly color: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+        readonly outlineStyle: "none";
+        readonly _focus: {
+          readonly borderColor: string;
+          readonly outlineStyle: "none";
+        };
+        readonly _placeholder: {
+          readonly color: string;
+        };
+      };
+    };
+    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";
+          };
+        };
+      };
+    };
+  };
+}, {}>;
+type InputConfig = typeof inputConfig; //#endregion
+//#endregion
+export { InputConfig, inputConfig };

package/dist/components/dist/input.config.js

@@ -0,0 +1,42 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+//#region ../components/dist/input.config.js
+const inputConfig = defaultFoundationPreset.defineComponent("Input", ({ tokens }) => ({
+	base: { root: {
+		backgroundColor: tokens.bg.primary,
+		color: tokens.color["on-primary"],
+		padding: tokens.spacing["3"],
+		borderRadius: tokens.borderRadius.md,
+		borderWidth: tokens.borderWidth.thin,
+		borderColor: tokens.borderColor.secondary,
+		outlineStyle: "none",
+		_focus: {
+			borderColor: tokens.borderColor.brand,
+			outlineStyle: "none"
+		},
+		_placeholder: { color: tokens.color["on-secondary"] }
+	} },
+	variants: { size: {
+		xs: { root: {
+			padding: `${tokens.spacing["0.5"]} ${tokens.spacing["1.5"]}`,
+			fontSize: "0.6875rem",
+			lineHeight: tokens.lineHeight.tight,
+			borderRadius: tokens.borderRadius.xs
+		} },
+		sm: { root: {
+			padding: `${tokens.spacing["1"]} ${tokens.spacing["2"]}`,
+			fontSize: "0.75rem",
+			borderRadius: tokens.borderRadius.sm
+		} },
+		md: { root: {
+			padding: tokens.spacing["3"],
+			fontSize: "0.875rem"
+		} },
+		lg: { root: {
+			padding: `${tokens.spacing["4"]} ${tokens.spacing["6"]}`,
+			fontSize: "1rem"
+		} }
+	} }
+}));
+//#endregion
+export { inputConfig };

package/dist/components/dist/input.d.ts

@@ -0,0 +1,68 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+import { HtmlInputProps, SizingStyleProps } from "@uds/types";
+
+//#region ../components/dist/input.d.ts
+//#region src/input.d.ts
+interface InputProps extends HtmlInputProps, SizingStyleProps {}
+/**
+ * A primitive that renders a text input
+ */
+declare const Input: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Input: {
+    readonly base: {
+      readonly root: {
+        readonly backgroundColor: string;
+        readonly color: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+        readonly outlineStyle: "none";
+        readonly _focus: {
+          readonly borderColor: string;
+          readonly outlineStyle: "none";
+        };
+        readonly _placeholder: {
+          readonly color: string;
+        };
+      };
+    };
+    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";
+          };
+        };
+      };
+    };
+  };
+}, {}>, InputProps, {
+  root: "input";
+}>>; //#endregion
+//#endregion
+export { Input, InputProps };

package/dist/components/dist/input.js

@@ -0,0 +1,14 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../components/dist/input.js
+/**
+* A primitive that renders a text input
+*/
+const Input = createComponent(({ props }) => /* @__PURE__ */ jsx("input", {
+	type: "text",
+	"data-1p-ignore": true,
+	...props.root
+}));
+//#endregion
+export { Input };

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

@@ -0,0 +1,352 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/item.config.d.ts
+//#region src/item.config.d.ts
+declare const itemConfig: ComponentConfig<{
+  Item: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly paddingLeft: string;
+        readonly paddingRight: string;
+        readonly paddingTop: string;
+        readonly paddingBottom: string;
+        readonly borderRadius: string;
+        readonly cursor: "pointer";
+        readonly _hover: {
+          readonly backgroundColor: string;
+        };
+      };
+      readonly media: {
+        readonly width: "28px";
+        readonly height: "28px";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly borderRadius: string;
+        readonly flexShrink: "0";
+        readonly color: string;
+      };
+      readonly content: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+        readonly flex: "1";
+        readonly minWidth: "0px";
+      };
+      readonly title: {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly description: {
+        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 actions: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly flexShrink: "0";
+      };
+    };
+    readonly variants: {
+      readonly variant: {
+        readonly default: {
+          readonly root: {};
+        };
+        readonly muted: {
+          readonly root: {
+            readonly backgroundColor: string;
+            readonly _hover: {
+              readonly backgroundColor: string;
+            };
+          };
+        };
+      };
+      readonly size: {
+        readonly sm: {
+          readonly root: {
+            readonly paddingLeft: string;
+            readonly paddingRight: string;
+            readonly paddingTop: string;
+            readonly paddingBottom: string;
+            readonly gap: string;
+          };
+          readonly media: {
+            readonly width: "24px";
+            readonly height: "24px";
+          };
+        };
+        readonly md: {
+          readonly root: {};
+        };
+      };
+    };
+    readonly defaultVariants: {
+      readonly variant: "default";
+      readonly size: "md";
+    };
+  };
+}, {}>;
+type ItemConfig = typeof itemConfig; //#endregion
+//#endregion
+export { ItemConfig, itemConfig };

package/dist/components/dist/item.config.js

@@ -0,0 +1,83 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/item.config.js
+const itemConfig = defaultFoundationPreset.defineComponent("Item", ({ tokens }) => ({
+	base: {
+		root: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing["2"],
+			paddingLeft: tokens.spacing["3"],
+			paddingRight: tokens.spacing["3"],
+			paddingTop: tokens.spacing["2"],
+			paddingBottom: tokens.spacing["2"],
+			borderRadius: tokens.borderRadius.lg,
+			cursor: "pointer",
+			_hover: { backgroundColor: tokens.bg.secondary }
+		},
+		media: {
+			width: "28px",
+			height: "28px",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: tokens.borderRadius.md,
+			flexShrink: "0",
+			color: tokens.color["on-secondary"]
+		},
+		content: {
+			display: "flex",
+			flexDirection: "column",
+			gap: tokens.spacing["0.5"],
+			flex: "1",
+			minWidth: "0px"
+		},
+		title: {
+			...textVariants.label2,
+			fontWeight: tokens.fontWeight.medium,
+			color: tokens.color["on-primary"]
+		},
+		description: {
+			...textVariants.label3,
+			color: tokens.color["on-secondary"]
+		},
+		actions: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing["1"],
+			flexShrink: "0"
+		}
+	},
+	variants: {
+		variant: {
+			default: { root: {} },
+			muted: { root: {
+				backgroundColor: tokens.bg.tertiary,
+				_hover: { backgroundColor: tokens.bg.secondary }
+			} }
+		},
+		size: {
+			sm: {
+				root: {
+					paddingLeft: tokens.spacing["2"],
+					paddingRight: tokens.spacing["2"],
+					paddingTop: tokens.spacing["1.5"],
+					paddingBottom: tokens.spacing["1.5"],
+					gap: tokens.spacing["1.5"]
+				},
+				media: {
+					width: "24px",
+					height: "24px"
+				}
+			},
+			md: { root: {} }
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+}));
+//#endregion
+export { itemConfig };