solid-baseui 0.1.0-alpha.0

package/dist/lib/types/slider/control/SliderControl.d.ts

@@ -0,0 +1,18 @@
+import { type JSX, type ValidComponent } from '@solidjs/web';
+import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { SliderRootState } from '../root/SliderRoot.js';
+export interface SliderControlState extends SliderRootState {
+}
+interface SliderControlOwnProps {
+    onPointerDown?: BaseUIEventHandlerUnion<HTMLElement, PointerEvent> | undefined;
+    onTouchStart?: BaseUIEventHandlerUnion<HTMLElement, TouchEvent> | undefined;
+}
+export type SliderControlProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, SliderControlState, SliderControlOwnProps>;
+/** The clickable, interactive area of the slider. */
+export declare function SliderControl<Component extends ValidComponent = 'div'>(props: SliderControl.Props<Component>): JSX.Element;
+export declare namespace SliderControl {
+    type State = SliderControlState;
+    type Props<Component extends ValidComponent = 'div'> = SliderControlProps<Component>;
+}
+export {};

package/dist/lib/types/slider/index.d.ts

@@ -0,0 +1,8 @@
+export * as Slider from './index.parts.js';
+export type * from './root/SliderRoot.js';
+export type * from './label/SliderLabel.js';
+export type * from './value/SliderValue.js';
+export type * from './control/SliderControl.js';
+export type * from './track/SliderTrack.js';
+export type * from './thumb/SliderThumb.js';
+export type * from './indicator/SliderIndicator.js';

package/dist/lib/types/slider/index.parts.d.ts

@@ -0,0 +1,7 @@
+export { SliderRoot as Root } from './root/SliderRoot.js';
+export { SliderLabel as Label } from './label/SliderLabel.js';
+export { SliderValue as Value } from './value/SliderValue.js';
+export { SliderControl as Control } from './control/SliderControl.js';
+export { SliderTrack as Track } from './track/SliderTrack.js';
+export { SliderThumb as Thumb } from './thumb/SliderThumb.js';
+export { SliderIndicator as Indicator } from './indicator/SliderIndicator.js';

package/dist/lib/types/slider/indicator/SliderIndicator.d.ts

@@ -0,0 +1,12 @@
+import { type JSX, type ValidComponent } from '@solidjs/web';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { SliderRootState } from '../root/SliderRoot.js';
+export interface SliderIndicatorState extends SliderRootState {
+}
+export type SliderIndicatorProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, SliderIndicatorState>;
+/** Visualizes the selected portion of the slider track. */
+export declare function SliderIndicator<Component extends ValidComponent = 'div'>(props: SliderIndicator.Props<Component>): JSX.Element;
+export declare namespace SliderIndicator {
+    type State = SliderIndicatorState;
+    type Props<Component extends ValidComponent = 'div'> = SliderIndicatorProps<Component>;
+}

package/dist/lib/types/slider/label/SliderLabel.d.ts

@@ -0,0 +1,17 @@
+import { type JSX, type ValidComponent } from '@solidjs/web';
+import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { SliderRootState } from '../root/SliderRoot.js';
+export type SliderLabelState = SliderRootState;
+interface SliderLabelOwnProps {
+    onClick?: BaseUIEventHandlerUnion<HTMLElement, MouseEvent> | undefined;
+    onPointerDown?: BaseUIEventHandlerUnion<HTMLElement, PointerEvent> | undefined;
+}
+export type SliderLabelProps<Component extends ValidComponent = 'div'> = Omit<BaseUIComponentProps<Component, SliderLabelState, SliderLabelOwnProps>, 'id'>;
+/** An accessible label automatically associated with the slider thumbs. */
+export declare function SliderLabel<Component extends ValidComponent = 'div'>(props: SliderLabel.Props<Component>): JSX.Element;
+export declare namespace SliderLabel {
+    type State = SliderLabelState;
+    type Props<Component extends ValidComponent = 'div'> = SliderLabelProps<Component>;
+}
+export {};

package/dist/lib/types/slider/root/SliderRoot.d.ts

