@cladd-ui/react 0.0.13 → 0.0.14

package/components/Shortcut.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useState, } from 'react';
-import { cn } from '../shared/cn';
-import { KeyboardArrowLeftIcon } from './icons/KeyboardArrowLeftIcon';
-import { KeyboardBackspaceIcon } from './icons/KeyboardBackspaceIcon';
-import { KeyboardCommandIcon } from './icons/KeyboardCommandIcon';
-import { KeyboardControlIcon } from './icons/KeyboardControlIcon';
-import { KeyboardOptionIcon } from './icons/KeyboardOptionIcon';
-import { KeyboardReturnIcon } from './icons/KeyboardReturnIcon';
-import { KeyboardShiftIcon } from './icons/KeyboardShiftIcon';
-import { KeyboardSpaceIcon } from './icons/KeyboardSpaceIcon';
-import { KeyboardTabIcon } from './icons/KeyboardTabIcon';
-import { Surface } from './Surface';
+import { cn } from '../shared/cn.js';
+import { KeyboardArrowLeftIcon } from './icons/KeyboardArrowLeftIcon.js';
+import { KeyboardBackspaceIcon } from './icons/KeyboardBackspaceIcon.js';
+import { KeyboardCommandIcon } from './icons/KeyboardCommandIcon.js';
+import { KeyboardControlIcon } from './icons/KeyboardControlIcon.js';
+import { KeyboardOptionIcon } from './icons/KeyboardOptionIcon.js';
+import { KeyboardReturnIcon } from './icons/KeyboardReturnIcon.js';
+import { KeyboardShiftIcon } from './icons/KeyboardShiftIcon.js';
+import { KeyboardSpaceIcon } from './icons/KeyboardSpaceIcon.js';
+import { KeyboardTabIcon } from './icons/KeyboardTabIcon.js';
+import { Surface } from './Surface.js';
 export const Shortcut = (props) => {
     const { className = '', iconClassName = '', keyClassName = '', keyContentClassName = '', surfaceLevel = '+2', outline = true, variant = 'gradient', color, children, size = 'md', ref, ...rest } = props;
     const [isMac, setIsMac] = useState(false);

package/components/Slider.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { Color } from '../types';
+import { Color } from '../types.js';
 export type SliderSize = 'sm' | 'md';
 export interface SliderProps {
     /** Controlled value. When omitted, the component falls back to uncontrolled mode using `defaultValue`. */

package/components/Slider.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { useAccentColor } from '../hooks/use-accent-color';
-import { cn } from '../shared/cn';
-import { FocusableLayer } from './FocusableLayer';
-import { Surface } from './Surface';
-import { SurfaceCut } from './SurfaceCut';
+import { useAccentColor } from '../hooks/use-accent-color.js';
+import { cn } from '../shared/cn.js';
+import { FocusableLayer } from './FocusableLayer.js';
+import { Surface } from './Surface.js';
+import { SurfaceCut } from './SurfaceCut.js';
 export function Slider(props) {
     const accentColor = useAccentColor();
     const { value: valueProp, defaultValue = 0, min = 0, max = 100, step = 1, size = 'sm', readOnly = false, disabled = false, onChange = () => { }, className, color = accentColor, input: _input = false, debounce = 0, } = props;

package/components/Spinner.d.ts

@@ -1,4 +1,4 @@
-import { Color } from '../types';
+import { Color } from '../types.js';
 export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export interface SpinnerProps {
     /** Spinner dimension. Default `'sm'`. Drives the size, knob position, and border thickness. */

package/components/Spinner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } 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 function Spinner(props) {
     const accentColor = useAccentColor();
     const { size = 'sm', color = accentColor, className } = props;

package/components/Surface.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, Ref, ElementType, ComponentPropsWithoutRef } from 'react';
-import { Color } from '../types';
+import { Color } from '../types.js';
 export type SurfaceVariant = 'transparent' | 'solid' | 'gradient' | 'solid-fill' | 'gradient-fill';
 interface SurfaceOwnProps<C extends ElementType = 'div'> {
     /**

package/components/Surface.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSurface } from '../hooks/use-surface';
-import { cn } from '../shared/cn';
-import { SurfaceContent } from './SurfaceContent';
-import { SurfaceContextProvider } from './SurfaceContext';
+import { useSurface } from '../hooks/use-surface.js';
+import { cn } from '../shared/cn.js';
+import { SurfaceContent } from './SurfaceContent.js';
+import { SurfaceContextProvider } from './SurfaceContext.js';
 export const Surface = (props) => {
     const MAX_LEVEL = 5;
     const { level, children, className = '', contentClassName = '', bgClassName = '', outline = false, variant = 'solid', component = 'div', clickable = false, pressed, hoverable = false, color = '', wrapContent = true, beforeContent, ref, ...rest } = props;

package/components/SurfaceContent.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 SurfaceContent = (props) => {
     const { children, className = '', ref, ...rest } = props;
     return (_jsx("div", { ref: ref, className: cn(`relative h-full`, className), ...rest, children: children }));

package/components/SurfaceCut.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, Ref, ElementType, ComponentPropsWithoutRef } from 'react';
-import { Color } from '../types';
+import { Color } from '../types.js';
 interface SurfaceCutOwnProps<C extends ElementType = 'div'> {
     /** Surface-cut content. */
     children?: ReactNode;

package/components/SurfaceCut.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSurface } from '../hooks/use-surface';
-import { cn } from '../shared/cn';
-import { SurfaceContextProvider } from './SurfaceContext';
-import { SurfaceCutContent } from './SurfaceCutContent';
+import { useSurface } from '../hooks/use-surface.js';
+import { cn } from '../shared/cn.js';
+import { SurfaceContextProvider } from './SurfaceContext.js';
+import { SurfaceCutContent } from './SurfaceCutContent.js';
 export const SurfaceCut = (props) => {
     const { children, className = '', outline = true, color, hoverable = false, clickable = false, pressed = false, component = 'div', wrapContent = true, contentClassName = '', ref, ...rest } = props;
     const Component = component;

package/components/SurfaceCutContent.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 SurfaceCutContent = (props) => {
     const { children, fullHeight = true, component = 'div', className = '', ref, ...rest } = props;
     const Component = component;

package/components/Switch.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
-import { Color } from '../types';
-import { SurfaceVariant } from './Surface';
+import { Color } from '../types.js';
+import { SurfaceVariant } from './Surface.js';
 export type SwitchSize = 'sm' | 'md';
 interface SwitchOwnProps<C extends ElementType = 'label'> {
     /** Controlled checked state. Default `false`. */

package/components/Switch.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 Switch(props) {
     const accentColor = useAccentColor();
     const { checked = false, disabled = false, readOnly, onChange = () => { }, color = accentColor, component = 'label', icon, size = 'md', className, input = true, hoverable, focusable, outline = true, variant = 'solid', surfaceLevel = '+1', knobOutline = true, knobVariant = 'gradient', knobSurfaceLevel = '+2', } = props;

package/components/TextArea.d.ts

@@ -1,5 +1,5 @@
 import { ElementType, ReactNode, Ref, FocusEvent, KeyboardEvent, FormEvent, ComponentPropsWithoutRef } from 'react';
-import { Color } from '../types';
+import { Color } from '../types.js';
 export type TextAreaSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 interface TextAreaOwnProps<C extends ElementType = 'div'> {
     /** Polymorphic wrapper element. Defaults to `'div'`. The editable area itself is always a `contenteditable` `<div>`. */

package/components/TextArea.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, } from 'react';
-import { useAccentColor } from '../hooks/use-accent-color';
-import { cn } from '../shared/cn';
-import { roundedClasses } from '../shared/rounded-classes';
-import { FocusableLayer } from './FocusableLayer';
-import { SurfaceCut } from './SurfaceCut';
-import { SurfaceCutContent } from './SurfaceCutContent';
+import { useAccentColor } from '../hooks/use-accent-color.js';
+import { cn } from '../shared/cn.js';
+import { roundedClasses } from '../shared/rounded-classes.js';
+import { FocusableLayer } from './FocusableLayer.js';
+import { SurfaceCut } from './SurfaceCut.js';
+import { SurfaceCutContent } from './SurfaceCutContent.js';
 export const TextArea = (props) => {
     const accentColor = useAccentColor();
     const { component = 'div', ref: externalRef, value, placeholder, disabled = false, readOnly, rounded = false, size = 'lg', onChange = () => { }, onKeyDown = () => { }, onFocus = () => { }, onBlur = () => { }, color = accentColor, prefix, suffix, updateContentOnChange = true, className, contentClassName, inputClassName, placeholderClassName = '', valid = true, infoMessage, errorMessage, icon, surfaceClassName, } = props;

package/components/ThemeContext.d.ts

@@ -1,4 +1,4 @@
-import { Color } from '../types';
+import { Color } from '../types.js';
 type ThemeContextValue = {
     theme: 'dark' | 'light';
     accentColor: Color;

package/components/Toast.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, 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 `Toast` + `ToastTrigger` + `Toast` compound. Less commonly used than
  * the imperative `useToasts()` portal API - prefer the portal for app-wide notifications and

package/components/Toast.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, createContext, useContext, useState, useEffect, useRef, } 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 { Button } from './Button';
-import { CloseIcon } from './icons/CloseIcon';
-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 { Button } from './Button.js';
+import { CloseIcon } from './icons/CloseIcon.js';
+import { ModalController } from './ModalController.js';
+import { Surface } from './Surface.js';
 const ToastRootContext = createContext(null);
 /**
  * State container for the `Toast` + `ToastTrigger` + `Toast` compound. Less commonly used than

package/components/ToastsPortal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Toast } from './Toast';
-import { useToastsPortalContext } from './ToastsPortalContext';
+import { Toast } from './Toast.js';
+import { useToastsPortalContext } from './ToastsPortalContext.js';
 export function ToastsPortal() {
     const { data, state, setState, setData } = useToastsPortalContext();
     if (!data)

package/components/ToastsPortalContext.d.ts

@@ -1,4 +1,4 @@
-import { Color } from '../types';
+import { Color } from '../types.js';
 /**
  * Shape of a queued toast in the imperative toast portal. Mirrors `ToastProps` but adds an
  * `id` (used as React key + lifecycle handle) and an internal `removed` flag.

package/components/Toolbar.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, Ref, ElementType } from 'react';
-import { Color } from '../types';
-import { ButtonSize } from './Button';
-import { SurfaceProps, SurfaceVariant } from './Surface';
+import { Color } from '../types.js';
+import { ButtonSize } from './Button.js';
+import { SurfaceProps, SurfaceVariant } from './Surface.js';
 interface ToolbarOwnProps<C extends ElementType = 'div'> {
     /** Toolbar items - typically `ToolbarButton` and `ToolbarSeparator`. */
     children?: ReactNode;

package/components/Toolbar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { cn } from '../shared/cn';
-import { roundedClasses } from '../shared/rounded-classes';
-import { Surface } from './Surface';
-import { ToolbarContextProvider } from './ToolbarContext';
+import { cn } from '../shared/cn.js';
+import { roundedClasses } from '../shared/rounded-classes.js';
+import { Surface } from './Surface.js';
+import { ToolbarContextProvider } from './ToolbarContext.js';
 export const Toolbar = (props) => {
     const elRef = useRef(null);
     const { children, className = '', contentClassName = '', rounded = true, size = 'md', component = 'div', color = '', ref, variant = 'gradient', outline = true, buttonVariant = 'transparent', buttonOutline = false, surfaceLevel, ...rest } = props;

package/components/ToolbarButton.d.ts

@@ -1,5 +1,5 @@
 import { ElementType } from 'react';
-import { ButtonProps } from './Button';
+import { ButtonProps } from './Button.js';
 /**
  * `ToolbarButton` accepts the full `Button` API. When rendered inside a `Toolbar`,
  * `size`, `rounded`, `variant`, and `outline` default to the values supplied by the

package/components/ToolbarButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from './Button';
-import { useToolbarContext } from './ToolbarContext';
+import { Button } from './Button.js';
+import { useToolbarContext } from './ToolbarContext.js';
 export const ToolbarButton = (props) => {
     const { size = 'md', rounded = true, variant = 'transparent', outline = false, } = useToolbarContext();
     return (_jsx(Button, { size: size, rounded: rounded, variant: variant, outline: outline, ...props }));

package/components/ToolbarContext.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ButtonSize } from './Button';
-import { SurfaceVariant } from './Surface';
+import { ButtonSize } from './Button.js';
+import { SurfaceVariant } from './Surface.js';
 interface ToolbarContextValue {
     size?: ButtonSize;
     rounded?: boolean;

package/components/ToolbarSeparator.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 ToolbarSeparator = (props) => {
     const { children, className = '', ref, ...rest } = props;
     return (_jsx("div", { ref: ref, className: cn('mx-1 h-1/2 w-px bg-surface-outline', className), ...rest, children: children }));

package/components/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TooltipPrimitiveProps, TooltipPosition } from './TooltipPrimitive';
+import { TooltipPrimitiveProps, TooltipPosition } from './TooltipPrimitive.js';
 export type { TooltipPosition };
 export interface TooltipProps extends Omit<TooltipPrimitiveProps, 'children' | 'ref'> {
     /**

package/components/Tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useEffect, useRef, useState } from 'react';
-import { useDevice } from '../hooks/use-device';
-import { TooltipPrimitive, } from './TooltipPrimitive';
+import { useDevice } from '../hooks/use-device.js';
+import { TooltipPrimitive, } from './TooltipPrimitive.js';
 let tooltipGlobalTimeout = 0;
 let tooltipGlobalTimeoutId = 0;
 const resetGlobalTimeout = () => {

package/components/TooltipPrimitive.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, Ref } from 'react';
-import { Color } from '../types';
-import { SurfaceProps } from './Surface';
+import { Color } from '../types.js';
+import { SurfaceProps } from './Surface.js';
 type OffsetValue = number | string;
 export type TooltipPosition = 'top' | 'bottom';
 interface TooltipPrimitiveOwnProps {

package/components/TooltipPrimitive.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } 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 { 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 { ModalController } from './ModalController.js';
+import { Surface } from './Surface.js';
 const resolveOffset = (value) => {
     if (typeof value === 'number')
         return `${value}px`;

package/components/UIProvider.d.ts

@@ -1,4 +1,4 @@
-import { Color } from '../types';
+import { Color } from '../types.js';
 export interface UIProviderProps {
     /**
      * Color scheme. Default `'dark'`. Read by `useTheme` and used to switch surface defaults

package/components/UIProvider.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DialogsPortal } from './DialogsPortal';
-import { DialogsPortalProvider } from './DialogsPortalContext';
-import { ThemeProvider } from './ThemeContext';
-import { ToastsPortal } from './ToastsPortal';
-import { ToastsPortalProvider } from './ToastsPortalContext';
+import { DialogsPortal } from './DialogsPortal.js';
+import { DialogsPortalProvider } from './DialogsPortalContext.js';
+import { ThemeProvider } from './ThemeContext.js';
+import { ToastsPortal } from './ToastsPortal.js';
+import { ToastsPortalProvider } from './ToastsPortalContext.js';
 export const UIProvider = (props) => {
     const { theme = 'dark', accentColor = 'brand', children } = props;
     return (_jsx(ThemeProvider, { theme: theme, accentColor: accentColor, children: _jsx(DialogsPortalProvider, { children: _jsxs(ToastsPortalProvider, { children: [children, _jsx(DialogsPortal, {}), _jsx(ToastsPortal, {})] }) }) }));

package/hooks/use-accent-color.d.ts

@@ -1,2 +1,2 @@
-export declare const useAccentColor: () => import("../types").Color;
+export declare const useAccentColor: () => import("..").Color;
 //# sourceMappingURL=use-accent-color.d.ts.map

package/hooks/use-accent-color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-accent-color.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-accent-color.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,gCAE1B,CAAC"}
+{"version":3,"file":"use-accent-color.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-accent-color.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,0BAE1B,CAAC"}

package/hooks/use-accent-color.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ThemeContext } from '../components/ThemeContext';
+import { ThemeContext } from '../components/ThemeContext.js';
 export const useAccentColor = () => {
     return useContext(ThemeContext).accentColor;
 };

package/hooks/use-dialog.d.ts

@@ -1,4 +1,4 @@
-import { DialogsPortalData } from '../components/DialogsPortalContext';
+import { DialogsPortalData } from '../components/DialogsPortalContext.js';
 export declare const useDialog: ({ lazy }?: {
     lazy?: boolean;
 }) => {

package/hooks/use-dialog.js

@@ -1,5 +1,5 @@
-import { useDialogsPortalContext, } from '../components/DialogsPortalContext';
-import { useAccentColor } from './use-accent-color';
+import { useDialogsPortalContext, } from '../components/DialogsPortalContext.js';
+import { useAccentColor } from './use-accent-color.js';
 export const useDialog = ({ lazy } = {}) => {
     const { setState, setData } = useDialogsPortalContext();
     const accentColor = useAccentColor();

package/hooks/use-modal-utils.d.ts

@@ -1,4 +1,4 @@
-import { ModalPhase } from '../components/ModalController';
+import { ModalPhase } from '../components/ModalController.js';
 export declare const useModalUtils: ({ phase, onPhaseChange, lazy, onClose, onClosed, onOpen, onOpened, transitionEndElRef, closeOnEscape, }: {
     phase: ModalPhase;
     onPhaseChange?: (phase: ModalPhase) => void;

package/hooks/use-modal-utils.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { nextTick } from '../shared/next-tick';
+import { nextTick } from '../shared/next-tick.js';
 export const useModalUtils = ({ phase, onPhaseChange = () => { }, lazy, onClose = () => { }, onClosed = () => { }, onOpen = () => { }, onOpened = () => { }, transitionEndElRef, closeOnEscape = true, }) => {
     const initiallyOpenedRef = useRef(false);
     const [opened, setOpened] = useState(false);

package/hooks/use-surface.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { SurfaceContext } from '../components/SurfaceContext';
+import { SurfaceContext } from '../components/SurfaceContext.js';
 export function useSurface() {
     return (useContext(SurfaceContext) || { level: 0 }).level;
 }

package/hooks/use-theme.js

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ThemeContext } from '../components/ThemeContext';
+import { ThemeContext } from '../components/ThemeContext.js';
 export const useTheme = () => {
     return useContext(ThemeContext).theme;
 };

package/hooks/use-toast.d.ts

@@ -1,3 +1,3 @@
-import { ToastsPortalData } from '../components/ToastsPortalContext';
+import { ToastsPortalData } from '../components/ToastsPortalContext.js';
 export declare const useToast: () => ({ title, text, color, closeButton, icon, iconComponent, onClosed, }: Partial<ToastsPortalData>) => void;
 //# sourceMappingURL=use-toast.d.ts.map

package/hooks/use-toast.js

@@ -1,4 +1,4 @@
-import { useToastsPortalContext, } from '../components/ToastsPortalContext';
+import { useToastsPortalContext, } from '../components/ToastsPortalContext.js';
 export const useToast = () => {
     const { setState, state, setData, data } = useToastsPortalContext();
     return ({ title, text, color, closeButton, icon, iconComponent, onClosed, }) => {

package/index.d.ts

@@ -1,55 +1,56 @@
-export { useDevice } from './hooks/use-device';
-export { useDialog } from './hooks/use-dialog';
-export { useSurface } from './hooks/use-surface';
-export { useTheme } from './hooks/use-theme';
-export { useToast } from './hooks/use-toast';
-export { useAccentColor } from './hooks/use-accent-color';
-export { cn } from './shared/cn';
-export { nextTick } from './shared/next-tick';
-export { CloseIcon } from './components/icons/CloseIcon';
-export { SearchIcon } from './components/icons/SearchIcon';
-export { DropdownIcon } from './components/icons/DropdownIcon';
-export { CheckIcon } from './components/icons/CheckIcon';
-export { Backdrop, type BackdropProps } from './components/Backdrop';
-export { Button, type ButtonProps, type ButtonSize } from './components/Button';
-export { Checkbox, type CheckboxProps, type CheckboxSize, } from './components/Checkbox';
-export { Chip, type ChipProps, type ChipSize } from './components/Chip';
-export { Dialog, DialogClose, DialogRoot, DialogTrigger, type DialogProps, } from './components/Dialog';
-export { Input, type InputProps, type InputSize } from './components/Input';
-export { Link, type LinkProps } from './components/Link';
-export { List, type ListProps } from './components/List';
-export { ListButton, type ListButtonProps } from './components/ListButton';
-export { ListItem, type ListItemProps } from './components/ListItem';
-export { ListSeparator, type ListSeparatorProps, } from './components/ListSeparator';
-export { ListTitle, type ListTitleProps } from './components/ListTitle';
-export { NumberField, type NumberFieldProps, type NumberFieldSize, } from './components/NumberField';
-export { OTPField, type OTPFieldProps } from './components/OTPField';
-export { OTPFieldInput, type OTPFieldInputProps, } from './components/OTPFieldInput';
-export { OTPFieldSeparator, type OTPFieldSeparatorProps, } from './components/OTPFieldSeparator';
-export { Popover, PopoverClose, PopoverRoot, PopoverTrigger, type PopoverProps, } from './components/Popover';
-export { Popup, PopupClose, PopupRoot, PopupTrigger, type PopupProps, } from './components/Popup';
-export { PopupContent, type PopupContentProps, } from './components/PopupContent';
-export { Radio, type RadioProps, type RadioSize } from './components/Radio';
-export { SearchField, type SearchFieldProps } from './components/SearchField';
-export { SectionTitle, type SectionTitleProps, } from './components/SectionTitle';
-export { Segmented, type SegmentedProps } from './components/Segmented';
-export { SegmentedButton, type SegmentedButtonProps, } from './components/SegmentedButton';
-export { Select, type SelectProps } from './components/Select';
-export { Shortcut, type ShortcutProps, type ShortcutSize, } from './components/Shortcut';
-export { Slider, type SliderProps, type SliderSize } from './components/Slider';
-export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner';
-export { SurfaceContextProvider } from './components/SurfaceContext';
-export { Surface, type SurfaceProps } from './components/Surface';
-export { SurfaceContent, type SurfaceContentProps, } from './components/SurfaceContent';
-export { SurfaceCut, type SurfaceCutProps } from './components/SurfaceCut';
-export { SurfaceCutContent, type SurfaceCutContentProps, } from './components/SurfaceCutContent';
-export { Switch, type SwitchProps, type SwitchSize } from './components/Switch';
-export { TextArea, type TextAreaProps, type TextAreaSize, } from './components/TextArea';
-export { Toast, ToastClose, ToastRoot, ToastTrigger, type ToastProps, } from './components/Toast';
-export { Toolbar, type ToolbarProps } from './components/Toolbar';
-export { ToolbarButton, type ToolbarButtonProps, } from './components/ToolbarButton';
-export { ToolbarSeparator, type ToolbarSeparatorProps, } from './components/ToolbarSeparator';
-export { Tooltip, type TooltipPosition, type TooltipProps, } from './components/Tooltip';
-export { TooltipPrimitive, type TooltipPrimitiveProps, } from './components/TooltipPrimitive';
-export { UIProvider, type UIProviderProps } from './components/UIProvider';
+export { useDevice } from './hooks/use-device.js';
+export { useDialog } from './hooks/use-dialog.js';
+export { useSurface } from './hooks/use-surface.js';
+export { useTheme } from './hooks/use-theme.js';
+export { useToast } from './hooks/use-toast.js';
+export { useAccentColor } from './hooks/use-accent-color.js';
+export { type Color } from './types.js';
+export { cn } from './shared/cn.js';
+export { nextTick } from './shared/next-tick.js';
+export { CloseIcon } from './components/icons/CloseIcon.js';
+export { SearchIcon } from './components/icons/SearchIcon.js';
+export { DropdownIcon } from './components/icons/DropdownIcon.js';
+export { CheckIcon } from './components/icons/CheckIcon.js';
+export { Backdrop, type BackdropProps } from './components/Backdrop.js';
+export { Button, type ButtonProps, type ButtonSize } from './components/Button.js';
+export { Checkbox, type CheckboxProps, type CheckboxSize, } from './components/Checkbox.js';
+export { Chip, type ChipProps, type ChipSize } from './components/Chip.js';
+export { Dialog, DialogClose, DialogRoot, DialogTrigger, type DialogProps, } from './components/Dialog.js';
+export { Input, type InputProps, type InputSize } from './components/Input.js';
+export { Link, type LinkProps } from './components/Link.js';
+export { List, type ListProps } from './components/List.js';
+export { ListButton, type ListButtonProps } from './components/ListButton.js';
+export { ListItem, type ListItemProps } from './components/ListItem.js';
+export { ListSeparator, type ListSeparatorProps, } from './components/ListSeparator.js';
+export { ListTitle, type ListTitleProps } from './components/ListTitle.js';
+export { NumberField, type NumberFieldProps, type NumberFieldSize, } from './components/NumberField.js';
+export { OTPField, type OTPFieldProps } from './components/OTPField.js';
+export { OTPFieldInput, type OTPFieldInputProps, } from './components/OTPFieldInput.js';
+export { OTPFieldSeparator, type OTPFieldSeparatorProps, } from './components/OTPFieldSeparator.js';
+export { Popover, PopoverClose, PopoverRoot, PopoverTrigger, type PopoverProps, } from './components/Popover.js';
+export { Popup, PopupClose, PopupRoot, PopupTrigger, type PopupProps, } from './components/Popup.js';
+export { PopupContent, type PopupContentProps, } from './components/PopupContent.js';
+export { Radio, type RadioProps, type RadioSize } from './components/Radio.js';
+export { SearchField, type SearchFieldProps } from './components/SearchField.js';
+export { SectionTitle, type SectionTitleProps, } from './components/SectionTitle.js';
+export { Segmented, type SegmentedProps } from './components/Segmented.js';
+export { SegmentedButton, type SegmentedButtonProps, } from './components/SegmentedButton.js';
+export { Select, type SelectProps } from './components/Select.js';
+export { Shortcut, type ShortcutProps, type ShortcutSize, } from './components/Shortcut.js';
+export { Slider, type SliderProps, type SliderSize } from './components/Slider.js';
+export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
+export { SurfaceContextProvider } from './components/SurfaceContext.js';
+export { Surface, type SurfaceProps } from './components/Surface.js';
+export { SurfaceContent, type SurfaceContentProps, } from './components/SurfaceContent.js';
+export { SurfaceCut, type SurfaceCutProps } from './components/SurfaceCut.js';
+export { SurfaceCutContent, type SurfaceCutContentProps, } from './components/SurfaceCutContent.js';
+export { Switch, type SwitchProps, type SwitchSize } from './components/Switch.js';
+export { TextArea, type TextAreaProps, type TextAreaSize, } from './components/TextArea.js';
+export { Toast, ToastClose, ToastRoot, ToastTrigger, type ToastProps, } from './components/Toast.js';
+export { Toolbar, type ToolbarProps } from './components/Toolbar.js';
+export { ToolbarButton, type ToolbarButtonProps, } from './components/ToolbarButton.js';
+export { ToolbarSeparator, type ToolbarSeparatorProps, } from './components/ToolbarSeparator.js';
+export { Tooltip, type TooltipPosition, type TooltipProps, } from './components/Tooltip.js';
+export { TooltipPrimitive, type TooltipPrimitiveProps, } from './components/TooltipPrimitive.js';
+export { UIProvider, type UIProviderProps } from './components/UIProvider.js';
 //# sourceMappingURL=index.d.ts.map