kaleido-ui 0.2.2 → 0.2.5

package/README.md

@@ -13,6 +13,7 @@ npm install kaleido-ui
 | Import | Description |
 |--------|-------------|
 | `kaleido-ui` | Web components (Tailwind CSS + Radix UI) |
+| `kaleido-ui/icons` | Every icon glyph as its own export, plus `createIcon` to build an `Icon` that ships only the glyphs you pass it |
 | `kaleido-ui/tokens` | Platform-agnostic design tokens (zero deps) |
 | `kaleido-ui/native` | React Native components (WDK + custom) |
 | `kaleido-ui/css` | CSS variables (light + dark), keyframes, utilities, and the Tailwind v4 `@theme` tokens |
@@ -50,7 +51,7 @@ npm install kaleido-ui
 // tailwind.config.js
 module.exports = {
   presets: [require('kaleido-ui/tailwind')],
-  content: ['./src/**/*.{ts,tsx}', './node_modules/kaleido-ui/dist/web/*.js'],
+  content: ['./src/**/*.{ts,tsx}', './node_modules/kaleido-ui/dist/web/**/*.js'],
   plugins: [require('tailwindcss-animate')],
 }
 ```
@@ -135,9 +136,9 @@ Works in any JS runtime (Node.js, React Native, web) with zero dependencies.
 ```ts
 import { colors, typeScale, radius, shadow } from 'kaleido-ui/tokens'
 
-console.log(colors.primary)        // '#2BEE79'
+console.log(colors.primary)        // '#15E99A'
 console.log(colors.network.bitcoin) // '#F7931A'
