solid-baseui 0.1.0-alpha.0

package/dist/lib/types/autocomplete/root/AutocompleteRoot.d.ts

@@ -0,0 +1,195 @@
+import { type Ref } from 'solid-js';
+import type { JSX } from '@solidjs/web';
+import { type AriaComboboxState, type ComboboxHighlightEventDetails, type ComboboxHighlightEventReason, type ComboboxRootActions, type ComboboxRootChangeEventDetails, type ComboboxRootChangeEventReason } from '../../combobox/root/AriaCombobox.js';
+import type { ComboboxAutoHighlight, ComboboxItemFilter, ComboboxItemsInput } from '../../combobox/types.js';
+/** How the input and the list relate while the user types. */
+export type AutocompleteMode = 'list' | 'both' | 'inline' | 'none';
+export interface AutocompleteRootProps<Value = unknown> {
+    children?: JSX.Element;
+    /**
+     * Controls how the autocomplete behaves with respect to list filtering and inline
+     * autocompletion.
+     * - `list` (default): items are dynamically filtered based on the input value. The input value
+     *   does not change based on the active item.
+     * - `both`: items are dynamically filtered based on the input value, which temporarily changes
+     *   based on the active item (inline autocompletion).
+     * - `inline`: items are static (not filtered), and the input value temporarily changes based on
+     *   the active item (inline autocompletion).
+     * - `none`: items are static (not filtered), and the input value does not change based on the
+     *   active item.
+     * @default 'list'
+     */
+    mode?: AutocompleteMode | undefined;
+    /** The input value of the autocomplete. Use when controlled. */
+    value?: string | null | undefined;
+    /**
+     * The uncontrolled input value of the autocomplete when it's initially rendered.
+     *
+     * To render a controlled autocomplete, use the `value` prop instead.
+     */
+    defaultValue?: string | undefined;
+    /** Event handler called when the input value of the autocomplete changes. */
+    onValueChange?: ((value: string, eventDetails: ComboboxRootChangeEventDetails) => void) | undefined;
+    /** Identifies the field when a form is submitted. */
+    name?: string | undefined;
+    /**
+     * Identifies the form that owns the internal input.
+     * Useful when the autocomplete is rendered outside the form.
+     */
+    form?: string | undefined;
+    /** The id of the component. */
+    id?: string | undefined;
+    /**
+     * Whether the user must choose a value before submitting a form.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the user should be unable to choose a different option from the popup.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the popup is initially open.
+     *
+     * To render a controlled popup, use the `open` prop instead.
+     * @default false
+     */
+    defaultOpen?: boolean | undefined;
+    /** Whether the popup is currently open. Use when controlled. */
+    open?: boolean | undefined;
+    /** Event handler called when the popup is opened or closed. */
+    onOpenChange?: ((open: boolean, eventDetails: ComboboxRootChangeEventDetails) => void) | undefined;
+    /** Event handler called after any animations complete when the popup is opened or closed. */
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+    /**
+     * Whether the popup opens when clicking the input.
+     * @default false
+     */
+    openOnInputClick?: boolean | undefined;
+    /**
+     * Whether the first matching item is highlighted automatically.
+     * - `true`: highlight after the user types and keep the highlight while the query changes.
+     * - `'always'`: always highlight the first item.
+     * @default false
+     */
+    autoHighlight?: ComboboxAutoHighlight | undefined;
+    /**
+     * Whether the highlighted item should be preserved when the pointer leaves the list.
+     * @default false
+     */
+    keepHighlight?: boolean | undefined;
+    /**
+     * Whether moving the pointer over items should highlight them.
+     * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus`
+     * (`data-highlighted`) state.
+     * @default true
+     */
+    highlightItemOnHover?: boolean | undefined;
+    /**
+     * Whether to loop keyboard focus back to the input when the end of the list is reached with the
+     * arrow keys. The input is always part of the focus loop per ARIA Authoring Practices.
+     * @default true
+     */
+    loopFocus?: boolean | undefined;
+    /**
+     * Receives imperative actions.
+     * - `unmount`: manually unmounts the autocomplete after an externally controlled closing
+     *   animation finishes.
+     */
+    actionsRef?: ((actions: ComboboxRootActions) => void) | undefined;
+    /**
+     * Callback fired when an item is highlighted or unhighlighted. The `reason` is `'keyboard'`,
+     * `'pointer'`, or `'none'` for a programmatic change.
+     */
+    onItemHighlighted?: ((highlightedValue: Value | undefined, eventDetails: ComboboxHighlightEventDetails) => void) | undefined;
+    /** A ref to the hidden input element. */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Whether list items are presented in a grid layout.
+     * When enabled, arrow keys navigate across the rows and columns inferred from DOM rows.
+     * @default false
+     */
+    grid?: boolean | undefined;
+    /** The items to display, either a flat array or an array of groups. */
+    items?: ComboboxItemsInput<Value> | undefined;
+    /**
+     * Filtered items to display in the list. When provided, the list uses these instead of
+     * filtering `items` internally. Use with the `useFilter()` helper.
+     */
+    filteredItems?: ComboboxItemsInput<Value> | undefined;
+    /** Filter function used to match items against the input query. */
+    filter?: ComboboxItemFilter<Value> | null | undefined;
+    /**
+     * When the item values are objects, converts the object value to the string representation used
+     * both for display in the input and for form submission.
+     * A `{ value, label }` shape uses its label automatically.
+     */
+    itemToStringValue?: ((itemValue: Value) => string) | undefined;
+    /**
+     * Whether the items are being externally virtualized.
+     * @default false
+     */
+    virtualized?: boolean | undefined;
+    /**
+     * Whether the list is rendered inline without using the component's own popup.
+     *
+     * Specify `open` unconditionally in conjunction with this prop so the list is considered
+     * visible: `<Autocomplete.Root inline open>`
+     * @default false
+     */
+    inline?: boolean | undefined;
+    /**
+     * Whether the popup enters a modal state when open.
+     * @default false
+     */
+    modal?: boolean | undefined;
+    /**
+     * The maximum number of items to display in the list.
+     * @default -1
+     */
+    limit?: number | undefined;
+    /** The locale used for string comparison. Defaults to the runtime locale. */
+    locale?: Intl.LocalesArgument | undefined;
+    /**
+     * Whether clicking an item should submit the autocomplete's owning form.
+     * By default, clicking an item with a pointer or pressing Enter does not submit the owning form.
+     * Useful when the autocomplete is used as a single-field form search input.
+     * @default false
+     */
+    submitOnItemClick?: boolean | undefined;
+}
+export interface AutocompleteRootState extends AriaComboboxState {
+}
+/**
+ * Groups all parts of the autocomplete.
+ * Doesn't render its own HTML element.
+ *
+ * Grouped `items` narrow to the nested item type, so `itemToStringValue` and the item callbacks
+ * describe an item rather than the group that carries it.
+ */
+export declare function AutocompleteRoot<Items extends readonly {
+    items: readonly unknown[];
+}[]>(props: Omit<AutocompleteRootProps<Items[number]['items'][number]>, 'items'> & {
+    /** The items to display, as an array of groups. */
+    items: Items;
+}): JSX.Element;
+export declare function AutocompleteRoot<Value = unknown>(props: Omit<AutocompleteRootProps<Value>, 'items'> & {
+    /** The items to display, either a flat array or an array of groups. */
+    items?: ComboboxItemsInput<Value> | undefined;
+}): JSX.Element;
+export type { ComboboxRootActions as AutocompleteRootActions, ComboboxRootChangeEventDetails as AutocompleteRootChangeEventDetails, ComboboxRootChangeEventReason as AutocompleteRootChangeEventReason, ComboboxHighlightEventDetails as AutocompleteRootHighlightEventDetails, ComboboxHighlightEventReason as AutocompleteRootHighlightEventReason, };
+export declare namespace AutocompleteRoot {
+    type Props<Value = unknown> = AutocompleteRootProps<Value>;
+    type State = AutocompleteRootState;
+    type Actions = ComboboxRootActions;
+    type ChangeEventReason = ComboboxRootChangeEventReason;
+    type ChangeEventDetails = ComboboxRootChangeEventDetails;
+    type HighlightEventReason = ComboboxHighlightEventReason;
+    type HighlightEventDetails = ComboboxHighlightEventDetails;
+}

