@flipdish/ui-library 0.32.0 → 0.33.0

package/dist/components/atoms/Flag/flag.utils.js

@@ -0,0 +1,42 @@
+import { getEnvironmentVariable } from '@flipdish/ui-library/utilities/renderUtils';
+
+const resolvers = new Map();
+const warnedCodes = new Set();
+/**
+ * Resolves a country's name from its ISO 3166-1 alpha-2 code, for the flag's default accessible name.
+ * @param code The country code, as `Flag` receives it.
+ * @param locale BCP 47 tag the name is written in; the app's locale, so server and client agree.
+ * @returns The region name in that locale, or the code itself where `Intl.DisplayNames` is missing or rejects the code or locale.
+ */
+const getCountryName = (code, locale = 'en') => {
+    // Built once per locale; `Intl.DisplayNames` is missing from some older runtimes, where the code stands in.
+    let resolver = resolvers.get(locale);
+    if (resolver === undefined) {
+        try {
+            resolver = typeof Intl.DisplayNames === 'function' ? new Intl.DisplayNames([locale], { type: 'region' }) : null;
+        }
+        catch {
+            resolver = null;
+        }
+        resolvers.set(locale, resolver);
+    }
+    try {
+        return resolver?.of(code) ?? code;
+    }
+    catch {
+        return code;
+    }
+};
+/**
+ * Warns once per unknown country code outside production, so a bad code is visible in development without flooding the console.
+ * @param code The code no flag exists for.
+ */
+const warnUnknownCountryOnce = (code) => {
+    if (getEnvironmentVariable('NODE_ENV') === 'production' || warnedCodes.has(code))
+        return;
+    warnedCodes.add(code);
+    console.warn(`Flag: no flag for country code "${code}".`);
+};
+
+export { getCountryName, warnUnknownCountryOnce };
+//# sourceMappingURL=flag.utils.js.map

