@yahoo/uds-v5-wip 1.60.0 → 1.62.0

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

@@ -1,145 +0,0 @@
-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.radius.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.radius.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

@@ -1,426 +0,0 @@
-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
-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
-export { AddToastOptions, Toast, ToastContextValue, ToastItemData, ToastMessage, ToastProps, ToastProvider, useToast };