@cladd-ui/react 0.0.13 → 0.0.15

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.0.15 (2026-04-27)
+
+### Features
+
+- add /ui export (f31432f)
+
+## 0.0.14 (2026-04-26)
+
+### Build System
+
+- bundle Colors and add extensions (29c311f)
+
 ## 0.0.13 (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.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',

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

package/components/Select.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode, Ref, MouseEvent } from 'react';
-import { ButtonSize } from './Button';
-import { PopoverOffset, PopoverPosition } from './Popover';
+import { ButtonSize } from './Button.js';
+import { PopoverOffset, PopoverPosition } from './Popover.js';
 interface SelectOptionRenderParams<T> {
     value: T;
     index: number;
     selected: boolean;
 }
-import { Color } from '../types';
-import { ButtonProps } from './Button';
+import { Color } from '../types.js';
+import { ButtonProps } from './Button.js';
 interface SelectOwnProps<T = string> {
     /** Selected value (single-select) or array of selected values (when `multiple`). */
     value?: T | T[];

package/components/Select.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useEffect, useId, useRef, useState, } from 'react';
-import { useDevice } from '../hooks/use-device';
-import { useTheme } from '../hooks/use-theme';
-import { cn } from '../shared/cn';
-import { Button, buttonIconSizes } from './Button';
-import { Checkbox } from './Checkbox';
-import { DropdownIcon } from './icons/DropdownIcon';
-import { List } from './List';
-import { ListButton } from './ListButton';
-import { Popover } from './Popover';
-import { Radio } from './Radio';
-import { SearchField } from './SearchField';
-import { SectionTitle } from './SectionTitle';
-import { Shortcut } from './Shortcut';
+import { useDevice } from '../hooks/use-device.js';
+import { useTheme } from '../hooks/use-theme.js';
+import { cn } from '../shared/cn.js';
+import { Button, buttonIconSizes } from './Button.js';
+import { Checkbox } from './Checkbox.js';
+import { DropdownIcon } from './icons/DropdownIcon.js';
+import { List } from './List.js';
+import { ListButton } from './ListButton.js';
+import { Popover } from './Popover.js';
+import { Radio } from './Radio.js';
+import { SearchField } from './SearchField.js';
+import { SectionTitle } from './SectionTitle.js';
+import { Shortcut } from './Shortcut.js';
 export function Select(props) {
     const theme = useTheme();
     const { value = '', placeholder = '', title = '', options = [], multiple, disabled, readOnly, 

package/components/Shortcut.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
-import { Color } from '../types';
-import { SurfaceVariant } from './Surface';
+import { Color } from '../types.js';
+import { SurfaceVariant } from './Surface.js';
 export type ShortcutSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 interface ShortcutOwnProps {
     /** Extra classes for the shortcut root container. */