thread-ui 0.16.5 → 0.17.0

package/dist/components/data-input/reorderable/reorderable-list/reorderable-list.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo } from 'react';
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { css } from '../../../../styled-system/css';
+import { InputWrapper } from '../../shared/input-wrapper';
+import { SortableItem, applyOrder, createListAnnouncements, defaultGetItemLabel, layoutRecipe, layoutStrategies, screenReaderInstructions, } from '../shared';
+import { useLatestRef } from '../../../../internal';
+const styles = {
+    list: css({
+        width: '100%',
+    }),
+};
+/**
+ * Controlled list input whose items can be reordered by pointer, touch, or keyboard. Each item renders through `ItemComponent`, which receives a default `dragHandle` or `dragHandleProps` to make any element the handle. Set `name` to submit the order with a form.
+ *
+ * @example
+ * const [tasks, setTasks] = useState(initialTasks);
+ *
+ * <ReorderableList
+ *     name="taskOrder"
+ *     title="Tasks"
+ *     value={tasks}
+ *     orderProperty="order"
+ *     ItemComponent={TaskRow}
+ *     onChange={setTasks}
+ *     getItemLabel={(task) => task.title}
+ * />
+ */
+export const ReorderableList = ({ value, orderProperty, ItemComponent, onChange, getItemLabel = defaultGetItemLabel, layout = 'vertical', ItemsWrapper, id: idProp, name, formValue = 'inputs', title, size = 'md', divider, secondaryContent, }) => {
+    // Resolve Id
+    const generatedId = useId();
+    const inputId = idProp ?? name ?? generatedId;
+    // Latest value, so delayed item callbacks never act on a stale list
+    const valueRef = useLatestRef(value);
+    // Configure sensors for mouse, touch, and keyboard interactions
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: { distance: 4 },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    // Item IDs in display order
+    const ids = useMemo(() => value.map((item) => item.id), [value]);
+    // Screen reader announcements
+    const announcements = useMemo(() => createListAnnouncements(ids, (key) => {
+        const index = ids.indexOf(key);
+        return index === -1 ? 'Item' : getItemLabel(value[index], index);
+    }), [ids, value, getItemLabel]);
+    // Handle drag end with memoized callback
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        if (!over || active.id === over.id)
+            return;
+        // Find current indices
+        const oldIndex = ids.indexOf(active.id);
+        const newIndex = ids.indexOf(over.id);
+        if (oldIndex === -1 || newIndex === -1)
+            return;
+        // Reorder Array
+        const newItems = arrayMove(value, oldIndex, newIndex);
+        // Update OrderProperty on each Item
+        const updatedItems = applyOrder(newItems, orderProperty);
+        // Update Data
+        onChange(updatedItems);
+    }, [value, ids, onChange, orderProperty]);
+    // Handle Item Change with memoized callback
+    const handleItemChange = useCallback((updatedItem) => {
+        const current = valueRef.current;
+        // Find the item index in the current list
+        const itemIndex = current.findIndex((item) => item.id === updatedItem.id);
+        if (itemIndex === -1)
+            return;
+        // Create a new array with the updated item
+        const updatedItems = [...current];
+        updatedItems[itemIndex] = updatedItem;
+        // Notify parent component
+        onChange(updatedItems);
+    }, [onChange, valueRef]);
+    // Handle Item Remove with memoized callback
+    const handleItemRemove = useCallback((itemId) => {
+        const current = valueRef.current;
+        // Drop the item
+        const remaining = current.filter((item) => item.id !== itemId);
+        if (remaining.length === current.length)
+            return;
+        // Re-index and notify parent component
+        onChange(applyOrder(remaining, orderProperty));
+    }, [onChange, orderProperty, valueRef]);
+    const items = value.map((item, index) => (_jsx(SortableItem, { sortableId: item.id, item: item, label: getItemLabel(item, index), ItemComponent: ItemComponent, onItemChange: handleItemChange, onItemRemove: handleItemRemove }, item.id)));
+    return (_jsx(InputWrapper, { id: inputId, title: title, size: size, divider: divider, secondaryContent: secondaryContent, children: _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, accessibility: { announcements, screenReaderInstructions }, children: _jsx(SortableContext, { items: ids, strategy: layoutStrategies[layout], children: _jsxs("div", { id: inputId, role: "group", "aria-labelledby": title ? `${inputId}-label` : undefined, className: styles.list, children: [ItemsWrapper ? (_jsx(ItemsWrapper, { children: items })) : (_jsx("div", { className: layoutRecipe({ layout }), children: items })), name &&
+                            formValue === 'inputs' &&
+                            ids.map((id) => (_jsx("input", { type: "hidden", name: name, value: id }, id))), name && formValue === 'json' && (_jsx("input", { type: "hidden", name: name, value: JSON.stringify(ids) }))] }) }) }) }));
+};
+//# sourceMappingURL=reorderable-list.js.map

