kaleido-ui 0.2.2 → 0.2.4

package/dist/web/chunk-YNB4SSLD.js

@@ -0,0 +1,113 @@
+"use client";
+import {
+  COPY_FAILED_MESSAGE
+} from "./chunk-QCQRA6L5.js";
+import {
+  useCopyToClipboard
+} from "./chunk-BGUBHWIO.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check,
+  ContentCopy,
+  Visibility,
+  VisibilityOff
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/recovery-phrase-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function RecoveryPhraseCard({
+  words,
+  revealed = false,
+  onRevealChange,
+  copyValue,
+  copyLabel = "Copy to clipboard",
+  copiedLabel = "Copied",
+  copyFailedMessage = COPY_FAILED_MESSAGE,
+  onCopy,
+  title = "Recovery Phrase",
+  emptyMessage = "Recovery phrase is not available yet.",
+  className
+}) {
+  const hasWords = words.length > 0;
+  const clipboard = useCopyToClipboard();
+  const selfCopy = !onCopy && copyValue !== void 0;
+  const handleCopy = onCopy ?? (selfCopy ? () => void clipboard.copy(copyValue) : void 0);
+  const copied = selfCopy && clipboard.state === "copied";
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-0.5", children: [
+      /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: title }),
+      hasWords && revealed && onRevealChange && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "surface",
+          size: "xs",
+          onClick: () => onRevealChange(!revealed),
+          children: [
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: VisibilityOff, className: "text-icon-md" }),
+            "Hide"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      hasWords ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-3 gap-2 transition-all duration-300",
+            !revealed && "pointer-events-none select-none blur-sm"
+          ),
+          children: words.map((word, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-xl bg-card bg-gradient-card px-3 py-2.5 shadow-raised", children: [
+            /* @__PURE__ */ jsx("span", { className: "w-4 shrink-0 text-caption font-bold text-secondary-content", children: index + 1 }),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-body text-foreground", children: word })
+          ] }, `${index}-${word}`))
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "rounded-xl bg-warning/10 px-4 py-3 text-body text-warning-fg", children: emptyMessage }),
+      hasWords && !revealed && onRevealChange && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "surface",
+          size: "sm",
+          onClick: () => onRevealChange(true),
+          children: [
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: Visibility, className: "text-icon-lg" }),
+            "Tap to reveal"
+          ]
+        }
+      ) })
+    ] }),
+    hasWords && revealed && handleCopy && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "surface",
+        size: "lg",
+        onClick: handleCopy,
+        className: cn("w-full", copied && "bg-primary/10 bg-gradient-active text-brand ring-primary/40 hover:ring-primary/50"),
+        children: [
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: copied ? Check : ContentCopy, className: "text-icon-lg" }),
+          copied ? copiedLabel : copyLabel
+        ]
+      }
+    ),
+    selfCopy && clipboard.state === "failed" && /* @__PURE__ */ jsx("p", { role: "alert", className: "m-0 text-caption text-danger-fg", children: copyFailedMessage }),
+    selfCopy && /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? copiedLabel : "" })
+  ] });
+}
+
+export {
+  RecoveryPhraseCard
+};

package/dist/web/chunk-YQDCU7ZL.js

