@tangible/ui 0.0.2 → 0.0.3

package/components/MoveHandle/MoveHandle.d.ts

@@ -0,0 +1,2 @@
+import type { MoveHandleProps } from './types';
+export declare const MoveHandle: import("react").ForwardRefExoticComponent<MoveHandleProps & import("react").RefAttributes<HTMLElement>>;

package/components/MoveHandle/MoveHandle.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useRef } from 'react';
+import { cx } from '../../utils/cx.js';
+import { isDev } from '../../utils/is-dev.js';
+import { Icon } from '../Icon/index.js';
+// =============================================================================
+// MoveHandle Component
+// =============================================================================
+//
+// Compact reorder control for sortable lists. Shows a drag handle with optional
+// up/down chevron buttons and a position index badge.
+//
+// When `index` is provided, shows the number at rest and swaps to the drag
+// handle icon on hover/focus-within (CSS-driven, no JS state).
+//
+// Forwards ref to the root element (div for full, button for handle).
+//
+// Modes:
+//   full    — Background panel with arrows, index, lock (default)
+//   handle  — Bare drag icon button, no chrome
+//
+// CSS token API (never defined, read via fallback):
+//   --tui-move-handle-size       Override container size
+//   --tui-move-handle-icon-size  Override icon size
+//
+// =============================================================================
+export const MoveHandle = forwardRef(function MoveHandle({ mode = 'full', size = 'md', index, locked = false, onMoveUp, onMoveDown, canMoveUp = true, canMoveDown = true, labels, dragHandleProps, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, }, ref) {
+    // All hooks must be called unconditionally (rules of hooks)
+    const innerRef = useRef(null);
+    const mergedRef = useCallback((node) => {
+        innerRef.current = node;
+        if (typeof ref === 'function')
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const hasWarnedRef = useRef(false);
+    useEffect(() => {
+        if (mode === 'handle')
+            return;
+        if (hasWarnedRef.current)
+            return;
+        if (isDev() && !ariaLabel && !ariaLabelledBy) {
+            console.warn('MoveHandle: Missing accessible name. Provide aria-label or aria-labelledby.');
+            hasWarnedRef.current = true;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const lockedDescId = useId();
+    // Focus recovery: when a move button becomes disabled after a reorder,
+    // redirect focus to the opposite button or drag handle
+    useEffect(() => {
+        if (mode === 'handle')
+            return;
+        const group = innerRef.current;
+        if (!group)
+            return;
+        const active = document.activeElement;
+        if (active instanceof HTMLButtonElement &&
+            active.disabled &&
+            group.contains(active)) {
+            const fallback = group.querySelector('.tui-move-handle__up:not(:disabled), .tui-move-handle__down:not(:disabled)') ??
+                group.querySelector('.tui-move-handle__handle');
+            fallback?.focus();
+        }
+    }, [mode, canMoveUp, canMoveDown]);
+    // Drag handle label precedence: dragHandleProps > labels.drag > default
+    const resolvedDragLabel = dragHandleProps?.['aria-label'] ?? labels?.drag ?? 'Drag to reorder';
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { 'aria-label': _dhLabel, ...restDragProps } = dragHandleProps ?? {};
+    // ----- Handle mode: just the drag icon button -----
+    // Uses ref directly (not mergedRef) — innerRef is unused for this path.
+    // Focus recovery and dev warning effects early-return for handle mode.
+    if (mode === 'handle') {
+        return (_jsx("button", { ref: ref, type: "button", className: cx('tui-move-handle', 'is-handle', className), "aria-label": resolvedDragLabel, ...restDragProps, children: _jsx(Icon, { name: "system/drag" }) }));
+    }
+    // ----- Full mode -----
+    const hasIndex = index != null;
+    const hasArrows = !!(onMoveUp || onMoveDown);
+    const resolvedLockedDesc = locked
+        ? (labels?.locked ?? 'This item is locked and cannot be reordered')
+        : undefined;
+    return (_jsxs("div", { ref: mergedRef, role: "group", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": locked ? lockedDescId : undefined, "aria-disabled": locked || undefined, className: cx('tui-move-handle', `is-size-${size}`, locked && 'is-locked', hasIndex && 'has-index', className), children: [locked && (_jsx("span", { id: lockedDescId, className: "tui-visually-hidden", children: resolvedLockedDesc })), onMoveUp && (_jsx("button", { type: "button", className: "tui-move-handle__up", "aria-label": labels?.moveUp ?? 'Move up', disabled: locked || !canMoveUp, onClick: onMoveUp, children: _jsx(Icon, { name: "system/chevron-up" }) })), _jsx("div", { className: "tui-move-handle__center", children: locked ? (_jsx("span", { className: "tui-move-handle__lock", "aria-hidden": "true", children: _jsx(Icon, { name: "system/lock" }) })) : (_jsxs(_Fragment, { children: [hasIndex && (_jsx("span", { className: "tui-move-handle__index", "aria-hidden": "true", children: index })), _jsx("button", { type: "button", className: "tui-move-handle__handle", "aria-label": resolvedDragLabel, tabIndex: hasArrows ? -1 : 0, ...restDragProps, children: _jsx(Icon, { name: "system/handle-alt" }) })] })) }), onMoveDown && (_jsx("button", { type: "button", className: "tui-move-handle__down", "aria-label": labels?.moveDown ?? 'Move down', disabled: locked || !canMoveDown, onClick: onMoveDown, children: _jsx(Icon, { name: "system/chevron-down" }) }))] }));
+});

package/components/MoveHandle/index.d.ts

@@ -0,0 +1,2 @@
+export { MoveHandle } from './MoveHandle';
+export type { MoveHandleLabels, MoveHandleProps, MoveHandleSize, MoveHandleMode } from './types';

package/components/MoveHandle/index.js

@@ -0,0 +1 @@
+export { MoveHandle } from './MoveHandle.js';

package/components/MoveHandle/types.d.ts

@@ -0,0 +1,43 @@
+import type { HTMLAttributes } from 'react';
+export type MoveHandleSize = 'sm' | 'md';
+export type MoveHandleMode = 'full' | 'handle';
+export interface MoveHandleLabels {
+    /** Label for the move-up button. Include item name for clear AT context, e.g. "Move Introduction up". Default: "Move up" */
+    moveUp?: string;
+    /** Label for the move-down button. Include item name for clear AT context, e.g. "Move Introduction down". Default: "Move down" */
+    moveDown?: string;
+    /**
+     * Label for the drag handle button. Default: "Drag to reorder".
+     * Consumers add position info if needed. dragHandleProps['aria-label'] takes precedence.
+     */
+    drag?: string;
+    /** Descriptive text announced when locked (via aria-describedby). Default: "This item is locked and cannot be reordered". */
+    locked?: string;
+}
+export interface MoveHandleProps {
+    /** Structural mode. 'full' (default) shows background panel with arrows/index. 'handle' shows only the bare drag icon button. */
+    mode?: MoveHandleMode;
+    /** Component scale. sm = 32px, md = 40px. Ignored when mode is 'handle'. */
+    size?: MoveHandleSize;
+    /** Position index. When provided, shows number at rest, drag handle on hover. */
+    index?: number;
+    /** When true, shows lock icon and disables all interaction. */
+    locked?: boolean;
+    /** Called when the "move up" button is clicked. Button not rendered when omitted. */
+    onMoveUp?: () => void;
+    /** Called when the "move down" button is clicked. Button not rendered when omitted. */
+    onMoveDown?: () => void;
+    /** When false, disables the move-up button without hiding it. Default: true. */
+    canMoveUp?: boolean;
+    /** When false, disables the move-down button without hiding it. Default: true. */
+    canMoveDown?: boolean;
+    /** Override internal button labels for i18n. */
+    labels?: MoveHandleLabels;
+    /** Props to spread on the drag handle button (e.g., from dnd-kit useSortable). */
+    dragHandleProps?: HTMLAttributes<HTMLButtonElement>;
+    /** Accessible label for the control group. Required if aria-labelledby is not set. */
+    'aria-label'?: string;
+    /** ID of element labelling this group. Required if aria-label is not set. */
+    'aria-labelledby'?: string;
+    className?: string;
+}

package/components/MoveHandle/types.js

@@ -0,0 +1 @@
+export {};

package/components/index.d.ts

@@ -18,6 +18,7 @@ export { Select, SelectTrigger, SelectContent, SelectOption, SelectGroup, Select
 export { Icon } from './Icon';
 export { IconButton } from './IconButton';
 export { Modal } from './Modal';
+export { MoveHandle } from './MoveHandle';
 export { Notice } from './Notice';
 export { OverlapStack } from './OverlapStack';
 export { Pager } from './Pager';
@@ -53,6 +54,7 @@ export type { SelectProps, SelectTriggerProps, SelectContentProps, SelectOptionP
 export type { IconProps } from './Icon';
 export type { IconButtonProps } from './IconButton';
 export type { ModalProps } from './Modal';
+export type { MoveHandleLabels, MoveHandleMode, MoveHandleProps, MoveHandleSize } from './MoveHandle';
 export type { NoticeProps } from './Notice';
 export type { OverlapStackProps, OverlapStackOverflowProps } from './OverlapStack';
 export type { PagerProps, PagerMode } from './Pager';

package/components/index.js

@@ -16,6 +16,7 @@ export { Select, SelectTrigger, SelectContent, SelectOption, SelectGroup, Select
 export { Icon } from './Icon/index.js';
 export { IconButton } from './IconButton/index.js';
 export { Modal } from './Modal/index.js';
+export { MoveHandle } from './MoveHandle/index.js';
 export { Notice } from './Notice/index.js';
 export { OverlapStack } from './OverlapStack/index.js';
 export { Pager } from './Pager/index.js';

package/icons/icons.svg

@@ -109,6 +109,7 @@
 <symbol id="tui-system-cog" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.29 4.836A1 1 0 0 1 11.275 4h1.306a1 1 0 0 1 .986.836l.244 1.466c.788.26 1.503.679 2.108 1.218l1.393-.522a1 1 0 0 1 1.217.437l.653 1.13a1 1 0 0 1-.23 1.273l-1.148.944a6 6 0 0 1 0 2.435l1.148.946a1 1 0 0 1 .23 1.272l-.652 1.13a1 1 0 0 1-1.217.437l-1.394-.522c-.605.54-1.32.958-2.108 1.218l-.244 1.466a1 1 0 0 1-.986.836h-1.306a1 1 0 0 1-.987-.836l-.244-1.466a6 6 0 0 1-2.108-1.218l-1.394.522a1 1 0 0 1-1.217-.436l-.652-1.131a1 1 0 0 1 .23-1.272l1.148-.946a6 6 0 0 1 0-2.435l-1.147-.944a1 1 0 0 1-.23-1.272l.652-1.131a1 1 0 0 1 1.217-.437l1.393.522a6 6 0 0 1 2.108-1.218zM14.928 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0" clip-rule="evenodd"/></symbol>
 <symbol id="tui-system-copy" viewBox="0 0 24 24"><path d="M17 10.25h-7v1.5h7zm-7 2.5h7v1.5h-7zm7 2.5h-7v1.5h7z"/><path fill-rule="evenodd" d="M17 6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-1zm1 2.5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5H9a.5.5 0 0 1-.5-.5V9a.5.5 0 0 1 .5-.5zm-12 7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v1H9a2 2 0 0 0-2 2v6.5z" clip-rule="evenodd"/></symbol>
 <symbol id="tui-system-download" viewBox="0 0 24 24"><path d="M5.5 9a.5.5 0 0 1 .5-.5h3V7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.75A1.75 1.75 0 0 0 18.25 7H15v1.5h3.25a.25.25 0 0 1 .25.25V18a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5z"/><path d="M12 17.004 7.002 12.56l.996-1.122 3.252 2.89V4h1.5v10.33l3.252-2.89.996 1.12z"/></symbol>
+<symbol id="tui-system-drag" viewBox="0 0 24 24"><path d="M10 4.99976H8V6.99976H10V4.99976Z"/><path d="M10 10.9998H8V12.9998H10V10.9998Z"/><path d="M8 16.9998H10V18.9998H8V16.9998Z"/><path d="M16 4.99976H14V6.99976H16V4.99976Z"/><path d="M14 10.9998H16V12.9998H14V10.9998Z"/><path d="M16 16.9998H14V18.9998H16V16.9998Z"/></symbol>
 <symbol id="tui-system-duplicate" viewBox="0 0 24 24"><path d="M14.25 12.75H17v1.5h-2.75V17h-1.5v-2.75H10v-1.5h2.75V10h1.5z"/><path fill-rule="evenodd" d="M17 7h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-1H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2zm-2-1.5H6a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h1V9a2 2 0 0 1 2-2h6.5V6a.5.5 0 0 0-.5-.5m-6 3h9a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5H9a.5.5 0 0 1-.5-.5V9a.5.5 0 0 1 .5-.5" clip-rule="evenodd"/></symbol>
 <symbol id="tui-system-edit" viewBox="0 0 24 24"><path d="M19.864 4.304a2 2 0 0 0-2.733.732l-.635 1.1 3.464 2 .636-1.1a2 2 0 0 0-.732-2.732m-.746 5.292-3.464-2-4.903 8.49.062 3.893 3.402-1.892zM4 5.25h9v1.5H4zm7 4H4v1.5h7zm-7 4h5v1.5H4zm5 4H4v1.5h5z"/></symbol>
 <symbol id="tui-system-ellipsis-h" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M5 11h2v2H5zm6 0h2v2h-2zm6 0h2v2h-2z" clip-rule="evenodd"/></symbol>

package/icons/manifest.json

@@ -879,6 +879,14 @@
     "viewBox": "0 0 24 24",
     "sprite": true
   },
+  "system/drag": {
+    "id": "tui-system-drag",
+    "set": "system",
+    "name": "drag",
+    "file": "system/drag.svg",
+    "viewBox": "0 0 24 24",
+    "sprite": true
+  },
   "system/duplicate": {
     "id": "tui-system-duplicate",
     "set": "system",

package/icons/registry.d.ts

@@ -113,6 +113,7 @@ export type IconName =
   | 'system/cog'
   | 'system/copy'
   | 'system/download'
+  | 'system/drag'
   | 'system/duplicate'
   | 'system/edit'
   | 'system/ellipsis-h'
@@ -269,6 +270,7 @@ export declare const iconRegistry: {
   'system/cog': IconComponent;
   'system/copy': IconComponent;
   'system/download': IconComponent;
+  'system/drag': IconComponent;
   'system/duplicate': IconComponent;
   'system/edit': IconComponent;
   'system/ellipsis-h': IconComponent;

package/icons/registry.js

@@ -115,6 +115,7 @@ export const iconRegistry = {
   'system/cog': systemIcons['cog'],
   'system/copy': systemIcons['copy'],
   'system/download': systemIcons['download'],
+  'system/drag': systemIcons['drag'],
   'system/duplicate': systemIcons['duplicate'],
   'system/edit': systemIcons['edit'],
   'system/ellipsis-h': systemIcons['ellipsis-h'],

package/icons/system/index.d.ts

@@ -33,6 +33,7 @@ export declare const Close: IconComponent;
 export declare const Cog: IconComponent;
 export declare const Copy: IconComponent;
 export declare const Download: IconComponent;
+export declare const Drag: IconComponent;
 export declare const Duplicate: IconComponent;
 export declare const Edit: IconComponent;
 export declare const EllipsisH: IconComponent;
@@ -110,6 +111,7 @@ export declare const systemIcons: {
   'cog': IconComponent;
   'copy': IconComponent;
   'download': IconComponent;
+  'drag': IconComponent;
   'duplicate': IconComponent;
   'edit': IconComponent;
   'ellipsis-h': IconComponent;

package/icons/system/index.js

@@ -310,6 +310,16 @@ export function Download(props) {
   }, props), [_c("path", {d:"M5.5 9a.5.5 0 0 1 .5-.5h3V7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8.75A1.75 1.75 0 0 0 18.25 7H15v1.5h3.25a.25.25 0 0 1 .25.25V18a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5z"}), _c("path", {d:"M12 17.004 7.002 12.56l.996-1.122 3.252 2.89V4h1.5v10.33l3.252-2.89.996 1.12z"})]);
 }
 
+export function Drag(props) {
+  return _c("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor"
+  }, props), [_c("path", {d:"M10 4.99976H8V6.99976H10V4.99976Z"}), _c("path", {d:"M10 10.9998H8V12.9998H10V10.9998Z"}), _c("path", {d:"M8 16.9998H10V18.9998H8V16.9998Z"}), _c("path", {d:"M16 4.99976H14V6.99976H16V4.99976Z"}), _c("path", {d:"M14 10.9998H16V12.9998H14V10.9998Z"}), _c("path", {d:"M16 16.9998H14V18.9998H16V16.9998Z"})]);
+}
+
 export function Duplicate(props) {
   return _c("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -782,6 +792,7 @@ export const systemIcons = {
   'cog': Cog,
   'copy': Copy,
   'download': Download,
+  'drag': Drag,
   'duplicate': Duplicate,
   'edit': Edit,
   'ellipsis-h': EllipsisH,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangible/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Tangible Design System",
   "type": "module",
   "main": "./components/index.js",