kaleido-ui 0.1.46 → 0.1.49

package/dist/native/index.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export { AmountInput, AssetSelector, Balance, CryptoAddressInput, NetworkSelector, QRCode, SeedPhrase, ThemeProvider, TransactionItem, TransactionList, useTheme } from '@tetherto/wdk-uikit-react-native';
+import { TextProps, ViewProps, PressableProps, ViewStyle } from 'react-native';
 
 /**
  * Brand configuration for WDK ThemeProvider.
@@ -55,6 +56,17 @@ interface KaleidoThemeProviderProps {
 }
 declare function KaleidoThemeProvider({ children, brandConfig, defaultMode, }: KaleidoThemeProviderProps): react_jsx_runtime.JSX.Element;
 
+interface QrCodeProps {
+    value: string;
+    /** Rendered square size in px (default 160). */
+    size?: number;
+    /** Foreground (module) color. Default near-black. */
+    color?: string;
+    /** Background color used for finder eyes + logo disc. Default white. */
+    backgroundColor?: string;
+}
+declare function QrCode({ value, size, color, backgroundColor, }: QrCodeProps): react_jsx_runtime.JSX.Element;
+
 type StatusType = 'success' | 'pending' | 'failed' | 'completed' | 'error';
 interface StatusBadgeProps {
     status: StatusType;
@@ -104,6 +116,266 @@ interface SectionLabelProps {
 }
 declare function SectionLabel({ children, style }: SectionLabelProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * KaleidoSwap unified runtime theme (light + dark).
+ *
+ * A single, identically-shaped palette per mode so React Native components can
+ * consume one `KaleidoTheme` object via `useKaleidoTheme()` and flip modes with
+ * zero per-component conditionals. Dark is the brand default ("dark backgrounds
+ * anchor everything"); light is a fully-specified counterpart.
+ *
+ * This file lives in `src/tokens` and is therefore exempt from the raw-color
+ * lint — raw values are intentional here and ONLY here. Components must never
+ * inline colors; they read them from the theme.
+ */
+type ThemeMode = 'light' | 'dark';
+/** Numeric type scale for React Native (the CSS `typeScale` is px strings). */
+declare const nativeType: {
+    readonly mini: {
+        readonly size: 9;
+        readonly line: 12;
+    };
+    readonly xxs: {
+        readonly size: 10;
+        readonly line: 14;
+    };
+    readonly tiny: {
+        readonly size: 11;
+        readonly line: 16;
+    };
+    readonly caption: {
+        readonly size: 13;
+        readonly line: 18;
+    };
+    readonly body: {
+        readonly size: 15;
+        readonly line: 22;
+    };
+    readonly subhead: {
+        readonly size: 17;
+        readonly line: 24;
+    };
+    readonly title: {
+        readonly size: 20;
+        readonly line: 28;
+    };
+    readonly headline: {
+        readonly size: 28;
+        readonly line: 34;
+    };
+    readonly display: {
+        readonly size: 36;
+        readonly line: 40;
+    };
+    readonly hero: {
+        readonly size: 44;
+        readonly line: 48;
+    };
+};
+type NativeTypeLevel = keyof typeof nativeType;
+interface KaleidoTheme {
+    mode: ThemeMode;
+    /** App background (full-bleed page). */
+    background: string;
+    /** Default card/panel surface. */
+    card: string;
+    /** Raised card (modals, selected panels). */
+    cardElevated: string;
+    /** Brand green — primary CTAs, success, focus ring. */
+    primary: string;
+    /** Foreground on top of `primary`. */
+    primaryFg: string;
+    /** Brand violet — active / protocol / selected accents. */
+    violet: string;
+    /** Translucent violet wash for selected chips/surfaces. */
+    violetSurface: string;
+    /** Semantic intents. */
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    /** Translucent intent washes (banners, tinted chips). */
+    successSurface: string;
+    warningSurface: string;
+    dangerSurface: string;
+    infoSurface: string;
+    /** Text ladder. */
+    text: {
+        primary: string;
+        secondary: string;
+        muted: string;
+        disabled: string;
+        /** Text on the green primary fill (dark). */
+        onAccent: string;
+        /** Text on saturated fills (violet / danger) — always white. */
+        onFill: string;
+    };
+    /** Border ladder. */
+    border: {
+        subtle: string;
+        default: string;
+        strong: string;
+    };
+    /** Surface elevation overlays. */
+    surface: {
+        base: string;
+        raised: string;
+        sunken: string;
+        overlay: string;
+        scrim: string;
+    };
+    /** Network glyph colors (consistent across modes). */
+    network: {
+        bitcoin: string;
+        lightning: string;
+        spark: string;
+        rgb: string;
+        arkade: string;
+        liquid: string;
+    };
+    /** Network chip backgrounds (mode-specific tints). */
+    networkSurface: {
+        bitcoin: string;
+        lightning: string;
+        spark: string;
+        rgb: string;
+        arkade: string;
+        liquid: string;
+    };
+    /** Transaction direction. */
+    tx: {
+        sent: string;
+        receive: string;
+        swap: string;
+    };
+    /** Brand gradient as [start, end] for native LinearGradient (135°). */
+    gradientBrand: readonly [string, string];
+}
+declare const themes: Record<ThemeMode, KaleidoTheme>;
+/** Resolve the full palette for a mode. */
+declare function makeTheme(mode: ThemeMode): KaleidoTheme;
+
+interface KaleidoThemeContextValue {
+    theme: KaleidoTheme;
+    mode: ThemeMode;
+    /** App-wide font family (e.g. 'Satoshi'); undefined → system default. */
+    fontFamily?: string;
+    setMode: (mode: ThemeMode) => void;
+    toggleMode: () => void;
+}
+interface KaleidoUIProviderProps {
+    children: ReactNode;
+    /** Controlled mode. When set, the provider does not manage its own state. */
+    mode?: ThemeMode;
+    /** Initial mode for the uncontrolled provider. Defaults to 'dark' (brand). */
+    defaultMode?: ThemeMode;
+    /** Fires on every mode change — use to persist the user's choice. */
+    onModeChange?: (mode: ThemeMode) => void;
+    /** App-wide font family applied by KText (pass 'Satoshi' once loaded). */
+    fontFamily?: string;
+}
+declare function KaleidoUIProvider({ children, mode: controlledMode, defaultMode, onModeChange, fontFamily, }: KaleidoUIProviderProps): react_jsx_runtime.JSX.Element;
+/** Access the active theme. Falls back to the dark theme if no provider is mounted. */
+declare function useKaleidoTheme(): KaleidoThemeContextValue;
+
+type Weight = 'normal' | 'medium' | 'semibold' | 'bold';
+type Tone$1 = 'primary' | 'secondary' | 'muted' | 'disabled' | 'onAccent' | 'accent' | 'violet' | 'success' | 'warning' | 'danger';
+interface KTextProps extends TextProps {
+    variant?: NativeTypeLevel;
+    weight?: Weight;
+    tone?: Tone$1;
+    /** Explicit color override (wins over `tone`). */
+    color?: string;
+    /** Uppercase eyebrow styling (positive tracking). */
+    eyebrow?: boolean;
+    center?: boolean;
+}
+declare function KText({ variant, weight, tone, color, eyebrow, center, style, children, ...rest }: KTextProps): react_jsx_runtime.JSX.Element;
+
+interface KScreenProps extends ViewProps {
+    /** Use the slightly raised card color as the page bg (for sheets/modals). */
+    elevated?: boolean;
+}
+declare function KScreen({ elevated, style, children, ...rest }: KScreenProps): react_jsx_runtime.JSX.Element;
+
+interface KCardProps extends ViewProps {
+    variant?: 'default' | 'elevated' | 'inset' | 'outline';
+    padding?: number;
+    radius?: number;
+    /** Draw a 1px themed border. */
+    bordered?: boolean;
+}
+declare function KCard({ variant, padding, radius, bordered, style, children, ...rest }: KCardProps): react_jsx_runtime.JSX.Element;
+
+type Variant = 'primary' | 'secondary' | 'violet' | 'ghost' | 'danger';
+type Size = 'sm' | 'md' | 'lg';
+interface KButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+    label: string;
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    fullWidth?: boolean;
+    /** Rendered before the label (e.g. an icon). */
+    leading?: React.ReactNode;
+    style?: ViewStyle;
+}
+declare function KButton({ label, variant, size, loading, fullWidth, leading, disabled, style, ...rest }: KButtonProps): react_jsx_runtime.JSX.Element;
+
+type Tone = 'primary' | 'violet' | 'neutral';
+interface ActionButtonProps {
+    label: string;
+    /** Render the glyph with the supplied themed color + size. */
+    icon: (color: string, size: number) => React.ReactNode;
+    onPress?: () => void;
+    tone?: Tone;
+    /** Filled accent tile (use for the single most important action). */
+    filled?: boolean;
+    disabled?: boolean;
+    size?: number;
+}
+declare function ActionButton({ label, icon, onPress, tone, filled, disabled, size, }: ActionButtonProps): react_jsx_runtime.JSX.Element;
+
+interface BalanceCardProps extends ViewProps {
+    label?: string;
+    amount: string;
+    unit?: string;
+    fiat?: string;
+    /** Optional trailing element under the fiat line (e.g. a delta chip). */
+    footer?: React.ReactNode;
+}
+declare function BalanceCard({ label, amount, unit, fiat, footer, style, ...rest }: BalanceCardProps): react_jsx_runtime.JSX.Element;
+
+type NetworkKey = 'bitcoin' | 'lightning' | 'spark' | 'rgb' | 'arkade' | 'liquid';
+interface NetworkChipProps {
+    network?: NetworkKey;
+    title: string;
+    /** Small line under the title (e.g. "instant", "1 asset"). */
+    subtitle?: string;
+    selected?: boolean;
+    onPress?: () => void;
+    /** Render the network glyph with the themed color + size. */
+    icon?: (color: string, size: number) => React.ReactNode;
+    /** Show a small "available" dot. */
+    dot?: boolean;
+}
+declare function NetworkChip({ network, title, subtitle, selected, onPress, icon, dot, }: NetworkChipProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps extends ViewProps {
+    title: string;
+    description?: string;
+    /** Render an illustrative glyph with the themed color + size. */
+    icon?: (color: string, size: number) => React.ReactNode;
+    action?: React.ReactNode;
+}
+declare function EmptyState({ title, description, icon, action, style, ...rest }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface ModeToggleProps {
+    icon: (mode: ThemeMode, color: string, size: number) => React.ReactNode;
+    size?: number;
+    onToggle?: (next: ThemeMode) => void;
+}
+declare function ModeToggle({ icon, size, onToggle }: ModeToggleProps): react_jsx_runtime.JSX.Element;
+
 declare const colors: {
     readonly textPrimary: "#ffffff";
     readonly textSecondary: "rgba(255, 255, 255, 0.55)";
@@ -290,4 +562,4 @@ declare const transition: {
     readonly slow: "300ms ease-out";
 };
 
-export { AlertBanner, KaleidoThemeProvider, NetworkBadge, type NetworkType, SectionLabel, StatusBadge, type StatusType, colors, fontFamily, fontWeight, kaleidoswapBrandConfig, kaleidoswapTokens, radius, shadow, transition, typeScale };
+export { ActionButton, type ActionButtonProps, AlertBanner, BalanceCard, type BalanceCardProps, EmptyState, type EmptyStateProps, KButton, type KButtonProps, KCard, type KCardProps, KScreen, type KScreenProps, KText, type KTextProps, type KaleidoTheme, KaleidoThemeProvider, KaleidoUIProvider, type KaleidoUIProviderProps, ModeToggle, type ModeToggleProps, type NativeTypeLevel, NetworkBadge, NetworkChip, type NetworkChipProps, type NetworkKey, type NetworkType, QrCode, type QrCodeProps, SectionLabel, StatusBadge, type StatusType, type ThemeMode, colors, fontFamily, fontWeight, kaleidoswapBrandConfig, kaleidoswapTokens, makeTheme, nativeType, radius, shadow, themes, transition, typeScale, useKaleidoTheme };

package/dist/native/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export { AmountInput, AssetSelector, Balance, CryptoAddressInput, NetworkSelector, QRCode, SeedPhrase, ThemeProvider, TransactionItem, TransactionList, useTheme } from '@tetherto/wdk-uikit-react-native';
+import { TextProps, ViewProps, PressableProps, ViewStyle } from 'react-native';
 
 /**
  * Brand configuration for WDK ThemeProvider.
@@ -55,6 +56,17 @@ interface KaleidoThemeProviderProps {
 }
 declare function KaleidoThemeProvider({ children, brandConfig, defaultMode, }: KaleidoThemeProviderProps): react_jsx_runtime.JSX.Element;
 
+interface QrCodeProps {
+    value: string;
+    /** Rendered square size in px (default 160). */
+    size?: number;
+    /** Foreground (module) color. Default near-black. */
+    color?: string;
+    /** Background color used for finder eyes + logo disc. Default white. */
+    backgroundColor?: string;
+}
+declare function QrCode({ value, size, color, backgroundColor, }: QrCodeProps): react_jsx_runtime.JSX.Element;
+
 type StatusType = 'success' | 'pending' | 'failed' | 'completed' | 'error';
 interface StatusBadgeProps {
     status: StatusType;
@@ -104,6 +116,266 @@ interface SectionLabelProps {
 }
 declare function SectionLabel({ children, style }: SectionLabelProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * KaleidoSwap unified runtime theme (light + dark).
+ *
+ * A single, identically-shaped palette per mode so React Native components can
+ * consume one `KaleidoTheme` object via `useKaleidoTheme()` and flip modes with
+ * zero per-component conditionals. Dark is the brand default ("dark backgrounds
+ * anchor everything"); light is a fully-specified counterpart.
+ *
+ * This file lives in `src/tokens` and is therefore exempt from the raw-color
+ * lint — raw values are intentional here and ONLY here. Components must never
+ * inline colors; they read them from the theme.
+ */
+type ThemeMode = 'light' | 'dark';
+/** Numeric type scale for React Native (the CSS `typeScale` is px strings). */
+declare const nativeType: {
+    readonly mini: {
+        readonly size: 9;
+        readonly line: 12;
+    };
+    readonly xxs: {
+        readonly size: 10;
+        readonly line: 14;
+    };
+    readonly tiny: {
+        readonly size: 11;
+        readonly line: 16;
+    };
+    readonly caption: {
+        readonly size: 13;
+        readonly line: 18;
+    };
+    readonly body: {
+        readonly size: 15;
+        readonly line: 22;
+    };
+    readonly subhead: {
+        readonly size: 17;
+        readonly line: 24;
+    };
+    readonly title: {
+        readonly size: 20;
+        readonly line: 28;
+    };
+    readonly headline: {
+        readonly size: 28;
+        readonly line: 34;
+    };
+    readonly display: {
+        readonly size: 36;
+        readonly line: 40;
+    };
+    readonly hero: {
+        readonly size: 44;
+        readonly line: 48;
+    };
+};
+type NativeTypeLevel = keyof typeof nativeType;
+interface KaleidoTheme {
+    mode: ThemeMode;
+    /** App background (full-bleed page). */
+    background: string;
+    /** Default card/panel surface. */
+    card: string;
+    /** Raised card (modals, selected panels). */
+    cardElevated: string;
+    /** Brand green — primary CTAs, success, focus ring. */
+    primary: string;
+    /** Foreground on top of `primary`. */
+    primaryFg: string;
+    /** Brand violet — active / protocol / selected accents. */
+    violet: string;
+    /** Translucent violet wash for selected chips/surfaces. */
+    violetSurface: string;
+    /** Semantic intents. */
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    /** Translucent intent washes (banners, tinted chips). */
+    successSurface: string;
+    warningSurface: string;
+    dangerSurface: string;
+    infoSurface: string;
+    /** Text ladder. */
+    text: {
+        primary: string;
+        secondary: string;
+        muted: string;
+        disabled: string;
+        /** Text on the green primary fill (dark). */
+        onAccent: string;
+        /** Text on saturated fills (violet / danger) — always white. */
+        onFill: string;
+    };
+    /** Border ladder. */
+    border: {
+        subtle: string;
+        default: string;
+        strong: string;
+    };
+    /** Surface elevation overlays. */
+    surface: {
+        base: string;
+        raised: string;
+        sunken: string;
+        overlay: string;
+        scrim: string;
+    };
+    /** Network glyph colors (consistent across modes). */
+    network: {
+        bitcoin: string;
+        lightning: string;
+        spark: string;
+        rgb: string;
+        arkade: string;
+        liquid: string;
+    };
+    /** Network chip backgrounds (mode-specific tints). */
+    networkSurface: {
+        bitcoin: string;
+        lightning: string;
+        spark: string;
+        rgb: string;
+        arkade: string;
+        liquid: string;
+    };
+    /** Transaction direction. */
+    tx: {
+        sent: string;
+        receive: string;
+        swap: string;
+    };
+    /** Brand gradient as [start, end] for native LinearGradient (135°). */
+    gradientBrand: readonly [string, string];
+}
+declare const themes: Record<ThemeMode, KaleidoTheme>;
+/** Resolve the full palette for a mode. */
+declare function makeTheme(mode: ThemeMode): KaleidoTheme;
+
+interface KaleidoThemeContextValue {
+    theme: KaleidoTheme;
+    mode: ThemeMode;
+    /** App-wide font family (e.g. 'Satoshi'); undefined → system default. */
+    fontFamily?: string;
+    setMode: (mode: ThemeMode) => void;
+    toggleMode: () => void;
+}
+interface KaleidoUIProviderProps {
+    children: ReactNode;
+    /** Controlled mode. When set, the provider does not manage its own state. */
+    mode?: ThemeMode;
+    /** Initial mode for the uncontrolled provider. Defaults to 'dark' (brand). */
+    defaultMode?: ThemeMode;
+    /** Fires on every mode change — use to persist the user's choice. */
+    onModeChange?: (mode: ThemeMode) => void;
+    /** App-wide font family applied by KText (pass 'Satoshi' once loaded). */
+    fontFamily?: string;
+}
+declare function KaleidoUIProvider({ children, mode: controlledMode, defaultMode, onModeChange, fontFamily, }: KaleidoUIProviderProps): react_jsx_runtime.JSX.Element;
+/** Access the active theme. Falls back to the dark theme if no provider is mounted. */
+declare function useKaleidoTheme(): KaleidoThemeContextValue;
+
+type Weight = 'normal' | 'medium' | 'semibold' | 'bold';
+type Tone$1 = 'primary' | 'secondary' | 'muted' | 'disabled' | 'onAccent' | 'accent' | 'violet' | 'success' | 'warning' | 'danger';
+interface KTextProps extends TextProps {
+    variant?: NativeTypeLevel;
+    weight?: Weight;
+    tone?: Tone$1;
+    /** Explicit color override (wins over `tone`). */
+    color?: string;
+    /** Uppercase eyebrow styling (positive tracking). */
+    eyebrow?: boolean;
+    center?: boolean;
+}
+declare function KText({ variant, weight, tone, color, eyebrow, center, style, children, ...rest }: KTextProps): react_jsx_runtime.JSX.Element;
+
+interface KScreenProps extends ViewProps {
+    /** Use the slightly raised card color as the page bg (for sheets/modals). */
+    elevated?: boolean;
+}
+declare function KScreen({ elevated, style, children, ...rest }: KScreenProps): react_jsx_runtime.JSX.Element;
+
+interface KCardProps extends ViewProps {
+    variant?: 'default' | 'elevated' | 'inset' | 'outline';
+    padding?: number;
+    radius?: number;
+    /** Draw a 1px themed border. */
+    bordered?: boolean;
+}
+declare function KCard({ variant, padding, radius, bordered, style, children, ...rest }: KCardProps): react_jsx_runtime.JSX.Element;
+
+type Variant = 'primary' | 'secondary' | 'violet' | 'ghost' | 'danger';
+type Size = 'sm' | 'md' | 'lg';
+interface KButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+    label: string;
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    fullWidth?: boolean;
+    /** Rendered before the label (e.g. an icon). */
+    leading?: React.ReactNode;
+    style?: ViewStyle;
+}
+declare function KButton({ label, variant, size, loading, fullWidth, leading, disabled, style, ...rest }: KButtonProps): react_jsx_runtime.JSX.Element;
+
+type Tone = 'primary' | 'violet' | 'neutral';
+interface ActionButtonProps {
+    label: string;
+    /** Render the glyph with the supplied themed color + size. */
+    icon: (color: string, size: number) => React.ReactNode;
+    onPress?: () => void;
+    tone?: Tone;
+    /** Filled accent tile (use for the single most important action). */
+    filled?: boolean;
+    disabled?: boolean;
+    size?: number;
+}
+declare function ActionButton({ label, icon, onPress, tone, filled, disabled, size, }: ActionButtonProps): react_jsx_runtime.JSX.Element;
+
+interface BalanceCardProps extends ViewProps {
+    label?: string;
+    amount: string;
+    unit?: string;
+    fiat?: string;
+    /** Optional trailing element under the fiat line (e.g. a delta chip). */
+    footer?: React.ReactNode;
+}
+declare function BalanceCard({ label, amount, unit, fiat, footer, style, ...rest }: BalanceCardProps): react_jsx_runtime.JSX.Element;
+
+type NetworkKey = 'bitcoin' | 'lightning' | 'spark' | 'rgb' | 'arkade' | 'liquid';
+interface NetworkChipProps {
+    network?: NetworkKey;
+    title: string;
+    /** Small line under the title (e.g. "instant", "1 asset"). */
+    subtitle?: string;
+    selected?: boolean;
+    onPress?: () => void;
+    /** Render the network glyph with the themed color + size. */
+    icon?: (color: string, size: number) => React.ReactNode;
+    /** Show a small "available" dot. */
+    dot?: boolean;
+}
+declare function NetworkChip({ network, title, subtitle, selected, onPress, icon, dot, }: NetworkChipProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps extends ViewProps {
+    title: string;
+    description?: string;
+    /** Render an illustrative glyph with the themed color + size. */
+    icon?: (color: string, size: number) => React.ReactNode;
+    action?: React.ReactNode;
+}
+declare function EmptyState({ title, description, icon, action, style, ...rest }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface ModeToggleProps {
+    icon: (mode: ThemeMode, color: string, size: number) => React.ReactNode;
+    size?: number;
+    onToggle?: (next: ThemeMode) => void;
+}
+declare function ModeToggle({ icon, size, onToggle }: ModeToggleProps): react_jsx_runtime.JSX.Element;
+
 declare const colors: {
     readonly textPrimary: "#ffffff";
     readonly textSecondary: "rgba(255, 255, 255, 0.55)";
@@ -290,4 +562,4 @@ declare const transition: {
     readonly slow: "300ms ease-out";
 };
 
-export { AlertBanner, KaleidoThemeProvider, NetworkBadge, type NetworkType, SectionLabel, StatusBadge, type StatusType, colors, fontFamily, fontWeight, kaleidoswapBrandConfig, kaleidoswapTokens, radius, shadow, transition, typeScale };
+export { ActionButton, type ActionButtonProps, AlertBanner, BalanceCard, type BalanceCardProps, EmptyState, type EmptyStateProps, KButton, type KButtonProps, KCard, type KCardProps, KScreen, type KScreenProps, KText, type KTextProps, type KaleidoTheme, KaleidoThemeProvider, KaleidoUIProvider, type KaleidoUIProviderProps, ModeToggle, type ModeToggleProps, type NativeTypeLevel, NetworkBadge, NetworkChip, type NetworkChipProps, type NetworkKey, type NetworkType, QrCode, type QrCodeProps, SectionLabel, StatusBadge, type StatusType, type ThemeMode, colors, fontFamily, fontWeight, kaleidoswapBrandConfig, kaleidoswapTokens, makeTheme, nativeType, radius, shadow, themes, transition, typeScale, useKaleidoTheme };