package/dist/components/atoms/Flag/flag.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flag.utils.js","sources":["../../../../src/components/atoms/Flag/flag.utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA,MAAM,SAAS,GAAG,IAAI,GAAG,EAAoC;AAC7D,MAAM,WAAW,GAAG,IAAI,GAAG,EAAU;AAErC;;;;;AAKG;AACI,MAAM,cAAc,GAAG,CAAC,IAAY,EAAE,MAAM,GAAG,IAAI,KAAY;;IAEpE,IAAI,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC;AACpC,IAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;AAC1B,QAAA,IAAI;AACF,YAAA,QAAQ,GAAG,OAAO,IAAI,CAAC,YAAY,KAAK,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI;QACjH;AAAE,QAAA,MAAM;YACN,QAAQ,GAAG,IAAI;QACjB;AACA,QAAA,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC;IACjC;AACA,IAAA,IAAI;QACF,OAAO,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI;IACnC;AAAE,IAAA,MAAM;AACN,QAAA,OAAO,IAAI;IACb;AACF;AAEA;;;AAGG;AACI,MAAM,sBAAsB,GAAG,CAAC,IAAY,KAAU;AAC3D,IAAA,IAAI,sBAAsB,CAAC,UAAU,CAAC,KAAK,YAAY,IAAI,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;QAAE;AAClF,IAAA,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,IAAA,OAAO,CAAC,IAAI,CAAC,mCAAmC,IAAI,CAAA,EAAA,CAAI,CAAC;AAC3D;;"}

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var React = require('react');
+var flag_utils = require('./flag.utils.cjs');
+
+const toFlagSvg = (set) => {
+    const FlagSvg = ({ code, ...props }) => {
+        const Svg = set[code];
+        if (!Svg) {
+            flag_utils.warnUnknownCountryOnce(code);
+            return null;
+        }
+        return jsxRuntime.jsx(Svg, { ...props });
+    };
+    return { default: FlagSvg };
+};
+// Each set is every country in one ~53 KB gzip module, so it loads on the first flag of that shape rather than with every importer of `Flag`.
+const FLAG_SVGS = {
+    round: React.lazy(() => import('country-flag-icons/react/1x1').then((flags) => toFlagSvg(flags))),
+    rectangle: React.lazy(() => import('country-flag-icons/react/3x2').then((flags) => toFlagSvg(flags))),
+};
+// A rectangle keeps the art's 3:2 ratio at the same height as the round flag.
+const SIZES = {
+    round: { xs: 'size-4', sm: 'size-5', md: 'size-6', lg: 'size-8' },
+    rectangle: { xs: 'h-4 w-6', sm: 'h-5 w-7.5', md: 'h-6 w-9', lg: 'h-8 w-12' },
+};
+/**
+ * A country's flag from its ISO code, round for inline use beside a label or rectangular where
+ * the full flag matters. Each shape is one bundled set from `country-flag-icons` that loads on
+ * its first use, so a page costs nothing until it shows a flag and the same after that however
+ * many countries it shows.
+ *
+ * @summary country flag from an ISO country code
+ */
+const Flag = ({ code, size = 'sm', shape = 'round', label, locale, className, 'data-testid': dataTestId, ...props }) => {
+    const flagTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'flag', rootName: 'flag' });
+    const name = label ?? flag_utils.getCountryName(code, locale);
+    const isDecorative = name === '';
+    const FlagSvg = FLAG_SVGS[shape];
+    return (jsxRuntime.jsx(React.Suspense, { fallback: null, children: jsxRuntime.jsx(FlagSvg, { ...props, code: code, "data-testid": flagTestId, role: isDecorative ? undefined : 'img', "aria-label": isDecorative ? undefined : name, "aria-hidden": isDecorative || undefined, title: isDecorative ? undefined : name, className: cx.cx('shrink-0 overflow-hidden', shape === 'round' && 'rounded-full', SIZES[shape][size], className) }) }));
+};
+
+exports.Flag = Flag;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Flag/index.tsx"],"sourcesContent":[null],"names":["warnUnknownCountryOnce","_jsx","lazy","useResolvedTestId","getCountryName","Suspense","cx"],"mappings":";;;;;;;;AAeA,MAAM,SAAS,GAAG,CAAC,GAAY,KAAI;IACjC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAmC,KAAI;AACtE,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,GAAG,EAAE;YACRA,iCAAsB,CAAC,IAAI,CAAC;AAC5B,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAOC,cAAA,CAAC,GAAG,EAAA,EAAA,GAAK,KAAK,GAAI;AAC3B,IAAA,CAAC;AACD,IAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AAC7B,CAAC;AAED;AACA,MAAM,SAAS,GAAG;IAChB,KAAK,EAAEC,UAAI,CAAC,MAAM,OAAO,8BAA8B,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,KAAgB,CAAC,CAAC,CAAC;IACtG,SAAS,EAAEA,UAAI,CAAC,MAAM,OAAO,8BAA8B,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,KAAgB,CAAC,CAAC,CAAC;CAC3G;AAED;AACA,MAAM,KAAK,GAAgD;AACzD,IAAA,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE;AACjE,IAAA,SAAS,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE;CAC7E;AAiBD;;;;;;;AAOG;AACI,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAa,KAAI;AACvI,IAAA,MAAM,UAAU,GAAGC,6BAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAC/F,MAAM,IAAI,GAAG,KAAK,IAAIC,yBAAc,CAAC,IAAI,EAAE,MAAM,CAAC;AAClD,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,EAAE;AAChC,IAAA,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC;AAEhC,IAAA,QACEH,cAAA,CAACI,cAAQ,EAAA,EAAC,QAAQ,EAAE,IAAI,EAAA,QAAA,EACtBJ,cAAA,CAAC,OAAO,OACF,KAAK,EACT,IAAI,EAAE,IAAI,iBACG,UAAU,EACvB,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,KAAK,EAAA,YAAA,EAC1B,YAAY,GAAG,SAAS,GAAG,IAAI,EAAA,aAAA,EAC9B,YAAY,IAAI,SAAS,EACtC,KAAK,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI,EACtC,SAAS,EAAEK,KAAE,CAAC,0BAA0B,EAAE,KAAK,KAAK,OAAO,IAAI,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAAA,CAC7G,EAAA,CACO;AAEf;;"}

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