package/dist/components/data-input/reorderable/reorderable-list/reorderable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorderable-list.js","sourceRoot":"","sources":["../../../../../src/components/data-input/reorderable/reorderable-list/reorderable-list.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-input/reorderable/reorderable-list/reorderable-list.types.d.ts

@@ -0,0 +1,28 @@
+import type { Prettify } from '../../../../types';
+import type { BaseInputProps, ControlledValueProps } from '../../shared/input-props.types';
+import type { FormLabelProps } from '../../shared/form-label';
+import type { FormValueMode, NumericKeys, ReorderableItem, ReorderableItemComponent, ReorderableLayout, ReorderableWrapper } from '../shared';
+/** Props for a `ReorderableList`, a controlled input whose value is an ordered list of items. */
+export type ReorderableListProps<T extends ReorderableItem> = Prettify<{
+    /** Items to render, in display order. */
+    value: ControlledValueProps<T[], T[]>['value'];
+    /** Number property rewritten with each item's new index after a reorder. Omit to rely on array order alone. */
+    orderProperty?: NumericKeys<T>;
+    /** Component rendered for each item. Receives the `item`, a default `dragHandle`, spreadable `dragHandleProps`, `onItemChange`, `onItemRemove`, and `isDragging`. */
+    ItemComponent: ReorderableItemComponent<T>;
+    /** Fires with the full list after a reorder or an item update. */
+    onChange: ControlledValueProps<T[], T[]>['onChange'];
+    /**
+     * Human-readable name for an item, used in screen reader announcements and the drag handle's `aria-label`.
+     * @default `'Item {n}'`
+     */
+    getItemLabel?: (item: T, index: number) => string;
+    /** Arrangement of items; also selects the sorting strategy @default `'vertical'` */
+    layout?: ReorderableLayout;
+    /** Lays out the rendered items. Replaces the default `layout` styles, so pass a `layout` that matches it. */
+    ItemsWrapper?: ReorderableWrapper;
+    /** Form field name. `formValue` sets how the order is submitted. */
+    name?: BaseInputProps['name'];
+    /** Submission shape when `name` is set. `'inputs'`: `formData.getAll(name)` returns ids; `'json'`: read with `parseReorderableValue` @default `'inputs'` */
+    formValue?: FormValueMode;
+} & Pick<BaseInputProps, 'id' | 'title' | 'size' | 'divider'> & Pick<FormLabelProps, 'secondaryContent'>>;

package/dist/components/data-input/reorderable/reorderable-list/reorderable-list.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=reorderable-list.types.js.map

package/dist/components/data-input/reorderable/reorderable-list/reorderable-list.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reorderable-list.types.js","sourceRoot":"","sources":["../../../../../src/components/data-input/reorderable/reorderable-list/reorderable-list.types.ts"],"names":[],"mappings":""}

package/dist/components/data-input/reorderable/reorderable-list/sortable-item/index.d.ts

@@ -0,0 +1,2 @@
+export type { ReorderableItem, ReorderableItemChangeHandler, ReorderableItemProps, ReorderableItemComponent, SortableItemProps, } from './sortable-item.types';
+export { SortableItem } from './sortable-item';

package/dist/components/data-input/reorderable/reorderable-list/sortable-item/index.js

@@ -0,0 +1,2 @@
+export { SortableItem } from './sortable-item';
+//# sourceMappingURL=index.js.map

package/dist/components/data-input/reorderable/reorderable-list/sortable-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/reorderable-list/sortable-item/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/data-input/reorderable/reorderable-list/sortable-item/sortable-item.d.ts

