@flipdish/ui-library 0.35.2 → 0.36.0

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

@@ -0,0 +1,327 @@
+import { badgeTypes } from './badge.types.js';
+
+const filledColors = {
+    gray: {
+        root: 'bg-utility-neutral-50 text-utility-neutral-700 ring-utility-neutral-200',
+        addon: 'text-utility-neutral-500',
+        dotColor: 'utility-neutral-500',
+        addonButton: 'hover:bg-utility-neutral-100 text-utility-neutral-400 hover:text-utility-neutral-500',
+    },
+    brand: {
+        root: 'bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-200',
+        addon: 'text-utility-brand-500',
+        dotColor: 'utility-brand-500',
+        addonButton: 'hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500',
+    },
+    error: {
+        root: 'bg-utility-red-50 text-utility-red-700 ring-utility-red-200',
+        addon: 'text-utility-red-500',
+        dotColor: 'utility-red-500',
+        addonButton: 'hover:bg-utility-red-100 text-utility-red-400 hover:text-utility-red-500',
+    },
+    warning: {
+        root: 'bg-utility-yellow-50 text-utility-yellow-700 ring-utility-yellow-200',
+        addon: 'text-utility-yellow-500',
+        dotColor: 'utility-yellow-500',
+        addonButton: 'hover:bg-utility-yellow-100 text-utility-yellow-400 hover:text-utility-yellow-500',
+    },
+    success: {
+        root: 'bg-utility-green-50 text-utility-green-700 ring-utility-green-200',
+        addon: 'text-utility-green-500',
+        dotColor: 'utility-green-500',
+        addonButton: 'hover:bg-utility-green-100 text-utility-green-400 hover:text-utility-green-500',
+    },
+    slate: {
+        root: 'bg-utility-slate-50 text-utility-slate-700 ring-utility-slate-200',
+        addon: 'text-utility-slate-500',
+        dotColor: 'utility-slate-500',
+        addonButton: 'hover:bg-utility-slate-100 text-utility-slate-400 hover:text-utility-slate-500',
+    },
+    sky: {
+        root: 'bg-utility-sky-50 text-utility-sky-700 ring-utility-sky-200',
+        addon: 'text-utility-sky-500',
+        dotColor: 'utility-sky-500',
+        addonButton: 'hover:bg-utility-sky-100 text-utility-sky-400 hover:text-utility-sky-500',
+    },
+    blue: {
+        root: 'bg-utility-blue-50 text-utility-blue-700 ring-utility-blue-200',
+        addon: 'text-utility-blue-500',
+        dotColor: 'utility-blue-500',
+        addonButton: 'hover:bg-utility-blue-100 text-utility-blue-400 hover:text-utility-blue-500',
+    },
+    indigo: {
+        root: 'bg-utility-indigo-50 text-utility-indigo-700 ring-utility-indigo-200',
+        addon: 'text-utility-indigo-500',
+        dotColor: 'utility-indigo-500',
+        addonButton: 'hover:bg-utility-indigo-100 text-utility-indigo-400 hover:text-utility-indigo-500',
+    },
+    purple: {
+        root: 'bg-utility-purple-50 text-utility-purple-700 ring-utility-purple-200',
+        addon: 'text-utility-purple-500',
+        dotColor: 'utility-purple-500',
+        addonButton: 'hover:bg-utility-purple-100 text-utility-purple-400 hover:text-utility-purple-500',
+    },
+    pink: {
+        root: 'bg-utility-pink-50 text-utility-pink-700 ring-utility-pink-200',
+        addon: 'text-utility-pink-500',
+        dotColor: 'utility-pink-500',
+        addonButton: 'hover:bg-utility-pink-100 text-utility-pink-400 hover:text-utility-pink-500',
+    },
+    orange: {
+        root: 'bg-utility-orange-50 text-utility-orange-700 ring-utility-orange-200',
+        addon: 'text-utility-orange-500',
+        dotColor: 'utility-orange-500',
+        addonButton: 'hover:bg-utility-orange-100 text-utility-orange-400 hover:text-utility-orange-500',
+    },
+};
+const addonOnlyColors = Object.fromEntries(Object.entries(filledColors).map(([key, value]) => [key, { root: '', addon: value.addon, dotColor: value.dotColor }]));
+const shapeCommon = {
+    [badgeTypes.pillColor]: 'size-max flex items-center whitespace-nowrap rounded-full ring-1 ring-inset',
+    [badgeTypes.badgeColor]: 'size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset',
+    [badgeTypes.badgeModern]: 'size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset shadow-xs',
+};
+/** Pill sizes, and the square-cornered sizes the `color` and `modern` types share. */
+const bySize = (pill, badge) => ({
+    [badgeTypes.pillColor]: pill,
+    [badgeTypes.badgeColor]: badge,
+    [badgeTypes.badgeModern]: badge,
+});
+/**
+ * Shared `Badge` style config, read by `index.tsx` (and by `index.native.tsx` once it exists).
+ *
+ * `types.standard` serves `Badge`, `BadgeWithFlag`, `BadgeWithImage`, `BadgeWithButton` and `BadgeIcon`:
+ * its `modern` type only offers `gray`, with the fill in `root`. `types.addon` serves `BadgeWithDot`
+ * and `BadgeWithIcon`: its `modern` type takes every colour, which tints only the dot or icon while
+ * the fill sits in `common`.
+ *
+ * Complete literal class names, never template literals — Tailwind scans source for whole candidates.
+ */
+const styles = {
+    types: {
+        addon: {
+            [badgeTypes.pillColor]: { common: shapeCommon[badgeTypes.pillColor], styles: filledColors },
+            [badgeTypes.badgeColor]: { common: shapeCommon[badgeTypes.badgeColor], styles: filledColors },
+            [badgeTypes.badgeModern]: {
+                common: 'size-max flex items-center whitespace-nowrap rounded-md ring-1 ring-inset bg-primary text-secondary ring-primary shadow-xs',
+                styles: addonOnlyColors,
+            },
+        },
+    },
+    sizes: {
+        label: bySize({
+            sm: 'py-0.5 px-2 text-xs font-medium',
+            md: 'py-0.5 px-2.5 text-sm font-medium',
+            lg: 'py-1 px-3 text-sm font-medium',
+        }, {
+            sm: 'py-0.5 px-1.5 text-xs font-medium',
+            md: 'py-0.5 px-2 text-sm font-medium',
+            lg: 'py-1 px-2.5 text-sm font-medium rounded-lg',
+        }),
+        dot: bySize({
+            sm: 'gap-1 py-0.5 pl-1.5 pr-2 text-xs font-medium',
+            md: 'gap-1.5 py-0.5 pl-2 pr-2.5 text-sm font-medium',
+            lg: 'gap-1.5 py-1 pl-2.5 pr-3 text-sm font-medium',
+        }, {
+            sm: 'gap-1 py-0.5 px-1.5 text-xs font-medium',
+            md: 'gap-1.5 py-0.5 px-2 text-sm font-medium',
+            lg: 'gap-1.5 py-1 px-2.5 text-sm font-medium rounded-lg',
+        }),
+        icon: bySize({
+            sm: {
+                trailing: 'gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-medium',
+                leading: 'gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-medium',
+            },
+            md: {
+                trailing: 'gap-1 py-0.5 pl-2.5 pr-2 text-sm font-medium',
+                leading: 'gap-1 py-0.5 pr-2.5 pl-2 text-sm font-medium',
+            },
+            lg: {
+                trailing: 'gap-1 py-1 pl-3 pr-2.5 text-sm font-medium',
+                leading: 'gap-1 py-1 pr-3 pl-2.5 text-sm font-medium',
+            },
+        }, {
+            sm: {
+                trailing: 'gap-0.5 py-0.5 pl-2 pr-1.5 text-xs font-medium',
+                leading: 'gap-0.5 py-0.5 pr-2 pl-1.5 text-xs font-medium',
+            },
+            md: {
+                trailing: 'gap-1 py-0.5 pl-2 pr-1.5 text-sm font-medium',
+                leading: 'gap-1 py-0.5 pr-2 pl-1.5 text-sm font-medium',
+            },
+            lg: {
+                trailing: 'gap-1 py-1 pl-2.5 pr-2 text-sm font-medium rounded-lg',
+                leading: 'gap-1 py-1 pr-2.5 pl-2 text-sm font-medium rounded-lg',
+            },
+        }),
+        /** Shared by `BadgeWithFlag` and `BadgeWithImage`, whose media sits flush to the leading edge. */
+        media: bySize({
+            sm: 'gap-1 py-0.5 pl-0.75 pr-2 text-xs font-medium',
+            md: 'gap-1.5 py-0.5 pl-1 pr-2.5 text-sm font-medium',
+            lg: 'gap-1.5 py-1 pl-1.5 pr-3 text-sm font-medium',
+        }, {
+            sm: 'gap-1 py-0.5 pl-1 pr-1.5 text-xs font-medium',
+            md: 'gap-1.5 py-0.5 pl-1.5 pr-2 text-sm font-medium',
+            lg: 'gap-1.5 py-1 pl-2 pr-2.5 text-sm font-medium rounded-lg',
+        }),
+        button: bySize({
+            sm: 'gap-0.5 py-0.5 pl-2 pr-0.75 text-xs font-medium',
+            md: 'gap-0.5 py-0.5 pl-2.5 pr-1 text-sm font-medium',
+            lg: 'gap-0.5 py-1 pl-3 pr-1.5 text-sm font-medium',
+        }, {
+            sm: 'gap-0.5 py-0.5 pl-1.5 pr-0.75 text-xs font-medium',
+            md: 'gap-0.5 py-0.5 pl-2 pr-1 text-sm font-medium',
+            lg: 'gap-0.5 py-1 pl-2.5 pr-1.5 text-sm font-medium rounded-lg',
+        }),
+        iconOnly: bySize({ sm: 'p-1.25', md: 'p-1.5', lg: 'p-2' }, { sm: 'p-1.25', md: 'p-1.5', lg: 'p-2 rounded-lg' }),
+    },
+    /**
+     * React Native only. Text and icon colours are light-mode hex rather than tokens: `Text` ignores
+     * `className` under the current `react-native-css` preview (see `Avatar/index.native.tsx`) and an icon
+     * has no `currentColor` to inherit, so both take an explicit value, as `Button` does. `text` mirrors
+     * web's `*-700`, `addon` its `*-500`, and `button`, `buttonPressed` and `buttonPressedBg` the dismiss button's resting tint and `hover:` state.
+     * `bg` and `border` are classes because a `View` resolves them. Primitive hex values are
+     * Tailwind's, so they match web in light mode only.
+     */
+    native: {
+        common: {
+            [badgeTypes.pillColor]: 'flex-row items-center self-start rounded-full',
+            [badgeTypes.badgeColor]: 'flex-row items-center self-start rounded-md',
+            [badgeTypes.badgeModern]: 'flex-row items-center self-start rounded-md shadow-xs',
+        },
+        colors: {
+            gray: {
+                bg: 'bg-utility-neutral-50',
+                border: 'border-utility-neutral-200',
+                text: '#404040',
+                addon: '#737373',
+                button: '#a3a3a3',
+                buttonPressed: '#737373',
+                buttonPressedBg: 'bg-utility-neutral-100',
+            },
+            brand: {
+                bg: 'bg-utility-brand-50',
+                border: 'border-utility-brand-200',
+                text: '#085eb1',
+                addon: '#1c8bf3',
+                button: '#4ea3f9',
+                buttonPressed: '#1c8bf3',
+                buttonPressedBg: 'bg-utility-brand-100',
+            },
+            error: {
+                bg: 'bg-utility-red-50',
+                border: 'border-utility-red-200',
+                text: '#b91c1c',
+                addon: '#ef4444',
+                button: '#f87171',
+                buttonPressed: '#ef4444',
+                buttonPressedBg: 'bg-utility-red-100',
+            },
+            warning: {
+                bg: 'bg-utility-yellow-50',
+                border: 'border-utility-yellow-200',
+                text: '#a16207',
+                addon: '#eab308',
+                button: '#facc15',
+                buttonPressed: '#eab308',
+                buttonPressedBg: 'bg-utility-yellow-100',
+            },
+            success: {
+                bg: 'bg-utility-green-50',
+                border: 'border-utility-green-200',
+                text: '#15803d',
+                addon: '#22c55e',
+                button: '#4ade80',
+                buttonPressed: '#22c55e',
+                buttonPressedBg: 'bg-utility-green-100',
+            },
+            slate: {
+                bg: 'bg-utility-slate-50',
+                border: 'border-utility-slate-200',
+                text: '#334155',
+                addon: '#64748b',
+                button: '#94a3b8',
+                buttonPressed: '#64748b',
+                buttonPressedBg: 'bg-utility-slate-100',
+            },
+            sky: {
+                bg: 'bg-utility-sky-50',
+                border: 'border-utility-sky-200',
+                text: '#0369a1',
+                addon: '#0ea5e9',
+                button: '#38bdf8',
+                buttonPressed: '#0ea5e9',
+                buttonPressedBg: 'bg-utility-sky-100',
+            },
+            blue: {
+                bg: 'bg-utility-blue-50',
+                border: 'border-utility-blue-200',
+                text: '#1d4ed8',
+                addon: '#3b82f6',
+                button: '#60a5fa',
+                buttonPressed: '#3b82f6',
+                buttonPressedBg: 'bg-utility-blue-100',
+            },
+            indigo: {
+                bg: 'bg-utility-indigo-50',
+                border: 'border-utility-indigo-200',
+                text: '#4338ca',
+                addon: '#6366f1',
+                button: '#818cf8',
+                buttonPressed: '#6366f1',
+                buttonPressedBg: 'bg-utility-indigo-100',
+            },
+            purple: {
+                bg: 'bg-utility-purple-50',
+                border: 'border-utility-purple-200',
+                text: '#7e22ce',
+                addon: '#a855f7',
+                button: '#c084fc',
+                buttonPressed: '#a855f7',
+                buttonPressedBg: 'bg-utility-purple-100',
+            },
+            pink: {
+                bg: 'bg-utility-pink-50',
+                border: 'border-utility-pink-200',
+                text: '#be185d',
+                addon: '#ec4899',
+                button: '#f472b6',
+                buttonPressed: '#ec4899',
+                buttonPressedBg: 'bg-utility-pink-100',
+            },
+            orange: {
+                bg: 'bg-utility-orange-50',
+                border: 'border-utility-orange-200',
+                text: '#c2410c',
+                addon: '#f97316',
+                button: '#fb923c',
+                buttonPressed: '#f97316',
+                buttonPressedBg: 'bg-utility-orange-100',
+            },
+        },
+        /** The neutral `modern` fill; `text` is `text-secondary` and `addon` is `fg-quaternary`. */
+        modern: {
+            bg: 'bg-primary',
+            border: 'border-primary',
+            text: '#404040',
+            addon: '#a3a3a3',
+            button: '#a3a3a3',
+            buttonPressed: '#737373',
+            buttonPressedBg: 'bg-utility-neutral-100',
+        },
+        /** Pixel size of the leading, trailing and dismiss icons — web's `size-3`. */
+        iconSize: 12,
+        /** Stroke width of those icons, in the 24px icon viewBox — web's `stroke-3`. */
+        iconStrokeWidth: 3,
+        /** Diameter of the image in `BadgeWithImage` — web's `size-4`. */
+        imageSize: 16,
+        /** Label type scale, web's `text-xs` for `sm` and `text-sm` otherwise. */
+        text: {
+            sm: { fontSize: 12, lineHeight: 16 },
+            md: { fontSize: 14, lineHeight: 20 },
+            lg: { fontSize: 14, lineHeight: 20 },
+        },
+    },
+};
+
+export { styles };
+//# sourceMappingURL=Badge.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.styles.js","sources":["../../../../../../src/components/atoms/Badge/Badge.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/native/components/atoms/Badge/badge.types.d.ts

