@inkra/react 0.0.0-stage → 0.2.0

package/dist/select/index.d.ts

@@ -0,0 +1,4 @@
+export { Select, SelectClear, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, } from './Select.js';
+export { SearchableSelect } from './SearchableSelect.js';
+export type { SearchableSelectProps, SearchableSelectOption } from './SearchableSelect.js';
+export type { SelectClearProps, SelectContentProps, SelectGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectPortalProps, SelectRootProps, SelectSingleRootProps, SelectMultipleRootProps, SelectOption, SelectScrollDownButtonProps, SelectScrollUpButtonProps, SelectSeparatorProps, SelectSize, SelectTriggerProps, SelectValueProps, SelectViewportProps, } from './Select.js';

package/dist/select/index.js

@@ -0,0 +1,2 @@
+export { Select, SelectClear, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectViewport, } from './Select.js';
+export { SearchableSelect } from './SearchableSelect.js';

package/dist/selection/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'type'> {
+    label: ReactNode;
+    description?: ReactNode;
+    indeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    seed?: string | number;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/selection/Checkbox.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { useNativeChecked } from './useNativeChecked.js';
+const checkPaths = [{ d: 'M 5 12 L 10 17 L 19 7' }];
+const mixedPaths = [{ d: 'M 5 12 L 19 12' }];
+function ids(...values) {
+    const value = values.filter(Boolean).join(' ');
+    return value || undefined;
+}
+export const Checkbox = forwardRef(function Checkbox({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked, className, defaultChecked, description, disabled = false, id, indeterminate = false, label, onChange, onCheckedChange, seed, ...props }, forwardedRef) {
+    const generatedId = useId();
+    const inputId = id ?? `inkra-checkbox-${generatedId}`;
+    const labelId = `${inputId}-label`;
+    const descriptionId = description == null ? undefined : `${inputId}-description`;
+    const resolvedLabelledBy = ariaLabel == null && ariaLabelledBy == null ? labelId : ariaLabelledBy;
+    const resolvedSeed = seed ?? inputId;
+    const inputRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    const { controlled, syncUncontrolled, visualChecked } = useNativeChecked({
+        checked,
+        defaultChecked,
+        indeterminate,
+        inputRef,
+    });
+    const selected = visualChecked || indeterminate;
+    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-checkbox', className].filter(Boolean).join(' '), "data-checked": visualChecked || undefined, "data-disabled": disabled || undefined, "data-indeterminate": indeterminate || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-checked": indeterminate ? 'mixed' : undefined, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: controlled ? checked : undefined, className: "inkra-selection-control__input", defaultChecked: controlled ? undefined : defaultChecked, disabled: disabled, id: inputId, onChange: (event) => {
+                    const nextChecked = event.currentTarget.checked;
+                    event.currentTarget.indeterminate = indeterminate;
+                    if (!controlled)
+                        syncUncontrolled(nextChecked);
+                    onChange?.(event);
+                    onCheckedChange?.(nextChecked);
+                }, ref: inputRef, type: "checkbox" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-selection-control__mark inkra-checkbox__mark", radius: 3, seed: `${resolvedSeed}-mark`, variant: selected ? 'quiet' : 'outline', children: selected ? (_jsx(PencilIcon, { className: "inkra-selection-control__glyph", paths: indeterminate ? mixedPaths : checkPaths, seed: `${resolvedSeed}-${indeterminate ? 'mixed' : 'check'}`, size: 18, sourceSize: 24 })) : null }), _jsxs("span", { className: "inkra-selection-control__copy", children: [typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-selection-control__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-selection-control__label", id: labelId, children: label }), description == null ? null : (_jsx("span", { className: "inkra-selection-control__description", id: descriptionId, children: description }))] })] }));
+});

package/dist/selection/RadioGroup.d.ts

