@flipdish/ui-library 0.36.2 → 0.38.0

package/dist/components/__internal__/selectionControl/selectionControl.styles.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
+const selectionControlSizes = cx.sortCx({
+    sm: {
+        root: 'gap-2',
+        textWrapper: '',
+        label: 'text-sm font-medium',
+        hint: 'text-sm',
+    },
+    md: {
+        root: 'gap-3',
+        textWrapper: 'gap-0.5',
+        label: 'text-md font-medium',
+        hint: 'text-md',
+    },
+});
+
+exports.selectionControlSizes = selectionControlSizes;
+//# sourceMappingURL=selectionControl.styles.cjs.map

package/dist/components/__internal__/selectionControl/selectionControl.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.styles.cjs","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"sourcesContent":[null],"names":["sortCx"],"mappings":";;;;AAIA;AACO,MAAM,qBAAqB,GAAGA,SAAM,CAAC;AAC1C,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACgG,CAAA;;"}

package/dist/components/__internal__/selectionControl/selectionControl.styles.d.ts

@@ -0,0 +1,17 @@
+export type SelectionControlSize = 'sm' | 'md';
+/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
+export declare const selectionControlSizes: {
+    sm: {
+        root: string;
+        textWrapper: string;
+        label: string;
+        hint: string;
+    };
+    md: {
+        root: string;
+        textWrapper: string;
+        label: string;
+        hint: string;
+    };
+};
+//# sourceMappingURL=selectionControl.styles.d.ts.map

package/dist/components/__internal__/selectionControl/selectionControl.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,mHAAmH;AACnH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAakE,CAAC"}

package/dist/components/__internal__/selectionControl/selectionControl.styles.js

@@ -0,0 +1,20 @@
+import { sortCx } from '@flipdish/ui-library/utilities/cx';
+
+/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
+const selectionControlSizes = sortCx({
+    sm: {
+        root: 'gap-2',
+        textWrapper: '',
+        label: 'text-sm font-medium',
+        hint: 'text-sm',
+    },
+    md: {
+        root: 'gap-3',
+        textWrapper: 'gap-0.5',
+        label: 'text-md font-medium',
+        hint: 'text-md',
+    },
+});
+
+export { selectionControlSizes };
+//# sourceMappingURL=selectionControl.styles.js.map

package/dist/components/__internal__/selectionControl/selectionControl.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.styles.js","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;AACO,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAC1C,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACgG,CAAA;;"}

package/dist/components/__internal__/selectionControl/selectionControl.utils.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+/**
+ * Accessible name for a native selection control, since RN's `accessibilityLabel` takes only a string.
+ *
+ * @param ariaLabel Explicit name from the web-style `aria-label` prop; always wins when set.
+ * @param label The visible label, used only when it is plain text.
+ * @returns The name to announce, or `undefined` when neither gives a string.
+ */
+export declare const getAccessibleName: (ariaLabel: string | undefined, label: ReactNode) => string | undefined;
+/**
+ * Screen-reader hint for a native selection control, since RN's `accessibilityHint` takes only a string.
+ *
+ * @param hint The visible hint, announced after the name only when it is plain text.
+ * @returns The hint to announce, or `undefined` for a non-string or missing hint.
+ */
+export declare const getAccessibleHint: (hint: ReactNode) => string | undefined;
+export declare const SELECTION_CONTROL_HIT_SLOP: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+//# sourceMappingURL=selectionControl.utils.d.ts.map

package/dist/components/__internal__/selectionControl/selectionControl.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,GAAG,SAAS,EAAE,OAAO,SAAS,KAAG,MAAM,GAAG,SAC/B,CAAC;AAE/D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,SAA0D,CAAC;AAGxH,eAAO,MAAM,0BAA0B;;;;;CAA6C,CAAC"}

package/dist/components/atoms/Checkbox/index.cjs

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var reactAriaComponents = require('react-aria-components');
+var selectionControl_styles = require('../../__internal__/selectionControl/selectionControl.styles.cjs');
 
 /** Visual-only checkbox square with no input behaviour, for building custom selectable controls; `Checkbox` renders it inside a react-aria `Checkbox`. */
 const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = 'sm', isFocusVisible = false }) => {
@@ -18,24 +19,10 @@ CheckboxBase.displayName = 'CheckboxBase';
  */
 const Checkbox = ({ label, hint, size = 'sm', className, 'data-testid': dataTestId, ...ariaCheckboxProps }) => {
     const checkboxTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'checkbox', rootName: 'checkbox' });
