@iris-ui-kit/react 0.1.0

package/dist/behaviors.d.cts

@@ -0,0 +1,188 @@
+import * as React from 'react';
+
+type IrisResizableHandle = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface IrisResizableSize {
+    width: number;
+    height: number;
+}
+interface IrisResizableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Controlled size. */
+    size?: IrisResizableSize;
+    defaultSize?: IrisResizableSize;
+    onSizeChange?: (next: IrisResizableSize) => void;
+    onResizeStart?: (start: IrisResizableSize) => void;
+    onResizeEnd?: (end: IrisResizableSize) => void;
+    handles?: IrisResizableHandle[];
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    keepAspect?: boolean;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Behavior wrapper: makes its child resizable via 8-direction handles. The
+ * wrapper itself is `display: inline-block; position: relative` so the child
+ * can be ANY element (no need for the child to know it's wrapped). Handles
+ * are absolutely positioned over the wrapper's edges.
+ *
+ * Composable: stack with `IrisMovable` / `IrisHotkey` / `IrisClickOutside`
+ * for richer interactions on the same wrapped UI.
+ *
+ * @example
+ *   <IrisResizable defaultSize={{ width: 400, height: 300 }}>
+ *     <IrisList items={items} />
+ *   </IrisResizable>
+ */
+declare function IrisResizable({ size: sizeProp, defaultSize, onSizeChange, onResizeStart, onResizeEnd, handles, minWidth, minHeight, maxWidth, maxHeight, keepAspect, disabled, style, children, ...rest }: IrisResizableProps): React.ReactElement;
+
+interface IrisMovablePosition {
+    x: number;
+    y: number;
+}
+interface IrisMovableBounds {
+    minX?: number;
+    maxX?: number;
+    minY?: number;
+    maxY?: number;
+}
+interface IrisMovableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'onDragStart' | 'onDragEnd'> {
+    position?: IrisMovablePosition;
+    defaultPosition?: IrisMovablePosition;
+    onPositionChange?: (next: IrisMovablePosition) => void;
+    onDragStart?: (start: IrisMovablePosition) => void;
+    onDragEnd?: (end: IrisMovablePosition) => void;
+    bounds?: IrisMovableBounds;
+    /** Restrict drag origination to a child element marked `data-iris-movable-handle`. */
+    byHandle?: boolean;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Behavior wrapper: makes its child draggable. Position is `transform`-based
+ * (no layout thrash). The whole wrapper drags by default; pass `byHandle`
+ * and put `data-iris-movable-handle=""` on a descendant (e.g. a title bar)
+ * to restrict the drag origin.
+ *
+ * The wrapper renders `position: absolute` at its parent's top-left — wrap
+ * inside a `position: relative` container for predictable layout.
+ *
+ * @example
+ *   <div style={{ position: 'relative', height: 500 }}>
+ *     <IrisMovable defaultPosition={{ x: 20, y: 20 }} byHandle>
+ *       <div>
+ *         <div data-iris-movable-handle>Drag me by this title bar</div>
+ *         <IrisList items={items} />
+ *       </div>
+ *     </IrisMovable>
+ *   </div>
+ */
+declare function IrisMovable({ position: positionProp, defaultPosition, onPositionChange, onDragStart, onDragEnd, bounds, byHandle, disabled, style, children, ...rest }: IrisMovableProps): React.ReactElement;
+
+interface IrisHotkeyProps {
+    /**
+     * Shortcut or list of shortcuts. Format: `'Escape'`, `'Enter'`, `'Mod+s'`,
+     * `'Shift+/'`. `Mod` matches Ctrl on Win/Linux and Cmd on macOS.
+     */
+    shortcut: string | string[];
+    onTrigger: (event: KeyboardEvent) => void;
+    /** Disable the binding (no-op if true). */
+    disabled?: boolean;
+    /**
+     * Allow the hotkey to fire even when focus is inside an input / textarea /
+     * contentEditable element. Default false (most apps want hotkeys to skip
+     * while typing).
+     */
+    allowInInputs?: boolean;
+    /** Scope: 'document' (default) or 'window'. */
+    scope?: 'document' | 'window';
+    children?: React.ReactNode;
+}
+/**
+ * Behavior wrapper: binds a global keyboard shortcut while children are
+ * mounted. Renderless — returns children verbatim (no extra DOM).
+ *
+ * @example
+ *   <IrisHotkey shortcut="Escape" onTrigger={close}>
+ *     <IrisDialog>…</IrisDialog>
+ *   </IrisHotkey>
+ *
+ *   <IrisHotkey shortcut={['Mod+s', 'Mod+Shift+s']} onTrigger={save}>
+ *     <IrisForm>…</IrisForm>
+ *   </IrisHotkey>
+ */
+declare function IrisHotkey({ shortcut, onTrigger, disabled, allowInInputs, scope, children, }: IrisHotkeyProps): React.ReactElement;
+
+interface IrisClickOutsideProps {
+    onOutside: (event: PointerEvent) => void;
+    /** Disable detection (no-op if true). */
+    disabled?: boolean;
+    /**
+     * Additional refs whose elements are also treated as "inside" (clicks
+     * against them won't fire `onOutside`). Useful for trigger buttons that
+     * live outside the wrapper but should still keep it open.
+     */
+    ignore?: Array<React.RefObject<HTMLElement | null>>;
+    children?: React.ReactNode;
+}
+/**
+ * Behavior wrapper: fires `onOutside` when a pointerdown happens outside
+ * the wrapped child tree. Renders a thin `<span style="display:contents">`
+ * to capture the child's bounding box without disrupting layout.
+ *
+ * @example
+ *   <IrisClickOutside onOutside={() => setOpen(false)}>
+ *     <IrisPopoverContent>…</IrisPopoverContent>
+ *   </IrisClickOutside>
+ */
+declare function IrisClickOutside({ onOutside, disabled, ignore, children, }: IrisClickOutsideProps): React.ReactElement;
+
+/**
+ * Behavior wrapper: makes a list of items sortable via drag-and-drop.
+ * Uses `createSortable` from `@iris-ui-kit/core` for the drag-and-drop controller.
+ *
+ * @example
+ *   const [items, setItems] = React.useState(['A', 'B', 'C'])
+ *   <IrisSortable items={items} onReorder={setItems}>
+ *     {items.map((label) => <div key={label}>{label}</div>)}
+ *   </IrisSortable>
+ */
+
+interface IrisSortableProps<T = string> {
+    items: readonly T[];
+    onReorder: (next: T[]) => void;
+    getKey?: (item: T, index: number) => string;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+}
+declare const SORTABLE_ITEM_ATTR = "data-iris-sortable-item";
+declare function IrisSortable<T>({ items, onReorder, getKey, disabled, style, className, children, ...rest }: IrisSortableProps<T> & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>): React.ReactElement;
+
+/**
+ * Behavior wrapper: detects a press-and-hold gesture on the wrapped element.
+ * Fires `onLongPress` when the pointer is held down for `holdDelay` ms.
+ * Wraps children in a `display: contents` span so event bubbling works.
+ *
+ * Composable: stack with `IrisMovable` / `IrisResizable` / `IrisSortable` /
+ * `IrisHotkey` for richer interactions.
+ *
+ * @example
+ *   <IrisLongPress holdDelay={500} onLongPress={() => setOpen(true)}>
+ *     <img src="thumbnail.jpg" alt="Hold to preview" />
+ *   </IrisLongPress>
+ */
+
+interface IrisLongPressProps {
+    /** Time in ms the pointer must be held before `onLongPress` fires. */
+    holdDelay?: number;
+    /** Called once when the hold reaches `holdDelay`. */
+    onLongPress: () => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+declare function IrisLongPress({ holdDelay, onLongPress, disabled, children, }: IrisLongPressProps): React.ReactElement;
+
+export { IrisClickOutside, type IrisClickOutsideProps, IrisHotkey, type IrisHotkeyProps, IrisLongPress, type IrisLongPressProps, IrisMovable, type IrisMovableBounds, type IrisMovablePosition, type IrisMovableProps, IrisResizable, type IrisResizableHandle, type IrisResizableProps, type IrisResizableSize, IrisSortable, type IrisSortableProps, SORTABLE_ITEM_ATTR };

package/dist/behaviors.d.ts

@@ -0,0 +1,188 @@
+import * as React from 'react';
+
+type IrisResizableHandle = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface IrisResizableSize {
+    width: number;
+    height: number;
+}
+interface IrisResizableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Controlled size. */
+    size?: IrisResizableSize;
+    defaultSize?: IrisResizableSize;
+    onSizeChange?: (next: IrisResizableSize) => void;
+    onResizeStart?: (start: IrisResizableSize) => void;
+    onResizeEnd?: (end: IrisResizableSize) => void;
+    handles?: IrisResizableHandle[];
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    keepAspect?: boolean;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Behavior wrapper: makes its child resizable via 8-direction handles. The
+ * wrapper itself is `display: inline-block; position: relative` so the child
+ * can be ANY element (no need for the child to know it's wrapped). Handles
+ * are absolutely positioned over the wrapper's edges.
+ *
+ * Composable: stack with `IrisMovable` / `IrisHotkey` / `IrisClickOutside`
+ * for richer interactions on the same wrapped UI.
+ *
+ * @example
+ *   <IrisResizable defaultSize={{ width: 400, height: 300 }}>
+ *     <IrisList items={items} />
+ *   </IrisResizable>
+ */
+declare function IrisResizable({ size: sizeProp, defaultSize, onSizeChange, onResizeStart, onResizeEnd, handles, minWidth, minHeight, maxWidth, maxHeight, keepAspect, disabled, style, children, ...rest }: IrisResizableProps): React.ReactElement;
+
+interface IrisMovablePosition {
+    x: number;
+    y: number;
+}
+interface IrisMovableBounds {
+    minX?: number;
+    maxX?: number;
+    minY?: number;
+    maxY?: number;
+}
+interface IrisMovableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'onDragStart' | 'onDragEnd'> {
+    position?: IrisMovablePosition;
+    defaultPosition?: IrisMovablePosition;
+    onPositionChange?: (next: IrisMovablePosition) => void;
+    onDragStart?: (start: IrisMovablePosition) => void;
+    onDragEnd?: (end: IrisMovablePosition) => void;
+    bounds?: IrisMovableBounds;
+    /** Restrict drag origination to a child element marked `data-iris-movable-handle`. */
+    byHandle?: boolean;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Behavior wrapper: makes its child draggable. Position is `transform`-based
+ * (no layout thrash). The whole wrapper drags by default; pass `byHandle`
+ * and put `data-iris-movable-handle=""` on a descendant (e.g. a title bar)
+ * to restrict the drag origin.
+ *
+ * The wrapper renders `position: absolute` at its parent's top-left — wrap
+ * inside a `position: relative` container for predictable layout.
+ *
+ * @example
+ *   <div style={{ position: 'relative', height: 500 }}>
+ *     <IrisMovable defaultPosition={{ x: 20, y: 20 }} byHandle>
+ *       <div>
+ *         <div data-iris-movable-handle>Drag me by this title bar</div>
+ *         <IrisList items={items} />
+ *       </div>
+ *     </IrisMovable>
+ *   </div>
+ */
+declare function IrisMovable({ position: positionProp, defaultPosition, onPositionChange, onDragStart, onDragEnd, bounds, byHandle, disabled, style, children, ...rest }: IrisMovableProps): React.ReactElement;
+
+interface IrisHotkeyProps {
+    /**
+     * Shortcut or list of shortcuts. Format: `'Escape'`, `'Enter'`, `'Mod+s'`,
+     * `'Shift+/'`. `Mod` matches Ctrl on Win/Linux and Cmd on macOS.
+     */
+    shortcut: string | string[];
+    onTrigger: (event: KeyboardEvent) => void;
+    /** Disable the binding (no-op if true). */
+    disabled?: boolean;
+    /**
+     * Allow the hotkey to fire even when focus is inside an input / textarea /
+     * contentEditable element. Default false (most apps want hotkeys to skip
+     * while typing).
+     */
+    allowInInputs?: boolean;
+    /** Scope: 'document' (default) or 'window'. */
+    scope?: 'document' | 'window';
+    children?: React.ReactNode;
+}
+/**
+ * Behavior wrapper: binds a global keyboard shortcut while children are
+ * mounted. Renderless — returns children verbatim (no extra DOM).
+ *
+ * @example
+ *   <IrisHotkey shortcut="Escape" onTrigger={close}>
+ *     <IrisDialog>…</IrisDialog>
+ *   </IrisHotkey>
+ *
+ *   <IrisHotkey shortcut={['Mod+s', 'Mod+Shift+s']} onTrigger={save}>
+ *     <IrisForm>…</IrisForm>
+ *   </IrisHotkey>
+ */
+declare function IrisHotkey({ shortcut, onTrigger, disabled, allowInInputs, scope, children, }: IrisHotkeyProps): React.ReactElement;
+
+interface IrisClickOutsideProps {
+    onOutside: (event: PointerEvent) => void;
+    /** Disable detection (no-op if true). */
+    disabled?: boolean;
+    /**
+     * Additional refs whose elements are also treated as "inside" (clicks
+     * against them won't fire `onOutside`). Useful for trigger buttons that
+     * live outside the wrapper but should still keep it open.
+     */
+    ignore?: Array<React.RefObject<HTMLElement | null>>;
+    children?: React.ReactNode;
+}
+/**
+ * Behavior wrapper: fires `onOutside` when a pointerdown happens outside
+ * the wrapped child tree. Renders a thin `<span style="display:contents">`
+ * to capture the child's bounding box without disrupting layout.
+ *
+ * @example
+ *   <IrisClickOutside onOutside={() => setOpen(false)}>
+ *     <IrisPopoverContent>…</IrisPopoverContent>
+ *   </IrisClickOutside>
+ */
+declare function IrisClickOutside({ onOutside, disabled, ignore, children, }: IrisClickOutsideProps): React.ReactElement;
+
+/**
+ * Behavior wrapper: makes a list of items sortable via drag-and-drop.
+ * Uses `createSortable` from `@iris-ui-kit/core` for the drag-and-drop controller.
+ *
+ * @example
+ *   const [items, setItems] = React.useState(['A', 'B', 'C'])
+ *   <IrisSortable items={items} onReorder={setItems}>
+ *     {items.map((label) => <div key={label}>{label}</div>)}
+ *   </IrisSortable>
+ */
+
+interface IrisSortableProps<T = string> {
+    items: readonly T[];
+    onReorder: (next: T[]) => void;
+    getKey?: (item: T, index: number) => string;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+}
+declare const SORTABLE_ITEM_ATTR = "data-iris-sortable-item";
+declare function IrisSortable<T>({ items, onReorder, getKey, disabled, style, className, children, ...rest }: IrisSortableProps<T> & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>): React.ReactElement;
+
+/**
+ * Behavior wrapper: detects a press-and-hold gesture on the wrapped element.
+ * Fires `onLongPress` when the pointer is held down for `holdDelay` ms.
+ * Wraps children in a `display: contents` span so event bubbling works.
+ *
+ * Composable: stack with `IrisMovable` / `IrisResizable` / `IrisSortable` /
+ * `IrisHotkey` for richer interactions.
+ *
+ * @example
+ *   <IrisLongPress holdDelay={500} onLongPress={() => setOpen(true)}>
+ *     <img src="thumbnail.jpg" alt="Hold to preview" />
+ *   </IrisLongPress>
+ */
+
+interface IrisLongPressProps {
+    /** Time in ms the pointer must be held before `onLongPress` fires. */
+    holdDelay?: number;
+    /** Called once when the hold reaches `holdDelay`. */
+    onLongPress: () => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+declare function IrisLongPress({ holdDelay, onLongPress, disabled, children, }: IrisLongPressProps): React.ReactElement;
+
+export { IrisClickOutside, type IrisClickOutsideProps, IrisHotkey, type IrisHotkeyProps, IrisLongPress, type IrisLongPressProps, IrisMovable, type IrisMovableBounds, type IrisMovablePosition, type IrisMovableProps, IrisResizable, type IrisResizableHandle, type IrisResizableProps, type IrisResizableSize, IrisSortable, type IrisSortableProps, SORTABLE_ITEM_ATTR };

package/dist/behaviors.js

@@ -0,0 +1,4 @@
+'use client'
+export { IrisClickOutside, IrisHotkey, IrisLongPress, IrisMovable, IrisResizable, IrisSortable, SORTABLE_ITEM_ATTR } from './chunk-2TQSTINK.js';
+//# sourceMappingURL=behaviors.js.map
+//# sourceMappingURL=behaviors.js.map

package/dist/behaviors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":";","file":"behaviors.js"}