@@ -0,0 +1,23 @@
+import type { FieldsetHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+export type RadioGroupVariant = 'radio' | 'segmented';
+export type RadioGroupOrientation = 'horizontal' | 'vertical';
+export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange'> {
+    name: string;
+    value?: string;
+    defaultValue?: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    onValueChange?: (value: string) => void;
+    orientation?: RadioGroupOrientation;
+    required?: boolean;
+    variant?: RadioGroupVariant;
+}
+export interface RadioGroupItemProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'children' | 'defaultChecked' | 'name' | 'type'> {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    seed?: string | number;
+}
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+export declare const RadioGroupItem: import("react").ForwardRefExoticComponent<RadioGroupItemProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/selection/RadioGroup.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useEffect, useId, useImperativeHandle, useRef, useState, } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { useSelectionDrawing } from '../internal/useSelectionDrawing.js';
+const ringPaths = [
+    { d: 'M 12 2 C 18 2 22 6 22 12 C 22 18 18 22 12 22 C 6 22 2 18 2 12 C 2 6 6 2 12 2 Z' },
+];
+const selectedPaths = [
+    ...ringPaths,
+    { d: 'M 12 7 C 15 7 17 9 17 12 C 17 15 15 17 12 17 C 9 17 7 15 7 12 C 7 9 9 7 12 7 Z', mode: 'wash' },
+    { d: 'M 12 7 C 15 7 17 9 17 12 C 17 15 15 17 12 17 C 9 17 7 15 7 12 C 7 9 9 7 12 7 Z' },
+];
+const RadioGroupContext = createContext(null);
+function ids(...values) {
+    const value = values.filter(Boolean).join(' ');
+    return value || undefined;
+}
+export const RadioGroup = forwardRef(function RadioGroup({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, children, className, defaultValue, description, disabled = false, form, label, name, onValueChange, orientation = 'vertical', required = false, value, variant = 'radio', ...props }, forwardedRef) {
+    const generatedId = useId();
+    const descriptionId = description == null ? undefined : `inkra-radio-group-${generatedId}-description`;
+    const rootRef = useRef(null);
+    const initialDefaultValueRef = useRef(defaultValue);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    const controlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(initialDefaultValueRef.current);
+    const currentValue = controlled ? value : uncontrolledValue;
+    useEffect(() => {
+        const root = rootRef.current;
+        const ownerForm = root?.form;
+        if (!root || !ownerForm || controlled)
+            return undefined;
+        const handleReset = () => {
+            queueMicrotask(() => {
+                const checkedInput = root.querySelector('input[type="radio"]:checked');
+                setUncontrolledValue(checkedInput?.value);
+            });
+        };
+        ownerForm.addEventListener('reset', handleReset);
+        return () => ownerForm.removeEventListener('reset', handleReset);
+    }, [controlled]);
+    const context = {
+        controlled,
+        defaultValue: initialDefaultValueRef.current,
+        disabled,
+        form,
+        name,
+        onItemChange(event) {
+            if (!event.currentTarget.checked)
+                return;
+            if (!controlled)
+                setUncontrolledValue(event.currentTarget.value);
+            onValueChange?.(event.currentTarget.value);
+        },
+        required,
+        variant,
+        value: currentValue,
+    };
+    return (_jsx(RadioGroupContext.Provider, { value: context, children: _jsxs("fieldset", { ...props, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: ['inkra-radio-group', className].filter(Boolean).join(' '), "data-orientation": orientation, "data-variant": variant, disabled: disabled, form: form, ref: rootRef, children: [label == null ? null : typeof label === 'string' ? (_jsx(PencilText, { as: "legend", className: "inkra-radio-group__label", seed: `inkra-radio-group-${generatedId}-label`, children: label })) : _jsx("legend", { className: "inkra-radio-group__label", children: label }), description == null ? null : (_jsx("span", { className: "inkra-radio-group__description", id: descriptionId, children: description })), variant === 'segmented' ? (_jsx(PencilSurface, { className: "inkra-radio-group__frame", radius: 8, seed: `inkra-radio-group-${generatedId}-frame`, variant: "outline", children: _jsx("div", { className: "inkra-radio-group__items", "data-orientation": orientation, children: children }) })) : _jsx("div", { className: "inkra-radio-group__items", "data-orientation": orientation, children: children })] }) }));
+});
+export const RadioGroupItem = forwardRef(function RadioGroupItem({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, className, description, disabled = false, form, icon, id, label, onChange, required = false, seed, value, ...props }, ref) {
+    const context = useContext(RadioGroupContext);
+    if (!context)
+        throw new Error('RadioGroupItem must be rendered inside RadioGroup');
+    const generatedId = useId();
+    const inputId = id ?? `inkra-radio-${generatedId}`;
+    const labelId = `${inputId}-label`;
+    const descriptionId = description == null ? undefined : `${inputId}-description`;
+    const resolvedLabelledBy = ariaLabel == null && ariaLabelledBy == null ? labelId : ariaLabelledBy;
+    const selected = context.value === value;
+    const selectionRef = useRef(null);
+    useSelectionDrawing(selectionRef, selected);
+    const itemDisabled = context.disabled || disabled;
+    const resolvedSeed = seed ?? inputId;
+    const visibleLabel = typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-selection-control__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-selection-control__label", id: labelId, children: label });
+    const visibleDescription = description == null ? null : (_jsx("span", { className: "inkra-selection-control__description", id: descriptionId, children: description }));
+    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-radio-group__item', className].filter(Boolean).join(' '), "data-checked": selected || undefined, "data-disabled": itemDisabled || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: context.controlled ? selected : undefined, className: "inkra-selection-control__input", defaultChecked: context.controlled ? undefined : context.defaultValue === value, disabled: itemDisabled, form: form ?? context.form, id: inputId, name: context.name, onChange: (event) => {
+                    onChange?.(event);
+                    context.onItemChange(event);
+                }, ref: ref, required: required || context.required, type: "radio", value: value }), context.variant === 'segmented' ? (_jsxs("span", { className: "inkra-radio-group__segment", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-radio-segment__surface inkra-radio-segment__surface--selection", ref: selectionRef, seed: `${resolvedSeed}-segment-selection`, variant: "selection" }), _jsxs("span", { className: "inkra-radio-segment__content", children: [icon == null ? null : _jsx("span", { "aria-hidden": "true", className: "inkra-radio-group__icon", children: icon }), _jsxs("span", { className: "inkra-selection-control__copy", children: [visibleLabel, visibleDescription] })] })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "inkra-selection-control__mark inkra-radio-group__mark", children: _jsx(PencilIcon, { className: "inkra-selection-control__glyph", paths: selected ? selectedPaths : ringPaths, seed: `${resolvedSeed}-${selected ? 'selected' : 'ring'}`, size: 24, sourceSize: 24 }) }), icon == null ? null : _jsx("span", { "aria-hidden": "true", className: "inkra-radio-group__icon", children: icon }), _jsxs("span", { className: "inkra-selection-control__copy", children: [visibleLabel, visibleDescription] })] }))] }));
+});

package/dist/selection/Switch.d.ts

@@ -0,0 +1,8 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'role' | 'type'> {
+    label: ReactNode;
+    description?: ReactNode;
+    onCheckedChange?: (checked: boolean) => void;
+    seed?: string | number;
+}
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/selection/Switch.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { useNativeChecked } from './useNativeChecked.js';
+const thumbPaths = [
+    { d: 'M 20 3 C 30 3 37 10 37 20 C 37 30 30 37 20 37 C 10 37 3 30 3 20 C 3 10 10 3 20 3 Z', mode: 'wash' },
+    { d: 'M 20 3 C 30 3 37 10 37 20 C 37 30 30 37 20 37 C 10 37 3 30 3 20 C 3 10 10 3 20 3 Z' },
+];
+function ids(...values) {
+    const value = values.filter(Boolean).join(' ');
+    return value || undefined;
+}
+export const Switch = forwardRef(function Switch({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked, className, defaultChecked, description, disabled = false, id, label, onChange, onCheckedChange, seed, ...props }, forwardedRef) {
+    const generatedId = useId();
+    const inputId = id ?? `inkra-switch-${generatedId}`;
+    const labelId = `${inputId}-label`;
+    const descriptionId = description == null ? undefined : `${inputId}-description`;
+    const resolvedLabelledBy = ariaLabel == null && ariaLabelledBy == null ? labelId : ariaLabelledBy;
+    const resolvedSeed = seed ?? inputId;
+    const inputRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    const { controlled, syncUncontrolled, visualChecked } = useNativeChecked({
+        checked,
+        defaultChecked,
+        inputRef,
+    });
+    return (_jsxs("label", { className: ['inkra-selection-control', 'inkra-switch', className].filter(Boolean).join(' '), "data-checked": visualChecked || undefined, "data-disabled": disabled || undefined, htmlFor: inputId, children: [_jsx("input", { ...props, "aria-describedby": ids(ariaDescribedBy, descriptionId), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, checked: controlled ? checked : undefined, className: "inkra-selection-control__input", defaultChecked: controlled ? undefined : defaultChecked, disabled: disabled, id: inputId, onChange: (event) => {
+                    const nextChecked = event.currentTarget.checked;
+                    if (!controlled)
+                        syncUncontrolled(nextChecked);
+                    onChange?.(event);
+                    onCheckedChange?.(nextChecked);
+                }, ref: inputRef, role: "switch", type: "checkbox" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-switch__track", radius: 8, seed: `${resolvedSeed}-track`, variant: visualChecked ? 'quiet' : 'outline', children: _jsx(PencilIcon, { className: "inkra-switch__thumb", paths: thumbPaths, seed: `${resolvedSeed}-thumb`, size: 24, sourceSize: 40 }) }), _jsxs("span", { className: "inkra-selection-control__copy", children: [typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-selection-control__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-selection-control__label", id: labelId, children: label }), description == null ? null : (_jsx("span", { className: "inkra-selection-control__description", id: descriptionId, children: description }))] })] }));
+});

