@flipdish/ui-library 0.41.2 → 0.43.0

package/dist/hooks/__internal__/useDebouncedSearch/useDebouncedSearch.js

@@ -0,0 +1,54 @@
+import { useDebouncedCallback } from '@flipdish/ui-library/hooks/useDebouncedCallback';
+import { useState, useRef, useLayoutEffect } from 'react';
+
+/**
+ * Keeps a search box's own draft so typing stays instant, and commits it to the owner once typing pauses, on submit, or on
+ * clear. A `value` changed elsewhere, by Back or a reset, replaces the draft; the box's own commits coming back from the owner
+ * leave it alone, so typing carries on while a router applies a navigation as a transition.
+ *
+ * @param options The committed value, what the draft starts as, where to send commits, and the pause to wait for.
+ * @returns The draft to show, with `change` for every keystroke, `submit` to commit at once and `clear` to commit an empty search.
+ */
+const useDebouncedSearch = ({ value, initialValue, onChange, delay }) => {
+    const [draft, setDraft] = useState(initialValue ?? value);
+    // The last `value` reconciled, so only a change to it is acted on and the initial draft is never overwritten.
+    const committed = useRef(value);
+    // What has been sent and not yet seen come back; an array, since two commits can be in flight at once.
+    const sent = useRef([]);
+    const send = (next) => {
+        sent.current.push(next);
+        onChange(next);
+    };
+    const commit = useDebouncedCallback(send, delay);
+    // An effect, not the render body: a render React discards would still have moved the refs and dropped a pending commit.
+    // Layout timing so a reset lands before the old draft is painted.
+    useLayoutEffect(() => {
+        if (value === committed.current)
+            return;
+        committed.current = value;
+        const acknowledged = sent.current.indexOf(value);
+        if (acknowledged >= 0) {
+            // The box's own commit: the draft already shows it, or something newer typed since.
+            sent.current.splice(0, acknowledged + 1);
+            return;
+        }
+        // Changed elsewhere: a commit still pending from typing would overwrite it.
+        commit.cancel();
+        sent.current = [];
+        setDraft(value);
+    }, [value, commit]);
+    const change = (next) => {
+        setDraft(next);
+        commit(next);
+    };
+    const submit = () => commit.flush();
+    const clear = () => {
+        commit.cancel();
+        setDraft('');
+        send('');
+    };
+    return { draft, change, submit, clear };
+};
+
+export { useDebouncedSearch };
+//# sourceMappingURL=useDebouncedSearch.js.map

package/dist/hooks/__internal__/useDebouncedSearch/useDebouncedSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebouncedSearch.js","sources":["../../../../src/hooks/__internal__/useDebouncedSearch/useDebouncedSearch.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAcA;;;;;;;AAOG;AACI,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAA6B,KAAI;AACxG,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,YAAY,IAAI,KAAK,CAAC;;AAEjE,IAAA,MAAM,SAAS,GAAG,MAAM,CAAS,KAAK,CAAC;;AAEvC,IAAA,MAAM,IAAI,GAAG,MAAM,CAAW,EAAE,CAAC;AACjC,IAAA,MAAM,IAAI,GAAG,CAAC,IAAY,KAAI;AAC5B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,QAAQ,CAAC,IAAI,CAAC;AAChB,IAAA,CAAC;IACD,MAAM,MAAM,GAAG,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC;;;IAIhD,eAAe,CAAC,MAAK;AACnB,QAAA,IAAI,KAAK,KAAK,SAAS,CAAC,OAAO;YAAE;AACjC,QAAA,SAAS,CAAC,OAAO,GAAG,KAAK;QACzB,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC;AAChD,QAAA,IAAI,YAAY,IAAI,CAAC,EAAE;;YAErB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC;YACxC;QACF;;QAEA,MAAM,CAAC,MAAM,EAAE;AACf,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE;QACjB,QAAQ,CAAC,KAAK,CAAC;AACjB,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAEnB,IAAA,MAAM,MAAM,GAAG,CAAC,IAAY,KAAI;QAC9B,QAAQ,CAAC,IAAI,CAAC;QACd,MAAM,CAAC,IAAI,CAAC;AACd,IAAA,CAAC;IACD,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,KAAK,EAAE;IACnC,MAAM,KAAK,GAAG,MAAK;QACjB,MAAM,CAAC,MAAM,EAAE;QACf,QAAQ,CAAC,EAAE,CAAC;QACZ,IAAI,CAAC,EAAE,CAAC;AACV,IAAA,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE;AACzC;;"}