package/dist/lib/types/autocomplete/root/utils/useFilter.d.ts

@@ -0,0 +1,9 @@
+import { type Filter, type FilterOptions } from '../../../internals/filter.js';
+export type { Filter, FilterOptions as AutocompleteFilterOptions };
+/**
+ * Matches items against a query using `Intl.Collator` for robust string matching.
+ *
+ * Options may be a plain object or an accessor; either way they are read at match time, so a
+ * changing `locale` is picked up without recreating the filter.
+ */
+export declare function useFilter(options?: FilterOptions | (() => FilterOptions)): Filter;

package/dist/lib/types/autocomplete/separator/AutocompleteSeparator.d.ts

@@ -0,0 +1,17 @@
+import type { ValidComponent } from '@solidjs/web';
+import type { Orientation } from '../../internals/types.js';
+import { ComboboxSeparator, type ComboboxSeparatorProps } from '../../combobox/separator/ComboboxSeparator.js';
+export interface AutocompleteSeparatorState {
+    /** The orientation of the separator. */
+    orientation: Orientation;
+}
+export type AutocompleteSeparatorProps<Component extends ValidComponent = 'div'> = ComboboxSeparatorProps<Component>;
+/**
+ * A visual separator between items or groups.
+ * Renders a `<div>` element.
+ */
+export declare const AutocompleteSeparator: typeof ComboboxSeparator;
+export declare namespace AutocompleteSeparator {
+    type State = AutocompleteSeparatorState;
+    type Props<Component extends ValidComponent = 'div'> = AutocompleteSeparatorProps<Component>;
+}

