kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-I2N3HZ4M.js

@@ -0,0 +1,60 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  OnchainNetworkIcon
+} from "./chunk-WBW5E6LC.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/app-icon.tsx
+import { jsx } from "react/jsx-runtime";
+var APP_ICON_NAMES = {
+  activity: "history",
+  bitcoin: "currency_bitcoin",
+  chevronDown: "expand_more",
+  chevronRight: "chevron_right",
+  channelClose: "remove_circle",
+  channelOpen: "add_circle",
+  close: "close",
+  experimental: "science",
+  issuance: "inventory_2",
+  lock: "lock",
+  onboarding: "arrow_circle_up",
+  onchain: "link",
+  // fallback name only; AppIcon renders OnchainNetworkIcon for it
+  power: "power_settings_new",
+  receive: "call_received",
+  refresh: "refresh",
+  search: "search",
+  send: "arrow_outward",
+  settings: "settings",
+  swap: "swap_horiz",
+  transaction: "receipt_long",
+  info: "info",
+  vault: "key",
+  wallet: "account_balance_wallet",
+  allNetworks: "grid_view",
+  arkadeLayers: "layers"
+};
+var SIZE_CLASSES = {
+  xs: "text-icon-sm",
+  sm: "text-icon-md",
+  md: "text-icon-xl",
+  lg: "text-icon-2xl",
+  xl: "text-icon-4xl",
+  "2xl": "text-icon-5xl"
+};
+function AppIcon({ name, strokeWidth: _strokeWidth, ...props }) {
+  if (name === "onchain") {
+    const { size, className } = props;
+    return /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: cn(size && SIZE_CLASSES[size], className) });
+  }
+  return /* @__PURE__ */ jsx(Icon, { name: APP_ICON_NAMES[name], ...props });
+}
+
+export {
+  AppIcon
+};

package/dist/web/chunk-I7KNV2UC.js

@@ -0,0 +1,109 @@
+"use client";
+import {
+  TransactionCard
+} from "./chunk-XYNURYMC.js";
+import {
+  SwapBadge
+} from "./chunk-VNL2QI5B.js";
+import {
+  cardSurface
+} from "./chunk-GZZ5KVON.js";
+import {
+  EmptyState
+} from "./chunk-UZ4LWR4X.js";
+import {
+  ErrorCard,
+  LoadingCard
+} from "./chunk-Z3H2FQVX.js";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  NetworkBadge
+} from "./chunk-EBQ35SOM.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/activity-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DefaultEmptyIcon({ name }) {
+  return /* @__PURE__ */ jsx(Icon, { name, className: "text-icon-4xl text-secondary-content" });
+}
+function ActivityList({
+  items,
+  isLoading = false,
+  error,
+  hasActiveFilters = false,
+  expandedId = null,
+  onExpandedChange,
+  onRetry,
+  onClearFilters,
+  renderEmptyActions,
+  renderDetails,
+  emptyIcon,
+  emptyTitle = "No transactions yet",
+  emptyDescription = "Your transaction history will appear here once you start using your wallet.",
+  filteredEmptyTitle = "No matching transactions",
+  filteredEmptyDescription = "Try adjusting your search, status, or network filter."
+}) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(LoadingCard, { message: "Loading activity..." });
+  }
+  if (error && items.length === 0) {
+    return /* @__PURE__ */ jsx(ErrorCard, { title: "Failed to load", description: error, onRetry });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: emptyIcon ?? /* @__PURE__ */ jsx(DefaultEmptyIcon, { name: "receipt_long" }),
+        title: hasActiveFilters ? filteredEmptyTitle : emptyTitle,
+        description: hasActiveFilters ? filteredEmptyDescription : emptyDescription,
+        descriptionClassName: "text-foreground/70",
+        action: hasActiveFilters && onClearFilters ? /* @__PURE__ */ jsx(Button, { variant: "surface", size: "sm", onClick: onClearFilters, children: "Clear Filters" }) : renderEmptyActions?.()
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2.5", children: items.map((item) => {
+    const isExpanded = expandedId === item.id;
+    const details = renderDetails?.(item);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative overflow-hidden rounded-2xl animate-in fade-in slide-in-from-bottom-2 duration-500",
+        children: [
+          /* @__PURE__ */ jsx(
+            TransactionCard,
+            {
+              direction: item.direction,
+              status: item.status,
+              displayAmount: item.displayAmount,
+              unit: item.unit,
+              subAmount: item.subAmount,
+              onSubAmountInfo: item.onSubAmountInfo,
+              timestamp: item.timestamp,
+              onClick: () => onExpandedChange?.(isExpanded ? null : item.id),
+              className: cn(isExpanded && "rounded-b-none")
+            }
+          ),
+          isExpanded && /* @__PURE__ */ jsxs("div", { className: cn("animate-in slide-in-from-top-2 duration-300", cardSurface.secondary, "rounded-t-none"), children: [
+            (item.network || item.label) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2.5", children: [
+              item.network && (item.networkTo ? /* @__PURE__ */ jsx(SwapBadge, { from: item.network, to: item.networkTo, size: "sm" }) : /* @__PURE__ */ jsx(NetworkBadge, { network: item.network, showLabel: true })),
+              item.label && /* @__PURE__ */ jsx("span", { className: "text-xxs font-medium text-muted-foreground", children: item.label })
+            ] }),
+            details && /* @__PURE__ */ jsx("div", { className: "space-y-1.5 px-3 pb-3 pt-1", children: details })
+          ] })
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+
+export {
+  ActivityList
+};