@@ -0,0 +1,57 @@
+import { type ValidComponent } from '@solidjs/web';
+import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from '../../internals/createBaseUIEventDetails.js';
+import type { FieldState } from '../../internals/field-constants.js';
+import { REASONS } from '../../internals/reasons.js';
+import type { Orientation } from '../../internals/types.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { SliderThumbCollisionBehavior } from '../utils/resolveThumbCollision.js';
+export interface SliderRootState extends FieldState {
+    activeThumbIndex: number;
+    disabled: boolean;
+    dragging: boolean;
+    max: number;
+    min: number;
+    minStepsBetweenValues: number;
+    orientation: Orientation;
+    step: number;
+    values: readonly number[];
+}
+interface SliderRootOwnProps<Value extends number | readonly number[]> {
+    defaultValue?: Value | undefined;
+    disabled?: boolean | undefined;
+    format?: Intl.NumberFormatOptions | undefined;
+    form?: string | undefined;
+    id?: string | undefined;
+    largeStep?: number | undefined;
+    locale?: Intl.LocalesArgument | undefined;
+    max?: number | undefined;
+    min?: number | undefined;
+    minStepsBetweenValues?: number | undefined;
+    name?: string | undefined;
+    onValueChange?: ((value: Value extends number ? number : Value, eventDetails: SliderRootChangeEventDetails) => void) | undefined;
+    onValueCommitted?: ((value: Value extends number ? number : Value, eventDetails: SliderRootCommitEventDetails) => void) | undefined;
+    orientation?: Orientation | undefined;
+    step?: number | undefined;
+    thumbAlignment?: 'center' | 'edge' | 'edge-client-only' | undefined;
+    thumbCollisionBehavior?: SliderThumbCollisionBehavior | undefined;
+    value?: Value | undefined;
+}
+export type SliderRootProps<Value extends number | readonly number[] = number | readonly number[], Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, SliderRootState, SliderRootOwnProps<Value>>;
+/** Groups all parts of the slider. */
+export declare function SliderRoot<Value extends number | readonly number[] = number | readonly number[], Component extends ValidComponent = 'div'>(props: SliderRoot.Props<Value, Component>): import("@solidjs/web").JSX.Element;
+export interface SliderRootChangeEventCustomProperties {
+    activeThumbIndex: number;
+}
+export type SliderRootChangeEventReason = typeof REASONS.inputChange | typeof REASONS.trackPress | typeof REASONS.drag | typeof REASONS.keyboard | typeof REASONS.none;
+export type SliderRootChangeEventDetails = BaseUIChangeEventDetails<SliderRootChangeEventReason, SliderRootChangeEventCustomProperties>;
+export type SliderRootCommitEventReason = SliderRootChangeEventReason;
+export type SliderRootCommitEventDetails = BaseUIGenericEventDetails<SliderRootCommitEventReason>;
+export declare namespace SliderRoot {
+    type State = SliderRootState;
+    type Props<Value extends number | readonly number[] = number | readonly number[], Component extends ValidComponent = 'div'> = SliderRootProps<Value, Component>;
+    type ChangeEventReason = SliderRootChangeEventReason;
+    type ChangeEventDetails = SliderRootChangeEventDetails;
+    type CommitEventReason = SliderRootCommitEventReason;
+    type CommitEventDetails = SliderRootCommitEventDetails;
+}
+export {};

package/dist/lib/types/slider/root/SliderRootContext.d.ts