package/dist/selection/index.d.ts

@@ -0,0 +1,6 @@
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxProps } from './Checkbox.js';
+export { RadioGroup, RadioGroupItem } from './RadioGroup.js';
+export type { RadioGroupItemProps, RadioGroupOrientation, RadioGroupProps, RadioGroupVariant, } from './RadioGroup.js';
+export { Switch } from './Switch.js';
+export type { SwitchProps } from './Switch.js';

package/dist/selection/index.js

@@ -0,0 +1,3 @@
+export { Checkbox } from './Checkbox.js';
+export { RadioGroup, RadioGroupItem } from './RadioGroup.js';
+export { Switch } from './Switch.js';

package/dist/selection/useNativeChecked.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from 'react';
+interface NativeCheckedOptions {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    inputRef: RefObject<HTMLInputElement | null>;
+    indeterminate?: boolean;
+}
+export declare function useNativeChecked({ checked, defaultChecked, inputRef, indeterminate, }: NativeCheckedOptions): {
+    controlled: boolean;
+    visualChecked: boolean;
+    syncUncontrolled: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export {};

package/dist/selection/useNativeChecked.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+export function useNativeChecked({ checked, defaultChecked, inputRef, indeterminate = false, }) {
+    const controlled = checked !== undefined;
+    const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));
+    useBrowserLayoutEffect(() => {
+        const input = inputRef.current;
+        if (input)
+            input.indeterminate = indeterminate;
+    }, [indeterminate, inputRef]);
+    useEffect(() => {
+        const input = inputRef.current;
+        const form = input?.form;
+        if (!input || !form || controlled)
+            return undefined;
+        const handleReset = () => {
+            queueMicrotask(() => setUncontrolledChecked(input.checked));
+        };
+        form.addEventListener('reset', handleReset);
+        return () => form.removeEventListener('reset', handleReset);
+    }, [controlled, inputRef]);
+    return {
+        controlled,
+        visualChecked: controlled ? Boolean(checked) : uncontrolledChecked,
+        syncUncontrolled: setUncontrolledChecked,
+    };
+}

