@keboola/design 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keboola/design",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Keboola UI platform design system — shadcn-aligned React primitives, Keboola-branded blocks, and the form bindings built on TanStack Form.",
   "license": "MIT",
   "type": "module",
@@ -79,13 +79,13 @@
     "eslint-plugin-storybook": "^10.3.5",
     "oxfmt": "^0.44.0",
     "oxlint": "^1.56.0",
-    "playwright": "1.59.1",
+    "playwright": "1.60.0",
     "storybook": "^10.2.19",
     "tailwindcss": "^3.4.17",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.8",
-    "vitest": "^4.1.2"
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "dependencies": {
     "@awesome.me/kit-be8bcf7e5e": "1.0.223",
@@ -144,6 +144,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "diff": "^9.0.0",
+    "input-otp": "^1.4.2",
     "lexical": "^0.42.0",
     "lucide-react": "^1.17.0",
     "mermaid": "^11.15.0",

package/src/blocks/EmptyState/EmptyState.tsx

@@ -19,8 +19,8 @@ const emptyStateIconClassnames = cva(
   {
     variants: {
       variant: {
-        default: ['tw-size-16', 'tw-text-4xl', '[&_svg]:tw-size-10'],
-        compact: ['tw-size-10', 'tw-text-2xl', '[&_svg]:tw-size-6'],
+        default: ['tw-size-16', 'tw-text-4xl', '[&_svg:not([class*="tw-size-"])]:tw-size-10'],
+        compact: ['tw-size-10', 'tw-text-2xl', '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
       },
     },
     defaultVariants: {

package/src/blocks/ErrorState/ErrorState.tsx

@@ -18,9 +18,24 @@ const errorStateClassnames = cva(['tw-flex', 'tw-flex-col', 'tw-items-center', '
 const errorStateIconClassnames = cva(['tw-flex', 'tw-items-center', 'tw-justify-center'], {
   variants: {
     variant: {
-      default: ['tw-size-16', 'tw-text-4xl', '[&_svg]:tw-size-10', 'tw-text-warning-500'],
-      compact: ['tw-size-10', 'tw-text-2xl', '[&_svg]:tw-size-6', 'tw-text-warning-500'],
-      destructive: ['tw-size-16', 'tw-text-4xl', '[&_svg]:tw-size-10', 'tw-text-error-500'],
+      default: [
+        'tw-size-16',
+        'tw-text-4xl',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-10',
+        'tw-text-warning-500',
+      ],
+      compact: [
+        'tw-size-10',
+        'tw-text-2xl',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-6',
+        'tw-text-warning-500',
+      ],
+      destructive: [
+        'tw-size-16',
+        'tw-text-4xl',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-10',
+        'tw-text-error-500',
+      ],
     },
   },
   defaultVariants: {

package/src/blocks/InputOtp/InputOtp.stories.tsx

@@ -0,0 +1,214 @@
+import { useState } from 'react';
+import type { ComponentProps, FormEventHandler } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+
+import { Button } from '../../components/Button';
+import { FormGroup } from '../../components/FormGroup';
+import { Label } from '../../components/Label';
+
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from './index';
+import { InputOtp } from './InputOtp';
+
+type Story = StoryObj<typeof InputOtp>;
+type InputOtpProps = ComponentProps<typeof InputOtp>;
+type Sizing = NonNullable<InputOtpProps['sizing']>;
+type State = NonNullable<InputOtpProps['state']>;
+
+const sizings: Sizing[] = ['sm', 'md', 'lg'];
+const states: State[] = ['default', 'error'];
+
+const ContiguousSlots = ({ length }: { length: number }) => (
+  <InputOtp.Group>
+    {Array.from({ length }, (_, index) => (
+      <InputOtp.Slot key={index} index={index} />
+    ))}
+  </InputOtp.Group>
+);
+
+const SplitSlots = ({ length }: { length: number }) => {
+  const half = Math.ceil(length / 2);
+  return (
+    <>
+      <InputOtp.Group>
+        {Array.from({ length: half }, (_, index) => (
+          <InputOtp.Slot key={index} index={index} />
+        ))}
+      </InputOtp.Group>
+      {length > half && (
+        <>
+          <InputOtp.Separator />
+          <InputOtp.Group>
+            {Array.from({ length: length - half }, (_, i) => (
+              <InputOtp.Slot key={half + i} index={half + i} />
+            ))}
+          </InputOtp.Group>
+        </>
+      )}
+    </>
+  );
+};
+
+export default {
+  component: InputOtp,
+  parameters: {
+    docs: {
+      description: {
+        component: [
+          'OTP / verification-code input. Wraps the headless `input-otp` primitive with a',
+          'Keboola-themed slot, group, and separator using semantic Tailwind tokens. Paste,',
+          'SMS autofill, and per-character focus management are inherited from `input-otp`.',
+          '',
+          '**When to use:** entering a short fixed-length code — MFA / 2FA, email confirmation,',
+          'sudo-mode step-up, invite acceptance.',
+          '',
+          '**When NOT to use:** free-form text → `TextInput` / `FormGroup.TextInput`;',
+          'variable-length secrets → `PasswordInput`; numeric values → `NumberInput`.',
+          '',
+          '**Composition:** wrap slots in `InputOtp.Group`s, optionally separated by',
+          '`InputOtp.Separator`. For full control over slot rendering, call',
+          '`useInputOtpContext()` inside a custom child.',
+          '',
+          '**Sizing:** `sm` / `md` / `lg` match InputGroup heights (≈ 32 / 36 / 40px) so an OTP',
+          'field can sit next to a regular text input without the row jumping.',
+        ].join('\n'),
+      },
+    },
+  },
+  args: {
+    maxLength: 6,
+    sizing: 'md',
+    state: 'default',
+    disabled: false,
+    autoFocus: false,
+    onComplete: action('onComplete'),
+    onChange: action('onChange'),
+  },
+  argTypes: {
+    sizing: {
+      description: 'Slot size',
+      type: { name: 'enum', value: sizings },
+    },
+    state: {
+      description: 'Validation state',
+      type: { name: 'enum', value: states },
+    },
+  },
+  render: (args) => (
+    <InputOtp {...args}>
+      <ContiguousSlots length={args.maxLength} />
+    </InputOtp>
+  ),
+} satisfies Meta<typeof InputOtp>;
+
+export const Default: Story = {};
+
+export const WithSeparator: Story = {
+  render: (args) => (
+    <InputOtp {...args}>
+      <SplitSlots length={args.maxLength} />
+    </InputOtp>
+  ),
+};
+
+export const Sizing: Story = {
+  render: (args) => (
+    <div className="tw-flex tw-flex-col tw-gap-6">
+      {sizings.map((sizing) => (
+        <div key={sizing} className="tw-flex tw-flex-col tw-gap-1">
+          <span className="tw-text-xs tw-text-muted-foreground">{sizing}</span>
+          <InputOtp {...args} sizing={sizing}>
+            <ContiguousSlots length={args.maxLength} />
+          </InputOtp>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const States: Story = {
+  render: (args) => (
+    <div className="tw-flex tw-flex-col tw-gap-6">
+      <div className="tw-flex tw-flex-col tw-gap-1">
+        <span className="tw-text-xs tw-text-muted-foreground">default</span>
+        <InputOtp {...args} state="default">
+          <ContiguousSlots length={args.maxLength} />
+        </InputOtp>
+      </div>
+      <div className="tw-flex tw-flex-col tw-gap-1">
+        <span className="tw-text-xs tw-text-muted-foreground">error</span>
+        <InputOtp {...args} state="error" defaultValue="123">
+          <ContiguousSlots length={args.maxLength} />
+        </InputOtp>
+      </div>
+      <div className="tw-flex tw-flex-col tw-gap-1">
+        <span className="tw-text-xs tw-text-muted-foreground">disabled</span>
+        <InputOtp {...args} disabled defaultValue="42">
+          <ContiguousSlots length={args.maxLength} />
+        </InputOtp>
+      </div>
+    </div>
+  ),
+};
+
+export const Alphanumeric: Story = {
+  args: {
+    pattern: REGEXP_ONLY_DIGITS_AND_CHARS,
+  },
+};
+
+const ControlledDemo = (props: InputOtpProps) => {
+  const [value, setValue] = useState('');
+  return (
+    <div className="tw-flex tw-flex-col tw-gap-3">
+      <InputOtp
+        {...props}
+        value={value}
+        onChange={(next) => {
+          action('onChange')(next);
+          setValue(next);
+        }}
+      >
+        <SplitSlots length={props.maxLength} />
+      </InputOtp>
+      <span className="tw-text-sm tw-text-muted-foreground">Entered: {value || '(empty)'}</span>
+    </div>
+  );
+};
+
+export const Controlled: Story = {
+  render: ControlledDemo,
+};
+
+const UncontrolledDemo = (props: InputOtpProps) => {
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    const values = new FormData(event.currentTarget);
+    action('onSubmit')(Object.fromEntries(values.entries()));
+  };
+
+  return (
+    <form className="tw-flex tw-items-end tw-gap-3" onSubmit={handleSubmit}>
+      <InputOtp {...props} name="code" defaultValue="" onComplete={action('onComplete')}>
+        <SplitSlots length={props.maxLength} />
+      </InputOtp>
+      <Button type="submit">Verify</Button>
+    </form>
+  );
+};
+
+export const Uncontrolled: Story = {
+  render: UncontrolledDemo,
+};
+
+export const WithLabel: Story = {
+  render: (args) => (
+    <FormGroup className="tw-max-w-sm">
+      <Label>Verification code</Label>
+      <InputOtp {...args}>
+        <SplitSlots length={args.maxLength} />
+      </InputOtp>
+      <FormGroup.Help>We just sent a 6-digit code to your authenticator app.</FormGroup.Help>
+    </FormGroup>
+  ),
+};

package/src/blocks/InputOtp/InputOtp.test.tsx

@@ -0,0 +1,162 @@
+import { useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+
+import { REGEXP_ONLY_DIGITS, useInputOtpContext } from './index';
+import { InputOtp } from './InputOtp';
+
+// `input-otp` uses ResizeObserver to align its hidden input over the slots;
+// jsdom doesn't ship one, so stub a no-op implementation for the suite.
+beforeAll(() => {
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    },
+  );
+});
+
+const SixDigit = (props: Partial<React.ComponentProps<typeof InputOtp>> = {}) => (
+  <InputOtp aria-label="code" maxLength={6} {...props}>
+    <InputOtp.Group>
+      <InputOtp.Slot index={0} />
+      <InputOtp.Slot index={1} />
+      <InputOtp.Slot index={2} />
+      <InputOtp.Slot index={3} />
+      <InputOtp.Slot index={4} />
+      <InputOtp.Slot index={5} />
+    </InputOtp.Group>
+  </InputOtp>
+);
+
+const getInput = () => screen.getByLabelText('code') as HTMLInputElement;
+
+describe('<InputOtp />', () => {
+  it('renders one slot per maxLength position', () => {
+    render(<SixDigit />);
+    const slots = document.querySelectorAll('[data-slot-index]');
+    expect(slots).toHaveLength(6);
+  });
+
+  it('displays typed characters in their slots', () => {
+    const Controlled = () => {
+      const [value, setValue] = useState('');
+      return <SixDigit value={value} onChange={setValue} />;
+    };
+    render(<Controlled />);
+    fireEvent.change(getInput(), { target: { value: '123' } });
+    const slots = document.querySelectorAll('[data-slot-index]');
+    expect(slots[0]?.textContent).toBe('1');
+    expect(slots[1]?.textContent).toBe('2');
+    expect(slots[2]?.textContent).toBe('3');
+    expect(slots[3]?.textContent).toBe('');
+  });
+
+  it('fires onComplete exactly once when maxLength is reached', () => {
+    const onComplete = vi.fn();
+    render(<SixDigit onComplete={onComplete} />);
+    fireEvent.change(getInput(), { target: { value: '123456' } });
+    expect(onComplete).toHaveBeenCalledTimes(1);
+    expect(onComplete).toHaveBeenCalledWith('123456');
+  });
+
+  it('re-fires onComplete after editing and retyping a completed code', () => {
+    const onComplete = vi.fn();
+    const Controlled = () => {
+      const [value, setValue] = useState('');
+      return <SixDigit value={value} onChange={setValue} onComplete={onComplete} />;
+    };
+    render(<Controlled />);
+    fireEvent.change(getInput(), { target: { value: '123456' } });
+    fireEvent.change(getInput(), { target: { value: '12345' } });
+    fireEvent.change(getInput(), { target: { value: '123459' } });
+    expect(onComplete).toHaveBeenCalledTimes(2);
+    expect(onComplete).toHaveBeenLastCalledWith('123459');
+  });
+
+  it('truncates input beyond maxLength', () => {
+    const onChange = vi.fn();
+    render(<SixDigit onChange={onChange} />);
+    fireEvent.change(getInput(), { target: { value: '1234567890' } });
+    expect(onChange).toHaveBeenLastCalledWith('123456');
+  });
+
+  it('rejects characters that fail the pattern', () => {
+    const onChange = vi.fn();
+    render(<SixDigit pattern={REGEXP_ONLY_DIGITS} onChange={onChange} />);
+    fireEvent.change(getInput(), { target: { value: 'abc' } });
+    expect(onChange).not.toHaveBeenCalled();
+    expect(getInput().value).toBe('');
+  });
+
+  it('marks the input as aria-invalid when state="error"', () => {
+    render(<SixDigit state="error" />);
+    expect(getInput().getAttribute('aria-invalid')).toBe('true');
+  });
+
+  it('does not set aria-invalid in the default state', () => {
+    render(<SixDigit />);
+    expect(getInput().getAttribute('aria-invalid')).toBeNull();
+  });
+
+  it('blocks input when disabled', () => {
+    render(<SixDigit disabled />);
+    expect(getInput().disabled).toBe(true);
+  });
+
+  it('seeds the value from defaultValue', () => {
+    render(<SixDigit defaultValue="42" />);
+    const slots = document.querySelectorAll('[data-slot-index]');
+    expect(slots[0]?.textContent).toBe('4');
+    expect(slots[1]?.textContent).toBe('2');
+  });
+
+  it('exposes the render context to custom children via useInputOtpContext', () => {
+    const FirstSlotChar = () => {
+      const { slots } = useInputOtpContext();
+      return <span data-testid="first-slot-char">{slots[0]?.char ?? ''}</span>;
+    };
+    const Controlled = () => {
+      const [value, setValue] = useState('');
+      return (
+        <InputOtp aria-label="code" maxLength={6} value={value} onChange={setValue}>
+          <FirstSlotChar />
+        </InputOtp>
+      );
+    };
+    render(<Controlled />);
+    fireEvent.change(getInput(), { target: { value: '7' } });
+    expect(screen.getByTestId('first-slot-char').textContent).toBe('7');
+  });
+
+  it('throws if useInputOtpContext is called outside <InputOtp>', () => {
+    const Bare = () => {
+      useInputOtpContext();
+      return null;
+    };
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<Bare />)).toThrow(/inside <InputOtp>/);
+    consoleError.mockRestore();
+  });
+
+  it('renders a custom separator when provided', () => {
+    render(
+      <InputOtp aria-label="code" maxLength={6}>
+        <InputOtp.Group>
+          <InputOtp.Slot index={0} />
+          <InputOtp.Slot index={1} />
+          <InputOtp.Slot index={2} />
+        </InputOtp.Group>
+        <InputOtp.Separator>·</InputOtp.Separator>
+        <InputOtp.Group>
+          <InputOtp.Slot index={3} />
+          <InputOtp.Slot index={4} />
+          <InputOtp.Slot index={5} />
+        </InputOtp.Group>
+      </InputOtp>,
+    );
+    expect(screen.getByRole('separator')).toHaveTextContent('·');
+  });
+});

package/src/blocks/InputOtp/InputOtp.tsx

@@ -0,0 +1,62 @@
+import type { ComponentProps, ReactNode, Ref } from 'react';
+import { OTPInput, REGEXP_ONLY_DIGITS } from 'input-otp';
+
+import { cn } from '../../utils';
+
+import { type InputOtpSizing, type InputOtpState, InputOtpVariantContext } from './context';
+import { InputOtpGroup } from './InputOtpGroup';
+import { InputOtpSeparator } from './InputOtpSeparator';
+import { InputOtpSlot } from './InputOtpSlot';
+
+// The `OTPInput` props union pairs `render` with `children?: never` (and vice versa).
+// `Extract` picks the children-arm so passing `render` is a compile error.
+type OtpInputProps = ComponentProps<typeof OTPInput>;
+type OtpInputChildrenProps = Omit<
+  Extract<OtpInputProps, { children: ReactNode }>,
+  'containerClassName'
+>;
+
+type RootOwnProps = {
+  /** Visual size of each slot. Defaults to `md`. Matches InputGroup heights (sm/md/lg ≈ 32 / 36 / 40px). */
+  sizing?: InputOtpSizing;
+  /** Drives the error ring/border on each slot and `aria-invalid` on the inner input. */
+  state?: InputOtpState;
+  /** Class for the outer flex container that holds groups + separators. */
+  containerClassName?: string;
+};
+
+type RootProps = OtpInputChildrenProps & RootOwnProps;
+
+const Root = ({
+  ref,
+  sizing = 'md',
+  state = 'default',
+  pattern = REGEXP_ONLY_DIGITS,
+  containerClassName,
+  className,
+  children,
+  ...rest
+}: RootProps & { ref?: Ref<HTMLInputElement> }) => (
+  <InputOtpVariantContext value={{ sizing, state }}>
+    <OTPInput
+      {...rest}
+      ref={ref}
+      pattern={pattern}
+      aria-invalid={state === 'error' || undefined}
+      containerClassName={cn(
+        'tw-flex tw-items-center tw-gap-2 has-[:disabled]:tw-opacity-50',
+        containerClassName,
+      )}
+      className={cn('disabled:tw-cursor-not-allowed', className)}
+    >
+      {children}
+    </OTPInput>
+  </InputOtpVariantContext>
+);
+
+export const InputOtp = Object.assign(Root, {
+  Group: InputOtpGroup,
+  Slot: InputOtpSlot,
+  Separator: InputOtpSeparator,
+});
+export type { RootProps as InputOtpProps };

package/src/blocks/InputOtp/InputOtpGroup.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+type GroupProps = ComponentProps<'div'>;
+
+export const InputOtpGroup = ({
+  ref,
+  className,
+  ...props
+}: GroupProps & { ref?: Ref<HTMLDivElement> }) => (
+  <div ref={ref} className={cn('tw-flex tw-items-center tw-gap-2', className)} {...props} />
+);

package/src/blocks/InputOtp/InputOtpSeparator.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps, Ref } from 'react';
+
+import { Minus } from '../../icons';
+import { cn } from '../../utils';
+
+type SeparatorProps = ComponentProps<'div'>;
+
+export const InputOtpSeparator = ({
+  ref,
+  children,
+  className,
+  ...props
+}: SeparatorProps & { ref?: Ref<HTMLDivElement> }) => (
+  <div
+    ref={ref}
+    role="separator"
+    aria-orientation="vertical"
+    className={cn('tw-flex tw-items-center tw-text-muted-foreground', className)}
+    {...props}
+  >
+    {children ?? <Minus className="tw-size-4" />}
+  </div>
+);

package/src/blocks/InputOtp/InputOtpSlot.styles.ts

@@ -0,0 +1,52 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+// Slot sizes mirror InputGroup (`small` / `medium` / `default` ≈ 32 / 36 / 40px) so an OTP
+// field can sit next to a regular text input without the row jumping.
+export const slotVariants = cva(
+  [
+    'tw-relative',
+    'tw-flex',
+    'tw-items-center',
+    'tw-justify-center',
+    'tw-border',
+    'tw-border-input',
+    'tw-bg-background',
+    'tw-text-foreground',
+    'tw-font-medium',
+    'tw-tabular-nums',
+    'tw-rounded-lg',
+    'tw-transition',
+    'tw-outline-none',
+    // active slot sits above its neighbours so its ring isn't clipped
+    'data-[active=true]:tw-z-10',
+    'data-[active=true]:tw-border-primary',
+    'data-[active=true]:tw-ring-2',
+    'data-[active=true]:tw-ring-primary/50',
+  ],
+  {
+    defaultVariants: {
+      sizing: 'md',
+      state: 'default',
+    },
+    variants: {
+      sizing: {
+        sm: ['tw-h-8', 'tw-w-8', 'tw-text-sm'],
+        md: ['tw-h-9', 'tw-w-9', 'tw-text-base'],
+        lg: ['tw-h-10', 'tw-w-10', 'tw-text-lg'],
+      },
+      // `!` forces the border colour over the base `tw-border-input` once tailwind-merge dedupes.
+      // Matches the pattern InputGroup uses for its argo error state.
+      state: {
+        default: [],
+        error: [
+          '!tw-border-destructive',
+          'tw-bg-destructive/5',
+          'data-[active=true]:!tw-border-destructive',
+          'data-[active=true]:tw-ring-destructive/40',
+        ],
+      },
+    },
+  },
+);
+
+export type SlotVariants = VariantProps<typeof slotVariants>;

package/src/blocks/InputOtp/InputOtpSlot.tsx

@@ -0,0 +1,44 @@
+import type { ComponentProps, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+import { useInputOtpRenderContext, useInputOtpVariant } from './context';
+import { slotVariants } from './InputOtpSlot.styles';
+
+type SlotProps = Omit<ComponentProps<'div'>, 'children'> & {
+  index: number;
+};
+
+export const InputOtpSlot = ({
+  ref,
+  index,
+  className,
+  ...props
+}: SlotProps & { ref?: Ref<HTMLDivElement> }) => {
+  const { slots } = useInputOtpRenderContext();
+  const { sizing, state } = useInputOtpVariant();
+  const slot = slots[index];
+  const char = slot?.char ?? null;
+  const isActive = slot?.isActive ?? false;
+  const hasFakeCaret = slot?.hasFakeCaret ?? false;
+
+  return (
+    <div
+      ref={ref}
+      data-active={isActive || undefined}
+      data-slot-index={index}
+      className={cn(slotVariants({ sizing, state }), className)}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div
+          aria-hidden="true"
+          className="tw-pointer-events-none tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center"
+        >
+          <div className="tw-h-1/2 tw-w-px tw-animate-caret-blink tw-bg-foreground" />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/blocks/InputOtp/context.ts

@@ -0,0 +1,23 @@
+import { createContext, use } from 'react';
+import { OTPInputContext } from 'input-otp';
+
+import { type SlotVariants } from './InputOtpSlot.styles';
+
+type Sizing = NonNullable<SlotVariants['sizing']>;
+type State = NonNullable<SlotVariants['state']>;
+
+type InputOtpVariantContextValue = {
+  sizing: Sizing;
+  state: State;
+};
+
+export const InputOtpVariantContext = createContext<InputOtpVariantContextValue>({
+  sizing: 'md',
+  state: 'default',
+});
+
+export const useInputOtpVariant = () => use(InputOtpVariantContext);
+
+export const useInputOtpRenderContext = () => use(OTPInputContext);
+
+export type { Sizing as InputOtpSizing, State as InputOtpState };