react-native-terra-ui 0.1.0

package/README.md

@@ -0,0 +1,70 @@
+# react-native-terra-ui
+
+Themeable React Native UI components built on react-native-unistyles.
+
+## Entry points
+
+| Import | Purpose |
+|--------|---------|
+| `react-native-terra-ui` | Components, `TerraUIProvider`, `useTheme` |
+| `react-native-terra-ui/theme` | `configureTerraUI`, theme types, color utilities (no import-time side effects) |
+
+Use the `/theme` entry for `configureTerraUI()` in your app entry file. See [docs/getting-started.md](../../docs/getting-started.md).
+
+## Components
+
+| Export | Description |
+|--------|-------------|
+| `Box` | Layout primitive with token style props |
+| `Text` | Typography variants |
+| `Button` | Action button with `Button.Icon` / `Button.Label` |
+| `Surface` | Elevated surface levels |
+| `Icon` | Semantic icon registry |
+| `Spinner` | Loading indicator |
+| `Toast`, `DefaultToast` | Compound toast surface with title, description, action, close, and icon slots |
+| `Screen` | Page shell with `Screen.Header`, `Screen.ScrollView`, `Screen.FlatList` |
+| `Header` | `Header.Title`, `Header.LargeTitle`, `HeaderDismissButton` navigation headers |
+| `PageIndicator` | Dot and pill pager indicators — see [page-indicator.md](../../docs/page-indicator.md) |
+| `PortalProvider`, `PortalHost`, `usePortal` | Portal rendering |
+| `Slot`, `composeRefs`, `mergeProps` | Composition primitives (advanced) |
+
+### Toast Stack
+
+Wrap your app with `ToastProvider` inside `TerraUIProvider`, then use either
+the static or hook manager API:
+
+```tsx
+Toast.show({
+  variant: 'accent',
+  label: 'You have 2 credits left',
+  description: 'Get a paid plan for more credits',
+  actionLabel: 'Close',
+  onActionPress: ({ hide }) => hide(),
+});
+
+const toast = useToast();
+toast.show({ label: 'Saved', variant: 'success' });
+```
+
+## Context
+
+| Export | Description |
+|--------|-------------|
+| `TerraUIProvider` | Root provider — wrap your app once |
+| `useTheme` | Runtime accent/scheme switching |
+| `ToastProvider`, `useToast` | Toast stack provider and manager hook |
+
+## Theme API (`react-native-terra-ui/theme`)
+
+- `configureTerraUI` — register themes, accents, icons, component defaults
+- `defaultLightTheme`, `defaultDarkTheme` — built-in theme objects
+- `resolveThemeColor`, `deepMerge`, `shade`, `withAlpha`, `readableOn` — color utilities
+- Types: `TerraTheme`, `TerraConfig`, `Accent`, `Scheme`, `ColorToken`, etc.
+
+## Showcase
+
+Interactive demos live in [apps/showcase-expo](../../apps/showcase-expo). From the repo root:
+
+```sh
+yarn showcase start
+```

package/lib/module/components/avatar/Avatar.js

