kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-JWMFTRDC.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 {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.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-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
+};

package/dist/web/chunk-JY73M73T.js

@@ -0,0 +1,175 @@
+"use client";
+import {
+  NetworkStatusChip
+} from "./chunk-2Z6KFK4Z.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-LZ723UCB.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Settings
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/account-status-tabs.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AccountStatusDetails({
+  account,
+  onEdit
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "p-6", "data-testid": `account-status-details-${account.id}`, children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-testid": `account-status-protocol-logo-${account.id}`,
+          className: cn(
+            "flex size-16 shrink-0 items-center justify-center rounded-2xl shadow-raised",
+            account.accentBg
+          ),
+          children: account.detailIcon ?? account.icon
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", eyebrow), children: account.label }),
+          /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", account.dotTone) })
+        ] }),
+        /* @__PURE__ */ jsx(DialogTitle, { className: "mt-1 text-title font-bold text-foreground", children: account.title }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "mt-2 text-caption leading-relaxed text-muted-foreground", children: account.description })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-5 grid grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("rounded-2xl px-4 py-3 shadow-raised", account.networkBannerClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: eyebrow, children: "Network" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 break-words text-body font-semibold", children: account.networkLabel })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-2xl kui-well px-4 py-3 shadow-raised", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", eyebrow), children: "Status" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 break-words text-body font-semibold text-foreground/90", children: account.state })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-5 text-caption leading-relaxed text-muted-foreground", children: account.detail }),
+    account.details && account.details.length > 0 && /* @__PURE__ */ jsx("dl", { className: "mt-5 space-y-2 rounded-2xl kui-well px-4 py-3 shadow-inner", children: account.details.map((item) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[max-content_minmax(0,1fr)] gap-3 text-caption", children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: item.label }),
+      /* @__PURE__ */ jsx("dd", { className: "min-w-0 break-words text-right font-medium text-foreground/90", children: item.value })
+    ] }, item.label)) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", eyebrow), children: "Capabilities" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: account.capabilityBullets.map((capability) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex items-center gap-1.5 rounded-full bg-secondary/15 px-2.5 py-1 text-xxs font-medium text-secondary-content",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-primary" }),
+            capability
+          ]
+        },
+        capability
+      )) })
+    ] }),
+    onEdit && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        "data-testid": `account-status-edit-${account.id}`,
+        onClick: () => onEdit(account.id),
+        className: "mt-6 w-full bg-gradient-primary bg-primary text-primary-foreground shadow-button-primary hover:bg-primary/90",
+        children: [
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: Settings, size: "sm" }),
+          "Edit Settings"
+        ]
+      }
+    )
+  ] });
+}
+function AccountStatusTabs({
+  accounts,
+  onSelect,
+  onEdit
+}) {
+  const [selectedAccountId, setSelectedAccountId] = useState(null);
+  const selectedAccount = selectedAccountId ? accounts.find((account) => account.id === selectedAccountId) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex max-w-full flex-wrap items-center justify-end pl-3", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 px-1", children: accounts.map((account) => /* @__PURE__ */ jsxs("div", { className: "group relative shrink-0", children: [
+      /* @__PURE__ */ jsx(
+        NetworkStatusChip,
+        {
+          onClick: () => onSelect ? onSelect(account.id) : setSelectedAccountId(account.id),
+          icon: account.icon,
+          network: account.network,
+          dotClassName: account.dotTone,
+          ariaLabel: onSelect ? `Open ${account.title}` : `Open ${account.title} details`
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "pointer-events-none absolute bottom-[calc(100%+12px)] right-0 z-20 hidden w-64 rounded-2xl bg-popover/95 bg-gradient-card p-3.5 opacity-0 shadow-popover backdrop-blur-xl transition-all duration-150 group-hover:opacity-100 md:block"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "shrink-0", children: account.icon }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", eyebrow), children: account.label }),
+                  /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", account.dotTone) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "mt-1 text-body font-semibold text-foreground/90", children: account.title }),
+                /* @__PURE__ */ jsx("div", { className: "mt-1 text-caption font-medium text-muted-foreground", children: account.state })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-3 text-caption leading-relaxed text-foreground/70", children: account.detail }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-caption leading-relaxed text-muted-foreground", children: account.description }),
+            /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: account.capabilityBullets.map((capability) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "rounded-full bg-secondary/15 px-2 py-1 text-xxs font-medium text-secondary-content",
+                children: capability
+              },
+              capability
+            )) })
+          ]
+        }
+      )
+    ] }, account.id)) }) }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: selectedAccountId !== null,
+        onOpenChange: (open) => !open && setSelectedAccountId(null),
+        children: selectedAccount && /* @__PURE__ */ jsx(DialogContent, { className: "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-0 text-foreground shadow-popover", children: /* @__PURE__ */ jsx(
+          AccountStatusDetails,
+          {
+            account: selectedAccount,
+            onEdit: onEdit ? (id) => {
+              setSelectedAccountId(null);
+              onEdit(id);
+            } : void 0
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+export {
+  AccountStatusDetails,
+  AccountStatusTabs
+};

package/dist/web/chunk-JYM5NHBA.js

@@ -0,0 +1,80 @@
+"use client";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/bottom-sheet.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function BottomSheet({
+  open,
+  title,
+  icon,
+  children,
+  onClose,
+  closeOnBackdrop = true,
+  actions,
+  className,
+  contentClassName
+}) {
+  if (!open) return null;
+  const handleBackdropClick = (event) => {
+    if (closeOnBackdrop && event.target === event.currentTarget) onClose?.();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-50 flex items-end justify-center bg-background/80 backdrop-blur-lg",
+        className
+      ),
+      onClick: handleBackdropClick,
+      children: /* @__PURE__ */ jsxs(
+        ScrollArea,
+        {
+          className: cn(
+            "w-full rounded-t-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero shadow-popover ring-1 ring-inset ring-secondary/20 animate-in slide-in-from-bottom-4 duration-200",
+            contentClassName
+          ),
+          viewportClassName: "max-h-[90vh] px-4 pb-6 pt-5",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "-mt-1 flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-1 w-10 rounded-full bg-secondary/40" }) }),
+            (title || icon) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2", children: [
+              icon,
+              /* @__PURE__ */ jsx("p", { className: "text-body font-bold text-foreground", children: title })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: cn((title || icon) && "mt-3"), children }),
+            actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4 flex gap-2", children: actions.map((action, index) => /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: action.variant ?? (index === actions.length - 1 ? "cta" : "outline"),
+                size: "cta",
+                className: "flex-1",
+                onClick: action.onClick,
+                disabled: action.disabled,
+                children: [
+                  action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, className: "text-icon-md" }),
+                  action.label
+                ]
+              },
+              index
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  BottomSheet
+};