bits-ui 0.21.14 → 1.0.0-next.0

package/dist/bits/accordion/accordion.svelte.d.ts

@@ -0,0 +1,142 @@
+import type { Box, ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+import type { WithRefProps } from "../../internal/types.js";
+import { type UseRovingFocusReturn } from "../../internal/useRovingFocus.svelte.js";
+import type { Orientation } from "../../shared/index.js";
+type AccordionBaseStateProps = WithRefProps<ReadableBoxedValues<{
+    disabled: boolean;
+    orientation: Orientation;
+    loop: boolean;
+}>>;
+declare class AccordionBaseState {
+    #private;
+    disabled: AccordionBaseStateProps["disabled"];
+    orientation: AccordionBaseStateProps["orientation"];
+    rovingFocusGroup: UseRovingFocusReturn;
+    constructor(props: AccordionBaseStateProps);
+    props: {
+        readonly id: string;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-accordion-root": "";
+    };
+}
+type AccordionSingleStateProps = AccordionBaseStateProps & WritableBoxedValues<{
+    value: string;
+}>;
+export declare class AccordionSingleState extends AccordionBaseState {
+    #private;
+    isMulti: false;
+    constructor(props: AccordionSingleStateProps);
+    includesItem: (item: string) => boolean;
+    toggleItem: (item: string) => void;
+}
+type AccordionMultiStateProps = AccordionBaseStateProps & WritableBoxedValues<{
+    value: string[];
+}>;
+export declare class AccordionMultiState extends AccordionBaseState {
+    #private;
+    isMulti: true;
+    constructor(props: AccordionMultiStateProps);
+    includesItem: (item: string) => boolean;
+    toggleItem: (item: string) => void;
+}
+type AccordionItemStateProps = WithRefProps<ReadableBoxedValues<{
+    value: string;
+    disabled: boolean;
+}> & {
+    rootState: AccordionState;
+}>;
+export declare class AccordionItemState {
+    #private;
+    value: AccordionItemStateProps["value"];
+    disabled: AccordionItemStateProps["disabled"];
+    root: AccordionState;
+    isActive: boolean;
+    isDisabled: boolean;
+    constructor(props: AccordionItemStateProps);
+    updateValue: () => void;
+    createTrigger(props: AccordionTriggerStateProps): AccordionTriggerState;
+    createContent(props: AccordionContentStateProps): AccordionContentState;
+    createHeader(props: AccordionHeaderStateProps): AccordionHeaderState;
+    props: {
+        readonly id: string;
+        readonly "data-state": "open" | "closed";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-accordion-item": "";
+    };
+}
+type AccordionTriggerStateProps = WithRefProps<ReadableBoxedValues<{
+    disabled: boolean | null | undefined;
+}>>;
+declare class AccordionTriggerState {
+    #private;
+    constructor(props: AccordionTriggerStateProps, itemState: AccordionItemState);
+    props: {
+        readonly id: string;
+        readonly disabled: boolean;
+        readonly "aria-expanded": "false" | "true";
+        readonly "aria-disabled": "false" | "true";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-state": "open" | "closed";
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-accordion-trigger": "";
+        readonly tabindex: 0;
+        readonly onclick: () => void;
+        readonly onkeydown: (e: KeyboardEvent) => void;
+    };
+}
+type AccordionContentStateProps = WithRefProps<ReadableBoxedValues<{
+    forceMount: boolean;
+}>>;
+declare class AccordionContentState {
+    #private;
+    item: AccordionItemState;
+    present: boolean;
+    constructor(props: AccordionContentStateProps, item: AccordionItemState);
+    snippetProps: {
+        open: boolean;
+    };
+    props: {
+        readonly id: string;
+        readonly "data-state": "open" | "closed";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-accordion-content": "";
+        readonly style: {
+            readonly "--bits-accordion-content-height": `${number}px`;
+            readonly "--bits-accordion-content-width": `${number}px`;
+        };
+    };
+}
+type AccordionHeaderStateProps = WithRefProps<ReadableBoxedValues<{
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+}>>;
+declare class AccordionHeaderState {
+    #private;
+    constructor(props: AccordionHeaderStateProps, item: AccordionItemState);
+    props: {
+        readonly id: string;
+        readonly role: "heading";
+        readonly "aria-level": 3 | 4 | 2 | 1 | 5 | 6;
+        readonly "data-heading-level": 3 | 4 | 2 | 1 | 5 | 6;
+        readonly "data-state": "open" | "closed";
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-accordion-header": "";
+    };
+}
+type AccordionState = AccordionSingleState | AccordionMultiState;
+type InitAccordionProps = WithRefProps<{
+    type: "single" | "multiple";
+    value: Box<string> | Box<string[]>;
+} & ReadableBoxedValues<{
+    disabled: boolean;
+    orientation: Orientation;
+    loop: boolean;
+}>>;
+export declare function useAccordionRoot(props: InitAccordionProps): AccordionState;
+export declare function useAccordionItem(props: Omit<AccordionItemStateProps, "rootState">): AccordionItemState;
+export declare function useAccordionTrigger(props: AccordionTriggerStateProps): AccordionTriggerState;
+export declare function useAccordionContent(props: AccordionContentStateProps): AccordionContentState;
+export declare function useAccordionHeader(props: AccordionHeaderStateProps): AccordionHeaderState;
+export {};

package/dist/bits/accordion/accordion.svelte.js

@@ -0,0 +1,281 @@
+import { afterTick } from "../../internal/afterTick.js";
+import { getAriaDisabled, getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+import { useRefById } from "../../internal/useRefById.svelte.js";
+import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
+import { createContext } from "../../internal/createContext.js";
+const ACCORDION_ROOT_ATTR = "data-accordion-root";
+const ACCORDION_TRIGGER_ATTR = "data-accordion-trigger";
+const ACCORDION_CONTENT_ATTR = "data-accordion-content";
+const ACCORDION_ITEM_ATTR = "data-accordion-item";
+const ACCORDION_HEADER_ATTR = "data-accordion-header";
+class AccordionBaseState {
+    #id;
+    #ref;
+    disabled;
+    #loop;
+    orientation;
+    rovingFocusGroup;
+    constructor(props) {
+        this.#id = props.id;
+        this.disabled = props.disabled;
+        this.#ref = props.ref;
+        useRefById({
+            id: props.id,
+            ref: this.#ref,
+        });
+        this.orientation = props.orientation;
+        this.#loop = props.loop;
+        this.rovingFocusGroup = useRovingFocus({
+            rootNodeId: this.#id,
+            candidateAttr: ACCORDION_TRIGGER_ATTR,
+            loop: this.#loop,
+            orientation: this.orientation,
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.#id.current,
+        "data-orientation": getDataOrientation(this.orientation.current),
+        "data-disabled": getDataDisabled(this.disabled.current),
+        [ACCORDION_ROOT_ATTR]: "",
+    }));
+}
+export class AccordionSingleState extends AccordionBaseState {
+    #value;
+    isMulti = false;
+    constructor(props) {
+        super(props);
+        this.#value = props.value;
+    }
+    includesItem = (item) => {
+        return this.#value.current === item;
+    };
+    toggleItem = (item) => {
+        this.#value.current = this.includesItem(item) ? "" : item;
+    };
+}
+export class AccordionMultiState extends AccordionBaseState {
+    #value;
+    isMulti = true;
+    constructor(props) {
+        super(props);
+        this.#value = props.value;
+    }
+    includesItem = (item) => {
+        return this.#value.current.includes(item);
+    };
+    toggleItem = (item) => {
+        if (this.includesItem(item)) {
+            this.#value.current = this.#value.current.filter((v) => v !== item);
+        }
+        else {
+            this.#value.current = [...this.#value.current, item];
+        }
+    };
+}
+export class AccordionItemState {
+    #id;
+    #ref;
+    value;
+    disabled;
+    root;
+    isActive = $derived.by(() => this.root.includesItem(this.value.current));
+    isDisabled = $derived.by(() => this.disabled.current || this.root.disabled.current);
+    constructor(props) {
+        this.value = props.value;
+        this.disabled = props.disabled;
+        this.root = props.rootState;
+        this.#id = props.id;
+        this.#ref = props.ref;
+        useRefById({
+            id: this.#id,
+            ref: this.#ref,
+            condition: () => this.isActive,
+        });
+    }
+    updateValue = () => {
+        this.root.toggleItem(this.value.current);
+    };
+    createTrigger(props) {
+        return new AccordionTriggerState(props, this);
+    }
+    createContent(props) {
+        return new AccordionContentState(props, this);
+    }
+    createHeader(props) {
+        return new AccordionHeaderState(props, this);
+    }
+    props = $derived.by(() => ({
+        id: this.#id.current,
+        "data-state": getDataOpenClosed(this.isActive),
+        "data-disabled": getDataDisabled(this.isDisabled),
+        "data-orientation": getDataOrientation(this.root.orientation.current),
+        [ACCORDION_ITEM_ATTR]: "",
+    }));
+}
+class AccordionTriggerState {
+    #ref;
+    #disabled;
+    #id;
+    #root;
+    #itemState;
+    #isDisabled = $derived.by(() => this.#disabled.current ||
+        this.#itemState.disabled.current ||
+        this.#root.disabled.current);
+    constructor(props, itemState) {
+        this.#disabled = props.disabled;
+        this.#itemState = itemState;
+        this.#root = itemState.root;
+        this.#id = props.id;
+        this.#ref = props.ref;
+        useRefById({
+            id: props.id,
+            ref: this.#ref,
+        });
+    }
+    #onclick = () => {
+        if (this.#isDisabled)
+            return;
+        this.#itemState.updateValue();
+    };
+    #onkeydown = (e) => {
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#itemState.updateValue();
+            return;
+        }
+        this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
+    };
+    props = $derived.by(() => ({
+        id: this.#id.current,
+        disabled: this.#isDisabled,
+        "aria-expanded": getAriaExpanded(this.#itemState.isActive),
+        "aria-disabled": getAriaDisabled(this.#isDisabled),
+        "data-disabled": getDataDisabled(this.#isDisabled),
+        "data-state": getDataOpenClosed(this.#itemState.isActive),
+        "data-orientation": getDataOrientation(this.#root.orientation.current),
+        [ACCORDION_TRIGGER_ATTR]: "",
+        tabindex: 0,
+        //
+        onclick: this.#onclick,
+        onkeydown: this.#onkeydown,
+    }));
+}
+class AccordionContentState {
+    item;
+    #ref;
+    #id;
+    #originalStyles = undefined;
+    #isMountAnimationPrevented = false;
+    #width = $state(0);
+    #height = $state(0);
+    #forceMount;
+    present = $derived.by(() => this.#forceMount.current || this.item.isActive);
+    constructor(props, item) {
+        this.item = item;
+        this.#forceMount = props.forceMount;
+        this.#isMountAnimationPrevented = this.item.isActive;
+        this.#id = props.id;
+        this.#ref = props.ref;
+        useRefById({
+            id: this.#id,
+            ref: this.#ref,
+        });
+        $effect.pre(() => {
+            const rAF = requestAnimationFrame(() => {
+                this.#isMountAnimationPrevented = false;
+            });
+            return () => {
+                cancelAnimationFrame(rAF);
+            };
+        });
+        $effect(() => {
+            this.present;
+            const node = this.#ref.current;
+            if (!node)
+                return;
+            afterTick(() => {
+                if (!this.#ref.current)
+                    return;
+                // get the dimensions of the element
+                this.#originalStyles = this.#originalStyles || {
+                    transitionDuration: node.style.transitionDuration,
+                    animationName: node.style.animationName,
+                };
+                // block any animations/transitions so the element renders at full dimensions
+                node.style.transitionDuration = "0s";
+                node.style.animationName = "none";
+                const rect = node.getBoundingClientRect();
+                this.#height = rect.height;
+                this.#width = rect.width;
+                // unblock any animations/transitions that were originally set if not the initial render
+                if (!this.#isMountAnimationPrevented) {
+                    const { animationName, transitionDuration } = this.#originalStyles;
+                    node.style.transitionDuration = transitionDuration;
+                    node.style.animationName = animationName;
+                }
+            });
+        });
+    }
+    snippetProps = $derived.by(() => ({
+        open: this.item.isActive,
+    }));
+    props = $derived.by(() => ({
+        id: this.#id.current,
+        "data-state": getDataOpenClosed(this.item.isActive),
+        "data-disabled": getDataDisabled(this.item.isDisabled),
+        "data-orientation": getDataOrientation(this.item.root.orientation.current),
+        [ACCORDION_CONTENT_ATTR]: "",
+        style: {
+            "--bits-accordion-content-height": `${this.#height}px`,
+            "--bits-accordion-content-width": `${this.#width}px`,
+        },
+    }));
+}
+class AccordionHeaderState {
+    #id;
+    #ref;
+    #level;
+    #item;
+    constructor(props, item) {
+        this.#level = props.level;
+        this.#id = props.id;
+        this.#ref = props.ref;
+        useRefById({
+            id: this.#id,
+            ref: this.#ref,
+        });
+        this.#item = item;
+    }
+    props = $derived.by(() => ({
+        id: this.#id.current,
+        role: "heading",
+        "aria-level": this.#level.current,
+        "data-heading-level": this.#level.current,
+        "data-state": getDataOpenClosed(this.#item.isActive),
+        "data-orientation": getDataOrientation(this.#item.root.orientation.current),
+        [ACCORDION_HEADER_ATTR]: "",
+    }));
+}
+const [setAccordionRootContext, getAccordionRootContext] = createContext("Accordion.Root");
+const [setAccordionItemContext, getAccordionItemContext] = createContext("Accordion.Item");
+export function useAccordionRoot(props) {
+    const { type, ...rest } = props;
+    const rootState = type === "single"
+        ? new AccordionSingleState(rest)
+        : new AccordionMultiState(rest);
+    return setAccordionRootContext(rootState);
+}
+export function useAccordionItem(props) {
+    const rootState = getAccordionRootContext();
+    return setAccordionItemContext(new AccordionItemState({ ...props, rootState }));
+}
+export function useAccordionTrigger(props) {
+    return getAccordionItemContext().createTrigger(props);
+}
+export function useAccordionContent(props) {
+    return getAccordionItemContext().createContent(props);
+}
+export function useAccordionHeader(props) {
+    return getAccordionItemContext().createHeader(props);
+}

package/dist/bits/accordion/components/accordion-content.svelte

@@ -1,57 +1,44 @@
-<script>import { melt } from "@melt-ui/svelte";
-import { getContent } from "../ctx.js";
-export let transition = void 0;
-export let transitionConfig = void 0;
-export let inTransition = void 0;
-export let inTransitionConfig = void 0;
-export let outTransition = void 0;
-export let outTransitionConfig = void 0;
-export let asChild = false;
-export let el = void 0;
-const {
-  elements: { content },
-  helpers: { isSelected },
-  props,
-  getAttrs
-} = getContent();
-const attrs = getAttrs("content");
-$:
-  builder = $content(props);
-$:
-  Object.assign(builder, attrs);
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import { useAccordionContent } from "../accordion.svelte.js";
+	import type { AccordionContentProps } from "../types.js";
+	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
+	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/useId.js";
+
+	let {
+		child,
+		ref = $bindable(null),
+		id = useId(),
+		forceMount = false,
+		children,
+		...restProps
+	}: AccordionContentProps = $props();
+
+	const contentState = useAccordionContent({
+		forceMount: box.with(() => forceMount),
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 </script>
 
-{#if asChild && $isSelected(props)}
-	<slot {builder} />
-{:else if transition && $isSelected(props)}
-	<div
-		bind:this={el}
-		transition:transition={transitionConfig}
-		{...builder} use:builder.action
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && outTransition && $isSelected(props)}
-	<div
-		bind:this={el}
-		in:inTransition={inTransitionConfig}
-		out:outTransition={outTransitionConfig}
-		{...builder} use:builder.action
-		{...$$restProps}
-	>
-		<slot {builder} />
-	</div>
-{:else if inTransition && $isSelected(props)}
-	<div bind:this={el} in:inTransition={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
-	</div>
-{:else if outTransition && $isSelected(props)}
-	<div bind:this={el} out:outTransition={outTransitionConfig} {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
-	</div>
-{:else if $isSelected(props)}
-	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
-	</div>
-{/if}
+<PresenceLayer forceMount={true} present={contentState.present} {id}>
+	{#snippet presence({ present })}
+		{@const mergedProps = mergeProps(restProps, contentState.props, {
+			hidden: forceMount ? undefined : !present.current,
+		})}
+		{#if child}
+			{@render child({
+				props: mergedProps,
+				...contentState.snippetProps,
+			})}
+		{:else}
+			<div {...mergedProps}>
+				{@render children?.(contentState.snippetProps)}
+			</div>
+		{/if}
+	{/snippet}
+</PresenceLayer>

package/dist/bits/accordion/components/accordion-content.svelte.d.ts

@@ -1,30 +1,19 @@
-import { SvelteComponent } from "svelte";
-import type { ContentProps } from "../index.js";
-import type { Transition } from "../../../internal/index.js";
-declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
-    props(): ContentProps<T, In, Out>;
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
+import type { AccordionContentProps } from "../types.js";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots(): {
-        default: {
-            builder: {
-                'data-state': string;
-                'data-disabled': boolean | undefined;
-                'data-value': string;
-                hidden: boolean | undefined;
-                style: string;
-            } & {
-                [x: `data-melt-${string}`]: "";
-            } & {
-                action: (node: HTMLElement) => void;
-            };
-        };
-    };
-}
-export type AccordionContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
-export type AccordionContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
-export type AccordionContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
-export default class AccordionContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<AccordionContentProps<T, In, Out>, AccordionContentEvents<T, In, Out>, AccordionContentSlots<T, In, Out>> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const AccordionContent: $$__sveltets_2_IsomorphicComponent<AccordionContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type AccordionContent = InstanceType<typeof AccordionContent>;
+export default AccordionContent;

package/dist/bits/accordion/components/accordion-header.svelte

@@ -1,23 +1,35 @@
-<script>import { melt } from "@melt-ui/svelte";
-import { getCtx } from "../ctx.js";
-export let level = 3;
-export let asChild = false;
-export let el = void 0;
-const {
-  elements: { heading: header },
-  getAttrs
-} = getCtx();
-const attrs = getAttrs("header");
-$:
-  builder = $header(level);
-$:
-  Object.assign(builder, attrs);
+<script lang="ts">
+	import { box } from "svelte-toolbelt";
+	import type { AccordionHeaderProps } from "../types.js";
+	import { useAccordionHeader } from "../accordion.svelte.js";
+	import { mergeProps } from "../../../internal/mergeProps.js";
+	import { useId } from "../../../internal/useId.js";
+
+	let {
+		id = useId(),
+		level = 2,
+		children,
+		child,
+		ref = $bindable(null),
+		...restProps
+	}: AccordionHeaderProps = $props();
+
+	const headerState = useAccordionHeader({
+		id: box.with(() => id),
+		level: box.with(() => level),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, headerState.props));
 </script>
 
-{#if asChild}
-	<slot {builder} />
+{#if child}
+	{@render child({ props: mergedProps })}
 {:else}
-	<div bind:this={el} {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} />
+	<div {...mergedProps}>
+		{@render children?.()}
 	</div>
 {/if}

package/dist/bits/accordion/components/accordion-header.svelte.d.ts

@@ -1,27 +1,19 @@
-import { SvelteComponent } from "svelte";
-import type { HeaderProps } from "../index.js";
-declare const __propDef: {
-    props: HeaderProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
+import type { AccordionHeaderProps } from "../types.js";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {
-        default: {
-            builder: {
-                role: string;
-                'aria-level': number;
-                'data-heading-level': number;
-            } & {
-                [x: `data-melt-${string}`]: "";
-            } & {
-                action: import("svelte/action").Action<any, any, Record<never, any>>;
-            };
-        };
-    };
-};
-export type AccordionHeaderProps = typeof __propDef.props;
-export type AccordionHeaderEvents = typeof __propDef.events;
-export type AccordionHeaderSlots = typeof __propDef.slots;
-export default class AccordionHeader extends SvelteComponent<AccordionHeaderProps, AccordionHeaderEvents, AccordionHeaderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const AccordionHeader: $$__sveltets_2_IsomorphicComponent<AccordionHeaderProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type AccordionHeader = InstanceType<typeof AccordionHeader>;
+export default AccordionHeader;