@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react';
+import type { CountryCode, FlagShape, FlagSize } from './flag.types';
+export type { CountryCode, FlagShape, FlagSize } from './flag.types';
+export interface FlagProps extends Omit<SVGProps<SVGSVGElement>, 'children'> {
+    /** ISO 3166-1 alpha-2 code of the country to show. */
+    code: CountryCode;
+    /** Height: `xs` 16px, `sm` 20px, `md` 24px, `lg` 32px. A rectangle is 3:2, so wider than tall. */
+    size?: FlagSize;
+    /** `round` clips the square art to a circle; `rectangle` shows the 3:2 flag. */
+    shape?: FlagShape;
+    /** Accessible name. Defaults to the country's name in `locale`; pass `''` to hide the flag from assistive technology when visible text beside it already names the country. */
+    label?: string;
+    /** BCP 47 tag the default name is written in. Pass the app's locale rather than reading the browser's, so server and client render the same name. */
+    locale?: string;
+    /** Overrides the `data-testid` (defaults to `fd-flag`). */
+    'data-testid'?: string;
+}
+/**
+ * A country's flag from its ISO code, round for inline use beside a label or rectangular where
+ * the full flag matters. Each shape is one bundled set from `country-flag-icons` that loads on
+ * its first use, so a page costs nothing until it shows a flag and the same after that however
+ * many countries it shows.
+ *
+ * @summary country flag from an ISO country code
+ */
+export declare const Flag: ({ code, size, shape, label, locale, className, "data-testid": dataTestId, ...props }: FlagProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Flag/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAgB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAGrE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AA8BrE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC1E,sDAAsD;IACtD,IAAI,EAAE,WAAW,CAAC;IAClB,kGAAkG;IAClG,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gFAAgF;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+KAA+K;IAC/K,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qJAAqJ;IACrJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,IAAI,GAAI,sFAAuG,SAAS,gCAoBpI,CAAC"}

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

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { lazy, Suspense } from 'react';
+import { warnUnknownCountryOnce, getCountryName } from './flag.utils.js';
+
+const toFlagSvg = (set) => {
+    const FlagSvg = ({ code, ...props }) => {
+        const Svg = set[code];
+        if (!Svg) {
+            warnUnknownCountryOnce(code);
+            return null;
+        }
+        return jsx(Svg, { ...props });
+    };
+    return { default: FlagSvg };
+};
+// Each set is every country in one ~53 KB gzip module, so it loads on the first flag of that shape rather than with every importer of `Flag`.
+const FLAG_SVGS = {
+    round: lazy(() => import('country-flag-icons/react/1x1').then((flags) => toFlagSvg(flags))),
+    rectangle: lazy(() => import('country-flag-icons/react/3x2').then((flags) => toFlagSvg(flags))),
+};
+// A rectangle keeps the art's 3:2 ratio at the same height as the round flag.
+const SIZES = {
+    round: { xs: 'size-4', sm: 'size-5', md: 'size-6', lg: 'size-8' },
+    rectangle: { xs: 'h-4 w-6', sm: 'h-5 w-7.5', md: 'h-6 w-9', lg: 'h-8 w-12' },
+};
+/**
+ * A country's flag from its ISO code, round for inline use beside a label or rectangular where
+ * the full flag matters. Each shape is one bundled set from `country-flag-icons` that loads on
+ * its first use, so a page costs nothing until it shows a flag and the same after that however
+ * many countries it shows.
+ *
+ * @summary country flag from an ISO country code
+ */
+const Flag = ({ code, size = 'sm', shape = 'round', label, locale, className, 'data-testid': dataTestId, ...props }) => {
+    const flagTestId = useResolvedTestId({ testId: dataTestId, segment: 'flag', rootName: 'flag' });
+    const name = label ?? getCountryName(code, locale);
+    const isDecorative = name === '';
+    const FlagSvg = FLAG_SVGS[shape];
+    return (jsx(Suspense, { fallback: null, children: jsx(FlagSvg, { ...props, code: code, "data-testid": flagTestId, role: isDecorative ? undefined : 'img', "aria-label": isDecorative ? undefined : name, "aria-hidden": isDecorative || undefined, title: isDecorative ? undefined : name, className: cx('shrink-0 overflow-hidden', shape === 'round' && 'rounded-full', SIZES[shape][size], className) }) }));
+};
+
+export { Flag };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Flag/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAeA,MAAM,SAAS,GAAG,CAAC,GAAY,KAAI;IACjC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAmC,KAAI;AACtE,QAAA,MAAM,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC;QACrB,IAAI,CAAC,GAAG,EAAE;YACR,sBAAsB,CAAC,IAAI,CAAC;AAC5B,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAOA,GAAA,CAAC,GAAG,EAAA,EAAA,GAAK,KAAK,GAAI;AAC3B,IAAA,CAAC;AACD,IAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AAC7B,CAAC;AAED;AACA,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,IAAI,CAAC,MAAM,OAAO,8BAA8B,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,KAAgB,CAAC,CAAC,CAAC;IACtG,SAAS,EAAE,IAAI,CAAC,MAAM,OAAO,8BAA8B,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,KAAgB,CAAC,CAAC,CAAC;CAC3G;AAED;AACA,MAAM,KAAK,GAAgD;AACzD,IAAA,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE;AACjE,IAAA,SAAS,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,UAAU,EAAE;CAC7E;AAiBD;;;;;;;AAOG;AACI,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAa,KAAI;AACvI,IAAA,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAC/F,MAAM,IAAI,GAAG,KAAK,IAAI,cAAc,CAAC,IAAI,EAAE,MAAM,CAAC;AAClD,IAAA,MAAM,YAAY,GAAG,IAAI,KAAK,EAAE;AAChC,IAAA,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC;AAEhC,IAAA,QACEA,GAAA,CAAC,QAAQ,EAAA,EAAC,QAAQ,EAAE,IAAI,EAAA,QAAA,EACtBA,GAAA,CAAC,OAAO,OACF,KAAK,EACT,IAAI,EAAE,IAAI,iBACG,UAAU,EACvB,IAAI,EAAE,YAAY,GAAG,SAAS,GAAG,KAAK,EAAA,YAAA,EAC1B,YAAY,GAAG,SAAS,GAAG,IAAI,EAAA,aAAA,EAC9B,YAAY,IAAI,SAAS,EACtC,KAAK,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI,EACtC,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,KAAK,KAAK,OAAO,IAAI,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAAA,CAC7G,EAAA,CACO;AAEf;;"}

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var uiIcons = require('@flipdish/ui-icons');
+var Input = require('@flipdish/ui-library/components/atoms/Input');
+var cx = require('@flipdish/ui-library/utilities/cx');
+var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
+var reactAriaComponents = require('react-aria-components');
+var useHotkeyHint = require('../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.cjs');
+
+const sizes = cx.sortCx({
+    sm: { input: 'py-2 pr-9 pl-9 text-sm', icon: 'left-3 size-4 stroke-[2.25px]', clear: 'right-2', shortcut: 'pr-1.5' },
+    md: { input: 'py-2 pr-9 pl-10 text-md', icon: 'left-3 size-5', clear: 'right-2', shortcut: 'pr-2' },
+    lg: { input: 'py-2.5 pr-9.5 pl-10.5 text-md', icon: 'left-3.5 size-5', clear: 'right-2.5', shortcut: 'pr-2.5' },
+});
+/**
+ * A search box with a magnifier, a clear button once it holds text, and Escape to clear. Use it
+ * wherever typing filters a list or table; for a field that collects a value, use `Input`.
+ *
+ * @summary search box that filters as you type and clears in one press
+ */
+const SearchInput = ({ label, hint, placeholder, size = 'md', clearLabel = 'Clear search', shortcut, className, wrapperClassName, inputClassName, ref, 'data-testid': dataTestId, ...props }) => {
+    const inputTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'search-input', rootName: 'search-input' });
+    const shortcutLabel = useHotkeyHint.useHotkeyHint(shortcut === true ? 'mod+k' : shortcut || null);
+    return (jsxRuntime.jsx(reactAriaComponents.SearchField, { "aria-label": label ? undefined : placeholder, ...props, className: cx.cx('group/search flex h-max w-full flex-col items-start gap-1.5', className), children: ({ isInvalid, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && jsxRuntime.jsx(Input.Label, { isInvalid: isInvalid, children: label }), jsxRuntime.jsxs(reactAriaComponents.Group, { isDisabled: isDisabled, isInvalid: isInvalid, className: ({ isFocusWithin }) => cx.cx('relative flex w-full items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset', isFocusWithin && !isDisabled && 'ring-2 ring-brand', isDisabled && 'cursor-not-allowed opacity-50', isInvalid && 'ring-error_subtle', isInvalid && isFocusWithin && 'ring-2 ring-error', wrapperClassName), children: [jsxRuntime.jsx(uiIcons.SearchLg, { "aria-hidden": "true", className: cx.cx('pointer-events-none absolute text-fg-quaternary', sizes[size].icon) }), jsxRuntime.jsx(reactAriaComponents.Input, { ref: ref, "data-testid": inputTestId, placeholder: placeholder, className: cx.cx(
+                            // The browser draws its own cancel control on a search input; the clear button below replaces it.
+                            'm-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden', sizes[size].input, inputClassName) }), jsxRuntime.jsx(reactAriaComponents.Button, { "aria-label": clearLabel, "data-testid": testIdUtils.joinTestId(inputTestId, 'clear'), className: cx.cx('absolute flex cursor-pointer items-center justify-center rounded-md p-1 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear group-data-empty/search:hidden group-data-disabled/search:hidden group-data-readonly/search:hidden hover:text-fg-quaternary_hover focus-visible:outline-2', sizes[size].clear), children: jsxRuntime.jsx(uiIcons.XClose, { "aria-hidden": "true", className: "size-4 stroke-[2.25px]" }) }), shortcut && (jsxRuntime.jsx("div", { className: cx.cx('pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 group-data-empty/search:md:flex', sizes[size].shortcut), children: jsxRuntime.jsx("span", { "aria-hidden": "true", className: "rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", children: shortcutLabel }) }))] }), hint && jsxRuntime.jsx(Input.HintText, { isInvalid: isInvalid, children: hint })] })) }));
+};
+SearchInput.displayName = 'SearchInput';
+
+exports.SearchInput = SearchInput;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/SearchInput/index.tsx"],"sourcesContent":[null],"names":["sortCx","useResolvedTestId","useHotkeyHint","_jsx","AriaSearchField","cx","_jsxs","_Fragment","Label","AriaGroup","SearchLg","AriaInput","AriaButton","joinTestId","XClose","HintText"],"mappings":"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"}

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