package/dist/web/chunk-INKE5FS6.js

@@ -0,0 +1,128 @@
+"use client";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport
+} from "./chunk-7L35JISL.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check,
+  CheckCircle,
+  ContentCopy,
+  Error
+} from "./chunk-XXH4TYKZ.js";
+import {
+  useCopyToClipboard
+} from "./chunk-BGUBHWIO.js";
+import {
+  useToast
+} from "./chunk-TS4UYWJJ.js";
+
+// src/web/primitives/toaster.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function toPlainText(node) {
+  if (node == null || node === false) return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(toPlainText).join("");
+  const kids = node?.props?.children;
+  return kids != null ? toPlainText(kids) : "";
+}
+function ToastWithProgress({ id, title, description, action, duration = 4e3, variant, ...props }) {
+  const [progress, setProgress] = useState(100);
+  const clipboard = useCopyToClipboard();
+  const copied = clipboard.state === "copied";
+  const copyFailed = clipboard.state === "failed";
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(clipboard.reset, 1500);
+    return () => clearTimeout(timer);
+  }, [copied, clipboard.reset]);
+  useEffect(() => {
+    const interval = 50;
+    const decrement = interval / duration * 100;
+    const timer = setInterval(() => {
+      setProgress((prev) => {
+        const next = prev - decrement;
+        return next <= 0 ? 0 : next;
+      });
+    }, interval);
+    return () => clearInterval(timer);
+  }, [duration]);
+  const getIcon = () => {
+    if (variant === "destructive") {
+      return /* @__PURE__ */ jsx(IconGlyph, { glyph: Error, size: "md", className: "text-danger-fg" });
+    }
+    return /* @__PURE__ */ jsx(IconGlyph, { glyph: CheckCircle, size: "md", className: "text-brand" });
+  };
+  const showCopy = variant === "destructive";
+  const copyText = () => {
+    const text = [toPlainText(title), toPlainText(description)].filter(Boolean).join("\n");
+    if (!text) return;
+    void clipboard.copy(text);
+  };
+  const copyLabel = copied ? "Copied" : copyFailed ? "Copy failed \u2014 select the message and copy it by hand" : "Copy error";
+  return /* @__PURE__ */ jsxs(Toast, { ...props, variant, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 flex-1", children: [
+      getIcon(),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-1 flex-1", children: [
+        title && /* @__PURE__ */ jsx(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsx(ToastDescription, { className: "select-text", children: description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+      action,
+      showCopy && /* @__PURE__ */ jsx(
+        GlyphButton,
+        {
+          icon: copied ? Check : copyFailed ? Error : ContentCopy,
+          label: copyLabel,
+          size: "sm",
+          variant: "danger-subtle",
+          onClick: copyText
+        }
+      ),
+      showCopy && /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "Copied" : copyFailed ? copyLabel : "" }),
+      /* @__PURE__ */ jsx(ToastClose, { variant })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-foreground/10 overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `h-full transition-all ease-linear ${variant === "destructive" ? "bg-danger" : "bg-primary bg-gradient-brand"}`,
+        style: { width: `${progress}%` }
+      }
+    ) })
+  ] });
+}
+function Toaster() {
+  const { toasts } = useToast();
+  return /* @__PURE__ */ jsxs(ToastProvider, { children: [
+    toasts.map(function({ id, title, description, action, duration, ...props }) {
+      return /* @__PURE__ */ jsx(
+        ToastWithProgress,
+        {
+          id,
+          title,
+          description,
+          action,
+          duration,
+          ...props
+        },
+        id
+      );
+    }),
+    /* @__PURE__ */ jsx(ToastViewport, {})
+  ] });
+}
+
+export {
+  Toaster
+};