-console.log(typeScale.body)         // ['15px', '22px']
+console.log(typeScale.body)         // ['16px', '24px']
 ```
 
 ## Web Components
@@ -146,16 +147,40 @@ console.log(typeScale.body)         // ['15px', '22px']
 
 | Component | Description |
 |-----------|-------------|
-| `Button` | 11 variants (default, destructive, outline, secondary, ghost, link, glow, surface, cta, cta-gradient, danger-subtle), 9 sizes |
+| `Button` | 17 variants (default, destructive, outline, secondary, ghost, link, glow, surface, cta, cta-gradient, danger-subtle, danger-quiet, hyperlink, h1, h2, h3, quiet), 11 sizes |
 | `Card` | Compositional: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter |
 | `Input` | Form text input with focus ring |
+| `Select` | Select (Radix): Select, SelectTrigger, SelectContent, SelectItem, etc. Past four items, the list caps its height, scrolls, and shows a search field |
+| `DropdownMenu` | Dropdown menu (Radix): DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, etc. Searchable past four items, like `Select` |
+| `Table` | Table, TableHeader, TableBody, TableRow, TableHead, TableCell, etc. `TableHead` takes `sortable`, `sortDirection` (`'asc' \| 'desc' \| 'none'`) and `onSort`, and sets `aria-sort` |
 | `Dialog` | Modal dialog (Radix): Dialog, DialogContent, DialogHeader, DialogTitle, etc. |
 | `Tabs` | Tab navigation (Radix): Tabs, TabsList, TabsTrigger, TabsContent |
 | `Label` | Form label (Radix) |
 | `Toast` | Toast notifications (Radix): Toast, ToastProvider, Toaster |
-| `Icon` | Material Symbols wrapper with size variants (xs-2xl) |
+| `Icon` | Inline SVG icon by name, with size variants (xs-2xl). Looking a name up means shipping the whole set; see below |
 | `Icons` | Named icon shortcuts (Icons.Send, Icons.Receive, Icons.Swap, etc.) |
 
+#### Icons and bundle size
+
+The ESM build is one module per component and the package declares no side
+effects, so a bundler keeps only what the app imports. `<Icon name="…">` is the
+exception: any name can come in at runtime, so it carries every glyph (~75 KB
+minified). To ship only the glyphs you draw, import them from `kaleido-ui/icons`
+and build your own `Icon`. It takes the same props and the names you give it:
+
+```tsx
+import { createIcon, Close, Check, CheckCircleFilled } from 'kaleido-ui/icons'
+
+export const Icon = createIcon({ close: Close, check: Check }, { check: CheckCircleFilled })
+
+<Icon name="close" size="sm" />
+<Icon name="check" filled />
+```
+
+`IconButton icon="close"` looks the name up the same way; `GlyphButton` is the
+same button taking the glyph component (`<GlyphButton icon={Close} label="Close" />`),
+and `IconGlyph` draws one glyph at the icon scale (`<IconGlyph glyph={Close} size="sm" />`).
+
 ### Shared Components
 
 | Component | Description |
@@ -173,19 +198,56 @@ console.log(typeScale.body)         // ['15px', '22px']
 | `KaleidoswapLogo` | Full logo, `orientation="horizontal" \| "vertical"`. Wordmark uses `currentColor`; size with `h-* w-auto` |
 | `KaleidoswapMark` | The K pictogram on its own; size with `size-*` |
 | `HaloBackdrop` | Decorative drifting brand-colour blobs behind a screen (parent needs `relative isolate`) |
+| `TrendChart` | Line/area trend chart with a chart/table switch; pass `view` + `onViewChange` to control the view from the host, or leave them out |
+| `WithdrawAmountInput` | Amount card for the withdraw flow; `unitSlot` replaces the unit label with your own control (e.g. a unit picker) inside the card |
+
+### Hooks and functions
 
-### Hooks
+Every function and hook `kaleido-ui` exports. `tests/docs-accuracy.test.tsx`
+fails when one is missing here.
 
 | Hook | Description |
 |------|-------------|
-| `useToast` | Toast state management + `toast()` function |
-| `useAssetIcon` | Resolves asset ticker to CDN icon URL |
-
-### Utilities
-
-| Export | Description |
-|--------|-------------|
+| `useToast` | Toast state management; `toast()` shows one |
+| `useAssetIcon` | Resolves an asset ticker to its CDN icon URL |
+| `useCopyToClipboard` | `{ state: 'idle' \| 'copied' \| 'failed', copy, reset }`: a missing or refused clipboard is `failed`, never `copied` |
+| `useMediaQuery` | Whether a media query matches, kept up to date; `false` on the server and in jsdom |
+| `useIsNarrow` | Narrower than the `sm` breakpoint (40rem): a phone |
+| `useThemeMode` | The light/dark mode on the document root, remembered in localStorage (`kaleido-ui:theme`) |
+| `useDiscardGuard` | For a dialog holding unsaved input: closing asks first when there is something to lose |
+| `useDrawerCollapsed` | Whether the surrounding drawer is folded to its icon rail |
+
+| Function | Description |
+|----------|-------------|
 | `cn()` | `clsx` + `tailwind-merge`, configured with kaleido-ui's custom scales (`text-title`, `text-icon-md`, `rounded-card`, `shadow-glow-*`, `tracking-eyebrow`) so they are not mistaken for colours and dropped. Use it instead of a local `twMerge`. |
+| `toast()` | Shows a toast (see `useToast`) |
+| `applyThemeMode(mode)` | Puts `.dark` or `.light` on the document root, without the hook |
+| `formatAmount(value, { locale, maximumFractionDigits })` | Groups a number in an explicit locale (default `en-US`): the formatter the amount components share |
+| `formatDisplayAmountText(value, { unit, maxDecimals })` | Formats an amount string for display, keeping its unit suffix (`BTC`, `sats`, `mBTC`) and leaving locale-formatted strings intact |
+| `getAssetIconUrl(ticker, cdnBaseUrl?)` | The CDN icon URL for a ticker (what `useAssetIcon` returns, without React) |
+| `getFallbackAssetIconUrl(seed)` | A generated gradient placeholder icon URL for an asset with no CDN icon |
+| `createIcon(outlined, filled?)` | Builds an `Icon` that ships only the glyphs you pass (see above) |
+| `isIconName(value)` | Whether a string names a glyph in the set |
+| `buttonVariants` | `Button`'s variant classes (cva), for an element that must look like a button |
+| `avatarVariants` | `Avatar`'s size classes (cva) |
+| `cardSurface` | The two card surfaces' classes: `primary` (glass card with edge) and `secondary` (no edge, ranks under a primary card) |
+| `networkChipStyle(network)` | A network's chip fill and ink (`{ backgroundColor, color }`), for any surface that stands for that network |
+| `getActivityNetworkFilterIcon(filter)` | The icon element for an activity network filter |
+| `getAccountNetworkLabel(network)` | `'Mainnet'`, `'Testnet'`, `'Regtest'` or `'Signet'` |
+| `getAccountNetworkUi(network)` | Label plus badge and banner classes for an account's network |
+| `getAccountStatusUi(status)` | Label and classes for an account status (`ready`, `offline`, `optional`) |
+| `defaultClassifyError(error)` | `QueryState`'s fallback classifier: a retryable "Could not load" with the error's message |
+| `activeFiltersLabel(count)` | "1 filter applied", "3 filters applied" |
+| `seriesColor(slot)` | The chart series colour for a slot (`var(--series-N)`) |
+| `chartValueTicks(max, { integer })` | Value-axis ticks from zero whose top is the largest value |
+| `chartLabelIndices(count, maxLabels)` | Category indices that get a label: first and last, evenly spaced between |
+| `foldSegments(segments)` | Keeps the largest five donut segments and folds the rest into "Other" |
+| `trendChartTicks(max)` | `TrendChart`'s value-axis ticks (top = peak) |
+| `trendChartLabelIndices(count, maxLabels)` | `TrendChart`'s time-axis label indices |
+| `kaleidoswapMarkArtwork`, `kaleidoswapLogoHorizontalArtwork`, `kaleidoswapLogoVerticalArtwork` | The logo's `viewBox` and paths, for drawing it outside React |
+
+The chart helpers are what the chart components use; they are exported for a
+custom chart that should follow the same axis and colour rules.
 
 ### Brand utilities (from `kaleido-ui/css`)
 
@@ -213,12 +275,12 @@ StatusBadge, NetworkBadge, AlertBanner, SectionLabel
 
 | Token | Values |
 |-------|--------|
-| `colors` | primary (#2BEE79), surfaces, text, semantic, network, transaction |
-| `typeScale` | xxs (10px) through display (36px) |
-| `fontFamily` | Geist Sans, Geist Mono |
+| `colors` | primary (#15E99A, dark theme; `lightSemanticColors` for light), surfaces, text, semantic, network, transaction |
+| `typeScale` | mini (10px) through display (38px) |
+| `fontFamily` | Satoshi (display), Geist Mono (mono) |
 | `fontWeight` | normal (400) through bold (700) |
-| `radius` | sm (8px) through full (9999px) |
-| `shadow` | glow, glowStrong, glowSubtle, glowAccent |
+| `radius` | xs (2px) through full (9999px), plus card, panel, nav, pill |
+| `shadow` | glow*, glowPrimary*, glowViolet*, card*, raised, button*, popover, toast |
 | `transition` | fast (150ms), default (200ms), slow (300ms) |
 | `brandMark` | The logo's three fills (violet, green, mint): paint, never text |
 | `themedForeground` | Per-theme AA foregrounds (`brand`, `accent-*-fg`, status and network `-fg`) |

package/dist/icon-AvUL0Cws.d.cts

@@ -0,0 +1,135 @@
+import * as React$1 from 'react';
+import { SVGProps, ComponentType } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const buttonVariants: (props?: ({
+    variant?: "glow" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "surface" | "cta" | "cta-gradient" | "danger-subtle" | "danger-quiet" | "hyperlink" | "h1" | "h2" | "h3" | "quiet" | null | undefined;
+    size?: "default" | "cta" | "xs" | "sm" | "lg" | "xl" | "cta-lg" | "icon-sm" | "icon" | "icon-lg" | "icon-xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type IconGlyphComponent = ComponentType<SVGProps<SVGSVGElement>>;
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface IconGlyphProps extends SVGProps<SVGSVGElement> {
+    glyph: IconGlyphComponent;
+    size?: IconSize;
+    className?: string;
+}
+/** Draws one glyph component at the icon scale, without the name lookup. */
+declare function IconGlyph({ glyph: Glyph, size, className, ...props }: IconGlyphProps): react_jsx_runtime.JSX.Element;
+
+declare const sizes: {
+    readonly sm: "icon-sm";
+    readonly md: "icon";
+    readonly lg: "icon-lg";
+};
+interface GlyphButtonProps extends Omit<ButtonProps, 'size' | 'variant' | 'children' | 'aria-label'> {
+    /** What the button does. It is the accessible name and the tooltip; an icon alone names nothing. */
+    label: string;
+    /** The glyph component (`Close` from `kaleido-ui/icons`), or an element for a glyph that changes (a spinner). */
+    icon: IconGlyphComponent | React$1.ReactElement;
+    /** sm 32 px for row and inline actions, md 40 px (default) for toolbars and close, lg 50 px for headers and action rows. */
+    size?: keyof typeof sizes;
+    /**
+     * `quiet` (default) for close, back, clear, copy, open; `surface` for an
+     * action the screen offers (paste, refresh, edit); `secondary` for the one
+     * solid violet action. The danger looks follow Button's names, lightest
+     * first: `danger-quiet` tints only on hover, for a row's delete where a
+     * filled square would be too loud; `danger-subtle` rests in the danger
+     * tint, for an action that deletes or revokes and for the controls of an
+     * error surface (a destructive toast's copy and close); `destructive` is
+     * the solid red fill, the danger counterpart of `secondary`.
+     */
+    variant?: 'quiet' | 'surface' | 'secondary' | 'danger-quiet' | 'danger-subtle' | 'destructive';
+    /**
+     * `square` (default), the rounded square; `circle` for a button that sits on
+     * a line or over content rather than in a row, like the swap card's flip.
+     */
+    shape?: 'square' | 'circle';
+}
+/**
+ * `IconButton` for a glyph passed as a component rather than by name, so the
+ * bundle carries that glyph and not the whole set.
+ */
+declare const GlyphButton: React$1.ForwardRefExoticComponent<GlyphButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type IconName = 'account_balance_wallet' | 'add' | 'add_circle' | 'apps' | 'arrow_back' | 'arrow_circle_up' | 'arrow_downward' | 'arrow_forward' | 'arrow_outward' | 'arrow_upward' | 'autorenew' | 'bolt' | 'bug_report' | 'call_received' | 'cancel' | 'check' | 'check_circle' | 'chevron_left' | 'chevron_right' | 'close' | 'cloud_upload' | 'code' | 'content_copy' | 'content_paste' | 'currency_bitcoin' | 'delete' | 'delete_sweep' | 'description' | 'download' | 'edit' | 'error' | 'expand_less' | 'expand_more' | 'fingerprint' | 'folder_zip' | 'grid_view' | 'help' | 'hexagon' | 'history' | 'hourglass_top' | 'hub' | 'info' | 'inventory_2' | 'ios_share' | 'key' | 'layers' | 'link' | 'lock' | 'lock_open' | 'menu' | 'north_east' | 'open_in_new' | 'person' | 'power_settings_new' | 'qr_code_2' | 'qr_code_scanner' | 'radio_button_unchecked' | 'receipt_long' | 'refresh' | 'remove' | 'remove_circle' | 'restore' | 'rocket_launch' | 'schedule' | 'science' | 'chat_bubble' | 'event' | 'play_arrow' | 'psychology' | 'search' | 'settings' | 'shield' | 'smart_toy' | 'south_west' | 'swap_horiz' | 'swap_vert' | 'sync' | 'sync_alt' | 'timer' | 'timer_off' | 'token' | 'tune' | 'upload' | 'upload_file' | 'verified' | 'visibility' | 'visibility_off' | 'warning' | 'history_toggle_off' | 'payments' | 'toll' | 'trending_up' | 'touch_app' | 'dark_mode' | 'light_mode' | 'palette' | 'keyboard_arrow_up' | 'keyboard_arrow_down' | 'swap_calls' | 'progress_activity' | 'bar_chart' | 'stacked_bar_chart' | 'show_chart' | 'area_chart' | 'scatter_plot' | 'table_rows' | 'language' | 'notifications';
+/**
+ * Whether a string names a glyph in the set. Components that take an icon as a
+ * string use this to draw it, and draw nothing for an unknown name: printing
+ * the name, as a font ligature does without its font, is the one outcome that
+ * is always wrong.
+ */
+declare const isIconName: (value: unknown) => value is IconName;
+
+interface IconProps<N extends string = IconName> extends Omit<IconGlyphProps, 'glyph'> {
+    name: N;
+    filled?: boolean;
+}
+/**
+ * Builds an `Icon` that knows only the glyphs passed in, so a bundle carries
+ * those and no others. The default `Icon` is this over the whole set.
+ *
+ *   import { createIcon, Close, Check } from 'kaleido-ui/icons'
+ *   const Icon = createIcon({ close: Close, check: Check })
+ *   <Icon name="close" size="sm" />
+ */
+declare function createIcon<N extends string>(outlined: Record<N, IconGlyphComponent>, filled?: Partial<Record<N, IconGlyphComponent>>): ({ name, filled: preferFilled, ...props }: IconProps<N>) => react_jsx_runtime.JSX.Element | null;
+declare const Icon: ({ name, filled: preferFilled, ...props }: IconProps<IconName>) => react_jsx_runtime.JSX.Element | null;
+declare const Icons: {
+    ArrowBack: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    ArrowForward: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Close: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Menu: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Send: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Receive: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Swap: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Copy: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Paste: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Refresh: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    QrCode: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    QrScanner: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Check: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    CheckCircle: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Error: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Warning: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Info: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Pending: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Progress: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Wallet: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Activity: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Settings: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Lightning: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Bitcoin: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Ark: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Lock: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Unlock: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Shield: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Key: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Fingerprint: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Visibility: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    VisibilityOff: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    ExpandMore: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    ExpandLess: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    ChevronRight: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    OpenInNew: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Search: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Add: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Download: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Upload: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Edit: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Delete: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Timer: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Person: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Hub: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Verified: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    SmartToy: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Psychology: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+};
+
+export { type ButtonProps as B, type GlyphButtonProps as G, type IconName as I, type IconProps as a, Button as b, GlyphButton as c, Icon as d, IconGlyph as e, type IconGlyphComponent as f, type IconGlyphProps as g, type IconSize as h, Icons as i, buttonVariants as j, createIcon as k, isIconName as l };

package/dist/icon-AvUL0Cws.d.ts

@@ -0,0 +1,135 @@
+import * as React$1 from 'react';
+import { SVGProps, ComponentType } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const buttonVariants: (props?: ({
+    variant?: "glow" | "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "surface" | "cta" | "cta-gradient" | "danger-subtle" | "danger-quiet" | "hyperlink" | "h1" | "h2" | "h3" | "quiet" | null | undefined;
+    size?: "default" | "cta" | "xs" | "sm" | "lg" | "xl" | "cta-lg" | "icon-sm" | "icon" | "icon-lg" | "icon-xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type IconGlyphComponent = ComponentType<SVGProps<SVGSVGElement>>;
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface IconGlyphProps extends SVGProps<SVGSVGElement> {
+    glyph: IconGlyphComponent;
+    size?: IconSize;
+    className?: string;
+}
+/** Draws one glyph component at the icon scale, without the name lookup. */
+declare function IconGlyph({ glyph: Glyph, size, className, ...props }: IconGlyphProps): react_jsx_runtime.JSX.Element;
+
+declare const sizes: {
+    readonly sm: "icon-sm";
+    readonly md: "icon";
+    readonly lg: "icon-lg";
+};
+interface GlyphButtonProps extends Omit<ButtonProps, 'size' | 'variant' | 'children' | 'aria-label'> {
+    /** What the button does. It is the accessible name and the tooltip; an icon alone names nothing. */
+    label: string;
+    /** The glyph component (`Close` from `kaleido-ui/icons`), or an element for a glyph that changes (a spinner). */
+    icon: IconGlyphComponent | React$1.ReactElement;
+    /** sm 32 px for row and inline actions, md 40 px (default) for toolbars and close, lg 50 px for headers and action rows. */
+    size?: keyof typeof sizes;
+    /**
+     * `quiet` (default) for close, back, clear, copy, open; `surface` for an
+     * action the screen offers (paste, refresh, edit); `secondary` for the one
+     * solid violet action. The danger looks follow Button's names, lightest
+     * first: `danger-quiet` tints only on hover, for a row's delete where a
+     * filled square would be too loud; `danger-subtle` rests in the danger
+     * tint, for an action that deletes or revokes and for the controls of an
+     * error surface (a destructive toast's copy and close); `destructive` is
+     * the solid red fill, the danger counterpart of `secondary`.
+     */
+    variant?: 'quiet' | 'surface' | 'secondary' | 'danger-quiet' | 'danger-subtle' | 'destructive';
+    /**
+     * `square` (default), the rounded square; `circle` for a button that sits on
+     * a line or over content rather than in a row, like the swap card's flip.
+     */
+    shape?: 'square' | 'circle';
+}
+/**
+ * `IconButton` for a glyph passed as a component rather than by name, so the
+ * bundle carries that glyph and not the whole set.
+ */
+declare const GlyphButton: React$1.ForwardRefExoticComponent<GlyphButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+type IconName = 'account_balance_wallet' | 'add' | 'add_circle' | 'apps' | 'arrow_back' | 'arrow_circle_up' | 'arrow_downward' | 'arrow_forward' | 'arrow_outward' | 'arrow_upward' | 'autorenew' | 'bolt' | 'bug_report' | 'call_received' | 'cancel' | 'check' | 'check_circle' | 'chevron_left' | 'chevron_right' | 'close' | 'cloud_upload' | 'code' | 'content_copy' | 'content_paste' | 'currency_bitcoin' | 'delete' | 'delete_sweep' | 'description' | 'download' | 'edit' | 'error' | 'expand_less' | 'expand_more' | 'fingerprint' | 'folder_zip' | 'grid_view' | 'help' | 'hexagon' | 'history' | 'hourglass_top' | 'hub' | 'info' | 'inventory_2' | 'ios_share' | 'key' | 'layers' | 'link' | 'lock' | 'lock_open' | 'menu' | 'north_east' | 'open_in_new' | 'person' | 'power_settings_new' | 'qr_code_2' | 'qr_code_scanner' | 'radio_button_unchecked' | 'receipt_long' | 'refresh' | 'remove' | 'remove_circle' | 'restore' | 'rocket_launch' | 'schedule' | 'science' | 'chat_bubble' | 'event' | 'play_arrow' | 'psychology' | 'search' | 'settings' | 'shield' | 'smart_toy' | 'south_west' | 'swap_horiz' | 'swap_vert' | 'sync' | 'sync_alt' | 'timer' | 'timer_off' | 'token' | 'tune' | 'upload' | 'upload_file' | 'verified' | 'visibility' | 'visibility_off' | 'warning' | 'history_toggle_off' | 'payments' | 'toll' | 'trending_up' | 'touch_app' | 'dark_mode' | 'light_mode' | 'palette' | 'keyboard_arrow_up' | 'keyboard_arrow_down' | 'swap_calls' | 'progress_activity' | 'bar_chart' | 'stacked_bar_chart' | 'show_chart' | 'area_chart' | 'scatter_plot' | 'table_rows' | 'language' | 'notifications';
+/**
+ * Whether a string names a glyph in the set. Components that take an icon as a
+ * string use this to draw it, and draw nothing for an unknown name: printing
+ * the name, as a font ligature does without its font, is the one outcome that
+ * is always wrong.
+ */
+declare const isIconName: (value: unknown) => value is IconName;
+
+interface IconProps<N extends string = IconName> extends Omit<IconGlyphProps, 'glyph'> {
+    name: N;
+    filled?: boolean;
+}
+/**
+ * Builds an `Icon` that knows only the glyphs passed in, so a bundle carries
+ * those and no others. The default `Icon` is this over the whole set.
+ *
+ *   import { createIcon, Close, Check } from 'kaleido-ui/icons'
+ *   const Icon = createIcon({ close: Close, check: Check })
+ *   <Icon name="close" size="sm" />
+ */
+declare function createIcon<N extends string>(outlined: Record<N, IconGlyphComponent>, filled?: Partial<Record<N, IconGlyphComponent>>): ({ name, filled: preferFilled, ...props }: IconProps<N>) => react_jsx_runtime.JSX.Element | null;
+declare const Icon: ({ name, filled: preferFilled, ...props }: IconProps<IconName>) => react_jsx_runtime.JSX.Element | null;
+declare const Icons: {
+    ArrowBack: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    ArrowForward: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Close: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Menu: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Send: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Receive: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Swap: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Copy: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Paste: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Refresh: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    QrCode: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    QrScanner: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Check: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    CheckCircle: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Error: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Warning: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Info: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Pending: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Progress: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Wallet: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Activity: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Settings: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Lightning: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Bitcoin: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Ark: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Lock: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Unlock: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Shield: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Key: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Fingerprint: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Visibility: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    VisibilityOff: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    ExpandMore: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    ExpandLess: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    ChevronRight: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    OpenInNew: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Search: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Add: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Download: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Upload: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Edit: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Delete: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Timer: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Person: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Hub: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Verified: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    SmartToy: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+    Psychology: (props: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+};
+
+export { type ButtonProps as B, type GlyphButtonProps as G, type IconName as I, type IconProps as a, Button as b, GlyphButton as c, Icon as d, IconGlyph as e, type IconGlyphComponent as f, type IconGlyphProps as g, type IconSize as h, Icons as i, buttonVariants as j, createIcon as k, isIconName as l };

package/dist/native/index.cjs

@@ -1435,60 +1435,6 @@ function ModeToggle({ icon, size = 40, onToggle }) {
   );
 }
 
-// src/tokens/app-semantic.ts
-var appSemanticDark = {
-  // Near-black ramp with a violet cast (~245 deg, low saturation): the
-  // surfaces lean violet, the accents carry the colour — green first.
-  "surface-base": "14 13 22",
-  //  #0E0D16 — deepest bg, sidebar
-  "surface-raised": "20 19 30",
-  // #14131E — page body bg
-  "surface-overlay": "28 26 42",
-  // #1C1A2A — card bg
-  "surface-elevated": "40 38 56",
-  // #282638 — sections inside cards
-  "surface-high": "54 51 74",
-  //    #36334A — hover/active highlights
-  // An inset box inside a card (DisclosureCard), used at /40: on dark it is
-  // the muted fill; on light a cool grey, so the box still reads on white.
-  "surface-inset": "20 19 30",
-  //   #14131E
-  primary: "21 233 154",
-  //         #15E99A
-  "primary-emphasis": "18 201 126",
-  // #12C97E
-  "primary-foreground": "14 13 22",
-  secondary: "111 50 255",
-  //       #6F32FF — brand violet
-  "secondary-emphasis": "84 32 204",
-  // #5420CC
-  "secondary-foreground": "255 255 255",
-  "secondary-content": "164 138 255",
-  // #A48AFF — violet text/icons on dark
-  "content-primary": "237 236 246",
-  // #EDECF6 — cool white
-  "content-secondary": "152 149 180",
-  // #9895B4
-  "content-tertiary": "98 95 124",
-  // #625F7C
-  "content-inverse": "14 13 22",
-  "border-subtle": "38 36 54",
-  //   #262436
-  "border-default": "52 50 72",
-  //  #343248
-  "border-strong": "21 233 154",
-  "status-success": "34 197 94",
-  "status-danger": "248 113 113",
-  "status-warning": "245 158 11",
-  "status-info": "56 189 248",
-  divider: "86 83 110",
-  //          #56536E
-  // Spark's mark is white on dark, black on light.
-  "network-spark": "255 255 255"
-  // #FFFFFF
-};
-var appSemanticOrder = Object.keys(appSemanticDark);
-
 // src/tokens/typography.ts
 var fontFamily = {
   display: "'Satoshi', system-ui, -apple-system, sans-serif",
@@ -1618,84 +1564,12 @@ var shadowLight = {
   toast: `0 0 0 1px ${lightInk(0.06)}, 0 10px 28px -10px ${lightInk(0.2)}`
 };
 
-// src/tokens/brand.ts
-var brandMark = {
-  violet: "#6F32FF",
-  green: "#17B581",
-  mint: "#15E99A"
-};
-var themedForeground = {
-  light: {
-    // Brand green at full saturation (no red), as light as it goes and still
-    // clears 4.5:1 on every light surface (4.55:1 on #EFEFF4).
-    brand: "#007D49",
-    "accent-send-fg": "#6428F0",
-    "accent-recv-fg": "#007D49",
-    "success-fg": "#076A43",
-    // a shade under brand: it also sits on a 14% mint tint
-    // Tailwind -800 shades: -700 measured only 3.7 to 4.3:1 on the light ramp.
-    "warning-fg": "#92400E",
-    "danger-fg": "#991B1B",
-    "info-fg": "#1E40AF",
-    "network-bitcoin-fg": "#92400E",
-    "network-lightning-fg": "#854D0E",
-    "network-liquid-fg": "#115E59",
-    "network-arkade-fg": "#5B21B6",
-    "network-spark-fg": "#0D0C14",
-    // Spark is black on light
-    "network-rgb-fg": "#991B1B",
-    "network-taproot-fg": "#464A69"
-  },
-  dark: {
-    brand: colors.primary,
-    "accent-send-fg": "#AD94FB",
-    "accent-recv-fg": colors.primary,
-    "success-fg": colors.success,
-    "warning-fg": colors.warning,
-    // danger #E53535 and info #4290FF are 3.0:1 and 3.2:1 on the elevated
-    // surface. Same hues, lifted until they clear 4.5:1.
-    "danger-fg": "#FF9999",
-    "info-fg": "#8BBDFF",
-    "network-bitcoin-fg": colors.networkText.bitcoin,
-    "network-lightning-fg": colors.networkText.lightning,
-    "network-liquid-fg": colors.networkText.liquid,
-    // The rgb and arkade *-text tokens dip under 4.5:1 on the elevated
-    // surface (3.9 and 4.1), so their -fg twins are lifted a step.
-    "network-arkade-fg": "#B49CF5",
-    "network-spark-fg": colors.network.spark,
-    // and white on dark
-    "network-rgb-fg": "#F09490",
-    "network-taproot-fg": colors.networkText.taproot
-  }
-};
-var themedForegroundOrder = Object.keys(themedForeground.light);
-var halo = {
-  primary: colors.tx.receive,
-  secondary: brandMark.violet,
-  blur: "110px"
-};
-var brandTheme = {
-  /** AA-safe light primary: white on it is 6.3:1, it is 5.1:1 on the light ramp. */
-  lightPrimary: themedForeground.light.brand,
-  /** Lifted dark status colours (see `themedForeground.dark`). */
-  darkDanger: themedForeground.dark["danger-fg"],
-  darkInfo: themedForeground.dark["info-fg"]
-};
-
 // src/tokens/transitions.ts
 var transition = {
   fast: "150ms ease-out",
   default: "200ms ease-out",
   slow: "300ms ease-out"
 };
-
-// src/tokens/chart.ts
-var chartSeries = {
-  /** green, violet, azzurro, then yellow, magenta, orange */
-  dark: ["#17b581", "#8374da", "#179fd4", "#b3880f", "#db589e", "#de6907"],
-  light: ["#17b581", "#6851c3", "#0f9cd0", "#dea805", "#c34189", "#fe904d"]
-};
-var chartSeriesLimit = chartSeries.dark.length;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,