@@ -0,0 +1,40 @@
+import type { ReactNode, Ref } from 'react';
+import type { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
+export interface SearchInputProps extends Omit<AriaSearchFieldProps, 'children' | 'className' | 'style'> {
+    /** Visible label above the field. Without one, pass `aria-label`; the placeholder alone does not name the field once it holds a value. */
+    label?: string;
+    /** Helper text under the field. */
+    hint?: ReactNode;
+    /** Placeholder shown while the field is empty. */
+    placeholder?: string;
+    /** Height, padding and text size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+    /**
+     * Keyboard shortcut hint shown while the field is empty. `true` shows the search shortcut (⌘K on
+     * macOS, Ctrl K elsewhere); a shortcut such as `mod+j` is drawn for the user's platform.
+     */
+    shortcut?: string | boolean;
+    /** Extra classes merged onto the outer field. */
+    className?: string;
+    /** Extra classes merged onto the bordered group around the input. */
+    wrapperClassName?: string;
+    /** Extra classes merged onto the `<input>`. */
+    inputClassName?: string;
+    /** Ref forwarded to the `<input>`. */
+    ref?: Ref<HTMLInputElement>;
+    /** Overrides the `<input>`'s `data-testid` (defaults to `fd-search-input`). The clear button derives `<root>--clear`. */
+    'data-testid'?: string;
+}
+/**
+ * A search box with a magnifier, a clear button once it holds text, and Escape to clear. Use it
+ * wherever typing filters a list or table; for a field that collects a value, use `Input`.
+ *
+ * @summary search box that filters as you type and clears in one press
+ */
+export declare const SearchInput: {
+    ({ label, hint, placeholder, size, clearLabel, shortcut, className, wrapperClassName, inputClassName, ref, "data-testid": dataTestId, ...props }: SearchInputProps): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/SearchInput/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,gBAAgB,IAAI,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAUtF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IACtG,0IAA0I;IAC1I,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sCAAsC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,yHAAyH;IACzH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW;sJAarB,gBAAgB;;CAuElB,CAAC"}

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

@@ -0,0 +1,30 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SearchLg, XClose } from '@flipdish/ui-icons';
+import { Label, HintText } from '@flipdish/ui-library/components/atoms/Input';
+import { sortCx, cx } from '@flipdish/ui-library/utilities/cx';
+import { useResolvedTestId, joinTestId } from '@flipdish/ui-library/utilities/testIdUtils';
+import { SearchField, Group, Input, Button } from 'react-aria-components';
+import { useHotkeyHint } from '../../../hooks/__internal__/useHotkeyHint/useHotkeyHint.js';
+
+const sizes = sortCx({
+    sm: { input: 'py-2 pr-9 pl-9 text-sm', icon: 'left-3 size-4 stroke-[2.25px]', clear: 'right-2', shortcut: 'pr-1.5' },
+    md: { input: 'py-2 pr-9 pl-10 text-md', icon: 'left-3 size-5', clear: 'right-2', shortcut: 'pr-2' },
+    lg: { input: 'py-2.5 pr-9.5 pl-10.5 text-md', icon: 'left-3.5 size-5', clear: 'right-2.5', shortcut: 'pr-2.5' },
+});
+/**
+ * A search box with a magnifier, a clear button once it holds text, and Escape to clear. Use it
+ * wherever typing filters a list or table; for a field that collects a value, use `Input`.
+ *
+ * @summary search box that filters as you type and clears in one press
+ */
+const SearchInput = ({ label, hint, placeholder, size = 'md', clearLabel = 'Clear search', shortcut, className, wrapperClassName, inputClassName, ref, 'data-testid': dataTestId, ...props }) => {
+    const inputTestId = useResolvedTestId({ testId: dataTestId, segment: 'search-input', rootName: 'search-input' });
+    const shortcutLabel = useHotkeyHint(shortcut === true ? 'mod+k' : shortcut || null);
+    return (jsx(SearchField, { "aria-label": label ? undefined : placeholder, ...props, className: cx('group/search flex h-max w-full flex-col items-start gap-1.5', className), children: ({ isInvalid, isDisabled }) => (jsxs(Fragment, { children: [label && jsx(Label, { isInvalid: isInvalid, children: label }), jsxs(Group, { isDisabled: isDisabled, isInvalid: isInvalid, className: ({ isFocusWithin }) => cx('relative flex w-full items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary transition-shadow duration-100 ease-linear ring-inset', isFocusWithin && !isDisabled && 'ring-2 ring-brand', isDisabled && 'cursor-not-allowed opacity-50', isInvalid && 'ring-error_subtle', isInvalid && isFocusWithin && 'ring-2 ring-error', wrapperClassName), children: [jsx(SearchLg, { "aria-hidden": "true", className: cx('pointer-events-none absolute text-fg-quaternary', sizes[size].icon) }), jsx(Input, { ref: ref, "data-testid": inputTestId, placeholder: placeholder, className: cx(
+                            // The browser draws its own cancel control on a search input; the clear button below replaces it.
+                            'm-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:hidden', sizes[size].input, inputClassName) }), jsx(Button, { "aria-label": clearLabel, "data-testid": joinTestId(inputTestId, 'clear'), className: cx('absolute flex cursor-pointer items-center justify-center rounded-md p-1 text-fg-quaternary outline-focus-ring transition duration-100 ease-linear group-data-empty/search:hidden group-data-disabled/search:hidden group-data-readonly/search:hidden hover:text-fg-quaternary_hover focus-visible:outline-2', sizes[size].clear), children: jsx(XClose, { "aria-hidden": "true", className: "size-4 stroke-[2.25px]" }) }), shortcut && (jsx("div", { className: cx('pointer-events-none absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 group-data-empty/search:md:flex', sizes[size].shortcut), children: jsx("span", { "aria-hidden": "true", className: "rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset", children: shortcutLabel }) }))] }), hint && jsx(HintText, { isInvalid: isInvalid, children: hint })] })) }));
+};
+SearchInput.displayName = 'SearchInput';
+
+export { SearchInput };
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/molecules/Carousel/hooks/useCarouselScroll.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+var useEmblaCarousel = require('embla-carousel-react');
+var React = require('react');
+
+/**
+ * Owns Embla's scroll position for `Carousel`: which snap is selected, whether previous and next
+ * are available, and the arrow keys that move between slides.
+ *
+ * @param options Embla setup for this carousel. The scroll axis comes from `orientation`, not `opts.axis`.
+ * @returns The viewport ref, Embla API, scroll actions, derived scroll state, and the keydown handler.
+ */
+const useCarouselScroll = ({ orientation, opts, plugins, setApi }) => {
+    const [carouselRef, api] = useEmblaCarousel({
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+    }, plugins);
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [scrollSnaps, setScrollSnaps] = React.useState([]);
+    const onInit = React.useCallback((api) => {
+        if (!api)
+            return;
+        setScrollSnaps(api.scrollSnapList());
+    }, []);
+    const onSelect = React.useCallback((api) => {
+        if (!api)
+            return;
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+        setSelectedIndex(api.selectedScrollSnap());
+    }, []);
+    const scrollPrev = React.useCallback(() => {
+        api?.scrollPrev();
+    }, [api]);
+    const scrollNext = React.useCallback(() => {
+        api?.scrollNext();
+    }, [api]);
+    const onKeyDownCapture = React.useCallback((event) => {
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            scrollPrev();
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            scrollNext();
+        }
+    }, [scrollPrev, scrollNext]);
+    React.useEffect(() => {
+        if (!api || !setApi)
+            return;
+        setApi(api);
+    }, [api, setApi]);
+    React.useEffect(() => {
+        if (!api)
+            return;
+        onInit(api);
+        onSelect(api);
+        api.on('reInit', onInit);
+        api.on('reInit', onSelect);
+        api.on('select', onSelect);
+        return () => {
+            api?.off('select', onSelect);
+        };
+    }, [api, onInit, onSelect]);
+    return {
+        carouselRef,
+        api,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        selectedIndex,
+        scrollSnaps,
+        onKeyDownCapture,
+    };
+};
+
+exports.useCarouselScroll = useCarouselScroll;
+//# sourceMappingURL=useCarouselScroll.cjs.map

