thread-ui 0.16.4 → 0.17.0

package/dist/components/data-input/file-upload/use-file-upload.js

@@ -0,0 +1,154 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { useControllableState } from '../../../internal';
+import { getErrorId, useFieldError } from '../shared/use-field-error';
+import { formatBytes, isImageItem, isRemoteFile, matchesAccept, withFileMeta, } from './file-upload.utils';
+/**
+ * State and form wiring for `FileUpload`: controllable value, validation of picked files,
+ * keys that survive renames, a native file input kept in sync via `DataTransfer`,
+ * and the metadata JSON submitted alongside the files.
+ *
+ * @example
+ * const upload = useFileUpload({ id, name, value, onChange, accept: 'image/*', maxFiles: 3 });
+ */
+export const useFileUpload = ({ id, name, value, defaultValue, onChange, accept, maxSize, maxFiles, required, disabled, error, }) => {
+    const inputRef = useRef(null);
+    const browseRef = useRef(null);
+    // Stable keys for new files; carried over when a rename creates a new `File`
+    const keysRef = useRef(new WeakMap());
+    const keyCounter = useRef(0);
+    const [items, setItems] = useControllableState({
+        value,
+        defaultValue: defaultValue ?? [],
+        onChange,
+        elementRef: inputRef,
+    });
+    // Feedback for a rejected pick; describes the pick, not the value, so it never blocks submission
+    const [status, setStatus] = useState(null);
+    // First file of the latest add, focused by its editor in `on-add` mode
+    const [focusKey, setFocusKey] = useState(null);
+    const remoteFiles = items.filter(isRemoteFile);
+    const newFiles = items.filter((item) => !isRemoteFile(item));
+    const isFull = maxFiles !== undefined && items.length >= maxFiles;
+    const getKey = (item) => {
+        if (isRemoteFile(item))
+            return `remote-${item.id ?? item.src}`;
+        let key = keysRef.current.get(item);
+        if (!key) {
+            key = `file-${keyCounter.current++}`;
+            keysRef.current.set(item, key);
+        }
+        return key;
+    };
+    const syncInput = (files) => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        const transfer = new DataTransfer();
+        files.forEach((file) => transfer.items.add(file));
+        input.files = transfer.files;
+    };
+    // Mirror new files into the native input so they submit with the form and satisfy `required`.
+    // Declared before `useFieldError` so validity is current when it refreshes
+    useEffect(() => {
+        syncInput(newFiles);
+    }, [items]);
+    const { ref, message: fieldMessage, validationProps, ariaProps, } = useFieldError({
+        id,
+        error,
+        value: items.length,
+        elementRef: inputRef,
+        focusRef: browseRef,
+    });
+    const message = error || status || fieldMessage;
+    const addFiles = (files) => {
+        if (disabled)
+            return;
+        const accepted = [];
+        let rejection = null;
+        let remaining = maxFiles === undefined ? Infinity : maxFiles - items.length;
+        for (const file of Array.from(files)) {
+            if (!matchesAccept(file, accept)) {
+                rejection = `"${file.name}" isn't a supported file type`;
+                continue;
+            }
+            if (maxSize !== undefined && file.size > maxSize) {
+                rejection = `"${file.name}" is larger than ${formatBytes(maxSize)}`;
+                continue;
+            }
+            if (remaining <= 0) {
+                rejection = `You can add up to ${maxFiles} ${maxFiles === 1 ? 'file' : 'files'}`;
+                continue;
+            }
+            accepted.push(file);
+            remaining--;
+        }
+        setStatus(rejection);
+        if (accepted.length === 0)
+            return;
+        setItems([...items, ...accepted]);
+        setFocusKey(getKey(accepted[0]));
+    };
+    const removeItem = (key) => {
+        setItems(items.filter((item) => getKey(item) !== key));
+        setStatus(null);
+    };
+    const updateItem = (key, meta) => {
+        setItems(items.map((item) => {
+            if (isRemoteFile(item) || getKey(item) !== key)
+                return item;
+            const next = withFileMeta(item, meta);
+            keysRef.current.set(next, key);
+            return next;
+        }));
+    };
+    const openPicker = () => inputRef.current?.click();
+    const handleInputChange = (e) => {
+        const picked = Array.from(e.target.files ?? []);
+        // The picker replaced the input's files; restore ours so rejected picks never submit
+        syncInput(newFiles);
+        addFiles(picked);
+    };
+    // Metadata ordered to match `formData.getAll(name)`: existing files render first, then the file input
+    const meta = JSON.stringify([
+        ...remoteFiles.map((file) => ({ id: file.id ?? file.src })),
+        ...newFiles.map((file) => ({
+            name: file.name,
+            ...(isImageItem(file) ? { alt: file.alt ?? '' } : {}),
+        })),
+    ]);
+    const inputProps = {
+        ref,
+        ...validationProps,
+        id,
+        name,
+        type: 'file',
+        accept,
+        multiple: maxFiles !== 1,
+        // Existing files can't live in a file input, so they satisfy `required` by switching it off
+        required: required && remoteFiles.length === 0,
+        disabled,
+        onChange: handleInputChange,
+    };
+    const browseAriaProps = {
+        'aria-invalid': ariaProps['aria-invalid'],
+        'aria-describedby': message ? getErrorId(id) : undefined,
+    };
+    return {
+        items,
+        remoteFiles,
+        isFull,
+        focusKey,
+        message,
+        meta,
+        inputProps,
+        browseRef,
+        browseAriaProps,
+        getKey,
+        addFiles,
+        removeItem,
+        updateItem,
+        openPicker,
+    };
+};
+//# sourceMappingURL=use-file-upload.js.map