package/dist/lib/types/autocomplete/trigger/AutocompleteTrigger.d.ts

@@ -0,0 +1,24 @@
+import type { ValidComponent } from '@solidjs/web';
+import type { FieldState } from '../../internals/field-constants.js';
+import type { AnchorSide } from '../../internals/overlay/index.js';
+import { ComboboxTrigger, type ComboboxTriggerProps } from '../../combobox/trigger/ComboboxTrigger.js';
+export interface AutocompleteTriggerState extends FieldState {
+    /** Whether the popup is open. */
+    open: boolean;
+    /** Whether the component should ignore user interaction. */
+    disabled: boolean;
+    /** Indicates which side the popup is positioned relative to its anchor. */
+    popupSide: AnchorSide | null;
+    /** Whether the corresponding items list is empty. */
+    listEmpty: boolean;
+}
+export type AutocompleteTriggerProps<Component extends ValidComponent = 'button'> = ComboboxTriggerProps<Component>;
+/**
+ * A button that opens the popup.
+ * Renders a `<button>` element.
+ */
+export declare const AutocompleteTrigger: typeof ComboboxTrigger;
+export declare namespace AutocompleteTrigger {
+    type State = AutocompleteTriggerState;
+    type Props<Component extends ValidComponent = 'button'> = AutocompleteTriggerProps<Component>;
+}

package/dist/lib/types/autocomplete/value/AutocompleteValue.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from '@solidjs/web';
+export interface AutocompleteValueState {
+}
+export interface AutocompleteValueProps {
+    children?: JSX.Element | ((value: string) => JSX.Element);
+}
+/**
+ * The current value of the autocomplete.
+ * Doesn't render its own HTML element.
+ */
+export declare function AutocompleteValue(props: AutocompleteValue.Props): JSX.Element;
+export declare namespace AutocompleteValue {
+    type State = AutocompleteValueState;
+    type Props = AutocompleteValueProps;
+}

package/dist/lib/types/avatar/fallback/AvatarFallback.d.ts