@@ -0,0 +1,8 @@
+import type { ReorderableItem, SortableItemProps } from './sortable-item.types';
+/**
+ * Internal wrapper that makes a single `ReorderableList` item sortable and hands the consumer's `ItemComponent` a pre-wired drag handle.
+ *
+ * @example
+ * <SortableItem item={task} label={task.title} ItemComponent={TaskRow} onItemChange={handleItemChange} />
+ */
+export declare const SortableItem: <T extends ReorderableItem>({ item, label, ItemComponent, onItemChange, onItemRemove, }: SortableItemProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-input/reorderable/reorderable-list/sortable-item/sortable-item.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cva } from '../../../../../styled-system/css';
+import { Icon } from '../../../../../components/ui';
+const itemRecipe = cva({
+    base: {
+        position: 'relative',
+    },
+    variants: {
+        dragging: {
+            true: { zIndex: 1 },
+            false: {},
+        },
+    },
+});
+const dragHandleRecipe = cva({
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        padding: '1',
+        borderRadius: 'sm',
+        color: 'text.standard',
+        background: 'transparent',
+        border: 'none',
+        cursor: 'grab',
+        touchAction: 'none',
+        _hover: {
+            backgroundColor: 'hover',
+        },
+        _focusVisible: {
+            outlineStyle: 'solid',
+            outlineWidth: '2px',
+            outlineColor: 'text.standard',
+            outlineOffset: '0.5',
+        },
+    },
+    variants: {
+        dragging: {
+            true: { cursor: 'grabbing', color: 'text.secondary' },
+            false: {},
+        },
+    },
+});
+/**
+ * Internal wrapper that makes a single `ReorderableList` item sortable and hands the consumer's `ItemComponent` a pre-wired drag handle.
+ *
+ * @example
+ * <SortableItem item={task} label={task.title} ItemComponent={TaskRow} onItemChange={handleItemChange} />
+ */
+export const SortableItem = ({ item, label, ItemComponent, onItemChange, onItemRemove, }) => {
+    // Init DnD Kit Functionality
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({ id: item.id });
+    // DnD Kit Hover/Drag Styling
+    const style = {
+        transform: CSS.Translate.toString(transform),
+        transition,
+    };
+    // Drag Handle
+    const dragHandle = (_jsx("button", { type: "button", ref: setActivatorNodeRef, className: dragHandleRecipe({ dragging: isDragging }), "aria-label": `Reorder ${label}`, ...attributes, ...listeners, children: _jsx(Icon, { name: "DotsSixVertical", size: 16 }) }));
+    return (_jsx("div", { ref: setNodeRef, style: style, className: itemRecipe({ dragging: isDragging }), children: _jsx(ItemComponent, { item: item, dragHandle: dragHandle, onItemChange: onItemChange, onItemRemove: () => onItemRemove(item.id), isDragging: isDragging }) }));
+};
+//# sourceMappingURL=sortable-item.js.map

package/dist/components/data-input/reorderable/reorderable-list/sortable-item/sortable-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-item.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/reorderable-list/sortable-item/sortable-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,MAAM,UAAU,GAAG,GAAG,CAAC;IACtB,IAAI,EAAE;QACL,QAAQ,EAAE,UAAU;KACpB;IACD,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACnB,KAAK,EAAE,EAAE;SACT;KACD;CACD,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAAG,GAAG,CAAC;IAC5B,IAAI,EAAE;QACL,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,CAAC;QACb,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;QAClB,KAAK,EAAE,eAAe;QACtB,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,WAAW,EAAE,MAAM;QACnB,MAAM,EAAE;YACP,eAAe,EAAE,OAAO;SACxB;QACD,aAAa,EAAE;YACd,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,KAAK;YACnB,YAAY,EAAE,eAAe;YAC7B,aAAa,EAAE,KAAK;SACpB;KACD;IACD,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,gBAAgB,EAAE;YACrD,KAAK,EAAE,EAAE;SACT;KACD;CACD,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAA4B,EACvD,IAAI,EACJ,KAAK,EACL,aAAa,EACb,YAAY,EACZ,YAAY,GACU,EAAE,EAAE;IAC1B,6BAA6B;IAC7B,MAAM,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,SAAS,EACT,UAAU,EACV,UAAU,GACV,GAAG,WAAW,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAEjC,6BAA6B;IAC7B,MAAM,KAAK,GAAG;QACb,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5C,UAAU;KACV,CAAC;IAEF,cAAc;IACd,MAAM,UAAU,GAAG,CAClB,iBACC,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,mBAAmB,EACxB,SAAS,EAAE,gBAAgB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,gBACzC,WAAW,KAAK,EAAE,KAC1B,UAAU,KACV,SAAS,YAEb,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAE,EAAE,GAAI,GACjC,CACT,CAAC;IAEF,OAAO,CACN,cAAK,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,YAClF,KAAC,aAAa,IACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EACzC,UAAU,EAAE,UAAU,GACrB,GACG,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/data-input/reorderable/reorderable-list/sortable-item/sortable-item.types.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentType, ReactNode } from 'react';
+/** Minimum shape required for items rendered in a `ReorderableList`. */
+export type ReorderableItem = {
+    id: string | number;
+};
+/** Callback an item uses to report its own updated data. */
+export type ReorderableItemChangeHandler<T> = (item: T) => void;
+/** Props passed to the consumer-provided `ItemComponent`. */
+export type ReorderableItemProps<T> = {
+    item: T;
+    /** Pre-wired drag handle. Render it wherever the item should be grabbed. */
+    dragHandle: ReactNode;
+    /** Report changes to this item back to the list. */
+    onItemChange: ReorderableItemChangeHandler<T>;
+    /** Remove this item from the list. Remaining items are re-indexed via `orderProperty`. */
+    onItemRemove: () => void;
+    /** `true` while this item is being dragged. */
+    isDragging: boolean;
+};
+/** Component used to render each item in a `ReorderableList`. */
+export type ReorderableItemComponent<T> = ComponentType<ReorderableItemProps<T>>;
+/** Props for the internal `SortableItem` wrapper. */
+export type SortableItemProps<T extends ReorderableItem> = {
+    item: T;
+    /** Human-readable name used in the drag handle's `aria-label`. */
+    label: string;
+    ItemComponent: ReorderableItemComponent<T>;
+    onItemChange: ReorderableItemChangeHandler<T>;
+    /** Remove an item from the list by `id`. */
+    onItemRemove: (id: ReorderableItem['id']) => void;
+};