@@ -0,0 +1,63 @@
+import { type Accessor } from 'solid-js';
+import type { Orientation } from '../../internals/types.js';
+import type { SliderThumbCollisionBehavior } from '../utils/resolveThumbCollision.js';
+import type { SliderRootChangeEventDetails, SliderRootChangeEventReason, SliderRootCommitEventDetails, SliderRootState } from './SliderRoot.js';
+export interface SliderThumbRegistration {
+    token: symbol;
+    order: number;
+    element: Accessor<HTMLElement | undefined>;
+    input: Accessor<HTMLInputElement | undefined>;
+    inputId: Accessor<string>;
+    index: Accessor<number>;
+}
+export interface SliderInteractionState {
+    pressedThumbCenterOffset: number | null;
+    pressedThumbIndex: number;
+    pressedValues: readonly number[] | null;
+    lastChangeReason: SliderRootChangeEventReason;
+}
+export interface SliderRootContextValue {
+    active: Accessor<number>;
+    controlElement: Accessor<HTMLElement | undefined>;
+    disabled: Accessor<boolean>;
+    dragging: Accessor<boolean>;
+    fieldControlSource: symbol;
+    format: Accessor<Intl.NumberFormatOptions | undefined>;
+    form: Accessor<string | undefined>;
+    handleInputChange: (value: number, index: number, event: KeyboardEvent | Event) => void;
+    indicatorPosition: Accessor<readonly [number | undefined, number | undefined]>;
+    inset: Accessor<boolean>;
+    interaction: SliderInteractionState;
+    labelId: Accessor<string | undefined>;
+    largeStep: Accessor<number>;
+    lastUsedThumbIndex: Accessor<number>;
+    locale: Accessor<Intl.LocalesArgument | undefined>;
+    max: Accessor<number>;
+    min: Accessor<number>;
+    minStepsBetweenValues: Accessor<number>;
+    name: Accessor<string | undefined>;
+    onValueCommitted: (value: number | readonly number[], details: SliderRootCommitEventDetails) => void;
+    orientation: Accessor<Orientation>;
+    orderedThumbs: Accessor<readonly SliderThumbRegistration[]>;
+    range: Accessor<boolean>;
+    registerThumb: (registration: SliderThumbRegistration) => () => void;
+    renderBeforeHydration: Accessor<boolean>;
+    rootId: Accessor<string>;
+    rootLabelId: Accessor<string>;
+    setActive: (index: number) => void;
+    setControlElement: (element: HTMLElement | undefined) => void;
+    setDragging: (dragging: boolean) => void;
+    setIndicatorPosition: (index: 0 | 1, value: number | undefined) => void;
+    setLocalLabelId: (id: string | undefined) => void;
+    setValue: (value: number | number[], details: SliderRootChangeEventDetails) => boolean;
+    singleInputId: string;
+    state: Accessor<SliderRootState>;
+    step: Accessor<number>;
+    syncInputs: () => void;
+    thumbCollisionBehavior: Accessor<SliderThumbCollisionBehavior>;
+    values: Accessor<readonly number[]>;
+}
+declare const MISSING_CONTEXT: unique symbol;
+export declare const SliderRootContext: import("solid-js").Context<SliderRootContextValue | typeof MISSING_CONTEXT>;
+export declare function useSliderRootContext(): SliderRootContextValue;
+export {};

package/dist/lib/types/slider/stateAttributesMapping.d.ts

@@ -0,0 +1,14 @@
+export declare const sliderStateAttributesMapping: {
+    disabled?: ((state: boolean) => Record<string, string> | null) | undefined;
+    touched?: ((state: boolean) => Record<string, string> | null) | undefined;
+    dirty?: ((state: boolean) => Record<string, string> | null) | undefined;
+    valid?: ((state: boolean | null) => Record<string, string> | null) | undefined;
+    filled?: ((state: boolean) => Record<string, string> | null) | undefined;
+    focused?: ((state: boolean) => Record<string, string> | null) | undefined;
+    activeThumbIndex: () => null;
+    max: () => null;
+    min: () => null;
+    minStepsBetweenValues: () => null;
+    step: () => null;
+    values: () => null;
+};

package/dist/lib/types/slider/thumb/SliderThumb.d.ts

@@ -0,0 +1,31 @@
+import { type Ref } from 'solid-js';
+import { type JSX, type ValidComponent } from '@solidjs/web';
+import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { SliderRootState } from '../root/SliderRoot.js';
+export interface SliderThumbState extends SliderRootState {
+}
+interface SliderThumbOwnProps {
+    'aria-describedby'?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-valuetext'?: string | undefined;
+    disabled?: boolean | undefined;
+    getAriaLabel?: ((index: number) => string) | null | undefined;
+    getAriaValueText?: ((formattedValue: string, value: number, index: number) => string) | null | undefined;
+    id?: string | undefined;
+    index?: number | undefined;
+    inputRef?: Ref<HTMLInputElement>;
+    onBlur?: BaseUIEventHandlerUnion<HTMLInputElement, FocusEvent> | undefined;
+    onFocus?: BaseUIEventHandlerUnion<HTMLInputElement, FocusEvent> | undefined;
+    onKeyDown?: BaseUIEventHandlerUnion<HTMLInputElement, KeyboardEvent> | undefined;
+    tabIndex?: number | undefined;
+}
+export type SliderThumbProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, SliderThumbState, SliderThumbOwnProps>;
+/** The draggable thumb and its nested native range input. */
+export declare function SliderThumb<Component extends ValidComponent = 'div'>(props: SliderThumb.Props<Component>): JSX.Element;
+export declare namespace SliderThumb {
+    type State = SliderThumbState;
+    type Props<Component extends ValidComponent = 'div'> = SliderThumbProps<Component>;
+}
+export {};

package/dist/lib/types/slider/thumb/SliderThumbDataAttributes.d.ts

@@ -0,0 +1,11 @@
+export declare enum SliderThumbDataAttributes {
+    index = "data-index",
+    dragging = "data-dragging",
+    orientation = "data-orientation",
+    disabled = "data-disabled",
+    valid = "data-valid",
+    invalid = "data-invalid",
+    touched = "data-touched",
+    dirty = "data-dirty",
+    focused = "data-focused"
+}

