@inkra/react 0.1.0 → 0.2.0

package/dist/color-picker/index.d.ts

@@ -0,0 +1,31 @@
+import type { FieldsetHTMLAttributes, ReactNode } from 'react';
+import type { ColorValue } from './color.js';
+export interface ColorPreset {
+    value: string;
+    label?: string;
+}
+export interface ColorPickerLabels {
+    palette?: string;
+    value?: string;
+    alpha?: string;
+    presets?: string;
+    invalid?: string;
+}
+export interface ColorPickerChangeDetails {
+    source: 'palette' | 'alpha' | 'input' | 'preset';
+}
+export interface ColorPickerProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange' | 'value'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: ColorValue, details: ColorPickerChangeDetails) => void;
+    onInvalidInput?: (input: string) => void;
+    presets?: readonly (string | ColorPreset)[];
+    label?: ReactNode;
+    labels?: ColorPickerLabels;
+    name?: string;
+    showAlpha?: boolean;
+    seed?: string | number;
+}
+export declare function ColorPicker({ className, defaultValue, disabled, id, label, labels, name, onInvalidInput, onValueChange, presets, seed, showAlpha, value, ...props }: ColorPickerProps): import("react").JSX.Element;
+export { DEFAULT_COLOR_VALUE, colorAlphaPercent, colorRgbValue, formatColorValue, normalizeColorValue, parseColorValue, withColorAlpha, withColorRgb, } from './color.js';
+export type { ColorChannels, ColorValue } from './color.js';