package/dist/components/molecules/Carousel/hooks/useCarouselScroll.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarouselScroll.cjs","sources":["../../../../../src/components/molecules/Carousel/hooks/useCarouselScroll.ts"],"sourcesContent":[null],"names":["useState","useCallback","useEffect"],"mappings":"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"}

package/dist/components/molecules/Carousel/hooks/useCarouselScroll.d.ts

@@ -0,0 +1,46 @@
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
+import type { KeyboardEvent } from 'react';
+export type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+export type CarouselOptions = UseCarouselParameters[0];
+export type CarouselPlugin = UseCarouselParameters[1];
+export interface UseCarouselScrollOptions {
+    /** Scroll axis. `horizontal` maps to Embla's `x`; `vertical` maps to `y` and overrides `opts.axis`. */
+    orientation: 'horizontal' | 'vertical';
+    /** Embla options, merged under the axis taken from `orientation`. */
+    opts?: CarouselOptions;
+    /** Embla plugins, forwarded unchanged. */
+    plugins?: CarouselPlugin;
+    /** Receives the Embla API once it exists, including when this callback's identity changes. */
+    setApi?: (api: CarouselApi) => void;
+}
+export interface UseCarouselScrollResult {
+    /** Ref for the Embla viewport element. */
+    carouselRef: UseEmblaCarouselType[0];
+    /** Embla API once the viewport is mounted, otherwise `undefined`. */
+    api: CarouselApi;
+    /** Scrolls to the previous snap. No-op while `api` is missing. */
+    scrollPrev: () => void;
+    /** Scrolls to the next snap. No-op while `api` is missing. */
+    scrollNext: () => void;
+    /** Whether Embla can scroll to a previous snap. */
+    canScrollPrev: boolean;
+    /** Whether Embla can scroll to a next snap. */
+    canScrollNext: boolean;
+    /** Index of the selected snap. `0` until Embla reports one. */
+    selectedIndex: number;
+    /** Snap positions reported by Embla. Empty until init. */
+    scrollSnaps: number[];
+    /** ArrowLeft and ArrowRight move between snaps; other keys are ignored. */
+    onKeyDownCapture: (event: KeyboardEvent<HTMLDivElement>) => void;
+}
+/**
+ * Owns Embla's scroll position for `Carousel`: which snap is selected, whether previous and next
+ * are available, and the arrow keys that move between slides.
+ *
+ * @param options Embla setup for this carousel. The scroll axis comes from `orientation`, not `opts.axis`.
+ * @returns The viewport ref, Embla API, scroll actions, derived scroll state, and the keydown handler.
+ */
+export declare const useCarouselScroll: ({ orientation, opts, plugins, setApi }: UseCarouselScrollOptions) => UseCarouselScrollResult;
+export {};
+//# sourceMappingURL=useCarouselScroll.d.ts.map