package/dist/components/data-input/reorderable/reorderable-list/sortable-item/sortable-item.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=sortable-item.types.js.map

package/dist/components/data-input/reorderable/reorderable-list/sortable-item/sortable-item.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-item.types.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/reorderable-list/sortable-item/sortable-item.types.ts"],"names":[],"mappings":""}

package/dist/components/data-input/reorderable/shared/components/drag-handle.d.ts

@@ -0,0 +1,24 @@
+import type { DraggableAttributes, DraggableSyntheticListeners } from '@dnd-kit/core';
+import type { DragHandleProps } from '../types/reorderable.types';
+/** Input for `createDragHandleProps`, taken from `useSortable` output. */
+type CreateDragHandlePropsInput = {
+    attributes: DraggableAttributes;
+    listeners: DraggableSyntheticListeners;
+    setActivatorNodeRef: (element: HTMLElement | null) => void;
+    /** Human-readable name; the handle's `aria-label` becomes `Reorder {label}` */
+    label: string;
+};
+export declare const createDragHandleProps: ({ attributes, listeners, setActivatorNodeRef, label, }: CreateDragHandlePropsInput) => DragHandleProps;
+/** Props for the default `DragHandle` button. */
+type DragHandleComponentProps = {
+    dragHandleProps: DragHandleProps;
+    isDragging: boolean;
+};
+/**
+ * Default drag handle button for reorderable items and groups.
+ *
+ * @example
+ * <DragHandle dragHandleProps={dragHandleProps} isDragging={isDragging} />
+ */
+export declare const DragHandle: ({ dragHandleProps, isDragging }: DragHandleComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-input/reorderable/shared/components/drag-handle.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from '../../../../../styled-system/css';
+import { Icon } from '../../../../../components/ui';
+const dragHandleRecipe = cva({
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        padding: '1',
+        borderRadius: 'sm',
+        color: 'text.standard',
+        background: 'transparent',
+        border: 'none',
+        cursor: 'grab',
+        _hover: {
+            backgroundColor: 'hover',
+        },
+        _focusVisible: {
+            outlineStyle: 'solid',
+            outlineWidth: '2px',
+            outlineColor: 'text.standard',
+            outlineOffset: '0.5',
+        },
+    },
+    variants: {
+        dragging: {
+            true: { cursor: 'grabbing', color: 'text.secondary', backgroundColor: 'active' },
+            false: {},
+        },
+    },
+});
+// Listener keys match the pointer and keyboard sensors registered by the reorderable components
+export const createDragHandleProps = ({ attributes, listeners, setActivatorNodeRef, label, }) => ({
+    ...attributes,
+    onPointerDown: listeners?.onPointerDown,
+    onKeyDown: listeners?.onKeyDown,
+    ref: setActivatorNodeRef,
+    'aria-label': `Reorder ${label}`,
+    style: { touchAction: 'none' },
+});
+/**
+ * Default drag handle button for reorderable items and groups.
+ *
+ * @example
+ * <DragHandle dragHandleProps={dragHandleProps} isDragging={isDragging} />
+ */
+export const DragHandle = ({ dragHandleProps, isDragging }) => (_jsx("button", { type: "button", className: dragHandleRecipe({ dragging: isDragging }), ...dragHandleProps, children: _jsx(Icon, { name: "DotsSixVertical", size: 16 }) }));
+//# sourceMappingURL=drag-handle.js.map