package/dist/lib/types/slider/thumb/prehydrationScript.d.ts

@@ -0,0 +1 @@
+export declare const sliderPrehydrationScript = "(function(){const t=document.currentScript&&document.currentScript.parentElement;if(!t)return;const c=t.closest('[data-base-ui-slider-control]');if(!c)return;const i=c.querySelector('[data-base-ui-slider-indicator]'),r=c.getBoundingClientRect(),v=c.getAttribute('data-orientation')==='vertical',s=v?'height':'width',n=c.querySelectorAll('input[type=\"range\"]'),g=n.length>1,l=n.length-1;let a=null;for(let e=0;e<n.length;e++){const o=n[e],d=parseFloat(o.getAttribute('value')||'');if(Number.isNaN(d))return;const p=o.parentElement;if(!p)return;const m=parseFloat(o.getAttribute('max')||'100'),u=parseFloat(o.getAttribute('min')||'0'),h=p.getBoundingClientRect(),f=r[s]-h[s],x=h[s]/2+f*((d-u)*100/(m-u))/100,y=x/r[s]*100;p.style.setProperty('--position',y+'%');if(Number.isFinite(y)){p.style.removeProperty('visibility');if(i){if(e===0){a=y;i.style.setProperty('--start-position',y+'%');if(!g)i.style.removeProperty('visibility')}else if(e===l){i.style.setProperty('--end-position',y+'%');i.style.setProperty('--relative-size',y-(a||0)+'%');i.style.removeProperty('visibility')}}}}})();";

package/dist/lib/types/slider/track/SliderTrack.d.ts

@@ -0,0 +1,12 @@
+import { type JSX, type ValidComponent } from '@solidjs/web';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { SliderRootState } from '../root/SliderRoot.js';
+export interface SliderTrackState extends SliderRootState {
+}
+export type SliderTrackProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, SliderTrackState>;
+/** Represents the full range of the slider. */
+export declare function SliderTrack<Component extends ValidComponent = 'div'>(props: SliderTrack.Props<Component>): JSX.Element;
+export declare namespace SliderTrack {
+    type State = SliderTrackState;
+    type Props<Component extends ValidComponent = 'div'> = SliderTrackProps<Component>;
+}

package/dist/lib/types/slider/utils/dom.d.ts

@@ -0,0 +1,4 @@
+export declare function getMidpoint(element: HTMLElement, vertical: boolean): number;
+export declare function getEventElement(event: Event): Element | null;
+export declare function getDeepActiveElement(document: Document): Element | null;
+export declare function contains(container: Node | null | undefined, target: EventTarget | null): boolean;

package/dist/lib/types/slider/utils/getPushedThumbValues.d.ts

@@ -0,0 +1 @@
+export declare function getPushedThumbValues(values: readonly number[], index: number, nextValue: number, min: number, max: number, step: number, minStepsBetweenValues: number, initialValues?: readonly number[] | undefined): number[];

package/dist/lib/types/slider/utils/getSliderValue.d.ts

@@ -0,0 +1 @@
+export declare function getSliderValue(valueInput: number, index: number, min: number, max: number, range: boolean, values: readonly number[]): number | number[];

package/dist/lib/types/slider/utils/math.d.ts

@@ -0,0 +1,4 @@
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function areValuesEqual(first: number | readonly number[], second: number | readonly number[]): boolean;
+export declare function valueToPercent(value: number, min: number, max: number): number;
+export declare function formatNumber(value: number, locale: Intl.LocalesArgument | undefined, options: Intl.NumberFormatOptions | undefined): string;

package/dist/lib/types/slider/utils/resolveThumbCollision.d.ts

@@ -0,0 +1,7 @@
+export type SliderThumbCollisionBehavior = 'push' | 'swap' | 'none';
+export interface ResolveThumbCollisionResult {
+    value: number | number[];
+    thumbIndex: number;
+    didSwap: boolean;
+}
+export declare function resolveThumbCollision(behavior: SliderThumbCollisionBehavior, values: readonly number[], currentValues: readonly number[] | null | undefined, initialValues: readonly number[] | null | undefined, pressedIndex: number, nextValue: number, min: number, max: number, step: number, minStepsBetweenValues: number): ResolveThumbCollisionResult;

package/dist/lib/types/slider/utils/roundValueToStep.d.ts