package/dist/components/data-input/file-upload/use-file-upload.js.map

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

package/dist/components/data-input/file-upload/use-object-url.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Object URL for previewing a `File`, revoked when the file changes or the component unmounts.
+ * Returns `null` while no file is given.
+ *
+ * @example
+ * const url = useObjectUrl(file);
+ * return url && <img src={url} alt="" />;
+ */
+export declare const useObjectUrl: (file: File | null) => string | null;

package/dist/components/data-input/file-upload/use-object-url.js

@@ -0,0 +1,24 @@
+'use client';
+import { useEffect, useState } from 'react';
+/**
+ * Object URL for previewing a `File`, revoked when the file changes or the component unmounts.
+ * Returns `null` while no file is given.
+ *
+ * @example
+ * const url = useObjectUrl(file);
+ * return url && <img src={url} alt="" />;
+ */
+export const useObjectUrl = (file) => {
+    const [url, setUrl] = useState(null);
+    useEffect(() => {
+        if (!file) {
+            setUrl(null);
+            return;
+        }
+        const next = URL.createObjectURL(file);
+        setUrl(next);
+        return () => URL.revokeObjectURL(next);
+    }, [file]);
+    return url;
+};
+//# sourceMappingURL=use-object-url.js.map

package/dist/components/data-input/file-upload/use-object-url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-object-url.js","sourceRoot":"","sources":["../../../../src/components/data-input/file-upload/use-object-url.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAiB,EAAE,EAAE;IACjD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,IAAI,EAAE,CAAC;YACX,MAAM,CAAC,IAAI,CAAC,CAAC;YACb,OAAO;QACR,CAAC;QACD,MAAM,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QACvC,MAAM,CAAC,IAAI,CAAC,CAAC;QACb,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,GAAG,CAAC;AACZ,CAAC,CAAC"}

package/dist/components/{form-elements → data-input}/index.d.ts

@@ -1,5 +1,6 @@
 export * from './dropdowns';
 export * from './file-upload';
-export * from './form-label';
+export * from './shared/form-label';
+export * from './reorderable';
 export * from './number-input';
 export * from './text-input';

package/dist/components/{form-elements → data-input}/index.js

@@ -1,6 +1,7 @@
 export * from './dropdowns';
 export * from './file-upload';
-export * from './form-label';
+export * from './shared/form-label';
+export * from './reorderable';
 export * from './number-input';
 export * from './text-input';
 //# sourceMappingURL=index.js.map

package/dist/components/data-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/data-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}

package/dist/components/data-input/number-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-input/number-input/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/{form-elements → data-input}/number-input/number-input.d.ts