@@ -0,0 +1,16 @@
+import type { NativeComponentProps } from '../../types/index.js';
+import type { AvatarRootState } from '../root/AvatarRoot.js';
+export interface AvatarFallbackState extends AvatarRootState {
+}
+interface AvatarFallbackOwnProps {
+    /** How long to wait before showing the fallback, in milliseconds. @default 0 */
+    delay?: number | undefined;
+}
+export type AvatarFallbackProps = NativeComponentProps<'span', AvatarFallbackState, AvatarFallbackOwnProps>;
+/** Content displayed while the image is unavailable. */
+export declare function AvatarFallback(props: AvatarFallback.Props): import("@solidjs/web").JSX.Element;
+export declare namespace AvatarFallback {
+    type State = AvatarFallbackState;
+    type Props = AvatarFallbackProps;
+}
+export {};

package/dist/lib/types/avatar/image/AvatarImage.d.ts

@@ -0,0 +1,17 @@
+import type { NativeComponentProps } from '../../types/index.js';
+import type { TransitionStatus } from '../../internals/stateAttributesMapping.js';
+import type { AvatarRootState, ImageLoadingStatus } from '../root/AvatarRoot.js';
+export interface AvatarImageState extends AvatarRootState {
+    transitionStatus: TransitionStatus;
+}
+interface AvatarImageOwnProps {
+    onLoadingStatusChange?: ((status: ImageLoadingStatus) => void) | undefined;
+}
+export type AvatarImageProps = NativeComponentProps<'img', AvatarImageState, AvatarImageOwnProps>;
+/** The image displayed after its source has loaded successfully. */
+export declare function AvatarImage(props: AvatarImage.Props): import("@solidjs/web").JSX.Element;
+export declare namespace AvatarImage {
+    type State = AvatarImageState;
+    type Props = AvatarImageProps;
+}
+export {};

package/dist/lib/types/avatar/image/createImageLoadingStatus.d.ts

@@ -0,0 +1,10 @@
+import { type Accessor } from 'solid-js';
+import type { ImageLoadingStatus } from '../root/AvatarRoot.js';
+export interface ImageLoadingOptions {
+    src: string | undefined;
+    srcset: string | undefined;
+    sizes: string | undefined;
+    crossorigin: string | undefined;
+    referrerpolicy: ReferrerPolicy | undefined;
+}
+export declare function createImageLoadingStatus(options: Accessor<ImageLoadingOptions>): Accessor<ImageLoadingStatus>;

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

@@ -0,0 +1,4 @@
+export * as Avatar from './index.parts.js';
+export type { AvatarRootProps, AvatarRootState, ImageLoadingStatus } from './root/AvatarRoot.js';
+export type { AvatarImageProps, AvatarImageState } from './image/AvatarImage.js';
+export type { AvatarFallbackProps, AvatarFallbackState } from './fallback/AvatarFallback.js';

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

@@ -0,0 +1,3 @@
+export { AvatarRoot as Root } from './root/AvatarRoot.js';
+export { AvatarImage as Image } from './image/AvatarImage.js';
+export { AvatarFallback as Fallback } from './fallback/AvatarFallback.js';

package/dist/lib/types/avatar/root/AvatarRoot.d.ts

@@ -0,0 +1,13 @@
+import { type ValidComponent } from '@solidjs/web';
+import type { BaseUIComponentProps } from '../../types/index.js';
+export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+export interface AvatarRootState {
+    imageLoadingStatus: ImageLoadingStatus;
+}
+export type AvatarRootProps<Component extends ValidComponent = 'span'> = BaseUIComponentProps<Component, AvatarRootState>;
+/** Displays a profile image, initials, or fallback content. */
+export declare function AvatarRoot<Component extends ValidComponent = 'span'>(props: AvatarRoot.Props<Component>): import("@solidjs/web").JSX.Element;
+export declare namespace AvatarRoot {
+    type State = AvatarRootState;
+    type Props<Component extends ValidComponent = 'span'> = AvatarRootProps<Component>;
+}

package/dist/lib/types/avatar/root/AvatarRootContext.d.ts

