@flipdish/ui-library 0.41.2 → 0.42.0

package/dist/components/molecules/Tags/index.d.ts

@@ -1,5 +1,9 @@
+import { type DotColor } from '@flipdish/ui-library/components/atoms/Dot';
 import { type ImgHTMLAttributes, type PropsWithChildren, type RefAttributes } from 'react';
 import { type TagGroupProps as AriaTagGroupProps, type TagProps as AriaTagProps } from 'react-aria-components';
+import { type TagSize } from './Tags.styles';
+export type { DotColor } from '@flipdish/ui-library/components/atoms/Dot';
+export type { TagSize } from './Tags.styles';
 /** Small round avatar shown at the start of a `Tag`, falling back to a user icon when the image is missing or fails. */
 export declare const TagAvatar: ({ src, alt, contrastBorder, className }: ImgHTMLAttributes<HTMLImageElement> & {
     contrastBorder?: boolean;
@@ -11,6 +15,12 @@ export interface TagItem {
     avatarSrc?: string;
     avatarContrastBorder?: boolean;
     dot?: boolean;
+    /** Semantic fill for the status dot; same tokens as `Dot`'s `color`. Defaults to `fg-success-secondary`. */
+    dotColor?: DotColor;
+    /**
+     * @deprecated Prefer `dotColor`. Web-only `text-*` class merged onto the status `Dot` via
+     * `currentColor` — not available on React Native.
+     */
     dotClassName?: string;
     isDisabled?: boolean;
     onClose?: (id: string) => void;
@@ -19,7 +29,7 @@ export interface TagGroupProps extends AriaTagGroupProps, RefAttributes<HTMLDivE
     /** Accessible name of the group, applied as its `aria-label`. */
     label: string;
     /** Size of every `Tag` in the group, shared through context. */
-    size?: 'sm' | 'md' | 'lg';
+    size?: TagSize;
     /**
      * Overrides the derived root `data-testid` (defaults to `fd-tag-group`).
      * Tags derive their ids from this prefix, so overriding it re-roots every
@@ -44,6 +54,5 @@ interface TagProps extends AriaTagProps, RefAttributes<object>, Omit<TagItem, 'l
     'data-testid'?: string;
 }
 /** A single tag inside a `TagList`, with an optional avatar or dot, count, selection checkbox and remove button. */
-export declare const Tag: ({ id, avatarSrc, avatarContrastBorder, dot, dotClassName, isDisabled, count, className, children, onClose, "data-testid": dataTestId, }: PropsWithChildren<TagProps>) => import("react").JSX.Element;
-export {};
+export declare const Tag: ({ id, avatarSrc, avatarContrastBorder, dot, dotColor, dotClassName, isDisabled, count, className, children, onClose, "data-testid": dataTestId, }: PropsWithChildren<TagProps>) => import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/Tags/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tags/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAwB,MAAM,OAAO,CAAC;AAChI,OAAO,EAGL,KAAK,aAAa,IAAI,iBAAiB,EAEvC,KAAK,QAAQ,IAAI,YAAY,EAC9B,MAAM,uBAAuB,CAAC;AAI/B,wHAAwH;AACxH,eAAO,MAAM,SAAS,GAAI,yCAAgD,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAAE,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,gCAkB3I,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAUD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,aAAa,CAAC,cAAc,CAAC;IACrF,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,oFAAoG,aAAa,gCAkBzI,CAAC;AAEF,4GAA4G;AAC5G,eAAO,MAAM,OAAO,oLAAc,CAAC;AAyCnC,UAAU,QAAS,SAAQ,YAAY,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3F;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,oHAAoH;AACpH,eAAO,MAAM,GAAG,GAAI,yIAYjB,iBAAiB,CAAC,QAAQ,CAAC,gCAqE7B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Tags/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAG/E,OAAO,EAAiB,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,KAAK,aAAa,EAAwB,MAAM,OAAO,CAAC;AAChI,OAAO,EAGL,KAAK,aAAa,IAAI,iBAAiB,EAEvC,KAAK,QAAQ,IAAI,YAAY,EAC9B,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAErD,YAAY,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAC1E,YAAY,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,wHAAwH;AACxH,eAAO,MAAM,SAAS,GAAI,yCAAgD,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IAAE,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE,gCAY3I,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAUD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,aAAa,CAAC,cAAc,CAAC;IACrF,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,oFAAoG,aAAa,gCAkBzI,CAAC;AAEF,4GAA4G;AAC5G,eAAO,MAAM,OAAO,oLAAc,CAAC;AAEnC,UAAU,QAAS,SAAQ,YAAY,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3F;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,oHAAoH;AACpH,eAAO,MAAM,GAAG,GAAI,mJAajB,iBAAiB,CAAC,QAAQ,CAAC,gCAiE7B,CAAC"}

package/dist/components/molecules/Tags/index.js

@@ -7,11 +7,12 @@ import { createContext, useContext, useState } from 'react';
 import { TagList as TagList$1, Tag as Tag$1, TagGroup as TagGroup$1 } from 'react-aria-components';
 import { TagCheckbox } from './components/TagCheckbox.js';
 import { TagCloseX } from './components/TagCloseX.js';
+import { styles } from './Tags.styles.js';
 
 /** Small round avatar shown at the start of a `Tag`, falling back to a user icon when the image is missing or fails. */
 const TagAvatar = ({ src, alt, contrastBorder = true, className }) => {
     const [isFailed, setIsFailed] = useState(false);
-    return (jsx("div", { className: cx('relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary', contrastBorder && 'outline-[0.5px] -outline-offset-[0.5px] outline-black/16', className), children: src && !isFailed ? (jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src: src, alt: alt, onError: () => setIsFailed(true) })) : (jsx(User01, { className: "size-3 stroke-[2.25px] text-fg-quaternary" })) }));
+    return (jsx("div", { className: cx(styles.avatar, contrastBorder && 'outline-[0.5px] -outline-offset-[0.5px] outline-black/16', className), children: src && !isFailed ? (jsx("img", { "data-avatar-img": true, className: "size-full object-cover", src: src, alt: alt, onError: () => setIsFailed(true) })) : (jsx(User01, { className: "size-3 stroke-[2.25px] text-fg-quaternary" })) }));
 };
 const TagGroupContext = createContext({
     selectionMode: 'none',
@@ -29,65 +30,27 @@ const TagGroup = ({ label, selectionMode = 'none', size = 'sm', children, 'data-
 };
 /** Container for the `Tag` items inside a `TagGroup`; a plain alias of react-aria-components' `TagList`. */
 const TagList = TagList$1;
-const styles = {
-    sm: {
-        root: {
-            base: 'px-2 py-0.75 text-xs font-medium',
-            withCheckbox: 'pl-1.25',
-            withAvatar: 'pl-1',
-            withDot: 'pl-1.5',
-            withCount: 'pr-1',
-            withClose: 'pr-1',
-        },
-        content: 'gap-1',
-        count: 'px-1 text-xs font-medium',
-    },
-    md: {
-        root: {
-            base: 'px-2.25 py-0.5 text-sm font-medium',
-            withCheckbox: 'pl-1',
-            withAvatar: 'pl-1.25',
-            withDot: 'pl-1.75',
-            withCount: 'pr-0.75',
-            withClose: 'pr-1',
-        },
-        content: 'gap-1.25',
-        count: 'px-1.25 text-xs font-medium',
-    },
-    lg: {
-        root: {
-            base: 'px-2.5 py-1 text-sm font-medium',
-            withCheckbox: 'pl-1.25',
-            withAvatar: 'pl-1.75',
-            withDot: 'pl-2.25',
-            withCount: 'pr-1',
-            withClose: 'pr-1',
-        },
-        content: 'gap-1.5',
-        count: 'px-1.5 text-sm font-medium',
-    },
-};
 /** A single tag inside a `TagList`, with an optional avatar or dot, count, selection checkbox and remove button. */
-const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotClassName, isDisabled, count, className, children, onClose, 'data-testid': dataTestId, }) => {
+const Tag = ({ id, avatarSrc, avatarContrastBorder = true, dot, dotColor = 'fg-success-secondary', dotClassName, isDisabled, count, className, children, onClose, 'data-testid': dataTestId, }) => {
     const context = useContext(TagGroupContext);
     const prefix = useTestIdPrefix();
     const idPart = id !== undefined ? slugifyTestId(String(id)) : 'tag';
     const tagTestId = dataTestId ?? (prefix ? joinTestId(prefix, `tag-${idPart}`) : undefined);
     const closeTestId = tagTestId ? `${tagTestId}-close` : undefined;
-    const leadingContent = avatarSrc ? (jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder })) : dot ? (jsx(Dot, { color: "fg-success-secondary", className: dotClassName, size: "sm" })) : null;
-    return (jsx(Tag$1, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, "data-testid": tagTestId, className: (state) => cx('flex cursor-default items-center gap-0.75 rounded-md bg-primary text-secondary ring-1 ring-primary outline-focus-ring transition duration-50 ease-linear ring-inset focus-visible:outline-2 focus-visible:outline-offset-2', styles[context.size].root.base, 
+    const leadingContent = avatarSrc ? (jsx(TagAvatar, { src: avatarSrc, alt: "Avatar", contrastBorder: avatarContrastBorder })) : dot ? (jsx(Dot, { color: dotColor, className: dotClassName, size: "sm" })) : null;
+    return (jsx(Tag$1, { id: id, isDisabled: isDisabled, textValue: typeof children === 'string' ? children : undefined, "data-testid": tagTestId, className: (state) => cx(styles.root, styles.sizes[context.size].root.base, 
         // With avatar
-        avatarSrc && styles[context.size].root.withAvatar, 
+        avatarSrc && styles.sizes[context.size].root.withAvatar, 
         // With X button
-        (onClose || state.allowsRemoving) && styles[context.size].root.withClose, 
+        (onClose || state.allowsRemoving) && styles.sizes[context.size].root.withClose, 
         // With dot
-        dot && styles[context.size].root.withDot, 
+        dot && styles.sizes[context.size].root.withDot, 
         // With count
-        typeof count === 'number' && styles[context.size].root.withCount, 
+        typeof count === 'number' && styles.sizes[context.size].root.withCount, 
         // With checkbox
-        context.selectionMode !== 'none' && styles[context.size].root.withCheckbox, 
+        context.selectionMode !== 'none' && styles.sizes[context.size].root.withCheckbox, 
         // Disabled
-        isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxs(Fragment, { children: [jsxs("div", { className: cx('flex items-center gap-1', styles[context.size].content), children: [context.selectionMode !== 'none' && jsx(TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && (jsx("span", { className: cx('flex items-center justify-center rounded-[3px] bg-tertiary text-center', styles[context.size].count), children: count }))] }), (onClose || allowsRemoving) && (jsx(TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()), "data-testid": closeTestId }))] })) }));
+        isDisabled && 'cursor-not-allowed', typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, allowsRemoving }) => (jsxs(Fragment, { children: [jsxs("div", { className: cx('flex items-center gap-1', styles.sizes[context.size].content), children: [context.selectionMode !== 'none' && jsx(TagCheckbox, { size: context.size, isSelected: isSelected, isDisabled: isDisabled }), leadingContent, children, typeof count === 'number' && jsx("span", { className: cx(styles.count, styles.sizes[context.size].count), children: count })] }), (onClose || allowsRemoving) && (jsx(TagCloseX, { size: context.size, excludeFromTabOrder: allowsRemoving, onPress: () => id && onClose?.(id.toString()), "data-testid": closeTestId }))] })) }));
 };
 
 export { Tag, TagAvatar, TagGroup, TagList };