package/dist/components/molecules/Carousel/hooks/useCarouselScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCarouselScroll.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/Carousel/hooks/useCarouselScroll.ts"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAClD,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACjE,MAAM,MAAM,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAC;AAEtD,MAAM,WAAW,wBAAwB;IACvC,uGAAuG;IACvG,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,qEAAqE;IACrE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;CACrC;AAED,MAAM,WAAW,uBAAuB;IACtC,0CAA0C;IAC1C,WAAW,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACrC,qEAAqE;IACrE,GAAG,EAAE,WAAW,CAAC;IACjB,kEAAkE;IAClE,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,8DAA8D;IAC9D,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,mDAAmD;IACnD,aAAa,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,aAAa,EAAE,OAAO,CAAC;IACvB,+DAA+D;IAC/D,aAAa,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,2EAA2E;IAC3E,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAClE;AAED;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,wCAAwC,wBAAwB,KAAG,uBAgFpG,CAAC"}

package/dist/components/molecules/Carousel/hooks/useCarouselScroll.js

@@ -0,0 +1,79 @@
+import useEmblaCarousel from 'embla-carousel-react';
+import { useState, useCallback, useEffect } from 'react';
+
+/**
+ * Owns Embla's scroll position for `Carousel`: which snap is selected, whether previous and next
+ * are available, and the arrow keys that move between slides.
+ *
+ * @param options Embla setup for this carousel. The scroll axis comes from `orientation`, not `opts.axis`.
+ * @returns The viewport ref, Embla API, scroll actions, derived scroll state, and the keydown handler.
+ */
+const useCarouselScroll = ({ orientation, opts, plugins, setApi }) => {
+    const [carouselRef, api] = useEmblaCarousel({
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+    }, plugins);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [scrollSnaps, setScrollSnaps] = useState([]);
+    const onInit = useCallback((api) => {
+        if (!api)
+            return;
+        setScrollSnaps(api.scrollSnapList());
+    }, []);
+    const onSelect = useCallback((api) => {
+        if (!api)
+            return;
+        setCanScrollPrev(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
+        setSelectedIndex(api.selectedScrollSnap());
+    }, []);
+    const scrollPrev = useCallback(() => {
+        api?.scrollPrev();
+    }, [api]);
+    const scrollNext = useCallback(() => {
+        api?.scrollNext();
+    }, [api]);
+    const onKeyDownCapture = useCallback((event) => {
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            scrollPrev();
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            scrollNext();
+        }
+    }, [scrollPrev, scrollNext]);
+    useEffect(() => {
+        if (!api || !setApi)
+            return;
+        setApi(api);
+    }, [api, setApi]);
+    useEffect(() => {
+        if (!api)
+            return;
+        onInit(api);
+        onSelect(api);
+        api.on('reInit', onInit);
+        api.on('reInit', onSelect);
+        api.on('select', onSelect);
+        return () => {
+            api?.off('select', onSelect);
+        };
+    }, [api, onInit, onSelect]);
+    return {
+        carouselRef,
+        api,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        selectedIndex,
+        scrollSnaps,
+        onKeyDownCapture,
+    };
+};
+
+export { useCarouselScroll };
+//# sourceMappingURL=useCarouselScroll.js.map

