@bspk/ui 1.3.10 → 1.3.11

package/dist/components/ChipGroup/ChipGroup.d.ts

@@ -1,16 +1,15 @@
 import './chip-group.scss';
-import { ReactNode } from 'react';
 import { ChipProps } from '-/components/Chip';
-export type ChipGroupItem = Pick<ChipProps, 'disabled' | 'flat' | 'label' | 'leadingIcon' | 'onClick' | 'selected' | 'trailingBadge' | 'trailingIcon'>;
 export type ChipGroupProps = {
     /**
-     * To allow chips to wrap. If set to false chips will scroll.
+     * Controls the overflow behavior of the chip group. If set to `scroll`, the chip group will be scrollable
+     * horizontally. If set to `wrap`, the chip group will wrap to multiple lines as needed.
      *
-     * @default true
+     * @default wrap
      */
-    wrap?: boolean;
-    /** Only Chip components should be used as children. */
-    children?: ReactNode;
+    overflow?: 'scroll' | 'wrap';
+    /** Only Chip components should be used as items. */
+    items?: ChipProps[];
 };
 /**
  * A component that manages the layout of a group of chips.
@@ -19,29 +18,17 @@ export type ChipGroupProps = {
  *     import { Chip } from '@bspk/ui/Chip';
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
- *     <ChipGroup wrap={false}>
- *         <Chip
- *             label="chip 1"
- *             leadingIcon={<SvgLightbulb />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 2"
- *             leadingIcon={<SvgIcecream />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 3"
- *             leadingIcon={<SvgSignLanguage />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgClose />}
- *         />
- *     </ChipGroup>;
+ *     <ChipGroup
+ *         overflow="scroll"
+ *         items={[
+ *             { label: 'chip 1', leadingIcon: <SvgLightbulb />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 2', leadingIcon: <SvgIcecream />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 3', leadingIcon: <SvgSignLanguage />, onClick: () => {}, trailingIcon: <SvgClose /> },
+ *         ]}
+ *     />;
  *
  * @name ChipGroup
  * @phase UXReview
  */