package/dist/hooks/useDebouncedCallback/index.cjs

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Delays a callback until calls stop for `delay` milliseconds, so only the last of a burst runs, such as a search request
+ * after typing pauses. The returned function keeps its identity across renders and always calls the latest `callback`.
+ *
+ * @param callback - What to run with the last call's arguments once the calls stop.
+ * @param delay - How long the calls must stop for, in milliseconds.
+ * @returns The debounced function, with `flush` to run the pending call at once and `cancel` to drop it. A pending call is
+ *   dropped on unmount.
+ */
+const useDebouncedCallback = (callback, delay = 300) => {
+    const callbackRef = React.useRef(callback);
+    callbackRef.current = callback;
+    const delayRef = React.useRef(delay);
+    delayRef.current = delay;
+    const timer = React.useRef(undefined);
+    const pending = React.useRef(undefined);
+    const debounced = React.useMemo(() => {
+        const cancel = () => {
+            clearTimeout(timer.current);
+            timer.current = undefined;
+            pending.current = undefined;
+        };
+        const flush = () => {
+            const args = pending.current;
+            cancel();
+            if (args)
+                callbackRef.current(...args);
+        };
+        const call = (...args) => {
+            pending.current = args;
+            clearTimeout(timer.current);
+            timer.current = setTimeout(flush, delayRef.current);
+        };
+        return Object.assign(call, { flush, cancel });
+    }, []);
+    React.useEffect(() => debounced.cancel, [debounced]);
+    return debounced;
+};
+
+exports.useDebouncedCallback = useDebouncedCallback;
+//# sourceMappingURL=index.cjs.map

package/dist/hooks/useDebouncedCallback/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/hooks/useDebouncedCallback/index.ts"],"sourcesContent":[null],"names":["useRef","useMemo","useEffect"],"mappings":";;;;AAUA;;;;;;;;AAQG;AACI,MAAM,oBAAoB,GAAG,CAAyB,QAAiC,EAAE,KAAK,GAAG,GAAG,KAA6B;AACtI,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;AAC9B,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAC,KAAK,CAAC;AAC9B,IAAA,QAAQ,CAAC,OAAO,GAAG,KAAK;AACxB,IAAA,MAAM,KAAK,GAAGA,YAAM,CAA4C,SAAS,CAAC;AAC1E,IAAA,MAAM,OAAO,GAAGA,YAAM,CAAmB,SAAS,CAAC;AAEnD,IAAA,MAAM,SAAS,GAAGC,aAAO,CAAC,MAAK;QAC7B,MAAM,MAAM,GAAG,MAAK;AAClB,YAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;AAC3B,YAAA,KAAK,CAAC,OAAO,GAAG,SAAS;AACzB,YAAA,OAAO,CAAC,OAAO,GAAG,SAAS;AAC7B,QAAA,CAAC;QACD,MAAM,KAAK,GAAG,MAAK;AACjB,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO;AAC5B,YAAA,MAAM,EAAE;AACR,YAAA,IAAI,IAAI;AAAE,gBAAA,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;AACxC,QAAA,CAAC;AACD,QAAA,MAAM,IAAI,GAAG,CAAC,GAAG,IAAU,KAAI;AAC7B,YAAA,OAAO,CAAC,OAAO,GAAG,IAAI;AACtB,YAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;YAC3B,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC;AACrD,QAAA,CAAC;AACD,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC;AAEN,IAAAC,eAAS,CAAC,MAAM,SAAS,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC;AAE9C,IAAA,OAAO,SAAS;AAClB;;"}

package/dist/hooks/useDebouncedCallback/index.d.ts