package/dist/components/data-input/reorderable/shared/components/drag-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-handle.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/shared/components/drag-handle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGvC,MAAM,gBAAgB,GAAG,GAAG,CAAC;IAC5B,IAAI,EAAE;QACL,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,CAAC;QACb,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;QAClB,KAAK,EAAE,eAAe;QACtB,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,MAAM,EAAE;YACP,eAAe,EAAE,OAAO;SACxB;QACD,aAAa,EAAE;YACd,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,KAAK;YACnB,YAAY,EAAE,eAAe;YAC7B,aAAa,EAAE,KAAK;SACpB;KACD;IACD,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,QAAQ,EAAE;YAChF,KAAK,EAAE,EAAE;SACT;KACD;CACD,CAAC,CAAC;AAWH,gGAAgG;AAChG,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACrC,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,KAAK,GACuB,EAAmB,EAAE,CAAC,CAAC;IACnD,GAAG,UAAU;IACb,aAAa,EAAE,SAAS,EAAE,aAA6D;IACvF,SAAS,EAAE,SAAS,EAAE,SAA0D;IAChF,GAAG,EAAE,mBAAmB;IACxB,YAAY,EAAE,WAAW,KAAK,EAAE;IAChC,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;CAC9B,CAAC,CAAC;AAQH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,eAAe,EAAE,UAAU,EAA4B,EAAE,EAAE,CAAC,CACxF,iBACC,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,gBAAgB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,KACjD,eAAe,YAEnB,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAE,EAAE,GAAI,GACjC,CACT,CAAC"}

package/dist/components/data-input/reorderable/shared/components/sortable-item.d.ts

@@ -0,0 +1,9 @@
+import type { ReorderableItem } from '../types/reorderable.types';
+import type { SortableItemProps } from '../types/sortable-item.types';
+/**
+ * Internal wrapper that makes a single item sortable and hands the consumer's `ItemComponent` a default `dragHandle` and spreadable `dragHandleProps`.
+ *
+ * @example
+ * <SortableItem sortableId={task.id} item={task} label={task.title} ItemComponent={TaskRow} onItemChange={handleItemChange} onItemRemove={handleItemRemove} />
+ */
+export declare const SortableItem: <T extends ReorderableItem>({ item, label, ItemComponent, onItemChange, onItemRemove, sortableId, }: SortableItemProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-input/reorderable/shared/components/sortable-item.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cva } from '../../../../../styled-system/css';
+import { DragHandle, createDragHandleProps } from './drag-handle';
+const itemRecipe = cva({
+    base: {
+        position: 'relative',
+    },
+    variants: {
+        dragging: {
+            true: { zIndex: 1 },
+            false: {},
+        },
+    },
+});
+/**
+ * Internal wrapper that makes a single item sortable and hands the consumer's `ItemComponent` a default `dragHandle` and spreadable `dragHandleProps`.
+ *
+ * @example
+ * <SortableItem sortableId={task.id} item={task} label={task.title} ItemComponent={TaskRow} onItemChange={handleItemChange} onItemRemove={handleItemRemove} />
+ */
+export const SortableItem = ({ item, label, ItemComponent, onItemChange, onItemRemove, sortableId, }) => {
+    // Init DnD Kit Functionality
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, } = useSortable({ id: sortableId });
+    // DnD Kit Hover/Drag Styling
+    const style = {
+        transform: CSS.Translate.toString(transform),
+        transition,
+    };
+    // Drag Handle
+    const dragHandleProps = createDragHandleProps({
+        attributes,
+        listeners,
+        setActivatorNodeRef,
+        label,
+    });
+    const dragHandle = _jsx(DragHandle, { dragHandleProps: dragHandleProps, isDragging: isDragging });
+    return (_jsx("div", { ref: setNodeRef, style: style, className: itemRecipe({ dragging: isDragging }), children: _jsx(ItemComponent, { item: item, dragHandle: dragHandle, dragHandleProps: dragHandleProps, onItemChange: onItemChange, onItemRemove: () => onItemRemove(item.id), isDragging: isDragging }) }));
+};
+//# sourceMappingURL=sortable-item.js.map

