@human-kit/svelte-components 1.0.0-alpha.5 → 1.0.0-alpha.7

package/dist/calendar/trigger-previous/calendar-trigger-previous.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { useCalendarContext } from '../root/context';
 
-	type CalendarTriggerPreviousProps = Omit<HTMLButtonAttributes, 'children'> & {
+	type CalendarTriggerPreviousProps = Omit<
+		HTMLButtonAttributes,
+		'children' | 'class' | 'disabled' | 'aria-disabled'
+	> & {
+		class?: string;
 		children?: Snippet;
 	};
 
@@ -22,11 +27,11 @@
 	}
 </script>
 
-<button
+<ButtonRoot
 	type="button"
 	class={className}
 	aria-label="Previous page"
-	disabled={isDisabled}
+	{isDisabled}
 	onclick={handleClick}
 	{...restProps}
 >
@@ -35,4 +40,4 @@
 	{:else}
 		Prev
 	{/if}
-</button>
+</ButtonRoot>

package/dist/calendar/trigger-previous/calendar-trigger-previous.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-type CalendarTriggerPreviousProps = Omit<HTMLButtonAttributes, 'children'> & {
+type CalendarTriggerPreviousProps = Omit<HTMLButtonAttributes, 'children' | 'class' | 'disabled' | 'aria-disabled'> & {
+    class?: string;
     children?: Snippet;
 };
 declare const CalendarTriggerPrevious: import("svelte").Component<CalendarTriggerPreviousProps, {}, "">;

package/dist/checkbox/index.d.ts

@@ -1,6 +1,6 @@
-export * as Checkbox from './index.parts.ts';
+export * as Checkbox from './index.parts.js';
 export { default as CheckboxRoot } from './root/checkbox-root.svelte';
 export { default as CheckboxIndicator } from './indicator/checkbox-indicator.svelte';
-export { getCheckboxContext, setCheckboxContext, useCheckboxContext, type CheckboxContext, type CheckboxState } from './root/context.ts';
-import * as CheckboxParts from './index.parts.ts';
+export { getCheckboxContext, setCheckboxContext, useCheckboxContext, type CheckboxContext, type CheckboxState } from './root/context.js';
+import * as CheckboxParts from './index.parts.js';
 export default CheckboxParts;

package/dist/checkbox/index.js

@@ -1,6 +1,6 @@
-export * as Checkbox from './index.parts.ts';
+export * as Checkbox from './index.parts.js';
 export { default as CheckboxRoot } from './root/checkbox-root.svelte';
 export { default as CheckboxIndicator } from './indicator/checkbox-indicator.svelte';
-export { getCheckboxContext, setCheckboxContext, useCheckboxContext } from './root/context.ts';
-import * as CheckboxParts from './index.parts.ts';
+export { getCheckboxContext, setCheckboxContext, useCheckboxContext } from './root/context.js';
+import * as CheckboxParts from './index.parts.js';
 export default CheckboxParts;

package/dist/clock/index.d.ts

@@ -1,10 +1,10 @@
-export * as Clock from './index.parts.ts';
+export * as Clock from './index.parts.js';
 export { default as ClockRoot } from './root/clock-root.svelte';
 export { default as ClockAxis } from './axis/clock-axis.svelte';
 export { default as ClockWheelColumn } from './wheel-column/clock-wheel-column.svelte';
 export { default as ClockWheelItem } from './wheel-item/clock-wheel-item.svelte';
-export { getClockContext, setClockContext, useClockContext, type ClockContext, type ClockEditableSegmentType } from './root/context.ts';
-export { type TimePickerGranularity as ClockGranularity, type TimePickerHourCycle as ClockHourCycle, type TimePickerTimeValue as ClockTimeValue } from './root/time-utils';
-export { type ClockColumnInfo } from './root/resolve-visible-columns';
-import * as ClockParts from './index.parts.ts';
+export { getClockContext, setClockContext, useClockContext, type ClockContext, type ClockEditableSegmentType } from './root/context.js';
+export { type TimePickerGranularity as ClockGranularity, type TimePickerHourCycle as ClockHourCycle, type TimePickerTimeValue as ClockTimeValue } from './root/time-utils.js';
+export { type ClockColumnInfo } from './root/resolve-visible-columns.js';
+import * as ClockParts from './index.parts.js';
 export default ClockParts;

package/dist/clock/index.js

@@ -1,10 +1,10 @@
-export * as Clock from './index.parts.ts';
+export * as Clock from './index.parts.js';
 export { default as ClockRoot } from './root/clock-root.svelte';
 export { default as ClockAxis } from './axis/clock-axis.svelte';
 export { default as ClockWheelColumn } from './wheel-column/clock-wheel-column.svelte';
 export { default as ClockWheelItem } from './wheel-item/clock-wheel-item.svelte';
-export { getClockContext, setClockContext, useClockContext } from './root/context.ts';
-export {} from './root/time-utils';
-export {} from './root/resolve-visible-columns';
-import * as ClockParts from './index.parts.ts';
+export { getClockContext, setClockContext, useClockContext } from './root/context.js';
+export {} from './root/time-utils.js';
+export {} from './root/resolve-visible-columns.js';
+import * as ClockParts from './index.parts.js';
 export default ClockParts;

package/dist/combobox/button/combobox-button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { useComboBoxContext } from '../root/context';
 
 	type ComboBoxButtonProps = HTMLButtonAttributes & {
@@ -26,14 +27,14 @@
 
 <!-- * CHANGE: CHANGE NAME FROM BUTTON TO TRIGGER -->
 
-<button
+<ButtonRoot
 	type="button"
 	{tabindex}
 	aria-label={ctx.isOpen ? 'Close menu' : 'Open menu'}
 	aria-expanded={ctx.isOpen}
 	aria-controls={`combobox-listbox-${ctx.instanceId}`}
-	disabled={ctx.isDisabled}
-	data-pressed={ctx.isOpen}
+	isDisabled={ctx.isDisabled}
+	pressed={ctx.isOpen}
 	onmousedown={handleMouseDown}
 	class={className}
 	{...restProps}
@@ -56,4 +57,4 @@
 			<path d="m6 9 6 6 6-6" />
 		</svg>
 	{/if}
-</button>
+</ButtonRoot>

package/dist/combobox/index.d.ts

@@ -1,4 +1,4 @@
-export * as ComboBox from './index.parts.ts';
+export * as ComboBox from './index.parts.js';
 export { default as ComboBoxRoot } from './root/combobox.svelte';
 export { default as ComboBoxInput } from './input/combobox-input.svelte';
 export { default as ComboBoxButton } from './button/combobox-button.svelte';
@@ -9,6 +9,6 @@ export { default as ComboBoxItemIndicator } from './item-indicator/combobox-item
 export { default as ComboBoxTags } from './tags/combobox-tags.svelte';
 export { default as ComboBoxTag } from './tag/combobox-tag.svelte';
 export { default as ComboBoxTagRemove } from './tag-remove/combobox-tag-remove.svelte';
-export { getComboBoxContext, setComboBoxContext, useComboBoxContext, type ComboBoxContext } from './root/context.ts';
-import * as ComboBoxParts from './index.parts.ts';
+export { getComboBoxContext, setComboBoxContext, useComboBoxContext, type ComboBoxContext } from './root/context.js';
+import * as ComboBoxParts from './index.parts.js';
 export default ComboBoxParts;

package/dist/combobox/index.js

@@ -1,5 +1,5 @@
 // Namespace export for component composition: <ComboBox.Root>, <ComboBox.Input>, etc.
-export * as ComboBox from './index.parts.ts';
+export * as ComboBox from './index.parts.js';
 // Direct named exports for individual imports
 export { default as ComboBoxRoot } from './root/combobox.svelte';
 export { default as ComboBoxInput } from './input/combobox-input.svelte';
@@ -12,7 +12,7 @@ export { default as ComboBoxTags } from './tags/combobox-tags.svelte';
 export { default as ComboBoxTag } from './tag/combobox-tag.svelte';
 export { default as ComboBoxTagRemove } from './tag-remove/combobox-tag-remove.svelte';
 // Context and types
-export { getComboBoxContext, setComboBoxContext, useComboBoxContext } from './root/context.ts';
+export { getComboBoxContext, setComboBoxContext, useComboBoxContext } from './root/context.js';
 // Default export as namespace object
-import * as ComboBoxParts from './index.parts.ts';
+import * as ComboBoxParts from './index.parts.js';
 export default ComboBoxParts;

package/dist/combobox/input/combobox-input.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { useComboBoxContext } from '../root/context';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
 	import { cn } from '../../utils/cn';
 
 	type ComboBoxInputProps = HTMLInputAttributes & {
@@ -42,6 +46,8 @@
 	}
 
 	function handleFocus() {
+		ctx.setFocusVisible(shouldShowFocusVisible(inputRef));
+
 		// Open on focus if trigger is 'focus'
 		// Use a small delay to avoid opening immediately on programmatic focus
 		// (e.g., from a focus trap). This gives time for refs to be set up.
@@ -54,7 +60,9 @@
 		}
 	}
 
-	function handleMouseDown() {
+	function handleMouseDown(event: MouseEvent) {
+		trackInteractionModality(event, inputRef);
+		ctx.setFocusVisible(false);
 		ctx.setFocusedTagId(null);
 		// Open on press if trigger is 'press'
 		if (ctx.trigger === 'press' && !ctx.isOpen && !ctx.isDisabled && !ctx.isReadOnly) {
@@ -62,7 +70,14 @@
 		}
 	}
 
+	function handleKeyDown(event: KeyboardEvent) {
+		trackInteractionModality(event, inputRef);
+		ctx.setFocusVisible(shouldShowFocusVisible(inputRef));
+		ctx.handleKeydown(event);
+	}
+
 	function handleBlur() {
+		ctx.setFocusVisible(false);
 		// Restore selection label or deselect if empty
 		ctx.handleInputBlur();
 	}
@@ -89,7 +104,7 @@
 	onfocus={handleFocus}
 	onmousedown={handleMouseDown}
 	onblur={handleBlur}
-	onkeydown={ctx.handleKeydown}
+	onkeydown={handleKeyDown}
 	class={cn(
 		'bg-depth-2 sunken placeholder:text-muted-foreground hover:bg-depth-1 focus:ring-border h-8 w-full rounded-xs border px-2 text-sm shadow-xs transition-all ease-out outline-none focus:ring focus:ring-offset-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
 		className

package/dist/combobox/list/combobox-listbox.svelte.d.ts

@@ -17,7 +17,7 @@ declare function $$render<T extends object = object>(): {
     } & {
         context?: ListBoxContext;
         element?: HTMLElement;
-    }, "children" | "id" | "value" | "selectionMode" | "selectionBehavior" | "defaultValue" | "onChange" | "items" | "context" | "element"> & {
+    }, "children" | "value" | "id" | "element" | "selectionMode" | "selectionBehavior" | "defaultValue" | "onChange" | "items" | "context"> & {
         /** Optional items for dynamic rendering - overrides items from ComboBox context */
         items?: Iterable<T>;
         /** Content of the listbox. Receives item in dynamic mode. */

package/dist/combobox/popover/combobox-popover.svelte

@@ -2,6 +2,8 @@
 	import type { Snippet } from 'svelte';
 	import { useComboBoxContext } from '../root/context';
 	import { Popover } from '../../popover';
+	import { focusWithModality, type InputModality } from '../../primitives/input-modality';
+	import type { PopoverOpenChangeDetails } from '../../popover/root/context';
 
 	/**
 	 * ComboBox.Popover - Just the floating container wrapper.
@@ -16,7 +18,51 @@
 
 	const ctx = useComboBoxContext();
 
-	function handleOpenChange(open: boolean) {
+	function resolveFocusTarget(details?: PopoverOpenChangeDetails): HTMLElement | null {
+		const rawTarget = details?.event?.target;
+		if (!(rawTarget instanceof Node)) return null;
+		if (ctx.inputRef?.contains(rawTarget)) return null;
+		return rawTarget instanceof HTMLElement ? rawTarget : rawTarget.parentElement;
+	}
+
+	function handleOpenChange(open: boolean, details?: PopoverOpenChangeDetails) {
+		if (!open) {
+			// Cancel Popover.Root's close to prevent scheduleTriggerCloseFocus from
+			// setting stale data-focused on the trigger. The combobox passes triggerRef
+			// via prop (not Popover.Trigger), so Popover.Root never registers a
+			// blur-cleanup listener and any data-focused it sets persists forever.
+			//
+			// IMPORTANT: the actual state change is deferred to a microtask so that
+			// when Popover.Root's closePopover re-reads `isOpen` after the callback,
+			// the derived value is still `true` and the guard succeeds. A synchronous
+			// ctx.onOpenChange(false) would update the upstream signal immediately,
+			// making the derived `false` and bypassing the guard despite the cancel.
+			details?.cancel();
+
+			if (details?.reason === 'outside-press') {
+				const target = resolveFocusTarget(details);
+				queueMicrotask(() => {
+					ctx.onOpenChange(false);
+
+					if (target) {
+						focusWithModality(target, 'pointer' satisfies InputModality);
+					}
+
+					// If focus is still on the input (non-focusable target), blur it
+					// so focusWithin becomes false.
+					if (document.activeElement === ctx.inputRef) {
+						ctx.inputRef?.blur();
+					}
+				});
+				return;
+			}
+
+			queueMicrotask(() => {
+				ctx.onOpenChange(false);
+			});
+			return;
+		}
+
 		ctx.onOpenChange(open);
 	}
 

package/dist/combobox/root/combobox.svelte

@@ -346,6 +346,13 @@
 			!!wrapperRef && !!document.activeElement && wrapperRef.contains(document.activeElement);
 		if (!focusWithin) {
 			focusVisible = false;
+			// Clean up stale data-focused/data-focus-visible that Popover.Root's
+			// focus-state module may have set imperatively on the wrapper (the
+			// wrapper is briefly used as triggerRef before the input overrides it).
+			if (wrapperRef) {
+				delete wrapperRef.dataset.focused;
+				delete wrapperRef.dataset.focusVisible;
+			}
 		}
 	}
 
@@ -358,6 +365,10 @@
 		queueMicrotask(syncFocusWithin);
 	}
 
+	function setFocusVisibleState(visible: boolean) {
+		focusVisible = visible && focusWithin;
+	}
+
 	// Use navigation hook methods for keyboard navigation
 	function selectFocusedItem() {
 		if (navigation.focusedId !== null) {
@@ -694,6 +705,7 @@
 		unregisterItem: navigation.unregister,
 		handleKeydown,
 		handleInputBlur,
+		setFocusVisible: setFocusVisibleState,
 		get focusedTagId() {
 			return focusedTagId;
 		},
@@ -712,6 +724,7 @@
 	aria-labelledby={ariaLabelledby}
 	class={className}
 	data-combobox
+	data-focused={focusWithin || undefined}
 	data-disabled={isDisabled || undefined}
 	data-readonly={isReadOnly || undefined}
 	data-focus-within={focusWithin || undefined}

package/dist/combobox/root/context.d.ts

@@ -80,6 +80,8 @@ export type ComboBoxContext<T extends object = object> = {
     handleKeydown: (event: KeyboardEvent) => void;
     /** Handle input blur - restore selection or deselect if empty */
     handleInputBlur: () => void;
+    /** Update root-level focus-visible state based on current modality. */
+    setFocusVisible: (visible: boolean) => void;
     /** Currently focused tag ID (virtual focus for tag navigation) */
     focusedTagId: string | number | null;
     /** Set focused tag ID (virtual focus for tag navigation) */

package/dist/combobox/tag-remove/combobox-tag-remove.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { getContext } from 'svelte';
+	import { ButtonRoot } from '../../button/index.js';
 	import { cn } from '../../utils/cn';
 	import { TAG_CONTEXT_KEY, type TagContext } from '../tag/combobox-tag.svelte';
 
@@ -27,7 +28,7 @@
 </script>
 
 {#if !tagCtx.disabled}
-	<button
+	<ButtonRoot
 		type="button"
 		onclick={handleClick}
 		aria-label={`Remove ${tagCtx.label}`}
@@ -49,5 +50,5 @@
 				/>
 			</svg>
 		{/if}
-	</button>
+	</ButtonRoot>
 {/if}

package/dist/datepicker/index.d.ts

@@ -1,4 +1,4 @@
-export * as DatePicker from './index.parts.ts';
+export * as DatePicker from './index.parts.js';
 export { default as DatePickerRoot } from './root/date-picker-root.svelte';
 export { default as DatePickerInput } from './input/date-picker-input.svelte';
 export { default as DatePickerSegment } from './segment/date-picker-segment.svelte';
@@ -13,6 +13,6 @@ export { default as DatePickerGridHeader } from '../calendar/grid-header/calenda
 export { default as DatePickerHeaderCell } from '../calendar/header-cell/calendar-header-cell.svelte';
 export { default as DatePickerGridBody } from '../calendar/grid-body/calendar-grid-body.svelte';
 export { default as DatePickerBodyCell } from '../calendar/body-cell/calendar-body-cell.svelte';
-export { getDatePickerContext, setDatePickerContext, useDatePickerContext, type DatePickerContext, type DatePickerOpenChangeDetails, type DatePickerOpenChangeReason, type DatePickerSegmentPart, type DatePickerSegmentType } from './root/context.ts';
-import * as DatePickerParts from './index.parts.ts';
+export { getDatePickerContext, setDatePickerContext, useDatePickerContext, type DatePickerContext, type DatePickerOpenChangeDetails, type DatePickerOpenChangeReason, type DatePickerSegmentPart, type DatePickerSegmentType } from './root/context.js';
+import * as DatePickerParts from './index.parts.js';
 export default DatePickerParts;

package/dist/datepicker/index.js

@@ -1,4 +1,4 @@
-export * as DatePicker from './index.parts.ts';
+export * as DatePicker from './index.parts.js';
 export { default as DatePickerRoot } from './root/date-picker-root.svelte';
 export { default as DatePickerInput } from './input/date-picker-input.svelte';
 export { default as DatePickerSegment } from './segment/date-picker-segment.svelte';
@@ -13,6 +13,6 @@ export { default as DatePickerGridHeader } from '../calendar/grid-header/calenda
 export { default as DatePickerHeaderCell } from '../calendar/header-cell/calendar-header-cell.svelte';
 export { default as DatePickerGridBody } from '../calendar/grid-body/calendar-grid-body.svelte';
 export { default as DatePickerBodyCell } from '../calendar/body-cell/calendar-body-cell.svelte';
-export { getDatePickerContext, setDatePickerContext, useDatePickerContext } from './root/context.ts';
-import * as DatePickerParts from './index.parts.ts';
+export { getDatePickerContext, setDatePickerContext, useDatePickerContext } from './root/context.js';
+import * as DatePickerParts from './index.parts.js';
 export default DatePickerParts;

package/dist/datepicker/trigger/date-picker-trigger.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { ButtonRoot } from '../../button/index.js';
 	import { useDatePickerContext } from '../root/context';
 	import {
 		shouldShowFocusVisible,
@@ -86,14 +87,13 @@
 </script>
 
 {#if !datePicker.isReadOnly}
-	<button
-		bind:this={buttonRef}
+	<ButtonRoot
+		bind:element={buttonRef}
 		type="button"
-		disabled={datePicker.isDisabled}
+		isDisabled={datePicker.isDisabled}
 		class={className}
 		aria-haspopup="dialog"
 		aria-expanded={datePicker.open}
-		data-disabled={datePicker.isDisabled || undefined}
 		data-focused={isFocused || undefined}
 		data-focus-visible={isFocused && datePicker.focusVisible ? 'true' : undefined}
 		onmousedown={handleMouseDown}
@@ -106,5 +106,5 @@
 		{#if children}
 			{@render children()}
 		{/if}
-	</button>
+	</ButtonRoot>
 {/if}

package/dist/dialog/index.d.ts

@@ -1,4 +1,4 @@
-import * as DialogParts from './index.parts.ts';
+import * as DialogParts from './index.parts.js';
 export declare const Dialog: typeof DialogParts;
 export default DialogParts;
 export { default as DialogRoot } from './root/dialog-root.svelte';
@@ -6,5 +6,5 @@ export { default as DialogTrigger } from './trigger/dialog-trigger.svelte';
 export { default as DialogPortal } from './portal/dialog-portal.svelte';
 export { default as DialogOverlay } from './overlay/dialog-overlay.svelte';
 export { default as DialogContent } from './content/dialog-content.svelte';
-export { getDialogContext, setDialogContext, type DialogContext } from './root/context';
-export type { DialogStateHelpers } from './root/types';
+export { getDialogContext, setDialogContext, type DialogContext } from './root/context.js';
+export type { DialogStateHelpers } from './root/types.js';

package/dist/dialog/index.js

@@ -1,6 +1,6 @@
 // Dialog component with namespace pattern
 // Usage: <Dialog.Root>, <Dialog.Trigger>, <Dialog.Portal>, <Dialog.Overlay>, <Dialog.Content>
-import * as DialogParts from './index.parts.ts';
+import * as DialogParts from './index.parts.js';
 // Named export for namespace usage: import { Dialog } from '...'
 export const Dialog = DialogParts;
 // Default export for backwards compatibility
@@ -12,4 +12,4 @@ export { default as DialogPortal } from './portal/dialog-portal.svelte';
 export { default as DialogOverlay } from './overlay/dialog-overlay.svelte';
 export { default as DialogContent } from './content/dialog-content.svelte';
 // Re-export context utilities
-export { getDialogContext, setDialogContext } from './root/context';
+export { getDialogContext, setDialogContext } from './root/context.js';

package/dist/index.d.ts

@@ -1,29 +1,31 @@
-export { Checkbox } from './checkbox/index.ts';
-export { ComboBox } from './combobox/index.ts';
-export { Calendar } from './calendar/index.ts';
-export { Clock } from './clock/index.ts';
-export { DatePicker } from './datepicker/index.ts';
-export { TimePicker } from './timepicker/index.ts';
-export { Dialog } from './dialog/index.ts';
-export { ListBox } from './listbox/index.ts';
-export { Popover } from './popover/index.ts';
-export { Table } from './table/index.ts';
-export { default as Input } from './input/index.ts';
-export { default as Label } from './label/index.ts';
-export { default as LocaleProvider } from './locale-provider/index.ts';
-export { Portal } from './portal/index.ts';
-export * from './locale-provider/index.ts';
-export * from './checkbox/index.ts';
-export * from './combobox/index.ts';
-export * from './calendar/index.ts';
-export * from './clock/index.ts';
-export * from './datepicker/index.ts';
-export * from './timepicker/index.ts';
-export * from './dialog/index.ts';
-export * from './listbox/index.ts';
-export * from './popover/index.ts';
-export * from './table/index.ts';
-export * from './primitives/index.ts';
-export { cn } from './utils/index.ts';
-export * from './utils/index.ts';
-export * from './utils/index.ts';
+export { Button } from './button/index.js';
+export { Checkbox } from './checkbox/index.js';
+export { ComboBox } from './combobox/index.js';
+export { Calendar } from './calendar/index.js';
+export { Clock } from './clock/index.js';
+export { DatePicker } from './datepicker/index.js';
+export { TimePicker } from './timepicker/index.js';
+export { Dialog } from './dialog/index.js';
+export { ListBox } from './listbox/index.js';
+export { Popover } from './popover/index.js';
+export { Table } from './table/index.js';
+export { default as Input } from './input/index.js';
+export { default as Label } from './label/index.js';
+export { default as LocaleProvider } from './locale-provider/index.js';
+export { Portal } from './portal/index.js';
+export * from './locale-provider/index.js';
+export * from './button/index.js';
+export * from './checkbox/index.js';
+export * from './combobox/index.js';
+export * from './calendar/index.js';
+export * from './clock/index.js';
+export * from './datepicker/index.js';
+export * from './timepicker/index.js';
+export * from './dialog/index.js';
+export * from './listbox/index.js';
+export * from './popover/index.js';
+export * from './table/index.js';
+export * from './primitives/index.js';
+export { cn } from './utils/index.js';
+export * from './utils/index.js';
+export * from './utils/index.js';

package/dist/index.js

@@ -1,35 +1,37 @@
 // Main library entry point
 // Components (namespace exports)
-export { Checkbox } from './checkbox/index.ts';
-export { ComboBox } from './combobox/index.ts';
-export { Calendar } from './calendar/index.ts';
-export { Clock } from './clock/index.ts';
-export { DatePicker } from './datepicker/index.ts';
-export { TimePicker } from './timepicker/index.ts';
-export { Dialog } from './dialog/index.ts';
-export { ListBox } from './listbox/index.ts';
-export { Popover } from './popover/index.ts';
-export { Table } from './table/index.ts';
+export { Button } from './button/index.js';
+export { Checkbox } from './checkbox/index.js';
+export { ComboBox } from './combobox/index.js';
+export { Calendar } from './calendar/index.js';
+export { Clock } from './clock/index.js';
+export { DatePicker } from './datepicker/index.js';
+export { TimePicker } from './timepicker/index.js';
+export { Dialog } from './dialog/index.js';
+export { ListBox } from './listbox/index.js';
+export { Popover } from './popover/index.js';
+export { Table } from './table/index.js';
 // Simple components
-export { default as Input } from './input/index.ts';
-export { default as Label } from './label/index.ts';
-export { default as LocaleProvider } from './locale-provider/index.ts';
-export { Portal } from './portal/index.ts';
-export * from './locale-provider/index.ts';
+export { default as Input } from './input/index.js';
+export { default as Label } from './label/index.js';
+export { default as LocaleProvider } from './locale-provider/index.js';
+export { Portal } from './portal/index.js';
+export * from './locale-provider/index.js';
 // Re-export named exports from components
-export * from './checkbox/index.ts';
-export * from './combobox/index.ts';
-export * from './calendar/index.ts';
-export * from './clock/index.ts';
-export * from './datepicker/index.ts';
-export * from './timepicker/index.ts';
-export * from './dialog/index.ts';
-export * from './listbox/index.ts';
-export * from './popover/index.ts';
-export * from './table/index.ts';
+export * from './button/index.js';
+export * from './checkbox/index.js';
+export * from './combobox/index.js';
+export * from './calendar/index.js';
+export * from './clock/index.js';
+export * from './datepicker/index.js';
+export * from './timepicker/index.js';
+export * from './dialog/index.js';
+export * from './listbox/index.js';
+export * from './popover/index.js';
+export * from './table/index.js';
 // Primitives
-export * from './primitives/index.ts';
+export * from './primitives/index.js';
 // Utilities
-export { cn } from './utils/index.ts';
-export * from './utils/index.ts';
-export * from './utils/index.ts';
+export { cn } from './utils/index.js';
+export * from './utils/index.js';
+export * from './utils/index.js';

package/dist/listbox/index.d.ts

@@ -1,6 +1,6 @@
-export * as ListBox from './index.parts.ts';
+export * as ListBox from './index.parts.js';
 export { default as ListBoxRoot } from './root/listbox.svelte';
 export { default as ListBoxItem } from './item/listbox-item.svelte';
-export { useListBoxContext, createListBoxContext, type ListBoxContext } from './root/context.ts';
-import * as ListBoxParts from './index.parts.ts';
+export { useListBoxContext, createListBoxContext, type ListBoxContext } from './root/context.js';
+import * as ListBoxParts from './index.parts.js';
 export default ListBoxParts;

package/dist/listbox/index.js

@@ -1,10 +1,10 @@
 // Namespace export for component composition: <ListBox.Root>, <ListBox.Item>
-export * as ListBox from './index.parts.ts';
+export * as ListBox from './index.parts.js';
 // Direct named exports for individual imports
 export { default as ListBoxRoot } from './root/listbox.svelte';
 export { default as ListBoxItem } from './item/listbox-item.svelte';
 // Context and types
-export { useListBoxContext, createListBoxContext } from './root/context.ts';
+export { useListBoxContext, createListBoxContext } from './root/context.js';
 // Default export as namespace object
-import * as ListBoxParts from './index.parts.ts';
+import * as ListBoxParts from './index.parts.js';
 export default ListBoxParts;