bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/bits/button/components/button.svelte

@@ -1,14 +1,24 @@
 <script lang="ts">
-	import type { RootProps } from "../index.js";
+	import type { ButtonRootProps } from "../types.js";
 
-	let { href, type, children, ref, ...restProps }: RootProps = $props();
+	let {
+		href,
+		type,
+		children,
+		disabled = false,
+		ref = $bindable(),
+		...restProps
+	}: ButtonRootProps = $props();
 </script>
 
 <svelte:element
 	this={href ? "a" : "button"}
 	type={href ? undefined : type}
-	{href}
-	tabindex="0"
+	href={href && !disabled ? href : undefined}
+	disabled={href ? undefined : disabled}
+	aria-disabled={href ? disabled : undefined}
+	role={href && disabled ? "link" : undefined}
+	tabindex={href && disabled ? -1 : 0}
 	bind:this={ref}
 	{...restProps}
 >

package/dist/bits/button/components/button.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { RootProps } from "../index.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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Button: $$__sveltets_2_IsomorphicComponent<RootProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Button = InstanceType<typeof Button>;
+import type { ButtonRootProps } from "../types.js";
+declare const Button: import("svelte").Component<ButtonRootProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/bits/button/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/button.svelte";
+export type { ButtonRootProps as RootProps } from "./types.js";

package/dist/bits/button/exports.js

@@ -0,0 +1 @@
+export { default as Root } from "./components/button.svelte";

package/dist/bits/button/index.d.ts

@@ -1,2 +1 @@
-export { default as Root } from "./components/button.svelte";
-export type { ButtonProps as RootProps } from "./types.js";
+export * as Button from "./exports.js";

package/dist/bits/button/index.js

@@ -1 +1 @@
-export { default as Root } from "./components/button.svelte";
+export * as Button from "./exports.js";

package/dist/bits/button/types.d.ts

@@ -1,16 +1,18 @@
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 import type { WithoutChildren } from "svelte-toolbelt";
 import type { WithChildren } from "../../shared/index.js";