package/dist/components/data-input/reorderable/shared/components/sortable-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-item.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/shared/components/sortable-item.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAIlE,MAAM,UAAU,GAAG,GAAG,CAAC;IACtB,IAAI,EAAE;QACL,QAAQ,EAAE,UAAU;KACpB;IACD,QAAQ,EAAE;QACT,QAAQ,EAAE;YACT,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YACnB,KAAK,EAAE,EAAE;SACT;KACD;CACD,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAA4B,EACvD,IAAI,EACJ,KAAK,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,UAAU,GACY,EAAE,EAAE;IAC1B,6BAA6B;IAC7B,MAAM,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,SAAS,EACT,UAAU,EACV,UAAU,GACV,GAAG,WAAW,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;IAEpC,6BAA6B;IAC7B,MAAM,KAAK,GAAG;QACb,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC5C,UAAU;KACV,CAAC;IAEF,cAAc;IACd,MAAM,eAAe,GAAG,qBAAqB,CAAC;QAC7C,UAAU;QACV,SAAS;QACT,mBAAmB;QACnB,KAAK;KACL,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,KAAC,UAAU,IAAC,eAAe,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,GAAI,CAAC;IAE5F,OAAO,CACN,cAAK,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,YAClF,KAAC,aAAa,IACb,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EACzC,UAAU,EAAE,UAAU,GACrB,GACG,CACN,CAAC;AACH,CAAC,CAAC"}

package/dist/components/data-input/reorderable/shared/functions/announcements.d.ts

@@ -0,0 +1,4 @@
+import type { Announcements, ScreenReaderInstructions, UniqueIdentifier } from '@dnd-kit/core';
+export declare const screenReaderInstructions: ScreenReaderInstructions;
+export declare const defaultGetItemLabel: (_item: unknown, index: number) => string;
+export declare const createListAnnouncements: (ids: UniqueIdentifier[], getLabel: (id: UniqueIdentifier) => string) => Announcements;

package/dist/components/data-input/reorderable/shared/functions/announcements.js

@@ -0,0 +1,20 @@
+export const screenReaderInstructions = {
+    draggable: 'To pick up an item, press Space or Enter. While dragging, use the arrow keys to move it. Press Space or Enter again to drop it in its new position, or press Escape to cancel.',
+};
+export const defaultGetItemLabel = (_item, index) => `Item ${index + 1}`;
+// Announcements for a single flat list, from ids in display order
+export const createListAnnouncements = (ids, getLabel) => {
+    const total = ids.length;
+    const position = (id) => ids.indexOf(id) + 1;
+    return {
+        onDragStart: ({ active }) => `Picked up ${getLabel(active.id)}. Position ${position(active.id)} of ${total}.`,
+        onDragOver: ({ active, over }) => over
+            ? `${getLabel(active.id)} moved to position ${position(over.id)} of ${total}.`
+            : `${getLabel(active.id)} is not over a valid position.`,
+        onDragEnd: ({ active, over }) => over
+            ? `${getLabel(active.id)} dropped at position ${position(over.id)} of ${total}.`
+            : `${getLabel(active.id)} dropped.`,
+        onDragCancel: ({ active }) => `Reordering cancelled. ${getLabel(active.id)} returned to position ${position(active.id)} of ${total}.`,
+    };
+};
+//# sourceMappingURL=announcements.js.map

package/dist/components/data-input/reorderable/shared/functions/announcements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"announcements.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/shared/functions/announcements.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,wBAAwB,GAA6B;IACjE,SAAS,EACR,gLAAgL;CACjL,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAc,EAAE,KAAa,EAAE,EAAE,CAAC,QAAQ,KAAK,GAAG,CAAC,EAAE,CAAC;AAE1F,kEAAkE;AAClE,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACtC,GAAuB,EACvB,QAA0C,EAC1B,EAAE;IAClB,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC;IACzB,MAAM,QAAQ,GAAG,CAAC,EAAoB,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAE/D,OAAO;QACN,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAC3B,aAAa,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,cAAc,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,KAAK,GAAG;QACjF,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,CAChC,IAAI;YACH,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,sBAAsB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,KAAK,GAAG;YAC9E,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,gCAAgC;QAC1D,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,CAC/B,IAAI;YACH,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,wBAAwB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,KAAK,GAAG;YAChF,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,WAAW;QACrC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAC5B,yBAAyB,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,yBAAyB,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,KAAK,GAAG;KACxG,CAAC;AACH,CAAC,CAAC"}

package/dist/components/data-input/reorderable/shared/functions/apply-order.d.ts

@@ -0,0 +1,2 @@
+import type { NumericKeys } from '../types/reorderable.types';
+export declare const applyOrder: <T>(items: T[], orderProperty?: NumericKeys<T>) => T[];

package/dist/components/data-input/reorderable/shared/functions/apply-order.js

@@ -0,0 +1,8 @@
+// Rewrite `orderProperty` to match array position; unchanged when omitted
+export const applyOrder = (items, orderProperty) => orderProperty
+    ? items.map((item, index) => ({
+        ...item,
+        [orderProperty]: index,
+    }))
+    : items;
+//# sourceMappingURL=apply-order.js.map