package/dist/components/molecules/Tags/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tags/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaTagGroup","AriaTagList","AriaTag","_jsxs","_Fragment"],"mappings":";;;;;;;;;;AAiBA;AACO,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,cAAc,GAAG,IAAI,EAAE,SAAS,EAAsE,KAAI;IAC9I,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAE/C,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,2GAA2G,EAC3G,cAAc,IAAI,0DAA0D,EAC5E,SAAS,CACV,EAAA,QAAA,EAEA,GAAG,IAAI,CAAC,QAAQ,IACfA,GAAA,CAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAqB,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,EAAA,CAAI,KAEhHA,GAAA,CAAC,MAAM,EAAA,EAAC,SAAS,EAAC,2CAA2C,EAAA,CAAG,CACjE,EAAA,CACG;AAEV;AAcA,MAAM,eAAe,GAAG,aAAa,CAGlC;AACD,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,IAAI,EAAE,IAAI;AACX,CAAA,CAAC;AAeF;;;;;AAKG;AACI,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,UAAU,EAAiB,KAAI;AAC5I,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAEzG,QACEA,IAAC,eAAe,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,YACtDA,GAAA,CAAC,cAAc,IAAC,KAAK,EAAE,UAAU,EAAA,QAAA,EAC/BA,GAAA,CAACC,UAAY,EAAA,EAAA,YAAA,EACC,KAAK,EACjB,aAAa,EAAE,aAAa,EAC5B,sBAAsB,EAAE,aAAa,KAAK,QAAQ,EAAA,GAC9C,UAAU,iBACD,UAAU,EAAA,QAAA,EAEtB,QAAQ,EAAA,CACI,EAAA,CACA,EAAA,CACQ;AAE/B;AAEA;AACO,MAAM,OAAO,GAAGC;AAEvB,MAAM,MAAM,GAAG;AACb,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,kCAAkC;AACxC,YAAA,YAAY,EAAE,SAAS;AACvB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA;AACD,QAAA,OAAO,EAAE,OAAO;AAChB,QAAA,KAAK,EAAE,0BAA0B;AAClC,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,oCAAoC;AAC1C,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,UAAU,EAAE,SAAS;AACrB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE,SAAS;AACpB,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA;AACD,QAAA,OAAO,EAAE,UAAU;AACnB,QAAA,KAAK,EAAE,6BAA6B;AACrC,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,iCAAiC;AACvC,YAAA,YAAY,EAAE,SAAS;AACvB,YAAA,UAAU,EAAE,SAAS;AACrB,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,SAAS,EAAE,MAAM;AAClB,SAAA;AACD,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE,4BAA4B;AACpC,KAAA;CACF;AAUD;AACO,MAAM,GAAG,GAAG,CAAC,EAClB,EAAE,EACF,SAAS,EACT,oBAAoB,GAAG,IAAI,EAC3B,GAAG,EACH,YAAY,EACZ,UAAU,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,EACP,aAAa,EAAE,UAAU,GACG,KAAI;AAChC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC;AAC3C,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;AAChC,IAAA,MAAM,MAAM,GAAG,EAAE,KAAK,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK;IACnE,MAAM,SAAS,GAAG,UAAU,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,CAAA,IAAA,EAAO,MAAM,CAAA,CAAE,CAAC,GAAG,SAAS,CAAC;AAC1F,IAAA,MAAM,WAAW,GAAG,SAAS,GAAG,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG,SAAS;IAEhE,MAAM,cAAc,GAAG,SAAS,IAC9BF,GAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,QAAQ,EAAC,cAAc,EAAE,oBAAoB,EAAA,CAAI,IAC9E,GAAG,IACLA,GAAA,CAAC,GAAG,EAAA,EAAC,KAAK,EAAC,sBAAsB,EAAC,SAAS,EAAE,YAAY,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,IACrE,IAAI;IAER,QACEA,IAACG,KAAO,EAAA,EACN,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,OAAO,QAAQ,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAAA,aAAA,EACjD,SAAS,EACtB,SAAS,EAAE,CAAC,KAAK,KACf,EAAE,CACA,4NAA4N,EAC5N,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;;QAG9B,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU;;AAEjD,QAAA,CAAC,OAAO,IAAI,KAAK,CAAC,cAAc,KAAK,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS;;QAExE,GAAG,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO;;AAExC,QAAA,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS;;AAEhE,QAAA,OAAO,CAAC,aAAa,KAAK,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY;;AAE1E,QAAA,UAAU,IAAI,oBAAoB,EAElC,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAC/D,EAAA,QAAA,EAGF,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAC1CC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,cAAK,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,CACxE,OAAO,CAAC,aAAa,KAAK,MAAM,IAAIJ,GAAA,CAAC,WAAW,EAAA,EAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAA,CAAI,EAEvH,cAAc,EAEd,QAAQ,EAER,OAAO,KAAK,KAAK,QAAQ,KACxBA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,wEAAwE,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAA,QAAA,EACtH,KAAK,EAAA,CACD,CACR,IACG,EAEL,CAAC,OAAO,IAAI,cAAc,MACzBA,GAAA,CAAC,SAAS,EAAA,EACR,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,mBAAmB,EAAE,cAAc,EACnC,OAAO,EAAE,MAAM,EAAE,IAAI,OAAO,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAA,aAAA,EAChC,WAAW,GACxB,CACH,CAAA,EAAA,CACA,CACJ,EAAA,CACO;AAEd;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Tags/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaTagGroup","AriaTagList","AriaTag","_jsxs","_Fragment"],"mappings":"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"}

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

