@johly/bits-ui 2.18.1

package/dist/internal/use-arrow-navigation.d.ts

@@ -0,0 +1,62 @@
+import type { Direction } from "../shared/index.js";
+type ArrowKeyOptions = "horizontal" | "vertical" | "both";
+interface ArrowNavigationOptions {
+    /**
+     * The arrow key options to allow navigation
+     *
+     * @defaultValue "both"
+     */
+    arrowKeyOptions?: ArrowKeyOptions;
+    /**
+     * The selector to find the collection items in the parent element.
+     */
+    candidateSelector: string;
+    /**
+     * The parent element where contains all the collection items, this will collect every item to be used when nav
+     * It will be ignored if attributeName is provided
+     *
+     * @defaultValue []
+     */
+    itemsArray?: HTMLElement[];
+    /**
+     * Allow loop navigation. If false, it will stop at the first and last element
+     *
+     * @defaultValue true
+     */
+    loop?: boolean;
+    /**
+     * The orientation of the collection
+     *
+     * @defaultValue "ltr"
+     */
+    dir?: Direction;
+    /**
+     * Prevent the scroll when navigating. This happens when the direction of the
+     * key matches the scroll direction of any ancestor scrollable elements.
+     *
+     * @defaultValue true
+     */
+    preventScroll?: boolean;
+    /**
+     * By default all currentElement would trigger navigation. If `true`, currentElement nodeName in the ignore list will return null
+     *
+     * @defaultValue false
+     */
+    enableIgnoredElement?: boolean;
+    /**
+     * Focus the element after navigation
+     *
+     * @defaultValue false
+     */
+    focus?: boolean;
+}
+/**
+ *
+ * @param e               Keyboard event
+ * @param currentElement  Event initiator element or any element that wants to handle the navigation
+ * @param parentElement   Parent element where contains all the collection items, this will collect every item to be used when nav
+ * @param options         further options
+ * @returns               the navigated html element or null if none
+ */
+export declare function useArrowNavigation(e: KeyboardEvent, currentElement: HTMLElement, parentElement: HTMLElement | undefined, options: ArrowNavigationOptions): HTMLElement | null;
+export {};

package/dist/internal/use-arrow-navigation.js

@@ -0,0 +1,76 @@
+const ignoredElement = ["INPUT", "TEXTAREA"];
+/**
+ *
+ * @param e               Keyboard event
+ * @param currentElement  Event initiator element or any element that wants to handle the navigation
+ * @param parentElement   Parent element where contains all the collection items, this will collect every item to be used when nav
+ * @param options         further options
+ * @returns               the navigated html element or null if none
+ */
+export function useArrowNavigation(e, currentElement, parentElement, options) {
+    if (!currentElement ||
+        (options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName))) {
+        return null;
+    }
+    const { arrowKeyOptions = "both", candidateSelector: attributeName, itemsArray = [], loop = true, dir = "ltr", preventScroll = true, focus = false, } = options;
+    const [right, left, up, down, home, end] = [
+        e.key === "ArrowRight",
+        e.key === "ArrowLeft",
+        e.key === "ArrowUp",
+        e.key === "ArrowDown",
+        e.key === "Home",
+        e.key === "End",
+    ];
+    const goingVertical = up || down;
+    const goingHorizontal = right || left;
+    if (!home &&
+        !end &&
+        ((!goingVertical && !goingHorizontal) ||
+            (arrowKeyOptions === "vertical" && goingHorizontal) ||
+            (arrowKeyOptions === "horizontal" && goingVertical)))
+        return null;
+    const allCollectionItems = parentElement
+        ? Array.from(parentElement.querySelectorAll(attributeName))
+        : itemsArray;
+    if (!allCollectionItems.length)
+        return null;
+    if (preventScroll)
+        e.preventDefault();
+    let item = null;
+    if (goingHorizontal || goingVertical) {
+        const goForward = goingVertical ? down : dir === "ltr" ? right : left;
+        item = findNextFocusableElement(allCollectionItems, currentElement, {
+            goForward,
+            loop,
+        });
+    }
+    else if (home) {
+        item = allCollectionItems.at(0) || null;
+    }
+    else if (end) {
+        item = allCollectionItems.at(-1) || null;
+    }
+    if (focus)
+        item?.focus();
+    return item;
+}
+/**
+ * Recursive function to find the next focusable element to avoid disabled elements
+ */
+function findNextFocusableElement(elements, currentElement, { goForward, loop }, iterations = elements.length) {
+    if (--iterations === 0)
+        return null;
+    const index = elements.indexOf(currentElement);
+    const newIndex = goForward ? index + 1 : index - 1;
+    if (!loop && (newIndex < 0 || newIndex >= elements.length))
+        return null;
+    const adjustedNewIndex = (newIndex + elements.length) % elements.length;
+    const candidate = elements[adjustedNewIndex];
+    if (!candidate)
+        return null;
+    const isDisabled = candidate.hasAttribute("disabled") && candidate.getAttribute("disabled") !== "false";
+    if (isDisabled) {
+        return findNextFocusableElement(elements, candidate, { goForward, loop }, iterations);
+    }
+    return candidate;
+}

