@inkra/react 0.0.0-stage → 0.2.0

package/dist/time-picker/index.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { Button } from '../Button.js';
+import { useResolvedControlProps } from '../form/controlProps.js';
+import { mergeAriaIds, useFieldContext } from '../form/context.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilText } from '../PencilText.js';
+import { PencilLine } from '../PencilLine.js';
+import { Popover } from '../overlay/Popover.js';
+import { RadioGroup, RadioGroupItem } from '../selection/RadioGroup.js';
+const clockPaths = [
+    { d: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z' },
+    { d: 'M12 6v6l4 2' },
+];
+const clearPaths = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];
+const pad = (value) => {
+    const [whole, fraction] = String(value).split('.');
+    return `${whole.padStart(2, '0')}${fraction ? `.${fraction}` : ''}`;
+};
+const times = (length, start = 0) => Array.from({ length }, (_, index) => index + start);
+function partsOf(value) {
+    if (!/^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d(?:\.\d{1,3})?)?$/.test(value))
+        return undefined;
+    const [hour, minute, second = 0] = value.split(':').map(Number);
+    return [hour, minute, second];
+}
+function TimeColumn({ name, label, value, options, onChange, format = pad }) {
+    return _jsx(RadioGroup, { name: name, label: label, value: String(value), variant: "segmented", className: "inkra-time-picker__column", onValueChange: next => onChange(Number(next)), children: options.map(option => _jsx(RadioGroupItem, { value: String(option), label: format(option) }, option)) });
+}
+export const TimePicker = forwardRef(function TimePicker(allProps, forwardedRef) {
+    const { value, defaultValue, onValueChange, onChange, onClear, clearable = true, clearButtonLabel, hourCycle = 'h24', locale, lang, showSeconds = false, step, min, max, name, form, id, disabled, readOnly, required, invalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, style, size = 'md', fullWidth = true, startIcon, endIcon, endAction, startAction, prefix, suffix, placeholder, seed, variant = 'outline', textAlign = 'start', loading, classNames, ...nativeProps } = allProps;
+    const generatedId = useId();
+    const field = useFieldContext();
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const initialValue = useRef(String(defaultValue ?? value ?? ''));
+    const controlled = Object.prototype.hasOwnProperty.call(allProps, 'value');
+    const [internalValue, setInternalValue] = useState(() => String(defaultValue ?? ''));
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState('00:00');
+    const [draftValid, setDraftValid] = useState(true);
+    const [constraintInvalid, setConstraintInvalid] = useState(false);
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    const state = useResolvedControlProps({
+        id: id ?? `inkra-time-picker-${generatedId}`, disabled, readOnly, required, invalid,
+        'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid,
+    });
+    const currentValue = controlled ? String(value ?? '') : internalValue;
+    const secondsVisible = showSeconds || (step !== undefined && step !== 'any' && Number(step) % 60 !== 0);
+    const resolvedStep = step ?? (secondsVisible ? 1 : 60);
+    const stepBase = String(defaultValue ?? initialValue.current);
+    const resolvedLocale = locale ?? lang ?? (hourCycle === 'h12' ? 'en-US' : 'en-GB');
+    const zh = resolvedLocale.toLowerCase().startsWith('zh');
+    const copy = zh
+        ? { title: '选择时间', hour: '时', minute: '分', second: '秒', period: '时段', am: '上午', pm: '下午',
+            done: '确定', cancel: '取消', clear: '清空时间', invalid: '请选择符合时间范围和步进的时间。' }
+        : { title: 'Choose time', hour: 'Hour', minute: 'Minute', second: 'Second', period: 'Period', am: 'AM', pm: 'PM',
+            done: 'Apply', cancel: 'Cancel', clear: 'Clear time', invalid: 'Choose a time within the allowed range and step.' };
+    const currentParts = partsOf(currentValue);
+    const displayValue = currentParts
+        ? new Intl.DateTimeFormat(resolvedLocale, {
+            hour: '2-digit', minute: '2-digit', ...(secondsVisible ? { second: '2-digit' } : {}),
+            hourCycle: hourCycle === 'h12' ? 'h12' : 'h23',
+        }).format(new Date(2000, 0, 1, ...currentParts))
+        : placeholder ?? copy.title;
+    const canClear = clearable && Boolean(currentValue) && !state.disabled && !state.readOnly;
+    const valueId = field ? `${state.id}-value` : undefined;
+    const [hour, minute, second] = partsOf(draft) ?? [0, 0, 0];
+    const validDraft = (candidate = draft) => {
+        // Native validation owns overnight ranges, fractional steps and step bases.
+        const input = document.createElement('input');
+        input.type = 'time';
+        if (min !== undefined)
+            input.min = String(min);
+        if (max !== undefined)
+            input.max = String(max);
+        input.step = String(resolvedStep);
+        input.defaultValue = stepBase;
+        input.required = true;
+        input.value = candidate;
+        return input.validity.valid;
+    };
+    const updateOpen = (next) => {
+        if (next && (state.disabled || state.readOnly))
+            return;
+        if (next) {
+            const initial = partsOf(currentValue) ? currentValue : partsOf(String(min)) ? String(min) : '00:00';
+            const nextDraft = secondsVisible && initial.length === 5 ? `${initial}:00` : initial;
+            setDraft(nextDraft);
+            setDraftValid(validDraft(nextDraft));
+        }
+        setOpen(next);
+    };
+    const updatePart = (part, next) => {
+        const values = [hour, minute, second];
+        values[part] = next;
+        const nextDraft = values.slice(0, secondsVisible ? 3 : 2).map(pad).join(':');
+        setDraft(nextDraft);
+        setDraftValid(validDraft(nextDraft));
+    };
+    const commit = (next, reason) => {
+        if (!controlled)
+            setInternalValue(next);
+        setConstraintInvalid(false);
+        onValueChange?.(next, { reason });
+        setOpen(false);
+    };
+    useEffect(() => { setDraftValid(validDraft()); }, [draft, min, max, resolvedStep, stepBase]);
+    useBrowserLayoutEffect(() => {
+        // React's controlled value attribute must not move the native step base on each edit.
+        if (inputRef.current)
+            inputRef.current.defaultValue = stepBase;
+    }, [currentValue, stepBase]);
+    useEffect(() => {
+        const input = inputRef.current;
+        let timer;
+        const reset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                if (!controlled)
+                    setInternalValue(String(defaultValue ?? ''));
+                else if (input)
+                    input.value = currentValue;
+                setConstraintInvalid(false);
+                setOpen(false);
+            }, 0);
+        };
+        input?.form?.addEventListener('reset', reset);
+        return () => { clearTimeout(timer); input?.form?.removeEventListener('reset', reset); };
+    }, [controlled, currentValue, defaultValue, form]);
+    useEffect(() => { if (state.disabled || state.readOnly)
+        setOpen(false); }, [state.disabled, state.readOnly]);
+    return _jsxs(Popover.Root, { open: open, onOpenChange: updateOpen, children: [_jsxs("div", { className: ['inkra-time-picker', classNames?.root, className].filter(Boolean).join(' '), style: style, dir: nativeProps.dir, "data-full-width": fullWidth, "data-invalid": state.invalid || constraintInvalid || undefined, "data-readonly": state.readOnly || undefined, "data-disabled": state.disabled || undefined, children: [startAction, _jsx(Popover.Trigger, { asChild: true, children: _jsxs(Button, { className: ['inkra-time-picker__trigger', classNames?.control].filter(Boolean).join(' '), id: state.id, ref: triggerRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": mergeAriaIds(state.describedBy, valueId), "aria-invalid": constraintInvalid || state.ariaInvalid, "aria-errormessage": state.errorMessage, "aria-required": state.required || undefined, "aria-readonly": state.readOnly || undefined, disabled: state.disabled, fullWidth: true, align: textAlign, variant: variant === 'soft' ? 'secondary' : variant === 'underline' ? 'outline' : variant, size: size, seed: seed, loading: loading, autoFocus: nativeProps.autoFocus, startIcon: startIcon ?? _jsx(PencilIcon, { paths: clockPaths, sourceSize: 24, size: 22 }), endIcon: endIcon, children: [prefix, _jsx(PencilText, { children: displayValue }), suffix] }) }), valueId && _jsx("span", { className: "inkra-time-picker__accessible-value", id: valueId, children: displayValue }), clearable && _jsx(Button, { className: "inkra-time-picker__clear", "aria-label": clearButtonLabel ?? copy.clear, title: clearButtonLabel ?? copy.clear, "aria-hidden": !canClear || undefined, disabled: !canClear, tabIndex: canClear ? 0 : -1, variant: "outline", size: "icon", onClick: event => {
+                            commit('', 'clear');
+                            onClear?.(event);
+                            triggerRef.current?.focus({ preventScroll: true });
+                        }, children: _jsx(PencilIcon, { paths: clearPaths, sourceSize: 24, size: 22 }) }), endAction, _jsx("input", { ...nativeProps, ref: inputRef, type: "time", className: "inkra-time-picker__native", id: `${state.id}-native`, "aria-hidden": "true", tabIndex: -1, name: name, form: form, value: currentValue, min: min, max: max, step: resolvedStep, lang: lang ?? resolvedLocale, "data-hour-cycle": hourCycle, disabled: state.disabled, readOnly: state.readOnly, required: state.required, onChange: event => {
+                            if (!controlled)
+                                setInternalValue(event.currentTarget.value);
+                            onChange?.(event);
+                            onValueChange?.(event.currentTarget.value, { reason: 'input' });
+                        }, onFocus: event => { nativeProps.onFocus?.(event); triggerRef.current?.focus({ preventScroll: true }); }, onInvalid: event => {
+                            event.preventDefault();
+                            setConstraintInvalid(true);
+                            triggerRef.current?.focus();
+                            nativeProps.onInvalid?.(event);
+                        } })] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { className: "inkra-time-picker__popover", ref: contentRef, align: "start", sideOffset: 8, collisionPadding: 12, "aria-label": copy.title, onOpenAutoFocus: event => {
+                        event.preventDefault();
+                        requestAnimationFrame(() => {
+                            const content = contentRef.current;
+                            content?.querySelectorAll('input:checked').forEach(input => {
+                                const scroll = input.closest('.inkra-radio-group__items');
+                                const item = input.closest('.inkra-radio-group__item');
+                                if (scroll && item)
+                                    scroll.scrollTop += item.getBoundingClientRect().top - scroll.getBoundingClientRect().top - 88;
+                            });
+                            (content?.querySelector('input:checked')
+                                ?? content?.querySelector('input'))?.focus({ preventScroll: true });
+                        });
+                    }, children: [_jsx(Popover.Title, { children: copy.title }), _jsx(PencilLine, {}), _jsxs("div", { className: "inkra-time-picker__columns", children: [_jsx(TimeColumn, { name: `${generatedId}-hour`, label: copy.hour, value: hourCycle === 'h12' ? hour % 12 || 12 : hour, options: hourCycle === 'h12' ? times(12, 1) : times(24), onChange: next => updatePart(0, hourCycle === 'h12' ? next % 12 + (hour >= 12 ? 12 : 0) : next) }), _jsx(TimeColumn, { name: `${generatedId}-minute`, label: copy.minute, value: minute, options: times(60), onChange: next => updatePart(1, next) }), secondsVisible && _jsx(TimeColumn, { name: `${generatedId}-second`, label: copy.second, value: Math.floor(second), options: times(60), onChange: next => updatePart(2, next) }), hourCycle === 'h12' && _jsx(TimeColumn, { name: `${generatedId}-period`, label: copy.period, value: hour >= 12 ? 1 : 0, options: [0, 1], format: next => next ? copy.pm : copy.am, onChange: next => updatePart(0, hour % 12 + next * 12) })] }), !draftValid && _jsx(PencilText, { as: "p", className: "inkra-time-picker__error", role: "status", children: copy.invalid }), _jsx(PencilLine, {}), _jsxs("div", { className: "inkra-time-picker__footer", children: [_jsx(Popover.Close, { asChild: true, children: _jsx(Button, { variant: "outline", children: copy.cancel }) }), _jsx(Button, { disabled: !draftValid || state.disabled || state.readOnly, onClick: () => {
+                                        if (validDraft())
+                                            commit(draft, 'input');
+                                    }, children: copy.done })] })] }) })] });
+});

