mosuk-ui 1.0.10 → 1.0.13

package/components/actions/checkbox/component/.partials/components/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckboxProps } from './component.interface';
+export declare function Checkbox({ ref, ...rest }: CheckboxProps): React.JSX.Element;

package/components/actions/checkbox/component/.partials/components/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { Checkbox } from '@base-ui/react';
+export interface CheckboxProps extends Checkbox.Root.Props {
+}

package/components/actions/checkbox/component/.partials/components/component.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Checkbox as BaseCheckbox } from '@base-ui/react';
+import classNames from 'classnames';
+import React, { useId } from 'react';
+import styles from '../styles/component.module.css';
+export function Checkbox(_a) {
+    var _b;
+    var ref = _a.ref, rest = __rest(_a, ["ref"]);
+    if (!(rest === null || rest === void 0 ? void 0 : rest.id)) {
+        rest.id = useId();
+    }
+    return (React.createElement(BaseCheckbox.Root, __assign({}, rest, { ref: ref, id: rest.id, name: (_b = rest.name) !== null && _b !== void 0 ? _b : rest.id, className: classNames('mosuk-checkbox', styles.checkbox, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/checkbox/component/.partials/components/indicator/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckboxIndicatorProps } from './component.interface';
+export declare function CheckboxIndicator({ ref, ...rest }: CheckboxIndicatorProps): React.JSX.Element;

package/components/actions/checkbox/component/.partials/components/indicator/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { Checkbox } from '@base-ui/react';
+export interface CheckboxIndicatorProps extends Checkbox.Indicator.Props {
+}

package/components/actions/checkbox/component/.partials/components/indicator/component.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Checkbox } from '@base-ui/react';
+import classNames from 'classnames';
+import React, { useId } from 'react';
+import styles from '../../styles/component.module.css';
+export function CheckboxIndicator(_a) {
+    var ref = _a.ref, rest = __rest(_a, ["ref"]);
+    if (!(rest === null || rest === void 0 ? void 0 : rest.id)) {
+        rest.id = useId();
+    }
+    return (React.createElement(Checkbox.Indicator, __assign({}, rest, { className: classNames('mosuk-checkbox-indicator', styles.indicator, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/checkbox/component/.partials/styles/component.module.css

@@ -0,0 +1,56 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .checkbox {
+            appearance: none;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            width: calc(var(--spacing, .25rem) * 4);
+            height: calc(var(--spacing, .25rem) * 4);
+            min-width: calc(var(--spacing, .25rem) * 4);
+            min-height: calc(var(--spacing, .25rem) * 4);
+
+            border: 1px solid;
+            border-color: var(--color-gray-200);
+            outline: none;
+
+            cursor: pointer;
+            transition: all 200ms ease-in-out;
+
+            & :where(svg) {
+                width: 100%;
+                height: 100%;
+                min-width: 100%;
+                min-height: 100%;
+
+                color: var(--color-primary-500);
+
+                opacity: 0;
+                transition: all 200ms ease-in-out;
+            }
+
+            &:hover {
+                & :where(svg) {
+                    opacity: 0.25;
+                }
+            }
+
+            &[data-checked],
+            &[data-indeterminate] {
+                & :where(svg) {
+                    opacity: 1;
+                }
+            }
+        }
+
+        .indicator {
+            display: flex;
+
+            &[data-unchecked] {
+                display: none;
+            }
+        }
+    }
+}

package/components/actions/checkbox/component/index.d.ts

@@ -0,0 +1,13 @@
+import { Checkbox as Component } from './.partials/components/component';
+import { CheckboxProps } from './.partials/components/component.interface';
+import { CheckboxIndicator } from './.partials/components/indicator/component';
+import { CheckboxIndicatorProps } from './.partials/components/indicator/component.interface';
+export declare const Checkbox: typeof Component & {
+    Indicator: typeof CheckboxIndicator;
+};
+export declare namespace Checkbox {
+    type Props = CheckboxProps;
+    namespace Indicator {
+        type Props = CheckboxIndicatorProps;
+    }
+}

package/components/actions/checkbox/component/index.js

@@ -0,0 +1,5 @@
+import { Checkbox as Component } from './.partials/components/component';
+import { CheckboxIndicator } from './.partials/components/indicator/component';
+export var Checkbox = Object.assign(Component, {
+    Indicator: CheckboxIndicator,
+});

package/components/actions/checkbox/skeleton/.partials/components/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckboxSkeletonProps } from './component.interface';
+export declare function CheckboxSkeleton({ ...rest }: CheckboxSkeletonProps): React.JSX.Element;

package/components/actions/checkbox/skeleton/.partials/components/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { SkeletonProps } from '../../../../../display/skeleton/component/component.interface';
+export interface CheckboxSkeletonProps extends SkeletonProps {
+}

package/components/actions/checkbox/skeleton/.partials/components/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { Skeleton } from '../../../../../display/skeleton/component/component';
+import styles from '../../../component/.partials/styles/style.module.css';
+export function CheckboxSkeleton(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(Skeleton, __assign({}, rest, { className: classNames('mosuk-checkbox-skeleton', styles.checkbox, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/checkbox/skeleton/.partials/components/indicator/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckboxIndicatorSkeletonProps } from './component.interface';
+export declare function CheckboxIndicatorSkeleton({ ...rest }: CheckboxIndicatorSkeletonProps): React.JSX.Element;

package/components/actions/checkbox/skeleton/.partials/components/indicator/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export interface CheckboxIndicatorSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+}

package/components/actions/checkbox/skeleton/.partials/components/indicator/component.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import styles from '../../../../component/.partials/styles/component.module.css';
+export function CheckboxIndicatorSkeleton(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement("div", __assign({}, rest, { className: classNames('mosuk-checkbox-indicator-skeleton', styles.indicator, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/checkbox/skeleton/index.d.ts

@@ -0,0 +1,13 @@
+import { CheckboxSkeleton as Component } from './.partials/components/component';
+import type { CheckboxSkeletonProps } from './.partials/components/component.interface';
+import { CheckboxIndicatorSkeleton } from './.partials/components/indicator/component';
+import { CheckboxIndicatorSkeletonProps } from './.partials/components/indicator/component.interface';
+export declare const CheckboxSkeleton: typeof Component & {
+    Indicator: typeof CheckboxIndicatorSkeleton;
+};
+export declare namespace CheckboxSkeleton {
+    type Props = CheckboxSkeletonProps;
+    namespace Indicator {
+        type Props = CheckboxIndicatorSkeletonProps;
+    }
+}

package/components/actions/checkbox/skeleton/index.js

@@ -0,0 +1,5 @@
+import { CheckboxSkeleton as Component } from './.partials/components/component';
+import { CheckboxIndicatorSkeleton } from './.partials/components/indicator/component';
+export var CheckboxSkeleton = Object.assign(Component, {
+    Indicator: CheckboxIndicatorSkeleton,
+});

package/components/actions/input/(otp)/component/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { InputOtpProps } from './component.interface';
+export declare function InputOtp<C extends ElementType = 'div'>({ as, children, length, ...rest }: InputOtpProps<C>): React.JSX.Element;

package/components/actions/input/(otp)/component/component.interface.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
+import { OTPFieldPreview as BaseOTPField } from '@base-ui/react/otp-field';
+export type InputOtpProps<C extends ElementType = 'div'> = {
+    as?: C;
+    ref?: Ref<any>;
+} & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'> & Omit<BaseOTPField.Root.Props, 'className' | 'style'>;

package/components/actions/input/(otp)/component/component.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React, { useId } from 'react';
+import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import styles from './component.module.css';
+export function InputOtp(_a) {
+    var _b;
+    var as = _a.as, children = _a.children, length = _a.length, rest = __rest(_a, ["as", "children", "length"]);
+    var Component = (as || OTPField.Root);
+    var id = (_b = rest === null || rest === void 0 ? void 0 : rest.id) !== null && _b !== void 0 ? _b : useId();
+    return (React.createElement(Component, __assign({}, rest, { id: id, length: length, className: classNames(styles.root, 'mosuk-input-otp', rest === null || rest === void 0 ? void 0 : rest.className) }), children));
+}

package/components/actions/input/(otp)/component/component.module.css

@@ -0,0 +1,49 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .root {
+            display: flex;
+            width: 100%;
+            gap: var(--spacing-2, calc(var(--spacing, 0.25rem) * 2));
+        }
+
+        .input {
+            box-sizing: border-box;
+            margin: 0;
+            height: var(--spacing-11, calc(var(--spacing, 0.25rem) * 11));
+            width: var(--spacing-10, calc(var(--spacing, 0.25rem) * 10));
+            border-radius: var(--radius-lg, calc(var(--spacing, 0.25rem) * 2));
+            border: 1px solid var(--color-gray-300, rgb(209 213 219));
+            background-color: transparent;
+            text-align: center;
+            font-family: inherit;
+            font-size: var(--text-xl, calc(var(--spacing, 0.25rem) * 4.5));
+            font-weight: var(--font-medium, 500);
+            color: var(--color-black, #000);
+            outline: none;
+            transition: all 200ms ease-in-out;
+
+            &::placeholder {
+                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            }
+
+            &:focus {
+                outline: none;
+                border-color: var(--color-blue-500, oklch(0.623 0.214 259.815));
+            }
+
+            &:read-only {
+                opacity: 50%;
+                pointer-events: none;
+            }
+        }
+
+        .separator {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--color-gray-500, oklch(0.551 0.027 264.364));
+            font-size: var(--text-xl, calc(var(--spacing, 0.25rem) * 4.5));
+            font-weight: var(--font-medium, 500);
+        }
+    }
+}

package/components/actions/input/(otp)/component/field/component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { OTPFieldInputProps } from "@base-ui/react";
+export interface InputOtpFieldProps extends OTPFieldInputProps {
+    index?: number;
+    length?: number;
+}
+export declare function InputOtpField({ index, length, className, ...rest }: InputOtpFieldProps): React.JSX.Element;

package/components/actions/input/(otp)/component/field/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import styles from '../component.module.css';
+export function InputOtpField(_a) {
+    var index = _a.index, length = _a.length, className = _a.className, rest = __rest(_a, ["index", "length", "className"]);
+    return (React.createElement(OTPField.Input, __assign({ className: classNames(styles.input, 'mosuk-input-otp-field', className), "aria-label": "Character ".concat(index !== null && index !== void 0 ? index : 1, " of ").concat(length) }, rest)));
+}

package/components/actions/input/(otp)/component/index.d.ts

@@ -0,0 +1,13 @@
+import { InputOtp as Component } from './component';
+import { InputOtpProps as ComponentProps } from './component.interface';
+import { InputOtpField, InputOtpFieldProps } from './field/component';
+import { InputOtpSeparator, InputOtpSeparatorProps } from './separator/component';
+export declare const InputOtp: typeof Component & {
+    Field: typeof InputOtpField;
+    Separator: typeof InputOtpSeparator;
+};
+export declare namespace InputOtp {
+    type Props = ComponentProps;
+    type FieldProps = InputOtpFieldProps;
+    type SeparatorProps = InputOtpSeparatorProps;
+}

package/components/actions/input/(otp)/component/index.js

@@ -0,0 +1,7 @@
+import { InputOtp as Component } from './component';
+import { InputOtpField } from './field/component';
+import { InputOtpSeparator } from './separator/component';
+export var InputOtp = Object.assign(Component, {
+    Field: InputOtpField,
+    Separator: InputOtpSeparator,
+});

package/components/actions/input/(otp)/component/separator/component.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SeparatorProps } from "@base-ui/react";
+export interface InputOtpSeparatorProps extends SeparatorProps {
+    index?: number;
+    length?: number;
+}
+export declare function InputOtpSeparator({ index, length, className, ...rest }: InputOtpSeparatorProps): React.JSX.Element;

package/components/actions/input/(otp)/component/separator/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import classNames from 'classnames';
+import React from 'react';
+import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import styles from '../component.module.css';
+export function InputOtpSeparator(_a) {
+    var index = _a.index, length = _a.length, className = _a.className, rest = __rest(_a, ["index", "length", "className"]);
+    return (React.createElement(OTPField.Separator, __assign({ className: classNames(styles.separator, 'mosuk-input-otp-separator', className), "aria-label": "Character ".concat(index !== null && index !== void 0 ? index : 1, " of ").concat(length) }, rest)));
+}

package/components/actions/input/(otp)/skeleton/component.d.ts

@@ -0,0 +1,3 @@
+import React, { ElementType } from 'react';
+import { InputOtpSkeletonProps } from './component.interface';
+export declare function InputOtpSkeleton<C extends ElementType = 'div'>({ as, slots, children, ...rest }: InputOtpSkeletonProps<C>): React.JSX.Element;

package/components/actions/{toggle/skeleton/component.props.d.ts → input/(otp)/skeleton/component.interface.d.ts}

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
-export type ToggleSkeletonProps<C extends ElementType = 'div'> = {
+export type InputOtpSkeletonProps<C extends ElementType = 'div'> = {
     as?: C;
     ref?: Ref<any>;
+    slots?: number;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/actions/{toggle → input/(otp)}/skeleton/component.js

@@ -23,8 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import classNames from 'classnames';
 import React from 'react';
 import styles from './component.module.css';
-export function ToggleSkeleton(_a) {
-    var as = _a.as, rest = __rest(_a, ["as"]);
+export function InputOtpSkeleton(_a) {
+    var as = _a.as, _b = _a.slots, slots = _b === void 0 ? 6 : _b, children = _a.children, rest = __rest(_a, ["as", "slots", "children"]);
     var Component = (as || 'div');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-toggle-skeleton', styles.toggle, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-input-otp-skeleton', styles.otp, rest === null || rest === void 0 ? void 0 : rest.className) }), children));
 }

package/components/actions/input/(otp)/skeleton/component.module.css

@@ -0,0 +1,18 @@
+@layer mosuk-ui {
+    @layer index-11 {
+        .otp {
+            display: flex;
+            gap: calc(var(--spacing, .25rem) * 2);
+            width: 100%;
+        }
+
+        .slot {
+            width: calc(var(--spacing, .25rem) * 10);
+            height: calc(var(--spacing, .25rem) * 10);
+            min-width: calc(var(--spacing, .25rem) * 10);
+            min-height: calc(var(--spacing, .25rem) * 10);
+
+            border-radius: calc(var(--spacing, .25rem) * 2);
+        }
+    }
+}

package/components/actions/input/(otp)/skeleton/index.d.ts

@@ -0,0 +1,6 @@
+import { InputOtpSkeleton as Component } from './component';
+import { InputOtpSkeletonProps as ComponentProps } from './component.interface';
+export declare const InputOtpSkeleton: typeof Component;
+export declare namespace InputOtpSkeleton {
+    type Props = ComponentProps;
+}

package/components/actions/input/(otp)/skeleton/index.js

@@ -0,0 +1,2 @@
+import { InputOtpSkeleton as Component } from './component';
+export var InputOtpSkeleton = Object.assign(Component, {});

package/components/actions/otp/component/.partials/components/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { OTPProps } from './component.interface';
+export declare function OTP({ ...rest }: OTPProps): React.JSX.Element;

package/components/actions/otp/component/.partials/components/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { OTPFieldPreview } from '@base-ui/react/otp-field';
+export interface OTPProps extends OTPFieldPreview.Root.Props {
+}

package/components/actions/otp/component/.partials/components/component.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import classNames from 'classnames';
+import React, { useId } from 'react';
+import styles from '../styles/component.module.css';
+export function OTP(_a) {
+    var _b;
+    var rest = __rest(_a, []);
+    var id = (_b = rest === null || rest === void 0 ? void 0 : rest.id) !== null && _b !== void 0 ? _b : useId();
+    return (React.createElement(OTPField.Root, __assign({}, rest, { id: id, className: classNames('mosuk-otp', styles.root, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+}

package/components/actions/otp/component/.partials/components/input/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { OTPInputProps } from './component.interface';
+export declare function OTPInput({ ...rest }: OTPInputProps): React.JSX.Element;

package/components/actions/otp/component/.partials/components/input/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { OTPFieldPreview } from '@base-ui/react/otp-field';
+export interface OTPInputProps extends OTPFieldPreview.Input.Props {
+}

package/components/actions/otp/component/.partials/components/input/component.interface.js

@@ -0,0 +1 @@
+export {};

package/components/actions/otp/component/.partials/components/input/component.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { OTPFieldPreview as OTPField } from '@base-ui/react/otp-field';
+import classNames from 'classnames';
+import React from 'react';
+import styles from '../../styles/component.module.css';
+export function OTPInput(_a) {
+    var rest = __rest(_a, []);
+    return (React.createElement(OTPField.Input, __assign({}, rest, { className: classNames('mosuk-otp-input', styles.input, rest === null || rest === void 0 ? void 0 : rest.className) })));
+}