@@ -0,0 +1,18 @@
+/** The debounced function, plus controls for the call it is holding back. */
+export type DebouncedCallback<Args extends unknown[]> = ((...args: Args) => void) & {
+    /** Runs the pending call now, if there is one. */
+    flush: () => void;
+    /** Drops the pending call. */
+    cancel: () => void;
+};
+/**
+ * Delays a callback until calls stop for `delay` milliseconds, so only the last of a burst runs, such as a search request
+ * after typing pauses. The returned function keeps its identity across renders and always calls the latest `callback`.
+ *
+ * @param callback - What to run with the last call's arguments once the calls stop.
+ * @param delay - How long the calls must stop for, in milliseconds.
+ * @returns The debounced function, with `flush` to run the pending call at once and `cancel` to drop it. A pending call is
+ *   dropped on unmount.
+ */
+export declare const useDebouncedCallback: <Args extends unknown[]>(callback: (...args: Args) => void, delay?: number) => DebouncedCallback<Args>;
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useDebouncedCallback/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDebouncedCallback/index.ts"],"names":[],"mappings":"AAEA,6EAA6E;AAC7E,MAAM,MAAM,iBAAiB,CAAC,IAAI,SAAS,OAAO,EAAE,IAAI,CAAC,CAAC,GAAG,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC,GAAG;IAClF,kDAAkD;IAClD,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,8BAA8B;IAC9B,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAAI,IAAI,SAAS,OAAO,EAAE,EAAE,UAAU,CAAC,GAAG,IAAI,EAAE,IAAI,KAAK,IAAI,EAAE,cAAW,KAAG,iBAAiB,CAAC,IAAI,CA8BnI,CAAC"}

package/dist/hooks/useDebouncedCallback/index.js

@@ -0,0 +1,43 @@
+import { useRef, useMemo, useEffect } from 'react';
+
+/**
+ * Delays a callback until calls stop for `delay` milliseconds, so only the last of a burst runs, such as a search request
+ * after typing pauses. The returned function keeps its identity across renders and always calls the latest `callback`.
+ *
+ * @param callback - What to run with the last call's arguments once the calls stop.
+ * @param delay - How long the calls must stop for, in milliseconds.
+ * @returns The debounced function, with `flush` to run the pending call at once and `cancel` to drop it. A pending call is
+ *   dropped on unmount.
+ */
+const useDebouncedCallback = (callback, delay = 300) => {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    const delayRef = useRef(delay);
+    delayRef.current = delay;
+    const timer = useRef(undefined);
+    const pending = useRef(undefined);
+    const debounced = useMemo(() => {
+        const cancel = () => {
+            clearTimeout(timer.current);
+            timer.current = undefined;
+            pending.current = undefined;
+        };
+        const flush = () => {
+            const args = pending.current;
+            cancel();
+            if (args)
+                callbackRef.current(...args);
+        };
+        const call = (...args) => {
+            pending.current = args;
+            clearTimeout(timer.current);
+            timer.current = setTimeout(flush, delayRef.current);
+        };
+        return Object.assign(call, { flush, cancel });
+    }, []);
+    useEffect(() => debounced.cancel, [debounced]);
+    return debounced;
+};
+
+export { useDebouncedCallback };
+//# sourceMappingURL=index.js.map

package/dist/hooks/useDebouncedCallback/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/hooks/useDebouncedCallback/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAUA;;;;;;;;AAQG;AACI,MAAM,oBAAoB,GAAG,CAAyB,QAAiC,EAAE,KAAK,GAAG,GAAG,KAA6B;AACtI,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;AAC9B,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC;AAC9B,IAAA,QAAQ,CAAC,OAAO,GAAG,KAAK;AACxB,IAAA,MAAM,KAAK,GAAG,MAAM,CAA4C,SAAS,CAAC;AAC1E,IAAA,MAAM,OAAO,GAAG,MAAM,CAAmB,SAAS,CAAC;AAEnD,IAAA,MAAM,SAAS,GAAG,OAAO,CAAC,MAAK;QAC7B,MAAM,MAAM,GAAG,MAAK;AAClB,YAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;AAC3B,YAAA,KAAK,CAAC,OAAO,GAAG,SAAS;AACzB,YAAA,OAAO,CAAC,OAAO,GAAG,SAAS;AAC7B,QAAA,CAAC;QACD,MAAM,KAAK,GAAG,MAAK;AACjB,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO;AAC5B,YAAA,MAAM,EAAE;AACR,YAAA,IAAI,IAAI;AAAE,gBAAA,WAAW,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;AACxC,QAAA,CAAC;AACD,QAAA,MAAM,IAAI,GAAG,CAAC,GAAG,IAAU,KAAI;AAC7B,YAAA,OAAO,CAAC,OAAO,GAAG,IAAI;AACtB,YAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;YAC3B,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC;AACrD,QAAA,CAAC;AACD,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,CAAC,MAAM,SAAS,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC;AAE9C,IAAA,OAAO,SAAS;AAClB;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Checkbox/index.native.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMjD,MAAM,WAAW,aAAa;IAC5B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,2KAYtB,aAAa,gCA4Cf,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Checkbox/index.native.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMjD,MAAM,WAAW,aAAa;IAC5B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,2KAYtB,aAAa,gCAyCf,CAAC"}

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