@@ -0,0 +1,2 @@
+export declare function getDecimalPrecision(value: number): number;
+export declare function roundValueToStep(value: number, step: number, min: number): number;

package/dist/lib/types/slider/utils/validateMinimumDistance.d.ts

@@ -0,0 +1 @@
+export declare function validateMinimumDistance(values: number | readonly number[], step: number, minStepsBetweenValues: number): boolean;

package/dist/lib/types/slider/value/SliderValue.d.ts

@@ -0,0 +1,16 @@
+import { type JSX, type ValidComponent } from '@solidjs/web';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { SliderRootState } from '../root/SliderRoot.js';
+export interface SliderValueState extends SliderRootState {
+}
+interface SliderValueOwnProps {
+    children?: null | ((formattedValues: readonly string[], values: readonly number[]) => JSX.Element) | undefined;
+}
+export type SliderValueProps<Component extends ValidComponent = 'output'> = BaseUIComponentProps<Component, SliderValueState, SliderValueOwnProps>;
+/** Displays the formatted slider value. */
+export declare function SliderValue<Component extends ValidComponent = 'output'>(props: SliderValue.Props<Component>): JSX.Element;
+export declare namespace SliderValue {
+    type State = SliderValueState;
+    type Props<Component extends ValidComponent = 'output'> = SliderValueProps<Component>;
+}
+export {};

package/dist/lib/types/switch/index.d.ts

@@ -0,0 +1,3 @@
+export * as Switch from './index.parts.js';
+export type * from './root/SwitchRoot.js';
+export type * from './thumb/SwitchThumb.js';

package/dist/lib/types/switch/index.parts.d.ts

@@ -0,0 +1,2 @@
+export { SwitchRoot as Root } from './root/SwitchRoot.js';
+export { SwitchThumb as Thumb } from './thumb/SwitchThumb.js';

package/dist/lib/types/switch/root/SwitchRoot.d.ts

@@ -0,0 +1,55 @@
+import { type Ref } from 'solid-js';
+import { type ComponentProps, type JSX, type ValidComponent } from '@solidjs/web';
+import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
+import { createChangeEventDetails } from '../../internals/createBaseUIEventDetails.js';
+import { REASONS } from '../../internals/reasons.js';
+import type { FieldRootState } from '../../field/root/FieldRoot.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
+export interface SwitchRootState extends FieldRootState {
+    /** Whether the switch is currently active. */
+    checked: boolean;
+    /** Whether the switch ignores user interaction. */
+    disabled: boolean;
+    /** Whether the user should be unable to change the switch. */
+    readOnly: boolean;
+    /** Whether the switch must be active before submitting a form. */
+    required: boolean;
+}
+type SwitchRootEventTarget<Component extends ValidComponent> = ComponentProps<Component> extends {
+    onClick?: JSX.EventHandlerUnion<infer Target, MouseEvent> | undefined;
+} ? Target extends HTMLElement ? Target : HTMLElement : HTMLElement;
+interface SwitchRootOwnProps<Component extends ValidComponent> {
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    form?: string | undefined;
+    id?: string | undefined;
+    inputRef?: Ref<HTMLInputElement>;
+    name?: string | undefined;
+    nativeButton?: boolean | undefined;
+    onCheckedChange?: ((checked: boolean, eventDetails: SwitchRootChangeEventDetails) => void) | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    uncheckedValue?: string | undefined;
+    value?: string | undefined;
+    onBlur?: BaseUIEventHandlerUnion<SwitchRootEventTarget<Component>, FocusEvent> | undefined;
+    onChange?: never;
+    onClick?: BaseUIEventHandlerUnion<SwitchRootEventTarget<Component>, MouseEvent> | undefined;
+    onFocus?: BaseUIEventHandlerUnion<SwitchRootEventTarget<Component>, FocusEvent> | undefined;
+    onKeyDown?: BaseUIEventHandlerUnion<SwitchRootEventTarget<Component>, KeyboardEvent> | undefined;
+    onKeyUp?: BaseUIEventHandlerUnion<SwitchRootEventTarget<Component>, KeyboardEvent> | undefined;
+    onMouseDown?: BaseUIEventHandlerUnion<SwitchRootEventTarget<Component>, MouseEvent> | undefined;
+    onPointerDown?: BaseUIEventHandlerUnion<SwitchRootEventTarget<Component>, PointerEvent> | undefined;
+}
+export type SwitchRootProps<Component extends ValidComponent = 'span'> = BaseUIComponentProps<Component, SwitchRootState, SwitchRootOwnProps<Component>>;
+/** Represents the visible switch and renders a hidden native checkbox beside it. */
+export declare function SwitchRoot<Component extends ValidComponent = 'span'>(props: SwitchRoot.Props<Component>): JSX.Element;
+export type SwitchRootChangeEventReason = typeof REASONS.none;
+export type SwitchRootChangeEventDetails = ReturnType<typeof createChangeEventDetails<SwitchRootChangeEventReason>>;
+export declare namespace SwitchRoot {
+    type State = SwitchRootState;
+    type Props<Component extends ValidComponent = 'span'> = SwitchRootProps<Component>;
+    type ChangeEventReason = SwitchRootChangeEventReason;
+    type ChangeEventDetails = SwitchRootChangeEventDetails;
+}
+export {};

