@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/textarea.d.ts

@@ -0,0 +1,363 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+import { HtmlTextAreaProps, SizingStyleProps } from "@uds/types";
+
+//#region ../components/dist/textarea.d.ts
+//#region src/textarea.d.ts
+interface TextareaOwnProps extends HtmlTextAreaProps, SizingStyleProps {}
+/**
+ * @description A primitive for multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text
+ */
+declare const Textarea: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Textarea: {
+    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 variant: {
+        readonly default: {
+          readonly root: {};
+        };
+        readonly ghost: {
+          readonly root: {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly backgroundColor: "transparent";
+            readonly borderWidth: "0";
+            readonly borderRadius: "0";
+            readonly padding: "0";
+            readonly resize: "none";
+            readonly _focus: {
+              readonly borderColor: "transparent";
+            };
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+      };
+      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";
+          };
+        };
+      };
+    };
+  };
+}, {}>, TextareaOwnProps, {
+  root: "textarea";
+}>>;
+type TextareaProps = React.ComponentProps<typeof Textarea>; //#endregion
+//#endregion
+export { Textarea, TextareaOwnProps, TextareaProps };

package/dist/components/dist/textarea.js

@@ -0,0 +1,9 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+//#region ../components/dist/textarea.js
+/**
+* @description A primitive for multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text
+*/
+const Textarea = createComponent("textarea");
+//#endregion
+export { Textarea };

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

@@ -0,0 +1,336 @@
+import { ComponentConfig, InterpolateMarker } from "../../config/dist/createConfig.js";
+//#region ../components/dist/toast.config.d.ts
+//#region src/toast.config.d.ts
+declare const toastConfig: ComponentConfig<{
+  Toast: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+      };
+      readonly trigger: {};
+      readonly item: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
+        readonly gap: string;
+        readonly padding: `${string} ${string}`;
+        readonly borderRadius: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+        readonly backgroundColor: string;
+        readonly minWidth: "16rem";
+        readonly touchAction: "none";
+        readonly userSelect: "none";
+        readonly boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)";
+        readonly transition: "background-color 0.3s ease, border-color 0.3s ease";
+        readonly motion: {
+          readonly initial: {
+            readonly opacity: 0;
+            readonly y: 80;
+            readonly scale: 0.95;
+          };
+          readonly animate: {
+            readonly 'data-state': {
+              readonly collapsed: {
+                readonly y: InterpolateMarker;
+                readonly scale: InterpolateMarker;
+                readonly opacity: InterpolateMarker;
+              };
+              readonly expanded: {
+                readonly y: InterpolateMarker;
+                readonly scale: 1;
+                readonly opacity: 1;
+              };
+            };
+          };
+          readonly exit: {
+            readonly opacity: 0;
+            readonly x: 100;
+          };
+          readonly transition: {
+            readonly type: "spring";
+            readonly damping: 25;
+            readonly stiffness: 300;
+          };
+          readonly drag: true;
+          readonly dragConstraints: {
+            readonly left: 0;
+            readonly right: 0;
+            readonly top: 0;
+            readonly bottom: 0;
+          };
+          readonly dragElastic: 0.5;
+          readonly dragSnapToOrigin: true;
+          readonly layout: true;
+        };
+      };
+      readonly text: {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "color 0.3s ease";
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly dismiss: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "1.5rem";
+        readonly height: "1.5rem";
+        readonly borderRadius: string;
+        readonly cursor: "pointer";
+        readonly color: string;
+        readonly fontSize: "0.75rem";
+        readonly _hover: {
+          readonly backgroundColor: string;
+        };
+      };
+    };
+    readonly variants: {
+      readonly variant: {
+        readonly positive: {
+          readonly item: {
+            readonly borderColor: string;
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly alert: {
+          readonly item: {
+            readonly borderColor: string;
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly warning: {
+          readonly item: {
+            readonly borderColor: string;
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly info: {
+          readonly item: {
+            readonly borderColor: string;
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+        readonly neutral: {
+          readonly item: {
+            readonly borderColor: string;
+            readonly backgroundColor: string;
+          };
+          readonly text: {
+            readonly color: string;
+          };
+        };
+      };
+    };
+  };
+}, {}>;
+type ToastConfig = typeof toastConfig; //#endregion
+//#endregion
+export { ToastConfig, toastConfig };