package/dist/internal/use-id.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generates a unique ID based on a global counter.
+ */
+export declare function useId(prefix?: string): string;

package/dist/internal/use-id.js

@@ -0,0 +1,8 @@
+globalThis.bitsIdCounter ??= { current: 0 };
+/**
+ * Generates a unique ID based on a global counter.
+ */
+export function useId(prefix = "bits") {
+    globalThis.bitsIdCounter.current++;
+    return `${prefix}-${globalThis.bitsIdCounter.current}`;
+}

package/dist/internal/warn.d.ts

@@ -0,0 +1 @@
+export declare function warn(...messages: string[]): void;

package/dist/internal/warn.js

@@ -0,0 +1,15 @@
+import { DEV } from "esm-env";
+let set;
+if (DEV) {
+    set = new Set();
+}
+export function warn(...messages) {
+    if (!DEV)
+        return;
+    const msg = messages.join(" ");
+    if (set.has(msg))
+        return;
+    set.add(msg);
+    // oxlint-disable-next-line no-console
+    console.warn(`[Bits UI]: ${msg}`);
+}

package/dist/shared/attributes.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLImgAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLLiAttributes, HTMLSelectAttributes, HTMLTableAttributes, HTMLTdAttributes, HTMLThAttributes, SVGAttributes } from "svelte/elements";
+export type BitsDivAttributes = HTMLAttributes<HTMLDivElement>;
+export type BitsSpanAttributes = HTMLAttributes<HTMLSpanElement>;
+export type BitsHeadingAttributes = HTMLAttributes<HTMLHeadingElement>;
+export type BitsUListAttributes = HTMLAttributes<HTMLUListElement>;
+export type BitsElementAttributes = HTMLAttributes<HTMLElement>;
+export type BitsTableSectionAttributes = HTMLAttributes<HTMLTableSectionElement>;
+export type BitsTableRowAttributes = HTMLAttributes<HTMLTableRowElement>;
+export type BitsSVGElementAttributes = SVGAttributes<SVGElement>;
+export type BitsSelectAttributes = HTMLSelectAttributes;
+/**
+ * We override the `id` prop type to not allow it to be `null`. We rely on the
+ * `id` heavily in the internals of Bits UI for node references. We also override
+ * children to allow for custom children snippet props. We extend `style` to allow
+ * for either a `StyleProperties` object or a string of CSS properties.
+ */
+type BitsPrimitive<T> = Omit<T, "style" | "id" | "children"> & {
+    id?: string;
+};
+export type BitsPrimitiveButtonAttributes = BitsPrimitive<HTMLButtonAttributes>;
+export type BitsPrimitiveDivAttributes = BitsPrimitive<BitsDivAttributes>;
+export type BitsPrimitiveInputAttributes = BitsPrimitive<HTMLInputAttributes>;
+export type BitsPrimitiveSpanAttributes = BitsPrimitive<BitsSpanAttributes>;
+export type BitsPrimitiveImgAttributes = BitsPrimitive<HTMLImgAttributes>;
+export type BitsPrimitiveHeadingAttributes = BitsPrimitive<BitsHeadingAttributes>;
+export type BitsPrimitiveLabelAttributes = BitsPrimitive<HTMLLabelAttributes>;
+export type BitsPrimitiveSVGAttributes = BitsPrimitive<BitsSVGElementAttributes>;
+export type BitsPrimitiveAnchorAttributes = BitsPrimitive<HTMLAnchorAttributes>;
+export type BitsPrimitiveLiAttributes = BitsPrimitive<HTMLLiAttributes>;
+export type BitsPrimitiveElementAttributes = BitsPrimitive<BitsElementAttributes>;
+export type BitsPrimitiveUListAttributes = BitsPrimitive<BitsUListAttributes>;
+export type BitsPrimitiveTdAttributes = BitsPrimitive<HTMLTdAttributes>;
+export type BitsPrimitiveThAttributes = BitsPrimitive<HTMLThAttributes>;
+export type BitsPrimitiveTableAttributes = BitsPrimitive<HTMLTableAttributes>;
+export type BitsPrimitiveTbodyAttributes = BitsPrimitive<BitsTableSectionAttributes>;
+export type BitsPrimitiveTrAttributes = BitsPrimitive<BitsTableRowAttributes>;
+export type BitsPrimitiveTheadAttributes = BitsPrimitive<BitsTableSectionAttributes>;
+export type BitsPrimitiveHeaderAttributes = BitsPrimitive<BitsElementAttributes>;
+export type BitsPrimitiveSelectAttributes = BitsPrimitive<BitsSelectAttributes>;
+export {};

