kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-4QLR4ZNK.js

@@ -0,0 +1,383 @@
+"use client";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  AlertBanner
+} from "./chunk-ZTVV4KBT.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  NostrNetworkIcon,
+  RgbNetworkIcon
+} from "./chunk-LYCLVP26.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  ArrowBack,
+  ChevronRight,
+  ExpandLess,
+  ExpandMore,
+  SwapHoriz
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/account-settings-shared.tsx
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SUPPORTED_ACCOUNT_NETWORKS = {
+  RGB: ["regtest", "testnet", "signet"],
+  SPARK: ["regtest", "mainnet"],
+  ARKADE: ["signet", "mainnet"],
+  // Nostr is network-agnostic; mainnet is the placeholder consumers pass
+  // (the network chip is typically hidden for NOSTR rows anyway).
+  NOSTR: ["mainnet"]
+};
+function getAccountNetworkLabel(network) {
+  switch (network) {
+    case "mainnet":
+      return "Mainnet";
+    case "testnet":
+      return "Testnet";
+    case "regtest":
+      return "Regtest";
+    case "signet":
+      return "Signet";
+  }
+}
+function getAccountNetworkUi(network) {
+  const label = getAccountNetworkLabel(network);
+  if (network === "mainnet") {
+    return {
+      label,
+      badgeClassName: "bg-success/12 text-success-fg",
+      bannerClassName: "bg-success/10 text-success-fg"
+    };
+  }
+  if (network === "regtest") {
+    return {
+      label,
+      badgeClassName: "bg-danger/12 text-danger-fg",
+      bannerClassName: "bg-danger/10 text-danger-fg"
+    };
+  }
+  return {
+    label,
+    badgeClassName: "bg-warning/12 text-warning-fg",
+    bannerClassName: "bg-warning/10 text-warning-fg"
+  };
+}
+function AccountHeaderIcons({ accountId }) {
+  if (accountId === "RGB") {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/15 shadow-raised", children: /* @__PURE__ */ jsx(RgbNetworkIcon, { className: "size-5" }) });
+  }
+  if (accountId === "SPARK") {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-info/10 shadow-raised", children: /* @__PURE__ */ jsx("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", alt: "Spark", className: "kui-mono-icon size-5 object-contain" }) });
+  }
+  if (accountId === "NOSTR") {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-network-arkade/10 shadow-raised", children: /* @__PURE__ */ jsx(NostrNetworkIcon, { className: "size-5" }) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-network-arkade/10 shadow-raised", children: /* @__PURE__ */ jsx("img", { src: "/icons/arkade/arkade-icon.svg", alt: "Arkade", className: "size-5 rounded-sm object-contain" }) });
+}
+function getAccountStatusUi(status) {
+  switch (status) {
+    case "ready":
+      return {
+        label: "Ready",
+        className: "bg-success/10 text-success-fg"
+      };
+    case "offline":
+      return {
+        label: "Offline",
+        className: "bg-warning/10 text-warning-fg"
+      };
+    default:
+      return {
+        label: "Optional",
+        className: "bg-secondary/15 text-secondary-content"
+      };
+  }
+}
+function AccountNetworkSelector({
+  accountId,
+  value,
+  onChange,
+  disabled = false
+}) {
+  const networks = SUPPORTED_ACCOUNT_NETWORKS[accountId];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": "Network",
+      className: cn(
+        "grid auto-cols-fr grid-flow-col gap-1 rounded-2xl bg-muted p-1 shadow-inner",
+        disabled && "opacity-60"
+      ),
+      children: networks.map((network) => {
+        const ui = getAccountNetworkUi(network);
+        const selected = value === network;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": selected,
+            disabled,
+            onClick: () => onChange(network),
+            className: cn(
+              "rounded-xl px-3 py-2.5 transition-all",
+              eyebrow,
+              selected ? `${ui.badgeClassName} shadow-raised` : "text-muted-foreground hover-gradient-violet hover:text-secondary-content"
+            ),
+            children: ui.label
+          },
+          network
+        );
+      })
+    }
+  );
+}
+function AccountNetworkPicker({
+  accountId,
+  current,
+  onSave
+}) {
+  const [draft, setDraft] = useState(current);
+  const [isSaving, setIsSaving] = useState(false);
+  useEffect(() => {
+    setDraft(current);
+  }, [current]);
+  const isDirty = draft !== current;
+  const handleSave = async () => {
+    if (!isDirty) return;
+    setIsSaving(true);
+    try {
+      await onSave(draft);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      AccountNetworkSelector,
+      {
+        accountId,
+        value: draft,
+        onChange: setDraft,
+        disabled: isSaving
+      }
+    ),
+    isDirty && /* @__PURE__ */ jsx(Button, { variant: "cta", size: "sm", onClick: handleSave, disabled: isSaving, children: isSaving ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "mr-2 h-4 w-4 animate-spin rounded-full border-2 border-background/30 border-t-background" }),
+      "Reconnecting..."
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Save - Switch to ",
+      getAccountNetworkLabel(draft)
+    ] }) })
+  ] });
+}
+function AccountSettingsShell({
+  accountId,
+  title,
+  subtitle,
+  children,
+  onBack
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col overflow-hidden bg-background font-display text-foreground", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex h-14 shrink-0 items-center gap-2 px-2", children: [
+      onBack && /* @__PURE__ */ jsx(GlyphButton, { icon: ArrowBack, label: "Go back", size: "lg", onClick: onBack }),
+      /* @__PURE__ */ jsx(AccountHeaderIcons, { accountId }),
+      /* @__PURE__ */ jsx("h1", { className: "text-subhead font-bold text-foreground", children: title })
+    ] }),
+    /* @__PURE__ */ jsxs(ScrollArea, { className: "flex-1", viewportAs: "main", viewportClassName: "space-y-6 px-5 pb-28 pt-2", children: [
+      subtitle && /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: subtitle }),
+      children
+    ] })
+  ] });
+}
+function AccountInfoGrid({ items }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "rounded-xl kui-well p-3 text-caption", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: item.label }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 break-words text-foreground/90", children: item.value })
+  ] }, item.label)) });
+}
+function AccountNotice({
+  tone = "default",
+  children
+}) {
+  return /* @__PURE__ */ jsx(AlertBanner, { variant: tone === "warning" ? "warning" : "info", children });
+}
+function AccountNetworkNotice({
+  network,
+  children
+}) {
+  const variant = network === "mainnet" ? "success" : network === "regtest" ? "error" : "warning";
+  return /* @__PURE__ */ jsx(AlertBanner, { variant, children });
+}
+function AccountStatusPills({
+  status,
+  network,
+  hideNetworkChip = false
+}) {
+  const statusUi = getAccountStatusUi(status);
+  const networkUi = getAccountNetworkUi(network);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "rounded-full px-2.5 py-1",
+          eyebrow,
+          statusUi.className
+        ),
+        children: statusUi.label === "Ready" ? "Connected" : statusUi.label
+      }
+    ),
+    !hideNetworkChip && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "rounded-full px-2.5 py-1",
+          eyebrow,
+          networkUi.badgeClassName
+        ),
+        children: networkUi.label
+      }
+    )
+  ] });
+}
+function SectionTitle({ children }) {
+  return /* @__PURE__ */ jsx("h3", { className: cn("text-muted-foreground", eyebrow), children });
+}
+function InlineAction({
+  title,
+  description,
+  accent = "primary",
+  onClick
+}) {
+  const className = accent === "purple" ? "bg-network-arkade/10 text-network-arkade-fg hover:bg-network-arkade/15" : accent === "blue" ? "bg-info/10 text-info-fg hover:bg-info/15" : "bg-primary/10 text-brand hover:bg-primary/15";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex w-full items-center justify-between rounded-xl px-3 py-3 text-left shadow-raised transition-all",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-body font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-caption text-muted-foreground", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(IconGlyph, { glyph: ChevronRight, className: "text-icon-lg" })
+      ]
+    }
+  );
+}
+function TransferRouteCard({
+  label,
+  summary,
+  eta,
+  feeHint,
+  account
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-4 shadow-card-secondary", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+      account ? /* @__PURE__ */ jsx(AccountHeaderIcons, { accountId: account }) : /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: SwapHoriz, size: "sm" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-body font-bold text-foreground", children: label }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-caption text-muted-foreground", children: summary })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: eta }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-tiny text-brand", children: feeHint })
+    ] })
+  ] }) });
+}
+function ExpandIcon({ expanded }) {
+  return /* @__PURE__ */ jsx(IconGlyph, { glyph: expanded ? ExpandLess : ExpandMore, size: "md" });
+}
+var ACCOUNT_ACCENT_BG = {
+  RGB: "bg-gradient-to-br from-primary/[0.06] via-card/70 to-primary/[0.10]",
+  SPARK: "bg-gradient-to-br from-info/[0.06] via-card/70 to-info/[0.10]",
+  ARKADE: "bg-gradient-to-br from-network-arkade/[0.06] via-card/70 to-network-arkade/[0.10]",
+  NOSTR: "bg-gradient-to-br from-network-arkade/[0.06] via-card/70 to-network-arkade/[0.10]"
+};
+function AccountSettingsRow({
+  accountId,
+  title,
+  status,
+  network,
+  description,
+  onClick,
+  hideNetworkChip = false,
+  accent = false,
+  beta = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "group w-full rounded-2xl p-4 text-left shadow-card-secondary transition-all duration-200 hover:-translate-y-0.5 hover:shadow-card-hover-soft",
+        accent ? ACCOUNT_ACCENT_BG[accountId] : "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card"
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(AccountHeaderIcons, { accountId }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-body font-bold text-foreground", children: title }),
+                beta && /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-warning/15 px-1.5 py-0.5 text-warning-fg", eyebrow), children: "Beta" })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "mt-1 text-caption text-muted-foreground", children: description })
+            ] }),
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: ChevronRight, size: "sm", className: "text-muted-foreground transition-colors group-hover:text-secondary-content" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
+            AccountStatusPills,
+            {
+              status,
+              network,
+              hideNetworkChip
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+
+export {
+  getAccountNetworkLabel,
+  getAccountNetworkUi,
+  AccountHeaderIcons,
+  getAccountStatusUi,
+  AccountNetworkSelector,
+  AccountNetworkPicker,
+  AccountSettingsShell,
+  AccountInfoGrid,
+  AccountNotice,
+  AccountNetworkNotice,
+  AccountStatusPills,
+  SectionTitle,
+  InlineAction,
+  TransferRouteCard,
+  ExpandIcon,
+  AccountSettingsRow
+};

package/dist/web/chunk-4UMKXXAK.js

@@ -0,0 +1,33 @@
+"use client";
+import {
+  Label
+} from "./chunk-H3GYLFHP.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/form-field.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormField({ label, children, id: idProp, hint, error, className }) {
+  const generated = React.useId();
+  const id = idProp ?? children.props.id ?? `field-${generated.replace(/:/g, "")}`;
+  const hintId = hint ? `${id}-hint` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const describedBy = [children.props["aria-describedby"], hintId, errorId].filter(Boolean).join(" ") || void 0;
+  const control = React.cloneElement(children, {
+    id,
+    "aria-describedby": describedBy,
+    ...error ? { "aria-invalid": true } : {}
+  });
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "form-field", className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
+    control,
+    hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "m-0 text-caption text-muted-foreground", children: hint }),
+    error && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "m-0 text-caption text-danger-fg", children: error })
+  ] });
+}
+
+export {
+  FormField
+};

