@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/TimeField.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.jsx","names":[],"sources":["../src/TimeField.tsx"],"sourcesContent":["/**\n * TimeField component for solidaria-components\n *\n * Pre-wired headless time field component with segment-based editing.\n * Port of react-aria-components/src/TimeField.tsx\n */\n\nimport {\n  type JSX,\n  type Context,\n  createContext,\n  createMemo,\n  createSignal,\n  splitProps,\n  useContext,\n  For,\n  Show,\n} from \"solid-js\";\nimport {\n  createTimeField,\n  createTimeSegment,\n  type AriaTimeFieldProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  createTimeFieldState,\n  access,\n  type TimeFieldState,\n  type TimeFieldStateProps,\n  type TimeSegment as TimeSegmentType,\n  type TimeValue,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  dataAttr,\n  useIsHydrated,\n  Provider,\n} from \"./utils\";\nimport { TextContext } from \"./Text\";\nimport { HiddenTimeInput } from \"./HiddenTimeInput\";\nimport { FormContext, type FormProps } from \"./Form\";\n\nexport interface TimeFieldRenderProps {\n  /** Whether the field is disabled. */\n  isDisabled: boolean;\n  /** Whether the field is read-only. */\n  isReadOnly: boolean;\n  /** Whether the field is required. */\n  isRequired: boolean;\n  /** Whether the field is invalid. */\n  isInvalid: boolean;\n}\n\nexport interface TimeFieldProps<T extends TimeValue = TimeValue>\n  extends\n    Omit<AriaTimeFieldProps, \"id\" | \"isDisabled\" | \"isReadOnly\" | \"isRequired\">,\n    Omit<TimeFieldStateProps<T>, \"locale\">,\n    SlotProps {\n  /** The children of the component. */\n  children?: JSX.Element | ((segment: TimeSegmentType) => JSX.Element);\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TimeFieldRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TimeFieldRenderProps>;\n  /** The locale to use for formatting. */\n  locale?: string;\n}\n\nexport interface TimeInputRenderProps {\n  /** Whether the input is disabled. */\n  isDisabled: boolean;\n  /** Whether the input is focused. */\n  isFocused: boolean;\n}\n\nexport interface TimeInputProps extends SlotProps {\n  /** The children of the component (render function receiving segments). */\n  children?: (segment: TimeSegmentType) => JSX.Element;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TimeInputRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TimeInputRenderProps>;\n}\n\nexport interface TimeSegmentRenderProps {\n  /** Whether the segment is focused. */\n  isFocused: boolean;\n  /** Whether the segment is editable. */\n  isEditable: boolean;\n  /** Whether the segment is a placeholder. */\n  isPlaceholder: boolean;\n  /** The segment type. */\n  type: TimeSegmentType[\"type\"];\n  /** The text to display. */\n  text: string;\n}\n\nexport interface TimeSegmentProps extends SlotProps {\n  /** The segment data. */\n  segment: TimeSegmentType;\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<TimeSegmentRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TimeSegmentRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TimeSegmentRenderProps>;\n}\n\nexport interface TimeFieldContextValue {\n  state: TimeFieldState<TimeValue>;\n  aria: {\n    labelProps: Record<string, unknown>;\n    inputProps: Record<string, unknown>;\n    descriptionProps: Record<string, unknown>;\n    errorMessageProps: Record<string, unknown>;\n  };\n}\n\nexport const TimeFieldContext = createContext<TimeFieldContextValue | null>(null);\nexport const TimeFieldStateContext = createContext<TimeFieldState<TimeValue> | null>(null);\n\nfunction withFormValidationBehavior<P extends object>(props: P, formContext: FormProps | null): P {\n  if (!formContext?.validationBehavior) {\n    return props;\n  }\n\n  return new Proxy(props, {\n    get(target, property, receiver) {\n      const localValue = Reflect.get(target, property, receiver);\n      if (property === \"validationBehavior\" && localValue === undefined) {\n        return formContext.validationBehavior;\n      }\n\n      return localValue;\n    },\n    has(target, property) {\n      return (\n        Reflect.has(target, property) ||\n        (property === \"validationBehavior\" && formContext.validationBehavior !== undefined)\n      );\n    },\n    ownKeys(target) {\n      const keys = new Set(Reflect.ownKeys(target));\n      if (formContext.validationBehavior !== undefined) {\n        keys.add(\"validationBehavior\");\n      }\n\n      return Array.from(keys);\n    },\n    getOwnPropertyDescriptor(target, property) {\n      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);\n      if (descriptor) {\n        return descriptor;\n      }\n\n      if (property === \"validationBehavior\" && formContext.validationBehavior !== undefined) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => formContext.validationBehavior,\n        };\n      }\n\n      return undefined;\n    },\n  });\n}\n\nfunction useTimeFieldContextValue(): TimeFieldContextValue {\n  const context = useContext(TimeFieldContext);\n  if (!context) {\n    throw new Error(\"TimeField components must be used within a TimeField\");\n  }\n  return context;\n}\n\nexport function useTimeFieldContext(): TimeFieldState<TimeValue> {\n  return useTimeFieldContextValue().state;\n}\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n *\n * @example\n * ```tsx\n * <TimeField label=\"Time\">\n *   <Label>Time</Label>\n *   <TimeInput>\n *     {(segment) => <TimeSegment segment={segment} />}\n *   </TimeInput>\n * </TimeField>\n * ```\n */\nexport function TimeField<T extends TimeValue = TimeValue>(props: TimeFieldProps<T>): JSX.Element {\n  // Use hydration-safe pattern for client-only rendering\n  const isHydrated = useIsHydrated();\n  const formContext = useContext(FormContext);\n\n  return (\n    <Show\n      when={isHydrated()}\n      fallback={\n        <div class=\"solidaria-TimeField solidaria-TimeField--placeholder\" aria-hidden=\"true\" />\n      }\n    >\n      <TimeFieldInner {...props} __formContext={formContext} />\n    </Show>\n  );\n}\n\ntype TimeFieldInnerProps<T extends TimeValue = TimeValue> = TimeFieldProps<T> & {\n  __formContext?: FormProps | null;\n};\n\n/**\n * Internal TimeField component that renders after client mount.\n */\nfunction TimeFieldInner<T extends TimeValue = TimeValue>(\n  props: TimeFieldInnerProps<T>,\n): JSX.Element {\n  const formContext = props.__formContext ?? useContext(FormContext);\n  const mergedProps = withFormValidationBehavior(props, formContext);\n  const [local, stateProps, rest] = splitProps(\n    mergedProps,\n    [\"children\", \"class\", \"style\", \"slot\", \"__formContext\"],\n    [\n      \"value\",\n      \"defaultValue\",\n      \"onChange\",\n      \"minValue\",\n      \"maxValue\",\n      \"isInvalid\",\n      \"isDisabled\",\n      \"isReadOnly\",\n      \"isRequired\",\n      \"locale\",\n      \"granularity\",\n      \"hourCycle\",\n      \"shouldForceLeadingZeros\",\n      \"validationState\",\n      \"validationBehavior\",\n      \"validate\",\n      \"description\",\n      \"errorMessage\",\n      \"placeholderValue\",\n    ],\n  );\n\n  const [fieldRef, setFieldRef] = createSignal<HTMLDivElement | null>(null);\n\n  const state = createTimeFieldState(stateProps);\n\n  const fieldAria = createTimeField(\n    () => ({\n      ...(rest as Record<string, unknown>),\n      description: stateProps.description,\n      errorMessage: stateProps.errorMessage,\n    }),\n    state as unknown as TimeFieldState<TimeValue>,\n    fieldRef,\n  );\n\n  const renderValues = createMemo<TimeFieldRenderProps>(() => ({\n    isDisabled: state.isDisabled(),\n    isReadOnly: state.isReadOnly(),\n    isRequired: state.isRequired(),\n    isInvalid: state.isInvalid(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-TimeField\",\n    },\n    renderValues,\n  );\n\n  const validationBehavior = () =>\n    (stateProps as { validationBehavior?: \"aria\" | \"native\" }).validationBehavior ??\n    formContext?.validationBehavior ??\n    \"native\";\n\n  const textSlots = {\n    slots: {\n      get description() {\n        return fieldAria.descriptionProps;\n      },\n      get errorMessage() {\n        return fieldAria.errorMessageProps;\n      },\n    },\n  };\n\n  return (\n    <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>\n      <TimeFieldContext.Provider\n        value={{\n          state: state as unknown as TimeFieldState<TimeValue>,\n          aria: {\n            labelProps: fieldAria.labelProps,\n            inputProps: fieldAria.inputProps,\n            descriptionProps: fieldAria.descriptionProps,\n            errorMessageProps: fieldAria.errorMessageProps,\n          },\n        }}\n      >\n        <div\n          ref={setFieldRef}\n          {...fieldAria.fieldProps}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          data-disabled={dataAttr(state.isDisabled())}\n          data-readonly={dataAttr(state.isReadOnly())}\n          data-required={dataAttr(state.isRequired())}\n          data-invalid={dataAttr(state.isInvalid())}\n        >\n          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>\n            {local.children as JSX.Element}\n          </Provider>\n        </div>\n        <Show when={(rest as Record<string, unknown>).name}>\n          <HiddenTimeInput\n            name={(rest as Record<string, unknown>).name as string | undefined}\n            form={(rest as Record<string, unknown>).form as string | undefined}\n            value={state.value()}\n            autoComplete={(rest as Record<string, unknown>).autoComplete as string | undefined}\n            isDisabled={state.isDisabled()}\n            isRequired={state.isRequired()}\n            validationBehavior={validationBehavior()}\n            validationState={state}\n            focus={() => {\n              fieldRef()?.querySelector<HTMLElement>('[role=\"spinbutton\"]')?.focus();\n            }}\n            minValue={access(stateProps.minValue) as TimeValue | undefined}\n            maxValue={access(stateProps.maxValue) as TimeValue | undefined}\n            granularity={state.granularity}\n          />\n        </Show>\n      </TimeFieldContext.Provider>\n    </TimeFieldStateContext.Provider>\n  );\n}\n\n/**\n * The input area containing time segments.\n */\nexport function TimeInput(props: TimeInputProps): JSX.Element {\n  const { state, aria } = useTimeFieldContextValue();\n  const [isFocused, setIsFocused] = createSignal(false);\n\n  const renderValues = createMemo<TimeInputRenderProps>(() => ({\n    isDisabled: state.isDisabled(),\n    isFocused: isFocused(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      class: props.class,\n      style: props.style,\n      defaultClassName: \"solidaria-TimeInput\",\n    },\n    renderValues,\n  );\n\n  return (\n    <div\n      {...aria.inputProps}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      data-disabled={dataAttr(state.isDisabled())}\n      data-focused={dataAttr(isFocused())}\n      onFocusIn={() => setIsFocused(true)}\n      onFocusOut={() => setIsFocused(false)}\n    >\n      <For each={state.segments()}>{(segment) => props.children?.(segment)}</For>\n    </div>\n  );\n}\n\n/**\n * A segment of a time field (hour, minute, second, AM/PM).\n */\nexport function TimeSegment(props: TimeSegmentProps): JSX.Element {\n  const state = useTimeFieldContext();\n  const [segmentRef, setSegmentRef] = createSignal<HTMLDivElement | null>(null);\n\n  const segmentAria = createTimeSegment(\n    { segment: props.segment },\n    state as unknown as TimeFieldState,\n    segmentRef,\n  );\n\n  const renderValues = createMemo<TimeSegmentRenderProps>(() => ({\n    isFocused: segmentAria.isFocused,\n    isEditable: segmentAria.isEditable,\n    isPlaceholder: segmentAria.isPlaceholder,\n    type: props.segment.type,\n    text: segmentAria.text,\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: props.class,\n      style: props.style,\n      defaultClassName: \"solidaria-TimeSegment\",\n    },\n    renderValues,\n  );\n\n  // Determine children content - avoid Show for SSR hydration compatibility\n  const getChildren = () => {\n    if (typeof props.children === \"function\") {\n      return renderProps.renderChildren();\n    }\n    return segmentAria.text;\n  };\n\n  return (\n    <div\n      ref={setSegmentRef}\n      {...segmentAria.segmentProps}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      data-focused={dataAttr(segmentAria.isFocused)}\n      data-editable={dataAttr(segmentAria.isEditable)}\n      data-placeholder={dataAttr(segmentAria.isPlaceholder)}\n      data-type={props.segment.type}\n    >\n      {getChildren()}\n    </div>\n  );\n}\n\nexport interface TimeFieldLabelProps {\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport function TimeFieldLabel(props: TimeFieldLabelProps): JSX.Element {\n  const { aria } = useTimeFieldContextValue();\n  return (\n    <span {...aria.labelProps} class={props.class}>\n      {props.children}\n    </span>\n  );\n}\n\nexport interface TimeFieldDescriptionProps {\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport function TimeFieldDescription(props: TimeFieldDescriptionProps): JSX.Element {\n  const { aria } = useTimeFieldContextValue();\n  return (\n    <p {...aria.descriptionProps} class={props.class}>\n      {props.children}\n    </p>\n  );\n}\n\nexport interface TimeFieldErrorMessageProps {\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport function TimeFieldErrorMessage(props: TimeFieldErrorMessageProps): JSX.Element {\n  const { aria } = useTimeFieldContextValue();\n  return (\n    <p {...aria.errorMessageProps} class={props.class}>\n      {props.children}\n    </p>\n  );\n}\n\nexport type { TimeFieldState, TimeSegmentType, TimeValue };\n"],"mappings":"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"}