package/dist/slider/index.d.ts

@@ -0,0 +1,11 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+export type SliderSize = 'sm' | 'md' | 'lg';
+export type SliderVariant = 'standard' | 'inset';
+export interface SliderProps extends Omit<SliderPrimitive.SliderProps, 'children' | 'asChild'> {
+    size?: SliderSize;
+    variant?: SliderVariant;
+    seed?: string | number;
+    thumbLabels?: readonly string[];
+    getValueLabel?: (value: number, index: number) => string;
+}
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/slider/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-valuetext': ariaValueText, className, defaultValue, dir, disabled = false, getValueLabel, inverted = false, min = 0, max = 100, onValueChange, orientation = 'horizontal', seed, size = 'md', thumbLabels, value, variant = 'standard', ...props }, forwardedRef) {
+    const generatedId = useId();
+    const rootRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultValue ?? [min]);
+    const [inferredDir, setInferredDir] = useState('ltr');
+    const values = value ?? uncontrolledValue;
+    const resolvedDir = dir ?? inferredDir;
+    const resolvedSeed = seed ?? `inkra-slider-${generatedId}`;
+    useEffect(() => {
+        const root = rootRef.current;
+        if (dir || !root)
+            return undefined;
+        const refresh = () => setInferredDir(getComputedStyle(root.parentElement ?? root).direction === 'rtl' ? 'rtl' : 'ltr');
+        refresh();
+        const observer = new MutationObserver(refresh);
+        for (let parent = root.parentElement; parent; parent = parent.parentElement) {
+            observer.observe(parent, { attributes: true, attributeFilter: ['dir', 'class', 'style'] });
+        }
+        return () => observer.disconnect();
+    }, [dir]);
+    const percentage = (number) => max > min ? Math.min(100, Math.max(0, (number - min) / (max - min) * 100)) : 0;
+    const low = values.length > 1 ? percentage(Math.min(...values)) : 0;
+    const high = values.length ? percentage(Math.max(...values)) : 0;
+    const reversed = orientation === 'horizontal' ? (resolvedDir === 'rtl') !== inverted : !inverted;
+    const start = reversed ? 100 - high : low;
+    const end = reversed ? low : 100 - high;
+    const clip = {
+        clipPath: orientation === 'horizontal' ? `inset(0 ${end}% 0 ${start}%)` : `inset(${start}% 0 ${end}% 0)`,
+    };
+    return _jsxs(SliderPrimitive.Root, { ...props, className: ['inkra-slider', className].filter(Boolean).join(' '), "data-size": size, "data-variant": variant, defaultValue: defaultValue, dir: resolvedDir, disabled: disabled, inverted: inverted, min: min, max: max, onValueChange: next => {
+            if (value === undefined)
+                setUncontrolledValue(next);
+            onValueChange?.(next);
+        }, orientation: orientation, ref: rootRef, value: value, children: [_jsxs(SliderPrimitive.Track, { className: "inkra-slider__track", children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__track-surface", variant: "outline", radius: variant === 'inset' ? 8 : 3, seed: `${resolvedSeed}-track` }), _jsx("span", { "aria-hidden": "true", className: "inkra-slider__range", style: clip, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__range-surface", variant: "selection", seed: `${resolvedSeed}-range` }) })] }), values.map((current, index) => {
+                const thumbLabel = thumbLabels?.[index];
+                const labelledBy = thumbLabel ? undefined : ariaLabelledBy;
+                const label = thumbLabel ?? (ariaLabel ? `${ariaLabel}${values.length > 1 ? ` ${index + 1}` : ''}` : labelledBy ? undefined : `Value${values.length > 1 ? ` ${index + 1}` : ''}`);
+                return _jsx(SliderPrimitive.Thumb, { "aria-describedby": ariaDescribedBy, "aria-label": label, "aria-labelledby": labelledBy, "aria-valuenow": current, "aria-valuetext": getValueLabel?.(current, index) ?? ariaValueText, className: "inkra-slider__thumb", children: _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__thumb-surface", variant: "paper", radius: 8, seed: `${resolvedSeed}-thumb-${index}`, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__focus-ring", variant: "outline", radius: 8, seed: `${resolvedSeed}-focus-${index}` }) }) }, index);
+            })] });
+});