@@ -0,0 +1,21 @@
+export type IconComponentType = React.FunctionComponent<{
+    className?: string;
+    strokeWidth?: string | number;
+}>;
+export type Sizes = 'sm' | 'md' | 'lg';
+export type BadgeColors = 'gray' | 'brand' | 'error' | 'warning' | 'success' | 'slate' | 'sky' | 'blue' | 'indigo' | 'purple' | 'pink' | 'orange';
+export type ExtractColorKeys<T> = T extends {
+    styles: infer C;
+} ? keyof C : never;
+export type ExtractBadgeKeys<T> = keyof T;
+export type BadgeTypeToColorMap<T> = {
+    [K in ExtractBadgeKeys<T>]: ExtractColorKeys<T[K]>;
+};
+export type BadgeTypeColors<T> = ExtractColorKeys<T[keyof T]>;
+export declare const badgeTypes: {
+    readonly pillColor: "pill-color";
+    readonly badgeColor: "color";
+    readonly badgeModern: "modern";
+};
+export type BadgeTypes = (typeof badgeTypes)[keyof typeof badgeTypes];
+//# sourceMappingURL=badge.types.d.ts.map

package/dist/native/components/atoms/Badge/badge.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Badge/badge.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC,CAAC;AAE/G,MAAM,MAAM,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;AAElJ,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS;IAAE,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC;AAClF,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;AAC1C,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;KAClC,CAAC,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACnD,CAAC;AACF,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAE9D,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC"}