-    const sizes = {
-        sm: {
-            root: 'gap-2',
-            textWrapper: '',
-            label: 'text-sm font-medium',
-            hint: 'text-sm',
-        },
-        md: {
-            root: 'gap-3',
-            textWrapper: 'gap-0.5',
-            label: 'text-md font-medium',
-            hint: 'text-md',
-        },
-    };
-    return (jsxRuntime.jsx(reactAriaComponents.Checkbox, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx.cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('inline-flex flex-col', sizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', sizes[size].label), children: label }), hint && (
+    return (jsxRuntime.jsx(reactAriaComponents.Checkbox, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx.cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', selectionControl_styles.selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('inline-flex flex-col', selectionControl_styles.selectionControlSizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', selectionControl_styles.selectionControlSizes[size].label), children: label }), hint && (
                         // biome-ignore lint/a11y/noStaticElementInteractions: not independently interactive — only stops the click reaching outer React handlers, see below
                         // biome-ignore lint/a11y/useKeyWithClickEvents: same as above, no keyboard equivalent needed
-                        jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', sizes[size].hint), onClick: (event) => {
+                        jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', selectionControl_styles.selectionControlSizes[size].hint), onClick: (event) => {
                                 // Deliberately stopPropagation only, no preventDefault (matches the
                                 // Untitled UI reference). The native <label>->control click-forwarding
                                 // that toggles the checkbox happens during the real DOM bubble phase,

package/dist/components/atoms/Checkbox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","useResolvedTestId","AriaCheckbox","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","useResolvedTestId","AriaCheckbox","selectionControlSizes","_Fragment"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAA4B,KAAK,aAAa,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1G,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qGAAqG;IACrG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,0JAA0J;AAC1J,eAAO,MAAM,YAAY;mFAAiG,iBAAiB;;CAwC1I,CAAC;AAGF,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;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,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ;wFAA8F,aAAa;;CAsE/H,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAA4B,KAAK,aAAa,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1G,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qGAAqG;IACrG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,0JAA0J;AAC1J,eAAO,MAAM,YAAY;mFAAiG,iBAAiB;;CAwC1I,CAAC;AAGF,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;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,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ;wFAA8F,aAAa;;CAuD/H,CAAC"}

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

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useResolvedTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 import { Checkbox as Checkbox$1 } from 'react-aria-components';
+import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
 
 /** Visual-only checkbox square with no input behaviour, for building custom selectable controls; `Checkbox` renders it inside a react-aria `Checkbox`. */
 const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = 'sm', isFocusVisible = false }) => {
@@ -16,24 +17,10 @@ CheckboxBase.displayName = 'CheckboxBase';
  */
 const Checkbox = ({ label, hint, size = 'sm', className, 'data-testid': dataTestId, ...ariaCheckboxProps }) => {
     const checkboxTestId = useResolvedTestId({ testId: dataTestId, segment: 'checkbox', rootName: 'checkbox' });
-    const sizes = {
-        sm: {
-            root: 'gap-2',
-            textWrapper: '',
-            label: 'text-sm font-medium',
-            hint: 'text-sm',
-        },
-        md: {
-            root: 'gap-3',
-            textWrapper: 'gap-0.5',
-            label: 'text-md font-medium',
-            hint: 'text-md',
-        },
-    };
-    return (jsx(Checkbox$1, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('inline-flex flex-col', sizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', sizes[size].label), children: label }), hint && (
+    return (jsx(Checkbox$1, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('inline-flex flex-col', selectionControlSizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', selectionControlSizes[size].label), children: label }), hint && (
                         // biome-ignore lint/a11y/noStaticElementInteractions: not independently interactive — only stops the click reaching outer React handlers, see below
                         // biome-ignore lint/a11y/useKeyWithClickEvents: same as above, no keyboard equivalent needed
-                        jsx("span", { className: cx('text-tertiary', sizes[size].hint), onClick: (event) => {
+                        jsx("span", { className: cx('text-tertiary', selectionControlSizes[size].hint), onClick: (event) => {
                                 // Deliberately stopPropagation only, no preventDefault (matches the
                                 // Untitled UI reference). The native <label>->control click-forwarding
                                 // that toggles the checkbox happens during the real DOM bubble phase,

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

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

package/dist/components/atoms/Toggle/Toggle.styles.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var cx = require('@flipdish/ui-library/utilities/cx');
+
+const styles = cx.sortCx({
+    track: {
+        default: {
+            sm: 'h-5 w-9 p-0.5',
+            md: 'h-6 w-11 p-0.5',
+        },
+        slim: {
+            sm: 'h-4 w-8',
+            md: 'h-5 w-10',
+        },
+    },
+    knob: {
+        sm: 'size-4',
+        md: 'size-5',
+    },
+    knobSelected: {
+        sm: 'translate-x-4',
+        md: 'translate-x-5',
+    },
+});
+
+exports.styles = styles;
+//# sourceMappingURL=Toggle.styles.cjs.map

package/dist/components/atoms/Toggle/Toggle.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.cjs","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":["sortCx"],"mappings":";;;;AAGO,MAAM,MAAM,GAAGA,SAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACvC,CAAA;;"}

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

@@ -0,0 +1,21 @@
+export declare const styles: {
+    track: {
+        default: {
+            sm: string;
+            md: string;
+        };
+        slim: {
+            sm: string;
+            md: string;
+        };
+    };
+    knob: {
+        sm: string;
+        md: string;
+    };
+    knobSelected: {
+        sm: string;
+        md: string;
+    };
+};
+//# sourceMappingURL=Toggle.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAmBjB,CAAC"}

package/dist/components/atoms/Toggle/Toggle.styles.js

@@ -0,0 +1,25 @@
+import { sortCx } from '@flipdish/ui-library/utilities/cx';
+
+const styles = sortCx({
+    track: {
+        default: {
+            sm: 'h-5 w-9 p-0.5',
+            md: 'h-6 w-11 p-0.5',
+        },
+        slim: {
+            sm: 'h-4 w-8',
+            md: 'h-5 w-10',
+        },
+    },
+    knob: {
+        sm: 'size-4',
+        md: 'size-5',
+    },
+    knobSelected: {
+        sm: 'translate-x-4',
+        md: 'translate-x-5',
+    },
+});
+
+export { styles };
+//# sourceMappingURL=Toggle.styles.js.map

package/dist/components/atoms/Toggle/Toggle.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.js","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACvC,CAAA;;"}

package/dist/components/atoms/Toggle/index.cjs

@@ -4,49 +4,14 @@ var jsxRuntime = require('react/jsx-runtime');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
 var reactAriaComponents = require('react-aria-components');
+var selectionControl_styles = require('../../__internal__/selectionControl/selectionControl.styles.cjs');
+var Toggle_styles = require('./Toggle.styles.cjs');
 
 /** Visual-only switch track and knob with no input behaviour, for building custom controls; `Toggle` renders it inside a react-aria `Switch`. */
 const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size = 'sm' }) => {
-    const styles = {
-        default: {
-            sm: {
-                root: 'h-5 w-9 p-0.5',
-                switch: cx.cx('size-4', isSelected && 'translate-x-4'),
-            },
-            md: {
-                root: 'h-6 w-11 p-0.5',
-                switch: cx.cx('size-5', isSelected && 'translate-x-5'),
-            },
-        },
-        slim: {
-            sm: {
-                root: 'h-4 w-8',
-                switch: cx.cx('size-4', isSelected && 'translate-x-4'),
-            },
-            md: {
-                root: 'h-5 w-10',
-                switch: cx.cx('size-5', isSelected && 'translate-x-5'),
-            },
-        },
-    };
-    const classes = slim ? styles.slim[size] : styles.default[size];
-    return (jsxRuntime.jsx("div", { className: cx.cx('cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset', isSelected && 'bg-brand-solid', isSelected && isHovered && 'bg-brand-solid_hover', isDisabled && 'cursor-not-allowed opacity-50', isFocusVisible && 'outline-2 outline-offset-2', slim && 'ring-1', slim && isSelected && 'ring-transparent', classes.root, className), children: jsxRuntime.jsx("div", { style: {
+    return (jsxRuntime.jsx("div", { className: cx.cx('cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset', isSelected && 'bg-brand-solid', isSelected && isHovered && 'bg-brand-solid_hover', isDisabled && 'cursor-not-allowed opacity-50', isFocusVisible && 'outline-2 outline-offset-2', slim && 'ring-1', slim && isSelected && 'ring-transparent', Toggle_styles.styles.track[slim ? 'slim' : 'default'][size], className), children: jsxRuntime.jsx("div", { style: {
                 transition: 'transform 0.15s ease-in-out, translate 0.15s ease-in-out, border-color 0.1s linear, background-color 0.1s linear',
-            }, className: cx.cx('rounded-full bg-fg-white shadow-sm', slim && 'shadow-xs', slim && 'border border-toggle-border', slim && isSelected && 'border-toggle-slim-border_pressed', slim && isSelected && isHovered && 'border-toggle-slim-border_pressed-hover', classes.switch) }) }));
-};
-const styles = {
-    sm: {
-        root: 'gap-2',
-        textWrapper: '',
-        label: 'text-sm font-medium',
-        hint: 'text-sm',
-    },
-    md: {
-        root: 'gap-3',
-        textWrapper: 'gap-0.5',
-        label: 'text-md font-medium',
-        hint: 'text-md',
-    },
+            }, className: cx.cx('rounded-full bg-fg-white shadow-sm', slim && 'shadow-xs', slim && 'border border-toggle-border', slim && isSelected && 'border-toggle-slim-border_pressed', slim && isSelected && isHovered && 'border-toggle-slim-border_pressed-hover', Toggle_styles.styles.knob[size], isSelected && Toggle_styles.styles.knobSelected[size]) }) }));
 };
 /**
  * Switch control for toggling a single setting on or off, with optional label and hint.
@@ -55,10 +20,10 @@ const styles = {
  */
 const Toggle = ({ label, hint, className, size = 'sm', slim, 'data-testid': dataTestId, ...ariaSwitchProps }) => {
     const toggleTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'toggle', rootName: 'toggle' });
-    return (jsxRuntime.jsx(reactAriaComponents.Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx.cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed', styles[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ToggleBase, { slim: slim, size: size, isHovered: isHovered, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, className: slim ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col', styles[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', styles[size].label), children: label }), hint && (
+    return (jsxRuntime.jsx(reactAriaComponents.Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx.cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed', selectionControl_styles.selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ToggleBase, { slim: slim, size: size, isHovered: isHovered, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, className: slim ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col', selectionControl_styles.selectionControlSizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', selectionControl_styles.selectionControlSizes[size].label), children: label }), hint && (
                         // biome-ignore lint/a11y/noStaticElementInteractions: This is a hint that is not interactive
                         // biome-ignore lint/a11y/useKeyWithClickEvents: This is a hint that is not interactive
-                        jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', styles[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
+                        jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', selectionControl_styles.selectionControlSizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
 };
 
 exports.Toggle = Toggle;

package/dist/components/atoms/Toggle/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["cx","_jsx","useResolvedTestId","AriaSwitch","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","cx","styles","useResolvedTestId","AriaSwitch","selectionControlSizes","_jsxs","_Fragment"],"mappings":"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"}

package/dist/components/atoms/Toggle/index.d.ts

@@ -1,7 +1,9 @@
 import type { ReactNode } from 'react';
 import type { SwitchProps as AriaSwitchProps } from 'react-aria-components';
+import type { ToggleSize } from './toggle.types';
+export type { ToggleSize } from './toggle.types';
 interface ToggleBaseProps {
-    size?: 'sm' | 'md';
+    size?: ToggleSize;
     slim?: boolean;
     className?: string;
     isHovered?: boolean;
@@ -13,7 +15,7 @@ interface ToggleBaseProps {
 export declare const ToggleBase: ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size }: ToggleBaseProps) => import("react").JSX.Element;
 export interface ToggleProps extends AriaSwitchProps {
     /** Sets the switch size and the label and hint text size. */
-    size?: 'sm' | 'md';
+    size?: ToggleSize;
     /** Text shown beside the switch; clicking it toggles the setting. */
     label?: string;
     /** Supporting text shown below the label. */
@@ -29,5 +31,4 @@ export interface ToggleProps extends AriaSwitchProps {
  * @summary on/off switch for a single setting
  */
 export declare const Toggle: ({ label, hint, className, size, slim, "data-testid": dataTestId, ...ariaSwitchProps }: ToggleProps) => import("react").JSX.Element;
-export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/Toggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG5E,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iJAAiJ;AACjJ,eAAO,MAAM,UAAU,GAAI,8EAAqF,eAAe,gCA0D9H,CAAC;AAiBF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,6DAA6D;IAC7D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,uFAA8F,WAAW,gCA4C/H,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iJAAiJ;AACjJ,eAAO,MAAM,UAAU,GAAI,8EAAqF,eAAe,gCAkC9H,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,uFAA8F,WAAW,gCA4C/H,CAAC"}

package/dist/components/atoms/Toggle/index.js

@@ -2,49 +2,14 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cx } from '@flipdish/ui-library/utilities/cx';
 import { useResolvedTestId } from '@flipdish/ui-library/utilities/testIdUtils';
 import { Switch } from 'react-aria-components';
+import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
+import { styles } from './Toggle.styles.js';
 
 /** Visual-only switch track and knob with no input behaviour, for building custom controls; `Toggle` renders it inside a react-aria `Switch`. */
 const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size = 'sm' }) => {
-    const styles = {
-        default: {
-            sm: {
-                root: 'h-5 w-9 p-0.5',
-                switch: cx('size-4', isSelected && 'translate-x-4'),
-            },
-            md: {
-                root: 'h-6 w-11 p-0.5',
-                switch: cx('size-5', isSelected && 'translate-x-5'),
-            },
-        },
-        slim: {
-            sm: {
-                root: 'h-4 w-8',
-                switch: cx('size-4', isSelected && 'translate-x-4'),
-            },
-            md: {
-                root: 'h-5 w-10',
-                switch: cx('size-5', isSelected && 'translate-x-5'),
-            },
-        },
-    };
-    const classes = slim ? styles.slim[size] : styles.default[size];
-    return (jsx("div", { className: cx('cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset', isSelected && 'bg-brand-solid', isSelected && isHovered && 'bg-brand-solid_hover', isDisabled && 'cursor-not-allowed opacity-50', isFocusVisible && 'outline-2 outline-offset-2', slim && 'ring-1', slim && isSelected && 'ring-transparent', classes.root, className), children: jsx("div", { style: {
+    return (jsx("div", { className: cx('cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset', isSelected && 'bg-brand-solid', isSelected && isHovered && 'bg-brand-solid_hover', isDisabled && 'cursor-not-allowed opacity-50', isFocusVisible && 'outline-2 outline-offset-2', slim && 'ring-1', slim && isSelected && 'ring-transparent', styles.track[slim ? 'slim' : 'default'][size], className), children: jsx("div", { style: {
                 transition: 'transform 0.15s ease-in-out, translate 0.15s ease-in-out, border-color 0.1s linear, background-color 0.1s linear',
-            }, className: cx('rounded-full bg-fg-white shadow-sm', slim && 'shadow-xs', slim && 'border border-toggle-border', slim && isSelected && 'border-toggle-slim-border_pressed', slim && isSelected && isHovered && 'border-toggle-slim-border_pressed-hover', classes.switch) }) }));
-};
-const styles = {
-    sm: {
-        root: 'gap-2',
-        textWrapper: '',
-        label: 'text-sm font-medium',
-        hint: 'text-sm',
-    },
-    md: {
-        root: 'gap-3',
-        textWrapper: 'gap-0.5',
-        label: 'text-md font-medium',
-        hint: 'text-md',
-    },
+            }, className: cx('rounded-full bg-fg-white shadow-sm', slim && 'shadow-xs', slim && 'border border-toggle-border', slim && isSelected && 'border-toggle-slim-border_pressed', slim && isSelected && isHovered && 'border-toggle-slim-border_pressed-hover', styles.knob[size], isSelected && styles.knobSelected[size]) }) }));
 };
 /**
  * Switch control for toggling a single setting on or off, with optional label and hint.
@@ -53,10 +18,10 @@ const styles = {
  */
 const Toggle = ({ label, hint, className, size = 'sm', slim, 'data-testid': dataTestId, ...ariaSwitchProps }) => {
     const toggleTestId = useResolvedTestId({ testId: dataTestId, segment: 'toggle', rootName: 'toggle' });
-    return (jsx(Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed', styles[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => (jsxs(Fragment, { children: [jsx(ToggleBase, { slim: slim, size: size, isHovered: isHovered, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, className: slim ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('flex flex-col', styles[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', styles[size].label), children: label }), hint && (
+    return (jsx(Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed', selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => (jsxs(Fragment, { children: [jsx(ToggleBase, { slim: slim, size: size, isHovered: isHovered, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, className: slim ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('flex flex-col', selectionControlSizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', selectionControlSizes[size].label), children: label }), hint && (
                         // biome-ignore lint/a11y/noStaticElementInteractions: This is a hint that is not interactive
                         // biome-ignore lint/a11y/useKeyWithClickEvents: This is a hint that is not interactive
-                        jsx("span", { className: cx('text-tertiary', styles[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
+                        jsx("span", { className: cx('text-tertiary', selectionControlSizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
 };
 
 export { Toggle, ToggleBase };

package/dist/components/atoms/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaSwitch","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaSwitch","_jsxs","_Fragment"],"mappings":";;;;;;;AAuBA;MACa,UAAU,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAmB,KAAI;IACjI,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,uIAAuI,EACvI,UAAU,IAAI,gBAAgB,EAC9B,UAAU,IAAI,SAAS,IAAI,sBAAsB,EACjD,UAAU,IAAI,+BAA+B,EAC7C,cAAc,IAAI,4BAA4B,EAE9C,IAAI,IAAI,QAAQ,EAChB,IAAI,IAAI,UAAU,IAAI,kBAAkB,EACxC,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,IAAI,CAAC,EAC7C,SAAS,CACV,EAAA,QAAA,EAEDA,GAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,kHAAkH;aAC/H,EACD,SAAS,EAAE,EAAE,CACX,oCAAoC,EAEpC,IAAI,IAAI,WAAW,EACnB,IAAI,IAAI,6BAA6B,EACrC,IAAI,IAAI,UAAU,IAAI,mCAAmC,EACzD,IAAI,IAAI,UAAU,IAAI,SAAS,IAAI,yCAAyC,EAE5E,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EACjB,UAAU,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CACxC,EAAA,CACD,EAAA,CACE;AAEV;AAeA;;;;AAIG;AACI,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,eAAe,EAAe,KAAI;AAClI,IAAA,MAAM,YAAY,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAErG,IAAA,QACEA,GAAA,CAACC,MAAU,EAAA,EAAA,GACL,eAAe,EAAA,aAAA,EACN,YAAY,EACzB,SAAS,EAAE,CAAC,KAAK,KACf,EAAE,CACA,iCAAiC,EACjC,KAAK,CAAC,UAAU,IAAI,oBAAoB,EACxC,qBAAqB,CAAC,IAAI,CAAC,CAAC,IAAI,EAChC,OAAO,SAAS,KAAK,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAC/D,EAAA,QAAA,EAGF,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,MACrDC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEH,GAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,IAAI,GAAG,QAAQ,GAAG,EAAE,EAAA,CAC/B,EAED,CAAC,KAAK,IAAI,IAAI,MACbE,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,EAAA,QAAA,EAAA,CACzE,KAAK,IAAIF,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAA,QAAA,EAAG,KAAK,EAAA,CAAK,EACvG,IAAI;;;AAGH,wBAAAA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,eAAe,EAAE,EAAA,QAAA,EAChH,IAAI,EAAA,CACA,CACR,IACG,CACP,CAAA,EAAA,CACA,CACJ,EAAA,CACU;AAEjB;;"}

package/dist/components/atoms/Toggle/toggle.types.d.ts

@@ -0,0 +1,2 @@
+export type ToggleSize = 'sm' | 'md';
+//# sourceMappingURL=toggle.types.d.ts.map

package/dist/components/atoms/Toggle/toggle.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.types.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/toggle.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC"}

package/dist/native/components/__internal__/selectionControl/SelectionControlText.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import { type SelectionControlSize } from './selectionControl.styles';
+interface SelectionControlTextProps {
+    size: SelectionControlSize;
+    label?: ReactNode;
+    hint?: ReactNode;
+}
+/** Label and hint column shared by the native `Toggle`, `Checkbox` and `RadioButton`, matching their web text styles. */
+export declare const SelectionControlText: ({ size, label, hint }: SelectionControlTextProps) => import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=SelectionControlText.d.ts.map

package/dist/native/components/__internal__/selectionControl/SelectionControlText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionControlText.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/SelectionControlText.native.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,oBAAoB,EAAyB,MAAM,2BAA2B,CAAC;AAa7F,UAAU,yBAAyB;IACjC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,yHAAyH;AACzH,eAAO,MAAM,oBAAoB,GAAI,uBAAuB,yBAAyB,uCASpF,CAAC"}

package/dist/native/components/__internal__/selectionControl/SelectionControlText.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '../../../utilities/cx/index.js';
+import { View, Text } from 'react-native';
+import { selectionControlSizes } from './selectionControl.styles.js';
+
+// `Text` className is ignored by the current `react-native-css` preview (see Avatar), so label
+// typography goes through `style`. Mirrors `text-sm`/`text-md` + `font-medium`.
+const TEXT_SIZE = {
+    sm: { fontSize: 14, lineHeight: 20 },
+    md: { fontSize: 16, lineHeight: 24 },
+};
+// Light-mode hex of `text-secondary` (neutral-700) and `text-tertiary` (neutral-600); the app has no dark mode yet.
+const LABEL_COLOR = '#404040';
+const HINT_COLOR = '#525252';
+/** Label and hint column shared by the native `Toggle`, `Checkbox` and `RadioButton`, matching their web text styles. */
+const SelectionControlText = ({ size, label, hint }) => {
+    if (!label && !hint)
+        return null;
+    return (jsxs(View, { className: cx('shrink flex-col', selectionControlSizes[size].textWrapper), children: [label ? jsx(Text, { style: { ...TEXT_SIZE[size], fontWeight: '500', color: LABEL_COLOR }, children: label }) : null, hint ? jsx(Text, { style: { ...TEXT_SIZE[size], color: HINT_COLOR }, children: hint }) : null] }));
+};
+
+export { SelectionControlText };
+//# sourceMappingURL=SelectionControlText.js.map

package/dist/native/components/__internal__/selectionControl/SelectionControlText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionControlText.js","sources":["../../../../../../src/components/__internal__/selectionControl/SelectionControlText.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA;AACA;AACA,MAAM,SAAS,GAA2E;IACxF,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;CACrC;AAED;AACA,MAAM,WAAW,GAAG,SAAS;AAC7B,MAAM,UAAU,GAAG,SAAS;AAQ5B;AACO,MAAM,oBAAoB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAA6B,KAAI;AACvF,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEhC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,EAAA,QAAA,EAAA,CAC5E,KAAK,GAAGC,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,GAAG,IAAI,EACzG,IAAI,GAAGA,IAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAA,QAAA,EAAG,IAAI,GAAQ,GAAG,IAAI,CAAA,EAAA,CAC/E;AAEX;;"}

package/dist/native/components/__internal__/selectionControl/selectionControl.styles.d.ts

@@ -0,0 +1,17 @@
+export type SelectionControlSize = 'sm' | 'md';
+/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
+export declare const selectionControlSizes: {
+    sm: {
+        root: string;
+        textWrapper: string;
+        label: string;
+        hint: string;
+    };
+    md: {
+        root: string;
+        textWrapper: string;
+        label: string;
+        hint: string;
+    };
+};
+//# sourceMappingURL=selectionControl.styles.d.ts.map

package/dist/native/components/__internal__/selectionControl/selectionControl.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,mHAAmH;AACnH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAakE,CAAC"}

package/dist/native/components/__internal__/selectionControl/selectionControl.styles.js

@@ -0,0 +1,20 @@
+import { sortCx } from '../../../utilities/cx/index.js';
+
+/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
+const selectionControlSizes = sortCx({
+    sm: {
+        root: 'gap-2',
+        textWrapper: '',
+        label: 'text-sm font-medium',
+        hint: 'text-sm',
+    },
+    md: {
+        root: 'gap-3',
+        textWrapper: 'gap-0.5',
+        label: 'text-md font-medium',
+        hint: 'text-md',
+    },
+});
+
+export { selectionControlSizes };
+//# sourceMappingURL=selectionControl.styles.js.map

package/dist/native/components/__internal__/selectionControl/selectionControl.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.styles.js","sources":["../../../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;AACO,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAC1C,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACgG,CAAA;;"}

package/dist/native/components/__internal__/selectionControl/selectionControl.utils.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+/**
+ * Accessible name for a native selection control, since RN's `accessibilityLabel` takes only a string.
+ *
+ * @param ariaLabel Explicit name from the web-style `aria-label` prop; always wins when set.
+ * @param label The visible label, used only when it is plain text.
+ * @returns The name to announce, or `undefined` when neither gives a string.
+ */
+export declare const getAccessibleName: (ariaLabel: string | undefined, label: ReactNode) => string | undefined;
+/**
+ * Screen-reader hint for a native selection control, since RN's `accessibilityHint` takes only a string.
+ *
+ * @param hint The visible hint, announced after the name only when it is plain text.
+ * @returns The hint to announce, or `undefined` for a non-string or missing hint.
+ */
+export declare const getAccessibleHint: (hint: ReactNode) => string | undefined;
+export declare const SELECTION_CONTROL_HIT_SLOP: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+//# sourceMappingURL=selectionControl.utils.d.ts.map

package/dist/native/components/__internal__/selectionControl/selectionControl.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/selectionControl.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,GAAG,SAAS,EAAE,OAAO,SAAS,KAAG,MAAM,GAAG,SAC/B,CAAC;AAE/D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,SAA0D,CAAC;AAGxH,eAAO,MAAM,0BAA0B;;;;;CAA6C,CAAC"}

package/dist/native/components/__internal__/selectionControl/selectionControl.utils.js

@@ -0,0 +1,20 @@
+/**
+ * Accessible name for a native selection control, since RN's `accessibilityLabel` takes only a string.
+ *
+ * @param ariaLabel Explicit name from the web-style `aria-label` prop; always wins when set.
+ * @param label The visible label, used only when it is plain text.
+ * @returns The name to announce, or `undefined` when neither gives a string.
+ */
+const getAccessibleName = (ariaLabel, label) => ariaLabel ?? (typeof label === 'string' ? label : undefined);
+/**
+ * Screen-reader hint for a native selection control, since RN's `accessibilityHint` takes only a string.
+ *
+ * @param hint The visible hint, announced after the name only when it is plain text.
+ * @returns The hint to announce, or `undefined` for a non-string or missing hint.
+ */
+const getAccessibleHint = (hint) => (typeof hint === 'string' ? hint : undefined);
+// Widens the 16–24px controls toward the 44pt minimum; vertical stops at 8 so options in a `gap-4` stack never overlap.
+const SELECTION_CONTROL_HIT_SLOP = { top: 8, bottom: 8, left: 12, right: 12 };
+
+export { SELECTION_CONTROL_HIT_SLOP, getAccessibleHint, getAccessibleName };
+//# sourceMappingURL=selectionControl.utils.js.map

package/dist/native/components/__internal__/selectionControl/selectionControl.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionControl.utils.js","sources":["../../../../../../src/components/__internal__/selectionControl/selectionControl.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA;;;;;;AAMG;AACI,MAAM,iBAAiB,GAAG,CAAC,SAA6B,EAAE,KAAgB,KAC/E,SAAS,KAAK,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,SAAS;AAE7D;;;;;AAKG;MACU,iBAAiB,GAAG,CAAC,IAAe,MAA0B,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,SAAS;AAEtH;MACa,0BAA0B,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;;"}

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

@@ -1,12 +1,34 @@
+import { type ReactNode } from 'react';
+export interface CheckboxProps {
+    /** Sets the box size and the label and hint text size. */
+    size?: 'sm' | 'md';
+    /** Text shown beside the box; pressing it toggles the checkbox. */
+    label?: ReactNode;
+    /** Supporting text shown below the label. */
+    hint?: ReactNode;
+    /** Controlled checked state — the checkbox is checked when true. */
+    isSelected?: boolean;
+    /** Initial checked state for uncontrolled usage. */
+    defaultSelected?: boolean;
+    /** Shows a dash instead of a check, for a parent whose children are partly checked. */
+    isIndeterminate?: boolean;
+    /** Disables interaction and shows a reduced-opacity state. */
+    isDisabled?: boolean;
+    /** Called with the new checked state whenever the user toggles it. */
+    onChange?: (isSelected: boolean) => void;
+    /** Extra classes merged onto the root `Pressable`. */
+    className?: string;
+    /** Web-style accessible name, used as `accessibilityLabel` so shared call sites work on both platforms. */
+    'aria-label'?: string;
+    /** Overrides the generated `testID` (defaults to `fd-checkbox`). */
+    'data-testid'?: string;
+}
 /**
- * `Checkbox` has no React Native implementation.
+ * React Native `Checkbox` — the same box, check, dash, label and hint as web, built from
+ * `Pressable` and `View` instead of a react-aria `Checkbox`. The web `ring-inset` becomes a
+ * 1px border, which takes no extra space inside the fixed-size box.
  *
- * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
- * that importing `@flipdish/ui-library/components/atoms/Checkbox` 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.
- *
- * To make `Checkbox` available on React Native, add an `index.native.tsx` beside
- * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ * @summary checkbox for selecting one or more options (React Native)
  */
-export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;
+export declare const Checkbox: ({ label, hint, size, className, isSelected: isSelectedProp, defaultSelected, isIndeterminate, isDisabled, onChange, "aria-label": ariaLabel, "data-testid": dataTestId, }: CheckboxProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Minus, Check } from '@flipdish/ui-icons';
+import { cx } from '../../../utilities/cx/index.js';
+import { useResolvedTestId } from '../../../utilities/testIdUtils/index.js';
+import { useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { SelectionControlText } from '../../__internal__/selectionControl/SelectionControlText.js';
+import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
+import { SELECTION_CONTROL_HIT_SLOP, getAccessibleHint, getAccessibleName } from '../../__internal__/selectionControl/selectionControl.utils.js';
+
+// Web draws both glyphs in a 14px viewBox with a 2px stroke; the ported 24px icons need 24/7 for the same weight.
+const GLYPH_STROKE = 24 / 7;
+const CHECK_SIZE = { sm: 12, md: 14 };
+const DASH_SIZE = { sm: 10, md: 14 };
+// `text-fg-white` — icons take a colour value, not a class.
+const GLYPH_COLOR = '#ffffff';
+/**
+ * React Native `Checkbox` — the same box, check, dash, label and hint as web, built from
+ * `Pressable` and `View` instead of a react-aria `Checkbox`. The web `ring-inset` becomes a
+ * 1px border, which takes no extra space inside the fixed-size box.
+ *
+ * @summary checkbox for selecting one or more options (React Native)
+ */
+const Checkbox = ({ label, hint, size = 'sm', className, isSelected: isSelectedProp, defaultSelected = false, isIndeterminate, isDisabled, onChange, 'aria-label': ariaLabel, 'data-testid': dataTestId, }) => {
+    const checkboxTestId = useResolvedTestId({ testId: dataTestId, segment: 'checkbox', rootName: 'checkbox' });
+    const [uncontrolledSelected, setUncontrolledSelected] = useState(defaultSelected);
+    const isSelected = isSelectedProp ?? uncontrolledSelected;
+    const isFilled = isSelected || isIndeterminate;
+    const handlePress = () => {
+        const next = !isSelected;
+        if (isSelectedProp === undefined)
+            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 })] }));
+};
+
+export { Checkbox };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,21 @@
+export declare const styles: {
+    track: {
+        default: {
+            sm: string;
+            md: string;
+        };
+        slim: {
+            sm: string;
+            md: string;
+        };
+    };
+    knob: {
+        sm: string;
+        md: string;
+    };
+    knobSelected: {
+        sm: string;
+        md: string;
+    };
+};
+//# sourceMappingURL=Toggle.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAmBjB,CAAC"}

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

@@ -0,0 +1,25 @@
+import { sortCx } from '../../../utilities/cx/index.js';
+
+const styles = sortCx({
+    track: {
+        default: {
+            sm: 'h-5 w-9 p-0.5',
+            md: 'h-6 w-11 p-0.5',
+        },
+        slim: {
+            sm: 'h-4 w-8',
+            md: 'h-5 w-10',
+        },
+    },
+    knob: {
+        sm: 'size-4',
+        md: 'size-5',
+    },
+    knobSelected: {
+        sm: 'translate-x-4',
+        md: 'translate-x-5',
+    },
+});
+
+export { styles };
+//# sourceMappingURL=Toggle.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.js","sources":["../../../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACvC,CAAA;;"}

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

@@ -1,12 +1,37 @@
+import { type ReactNode } from 'react';
+import type { ToggleSize } from './toggle.types';
+export type { ToggleSize } from './toggle.types';
+export interface ToggleProps {
+    /** Sets the switch size and the label and hint text size. */
+    size?: ToggleSize;
+    /** Text shown beside the switch; pressing it toggles the setting. */
+    label?: string;
+    /** Supporting text shown below the label. */
+    hint?: ReactNode;
+    /** Uses the slim style: a shorter track the knob overhangs, with a bordered knob. */
+    slim?: boolean;
+    /** Controlled selected state — the toggle is on when true. */
+    isSelected?: boolean;
+    /** Initial selected state for uncontrolled usage. */
+    defaultSelected?: boolean;
+    /** Disables interaction and shows a reduced-opacity state. */
+    isDisabled?: boolean;
+    /** Called with the new selected state whenever the user toggles it. */
+    onChange?: (isSelected: boolean) => void;
+    /** Extra classes merged onto the root `Pressable`. */
+    className?: string;
+    /** Web-style accessible name, used as `accessibilityLabel` so shared call sites work on both platforms. */
+    'aria-label'?: string;
+    /** Overrides the generated `testID` (defaults to `fd-toggle`). */
+    'data-testid'?: string;
+}
 /**
- * `Toggle` has no React Native implementation.
+ * React Native `Toggle` — the same track, knob, label and hint as web, built from `Pressable`
+ * and `View` instead of a react-aria `Switch`. Pressed styles stand in for `hover:`, the knob
+ * slides and the brand fill fades in on the native driver (an `Animated` value rather than
+ * web's CSS transition), and the web `ring-inset` is an absolutely positioned border.
  *
- * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
- * that importing `@flipdish/ui-library/components/atoms/Toggle` 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.
- *
- * To make `Toggle` available on React Native, add an `index.native.tsx` beside
- * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ * @summary on/off switch for a single setting (React Native)
  */
-export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;
+export declare const Toggle: ({ label, hint, className, size, slim, isSelected: isSelectedProp, defaultSelected, isDisabled, onChange, "aria-label": ariaLabel, "data-testid": dataTestId, }: ToggleProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/index.native.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAMpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,WAAW;IAC1B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uEAAuE;IACvE,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,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAOD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,GAAI,gKAYpB,WAAW,gCA2Eb,CAAC"}

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

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cx } from '../../../utilities/cx/index.js';
+import { useResolvedTestId } from '../../../utilities/testIdUtils/index.js';
+import { useState, useRef, useEffect } from 'react';
+import { Animated, Easing, Pressable, View } from 'react-native';
+import { SelectionControlText } from '../../__internal__/selectionControl/SelectionControlText.js';
+import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
+import { SELECTION_CONTROL_HIT_SLOP, getAccessibleHint } from '../../__internal__/selectionControl/selectionControl.utils.js';
+import { styles } from './Toggle.styles.js';
+
+// Matches the web knob's 150ms ease-in-out slide.
+const SLIDE_DURATION_MS = 150;
+// Knob travel at a 16px rem (`translate-x-4` / `translate-x-5`); replaced by the measured value once the track lays out.
+const DEFAULT_TRAVEL = { sm: 16, md: 20 };
+/**
+ * React Native `Toggle` — the same track, knob, label and hint as web, built from `Pressable`
+ * and `View` instead of a react-aria `Switch`. Pressed styles stand in for `hover:`, the knob
+ * slides and the brand fill fades in on the native driver (an `Animated` value rather than
+ * web's CSS transition), and the web `ring-inset` is an absolutely positioned border.
+ *
+ * @summary on/off switch for a single setting (React Native)
+ */
+const Toggle = ({ label, hint, className, size = 'sm', slim, isSelected: isSelectedProp, defaultSelected = false, isDisabled, onChange, 'aria-label': ariaLabel, 'data-testid': dataTestId, }) => {
+    const toggleTestId = useResolvedTestId({ testId: dataTestId, segment: 'toggle', rootName: 'toggle' });
+    const [uncontrolledSelected, setUncontrolledSelected] = useState(defaultSelected);
+    const [pressed, setPressed] = useState(false);
+    const isSelected = isSelectedProp ?? uncontrolledSelected;
+    const [travel, setTravel] = useState(DEFAULT_TRAVEL[size]);
+    const progress = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
+    useEffect(() => {
+        Animated.timing(progress, {
+            toValue: isSelected ? 1 : 0,
+            duration: SLIDE_DURATION_MS,
+            easing: Easing.inOut(Easing.ease),
+            useNativeDriver: true,
+        }).start();
+    }, [isSelected, progress]);
+    // The knob is square and fills the track's content box, so its travel is that box's width minus its height.
+    const handleKnobAreaLayout = ({ nativeEvent }) => setTravel(nativeEvent.layout.width - nativeEvent.layout.height);
+    const translateX = progress.interpolate({ inputRange: [0, 1], outputRange: [0, travel] });
+    const handlePress = () => {
+        const next = !isSelected;
+        if (isSelectedProp === undefined)
+            setUncontrolledSelected(next);
+        onChange?.(next);
+    };
+    return (jsxs(Pressable, { testID: toggleTestId, disabled: isDisabled, onPress: handlePress, onPressIn: () => setPressed(true), onPressOut: () => setPressed(false), accessibilityRole: "switch", hitSlop: SELECTION_CONTROL_HIT_SLOP, accessibilityLabel: ariaLabel ?? label, accessibilityHint: getAccessibleHint(hint), accessibilityState: { checked: isSelected, disabled: Boolean(isDisabled) }, className: cx('relative flex flex-row items-start self-start', selectionControlSizes[size].root, className), children: [jsxs(View, { className: cx('flex-row rounded-full bg-tertiary', isDisabled && 'opacity-50', slim && 'mt-0.5', styles.track[slim ? 'slim' : 'default'][size]), children: [jsx(Animated.View, { pointerEvents: "none", style: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, opacity: progress }, children: jsx(View, { className: cx('flex-1 rounded-full bg-brand-solid', pressed && 'bg-brand-solid_hover') }) }), jsx(View, { pointerEvents: "none", className: cx('absolute inset-0 rounded-full border-secondary', slim && isSelected && 'border-transparent'), style: { borderWidth: slim ? 1 : 0.5 } }), jsx(View, { className: "flex-1 flex-row", onLayout: handleKnobAreaLayout, children: jsx(Animated.View, { style: { transform: [{ translateX }] }, children: jsx(View, { className: cx('rounded-full bg-fg-white shadow-sm', slim && 'border border-toggle-border shadow-xs', slim && isSelected && 'border-toggle-slim-border_pressed', slim && isSelected && pressed && 'border-toggle-slim-border_pressed-hover', styles.knob[size]) }) }) })] }), jsx(SelectionControlText, { size: size, label: label, hint: hint })] }));
+};
+
+export { Toggle };
+//# sourceMappingURL=index.js.map

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

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

package/dist/native/components/atoms/Toggle/toggle.types.d.ts

@@ -0,0 +1,2 @@
+export type ToggleSize = 'sm' | 'md';
+//# sourceMappingURL=toggle.types.d.ts.map

package/dist/native/components/atoms/Toggle/toggle.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/toggle.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.36.2",
+  "version": "0.38.0",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "imports": {
@@ -226,7 +226,7 @@
     "@storybook/addon-a11y": "^10.5.8",
     "@storybook/addon-docs": "^10.5.8",
     "@storybook/addon-mcp": "^0.7.0",
-    "@storybook/addon-vitest": "10.6.1",
+    "@storybook/addon-vitest": "10.6.2",
     "@storybook/react-vite": "^10.5.8",
     "@tailwindcss/vite": "^4.3.1",
     "@testing-library/jest-dom": "^6.9.1",