kaleido-ui 0.2.1 → 0.2.4

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` | 15 variants (default, destructive, outline, secondary, ghost, link, glow, surface, cta, cta-gradient, danger-subtle, danger-quiet, hyperlink, quiet), 11 sizes (`icon-xl` is deprecated, same as `icon-lg`) |
 | `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,6 +198,8 @@ 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
 
@@ -213,12 +240,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/css/kaleido-ui.css

@@ -172,8 +172,6 @@
   --app-shadow: 7 4 22;
   --app-shadow-strength: 1;
   --app-rim-alpha: 0.06;
-  /* The rule on the left of the current drawer sub-item. */
-  --app-nav-rule: 2px;
   /* How much of a hidden (blurred) secret still shows. */
   --app-hidden-opacity: 0.6;
   /* Card glass edge: a faint 1px ring, violet light along the top and left,
@@ -259,8 +257,6 @@
   /* A selected card is only this tint: on light it needs a white floor, or it
      takes the grey of whatever it sits on. */
   --gradient-active: linear-gradient(135deg, rgba(21, 233, 154, 0.14) 0%, rgba(21, 233, 154, 0.04) 100%), linear-gradient(#FFFFFF, #FFFFFF);
-  /* On white the full green rule is heavy: half of it. */
-  --app-nav-rule: 1px;
   /* Blurred ink fades into white faster: keep more of it. */
   --app-hidden-opacity: 0.8;
   /* The scrollbar thumb is a white wash on dark; on white it needs ink. */

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,