package/dist/components/molecules/Carousel/hooks/useCarouselScroll.js.map

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

package/dist/components/molecules/Carousel/index.cjs

@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var Dot = require('@flipdish/ui-library/components/atoms/Dot');
 var cx = require('@flipdish/ui-library/utilities/cx');
 var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
-var useEmblaCarousel = require('embla-carousel-react');
 var React = require('react');
+var useCarouselScroll = require('./hooks/useCarouselScroll.cjs');
 
 const CarouselContext = React.createContext(null);
 const useCarousel = () => {
@@ -17,59 +17,12 @@ const useCarousel = () => {
 };
 const CarouselRoot = ({ orientation = 'horizontal', opts, setApi, plugins, className, children, 'data-testid': dataTestId, ...props }) => {
     const rootTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'carousel', rootName: 'carousel' });
-    const [carouselRef, api] = useEmblaCarousel({
-        ...opts,
-        axis: orientation === 'horizontal' ? 'x' : 'y',
-    }, plugins);
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
-    const [selectedIndex, setSelectedIndex] = React.useState(0);
-    const [scrollSnaps, setScrollSnaps] = React.useState([]);
-    const onInit = React.useCallback((api) => {
-        if (!api)
-            return;
-        setScrollSnaps(api.scrollSnapList());
-    }, []);
-    const onSelect = React.useCallback((api) => {
-        if (!api)
-            return;
-        setCanScrollPrev(api.canScrollPrev());
-        setCanScrollNext(api.canScrollNext());
-        setSelectedIndex(api.selectedScrollSnap());
-    }, []);
-    const scrollPrev = React.useCallback(() => {
-        api?.scrollPrev();
-    }, [api]);
-    const scrollNext = React.useCallback(() => {
-        api?.scrollNext();
-    }, [api]);
-    const handleKeyDown = React.useCallback((event) => {
-        if (event.key === 'ArrowLeft') {
-            event.preventDefault();
-            scrollPrev();
-        }
-        else if (event.key === 'ArrowRight') {
-            event.preventDefault();
-            scrollNext();
-        }
-    }, [scrollPrev, scrollNext]);
-    React.useEffect(() => {
-        if (!api || !setApi)
-            return;
-        setApi(api);
-    }, [api, setApi]);
-    React.useEffect(() => {
-        if (!api)
-            return;
-        onInit(api);
-        onSelect(api);
-        api.on('reInit', onInit);
-        api.on('reInit', onSelect);
-        api.on('select', onSelect);
-        return () => {
-            api?.off('select', onSelect);
-        };
-    }, [api, onInit, onSelect]);
+    const { carouselRef, api, scrollPrev, scrollNext, canScrollPrev, canScrollNext, selectedIndex, scrollSnaps, onKeyDownCapture } = useCarouselScroll.useCarouselScroll({
+        orientation,
+        opts,
+        plugins,
+        setApi,
+    });
     return (jsxRuntime.jsx(testIdUtils.TestIdProvider, { value: rootTestId, children: jsxRuntime.jsx(CarouselContext.Provider, { value: {
                 carouselRef,
                 api: api,
@@ -81,7 +34,7 @@ const CarouselRoot = ({ orientation = 'horizontal', opts, setApi, plugins, class
                 canScrollNext,
                 selectedIndex,
                 scrollSnaps,
-            }, children: jsxRuntime.jsx("div", { onKeyDownCapture: handleKeyDown, className: cx.cx('relative', className), role: "region", "aria-roledescription": "carousel", ...props, "data-testid": rootTestId, children: children }) }) }));
+            }, children: jsxRuntime.jsx("div", { onKeyDownCapture: onKeyDownCapture, className: cx.cx('relative', className), role: "region", "aria-roledescription": "carousel", ...props, "data-testid": rootTestId, children: children }) }) }));
 };
 const CarouselContent = ({ className, overflowHidden = true, ...props }) => {
     const { carouselRef, orientation } = useCarousel();