package/dist/slot/index.d.ts

@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type SlotSize = 'sm' | 'md' | 'lg';
+interface SlotSharedProps {
+    children?: ReactNode;
+    /** Shows emptyContent instead of children while preserving the slot geometry. */
+    empty?: boolean;
+    emptyContent?: ReactNode;
+    selected?: boolean;
+    size?: SlotSize;
+    count?: number;
+    /** Replaces the default Badge while keeping the count anchored to the slot. */
+    renderCount?: (count: number) => ReactNode;
+    seed?: string | number;
+}
+export interface StaticSlotProps extends SlotSharedProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    interactive?: false;
+    disabled?: boolean;
+}
+export interface InteractiveSlotProps extends SlotSharedProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    interactive: true;
+}
+export type SlotProps = StaticSlotProps | InteractiveSlotProps;
+export declare const Slot: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+export {};

package/dist/slot/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { Badge } from '../display/index.js';
+import { PencilSurface } from '../PencilSurface.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+export const Slot = forwardRef(function Slot({ children, className, count, disabled = false, empty = false, emptyContent, interactive = false, renderCount, seed, selected = false, size = 'md', ...props }, ref) {
+    const generatedId = useId();
+    const resolvedSeed = seed ?? `inkra-slot-${generatedId}`;
+    const content = empty
+        ? (emptyContent ?? _jsx("span", { className: "inkra-slot__empty-mark", "aria-hidden": "true", children: "+" }))
+        : children;
+    const countContent = count == null
+        ? null
+        : renderCount?.(count) ?? _jsx(Badge, { size: "sm", "aria-label": `${count}`, children: count });
+    const commonProps = {
+        ...props,
+        className: classes('inkra-slot', className),
+        'data-disabled': disabled || undefined,
+        'data-empty': empty || undefined,
+        'data-interactive': interactive || undefined,
+        'data-selected': selected || undefined,
+        'data-size': size,
+    };
+    const body = _jsxs(_Fragment, { children: [selected && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slot__selected-wash", seed: `${resolvedSeed}-wash`, variant: "selection" }), _jsx("span", { className: "inkra-slot__content", children: content }), selected && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slot__selected-outline", radius: 8, seed: `${resolvedSeed}-outline`, variant: "outline" }), countContent != null && _jsx("span", { className: "inkra-slot__count", children: countContent })] });
+    if (interactive) {
+        return _jsx(PencilSurface, { ...commonProps, as: "button", "aria-pressed": selected, disabled: disabled, radius: 8, ref: ref, seed: resolvedSeed, variant: "paper", children: body });
+    }
+    return _jsx(PencilSurface, { ...commonProps, as: "div", "aria-disabled": disabled || undefined, radius: 8, ref: ref, seed: resolvedSeed, variant: "paper", children: body });
+});

