@human-kit/svelte-components 1.0.0-alpha.2 → 1.0.0-alpha.21

package/dist/index.js

@@ -1,23 +1,37 @@
 // Main library entry point
 // Components (namespace exports)
-export { ComboBox } from './combobox/index.ts';
-export { Calendar } from './calendar/index.ts';
-export { Dialog } from './dialog/index.ts';
-export { ListBox } from './listbox/index.ts';
-export { Popover } from './popover/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 './combobox/index.ts';
-export * from './calendar/index.ts';
-export * from './dialog/index.ts';
-export * from './listbox/index.ts';
-export * from './popover/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 { cn } from './utils/index.js';
+export * from './utils/index.js';
+export * from './utils/index.js';

package/dist/input/README.md

@@ -0,0 +1,38 @@
+# Input
+
+## Description
+
+`Input` is a headless native text input with modality-aware focus state, RAC-style disabled and read-only booleans, and data attributes for validation and form styling.
+
+## Anatomy
+
+- `Input`
+
+```svelte
+<Input aria-label="Email" placeholder="name@example.com" isInvalid={hasError} isRequired />
+```
+
+## Usage guidelines
+
+- Use native input props like `type`, `name`, `value`, `defaultValue`, `placeholder`, and `autocomplete` directly on `Input`.
+- Prefer `isDisabled`, `isReadOnly`, `isInvalid`, and `isRequired` when you want RAC-style naming while keeping native behavior.
+- Style state with `data-focused`, `data-focus-visible`, `data-hovered`, `data-disabled`, `data-readonly`, `data-invalid`, and `data-required`.
+
+## API reference
+
+`Input` supports:
+
+- `isDisabled?: boolean`
+- `isReadOnly?: boolean`
+- `isInvalid?: boolean`
+- `isRequired?: boolean`
+- `value?: string`
+- `element?: HTMLInputElement | null`
+- `...restProps: HTMLInputAttributes`
+
+## Accessibility
+
+- `Input` renders a native `<input>` with `type="text"` by default.
+- `Input` supports `bind:value` for text-like inputs.
+- `data-focus-visible` follows the shared modality contract and only appears for keyboard or virtual focus.
+- `isInvalid` maps to `aria-invalid`, `isReadOnly` maps to `readonly` and `aria-readonly`, and `isRequired` maps to `required` and `aria-required`.

package/dist/input/TODO.md

@@ -0,0 +1,12 @@
+# Input TODO
+
+## Goal
+
+Track Input work with the repository TODO format.
+
+## Backlog
+
+- [x] [S][P0][Area: Interaction][Owner: Unassigned][Target: Done] Expose modality-aware focus and hover state on the native input.
+- [x] [S][P0][Area: Accessibility][Owner: Unassigned][Target: Done] Support RAC-style `isDisabled`, `isReadOnly`, `isInvalid`, and `isRequired` props.
+- [x] [S][P0][Area: Testing][Owner: Unassigned][Target: Done] Add baseline tests for focus-visible, hover, disabled, read-only, and validation attributes.
+- [ ] [S][P1][Area: API][Owner: Unassigned][Target: TBD] Evaluate whether a composed `TextField` wrapper should own label, description, and error text semantics.

package/dist/input/input-test.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import Input from './index';
+
+	type Props = {
+		isDisabled?: boolean;
+		isReadOnly?: boolean;
+		isInvalid?: boolean;
+		isRequired?: boolean;
+		value?: string;
+		onMouseEnter?: (event: MouseEvent) => void;
+		onFocus?: (event: FocusEvent) => void;
+	};
+
+	let {
+		isDisabled = false,
+		isReadOnly = false,
+		isInvalid = false,
+		isRequired = false,
+		value = $bindable(''),
+		onMouseEnter,
+		onFocus
+	}: Props = $props();
+</script>
+
+<form>
+	<button type="button">Before</button>
+
+	<Input
+		bind:value
+		aria-label="Email"
+		placeholder="name@example.com"
+		{isDisabled}
+		{isReadOnly}
+		{isInvalid}
+		{isRequired}
+		onmouseenter={onMouseEnter}
+		onfocus={onFocus}
+	/>
+
+	<output data-input-value>{value}</output>
+
+	<button type="button">After</button>
+</form>