package/dist/components/data-input/reorderable/shared/functions/apply-order.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply-order.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/shared/functions/apply-order.ts"],"names":[],"mappings":"AAEA,0EAA0E;AAC1E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAI,KAAU,EAAE,aAA8B,EAAO,EAAE,CAChF,aAAa;IACZ,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC5B,GAAG,IAAI;QACP,CAAC,aAAa,CAAC,EAAE,KAAK;KACtB,CAAC,CAAC;IACJ,CAAC,CAAC,KAAK,CAAC"}

package/dist/components/data-input/reorderable/shared/functions/form-value.d.ts

@@ -0,0 +1,30 @@
+import type { ReorderableItem } from '../types/reorderable.types';
+/** How a `ReorderableList` submits its order when `name` is set. `'inputs'` renders one hidden input per item; `'json'` renders one hidden input holding a JSON array of ids. */
+export type FormValueMode = 'inputs' | 'json';
+/** Submitted shape of a `ReorderableGroups` value. */
+export type ReorderableGroupsFormValue = {
+    groupId: ReorderableItem['id'];
+    itemIds: ReorderableItem['id'][];
+}[];
+/**
+ * Parses a `ReorderableList` value submitted with `formValue="json"` into item `id`s in order.
+ *
+ * @throws When the value is missing or isn't a JSON array of ids.
+ *
+ * @example
+ * const ids = parseReorderableValue(formData.get('taskOrder'));
+ */
+export declare const parseReorderableValue: (value: FormDataEntryValue | null) => ReorderableItem["id"][];
+/**
+ * Parses a submitted `ReorderableGroups` value into groups with their item `id`s in order.
+ *
+ * @throws When the value is missing or doesn't match `ReorderableGroupsFormValue`.
+ *
+ * @example
+ * const tiers = parseReorderableGroups(formData.get('tiers'));
+ */
+export declare const parseReorderableGroups: (value: FormDataEntryValue | null) => ReorderableGroupsFormValue;
+export declare const serializeReorderableGroups: (groups: {
+    id: ReorderableItem["id"];
+    items: ReorderableItem[];
+}[]) => string;

package/dist/components/data-input/reorderable/shared/functions/form-value.js

@@ -0,0 +1,49 @@
+const isId = (value) => typeof value === 'string' || typeof value === 'number';
+const parseJson = (value) => {
+    if (typeof value !== 'string' || value === '') {
+        throw new Error('Expected a JSON string form value');
+    }
+    return JSON.parse(value);
+};
+/**
+ * Parses a `ReorderableList` value submitted with `formValue="json"` into item `id`s in order.
+ *
+ * @throws When the value is missing or isn't a JSON array of ids.
+ *
+ * @example
+ * const ids = parseReorderableValue(formData.get('taskOrder'));
+ */
+export const parseReorderableValue = (value) => {
+    const parsed = parseJson(value);
+    if (!Array.isArray(parsed) || !parsed.every(isId)) {
+        throw new Error('Expected a JSON array of ids');
+    }
+    return parsed;
+};
+/**
+ * Parses a submitted `ReorderableGroups` value into groups with their item `id`s in order.
+ *
+ * @throws When the value is missing or doesn't match `ReorderableGroupsFormValue`.
+ *
+ * @example
+ * const tiers = parseReorderableGroups(formData.get('tiers'));
+ */
+export const parseReorderableGroups = (value) => {
+    const parsed = parseJson(value);
+    const valid = Array.isArray(parsed) &&
+        parsed.every((group) => typeof group === 'object' &&
+            group !== null &&
+            isId(group.groupId) &&
+            Array.isArray(group.itemIds) &&
+            group.itemIds.every(isId));
+    if (!valid) {
+        throw new Error('Expected a JSON array of { groupId, itemIds }');
+    }
+    return parsed;
+};
+// Group structure -> JSON string for the hidden input
+export const serializeReorderableGroups = (groups) => JSON.stringify(groups.map((group) => ({
+    groupId: group.id,
+    itemIds: group.items.map((item) => item.id),
+})));
+//# sourceMappingURL=form-value.js.map