package/dist/native/components/atoms/Badge/badge.types.js

@@ -0,0 +1,8 @@
+const badgeTypes = {
+    pillColor: 'pill-color',
+    badgeColor: 'color',
+    badgeModern: 'modern',
+};
+
+export { badgeTypes };
+//# sourceMappingURL=badge.types.js.map

package/dist/native/components/atoms/Badge/badge.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.types.js","sources":["../../../../../../src/components/atoms/Badge/badge.types.ts"],"sourcesContent":[null],"names":[],"mappings":"AAaO,MAAM,UAAU,GAAG;AACxB,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,UAAU,EAAE,OAAO;AACnB,IAAA,WAAW,EAAE,QAAQ;;;"}

package/dist/native/components/atoms/Badge/badge.utils.d.ts

@@ -0,0 +1,21 @@
+import { type NativeTone } from './Badge.styles';
+import type { BadgeColors, BadgeTypes } from './badge.types';
+/**
+ * Drops the typography utilities from a shared size string, leaving the padding, gap and radius a
+ * React Native `View` can resolve. The label's size and weight reach `Text` through `style` instead.
+ *
+ * @param sizeClasses A size entry from `styles.sizes`, which mixes layout and `text-*`/`font-*` utilities.
+ * @returns The same classes without any `text-*` or `font-*` utility.
+ */
+export declare const layoutClasses: (sizeClasses: string) => string;
+/**
+ * Resolves the React Native colour set for a badge.
+ *
+ * @param kind `standard` for badges whose `modern` type is a fixed neutral fill, `addon` for those where
+ * `modern` keeps the neutral fill but tints the dot or icon with `color` (see `Badge.styles.ts`).
+ * @param type The badge shape; only `modern` changes the result.
+ * @param color The badge colour, honoured everywhere except the fill of a `modern` badge.
+ * @returns The classes and hex values to paint the fill, label and icons.
+ */
+export declare const resolveNativeTone: (kind: "standard" | "addon", type: BadgeTypes, color: BadgeColors) => NativeTone;
+//# sourceMappingURL=badge.utils.d.ts.map