package/dist/color-picker/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useState } from 'react';
+import { Input } from '../form/Input.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Slider } from '../slider/index.js';
+import { DEFAULT_COLOR_VALUE, colorAlphaPercent, colorRgbValue, normalizeColorValue, withColorAlpha, withColorRgb, } from './color.js';
+const defaultLabels = {
+    palette: 'Open color palette',
+    value: 'Color value',
+    alpha: 'Opacity',
+    presets: 'Color presets',
+    invalid: 'Use #RGB, #RGBA, #RRGGBB, or #RRGGBBAA.',
+};
+function presetData(preset) {
+    const input = typeof preset === 'string' ? preset : preset.value;
+    const value = normalizeColorValue(input);
+    if (!value)
+        return null;
+    return { value, label: typeof preset === 'string' ? value : preset.label ?? value };
+}
+export function ColorPicker({ className, defaultValue = DEFAULT_COLOR_VALUE, disabled = false, id, label = 'Color', labels, name, onInvalidInput, onValueChange, presets = [], seed, showAlpha = true, value, ...props }) {
+    const generatedId = useId();
+    const resolvedId = id ?? `inkra-color-picker-${generatedId}`;
+    const resolvedSeed = seed ?? resolvedId;
+    const controlledValue = value === undefined ? null : normalizeColorValue(value);
+    const normalizedDefault = normalizeColorValue(defaultValue) ?? DEFAULT_COLOR_VALUE;
+    const [uncontrolledValue, setUncontrolledValue] = useState(normalizedDefault);
+    const currentValue = controlledValue ?? (value === undefined ? uncontrolledValue : DEFAULT_COLOR_VALUE);
+    const [draft, setDraft] = useState(currentValue);
+    const copy = { ...defaultLabels, ...labels };
+    const parsedPresets = useMemo(() => presets.map(presetData).filter((preset) => preset !== null), [presets]);
+    const inputInvalid = normalizeColorValue(draft) === null;
+    const rgbValue = colorRgbValue(currentValue) ?? '#4b96aa';
+    const alpha = colorAlphaPercent(currentValue);
+    useEffect(() => setDraft(currentValue), [currentValue]);
+    const commit = (next, source) => {
+        if (value === undefined)
+            setUncontrolledValue(next);
+        else
+            setDraft(currentValue);
+        onValueChange?.(next, { source });
+    };
+    const submitDraft = () => {
+        const normalized = normalizeColorValue(draft);
+        if (normalized)
+            commit(normalized, 'input');
+        else
+            onInvalidInput?.(draft);
+    };
+    return _jsxs("fieldset", { ...props, className: ['inkra-color-picker', className].filter(Boolean).join(' '), "data-alpha": showAlpha || undefined, "data-controlled": value !== undefined || undefined, "data-invalid-value": value !== undefined && controlledValue === null || undefined, disabled: disabled, id: resolvedId, children: [_jsx("legend", { className: "inkra-color-picker__legend", children: typeof label === 'string' ? _jsx(PencilText, { seed: `${resolvedSeed}-legend`, children: label }) : label }), _jsxs("div", { className: "inkra-color-picker__main", children: [_jsxs("label", { className: "inkra-color-picker__palette", "aria-label": copy.palette, title: copy.palette, children: [_jsx("span", { className: "inkra-color-picker__checker", "aria-hidden": "true" }), _jsx("span", { className: "inkra-color-picker__current", "aria-hidden": "true", style: { backgroundColor: currentValue } }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-color-picker__palette-outline", variant: "outline", seed: `${resolvedSeed}-palette` }), _jsx("input", { "aria-label": copy.palette, className: "inkra-color-picker__native", disabled: disabled, type: "color", value: rgbValue, onChange: event => {
+                                    const next = withColorRgb(currentValue, event.currentTarget.value);
+                                    if (next)
+                                        commit(next, 'palette');
+                                } })] }), _jsxs("div", { className: "inkra-color-picker__value-field", children: [_jsx("label", { className: "inkra-color-picker__label", htmlFor: `${resolvedId}-value`, children: _jsx(PencilText, { seed: `${resolvedSeed}-value-label`, children: copy.value }) }), _jsx(Input, { id: `${resolvedId}-value`, "aria-describedby": inputInvalid ? `${resolvedId}-error` : undefined, "aria-invalid": inputInvalid || undefined, autoCapitalize: "off", autoComplete: "off", className: "inkra-color-picker__input", disabled: disabled, inputMode: "text", spellCheck: false, value: draft, onBlur: submitDraft, onKeyDown: event => {
+                                    if (event.key === 'Enter') {
+                                        event.preventDefault();
+                                        submitDraft();
+                                    }
+                                    if (event.key === 'Escape')
+                                        setDraft(currentValue);
+                                }, onValueChange: setDraft }), _jsx("span", { className: "inkra-color-picker__error", id: `${resolvedId}-error`, "aria-live": "polite", children: inputInvalid ? copy.invalid : '' })] })] }), showAlpha ? _jsxs("div", { className: "inkra-color-picker__alpha", children: [_jsxs("div", { className: "inkra-color-picker__alpha-heading", children: [_jsx("span", { id: `${resolvedId}-alpha-label`, children: _jsx(PencilText, { seed: `${resolvedSeed}-alpha-label`, children: copy.alpha }) }), _jsxs("output", { htmlFor: `${resolvedId}-alpha`, children: [alpha, "%"] })] }), _jsx(Slider, { "aria-labelledby": `${resolvedId}-alpha-label`, disabled: disabled, id: `${resolvedId}-alpha`, max: 100, min: 0, seed: `${resolvedSeed}-alpha`, value: [alpha], getValueLabel: number => `${number}%`, onValueChange: values => {
+                            const next = withColorAlpha(currentValue, values[0]);
+                            if (next)
+                                commit(next, 'alpha');
+                        } })] }) : null, parsedPresets.length ? _jsxs(_Fragment, { children: [_jsx(PencilLine, { className: "inkra-color-picker__divider", seed: `${resolvedSeed}-divider` }), _jsx("div", { className: "inkra-color-picker__presets", role: "group", "aria-label": copy.presets, children: parsedPresets.map((preset, index) => _jsxs("button", { type: "button", "aria-label": preset.label, "aria-pressed": preset.value === currentValue, className: "inkra-color-picker__preset", disabled: disabled, title: preset.label, onClick: () => commit(preset.value, 'preset'), children: [_jsx("span", { className: "inkra-color-picker__checker", "aria-hidden": "true" }), _jsx("span", { className: "inkra-color-picker__preset-color", "aria-hidden": "true", style: { backgroundColor: preset.value } }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-color-picker__preset-outline", variant: preset.value === currentValue ? 'selection' : 'outline', seed: `${resolvedSeed}-preset-${index}` })] }, `${preset.value}-${index}`)) })] }) : null, name ? _jsx("input", { type: "hidden", name: name, value: currentValue }) : null] });
+}
+export { DEFAULT_COLOR_VALUE, colorAlphaPercent, colorRgbValue, formatColorValue, normalizeColorValue, parseColorValue, withColorAlpha, withColorRgb, } from './color.js';

package/dist/command/index.d.ts

@@ -0,0 +1,23 @@
+import { Command as Primitive } from 'cmdk';
+import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
+export type CommandRootProps = Omit<ComponentPropsWithoutRef<typeof Primitive>, 'asChild'>;
+export type CommandInputProps = Omit<ComponentPropsWithoutRef<typeof Primitive.Input>, 'asChild'>;
+export type CommandListProps = Omit<ComponentPropsWithoutRef<typeof Primitive.List>, 'asChild'>;
+export interface CommandItemProps extends Omit<ComponentPropsWithoutRef<typeof Primitive.Item>, 'asChild'> {
+    icon?: ReactNode;
+    shortcut?: ReactNode;
+}
+export type CommandGroupProps = Omit<ComponentPropsWithoutRef<typeof Primitive.Group>, 'asChild'>;
+export type CommandEmptyProps = Omit<ComponentPropsWithoutRef<typeof Primitive.Empty>, 'asChild'>;
+export type CommandSeparatorProps = Omit<ComponentPropsWithoutRef<typeof Primitive.Separator>, 'asChild' | 'children'>;
+export type CommandShortcutProps = HTMLAttributes<HTMLElement>;
+export declare const Command: {
+    Root: import("react").ForwardRefExoticComponent<CommandRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Input: import("react").ForwardRefExoticComponent<CommandInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    List: import("react").ForwardRefExoticComponent<CommandListProps & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<CommandGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<CommandItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Empty: import("react").ForwardRefExoticComponent<CommandEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<CommandSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Shortcut: import("react").ForwardRefExoticComponent<CommandShortcutProps & import("react").RefAttributes<HTMLElement>>;
+};

package/dist/command/index.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as Primitive } from 'cmdk';
+import { forwardRef, useRef } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PencilLine } from '../PencilLine.js';
+function classes(base, extra) { return [base, extra].filter(Boolean).join(' '); }
+function copy(value) { return typeof value === 'string' ? _jsx(PencilText, { children: value }) : value; }
+const Root = forwardRef(function Root({ className, children, loop = true, onKeyDown, onCompositionStartCapture, onCompositionEndCapture, ...props }, ref) {
+    const composing = useRef(false);
+    return _jsx(Primitive, { ...props, ref: ref, loop: loop, className: classes('inkra-command', className), onCompositionStartCapture: event => { composing.current = true; onCompositionStartCapture?.(event); }, onCompositionEndCapture: event => { composing.current = false; onCompositionEndCapture?.(event); }, onKeyDown: event => {
+            // Capture composition state as well as native flags before cmdk handles Enter.
+            if (event.key === 'Enter' && (composing.current || event.nativeEvent.isComposing || event.keyCode === 229))
+                event.preventDefault();
+            onKeyDown?.(event);
+        }, children: _jsx(PencilSurface, { variant: "paper", radius: 8, className: "inkra-command__paper", children: children }) });
+});
+const Input = forwardRef(function Input({ className, ...props }, ref) {
+    return _jsxs("div", { className: "inkra-command__input-wrap", children: [_jsx(Primitive.Input, { ...props, ref: ref, className: classes('inkra-command__input', className) }), _jsx(PencilLine, { className: "inkra-command__input-line" })] });
+});
+const List = forwardRef(function List({ className, ...props }, ref) {
+    return _jsx(Primitive.List, { ...props, ref: ref, className: classes('inkra-command__list', className) });
+});
+const Item = forwardRef(function Item({ className, children, icon, shortcut, ...props }, ref) {
+    return _jsxs(Primitive.Item, { ...props, ref: ref, className: classes('inkra-command__item', className), children: [_jsx(PencilSurface, { as: "span", variant: "selection", "aria-hidden": "true", className: "inkra-command__highlight" }), icon != null && _jsx("span", { "aria-hidden": "true", className: "inkra-command__icon", children: icon }), _jsx("span", { className: "inkra-command__label", children: copy(children) }), shortcut != null && _jsx(Shortcut, { children: shortcut })] });
+});
+const Group = forwardRef(function Group({ className, heading, ...props }, ref) {
+    return _jsx(Primitive.Group, { ...props, heading: copy(heading), ref: ref, className: classes('inkra-command__group', className) });
+});
+const Empty = forwardRef(function Empty({ className, children, ...props }, ref) {
+    return _jsx(Primitive.Empty, { ...props, ref: ref, className: classes('inkra-command__empty', className), children: copy(children) });
+});
+const Separator = forwardRef(function Separator({ className, ...props }, ref) {
+    return _jsx(Primitive.Separator, { ...props, ref: ref, className: classes('inkra-command__separator', className), children: _jsx(PencilLine, {}) });
+});
+const Shortcut = forwardRef(function Shortcut({ className, children, ...props }, ref) {
+    return _jsx("kbd", { ...props, ref: ref, className: classes('inkra-command__shortcut', className), children: copy(children) });
+});
+export const Command = { Root, Input, List, Group, Item, Empty, Separator, Shortcut };

package/dist/context-menu/index.d.ts

@@ -0,0 +1,76 @@
+import * as Primitive from '@radix-ui/react-dropdown-menu';
+import type { ComponentPropsWithoutRef, ElementType, HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { DropdownMenu } from '../dropdown-menu/index.js';
+import type { DropdownMenuContentProps } from '../dropdown-menu/index.js';
+export type ContextMenuOpenReason = 'pointer' | 'keyboard' | 'long-press' | 'dismiss';
+export interface ContextMenuOpenChangeDetails {
+    reason: ContextMenuOpenReason;
+    event?: Event;
+}
+export interface ContextMenuRootProps {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    modal?: boolean;
+    dir?: 'ltr' | 'rtl';
+    onOpenChange?: (open: boolean, details: ContextMenuOpenChangeDetails) => void;
+}
+export declare function ContextMenuRoot({ children, defaultOpen, dir, modal, onOpenChange, open, }: ContextMenuRootProps): import("react").JSX.Element;
+export type ContextMenuNativePolicy = 'editable' | 'always' | 'never';
+export interface ContextMenuLongPressOptions {
+    delay?: number;
+    movementTolerance?: number;
+}
+export interface ContextMenuTriggerProps extends Omit<HTMLAttributes<HTMLElement>, 'onContextMenu'> {
+    as?: ElementType;
+    disabled?: boolean;
+    exclude?: string | ((target: Element, currentTarget: HTMLElement) => boolean);
+    longPress?: boolean | ContextMenuLongPressOptions;
+    nativeContextMenu?: ContextMenuNativePolicy;
+    onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
+}
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenuTriggerProps & import("react").RefAttributes<HTMLElement>>;
+export type ContextMenuPortalProps = ComponentPropsWithoutRef<typeof DropdownMenu.Portal>;
+export declare const ContextMenuPortal: ({ children, ...props }: import("../dropdown-menu/index.js").DropdownMenuPortalProps) => import("react").JSX.Element;
+export type ContextMenuContentProps = DropdownMenuContentProps;
+export declare const ContextMenuContent: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export type ContextMenuItemProps = ComponentPropsWithoutRef<typeof DropdownMenu.Item>;
+export declare const ContextMenuItem: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export type ContextMenuCheckboxItemProps = ComponentPropsWithoutRef<typeof DropdownMenu.CheckboxItem>;
+export declare const ContextMenuCheckboxItem: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export type ContextMenuRadioItemProps = ComponentPropsWithoutRef<typeof DropdownMenu.RadioItem>;
+export declare const ContextMenuRadioItem: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export type ContextMenuLabelProps = ComponentPropsWithoutRef<typeof DropdownMenu.Label>;
+export declare const ContextMenuLabel: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+export type ContextMenuSeparatorProps = ComponentPropsWithoutRef<typeof DropdownMenu.Separator>;
+export declare const ContextMenuSeparator: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export type ContextMenuGroupProps = ComponentPropsWithoutRef<typeof DropdownMenu.Group>;
+export declare const ContextMenuGroup: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export type ContextMenuRadioGroupProps = ComponentPropsWithoutRef<typeof DropdownMenu.RadioGroup>;
+export declare const ContextMenuRadioGroup: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export type ContextMenuSubProps = ComponentPropsWithoutRef<typeof Primitive.Sub>;
+export declare const ContextMenuSub: import("react").FC<Primitive.DropdownMenuSubProps>;
+export interface ContextMenuSubTriggerProps extends Omit<ComponentPropsWithoutRef<typeof Primitive.SubTrigger>, 'asChild'> {
+    icon?: ReactNode;
+}
+export declare const ContextMenuSubTrigger: import("react").ForwardRefExoticComponent<ContextMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ContextMenuSubContentProps extends Omit<ComponentPropsWithoutRef<typeof Primitive.SubContent>, 'asChild'> {
+    seed?: string | number;
+}
+export declare const ContextMenuSubContent: import("react").ForwardRefExoticComponent<ContextMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ContextMenu: Readonly<{
+    Root: typeof ContextMenuRoot;
+    Trigger: import("react").ForwardRefExoticComponent<ContextMenuTriggerProps & import("react").RefAttributes<HTMLElement>>;
+    Portal: ({ children, ...props }: import("../dropdown-menu/index.js").DropdownMenuPortalProps) => import("react").JSX.Element;
+    Content: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<import("../dropdown-menu/index.js").DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioGroup: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Sub: import("react").FC<Primitive.DropdownMenuSubProps>;
+    SubTrigger: import("react").ForwardRefExoticComponent<ContextMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+    SubContent: import("react").ForwardRefExoticComponent<ContextMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/context-menu/index.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Primitive from '@radix-ui/react-dropdown-menu';
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { DropdownMenu } from '../dropdown-menu/index.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 DEFAULT_EXCLUDE = '[data-context-menu-native]';
+const DEFAULT_LONG_PRESS_DELAY = 600;
+const DEFAULT_LONG_PRESS_TOLERANCE = 10;
+const submenuPaths = [{ d: 'm9 18 6-6-6-6' }];
+const classes = (...values) => values.filter(Boolean).join(' ');
+const ContextMenuContext = createContext(null);
+const ContextMenuAnchor = forwardRef(function ContextMenuAnchor({ type: _type, ...props }, ref) {
+    return _jsx("span", { ...props, ref: ref });
+});
+function useContextMenuContext(component) {
+    const context = useContext(ContextMenuContext);
+    if (!context)
+        throw new Error(`${component} must be used inside ContextMenu.Root.`);
+    return context;
+}
+function viewportPoint(point) {
+    if (typeof window === 'undefined')
+        return point;
+    return {
+        x: Math.max(0, Math.min(point.x, window.innerWidth)),
+        y: Math.max(0, Math.min(point.y, window.innerHeight)),
+    };
+}
+export function ContextMenuRoot({ children, defaultOpen = false, dir, modal = true, onOpenChange, open, }) {
+    const controlled = open !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [point, setPoint] = useState({ x: 0, y: 0 });
+    const [positioned, setPositioned] = useState(false);
+    const [anchorVersion, setAnchorVersion] = useState(0);
+    const targetRef = useRef(null);
+    const currentOpen = controlled ? open : uncontrolledOpen;
+    const changeOpen = useCallback((nextOpen, details) => {
+        if (!controlled)
+            setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen, details);
+    }, [controlled, onOpenChange]);
+    const openAt = useCallback((nextPoint, reason, event) => {
+        setPoint(viewportPoint(nextPoint));
+        setPositioned(true);
+        setAnchorVersion(version => version + 1);
+        changeOpen(true, { reason, event });
+    }, [changeOpen]);
+    const restoreFocus = useCallback(() => {
+        const target = targetRef.current;
+        if (!target || typeof target.focus !== 'function')
+            return;
+        target.focus({ preventScroll: true });
+    }, []);
+    useEffect(() => {
+        if (!currentOpen || positioned)
+            return;
+        const rect = targetRef.current?.getBoundingClientRect();
+        if (!rect)
+            return;
+        setPoint(viewportPoint({ x: rect.left, y: rect.bottom }));
+        setPositioned(true);
+    }, [currentOpen, positioned]);
+    const context = useMemo(() => ({
+        openAt,
+        restoreFocus,
+        setTarget: target => { targetRef.current = target; },
+    }), [openAt, restoreFocus]);
+    return (_jsx(PortalThemeProvider, { children: _jsx(ContextMenuContext.Provider, { value: context, children: _jsxs(Primitive.Root, { dir: dir, modal: modal, open: currentOpen, onOpenChange: nextOpen => changeOpen(nextOpen, { reason: 'dismiss' }), children: [children, _jsx(Primitive.Trigger, { asChild: true, children: _jsx(ContextMenuAnchor, { "aria-hidden": "true", className: "inkra-context-menu__anchor", style: { left: point.x, top: point.y } }) }, anchorVersion)] }) }) }));
+}
+function hasTextSelectionWithin(element) {
+    if (typeof window === 'undefined')
+        return false;
+    const selection = window.getSelection();
+    if (!selection || selection.isCollapsed)
+        return false;
+    return Boolean((selection.anchorNode && element.contains(selection.anchorNode))
+        || (selection.focusNode && element.contains(selection.focusNode)));
+}
+function isEditableTarget(target) {
+    return Boolean(target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])'));
+}
+function matchesExclusion(exclude, target, currentTarget) {
+    if (typeof exclude === 'function')
+        return exclude(target, currentTarget);
+    if (!exclude)
+        return false;
+    try {
+        return Boolean(target.closest(exclude));
+    }
+    catch {
+        return false;
+    }
+}
+function shouldUseNativeMenu(policy, target, currentTarget, exclude) {
+    if (matchesExclusion(exclude, target, currentTarget))
+        return true;
+    if (policy === 'always')
+        return true;
+    if (policy === 'never')
+        return false;
+    return isEditableTarget(target) || hasTextSelectionWithin(currentTarget);
+}
+function composeHandler(supplied, owned) {
+    return (event) => {
+        supplied?.(event);
+        const maybePrevented = event;
+        if (!maybePrevented.defaultPrevented)
+            owned(event);
+    };
+}
+export const ContextMenuTrigger = forwardRef(function ContextMenuTrigger({ as: Component = 'div', children, disabled = false, exclude = DEFAULT_EXCLUDE, longPress = false, nativeContextMenu = 'editable', onContextMenu, onKeyDown, onPointerCancel, onPointerDown, onPointerLeave, onPointerMove, onPointerUp, tabIndex, ...props }, forwardedRef) {
+    const context = useContextMenuContext('ContextMenu.Trigger');
+    const longPressTimer = useRef(null);
+    const startPoint = useRef(null);
+    const pointerType = useRef('');
+    const suppressContextMenuUntil = useRef(0);
+    const { setTarget } = context;
+    const captureTarget = useCallback((node) => {
+        setTarget(node);
+        if (typeof forwardedRef === 'function')
+            forwardedRef(node);
+        else if (forwardedRef)
+            forwardedRef.current = node;
+    }, [forwardedRef, setTarget]);
+    const targetRef = usePortalTriggerRef(captureTarget);
+    const longPressOptions = typeof longPress === 'object' ? longPress : {};
+    const longPressEnabled = Boolean(longPress);
+    const delay = Math.max(300, longPressOptions.delay ?? DEFAULT_LONG_PRESS_DELAY);
+    const tolerance = Math.max(4, longPressOptions.movementTolerance ?? DEFAULT_LONG_PRESS_TOLERANCE);
+    useEffect(() => () => {
+        if (longPressTimer.current)
+            clearTimeout(longPressTimer.current);
+    }, []);
+    const cancelLongPress = () => {
+        if (longPressTimer.current)
+            clearTimeout(longPressTimer.current);
+        longPressTimer.current = null;
+        startPoint.current = null;
+    };
+    const openFromKeyboard = (event) => {
+        if (disabled || (event.key !== 'ContextMenu' && !(event.shiftKey && event.key === 'F10')))
+            return;
+        const target = event.target instanceof Element ? event.target : event.currentTarget;
+        if (shouldUseNativeMenu(nativeContextMenu, target, event.currentTarget, exclude))
+            return;
+        event.preventDefault();
+        context.setTarget(event.currentTarget);
+        const rect = event.currentTarget.getBoundingClientRect();
+        context.openAt({ x: rect.left, y: rect.bottom }, 'keyboard', event.nativeEvent);
+    };
+    const openFromPointer = (event) => {
+        if (disabled)
+            return;
+        const target = event.target instanceof Element ? event.target : event.currentTarget;
+        if (pointerType.current === 'touch' && !longPressEnabled)
+            return;
+        if (shouldUseNativeMenu(nativeContextMenu, target, event.currentTarget, exclude))
+            return;
+        event.preventDefault();
+        cancelLongPress();
+        if (Date.now() < suppressContextMenuUntil.current)
+            return;
+        context.setTarget(event.currentTarget);
+        context.openAt({ x: event.clientX, y: event.clientY }, 'pointer', event.nativeEvent);
+    };
+    const startLongPress = (event) => {
+        pointerType.current = event.pointerType;
+        if (!longPressEnabled || disabled || (event.pointerType !== 'touch' && event.pointerType !== 'pen'))
+            return;
+        const target = event.target instanceof Element ? event.target : event.currentTarget;
+        if (shouldUseNativeMenu(nativeContextMenu, target, event.currentTarget, exclude))
+            return;
+        cancelLongPress();
+        startPoint.current = { x: event.clientX, y: event.clientY };
+        const nativeEvent = event.nativeEvent;
+        const currentTarget = event.currentTarget;
+        const pressPoint = { x: event.clientX, y: event.clientY };
+        longPressTimer.current = setTimeout(() => {
+            longPressTimer.current = null;
+            if (hasTextSelectionWithin(currentTarget))
+                return;
+            suppressContextMenuUntil.current = Date.now() + 1000;
+            context.setTarget(currentTarget);
+            context.openAt(pressPoint, 'long-press', nativeEvent);
+        }, delay);
+    };
+    const trackLongPress = (event) => {
+        if (!startPoint.current || !longPressTimer.current)
+            return;
+        const distance = Math.hypot(event.clientX - startPoint.current.x, event.clientY - startPoint.current.y);
+        if (distance > tolerance)
+            cancelLongPress();
+    };
+    return (_jsx(Component, { ...props, "aria-disabled": disabled || undefined, "data-context-menu-trigger": "", ref: targetRef, tabIndex: disabled ? -1 : (tabIndex ?? 0), onContextMenu: composeHandler(onContextMenu, openFromPointer), onKeyDown: composeHandler(onKeyDown, openFromKeyboard), onPointerCancel: composeHandler(onPointerCancel, cancelLongPress), onPointerDown: composeHandler(onPointerDown, startLongPress), onPointerLeave: composeHandler(onPointerLeave, cancelLongPress), onPointerMove: composeHandler(onPointerMove, trackLongPress), onPointerUp: composeHandler(onPointerUp, cancelLongPress), children: children }));
+});
+export const ContextMenuPortal = DropdownMenu.Portal;
+export const ContextMenuContent = forwardRef(function ContextMenuContent({ align = 'start', onCloseAutoFocus, side = 'right', sideOffset = 2, ...props }, ref) {
+    const context = useContextMenuContext('ContextMenu.Content');
+    return (_jsx(DropdownMenu.Content, { ...props, align: align, ref: ref, side: side, sideOffset: sideOffset, onCloseAutoFocus: event => {
+            onCloseAutoFocus?.(event);
+            if (event.defaultPrevented)
+                return;
+            event.preventDefault();
+            context.restoreFocus();
+        } }));
+});
+export const ContextMenuItem = DropdownMenu.Item;
+export const ContextMenuCheckboxItem = DropdownMenu.CheckboxItem;
+export const ContextMenuRadioItem = DropdownMenu.RadioItem;
+export const ContextMenuLabel = DropdownMenu.Label;
+export const ContextMenuSeparator = DropdownMenu.Separator;
+export const ContextMenuGroup = DropdownMenu.Group;
+export const ContextMenuRadioGroup = DropdownMenu.RadioGroup;
+export const ContextMenuSub = Primitive.Sub;
+export const ContextMenuSubTrigger = forwardRef(function ContextMenuSubTrigger({ children, className, icon, ...props }, ref) {
+    return (_jsxs(Primitive.SubTrigger, { ...props, className: classes('inkra-menu__item', 'inkra-context-menu__sub-trigger', className), ref: ref, children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-menu__highlight" }), _jsx("span", { className: "inkra-menu__icon", "aria-hidden": "true", children: icon }), _jsx("span", { className: "inkra-menu__label", children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children }), _jsx("span", { "aria-hidden": "true", className: "inkra-context-menu__sub-indicator", children: _jsx(PencilIcon, { decorative: true, paths: submenuPaths, size: 16, sourceSize: 24 }) })] }));
+});
+export const ContextMenuSubContent = forwardRef(function ContextMenuSubContent({ children, className, collisionPadding = 8, seed, sideOffset = 4, ...props }, ref) {
+    const id = useId();
+    return (_jsx(Primitive.Portal, { children: _jsx(PortalThemeBridge, { children: _jsx(Primitive.SubContent, { ...props, className: classes('inkra-menu', 'inkra-context-menu__sub-content', className), collisionPadding: collisionPadding, ref: ref, sideOffset: sideOffset, children: _jsx(PencilSurface, { className: "inkra-menu__paper", radius: 8, seed: seed ?? `context-submenu-${id}`, variant: "paper", children: children }) }) }) }));
+});
+export const ContextMenu = Object.freeze({
+    Root: ContextMenuRoot,
+    Trigger: ContextMenuTrigger,
+    Portal: ContextMenuPortal,
+    Content: ContextMenuContent,
+    Item: ContextMenuItem,
+    CheckboxItem: ContextMenuCheckboxItem,
+    RadioItem: ContextMenuRadioItem,
+    Label: ContextMenuLabel,
+    Separator: ContextMenuSeparator,
+    Group: ContextMenuGroup,
+    RadioGroup: ContextMenuRadioGroup,
+    Sub: ContextMenuSub,
+    SubTrigger: ContextMenuSubTrigger,
+    SubContent: ContextMenuSubContent,
+});

package/dist/data-table/index.d.ts

@@ -0,0 +1,47 @@
+import type { ColumnDef, OnChangeFn, PaginationState, Row, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
+import type { HTMLAttributes, ReactNode } from 'react';
+export type DataTableColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue>;
+export type DataTableSortingState = SortingState;
+export type DataTablePaginationState = PaginationState;
+export type DataTableRowSelectionState = RowSelectionState;
+export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    data: TData[];
+    columns: DataTableColumnDef<TData>[];
+    getRowId: NonNullable<TableOptions<TData>['getRowId']>;
+    caption?: ReactNode;
+    density?: 'compact' | 'comfortable';
+    layout?: 'auto' | 'fixed';
+    striped?: boolean;
+    hoverable?: boolean;
+    stickyHeader?: boolean;
+    captionSide?: 'top' | 'bottom';
+    filterable?: boolean;
+    filterLabel?: string;
+    filterPlaceholder?: string;
+    globalFilter?: string;
+    defaultGlobalFilter?: string;
+    onGlobalFilterChange?: (value: string) => void;
+    sorting?: SortingState;
+    defaultSorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    pagination?: boolean;
+    paginationState?: PaginationState;
+    defaultPagination?: PaginationState;
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    selectable?: boolean;
+    rowSelection?: RowSelectionState;
+    defaultRowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    getRowCanSelect?: (row: Row<TData>) => boolean;
+    loading?: boolean;
+    loadingMessage?: ReactNode;
+    emptyMessage?: ReactNode;
+    selectAllLabel?: string;
+    selectRowLabel?: (row: Row<TData>) => string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    paginationLabel?: string;
+    pageLabel?: (page: number, pageCount: number) => ReactNode;
+    sortStatusLabel?: (columnId: string, direction: false | 'asc' | 'desc') => string;
+}
+export declare function DataTable<TData>({ data, columns, getRowId, caption, density, layout, striped, hoverable, stickyHeader, captionSide, filterable, filterLabel, filterPlaceholder, globalFilter, defaultGlobalFilter, onGlobalFilterChange, sorting, defaultSorting, onSortingChange, pagination, paginationState, defaultPagination, onPaginationChange, selectable, rowSelection, defaultRowSelection, onRowSelectionChange, getRowCanSelect, loading, loadingMessage, emptyMessage, selectAllLabel, selectRowLabel, previousPageLabel, nextPageLabel, paginationLabel, pageLabel, sortStatusLabel, className, ...props }: DataTableProps<TData>): import("react").JSX.Element;

package/dist/data-table/index.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender, functionalUpdate, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { useEffect, useState } from 'react';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { Input } from '../form/Input.js';
+import { Table } from '../content/index.js';
+import { Checkbox } from '../selection/Checkbox.js';
+const sortIcon = [{ d: 'M 8 10 L 12 6 L 16 10 M 8 14 L 12 18 L 16 14' }];
+const previousIcon = [{ d: 'M 14 7 L 9 12 L 14 17' }];
+const nextIcon = [{ d: 'M 10 7 L 15 12 L 10 17' }];
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function resolve(updater, current) {
+    return functionalUpdate(updater, current);
+}
+function SelectionCheckbox(props) {
+    return _jsx(Checkbox, { className: "inkra-data-table__selection", checked: props.checked, indeterminate: props.indeterminate, disabled: props.disabled, label: _jsx("span", { className: "inkra-visually-hidden", children: props.label }), onCheckedChange: props.onChange });
+}
+export function DataTable({ data, columns, getRowId, caption, density = 'comfortable', layout = 'auto', striped = false, hoverable = true, stickyHeader = false, captionSide = 'top', filterable = false, filterLabel = 'Filter rows', filterPlaceholder = 'Filter rows', globalFilter, defaultGlobalFilter = '', onGlobalFilterChange, sorting, defaultSorting = [], onSortingChange, pagination = false, paginationState, defaultPagination = { pageIndex: 0, pageSize: 10 }, onPaginationChange, selectable = false, rowSelection, defaultRowSelection = {}, onRowSelectionChange, getRowCanSelect, loading = false, loadingMessage = 'Loading rows', emptyMessage = 'No rows', selectAllLabel = 'Select all rows on this page', selectRowLabel = row => `Select row ${row.id}`, previousPageLabel = 'Previous page', nextPageLabel = 'Next page', paginationLabel = 'Table pagination', pageLabel = (page, pageCount) => `Page ${page} of ${pageCount}`, sortStatusLabel = (columnId, direction) => direction === 'asc' ? `${columnId}: sorted ascending` : direction === 'desc' ? `${columnId}: sorted descending` : `${columnId}: not sorted`, className, ...props }) {
+    const [internalFilter, setInternalFilter] = useState(defaultGlobalFilter);
+    const [internalSorting, setInternalSorting] = useState(defaultSorting);
+    const [internalPagination, setInternalPagination] = useState(defaultPagination);
+    const [internalSelection, setInternalSelection] = useState(defaultRowSelection);
+    const resolvedFilter = globalFilter ?? internalFilter;
+    const resolvedSorting = sorting ?? internalSorting;
+    const resolvedPagination = paginationState ?? internalPagination;
+    const resolvedSelection = rowSelection ?? internalSelection;
+    const handleSorting = updater => {
+        if (sorting === undefined)
+            setInternalSorting(current => resolve(updater, current));
+        onSortingChange?.(updater);
+    };
+    const handlePagination = updater => {
+        if (paginationState === undefined)
+            setInternalPagination(current => resolve(updater, current));
+        onPaginationChange?.(updater);
+    };
+    const handleSelection = updater => {
+        if (rowSelection === undefined)
+            setInternalSelection(current => resolve(updater, current));
+        onRowSelectionChange?.(updater);
+    };
+    const handleFilter = (value) => {
+        if (globalFilter === undefined)
+            setInternalFilter(value);
+        onGlobalFilterChange?.(value);
+        if (pagination && resolvedPagination.pageIndex !== 0)
+            handlePagination(current => ({ ...current, pageIndex: 0 }));
+    };
+    const table = useReactTable({
+        data,
+        columns,
+        getRowId,
+        state: {
+            globalFilter: resolvedFilter,
+            sorting: resolvedSorting,
+            pagination: resolvedPagination,
+            rowSelection: resolvedSelection,
+        },
+        onGlobalFilterChange: updater => handleFilter(resolve(updater, resolvedFilter)),
+        onSortingChange: handleSorting,
+        onPaginationChange: handlePagination,
+        onRowSelectionChange: handleSelection,
+        enableRowSelection: selectable ? getRowCanSelect ?? true : false,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
+    });
+    const rows = table.getRowModel().rows;
+    const filteredRowCount = table.getPrePaginationRowModel().rows.length;
+    const pageCount = Math.max(1, table.getPageCount());
+    const visibleColumnCount = Math.max(1, table.getVisibleLeafColumns().length + (selectable ? 1 : 0));
+    const hasSelectableRows = rows.some(row => row.getCanSelect());
+    useEffect(() => {
+        if (!pagination)
+            return;
+        const lastPageIndex = Math.max(0, Math.ceil(filteredRowCount / resolvedPagination.pageSize) - 1);
+        if (resolvedPagination.pageIndex <= lastPageIndex)
+            return;
+        const next = { ...resolvedPagination, pageIndex: lastPageIndex };
+        if (paginationState === undefined)
+            setInternalPagination(next);
+        onPaginationChange?.(next);
+    }, [filteredRowCount, onPaginationChange, pagination, paginationState, resolvedPagination]);
+    return _jsxs("div", { ...props, className: classes('inkra-data-table', className), "data-loading": loading || undefined, children: [filterable && _jsx("div", { className: "inkra-data-table__toolbar", children: _jsxs("label", { className: "inkra-data-table__filter", children: [_jsx("span", { children: filterLabel }), _jsx(Input, { type: "search", value: resolvedFilter, placeholder: filterPlaceholder, onChange: event => handleFilter(event.currentTarget.value) })] }) }), _jsx(Table.Container, { className: "inkra-data-table__container", children: _jsxs(Table.Root, { density: density, layout: layout, striped: striped, hoverable: hoverable, stickyHeader: stickyHeader, captionSide: captionSide, children: [caption != null && _jsx(Table.Caption, { children: caption }), _jsx(Table.Header, { children: table.getHeaderGroups().map(headerGroup => _jsxs(Table.Row, { children: [selectable && _jsx(Table.Head, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: pagination ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected(), indeterminate: pagination ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected(), label: selectAllLabel, disabled: loading || !hasSelectableRows, onChange: checked => pagination ? table.toggleAllPageRowsSelected(checked) : table.toggleAllRowsSelected(checked) }) }), headerGroup.headers.map(header => _jsx(Table.Head, { colSpan: header.colSpan, "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : header.column.getCanSort() ? 'none' : undefined, children: header.isPlaceholder ? null : header.column.getCanSort() ? _jsxs("button", { type: "button", className: "inkra-data-table__sort", "data-sorted": header.column.getIsSorted() || undefined, onClick: header.column.getToggleSortingHandler(), children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(PencilIcon, { "aria-hidden": "true", paths: sortIcon, size: 18, sourceSize: 24, active: Boolean(header.column.getIsSorted()) }), _jsx("span", { className: "inkra-visually-hidden", children: sortStatusLabel(header.column.id, header.column.getIsSorted()) })] }) : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))] }, headerGroup.id)) }), _jsx(Table.Body, { children: loading ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", role: "status", children: loadingMessage }) }) })
+                                : rows.length === 0 ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", children: emptyMessage }) }) })
+                                    : rows.map(row => _jsxs(Table.Row, { selected: row.getIsSelected(), children: [selectable && _jsx(Table.Cell, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: row.getIsSelected(), label: selectRowLabel(row), disabled: !row.getCanSelect(), onChange: checked => row.toggleSelected(checked) }) }), row.getVisibleCells().map(cell => _jsx(Table.Cell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))] }, row.id)) })] }) }), pagination && _jsxs("nav", { className: "inkra-data-table__pagination", "aria-label": paginationLabel, children: [_jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": previousPageLabel, disabled: loading || !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(PencilIcon, { paths: previousIcon, size: 18, sourceSize: 24 }) }), _jsx("span", { "aria-live": "polite", children: pageLabel(table.getState().pagination.pageIndex + 1, pageCount) }), _jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": nextPageLabel, disabled: loading || !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(PencilIcon, { paths: nextIcon, size: 18, sourceSize: 24 }) })] })] });
+}