package/dist/web/chunk-IWDBETXQ.js

@@ -0,0 +1,254 @@
+"use client";
+import {
+  Label
+} from "./chunk-H3GYLFHP.js";
+import {
+  formatAmount
+} from "./chunk-VM6AGMYO.js";
+import {
+  DottedLeader
+} from "./chunk-CXMCWSWC.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/withdraw-amount-input.tsx
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function WithdrawAmountInput({
+  addressType,
+  amount,
+  handleAmountChange,
+  handleSetMax,
+  selectedAssetId,
+  selectedAssetTicker,
+  unitSlot,
+  formattedBalance,
+  decodedLnInvoice,
+  decodedRgbInvoice,
+  lnurlPayData,
+  witnessAmountSat,
+  setWitnessAmountSat,
+  feeRate,
+  setFeeRate,
+  feeRates,
+  feeRateMode,
+  setFeeRateMode,
+  customFeeRate,
+  setCustomFeeRate,
+  effectiveFeeRateSatPerVb,
+  estimatedFee,
+  donation,
+  setDonation
+}) {
+  const amountId = useId();
+  const witnessId = useId();
+  const feeRateId = useId();
+  const customFeeEnabled = typeof setFeeRateMode === "function";
+  const activeFeeMode = feeRateMode ?? feeRate;
+  const unitLabel = selectedAssetId === "BTC" ? "sats" : selectedAssetTicker ?? "units";
+  const showAmountInput = addressType === "bitcoin" || addressType === "spark" || addressType === "arkade" || addressType === "liquid" || addressType === "lightning-address" || addressType === "lnurl-pay" || addressType === "rgb" && !decodedRgbInvoice?.assignment?.value || addressType === "lightning" && !decodedLnInvoice?.amount && !decodedLnInvoice?.asset_amount;
+  const enteredNum = parseFloat(amount.replace(/[^\d.-]/g, "") || "0") || 0;
+  const balanceNum = parseFloat(formattedBalance.replace(/,/g, "") || "0") || 0;
+  const isOverBalance = enteredNum > 0 && balanceNum > 0 && enteredNum > balanceNum;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showAmountInput && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: amountId, className: "ml-1", children: "Amount" }),
+      /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero shadow-card transition-shadow focus-within:ring-1 focus-within:ring-primary/50 focus-within:shadow-glow-primary-soft", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 pt-3.5 pb-2.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: amountId,
+                type: "text",
+                inputMode: "decimal",
+                className: "w-full bg-transparent text-headline font-bold tabular-nums text-foreground outline-none placeholder:text-foreground/15",
+                placeholder: "0",
+                value: amount,
+                onChange: handleAmountChange
+              }
+            ),
+            unitSlot ? /* @__PURE__ */ jsx("div", { "data-slot": "amount-unit", className: "mt-1 flex min-w-0 items-center gap-2", children: unitSlot }) : /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption text-muted-foreground", children: unitLabel })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "surface",
+              size: "xs",
+              className: cn("shrink-0", eyebrow),
+              onClick: handleSetMax,
+              children: "Max"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cn(
+          "flex items-center gap-3 bg-muted/40 px-4 py-2"
+        ), children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xxs text-foreground/55", children: "Available" }),
+          /* @__PURE__ */ jsx(DottedLeader, {}),
+          /* @__PURE__ */ jsxs("span", { className: cn(
+            "tabular-nums text-xxs font-medium",
+            isOverBalance ? "text-danger-fg" : "text-foreground/55"
+          ), children: [
+            formattedBalance,
+            " ",
+            unitLabel
+          ] })
+        ] })
+      ] }),
+      lnurlPayData && /* @__PURE__ */ jsxs("div", { className: "space-y-1 px-1", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-caption text-muted-foreground", children: [
+          formatAmount(Math.ceil(lnurlPayData.params.min)),
+          " \u2013",
+          " ",
+          formatAmount(Math.floor(lnurlPayData.params.max)),
+          " sats"
+        ] }),
+        lnurlPayData.params.description && /* @__PURE__ */ jsx("p", { className: "text-caption italic text-muted-foreground", children: lnurlPayData.params.description })
+      ] })
+    ] }),
+    addressType === "rgb" && decodedRgbInvoice?.recipient_type === "Witness" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: witnessId, className: "ml-1", children: "Witness amount (sats) - min 512" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: witnessId,
+          type: "number",
+          min: 512,
+          value: witnessAmountSat,
+          onChange: (event) => {
+            const value = parseInt(event.target.value, 10);
+            if (!Number.isNaN(value)) setWitnessAmountSat(value);
+          },
+          className: "w-full rounded-xl bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 px-4 py-3 text-body text-foreground shadow-inner transition-all focus:outline-none focus:ring-1 focus:ring-primary/50 focus:shadow-glow-primary-soft"
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "ml-1 text-caption text-muted-foreground", children: "Bitcoin amount sent to create the witness UTXO for the recipient." })
+    ] }),
+    (addressType === "bitcoin" || addressType === "rgb") && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("p", { id: feeRateId, className: cn("mb-1 ml-1 block leading-none", eyebrow, "text-secondary-content"), children: "Fee Rate" }),
+      customFeeEnabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { role: "group", "aria-labelledby": feeRateId, className: "grid grid-cols-4 gap-2", children: ["slow", "normal", "fast", "custom"].map((mode) => {
+          const selected = activeFeeMode === mode;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": selected,
+              onClick: () => {
+                setFeeRateMode?.(mode);
+                if (mode !== "custom") setFeeRate(mode);
+              },
+              className: `group relative overflow-hidden rounded-xl border px-2 py-3 transition-all active:scale-[0.98] ${selected ? "border-transparent bg-gradient-active ring-1 ring-inset ring-primary/40 shadow-glow-primary-faint" : "border-transparent bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-raised hover-gradient-violet"}`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `block text-caption font-bold capitalize ${selected ? "text-brand" : "text-muted-foreground group-hover:text-secondary-content"}`,
+                    children: mode
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `mt-0.5 block text-xxs font-medium ${selected ? "text-brand/70" : "text-foreground/55 group-hover:text-foreground/70"}`,
+                    children: mode === "custom" ? "sat/vB" : `${feeRates[mode]} sat/vB`
+                  }
+                )
+              ]
+            },
+            mode
+          );
+        }) }),
+        activeFeeMode === "custom" && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            inputMode: "decimal",
+            "aria-label": "Custom fee rate (sat/vB)",
+            placeholder: `${feeRates[feeRate]} (${feeRate})`,
+            value: customFeeRate ?? "",
+            onChange: (event) => setCustomFeeRate?.(event.target.value.replace(/[^\d.]/g, "")),
+            className: "w-full rounded-xl bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 px-4 py-3 text-body text-foreground shadow-inner transition-all focus:outline-none focus:ring-1 focus:ring-primary/50 focus:shadow-glow-primary-soft"
+          }
+        ),
+        typeof estimatedFee === "number" && /* @__PURE__ */ jsxs("p", { className: "ml-1 text-caption text-muted-foreground", children: [
+          "Using ",
+          effectiveFeeRateSatPerVb,
+          " sat/vB \xB7 ~",
+          formatAmount(estimatedFee),
+          " ",
+          "sats est. fee"
+        ] })
+      ] }) : /* @__PURE__ */ jsx("div", { role: "group", "aria-labelledby": feeRateId, className: "grid grid-cols-3 gap-3", children: ["slow", "normal", "fast"].map((rate) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": feeRate === rate,
+          onClick: () => setFeeRate(rate),
+          className: `group relative overflow-hidden rounded-[16px] px-3 py-3 transition-all active:scale-[0.98] ${feeRate === rate ? "bg-gradient-active ring-1 ring-inset ring-primary/40 shadow-glow-primary-faint" : "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-raised hover-gradient-violet"}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `pointer-events-none absolute inset-0 bg-gradient-to-br from-secondary/15 to-transparent transition-opacity ${feeRate === rate ? "opacity-100 [.light_&]:opacity-0" : "opacity-0"}`
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `text-body font-bold capitalize transition-colors ${feeRate === rate ? "text-brand" : "text-muted-foreground group-hover:text-secondary-content"}`,
+                  children: rate
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `mt-0.5 text-xxs font-medium transition-colors ${feeRate === rate ? "text-brand/70" : "text-foreground/55 group-hover:text-foreground/70"}`,
+                  children: [
+                    feeRates[rate],
+                    " sat/vB"
+                  ]
+                }
+              )
+            ] })
+          ]
+        },
+        rate
+      )) })
+    ] }),
+    addressType === "rgb" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-3 shadow-card", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-body font-medium text-foreground", children: "Gift / Donation" }),
+        /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: "Skip amount checks for this transfer" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${donation ? "bg-primary bg-gradient-primary shadow-glow-primary-soft" : "bg-foreground/10 shadow-inner"}`,
+          onClick: () => setDonation(!donation),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `inline-block h-4 w-4 rounded-full transition-transform ${donation ? "translate-x-6 bg-black" : "translate-x-1 bg-foreground/90"}`
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+
+export {
+  WithdrawAmountInput
+};

package/dist/web/chunk-IZCLPO4E.js

@@ -0,0 +1,42 @@
+"use client";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Close
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/floating-notice.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function FloatingNotice({
+  children,
+  onDismiss,
+  dismissible = true,
+  dismissLabel = "Dismiss",
+  role = "status",
+  className
+}) {
+  const showClose = dismissible && Boolean(onDismiss);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "floating-notice",
+      role,
+      className: cn(
+        "fixed bottom-4 left-1/2 z-[var(--z-modal)] w-[min(32rem,calc(100vw-2rem))] -translate-x-1/2 rounded-2xl bg-card bg-gradient-card-hero shadow-toast",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        children,
+        showClose && /* @__PURE__ */ jsx(GlyphButton, { icon: Close, label: dismissLabel, size: "sm", onClick: onDismiss, className: "absolute right-2 top-2" })
+      ] })
+    }
+  );
+}
+
+export {
+  FloatingNotice
+};

package/dist/web/chunk-JY3H7ZAI.js

@@ -0,0 +1,41 @@
+"use client";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/glyph-button.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var sizes = { sm: "icon-sm", md: "icon", lg: "icon-lg" };
+var GlyphButton = React.forwardRef(
+  ({ label, icon, size = "md", variant = "quiet", shape = "square", title, className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      type,
+      variant,
+      size: sizes[size],
+      "aria-label": label,
+      title: title ?? label,
+      "data-slot": "icon-button",
+      className: cn(
+        "shrink-0 focus-visible:ring-primary/50 focus-visible:ring-offset-0 focus-visible:shadow-glow-primary-soft",
+        shape === "circle" && "rounded-full",
+        className
+      ),
+      ...props,
+      children: !icon || React.isValidElement(icon) ? icon : /* @__PURE__ */ jsx(IconGlyph, { glyph: icon, "aria-hidden": "true" })
+    }
+  )
+);
+GlyphButton.displayName = "GlyphButton";
+
+export {
+  GlyphButton
+};