@@ -0,0 +1,121 @@
+"use strict";
+
+import { useState } from 'react';
+import { Text, View } from 'react-native';
+import { useUnistyles } from 'react-native-unistyles';
+import { getImageComponent } from '#theme/configure';
+import { Icon } from "../icon/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SIZE_PX = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64
+};
+const INITIALS_FONT_SIZE = {
+  xs: 9,
+  sm: 12,
+  md: 15,
+  lg: 18,
+  xl: 24
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  const first = parts[0]?.[0] ?? '';
+  const last = parts.length > 1 ? parts[parts.length - 1]?.[0] ?? '' : '';
+  return (first + last).toUpperCase();
+}
+function getBorderRadius(shape, sizePx, radiusMd) {
+  if (shape === 'circle') return sizePx / 2;
+  if (shape === 'rounded') return radiusMd;
+  return 0;
+}
+function resolveAvatarColors(color, variant, theme) {
+  const c = theme.color;
+  const get = key => c[key] ?? '';
+  if (color === 'default') {
+    return {
+      bg: c['surface.sunken'],
+      fg: c['text.muted']
+    };
+  }
+  if (color === 'accent') {
+    return variant === 'soft' ? {
+      bg: c['action.bg.subtle'],
+      fg: c['action.fg.subtle']
+    } : {
+      bg: c['action.bg.primary'],
+      fg: c['action.fg.primary']
+    };
+  }
+  return variant === 'soft' ? {
+    bg: get(`status.bg.${color}.subtle`),
+    fg: get(`status.fg.${color}.subtle`)
+  } : {
+    bg: get(`status.bg.${color}`),
+    fg: get(`status.fg.${color}`)
+  };
+}
+export function Avatar({
+  size = 'md',
+  shape = 'circle',
+  source,
+  name,
+  fallback,
+  contentFit = 'cover',
+  color = 'default',
+  variant = 'default',
+  style,
+  ...rest
+}) {
+  const {
+    theme
+  } = useUnistyles();
+  const [hasError, setHasError] = useState(false);
+  const sizePx = SIZE_PX[size];
+  const borderRadius = getBorderRadius(shape, sizePx, theme.radius.md);
+  const showFallback = !source || hasError;
+  const {
+    bg,
+    fg
+  } = resolveAvatarColors(color, variant, theme);
+  const fallbackContent = fallback !== undefined ? fallback : name ? /*#__PURE__*/_jsx(Text, {
+    style: {
+      fontSize: INITIALS_FONT_SIZE[size],
+      fontWeight: '600',
+      color: fg,
+      includeFontPadding: false
+    },
+    numberOfLines: 1,
+    children: getInitials(name)
+  }) : /*#__PURE__*/_jsx(Icon, {
+    name: "person",
+    size: sizePx,
+    color: fg
+  });
+  const ImageComponent = getImageComponent();
+  return /*#__PURE__*/_jsx(View, {
+    ...rest,
+    style: [{
+      width: sizePx,
+      height: sizePx,
+      borderRadius,
+      backgroundColor: bg,
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'hidden'
+    }, style],
+    children: showFallback ? fallbackContent : /*#__PURE__*/_jsx(ImageComponent, {
+      source: source,
+      style: {
+        width: sizePx,
+        height: sizePx
+      },
+      contentFit: contentFit,
+      accessibilityLabel: name,
+      onError: () => setHasError(true)
+    })
+  });
+}
+//# sourceMappingURL=Avatar.js.map

package/lib/module/components/avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","Text","View","useUnistyles","getImageComponent","Icon","jsx","_jsx","SIZE_PX","xs","sm","md","lg","xl","INITIALS_FONT_SIZE","getInitials","name","parts","trim","split","first","last","length","toUpperCase","getBorderRadius","shape","sizePx","radiusMd","resolveAvatarColors","color","variant","theme","c","get","key","bg","fg","Avatar","size","source","fallback","contentFit","style","rest","hasError","setHasError","borderRadius","radius","showFallback","fallbackContent","undefined","fontSize","fontWeight","includeFontPadding","numberOfLines","children","ImageComponent","width","height","backgroundColor","alignItems","justifyContent","overflow","accessibilityLabel","onError"],"sourceRoot":"../../../../src","sources":["components/avatar/Avatar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/avatar/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Avatar } from "./Avatar.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Avatar"],"sourceRoot":"../../../../src","sources":["components/avatar/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,aAAU","ignoreList":[]}

package/lib/module/components/avatar/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/components/avatar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/avatar/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/components/box/Box.js