package/dist/input/input-test.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+    value?: string;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onFocus?: (event: FocusEvent) => void;
+};
+declare const InputTest: import("svelte").Component<Props, {}, "value">;
+type InputTest = ReturnType<typeof InputTest>;
+export default InputTest;

package/dist/input/input.svelte

@@ -1,19 +1,163 @@
 <script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { ClassValue } from 'class-variance-authority/types';
+	import { untrack } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { shouldShowFocusVisible, trackInteractionModality } from '../primitives/input-modality';
 	import { cn } from '../utils/cn';
 
+	type AriaInvalidValue = HTMLInputAttributes['aria-invalid'];
+
 	type InputProps = HTMLInputAttributes & {
 		class?: ClassValue;
+		isDisabled?: boolean;
+		isReadOnly?: boolean;
+		isInvalid?: boolean;
+		isRequired?: boolean;
+		value?: HTMLInputAttributes['value'];
+		element?: HTMLInputElement | null;
 	};
 
-	let { class: className, ...props }: InputProps = $props();
+	function composeEventHandlers<TEvent extends Event>(
+		internalHandler: ((event: TEvent) => void) | undefined,
+		externalHandler: ((event: TEvent) => void) | undefined
+	): (event: TEvent) => void {
+		return (event: TEvent) => {
+			internalHandler?.(event);
+			externalHandler?.(event);
+		};
+	}
+
+	function isAriaInvalidValue(value: AriaInvalidValue | undefined): boolean {
+		return value === true || value === 'true' || value === 'grammar' || value === 'spelling';
+	}
+
+	const generatedId = $props.id();
+
+	let {
+		id,
+		type = 'text',
+		class: className,
+		disabled: disabledProp = false,
+		readonly: readOnlyProp = false,
+		required: requiredProp = false,
+		'aria-invalid': ariaInvalidProp,
+		isDisabled = false,
+		isReadOnly = false,
+		isInvalid = false,
+		isRequired = false,
+		value = $bindable<HTMLInputElement['value']>(),
+		element = $bindable<HTMLInputElement | null>(null),
+		oninput: onInputExternal,
+		onfocus: onFocusExternal,
+		onblur: onBlurExternal,
+		onkeydown: onKeyDownExternal,
+		onmousedown: onMouseDownExternal,
+		onpointerdown: onPointerDownExternal,
+		onmouseenter: onMouseEnterExternal,
+		onmouseleave: onMouseLeaveExternal,
+		...restProps
+	}: InputProps = $props();
+
+	const resolvedId = untrack(() => id) ?? generatedId;
+
+	let inputRef: HTMLInputElement | null = $state(null);
+	let hovered = $state(false);
+	let focused = $state(false);
+	let focusVisible = $state(false);
+
+	const resolvedDisabled = $derived(Boolean(isDisabled || disabledProp));
+	const resolvedReadOnly = $derived(Boolean(isReadOnly || readOnlyProp));
+	const resolvedRequired = $derived(Boolean(isRequired || requiredProp));
+	const resolvedInvalid = $derived(Boolean(isInvalid || isAriaInvalidValue(ariaInvalidProp)));
+	const renderedAriaInvalid = $derived.by<AriaInvalidValue | undefined>(() => {
+		if (!resolvedInvalid) return undefined;
+		return ariaInvalidProp === 'grammar' || ariaInvalidProp === 'spelling'
+			? ariaInvalidProp
+			: 'true';
+	});
+
+	$effect(() => {
+		element = inputRef;
+	});
+
+	$effect(() => {
+		if (!resolvedDisabled) return;
+		hovered = false;
+		focused = false;
+		focusVisible = false;
+	});
+
+	function handleFocus() {
+		if (resolvedDisabled) return;
+		focused = true;
+		focusVisible = shouldShowFocusVisible(inputRef);
+	}
+
+	function handleBlur() {
+		focused = false;
+		focusVisible = false;
+	}
+
+	function handleInput(event: Event) {
+		value = (event.currentTarget as HTMLInputElement).value;
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		trackInteractionModality(event, inputRef);
+		focusVisible = focused ? true : shouldShowFocusVisible(inputRef);
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		trackInteractionModality(event, inputRef);
+		focusVisible = false;
+	}
+
+	function handlePointerDown(event: PointerEvent) {
+		trackInteractionModality(event, inputRef);
+		focusVisible = false;
+	}
+
+	function handleMouseEnter() {
+		if (resolvedDisabled) {
+			hovered = false;
+			return;
+		}
+
+		hovered = true;
+	}
+
+	function handleMouseLeave() {
+		hovered = false;
+	}
 </script>
 
 <input