package/dist/native/components/atoms/Badge/badge.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Badge/badge.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAU,MAAM,gBAAgB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE7D;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAI,aAAa,MAAM,WAInC,CAAC;AAEf;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,UAAU,GAAG,OAAO,EAAE,MAAM,UAAU,EAAE,OAAO,WAAW,KAAG,UAIpG,CAAC"}

package/dist/native/components/atoms/Badge/badge.utils.js

@@ -0,0 +1,32 @@
+import { styles } from './Badge.styles.js';
+
+/**
+ * Drops the typography utilities from a shared size string, leaving the padding, gap and radius a
+ * React Native `View` can resolve. The label's size and weight reach `Text` through `style` instead.
+ *
+ * @param sizeClasses A size entry from `styles.sizes`, which mixes layout and `text-*`/`font-*` utilities.
+ * @returns The same classes without any `text-*` or `font-*` utility.
+ */
+const layoutClasses = (sizeClasses) => sizeClasses
+    .split(' ')
+    .filter((token) => !token.startsWith('text-') && !token.startsWith('font-'))
+    .join(' ');
+/**
+ * Resolves the React Native colour set for a badge.
+ *
+ * @param kind `standard` for badges whose `modern` type is a fixed neutral fill, `addon` for those where
+ * `modern` keeps the neutral fill but tints the dot or icon with `color` (see `Badge.styles.ts`).
+ * @param type The badge shape; only `modern` changes the result.
+ * @param color The badge colour, honoured everywhere except the fill of a `modern` badge.
+ * @returns The classes and hex values to paint the fill, label and icons.
+ */
+const resolveNativeTone = (kind, type, color) => {
+    if (type !== 'modern')
+        return styles.native.colors[color];
+    if (kind === 'standard')
+        return styles.native.modern;
+    return { ...styles.native.modern, addon: styles.native.colors[color].addon };
+};
+
+export { layoutClasses, resolveNativeTone };
+//# sourceMappingURL=badge.utils.js.map

