@flipdish/ui-library 0.14.1 → 0.15.0

package/README.md

@@ -100,7 +100,7 @@ component), see [Getting Started → Installation (React
 Native)](https://flipdishbytes.github.io/flipdish-design-system/?path=/docs/getting-started-installation-react-native--docs).
 The summary below covers the essentials.
 
-**Available on React Native today:** `Avatar`, plus the `cx`, `testIdUtils` and
+**Available on React Native today:** `Avatar`, `Button`, plus the `cx`, `testIdUtils` and
 `isReactComponent` utilities. Storybook is the live reference: each component's docs page
 carries a **React Native** section listing exactly which props that platform supports, and
 the **Platform** switch in the toolbar re-renders its stories with the React Native
@@ -141,7 +141,7 @@ In your app's `global.css` — the file you import from your root component and
 ```
 
 `styles.native` contributes exactly one thing: `@source "./native"`, which tells Tailwind to
-scan this package's React Native build output so the class strings inside `Avatar` (and every
+scan this package's React Native build output so the class strings inside `Avatar`, `Button` (and every
 component that follows) generate utilities. Without it those components render unstyled —
 Tailwind ignores `node_modules` unless a source is declared explicitly.
 

package/dist/components/atoms/Button/Button.styles.d.ts

@@ -0,0 +1,90 @@
+/**
+ * React Native–safe Button class strings (NativeWind).
+ *
+ * Mirrors the web variant keys in `index.tsx` (`sizes` / `colors`) but drops
+ * web-only utilities (`before:`, `hover:`, `focus-visible:`, `in-data-input-wrapper:`,
+ * `*:data-icon:`, etc.). Pressed equivalents of web `hover:` live under `pressed`.
+ *
+ * InputGroup nesting (`in-data-input-wrapper:*`) is omitted until a native InputGroup exists.
+ */
+export declare const styles: {
+    common: {
+        root: string;
+        icon: string;
+    };
+    sizes: {
+        xs: {
+            root: string;
+            iconOnly: string;
+            linkRoot: string;
+        };
+        sm: {
+            root: string;
+            iconOnly: string;
+            linkRoot: string;
+        };
+        md: {
+            root: string;
+            iconOnly: string;
+            linkRoot: string;
+        };
+        lg: {
+            root: string;
+            iconOnly: string;
+            linkRoot: string;
+        };
+        xl: {
+            root: string;
+            iconOnly: string;
+            linkRoot: string;
+        };
+    };
+    colors: {
+        primary: {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        secondary: {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        tertiary: {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'link-color': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'link-gray': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'primary-destructive': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'secondary-destructive': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'tertiary-destructive': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'link-destructive': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+    };
+};
+//# sourceMappingURL=Button.styles.d.ts.map

package/dist/components/atoms/Button/Button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+ElB,CAAC"}

package/dist/native/components/atoms/Button/Button.styles.d.ts

@@ -0,0 +1,90 @@
+/**
+ * React Native–safe Button class strings (NativeWind).
+ *
+ * Mirrors the web variant keys in `index.tsx` (`sizes` / `colors`) but drops
+ * web-only utilities (`before:`, `hover:`, `focus-visible:`, `in-data-input-wrapper:`,
+ * `*:data-icon:`, etc.). Pressed equivalents of web `hover:` live under `pressed`.
+ *
+ * InputGroup nesting (`in-data-input-wrapper:*`) is omitted until a native InputGroup exists.
+ */
+export declare const styles: {
+    common: {
+        root: string;
+        icon: string;
+    };
+    sizes: {
+        xs: {
+            root: string;
+            iconOnly: string;
+            linkRoot: string;
+        };
+        sm: {
+            root: string;
+            iconOnly: string;
+            linkRoot: string;
+        };
+        md: {
+            root: string;
+            iconOnly: string;
+            linkRoot: string;
+        };
+        lg: {
+            root: string;
+            iconOnly: string;
+            linkRoot: string;
+        };
+        xl: {
+            root: string;
+            iconOnly: string;
+            linkRoot: string;
+        };
+    };
+    colors: {
+        primary: {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        secondary: {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        tertiary: {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'link-color': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'link-gray': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'primary-destructive': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'secondary-destructive': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'tertiary-destructive': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+        'link-destructive': {
+            root: string;
+            pressed: string;
+            loading: string;
+        };
+    };
+};
+//# sourceMappingURL=Button.styles.d.ts.map

package/dist/native/components/atoms/Button/Button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Button/Button.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+ElB,CAAC"}

package/dist/native/components/atoms/Button/Button.styles.js

@@ -0,0 +1,92 @@
+/**
+ * React Native–safe Button class strings (NativeWind).
+ *
+ * Mirrors the web variant keys in `index.tsx` (`sizes` / `colors`) but drops
+ * web-only utilities (`before:`, `hover:`, `focus-visible:`, `in-data-input-wrapper:`,
+ * `*:data-icon:`, etc.). Pressed equivalents of web `hover:` live under `pressed`.
+ *
+ * InputGroup nesting (`in-data-input-wrapper:*`) is omitted until a native InputGroup exists.
+ */
+const styles = {
+    common: {
+        root: 'relative flex flex-row items-center justify-center',
+        icon: 'shrink-0',
+    },
+    sizes: {
+        xs: {
+            root: 'gap-1 rounded-lg px-2.5 py-1.5',
+            iconOnly: 'p-2',
+            linkRoot: 'gap-1 p-0',
+        },
+        sm: {
+            root: 'gap-1 rounded-lg px-3 py-2',
+            iconOnly: 'p-2',
+            linkRoot: 'gap-1 p-0',
+        },
+        md: {
+            root: 'gap-1 rounded-lg px-3.5 py-2.5',
+            iconOnly: 'p-2.5',
+            linkRoot: 'gap-1 p-0',
+        },
+        lg: {
+            root: 'gap-1.5 rounded-lg px-4 py-2.5',
+            iconOnly: 'p-3',
+            linkRoot: 'gap-1.5 p-0',
+        },
+        xl: {
+            root: 'gap-1.5 rounded-lg px-4.5 py-3',
+            iconOnly: 'p-3.5',
+            linkRoot: 'gap-1.5 p-0',
+        },
+    },
+    colors: {
+        primary: {
+            root: 'bg-brand-solid shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset',
+            pressed: 'bg-brand-solid_hover',
+            loading: 'bg-brand-solid_hover',
+        },
+        secondary: {
+            root: 'bg-primary shadow-xs-skeuomorphic ring-1 ring-primary ring-inset',
+            pressed: 'bg-primary_hover',
+            loading: 'bg-primary_hover',
+        },
+        tertiary: {
+            root: '',
+            pressed: 'bg-primary_hover',
+            loading: 'bg-primary_hover',
+        },
+        'link-color': {
+            root: 'justify-start rounded p-0',
+            pressed: '',
+            loading: '',
+        },
+        'link-gray': {
+            root: 'justify-start rounded p-0',
+            pressed: '',
+            loading: '',
+        },
+        'primary-destructive': {
+            root: 'bg-error-solid shadow-xs-skeuomorphic ring-1 ring-transparent ring-inset',
+            pressed: 'bg-error-solid_hover',
+            loading: 'bg-error-solid_hover',
+        },
+        'secondary-destructive': {
+            root: 'bg-primary shadow-xs-skeuomorphic ring-1 ring-error_subtle ring-inset',
+            pressed: 'bg-error-primary',
+            loading: 'bg-error-primary',
+        },
+        'tertiary-destructive': {
+            root: '',
+            pressed: 'bg-error-primary',
+            loading: 'bg-error-primary',
+        },
+        'link-destructive': {
+            root: 'justify-start rounded p-0',
+            pressed: '',
+            loading: '',
+        },
+    },
+};
+
+export { styles };
+//# sourceMappingURL=Button.styles.js.map

package/dist/native/components/atoms/Button/Button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","sources":["../../../../../../src/components/atoms/Button/Button.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;;AAQG;AACI,MAAM,MAAM,GAAG;AACpB,IAAA,MAAM,EAAE;AACN,QAAA,IAAI,EAAE,oDAAoD;AAC1D,QAAA,IAAI,EAAE,UAAU;AACjB,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,gCAAgC;AACtC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,WAAW;AACtB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,4BAA4B;AAClC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,WAAW;AACtB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,gCAAgC;AACtC,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,QAAQ,EAAE,WAAW;AACtB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,gCAAgC;AACtC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,aAAa;AACxB,SAAA;AACD,QAAA,EAAE,EAAE;AACF,YAAA,IAAI,EAAE,gCAAgC;AACtC,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,QAAQ,EAAE,aAAa;AACxB,SAAA;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,0EAA0E;AAChF,YAAA,OAAO,EAAE,sBAAsB;AAC/B,YAAA,OAAO,EAAE,sBAAsB;AAChC,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,kEAAkE;AACxE,YAAA,OAAO,EAAE,kBAAkB;AAC3B,YAAA,OAAO,EAAE,kBAAkB;AAC5B,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,OAAO,EAAE,kBAAkB;AAC3B,YAAA,OAAO,EAAE,kBAAkB;AAC5B,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,2BAA2B;AACjC,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,2BAA2B;AACjC,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AACD,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,0EAA0E;AAChF,YAAA,OAAO,EAAE,sBAAsB;AAC/B,YAAA,OAAO,EAAE,sBAAsB;AAChC,SAAA;AACD,QAAA,uBAAuB,EAAE;AACvB,YAAA,IAAI,EAAE,uEAAuE;AAC7E,YAAA,OAAO,EAAE,kBAAkB;AAC3B,YAAA,OAAO,EAAE,kBAAkB;AAC5B,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,EAAE;AACR,YAAA,OAAO,EAAE,kBAAkB;AAC3B,YAAA,OAAO,EAAE,kBAAkB;AAC5B,SAAA;AACD,QAAA,kBAAkB,EAAE;AAClB,YAAA,IAAI,EAAE,2BAA2B;AACjC,YAAA,OAAO,EAAE,EAAE;AACX,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AACF,KAAA;;;;;"}

package/dist/native/components/atoms/Button/index.d.ts

@@ -1,12 +1,64 @@
+import { type FC, type ReactElement, type ReactNode } from 'react';
+import { type PressableProps } from 'react-native';
+import { styles } from './Button.styles';
+type IconProp = FC<{
+    className?: string;
+    size?: number;
+    color?: string;
+}> | ReactNode;
+export type ButtonSize = keyof typeof styles.sizes;
+export type ButtonColor = keyof typeof styles.colors;
+interface CommonProps {
+    /** Disables the button and shows a disabled state */
+    isDisabled?: boolean;
+    /** Shows a loading spinner and disables the button */
+    isLoading?: boolean;
+    /** The size variant of the button */
+    size?: ButtonSize;
+    /** The color variant of the button */
+    color?: ButtonColor;
+    /** Icon component or element to show before the text */
+    iconLeading?: IconProp;
+    /** Icon component or element to show after the text */
+    iconTrailing?: IconProp;
+    /** Removes horizontal padding from the text content */
+    noTextPadding?: boolean;
+    /** When true, keeps the text visible during loading state */
+    showTextWhileLoading?: boolean;
+    /** Overrides the generated `testID` (defaults to `fd-button`). */
+    'data-testid'?: string;
+    /**
+     * Web-style accessible name. Accepted as an alias of `accessibilityLabel` so shared
+     * stories (and cross-platform call sites) can pass `aria-label` on both platforms.
+     */
+    'aria-label'?: string;
+    children?: ReactNode;
+    className?: string;
+}
+type PressBits = Pick<PressableProps, 'onPress' | 'hitSlop' | 'accessibilityLabel' | 'accessibilityHint'>;
+/** Props for the button variant (non-link) */
+export type ButtonProps = CommonProps & PressBits;
+/** Props for the link variant — pass `href` to open a URL via `Linking.openURL` */
+export type LinkProps = CommonProps & PressBits & {
+    href: string;
+};
+export type Props = ButtonProps | LinkProps;
 /**
- * `Button` has no React Native implementation.
+ * React Native `Button` — mirrors the web prop surface (sizes, colors, icons, loading,
+ * `href`) with platform adaptations:
  *
- * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
- * that importing `@flipdish/ui-library/components/atoms/Button` from React Native fails at
- * compile time rather than resolving to the web build's types. There is no
- * matching `index.js`, so Metro cannot bundle this module either.
+ * - `Pressable` instead of react-aria-components `Button` / `Link`
+ * - pressed styles instead of `hover:`
+ * - `ActivityIndicator` instead of the web SVG spinner
+ * - `href` opens via `Linking.openURL` (disabled/loading skips navigation)
+ * - no `before:` inset border gradient; no InputGroup nesting selectors
+ * - label colour/size via `style` on `Text` (NativeWind Text `className` bug — see Avatar)
  *
- * To make `Button` available on React Native, add an `index.native.tsx` beside
- * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ * @summary action trigger or URL control (React Native)
  */
-export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;
+export declare const Button: {
+    (props: LinkProps): ReactElement;
+    (props: ButtonProps): ReactElement;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/native/components/atoms/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Button/index.native.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,EAAkB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAyC,KAAK,cAAc,EAAc,MAAM,cAAc,CAAC;AACtG,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,KAAK,QAAQ,GAAG,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,GAAG,SAAS,CAAC;AAEtF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC;AAErD,UAAU,WAAW;IACnB,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sCAAsC;IACtC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,wDAAwD;IACxD,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,uDAAuD;IACvD,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,uDAAuD;IACvD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6DAA6D;IAC7D,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,SAAS,GAAG,oBAAoB,GAAG,mBAAmB,CAAC,CAAC;AAE1G,8CAA8C;AAC9C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,CAAC;AAElD,mFAAmF;AACnF,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,SAAS,CAAC;AA4F5C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,EAAE;IACnB,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,CAAC;IACjC,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;CAsGpC,CAAC"}

package/dist/native/components/atoms/Button/index.js

@@ -0,0 +1,147 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '../../../utilities/cx/index.js';
+import { isReactComponent } from '../../../utilities/isReactComponent/index.js';
+import { useResolvedTestId } from '../../../utilities/testIdUtils/index.js';
+import { useState, isValidElement } from 'react';
+import { Pressable, View, ActivityIndicator, Text, Linking } from 'react-native';
+import { styles } from './Button.styles.js';
+
+const LINK_COLORS = ['link-gray', 'link-color', 'link-destructive'];
+/**
+ * Icon pixel sizes — web uses `size-4` (16) for `xs` and `size-5` (20) otherwise.
+ * RN icon components take a numeric `size`, not a className.
+ */
+const ICON_PIXEL_SIZE = {
+    xs: 16,
+    sm: 20,
+    md: 20,
+    lg: 20,
+    xl: 20,
+};
+/**
+ * Label typography via plain `style` rather than `className` on `Text`.
+ *
+ * Same workaround as Avatar: `className` on `Text` silently fails under the current
+ * `react-native-css` preview, while `style` works. Mirrors web `text-sm` (xs–md) /
+ * `text-md` (lg–xl) + `font-semibold`. Revisit once upstream Text className works.
+ */
+const LABEL_TEXT_SIZE = {
+    xs: { fontSize: 14, lineHeight: 20 },
+    sm: { fontSize: 14, lineHeight: 20 },
+    md: { fontSize: 14, lineHeight: 20 },
+    lg: { fontSize: 16, lineHeight: 24 },
+    xl: { fontSize: 16, lineHeight: 24 },
+};
+/**
+ * Light-mode hex approximations of semantic text tokens for the Text `style` workaround.
+ * Hardcoded like Avatar — className can't resolve tokens on Text yet, and the consuming
+ * app does not support dark mode elsewhere yet.
+ */
+const LABEL_TEXT_COLOR = {
+    primary: '#ffffff',
+    secondary: '#404040', // text-secondary → neutral-700
+    tertiary: '#525252', // text-tertiary → neutral-600
+    'link-color': '#085eb1', // text-brand-secondary → brand-700
+    'link-gray': '#525252', // text-tertiary
+    'primary-destructive': '#ffffff',
+    'secondary-destructive': '#dc2626', // text-error-primary → red-600
+    'tertiary-destructive': '#dc2626',
+    'link-destructive': '#dc2626',
+};
+const LABEL_TEXT_COLOR_PRESSED = {
+    secondary: '#262626', // text-secondary_hover → neutral-800
+    tertiary: '#404040', // text-tertiary_hover → neutral-700
+    'link-color': '#074c8f', // text-brand-secondary_hover → brand-800
+    'link-gray': '#404040',
+    'secondary-destructive': '#b91c1c', // text-error-primary_hover → red-700
+    'tertiary-destructive': '#b91c1c',
+    'link-destructive': '#b91c1c',
+};
+/** Icon tint — mirrors web `*:data-icon:text-…` (light-mode hex). */
+const ICON_COLOR = {
+    primary: 'rgba(255,255,255,0.6)',
+    secondary: '#a3a3a3', // fg-quaternary → neutral-400
+    tertiary: '#a3a3a3',
+    'link-color': '#1c8bf3', // fg-brand-secondary → brand-500
+    'link-gray': '#a3a3a3',
+    'primary-destructive': 'rgba(255,255,255,0.6)',
+    'secondary-destructive': '#f04438', // approximate fg-error-secondary
+    'tertiary-destructive': '#f04438',
+    'link-destructive': '#f04438',
+};
+const ICON_COLOR_PRESSED = {
+    primary: 'rgba(255,255,255,0.7)',
+    secondary: '#737373', // fg-quaternary_hover → neutral-500
+    tertiary: '#737373',
+    'link-color': '#0b75d7', // fg-brand-secondary_hover → brand-600
+    'link-gray': '#737373',
+    'primary-destructive': 'rgba(255,255,255,0.7)',
+    'secondary-destructive': '#d92d20',
+    'tertiary-destructive': '#d92d20',
+    'link-destructive': '#d92d20',
+};
+const renderIcon = (icon, size, color, className) => {
+    if (isValidElement(icon))
+        return icon;
+    if (isReactComponent(icon)) {
+        const Icon = icon;
+        return jsx(Icon, { className: className, size: ICON_PIXEL_SIZE[size], color: color });
+    }
+    return null;
+};
+/**
+ * React Native `Button` — mirrors the web prop surface (sizes, colors, icons, loading,
+ * `href`) with platform adaptations:
+ *
+ * - `Pressable` instead of react-aria-components `Button` / `Link`
+ * - pressed styles instead of `hover:`
+ * - `ActivityIndicator` instead of the web SVG spinner
+ * - `href` opens via `Linking.openURL` (disabled/loading skips navigation)
+ * - no `before:` inset border gradient; no InputGroup nesting selectors
+ * - label colour/size via `style` on `Text` (NativeWind Text `className` bug — see Avatar)
+ *
+ * @summary action trigger or URL control (React Native)
+ */
+const Button = ({ size = 'sm', color = 'primary', children, className, noTextPadding: noTextPaddingProp, iconLeading: IconLeading, iconTrailing: IconTrailing, isDisabled, isLoading, showTextWhileLoading, 'data-testid': dataTestId, 'aria-label': ariaLabel, onPress, hitSlop, accessibilityLabel, accessibilityHint, ...props }) => {
+    const href = 'href' in props ? props.href : undefined;
+    const resolvedAccessibilityLabel = accessibilityLabel ?? ariaLabel;
+    const buttonTestId = useResolvedTestId({ testId: dataTestId, segment: 'button', rootName: 'button' });
+    const [pressed, setPressed] = useState(false);
+    const hasChildren = children !== null && children !== undefined;
+    const isIcon = Boolean((IconLeading || IconTrailing) && !hasChildren);
+    const isLinkType = LINK_COLORS.includes(color);
+    const noTextPadding = isLinkType || noTextPaddingProp;
+    const disabled = Boolean(isDisabled || isLoading);
+    const iconColor = (pressed && ICON_COLOR_PRESSED[color]) || ICON_COLOR[color];
+    const labelColor = (pressed && LABEL_TEXT_COLOR_PRESSED[color]) || LABEL_TEXT_COLOR[color];
+    // Match web: hide non-spinner content with opacity-0 (keeps layout + a11y name) unless
+    // showTextWhileLoading — then only icons are omitted and the label stays visible.
+    const dimNonSpinner = Boolean(isLoading && !showTextWhileLoading);
+    const omitIconsWhileLoading = Boolean(isLoading && showTextWhileLoading);
+    const handlePress = (event) => {
+        if (disabled)
+            return;
+        onPress?.(event);
+        if (href) {
+            // `openURL` rejects when no app can handle the URL — swallow it so it doesn't
+            // surface as an unhandled promise rejection (no established error path to route to).
+            Linking.openURL(href).catch(() => { });
+        }
+    };
+    const leadingIcon = !omitIconsWhileLoading ? renderIcon(IconLeading, size, iconColor, styles.common.icon) : null;
+    const trailingIcon = !omitIconsWhileLoading ? renderIcon(IconTrailing, size, iconColor, styles.common.icon) : null;
+    return (jsxs(Pressable, { testID: buttonTestId, disabled: disabled, onPress: handlePress, onPressIn: () => setPressed(true), onPressOut: () => setPressed(false), hitSlop: hitSlop, accessibilityRole: href ? 'link' : 'button', accessibilityLabel: resolvedAccessibilityLabel, accessibilityHint: accessibilityHint, accessibilityState: { disabled, busy: Boolean(isLoading) }, className: cx(styles.common.root, isLinkType ? styles.sizes[size].linkRoot : styles.sizes[size].root, 
+        // Merged (not swapped) so icon-only keeps `rounded-lg`/`gap-*` from `root` —
+        // `cx` (tailwind-merge) resolves the padding conflict, keeping this override.
+        isIcon && !isLinkType && styles.sizes[size].iconOnly, styles.colors[color].root, pressed && !disabled && styles.colors[color].pressed, isLoading && styles.colors[color].loading, disabled && 'opacity-50', className), children: [leadingIcon ? jsx(View, { style: dimNonSpinner ? { opacity: 0 } : undefined, children: leadingIcon }) : null, isLoading && (jsx(View, { className: cx(styles.common.icon, dimNonSpinner && 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'), children: jsx(ActivityIndicator, { size: "small", color: labelColor }) })), hasChildren && (jsx(Text, { style: {
+                    color: labelColor,
+                    fontWeight: '600',
+                    ...LABEL_TEXT_SIZE[size],
+                    ...(dimNonSpinner ? { opacity: 0 } : null),
+                    ...(isLinkType ? { textDecorationLine: 'underline' } : null),
+                    ...(!noTextPadding ? { paddingHorizontal: 2 } : null),
+                }, children: children })), trailingIcon ? jsx(View, { style: dimNonSpinner ? { opacity: 0 } : undefined, children: trailingIcon }) : null] }));
+};
+
+export { Button };
+//# sourceMappingURL=index.js.map

package/dist/native/components/atoms/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/Button/index.native.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "sideEffects": [