package/dist/shared/attributes.js

@@ -0,0 +1 @@
+export {};

package/dist/shared/css.d.ts

@@ -0,0 +1,9 @@
+import type * as CSS from "csstype";
+
+declare module "csstype" {
+	interface Properties {
+		// Allow any CSS Custom Properties
+		// oxlint-disable-next-line no-explicit-any
+		[index: `--${string}`]: any;
+	}
+}

package/dist/shared/date/types.d.ts

@@ -0,0 +1,100 @@
+import type { CalendarDateTime, DateValue, Time, ZonedDateTime } from "@internationalized/date";
+import type { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS } from "../../internal/date-time/field/parts.js";
+export type Granularity = "day" | "hour" | "minute" | "second";
+export type TimeGranularity = "hour" | "minute" | "second";
+export type HourCycle = 12 | 24;
+export type WeekStartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type DateMatcher = (date: DateValue) => boolean;
+export type TimeValue = Time | CalendarDateTime | ZonedDateTime;
+export type TimeValidator<T extends TimeValue> = (time: T) => string[] | string | void;
+/**
+ * A function that returns a string or array of strings as validation errors if the date is
+ * invalid, or nothing if the date is valid
+ */
+export type DateValidator = (date: DateValue) => string[] | string | void;
+/**
+ * A function that returns a string or array of strings as validation errors if the date range
+ * is invalid, or nothing if the date range is valid
+ */
+export type DateRangeValidator = (range: {
+    start: DateValue;
+    end: DateValue;
+}) => string[] | string | void;
+export type TimeRangeValidator<T extends TimeValue = Time> = (range: {
+    start: T;
+    end: T;
+}) => string[] | string | void;
+/**
+ * A callback fired when the date field's value is invalid. Use this to display an error
+ * message to the user.
+ */
+export type DateOnInvalid = (reason: "min" | "max" | "custom", msg?: string | string[]) => void;
+/**
+ * A callback fired when the time field's value is invalid. Use this to display an error
+ * message to the user.
+ */
+export type TimeOnInvalid = (reason: "min" | "max" | "custom", msg?: string | string[]) => void;
+export type DateRange = {
+    start: DateValue | undefined;
+    end: DateValue | undefined;
+};
+export type TimeRange<T extends TimeValue = Time> = {
+    start: T | undefined;
+    end: T | undefined;
+};
+export type Month<T> = {
+    /**
+     * A `DateValue` used to represent the month. Since days
+     * from the previous and next months may be included in the
+     * calendar grid, we need a source of truth for the value
+     * the grid is representing.
+     */
+    value: DateValue;
+    /**
+     * An array of arrays representing the weeks in the calendar.
+     * Each sub-array represents a week, and contains the dates for each
+     * day in that week. This structure is useful for rendering the calendar
+     * grid using a table, where each row represents a week and each cell
+     * represents a day.
+     */
+    weeks: T[][];
+    /**
+     * An array of all the dates in the current month, including dates from
+     * the previous and next months that are used to fill out the calendar grid.
+     * This array is useful for rendering the calendar grid in a customizable way,
+     * as it provides all the dates that should be displayed in the grid in a flat
+     * array.
+     */
+    dates: T[];
+};
+export type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number];
+export type EditableTimeSegmentPart = (typeof EDITABLE_TIME_SEGMENT_PARTS)[number];
+export type EditableSegmentPart = (typeof EDITABLE_SEGMENT_PARTS)[number];
+export type NonEditableSegmentPart = (typeof NON_EDITABLE_SEGMENT_PARTS)[number];
+export type SegmentPart = EditableSegmentPart | NonEditableSegmentPart;
+export type TimeSegmentPart = EditableTimeSegmentPart | "literal" | "timeZoneName";
+export type AnyTimeExceptLiteral = Exclude<TimeSegmentPart, "literal">;
+export type AnyExceptLiteral = Exclude<SegmentPart, "literal">;
+export type DayPeriod = "AM" | "PM" | null;
+export type DateSegmentObj = {
+    [K in DateSegmentPart]: string | null;
+};
+export type TimeSegmentObj = {
+    [K in EditableTimeSegmentPart]: K extends "dayPeriod" ? DayPeriod : string | null;
+};
+export type DateAndTimeSegmentObj = DateSegmentObj & TimeSegmentObj;
+export type SegmentValueObj = DateSegmentObj | DateAndTimeSegmentObj;
+export type SegmentContentObj = Record<EditableSegmentPart, string>;
+export type TimeSegmentValueObj = TimeSegmentObj;
+export type TimeSegmentContentObj = Record<EditableTimeSegmentPart, string>;
+export type SegmentState = {
+    lastKeyZero: boolean;
+    hasLeftFocus: boolean;
+    updating: string | null;
+};
+export type SegmentStateMap = {
+    [K in EditableSegmentPart]: SegmentState;
+};
+export type TimeSegmentStateMap = {
+    [K in EditableTimeSegmentPart]: SegmentState;
+};

