@inkra/react 0.0.0-stage → 0.2.0

package/dist/choice-grid/index.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useId, useImperativeHandle, useRef, } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Checkbox } from '../selection/Checkbox.js';
+import { RadioGroup, RadioGroupItem } from '../selection/RadioGroup.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+function mergeIds(...values) {
+    const merged = Array.from(new Set(values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? [])));
+    return merged.length ? merged.join(' ') : undefined;
+}
+const ChoiceGridContext = createContext(null);
+function GroupMessages({ description, descriptionId, error, errorId }) {
+    return description == null && error == null ? null : (_jsxs("div", { className: "inkra-choice-grid__messages", children: [description == null ? null : (_jsx("div", { className: "inkra-choice-grid__description", id: descriptionId, children: typeof description === 'string'
+                    ? _jsx(PencilText, { seed: `${descriptionId}-text`, children: description })
+                    : description })), error == null ? null : (_jsx("div", { className: "inkra-choice-grid__error", id: errorId, children: typeof error === 'string'
+                    ? _jsx(PencilText, { seed: `${errorId}-text`, children: error })
+                    : error }))] }));
+}
+function gridStyle(style, columns, minItemWidth) {
+    return {
+        ...style,
+        '--inkra-choice-grid-columns': columns,
+        '--inkra-choice-grid-min-item': minItemWidth,
+    };
+}
+export const ChoiceGrid = forwardRef(function ChoiceGrid(props, forwardedRef) {
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className, columns, description, disabled = false, error, form, label, minItemWidth = '13rem', name, style, type = 'single', ...rest } = props;
+    const generatedId = useId();
+    const descriptionId = description == null ? undefined : `inkra-choice-grid-${generatedId}-description`;
+    const errorId = error == null ? undefined : `inkra-choice-grid-${generatedId}-error`;
+    const describedBy = mergeIds(ariaDescribedBy, descriptionId, errorId);
+    const errorMessage = mergeIds(ariaErrorMessage, errorId);
+    const invalid = Boolean(error) || rest['aria-invalid'] === true || rest['aria-invalid'] === 'true';
+    const rootRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    if (type === 'single') {
+        const single = props;
+        const { defaultValue: _defaultValue, onValueChange: _onValueChange, value: _value, ...singleFieldsetProps } = rest;
+        return (_jsxs("div", { className: classes('inkra-choice-grid', className), "data-columns": columns, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-type": "single", style: gridStyle(style, columns, minItemWidth), children: [_jsx(ChoiceGridContext.Provider, { value: { disabled, form, mode: 'single', name }, children: _jsx(RadioGroup, { ...singleFieldsetProps, "aria-describedby": describedBy, "aria-errormessage": errorMessage, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, defaultValue: single.defaultValue, disabled: disabled, form: form, label: label, name: name, onValueChange: single.onValueChange, ref: rootRef, value: single.value, children: children }) }), _jsx(GroupMessages, { description: description, descriptionId: descriptionId, error: error, errorId: errorId })] }));
+    }
+    const multiple = props;
+    const { defaultValues: _defaultValues, onValuesChange: _onValuesChange, values: _values, ...multipleFieldsetProps } = rest;
+    const onMultipleChange = (optionValue, checked) => {
+        if (!multiple.onValuesChange)
+            return;
+        const selected = Array.from(rootRef.current?.querySelectorAll('input[type="checkbox"][data-choice-grid-value]') ?? []).filter(input => input.value === optionValue ? checked : input.checked)
+            .map(input => input.value);
+        multiple.onValuesChange(selected);
+    };
+    const context = {
+        defaultValues: multiple.defaultValues,
+        disabled,
+        form,
+        mode: 'multiple',
+        name,
+        onMultipleChange,
+        values: multiple.values,
+    };
+    return (_jsxs("fieldset", { ...multipleFieldsetProps, "aria-describedby": describedBy, "aria-errormessage": errorMessage, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: classes('inkra-choice-grid', className), "data-columns": columns, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-type": "multiple", disabled: disabled, form: form, ref: rootRef, style: gridStyle(style, columns, minItemWidth), children: [label == null ? null : typeof label === 'string' ? (_jsx(PencilText, { as: "legend", className: "inkra-choice-grid__legend", seed: `inkra-choice-grid-${generatedId}-label`, children: label })) : _jsx("legend", { className: "inkra-choice-grid__legend", children: label }), _jsx(ChoiceGridContext.Provider, { value: context, children: _jsx("div", { className: "inkra-choice-grid__items", children: children }) }), _jsx(GroupMessages, { description: description, descriptionId: descriptionId, error: error, errorId: errorId })] }));
+});
+function OptionMedia({ icon, image }) {
+    if (image) {
+        return (_jsx("span", { "aria-hidden": "true", className: "inkra-choice-grid__media", "data-kind": "image", children: _jsx("img", { ...image, alt: "" }) }));
+    }
+    if (icon != null) {
+        return _jsx("span", { "aria-hidden": "true", className: "inkra-choice-grid__media", "data-kind": "icon", children: icon });
+    }
+    return null;
+}
+export const ChoiceGridOption = forwardRef(function ChoiceGridOption({ className, description, disabled = false, form, icon, id, image, label, onChange, required = false, seed, value, ...props }, ref) {
+    const context = useContext(ChoiceGridContext);
+    if (!context)
+        throw new Error('ChoiceGridOption must be rendered inside ChoiceGrid');
+    const generatedId = useId();
+    const inputId = id ?? `inkra-choice-grid-option-${generatedId}`;
+    const resolvedSeed = seed ?? inputId;
+    const itemDisabled = context.disabled || disabled;
+    const content = (_jsxs(_Fragment, { children: [_jsx(OptionMedia, { icon: icon, image: image }), _jsx("span", { className: "inkra-choice-grid__option-label", children: label })] }));
+    const control = context.mode === 'single' ? (_jsx(RadioGroupItem, { ...props, className: "inkra-choice-grid__control", description: description, disabled: itemDisabled, form: form ?? context.form, id: inputId, label: content, onChange: onChange, ref: ref, required: required, seed: resolvedSeed, value: value })) : (_jsx(Checkbox, { ...props, checked: context.values === undefined ? undefined : context.values.includes(value), className: "inkra-choice-grid__control", "data-choice-grid-value": "", defaultChecked: context.values === undefined ? context.defaultValues?.includes(value) : undefined, description: description, disabled: itemDisabled, form: form ?? context.form, id: inputId, label: content, name: context.name, onChange: (event) => {
+            onChange?.(event);
+            context.onMultipleChange?.(value, event.currentTarget.checked);
+        }, ref: ref, required: required, seed: resolvedSeed, value: value }));
+    return (_jsxs(PencilSurface, { as: "div", className: classes('inkra-choice-grid__option', className), "data-disabled": itemDisabled || undefined, radius: 8, seed: `${resolvedSeed}-paper`, variant: "paper", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__selection", radius: 8, seed: `${resolvedSeed}-selection`, variant: "selection" }), control, _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__outline", radius: 8, seed: `${resolvedSeed}-outline`, variant: "outline" })] }));
+});

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

@@ -0,0 +1,15 @@
+export declare const DEFAULT_COLOR_VALUE = "#4b96aaff";
+export interface ColorChannels {
+    red: number;
+    green: number;
+    blue: number;
+    alpha: number;
+}
+export type ColorValue = `#${string}`;
+export declare function parseColorValue(input: string): ColorChannels | null;
+export declare function formatColorValue(channels: ColorChannels): ColorValue;
+export declare function normalizeColorValue(input: string): ColorValue | null;
+export declare function colorRgbValue(input: string): `#${string}` | null;
+export declare function colorAlphaPercent(input: string): number;
+export declare function withColorAlpha(input: string, percentage: number): ColorValue | null;
+export declare function withColorRgb(input: string, rgb: string): ColorValue | null;

package/dist/color-picker/color.js

@@ -0,0 +1,55 @@
+export const DEFAULT_COLOR_VALUE = '#4b96aaff';
+const HEX_COLOR = /^#([\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i;
+function expandHex(value) {
+    return value.length <= 4
+        ? [...value].map(character => `${character}${character}`).join('')
+        : value;
+}
+export function parseColorValue(input) {
+    const value = input.trim();
+    const match = HEX_COLOR.exec(value);
+    if (!match)
+        return null;
+    const expanded = expandHex(match[1]);
+    const opaque = expanded.length === 6;
+    return {
+        red: Number.parseInt(expanded.slice(0, 2), 16),
+        green: Number.parseInt(expanded.slice(2, 4), 16),
+        blue: Number.parseInt(expanded.slice(4, 6), 16),
+        alpha: opaque ? 255 : Number.parseInt(expanded.slice(6, 8), 16),
+    };
+}
+function channelToHex(channel) {
+    return Math.min(255, Math.max(0, Math.round(channel))).toString(16).padStart(2, '0');
+}
+export function formatColorValue(channels) {
+    return `#${channelToHex(channels.red)}${channelToHex(channels.green)}${channelToHex(channels.blue)}${channelToHex(channels.alpha)}`;
+}
+export function normalizeColorValue(input) {
+    const channels = parseColorValue(input);
+    return channels ? formatColorValue(channels) : null;
+}
+export function colorRgbValue(input) {
+    const channels = parseColorValue(input);
+    return channels ? `#${channelToHex(channels.red)}${channelToHex(channels.green)}${channelToHex(channels.blue)}` : null;
+}
+export function colorAlphaPercent(input) {
+    const channels = parseColorValue(input) ?? parseColorValue(DEFAULT_COLOR_VALUE);
+    return Math.round(channels.alpha / 255 * 100);
+}
+export function withColorAlpha(input, percentage) {
+    const channels = parseColorValue(input);
+    if (!channels)
+        return null;
+    return formatColorValue({
+        ...channels,
+        alpha: Math.round(Math.min(100, Math.max(0, percentage)) / 100 * 255),
+    });
+}
+export function withColorRgb(input, rgb) {
+    const current = parseColorValue(input);
+    const next = parseColorValue(rgb);
+    if (!current || !next)
+        return null;
+    return formatColorValue({ ...next, alpha: current.alpha });
+}

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/content/index.d.ts

@@ -0,0 +1,106 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { type HTMLAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type ContentSize = 'sm' | 'md' | 'lg';
+export type CardPadding = 'inherit' | 'none' | ContentSize;
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'paper' | 'quiet' | 'outline';
+    radius?: number;
+    seed?: string | number;
+    size?: ContentSize;
+    divided?: boolean;
+}
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    action?: ReactNode;
+    divided?: boolean;
+    padding?: CardPadding;
+    align?: 'start' | 'center' | 'end';
+}
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    padding?: CardPadding;
+}
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    divided?: boolean;
+    justify?: 'start' | 'center' | 'end' | 'between';
+    padding?: CardPadding;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const Card: {
+    Root: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<CardHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<CardTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Content: import("react").ForwardRefExoticComponent<CardContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<CardFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: AlertVariant;
+    icon?: ReactNode;
+    seed?: string | number;
+    size?: ContentSize;
+    appearance?: 'soft' | 'outline';
+    actions?: ReactNode;
+}
+export declare const Alert: {
+    Root: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export interface AvatarProps extends Omit<AvatarPrimitive.AvatarProps, 'asChild'> {
+    size?: 'sm' | 'md' | 'lg';
+    radius?: number;
+    bordered?: boolean;
+}
+export type AvatarImageProps = Omit<AvatarPrimitive.AvatarImageProps, 'asChild' | 'alt'> & {
+    alt: string;
+    fit?: 'cover' | 'contain';
+};
+export type AvatarFallbackProps = Omit<AvatarPrimitive.AvatarFallbackProps, 'asChild'>;
+export declare const Avatar: {
+    Root: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Image: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps, "asChild" | "alt"> & {
+        alt: string;
+        fit?: "cover" | "contain";
+    } & import("react").RefAttributes<HTMLImageElement>>;
+    Fallback: import("react").ForwardRefExoticComponent<AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export interface TableProps extends ComponentPropsWithoutRef<'table'> {
+    density?: 'compact' | 'comfortable';
+    striped?: boolean;
+    hoverable?: boolean;
+    stickyHeader?: boolean;
+    captionSide?: 'top' | 'bottom';
+    layout?: 'auto' | 'fixed';
+}
+export interface TableRowProps extends ComponentPropsWithoutRef<'tr'> {
+    selected?: boolean;
+}
+interface TableCellLayout {
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    wrap?: boolean;
+}
+export type TableHeadProps = Omit<ComponentPropsWithoutRef<'th'>, 'align'> & TableCellLayout & {
+    align?: ComponentPropsWithoutRef<'th'>['align'] | 'start' | 'end';
+};
+export type TableCellProps = Omit<ComponentPropsWithoutRef<'td'>, 'align'> & TableCellLayout & {
+    align?: ComponentPropsWithoutRef<'td'>['align'] | 'start' | 'end';
+};
+export declare const Table: {
+    Container: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Root: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Row: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+    Head: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "align"> & TableCellLayout & {
+        align?: ComponentPropsWithoutRef<"th">["align"] | "start" | "end";
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
+    Cell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "align"> & TableCellLayout & {
+        align?: ComponentPropsWithoutRef<"td">["align"] | "start" | "end";
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
+    Caption: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLTableCaptionElement>>;
+};
+export {};

package/dist/content/index.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { createContext, useContext, forwardRef, useId } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PencilLine } from '../PencilLine.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+const copy = (children) => typeof children === 'string' ? _jsx(PencilText, { children: children }) : children;
+const CardDividers = createContext(true);
+const CardRoot = forwardRef(function CardRoot({ className, variant = 'paper', radius = 8, seed, size = 'md', divided = true, ...props }, ref) {
+    const id = useId();
+    return _jsx(CardDividers.Provider, { value: divided, children: _jsx(PencilSurface, { ...props, ref: ref, "data-size": size, className: classes('inkra-card', className), variant: variant, radius: radius, seed: seed ?? `card-${id}` }) });
+});
+const CardHeader = forwardRef(function CardHeader({ className, children, action, divided, padding = 'inherit', align = 'start', ...props }, ref) {
+    const inherited = useContext(CardDividers);
+    return _jsxs("div", { ...props, ref: ref, "data-padding": padding, "data-align": align, className: classes('inkra-card__header', className), children: [_jsx("div", { className: "inkra-card__heading", children: children }), action != null && _jsx("div", { className: "inkra-card__action", children: action }), (divided ?? inherited) && _jsx(PencilLine, { className: "inkra-card__divider" })] });
+});
+const CardTitle = forwardRef(function CardTitle({ className, children, as: Heading = 'h3', ...props }, ref) {
+    return _jsx(Heading, { ...props, ref: ref, className: classes('inkra-card__title', className), children: copy(children) });
+});
+const CardDescription = forwardRef(function CardDescription({ className, children, ...props }, ref) {
+    return _jsx("p", { ...props, ref: ref, className: classes('inkra-card__description', className), children: copy(children) });
+});
+const CardContent = forwardRef(function CardContent({ className, padding = 'inherit', ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, "data-padding": padding, className: classes('inkra-card__content', className) });
+});
+const CardFooter = forwardRef(function CardFooter({ className, children, divided, justify = 'start', padding = 'inherit', orientation = 'horizontal', ...props }, ref) {
+    const inherited = useContext(CardDividers);
+    return _jsxs("div", { ...props, ref: ref, "data-justify": justify, "data-padding": padding, "data-orientation": orientation, className: classes('inkra-card__footer', className), children: [(divided ?? inherited) && _jsx(PencilLine, { className: "inkra-card__divider" }), children] });
+});
+export const Card = { Root: CardRoot, Header: CardHeader, Title: CardTitle, Description: CardDescription, Content: CardContent, Footer: CardFooter };
+const AlertRoot = forwardRef(function AlertRoot({ className, variant = 'info', icon, seed, style, children, role = 'status', size = 'md', appearance = 'soft', actions, ...props }, ref) {
+    const id = useId();
+    const tokens = {
+        color: `var(--inkra-${variant}-foreground)`,
+        '--inkra-paper': `var(--inkra-${variant}-surface)`,
+        '--inkra-accent': `var(--inkra-${variant}-pigment)`,
+        '--inkra-accent-strong': `var(--inkra-${variant}-foreground)`,
+        '--inkra-border-strong': `var(--inkra-${variant}-foreground)`,
+        '--inkra-border': `var(--inkra-${variant}-foreground)`,
+        ...style,
+    };
+    return _jsxs(PencilSurface, { ...props, ref: ref, role: role, className: classes('inkra-alert', className), "data-variant": variant, "data-size": size, "data-appearance": appearance, variant: appearance === 'outline' ? 'outline' : 'action', radius: 8, style: tokens, seed: seed ?? `alert-${id}`, children: [icon && _jsx("span", { className: "inkra-alert__icon", "aria-hidden": "true", children: icon }), _jsxs("div", { className: "inkra-alert__body", children: [children, actions != null && _jsx("div", { className: "inkra-alert__actions", children: actions })] })] });
+});
+const AlertTitle = forwardRef(function AlertTitle({ className, children, ...props }, ref) {
+    return _jsx("p", { ...props, ref: ref, className: classes('inkra-alert__title', className), children: copy(children) });
+});
+const AlertDescription = forwardRef(function AlertDescription({ className, children, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: classes('inkra-alert__description', className), children: copy(children) });
+});
+export const Alert = { Root: AlertRoot, Title: AlertTitle, Description: AlertDescription };
+const AvatarRoot = forwardRef(function AvatarRoot({ className, size = 'md', radius = 8, bordered = true, style, children, ...props }, ref) {
+    const corner = Number.isFinite(radius) ? Math.max(0, Math.min(8, radius)) : 8;
+    return _jsxs(AvatarPrimitive.Root, { ...props, ref: ref, "data-size": size, "data-bordered": bordered, className: classes('inkra-avatar', className), style: { '--inkra-avatar-radius': `${corner}px`, ...style }, children: [children, bordered && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-avatar__outline", variant: "outline", radius: corner })] });
+});
+const AvatarImage = forwardRef(function AvatarImage({ className, fit = 'cover', ...props }, ref) {
+    return _jsx(AvatarPrimitive.Image, { ...props, ref: ref, "data-fit": fit, className: classes('inkra-avatar__image', className) });
+});
+const AvatarFallback = forwardRef(function AvatarFallback({ className, children, ...props }, ref) {
+    return _jsx(AvatarPrimitive.Fallback, { ...props, ref: ref, className: classes('inkra-avatar__fallback', className), children: copy(children) });
+});
+export const Avatar = { Root: AvatarRoot, Image: AvatarImage, Fallback: AvatarFallback };
+const TableRoot = forwardRef(function TableRoot({ className, density = 'comfortable', striped = false, hoverable = false, stickyHeader = false, captionSide = 'top', layout = 'auto', ...props }, ref) {
+    return _jsx("table", { ...props, ref: ref, "data-layout": layout, "data-density": density, "data-striped": striped || undefined, "data-hoverable": hoverable || undefined, "data-sticky-header": stickyHeader || undefined, "data-caption-side": captionSide, className: classes('inkra-table', className) });
+});
+const TableContainer = forwardRef(function TableContainer({ className, ...props }, ref) {
+    return _jsx("div", { tabIndex: 0, ...props, ref: ref, className: classes('inkra-table-container', className) });
+});
+const TableHeader = forwardRef(function TableHeader(props, ref) { return _jsx("thead", { ...props, ref: ref }); });
+const TableBody = forwardRef(function TableBody(props, ref) { return _jsx("tbody", { ...props, ref: ref }); });
+const TableFooter = forwardRef(function TableFooter(props, ref) { return _jsx("tfoot", { ...props, ref: ref }); });
+const TableRow = forwardRef(function TableRow({ selected = false, ...props }, ref) { return _jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined }); });
+const TableHead = forwardRef(function TableHead({ children, align = 'start', verticalAlign = 'middle', wrap = true, ...props }, ref) {
+    return _jsxs("th", { scope: "col", ...props, ref: ref, "data-align": align, "data-vertical-align": verticalAlign, "data-wrap": wrap, children: [wrap ? copy(children) : _jsx("div", { className: "inkra-table__nowrap", tabIndex: 0, children: copy(children) }), _jsx(PencilLine, { className: "inkra-table__divider" })] });
+});
+const TableCell = forwardRef(function TableCell({ children, align = 'start', verticalAlign = 'middle', wrap = true, ...props }, ref) {
+    return _jsxs("td", { ...props, ref: ref, "data-align": align, "data-vertical-align": verticalAlign, "data-wrap": wrap, children: [wrap ? copy(children) : _jsx("div", { className: "inkra-table__nowrap", tabIndex: 0, children: copy(children) }), _jsx(PencilLine, { className: "inkra-table__divider" })] });
+});
+const TableCaption = forwardRef(function TableCaption({ children, ...props }, ref) { return _jsx("caption", { ...props, ref: ref, children: copy(children) }); });
+export const Table = { Container: TableContainer, Root: TableRoot, Header: TableHeader, Body: TableBody, Footer: TableFooter, Row: TableRow, Head: TableHead, Cell: TableCell, Caption: TableCaption };

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