@jfrader/ui 0.2.0 → 0.4.0

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

@@ -1,9 +1,10 @@
 import type { ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type PillTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
-export interface PillProps extends ComponentPropsWithRef<'span'> {
+export interface PillProps extends ComponentPropsWithRef<'span'>, SxProps {
     tone?: PillTone;
 }
-export declare function Pill({ ref, tone, ...rest }: PillProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Pill({ ref, tone, className, sx, ...rest }: PillProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Pill {
     var displayName: string;
 }

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

@@ -1,5 +1,6 @@
 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,13 @@ export interface PopoverProps {
     placement?: Placement;
     children?: ReactNode;
 }
-export interface PopoverTriggerProps extends ComponentPropsWithRef<'button'> {
+export interface PopoverTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
 }
-export interface PopoverContentProps extends ComponentPropsWithRef<'div'> {
+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, ...props }: PopoverTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function PopoverContent({ ref, style, ...rest }: PopoverContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+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: typeof PopoverTrigger;
     Content: typeof PopoverContent;

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

@@ -1,10 +1,11 @@
 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<ComponentPropsWithRef<'div'>, '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,7 +17,7 @@ export interface ProgressProps extends Omit<ComponentPropsWithRef<'div'>, 'child
         indicator?: ProgressPartProps;
     };
 }
-export declare function Progress({ ref, value, max, label, getValueLabel, slotProps, 'aria-labelledby': ariaLabelledByProp, ...rest }: ProgressProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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 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<ComponentPropsWithRef<'div'>, '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<ComponentPropsWithRef<'input'>, '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,8 +25,8 @@ export interface RadioGroupRadioProps extends Omit<ComponentPropsWithRef<'input'
         description?: RadioGroupRadioPartProps;
     };
 }
-declare function RadioGroupRoot({ ref, value: valueProp, defaultValue, onValueChange, name: nameProp, disabled, orientation, ...rest }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function RadioGroupRadio({ ref, value, label, description, disabled: disabledProp, onChange, slotProps, className, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: RadioGroupRadioProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;
 };

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

@@ -1,5 +1,6 @@
 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,25 @@ export interface SelectProps {
     name?: string;
     children?: ReactNode;
 }
-export interface SelectTriggerProps extends ComponentPropsWithRef<'button'> {
+export interface SelectTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
     id?: string;
 }
-export interface SelectValueProps extends ComponentPropsWithRef<'span'> {
+export interface SelectValueProps extends ComponentPropsWithRef<'span'>, SxProps {
     /** Shown when no option matches the selected value. */
     placeholder?: ReactNode;
 }
-export interface SelectContentProps extends ComponentPropsWithRef<'div'> {
+export interface SelectContentProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
-export interface SelectItemProps extends ComponentPropsWithRef<'div'> {
+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, ...rest }: SelectTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function SelectValue({ ref, placeholder, ...rest }: SelectValueProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function SelectContent({ ref, style, onMouseDown, children, ...rest }: SelectContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function SelectItem({ ref, value, disabled, onClick, children, ...rest }: SelectItemProps): 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: typeof SelectTrigger;
     Value: typeof SelectValue;

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

@@ -1,13 +1,14 @@
 import type { ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 type Length = number | string;
-export interface SkeletonProps extends Omit<ComponentPropsWithRef<'div'>, '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 function Skeleton({ ref, width, height, circle, radius, style, ...rest }: SkeletonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;
 }

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

@@ -1,11 +1,12 @@
 import type { ComponentPropsWithRef } from 'react';
+import { type SxProps } from '../../styling/sx';
 export type SpinnerSize = 'sm' | 'md' | 'lg';
-export interface SpinnerProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+export interface SpinnerProps extends Omit<ComponentPropsWithRef<'span'>, 'children'>, SxProps {
     size?: SpinnerSize;
     /** Accessible text announced for the status region. */
     label?: string;
 }
-export declare function Spinner({ ref, size, label, ...rest }: SpinnerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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,7 +4,7 @@ export type StackAlign = Exclude<FlexAlign, 'baseline'>;
 export interface StackProps extends Omit<FlexProps, 'direction' | 'inline' | 'align'> {
     align?: StackAlign;
 }
-export declare function Stack({ ref, gap, align, justify, wrap, ...rest }: StackProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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 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<ComponentPropsWithRef<'input'>, 'size' | 'type'> {
+export interface SwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'type'>, SxProps {
     label?: ReactNode;
     description?: ReactNode;
     size?: SwitchSize;
@@ -17,7 +18,7 @@ export interface SwitchProps extends Omit<ComponentPropsWithRef<'input'>, 'size'
         description?: SwitchPartProps;
     };
 }
-export declare function Switch({ ref, label, description, size, onChange, onCheckedChange, slotProps, className, dir, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...rest }: SwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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,24 +1,25 @@
 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<ComponentPropsWithRef<'div'>, '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 = ComponentPropsWithRef<'div'>;
-export interface TabsTabProps extends ComponentPropsWithRef<'button'> {
+export type TabsListProps = ComponentPropsWithRef<'div'> & SxProps;
+export interface TabsTabProps extends ComponentPropsWithRef<'button'>, SxProps {
     value: string;
 }
-export interface TabsPanelProps extends ComponentPropsWithRef<'div'> {
+export interface TabsPanelProps extends ComponentPropsWithRef<'div'>, SxProps {
     value: string;
 }
-declare function TabsRoot({ ref, value: valueProp, defaultValue, onValueChange, orientation, activation, ...rest }: TabsProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function TabsList({ ref, onKeyDown, ...rest }: TabsListProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function TabsTab({ ref, value, disabled, onClick, onFocus, ...rest }: TabsTabProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function TabsPanel({ ref, value, tabIndex, 'aria-labelledby': ariaLabelledByProp, ...rest }: TabsPanelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;

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

@@ -1,9 +1,10 @@
 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<ComponentPropsWithRef<'input'>, 'size'> {
+export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'size'>, SxProps {
     label?: ReactNode;
     description?: ReactNode;
     error?: ReactNode;
@@ -11,7 +12,7 @@ export interface TextFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'si
     onValueChange?: (value: string) => void;
     slotProps?: FieldSlotProps<TextFieldPartProps>;
 }
-export declare function TextField({ ref, label, description, error, size, onChange, onValueChange, slotProps, className, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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 { 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 ComponentPropsWithRef<'textarea'> {
+export interface TextareaProps extends ComponentPropsWithRef<'textarea'>, SxProps {
     label?: ReactNode;
     description?: ReactNode;
     error?: ReactNode;
@@ -14,7 +15,7 @@ export interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
     onValueChange?: (value: string) => void;
     slotProps?: FieldSlotProps<TextareaPartProps>;
 }
-export declare function Textarea({ ref, label, description, error, size, resize, autoResize, rows, onChange, onValueChange, slotProps, className, required, id: idProp, 'aria-describedby': ariaDescribedByProp, 'aria-invalid': ariaInvalidProp, ...rest }: TextareaProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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,10 +1,17 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-export type ThemeName = 'dark' | 'light';
-export interface ThemeRootProps extends ComponentPropsWithRef<'div'> {
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
+import { type ThemeName } from '../../styling/theme-scope';
+export type { ThemeName };
+export interface ThemeRootProps extends ComponentPropsWithRef<'div'>, SxProps {
     theme?: ThemeName;
+    /**
+     * Where overlays inside this root portal to. Omitted: the enclosing ThemeRoot's container, else
+     * the default (`body`). `null`: overlays wait until the host element is set.
+     */
+    portalContainer?: HTMLElement | null;
     children?: ReactNode;
 }
-export declare function ThemeRoot({ ref, theme, ...rest }: ThemeRootProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ThemeRoot({ ref, theme, portalContainer, 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 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 ComponentPropsWithRef<'div'> {
+export interface ToastViewportProps extends ComponentPropsWithRef<'div'>, SxProps {
 }
 export interface ToastApi {
     toast: (options: ToastOptions) => string;
@@ -30,7 +31,7 @@ export interface ToastApi {
 }
 export declare function useToast(): ToastApi;
 declare function ToastProvider({ children, max, duration, dismissLabel, }: ToastProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function ToastViewport({ ref, ...props }: ToastViewportProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;

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

@@ -1,7 +1,8 @@
 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<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'> {
+interface ToggleGroupBaseProps extends Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>, SxProps {
     orientation?: ToggleGroupOrientation;
     disabled?: boolean;
     allowEmpty?: boolean;
@@ -20,11 +21,11 @@ export interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {
     onValueChange?: (value: string[]) => void;
 }
 export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
-export interface ToggleGroupItemProps extends Omit<ComponentPropsWithRef<'button'>, 'value'> {
+export interface ToggleGroupItemProps extends Omit<ComponentPropsWithRef<'button'>, 'value'>, SxProps {
     value: string;
 }
-declare function ToggleGroupRoot({ ref, type, value: valueProp, defaultValue, onValueChange, orientation, disabled, allowEmpty, label, 'aria-label': ariaLabelProp, onKeyDown, ...rest }: ToggleGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function ToggleGroupItem({ ref, value, disabled: disabledProp, onClick, onFocus, ...rest }: ToggleGroupItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+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;
 };

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

@@ -1,5 +1,6 @@
 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,13 @@ export interface TooltipProps {
     closeDelay?: number;
     children?: ReactNode;
 }
-export interface TooltipTriggerProps extends ComponentPropsWithRef<'button'> {
+export interface TooltipTriggerProps extends ComponentPropsWithRef<'button'>, SxProps {
 }
-export interface TooltipContentProps extends ComponentPropsWithRef<'div'> {
+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, ...rest }: TooltipTriggerProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare function TooltipContent({ ref, style, ...rest }: TooltipContentProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+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: typeof TooltipTrigger;
     Content: typeof TooltipContent;

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/overlay-portal.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export declare function OverlayPortal({ children }: {
+    children?: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace OverlayPortal {
+    var displayName: string;
+}

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-scope.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type ThemeName = 'dark' | 'light';
+export interface ThemeScope {
+    theme: ThemeName;
+    /** `undefined` keeps default portal routing; `null` holds portals until the host exists. */
+    portalContainer: HTMLElement | null | undefined;
+}
+export declare const ThemeScopeContext: import("react").Context<ThemeScope | null>;
+/** The nearest ThemeRoot's scope, or `null` outside any ThemeRoot (page theme applies). */
+export declare function useThemeScope(): ThemeScope | null;
+/** What a `data-theme` scope root sets besides the attribute: inherited text color and color-scheme. */
+export declare const themeScopeStyle: import("@emotion/react").SerializedStyles;
+/** Re-applies the nearest ThemeRoot's theme around portaled content; renders children bare outside one. */
+export declare function ThemeBoundary({ children }: {
+    children?: ReactNode;
+}): string | number | bigint | boolean | import("@emotion/react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export declare namespace ThemeBoundary {
+    var displayName: string;
+}

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/use-overlay-floating-Bit-f0FU.js

@@ -0,0 +1,31 @@
+'use client';
+import { i as e, t } from "./theme-scope-t7nAKc2c.js";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import { FloatingPortal as r, autoUpdate as i, flip as a, offset as o, shift as s, useFloating as c } from "@floating-ui/react";
+//#region src/overlay/overlay-portal.tsx
+function l({ children: i }) {
+	let a = e();
+	return /* @__PURE__ */ n(r, {
+		root: a?.portalContainer,
+		children: /* @__PURE__ */ n(t, { children: i })
+	});
+}
+l.displayName = "OverlayPortal";
+//#endregion
+//#region src/overlay/use-overlay-floating.ts
+var u = 8, d = 8;
+function f({ open: e, onOpenChange: t, placement: n }) {
+	return c({
+		open: e,
+		onOpenChange: t,
+		placement: n,
+		middleware: [
+			o(u),
+			a({ padding: d }),
+			s({ padding: d })
+		],
+		whileElementsMounted: i
+	});
+}
+//#endregion
+export { l as n, f as t };

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.2.0",
+  "version": "0.4.0",
   "description": "React components styled with Emotion and themed through CSS custom properties.",
   "keywords": [
     "react",
@@ -176,8 +176,9 @@
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@floating-ui/react": "^0.27.20",
-    "@jfrader/tokens": "0.2.0"
+    "@jfrader/tokens": "0.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",