package/dist/components/data-input/reorderable/shared/functions/form-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-value.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/shared/functions/form-value.ts"],"names":[],"mappings":"AAWA,MAAM,IAAI,GAAG,CAAC,KAAc,EAAkC,EAAE,CAC/D,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;AAExD,MAAM,SAAS,GAAG,CAAC,KAAgC,EAAW,EAAE;IAC/D,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;QAC/C,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;IACtD,CAAC;IACD,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACpC,KAAgC,EACN,EAAE;IAC5B,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;QACnD,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAC;IACjD,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACrC,KAAgC,EACH,EAAE;IAC/B,MAAM,MAAM,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,KAAK,GACV,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;QACrB,MAAM,CAAC,KAAK,CACX,CAAC,KAAK,EAAE,EAAE,CACT,OAAO,KAAK,KAAK,QAAQ;YACzB,KAAK,KAAK,IAAI;YACd,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;YACnB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC;YAC5B,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAC1B,CAAC;IACH,IAAI,CAAC,KAAK,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;IAClE,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC,CAAC;AAEF,sDAAsD;AACtD,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACzC,MAAiE,EACxD,EAAE,CACX,IAAI,CAAC,SAAS,CACb,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,EAAE;IACjB,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;CAC3C,CAAC,CAAC,CACH,CAAC"}

package/dist/components/data-input/reorderable/shared/functions/layout.d.ts

@@ -0,0 +1,18 @@
+import { type SortingStrategy } from '@dnd-kit/sortable';
+import type { ReorderableLayout } from '../types/reorderable.types';
+export declare const layoutStrategies: Record<ReorderableLayout, SortingStrategy>;
+export declare const layoutRecipe: import("../../../../../styled-system/types").RecipeRuntimeFn<{
+    layout: {
+        vertical: {
+            flexDirection: "column";
+        };
+        horizontal: {
+            flexDirection: "row";
+            overflowX: "auto";
+        };
+        grid: {
+            flexDirection: "row";
+            flexWrap: "wrap";
+        };
+    };
+}>;

package/dist/components/data-input/reorderable/shared/functions/layout.js

@@ -0,0 +1,27 @@
+import { cva } from '../../../../../styled-system/css';
+import { horizontalListSortingStrategy, rectSortingStrategy, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+// dnd-kit sorting strategy for each layout
+export const layoutStrategies = {
+    vertical: verticalListSortingStrategy,
+    horizontal: horizontalListSortingStrategy,
+    grid: rectSortingStrategy,
+};
+// Default arrangement when no wrapper is passed
+export const layoutRecipe = cva({
+    base: {
+        display: 'flex',
+        width: '100%',
+        minWidth: '0',
+    },
+    variants: {
+        layout: {
+            vertical: { flexDirection: 'column' },
+            horizontal: { flexDirection: 'row', overflowX: 'auto' },
+            grid: { flexDirection: 'row', flexWrap: 'wrap' },
+        },
+    },
+    defaultVariants: {
+        layout: 'vertical',
+    },
+});
+//# sourceMappingURL=layout.js.map

package/dist/components/data-input/reorderable/shared/functions/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../../../../src/components/data-input/reorderable/shared/functions/layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EACN,6BAA6B,EAC7B,mBAAmB,EACnB,2BAA2B,GAE3B,MAAM,mBAAmB,CAAC;AAG3B,2CAA2C;AAC3C,MAAM,CAAC,MAAM,gBAAgB,GAA+C;IAC3E,QAAQ,EAAE,2BAA2B;IACrC,UAAU,EAAE,6BAA6B;IACzC,IAAI,EAAE,mBAAmB;CACzB,CAAC;AAEF,gDAAgD;AAChD,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC;IAC/B,IAAI,EAAE;QACL,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,GAAG;KACb;IACD,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,QAAQ,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE;YACrC,UAAU,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE;YACvD,IAAI,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;SAChD;KACD;IACD,eAAe,EAAE;QAChB,MAAM,EAAE,UAAU;KAClB;CACD,CAAC,CAAC"}

package/dist/components/data-input/reorderable/shared/index.d.ts

@@ -0,0 +1,9 @@
+export type { ReorderableItem, NumericKeys, ReorderableLayout, ReorderableWrapperProps, ReorderableWrapper, DragHandleProps, ReorderableItemChangeHandler, ReorderableItemProps, ReorderableItemComponent, } from './types/reorderable.types';
+export type { SortableItemProps } from './types/sortable-item.types';
+export type { FormValueMode, ReorderableGroupsFormValue } from './functions/form-value';
+export { parseReorderableValue, parseReorderableGroups, serializeReorderableGroups, } from './functions/form-value';
+export { applyOrder } from './functions/apply-order';
+export { layoutStrategies, layoutRecipe } from './functions/layout';
+export { screenReaderInstructions, defaultGetItemLabel, createListAnnouncements, } from './functions/announcements';
+export { DragHandle, createDragHandleProps } from './components/drag-handle';
+export { SortableItem } from './components/sortable-item';