-	{...props}
-	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 focus:data-[invalid=true]:ring-red-500`,
-		className
-	)}
+	{...restProps}
+	bind:this={inputRef}
+	id={resolvedId}
+	{type}
+	{value}
+	disabled={resolvedDisabled}
+	readonly={resolvedReadOnly}
+	required={resolvedRequired}
+	aria-invalid={renderedAriaInvalid}
+	aria-readonly={resolvedReadOnly || undefined}
+	aria-required={resolvedRequired || undefined}
+	data-input-root="true"
+	data-disabled={resolvedDisabled || undefined}
+	data-readonly={resolvedReadOnly || undefined}
+	data-invalid={resolvedInvalid || undefined}
+	data-required={resolvedRequired || undefined}
+	data-hovered={hovered || undefined}
+	data-focused={focused || undefined}
+	data-focus-visible={focusVisible || undefined}
+	oninput={composeEventHandlers(handleInput, onInputExternal ?? undefined)}
+	onfocus={composeEventHandlers(handleFocus, onFocusExternal ?? undefined)}
+	onblur={composeEventHandlers(handleBlur, onBlurExternal ?? undefined)}
+	onkeydown={composeEventHandlers(handleKeyDown, onKeyDownExternal ?? undefined)}
+	onmousedown={composeEventHandlers(handleMouseDown, onMouseDownExternal ?? undefined)}
+	onpointerdown={composeEventHandlers(handlePointerDown, onPointerDownExternal ?? undefined)}
+	onmouseenter={composeEventHandlers(handleMouseEnter, onMouseEnterExternal ?? undefined)}
+	onmouseleave={composeEventHandlers(handleMouseLeave, onMouseLeaveExternal ?? undefined)}
+	class={cn('outline-none', className)}
 />

package/dist/input/input.svelte.d.ts

@@ -1,8 +1,14 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
 import type { ClassValue } from 'class-variance-authority/types';
+import type { HTMLInputAttributes } from 'svelte/elements';
 type InputProps = HTMLInputAttributes & {
     class?: ClassValue;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+    value?: HTMLInputAttributes['value'];
+    element?: HTMLInputElement | null;
 };
-declare const Input: import("svelte").Component<InputProps, {}, "">;
+declare const Input: import("svelte").Component<InputProps, {}, "value" | "element">;
 type Input = ReturnType<typeof Input>;
 export default Input;

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;

package/dist/listbox/item/README.md

@@ -5,7 +5,7 @@
 ### ListBox.Item
 
 Name: `ListBox.Item`  
-Description: Selectable option element with built-in selected, focused, hovered, and disabled states.
+Description: Selectable option element with built-in selected, focused, hovered, pressed, and disabled states.
 
 | Prop                   | Type                             | Default              | Description                                              |
 | ---------------------- | -------------------------------- | -------------------- | -------------------------------------------------------- |
@@ -21,4 +21,5 @@ Description: Selectable option element with built-in selected, focused, hovered,
 | `onResolvedTextValue`  | `(label: string) => void`        | `undefined`          | Called when item text value is resolved.                 |
 | `scrollOnFocus`        | `boolean`                        | `false`              | Scrolls item into view when focused.                     |
 | `isParentDisabled`     | `boolean`                        | `false`              | Additional disabled state inherited from parent wrapper. |
+| `pressed`              | `boolean`                        | `undefined`          | Forces the visual pressed state from parent composition. |
 | `...restProps`         | `HTMLAttributes<HTMLDivElement>` | `-`                  | Additional option attributes.                            |