package/dist/lib/types/switch/root/SwitchRootContext.d.ts

@@ -0,0 +1,7 @@
+import { type Accessor } from 'solid-js';
+import type { SwitchRootState } from './SwitchRoot.js';
+export type SwitchRootContextValue = Accessor<SwitchRootState>;
+declare const MISSING_CONTEXT: unique symbol;
+export declare const SwitchRootContext: import("solid-js").Context<SwitchRootContextValue | typeof MISSING_CONTEXT>;
+export declare function useSwitchRootContext(): SwitchRootContextValue;
+export {};

package/dist/lib/types/switch/stateAttributesMapping.d.ts

@@ -0,0 +1,9 @@
+export declare const switchStateAttributesMapping: {
+    checked(value: boolean): Record<string, string>;
+    disabled?: ((state: boolean) => Record<string, string> | null) | undefined;
+    touched?: ((state: boolean) => Record<string, string> | null) | undefined;
+    dirty?: ((state: boolean) => Record<string, string> | null) | undefined;
+    valid?: ((state: boolean | null) => Record<string, string> | null) | undefined;
+    filled?: ((state: boolean) => Record<string, string> | null) | undefined;
+    focused?: ((state: boolean) => Record<string, string> | null) | undefined;
+};

package/dist/lib/types/switch/thumb/SwitchThumb.d.ts

@@ -0,0 +1,12 @@
+import { type ValidComponent } from '@solidjs/web';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { SwitchRootState } from '../root/SwitchRoot.js';
+export interface SwitchThumbState extends SwitchRootState {
+}
+export type SwitchThumbProps<Component extends ValidComponent = 'span'> = BaseUIComponentProps<Component, SwitchThumbState>;
+/** The movable part that indicates whether the enclosing switch is on or off. */
+export declare function SwitchThumb<Component extends ValidComponent = 'span'>(props: SwitchThumb.Props<Component>): import("@solidjs/web").JSX.Element;
+export declare namespace SwitchThumb {
+    type State = SwitchThumbState;
+    type Props<Component extends ValidComponent = 'span'> = SwitchThumbProps<Component>;
+}

package/dist/lib/types/tabs/index.d.ts

@@ -0,0 +1,6 @@
+export * as Tabs from './index.parts.js';
+export type * from './root/TabsRoot.js';
+export type * from './list/TabsList.js';
+export type * from './tab/TabsTab.js';
+export type * from './indicator/TabsIndicator.js';
+export type * from './panel/TabsPanel.js';

package/dist/lib/types/tabs/index.parts.d.ts

@@ -0,0 +1,5 @@
+export { TabsRoot as Root } from './root/TabsRoot.js';
+export { TabsList as List } from './list/TabsList.js';
+export { TabsTab as Tab } from './tab/TabsTab.js';
+export { TabsIndicator as Indicator } from './indicator/TabsIndicator.js';
+export { TabsPanel as Panel } from './panel/TabsPanel.js';

package/dist/lib/types/tabs/indicator/TabsIndicator.d.ts

@@ -0,0 +1,22 @@
+import { type JSX, type ValidComponent } from '@solidjs/web';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { TabsRootState } from '../root/TabsRoot.js';
+import type { TabsTabPosition, TabsTabSize } from '../tab/TabsTab.js';
+export interface TabsIndicatorState extends TabsRootState {
+    /** The active tab's position relative to the list. */
+    activeTabPosition: TabsTabPosition | null;
+    /** The active tab's untransformed CSS size. */
+    activeTabSize: TabsTabSize | null;
+}
+interface TabsIndicatorOwnProps {
+    /** Emits a positioning script during SSR and hydration. @default false */
+    renderBeforeHydration?: boolean | undefined;
+}
+export type TabsIndicatorProps<Component extends ValidComponent = 'span'> = BaseUIComponentProps<Component, TabsIndicatorState, TabsIndicatorOwnProps>;
+/** A visual indicator positioned over the active tab. */
+export declare function TabsIndicator<Component extends ValidComponent = 'span'>(props: TabsIndicator.Props<Component>): JSX.Element;
+export declare namespace TabsIndicator {
+    type State = TabsIndicatorState;
+    type Props<Component extends ValidComponent = 'span'> = TabsIndicatorProps<Component>;
+}
+export {};