package/dist/shared/date/types.js

@@ -0,0 +1 @@
+export {};

package/dist/shared/index.d.ts

@@ -0,0 +1,38 @@
+import type * as CSS from "csstype";
+export { REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS, } from "../bits/pin-input/pin-input.svelte.js";
+export type Selected<Value> = {
+    value: Value;
+    label?: string;
+};
+export type SegmentPart = "month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod" | "timeZoneName" | "literal";
+export type FocusTarget = string | HTMLElement | SVGElement | null;
+export type FocusProp = FocusTarget | ((defaultEl?: HTMLElement | null) => FocusTarget);
+export type StyleProperties = CSS.Properties & {
+    [str: `--${string}`]: any;
+};
+export type Orientation = "horizontal" | "vertical";
+export type Direction = "ltr" | "rtl";
+/**
+ * Controls positioning of the slider thumb.
+ *
+ * - `exact`: The thumb is centered exactly at the value of the slider.
+ * - `contain`: The thumb is centered exactly at the value of the slider, but will be contained within the slider track at the ends.
+ */
+export type SliderThumbPositioning = "exact" | "contain";
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, "children"> : T;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};
+export type { EditableSegmentPart, EditableTimeSegmentPart } from "./date/types.js";
+export type { Month, DateMatcher, DateOnInvalid, DateRangeValidator, DateValidator, DateRange, TimeValue, TimeSegmentPart, TimeRange, TimeValidator, TimeRangeValidator, TimeOnInvalid, } from "./date/types.js";
+export type { WithChild, Without, WithChildren } from "../internal/types.js";
+export { mergeProps } from "svelte-toolbelt";
+export { useId } from "../internal/use-id.js";
+export * from "./attributes.js";
+export * from "./types.js";

package/dist/shared/index.js

@@ -0,0 +1,5 @@
+export { REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS, } from "../bits/pin-input/pin-input.svelte.js";
+export { mergeProps } from "svelte-toolbelt";
+export { useId } from "../internal/use-id.js";
+export * from "./attributes.js";
+export * from "./types.js";

package/dist/shared/types.d.ts

@@ -0,0 +1,13 @@
+export type FloatingContentSnippetProps = {
+    /**
+     * Whether the content is open or closed. Used alongside the `forceMount` prop to
+     * conditionally render the content using Svelte transitions.
+     */
+    open: boolean;
+    /**
+     * Attributes to spread onto a wrapper element around the content.
+     * Do not style the wrapper element, its styles are computed by Floating UI.
+     */
+    wrapperProps: Record<string, unknown>;
+};
+export type StaticContentSnippetProps = Omit<FloatingContentSnippetProps, "wrapperProps">;

