@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/toast.config.js

@@ -0,0 +1,145 @@
+import { interpolate } from "../../config/dist/createConfig.js";
+import "../../config/dist/index.js";
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/toast.config.js
+const toastConfig = defaultFoundationPreset.defineComponent("Toast", ({ tokens }) => ({
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: tokens.spacing["2"]
+		},
+		trigger: {},
+		item: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: tokens.spacing["3"],
+			padding: `${tokens.spacing["3"]} ${tokens.spacing["4"]}`,
+			borderRadius: tokens.borderRadius.md,
+			borderWidth: tokens.borderWidth.thin,
+			borderColor: tokens.borderColor.secondary,
+			backgroundColor: tokens.bg["elevation-3"],
+			minWidth: "16rem",
+			touchAction: "none",
+			userSelect: "none",
+			boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+			transition: "background-color 0.3s ease, border-color 0.3s ease",
+			motion: {
+				initial: {
+					opacity: 0,
+					y: 80,
+					scale: .95
+				},
+				animate: { "data-state": {
+					collapsed: {
+						y: interpolate({
+							output: [0, -14],
+							extrapolate: "extend"
+						}),
+						scale: interpolate({
+							output: [1, .95],
+							extrapolate: "extend"
+						}),
+						opacity: interpolate({
+							output: [
+								1,
+								1,
+								1,
+								0
+							],
+							extrapolate: "clamp"
+						})
+					},
+					expanded: {
+						y: interpolate({
+							output: [0, -64],
+							extrapolate: "extend"
+						}),
+						scale: 1,
+						opacity: 1
+					}
+				} },
+				exit: {
+					opacity: 0,
+					x: 100
+				},
+				transition: {
+					type: "spring",
+					damping: 25,
+					stiffness: 300
+				},
+				drag: true,
+				dragConstraints: {
+					left: 0,
+					right: 0,
+					top: 0,
+					bottom: 0
+				},
+				dragElastic: .5,
+				dragSnapToOrigin: true,
+				layout: true
+			}
+		},
+		text: {
+			...textVariants.label2,
+			color: tokens.color["on-primary"],
+			transition: "color 0.3s ease",
+			maxInlineSize: "65ch",
+			textWrap: "pretty"
+		},
+		dismiss: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "1.5rem",
+			height: "1.5rem",
+			borderRadius: tokens.borderRadius.sm,
+			cursor: "pointer",
+			color: tokens.color["on-secondary"],
+			fontSize: "0.75rem",
+			_hover: { backgroundColor: tokens.bg.tertiary }
+		}
+	},
+	variants: { variant: {
+		positive: {
+			item: {
+				borderColor: tokens.borderColor.positive,
+				backgroundColor: tokens.bg["positive-wash"]
+			},
+			text: { color: tokens.color.positive }
+		},
+		alert: {
+			item: {
+				borderColor: tokens.borderColor.alert,
+				backgroundColor: tokens.bg["alert-wash"]
+			},
+			text: { color: tokens.color.alert }
+		},
+		warning: {
+			item: {
+				borderColor: tokens.borderColor.warning,
+				backgroundColor: tokens.bg["warning-wash"]
+			},
+			text: { color: tokens.color.warning }
+		},
+		info: {
+			item: {
+				borderColor: tokens.borderColor.brand,
+				backgroundColor: tokens.bg["brand-wash"]
+			},
+			text: { color: tokens.color.brand }
+		},
+		neutral: {
+			item: {
+				borderColor: tokens.borderColor.secondary,
+				backgroundColor: tokens.bg.secondary
+			},
+			text: { color: tokens.color["on-primary"] }
+		}
+	} }
+}));
+//#endregion
+export { toastConfig };

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

@@ -0,0 +1,427 @@
+import { ComponentConfig, InterpolateMarker } from "../../config/dist/createConfig.js";
+import { ToastConfig } from "./toast.config.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+import { GetComponentVariantProps, Simplify } from "@uds/types";
+
+//#region ../components/dist/toast.d.ts
+//#region src/toast.d.ts
+interface ToastDefinition {
+  config: ToastConfig;
+  props: {
+    toastId: number;
+    index: number;
+    expanded: boolean;
+    onDismiss?: (id: number) => void;
+    onDragEnd?: (id: number, info: {
+      offset: {
+        x: number;
+        y: number;
+      };
+      velocity: {
+        x: number;
+        y: number;
+      };
+    }) => void;
+    onMeasure?: (id: number, el: HTMLDivElement | null) => void;
+    toastCount: number;
+    children?: React.ReactNode;
+    renderMessage?: (Text: React.FC<{
+      children?: React.ReactNode;
+    }>) => React.ReactNode;
+  };
+  slots: {
+    root: 'div';
+    item: 'div';
+    text: 'span';
+    dismiss: 'button';
+  };
+}
+/**
+ * @description A brief notification that appears temporarily to provide feedback.
+ * Supports sonner-style stacking, expand-on-hover, and swipe-to-dismiss.
+ */
+declare const Toast: _$react.FC<_$_uds_types0.CreateComponentProps<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;
+          };
+        };
+      };
+    };
+  };
+}, {}>, {
+  toastId: number;
+  index: number;
+  expanded: boolean;
+  onDismiss?: (id: number) => void;
+  onDragEnd?: (id: number, info: {
+    offset: {
+      x: number;
+      y: number;
+    };
+    velocity: {
+      x: number;
+      y: number;
+    };
+  }) => void;
+  onMeasure?: (id: number, el: HTMLDivElement | null) => void;
+  toastCount: number;
+  children?: React.ReactNode;
+  renderMessage?: (Text: React.FC<{
+    children?: React.ReactNode;
+  }>) => React.ReactNode;
+}, {
+  root: "div";
+  item: "div";
+  text: "span";
+  dismiss: "button";
+}>>;
+type ToastProps = Simplify<React.ComponentProps<typeof Toast>>;
+type AddToastOptions = GetComponentVariantProps<ToastDefinition>;
+/** A plain ReactNode or a render function that receives the styled Text slot component */
+type ToastMessage = React.ReactNode | ((Text: React.FC<{
+  children?: React.ReactNode;
+}>) => React.ReactNode);
+interface ToastItemData extends AddToastOptions {
+  id: number;
+  message: ToastMessage;
+  duration?: number;
+}
+interface ToastContextValue {
+  /** Show a brief toast notification. Pass `duration: Infinity` to persist until manually dismissed. Returns the toast id. */
+  addToast: (message: ToastMessage, options?: AddToastOptions & {
+    duration?: number;
+  }) => number;
+  /** Update the message of an existing toast in-place. Pass `duration` to start an auto-dismiss timer. */
+  updateToast: (id: number, message: ToastMessage, options?: Partial<AddToastOptions> & {
+    duration?: number;
+  }) => void;
+  /** Dismiss a toast by id */
+  dismissToast: (id: number) => void;
+}
+declare const ToastProvider: _$react.FC<{
+    children: React.ReactNode;
+  } & Record<never, never>>, useToast: () => ToastContextValue; //#endregion
+//#endregion
+export { AddToastOptions, Toast, ToastContextValue, ToastItemData, ToastMessage, ToastProps, ToastProvider, useToast };