package/dist/web/chunk-563GMWFT.js

@@ -0,0 +1,32 @@
+"use client";
+import {
+  TooltipBubble
+} from "./chunk-YQDCU7ZL.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/restricted.tsx
+import { cloneElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Restricted({ reason, children, placement = "bottom", className }) {
+  const id = useId();
+  if (!reason) return children;
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "restricted", className: cn("group/tooltip relative inline-flex", className), children: [
+    cloneElement(children, {
+      "aria-disabled": true,
+      "aria-describedby": id,
+      className: cn(children.props.className, "cursor-not-allowed opacity-50"),
+      // Activation does nothing: no dialog opens and no form submits.
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }),
+    /* @__PURE__ */ jsx(TooltipBubble, { id, placement, children: reason })
+  ] });
+}
+
+export {
+  Restricted
+};

package/dist/web/chunk-5BNDC7M4.js

@@ -0,0 +1,50 @@
+"use client";
+import {
+  DateRangeFilter
+} from "./chunk-SJNOBBU5.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-6VKWG5FJ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/period-select.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PeriodSelect({
+  options,
+  period,
+  onPeriodChange,
+  customId = "custom",
+  range = { from: "", to: "" },
+  onRangeChange,
+  label = "Period",
+  fromLabel,
+  toLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "period-select", className: cn("flex min-w-0 flex-wrap items-end gap-3", className), children: [
+    /* @__PURE__ */ jsxs(Select, { value: period, onValueChange: (next) => onPeriodChange(next), children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full sm:w-[200px]", "aria-label": label, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
+    ] }),
+    period === customId && onRangeChange && /* @__PURE__ */ jsx(
+      DateRangeFilter,
+      {
+        value: range,
+        onChange: onRangeChange,
+        fromLabel,
+        toLabel,
+        showClear: false
+      }
+    )
+  ] });
+}
+
+export {
+  PeriodSelect
+};