package/dist/Toast.d.ts

@@ -158,6 +158,20 @@ export interface ToastDescriptionProps {
  * ToastDescription renders the toast description with proper accessibility attributes.
  */
 export declare function ToastDescription(props: ToastDescriptionProps): JSX.Element;
+export interface ToastContentProps {
+    children: JSX.Element;
+    class?: string;
+    style?: JSX.CSSProperties;
+}
+/**
+ * ToastContent wraps the toast message (title + description) in the live region
+ * announced to screen readers. It carries `role="alert"` / `aria-live="assertive"`
+ * from createToast's contentProps so the toast text is announced when it appears.
+ *
+ * It is rendered as a sibling of the close button (never wrapping it) so screen
+ * readers announce the message without reading the close button first.
+ */
+export declare function ToastContent(props: ToastContentProps): JSX.Element;
 export interface ToastCloseButtonProps {
     /** The toast to close. */
     toast: QueuedToast<ToastContent>;

package/dist/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"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"}

package/dist/Toast.js

@@ -0,0 +1,551 @@
+import { filterDOMProps, useIsHydrated, useRenderProps } from "./utils.js";
+import { Portal, addEventListener, className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, style, template, use } from "solid-js/web";
+import { Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { createToast, createToastRegion, useUNSAFE_PortalContext } from "@proyecto-viviana/solidaria";
+import { ToastQueue, createToastState } from "@proyecto-viviana/solid-stately";
+//#region src/Toast.tsx
+/**
+* Toast components for solidaria-components
+*
+* Toast notifications with auto-dismiss, pause on hover/focus, and accessibility.
+* Port of react-aria-components Toast.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<span data-solidaria-toast-title>`), _tmpl$3 = /*#__PURE__*/ template(`<span data-solidaria-toast-description>`), _tmpl$4 = /*#__PURE__*/ template(`<div data-solidaria-toast-content>`), _tmpl$5 = /*#__PURE__*/ template(`<button type=button data-solidaria-toast-close-button>`), _tmpl$6 = /*#__PURE__*/ template(`<button type=button style=margin-top:8px>`), _tmpl$7 = /*#__PURE__*/ template(`<div style=display:flex;align-items:flex-start;gap:12px><!$><!/><!$><!/>`);
+const ToastContext = createContext(null);
+const ToastAriaContext = createContext(null);
+const toastStateByKey = /* @__PURE__ */ new Map();
+function useToastContext() {
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("Toast components must be used within a ToastProvider");
+	return context;
+}
+/** Default global toast queue that can be used for app-wide toasts. */
+const globalToastQueue = new ToastQueue({
+	maxVisibleToasts: Infinity,
+	hasExitAnimation: true
+});
+/**
+* Add a toast to the global queue.
+* Convenience function for adding toasts from anywhere in the app.
+*/
+function addToast(content, options) {
+	return globalToastQueue.add(content, options);
+}
+function normalizeToastPlacement(placement) {
+	return (placement ?? "bottom").replace("-", " ");
+}
+/**
+* ToastProvider creates a toast queue context for descendant components.
+* Use this to wrap your app or a section that needs toast notifications.
+*
+* @example
+* ```tsx
+* <ToastProvider>
+*   <App />
+*   <ToastRegion />
+* </ToastProvider>
+* ```
+*/
+function ToastProvider(props) {
+	const state = createToastState({ queue: props.useGlobalQueue ? globalToastQueue : new ToastQueue(props.queueOptions) });
+	return createComponent(ToastContext.Provider, {
+		value: state,
+		get children() {
+			return props.children;
+		}
+	});
+}
+/**
+* ToastRegion is a container that displays all visible toasts.
+* It handles pause on hover/focus and provides the landmark region.
+*
+* @example
+* ```tsx
+* <ToastRegion placement="bottom-end">
+*   {(renderProps) => (
+*     <For each={renderProps.visibleToasts}>
+*       {(toast) => <Toast toast={toast} />}
+*     </For>
+*   )}
+* </ToastRegion>
+* ```
+*/
+function ToastRegion(props) {
+	const isHydrated = useIsHydrated();
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"state",
+		"aria-label",
+		"portal",
+		"placement"
+	]);
+	const portalContext = useUNSAFE_PortalContext();
+	const portalContainer = () => portalContext.getContainer?.() ?? void 0;
+	const [regionElement, setRegionElement] = createSignal();
+	const contextState = useContext(ToastContext);
+	const state = () => local.state ?? contextState;
+	const regionAria = createToastRegion({
+		state: {
+			visibleToasts: () => state()?.visibleToasts() ?? [],
+			add: (content, options) => state()?.add(content, options) ?? "",
+			close: (key) => state()?.close(key),
+			remove: (key) => state()?.remove(key),
+			clear: () => state()?.clear(),
+			pauseAll: () => state()?.pauseAll(),
+			resumeAll: () => state()?.resumeAll()
+		},
+		ref: regionElement,
+		get "aria-label"() {
+			return local["aria-label"];
+		}
+	});
+	const renderValues = createMemo(() => ({ visibleToasts: () => state()?.visibleToasts() ?? [] }));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ToastRegion"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const placementStyles = createMemo(() => {
+		const [edge, align = "center"] = normalizeToastPlacement(local.placement).split(" ");
+		const base = {
+			position: "fixed",
+			"z-index": 100001,
+			display: "flex",
+			"flex-direction": edge === "top" ? "column" : "column-reverse",
+			gap: "8px",
+			padding: "16px",
+			"pointer-events": "none"
+		};
+		if (edge === "top") {
+			if (align === "end") return {
+				...base,
+				top: "16px",
+				right: "16px"
+			};
+			if (align === "start") return {
+				...base,
+				top: "16px",
+				left: "16px"
+			};
+			return {
+				...base,
+				top: "16px",
+				left: "50%",
+				transform: "translateX(-50%)"
+			};
+		}
+		if (align === "end") return {
+			...base,
+			bottom: "16px",
+			right: "16px"
+		};
+		if (align === "start") return {
+			...base,
+			bottom: "16px",
+			left: "16px"
+		};
+		return {
+			...base,
+			bottom: "16px",
+			left: "50%",
+			transform: "translateX(-50%)"
+		};
+	});
+	const normalizedPlacement = () => normalizeToastPlacement(local.placement);
+	const visibleToasts = () => state()?.visibleToasts() ?? [];
+	const hasToasts = () => visibleToasts().length > 0;
+	const hasAuthoredRegionStyle = () => local.class != null || local.style != null;
+	const regionContent = () => {
+		if (!state()) return null;
+		const mergedStyle = () => {
+			const custom = renderProps.style();
+			if (hasAuthoredRegionStyle()) return custom;
+			const placement = placementStyles();
+			if (!custom) return placement;
+			return {
+				...placement,
+				...custom
+			};
+		};
+		const { ref: _ref, ...cleanRegionProps } = regionAria.regionProps;
+		return (() => {
+			var _el$ = getNextElement(_tmpl$);
+			use(setRegionElement, _el$);
+			spread(_el$, mergeProps(domProps, cleanRegionProps, {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return mergedStyle();
+				},
+				get ["data-placement"]() {
+					return normalizedPlacement();
+				}
+			}), false, true);
+			insert(_el$, () => renderProps.renderChildren());
+			runHydrationEvents();
+			return _el$;
+		})();
+	};
+	return createComponent(Show, {
+		get when() {
+			return memo(() => !!isHydrated())() && hasToasts();
+		},
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return local.portal !== false;
+				},
+				get fallback() {
+					return regionContent();
+				},
+				get children() {
+					return createComponent(Portal, {
+						get mount() {
+							return portalContainer();
+						},
+						get children() {
+							return regionContent();
+						}
+					});
+				}
+			});
+		}
+	});
+}
+/**
+* Toast is an individual notification component.
+*
+* @example
+* ```tsx
+* <Toast toast={toast}>
+*   {(renderProps) => (
+*     <div class={renderProps.isExiting ? 'fade-out' : 'fade-in'}>
+*       <h3>{renderProps.toast.content.title}</h3>
+*       <p>{renderProps.toast.content.description}</p>
+*     </div>
+*   )}
+* </Toast>
+* ```
+*/
+function Toast(props) {
+	const [local, rest] = splitProps(props, [
+		"toast",
+		"children",
+		"class",
+		"style"
+	]);
+	let toastRef;
+	const state = useToastContext();
+	createEffect(() => {
+		const key = local.toast.key;
+		toastStateByKey.set(key, state);
+		onCleanup(() => {
+			if (toastStateByKey.get(key) === state) toastStateByKey.delete(key);
+		});
+	});
+	const hasTitle = () => !!(local.toast.content.children ?? local.toast.content.title);
+	const toastAria = createToast({
+		toast: local.toast,
+		state,
+		hasTitle: hasTitle(),
+		hasDescription: !!local.toast.content.description
+	});
+	const renderValues = createMemo(() => ({
+		isEntering: local.toast.animation === "entering",
+		isExiting: local.toast.animation === "exiting",
+		animation: local.toast.animation,
+		toast: local.toast
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Toast"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const mergedStyle = () => {
+		const custom = renderProps.style();
+		if (!custom) return { "pointer-events": "auto" };
+		return {
+			"pointer-events": "auto",
+			...custom
+		};
+	};
+	const handleRootClick = (event) => {
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		if (target.closest("[data-solidaria-toast-close-button]")) {
+			state.close(local.toast.key);
+			state.remove(local.toast.key);
+		}
+	};
+	createEffect(() => {
+		if (local.toast.animation !== "exiting") return;
+		if (!toastRef) {
+			state.remove(local.toast.key);
+			return;
+		}
+		if (!("getAnimations" in toastRef)) {
+			state.remove(local.toast.key);
+			return;
+		}
+		const animations = toastRef.getAnimations();
+		if (animations.length === 0) {
+			state.remove(local.toast.key);
+			return;
+		}
+		let canceled = false;
+		Promise.all(animations.map((a) => a.finished)).then(() => {
+			if (!canceled) state.remove(local.toast.key);
+		}).catch(() => {
+			if (!canceled) state.remove(local.toast.key);
+		});
+		onCleanup(() => {
+			canceled = true;
+		});
+	});
+	const { ref: _ref, ...cleanToastProps } = toastAria.toastProps;
+	createEffect(() => {
+		if (!toastRef) return;
+		const titleId = toastAria.titleProps.id;
+		const descriptionId = toastAria.descriptionProps.id;
+		const contentProps = toastAria.contentProps;
+		if (titleId) {
+			const titleEl = toastRef.querySelector("[data-solidaria-toast-title]");
+			if (titleEl instanceof HTMLElement) titleEl.id = titleId;
+		}
+		if (descriptionId) {
+			const descriptionEl = toastRef.querySelector("[data-solidaria-toast-description]");
+			if (descriptionEl instanceof HTMLElement) descriptionEl.id = descriptionId;
+		}
+		const contentEl = toastRef.querySelector("[data-solidaria-toast-content]");
+		if (contentEl instanceof HTMLElement) {
+			const role = contentProps.role;
+			const ariaLive = contentProps["aria-live"];
+			const ariaAtomic = contentProps["aria-atomic"];
+			if (role) contentEl.setAttribute("role", role);
+			if (ariaLive) contentEl.setAttribute("aria-live", ariaLive);
+			if (ariaAtomic) contentEl.setAttribute("aria-atomic", ariaAtomic);
+		}
+	});
+	return createComponent(ToastAriaContext.Provider, {
+		get value() {
+			return {
+				titleProps: toastAria.titleProps,
+				descriptionProps: toastAria.descriptionProps,
+				contentProps: toastAria.contentProps
+			};
+		},
+		get children() {
+			var _el$2 = getNextElement(_tmpl$);
+			var _ref$ = toastRef;
+			typeof _ref$ === "function" ? use(_ref$, _el$2) : toastRef = _el$2;
+			spread(_el$2, mergeProps(domProps, cleanToastProps, {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return mergedStyle();
+				},
+				get ["data-animation"]() {
+					return local.toast.animation;
+				},
+				get ["data-type"]() {
+					return local.toast.content.type ?? local.toast.content.variant;
+				},
+				get ["data-variant"]() {
+					return local.toast.content.variant;
+				},
+				"on:click": handleRootClick
+			}), false, true);
+			insert(_el$2, () => renderProps.renderChildren());
+			runHydrationEvents();
+			return _el$2;
+		}
+	});
+}
+/**
+* ToastTitle renders the toast title with proper accessibility attributes.
+*/
+function ToastTitle(props) {
+	const { ref: _ref, ...ariaTitleProps } = useContext(ToastAriaContext)?.titleProps ?? {};
+	return (() => {
+		var _el$3 = getNextElement(_tmpl$2);
+		spread(_el$3, mergeProps(ariaTitleProps, {
+			get ["class"]() {
+				return props.class;
+			},
+			get style() {
+				return props.style;
+			}
+		}), false, true);
+		insert(_el$3, () => props.children);
+		runHydrationEvents();
+		return _el$3;
+	})();
+}
+/**
+* ToastDescription renders the toast description with proper accessibility attributes.
+*/
+function ToastDescription(props) {
+	const { ref: _ref, ...ariaDescriptionProps } = useContext(ToastAriaContext)?.descriptionProps ?? {};
+	return (() => {
+		var _el$4 = getNextElement(_tmpl$3);
+		spread(_el$4, mergeProps(ariaDescriptionProps, {
+			get ["class"]() {
+				return props.class;
+			},
+			get style() {
+				return props.style;
+			}
+		}), false, true);
+		insert(_el$4, () => props.children);
+		runHydrationEvents();
+		return _el$4;
+	})();
+}
+/**
+* ToastContent wraps the toast message (title + description) in the live region
+* announced to screen readers. It carries `role="alert"` / `aria-live="assertive"`
+* from createToast's contentProps so the toast text is announced when it appears.
+*
+* It is rendered as a sibling of the close button (never wrapping it) so screen
+* readers announce the message without reading the close button first.
+*/
+function ToastContent(props) {
+	const { ref: _ref, ...ariaContentProps } = useContext(ToastAriaContext)?.contentProps ?? {};
+	return (() => {
+		var _el$5 = getNextElement(_tmpl$4);
+		spread(_el$5, mergeProps(ariaContentProps, {
+			get ["class"]() {
+				return props.class;
+			},
+			get style() {
+				return props.style;
+			}
+		}), false, true);
+		insert(_el$5, () => props.children);
+		runHydrationEvents();
+		return _el$5;
+	})();
+}
+/**
+* ToastCloseButton is a button that closes the toast.
+*/
+function ToastCloseButton(props) {
+	const contextState = useContext(ToastContext);
+	const handleClose = () => {
+		const key = props.toast.key;
+		const state = contextState ?? toastStateByKey.get(key);
+		state?.close(key);
+		state?.remove(key);
+	};
+	return (() => {
+		var _el$6 = getNextElement(_tmpl$5);
+		_el$6.$$click = handleClose;
+		addEventListener(_el$6, "click", handleClose);
+		insert(_el$6, () => props.children ?? "×");
+		effect((_p$) => {
+			var _v$ = props.class, _v$2 = props.style, _v$3 = props["aria-label"] ?? "Close";
+			_v$ !== _p$.e && className(_el$6, _p$.e = _v$);
+			_p$.t = style(_el$6, _v$2, _p$.t);
+			_v$3 !== _p$.a && setAttribute(_el$6, "aria-label", _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		runHydrationEvents();
+		return _el$6;
+	})();
+}
+/**
+* DefaultToast provides a basic toast layout with title, description, and close button.
+* Use this as a starting point or as-is for simple toast needs.
+*/
+function DefaultToast(props) {
+	const content = () => props.toast.content;
+	const title = () => content().children ?? content().title;
+	const actionLabel = () => content().actionLabel ?? content().action?.label;
+	const actionHandler = () => content().onAction ?? content().action?.onAction;
+	const state = useToastContext();
+	const handleAction = () => {
+		actionHandler()?.();
+		if (content().shouldCloseOnAction) {
+			state.close(props.toast.key);
+			state.remove(props.toast.key);
+		}
+	};
+	return createComponent(Toast, {
+		get toast() {
+			return props.toast;
+		},
+		get children() {
+			var _el$7 = getNextElement(_tmpl$7), _el$9 = _el$7.firstChild, [_el$0, _co$] = getNextMarker(_el$9.nextSibling), _el$1 = _el$0.nextSibling, [_el$10, _co$2] = getNextMarker(_el$1.nextSibling);
+			insert(_el$7, createComponent(ToastContent, {
+				style: { flex: 1 },
+				get children() {
+					return [
+						createComponent(Show, {
+							get when() {
+								return title();
+							},
+							get children() {
+								return createComponent(ToastTitle, {
+									style: {
+										"font-weight": "bold",
+										"margin-bottom": "4px"
+									},
+									get children() {
+										return title();
+									}
+								});
+							}
+						}),
+						createComponent(Show, {
+							get when() {
+								return content().description;
+							},
+							get children() {
+								return createComponent(ToastDescription, { get children() {
+									return content().description;
+								} });
+							}
+						}),
+						createComponent(Show, {
+							get when() {
+								return actionLabel();
+							},
+							get children() {
+								var _el$8 = getNextElement(_tmpl$6);
+								_el$8.$$click = handleAction;
+								insert(_el$8, actionLabel);
+								runHydrationEvents();
+								return _el$8;
+							}
+						})
+					];
+				}
+			}), _el$0, _co$);
+			insert(_el$7, createComponent(ToastCloseButton, { get toast() {
+				return props.toast;
+			} }), _el$10, _co$2);
+			return _el$7;
+		}
+	});
+}
+delegateEvents(["click"]);
+//#endregion
+export { DefaultToast, Toast, ToastCloseButton, ToastContent, ToastContext, ToastDescription, ToastProvider, ToastRegion, ToastTitle, addToast, globalToastQueue, useToastContext };
+
+//# sourceMappingURL=Toast.js.map