package/dist/lib/types/tabs/indicator/TabsIndicatorCssVars.d.ts

@@ -0,0 +1,8 @@
+export declare enum TabsIndicatorCssVars {
+    activeTabLeft = "--active-tab-left",
+    activeTabRight = "--active-tab-right",
+    activeTabTop = "--active-tab-top",
+    activeTabBottom = "--active-tab-bottom",
+    activeTabWidth = "--active-tab-width",
+    activeTabHeight = "--active-tab-height"
+}

package/dist/lib/types/tabs/indicator/prehydrationScript.d.ts

@@ -0,0 +1 @@
+export declare const tabsIndicatorPrehydrationScript = "!function(){const t=document.currentScript.previousElementSibling;if(!t)return;const e=t.closest('[role=\"tablist\"]');if(!e)return;const i=e.querySelector(\"[data-active]\");if(!i)return;function o(t){const e=getComputedStyle(t);let i=parseFloat(e.width)||0,o=parseFloat(e.height)||0;return(Math.round(i)!==t.offsetWidth||Math.round(o)!==t.offsetHeight)&&(i=t.offsetWidth,o=t.offsetHeight),{width:i,height:o}}function n(){let n=0,r=0,s=0,h=0;const{width:c,height:f}=o(i),{width:l,height:u}=o(e),d=i.getBoundingClientRect(),a=e.getBoundingClientRect(),g=l>0?a.width/l:1,b=u>0?a.height/u:1;if(Math.abs(g)>Number.EPSILON&&Math.abs(b)>Number.EPSILON){const t=d.left-a.left,i=d.top-a.top;n=t/g+e.scrollLeft-e.clientLeft,s=i/b+e.scrollTop-e.clientTop}else n=i.offsetLeft,s=i.offsetTop;const p=c,m=f;function v(e,i){t.style.setProperty(`--active-tab-${e}`,`${i}px`)}return r=e.scrollWidth-n-p,h=e.scrollHeight-s-m,v(\"left\",n),v(\"right\",r),v(\"top\",s),v(\"bottom\",h),v(\"width\",p),v(\"height\",m),p>0&&m>0&&(t.removeAttribute(\"hidden\"),!0)}if(n()||\"undefined\"==typeof ResizeObserver)return;let r,s;function h(){s.disconnect(),clearTimeout(r)}s=new ResizeObserver(()=>{t.isConnected&&t.hasAttribute(\"hidden\")&&i.hasAttribute(\"data-active\")?n()&&h():h()}),s.observe(i),r=setTimeout(h,1e4)}();";

package/dist/lib/types/tabs/list/TabsList.d.ts

@@ -0,0 +1,21 @@
+import { type JSX, type ValidComponent } from '@solidjs/web';
+import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { TabsRootState } from '../root/TabsRoot.js';
+export interface TabsListState extends TabsRootState {
+}
+interface TabsListOwnProps {
+    /** Whether moving focus also activates a tab. @default false */
+    activateOnFocus?: boolean | undefined;
+    /** Whether directional focus wraps at the list boundaries. @default true */
+    loopFocus?: boolean | undefined;
+    onKeyDown?: BaseUIEventHandlerUnion<HTMLElement, KeyboardEvent> | undefined;
+}
+export type TabsListProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, TabsListState, TabsListOwnProps>;
+/** Groups the individual tab buttons. */
+export declare function TabsList<Component extends ValidComponent = 'div'>(props: TabsList.Props<Component>): JSX.Element;
+export declare namespace TabsList {
+    type State = TabsListState;
+    type Props<Component extends ValidComponent = 'div'> = TabsListProps<Component>;
+}
+export {};

package/dist/lib/types/tabs/list/TabsListContext.d.ts

