@inkra/react 0.0.0-stage → 0.2.0

package/dist/segmented-progress/SegmentedProgress.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PencilSurface } from '../PencilSurface.js';
+function segmentFill(index, count, percent, policy) {
+    if (percent === null)
+        return 1;
+    const raw = percent / 100 * count - index;
+    if (policy === 'complete')
+        return raw >= 1 ? 1 : 0;
+    if (policy === 'next')
+        return raw > 0 ? 1 : 0;
+    return Math.max(0, Math.min(1, raw));
+}
+function thresholdColor(index, count, max, thresholds) {
+    if (!thresholds?.length)
+        return undefined;
+    const segmentValue = index / count * max;
+    let color;
+    for (const threshold of thresholds) {
+        if (!Number.isFinite(threshold.value) || !threshold.color || threshold.value > segmentValue)
+            continue;
+        color = threshold.color;
+    }
+    return color;
+}
+export function SegmentedProgress({ count, gap, max, partialSegment, percent, seed, segmentColors, thresholds, }) {
+    const normalizedThresholds = thresholds
+        ?.filter(threshold => Number.isFinite(threshold.value) && threshold.color)
+        .map(threshold => ({ ...threshold, value: Math.max(0, Math.min(max, threshold.value)) }))
+        .sort((left, right) => left.value - right.value);
+    return (_jsx("span", { "aria-hidden": "true", className: "inkra-progress__segments", style: {
+            '--inkra-progress-segment-count': count,
+            '--inkra-progress-segment-gap': `${gap}px`,
+        }, children: Array.from({ length: count }, (_, index) => {
+            const fill = segmentFill(index, count, percent, partialSegment);
+            const color = segmentColors?.[index] || thresholdColor(index, count, max, normalizedThresholds);
+            const style = {
+                '--inkra-progress-segment-fill': `${fill * 100}%`,
+                ...(color ? { '--inkra-selection-pigment': color } : {}),
+            };
+            return (_jsxs("span", { className: "inkra-progress__segment", "data-fill": fill === 0 ? 'empty' : fill === 1 ? 'full' : 'partial', children: [_jsx(PencilSurface, { as: "span", className: "inkra-progress__segment-outline", radius: 3, seed: `${seed}-segment-${index}-outline`, variant: "outline" }), _jsx("span", { className: "inkra-progress__segment-fill-clip", style: style, children: _jsx(PencilSurface, { as: "span", className: "inkra-progress__segment-fill", radius: 3, seed: `${seed}-segment-${index}-fill`, variant: "selection" }) })] }, index));
+        }) }));
+}

package/dist/select/MultipleSelect.d.ts

