@cladd-ui/react 0.0.12 → 0.0.14

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.0.14 (2026-04-26)
+
+### Build System
+
+- bundle Colors and add extensions (29c311f)
+
+## 0.0.13 (2026-04-26)
+
+### Features
+
+- OTP - add placeholder (fd7aaf4)
+- Shortcut - render as <kbd> (dec931a)
+
+### Chores
+
+- placeholder in OTP (8195af4)
+
 ## 0.0.12 (2026-04-26)
 
 ### Features

package/components/Backdrop.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
+import { cn } from '../shared/cn.js';
 export const Backdrop = (props) => {
     const { className = '', children, ref, ...rest } = props;
     return (_jsx("div", { ref: ref, className: cn('backdrop fixed inset-0 z-50 bg-backdrop/90', className), ...rest, children: children }));

package/components/Button.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, ReactNode, Ref, CSSProperties, ComponentPropsWithoutRef } from 'react';
-import { Color } from '../types';
-import { SurfaceVariant } from './Surface';
+import { Color } from '../types.js';
+import { SurfaceVariant } from './Surface.js';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type ButtonSurface = 'surface' | 'cut';
 interface ButtonOwnProps<C extends ElementType = 'button'> {

package/components/Button.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, } from 'react';
-import { cn } from '../shared/cn';
-import { roundedClasses } from '../shared/rounded-classes';
-import { FocusableLayer } from './FocusableLayer';
-import { Surface } from './Surface';
-import { SurfaceCut } from './SurfaceCut';
+import { cn } from '../shared/cn.js';
+import { roundedClasses } from '../shared/rounded-classes.js';
+import { FocusableLayer } from './FocusableLayer.js';
+import { Surface } from './Surface.js';
+import { SurfaceCut } from './SurfaceCut.js';
 export const buttonIconSizes = {
     sm: '[&>svg]:size-4',
     md: '[&>svg]:size-4',

package/components/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ChangeEvent, MouseEvent, PointerEvent, ComponentPropsWithoutRef } from 'react';
-import { Color } from '../types';
+import { Color } from '../types.js';
 export type CheckboxSize = 'sm' | 'md';
 interface CheckboxOwnProps<C extends ElementType = 'label'> {
     /** Controlled checked state. Default `false`. */

package/components/Checkbox.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, } from 'react';
-import { useAccentColor } from '../hooks/use-accent-color';
-import { cn } from '../shared/cn';
-import { FocusableLayer } from './FocusableLayer';
-import { CheckIcon } from './icons/CheckIcon';
-import { Surface } from './Surface';
+import { useAccentColor } from '../hooks/use-accent-color.js';
+import { cn } from '../shared/cn.js';
+import { FocusableLayer } from './FocusableLayer.js';
+import { CheckIcon } from './icons/CheckIcon.js';
+import { Surface } from './Surface.js';
 export function Checkbox(props) {
     const accentColor = useAccentColor();
     const { checked = false, disabled = false, readOnly, value, name, size = 'sm', required = false, onChange = () => { }, onClick = () => { }, onPointerDown = () => { }, input = true, inputId, className, checkClassName, color = accentColor, component = 'label', hoverable, focusable, ...rest } = props;

package/components/Chip.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, Ref, ElementType, ComponentPropsWithoutRef } from 'react';
-import { Color } from '../types';
+import { Color } from '../types.js';
 export type ChipSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 interface ChipOwnProps<C extends ElementType = 'span'> {
     /** Chip content - typically a short label, optionally with an icon. */

package/components/Chip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, } from 'react';
-import { cn } from '../shared/cn';
-import { Surface } from './Surface';
+import { cn } from '../shared/cn.js';
+import { Surface } from './Surface.js';
 export const Chip = (props) => {
     const elRef = useRef(null);
     const { children, disabled, className = '', contentClassName = '', rounded = false, size = 'md', component = 'span', outline, hoverable, clickable, color = '', icon: IconComponent, iconProps = {}, ref, ...rest } = props;

package/components/Dialog.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, Ref } from 'react';
-import { Color } from '../types';
-import { SurfaceVariant } from './Surface';
+import { Color } from '../types.js';
+import { SurfaceVariant } from './Surface.js';
 /**
  * State container for the `Dialog` + `DialogTrigger` + `Dialog` compound. Use when you want
  * the trigger and the dialog to be siblings in JSX:

package/components/Dialog.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, createContext, useContext, useEffect, useId, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
-import { useAccentColor } from '../hooks/use-accent-color';
-import { useDevice } from '../hooks/use-device';
-import { useFocusTrap } from '../hooks/use-focus-trap';
-import { useModalUtils } from '../hooks/use-modal-utils';
-import { useTheme } from '../hooks/use-theme';
-import { cn } from '../shared/cn';
-import { nextTick } from '../shared/next-tick';
-import { Backdrop } from './Backdrop';
-import { Button } from './Button';
-import { Input } from './Input';
-import { ModalController } from './ModalController';
-import { Surface } from './Surface';
+import { useAccentColor } from '../hooks/use-accent-color.js';
+import { useDevice } from '../hooks/use-device.js';
+import { useFocusTrap } from '../hooks/use-focus-trap.js';
+import { useModalUtils } from '../hooks/use-modal-utils.js';
+import { useTheme } from '../hooks/use-theme.js';
+import { cn } from '../shared/cn.js';
+import { nextTick } from '../shared/next-tick.js';
+import { Backdrop } from './Backdrop.js';
+import { Button } from './Button.js';
+import { Input } from './Input.js';
+import { ModalController } from './ModalController.js';
+import { Surface } from './Surface.js';
 const DialogRootContext = createContext(null);
 /**
  * State container for the `Dialog` + `DialogTrigger` + `Dialog` compound. Use when you want

package/components/DialogsPortal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Dialog } from './Dialog';
-import { useDialogsPortalContext } from './DialogsPortalContext';
+import { Dialog } from './Dialog.js';
+import { useDialogsPortalContext } from './DialogsPortalContext.js';
 export function DialogsPortal() {
     const { data, state, setState, setData } = useDialogsPortalContext();
     if (!data)

package/components/DialogsPortalContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Color } from '../types';
+import { Color } from '../types.js';
 /**
  * Shape of the currently open dialog in the imperative dialog portal. The portal renders at
  * most one dialog at a time; opening a new one replaces the previous via the context setter.

package/components/FocusableLayer.d.ts

@@ -1,4 +1,4 @@
-import { Color } from '../types';
+import { Color } from '../types.js';
 export declare const FocusableLayer: (props: {
     className?: string;
     /**

package/components/FocusableLayer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useAccentColor } from '../hooks/use-accent-color';
-import { cn } from '../shared/cn';
+import { useAccentColor } from '../hooks/use-accent-color.js';
+import { cn } from '../shared/cn.js';
 export const FocusableLayer = (props) => {
     const accentColor = useAccentColor();
     const { className, group, color = accentColor, force } = props;

package/components/Input.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ReactNode, Ref, ChangeEvent, KeyboardEvent, FocusEvent, ComponentPropsWithoutRef } from 'react';
-import { Color } from '../types';
+import { Color } from '../types.js';
 export type InputSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 interface InputOwnProps<C extends ElementType = 'div', IC extends ElementType = 'input'> {
     /** Polymorphic **wrapper** element. Defaults to `'div'`. (For the inner input, see `inputComponent`.) */