package/dist/native/components/atoms/Badge/badge.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.utils.js","sources":["../../../../../../src/components/atoms/Badge/badge.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA;;;;;;AAMG;MACU,aAAa,GAAG,CAAC,WAAmB,KAC/C;KACG,KAAK,CAAC,GAAG;KACT,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;KAC1E,IAAI,CAAC,GAAG;AAEb;;;;;;;;AAQG;AACI,MAAM,iBAAiB,GAAG,CAAC,IAA0B,EAAE,IAAgB,EAAE,KAAkB,KAAgB;IAChH,IAAI,IAAI,KAAK,QAAQ;QAAE,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IACzD,IAAI,IAAI,KAAK,UAAU;AAAE,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM;IACpD,OAAO,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE;AAC9E;;"}

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

@@ -1,12 +1,98 @@
+import { type FC, type ReactNode } from 'react';
+import { type PressableProps } from 'react-native';
+import { styles } from './Badge.styles';
+import type { BadgeTypes, BadgeTypeToColorMap, Sizes } from './badge.types';
+export type { BadgeColors } from './badge.types';
+type IconComponent = FC<{
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+}>;
+/** The colours a badge accepts for a given `type`; `modern` is neutral, so it only takes `gray`. */
+export type BadgeColor<T extends BadgeTypes> = BadgeTypeToColorMap<typeof styles.types.standard>[T];
+export interface BadgeProps<T extends BadgeTypes> {
+    /** Selects the shape: a fully rounded `pill-color`, a square-cornered `color`, or a neutral `modern`. */
+    type?: T;
+    /** Sets the padding and text size. */
+    size?: Sizes;
+    /** Sets the fill, text and border colours; the options available depend on `type`. */
+    color?: BadgeColor<T>;
+    /** Label shown inside the badge. */
+    children: ReactNode;
+    /** Layout classes merged onto the root `View`, such as margins. Colour goes through `color`. */
+    className?: string;
+    /** Overrides the generated `testID` (defaults to `fd-badge`). */
+    'data-testid'?: string;
+}
 /**
- * `Badge` has no React Native implementation.
+ * React Native `Badge` — a compact label for statuses, categories, counts and tags, drawn as a
+ * `View` holding a `Text`. All variants and sizes match web.
  *
- * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
- * that importing `@flipdish/ui-library/components/atoms/Badge` 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.
+ * - The ring becomes a `border` on every variant, since `ring-inset` is unverified under `react-native-css`.
+ * - Label and icon colours are light-mode hex values, not tokens: `Text` ignores `className` under the
+ *   current `react-native-css` preview and an icon has no `currentColor` to inherit (see `Badge.styles.ts`).
+ * - `BadgeWithFlag` is not available yet because `Flag` has no React Native implementation.
+ * - `className` accepts layout classes only; transitions have no equivalent.
  *
- * To make `Badge` available on React Native, add an `index.native.tsx` beside
- * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ * @summary compact status, category, or count label (React Native)
  */