@@ -0,0 +1,44 @@
+import type * as RadixSelect from '@radix-ui/react-select';
+import type { RefObject } from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+export interface SelectMultipleRootProps extends Omit<RadixSelect.SelectProps, 'value' | 'defaultValue' | 'onValueChange'> {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (values: string[]) => void;
+    readOnly?: boolean;
+    invalid?: boolean;
+    items?: readonly SelectOption[];
+}
+interface MultipleState {
+    values: string[];
+    labels: ReadonlyMap<string, string>;
+    disabled: boolean;
+    readOnly: boolean;
+    change: (values: string[]) => void;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    contentEvents: RefObject<Pick<RadixSelect.SelectContentProps, 'onEscapeKeyDown' | 'onPointerDownOutside'>>;
+}
+export declare const MultipleSelectContext: import("react").Context<MultipleState | null>;
+export declare function MultipleSelectRoot({ value, defaultValue, onValueChange, disabled, readOnly, dir, items, children, multiple: _multiple, invalid: _invalid, onOpenChange, ...props }: SelectMultipleRootProps): import("react").JSX.Element;
+declare function Portal({ container, children }: RadixSelect.SelectPortalProps): import("react").JSX.Element;
+export declare const MultipleSelect: {
+    Trigger: import("react").ForwardRefExoticComponent<RadixSelect.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Value: import("react").ForwardRefExoticComponent<RadixSelect.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Icon: import("react").ForwardRefExoticComponent<RadixSelect.SelectIconProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Portal: typeof Portal;
+    Content: import("react").ForwardRefExoticComponent<RadixSelect.SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<RadixSelect.SelectViewportProps & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<RadixSelect.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<RadixSelect.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<RadixSelect.SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<RadixSelect.SelectItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<RadixSelect.SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ScrollUpButton: import("react").ForwardRefExoticComponent<RadixSelect.SelectScrollUpButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+    ScrollDownButton: import("react").ForwardRefExoticComponent<RadixSelect.SelectScrollDownButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<RadixSelect.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/select/MultipleSelect.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { DirectionProvider } from '@base-ui/react/direction-provider';
+import { Children, createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { PencilText } from '../PencilText.js';
+export const MultipleSelectContext = createContext(null);
+const emptyValues = [];
+export function MultipleSelectRoot({ value, defaultValue = emptyValues, onValueChange, disabled = false, readOnly = false, dir, items, children, multiple: _multiple, invalid: _invalid, onOpenChange, ...props }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const values = value ?? uncontrolled;
+    const triggerRef = useRef(null);
+    const inputRef = useRef(null);
+    const defaultValueRef = useRef(defaultValue);
+    defaultValueRef.current = defaultValue;
+    const isControlled = value !== undefined;
+    const contentEvents = useRef({});
+    const labels = useMemo(() => new Map(items?.map(item => [item.value, item.label])), [items]);
+    const change = (next) => {
+        if (disabled || readOnly)
+            return;
+        if (value === undefined)
+            setUncontrolled(next);
+        onValueChange?.(next);
+    };
+    useEffect(() => {
+        if (isControlled)
+            return;
+        const form = inputRef.current?.form;
+        let timer;
+        const reset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (!event.defaultPrevented)
+                    setUncontrolled(defaultValueRef.current);
+            }, 0);
+        };
+        form?.addEventListener('reset', reset);
+        return () => { clearTimeout(timer); form?.removeEventListener('reset', reset); };
+    }, [isControlled, props.form]);
+    return (_jsx(MultipleSelectContext.Provider, { value: { values, labels, disabled, readOnly, change, triggerRef, contentEvents }, children: _jsx(DirectionProvider, { direction: dir, children: _jsx(BaseSelect.Root, { ...props, multiple: true, disabled: disabled, readOnly: readOnly, open: readOnly ? false : props.open, value: values, onValueChange: change, items: items, inputRef: inputRef, onOpenChange: (open, details) => {
+                    if (readOnly && open)
+                        details.cancel();
+                    if (details.reason === 'outside-press' || details.reason === 'cancel-open') {
+                        // Base UI may report mousedown/touchstart; preserve the actual source event.
+                        const outside = new CustomEvent('pointerDownOutside', { cancelable: true, detail: { originalEvent: details.event } });
+                        contentEvents.current.onPointerDownOutside?.(outside);
+                        if (outside.defaultPrevented) {
+                            details.event.preventDefault();
+                            details.cancel();
+                        }
+                    }
+                    if (details.reason === 'escape-key' && details.event instanceof KeyboardEvent) {
+                        contentEvents.current.onEscapeKeyDown?.(details.event);
+                        if (details.event.defaultPrevented)
+                            details.cancel();
+                    }
+                    if (!details.isCanceled)
+                        onOpenChange?.(open);
+                }, children: children }) }) }));
+}
+// Keep the public compound API stable while Base UI owns the multiple-selection engine.
+const Trigger = forwardRef(function Trigger({ asChild, children, ...props }, ref) {
+    const { triggerRef } = useContext(MultipleSelectContext);
+    const captureRef = useCallback((node) => {
+        triggerRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref, triggerRef]);
+    return _jsx(BaseSelect.Trigger, { ...props, ref: captureRef, render: asChild ? Children.only(children) : undefined, children: asChild ? undefined : children });
+});
+const Value = forwardRef(function Value({ asChild, children, placeholder, ...props }, ref) {
+    const state = useContext(MultipleSelectContext);
+    return _jsx(BaseSelect.Value, { ...props, ref: ref, render: asChild ? Children.only(children) : undefined, placeholder: placeholder, children: children ?? ((values) => values.length ? _jsx(PencilText, { className: "inkra-select__value-copy", ellipsis: true, children: values.map(value => state.labels.get(value) ?? value).join(', ') }) : placeholder) });
+});
+const Icon = forwardRef(function Icon({ asChild, children, ...props }, ref) {
+    return _jsx(BaseSelect.Icon, { ...props, ref: ref, render: asChild ? Children.only(children) : undefined, children: asChild ? undefined : children });
+});
+function Portal({ container, children }) {
+    // Both engines ultimately use React DOM portals; retain Radix's broader DOM-root API.
+    return _jsx(BaseSelect.Portal, { container: container, children: children });
+}
+const Content = forwardRef(function Content({ asChild, children, position = 'popper', side = 'bottom', sideOffset = 4, align = 'start', alignOffset, avoidCollisions = true, collisionPadding = 8, collisionBoundary, sticky, arrowPadding, forceMount: _forceMount, updatePositionStrategy: _updatePositionStrategy, hideWhenDetached, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, ...props }, ref) {
+    const { contentEvents } = useContext(MultipleSelectContext);
+    useEffect(() => {
+        contentEvents.current = { onEscapeKeyDown, onPointerDownOutside };
+        return () => { contentEvents.current = {}; };
+    }, [contentEvents, onEscapeKeyDown, onPointerDownOutside]);
+    return _jsx(BaseSelect.Positioner, { className: "inkra-select__positioner", "data-hide-when-detached": hideWhenDetached || undefined, sticky: sticky === 'always', arrowPadding: arrowPadding, side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: position === 'item-aligned', collisionPadding: collisionPadding, collisionBoundary: Array.isArray(collisionBoundary) ? collisionBoundary.filter((entry) => entry != null) : collisionBoundary ?? undefined, collisionAvoidance: avoidCollisions ? undefined : { side: 'none', align: 'none' }, children: _jsx(BaseSelect.Popup, { ...props, ref: ref, render: asChild ? Children.only(children) : undefined, finalFocus: onCloseAutoFocus ? () => { const event = new Event('closeAutoFocus', { cancelable: true }); onCloseAutoFocus(event); return !event.defaultPrevented; } : undefined, children: asChild ? undefined : children }) });
+});
+const Viewport = forwardRef(function Viewport({ asChild, children, nonce: _nonce, ...props }, ref) {
+    return _jsx(BaseSelect.List, { ...props, ref: ref, render: asChild ? Children.only(children) : undefined, children: asChild ? undefined : children });
+});
+const Group = forwardRef(function Group({ asChild, children, ...props }, ref) {
+    return _jsx(BaseSelect.Group, { ...props, ref: ref, render: asChild ? Children.only(children) : undefined, children: asChild ? undefined : children });
+});
+const Label = forwardRef(function Label({ asChild, children, ...props }, ref) {
+    return _jsx(BaseSelect.GroupLabel, { ...props, ref: ref, render: asChild ? Children.only(children) : undefined, children: asChild ? undefined : children });
+});
+const Item = forwardRef(function Item({ asChild, children, textValue, ...props }, ref) {
+    return _jsx(BaseSelect.Item, { ...props, label: textValue, ref: ref, render: asChild ? Children.only(children) : undefined, children: asChild ? undefined : children });
+});
+const ItemText = forwardRef(function ItemText({ asChild, children, ...props }, ref) {
+    return _jsx(BaseSelect.ItemText, { ...props, ref: node => {
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, render: asChild ? Children.only(children) : _jsx("span", {}), children: asChild ? undefined : children });
+});
+const ItemIndicator = forwardRef(function ItemIndicator({ asChild, children, ...props }, ref) {
+    return _jsx(BaseSelect.ItemIndicator, { ...props, ref: ref, render: asChild ? Children.only(children) : undefined, children: asChild ? undefined : children });
+});
+const ScrollUpButton = forwardRef(function ScrollUpButton({ asChild, children, ...props }, ref) {
+    return _jsx(BaseSelect.ScrollUpArrow, { ...props, ref: ref, render: asChild ? Children.only(children) : undefined, children: asChild ? undefined : children });
+});
+const ScrollDownButton = forwardRef(function ScrollDownButton({ asChild, children, ...props }, ref) {
+    return _jsx(BaseSelect.ScrollDownArrow, { ...props, ref: ref, render: asChild ? Children.only(children) : undefined, children: asChild ? undefined : children });
+});
+const Separator = forwardRef(function Separator({ asChild, children, ...props }, ref) {
+    return _jsx(BaseSelect.Separator, { ...props, ref: ref, render: asChild ? Children.only(children) : undefined, children: asChild ? undefined : children });
+});
+export const MultipleSelect = { Trigger, Value, Icon, Portal, Content, Viewport, Group, Label, Item, ItemText, ItemIndicator, ScrollUpButton, ScrollDownButton, Separator };

package/dist/select/SearchableSelect.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface SearchableSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    keywords?: string;
+}
+interface SearchableSelectCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'dir'> {
+    items: readonly SearchableSelectOption[];
+    searchPlacement?: 'trigger' | 'popup';
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyContent?: ReactNode;
+    clearable?: boolean;
+    clearLabel?: string;
+    openLabel?: string;
+    size?: 'sm' | 'md' | 'lg';
+    name?: string;
+    form?: string;
+    dir?: 'ltr' | 'rtl';
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    collisionPadding?: number;
+}
+export type SearchableSelectProps = SearchableSelectCommonProps & ({
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+} | {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+});
+export declare const SearchableSelect: import("react").ForwardRefExoticComponent<SearchableSelectProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/select/SearchableSelect.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox } from '@base-ui/react/combobox';
+import { DirectionProvider } from '@base-ui/react/direction-provider';
+import { forwardRef, useId, useMemo, useRef } from 'react';
+import { Button } from '../Button.js';
+import { Input } from '../form/Input.js';
+import { mergeAriaIds, useFieldContext } from '../form/context.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef } from '../overlay/themeBridge.js';
+const searchPaths = [{ d: 'M21 21l-4.5-4.5' }, { d: 'M18 10a8 8 0 1 1-16 0a8 8 0 1 1 16 0' }];
+const chevronPaths = [{ d: 'M6 9l6 6 6-6' }];
+const checkPaths = [{ d: 'M5 12l4 4L19 6' }];
+const clearPaths = [{ d: 'M6 6l12 12M18 6L6 18' }];
+const SearchableControl = forwardRef(function SearchableControl(props, forwardedRef) {
+    const { items, searchPlacement = 'trigger', placeholder = 'Select an option', searchPlaceholder = 'Search options', emptyContent = 'No matching options', clearable = true, clearLabel = 'Clear selection', openLabel = 'Show options', size = 'md', multiple = false, value, defaultValue, onValueChange: _onValueChange, name, form, dir, disabled, readOnly, required, invalid, id, className, children: _children, open, defaultOpen, onOpenChange, side = 'bottom', align = 'start', sideOffset = 8, collisionPadding = 8, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...rest } = props;
+    const indicatorSize = size === 'sm' ? 24 : size === 'lg' ? 32 : 28;
+    const field = useFieldContext();
+    const generatedId = useId();
+    const controlId = field?.controlId ?? id ?? generatedId;
+    const resolvedDisabled = Boolean(disabled || field?.disabled);
+    const resolvedReadOnly = Boolean(readOnly || field?.readOnly);
+    const resolvedInvalid = Boolean(invalid || field?.invalid);
+    const describedBy = mergeAriaIds(ariaDescribedBy, field?.descriptionId, field?.errorId);
+    const searchRef = useRef(null);
+    const portalRef = usePortalTriggerRef(forwardedRef);
+    const lookup = useMemo(() => new Map(items.map(item => [item.value, item])), [items]);
+    const values = useMemo(() => items.map(item => item.value), [items]);
+    const { contains } = Combobox.useFilter({ sensitivity: 'base' });
+    const summary = (selected) => {
+        const selectedValues = Array.isArray(selected) ? selected : selected == null ? [] : [selected];
+        return selectedValues.map(item => lookup.get(item)?.label ?? item).join(', ');
+    };
+    const search = _jsx(Combobox.Input, { id: searchPlacement === 'trigger' ? controlId : `${controlId}-search`, "aria-label": searchPlacement === 'trigger' ? ariaLabel : searchPlaceholder, "aria-labelledby": searchPlacement === 'trigger' ? ariaLabelledBy : undefined, "aria-describedby": describedBy, "aria-invalid": resolvedInvalid || undefined, ref: searchRef, placeholder: searchPlacement === 'trigger' ? placeholder : searchPlaceholder, render: _jsx(Input, { size: size, variant: searchPlacement === 'trigger' ? 'outline' : 'underline', startIcon: _jsx(PencilIcon, { paths: searchPaths, size: 22, sourceSize: 24 }) }) });
+    return _jsx(DirectionProvider, { direction: dir, children: _jsxs(Combobox.Root, { items: values, multiple: multiple, value: value, defaultValue: defaultValue, disabled: resolvedDisabled, readOnly: resolvedReadOnly, required: Boolean(required || field?.required), name: name, form: form, autoHighlight: true, open: resolvedReadOnly || resolvedDisabled ? false : open, defaultOpen: defaultOpen, onOpenChange: (next, details) => { if (resolvedReadOnly || resolvedDisabled)
+                details.cancel();
+            else
+                onOpenChange?.(next); }, itemToStringLabel: item => lookup.get(item)?.label ?? item, filter: (item, query) => contains(`${lookup.get(item)?.label ?? item} ${lookup.get(item)?.keywords ?? ''}`, query), onValueChange: next => {
+                if (resolvedDisabled || resolvedReadOnly)
+                    return;
+                if (props.multiple)
+                    props.onValueChange?.(Array.isArray(next) ? next : []);
+                else
+                    props.onValueChange?.(typeof next === 'string' ? next : null);
+            }, children: [_jsxs("div", { ...rest, ref: portalRef, dir: dir, className: ['inkra-search-select', className].filter(Boolean).join(' '), "data-placement": searchPlacement, "data-invalid": resolvedInvalid || undefined, children: [_jsxs(Combobox.InputGroup, { className: "inkra-search-select__anchor", children: [searchPlacement === 'trigger' ? search : _jsxs(Combobox.Trigger, { id: controlId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": describedBy, "aria-invalid": resolvedInvalid || undefined, "aria-readonly": resolvedReadOnly || undefined, className: "inkra-search-select__trigger", render: _jsx(Button, { variant: "outline", fullWidth: true, size: size, align: "start" }), children: [_jsx(Combobox.Value, { children: (selected) => _jsx(PencilText, { ellipsis: true, children: summary(selected) || placeholder }) }), _jsx(PencilIcon, { paths: chevronPaths, size: indicatorSize, sourceSize: 24 })] }), searchPlacement === 'trigger' && _jsx(Combobox.Trigger, { "aria-label": openLabel, render: _jsx(Button, { variant: "ghost", size: "icon" }), children: _jsx(PencilIcon, { paths: chevronPaths, size: indicatorSize, sourceSize: 24 }) }), clearable && _jsx(Combobox.Clear, { "aria-label": clearLabel, disabled: resolvedReadOnly || resolvedDisabled, render: _jsx(Button, { variant: "ghost", size: "icon" }), children: _jsx(PencilIcon, { paths: clearPaths, size: 24, sourceSize: 24 }) })] }), multiple && searchPlacement === 'trigger' && _jsx(Combobox.Value, { children: (selected) => selected.length ? _jsx(PencilText, { className: "inkra-search-select__summary", children: summary(selected) }) : null })] }), _jsx(Combobox.Portal, { children: _jsx(PortalThemeBridge, { children: _jsx(Combobox.Positioner, { side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: "inkra-select__positioner inkra-search-select__positioner", children: _jsx(Combobox.Popup, { className: "inkra-search-select__popup", initialFocus: searchPlacement === 'popup' ? searchRef : false, children: _jsxs(PencilSurface, { variant: "paper", radius: 8, children: [searchPlacement === 'popup' && _jsx("div", { className: "inkra-search-select__search", children: search }), _jsx(Combobox.Empty, { className: "inkra-search-select__empty", children: typeof emptyContent === 'string' ? _jsx(PencilText, { children: emptyContent }) : emptyContent }), _jsx(Combobox.List, { className: "inkra-select__viewport inkra-search-select__list", children: (item) => _jsx(Combobox.Item, { value: item, disabled: lookup.get(item)?.disabled, className: "inkra-select__item", children: _jsxs(PencilSurface, { className: "inkra-select__item-surface", variant: "selection", seed: `search-option-${item}`, children: [_jsx(PencilText, { children: lookup.get(item)?.label ?? item }), _jsx(Combobox.ItemIndicator, { className: "inkra-select__item-indicator", children: _jsx(PencilIcon, { paths: checkPaths, size: 22, sourceSize: 24 }) })] }) }, item) })] }) }) }) }) })] }) });
+});
+export const SearchableSelect = forwardRef(function SearchableSelect(props, ref) {
+    return _jsx(PortalThemeProvider, { children: _jsx(SearchableControl, { ...props, ref: ref }) });
+});

package/dist/select/Select.d.ts

@@ -0,0 +1,109 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { SelectMultipleRootProps } from './MultipleSelect.js';
+import type { PencilSurfaceVariant } from '../PencilSurface.js';
+export type SelectSingleRootProps = SelectPrimitive.SelectProps & {
+    multiple?: false;
+    readOnly?: boolean;
+    invalid?: boolean;
+};
+export type SelectRootProps = SelectSingleRootProps | SelectMultipleRootProps;
+export type { SelectMultipleRootProps, SelectOption } from './MultipleSelect.js';
+export declare function SelectRoot({ dir, disabled, invalid, readOnly, required, ...props }: SelectRootProps): import("react").JSX.Element;
+export type SelectSize = 'sm' | 'md' | 'lg';
+export interface SelectTriggerProps extends SelectPrimitive.SelectTriggerProps {
+    /** Decorative slots inside the shared trigger surface. */
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    /** Replaces the dropdown indicator; null removes it. */
+    icon?: ReactNode;
+    hideValue?: boolean;
+    hideIndicator?: boolean;
+    /** Shows startIcon, then endIcon, then the indicator as a square control. */
+    iconOnly?: boolean;
+    fullWidth?: boolean;
+    textAlign?: 'start' | 'center' | 'end';
+    invalid?: boolean;
+    seed?: string | number;
+    size?: SelectSize;
+}
+export declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface SelectValueProps extends Omit<SelectPrimitive.SelectValueProps, 'placeholder'> {
+    placeholder?: ReactNode;
+    seed?: string | number;
+}
+export declare const SelectValue: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type SelectPortalProps = SelectPrimitive.SelectPortalProps;
+export declare function SelectPortal({ children, ...props }: SelectPortalProps): import("react").JSX.Element;
+export interface SelectContentProps extends SelectPrimitive.SelectContentProps {
+    seed?: string | number;
+    surfaceClassName?: string;
+    surfaceRadius?: number;
+    surfaceVariant?: PencilSurfaceVariant;
+}
+export declare const SelectContent: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectViewportProps = SelectPrimitive.SelectViewportProps;
+export declare const SelectViewport: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectViewportProps & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectGroupProps = SelectPrimitive.SelectGroupProps;
+export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SelectLabelProps extends Omit<SelectPrimitive.SelectLabelProps, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const SelectLabel: import("react").ForwardRefExoticComponent<SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SelectItemProps extends SelectPrimitive.SelectItemProps {
+    seed?: string | number;
+    surfaceClassName?: string;
+}
+export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SelectItemTextProps extends Omit<SelectPrimitive.SelectItemTextProps, 'children'> {
+    children: string;
+    seed?: string | number;
+}
+export declare const SelectItemText: import("react").ForwardRefExoticComponent<SelectItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface SelectItemIndicatorProps extends SelectPrimitive.SelectItemIndicatorProps {
+    seed?: string | number;
+}
+export declare const SelectItemIndicator: import("react").ForwardRefExoticComponent<SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type SelectScrollUpButtonProps = SelectPrimitive.SelectScrollUpButtonProps & {
+    seed?: string | number;
+};
+export declare const SelectScrollUpButton: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectScrollUpButtonProps & {
+    seed?: string | number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type SelectScrollDownButtonProps = SelectPrimitive.SelectScrollDownButtonProps & {
+    seed?: string | number;
+};
+export declare const SelectScrollDownButton: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectScrollDownButtonProps & {
+    seed?: string | number;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export interface SelectSeparatorProps extends Omit<SelectPrimitive.SelectSeparatorProps, 'children'> {
+    seed?: string | number;
+}
+export declare const SelectSeparator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SelectClearProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    seed?: string | number;
+}
+export declare const SelectClear: import("react").ForwardRefExoticComponent<SelectClearProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Select: Readonly<{
+    Searchable: import("react").ForwardRefExoticComponent<import("./SearchableSelect.js").SearchableSelectProps & import("react").RefAttributes<HTMLDivElement>>;
+    Root: typeof SelectRoot;
+    Trigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Value: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Portal: typeof SelectPortal;
+    Content: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Viewport: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectViewportProps & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<SelectLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<SelectItemTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
+    ScrollUpButton: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectScrollUpButtonProps & {
+        seed?: string | number;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    ScrollDownButton: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectScrollDownButtonProps & {
+        seed?: string | number;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Clear: import("react").ForwardRefExoticComponent<SelectClearProps & import("react").RefAttributes<HTMLButtonElement>>;
+}>;

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