@inkra/react 0.0.0-stage → 0.1.0

package/dist/select/Select.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { SearchableSelect } from './SearchableSelect.js';
+import { MultipleSelect, MultipleSelectContext, MultipleSelectRoot } from './MultipleSelect.js';
+import { mergeAriaIds, useFieldContext } from '../form/context.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from '../overlay/themeBridge.js';
+const chevronDownPaths = [
+    { d: 'M6 9L12 15L18 9' },
+];
+const chevronUpPaths = [
+    { d: 'M6 15L12 9L18 15' },
+];
+const checkPaths = [
+    { d: 'M5 12.5L10 17L19 7' },
+];
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function isAriaInvalid(value) {
+    return value === true || value === 'true' || value === 'grammar' || value === 'spelling';
+}
+function useItemAppearanceVersion() {
+    const copyRef = useRef(null);
+    const [version, setVersion] = useState(0);
+    useEffect(() => {
+        const item = copyRef.current?.closest('[role="option"]');
+        if (!item || typeof MutationObserver === 'undefined')
+            return undefined;
+        const observer = new MutationObserver(() => setVersion(current => current + 1));
+        observer.observe(item, {
+            attributes: true,
+            attributeFilter: ['data-highlighted', 'data-state', 'data-selected'],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return { copyRef, version };
+}
+const SelectFieldContext = createContext(null);
+export function SelectRoot({ dir, disabled, invalid = false, readOnly, required, ...props }) {
+    const field = useFieldContext();
+    const [directionNode, setDirectionNode] = useState(null);
+    const [inferredDirection, setInferredDirection] = useState();
+    const captureDirectionNode = useCallback((node) => {
+        setDirectionNode(node);
+    }, []);
+    useEffect(() => {
+        if (dir || !directionNode || typeof window === 'undefined')
+            return undefined;
+        const refresh = () => {
+            const directionSource = directionNode.parentElement ?? directionNode;
+            const direction = getComputedStyle(directionSource).direction === 'rtl' ? 'rtl' : 'ltr';
+            setInferredDirection(current => current === direction ? current : direction);
+        };
+        refresh();
+        if (typeof MutationObserver === 'undefined')
+            return undefined;
+        const observer = new MutationObserver(refresh);
+        for (let target = directionNode.parentElement; target; target = target.parentElement) {
+            observer.observe(target, {
+                attributes: true,
+                attributeFilter: ['class', 'data-theme', 'data-inkra-theme', 'dir', 'style'],
+            });
+        }
+        return () => observer.disconnect();
+    }, [dir, directionNode]);
+    const state = useMemo(() => ({
+        captureDirectionNode,
+        controlId: field?.controlId,
+        descriptionId: field?.descriptionId,
+        errorId: field?.errorId,
+        disabled: Boolean(disabled || field?.disabled),
+        readOnly: Boolean(readOnly || field?.readOnly),
+        invalid: Boolean(invalid || field?.invalid),
+        required: Boolean(required || field?.required),
+    }), [captureDirectionNode, disabled, field, invalid, readOnly, required]);
+    return (_jsx(PortalThemeProvider, { children: _jsx(SelectFieldContext.Provider, { value: state, children: props.multiple ? _jsx(MultipleSelectRoot, { ...props, dir: dir ?? inferredDirection, disabled: state.disabled, readOnly: state.readOnly, required: state.required }) : _jsx(SelectPrimitive.Root, { ...props, dir: dir ?? inferredDirection, disabled: state.disabled, required: state.required, onValueChange: value => { if (!state.readOnly)
+                    props.onValueChange?.(value); }, onOpenChange: open => { if (!state.readOnly)
+                    props.onOpenChange?.(open); }, open: state.readOnly ? false : props.open }) }) }));
+}
+export const SelectTrigger = forwardRef(function SelectTrigger({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, children, className, disabled = false, icon, startIcon, endIcon, hideValue = false, hideIndicator = false, iconOnly = false, fullWidth = true, textAlign = 'start', id, invalid = false, seed, size = 'md', ...props }, forwardedRef) {
+    const generatedId = useId();
+    const multiple = useContext(MultipleSelectContext);
+    const Trigger = multiple ? MultipleSelect.Trigger : SelectPrimitive.Trigger;
+    const Icon = multiple ? MultipleSelect.Icon : SelectPrimitive.Icon;
+    const field = useContext(SelectFieldContext);
+    const resolvedId = field?.controlId ?? id;
+    const resolvedDisabled = Boolean(disabled || field?.disabled);
+    const resolvedInvalid = Boolean(invalid || field?.invalid || isAriaInvalid(ariaInvalid));
+    const resolvedSeed = seed ?? `inkra-select-${resolvedId ?? generatedId}`;
+    const valueHidden = hideValue || iconOnly;
+    const valueId = `${generatedId}-value`;
+    const describedBy = mergeAriaIds(ariaDescribedBy, field?.descriptionId, field?.errorId, valueHidden ? valueId : undefined);
+    const errorMessage = mergeAriaIds(ariaErrorMessage, resolvedInvalid ? field?.errorId : undefined);
+    const portalRef = usePortalTriggerRef(forwardedRef);
+    const captureDirectionNode = field?.captureDirectionNode;
+    const ref = useCallback((node) => {
+        portalRef(node);
+        captureDirectionNode?.(node);
+    }, [captureDirectionNode, portalRef]);
+    const defaultIndicator = (_jsx(PencilIcon, { className: "inkra-select__trigger-glyph", paths: chevronDownPaths, seed: `${resolvedSeed}-chevron`, size: size === 'sm' ? 24 : size === 'lg' ? 32 : 28, sourceSize: 24 }));
+    const triggerIcon = icon === undefined ? defaultIndicator : icon;
+    return (_jsx(Trigger, { ...props, "aria-describedby": describedBy, "aria-errormessage": errorMessage, "aria-invalid": resolvedInvalid ? true : ariaInvalid, "aria-readonly": field?.readOnly || undefined, className: classes('inkra-select__trigger', className), "data-invalid": resolvedInvalid || undefined, "data-size": size, "data-icon-only": iconOnly || undefined, "data-full-width": fullWidth, "data-text-align": textAlign, disabled: resolvedDisabled, id: resolvedId, ref: ref, onKeyDown: event => {
+            props.onKeyDown?.(event);
+            if (field?.readOnly && event.key !== 'Tab' && !event.ctrlKey && !event.metaKey)
+                event.preventDefault();
+        }, onPointerDown: event => {
+            props.onPointerDown?.(event);
+            if (field?.readOnly)
+                event.preventDefault();
+        }, children: _jsxs(PencilSurface, { as: "span", className: "inkra-select__trigger-surface", radius: 8, seed: resolvedSeed, variant: resolvedInvalid ? 'danger' : 'outline', children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-select__focus-ring", radius: 8, seed: `${resolvedSeed}-focus`, variant: "outline" }), iconOnly ? (_jsx("span", { className: "inkra-select__trigger-slot", "aria-hidden": "true", children: startIcon ?? endIcon ?? triggerIcon ?? defaultIndicator })) : startIcon != null ? (_jsx("span", { className: "inkra-select__trigger-slot", "aria-hidden": "true", children: startIcon })) : null, _jsx("span", { id: valueId, className: valueHidden ? 'inkra-select__trigger-value-hidden' : 'inkra-select__trigger-value', children: children }), !iconOnly && endIcon != null && _jsx("span", { className: "inkra-select__trigger-slot", "aria-hidden": "true", children: endIcon }), iconOnly || hideIndicator || triggerIcon == null ? null : (_jsx(Icon, { asChild: true, children: _jsx("span", { className: "inkra-select__trigger-icon", children: triggerIcon }) }))] }) }));
+});
+export const SelectValue = forwardRef(function SelectValue({ children, placeholder, seed, ...props }, ref) {
+    const generatedId = useId();
+    const Value = useContext(MultipleSelectContext) ? MultipleSelect.Value : SelectPrimitive.Value;
+    const copy = (value, suffix) => typeof value === 'string' ? (_jsx(PencilText, { className: "inkra-select__value-copy", ellipsis: true, seed: seed ?? `inkra-select-value-${generatedId}-${suffix}`, children: value })) : value;
+    return (_jsx(Value, { ...props, placeholder: copy(placeholder, 'placeholder'), ref: ref, children: copy(children, 'value') }));
+});
+export function SelectPortal({ children, ...props }) {
+    const Portal = useContext(MultipleSelectContext) ? MultipleSelect.Portal : SelectPrimitive.Portal;
+    return (_jsx(Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+}
+export const SelectContent = forwardRef(function SelectContent({ children, className, seed, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
+    const generatedId = useId();
+    const Content = useContext(MultipleSelectContext) ? MultipleSelect.Content : SelectPrimitive.Content;
+    return (_jsx(Content, { ...props, className: classes('inkra-select__content', className), ref: ref, children: _jsx(PencilSurface, { className: classes('inkra-select__content-surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-select-content-${generatedId}`, variant: surfaceVariant, children: children }) }));
+});
+export const SelectViewport = forwardRef(function SelectViewport({ className, ...props }, ref) {
+    const Viewport = useContext(MultipleSelectContext) ? MultipleSelect.Viewport : SelectPrimitive.Viewport;
+    return (_jsx(Viewport, { ...props, className: classes('inkra-select__viewport', className), ref: ref }));
+});
+export const SelectGroup = forwardRef(function SelectGroup({ className, ...props }, ref) {
+    const Group = useContext(MultipleSelectContext) ? MultipleSelect.Group : SelectPrimitive.Group;
+    return (_jsx(Group, { ...props, className: classes('inkra-select__group', className), ref: ref }));
+});
+export const SelectLabel = forwardRef(function SelectLabel({ children, className, seed, ...props }, ref) {
+    const generatedId = useId();
+    const Label = useContext(MultipleSelectContext) ? MultipleSelect.Label : SelectPrimitive.Label;
+    return (_jsx(Label, { ...props, className: classes('inkra-select__label', className), ref: ref, children: _jsx(PencilText, { seed: seed ?? `inkra-select-label-${generatedId}`, children: children }) }));
+});
+export const SelectItem = forwardRef(function SelectItem({ children, className, seed, surfaceClassName, value, ...props }, ref) {
+    const Item = useContext(MultipleSelectContext) ? MultipleSelect.Item : SelectPrimitive.Item;
+    return (_jsx(Item, { ...props, className: classes('inkra-select__item', className), ref: ref, value: value, children: _jsx(PencilSurface, { className: classes('inkra-select__item-surface', surfaceClassName), seed: seed ?? `inkra-select-item-${value}`, variant: "selection", children: children }) }));
+});
+export const SelectItemText = forwardRef(function SelectItemText({ children, seed, ...props }, ref) {
+    const generatedId = useId();
+    const ItemText = useContext(MultipleSelectContext) ? MultipleSelect.ItemText : SelectPrimitive.ItemText;
+    const { copyRef, version } = useItemAppearanceVersion();
+    return (_jsx(ItemText, { ...props, ref: ref, children: _jsx(PencilText, { className: "inkra-select__item-text-copy", ref: copyRef, seed: seed ?? `inkra-select-item-text-${generatedId}`, children: children }, version) }));
+});
+export const SelectItemIndicator = forwardRef(function SelectItemIndicator({ children, className, seed, ...props }, ref) {
+    const generatedId = useId();
+    const ItemIndicator = useContext(MultipleSelectContext) ? MultipleSelect.ItemIndicator : SelectPrimitive.ItemIndicator;
+    return (_jsx(ItemIndicator, { ...props, className: classes('inkra-select__item-indicator', className), ref: ref, children: children ?? (_jsx(PencilIcon, { paths: checkPaths, seed: seed ?? `inkra-select-indicator-${generatedId}`, size: 16, sourceSize: 24 })) }));
+});
+export const SelectScrollUpButton = forwardRef(function SelectScrollUpButton({ children, className, seed, ...props }, ref) {
+    const generatedId = useId();
+    const ScrollUpButton = useContext(MultipleSelectContext) ? MultipleSelect.ScrollUpButton : SelectPrimitive.ScrollUpButton;
+    return (_jsx(ScrollUpButton, { ...props, className: classes('inkra-select__scroll-button', className), ref: ref, children: children ?? (_jsx(PencilIcon, { paths: chevronUpPaths, seed: seed ?? `inkra-select-scroll-up-${generatedId}`, size: 16, sourceSize: 24 })) }));
+});
+export const SelectScrollDownButton = forwardRef(function SelectScrollDownButton({ children, className, seed, ...props }, ref) {
+    const generatedId = useId();
+    const ScrollDownButton = useContext(MultipleSelectContext) ? MultipleSelect.ScrollDownButton : SelectPrimitive.ScrollDownButton;
+    return (_jsx(ScrollDownButton, { ...props, className: classes('inkra-select__scroll-button', className), ref: ref, children: children ?? (_jsx(PencilIcon, { paths: chevronDownPaths, seed: seed ?? `inkra-select-scroll-down-${generatedId}`, size: 16, sourceSize: 24 })) }));
+});
+export const SelectSeparator = forwardRef(function SelectSeparator({ className, seed, ...props }, ref) {
+    const generatedId = useId();
+    const Separator = useContext(MultipleSelectContext) ? MultipleSelect.Separator : SelectPrimitive.Separator;
+    return (_jsx(Separator, { ...props, className: classes('inkra-select__separator', className), ref: ref, children: _jsx(PencilLine, { seed: seed ?? `inkra-select-separator-${generatedId}`, weight: 0.8 }) }));
+});
+export const SelectClear = forwardRef(function SelectClear({ children, className, disabled, onClick, ...props }, ref) {
+    const state = useContext(MultipleSelectContext);
+    if (!state)
+        throw new Error('Select.Clear must be used inside Select.Root with multiple.');
+    return _jsx(Button, { ...props, className: classes('inkra-select__clear', className), ref: ref, type: "button", variant: "ghost", disabled: disabled || state.disabled || state.readOnly || state.values.length === 0, onClick: event => {
+            onClick?.(event);
+            if (event.defaultPrevented)
+                return;
+            state.change([]);
+            state.triggerRef.current?.focus({ preventScroll: true });
+        }, children: children ?? 'Clear' });
+});
+export const Select = Object.freeze({
+    Searchable: SearchableSelect,
+    Root: SelectRoot,
+    Trigger: SelectTrigger,
+    Value: SelectValue,
+    Portal: SelectPortal,
+    Content: SelectContent,
+    Viewport: SelectViewport,
+    Group: SelectGroup,
+    Label: SelectLabel,
+    Item: SelectItem,
+    ItemText: SelectItemText,
+    ItemIndicator: SelectItemIndicator,
+    ScrollUpButton: SelectScrollUpButton,
+    ScrollDownButton: SelectScrollDownButton,
+    Separator: SelectSeparator,
+    Clear: SelectClear,
+});

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-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);
+            })] });
+});