@@ -0,0 +1,49 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/tooltip.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var placementClasses = {
+  top: "bottom-full left-1/2 mb-2 -translate-x-1/2",
+  bottom: "left-1/2 top-full mt-2 -translate-x-1/2",
+  right: "left-full top-1/2 ml-3 -translate-y-1/2"
+};
+var TooltipBubble = React.forwardRef(
+  ({ id, placement = "bottom", className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      id,
+      role: "tooltip",
+      "data-slot": "tooltip",
+      className: cn(
+        "pointer-events-none absolute z-50 hidden w-max max-w-[16rem] rounded-lg bg-popover px-3 py-2 text-caption font-normal normal-case tracking-normal text-popover-foreground shadow-popover",
+        "group-hover/tooltip:block group-focus-within/tooltip:block",
+        placementClasses[placement],
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+TooltipBubble.displayName = "TooltipBubble";
+function Tooltip({ content, children, placement = "bottom", className, bubbleClassName }) {
+  const id = React.useId();
+  const childProps = children.props;
+  return /* @__PURE__ */ jsxs("span", { className: cn("group/tooltip relative inline-flex", className), children: [
+    React.cloneElement(children, {
+      "aria-describedby": cn(childProps["aria-describedby"], id)
+    }),
+    /* @__PURE__ */ jsx(TooltipBubble, { id, placement, className: bubbleClassName, children: content })
+  ] });
+}
+Tooltip.displayName = "Tooltip";
+
+export {
+  TooltipBubble,
+  Tooltip
+};

package/dist/web/chunk-YQQ7GDLZ.js

@@ -0,0 +1,30 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/icon-glyph.tsx
+import { jsx } from "react/jsx-runtime";
+var sizeClasses = {
+  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 IconGlyph({ glyph: Glyph, size, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Glyph,
+    {
+      width: "1em",
+      height: "1em",
+      className: cn("inline-block shrink-0", size && sizeClasses[size], className),
+      ...props
+    }
+  );
+}
+
+export {
+  IconGlyph
+};

package/dist/web/chunk-YTXWYWVD.js

@@ -0,0 +1,70 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  isIconName
+} from "./chunk-VYQHGSK6.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  ChevronRight
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/setting-item.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingItem({
+  icon,
+  iconSrc,
+  iconAlt,
+  title,
+  description,
+  value,
+  onClick,
+  showChevron = true,
+  className,
+  iconColor = "text-secondary-content"
+}) {
+  const isClickable = !!onClick;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "p-5 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card-secondary transition-all duration-200 group",
+        isClickable && "cursor-pointer hover:shadow-card-hover-soft hover:-translate-y-0.5 active:scale-[0.98]",
+        className
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+          (icon || iconSrc) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex-shrink-0 size-10 rounded-xl flex items-center justify-center bg-secondary/15 group-hover-gradient-violet group-hover:shadow-glow-violet-faint group-hover:scale-105 transition-all",
+                iconColor
+              ),
+              children: iconSrc ? /* @__PURE__ */ jsx("img", { src: iconSrc, alt: iconAlt ?? title, className: "size-5 object-contain" }) : isIconName(icon) ? /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-icon-xl" }) : typeof icon === "string" ? null : icon
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-bold text-body text-foreground tracking-wide", children: title }),
+            description && /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground mt-0.5 font-medium", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+          value && /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground font-mono", children: value }),
+          showChevron && isClickable && /* @__PURE__ */ jsx(IconGlyph, { glyph: ChevronRight, className: "text-icon-md text-muted-foreground group-hover:scale-110 group-hover:text-secondary-content transition-all" })
+        ] })
+      ] })
+    }
+  );
+}
+
+export {
+  SettingItem
+};

package/dist/web/chunk-YXVOFEDT.js

@@ -0,0 +1,85 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/action-tile.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ActionTile({
+  icon,
+  label,
+  onClick,
+  disabled = false,
+  className,
+  ariaLabel,
+  "data-testid": dataTestId,
+  href,
+  target,
+  rel,
+  hideLabel = false
+}) {
+  const classes = cn(
+    "group relative inline-flex h-10 items-center justify-center gap-1.5 overflow-hidden rounded-xl",
+    hideLabel ? "w-10 shrink-0" : "flex-1 px-2.5",
+    // Icon and label are both the brand green, and flip together to the
+    // ink on green when the hover fill shows.
+    "bg-foreground/8 bg-gradient-surface text-brand shadow-raised transition-all duration-200",
+    // On light, a neutral grey that leans slightly violet toward the bottom
+    // right: the ink at low alpha under a faint secondary wash. Important: the
+    // dark surface gradient class is unlayered and would win otherwise.
+    "[.light_&]:bg-foreground/[0.05] [.light_&]:!bg-gradient-to-br [.light_&]:from-transparent [.light_&]:to-secondary/[0.08]",
+    "hover:-translate-y-0.5 hover:text-primary-foreground hover:shadow-glow-primary-soft",
+    // The light glow is a 3px ring, which reads as a second border around the
+    // green fill: on light the tile keeps its own shadow instead.
+    "[.light_&]:hover:shadow-raised",
+    "active:translate-y-0 active:scale-95 disabled:pointer-events-none disabled:opacity-50",
+    // A link has no disabled state of its own.
+    href && disabled && "pointer-events-none opacity-50",
+    className
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute inset-0 bg-primary bg-gradient-primary opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "relative flex shrink-0 items-center justify-center text-current leading-none [&_svg]:size-icon-sm", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: cn("relative truncate text-caption font-bold leading-none tracking-wide", hideLabel && "sr-only"), children: label })
+  ] });
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: disabled ? void 0 : href,
+        target,
+        rel,
+        onClick,
+        "aria-label": ariaLabel ?? label,
+        "aria-disabled": disabled || void 0,
+        title: hideLabel ? label : void 0,
+        "data-testid": dataTestId,
+        className: classes,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-label": ariaLabel ?? label,
+      title: hideLabel ? label : void 0,
+      "data-testid": dataTestId,
+      className: classes,
+      children: content
+    }
+  );
+}
+
+export {
+  ActionTile
+};

