kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-S2ICIIH2.js

@@ -0,0 +1,109 @@
+"use client";
+import {
+  SwapBadge
+} from "./chunk-AP7Q2FCS.js";
+import {
+  cardSurface
+} from "./chunk-GZZ5KVON.js";
+import {
+  TransactionCard
+} from "./chunk-2NCH2ZDU.js";
+import {
+  EmptyState
+} from "./chunk-UZ4LWR4X.js";
+import {
+  ErrorCard,
+  LoadingCard
+} from "./chunk-A3XHFJ6J.js";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  NetworkBadge
+} from "./chunk-IV6AAVUE.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-SJNOBBU5.js

@@ -0,0 +1,86 @@
+"use client";
+import {
+  Input
+} from "./chunk-5GBURTY4.js";
+import {
+  Label
+} from "./chunk-H3GYLFHP.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Refresh
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/date-range-filter.tsx
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DateRangeFilter({
+  value,
+  onChange,
+  onRefresh,
+  isRefreshing = false,
+  fromLabel = "From",
+  toLabel = "To",
+  clearLabel = "Clear",
+  refreshLabel = "Refresh",
+  showClear = true,
+  className
+}) {
+  const id = useId().replace(/:/g, "");
+  const empty = !value.from && !value.to;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "date-range-filter", className: cn("flex flex-wrap items-end gap-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-36 flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-from`, children: fromLabel }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${id}-from`,
+          type: "date",
+          value: value.from,
+          max: value.to || void 0,
+          onChange: (event) => onChange({ ...value, from: event.target.value })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-36 flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-to`, children: toLabel }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${id}-to`,
+          type: "date",
+          value: value.to,
+          min: value.from || void 0,
+          onChange: (event) => onChange({ ...value, to: event.target.value })
+        }
+      )
+    ] }),
+    showClear && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", disabled: empty, onClick: () => onChange({ from: "", to: "" }), children: clearLabel }),
+    onRefresh && /* @__PURE__ */ jsx(
+      GlyphButton,
+      {
+        label: refreshLabel,
+        variant: "surface",
+        size: "lg",
+        disabled: isRefreshing,
+        "aria-busy": isRefreshing || void 0,
+        onClick: onRefresh,
+        icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Refresh, "aria-hidden": "true", className: cn(isRefreshing && "animate-spin motion-reduce:animate-none") })
+      }
+    )
+  ] });
+}
+
+export {
+  DateRangeFilter
+};

package/dist/web/chunk-STMNX3QT.js

@@ -0,0 +1,109 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/metric-card.tsx
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneClasses = {
+  primary: "bg-primary/10 text-brand",
+  purple: "bg-network-arkade/10 text-network-arkade-fg",
+  blue: "bg-info/10 text-info-fg",
+  info: "bg-info/10 text-info-fg",
+  warning: "bg-warning/10 text-warning-fg",
+  success: "bg-success/10 text-success-fg",
+  muted: "bg-secondary/15 text-secondary-content"
+};
+function MetricCard({
+  label,
+  value,
+  description,
+  icon,
+  tone = "muted",
+  size = "compact",
+  iconPlacement,
+  trend,
+  definition,
+  change,
+  className,
+  ...rest
+}) {
+  const labelId = useId();
+  const comfortable = size === "comfortable";
+  const placement = iconPlacement ?? (comfortable ? "end" : "label");
+  const hasEnd = placement === "end" || !!trend;
+  const iconBox = comfortable ? "size-9 rounded-xl shadow-raised" : placement === "end" ? "size-7 rounded-lg" : "size-5 rounded-md";
+  const iconGlyph = comfortable ? "text-icon-lg" : placement === "end" ? "text-icon-md" : "text-icon-xs";
+  const iconNode = icon ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "metric-card-icon",
+      className: cn(
+        "flex shrink-0 items-center justify-center",
+        iconBox,
+        toneClasses[tone]
+      ),
+      children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconGlyph }) : icon
+    }
+  ) : null;
+  const labelNode = /* @__PURE__ */ jsx("span", { id: labelId, "data-slot": "metric-card-label", className: cn(eyebrow, "text-muted-foreground"), children: label });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-labelledby": rest["aria-label"] ? void 0 : labelId,
+      "data-slot": "metric-card",
+      "data-size": size,
+      className: cn(
+        comfortable ? "rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-4 shadow-card" : "rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-2.5 shadow-raised",
+        hasEnd ? "flex items-stretch justify-between gap-3" : "space-y-1",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: hasEnd ? "min-w-0 flex-1 space-y-1" : "contents", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            placement === "label" && iconNode,
+            labelNode
+          ] }),
+          definition && /* @__PURE__ */ jsx("p", { "data-slot": "metric-card-definition", className: "m-0 text-caption text-muted-foreground", children: definition }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-slot": "metric-card-value",
+              className: cn(
+                "m-0 font-bold tabular-nums text-foreground",
+                comfortable ? "text-headline" : "text-body"
+              ),
+              children: value
+            }
+          ),
+          change && /* @__PURE__ */ jsx("p", { "data-slot": "metric-card-change", className: cn("m-0 tabular-nums text-foreground", comfortable ? "text-caption" : "text-xxs"), children: change }),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-slot": "metric-card-description",
+              className: cn("m-0 text-muted-foreground", comfortable ? "text-caption" : "text-xxs"),
+              children: description
+            }
+          )
+        ] }),
+        hasEnd && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col items-end justify-between gap-2", children: [
+          placement === "end" && iconNode,
+          trend && /* @__PURE__ */ jsx("div", { "data-slot": "metric-card-trend", className: "min-h-0 flex-1", children: trend })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  MetricCard
+};