@@ -0,0 +1,10 @@
+import { type Accessor, type Setter } from 'solid-js';
+import type { ImageLoadingStatus } from './AvatarRoot.js';
+export interface AvatarRootContextValue {
+    imageLoadingStatus: Accessor<ImageLoadingStatus>;
+    setImageLoadingStatus: Setter<ImageLoadingStatus>;
+}
+declare const MISSING_CONTEXT: unique symbol;
+export declare const AvatarRootContext: import("solid-js").Context<AvatarRootContextValue | typeof MISSING_CONTEXT>;
+export declare function useAvatarRootContext(): AvatarRootContextValue;
+export {};

package/dist/lib/types/button/Button.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentProps, type JSX, type ValidComponent } from '@solidjs/web';
+import { type BaseUIEventHandlerUnion } from '../internals/composeEventHandlers.js';
+import type { BaseUIComponentProps } from '../types/index.js';
+export interface ButtonState {
+    /** Whether the button should ignore user interaction. */
+    disabled: boolean;
+}
+type ButtonEventTarget<Component extends ValidComponent> = ComponentProps<Component> extends {
+    onClick?: JSX.EventHandlerUnion<infer Target, MouseEvent> | undefined;
+} ? Target extends HTMLElement ? Target : HTMLElement : HTMLElement;
+interface ButtonOwnProps<Component extends ValidComponent> {
+    /** Whether the button should ignore user interaction. @default false */
+    disabled?: boolean | undefined;
+    /** Whether the button should be focusable when disabled. @default false */
+    focusableWhenDisabled?: boolean | undefined;
+    /** Whether the rendered element is a native button. @default true */
+    nativeButton?: boolean | undefined;
+    onClick?: BaseUIEventHandlerUnion<ButtonEventTarget<Component>, MouseEvent> | undefined;
+    onKeyDown?: BaseUIEventHandlerUnion<ButtonEventTarget<Component>, KeyboardEvent> | undefined;
+    onKeyUp?: BaseUIEventHandlerUnion<ButtonEventTarget<Component>, KeyboardEvent> | undefined;
+    onMouseDown?: BaseUIEventHandlerUnion<ButtonEventTarget<Component>, MouseEvent> | undefined;
+    onPointerDown?: BaseUIEventHandlerUnion<ButtonEventTarget<Component>, PointerEvent> | undefined;
+}
+export type ButtonProps<Component extends ValidComponent = 'button'> = BaseUIComponentProps<Component, ButtonState, ButtonOwnProps<Component>>;
+/**
+ * A button that supports native semantics or accessible non-native roots.
+ * Renders a `<button>` element by default.
+ */
+export declare function Button<Component extends ValidComponent = 'button'>(props: Button.Props<Component>): JSX.Element;
+export declare namespace Button {
+    type State = ButtonState;
+    type Props<Component extends ValidComponent = 'button'> = ButtonProps<Component>;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonState } from './Button.js';

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

@@ -0,0 +1,3 @@
+export * as Checkbox from './index.parts.js';
+export type * from './root/CheckboxRoot.js';
+export type * from './indicator/CheckboxIndicator.js';

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

@@ -0,0 +1,2 @@
+export { CheckboxRoot as Root } from './root/CheckboxRoot.js';
+export { CheckboxIndicator as Indicator } from './indicator/CheckboxIndicator.js';

package/dist/lib/types/checkbox/indicator/CheckboxIndicator.d.ts

@@ -0,0 +1,20 @@
+import { type ValidComponent } from '@solidjs/web';
+import { type TransitionStatus } from '../../internals/stateAttributesMapping.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { CheckboxRootState } from '../root/CheckboxRoot.js';
+export interface CheckboxIndicatorState extends CheckboxRootState {
+    /** The current CSS transition phase. */
+    transitionStatus: TransitionStatus;
+}
+interface CheckboxIndicatorOwnProps {
+    /** Keeps the indicator mounted while the checkbox is unchecked. @default false */
+    keepMounted?: boolean | undefined;
+}
+export type CheckboxIndicatorProps<Component extends ValidComponent = 'span'> = BaseUIComponentProps<Component, CheckboxIndicatorState, CheckboxIndicatorOwnProps>;
+/** Indicates whether the enclosing checkbox is checked or indeterminate. */
+export declare function CheckboxIndicator<Component extends ValidComponent = 'span'>(props: CheckboxIndicator.Props<Component>): import("@solidjs/web").JSX.Element;
+export declare namespace CheckboxIndicator {
+    type State = CheckboxIndicatorState;
+    type Props<Component extends ValidComponent = 'span'> = CheckboxIndicatorProps<Component>;
+}
+export {};