package/dist/timeline/index.d.ts

@@ -0,0 +1,14 @@
+import { type OlHTMLAttributes, type ReactNode } from 'react';
+export interface TimelineItem {
+    id: string;
+    date: ReactNode;
+    dateTime?: string;
+    title: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode;
+}
+export interface TimelineProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'children'> {
+    items: readonly TimelineItem[];
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const Timeline: import("react").ForwardRefExoticComponent<TimelineProps & import("react").RefAttributes<HTMLOListElement>>;

package/dist/timeline/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const markerPaths = [
+    { d: 'M16 7a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z' },
+    { d: 'M16 11v6l4 3' },
+];
+const copy = (value) => typeof value === 'string' ? _jsx(PencilText, { children: value }) : value;
+export const Timeline = forwardRef(function Timeline({ 'aria-label': ariaLabel = 'Timeline', className, items, orientation = 'vertical', ...props }, ref) {
+    return _jsx("ol", { ...props, ref: ref, "aria-label": ariaLabel, className: ['inkra-timeline', className].filter(Boolean).join(' '), "data-orientation": orientation, children: items.map((item, index) => _jsxs("li", { className: "inkra-timeline__item", children: [_jsxs("span", { className: "inkra-timeline__rail", "aria-hidden": "true", children: [_jsx(PencilSurface, { as: "span", className: "inkra-timeline__marker", variant: "quiet", radius: 8, seed: `timeline-${item.id}`, children: _jsx(PencilIcon, { paths: markerPaths, size: 24, sourceSize: 32 }) }), index < items.length - 1 && _jsx(PencilLine, { className: "inkra-timeline__connector", orientation: orientation === 'vertical' ? 'vertical' : 'horizontal', seed: `timeline-line-${item.id}` })] }), _jsxs("div", { className: "inkra-timeline__body", children: [item.dateTime
+                            ? _jsx("time", { className: "inkra-timeline__date", dateTime: item.dateTime, children: copy(item.date) })
+                            : _jsx("span", { className: "inkra-timeline__date", children: copy(item.date) }), _jsx("div", { className: "inkra-timeline__title", children: copy(item.title) }), item.description != null && _jsx("div", { className: "inkra-timeline__description", children: copy(item.description) }), item.content != null && _jsx("div", { className: "inkra-timeline__content", children: item.content })] })] }, item.id)) });
+});

package/dist/toast/index.d.ts

@@ -0,0 +1,27 @@
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import type { ToastManager as BaseToastManager } from '@base-ui/react/toast';
+import type { ReactNode } from 'react';
+export type ToastPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+export type ToastTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+export type ToastSwipeDirection = 'up' | 'down' | 'left' | 'right';
+export type ToastManager<Data extends object = any> = BaseToastManager<Data>;
+export interface ToastProviderProps {
+    children?: ReactNode;
+    timeout?: number;
+    limit?: number;
+    toastManager?: ToastManager;
+    placement?: ToastPlacement;
+    swipeDirection?: ToastSwipeDirection | ToastSwipeDirection[];
+    closeLabel?: string;
+    viewportLabel?: string;
+    viewportClassName?: string;
+}
+declare function Provider({ children, closeLabel, limit, placement, swipeDirection, timeout, toastManager, viewportClassName, viewportLabel, }: ToastProviderProps): import("react").JSX.Element;
+export declare const useToastManager: typeof BaseToast.useToastManager;
+export declare const createToastManager: typeof BaseToast.createToastManager;
+export declare const Toast: {
+    Provider: typeof Provider;
+    useToastManager: typeof BaseToast.useToastManager;
+    createToastManager: typeof BaseToast.createToastManager;
+};
+export {};

package/dist/toast/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { Button } from '../Button.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 closePaths = [
+    { d: 'M6 6 18 18' },
+    { d: 'M18 6 6 18' },
+];
+function text(content) {
+    return typeof content === 'string' ? _jsx(PencilText, { children: content }) : content;
+}
+function toneOf(type) {
+    return type === 'success' || type === 'warning' || type === 'danger' || type === 'info'
+        ? type
+        : 'neutral';
+}
+function ToastThemeAnchor() {
+    const ref = usePortalTriggerRef(null);
+    return _jsx("span", { "aria-hidden": "true", className: "inkra-toast__theme-anchor", ref: ref });
+}
+function ToastQueue({ closeLabel, placement, swipeDirection, viewportClassName, viewportLabel, }) {
+    const { toasts } = BaseToast.useToastManager();
+    return (_jsx(BaseToast.Portal, { children: _jsx(PortalThemeBridge, { children: _jsx(BaseToast.Viewport, { "aria-label": viewportLabel, className: ['inkra-toast__viewport', viewportClassName].filter(Boolean).join(' '), "data-placement": placement, children: toasts.map((toastItem) => {
+                    const tone = toneOf(toastItem.type);
+                    return (_jsxs(BaseToast.Root, { className: "inkra-toast__root", "data-tone": tone, swipeDirection: swipeDirection, toast: toastItem, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toast__surface", seed: `toast-${toastItem.id}-${toastItem.updateKey ?? 0}`, variant: tone === 'neutral' ? 'paper' : 'quiet' }), _jsxs(BaseToast.Content, { className: "inkra-toast__content", children: [_jsxs("div", { className: "inkra-toast__copy", children: [toastItem.title != null && (_jsx(BaseToast.Title, { className: "inkra-toast__title", children: text(toastItem.title) })), toastItem.description != null && (_jsx(BaseToast.Description, { className: "inkra-toast__description", children: text(toastItem.description) }))] }), _jsxs("div", { className: "inkra-toast__actions", children: [toastItem.actionProps?.children != null && (_jsx(BaseToast.Action, { className: "inkra-toast__action", render: _jsx(Button, { size: "sm", variant: "outline" }) })), _jsx(BaseToast.Close, { "aria-label": closeLabel, className: "inkra-toast__close", render: _jsx(Button, { size: "icon-sm", variant: "ghost" }), children: _jsx(PencilIcon, { paths: closePaths, size: 20, sourceSize: 24, decorative: true }) })] })] })] }, toastItem.id));
+                }) }) }) }));
+}
+function Provider({ children, closeLabel = 'Close notification', limit, placement = 'bottom-end', swipeDirection = ['down', 'right'], timeout, toastManager, viewportClassName, viewportLabel = 'Notifications', }) {
+    return (_jsx(PortalThemeProvider, { children: _jsxs(BaseToast.Provider, { limit: limit, timeout: timeout, toastManager: toastManager, children: [_jsx(ToastThemeAnchor, {}), children, _jsx(ToastQueue, { closeLabel: closeLabel, placement: placement, swipeDirection: swipeDirection, viewportClassName: viewportClassName, viewportLabel: viewportLabel })] }) }));
+}
+export const useToastManager = BaseToast.useToastManager;
+export const createToastManager = BaseToast.createToastManager;
+export const Toast = { Provider, useToastManager, createToastManager };

package/dist/toggle-group/index.d.ts

@@ -0,0 +1,17 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import type { ReactElement, ReactNode, RefAttributes } from 'react';
+export interface ToggleGroupRootProps<Value extends string = string> extends BaseToggleGroup.Props<Value> {
+    size?: 'sm' | 'md' | 'lg';
+}
+type RootComponent = <Value extends string = string>(props: ToggleGroupRootProps<Value> & RefAttributes<HTMLDivElement>) => ReactElement;
+export interface ToggleGroupItemProps<Value extends string = string> extends BaseToggle.Props<Value> {
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+}
+type ItemComponent = <Value extends string = string>(props: ToggleGroupItemProps<Value> & RefAttributes<HTMLButtonElement>) => ReactElement;
+export declare const ToggleGroup: {
+    Root: RootComponent;
+    Item: ItemComponent;
+};
+export {};

package/dist/toggle-group/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DirectionProvider } from '@base-ui/react/direction-provider';
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { createContext, forwardRef, useContext } from 'react';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+function classes(base, className) {
+    if (typeof className === 'function') {
+        return (state) => [base, className(state)].filter(Boolean).join(' ');
+    }
+    return [base, className].filter(Boolean).join(' ');
+}
+const OrientationContext = createContext('horizontal');
+const RootImplementation = forwardRef(function ToggleGroupRoot({ children, className, dir, orientation = 'horizontal', size = 'md', ...props }, ref) {
+    const direction = dir === 'rtl' ? 'rtl' : 'ltr';
+    return (_jsx(DirectionProvider, { direction: direction, children: _jsx(OrientationContext.Provider, { value: orientation, children: _jsxs(BaseToggleGroup, { ...props, className: classes('inkra-toggle-group', className), "data-size": size, dir: dir, orientation: orientation, ref: ref, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toggle-group__outline", seed: "toggle-group-outline", variant: "outline" }), children] }) }) }));
+});
+const ItemImplementation = forwardRef(function ToggleGroupItem({ children, className, endIcon, startIcon, value, ...props }, ref) {
+    const orientation = useContext(OrientationContext);
+    return (_jsxs(BaseToggle, { ...props, className: classes('inkra-toggle-group__item', className), ref: ref, value: value, children: [_jsx(PencilLine, { className: "inkra-toggle-group__divider", orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal', seed: `toggle-${value ?? 'item'}-divider` }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toggle-group__selection", seed: `toggle-${value ?? 'item'}`, variant: "selection" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toggle-group__focus", seed: `toggle-${value ?? 'item'}-focus`, variant: "outline" }), startIcon != null && _jsx("span", { "aria-hidden": "true", className: "inkra-toggle-group__icon", children: startIcon }), _jsx("span", { className: "inkra-toggle-group__label", children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children }), endIcon != null && _jsx("span", { "aria-hidden": "true", className: "inkra-toggle-group__icon", children: endIcon })] }));
+});
+const Root = RootImplementation;
+const Item = ItemImplementation;
+export const ToggleGroup = { Root, Item };