package/dist/web/chunk-T7CEJV6P.js

@@ -0,0 +1,66 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/settings-section-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsSectionCard({
+  icon,
+  title,
+  description,
+  badge,
+  children,
+  className,
+  bodyClassName
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-4 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-4 shadow-card-secondary", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-body font-bold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-caption text-muted-foreground", children: description })
+        ] })
+      ] }),
+      badge
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: bodyClassName, children })
+  ] });
+}
+var badgeToneClass = {
+  primary: "bg-primary/10 text-brand",
+  info: "bg-secondary/15 text-secondary-content",
+  warning: "bg-warning/10 text-warning-fg",
+  danger: "bg-danger/10 text-danger-fg",
+  success: "bg-success/10 text-success-fg",
+  // Theme tokens, not white alphas: on the light theme a white-on-white badge
+  // disappears. On dark these resolve to the same 7% / 55% white.
+  muted: "bg-foreground/[0.07] text-muted-foreground",
+  secondary: "bg-secondary/10 text-secondary-content",
+  // The one badge that is its edge, like the outline Button.
+  outline: "border border-border bg-transparent text-foreground"
+};
+function ToneBadge({ children, tone = "muted", case: letterCase = "upper", className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "tone-badge",
+      className: cn(
+        "rounded-full px-2.5 py-1",
+        letterCase === "upper" ? eyebrow : "text-caption font-semibold tabular-nums",
+        badgeToneClass[tone],
+        className
+      ),
+      children
+    }
+  );
+}
+
+export {
+  SettingsSectionCard,
+  ToneBadge
+};

package/dist/web/chunk-TBEKRQGW.js

@@ -0,0 +1,99 @@
+"use client";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-LZ723UCB.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Refresh
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/confirm-dialog.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  busy = false,
+  confirmDisabled = false,
+  onConfirm,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { "data-slot": "confirm-dialog", className, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      description && /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    children,
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", disabled: busy, onClick: () => onOpenChange(false), children: cancelLabel }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: destructive ? "destructive" : "default",
+          disabled: confirmDisabled,
+          "aria-busy": busy || void 0,
+          onClick: () => {
+            if (!busy) onConfirm();
+          },
+          children: [
+            busy && /* @__PURE__ */ jsx(IconGlyph, { glyph: Refresh, className: "animate-spin text-icon-md motion-reduce:animate-none" }),
+            confirmLabel
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+function useDiscardGuard({
+  dirty,
+  onClose,
+  title = "Discard what you entered?",
+  description = "You have unsaved input. If you close this now, it is lost.",
+  keepLabel = "Keep editing",
+  discardLabel = "Discard"
+}) {
+  const [asking, setAsking] = useState(false);
+  const request = () => {
+    if (dirty) setAsking(true);
+    else onClose();
+  };
+  const confirm = /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      open: asking,
+      onOpenChange: setAsking,
+      title,
+      description,
+      cancelLabel: keepLabel,
+      confirmLabel: discardLabel,
+      destructive: true,
+      onConfirm: () => {
+        setAsking(false);
+        onClose();
+      }
+    }
+  );
+  return { request, confirm };
+}
+
+export {
+  ConfirmDialog,
+  useDiscardGuard
+};

package/dist/web/chunk-TCFHH5TE.js