package/dist/web/chunk-5GBURTY4.js

@@ -0,0 +1,33 @@
+"use client";
+import {
+  fieldSurface
+} from "./chunk-TKRMGN7J.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/input.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-12 w-full px-4 py-3 text-body file:border-0 file:bg-transparent file:text-caption file:font-medium",
+          fieldSurface,
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export {
+  Input
+};

package/dist/web/chunk-5MM5YGGG.js

@@ -0,0 +1,43 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/skeleton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneClass = {
+  primary: "bg-secondary/15",
+  secondary: "bg-secondary/10",
+  card: "bg-secondary/[0.08]"
+};
+function Skeleton({ className, tone = "primary" }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("animate-pulse rounded", toneClass[tone], className) });
+}
+function ListSkeletonRows({ rows = 3, className, rowClassName }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-4 shadow-card animate-pulse",
+        rowClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "size-10 shrink-0 rounded-xl" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-28" }),
+          /* @__PURE__ */ jsx(Skeleton, { tone: "secondary", className: "h-2.5 w-20" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-14" }),
+          /* @__PURE__ */ jsx(Skeleton, { tone: "secondary", className: "h-2 w-10" })
+        ] })
+      ]
+    },
+    index
+  )) });
+}
+
+export {
+  Skeleton,
+  ListSkeletonRows
+};