-export declare function ChipGroup({ children, wrap }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChipGroup({ overflow, items }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipGroup/ChipGroup.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import './chip-group.css.js';
+import { Chip } from '../Chip';
 /**
  * A component that manages the layout of a group of chips.
  *
@@ -7,31 +9,19 @@ import './chip-group.css.js';
  *     import { Chip } from '@bspk/ui/Chip';
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
- *     <ChipGroup wrap={false}>
- *         <Chip
- *             label="chip 1"
- *             leadingIcon={<SvgLightbulb />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 2"
- *             leadingIcon={<SvgIcecream />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 3"
- *             leadingIcon={<SvgSignLanguage />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgClose />}
- *         />
- *     </ChipGroup>;
+ *     <ChipGroup
+ *         overflow="scroll"
+ *         items={[
+ *             { label: 'chip 1', leadingIcon: <SvgLightbulb />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 2', leadingIcon: <SvgIcecream />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 3', leadingIcon: <SvgSignLanguage />, onClick: () => {}, trailingIcon: <SvgClose /> },
+ *         ]}
+ *     />;
  *
  * @name ChipGroup
  * @phase UXReview
  */
-export function ChipGroup({ children, wrap = true }) {
-    return (_jsx("div", { "data-bspk": "chip-group", "data-wrap": wrap || undefined, children: children }));
+export function ChipGroup({ overflow = 'wrap', items }) {
+    return (_jsx("div", { "data-bspk": "chip-group", "data-scroll": overflow === 'scroll' || undefined, children: items?.length ? items.map((item, idx) => _createElement(Chip, { ...item, key: item.label ?? idx })) : null }));
 }
 //# sourceMappingURL=ChipGroup.js.map

package/dist/components/ChipGroup/ChipGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAqB3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAkB;IAC/D,OAAO,CACH,2BAAe,YAAY,eAAY,IAAI,IAAI,SAAS,YACnD,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";;AAAA,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,IAAI,EAAa,MAAM,mBAAmB,CAAC;AAapD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,EAAE,KAAK,EAAkB;IAClE,OAAO,CACH,2BAAe,YAAY,iBAAc,QAAQ,KAAK,QAAQ,IAAI,SAAS,YACtE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,eAAC,IAAI,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,GAAG,GAAI,CAAC,CAAC,CAAC,CAAC,IAAI,GAC1F,CACT,CAAC;AACN,CAAC"}

package/dist/components/ChipGroup/ChipGroupExample.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SvgChevronRight } from '@bspk/icons/ChevronRight';
 import { SvgClose } from '@bspk/icons/Close';
 import { SvgCloud } from '@bspk/icons/Cloud';
@@ -7,17 +7,72 @@ import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { SvgLightbulb } from '@bspk/icons/Lightbulb';
 import { SvgOpportunities } from '@bspk/icons/Opportunities';
 import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
-import { Chip } from '../Chip';
 export const presets = [
-    { label: 'scroll', propState: { wrap: false } },
-    { label: 'wrap', propState: { wrap: true } },
+    {
+        label: 'Scroll',
+        propState: {
+            overflow: 'scroll',
+            items: [
+                { label: 'chip 1', leadingIcon: _jsx(SvgLightbulb, {}), trailingIcon: _jsx(SvgChevronRight, {}) },
+                { label: 'chip 2', leadingIcon: _jsx(SvgIcecream, {}), trailingIcon: _jsx(SvgChevronRight, {}) },
+                { label: 'chip 3', leadingIcon: _jsx(SvgSignLanguage, {}), trailingIcon: _jsx(SvgClose, {}) },
+                { label: 'chip 4', leadingIcon: _jsx(SvgOpportunities, {}), trailingIcon: _jsx(SvgClose, {}) },
+                { label: 'chip 5', leadingIcon: _jsx(SvgCloud, {}), trailingIcon: _jsx(SvgKeyboardArrowDown, {}) },
+            ],
+        },
+    },
+    {
+        label: 'Scroll: Flat chips',
+        propState: {
+            overflow: 'scroll',
+            items: [
+                {
+                    flat: true,
+                    label: 'chip 1',
+                    leadingIcon: _jsx(SvgLightbulb, {}),
+                    trailingBadge: { count: 9, size: 'x-small' },
+                },
+                {
+                    flat: true,
+                    label: 'chip 2',
+                    leadingIcon: _jsx(SvgIcecream, {}),
+                    trailingBadge: { count: 2, size: 'x-small' },
+                },
+                { flat: true, label: 'chip 3', leadingIcon: _jsx(SvgSignLanguage, {}), trailingIcon: _jsx(SvgClose, {}) },
+                {
+                    flat: true,
+                    label: 'chip 4',
+                    leadingIcon: _jsx(SvgOpportunities, {}),
+                    trailingBadge: { count: 5, size: 'x-small' },
+                },
+                {
+                    flat: true,
+                    label: 'chip 5',
+                    leadingIcon: _jsx(SvgCloud, {}),
+                    trailingBadge: { count: 3, size: 'x-small' },
+                },
+            ],
+        },
+    },
 ];
 export const ChipGroupExample = ({ action }) => ({
     containerStyle: { width: '600px' },
     presets,
+    defaultState: {
+        overflow: 'wrap',
+        items: [
+            { label: 'chip 1', leadingIcon: _jsx(SvgLightbulb, {}), trailingIcon: _jsx(SvgChevronRight, {}) },
+            { label: 'chip 2', leadingIcon: _jsx(SvgIcecream, {}), trailingIcon: _jsx(SvgChevronRight, {}) },
+            { label: 'chip 3', leadingIcon: _jsx(SvgSignLanguage, {}), trailingIcon: _jsx(SvgClose, {}) },
+            { label: 'chip 4', leadingIcon: _jsx(SvgOpportunities, {}), trailingIcon: _jsx(SvgClose, {}) },
+            { label: 'chip 5', leadingIcon: _jsx(SvgCloud, {}), trailingIcon: _jsx(SvgKeyboardArrowDown, {}) },
+        ],
+    },
     render: ({ props, Component }) => {
-        const handleChipInputClick = () => action('Chip clicked!');
-        return (_jsxs(Component, { ...props, children: [_jsx(Chip, { label: "chip 1", leadingIcon: _jsx(SvgLightbulb, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(Chip, { label: "chip 2", leadingIcon: _jsx(SvgIcecream, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(Chip, { label: "chip 3", leadingIcon: _jsx(SvgSignLanguage, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(Chip, { label: "chip 4", leadingIcon: _jsx(SvgOpportunities, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(Chip, { label: "chip 5", leadingIcon: _jsx(SvgCloud, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgKeyboardArrowDown, {}) })] }));
+        return (_jsx(Component, { ...props, items: props.items?.map((item) => ({
+                ...item,
+                onClick: () => action('Chip clicked!'),
+            })) }));
     },
 });
 //# sourceMappingURL=ChipGroupExample.js.map

package/dist/components/ChipGroup/ChipGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipGroupExample.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroupExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAIzC,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC7C,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAC/C,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACjF,cAAc,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC3D,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,YAAY,KAAG,EAC7B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,WAAW,KAAG,EAC5B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,eAAe,KAAG,EAChC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,gBAAgB,KAAG,EACjC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,QAAQ,KAAG,EACzB,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,oBAAoB,KAAG,GACxC,IACM,CACf,CAAC;IACN,CAAC;CACJ,CAAC,CAAC"}
+{"version":3,"file":"ChipGroupExample.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroupExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/ChipGroup/chip-group.css

@@ -2,10 +2,12 @@
   display: flex;
   gap: var(--spacing-sizing-02);
   width: 100%;
-  overflow: auto;
-}
-[data-bspk=chip-group][data-wrap] {
   flex-flow: row wrap;
+  padding-bottom: var(--spacing-sizing-01);
+}
+[data-bspk=chip-group][data-scroll] {
+  overflow: auto;
+  flex-wrap: nowrap;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipGroup/chip-group.css.js

@@ -5,10 +5,12 @@ style.appendChild(document.createTextNode(`[data-bspk=chip-group] {
   display: flex;
   gap: var(--spacing-sizing-02);
   width: 100%;
-  overflow: auto;
-}
-[data-bspk=chip-group][data-wrap] {
   flex-flow: row wrap;
+  padding-bottom: var(--spacing-sizing-01);
+}
+[data-bspk=chip-group][data-scroll] {
+  overflow: auto;
+  flex-wrap: nowrap;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/OTPInput/OTPInput.d.ts

@@ -1,6 +1,6 @@
 import './otp-input.scss';
 import { CommonProps } from '-/types/common';
-export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
+export type OTPInputProps = CommonProps<'aria-label' | 'id' | 'invalid' | 'name' | 'size'> & {
     /**
      * The value of the otp-input.
      *
@@ -23,6 +23,12 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
      * @maximum 10
      */
     length?: number;
+    /**
+     * The mode of the otp-input.
+     *
+     * @default false
+     */
+    alphanumeric?: boolean;
 };
 /**
  * A row of input fields that are used to input a temporary secure pin code sent to the customer.
@@ -33,11 +39,11 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
  *     () => {
  *         const [otpValue, setOtpValue] = useState('');
  *
- *         <OTPInput name="2-auth" length={4} value={otpValue} onChange={setOtpValue} />;
+ *         return <OTPInput name="2-auth" length={6} value={otpValue} onChange={setOtpValue} alphanumeric={false} />;
  *     };
  *
  * @name OTPInput
  * @phase UXReview
  */
-export declare function OTPInput({ value: valueProp, onChange, name, id: idProp, length, size, invalid, }: OTPInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function OTPInput({ value: valueProp, onChange, name, id: idProp, length, size, invalid, alphanumeric, 'aria-label': ariaLabel, }: OTPInputProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/OTPInput/OTPInput.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './otp-input.css.js';
-import { useRef } from 'react';
 import { useId } from '../../hooks/useId';
 /**
  * A row of input fields that are used to input a temporary secure pin code sent to the customer.
@@ -11,49 +10,18 @@ import { useId } from '../../hooks/useId';
  *     () => {
  *         const [otpValue, setOtpValue] = useState('');
  *
- *         <OTPInput name="2-auth" length={4} value={otpValue} onChange={setOtpValue} />;
+ *         return <OTPInput name="2-auth" length={6} value={otpValue} onChange={setOtpValue} alphanumeric={false} />;
  *     };
  *
  * @name OTPInput
  * @phase UXReview
  */
-export function OTPInput({ value: valueProp, onChange, name, id: idProp, length = 6, size = 'medium', invalid = false, }) {
+export function OTPInput({ value: valueProp, onChange, name, id: idProp, length = 6, size = 'medium', invalid = false, alphanumeric = false, 'aria-label': ariaLabel = 'OTP input', }) {
     const id = useId(idProp);
-    const value = valueProp?.slice(0, length) || '';
-    const parentRef = useRef(null);
-    const element = (index) => parentRef.current?.children[index + 1];
-    const setIndex = (index, character) => {
-        const charArray = value.split('');
-        charArray[index] = character;
-        return charArray.join('');
-    };
-    const updateValue = (next) => onChange(next.slice(0, length).toUpperCase());
-    return (_jsxs("div", { "data-bspk": "otp-input", "data-invalid": invalid || undefined, "data-size": size || 'medium', id: id, ref: parentRef, children: [_jsx("input", { name: name, type: "hidden", value: value }), Array.from({ length }, (_, index) => (_jsx("span", { "aria-label": `OTP digit ${index + 1}`, "data-digit": index + 1, onClick: (e) => {
-                    if (value[index])
-                        return;
-                    // if a digit does not exist for the previous index then focus the previous input
-                    if (!value[index - 1]) {
-                        e.preventDefault();
-                        element(value.length)?.focus();
-                    }
-                }, onKeyDown: (event) => {
-                    if (event.key === 'Backspace') {
-                        if (value) {
-                            // delete the last value if there is one and focus the first empty input
-                            const next = value.slice(0, -1);
-                            updateValue(next);
-                            element(next.length)?.focus();
-                        }
-                    }
-                    // if a single character key is pressed at at the current index and focus the next input
-                    if (event.key.length === 1) {
-                        updateValue(setIndex(index, event.key));
-                        element(index + 1)?.focus();
-                    }
-                }, onPaste: (event) => {
-                    const pastedData = event.clipboardData.getData('text').trim();
-                    updateValue(pastedData);
-                    element(length - 1)?.focus();
-                }, role: "textbox", tabIndex: 0, children: value?.[index] || '' }, index)))] }));
+    const value = valueProp || '';
+    const activeIndex = Math.min(value.length, length - 1);
+    return (_jsxs("div", { "data-bspk": "otp-input", "data-invalid": invalid || undefined, "data-size": size || 'medium', id: id, children: [_jsx("input", { "aria-label": ariaLabel, inputMode: alphanumeric ? 'text' : 'numeric', name: name, onChange: (event) => {
+                    onChange(event.target.value.trim().toUpperCase().slice(0, length));
+                }, type: alphanumeric ? 'text' : 'number', value: value }), _jsx("span", { "data-digits": true, children: Array.from({ length }, (_, index) => (_jsx("span", { "data-active": index === activeIndex || undefined, "data-digit": true, children: value[index] }, index))) })] }));
 }
 //# sourceMappingURL=OTPInput.js.map

package/dist/components/OTPInput/OTPInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.js","sourceRoot":"","sources":["../../../src/components/OTPInput/OTPInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OTPInput.js","sourceRoot":"","sources":["../../../src/components/OTPInput/OTPInput.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkCtC;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,IAAI,EACJ,EAAE,EAAE,MAAM,EACV,MAAM,GAAG,CAAC,EACV,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,YAAY,GAAG,KAAK,EACpB,YAAY,EAAE,SAAS,GAAG,WAAW,GACzB;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,KAAK,GAAG,SAAS,IAAI,EAAE,CAAC;IAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC;IAEvD,OAAO,CACH,4BAAe,WAAW,kBAAe,OAAO,IAAI,SAAS,eAAa,IAAI,IAAI,QAAQ,EAAE,EAAE,EAAE,EAAE,aAC9F,8BACgB,SAAS,EACrB,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;gBACvE,CAAC,EACD,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACtC,KAAK,EAAE,KAAK,GACd,EACF,8CACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,8BAAmB,KAAK,KAAK,WAAW,IAAI,SAAS,gCAChD,KAAK,CAAC,KAAK,CAAC,IADsD,KAAK,CAErE,CACV,CAAC,GACC,IACL,CACT,CAAC;AACN,CAAC"}

package/dist/components/OTPInput/OTPInputExample.js

@@ -19,7 +19,12 @@ export const presets = [
 ];
 export const OTPInputExample = {
     containerStyle: { width: '100%' },
-    defaultState: {},
+    defaultState: {
+        value: '',
+        length: 6,
+        name: 'OTP Input',
+        alphanumeric: false,
+    },
     disableProps: [],
     presets,
     render: ({ props, Component }) => _jsx(Component, { ...props }),

package/dist/components/OTPInput/OTPInputExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"OTPInputExample.js","sourceRoot":"","sources":["../../../src/components/OTPInput/OTPInputExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,WAAW;SACpB;KACJ;IACD;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,WAAW;SACpB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,EAAE;CACf,CAAC"}
+{"version":3,"file":"OTPInputExample.js","sourceRoot":"","sources":["../../../src/components/OTPInput/OTPInputExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,WAAW;SACpB;KACJ;IACD;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,WAAW;SACpB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE;QACV,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,WAAW;QACjB,YAAY,EAAE,KAAK;KACtB;IACD,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,EAAE;CACf,CAAC"}

package/dist/components/OTPInput/otp-input.css

@@ -1,13 +1,27 @@
 [data-bspk=otp-input] {
+  width: fit-content;
+  position: relative;
+}
+[data-bspk=otp-input] input[inputMode] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  border: none;
+  caret-color: transparent;
+}
+[data-bspk=otp-input] [data-digits] {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: var(--spacing-sizing-02);
   font: var(--font);
   width: fit-content;
+  position: relative;
+  pointer-events: none;
 }
-[data-bspk=otp-input] [data-digit] {
+[data-bspk=otp-input] [data-digits] [data-digit] {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-sm);
@@ -17,25 +31,12 @@
   width: var(--width);
   position: relative;
   outline: none;
+  text-align: center;
 }
-[data-bspk=otp-input] [data-digit]:hover:not(:focus)::after {
-  background: var(--interaction-hover-opacity);
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--radius-sm);
-}
-[data-bspk=otp-input] [data-digit]:active::after {
-  background: var(--interaction-press-opacity);
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--radius-sm);
-}
-[data-bspk=otp-input] [data-digit]:focus:not(:active) {
+[data-bspk=otp-input] input[inputMode]:focus + [data-digits] [data-digit][data-active] {
   outline: solid 2px var(--stroke-neutral-focus);
 }
-[data-bspk=otp-input] [data-digit]:focus:not(:active):empty::before {
+[data-bspk=otp-input] input[inputMode]:focus + [data-digits] [data-digit][data-active]:empty::before {
   content: "";
   width: 2px;
   height: calc(var(--caret-height) - 8px);

package/dist/components/OTPInput/otp-input.css.js

@@ -2,15 +2,29 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=otp-input] {
+  width: fit-content;
+  position: relative;
+}
+[data-bspk=otp-input] input[inputMode] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  border: none;
+  caret-color: transparent;
+}
+[data-bspk=otp-input] [data-digits] {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: var(--spacing-sizing-02);
   font: var(--font);
   width: fit-content;
+  position: relative;
+  pointer-events: none;
 }
-[data-bspk=otp-input] [data-digit] {
+[data-bspk=otp-input] [data-digits] [data-digit] {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-sm);
@@ -20,25 +34,12 @@ style.appendChild(document.createTextNode(`[data-bspk=otp-input] {
   width: var(--width);
   position: relative;
   outline: none;
+  text-align: center;
 }
-[data-bspk=otp-input] [data-digit]:hover:not(:focus)::after {
-  background: var(--interaction-hover-opacity);
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--radius-sm);
-}
-[data-bspk=otp-input] [data-digit]:active::after {
-  background: var(--interaction-press-opacity);
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--radius-sm);
-}
-[data-bspk=otp-input] [data-digit]:focus:not(:active) {
+[data-bspk=otp-input] input[inputMode]:focus + [data-digits] [data-digit][data-active] {
   outline: solid 2px var(--stroke-neutral-focus);
 }
-[data-bspk=otp-input] [data-digit]:focus:not(:active):empty::before {
+[data-bspk=otp-input] input[inputMode]:focus + [data-digits] [data-digit][data-active]:empty::before {
   content: "";
   width: 2px;
   height: calc(var(--caret-height) - 8px);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.3.10",
+    "version": "1.3.11",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

package/src/components/ChipGroup/ChipGroup.rtl.test.tsx

@@ -1,6 +1,5 @@
 import { ChipGroup } from './ChipGroup';
 import { presets } from './ChipGroupExample';
-import { Chip } from '-/components/Chip';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
@@ -9,22 +8,28 @@ describe('ChipGroup (RTL)', () => {
         it(
             `has no basic a11y issues - ${preset.label}`,
             hasNoBasicA11yIssues(
-                <ChipGroup {...preset.propState}>
-                    <Chip label="suggestion 1" onClick={() => {}} />
-                    <Chip label="suggestion 2" onClick={() => {}} />
-                    <Chip label="suggestion 3" onClick={() => {}} />
-                </ChipGroup>,
+                <ChipGroup
+                    {...preset.propState}
+                    items={[
+                        { label: 'suggestion 1', onClick: () => {} },
+                        { label: 'suggestion 2', onClick: () => {} },
+                        { label: 'suggestion 3', onClick: () => {} },
+                    ]}
+                />,
             ),
         );
     });
 
     it('renders', () => {
         const { getByText } = render(
-            <ChipGroup {...presets[1].propState}>
-                <Chip label="suggestion 1" onClick={() => {}} />
-                <Chip label="suggestion 2" onClick={() => {}} />
-                <Chip label="suggestion 3" onClick={() => {}} />
-            </ChipGroup>,
+            <ChipGroup
+                {...presets[1].propState}
+                items={[
+                    { label: 'suggestion 1', onClick: () => {} },
+                    { label: 'suggestion 2', onClick: () => {} },
+                    { label: 'suggestion 3', onClick: () => {} },
+                ]}
+            />,
         );
 
         expect(getByText('suggestion 1')).toBeInTheDocument();

package/src/components/ChipGroup/ChipGroup.tsx

@@ -1,23 +1,17 @@
 import './chip-group.scss';
 
-import { ReactNode } from 'react';
-
-import { ChipProps } from '-/components/Chip';
-
-export type ChipGroupItem = Pick<
-    ChipProps,
-    'disabled' | 'flat' | 'label' | 'leadingIcon' | 'onClick' | 'selected' | 'trailingBadge' | 'trailingIcon'
->;
+import { Chip, ChipProps } from '-/components/Chip';
 
 export type ChipGroupProps = {
     /**
-     * To allow chips to wrap. If set to false chips will scroll.
+     * Controls the overflow behavior of the chip group. If set to `scroll`, the chip group will be scrollable
+     * horizontally. If set to `wrap`, the chip group will wrap to multiple lines as needed.
      *
-     * @default true
+     * @default wrap
      */
-    wrap?: boolean;
-    /** Only Chip components should be used as children. */
-    children?: ReactNode;
+    overflow?: 'scroll' | 'wrap';
+    /** Only Chip components should be used as items. */
+    items?: ChipProps[];
 };
 /**
  * A component that manages the layout of a group of chips.
@@ -26,34 +20,22 @@ export type ChipGroupProps = {
  *     import { Chip } from '@bspk/ui/Chip';
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
- *     <ChipGroup wrap={false}>
- *         <Chip
- *             label="chip 1"
- *             leadingIcon={<SvgLightbulb />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 2"
- *             leadingIcon={<SvgIcecream />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgChevronRight />}
- *         />
- *         <Chip
- *             label="chip 3"
- *             leadingIcon={<SvgSignLanguage />}
- *             onClick={() => action('Chip clicked!')}
- *             trailingIcon={<SvgClose />}
- *         />
- *     </ChipGroup>;
+ *     <ChipGroup
+ *         overflow="scroll"
+ *         items={[
+ *             { label: 'chip 1', leadingIcon: <SvgLightbulb />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 2', leadingIcon: <SvgIcecream />, onClick: () => {}, trailingIcon: <SvgChevronRight /> },
+ *             { label: 'chip 3', leadingIcon: <SvgSignLanguage />, onClick: () => {}, trailingIcon: <SvgClose /> },
+ *         ]}
+ *     />;
  *
  * @name ChipGroup
  * @phase UXReview
  */
-export function ChipGroup({ children, wrap = true }: ChipGroupProps) {
+export function ChipGroup({ overflow = 'wrap', items }: ChipGroupProps) {
     return (
-        <div data-bspk="chip-group" data-wrap={wrap || undefined}>
-            {children}
+        <div data-bspk="chip-group" data-scroll={overflow === 'scroll' || undefined}>
+            {items?.length ? items.map((item, idx) => <Chip {...item} key={item.label ?? idx} />) : null}
         </div>
     );
 }

package/src/components/ChipGroup/ChipGroupExample.tsx

@@ -7,53 +7,81 @@ import { SvgLightbulb } from '@bspk/icons/Lightbulb';
 import { SvgOpportunities } from '@bspk/icons/Opportunities';
 import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
 
-import { Chip } from '-/components/Chip';
+// import { Chip } from '-/components/Chip';
 import { ChipGroupProps } from '-/components/ChipGroup';
 import { ComponentExampleFn, Preset } from '-/utils/demo';
 
 export const presets: Preset<ChipGroupProps>[] = [
-    { label: 'scroll', propState: { wrap: false } },
-    { label: 'wrap', propState: { wrap: true } },
+    {
+        label: 'Scroll',
+        propState: {
+            overflow: 'scroll',
+            items: [
+                { label: 'chip 1', leadingIcon: <SvgLightbulb />, trailingIcon: <SvgChevronRight /> },
+                { label: 'chip 2', leadingIcon: <SvgIcecream />, trailingIcon: <SvgChevronRight /> },
+                { label: 'chip 3', leadingIcon: <SvgSignLanguage />, trailingIcon: <SvgClose /> },
+                { label: 'chip 4', leadingIcon: <SvgOpportunities />, trailingIcon: <SvgClose /> },
+                { label: 'chip 5', leadingIcon: <SvgCloud />, trailingIcon: <SvgKeyboardArrowDown /> },
+            ],
+        },
+    },
+    {
+        label: 'Scroll: Flat chips',
+        propState: {
+            overflow: 'scroll',
+            items: [
+                {
+                    flat: true,
+                    label: 'chip 1',
+                    leadingIcon: <SvgLightbulb />,
+                    trailingBadge: { count: 9, size: 'x-small' },
+                },
+                {
+                    flat: true,
+                    label: 'chip 2',
+                    leadingIcon: <SvgIcecream />,
+                    trailingBadge: { count: 2, size: 'x-small' },
+                },
+                { flat: true, label: 'chip 3', leadingIcon: <SvgSignLanguage />, trailingIcon: <SvgClose /> },
+                {
+                    flat: true,
+                    label: 'chip 4',
+                    leadingIcon: <SvgOpportunities />,
+                    trailingBadge: { count: 5, size: 'x-small' },
+                },
+                {
+                    flat: true,
+                    label: 'chip 5',
+                    leadingIcon: <SvgCloud />,
+                    trailingBadge: { count: 3, size: 'x-small' },
+                },
+            ],
+        },
+    },
 ];
 
 export const ChipGroupExample: ComponentExampleFn<ChipGroupProps> = ({ action }) => ({
     containerStyle: { width: '600px' },
     presets,
+    defaultState: {
+        overflow: 'wrap',
+        items: [
+            { label: 'chip 1', leadingIcon: <SvgLightbulb />, trailingIcon: <SvgChevronRight /> },
+            { label: 'chip 2', leadingIcon: <SvgIcecream />, trailingIcon: <SvgChevronRight /> },
+            { label: 'chip 3', leadingIcon: <SvgSignLanguage />, trailingIcon: <SvgClose /> },
+            { label: 'chip 4', leadingIcon: <SvgOpportunities />, trailingIcon: <SvgClose /> },
+            { label: 'chip 5', leadingIcon: <SvgCloud />, trailingIcon: <SvgKeyboardArrowDown /> },
+        ],
+    },
     render: ({ props, Component }) => {
-        const handleChipInputClick = () => action('Chip clicked!');
         return (
-            <Component {...props}>
-                <Chip
-                    label="chip 1"
-                    leadingIcon={<SvgLightbulb />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgChevronRight />}
-                />
-                <Chip
-                    label="chip 2"
-                    leadingIcon={<SvgIcecream />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgChevronRight />}
-                />
-                <Chip
-                    label="chip 3"
-                    leadingIcon={<SvgSignLanguage />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgClose />}
-                />
-                <Chip
-                    label="chip 4"
-                    leadingIcon={<SvgOpportunities />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgClose />}
-                />
-                <Chip
-                    label="chip 5"
-                    leadingIcon={<SvgCloud />}
-                    onClick={handleChipInputClick}
-                    trailingIcon={<SvgKeyboardArrowDown />}
-                />
-            </Component>
+            <Component
+                {...props}
+                items={props.items?.map((item) => ({
+                    ...item,
+                    onClick: () => action('Chip clicked!'),
+                }))}
+            />
         );
     },
 });

package/src/components/ChipGroup/chip-group.scss

@@ -2,10 +2,12 @@
     display: flex;
     gap: var(--spacing-sizing-02);
     width: 100%;
-    overflow: auto;
+    flex-flow: row wrap;
+    padding-bottom: var(--spacing-sizing-01);
 
-    &[data-wrap] {
-        flex-flow: row wrap;
+    &[data-scroll] {
+        overflow: auto;
+        flex-wrap: nowrap;
     }
 }
 

package/src/components/OTPInput/OTPInput.rtl.test.tsx

@@ -12,8 +12,10 @@ describe('OTPInput (RTL)', () => {
     });
 
     it('renders', () => {
-        const { getByLabelText } = render(<OTPInput onChange={() => {}} {...presets[0].propState} />);
+        const { getByLabelText } = render(
+            <OTPInput aria-label="OTP input" onChange={() => {}} {...presets[0].propState} />,
+        );
 
-        expect(getByLabelText('OTP digit 1')).toBeInTheDocument();
+        expect(getByLabelText('OTP input')).toBeInTheDocument();
     });
 });

package/src/components/OTPInput/OTPInput.tsx

@@ -1,9 +1,8 @@
 import './otp-input.scss';
-import { useRef } from 'react';
 import { useId } from '-/hooks/useId';
 import { CommonProps } from '-/types/common';
 
-export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
+export type OTPInputProps = CommonProps<'aria-label' | 'id' | 'invalid' | 'name' | 'size'> & {
     /**
      * The value of the otp-input.
      *
@@ -26,6 +25,12 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
      * @maximum 10
      */
     length?: number;
+    /**
+     * The mode of the otp-input.
+     *
+     * @default false
+     */
+    alphanumeric?: boolean;
 };
 
 /**
@@ -37,7 +42,7 @@ export type OTPInputProps = CommonProps<'id' | 'invalid' | 'name' | 'size'> & {
  *     () => {
  *         const [otpValue, setOtpValue] = useState('');
  *
- *         <OTPInput name="2-auth" length={4} value={otpValue} onChange={setOtpValue} />;
+ *         return <OTPInput name="2-auth" length={6} value={otpValue} onChange={setOtpValue} alphanumeric={false} />;
  *     };
  *
  * @name OTPInput
@@ -51,70 +56,32 @@ export function OTPInput({
     length = 6,
     size = 'medium',
     invalid = false,
+    alphanumeric = false,
+    'aria-label': ariaLabel = 'OTP input',
 }: OTPInputProps) {
     const id = useId(idProp);
-    const value = valueProp?.slice(0, length) || '';
-    const parentRef = useRef<HTMLDivElement | null>(null);
-
-    const element = (index: number) => parentRef.current?.children[index + 1] as HTMLElement;
-
-    const setIndex = (index: number, character: string) => {
-        const charArray = value.split('');
-        charArray[index] = character;
-        return charArray.join('');
-    };
-
-    const updateValue = (next: string) => onChange(next.slice(0, length).toUpperCase());
+    const value = valueProp || '';
+    const activeIndex = Math.min(value.length, length - 1);
 
     return (
-        <div
-            data-bspk="otp-input"
-            data-invalid={invalid || undefined}
-            data-size={size || 'medium'}
-            id={id}
-            ref={parentRef}
-        >
-            <input name={name} type="hidden" value={value} />
-            {Array.from({ length }, (_, index) => (
-                <span
-                    aria-label={`OTP digit ${index + 1}`}
-                    data-digit={index + 1}
-                    key={index}
-                    onClick={(e) => {
-                        if (value[index]) return;
-                        // if a digit does not exist for the previous index then focus the previous input
-                        if (!value[index - 1]) {
-                            e.preventDefault();
-                            element(value.length)?.focus();
-                        }
-                    }}
-                    onKeyDown={(event) => {
-                        if (event.key === 'Backspace') {
-                            if (value) {
-                                // delete the last value if there is one and focus the first empty input
-                                const next = value.slice(0, -1);
-                                updateValue(next);
-                                element(next.length)?.focus();
-                            }
-                        }
-
-                        // if a single character key is pressed at at the current index and focus the next input
-                        if (event.key.length === 1) {
-                            updateValue(setIndex(index, event.key));
-                            element(index + 1)?.focus();
-                        }
-                    }}
-                    onPaste={(event) => {
-                        const pastedData = event.clipboardData.getData('text').trim();
-                        updateValue(pastedData);
-                        element(length - 1)?.focus();
-                    }}
-                    role="textbox"
-                    tabIndex={0}
-                >
-                    {value?.[index] || ''}
-                </span>
-            ))}
+        <div data-bspk="otp-input" data-invalid={invalid || undefined} data-size={size || 'medium'} id={id}>
+            <input
+                aria-label={ariaLabel}
+                inputMode={alphanumeric ? 'text' : 'numeric'}
+                name={name}
+                onChange={(event) => {
+                    onChange(event.target.value.trim().toUpperCase().slice(0, length));
+                }}
+                type={alphanumeric ? 'text' : 'number'}
+                value={value}
+            />
+            <span data-digits>
+                {Array.from({ length }, (_, index) => (
+                    <span data-active={index === activeIndex || undefined} data-digit key={index}>
+                        {value[index]}
+                    </span>
+                ))}
+            </span>
         </div>
     );
 }

package/src/components/OTPInput/OTPInputExample.tsx

@@ -22,7 +22,12 @@ export const presets: Preset<OTPInputProps>[] = [
 
 export const OTPInputExample: ComponentExample<OTPInputProps> = {
     containerStyle: { width: '100%' },
-    defaultState: {},
+    defaultState: {
+        value: '',
+        length: 6,
+        name: 'OTP Input',
+        alphanumeric: false,
+    },
     disableProps: [],
     presets,
     render: ({ props, Component }) => <Component {...props} />,

package/src/components/OTPInput/otp-input.scss

@@ -1,64 +1,69 @@
 [data-bspk='otp-input'] {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: var(--spacing-sizing-02);
-    font: var(--font);
     width: fit-content;
+    position: relative;
 
-    [data-digit] {
+    input[inputMode] {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        border: none;
+        caret-color: transparent;
+    }
+
+    [data-digits] {
         display: flex;
-        align-items: center;
+        flex-direction: row;
         justify-content: center;
-        border-radius: var(--radius-sm);
-        border: 1px solid var(--stroke-neutral-base);
-        flex-grow: 1;
-        aspect-ratio: 1;
-        width: var(--width);
+        gap: var(--spacing-sizing-02);
+        font: var(--font);
+        width: fit-content;
         position: relative;
-        outline: none;
-
-        &:hover:not(:focus)::after {
-            background: var(--interaction-hover-opacity);
-            content: '';
-            position: absolute;
-            inset: 0;
-            border-radius: var(--radius-sm);
-        }
+        pointer-events: none;
 
-        &:active::after {
-            background: var(--interaction-press-opacity);
-            content: '';
-            position: absolute;
-            inset: 0;
+        [data-digit] {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
             border-radius: var(--radius-sm);
+            border: 1px solid var(--stroke-neutral-base);
+            flex-grow: 1;
+            aspect-ratio: 1;
+            width: var(--width);
+            position: relative;
+            outline: none;
+            text-align: center;
         }
+    }
 
-        &:focus:not(:active) {
-            outline: solid 2px var(--stroke-neutral-focus);
-
-            &:empty::before {
-                // caret
-                content: '';
-                width: 2px;
-                height: calc(var(--caret-height) - 8px);
-                background: var(--stroke-neutral-high);
-                animation: blink-caret 1s step-end infinite;
-
-                @keyframes blink-caret {
-                    0%,
-                    100% {
-                        opacity: 0;
-                    }
+    input[inputMode]:focus + [data-digits] {
+        [data-digit] {
+            &[data-active] {
+                outline: solid 2px var(--stroke-neutral-focus);
 
-                    50% {
-                        opacity: 1;
-                    }
+                &:empty::before {
+                    // caret
+                    content: '';
+                    width: 2px;
+                    height: calc(var(--caret-height) - 8px);
+                    background: var(--stroke-neutral-high);
+                    animation: blink-caret 1s step-end infinite;
                 }
             }
         }
     }
 
+    @keyframes blink-caret {
+        0%,
+        100% {
+            opacity: 0;
+        }
+
+        50% {
+            opacity: 1;
+        }
+    }
+
     &[data-size='small'] {
         --width: var(--spacing-sizing-08);
         --font: var(--subheader-medium);