@@ -49,6 +49,10 @@ export declare const styles: {
             web: string;
             native: string;
         };
+        'fg-warning-secondary': {
+            web: string;
+            native: string;
+        };
         'border-primary': {
             web: string;
             native: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Dot.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Dot/Dot.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBlB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa,EAAiC,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Dot.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Dot/Dot.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBlB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa,EAAiC,QAAQ,EAAE,CAAC"}

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

@@ -29,6 +29,7 @@ const styles = {
         'fg-primary': { web: 'text-fg-primary', native: 'bg-fg-primary' },
         'fg-quaternary': { web: 'text-fg-quaternary', native: 'bg-fg-quaternary' },
         'fg-success-secondary': { web: 'text-fg-success-secondary', native: 'bg-fg-success-secondary' },
+        'fg-warning-secondary': { web: 'text-fg-warning-secondary', native: 'bg-fg-warning-secondary' },
         'border-primary': { web: 'text-border-primary', native: 'bg-border-primary' },
         'utility-neutral-500': { web: 'text-utility-neutral-500', native: 'bg-utility-neutral-500' },
         'utility-brand-500': { web: 'text-utility-brand-500', native: 'bg-utility-brand-500' },

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

@@ -1 +1 @@
-{"version":3,"file":"Dot.styles.js","sources":["../../../../../../src/components/atoms/Dot/Dot.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;AAoBG;AACI,MAAM,MAAM,GAAG;AACpB,IAAA,KAAK,EAAE;AACL,QAAA,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE;AAC3B,QAAA,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC3B,KAAA;AACD,IAAA,MAAM,EAAE;QACN,aAAa,EAAE,EAAE,GAAG,EAAE,uBAAuB,EAAE,MAAM,EAAE,gBAAgB,EAAE;QACzE,YAAY,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,EAAE,eAAe,EAAE;QACjE,eAAe,EAAE,EAAE,GAAG,EAAE,oBAAoB,EAAE,MAAM,EAAE,kBAAkB,EAAE;QAC1E,sBAAsB,EAAE,EAAE,GAAG,EAAE,2BAA2B,EAAE,MAAM,EAAE,yBAAyB,EAAE;QAC/F,gBAAgB,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,mBAAmB,EAAE;QAC7E,qBAAqB,EAAE,EAAE,GAAG,EAAE,0BAA0B,EAAE,MAAM,EAAE,wBAAwB,EAAE;QAC5F,mBAAmB,EAAE,EAAE,GAAG,EAAE,wBAAwB,EAAE,MAAM,EAAE,sBAAsB,EAAE;QACtF,iBAAiB,EAAE,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,EAAE,oBAAoB,EAAE;QAChF,oBAAoB,EAAE,EAAE,GAAG,EAAE,yBAAyB,EAAE,MAAM,EAAE,uBAAuB,EAAE;QACzF,mBAAmB,EAAE,EAAE,GAAG,EAAE,wBAAwB,EAAE,MAAM,EAAE,sBAAsB,EAAE;QACtF,mBAAmB,EAAE,EAAE,GAAG,EAAE,wBAAwB,EAAE,MAAM,EAAE,sBAAsB,EAAE;QACtF,iBAAiB,EAAE,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,EAAE,oBAAoB,EAAE;QAChF,kBAAkB,EAAE,EAAE,GAAG,EAAE,uBAAuB,EAAE,MAAM,EAAE,qBAAqB,EAAE;QACnF,oBAAoB,EAAE,EAAE,GAAG,EAAE,yBAAyB,EAAE,MAAM,EAAE,uBAAuB,EAAE;QACzF,oBAAoB,EAAE,EAAE,GAAG,EAAE,yBAAyB,EAAE,MAAM,EAAE,uBAAuB,EAAE;QACzF,kBAAkB,EAAE,EAAE,GAAG,EAAE,uBAAuB,EAAE,MAAM,EAAE,qBAAqB,EAAE;QACnF,oBAAoB,EAAE,EAAE,GAAG,EAAE,yBAAyB,EAAE,MAAM,EAAE,uBAAuB,EAAE;AAC1F,KAAA;;;"}
+{"version":3,"file":"Dot.styles.js","sources":["../../../../../../src/components/atoms/Dot/Dot.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;AAoBG;AACI,MAAM,MAAM,GAAG;AACpB,IAAA,KAAK,EAAE;AACL,QAAA,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE;AAC3B,QAAA,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC3B,KAAA;AACD,IAAA,MAAM,EAAE;QACN,aAAa,EAAE,EAAE,GAAG,EAAE,uBAAuB,EAAE,MAAM,EAAE,gBAAgB,EAAE;QACzE,YAAY,EAAE,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,EAAE,eAAe,EAAE;QACjE,eAAe,EAAE,EAAE,GAAG,EAAE,oBAAoB,EAAE,MAAM,EAAE,kBAAkB,EAAE;QAC1E,sBAAsB,EAAE,EAAE,GAAG,EAAE,2BAA2B,EAAE,MAAM,EAAE,yBAAyB,EAAE;QAC/F,sBAAsB,EAAE,EAAE,GAAG,EAAE,2BAA2B,EAAE,MAAM,EAAE,yBAAyB,EAAE;QAC/F,gBAAgB,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,mBAAmB,EAAE;QAC7E,qBAAqB,EAAE,EAAE,GAAG,EAAE,0BAA0B,EAAE,MAAM,EAAE,wBAAwB,EAAE;QAC5F,mBAAmB,EAAE,EAAE,GAAG,EAAE,wBAAwB,EAAE,MAAM,EAAE,sBAAsB,EAAE;QACtF,iBAAiB,EAAE,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,EAAE,oBAAoB,EAAE;QAChF,oBAAoB,EAAE,EAAE,GAAG,EAAE,yBAAyB,EAAE,MAAM,EAAE,uBAAuB,EAAE;QACzF,mBAAmB,EAAE,EAAE,GAAG,EAAE,wBAAwB,EAAE,MAAM,EAAE,sBAAsB,EAAE;QACtF,mBAAmB,EAAE,EAAE,GAAG,EAAE,wBAAwB,EAAE,MAAM,EAAE,sBAAsB,EAAE;QACtF,iBAAiB,EAAE,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,EAAE,oBAAoB,EAAE;QAChF,kBAAkB,EAAE,EAAE,GAAG,EAAE,uBAAuB,EAAE,MAAM,EAAE,qBAAqB,EAAE;QACnF,oBAAoB,EAAE,EAAE,GAAG,EAAE,yBAAyB,EAAE,MAAM,EAAE,uBAAuB,EAAE;QACzF,oBAAoB,EAAE,EAAE,GAAG,EAAE,yBAAyB,EAAE,MAAM,EAAE,uBAAuB,EAAE;QACzF,kBAAkB,EAAE,EAAE,GAAG,EAAE,uBAAuB,EAAE,MAAM,EAAE,qBAAqB,EAAE;QACnF,oBAAoB,EAAE,EAAE,GAAG,EAAE,yBAAyB,EAAE,MAAM,EAAE,uBAAuB,EAAE;AAC1F,KAAA;;;"}

package/dist/native/components/molecules/Tags/Tags.styles.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Shared `Tags` style config, read by both `index.tsx` and `index.native.tsx`.
+ *
+ * Complete literal class names only — Tailwind scans source for whole candidates.
+ * `native` holds pixel sizes and light-mode hex colours that React Native needs as
+ * plain `style` / icon props (no `currentColor`, and `Text` ignores `className` under
+ * the current `react-native-css` preview).
+ */
+export declare const styles: {
+    sizes: {
+        sm: {
+            root: {
+                base: string;
+                withCheckbox: string;
+                withAvatar: string;
+                withDot: string;
+                withCount: string;
+                withClose: string;
+            };
+            content: string;
+            count: string;
+        };
+        md: {
+            root: {
+                base: string;
+                withCheckbox: string;
+                withAvatar: string;
+                withDot: string;
+                withCount: string;
+                withClose: string;
+            };
+            content: string;
+            count: string;
+        };
+        lg: {
+            root: {
+                base: string;
+                withCheckbox: string;
+                withAvatar: string;
+                withDot: string;
+                withCount: string;
+                withClose: string;
+            };
+            content: string;
+            count: string;
+        };
+    };
+    /** Shared chrome for every tag root (size-specific padding lives under `sizes`). */
+    root: string;
+    /** Native root drops web-only focus/transition utilities and uses a border instead of an inset ring. */
+    rootNative: string;
+    close: {
+        sm: {
+            root: string;
+            icon: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+    };
+    checkbox: {
+        sm: {
+            root: string;
+            icon: string;
+        };
+        md: {
+            root: string;
+            icon: string;
+        };
+        lg: {
+            root: string;
+            icon: string;
+        };
+    };
+    avatar: string;
+    count: string;
+    native: {
+        /** `text-secondary` → neutral-700 (light). */
+        labelColor: string;
+        /** `text-fg-quaternary` → neutral-400 (light) — close icon idle. */
+        closeIconColor: string;
+        /** `text-fg-quaternary_hover` → neutral-500 (light). */
+        closeIconColorPressed: string;
+        /** `text-fg-white` — checkbox glyph. */
+        checkColor: string;
+        labelText: {
+            sm: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            md: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            lg: {
+                fontSize: number;
+                lineHeight: number;
+            };
+        };
+        countText: {
+            sm: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            md: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            lg: {
+                fontSize: number;
+                lineHeight: number;
+            };
+        };
+        /** Tailwind `size-N` → `N * 4` px for RN icon components. */
+        closeIconSize: {
+            readonly sm: 10;
+            readonly md: 12;
+            readonly lg: 14;
+        };
+        closeIconStroke: {
+            readonly sm: 3.6;
+            readonly md: 2.86;
+            readonly lg: 3;
+        };
+        checkIconSize: {
+            readonly sm: 10;
+            readonly md: 12;
+            readonly lg: 14;
+        };
+        /** Avatar is always `size-4` / icon `size-3` on web. */
+        avatarSize: number;
+        avatarIconSize: number;
+    };
+};
+export type TagSize = keyof typeof styles.sizes;
+//# sourceMappingURL=Tags.styles.d.ts.map

package/dist/native/components/molecules/Tags/Tags.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/Tags.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuCjB,oFAAoF;;IAEpF,wGAAwG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAetG,8CAA8C;;QAE9C,oEAAoE;;QAEpE,wDAAwD;;QAExD,wCAAwC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAYxC,6DAA6D;;;;;;;;;;;;;;;;QAI7D,wDAAwD;;;;CAI3D,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC"}

package/dist/native/components/molecules/Tags/Tags.styles.js

@@ -0,0 +1,92 @@
+/**
+ * Shared `Tags` style config, read by both `index.tsx` and `index.native.tsx`.
+ *
+ * Complete literal class names only — Tailwind scans source for whole candidates.
+ * `native` holds pixel sizes and light-mode hex colours that React Native needs as
+ * plain `style` / icon props (no `currentColor`, and `Text` ignores `className` under
+ * the current `react-native-css` preview).
+ */
+const styles = {
+    sizes: {
+        sm: {
+            root: {
+                base: 'px-2 py-0.75 text-xs font-medium',
+                withCheckbox: 'pl-1.25',
+                withAvatar: 'pl-1',
+                withDot: 'pl-1.5',
+                withCount: 'pr-1',
+                withClose: 'pr-1',
+            },
+            content: 'gap-1',
+            count: 'px-1 text-xs font-medium',
+        },
+        md: {
+            root: {
+                base: 'px-2.25 py-0.5 text-sm font-medium',
+                withCheckbox: 'pl-1',
+                withAvatar: 'pl-1.25',
+                withDot: 'pl-1.75',
+                withCount: 'pr-0.75',
+                withClose: 'pr-1',
+            },
+            content: 'gap-1.25',
+            count: 'px-1.25 text-xs font-medium',
+        },
+        lg: {
+            root: {
+                base: 'px-2.5 py-1 text-sm font-medium',
+                withCheckbox: 'pl-1.25',
+                withAvatar: 'pl-1.75',
+                withDot: 'pl-2.25',
+                withCount: 'pr-1',
+                withClose: 'pr-1',
+            },
+            content: 'gap-1.5',
+            count: 'px-1.5 text-sm font-medium',
+        },
+    },
+    /** Native root drops web-only focus/transition utilities and uses a border instead of an inset ring. */
+    rootNative: 'flex flex-row items-center gap-0.75 rounded-md border border-primary bg-primary',
+    close: {
+        sm: { root: 'p-0.5', icon: 'size-2.5 stroke-[3.6px]' },
+        md: { root: 'p-0.5', icon: 'size-3 stroke-[2.86px]' },
+        lg: { root: 'p-0.75', icon: 'size-3.5 stroke-3' },
+    },
+    checkbox: {
+        sm: { root: 'size-3.5', icon: 'size-2.5' },
+        md: { root: 'size-4', icon: 'size-3' },
+        lg: { root: 'size-4.5', icon: 'size-3.5' },
+    },
+    avatar: 'relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-tertiary',
+    count: 'flex items-center justify-center rounded-[3px] bg-tertiary text-center',
+    native: {
+        /** `text-secondary` → neutral-700 (light). */
+        labelColor: '#404040',
+        /** `text-fg-quaternary` → neutral-400 (light) — close icon idle. */
+        closeIconColor: '#a3a3a3',
+        /** `text-fg-quaternary_hover` → neutral-500 (light). */
+        closeIconColorPressed: '#737373',
+        /** `text-fg-white` — checkbox glyph. */
+        checkColor: '#ffffff',
+        labelText: {
+            sm: { fontSize: 12, lineHeight: 16 },
+            md: { fontSize: 14, lineHeight: 20 },
+            lg: { fontSize: 14, lineHeight: 20 },
+        },
+        countText: {
+            sm: { fontSize: 12, lineHeight: 16 },
+            md: { fontSize: 12, lineHeight: 16 },
+            lg: { fontSize: 14, lineHeight: 20 },
+        },
+        /** Tailwind `size-N` → `N * 4` px for RN icon components. */
+        closeIconSize: { sm: 10, md: 12, lg: 14 },
+        closeIconStroke: { sm: 3.6, md: 2.86, lg: 3 },
+        checkIconSize: { sm: 10, md: 12, lg: 14 },
+        /** Avatar is always `size-4` / icon `size-3` on web. */
+        avatarSize: 16,
+        avatarIconSize: 12,
+    },
+};
+
+export { styles };
+//# sourceMappingURL=Tags.styles.js.map

package/dist/native/components/molecules/Tags/Tags.styles.js.map

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

package/dist/native/components/molecules/Tags/index.d.ts

@@ -1,12 +1,99 @@
+import { type DotColor } from '@flipdish/ui-library/components/atoms/Dot';
+import { type ReactNode } from 'react';
+import { type TagSize } from './Tags.styles';
+export type { DotColor } from '@flipdish/ui-library/components/atoms/Dot';
+export type { TagSize } from './Tags.styles';
+type SelectionMode = 'none' | 'single' | 'multiple';
+type TagKey = string | number;
+export interface TagItem {
+    id: string;
+    label: string;
+    count?: number;
+    avatarSrc?: string;
+    avatarContrastBorder?: boolean;
+    dot?: boolean;
+    /** Semantic fill for the status dot; same tokens as `Dot`'s `color`. Defaults to `fg-success-secondary`. */
+    dotColor?: DotColor;
+    isDisabled?: boolean;
+    onClose?: (id: string) => void;
+}
+export interface TagAvatarProps {
+    /** Image URL; when missing or load fails, a user silhouette icon is shown. */
+    src?: string;
+    /** Accessible name for the image. */
+    alt?: string;
+    /** Thin dark outline so the avatar stays visible on light surfaces. */
+    contrastBorder?: boolean;
+    /** Layout classes merged onto the root `View`. */
+    className?: string;
+}
 /**
- * `Tags` has no React Native implementation.
+ * Small round avatar at the start of a native `Tag`. Same fallback behaviour as web;
+ * contrast border uses a `border` rather than CSS `outline`.
  *
- * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
- * that importing `@flipdish/ui-library/components/molecules/Tags` 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.
+ * @summary small round avatar for a tag (React Native)
+ */
+export declare const TagAvatar: ({ src, alt, contrastBorder, className }: TagAvatarProps) => import("react").JSX.Element;
+export interface TagGroupProps {
+    /** Accessible name of the group. */
+    label: string;
+    /** Size of every `Tag` in the group, shared through context. */
+    size?: TagSize;
+    /** `'none'` display-only; `'single'` one at a time; `'multiple'` any combination. */
+    selectionMode?: SelectionMode;
+    /** Controlled selected keys. */
+    selectedKeys?: Iterable<TagKey>;
+    /** Initial selection for uncontrolled usage. */
+    defaultSelectedKeys?: Iterable<TagKey>;
+    /** Called whenever the selection set changes. */
+    onSelectionChange?: (keys: Set<TagKey>) => void;
+    /** The `TagList` (and its `Tag` children). */
+    children?: ReactNode;
+    /** Layout classes merged onto the root `View`. */
+    className?: string;
+    /**
+     * Overrides the derived root `testID` (defaults to `fd-tag-group`).
+     * Tags derive their ids from this prefix, so overriding it re-roots every
+     * non-overridden `Tag` beneath it.
+     */
+    'data-testid'?: string;
+}
+/**
+ * React Native `TagGroup` — display-only, single-select, multi-select and removable
+ * tags built from `View` / `Pressable` instead of react-aria. Keyboard Backspace/Delete
+ * removal (`onRemove`) and `dotClassName` are web-only; use `onClose` per tag and
+ * `dotColor` for status-dot colour.
+ *
+ * @summary group of tags for filtering, selection or categorisation (React Native)
+ */
+export declare const TagGroup: ({ label, selectionMode, size, selectedKeys: selectedKeysProp, defaultSelectedKeys, onSelectionChange, children, className, "data-testid": dataTestId, }: TagGroupProps) => import("react").JSX.Element;
+export interface TagListProps {
+    /** The `Tag` items. */
+    children?: ReactNode;
+    /** Layout classes — typically `flex flex-row flex-wrap gap-2`. */
+    className?: string;
+}
+/** Horizontal wrapping row of tags inside a `TagGroup`. */
+export declare const TagList: ({ children, className }: TagListProps) => import("react").JSX.Element;
+export interface TagProps extends Omit<TagItem, 'label' | 'id'> {
+    /** Stable id used for selection, removal and the derived `testID`. */
+    id: TagKey;
+    /** Tag label — strings are wrapped in `Text`; other nodes render as-is. */
+    children?: ReactNode;
+    /** Layout classes merged onto the root. */
+    className?: string;
+    /**
+     * Overrides the derived `testID` for this tag (defaults to
+     * `<root>--tag-<slug>`, slugified from `id`).
+     */
+    'data-testid'?: string;
+}
+/**
+ * React Native `Tag` — optional avatar or status dot, count, selection checkbox and
+ * remove button. Selection and close use `Pressable`; label colour is a light-mode hex
+ * because `Text` ignores `className` under the current `react-native-css` preview.
  *
- * To make `Tags` available on React Native, add an `index.native.tsx` beside
- * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ * @summary single tag with optional adornments and selection (React Native)
  */
-export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;
+export declare const Tag: ({ id, avatarSrc, avatarContrastBorder, dot, dotColor, isDisabled, count, className, children, onClose, "data-testid": dataTestId, }: TagProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/native/components/molecules/Tags/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Tags/index.native.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAG/E,OAAO,EAAiB,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAKrD,YAAY,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAC1E,YAAY,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,KAAK,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AACpD,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9B,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAgBD,MAAM,WAAW,cAAc;IAC7B,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GAAI,yCAAgD,cAAc,gCAqBvF,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qFAAqF;IACrF,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,gCAAgC;IAChC,YAAY,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAChC,gDAAgD;IAChD,mBAAmB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACvC,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAChD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAID;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,GAAI,yJAUtB,aAAa,gCAgCf,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,2DAA2D;AAC3D,eAAO,MAAM,OAAO,GAAI,yBAAyB,YAAY,gCAAuF,CAAC;AAErJ,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7D,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAKD;;;;;;GAMG;AACH,eAAO,MAAM,GAAG,GAAI,qIAYjB,QAAQ,gCA6GV,CAAC"}