package/dist/lib/types/checkbox/root/CheckboxRoot.d.ts

@@ -0,0 +1,56 @@
+import { type Ref } from 'solid-js';
+import { type ComponentProps, type JSX, type ValidComponent } from '@solidjs/web';
+import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
+import { REASONS } from '../../internals/reasons.js';
+import type { FieldRootState } from '../../field/root/FieldRoot.js';
+import type { BaseUIChangeEventDetails, BaseUIComponentProps } from '../../types/index.js';
+export interface CheckboxRootState extends FieldRootState {
+    /** Whether the checkbox is currently ticked. */
+    checked: boolean;
+    /** Whether the component ignores user interaction. */
+    disabled: boolean;
+    /** Whether the checkbox is neither ticked nor unticked. */
+    indeterminate: boolean;
+    /** Whether the user cannot change the checkbox. */
+    readOnly: boolean;
+    /** Whether the checkbox must be ticked before form submission. */
+    required: boolean;
+}
+type CheckboxRootEventTarget<Component extends ValidComponent> = ComponentProps<Component> extends {
+    onClick?: JSX.EventHandlerUnion<infer Target, MouseEvent> | undefined;
+} ? Target extends HTMLElement ? Target : HTMLElement : HTMLElement;
+interface CheckboxRootOwnProps<Component extends ValidComponent> {
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    form?: string | undefined;
+    id?: string | undefined;
+    indeterminate?: boolean | undefined;
+    inputRef?: Ref<HTMLInputElement>;
+    name?: string | undefined;
+    nativeButton?: boolean | undefined;
+    onBlur?: BaseUIEventHandlerUnion<CheckboxRootEventTarget<Component>, FocusEvent> | undefined;
+    onClick?: BaseUIEventHandlerUnion<CheckboxRootEventTarget<Component>, MouseEvent> | undefined;
+    onChange?: never;
+    onCheckedChange?: ((checked: boolean, details: CheckboxRootChangeEventDetails) => void) | undefined;
+    onFocus?: BaseUIEventHandlerUnion<CheckboxRootEventTarget<Component>, FocusEvent> | undefined;
+    onKeyDown?: BaseUIEventHandlerUnion<CheckboxRootEventTarget<Component>, KeyboardEvent> | undefined;
+    onKeyUp?: BaseUIEventHandlerUnion<CheckboxRootEventTarget<Component>, KeyboardEvent> | undefined;
+    parent?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    uncheckedValue?: string | undefined;
+    value?: string | undefined;
+}
+export type CheckboxRootProps<Component extends ValidComponent = 'span'> = BaseUIComponentProps<Component, CheckboxRootState, CheckboxRootOwnProps<Component>>;
+/** Represents a visible checkbox and renders a hidden native checkbox beside it. */
+export declare function CheckboxRoot<Component extends ValidComponent = 'span'>(props: CheckboxRoot.Props<Component>): JSX.Element;
+export type CheckboxRootChangeEventReason = typeof REASONS.none;
+export type CheckboxRootChangeEventDetails = BaseUIChangeEventDetails<CheckboxRootChangeEventReason>;
+export declare namespace CheckboxRoot {
+    type State = CheckboxRootState;
+    type Props<Component extends ValidComponent = 'span'> = CheckboxRootProps<Component>;
+    type ChangeEventReason = CheckboxRootChangeEventReason;
+    type ChangeEventDetails = CheckboxRootChangeEventDetails;
+}
+export {};

package/dist/lib/types/checkbox/root/CheckboxRootContext.d.ts