@@ -0,0 +1,179 @@
+"use client";
+import {
+  HorizontalScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  ArrowDownward,
+  ArrowUpward,
+  SwapVert
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/table.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultRowCountLabel = (shown, total) => {
+  const of = total ?? shown;
+  return `${shown} of ${of} ${of === 1 ? "row" : "rows"}`;
+};
+function countBodyRows(children) {
+  let count = 0;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    const type = child.type;
+    if (child.type === TableBody || type.displayName === "TableBody") {
+      React.Children.forEach(child.props.children, (row) => {
+        if (React.isValidElement(row)) count += 1;
+      });
+    }
+  });
+  return count;
+}
+var Table = React.forwardRef(
+  ({ className, children, showRowCount = false, totalRowCount, rowCountLabel = defaultRowCountLabel, ...props }, ref) => {
+    const table = /* @__PURE__ */ jsx(HorizontalScrollArea, { className: "w-full", viewportProps: { "data-slot": "table-scroll" }, children: /* @__PURE__ */ jsx(
+      "table",
+      {
+        ref,
+        "data-slot": "table",
+        className: cn("w-full caption-bottom border-collapse text-caption", className),
+        ...props,
+        children
+      }
+    ) });
+    if (!showRowCount) return table;
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "table-with-count", className: "min-w-0", children: [
+      table,
+      /* @__PURE__ */ jsx("p", { "data-slot": "table-row-count", "aria-live": "polite", className: "m-0 px-4 pt-3 text-caption text-muted-foreground tabular-nums", children: rowCountLabel(countBodyRows(children), totalRowCount) })
+    ] });
+  }
+);
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    "data-slot": "table-header",
+    className: cn("[&_tr]:border-b [&_tr]:border-border [&_tr]:hover:bg-transparent", className),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    "data-slot": "table-body",
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    "data-slot": "table-footer",
+    className: cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      "data-slot": "table-row",
+      className: cn(
+        // Selected by `aria-selected="true"` (a selectable grid row) or
+        // `data-state="selected"` (a row the consumer marks itself).
+        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted aria-selected:bg-muted",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var ariaSort = { asc: "ascending", desc: "descending", none: "none" };
+var TableHead = React.forwardRef(
+  ({ className, sortable, sortDirection = "none", onSort, children, ...props }, ref) => {
+    const sortIcon = sortDirection === "asc" ? ArrowUpward : sortDirection === "desc" ? ArrowDownward : SwapVert;
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref,
+        "data-slot": "table-head",
+        "aria-sort": sortable ? ariaSort[sortDirection] : void 0,
+        className: cn(
+          "whitespace-nowrap px-4 py-3 text-left align-middle text-muted-foreground [&:has([role=checkbox])]:pr-0",
+          eyebrow,
+          className
+        ),
+        ...props,
+        children: sortable ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "xs",
+            "data-slot": "table-sort",
+            onClick: onSort,
+            className: cn(
+              "-ml-2 uppercase tracking-eyebrow font-medium text-mini text-muted-foreground",
+              sortDirection !== "none" && "text-foreground"
+            ),
+            children: [
+              children,
+              /* @__PURE__ */ jsx(IconGlyph, { glyph: sortIcon, size: "sm" })
+            ]
+          }
+        ) : children
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    "data-slot": "table-cell",
+    className: cn("px-4 py-3 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    "data-slot": "table-caption",
+    className: cn("mt-4 text-caption text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption
+};

package/dist/web/chunk-TI7NWMEQ.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/environment-indicator.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function EnvironmentIndicator({ name, qualifier, isTest, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      "data-slot": "environment-indicator",
+      "data-environment": isTest ? "test" : "live",
+      className: cn(
+        "inline-flex shrink-0 items-center gap-2 rounded-full px-3 py-1",
+        isTest ? "bg-warning/10 text-warning-fg" : "bg-success/10 text-success-fg",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-caption font-semibold", children: name }),
+        /* @__PURE__ */ jsx("span", { className: cn(eyebrow, "text-caption"), children: qualifier })
+      ]
+    }
+  );
+}
+
+export {
+  EnvironmentIndicator
+};

package/dist/web/chunk-TKRMGN7J.js

@@ -0,0 +1,8 @@
+"use client";
+
+// src/web/utils/field-styles.ts
+var fieldSurface = "rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-inner ring-1 ring-inset ring-secondary/15 transition-all placeholder:text-muted-foreground hover:ring-secondary/35 focus-visible:outline-none focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:ring-secondary/15";
+
+export {
+  fieldSurface
+};