silver-ui 0.3.0 → 0.3.1

package/dist/{chunk-2D6SGEPH.cjs → chunk-GLJWAY4A.cjs}

@@ -1,10 +1,11 @@
 'use strict';
 
 var chunkVXBVSYPA_cjs = require('./chunk-VXBVSYPA.cjs');
-var chunkKFEXS6OK_cjs = require('./chunk-KFEXS6OK.cjs');
+var chunkBAPCHFNX_cjs = require('./chunk-BAPCHFNX.cjs');
 var chunk2P6D43V2_cjs = require('./chunk-2P6D43V2.cjs');
-var chunkYBPG5RPR_cjs = require('./chunk-YBPG5RPR.cjs');
-var chunkYXYD5HKL_cjs = require('./chunk-YXYD5HKL.cjs');
+var chunkBRB52QFV_cjs = require('./chunk-BRB52QFV.cjs');
+var chunkKFDHP4WP_cjs = require('./chunk-KFDHP4WP.cjs');
+var chunkQAO6QMNQ_cjs = require('./chunk-QAO6QMNQ.cjs');
 var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
@@ -41,7 +42,9 @@ function fromInputString(value) {
 function TimeInput({
   label,
   value,
+  onBlur,
   onChange,
+  onFocus,
   hasSeconds = false,
   hasClear = false,
   hasAutoFocus = false,
@@ -66,12 +69,12 @@ function TimeInput({
   ref
 }) {
   const inputId = react.useId();
-  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const descriptionID = chunkQAO6QMNQ_cjs.isReactNode(description) ? `${inputId}-description` : void 0;
   const statusMessageID = chunk2P6D43V2_cjs.getStatusMessageID(inputId, status);
   const describedBy = chunk2P6D43V2_cjs.getDescribedBy(descriptionID, statusMessageID);
-  const necessity = chunkKFEXS6OK_cjs.getNecessity(isOptional, isRequired);
+  const necessity = chunkBAPCHFNX_cjs.getNecessity(isOptional, isRequired);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkKFEXS6OK_cjs.Field,
+    chunkBAPCHFNX_cjs.Field,
     {
       className,
       description,
@@ -111,7 +114,9 @@ function TimeInput({
                 max: toInputString(max, hasSeconds),
                 min: toInputString(min, hasSeconds),
                 name: htmlName,
+                onBlur,
                 onChange: (event) => onChange(fromInputString(event.target.value)),
+                onFocus,
                 placeholder,
                 ref,
                 step: step ?? (hasSeconds ? 1 : 60),
@@ -120,7 +125,7 @@ function TimeInput({
               }
             ),
             hasClear && value != null && !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
-              chunkYBPG5RPR_cjs.Button,
+              chunkBRB52QFV_cjs.Button,
               {
                 icon: lucideReact.X,
                 isIconOnly: true,
@@ -130,7 +135,7 @@ function TimeInput({
                 variant: "ghost"
               }
             ) : null,
-            isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkYXYD5HKL_cjs.Spinner, { size: "sm" }) : null,
+            isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkKFDHP4WP_cjs.Spinner, { size: "sm" }) : null,
             status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: chunk2P6D43V2_cjs.getStatusIcon(status.type) }) : null
           ]
         }
@@ -141,5 +146,5 @@ function TimeInput({
 TimeInput.displayName = "TimeInput";
 
 exports.TimeInput = TimeInput;
-//# sourceMappingURL=chunk-2D6SGEPH.cjs.map
-//# sourceMappingURL=chunk-2D6SGEPH.cjs.map
+//# sourceMappingURL=chunk-GLJWAY4A.cjs.map
+//# sourceMappingURL=chunk-GLJWAY4A.cjs.map

package/dist/chunk-GLJWAY4A.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TimeInput/TimeInput.tsx"],"names":["css","Temporal","useId","isReactNode","getStatusMessageID","getDescribedBy","getNecessity","jsx","Field","jsxs","inputRecipe","inputStyles","Icon","Clock","cx","Button","X","Spinner","getStatusIcon"],"mappings":"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","file":"chunk-GLJWAY4A.cjs","sourcesContent":["import {Temporal} from '@js-temporal/polyfill';\nimport {Clock, X} from 'lucide-react';\nimport {\n  useId,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport isReactNode from '../../internal/isReactNode';\nimport {Button} from '../Button';\nimport {\n  Field,\n  getNecessity,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport {inputRecipe, inputStyles} from '../Field/inputStyles';\nimport {\n  getDescribedBy,\n  getStatusIcon,\n  getStatusMessageID,\n} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\n\nconst styles = {\n  input: css({\n    '&::-webkit-calendar-picker-indicator': {\n      display: 'none',\n    },\n  }),\n} as const;\n\nexport type PlainTime = Temporal.PlainTime;\n\nexport type TimeInputProps = {\n  /**\n   * Additional CSS class names applied to the input wrapper.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the input element.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether to focus the input on mount.\n   * @default false\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * Whether to show a clear button when a value is set.\n   * @default false\n   */\n  hasClear?: boolean;\n  /**\n   * Whether the input includes a seconds field.\n   * @default false\n   */\n  hasSeconds?: boolean;\n  /**\n   * HTML name attribute.\n   */\n  htmlName?: string;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the input is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Field label.\n   */\n  label: string;\n  /**\n   * Icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Latest allowed time.\n   */\n  max?: PlainTime;\n  /**\n   * Earliest allowed time.\n   */\n  min?: PlainTime;\n  /**\n   * Called when the input loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the time value changes.\n   */\n  onChange: (value: PlainTime | undefined) => void;\n  /**\n   * Called when the input gains focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Placeholder text.\n   * @default 'Select a time'\n   */\n  placeholder?: string;\n  /**\n   * Ref forwarded to the input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size.\n   * @default 'md'\n   */\n  size?: InputSize;\n  /**\n   * Validation status displayed below the input.\n   */\n  status?: InputStatus;\n  /**\n   * Step increment in seconds for the time picker.\n   */\n  step?: number;\n  /**\n   * Inline styles applied to the input wrapper.\n   */\n  style?: CSSProperties;\n  /**\n   * Controlled time value.\n   */\n  value: PlainTime | undefined;\n} & FieldNecessity;\n\nfunction toInputString(\n  time: PlainTime | undefined,\n  hasSeconds: boolean,\n): string {\n  if (time == null) {\n    return '';\n  }\n  return time.toString({\n    smallestUnit: hasSeconds ? 'second' : 'minute',\n  });\n}\n\nfunction fromInputString(value: string): PlainTime | undefined {\n  if (value === '') {\n    return undefined;\n  }\n  try {\n    return Temporal.PlainTime.from(value);\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * Time picker input field with optional seconds granularity.\n */\nexport function TimeInput({\n  label,\n  value,\n  onBlur,\n  onChange,\n  onFocus,\n  hasSeconds = false,\n  hasClear = false,\n  hasAutoFocus = false,\n  min,\n  max,\n  step,\n  size = 'md',\n  description,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isLoading = false,\n  htmlName,\n  status,\n  labelIcon,\n  labelTooltip,\n  placeholder = 'Select a time',\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: TimeInputProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID = isReactNode(description)\n    ? `${inputId}-description`\n    : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n\n  const necessity = getNecessity(isOptional, isRequired);\n\n  return (\n    <Field\n      className={className}\n      description={description}\n      descriptionID={descriptionID}\n      inputId={inputId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...necessity}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={\n        status == null ? undefined : {...status, messageID: statusMessageID}\n      }\n      style={style}>\n      <div\n        className={inputRecipe({\n          size,\n          status: status?.type,\n          isDisabled,\n        })}>\n        <span className={inputStyles.iconSlot}>\n          <Icon icon={Clock} size=\"sm\" />\n        </span>\n        <input\n          aria-busy={isLoading || undefined}\n          aria-describedby={describedBy}\n          aria-invalid={status?.type === 'error' || undefined}\n          aria-required={isRequired ?? undefined}\n          // eslint-disable-next-line jsx-a11y-x/no-autofocus\n          autoFocus={hasAutoFocus}\n          className={cx(inputStyles.control, styles.input)}\n          data-autofocus={hasAutoFocus || undefined}\n          data-testid={dataTestId}\n          disabled={isDisabled}\n          id={inputId}\n          max={toInputString(max, hasSeconds)}\n          min={toInputString(min, hasSeconds)}\n          name={htmlName}\n          onBlur={onBlur}\n          onChange={event => onChange(fromInputString(event.target.value))}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          step={step ?? (hasSeconds ? 1 : 60)}\n          type=\"time\"\n          value={toInputString(value, hasSeconds)}\n        />\n        {hasClear && value != null && !isDisabled ? (\n          <Button\n            icon={X}\n            isIconOnly\n            label={`Clear ${label}`}\n            onClick={() => onChange(undefined)}\n            size=\"sm\"\n            variant=\"ghost\"\n          />\n        ) : null}\n        {isLoading ? <Spinner size=\"sm\" /> : null}\n        {status != null ? (\n          <span className={inputStyles.iconSlot}>\n            {getStatusIcon(status.type)}\n          </span>\n        ) : null}\n      </div>\n    </Field>\n  );\n}\n\nTimeInput.displayName = 'TimeInput';\n"]}

package/dist/{chunk-6XESVFC3.js → chunk-GXRH5XQY.js}

@@ -1,54 +1,76 @@
 import { nowMonotonicMilliseconds, nowEpochMilliseconds } from './chunk-OX4ZMUF4.js';
-import { Button } from './chunk-HLN3JQYD.js';
+import { Button } from './chunk-RVENUWRD.js';
+import { mergeRefs } from './chunk-SGLIDI6R.js';
+import { sva } from './chunk-EHCAF6D3.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { css } from './chunk-OD4DHHZH.js';
 import { X } from 'lucide-react';
-import { createContext, useRef, useCallback, useEffect, useState, useMemo, use } from 'react';
+import { createContext, useRef, useEffect, useCallback, useState, useMemo, use } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var styles = {
-  root: css({
-    width: "25rem",
-    maxW: "calc(100vw - 32px)",
-    p: "4",
-    borderRadius: "lg",
-    boxShadow: "xl",
-    fontFamily: "body",
-    transitionProperty: "opacity, transform",
-    transitionDuration: "fast",
-    transitionTimingFunction: "default",
-    "@starting-style": {
-      opacity: 0,
-      transform: "translateY(8px)"
+// src/components/Toast/Toast.recipe.ts
+var toastRecipe = sva({
+  slots: ["root", "inner", "content", "end"],
+  base: {
+    root: {
+      width: "25rem",
+      maxW: "calc(100vw - 32px)",
+      p: "4",
+      borderRadius: "lg",
+      boxShadow: "xl",
+      fontFamily: "body",
+      transitionProperty: "opacity, transform",
+      transitionDuration: "fast",
+      transitionTimingFunction: "default",
+      "@starting-style": {
+        opacity: 0,
+        transform: "translateY(8px)"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "0.01ms"
+      }
     },
-    "@media (prefers-reduced-motion: reduce)": {
-      transitionDuration: "0.01ms"
+    inner: {
+      display: "flex",
+      alignItems: "center",
+      gap: "3"
+    },
+    content: {
+      flex: 1,
+      minW: 0
+    },
+    end: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      flexShrink: 0
     }
-  }),
-  info: css({ bg: "status.info.solid", color: "status.info.solidFg" }),
-  error: css({ bg: "status.error.solid", color: "status.error.solidFg" }),
-  success: css({ bg: "status.success.solid", color: "status.success.solidFg" }),
-  warning: css({ bg: "status.warning.solid", color: "status.warning.solidFg" }),
-  exiting: css({
-    opacity: 0,
-    transform: "translateY(-8px)"
-  }),
-  inner: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "3"
-  }),
-  content: css({
-    flex: 1,
-    minW: 0
-  }),
-  end: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    flexShrink: 0
-  })
-};
+  },
+  variants: {
+    type: {
+      info: { root: { bg: "status.info.solid", color: "status.info.solidFg" } },
+      error: { root: { bg: "status.error.solid", color: "status.error.solidFg" } },
+      success: {
+        root: { bg: "status.success.solid", color: "status.success.solidFg" }
+      },
+      warning: {
+        root: { bg: "status.warning.solid", color: "status.warning.solidFg" }
+      }
+    },
+    isExiting: {
+      true: {
+        root: {
+          opacity: 0,
+          transform: "translateY(-8px)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    type: "info",
+    isExiting: false
+  }
+});
 var assertiveTypes = {
   error: true,
   warning: true
@@ -70,6 +92,10 @@ function Toast({
   const startedAtRef = useRef(null);
   const remainingRef = useRef(autoHideDuration);
   const isPausedRef = useRef(false);
+  const onDismissRef = useRef(onDismiss);
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  });
   const startTimer = useCallback(() => {
     if (!isAutoHide) {
       return;
@@ -79,10 +105,10 @@ function Toast({
     }
     startedAtRef.current = nowMonotonicMilliseconds();
     timerRef.current = setTimeout(
-      () => onDismiss("auto"),
+      () => onDismissRef.current("auto"),
       remainingRef.current
     );
-  }, [isAutoHide, onDismiss]);
+  }, [isAutoHide]);
   const pauseTimer = useCallback(() => {
     if (!isAutoHide || isPausedRef.current) {
       return;
@@ -115,17 +141,13 @@ function Toast({
       }
     };
   }, [autoHideDuration, startTimer]);
+  const classes = toastRecipe({ type, isExiting });
   return /* @__PURE__ */ jsx(
     "div",
     {
       "aria-atomic": "true",
       "aria-live": assertiveTypes[type] ? "assertive" : "polite",
-      className: cx(
-        styles.root,
-        styles[type],
-        isExiting ? styles.exiting : void 0,
-        className
-      ),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       onBlurCapture: resumeTimer,
       onFocusCapture: pauseTimer,
@@ -134,9 +156,9 @@ function Toast({
       ref,
       role: assertiveTypes[type] ? "alert" : "status",
       style,
-      children: /* @__PURE__ */ jsxs("div", { className: styles.inner, children: [
-        /* @__PURE__ */ jsx("div", { className: styles.content, children: body }),
-        /* @__PURE__ */ jsxs("div", { className: styles.end, children: [
+      children: /* @__PURE__ */ jsxs("div", { className: classes.inner, children: [
+        /* @__PURE__ */ jsx("div", { className: classes.content, children: body }),
+        /* @__PURE__ */ jsxs("div", { className: classes.end, children: [
           endContent,
           /* @__PURE__ */ jsx(
             Button,
@@ -157,7 +179,7 @@ function Toast({
 Toast.displayName = "Toast";
 var ToastContext = createContext(null);
 ToastContext.displayName = "ToastContext";
-var styles2 = {
+var styles = {
   viewport: css({
     position: "fixed",
     zIndex: 500,
@@ -211,10 +233,10 @@ var styles2 = {
     topStart: ""
   }
 };
-styles2.position.bottomEnd = styles2.bottomEnd;
-styles2.position.bottomStart = styles2.bottomStart;
-styles2.position.topEnd = styles2.topEnd;
-styles2.position.topStart = styles2.topStart;
+styles.position.bottomEnd = styles.bottomEnd;
+styles.position.bottomStart = styles.bottomStart;
+styles.position.topEnd = styles.topEnd;
+styles.position.topStart = styles.topStart;
 function ToastViewport({
   children,
   className,
@@ -256,7 +278,7 @@ function ToastViewport({
     const entry = toastsRef.current.find((toast) => toast.id === id);
     entry?.options.onHide?.(reason);
     setExitingIds((previous) => new Set(previous).add(id));
-    window.setTimeout(() => {
+    globalThis.setTimeout(() => {
       setExitingIds((previous) => {
         const next = new Set(previous);
         next.delete(id);
@@ -295,17 +317,10 @@ function ToastViewport({
       "div",
       {
         "aria-label": "Notifications",
-        className: cx(styles2.viewport, styles2.position[position], className),
+        className: cx(styles.viewport, styles.position[position], className),
         "data-testid": dataTestId,
         popover: isTopLayer ? "manual" : void 0,
-        ref: (node) => {
-          viewportRef.current = node;
-          if (typeof ref === "function") {
-            ref(node);
-          } else if (ref != null) {
-            ref.current = node;
-          }
-        },
+        ref: mergeRefs(viewportRef, ref),
         role: "region",
         style: insetStyle,
         children: visibleToasts.map((entry) => {
@@ -315,10 +330,10 @@ function ToastViewport({
             "div",
             {
               className: cx(
-                styles2.wrapper,
-                exitingIds.has(entry.id) ? styles2.wrapperExiting : void 0
+                styles.wrapper,
+                exitingIds.has(entry.id) ? styles.wrapperExiting : void 0
               ),
-              children: /* @__PURE__ */ jsx("div", { className: styles2.wrapperInner, children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx("div", { className: styles.wrapperInner, children: /* @__PURE__ */ jsx(
                 Toast,
                 {
                   autoHideDuration: entry.options.autoHideDuration ?? 5e3,
@@ -367,5 +382,5 @@ function useToast() {
 }
 
 export { Toast, ToastViewport, useToast };
-//# sourceMappingURL=chunk-6XESVFC3.js.map
-//# sourceMappingURL=chunk-6XESVFC3.js.map
+//# sourceMappingURL=chunk-GXRH5XQY.js.map
+//# sourceMappingURL=chunk-GXRH5XQY.js.map

package/dist/chunk-GXRH5XQY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toast/Toast.recipe.ts","../src/components/Toast/Toast.tsx","../src/components/Toast/ToastContext.ts","../src/components/Toast/ToastViewport.tsx","../src/components/Toast/useToast.tsx"],"names":["useRef","useEffect","useCallback","jsxs","jsx"],"mappings":"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","file":"chunk-GXRH5XQY.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const toastRecipe = sva({\n  slots: ['root', 'inner', 'content', 'end'],\n  base: {\n    root: {\n      width: '25rem',\n      maxW: 'calc(100vw - 32px)',\n      p: '4',\n      borderRadius: 'lg',\n      boxShadow: 'xl',\n      fontFamily: 'body',\n      transitionProperty: 'opacity, transform',\n      transitionDuration: 'fast',\n      transitionTimingFunction: 'default',\n      '@starting-style': {\n        opacity: 0,\n        transform: 'translateY(8px)',\n      },\n      '@media (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n      },\n    },\n    inner: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '3',\n    },\n    content: {\n      flex: 1,\n      minW: 0,\n    },\n    end: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '2',\n      flexShrink: 0,\n    },\n  },\n  variants: {\n    type: {\n      info: {root: {bg: 'status.info.solid', color: 'status.info.solidFg'}},\n      error: {root: {bg: 'status.error.solid', color: 'status.error.solidFg'}},\n      success: {\n        root: {bg: 'status.success.solid', color: 'status.success.solidFg'},\n      },\n      warning: {\n        root: {bg: 'status.warning.solid', color: 'status.warning.solidFg'},\n      },\n    },\n    isExiting: {\n      true: {\n        root: {\n          opacity: 0,\n          transform: 'translateY(-8px)',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    type: 'info',\n    isExiting: false,\n  },\n});\n\nexport type ToastVariants = RecipeVariantProps<typeof toastRecipe>;\n","/* eslint-disable jsx-a11y-x/no-static-element-interactions */\nimport {X} from 'lucide-react';\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {cx} from '../../internal/cx';\nimport {nowMonotonicMilliseconds} from '../../internal/time';\nimport {Button} from '../Button';\nimport {toastRecipe} from './Toast.recipe';\nimport type {ToastDismissReason, ToastType} from './types';\n\nexport interface ToastProps {\n  /**\n   * Auto-dismiss duration in milliseconds.\n   */\n  autoHideDuration: number;\n  /**\n   * Toast message content.\n   */\n  body: ReactNode;\n  /**\n   * Additional CSS class names applied to the toast.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the toast.\n   */\n  'data-testid'?: string;\n  /**\n   * Content rendered before the dismiss button.\n   */\n  endContent?: ReactNode;\n  /**\n   * Whether the toast auto-dismisses.\n   */\n  isAutoHide: boolean;\n  /**\n   * Whether the toast is exiting.\n   * @default false\n   */\n  isExiting?: boolean;\n  /**\n   * Called when the toast should be dismissed.\n   */\n  onDismiss: (reason: ToastDismissReason) => void;\n  /**\n   * Ref forwarded to the toast element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the toast.\n   */\n  style?: CSSProperties;\n  /**\n   * Toast tone.\n   */\n  type: ToastType;\n}\n\nconst assertiveTypes: Partial<Record<ToastType, true>> = {\n  error: true,\n  warning: true,\n};\n\n/**\n * An individual toast notification.\n */\nexport function Toast({\n  autoHideDuration,\n  body,\n  className,\n  'data-testid': dataTestId,\n  endContent,\n  isAutoHide,\n  isExiting = false,\n  onDismiss,\n  ref,\n  style,\n  type,\n}: ToastProps): React.JSX.Element {\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const startedAtRef = useRef<number | null>(null);\n  const remainingRef = useRef(autoHideDuration);\n  const isPausedRef = useRef(false);\n  const onDismissRef = useRef(onDismiss);\n  useEffect(() => {\n    onDismissRef.current = onDismiss;\n  });\n\n  const startTimer = useCallback(() => {\n    if (!isAutoHide) {\n      return;\n    }\n    if (timerRef.current != null) {\n      clearTimeout(timerRef.current);\n    }\n    startedAtRef.current = nowMonotonicMilliseconds();\n    timerRef.current = setTimeout(\n      () => onDismissRef.current('auto'),\n      remainingRef.current,\n    );\n  }, [isAutoHide]);\n\n  const pauseTimer = useCallback(() => {\n    if (!isAutoHide || isPausedRef.current) {\n      return;\n    }\n    isPausedRef.current = true;\n    if (timerRef.current != null) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n    if (startedAtRef.current != null) {\n      remainingRef.current = Math.max(\n        remainingRef.current -\n          (nowMonotonicMilliseconds() - startedAtRef.current),\n        1000,\n      );\n    }\n  }, [isAutoHide]);\n\n  const resumeTimer = useCallback(() => {\n    if (!isAutoHide || !isPausedRef.current) {\n      return;\n    }\n    isPausedRef.current = false;\n    startTimer();\n  }, [isAutoHide, startTimer]);\n\n  useEffect(() => {\n    remainingRef.current = autoHideDuration;\n    startTimer();\n    return () => {\n      if (timerRef.current != null) {\n        clearTimeout(timerRef.current);\n      }\n    };\n  }, [autoHideDuration, startTimer]);\n\n  const classes = toastRecipe({type, isExiting});\n\n  return (\n    <div\n      aria-atomic=\"true\"\n      aria-live={assertiveTypes[type] ? 'assertive' : 'polite'}\n      className={cx(classes.root, className)}\n      data-testid={dataTestId}\n      onBlurCapture={resumeTimer}\n      onFocusCapture={pauseTimer}\n      onMouseEnter={pauseTimer}\n      onMouseLeave={resumeTimer}\n      ref={ref}\n      role={assertiveTypes[type] ? 'alert' : 'status'}\n      style={style}>\n      <div className={classes.inner}>\n        <div className={classes.content}>{body}</div>\n        <div className={classes.end}>\n          {endContent}\n          <Button\n            icon={X}\n            isIconOnly\n            label=\"Dismiss notification\"\n            onClick={() => onDismiss('manual')}\n            size=\"sm\"\n            variant=\"onSolid\"\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nToast.displayName = 'Toast';\n","import {createContext} from 'react';\nimport type {ToastDismissReason, ToastEntry} from './types';\n\nexport interface ToastContextValue {\n  addToast: (entry: ToastEntry) => void;\n  findByUniqueID: (uniqueID: string) => ToastEntry | undefined;\n  removeToast: (id: string, reason: ToastDismissReason) => void;\n}\n\nexport const ToastContext = createContext<ToastContextValue | null>(null);\n\nToastContext.displayName = 'ToastContext';\n","import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {mergeRefs} from '../../internal/mergeRefs';\nimport {Toast} from './Toast';\nimport {ToastContext, type ToastContextValue} from './ToastContext';\nimport type {ToastDismissReason, ToastEntry, ToastPosition} from './types';\n\nexport interface ToastViewportInset {\n  bottom?: number;\n  end?: number;\n  start?: number;\n  top?: number;\n}\n\nexport interface ToastViewportProps {\n  /**\n   * App content that should receive the toast context.\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names applied to the viewport.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the viewport.\n   */\n  'data-testid'?: string;\n  /**\n   * Custom viewport inset.\n   */\n  inset?: Readonly<ToastViewportInset>;\n  /**\n   * Whether to promote the viewport to the CSS top layer using popover.\n   * @default true\n   */\n  isTopLayer?: boolean;\n  /**\n   * Maximum visible toast count.\n   * @default 5\n   */\n  maxVisible?: number;\n  /**\n   * Toast stack position.\n   * @default 'bottomEnd'\n   */\n  position?: ToastPosition;\n  /**\n   * Ref forwarded to the viewport element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the viewport.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  viewport: css({\n    position: 'fixed',\n    zIndex: 500,\n    display: 'flex',\n    flexDirection: 'column',\n    p: '4',\n    pointerEvents: 'none',\n    inset: 'unset',\n    m: 0,\n    borderWidth: 0,\n    bg: 'transparent',\n    overflow: 'visible',\n  }),\n  bottomEnd: css({bottom: 0, insetInlineEnd: 0, alignItems: 'flex-end'}),\n  bottomStart: css({bottom: 0, insetInlineStart: 0, alignItems: 'flex-start'}),\n  topEnd: css({\n    top: 0,\n    insetInlineEnd: 0,\n    alignItems: 'flex-end',\n    flexDirection: 'column-reverse',\n  }),\n  topStart: css({\n    top: 0,\n    insetInlineStart: 0,\n    alignItems: 'flex-start',\n    flexDirection: 'column-reverse',\n  }),\n  wrapper: css({\n    pointerEvents: 'auto',\n    display: 'grid',\n    gridTemplateRows: '1fr',\n    pb: '3',\n    transitionProperty: 'grid-template-rows, padding',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    '@media (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  }),\n  wrapperExiting: css({\n    gridTemplateRows: '0fr',\n    pb: 0,\n  }),\n  wrapperInner: css({\n    overflow: 'hidden',\n  }),\n  position: {\n    bottomEnd: '',\n    bottomStart: '',\n    topEnd: '',\n    topStart: '',\n  } satisfies Record<ToastPosition, string>,\n} as const;\n\nstyles.position.bottomEnd = styles.bottomEnd;\nstyles.position.bottomStart = styles.bottomStart;\nstyles.position.topEnd = styles.topEnd;\nstyles.position.topStart = styles.topStart;\n\n/**\n * Toast provider and viewport. Mount once near the app root to enable\n * toast notifications. Components below this provider can call `useToast()`\n * to show toasts.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <ToastViewport>\n *       <MyRoutes />\n *     </ToastViewport>\n *   );\n * }\n * ```\n */\nexport function ToastViewport({\n  children,\n  className,\n  'data-testid': dataTestId,\n  inset,\n  isTopLayer = true,\n  maxVisible = 5,\n  position = 'bottomEnd',\n  ref,\n  style,\n}: ToastViewportProps): React.JSX.Element {\n  const [toasts, setToasts] = useState<ToastEntry[]>([]);\n  const [exitingIds, setExitingIds] = useState<Set<string>>(() => new Set());\n  const toastsRef = useRef(toasts);\n  const viewportRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    toastsRef.current = toasts;\n  }, [toasts]);\n\n  const addToast = useCallback((entry: ToastEntry) => {\n    setToasts(previous => {\n      const {uniqueID, collisionBehavior = 'overwrite'} = entry.options;\n      if (uniqueID != null) {\n        const existing = previous.find(\n          toast => toast.options.uniqueID === uniqueID,\n        );\n        if (existing != null) {\n          if (collisionBehavior === 'ignore') {\n            return previous;\n          }\n          return previous.map(toast =>\n            toast.options.uniqueID === uniqueID ? entry : toast,\n          );\n        }\n      }\n      return [...previous, entry];\n    });\n  }, []);\n\n  const removeToast = useCallback((id: string, reason: ToastDismissReason) => {\n    const entry = toastsRef.current.find(toast => toast.id === id);\n    entry?.options.onHide?.(reason);\n    setExitingIds(previous => new Set(previous).add(id));\n    globalThis.setTimeout(() => {\n      setExitingIds(previous => {\n        const next = new Set(previous);\n        next.delete(id);\n        return next;\n      });\n      setToasts(previous => previous.filter(toast => toast.id !== id));\n    }, 180);\n  }, []);\n\n  const findByUniqueID = useCallback((uniqueID: string) => {\n    return toastsRef.current.find(toast => toast.options.uniqueID === uniqueID);\n  }, []);\n\n  const contextValue = useMemo<ToastContextValue>(\n    () => ({addToast, findByUniqueID, removeToast}),\n    [addToast, findByUniqueID, removeToast],\n  );\n\n  useEffect(() => {\n    if (!isTopLayer) {\n      return;\n    }\n    try {\n      viewportRef.current?.showPopover();\n    } catch {\n      // Already showing.\n    }\n  }, [isTopLayer]);\n\n  const insetStyle: CSSProperties = {\n    ...(inset?.top != null ? {top: inset.top} : null),\n    ...(inset?.bottom != null ? {bottom: inset.bottom} : null),\n    ...(inset?.start != null ? {insetInlineStart: inset.start} : null),\n    ...(inset?.end != null ? {insetInlineEnd: inset.end} : null),\n    ...style,\n  };\n  const visibleToasts = toasts.slice(-maxVisible);\n\n  return (\n    <ToastContext value={contextValue}>\n      {children}\n      <div\n        aria-label=\"Notifications\"\n        className={cx(styles.viewport, styles.position[position], className)}\n        data-testid={dataTestId}\n        popover={isTopLayer ? 'manual' : undefined}\n        ref={mergeRefs(viewportRef, ref)}\n        role=\"region\"\n        style={insetStyle}>\n        {visibleToasts.map(entry => {\n          const type = entry.options.type ?? 'info';\n          const isAutoHide =\n            entry.options.isAutoHide ?? (type === 'error' ? false : true);\n          return (\n            <div\n              className={cx(\n                styles.wrapper,\n                exitingIds.has(entry.id) ? styles.wrapperExiting : undefined,\n              )}\n              key={entry.id}>\n              <div className={styles.wrapperInner}>\n                <Toast\n                  autoHideDuration={entry.options.autoHideDuration ?? 5000}\n                  body={entry.options.body}\n                  endContent={entry.options.endContent}\n                  isAutoHide={isAutoHide}\n                  isExiting={exitingIds.has(entry.id)}\n                  onDismiss={reason => removeToast(entry.id, reason)}\n                  type={type}\n                />\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </ToastContext>\n  );\n}\n\nToastViewport.displayName = 'ToastViewport';\n","import {use, useCallback} from 'react';\nimport {nowEpochMilliseconds} from '../../internal/time';\nimport {ToastContext} from './ToastContext';\nimport type {\n  ShowToastFn,\n  ToastDismissFn,\n  ToastEntry,\n  ToastOptions,\n} from './types';\n\nlet toastIdCounter = 0;\n\nfunction generateToastId(): string {\n  toastIdCounter += 1;\n  return `silver-toast-${toastIdCounter}`;\n}\n\n/**\n * Returns a function that shows a toast notification.\n * Must be called within a `ToastViewport` provider.\n * The returned function accepts `ToastOptions` and returns a dismiss callback.\n */\nexport function useToast(): ShowToastFn {\n  const context = use(ToastContext);\n\n  if (context == null) {\n    throw new Error(\n      'useToast must be used within a ToastViewport. Add <ToastViewport> near your app root to enable toast notifications.',\n    );\n  }\n\n  return useCallback(\n    (options: ToastOptions): ToastDismissFn => {\n      const id = generateToastId();\n      const entry: ToastEntry = {\n        createdAt: nowEpochMilliseconds(),\n        id,\n        options,\n      };\n      context.addToast(entry);\n      return () => context.removeToast(id, 'manual');\n    },\n    [context],\n  );\n}\n"]}