@@ -0,0 +1,7 @@
+import { type Accessor } from 'solid-js';
+import type { CheckboxRootState } from './CheckboxRoot.js';
+export type CheckboxRootContextValue = Accessor<CheckboxRootState>;
+declare const MISSING_CONTEXT: unique symbol;
+export declare const CheckboxRootContext: import("solid-js").Context<CheckboxRootContextValue | typeof MISSING_CONTEXT>;
+export declare function useCheckboxRootContext(): CheckboxRootContextValue;
+export {};

package/dist/lib/types/checkbox/utils/getCheckboxStateAttributesMapping.d.ts

@@ -0,0 +1,3 @@
+import type { StateAttributesMapping } from '../../internals/getStateAttributesProps.js';
+import type { CheckboxRootState } from '../root/CheckboxRoot.js';
+export declare function getCheckboxStateAttributesMapping(state: CheckboxRootState): StateAttributesMapping<CheckboxRootState>;

package/dist/lib/types/checkbox-group/CheckboxGroup.d.ts

@@ -0,0 +1,32 @@
+import { type ValidComponent } from '@solidjs/web';
+import { REASONS } from '../internals/reasons.js';
+import type { FieldRootState } from '../field/root/FieldRoot.js';
+import type { BaseUIChangeEventDetails, BaseUIComponentProps } from '../types/index.js';
+export interface CheckboxGroupState extends FieldRootState {
+    /** Whether the component ignores user interaction. */
+    disabled: boolean;
+}
+interface CheckboxGroupOwnProps {
+    /** Names of every child checkbox, used to enable parent-checkbox behavior. */
+    allValues?: string[] | undefined;
+    /** Names that are initially checked in an uncontrolled group. */
+    defaultValue?: string[] | undefined;
+    /** Whether every child checkbox ignores user interaction. @default false */
+    disabled?: boolean | undefined;
+    /** Called when the checked values change. */
+    onValueChange?: ((value: string[], details: CheckboxGroupChangeEventDetails) => void) | undefined;
+    /** Names that are checked in a controlled group. */
+    value?: string[] | undefined;
+}
+export type CheckboxGroupProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, CheckboxGroupState, CheckboxGroupOwnProps>;
+/** Provides shared selection and form state to a series of checkboxes. */
+export declare function CheckboxGroup<Component extends ValidComponent = 'div'>(props: CheckboxGroup.Props<Component>): import("@solidjs/web").JSX.Element;
+export type CheckboxGroupChangeEventReason = typeof REASONS.none;
+export type CheckboxGroupChangeEventDetails = BaseUIChangeEventDetails<CheckboxGroupChangeEventReason>;
+export declare namespace CheckboxGroup {
+    type State = CheckboxGroupState;
+    type Props<Component extends ValidComponent = 'div'> = CheckboxGroupProps<Component>;
+    type ChangeEventReason = CheckboxGroupChangeEventReason;
+    type ChangeEventDetails = CheckboxGroupChangeEventDetails;
+}
+export {};

package/dist/lib/types/checkbox-group/CheckboxGroupContext.d.ts

@@ -0,0 +1,30 @@
+import { type Accessor } from 'solid-js';
+import type { BaseUIChangeEventDetails } from '../types/index.js';
+export interface RegisteredCheckbox {
+    token: symbol;
+    disabled: Accessor<boolean>;
+    element: Accessor<HTMLElement | undefined>;
+    input: Accessor<HTMLInputElement | undefined>;
+    parent: Accessor<boolean>;
+    value: Accessor<string | undefined>;
+}
+export interface CheckboxGroupParentContextValue {
+    id: string;
+    checked: Accessor<boolean>;
+    indeterminate: Accessor<boolean>;
+    ariaControls: Accessor<string>;
+    changeParent: (details: BaseUIChangeEventDetails<'none'>) => boolean;
+    changeChild: (value: string, checked: boolean, details: BaseUIChangeEventDetails<'none'>) => boolean;
+}
+export interface CheckboxGroupContextValue {
+    allValues: Accessor<string[] | undefined>;
+    disabled: Accessor<boolean>;
+    fieldControlSource: symbol;
+    getValue: () => string[];
+    parent: CheckboxGroupParentContextValue;
+    registerCheckbox: (checkbox: RegisteredCheckbox) => () => void;
+    setValue: (value: string[], details: BaseUIChangeEventDetails<'none'>) => boolean;
+    value: Accessor<string[]>;
+}
+export declare const CheckboxGroupContext: import("solid-js").Context<CheckboxGroupContextValue | null>;
+export declare function useCheckboxGroupContext(): CheckboxGroupContextValue | undefined;