@@ -0,0 +1,49 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { useUnistyles } from 'react-native-unistyles';
+import { Slot } from "../slot/index.js";
+import { BOX_STYLE_PROP_KEYS, resolveBoxStyle } from "./utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const STYLE_KEYS = new Set(BOX_STYLE_PROP_KEYS);
+
+/**
+ * Base layout primitive: a `View` styled through theme-token props.
+ * The only component family exposing token style-props.
+ */
+export const Box = /*#__PURE__*/forwardRef(function Box({
+  asChild,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const {
+    theme
+  } = useUnistyles();
+  const styleProps = {};
+  const viewProps = {};
+  for (const key of Object.keys(rest)) {
+    const value = rest[key];
+    if (STYLE_KEYS.has(key)) styleProps[key] = value;else viewProps[key] = value;
+  }
+  const mergedStyle = [resolveBoxStyle(styleProps, theme), style];
+  if (asChild) {
+    return /*#__PURE__*/_jsx(Slot, {
+      ownerName: "Box",
+      slotProps: {
+        ...viewProps,
+        style: mergedStyle,
+        ref
+      },
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: mergedStyle,
+    ...viewProps,
+    children: children
+  });
+});
+//# sourceMappingURL=Box.js.map

package/lib/module/components/box/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","View","useUnistyles","Slot","BOX_STYLE_PROP_KEYS","resolveBoxStyle","jsx","_jsx","STYLE_KEYS","Set","Box","asChild","style","children","rest","ref","theme","styleProps","viewProps","key","Object","keys","value","has","mergedStyle","ownerName","slotProps"],"sourceRoot":"../../../../src","sources":["components/box/Box.tsx"],"mappings":";;AAAA,SAA4BA,UAAU,QAAQ,OAAO;AACrD,SAASC,IAAI,QAAwB,cAAc;AAEnD,SAASC,YAAY,QAAQ,wBAAwB;AAErD,SAASC,IAAI,QAAQ,kBAAS;AAC9B,SACEC,mBAAmB,EAEnBC,eAAe,QACV,YAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOjB,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAASL,mBAAwC,CAAC;;AAE5E;AACA;AACA;AACA;AACA,OAAO,MAAMM,GAAG,gBAAGV,UAAU,CAAsC,SAASU,GAAGA,CAC7E;EAAEC,OAAO;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACrCC,GAAG,EACH;EACA,MAAM;IAAEC;EAAM,CAAC,GAAGd,YAAY,CAAC,CAAC;EAEhC,MAAMe,UAAmC,GAAG,CAAC,CAAC;EAC9C,MAAMC,SAAkC,GAAG,CAAC,CAAC;EAC7C,KAAK,MAAMC,GAAG,IAAIC,MAAM,CAACC,IAAI,CAACP,IAAI,CAAC,EAAE;IACnC,MAAMQ,KAAK,GAAIR,IAAI,CAA6BK,GAAG,CAAC;IACpD,IAAIX,UAAU,CAACe,GAAG,CAACJ,GAAG,CAAC,EAAEF,UAAU,CAACE,GAAG,CAAC,GAAGG,KAAK,CAAC,KAC5CJ,SAAS,CAACC,GAAG,CAAC,GAAGG,KAAK;EAC7B;EAEA,MAAME,WAAW,GAAG,CAClBnB,eAAe,CAACY,UAAU,EAAmBD,KAAK,CAAC,EACnDJ,KAAK,CACN;EAED,IAAID,OAAO,EAAE;IACX,oBACEJ,IAAA,CAACJ,IAAI;MACHsB,SAAS,EAAC,KAAK;MACfC,SAAS,EAAE;QAAE,GAAGR,SAAS;QAAEN,KAAK,EAAEY,WAAW;QAAET;MAAI,CAAE;MAAAF,QAAA,EAEpDA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEN,IAAA,CAACN,IAAI;IAACc,GAAG,EAAEA,GAAI;IAACH,KAAK,EAAEY,WAAY;IAAA,GAAMN,SAAS;IAAAL,QAAA,EAC/CA;EAAQ,CACL,CAAC;AAEX,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/box/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Box } from "./Box.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/box/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Box"],"sourceRoot":"../../../../src","sources":["components/box/index.ts"],"mappings":";;AACA,SAASA,GAAG,QAAQ,UAAO","ignoreList":[]}

package/lib/module/components/box/utils.js