-export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;
+export declare const Badge: <T extends BadgeTypes>({ type, size, color, children, className, "data-testid": dataTestId, }: BadgeProps<T>) => import("react").JSX.Element;
+interface BadgeWithDotProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof styles.types.addon>[T];
+    className?: string;
+    children: ReactNode;
+    /** Overrides the generated `testID` (defaults to `fd-badge`); the `Dot` derives `--dot` from it. */
+    'data-testid'?: string;
+}
+/** `Badge` variant with a coloured status dot before the label. */
+export declare const BadgeWithDot: <T extends BadgeTypes>({ size, color, type, className, children, "data-testid": dataTestId, }: BadgeWithDotProps<T>) => import("react").JSX.Element;
+interface BadgeWithIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    color?: BadgeTypeToColorMap<typeof styles.types.addon>[T];
+    iconLeading?: IconComponent;
+    iconTrailing?: IconComponent;
+    children: ReactNode;
+    className?: string;
+    /** Overrides the generated `testID` (defaults to `fd-badge`); the leading/trailing icon derives `--icon` from it. */
+    'data-testid'?: string;
+}
+/** `Badge` variant with a leading or trailing icon beside the label. */
+export declare const BadgeWithIcon: <T extends BadgeTypes>({ size, color, type, iconLeading: IconLeading, iconTrailing: IconTrailing, children, className, "data-testid": dataTestId, }: BadgeWithIconProps<T>) => import("react").JSX.Element;
+interface BadgeWithImageProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    /** URL of the image shown before the label. */
+    imgSrc: string;
+    color?: BadgeColor<T>;
+    children: ReactNode;
+}
+/** `Badge` variant with a small round image before the label. */
+export declare const BadgeWithImage: <T extends BadgeTypes>({ size, color, type, imgSrc, children, }: BadgeWithImageProps<T>) => import("react").JSX.Element;
+interface BadgeWithButtonProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    /** Icon shown in the trailing button; defaults to a close `X`. */
+    icon?: IconComponent;
+    color?: BadgeColor<T>;
+    children: ReactNode;
+    /** The accessible name of the button. */
+    buttonLabel?: string;
+    /** Called when the trailing button is pressed. */
+    onButtonClick?: PressableProps['onPress'];
+    /** Overrides the generated `testID` (defaults to `fd-badge`); the dismiss button derives `--close-button` from it. */
+    'data-testid'?: string;
+}
+/** `Badge` variant with a trailing icon button, typically to dismiss or remove the tag. */
+export declare const BadgeWithButton: <T extends BadgeTypes>({ size, color, type, icon: Icon, buttonLabel, onButtonClick, children, "data-testid": dataTestId, }: BadgeWithButtonProps<T>) => import("react").JSX.Element;
+interface BadgeIconProps<T extends BadgeTypes> {
+    type?: T;
+    size?: Sizes;
+    icon: IconComponent;
+    color?: BadgeColor<T>;
+}
+/** Icon-only `Badge` with no label text. */
+export declare const BadgeIcon: <T extends BadgeTypes>({ size, color, type, icon: Icon, }: BadgeIconProps<T>) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Badge/index.native.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { X } from '@flipdish/ui-icons';
+import { Dot } from '../Dot/index.js';
+import { cx } from '../../../utilities/cx/index.js';
+import { useResolvedTestId, joinTestId } from '../../../utilities/testIdUtils/index.js';
+import { useState } from 'react';
+import { View, Pressable, Image, Text } from 'react-native';
+import { styles } from './Badge.styles.js';
+import { layoutClasses, resolveNativeTone } from './badge.utils.js';
+
+/** Root classes shared by every labelled variant: shape, fill, border and the layout half of the size. */
+const rootClass = (type, sizeClasses, tone, className) => cx(styles.native.common[type], 'border', tone.bg, tone.border, layoutClasses(sizeClasses), className);
+const Label = ({ size, color, children }) => (jsx(Text, { style: { color, fontWeight: '500', ...styles.native.text[size] }, children: children }));
+/**
+ * React Native `Badge` — a compact label for statuses, categories, counts and tags, drawn as a
+ * `View` holding a `Text`. All variants and sizes match web.
+ *
+ * - The ring becomes a `border` on every variant, since `ring-inset` is unverified under `react-native-css`.
+ * - Label and icon colours are light-mode hex values, not tokens: `Text` ignores `className` under the
+ *   current `react-native-css` preview and an icon has no `currentColor` to inherit (see `Badge.styles.ts`).
+ * - `BadgeWithFlag` is not available yet because `Flag` has no React Native implementation.
+ * - `className` accepts layout classes only; transitions have no equivalent.
+ *
+ * @summary compact status, category, or count label (React Native)
+ */
+const Badge = ({ type = 'pill-color', size = 'md', color = 'gray', children, className, 'data-testid': dataTestId, }) => {
+    const badgeTestId = useResolvedTestId({ testId: dataTestId, segment: 'badge', rootName: 'badge' });
+    const tone = resolveNativeTone('standard', type, color);
+    return (jsx(View, { testID: badgeTestId, className: rootClass(type, styles.sizes.label[type][size], tone, className), children: jsx(Label, { size: size, color: tone.text, children: children }) }));
+};
+/** `Badge` variant with a coloured status dot before the label. */
+const BadgeWithDot = ({ size = 'md', color = 'gray', type = 'pill-color', className, children, 'data-testid': dataTestId, }) => {
+    const badgeTestId = useResolvedTestId({ testId: dataTestId, segment: 'badge', rootName: 'badge' });
+    const tone = resolveNativeTone('addon', type, color);
+    const dotColor = styles.types.addon[type].styles[color].dotColor;
+    return (jsxs(View, { testID: badgeTestId, className: rootClass(type, styles.sizes.dot[type][size], tone, className), children: [jsx(Dot, { color: dotColor, size: "sm", "data-testid": joinTestId(badgeTestId, 'dot') }), jsx(Label, { size: size, color: tone.text, children: children })] }));
+};
+/** `Badge` variant with a leading or trailing icon beside the label. */
+const BadgeWithIcon = ({ size = 'md', color = 'gray', type = 'pill-color', iconLeading: IconLeading, iconTrailing: IconTrailing, children, className, 'data-testid': dataTestId, }) => {
+    const badgeTestId = useResolvedTestId({ testId: dataTestId, segment: 'badge', rootName: 'badge' });
+    const tone = resolveNativeTone('addon', type, color);
+    const placement = IconLeading ? 'leading' : 'trailing';
+    const iconProps = { size: styles.native.iconSize, color: tone.addon, strokeWidth: styles.native.iconStrokeWidth };
+    return (jsxs(View, { testID: badgeTestId, className: rootClass(type, styles.sizes.icon[type][size][placement], tone, className), children: [IconLeading && (jsx(View, { testID: joinTestId(badgeTestId, 'icon'), children: jsx(IconLeading, { ...iconProps }) })), jsx(Label, { size: size, color: tone.text, children: children }), IconTrailing && (jsx(View, { testID: joinTestId(badgeTestId, 'icon'), children: jsx(IconTrailing, { ...iconProps }) }))] }));
+};
+/** `Badge` variant with a small round image before the label. */
+const BadgeWithImage = ({ size = 'md', color = 'gray', type = 'pill-color', imgSrc, children, }) => {
+    const tone = resolveNativeTone('standard', type, color);
+    const { imageSize } = styles.native;
+    return (jsxs(View, { className: rootClass(type, styles.sizes.media[type][size], tone), children: [jsx(Image, { source: { uri: imgSrc }, accessibilityLabel: "Badge image", style: { width: imageSize, height: imageSize, borderRadius: imageSize / 2 } }), jsx(Label, { size: size, color: tone.text, children: children })] }));
+};
+/** `Badge` variant with a trailing icon button, typically to dismiss or remove the tag. */
+const BadgeWithButton = ({ size = 'md', color = 'gray', type = 'pill-color', icon: Icon = X, buttonLabel, onButtonClick, children, 'data-testid': dataTestId, }) => {
+    const badgeTestId = useResolvedTestId({ testId: dataTestId, segment: 'badge', rootName: 'badge' });
+    const [pressed, setPressed] = useState(false);
+    const tone = resolveNativeTone('standard', type, color);
+    return (jsxs(View, { testID: badgeTestId, className: rootClass(type, styles.sizes.button[type][size], tone), children: [jsx(Label, { size: size, color: tone.text, children: children }), jsx(Pressable, { testID: joinTestId(badgeTestId, 'close-button'), accessibilityRole: "button", accessibilityLabel: buttonLabel, onPress: onButtonClick, onPressIn: () => setPressed(true), onPressOut: () => setPressed(false), className: cx('items-center justify-center p-0.5', type === 'pill-color' ? 'rounded-full' : 'rounded-[3px]', pressed && tone.buttonPressedBg), children: jsx(Icon, { size: styles.native.iconSize, color: pressed ? tone.buttonPressed : tone.button, strokeWidth: styles.native.iconStrokeWidth }) })] }));
+};
+/** Icon-only `Badge` with no label text. */
+const BadgeIcon = ({ size = 'md', color = 'gray', type = 'pill-color', icon: Icon, }) => {
+    const tone = resolveNativeTone('standard', type, color);
+    return (jsx(View, { className: cx(styles.native.common[type], 'border', tone.bg, tone.border, layoutClasses(styles.sizes.iconOnly[type][size])), children: jsx(Icon, { size: styles.native.iconSize, color: tone.addon, strokeWidth: styles.native.iconStrokeWidth }) }));
+};
+
+export { Badge, BadgeIcon, BadgeWithButton, BadgeWithDot, BadgeWithIcon, BadgeWithImage };
+//# sourceMappingURL=index.js.map