package/dist/sortable/index.d.ts

@@ -0,0 +1,50 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { SortableChangeDetails, SortableContainerData, SortableIdentifier } from './model.js';
+export type { SortableChangeDetails, SortableContainerData, SortableIdentifier, SortableLayout, SortableLocation, } from './model.js';
+export interface SortableLabels {
+    handle?: string;
+    screenReaderInstructions?: string;
+    pickedUp?: (item: string, container: string, position: number, count: number) => string;
+    movedOver?: (item: string, container: string, position: number, count: number) => string;
+    dropped?: (item: string, container: string, position: number, count: number) => string;
+    cancelled?: (item: string) => string;
+}
+export interface SortableItemRenderState<Item> {
+    item: Item;
+    id: SortableIdentifier;
+    containerId: SortableIdentifier;
+    index: number;
+    disabled: boolean;
+    isDragging: boolean;
+    isOverlay: boolean;
+}
+export interface SortableHandleRenderState<Item> extends SortableItemRenderState<Item> {
+    props: ButtonHTMLAttributes<HTMLButtonElement> & {
+        ref: (element: HTMLButtonElement | null) => void;
+    };
+}
+export interface SortableContainerRenderState<Item> {
+    container: SortableContainerData<Item>;
+    isOver: boolean;
+    itemCount: number;
+}
+export interface SortableProps<Item> {
+    containers: readonly SortableContainerData<Item>[];
+    getItemId: (item: Item) => SortableIdentifier;
+    renderItem: (state: SortableItemRenderState<Item>) => ReactNode;
+    onChange: (containers: SortableContainerData<Item>[], details: SortableChangeDetails<Item>) => void;
+    onReorder?: (details: SortableChangeDetails<Item>) => void;
+    onMove?: (details: SortableChangeDetails<Item>) => void;
+    renderContainerHeader?: (state: SortableContainerRenderState<Item>) => ReactNode;
+    renderOverlay?: (state: SortableItemRenderState<Item>) => ReactNode;
+    handle?: boolean | ((state: SortableHandleRenderState<Item>) => ReactNode);
+    isItemDisabled?: (item: Item, container: SortableContainerData<Item>) => boolean;
+    getItemLabel?: (item: Item) => string;
+    getContainerLabel?: (container: SortableContainerData<Item>) => string;
+    labels?: SortableLabels;
+    className?: string;
+    containerClassName?: string;
+    itemClassName?: string;
+    autoScroll?: boolean;
+}
+export declare function Sortable<Item>({ autoScroll, className, containerClassName, containers, getContainerLabel, getItemId, getItemLabel, handle, isItemDisabled, itemClassName, labels: labelsProp, onChange, onMove, onReorder, renderContainerHeader, renderItem, renderOverlay, }: SortableProps<Item>): import("react").JSX.Element;