package/dist/lib/types/checkbox-group/index.d.ts

@@ -0,0 +1,2 @@
+export { CheckboxGroup } from './CheckboxGroup.js';
+export type * from './CheckboxGroup.js';

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

@@ -0,0 +1,4 @@
+export * as Collapsible from './index.parts.js';
+export type * from './root/CollapsibleRoot.js';
+export type * from './trigger/CollapsibleTrigger.js';
+export type * from './panel/CollapsiblePanel.js';

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

@@ -0,0 +1,3 @@
+export { CollapsibleRoot as Root } from './root/CollapsibleRoot.js';
+export { CollapsibleTrigger as Trigger } from './trigger/CollapsibleTrigger.js';
+export { CollapsiblePanel as Panel } from './panel/CollapsiblePanel.js';

package/dist/lib/types/collapsible/panel/CollapsiblePanel.d.ts

@@ -0,0 +1,25 @@
+import { type JSX, type ValidComponent } from '@solidjs/web';
+import type { TransitionStatus } from '../../internals/stateAttributesMapping.js';
+import type { BaseUIComponentProps } from '../../types/index.js';
+import type { CollapsibleRootState } from '../root/CollapsibleRoot.js';
+export interface CollapsiblePanelState extends CollapsibleRootState {
+    /** The current CSS transition phase. */
+    transitionStatus: TransitionStatus;
+}
+interface CollapsiblePanelOwnProps {
+    /**
+     * Allows browser page search to reveal the panel with `hidden="until-found"`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean | undefined;
+    /** Whether to keep the panel in the DOM while hidden. @default false */
+    keepMounted?: boolean | undefined;
+}
+export type CollapsiblePanelProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, CollapsiblePanelState, CollapsiblePanelOwnProps>;
+/** A panel containing the collapsible content. */
+export declare function CollapsiblePanel<Component extends ValidComponent = 'div'>(props: CollapsiblePanel.Props<Component>): JSX.Element;
+export declare namespace CollapsiblePanel {
+    type State = CollapsiblePanelState;
+    type Props<Component extends ValidComponent = 'div'> = CollapsiblePanelProps<Component>;
+}
+export {};

package/dist/lib/types/collapsible/panel/createCollapsiblePanel.d.ts

@@ -0,0 +1,26 @@
+import { type Accessor, type Setter } from 'solid-js';
+import type { TransitionStatus } from '../../internals/stateAttributesMapping.js';
+export interface CollapsiblePanelDimensions {
+    height: number | undefined;
+    width: number | undefined;
+}
+export interface CollapsiblePanelController {
+    dimensions: Accessor<CollapsiblePanelDimensions>;
+    hidden: Accessor<boolean>;
+    panelTransitionStatus: Accessor<TransitionStatus>;
+    shouldPersistHiddenTransitionStyles: Accessor<boolean>;
+    shouldPreventOpenAnimation: Accessor<boolean>;
+    shouldRender: Accessor<boolean>;
+}
+interface CreateCollapsiblePanelParameters {
+    element: Accessor<HTMLElement | undefined>;
+    hiddenUntilFound: Accessor<boolean>;
+    keepMounted: Accessor<boolean>;
+    mounted: Accessor<boolean>;
+    open: Accessor<boolean>;
+    requestBeforeMatchOpen: (event: Event, beforeCommit: () => void) => boolean;
+    setMounted: Setter<boolean>;
+    transitionStatus: Accessor<TransitionStatus>;
+}
+export declare function createCollapsiblePanel(parameters: CreateCollapsiblePanelParameters): CollapsiblePanelController;
+export {};