package/dist/web/chunk-5PZ2XVWL.js

@@ -0,0 +1,85 @@
+"use client";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Add,
+  Remove
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/stepper-number-input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function StepperNumberInput({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  disabled,
+  className,
+  inputClassName,
+  ariaLabel
+}) {
+  const clamp = (next) => {
+    const boundedMin = min === void 0 ? next : Math.max(min, next);
+    const bounded = max === void 0 ? boundedMin : Math.min(max, boundedMin);
+    onChange(Number.isFinite(bounded) ? bounded : min ?? 0);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1.5 overflow-hidden rounded-lg border border-border bg-foreground/5 shadow-inner transition-shadow focus-within:ring-1 focus-within:ring-primary/50 focus-within:shadow-glow-primary-soft",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "px-3 py-1.5 text-secondary-content transition-colors hover-gradient-violet hover:text-foreground disabled:opacity-30",
+            disabled: disabled || min !== void 0 && value <= min,
+            onClick: () => clamp(value - step),
+            "aria-label": "Decrease",
+            children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Remove, className: "text-icon-md" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min,
+            max,
+            step,
+            value,
+            disabled,
+            "aria-label": ariaLabel,
+            onChange: (event) => clamp(Number(event.target.value)),
+            className: cn(
+              "min-w-0 flex-1 bg-transparent text-center text-body font-bold text-foreground focus:outline-none",
+              inputClassName
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "px-3 py-1.5 text-secondary-content transition-colors hover-gradient-violet hover:text-foreground disabled:opacity-30",
+            disabled: disabled || max !== void 0 && value >= max,
+            onClick: () => clamp(value + step),
+            "aria-label": "Increase",
+            children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Add, className: "text-icon-md" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  StepperNumberInput
+};