@@ -0,0 +1,14 @@
+import { type Accessor } from 'solid-js';
+import type { TabsTabRegistration } from '../root/TabsRootContext.js';
+export interface TabsListContextValue {
+    activateOnFocus: Accessor<boolean>;
+    highlightedTab: Accessor<symbol | undefined>;
+    listElement: Accessor<HTMLElement | undefined>;
+    markNavigating: () => void;
+    registerIndicatorUpdateListener: (listener: () => void) => () => void;
+    setHighlightedTab: (registration: TabsTabRegistration) => void;
+}
+declare const MISSING_CONTEXT: unique symbol;
+export declare const TabsListContext: import("solid-js").Context<TabsListContextValue | typeof MISSING_CONTEXT>;
+export declare function useTabsListContext(): TabsListContextValue;
+export {};

package/dist/lib/types/tabs/panel/TabsPanel.d.ts

@@ -0,0 +1,30 @@
+import { type ValidComponent } from '@solidjs/web';
+import { type TransitionStatus } from '../../internals/stateAttributesMapping.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { TabsRootState } from '../root/TabsRoot.js';
+import type { TabsTabValue } from '../tab/TabsTab.js';
+export interface TabsPanelMetadata {
+    id?: string | undefined;
+    value: TabsTabValue;
+}
+export interface TabsPanelState extends TabsRootState {
+    /** Whether the panel is fully hidden. */
+    hidden: boolean;
+    /** The current CSS transition phase. */
+    transitionStatus: TransitionStatus;
+}
+interface TabsPanelOwnProps {
+    /** The tab value that reveals this panel. */
+    value: TabsTabValue;
+    /** Keeps the panel mounted after its exit transition. @default false */
+    keepMounted?: boolean | undefined;
+}
+export type TabsPanelProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, TabsPanelState, TabsPanelOwnProps>;
+/** A panel displayed when its corresponding tab is active. */
+export declare function TabsPanel<Component extends ValidComponent = 'div'>(props: TabsPanel.Props<Component>): import("@solidjs/web").JSX.Element;
+export declare namespace TabsPanel {
+    type Metadata = TabsPanelMetadata;
+    type State = TabsPanelState;
+    type Props<Component extends ValidComponent = 'div'> = TabsPanelProps<Component>;
+}
+export {};

package/dist/lib/types/tabs/panel/TabsPanelDataAttributes.d.ts

@@ -0,0 +1,6 @@
+export declare enum TabsPanelDataAttributes {
+    orientation = "data-orientation",
+    activationDirection = "data-activation-direction",
+    hidden = "data-hidden",
+    index = "data-index"
+}

package/dist/lib/types/tabs/root/TabsRoot.d.ts

@@ -0,0 +1,38 @@
+import { type ValidComponent } from '@solidjs/web';
+import { type BaseUIChangeEventDetails } from '../../internals/createBaseUIEventDetails.js';
+import { REASONS } from '../../internals/reasons.js';
+import type { Orientation } from '../../internals/types.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { TabsTabActivationDirection, TabsTabValue } from '../tab/TabsTab.js';
+export interface TabsRootState {
+    /** The component orientation. */
+    orientation: TabsRootOrientation;
+    /** The physical direction of the latest committed tab activation. */
+    tabActivationDirection: TabsTabActivationDirection;
+}
+interface TabsRootOwnProps {
+    /** The controlled active value. `null` leaves every tab inactive. */
+    value?: TabsTabValue | undefined;
+    /** The initial uncontrolled value. @default 0 */
+    defaultValue?: TabsTabValue | undefined;
+    /** The component orientation. @default 'horizontal' */
+    orientation?: TabsRootOrientation | undefined;
+    /** Called before a user value is committed and after an automatic fallback is committed. */
+    onValueChange?: ((value: TabsTabValue, details: TabsRootChangeEventDetails) => void) | undefined;
+}
+export type TabsRootProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, TabsRootState, TabsRootOwnProps>;
+/** Groups tabs and their corresponding panels. */
+export declare function TabsRoot<Component extends ValidComponent = 'div'>(props: TabsRoot.Props<Component>): import("@solidjs/web").JSX.Element;
+export type TabsRootOrientation = Orientation;
+export type TabsRootChangeEventReason = typeof REASONS.none | typeof REASONS.disabled | typeof REASONS.missing | typeof REASONS.initial;
+export type TabsRootChangeEventDetails = BaseUIChangeEventDetails<TabsRootChangeEventReason, {
+    activationDirection: TabsTabActivationDirection;
+}>;
+export declare namespace TabsRoot {
+    type State = TabsRootState;
+    type Props<Component extends ValidComponent = 'div'> = TabsRootProps<Component>;
+    type Orientation = TabsRootOrientation;
+    type ChangeEventReason = TabsRootChangeEventReason;
+    type ChangeEventDetails = TabsRootChangeEventDetails;
+}
+export {};