@jfrader/ui 0.1.2 → 0.3.0

package/dist/types/components/popover/popover.d.ts

@@ -1,5 +1,6 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Placement } from '@floating-ui/react';
+import { type SxProps } from '../../styling/sx';
 export interface PopoverProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -7,13 +8,15 @@ export interface PopoverProps {
     placement?: Placement;
     children?: ReactNode;
 }
-export interface PopoverTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface PopoverTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
 }
-export interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface PopoverContentProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
 declare function PopoverRoot({ open: openProp, defaultOpen, onOpenChange, placement, children, }: PopoverProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ref, className, sx, ...props }: PopoverTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ ref, style, className, sx, ...rest }: PopoverContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export declare const Popover: typeof PopoverRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: typeof PopoverTrigger;
+    Content: typeof PopoverContent;
 };
 export {};

package/dist/types/components/progress/progress.d.ts

@@ -1,10 +1,11 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export interface ProgressPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface ProgressProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
     /** Current value in `0..max`; leave undefined for indeterminate progress. */
     value?: number;
     max?: number;
@@ -16,4 +17,7 @@ export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
         indicator?: ProgressPartProps;
     };
 }
-export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Progress({ ref, value, max, label, getValueLabel, slotProps, 'aria-labelledby': ariaLabelledByProp, className, sx, ...rest }: ProgressProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Progress {
+    var displayName: string;
+}

package/dist/types/components/radio-group/radio-group.d.ts

@@ -1,7 +1,8 @@
-import { type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export type RadioGroupOrientation = 'vertical' | 'horizontal';
-export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+export interface RadioGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, SxProps {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
@@ -13,7 +14,7 @@ export interface RadioGroupRadioPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface RadioGroupRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'name' | 'checked' | 'defaultChecked' | 'size'> {
+export interface RadioGroupRadioProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'value' | 'name' | 'checked' | 'defaultChecked' | 'size'>, SxProps {
     value: string;
     label?: ReactNode;
     description?: ReactNode;
@@ -24,6 +25,9 @@ export interface RadioGroupRadioProps extends Omit<InputHTMLAttributes<HTMLInput
         description?: RadioGroupRadioPartProps;
     };
 }
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Radio: import("react").ForwardRefExoticComponent<RadioGroupRadioProps & import("react").RefAttributes<HTMLInputElement>>;
+declare function RadioGroupRoot({ ref, value: valueProp, defaultValue, onValueChange, name: nameProp, disabled, orientation, className, sx, ...rest }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function RadioGroupRadio({ ref, value, label, description, disabled: disabledProp, onChange, slotProps, className, sx, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: RadioGroupRadioProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: typeof RadioGroupRoot & {
+    Radio: typeof RadioGroupRadio;
 };
+export {};

package/dist/types/components/select/select.d.ts

@@ -1,5 +1,6 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Placement } from '@floating-ui/react';
+import { type SxProps } from '../../styling/sx';
 export interface SelectProps {
     value?: string;
     defaultValue?: string;
@@ -14,25 +15,29 @@ export interface SelectProps {
     name?: string;
     children?: ReactNode;
 }
-export interface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface SelectTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
     id?: string;
 }
-export interface SelectValueProps extends HTMLAttributes<HTMLSpanElement> {
+export interface SelectValueProps extends ComponentPropsWithRef<'span'>, SxProps {
     /** Shown when no option matches the selected value. */
     placeholder?: ReactNode;
 }
-export interface SelectContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface SelectContentProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-export interface SelectItemProps extends HTMLAttributes<HTMLDivElement> {
+export interface SelectItemProps extends ComponentPropsWithRef<'div'>, SxProps {
     /** Unique within the select. */
     value: string;
     disabled?: boolean;
 }
 declare function SelectRoot({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, placement, disabled, name, children, }: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ ref, id: idProp, disabled: disabledProp, onKeyDown, className, sx, ...rest }: SelectTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ref, placeholder, className, sx, ...rest }: SelectValueProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SelectContent({ ref, style, onMouseDown, children, className, sx, ...rest }: SelectContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function SelectItem({ ref, value, disabled, onClick, children, className, sx, ...rest }: SelectItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const Select: typeof SelectRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Value: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
-    Content: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: typeof SelectTrigger;
+    Value: typeof SelectValue;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
 };
 export {};

package/dist/types/components/skeleton/skeleton.d.ts

@@ -1,11 +1,15 @@
-import { type HTMLAttributes } from 'react';
+import type { ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 type Length = number | string;
-export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+export interface SkeletonProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
     width?: Length;
     height?: Length;
     /** Round placeholder; height follows width unless `height` is given. */
     circle?: boolean;
     radius?: Length;
 }
-export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Skeleton({ ref, width, height, circle, radius, style, className, sx, ...rest }: SkeletonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Skeleton {
+    var displayName: string;
+}
 export {};

package/dist/types/components/spinner/spinner.d.ts

@@ -1,8 +1,12 @@
-import { type HTMLAttributes } from 'react';
+import type { ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type SpinnerSize = 'sm' | 'md' | 'lg';
-export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+export interface SpinnerProps extends Omit<ComponentPropsWithRef<'span'>, 'children'>, SxProps {
     size?: SpinnerSize;
     /** Accessible text announced for the status region. */
     label?: string;
 }
-export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare function Spinner({ ref, size, label, className, sx, ...rest }: SpinnerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Spinner {
+    var displayName: string;
+}

package/dist/types/components/stack/stack.d.ts

@@ -4,4 +4,7 @@ export type StackAlign = Exclude<FlexAlign, 'baseline'>;
 export interface StackProps extends Omit<FlexProps, 'direction' | 'inline' | 'align'> {
     align?: StackAlign;
 }
-export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Stack({ ref, gap, align, justify, wrap, className, sx, ...rest }: StackProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Stack {
+    var displayName: string;
+}

package/dist/types/components/switch/switch.d.ts

@@ -1,11 +1,12 @@
-import { type InputHTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
 export type SwitchSize = 'sm' | 'md';
 export interface SwitchPartProps {
     className?: string;
     css?: Interpolation<Theme>;
 }
-export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+export interface SwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'type'>, SxProps {
     label?: ReactNode;
     description?: ReactNode;
     size?: SwitchSize;
@@ -17,4 +18,7 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
         description?: SwitchPartProps;
     };
 }
-export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function Switch({ ref, label, description, size, onChange, onCheckedChange, slotProps, className, sx, dir, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: SwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Switch {
+    var displayName: string;
+}

package/dist/types/components/tabs/tabs.d.ts

@@ -1,22 +1,28 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type TabsOrientation = 'horizontal' | 'vertical';
 export type TabsActivation = 'auto' | 'manual';
-export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+export interface TabsProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, SxProps {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     orientation?: TabsOrientation;
     activation?: TabsActivation;
 }
-export type TabsListProps = HTMLAttributes<HTMLDivElement>;
-export interface TabsTabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export type TabsListProps = ComponentPropsWithRef<'div'> & SxProps;
+export interface TabsTabProps extends ComponentPropsWithRef<'button'>, SxProps {
     value: string;
 }
-export interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
+export interface TabsPanelProps extends ComponentPropsWithRef<'div'>, SxProps {
     value: string;
 }
-export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>> & {
-    List: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
-    Tab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Panel: import("react").ForwardRefExoticComponent<TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
+declare function TabsRoot({ ref, value: valueProp, defaultValue, onValueChange, orientation, activation, className, sx, ...rest }: TabsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TabsList({ ref, onKeyDown, className, sx, ...rest }: TabsListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TabsTab({ ref, value, disabled, onClick, onFocus, className, sx, ...rest }: TabsTabProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TabsPanel({ ref, value, tabIndex, 'aria-labelledby': ariaLabelledByProp, className, sx, ...rest }: TabsPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Tab: typeof TabsTab;
+    Panel: typeof TabsPanel;
 };
+export {};

package/dist/types/components/text-field/text-field.d.ts

@@ -1,9 +1,10 @@
-import { type InputHTMLAttributes, type ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { SxProps } from '../../styling/sx';
 import { type FieldPartProps, type FieldSlotProps } from '../field/field-anatomy';
 export type TextFieldSize = 'sm' | 'md' | 'lg';
 export interface TextFieldPartProps extends FieldPartProps {
 }
-export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'size'>, SxProps {
     label?: ReactNode;
     description?: ReactNode;
     error?: ReactNode;
@@ -11,4 +12,7 @@ export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     onValueChange?: (value: string) => void;
     slotProps?: FieldSlotProps<TextFieldPartProps>;
 }
-export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function TextField({ ref, label, description, error, size, onChange, onValueChange, slotProps, className, sx, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace TextField {
+    var displayName: string;
+}

package/dist/types/components/textarea/textarea.d.ts

@@ -1,10 +1,11 @@
-import { type ReactNode, type TextareaHTMLAttributes } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { SxProps } from '../../styling/sx';
 import { type FieldPartProps, type FieldSlotProps } from '../field/field-anatomy';
 export type TextareaSize = 'sm' | 'md' | 'lg';
 export type TextareaResize = 'none' | 'vertical';
 export interface TextareaPartProps extends FieldPartProps {
 }
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends ComponentPropsWithRef<'textarea'>, SxProps {
     label?: ReactNode;
     description?: ReactNode;
     error?: ReactNode;
@@ -14,4 +15,7 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     onValueChange?: (value: string) => void;
     slotProps?: FieldSlotProps<TextareaPartProps>;
 }
-export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare function Textarea({ ref, label, description, error, size, resize, autoResize, rows, onChange, onValueChange, slotProps, className, sx, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TextareaProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace Textarea {
+    var displayName: string;
+}

package/dist/types/components/theme-provider/theme-provider.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import { type JfraderTheme } from '../../styling/theme';
+export interface ThemeProviderProps {
+    theme?: JfraderTheme;
+    children?: ReactNode;
+}
+export declare function ThemeProvider({ theme, children }: ThemeProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace ThemeProvider {
+    var displayName: string;
+}
+export declare function useTheme(): JfraderTheme;

package/dist/types/components/theme-root/theme-root.d.ts

@@ -1,7 +1,11 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type ThemeName = 'dark' | 'light';
-export interface ThemeRootProps extends HTMLAttributes<HTMLDivElement> {
+export interface ThemeRootProps extends ComponentPropsWithRef<'div'>, SxProps {
     theme?: ThemeName;
     children?: ReactNode;
 }
-export declare const ThemeRoot: import("react").ForwardRefExoticComponent<ThemeRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function ThemeRoot({ ref, theme, className, sx, ...rest }: ThemeRootProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace ThemeRoot {
+    var displayName: string;
+}

package/dist/types/components/toast/toast.d.ts

@@ -1,4 +1,5 @@
-import { type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type MouseEvent, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type ToastTone = 'neutral' | 'success' | 'danger';
 export interface ToastAction {
     label: string;
@@ -22,7 +23,7 @@ export interface ToastProviderProps {
     /** Accessible label for each toast's close button. */
     dismissLabel?: string;
 }
-export interface ToastViewportProps extends HTMLAttributes<HTMLDivElement> {
+export interface ToastViewportProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
 export interface ToastApi {
     toast: (options: ToastOptions) => string;
@@ -30,8 +31,10 @@ export interface ToastApi {
 }
 export declare function useToast(): ToastApi;
 declare function ToastProvider({ children, max, duration, dismissLabel, }: ToastProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const Toast: typeof ToastProvider & {
+declare function ToastViewport({ ref, className, sx, ...props }: ToastViewportProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ToastRoot(props: ToastProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Toast: typeof ToastRoot & {
     Provider: typeof ToastProvider;
-    Viewport: import("react").ForwardRefExoticComponent<ToastViewportProps & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: typeof ToastViewport;
 };
 export {};

package/dist/types/components/toggle-group/toggle-group.d.ts

@@ -1,7 +1,8 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import { type ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type ToggleGroupType = 'single' | 'multiple';
 export type ToggleGroupOrientation = 'horizontal' | 'vertical';
-interface ToggleGroupBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+interface ToggleGroupBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, SxProps {
     orientation?: ToggleGroupOrientation;
     disabled?: boolean;
     allowEmpty?: boolean;
@@ -20,10 +21,12 @@ export interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {
     onValueChange?: (value: string[]) => void;
 }
 export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
-export interface ToggleGroupItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+export interface ToggleGroupItemProps extends Omit<ComponentPropsWithRef<'button'>, 'value'>, SxProps {
     value: string;
 }
-export declare const ToggleGroup: import("react").ForwardRefExoticComponent<ToggleGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: import("react").ForwardRefExoticComponent<ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare function ToggleGroupRoot({ ref, type, value: valueProp, defaultValue, onValueChange, orientation, disabled, allowEmpty, label, 'aria-label': ariaLabelProp, onKeyDown, className, sx, ...rest }: ToggleGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ToggleGroupItem({ ref, value, disabled: disabledProp, onClick, onFocus, className, sx, ...rest }: ToggleGroupItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToggleGroup: typeof ToggleGroupRoot & {
+    Item: typeof ToggleGroupItem;
 };
 export {};

package/dist/types/components/tooltip/tooltip.d.ts

@@ -1,5 +1,6 @@
-import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type Placement } from '@floating-ui/react';
+import { type SxProps } from '../../styling/sx';
 export interface TooltipProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -11,13 +12,15 @@ export interface TooltipProps {
     closeDelay?: number;
     children?: ReactNode;
 }
-export interface TooltipTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface TooltipTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
 }
-export interface TooltipContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface TooltipContentProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
 declare function TooltipRoot({ open: openProp, defaultOpen, onOpenChange, placement, openDelay, closeDelay, children, }: TooltipProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ref, 'aria-describedby': ariaDescribedByProp, className, sx, ...rest }: TooltipTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ ref, style, className, sx, ...rest }: TooltipContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export declare const Tooltip: typeof TooltipRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: typeof TooltipTrigger;
+    Content: typeof TooltipContent;
 };
 export {};

package/dist/types/index.d.ts

@@ -30,7 +30,11 @@ export * from './components/switch';
 export * from './components/tabs';
 export * from './components/text-field';
 export * from './components/textarea';
+export { ThemeProvider, useTheme, type ThemeProviderProps } from './components/theme-provider/theme-provider';
 export * from './components/theme-root';
 export * from './components/toast';
 export * from './components/toggle-group';
 export * from './components/tooltip';
+export { styled } from './styling/styled';
+export type { SxProps } from './styling/sx';
+export { theme, type JfraderTheme } from './styling/theme';

package/dist/types/overlay/use-native-dialog.d.ts

@@ -1,4 +1,4 @@
-import { type ForwardedRef, type MouseEvent, type MouseEventHandler, type MutableRefObject, type ReactEventHandler, type SyntheticEvent } from 'react';
+import { type MouseEvent, type MouseEventHandler, type MutableRefObject, type ReactEventHandler, type Ref, type SyntheticEvent } from 'react';
 /** What Content needs from its Root; both Roots expose it through their context. */
 export interface NativeDialogController {
     open: boolean;
@@ -31,7 +31,7 @@ export declare function omitNativeOpen<P extends object>(props: P & {
  * Content half: syncs the native dialog to the logical `open`, and returns the `ref` and
  * event handlers to spread on the <dialog> (after the consumer's props).
  */
-export declare function useNativeDialog({ open, setOpen, requestClose, repairToken, setDialogElement }: NativeDialogController, { onCancel, onClick, onClose }: NativeDialogHandlers, forwardedRef: ForwardedRef<HTMLDialogElement>, contentRef?: MutableRefObject<HTMLDialogElement | null>): {
+export declare function useNativeDialog({ open, setOpen, requestClose, repairToken, setDialogElement }: NativeDialogController, { onCancel, onClick, onClose }: NativeDialogHandlers, forwardedRef: Ref<HTMLDialogElement> | undefined, contentRef?: MutableRefObject<HTMLDialogElement | null>): {
     ref: (element: HTMLDialogElement | null) => void;
     onCancel: (event: SyntheticEvent<HTMLDialogElement>) => void;
     onClick: (event: MouseEvent<HTMLDialogElement>) => void;

package/dist/types/styling/css.d.ts

@@ -1,2 +1,3 @@
-export { css, keyframes } from '@emotion/react';
-export type { Interpolation, SerializedStyles, Theme } from '@emotion/react';
+export { ClassNames, css, keyframes, ThemeProvider as EmotionThemeProvider, useTheme as useEmotionTheme, } from '@emotion/react';
+export type { ClassNamesContent, Interpolation, SerializedStyles, Theme } from '@emotion/react';
+export type { JfraderTheme } from './theme';

package/dist/types/styling/styled.d.ts

@@ -0,0 +1 @@
+export { default as styled } from '@emotion/styled';

package/dist/types/styling/sx.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import { type Interpolation, type Theme } from './css';
+export interface SxProps {
+    /** Consumer style overrides, identical to `css` and applied after it (`sx` is the MUI-style spelling). */
+    sx?: Interpolation<Theme>;
+}
+interface ClassNameProps {
+    className?: string;
+    children: (className: string | undefined) => ReactNode;
+}
+interface WithSxProps extends SxProps, ClassNameProps {
+    /** The part's own styles, merged first. */
+    styles?: Interpolation<Theme>;
+}
+export declare function WithSx({ className, styles, sx, children }: WithSxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/styling/theme.d.ts

@@ -0,0 +1,98 @@
+export declare const theme: {
+    readonly color: {
+        readonly bg: "var(--ui-color-bg)";
+        readonly bgSoft: "var(--ui-color-bg-soft)";
+        readonly surface: "var(--ui-color-surface)";
+        readonly surfaceRaised: "var(--ui-color-surface-raised)";
+        readonly surfaceHover: "var(--ui-color-surface-hover)";
+        readonly surfaceInset: "var(--ui-color-surface-inset)";
+        readonly border: "var(--ui-color-border)";
+        readonly borderSubtle: "var(--ui-color-border-subtle)";
+        readonly borderStrong: "var(--ui-color-border-strong)";
+        readonly borderControl: "var(--ui-color-border-control)";
+        readonly text: "var(--ui-color-text)";
+        readonly textMuted: "var(--ui-color-text-muted)";
+        readonly textSubtle: "var(--ui-color-text-subtle)";
+        readonly accent: "var(--ui-color-accent)";
+        readonly accentHover: "var(--ui-color-accent-hover)";
+        readonly accentContrast: "var(--ui-color-accent-contrast)";
+        readonly accentText: "var(--ui-color-accent-text)";
+        readonly accentSoft: "var(--ui-color-accent-soft)";
+        readonly accentSoftHover: "var(--ui-color-accent-soft-hover)";
+        readonly accentBorder: "var(--ui-color-accent-border)";
+        readonly danger: "var(--ui-color-danger)";
+        readonly dangerHover: "var(--ui-color-danger-hover)";
+        readonly dangerContrast: "var(--ui-color-danger-contrast)";
+        readonly dangerText: "var(--ui-color-danger-text)";
+        readonly dangerSoft: "var(--ui-color-danger-soft)";
+        readonly dangerSoftHover: "var(--ui-color-danger-soft-hover)";
+        readonly dangerBorder: "var(--ui-color-danger-border)";
+        readonly warning: "var(--ui-color-warning)";
+        readonly warningSoft: "var(--ui-color-warning-soft)";
+        readonly success: "var(--ui-color-success)";
+        readonly successSoft: "var(--ui-color-success-soft)";
+        readonly info: "var(--ui-color-info)";
+        readonly infoSoft: "var(--ui-color-info-soft)";
+        readonly focusRing: "var(--ui-color-focus-ring)";
+        readonly scrim: "var(--ui-color-scrim)";
+    };
+    readonly shadow: {
+        readonly raised: "var(--ui-shadow-raised)";
+        readonly overlay: "var(--ui-shadow-overlay)";
+        readonly floating: "var(--ui-shadow-floating)";
+    };
+    readonly radius: {
+        readonly sm: "var(--ui-radius-sm)";
+        readonly md: "var(--ui-radius-md)";
+        readonly lg: "var(--ui-radius-lg)";
+        readonly xl: "var(--ui-radius-xl)";
+        readonly full: "var(--ui-radius-full)";
+    };
+    readonly space: {
+        readonly "1": "var(--ui-space-1)";
+        readonly "2": "var(--ui-space-2)";
+        readonly "3": "var(--ui-space-3)";
+        readonly "4": "var(--ui-space-4)";
+        readonly "5": "var(--ui-space-5)";
+        readonly "6": "var(--ui-space-6)";
+        readonly "8": "var(--ui-space-8)";
+        readonly "10": "var(--ui-space-10)";
+        readonly "12": "var(--ui-space-12)";
+    };
+    readonly textSize: {
+        readonly xs: "var(--ui-text-size-xs)";
+        readonly sm: "var(--ui-text-size-sm)";
+        readonly md: "var(--ui-text-size-md)";
+        readonly lg: "var(--ui-text-size-lg)";
+        readonly xl: "var(--ui-text-size-xl)";
+        readonly "2xl": "var(--ui-text-size-2xl)";
+        readonly "3xl": "var(--ui-text-size-3xl)";
+    };
+    readonly lineHeight: {
+        readonly tight: "var(--ui-line-height-tight)";
+        readonly base: "var(--ui-line-height-base)";
+        readonly relaxed: "var(--ui-line-height-relaxed)";
+    };
+    readonly fontWeight: {
+        readonly regular: "var(--ui-font-weight-regular)";
+        readonly medium: "var(--ui-font-weight-medium)";
+        readonly semibold: "var(--ui-font-weight-semibold)";
+    };
+    readonly font: {
+        readonly sans: "var(--ui-font-sans)";
+        readonly mono: "var(--ui-font-mono)";
+    };
+    readonly motion: {
+        readonly duration: {
+            readonly fast: "var(--ui-motion-duration-fast)";
+            readonly base: "var(--ui-motion-duration-base)";
+            readonly slow: "var(--ui-motion-duration-slow)";
+        };
+        readonly easeStandard: "var(--ui-motion-ease-standard)";
+    };
+};
+export type JfraderTheme = typeof theme;
+declare module '@emotion/react' {
+    interface Theme extends JfraderTheme {
+    }
+}

package/dist/{visually-hidden-DCWhf0Cb.js → visually-hidden-BJdvqqvn.js}

@@ -1,5 +1,5 @@
 'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
+import { r as e } from "./sx-Dx9JUKp5.js";
 //#region src/styling/visually-hidden.ts
 var t = e({
 	position: "absolute",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/ui",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "React components styled with Emotion and themed through CSS custom properties.",
   "keywords": [
     "react",
@@ -176,12 +176,13 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@floating-ui/react": "^0.27.20",
-    "@jfrader/tokens": "0.1.2"
+    "@jfrader/tokens": "0.3.0"
   },
   "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@storybook/react-vite": "^10.6.1",