package/dist/shared/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -0,0 +1,45 @@
+export type * from "./bits/accordion/types.js";
+export type * from "./bits/alert-dialog/types.js";
+export type * from "./bits/aspect-ratio/types.js";
+export type * from "./bits/avatar/types.js";
+export type * from "./bits/button/types.js";
+export type * from "./bits/calendar/types.js";
+export type * from "./bits/checkbox/types.js";
+export type * from "./bits/collapsible/types.js";
+export type * from "./bits/combobox/types.js";
+export type * from "./bits/command/types.js";
+export type * from "./bits/context-menu/types.js";
+export type * from "./bits/date-field/types.js";
+export type * from "./bits/date-picker/types.js";
+export type * from "./bits/date-range-field/types.js";
+export type * from "./bits/date-range-picker/types.js";
+export type * from "./bits/dialog/types.js";
+export type * from "./bits/dropdown-menu/types.js";
+export type * from "./bits/filter/types.js";
+export type * from "./bits/label/types.js";
+export type * from "./bits/link-preview/types.js";
+export type * from "./bits/select/types.js";
+export type * from "./bits/menubar/types.js";
+export type * from "./bits/meter/types.js";
+export type * from "./bits/navigation-menu/types.js";
+export type * from "./bits/pagination/types.js";
+export type * from "./bits/pin-input/types.js";
+export type * from "./bits/popover/types.js";
+export type * from "./bits/progress/types.js";
+export type * from "./bits/radio-group/types.js";
+export type * from "./bits/range-calendar/types.js";
+export type * from "./bits/rating-group/types.js";
+export type * from "./bits/scroll-area/types.js";
+export type * from "./bits/select/types.js";
+export type * from "./bits/separator/types.js";
+export type * from "./bits/slider/types.js";
+export type * from "./bits/switch/types.js";
+export type * from "./bits/tabs/types.js";
+export type * from "./bits/time-field/types.js";
+export type * from "./bits/time-range-field/types.js";
+export type * from "./bits/toggle/types.js";
+export type * from "./bits/toggle-group/types.js";
+export type * from "./bits/toolbar/types.js";
+export type * from "./bits/tooltip/types.js";
+export type * from "./bits/utilities/config/types.js";
+export type { PortalProps } from "./bits/utilities/portal/types.js";

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,68 @@
+{
+	"name": "@johly/bits-ui",
+	"version": "2.18.1",
+	"license": "MIT",
+	"repository": "github:johanohly/bits-ui",
+	"funding": "https://github.com/sponsors/huntabyte",
+	"author": "Hunter Johnston <https://github.com/huntabyte>",
+	"description": "The headless components for Svelte.",
+	"scripts": {
+		"build": "pnpm package",
+		"dev": "pnpm watch",
+		"dev:svelte": "vite dev",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"test": "vitest",
+		"watch": "svelte-package --watch"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"devDependencies": {
+		"@internationalized/date": "^3.8.2",
+		"@sveltejs/kit": "catalog:",
+		"@sveltejs/package": "2.5.0",
+		"@sveltejs/vite-plugin-svelte": "catalog:",
+		"@types/node": "catalog:",
+		"@types/resize-observer-browser": "^0.1.11",
+		"csstype": "^3.1.3",
+		"jsdom": "^24.1.3",
+		"publint": "^0.2.12",
+		"svelte": "catalog:",
+		"svelte-check": "catalog:",
+		"typescript": "catalog:",
+		"vite": "catalog:",
+		"vitest": "catalog:"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"@floating-ui/core": "^1.7.1",
+		"@floating-ui/dom": "^1.7.1",
+		"esm-env": "^1.1.2",
+		"runed": "catalog:",
+		"svelte-toolbelt": "^0.10.6",
+		"tabbable": "^6.2.0"
+	},
+	"peerDependencies": {
+		"@internationalized/date": "^3.8.1",
+		"svelte": "^5.33.0"
+	},
+	"engines": {
+		"node": ">=20"
+	},
+	"sideEffects": false
+}