@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,432 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/accordion.config.d.ts
+//#region src/accordion.config.d.ts
+declare const accordionConfig: ComponentConfig<{
+  Accordion: {
+    readonly base: {
+      readonly root: {
+        readonly width: "100%";
+        readonly borderWidth: string;
+        readonly borderColor: string;
+        readonly borderRadius: string;
+        readonly overflow: "hidden";
+        readonly backgroundColor: string;
+      };
+      readonly item: {
+        readonly borderBottomWidth: string;
+        readonly borderColor: string;
+      };
+      readonly trigger: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
+        readonly width: "100%";
+        readonly padding: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly _hover: {
+          readonly backgroundColor: string;
+        };
+      };
+      readonly triggerText: {
+        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 icon: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly flexShrink: "0";
+        readonly color: string;
+        readonly motion: {
+          readonly animate: {
+            readonly 'data-state': {
+              readonly open: {
+                readonly rotate: 180;
+              };
+              readonly closed: {
+                readonly rotate: 0;
+              };
+            };
+          };
+          readonly transition: {
+            readonly duration: 0.2;
+          };
+        };
+      };
+      readonly content: {
+        readonly overflow: "hidden";
+        readonly motion: {
+          readonly initial: {
+            readonly height: 0;
+            readonly opacity: 0;
+          };
+          readonly animate: {
+            readonly height: "auto";
+            readonly opacity: 1;
+          };
+          readonly exit: {
+            readonly height: 0;
+            readonly opacity: 0;
+          };
+          readonly transition: {
+            readonly duration: 0.25;
+            readonly ease: [0.16, 1, 0.3, 1];
+          };
+        };
+      };
+      readonly contentText: {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly display: "block";
+        readonly color: string;
+        readonly spacing: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+    };
+  };
+}, {}>;
+type AccordionConfig = typeof accordionConfig; //#endregion
+//#endregion
+export { AccordionConfig, accordionConfig };

package/dist/components/dist/accordion.config.js

@@ -0,0 +1,81 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/accordion.config.js
+const accordionConfig = defaultFoundationPreset.defineComponent("Accordion", ({ tokens }) => ({ base: {
+	root: {
+		width: "100%",
+		borderWidth: tokens.borderWidth.thin,
+		borderColor: tokens.borderColor.secondary,
+		borderRadius: tokens.borderRadius.md,
+		overflow: "hidden",
+		backgroundColor: tokens.bg.primary
+	},
+	item: {
+		borderBottomWidth: tokens.borderWidth.thin,
+		borderColor: tokens.borderColor.secondary
+	},
+	trigger: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		width: "100%",
+		padding: tokens.spacing["4"],
+		cursor: "pointer",
+		backgroundColor: "transparent",
+		_hover: { backgroundColor: tokens.bg.tertiary }
+	},
+	triggerText: {
+		...textVariants.label1,
+		color: tokens.color["on-primary"]
+	},
+	icon: {
+		display: "flex",
+		alignItems: "center",
+		flexShrink: "0",
+		color: tokens.color["on-secondary"],
+		motion: {
+			animate: { "data-state": {
+				open: { rotate: 180 },
+				closed: { rotate: 0 }
+			} },
+			transition: { duration: .2 }
+		}
+	},
+	content: {
+		overflow: "hidden",
+		motion: {
+			initial: {
+				height: 0,
+				opacity: 0
+			},
+			animate: {
+				height: "auto",
+				opacity: 1
+			},
+			exit: {
+				height: 0,
+				opacity: 0
+			},
+			transition: {
+				duration: .25,
+				ease: [
+					.16,
+					1,
+					.3,
+					1
+				]
+			}
+		}
+	},
+	contentText: {
+		...textVariants.label2,
+		display: "block",
+		color: tokens.color["on-secondary"],
+		spacing: tokens.spacing["4"],
+		maxInlineSize: "65ch",
+		textWrap: "pretty"
+	}
+} }));
+//#endregion
+export { accordionConfig };