@@ -0,0 +1,95 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { resolveThemeColor } from '#utils/resolve-theme-color';
+
+/** Strips `readonly` so the style object can be built by mutation. */
+
+/** Token-driven style props accepted by `Box`. */
+
+const ALIGN_MAP = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
+  baseline: 'baseline'
+};
+const JUSTIFY_MAP = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  between: 'space-between',
+  around: 'space-around',
+  evenly: 'space-evenly'
+};
+const space = (theme, key) => key === undefined ? undefined : theme.spacing[key];
+
+/** Builds a `ViewStyle` from token-driven props using the active theme. */
+export function resolveBoxStyle(props, theme) {
+  const style = {};
+
+  // Padding
+  const p = space(theme, props.p);
+  const px = space(theme, props.px);
+  const py = space(theme, props.py);
+  if (p !== undefined) style.padding = p;
+  if (px !== undefined) style.paddingHorizontal = px;
+  if (py !== undefined) style.paddingVertical = py;
+  const pt = space(theme, props.pt);
+  const pr = space(theme, props.pr);
+  const pb = space(theme, props.pb);
+  const pl = space(theme, props.pl);
+  if (pt !== undefined) style.paddingTop = pt;
+  if (pr !== undefined) style.paddingRight = pr;
+  if (pb !== undefined) style.paddingBottom = pb;
+  if (pl !== undefined) style.paddingLeft = pl;
+
+  // Margin
+  const m = space(theme, props.m);
+  const mx = space(theme, props.mx);
+  const my = space(theme, props.my);
+  if (m !== undefined) style.margin = m;
+  if (mx !== undefined) style.marginHorizontal = mx;
+  if (my !== undefined) style.marginVertical = my;
+  const mt = space(theme, props.mt);
+  const mr = space(theme, props.mr);
+  const mb = space(theme, props.mb);
+  const ml = space(theme, props.ml);
+  if (mt !== undefined) style.marginTop = mt;
+  if (mr !== undefined) style.marginRight = mr;
+  if (mb !== undefined) style.marginBottom = mb;
+  if (ml !== undefined) style.marginLeft = ml;
+
+  // Gap
+  const gap = space(theme, props.gap);
+  if (gap !== undefined) style.gap = gap;
+
+  // Layout
+  if (props.row !== undefined) style.flexDirection = props.row ? 'row' : 'column';
+  if (props.align !== undefined) style.alignItems = ALIGN_MAP[props.align];
+  if (props.justify !== undefined) {
+    style.justifyContent = JUSTIFY_MAP[props.justify];
+  }
+  if (props.wrap !== undefined) style.flexWrap = props.wrap ? 'wrap' : 'nowrap';
+  if (props.flex !== undefined) style.flex = props.flex;
+  if (props.alignSelf !== undefined) style.alignSelf = ALIGN_MAP[props.alignSelf];
+
+  // Visual
+  if (props.bg !== undefined) {
+    const bg = resolveThemeColor(props.bg, theme);
+    if (bg !== undefined) style.backgroundColor = bg;
+  }
+  if (props.radius !== undefined) style.borderRadius = theme.radius[props.radius];
+  if (props.borderWidth !== undefined) {
+    style.borderWidth = props.borderWidth === 'hairline' ? StyleSheet.hairlineWidth : props.borderWidth;
+  }
+  if (props.borderColor !== undefined) {
+    const borderColor = resolveThemeColor(props.borderColor, theme);
+    if (borderColor !== undefined) style.borderColor = borderColor;
+  }
+  return style;
+}
+
+/** Keys of {@link BoxStyleProps}, used to split style props from view props. */
+export const BOX_STYLE_PROP_KEYS = ['p', 'px', 'py', 'pt', 'pr', 'pb', 'pl', 'm', 'mx', 'my', 'mt', 'mr', 'mb', 'ml', 'gap', 'row', 'align', 'justify', 'wrap', 'flex', 'alignSelf', 'bg', 'radius', 'borderWidth', 'borderColor'];
+//# sourceMappingURL=utils.js.map