package/dist/web/chunk-Z2SS7UJ4.js

@@ -0,0 +1,139 @@
+"use client";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Search
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/inline-selector.tsx
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InlineSelector({
+  label,
+  value,
+  options,
+  onChange,
+  disabled = false,
+  className,
+  triggerClassName,
+  panelClassName,
+  optionClassName,
+  scrollClassName,
+  scrollViewportClassName,
+  closeOnSelect = true,
+  onOpenPanelHeightChange,
+  renderTrigger,
+  renderPanelHeader,
+  renderOption
+}) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef(null);
+  const panelRef = useRef(null);
+  const onOpenPanelHeightChangeRef = useRef(onOpenPanelHeightChange);
+  const selected = options.find((option) => option.id === value);
+  const renderArgs = { open, selected, disabled };
+  useEffect(() => {
+    onOpenPanelHeightChangeRef.current = onOpenPanelHeightChange;
+  }, [onOpenPanelHeightChange]);
+  useLayoutEffect(() => {
+    if (!onOpenPanelHeightChangeRef.current) return;
+    if (!open) {
+      onOpenPanelHeightChangeRef.current(0);
+      return;
+    }
+    const panel = panelRef.current;
+    if (!panel) return;
+    const reportHeight = () => {
+      onOpenPanelHeightChangeRef.current?.(Math.ceil(panel.getBoundingClientRect().height + 12));
+    };
+    reportHeight();
+    const resizeObserver = new ResizeObserver(reportHeight);
+    resizeObserver.observe(panel);
+    return () => {
+      resizeObserver.disconnect();
+      onOpenPanelHeightChangeRef.current?.(0);
+    };
+  }, [open, options.length]);
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (event) => {
+      const root = rootRef.current;
+      if (!root || root.contains(event.target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative min-w-0", className), children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": label,
+        "aria-expanded": open,
+        onClick: () => !disabled && setOpen((current) => !current),
+        className: cn(
+          "w-full outline-none transition-all disabled:cursor-not-allowed disabled:opacity-50",
+          triggerClassName
+        ),
+        children: renderTrigger(renderArgs)
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: cn(
+          "absolute left-0 top-full z-[var(--z-popover)] mt-2 w-full rounded-2xl bg-popover/95 bg-gradient-card p-1.5 shadow-popover backdrop-blur-xl duration-200 animate-in fade-in slide-in-from-top-1",
+          panelClassName
+        ),
+        children: [
+          renderPanelHeader?.(renderArgs),
+          /* @__PURE__ */ jsx(ScrollArea, { className: cn("max-h-72", scrollClassName), viewportClassName: cn("max-h-72", scrollViewportClassName), children: /* @__PURE__ */ jsx("div", { className: "space-y-1", children: options.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-8 text-center text-caption text-foreground/55", children: [
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: Search, size: "md", className: "opacity-40" }),
+            /* @__PURE__ */ jsx("span", { children: "No results" })
+          ] }) : options.map((option) => {
+            const selectedOption = option.id === value;
+            const disabledOption = disabled || Boolean(option.disabled);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: disabledOption,
+                "data-selected": selectedOption ? "true" : void 0,
+                onClick: () => {
+                  if (disabledOption) return;
+                  onChange(option.id);
+                  if (closeOnSelect) setOpen(false);
+                },
+                className: cn(
+                  "w-full rounded-xl text-left outline-none transition-all disabled:cursor-not-allowed disabled:opacity-50",
+                  selectedOption ? "bg-primary/10 bg-gradient-active ring-1 ring-inset ring-primary/40" : "hover-gradient-violet",
+                  optionClassName
+                ),
+                children: renderOption({
+                  option,
+                  selected: selectedOption,
+                  disabled: disabledOption
+                })
+              },
+              option.id
+            );
+          }) }) })
+        ]
+      }
+    )
+  ] });
+}
+
+export {
+  InlineSelector
+};

package/dist/web/chunk-Z5LVT3BD.js

@@ -0,0 +1,128 @@
+"use client";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport
+} from "./chunk-2VAS6VYJ.js";
+import {
+  useToast
+} from "./chunk-TS4UYWJJ.js";
+import {
+  useCopyToClipboard
+} from "./chunk-BGUBHWIO.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check,
+  CheckCircle,
+  ContentCopy,
+  Error
+} from "./chunk-XXH4TYKZ.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
+};