-export type ButtonPropsWithoutHTML = WithChildren<{
+export type ButtonRootPropsWithoutHTML = WithChildren<{
     ref?: HTMLElement | null;
 }>;
-type AnchorElement = ButtonPropsWithoutHTML & WithoutChildren<Omit<HTMLAnchorAttributes, "href" | "type">> & {
+type AnchorElement = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLAnchorAttributes, "href" | "type">> & {
     href: HTMLAnchorAttributes["href"];
     type?: never;
+    disabled?: HTMLButtonAttributes["disabled"];
 };
-type ButtonElement = ButtonPropsWithoutHTML & WithoutChildren<Omit<HTMLButtonAttributes, "type" | "href">> & {
+type ButtonElement = ButtonRootPropsWithoutHTML & WithoutChildren<Omit<HTMLButtonAttributes, "type" | "href">> & {
     type?: HTMLButtonAttributes["type"];
     href?: never;
+    disabled?: HTMLButtonAttributes["disabled"];
 };
-export type ButtonProps = AnchorElement | ButtonElement;
+export type ButtonRootProps = AnchorElement | ButtonElement;
 export {};

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

@@ -1,11 +1,12 @@
 import { type DateValue } from "@internationalized/date";
-import type { RangeCalendarCellState, RangeCalendarRootState } from "../range-calendar/range-calendar.svelte.js";
+import { Context } from "runed";
+import type { RangeCalendarRootState } from "../range-calendar/range-calendar.svelte.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { WithRefProps } from "../../internal/types.js";
-import { type Announcer } from "../../shared/date/announcer.js";
-import { type CalendarParts } from "../../shared/date/calendar-helpers.svelte.js";
-import { type Formatter } from "../../shared/date/formatter.js";
-import type { DateMatcher, Month } from "../../shared/date/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
+import type { DateMatcher, Month } from "../../shared/index.js";
+import { type Announcer } from "../../internal/date-time/announcer.js";
+import { type Formatter } from "../../internal/date-time/formatter.js";
+import { type CalendarParts } from "../../internal/date-time/calendar-helpers.svelte.js";
 type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     value: DateValue | undefined | DateValue[];
     placeholder: DateValue;
@@ -34,7 +35,6 @@ type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     onDateSelect?: () => void;
 }>>;
 export declare class CalendarRootState {
-    #private;
     ref: CalendarRootStateProps["ref"];
     id: CalendarRootStateProps["id"];
     value: CalendarRootStateProps["value"];
@@ -63,6 +63,7 @@ export declare class CalendarRootState {
     formatter: Formatter;
     accessibleHeadingId: string;
     constructor(props: CalendarRootStateProps);
+    setMonths(months: Month<DateValue>[]): void;
     /**
      * This derived state holds an array of localized day names for the current
      * locale and calendar view. It dynamically syncs with the 'weekStartsOn' option,
@@ -74,11 +75,11 @@ export declare class CalendarRootState {
     /**
      * Navigates to the next page of the calendar.
      */
-    nextPage: () => void;
+    nextPage(): void;
     /**
      * Navigates to the previous page of the calendar.
      */
-    prevPage: () => void;
+    prevPage(): void;
     nextYear(): void;
     prevYear(): void;
     setYear(year: number): void;
@@ -91,14 +92,18 @@ export declare class CalendarRootState {
     isOutsideVisibleMonths(date: DateValue): boolean;
     isDateDisabled(date: DateValue): boolean;
     isDateSelected(date: DateValue): boolean;
-    handleCellClick: (_: Event, date: DateValue) => void;
+    shiftFocus(node: HTMLElement, add: number): void;
+    handleCellClick(_: Event, date: DateValue): void;
+    handleMultipleUpdate(prev: DateValue[] | undefined, date: DateValue): DateValue[] | undefined;
+    handleSingleUpdate(prev: DateValue | undefined, date: DateValue): DateValue | undefined;
+    onkeydown(event: BitsKeyboardEvent): void;
     snippetProps: {
         months: Month<DateValue>[];
         weekdays: string[];
     };
     getBitsAttr(part: CalendarParts): string;
     props: {
-        readonly onkeydown: (event: KeyboardEvent) => void;
+        readonly onkeydown: (event: BitsKeyboardEvent) => void;
         readonly id: string;
         readonly role: "application";
         readonly "aria-label": string;
@@ -106,16 +111,6 @@ export declare class CalendarRootState {
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
     };
-    createHeading(props: CalendarHeadingStateProps): CalendarHeadingState;
-    createGrid(props: CalendarGridStateProps): CalendarGridState;
-    createCell(props: CalendarCellStateProps): CalendarCellState;
-    createNextButton(props: CalendarNextButtonStateProps): CalendarNextButtonState;
-    createPrevButton(props: CalendarPrevButtonStateProps): CalendarPrevButtonState;
-    createGridBody(props: CalendarGridBodyStateProps): CalendarGridBodyState;
-    createGridHead(props: CalendarGridHeadStateProps): CalendarGridHeadState;
-    createGridRow(props: CalendarGridRowStateProps): CalendarGridRowState;
-    createHeadCell(props: CalendarHeadCellStateProps): CalendarHeadCellState;
-    createHeader(props: CalendarHeaderStateProps): CalendarHeaderState;
 }
 export type CalendarHeadingStateProps = WithRefProps;
 export declare class CalendarHeadingState {
@@ -144,7 +139,7 @@ declare class CalendarCellState {
     month: CalendarCellStateProps["month"];
     cellDate: Date;
     isDisabled: boolean;
-    isUnvailable: boolean;
+    isUnavailable: boolean;
     isDateToday: boolean;
     isOutsideMonth: boolean;
     isOutsideVisibleMonths: boolean;
@@ -179,10 +174,9 @@ declare class CalendarCellState {
         readonly "data-disabled": "" | undefined;
         readonly id: string;
         readonly role: "gridcell";
-        readonly "aria-selected": "false" | "true";
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-selected": "true" | "false";
+        readonly "aria-disabled": "true" | "false";
     };
-    createDay(props: CalendarDayStateProps): CalendarDayState;
 }
 type CalendarDayStateProps = WithRefProps;
 declare class CalendarDayState {
@@ -191,6 +185,7 @@ declare class CalendarDayState {
     id: CalendarDayStateProps["id"];
     ref: CalendarDayStateProps["ref"];
     constructor(props: CalendarDayStateProps, cell: CalendarCellState);
+    onclick(e: BitsMouseEvent): void;
     snippetProps: {
         disabled: boolean;
         unavailable: boolean;
@@ -200,7 +195,7 @@ declare class CalendarDayState {
     props: {
         readonly tabindex: number | undefined;
         readonly "data-bits-day": "";
-        readonly onclick: (e: MouseEvent) => void;
+        readonly onclick: (e: BitsMouseEvent) => void;
         readonly "data-unavailable": "" | undefined;
         readonly "data-today": "" | undefined;
         readonly "data-outside-month": "" | undefined;
@@ -212,47 +207,47 @@ declare class CalendarDayState {
         readonly id: string;
         readonly role: "button";
         readonly "aria-label": string;
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-disabled": "true" | "false";
     };
 }
 export type CalendarNextButtonStateProps = WithRefProps;
 export declare class CalendarNextButtonState {
-    #private;
     readonly root: CalendarRootState | RangeCalendarRootState;
     id: CalendarNextButtonStateProps["id"];
     ref: CalendarNextButtonStateProps["ref"];
     isDisabled: boolean;
     constructor(props: CalendarNextButtonStateProps, root: CalendarRootState | RangeCalendarRootState);
+    onclick(_: BitsMouseEvent): void;
     props: {
-        readonly [x: string]: string | boolean | (() => void) | undefined;
+        readonly [x: string]: string | boolean | ((_: BitsMouseEvent) => void) | undefined;
         readonly id: string;
         readonly role: "button";
         readonly type: "button";
         readonly "aria-label": "Next";
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-disabled": "true" | "false";
         readonly "data-disabled": "" | undefined;
         readonly disabled: boolean;
-        readonly onclick: () => void;
+        readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
 export type CalendarPrevButtonStateProps = WithRefProps;
 export declare class CalendarPrevButtonState {
-    #private;
     readonly root: CalendarRootState | RangeCalendarRootState;
     id: CalendarPrevButtonStateProps["id"];
     ref: CalendarPrevButtonStateProps["ref"];
     isDisabled: boolean;
     constructor(props: CalendarPrevButtonStateProps, root: CalendarRootState | RangeCalendarRootState);
+    onclick(_: BitsMouseEvent): void;
     props: {
-        readonly [x: string]: string | boolean | (() => void) | undefined;
+        readonly [x: string]: string | boolean | ((_: BitsMouseEvent) => void) | undefined;
         readonly id: string;
         readonly role: "button";
         readonly type: "button";
         readonly "aria-label": "Previous";
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-disabled": "true" | "false";
         readonly "data-disabled": "" | undefined;
         readonly disabled: boolean;
-        readonly onclick: () => void;
+        readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
 export type CalendarGridStateProps = WithRefProps;
@@ -266,8 +261,8 @@ export declare class CalendarGridState {
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "grid";
-        readonly "aria-readonly": "false" | "true";
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-readonly": "true" | "false";
+        readonly "aria-disabled": "true" | "false";
         readonly "data-readonly": "" | undefined;
         readonly "data-disabled": "" | undefined;
     };
@@ -337,48 +332,13 @@ export declare class CalendarHeaderState {
         readonly "data-readonly": "" | undefined;
     };
 }
-export declare function useCalendarRoot(props: CalendarRootStateProps): CalendarRootState | RangeCalendarRootState;
+export declare const CalendarRootContext: Context<RangeCalendarRootState | CalendarRootState>;
+export declare function useCalendarRoot(props: CalendarRootStateProps): RangeCalendarRootState | CalendarRootState;
 export declare function useCalendarGrid(props: CalendarGridStateProps): CalendarGridState;
-export declare function useCalendarCell(props: CalendarCellStateProps): RangeCalendarCellState | CalendarCellState;
+export declare function useCalendarCell(props: CalendarCellStateProps): CalendarCellState;
 export declare function useCalendarNextButton(props: CalendarNextButtonStateProps): CalendarNextButtonState;
 export declare function useCalendarPrevButton(props: CalendarPrevButtonStateProps): CalendarPrevButtonState;
-export declare function useCalendarDay(props: CalendarDayStateProps): {
-    id: import("svelte-toolbelt").ReadableBox<string>;
-    ref: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
-    readonly cell: RangeCalendarCellState;
-    "__#63@#tabindex": number | undefined;
-    "__#63@#onclick": (e: MouseEvent) => void;
-    "__#63@#onmouseenter": () => void;
-    "__#63@#onfocusin": () => void;
-    snippetProps: {
-        disabled: boolean;
-        unavailable: boolean;
-        selected: boolean;
-        day: string;
-    };
-    props: {
-        readonly tabindex: number | undefined;
-        readonly "data-bits-day": "";
-        readonly onclick: (e: MouseEvent) => void;
-        readonly onmouseenter: () => void;
-        readonly onfocusin: () => void;
-        readonly "data-unavailable": "" | undefined;
-        readonly "data-today": "" | undefined;
-        readonly "data-outside-month": "" | undefined;
-        readonly "data-outside-visible-months": "" | undefined;
-        readonly "data-focused": "" | undefined;
-        readonly "data-selection-start": "" | undefined;
-        readonly "data-selection-end": "" | undefined;
-        readonly "data-highlighted": "" | undefined;
-        readonly "data-selected": "" | undefined;
-        readonly "data-value": string;
-        readonly "data-disabled": "" | undefined;
-        readonly id: string;
-        readonly role: "button";
-        readonly "aria-label": string;
-        readonly "aria-disabled": "false" | "true";
-    };
-} | CalendarDayState;
+export declare function useCalendarDay(props: CalendarDayStateProps): CalendarDayState;
 export declare function useCalendarGridBody(props: CalendarGridBodyStateProps): CalendarGridBodyState;
 export declare function useCalendarGridHead(props: CalendarGridHeadStateProps): CalendarGridHeadState;
 export declare function useCalendarGridRow(props: CalendarGridRowStateProps): CalendarGridRowState;