package/components/Input.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, } from 'react';
-import { useAccentColor } from '../hooks/use-accent-color';
-import { cn } from '../shared/cn';
-import { roundedClasses } from '../shared/rounded-classes';
-import { Button } from './Button';
-import { FocusableLayer } from './FocusableLayer';
-import { CloseIcon } from './icons/CloseIcon';
-import { SurfaceCut } from './SurfaceCut';
+import { useAccentColor } from '../hooks/use-accent-color.js';
+import { cn } from '../shared/cn.js';
+import { roundedClasses } from '../shared/rounded-classes.js';
+import { Button } from './Button.js';
+import { FocusableLayer } from './FocusableLayer.js';
+import { CloseIcon } from './icons/CloseIcon.js';
+import { SurfaceCut } from './SurfaceCut.js';
 export const Input = (props) => {
     const accentColor = useAccentColor();
     const { component = 'div', type = 'text', value, displayValue, placeholder, name, required = false, disabled = false, readOnly, inputId, rounded = false, size = 'lg', onChange = () => { }, onKeyDown = () => { }, onFocus = () => { }, onBlur = () => { }, onClear = () => { }, color = accentColor, prefix, min, step, suffix, className, contentClassName, inputClassName, max, maxLength, clearButton, valid = true, infoMessage, errorMessage, pattern, inputMode, icon, surfaceClassName, autoFocus, inputComponent = 'input', inputComponentProps = {}, ref: externalRef, inputRef: externalInputRef, } = props;

package/components/Link.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { cn } from '../shared/cn';
+import { cn } from '../shared/cn.js';
 export const Link = ({ children, className = '', disabled = false, readOnly = false, component, focusable = true, onClick, href, ref, ...rest }) => {
     const elRef = useRef(null);
     const Component = (typeof component === 'undefined'

package/components/List.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
+import { cn } from '../shared/cn.js';
 export const List = (props) => {
     const { children, className = '', ref, ...rest } = props;
     return (_jsx("div", { ref: ref, className: cn('list flex flex-col p-2', className), ...rest, children: children }));

package/components/ListButton.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, Ref, ElementType } from 'react';
-import { Color } from '../types';
-import { ButtonProps, ButtonSize } from './Button';
-import { SurfaceVariant } from './Surface';
+import { Color } from '../types.js';
+import { ButtonProps, ButtonSize } from './Button.js';
+import { SurfaceVariant } from './Surface.js';
 interface ListButtonOwnProps<C extends ElementType = 'button'> {
     /** Title content of the row (the main text/element on the row). */
     children?: ReactNode;

package/components/ListButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
-import { Button, buttonIconSizes } from './Button';
+import { cn } from '../shared/cn.js';
+import { Button, buttonIconSizes } from './Button.js';
 export const ListButton = (props) => {
     const { children, className = '', contentClassName = '', innerContentClassName = '', disabled = false, readOnly = false, size = 'lg', component = 'button', color = '', icon, iconClassName = '', header, headerClassName = '', footer, footerClassName = '', selected = false, titleClassName = '', after, ref, variant = 'transparent', outline = false, rounded = true, ...rest } = props;
     const ButtonEl = Button;

package/components/ListItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
+import { cn } from '../shared/cn.js';
 export const ListItem = (props, ref) => {
     const { children, className = '', ...rest } = props;
     return (_jsx("div", { ref: ref, className: cn('flex min-h-9 items-center gap-4 px-2 py-1 text-xs font-medium', className), ...rest, children: children }));

package/components/ListSeparator.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
+import { cn } from '../shared/cn.js';
 export const ListSeparator = (props) => {
     const { children, className = '', ref, ...rest } = props;
     return (_jsx("div", { ref: ref, className: cn('list-separator -mx-2 my-2 h-px bg-surface-outline', className), ...rest, children: children }));

package/components/ListTitle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
+import { cn } from '../shared/cn.js';
 export const ListTitle = (props) => {
     const { children, className = '', ref, ...rest } = props;
     return (_jsx("div", { ref: ref, className: cn('list-title flex items-end gap-4 p-2 text-xs font-medium text-on-surface-dark uppercase select-none', className), ...rest, children: children }));

package/components/NumberField.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, Ref } from 'react';
-import { Color } from '../types';
-import { SurfaceProps, SurfaceVariant } from './Surface';
+import { Color } from '../types.js';
+import { SurfaceProps, SurfaceVariant } from './Surface.js';
 export type NumberFieldSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 interface NumberFieldOwnProps {
     /** Custom content rendered inside the number field container (rare - most usage is value-only). */

package/components/NumberField.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
-import { roundedClasses } from '../shared/rounded-classes';
-import { Button } from './Button';
-import { Input } from './Input';
-import { Surface } from './Surface';
-import { SurfaceCut } from './SurfaceCut';
+import { cn } from '../shared/cn.js';
+import { roundedClasses } from '../shared/rounded-classes.js';
+import { Button } from './Button.js';
+import { Input } from './Input.js';
+import { Surface } from './Surface.js';
+import { SurfaceCut } from './SurfaceCut.js';
 export const NumberField = (props) => {
     const { children, input = true, inputClassName = '', className = '', contentClassName = '', disabled = false, readOnly = false, rounded = true, valueRounded = false, size = 'md', color = '', outline = true, variant = 'gradient', buttonVariant = 'transparent', buttonOutline = false, surfaceLevel, min = 0, max = 1000000, value = 0, step = 1, onChange = () => { }, ref, ...rest } = props;
     const decrease = () => {

package/components/OTPField.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
-import { InputSize } from './Input';
+import { InputSize } from './Input.js';
 interface OTPFieldOwnProps {
     /** OTP cells - one or more `OTPFieldInput`, with optional `OTPFieldSeparator` between. */
     children?: ReactNode;

package/components/OTPField.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, isValidElement, useCallback, useMemo, useRef, } from 'react';
-import { cn } from '../shared/cn';
-import { roundedClasses } from '../shared/rounded-classes';
-import { FocusableLayer } from './FocusableLayer';
-import { OTPFieldContextProvider } from './OTPFieldContext';
-import { OTPFieldInput } from './OTPFieldInput';
+import { cn } from '../shared/cn.js';
+import { roundedClasses } from '../shared/rounded-classes.js';
+import { FocusableLayer } from './FocusableLayer.js';
+import { OTPFieldContextProvider } from './OTPFieldContext.js';
+import { OTPFieldInput } from './OTPFieldInput.js';
 const isOTPInputElement = (child) => isValidElement(child) &&
     child.type?.__OTPFieldInput ===
         true;

package/components/OTPFieldContext.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, ClipboardEvent, FocusEvent, KeyboardEvent, ReactNode } from 'react';
-import { InputSize } from './Input';
+import { InputSize } from './Input.js';
 interface OTPFieldContextValue {
     size: InputSize;
     pattern: string;

package/components/OTPFieldInput.d.ts

@@ -1,5 +1,7 @@
 import { Ref } from 'react';
 interface OTPFieldInputOwnProps {
+    /** Input placeholder. */
+    placeholder?: string;
     /** Extra classes for the cell wrapper. */
     className?: string;
     /** Extra classes for the underlying `<input>` element. */

package/components/OTPFieldInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OTPFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/OTPFieldInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,GAAG,EAAE,MAAM,OAAO,CAAC;AAM5C,UAAU,qBAAqB;IAC7B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAUvD,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAuCtD,CAAC"}
+{"version":3,"file":"OTPFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/OTPFieldInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,GAAG,EAAE,MAAM,OAAO,CAAC;AAM5C,UAAU,qBAAqB;IAC7B,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAUvD,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAwCtD,CAAC"}

package/components/OTPFieldInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
-import { Input } from './Input';
-import { useOTPFieldContext } from './OTPFieldContext';
+import { cn } from '../shared/cn.js';
+import { Input } from './Input.js';
+import { useOTPFieldContext } from './OTPFieldContext.js';
 const widthClasses = {
     sm: 'w-6',
     md: 'w-7',
@@ -10,9 +10,9 @@ const widthClasses = {
     '2xl': 'w-12',
 };
 export const OTPFieldInput = (props) => {
-    const { className, inputClassName, ref, index = 0 } = props;
+    const { placeholder, className, inputClassName, ref, index = 0 } = props;
     const { size, pattern, disabled, readOnly, inputMode, getCellValue, registerInput, onCellChange, onCellKeyDown, onCellFocus, onCellPaste, } = useOTPFieldContext();
-    return (_jsx(Input, { ref: ref, size: size, pattern: pattern, inputMode: inputMode, disabled: disabled, readOnly: readOnly, maxLength: 1, value: getCellValue(index), className: cn(widthClasses[size], className), inputClassName: cn('px-0 text-center', inputClassName), inputRef: (el) => registerInput(index, el), onChange: (value, event) => onCellChange(index, value, event), onKeyDown: (event) => onCellKeyDown(index, event), onFocus: (event) => onCellFocus(index, event), inputComponentProps: {
+    return (_jsx(Input, { ref: ref, size: size, pattern: pattern, inputMode: inputMode, disabled: disabled, readOnly: readOnly, maxLength: 1, value: getCellValue(index), className: cn(widthClasses[size], className), inputClassName: cn('px-0 text-center', inputClassName), inputRef: (el) => registerInput(index, el), onChange: (value, event) => onCellChange(index, value, event), onKeyDown: (event) => onCellKeyDown(index, event), onFocus: (event) => onCellFocus(index, event), placeholder: placeholder, inputComponentProps: {
             autoComplete: index === 0 ? 'one-time-code' : 'off',
             onPaste: (event) => onCellPaste(index, event),
         } }));

package/components/OTPFieldInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"OTPFieldInput.js","sourceRoot":"","sources":["../../../src/components/OTPFieldInput.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAevD,MAAM,YAAY,GAA8B;IAC9C,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IAC5D,MAAM,EACJ,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,WAAW,GACZ,GAAG,kBAAkB,EAAE,CAAC;IAEzB,OAAO,CACL,KAAC,KAAK,IACJ,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,EAC1B,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAC5C,cAAc,EAAE,EAAE,CAAC,kBAAkB,EAAE,cAAc,CAAC,EACtD,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,CAAC,EAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAC7D,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,EACjD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,EAC7C,mBAAmB,EAAE;YACnB,YAAY,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK;YACnD,OAAO,EAAE,CAAC,KAAuC,EAAE,EAAE,CACnD,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC;SAC5B,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAED,aAAyD,CAAC,eAAe;IACxE,IAAI,CAAC"}
+{"version":3,"file":"OTPFieldInput.js","sourceRoot":"","sources":["../../../src/components/OTPFieldInput.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,KAAK,EAAa,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAiBvD,MAAM,YAAY,GAA8B;IAC9C,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,KAAK;IACT,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC;IACzE,MAAM,EACJ,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,aAAa,EACb,WAAW,EACX,WAAW,GACZ,GAAG,kBAAkB,EAAE,CAAC;IAEzB,OAAO,CACL,KAAC,KAAK,IACJ,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,EAC1B,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EAC5C,cAAc,EAAE,EAAE,CAAC,kBAAkB,EAAE,cAAc,CAAC,EACtD,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,CAAC,EAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAC7D,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,EACjD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,EAC7C,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE;YACnB,YAAY,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK;YACnD,OAAO,EAAE,CAAC,KAAuC,EAAE,EAAE,CACnD,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC;SAC5B,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAED,aAAyD,CAAC,eAAe;IACxE,IAAI,CAAC"}

package/components/OTPFieldSeparator.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
+import { cn } from '../shared/cn.js';
 export const OTPFieldSeparator = (props) => {
     const { children, className, ref, ...rest } = props;
     return (_jsx("div", { ref: ref, "aria-hidden": true, className: cn('flex items-center text-surface-outline select-none', className), ...rest, children: children ?? _jsx("span", { className: "h-0.5 w-2 bg-surface-outline" }) }));

package/components/Popover.d.ts

@@ -1,5 +1,5 @@
-import { Color } from '../types';
-import { SurfaceProps, SurfaceVariant } from './Surface';
+import { Color } from '../types.js';
+import { SurfaceProps, SurfaceVariant } from './Surface.js';
 /**
  * State container for the `Popover` + `PopoverTrigger` + `Popover` compound. Holds the open
  * state and the anchor ref so a `PopoverTrigger` can register the anchor element and a sibling

package/components/Popover.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, createContext, useContext, useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
-import { useModalUtils } from '../hooks/use-modal-utils';
-import { useTheme } from '../hooks/use-theme';
-import { cn } from '../shared/cn';
-import { Backdrop } from './Backdrop';
-import { ModalController } from './ModalController';
-import { Surface } from './Surface';
+import { useModalUtils } from '../hooks/use-modal-utils.js';
+import { useTheme } from '../hooks/use-theme.js';
+import { cn } from '../shared/cn.js';
+import { Backdrop } from './Backdrop.js';
+import { ModalController } from './ModalController.js';
+import { Surface } from './Surface.js';
 const PopoverContext = createContext(null);
 const PopoverRootContext = createContext(null);
 /**

package/components/Popup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Color } from '../types';
+import { Color } from '../types.js';
 /**
  * State container for the `Popup` + `PopupTrigger` + `Popup` compound. Use when you want
  * the trigger and the popup to be siblings in JSX:

package/components/Popup.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, createContext, useContext, useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
-import { useFocusTrap } from '../hooks/use-focus-trap';
-import { useModalUtils } from '../hooks/use-modal-utils';
-import { cn } from '../shared/cn';
-import { Backdrop } from './Backdrop';
-import { Button } from './Button';
-import { CloseIcon } from './icons/CloseIcon';
-import { ModalController } from './ModalController';
-import { Surface } from './Surface';
+import { useFocusTrap } from '../hooks/use-focus-trap.js';
+import { useModalUtils } from '../hooks/use-modal-utils.js';
+import { cn } from '../shared/cn.js';
+import { Backdrop } from './Backdrop.js';
+import { Button } from './Button.js';
+import { CloseIcon } from './icons/CloseIcon.js';
+import { ModalController } from './ModalController.js';
+import { Surface } from './Surface.js';
 const PopupRootContext = createContext(null);
 /**
  * State container for the `Popup` + `PopupTrigger` + `Popup` compound. Use when you want

package/components/PopupContent.d.ts

@@ -1,4 +1,4 @@
-import { SurfaceVariant } from './Surface';
+import { SurfaceVariant } from './Surface.js';
 export interface PopupContentProps {
     /** Forwarded to the underlying `Surface` as `level`. Default `1`. Accepts the relative (`"+1"`/`"-1"`) syntax via `Surface.level`. */
     surfaceLevel?: number;

package/components/PopupContent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
-import { Surface } from './Surface';
+import { cn } from '../shared/cn.js';
+import { Surface } from './Surface.js';
 export const PopupContent = (props) => {
     const { surfaceLevel = 1, children, contentClassName = '', className = '', variant = 'solid', outline = true, ref, } = props;
     return (_jsx(Surface, { level: surfaceLevel, className: cn('rounded-3xl', className), ref: ref, variant: variant, outline: outline, contentClassName: cn('!h-auto w-full p-4', contentClassName), children: children }));

package/components/Radio.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ChangeEvent, MouseEvent, PointerEvent, ComponentPropsWithoutRef } from 'react';
-import { Color } from '../types';
+import { Color } from '../types.js';
 export type RadioSize = 'sm' | 'md';
 interface RadioOwnProps<C extends ElementType = 'label'> {
     /** Controlled checked state. Default `false`. */

package/components/Radio.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, } from 'react';
-import { useAccentColor } from '../hooks/use-accent-color';
-import { cn } from '../shared/cn';
-import { FocusableLayer } from './FocusableLayer';
-import { Surface } from './Surface';
+import { useAccentColor } from '../hooks/use-accent-color.js';
+import { cn } from '../shared/cn.js';
+import { FocusableLayer } from './FocusableLayer.js';
+import { Surface } from './Surface.js';
 export function Radio(props) {
     const accentColor = useAccentColor();
     const { checked = false, disabled = false, readOnly, value, name, size = 'sm', required = false, onChange = () => { }, onClick = () => { }, onPointerDown = () => { }, input = true, inputId, className, color = accentColor, component = 'label', hoverable, focusable, ...rest } = props;

package/components/SearchField.d.ts

@@ -1,6 +1,6 @@
 import { Ref, ChangeEvent } from 'react';
-import { InputSize } from './Input';
-import { SurfaceProps } from './Surface';
+import { InputSize } from './Input.js';
+import { SurfaceProps } from './Surface.js';
 interface SearchFieldOwnProps {
     /** Controlled query string. Default `''`. */
     value?: string;

package/components/SearchField.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
-import { SearchIcon } from './icons/SearchIcon';
-import { Input } from './Input';
-import { Surface } from './Surface';
+import { cn } from '../shared/cn.js';
+import { SearchIcon } from './icons/SearchIcon.js';
+import { Input } from './Input.js';
+import { Surface } from './Surface.js';
 export const SearchField = (props) => {
     const { value = '', inset = false, size = 'md', placeholder = 'Search', className = '', onChange = () => { }, ref, ...rest } = props;
     return (_jsx(Surface, { level: inset ? '+0' : '+1', className: cn('sticky z-20', !inset && 'top-0 ml-px rounded-t-3xl', inset && 'top-2 mx-2 w-auto rounded-full', className), outline: !inset, ref: ref, ...rest, children: _jsxs("div", { className: cn('flex items-center', !inset && 'p-1.5'), children: [_jsx(Input, { className: "w-full", placeholder: placeholder, onChange: (v, e) => onChange(v, e), contentClassName: "pl-6.5", value: value, clearButton: true, rounded: true, onClear: () => onChange('') }), _jsx(SearchIcon, { className: cn('pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-on-surface-darker', inset ? 'left-2' : 'left-4') })] }) }));

package/components/SectionTitle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../shared/cn';
+import { cn } from '../shared/cn.js';
 export const SectionTitle = (props) => {
     const { children, className = '', ref, ...rest } = props;
     return (_jsx("div", { ref: ref, className: cn('section-title flex items-end gap-4 text-xs font-medium text-on-surface-dark uppercase select-none', className), ...rest, children: children }));

package/components/Segmented.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, Ref, ElementType, ComponentPropsWithoutRef } from 'react';
-import { Color } from '../types';
-import { ButtonSize } from './Button';
-import { SurfaceVariant } from './Surface';
+import { Color } from '../types.js';
+import { ButtonSize } from './Button.js';
+import { SurfaceVariant } from './Surface.js';
 interface SegmentedOwnProps<C extends ElementType = 'div'> {
     /** Should be one or more `SegmentedButton` elements. */
     children?: ReactNode;

package/components/Segmented.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, } from 'react';
-import { useAccentColor } from '../hooks/use-accent-color';
-import { cn } from '../shared/cn';
-import { SegmentedContextProvider } from './SegmentedContext';
+import { useAccentColor } from '../hooks/use-accent-color.js';
+import { cn } from '../shared/cn.js';
+import { SegmentedContextProvider } from './SegmentedContext.js';
 export const Segmented = (props) => {
     const elRef = useRef(null);
     const accentColor = useAccentColor();

package/components/SegmentedButton.d.ts

@@ -1,5 +1,5 @@
 import { ElementType } from 'react';
-import { ButtonProps } from './Button';
+import { ButtonProps } from './Button.js';
 export type SegmentedButtonProps<C extends ElementType = 'button'> = ButtonProps<C> & {
     /**
      * Marks this button as the selected segment. When `true`, switches to the

package/components/SegmentedButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from './Button';
-import { useSegmentedContext } from './SegmentedContext';
+import { Button } from './Button.js';
+import { useSegmentedContext } from './SegmentedContext.js';
 export const SegmentedButton = (props) => {
     const { size = 'md', rounded = true, color, variant, outline, activeColor, activeVariant, activeOutline, } = useSegmentedContext();
     const { active, ...rest } = props;

package/components/SegmentedContext.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { Color } from '../types';
-import { ButtonProps, ButtonSize } from './Button';
+import { Color } from '../types.js';
+import { ButtonProps, ButtonSize } from './Button.js';
 /**
  * Shape of the data published by `Segmented` to its child `SegmentedButton`s.
  * Each `SegmentedButton` reads this via `useSegmentedContext()` to pick its inactive vs active