@@ -32,7 +32,7 @@ const Checkbox = ({ label, hint, size = 'sm', className, isSelected: isSelectedP
             setUncontrolledSelected(next);
         onChange?.(next);
     };
-    return (jsxs(Pressable, { testID: checkboxTestId, disabled: isDisabled, onPress: handlePress, accessibilityRole: "checkbox", hitSlop: SELECTION_CONTROL_HIT_SLOP, accessibilityLabel: getAccessibleName(ariaLabel, label), accessibilityHint: getAccessibleHint(hint), accessibilityState: { checked: isIndeterminate ? 'mixed' : isSelected, disabled: Boolean(isDisabled) }, className: cx('relative flex flex-row items-start self-start', selectionControlSizes[size].root, className), children: [jsx(View, { className: cx('size-4 shrink-0 items-center justify-center rounded border border-primary bg-primary', size === 'md' && 'size-5 rounded-md', isFilled && 'border-brand-solid bg-brand-solid', isDisabled && 'opacity-50', isDisabled && !isFilled && 'bg-tertiary', (label || hint) && 'mt-0.5'), children: isIndeterminate ? (jsx(Minus, { size: DASH_SIZE[size], color: GLYPH_COLOR, strokeWidth: GLYPH_STROKE })) : isSelected ? (jsx(Check, { size: CHECK_SIZE[size], color: GLYPH_COLOR, strokeWidth: GLYPH_STROKE })) : null }), jsx(SelectionControlText, { size: size, label: label, hint: hint })] }));
+    return (jsxs(Pressable, { testID: checkboxTestId, disabled: isDisabled, onPress: handlePress, accessibilityRole: "checkbox", hitSlop: SELECTION_CONTROL_HIT_SLOP, accessibilityLabel: getAccessibleName(ariaLabel, label), accessibilityHint: getAccessibleHint(hint), accessibilityState: { checked: isIndeterminate ? 'mixed' : isSelected, disabled: Boolean(isDisabled) }, className: cx('relative flex flex-row items-start self-start', selectionControlSizes[size].root, className), children: [jsxs(View, { className: cx('size-4 shrink-0 items-center justify-center rounded border border-primary bg-primary', size === 'md' && 'size-5 rounded-md', isFilled && 'border-brand-solid bg-brand-solid', isDisabled && 'opacity-50', isDisabled && !isFilled && 'bg-tertiary', (label || hint) && 'mt-0.5'), children: [isIndeterminate && jsx(Minus, { size: DASH_SIZE[size], color: GLYPH_COLOR, strokeWidth: GLYPH_STROKE }), !isIndeterminate && isSelected && jsx(Check, { size: CHECK_SIZE[size], color: GLYPH_COLOR, strokeWidth: GLYPH_STROKE })] }), jsx(SelectionControlText, { size: size, label: label, hint: hint })] }));
 };
 
 export { Checkbox };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/Checkbox/index.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAkCA;AACA,MAAM,YAAY,GAAG,EAAE,GAAG,CAAC;AAC3B,MAAM,UAAU,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAW;AAC9C,MAAM,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAW;AAC7C;AACA,MAAM,WAAW,GAAG,SAAS;AAE7B;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,SAAS,EACT,UAAU,EAAE,cAAc,EAC1B,eAAe,GAAG,KAAK,EACvB,eAAe,EACf,UAAU,EACV,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,UAAU,GACX,KAAI;AAClB,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IAC3G,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC;AACjF,IAAA,MAAM,UAAU,GAAG,cAAc,IAAI,oBAAoB;AACzD,IAAA,MAAM,QAAQ,GAAG,UAAU,IAAI,eAAe;IAE9C,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,IAAI,GAAG,CAAC,UAAU;QACxB,IAAI,cAAc,KAAK,SAAS;YAAE,uBAAuB,CAAC,IAAI,CAAC;AAC/D,QAAA,QAAQ,GAAG,IAAI,CAAC;AAClB,IAAA,CAAC;IAED,QACEA,KAAC,SAAS,EAAA,EACR,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAC,UAAU,EAC5B,OAAO,EAAE,0BAA0B,EACnC,kBAAkB,EAAE,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,EACvD,iBAAiB,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,EACtG,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAE3GC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,EAAE,CACX,sFAAsF,EACtF,IAAI,KAAK,IAAI,IAAI,mBAAmB,EACpC,QAAQ,IAAI,mCAAmC,EAC/C,UAAU,IAAI,YAAY,EAC1B,UAAU,IAAI,CAAC,QAAQ,IAAI,aAAa,EACxC,CAAC,KAAK,IAAI,IAAI,KAAK,QAAQ,CAC5B,YAEA,eAAe,IACdA,IAAC,KAAK,EAAA,EAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAA,CAAI,IAC7E,UAAU,IACZA,GAAA,CAAC,KAAK,EAAA,EAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAA,CAAI,IAC9E,IAAI,EAAA,CACH,EAEPA,IAAC,oBAAoB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,CAAA,EAAA,CACpD;AAEhB;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/Checkbox/index.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAkCA;AACA,MAAM,YAAY,GAAG,EAAE,GAAG,CAAC;AAC3B,MAAM,UAAU,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAW;AAC9C,MAAM,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAW;AAC7C;AACA,MAAM,WAAW,GAAG,SAAS;AAE7B;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,SAAS,EACT,UAAU,EAAE,cAAc,EAC1B,eAAe,GAAG,KAAK,EACvB,eAAe,EACf,UAAU,EACV,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,UAAU,GACX,KAAI;AAClB,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IAC3G,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC;AACjF,IAAA,MAAM,UAAU,GAAG,cAAc,IAAI,oBAAoB;AACzD,IAAA,MAAM,QAAQ,GAAG,UAAU,IAAI,eAAe;IAE9C,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,IAAI,GAAG,CAAC,UAAU;QACxB,IAAI,cAAc,KAAK,SAAS;YAAE,uBAAuB,CAAC,IAAI,CAAC;AAC/D,QAAA,QAAQ,GAAG,IAAI,CAAC;AAClB,IAAA,CAAC;AAED,IAAA,QACEA,IAAA,CAAC,SAAS,IACR,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAC,UAAU,EAC5B,OAAO,EAAE,0BAA0B,EACnC,kBAAkB,EAAE,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,EACvD,iBAAiB,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,EACtG,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAE3GA,IAAA,CAAC,IAAI,IACH,SAAS,EAAE,EAAE,CACX,sFAAsF,EACtF,IAAI,KAAK,IAAI,IAAI,mBAAmB,EACpC,QAAQ,IAAI,mCAAmC,EAC/C,UAAU,IAAI,YAAY,EAC1B,UAAU,IAAI,CAAC,QAAQ,IAAI,aAAa,EACxC,CAAC,KAAK,IAAI,IAAI,KAAK,QAAQ,CAC5B,EAAA,QAAA,EAAA,CAEA,eAAe,IAAIC,GAAA,CAAC,KAAK,EAAA,EAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAA,CAAI,EAClG,CAAC,eAAe,IAAI,UAAU,IAAIA,IAAC,KAAK,EAAA,EAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAA,CAAI,IAC9G,EAEPA,GAAA,CAAC,oBAAoB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,CAAA,EAAA,CACpD;AAEhB;;"}

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,gCA8GV,CAAC"}