@@ -2,6 +2,7 @@ import { NumberInputProps } from './number-input.types';
 /**
  * Number input with increment/decrement buttons and optional min/max range enforcement.
  * Blocks non-numeric keyboard input and respects range bounds on both direct input and stepping.
+ * Controlled when `value` is passed, uncontrolled otherwise.
  *
  * @example
  * <NumberInput
@@ -12,5 +13,8 @@ import { NumberInputProps } from './number-input.types';
  *   max={99}
  *   onChange={handleChange}
  * />
+ *
+ * @example
+ * <NumberInput name="quantity" title="Quantity" defaultValue={1} min={1} max={99} />
  */
-export declare const NumberInput: ({ name, id, title, value, placeholder, required, min, max, size, disabled, onChange, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberInput: ({ name, id: idProp, title, value, defaultValue, placeholder, required, min, max, size, disabled, divider, error, onChange, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/{form-elements → data-input}/number-input/number-input.js

@@ -1,10 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '../../../components';
-import { FormLabel } from '../form-label';
-import { InputWrapper } from '../input-wrapper';
-import { inputIconSizes, inputSegmentStyles } from '../styles';
-import { useState, useEffect } from 'react';
+import { InputWrapper } from '../shared/input-wrapper';
+import { useFieldError } from '../shared/use-field-error';
+import { useControllableState } from '../../../internal';
+import { useInputId } from '../shared/use-input-id';
+import { inputIconSizes, inputSegmentStyles } from '../shared/styles';
+import { useRef } from 'react';
 import { cva, cx } from '../../../styled-system/css';
 const styles = {
     arrowButton: cva({
@@ -33,8 +35,6 @@ const styles = {
     }),
     centerSegment: cva({
         base: {
-            color: 'text.standard',
-            backgroundColor: 'inset',
             textAlign: 'center',
             appearance: 'none',
             '&::-webkit-outer-spin-button': {
@@ -43,10 +43,6 @@ const styles = {
             '&::-webkit-inner-spin-button': {
                 appearance: 'none',
             },
-            _focus: {
-                ringColor: 'info.main',
-                borderColor: 'info.main',
-            },
         },
         variants: {
             size: {
@@ -72,15 +68,6 @@ const styles = {
             alignItems: 'stretch',
             alignSelf: 'start',
         },
-        variants: {
-            disabled: {
-                true: { opacity: '0.5', cursor: 'not-allowed' },
-                false: {},
-            },
-        },
-        defaultVariants: {
-            disabled: false,
-        },
     }),
 };
 const valueWithinRange = (value, min, max) => {
@@ -95,6 +82,7 @@ const valueWithinRange = (value, min, max) => {
 /**
  * Number input with increment/decrement buttons and optional min/max range enforcement.
  * Blocks non-numeric keyboard input and respects range bounds on both direct input and stepping.
+ * Controlled when `value` is passed, uncontrolled otherwise.
  *
  * @example
  * <NumberInput
@@ -105,14 +93,25 @@ const valueWithinRange = (value, min, max) => {
  *   max={99}
  *   onChange={handleChange}
  * />
+ *
+ * @example
+ * <NumberInput name="quantity" title="Quantity" defaultValue={1} min={1} max={99} />
  */
-export const NumberInput = ({ name, id = name, title, value, placeholder, required, min, max, size = 'md', disabled, onChange, }) => {
-    // Initialize state with the value from props or null
-    const [num, setNum] = useState(value ?? null);
-    // Update internal state
-    useEffect(() => {
-        setNum(value ?? null);
-    }, [value]);
+export const NumberInput = ({ name, id: idProp, title, value, defaultValue, placeholder, required, min, max, size = 'md', disabled, divider, error, onChange, }) => {
+    const id = useInputId(idProp, name);
+    const inputRef = useRef(null);
+    // Internal state only backs the uncontrolled case; a controlled parent owns the value
+    const [num, setNum] = useControllableState({
+        value,
+        defaultValue: defaultValue ?? null,
+        elementRef: inputRef,
+    });
+    const { ref, message, fieldProps } = useFieldError({
+        id,
+        error,
+        value: num,
+        elementRef: inputRef,
+    });
     // Handle Num Increment
     const handleIncrement = (increment) => () => {
         const newValue = (num ?? 0) + increment;
@@ -157,28 +156,28 @@ export const NumberInput = ({ name, id = name, title, value, placeholder, requir
             }
         }
     };
-    return (_jsxs(InputWrapper, { children: [title && _jsx(FormLabel, { id: id, name: name, title: title, size: size }), _jsxs("div", { className: styles.container({ disabled: disabled }), children: [_jsx("button", { type: "button", className: cx(styles.arrowButton({ direction: 'left' }), inputSegmentStyles({ size })), onClick: handleIncrement(-1), children: _jsx(Icon, { name: "CaretLeft", color: "gray", size: inputIconSizes[size] }) }), _jsx("input", { type: "number", id: id, name: name, placeholder: placeholder, value: num ?? '', onChange: handleInputChange, className: cx(inputSegmentStyles({ size }), styles.centerSegment({ size })), onKeyDown: (e) => {
-                            // Allow minus sign as first character if negative values are allowed
-                            if (e.key === '-' &&
-                                e.currentTarget.value.length === 0 &&
-                                (min === undefined || min < 0)) {
-                                return; // Allow the minus sign
-                            }
-                            // Prevent non-numeric input except allowed control keys
-                            if (!/[0-9]/.test(e.key) &&
-                                !e.ctrlKey &&
-                                !e.metaKey &&
-                                ![
-                                    'Backspace',
-                                    'Delete',
-                                    'ArrowLeft',
-                                    'ArrowRight',
-                                    'Tab',
-                                    'Home',
-                                    'End',
-                                ].includes(e.key)) {
-                                e.preventDefault();
-                            }
-                        }, required: required, disabled: disabled, min: min, max: max }), _jsx("button", { type: "button", className: cx(styles.arrowButton({ direction: 'right' }), inputSegmentStyles({ size })), onClick: handleIncrement(1), disabled: disabled, children: _jsx(Icon, { name: "CaretRight", color: "gray", size: inputIconSizes[size] }) })] })] }));
+    return (_jsx(InputWrapper, { id: id, title: title, size: size, divider: divider, error: message, children: _jsxs("div", { className: styles.container(), children: [_jsx("button", { type: "button", className: cx(styles.arrowButton({ direction: 'left' }), inputSegmentStyles({ size })), onClick: handleIncrement(-1), disabled: disabled, children: _jsx(Icon, { name: "CaretLeft", color: "gray", size: inputIconSizes[size] }) }), _jsx("input", { ref: ref, type: "number", id: id, name: name, placeholder: placeholder, value: num ?? '', onChange: handleInputChange, className: cx(inputSegmentStyles({ size, field: true }), styles.centerSegment({ size })), onKeyDown: (e) => {
+                        // Allow minus sign as first character if negative values are allowed
+                        if (e.key === '-' &&
+                            e.currentTarget.value.length === 0 &&
+                            (min === undefined || min < 0)) {
+                            return; // Allow the minus sign
+                        }
+                        // Prevent non-numeric input except allowed control keys
+                        if (!/[0-9]/.test(e.key) &&
+                            !e.ctrlKey &&
+                            !e.metaKey &&
+                            ![
+                                'Backspace',
+                                'Delete',
+                                'ArrowLeft',
+                                'ArrowRight',
+                                'Tab',
+                                'Home',
+                                'End',
+                            ].includes(e.key)) {
+                            e.preventDefault();
+                        }
+                    }, required: required, disabled: disabled, min: min, max: max, ...fieldProps }), _jsx("button", { type: "button", className: cx(styles.arrowButton({ direction: 'right' }), inputSegmentStyles({ size })), onClick: handleIncrement(1), disabled: disabled, children: _jsx(Icon, { name: "CaretRight", color: "gray", size: inputIconSizes[size] }) })] }) }));
 };
 //# sourceMappingURL=number-input.js.map

package/dist/components/data-input/number-input/number-input.js.map

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

package/dist/components/{form-elements → data-input}/number-input/number-input.types.d.ts

@@ -1,5 +1,5 @@
 import { Prettify } from '../../../types';
-import { InputProps } from '../input-props.types';
+import { InputProps } from '../shared/input-props.types';
 export type NumberInputProps = Prettify<InputProps<number | null> & {
     /** Minimum allowed value */
     min?: number;

package/dist/components/data-input/number-input/number-input.types.js.map

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

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

@@ -0,0 +1,4 @@
+export * from './reorderable-list';
+export * from './reorderable-groups';
+export type { ReorderableItem, ReorderableLayout, ReorderableWrapperProps, ReorderableWrapper, DragHandleProps, ReorderableItemChangeHandler, ReorderableItemProps, ReorderableItemComponent, FormValueMode, ReorderableGroupsFormValue, } from './shared';
+export { parseReorderableValue, parseReorderableGroups } from './shared';

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

@@ -0,0 +1,4 @@
+export * from './reorderable-list';
+export * from './reorderable-groups';
+export { parseReorderableValue, parseReorderableGroups } from './shared';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-input/reorderable/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AAarC,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/data-input/reorderable/reorderable-groups/group-title.d.ts

@@ -0,0 +1,8 @@
+import type { ReorderableGroup, ReorderableGroupTitleProps } from './reorderable-groups.types';
+/**
+ * Default group title: the drag handle followed by the `title`. A string `title` renders as semibold `Text`; a node renders as-is.
+ *
+ * @example
+ * <GroupTitle group={group} dragHandle={dragHandle} isDragging={false} size="md" />
+ */
+export declare const GroupTitle: <G extends ReorderableGroup>({ group, dragHandle, size, }: ReorderableGroupTitleProps<G>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/data-input/reorderable/reorderable-groups/group-title.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from '../../../../styled-system/css';
+import { Text } from '../../../../components/typography';
+const styles = {
+    root: css({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '1',
+        minWidth: '0',
+    }),
+};
+/**
+ * Default group title: the drag handle followed by the `title`. A string `title` renders as semibold `Text`; a node renders as-is.
+ *
+ * @example
+ * <GroupTitle group={group} dragHandle={dragHandle} isDragging={false} size="md" />
+ */
+export const GroupTitle = ({ group, dragHandle, size, }) => (_jsxs("div", { className: styles.root, children: [dragHandle, typeof group.title === 'string' ? (_jsx(Text, { marginBottom: false, weight: "semibold", size: size, children: group.title })) : (group.title)] }));
+//# sourceMappingURL=group-title.js.map

package/dist/components/data-input/reorderable/reorderable-groups/group-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-title.js","sourceRoot":"","sources":["../../../../../src/components/data-input/reorderable/reorderable-groups/group-title.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,MAAM,GAAG;IACd,IAAI,EAAE,GAAG,CAAC;QACT,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE,GAAG;KACb,CAAC;CACF,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAA6B,EACtD,KAAK,EACL,UAAU,EACV,IAAI,GAC2B,EAAE,EAAE,CAAC,CACpC,eAAK,SAAS,EAAE,MAAM,CAAC,IAAI,aACzB,UAAU,EACV,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAClC,KAAC,IAAI,IAAC,YAAY,EAAE,KAAK,EAAE,MAAM,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,YACrD,KAAK,CAAC,KAAK,GACN,CACP,CAAC,CAAC,CAAC,CACH,KAAK,CAAC,KAAK,CACX,IACI,CACN,CAAC"}

package/dist/components/data-input/reorderable/reorderable-groups/group-utils.d.ts

@@ -0,0 +1,13 @@
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import type { ReorderableItem } from '../shared';
+import type { GroupItem, ReorderableGroup } from './reorderable-groups.types';
+/** Kind of dnd-kit node, encoded as the key prefix. */
+export type NodeKind = 'group' | 'item' | 'container';
+export declare const groupKey: (id: ReorderableItem["id"]) => string;
+export declare const itemKey: (id: ReorderableItem["id"]) => string;
+export declare const containerKey: (id: ReorderableItem["id"]) => string;
+export declare const nodeKind: (key: UniqueIdentifier) => NodeKind;
+export declare const itemsOf: <G extends ReorderableGroup>(group: G) => GroupItem<G>[];
+export declare const withItems: <G extends ReorderableGroup>(group: G, items: GroupItem<G>[]) => G;
+export declare const findGroupIndex: <G extends ReorderableGroup>(groups: G[], key: UniqueIdentifier) => number;
+export declare const defaultGetGroupLabel: (group: ReorderableGroup, index: number) => string;

package/dist/components/data-input/reorderable/reorderable-groups/group-utils.js

@@ -0,0 +1,26 @@
+// Namespaced dnd-kit keys so group and item ids never collide
+export const groupKey = (id) => `group:${id}`;
+export const itemKey = (id) => `item:${id}`;
+export const containerKey = (id) => `container:${id}`;
+export const nodeKind = (key) => String(key).split(':', 1)[0];
+// Typed item access for a generic group
+export const itemsOf = (group) => group.items;
+export const withItems = (group, items) => ({
+    ...group,
+    items,
+});
+// Index of the group holding the node `key` points at
+export const findGroupIndex = (groups, key) => {
+    switch (nodeKind(key)) {
+        case 'item':
+            return groups.findIndex((group) => group.items.some((item) => itemKey(item.id) === key));
+        case 'container':
+            return groups.findIndex((group) => containerKey(group.id) === key);
+        case 'group':
+            return groups.findIndex((group) => groupKey(group.id) === key);
+        default:
+            return -1;
+    }
+};
+export const defaultGetGroupLabel = (group, index) => typeof group.title === 'string' ? group.title : `Group ${index + 1}`;
+//# sourceMappingURL=group-utils.js.map

package/dist/components/data-input/reorderable/reorderable-groups/group-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-utils.js","sourceRoot":"","sources":["../../../../../src/components/data-input/reorderable/reorderable-groups/group-utils.ts"],"names":[],"mappings":"AAOA,8DAA8D;AAC9D,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAyB,EAAE,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC;AACrE,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAyB,EAAE,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;AACnE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAyB,EAAE,EAAE,CAAC,aAAa,EAAE,EAAE,CAAC;AAC7E,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,GAAqB,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAa,CAAC;AAE5F,wCAAwC;AACxC,MAAM,CAAC,MAAM,OAAO,GAAG,CAA6B,KAAQ,EAAE,EAAE,CAAC,KAAK,CAAC,KAAuB,CAAC;AAC/F,MAAM,CAAC,MAAM,SAAS,GAAG,CAA6B,KAAQ,EAAE,KAAqB,EAAK,EAAE,CAAC,CAAC;IAC7F,GAAG,KAAK;IACR,KAAK;CACL,CAAC,CAAC;AAEH,sDAAsD;AACtD,MAAM,CAAC,MAAM,cAAc,GAAG,CAA6B,MAAW,EAAE,GAAqB,EAAE,EAAE;IAChG,QAAQ,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACvB,KAAK,MAAM;YACV,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CACjC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CACpD,CAAC;QACH,KAAK,WAAW;YACf,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC;QACpE,KAAK,OAAO;YACX,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC;QAChE;YACC,OAAO,CAAC,CAAC,CAAC;IACZ,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAuB,EAAE,KAAa,EAAE,EAAE,CAC9E,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,CAAC,EAAE,CAAC"}

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

@@ -0,0 +1,2 @@
+export type { ReorderableGroup, GroupItem, GroupTitlePosition, ReorderableGroupTitleProps, ReorderableGroupTitleComponent, ReorderableGroupsProps, } from './reorderable-groups.types';
+export { ReorderableGroups } from './reorderable-groups';

package/dist/components/data-input/reorderable/reorderable-groups/index.js

@@ -0,0 +1,2 @@
+export { ReorderableGroups } from './reorderable-groups';
+//# sourceMappingURL=index.js.map

package/dist/components/data-input/reorderable/reorderable-groups/index.js.map

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

package/dist/components/data-input/reorderable/reorderable-groups/reorderable-groups.d.ts

@@ -0,0 +1,18 @@
+import type { ReorderableGroup, ReorderableGroupsProps } from './reorderable-groups.types';
+/**
+ * Controlled input of titled groups whose items can be reordered within a group and moved between groups by pointer, touch, or keyboard. Groups can be reordered too unless `sortableGroups` is `false`. Set `name` to submit the structure as JSON.
+ *
+ * @example
+ * const [tiers, setTiers] = useState(initialTiers);
+ *
+ * <ReorderableGroups
+ *     name="tiers"
+ *     title="Tier List"
+ *     value={tiers}
+ *     onChange={setTiers}
+ *     ItemComponent={TierTile}
+ *     titlePosition="start"
+ *     sortableGroups={false}
+ * />
+ */
+export declare const ReorderableGroups: <G extends ReorderableGroup>({ value, orderProperty, ItemComponent, onChange, getItemLabel, getGroupLabel, GroupTitleComponent, titlePosition, sortableGroups, layout, groupLayout, ItemsWrapper, GroupsWrapper, name, id: idProp, title, size, divider, secondaryContent, }: ReorderableGroupsProps<G>) => import("react/jsx-runtime").JSX.Element;