package/lib/module/components/box/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","resolveThemeColor","ALIGN_MAP","start","center","end","stretch","baseline","JUSTIFY_MAP","between","around","evenly","space","theme","key","undefined","spacing","resolveBoxStyle","props","style","p","px","py","padding","paddingHorizontal","paddingVertical","pt","pr","pb","pl","paddingTop","paddingRight","paddingBottom","paddingLeft","m","mx","my","margin","marginHorizontal","marginVertical","mt","mr","mb","ml","marginTop","marginRight","marginBottom","marginLeft","gap","row","flexDirection","align","alignItems","justify","justifyContent","wrap","flexWrap","flex","alignSelf","bg","backgroundColor","radius","borderRadius","borderWidth","hairlineWidth","borderColor","BOX_STYLE_PROP_KEYS"],"sourceRoot":"../../../../src","sources":["components/box/utils.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/button/Button.js

@@ -0,0 +1,281 @@
+"use strict";
+
+import { Children, createContext, forwardRef, useContext } from 'react';
+import { Pressable } from 'react-native';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { getDefaultRadius } from '#theme/configure';
+import { Icon } from "../icon/index.js";
+import { Spinner } from "../spinner/index.js";
+import { Text } from "../text/index.js";
+
+// ─── Context (lets icons/labels read the resolved foreground + size) ───────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ButtonContext = /*#__PURE__*/createContext({
+  color: '',
+  size: 'md'
+});
+export const useButtonContext = () => useContext(ButtonContext);
+
+// ─── Colors per variant ───────────────────────────────────────────────────────
+
+function getColors(variant, theme) {
+  const c = theme.color;
+  const get = key => c[key] ?? '';
+  switch (variant) {
+    case 'primary':
+      return {
+        bg: get('action.bg.primary'),
+        border: get('action.bg.primary'),
+        borderWidth: 0,
+        fg: get('action.fg.primary')
+      };
+    case 'secondary':
+      return {
+        bg: get('action.bg.subtle'),
+        border: get('action.bg.subtle'),
+        borderWidth: 0,
+        fg: get('action.fg.subtle')
+      };
+    case 'neutral':
+      return {
+        bg: get('action.bg.neutral.hover'),
+        border: get('action.bg.neutral.hover'),
+        borderWidth: 0,
+        fg: get('action.fg.neutral')
+      };
+    case 'outline':
+      return {
+        bg: 'transparent',
+        border: get('border.default'),
+        borderWidth: 1,
+        fg: get('text.default')
+      };
+    case 'ghost':
+      return {
+        bg: 'transparent',
+        border: 'transparent',
+        borderWidth: 0,
+        fg: get('text.default')
+      };
+    case 'danger':
+      return {
+        bg: get('status.bg.danger'),
+        border: get('status.bg.danger'),
+        borderWidth: 0,
+        fg: get('status.fg.danger')
+      };
+  }
+}
+
+// ─── Label sub-component ───────────────────────────────────────────────────────
+
+const LABEL_TYPOGRAPHY = {
+  sm: {
+    variant: 'label-md',
+    weight: 'semibold'
+  },
+  md: {
+    variant: 'label-lg',
+    weight: 'semibold'
+  },
+  lg: {
+    variant: 'label-lg',
+    weight: 'bold'
+  }
+};
+const ButtonLabel = ({
+  children
+}) => {
+  const {
+    color,
+    size
+  } = useButtonContext();
+  const typography = LABEL_TYPOGRAPHY[size];
+  return /*#__PURE__*/_jsx(Text, {
+    variant: typography.variant,
+    weight: typography.weight,
+    style: {
+      color
+    },
+    children: children
+  });
+};
+
+// ─── Icon sub-component ────────────────────────────────────────────────────────
+
+const ICON_SIZE = {
+  sm: 16,
+  md: 18,
+  lg: 20
+};
+const ButtonIcon = ({
+  name,
+  size: sizeProp,
+  color: colorProp,
+  strokeWidth
+}) => {
+  const {
+    color,
+    size
+  } = useButtonContext();
+  return /*#__PURE__*/_jsx(Icon, {
+    color: colorProp ?? color,
+    name: name,
+    size: sizeProp ?? ICON_SIZE[size],
+    strokeWidth: strokeWidth
+  });
+};
+function renderChildren(children) {
+  return Children.map(children, child => {
+    if (typeof child === 'string') {
+      return child.trim().length > 0 ? /*#__PURE__*/_jsx(ButtonLabel, {
+        children: child
+      }) : null;
+    }
+    if (typeof child === 'number') {
+      return /*#__PURE__*/_jsx(ButtonLabel, {
+        children: child
+      });
+    }
+    return child;
+  });
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+const ButtonRoot = /*#__PURE__*/forwardRef(function Button({
+  variant = 'primary',
+  size = 'md',
+  radius = getDefaultRadius('button'),
+  isDisabled = false,
+  isLoading = false,
+  isIconOnly = false,
+  fullWidth = true,
+  compact = false,
+  children,
+  onPress,
+  ...rest
+}, ref) {
+  const {
+    theme
+  } = useUnistyles();
+  styles.useVariants({
+    size,
+    radius,
+    fullWidth: fullWidth && !isIconOnly,
+    iconOnly: isIconOnly
+  });
+  const {
+    bg,
+    border,
+    borderWidth,
+    fg
+  } = getColors(variant, theme);
+  const blocked = isDisabled || isLoading;
+  const {
+    style: externalStyle,
+    ...pressableRest
+  } = rest;
+  return /*#__PURE__*/_jsx(ButtonContext.Provider, {
+    value: {
+      color: fg,
+      size
+    },
+    children: /*#__PURE__*/_jsxs(Pressable, {
+      ref: ref,
+      onPress: blocked ? undefined : onPress,
+      disabled: blocked,
+      accessibilityRole: "button",
+      accessibilityState: {
+        disabled: blocked,
+        busy: isLoading
+      },
+      ...pressableRest,
+      style: state => [styles.base, {
+        backgroundColor: bg,
+        borderColor: border,
+        borderWidth
+      }, compact ? styles.compact : null, state.pressed && !blocked ? {
+        opacity: theme.opacity.pressed
+      } : null, isDisabled ? {
+        opacity: theme.opacity.disabled
+      } : null, typeof externalStyle === 'function' ? externalStyle(state) : externalStyle],
+      children: [isLoading && /*#__PURE__*/_jsx(Spinner, {
+        size: "sm",
+        color: fg
+      }), renderChildren(children)]
+    })
+  });
+});
+export const Button = ButtonRoot;
+Button.Icon = ButtonIcon;
+Button.Label = ButtonLabel;
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create(theme => ({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    variants: {
+      size: {
+        sm: {
+          minHeight: 36,
+          paddingHorizontal: 14,
+          gap: 6
+        },
+        md: {
+          minHeight: 44,
+          paddingHorizontal: 16,
+          gap: 8
+        },
+        lg: {
+          minHeight: 52,
+          paddingHorizontal: 20,
+          gap: 8
+        }
+      },
+      radius: {
+        none: {
+          borderRadius: theme.radius.none
+        },
+        sm: {
+          borderRadius: theme.radius.sm
+        },
+        md: {
+          borderRadius: theme.radius.md
+        },
+        lg: {
+          borderRadius: theme.radius.lg
+        },
+        xl: {
+          borderRadius: theme.radius.xl
+        },
+        full: {
+          borderRadius: theme.radius.full
+        }
+      },
+      fullWidth: {
+        true: {
+          alignSelf: 'stretch'
+        },
+        false: {}
+      },
+      iconOnly: {
+        true: {
+          paddingHorizontal: 0,
+          aspectRatio: 1
+        },
+        false: {}
+      }
+    }
+  },
+  compact: {
+    paddingHorizontal: 2,
+    paddingVertical: 2,
+    minHeight: 0
+  }
+}));
+//# sourceMappingURL=Button.js.map