@appkit/dek-ui 0.34.0 → 0.36.0

package/dist/{stories → components/Button}/Button.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Button from '../components/Button/Button';
+import Button from './Button';
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;

package/dist/{stories → components/Card}/Card.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Card from '../components/Card/Card';
+import Card from './Card';
 declare const meta: Meta<typeof Card>;
 export default meta;
 type Story = StoryObj<typeof Card>;

package/dist/{stories → components/CardButton}/CardButton.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import CardButton from '../components/CardButton/CardButton';
+import CardButton from './CardButton';
 declare const meta: Meta<typeof CardButton>;
 export default meta;
 type Story = StoryObj<typeof CardButton>;

package/dist/{stories → components/Carousel}/Carousel.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Carousel from '../components/Carousel/Carousel';
+import Carousel from './Carousel';
 declare const meta: Meta<typeof Carousel>;
 export default meta;
 type Story = StoryObj<typeof Carousel>;

package/dist/{stories → components/ColorPicker}/ColorPicker.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ColorPicker from '../components/ColorPicker/ColorPicker';
+import ColorPicker from './ColorPicker';
 declare const meta: Meta<typeof ColorPicker>;
 export default meta;
 type Story = StoryObj<typeof ColorPicker>;

package/dist/{stories → components/Dropdown}/Dropdown.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Dropdown from '../components/Dropdown/Dropdown';
+import Dropdown from './Dropdown';
 declare const meta: Meta<typeof Dropdown>;
 export default meta;
 type Story = StoryObj<typeof Dropdown>;

package/dist/{stories → components/Header}/Header.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Header from '../components/Header/Header';
+import Header from './Header';
 declare const meta: Meta<typeof Header>;
 export default meta;
 type Story = StoryObj<typeof Header>;

package/dist/{stories → components/IconButton}/IconButton.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import IconButton from '../components/IconButton/IconButton';
+import IconButton from './IconButton';
 declare const meta: Meta<typeof IconButton>;
 export default meta;
 type Story = StoryObj<typeof IconButton>;

package/dist/{stories → components/Image}/Image.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Image from '../components/Image/Image';
+import Image from './Image';
 declare const meta: Meta<typeof Image>;
 export default meta;
 type Story = StoryObj<typeof Image>;

package/dist/components/ItemList/GridItemContext.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { StateType } from './gesture-responder';
+import { GridSettings } from './grid-types';
+export interface GridItemContextType {
+    top: number;
+    disableDrag: boolean;
+    endTraverse: () => void;
+    mountWithTraverseTarget?: [number, number];
+    left: number;
+    i: number;
+    onMove: (state: StateType, x: number, y: number) => void;
+    onEnd: (state: StateType, x: number, y: number) => void;
+    onStart: () => void;
+    grid: GridSettings;
+    dragging: boolean;
+}
+export declare const GridItemContext: React.Context<GridItemContextType | null>;

package/dist/components/ItemList/ItemList.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ListItem from './ListItem';
+declare const meta: Meta<typeof ListItem>;
+export default meta;
+type Story = StoryObj<typeof ListItem>;
+export declare const Default: Story;
+export declare const MultipleLists: Story;

package/dist/components/ItemList/ItemListContext.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { GridSettings, TraverseType } from './grid-types';
+import { Bounds } from './use-measure';
+interface RegisterOptions extends Bounds {
+    /** The number of documents in each grid */
+    count: number;
+    /** grid info (boxes per row) */
+    grid: GridSettings;
+    /** whether the dropzone is disabled for dropping */
+    disableDrop: boolean;
+    remeasure: () => void;
+}
+interface GridContextType {
+    register: (id: string, options: RegisterOptions) => void;
+    remove: (id: string) => void;
+    measureAll: () => void;
+    getActiveDropId: (sourceId: string, x: number, y: number) => string | null;
+    startTraverse: (sourceId: string, targetId: string, x: number, y: number, sourceIndex: number) => void;
+    traverse: TraverseType | null;
+    endTraverse: () => void;
+    onChange: (sourceId: string, sourceIndex: number, targetIndex: number, targetId?: string) => void;
+}
+export declare const GridContext: React.Context<GridContextType>;
+interface GridContextProviderProps {
+    children: React.ReactNode;
+    onChange: (sourceId: string, sourceIndex: number, targetIndex: number, targetId?: string) => void;
+}
+export declare function ItemListProvider({ children, onChange, }: GridContextProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ItemList/ItemListDropZone.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface ItemListZoneProps extends React.HTMLAttributes<HTMLDivElement> {
+    boxesPerRow: number;
+    rowHeight: number;
+    id: string;
+    children: React.ReactNodeArray;
+    disableDrag?: boolean;
+    disableDrop?: boolean;
+    style?: React.CSSProperties;
+}
+export declare function ItemListDropZone({ id, boxesPerRow, children, style, disableDrag, disableDrop, rowHeight, ...other }: ItemListZoneProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ItemList/ListItem.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare function ListItem({ children, style, className, ...other }: ListItemProps): any;
+export default ListItem;

package/dist/components/ItemList/gesture-responder/index.d.ts

@@ -0,0 +1,86 @@
+import * as React from 'react';
+/**
+ * The responder takes its inspiration from react-native's
+ * pan-responder. Learn more about react-native's
+ * system here:
+ *
+ * https://facebook.github.io/react-native/docs/gesture-responder-system.html
+ *
+ * Basic usage:
+ *
+ * const bind = useGestureResponder({
+ *  onStartShouldSet: () => true,
+ *  onGrant: () => highlight(),
+ *  onMove: () => updatePosition(),
+ *  onRelease: () => unhighlight(),
+ *  onTerminate: () => unhighlight()
+ * })
+ *
+ * The main benefit this provides is the ability to reconcile
+ * multiple gestures, and give priority to one.
+ *
+ * You can use a combination of useStartShouldSet, useStartShouldSetCapture,
+ * onMoveShouldSetCapture, and onMoveShouldSet to dictate
+ * which gets priority.
+ *
+ * Typically you'd want to avoid capture since it's generally
+ * preferable to have child elements gain touch access.
+ */
+export type ResponderEvent = React.TouchEvent | React.MouseEvent | Event;
+export type CallbackQueryType = (state: StateType, e: ResponderEvent) => boolean;
+export type CallbackType = (state: StateType, e: ResponderEvent) => void;
+export interface Callbacks {
+    onStartShouldSetCapture?: CallbackQueryType;
+    onStartShouldSet?: CallbackQueryType;
+    onMoveShouldSetCapture?: CallbackQueryType;
+    onMoveShouldSet?: CallbackQueryType;
+    onGrant?: CallbackType;
+    onMove?: CallbackType;
+    onRelease?: CallbackType;
+    onTerminate?: (state: StateType, e?: ResponderEvent) => void;
+    onTerminationRequest?: (state: StateType, e?: ResponderEvent) => boolean;
+}
+export interface StateType {
+    time: number;
+    xy: [number, number];
+    delta: [number, number];
+    initial: [number, number];
+    previous: [number, number];
+    direction: [number, number];
+    initialDirection: [number, number];
+    local: [number, number];
+    lastLocal: [number, number];
+    velocity: number;
+    distance: number;
+}
+interface Config {
+    uid?: string;
+    enableMouse?: boolean;
+}
+export interface GrantedTouch {
+    id: string | number;
+    onTerminationRequest: (e?: ResponderEvent) => boolean;
+    onTerminate: (e?: ResponderEvent) => void;
+}
+export declare function useGestureResponder(options?: Callbacks, config?: Config): {
+    bind: {
+        onMouseDown: (e: React.MouseEvent) => void;
+        onMouseDownCapture: (e: React.MouseEvent) => void;
+        onTouchStart: (e: ResponderEvent) => void;
+        onTouchEnd: (e: ResponderEvent) => void;
+        onTouchMove: (e: ResponderEvent) => void;
+        onTouchStartCapture: (e: ResponderEvent) => void;
+        onTouchMoveCapture: (e: ResponderEvent) => void;
+    } | {
+        onMouseDown?: undefined;
+        onMouseDownCapture?: undefined;
+        onTouchStart: (e: ResponderEvent) => void;
+        onTouchEnd: (e: ResponderEvent) => void;
+        onTouchMove: (e: ResponderEvent) => void;
+        onTouchStartCapture: (e: ResponderEvent) => void;
+        onTouchMoveCapture: (e: ResponderEvent) => void;
+    };
+    terminateCurrentResponder: () => void;
+    getCurrentResponder: () => GrantedTouch | null;
+};
+export {};

package/dist/components/ItemList/gesture-responder/mouse-enabled.d.ts

@@ -0,0 +1 @@
+export declare function isMouseEnabled(): boolean;

package/dist/components/ItemList/grid-types.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export interface GridSettings {
+    boxesPerRow: number;
+    rowHeight: number;
+    columnWidth: number;
+}
+export type ChildRender = (component: any, props: any, state: {
+    dragging: boolean;
+    disabled: boolean;
+    i: number;
+    grid: GridSettings;
+}) => React.ReactNode;
+/**
+ * A traverse captures information about dragging a grid item
+ * from one list to another.
+ */
+export interface TraverseType {
+    sourceId: string;
+    targetId: string;
+    rx: number;
+    ry: number;
+    tx: number;
+    ty: number;
+    sourceIndex: number;
+    targetIndex: number;
+    execute?: boolean;
+}

package/dist/components/ItemList/helpers.d.ts

@@ -0,0 +1,39 @@
+import { GridSettings } from "./grid-types";
+/**
+ * Get the active drag position given its initial
+ * coordinates and grid meta
+ * @param index
+ * @param grid
+ * @param dx
+ * @param dy
+ */
+export declare function getDragPosition(index: number, grid: GridSettings, dx: number, dy: number, center?: boolean): {
+    xy: number[];
+};
+/**
+ * Get the relative top, left position for a particular
+ * index in a grid
+ * @param i
+ * @param grid
+ * @param traverseIndex (destination for traverse)
+ */
+export declare function getPositionForIndex(i: number, { boxesPerRow, rowHeight, columnWidth }: GridSettings, traverseIndex?: number | false | null): {
+    xy: number[];
+};
+/**
+ * Given relative coordinates, determine which index
+ * we are currently in
+ * @param x
+ * @param y
+ * @param param2
+ */
+export declare function getIndexFromCoordinates(x: number, y: number, { rowHeight, boxesPerRow, columnWidth }: GridSettings, count: number): number;
+/**
+ * Get the target index during a drag
+ * @param startIndex
+ * @param grid
+ * @param count
+ * @param dx
+ * @param dy
+ */
+export declare function getTargetIndex(startIndex: number, grid: GridSettings, count: number, dx: number, dy: number): number;

package/dist/components/ItemList/index.d.ts

@@ -0,0 +1,5 @@
+export * from './ItemListContext';
+export * from './ItemListDropZone';
+export * from './ListItem';
+export * from './move';
+export * from './swap';

package/dist/components/ItemList/move.d.ts

@@ -0,0 +1 @@
+export declare function move<T>(source: Array<T>, destination: Array<T>, droppableSource: number, droppableDestination: number): T[][];

package/dist/components/ItemList/swap.d.ts

@@ -0,0 +1 @@
+export declare function swap<T>(array: Array<T>, moveIndex: number, toIndex: number): T[];

package/dist/components/ItemList/use-measure.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface Bounds {
+    left: number;
+    height: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+}
+export declare function useMeasure(ref: React.RefObject<HTMLDivElement | null>): {
+    bounds: Bounds;
+    remeasure: () => void;
+};

package/dist/{stories → components/MenuBar}/MenuBar.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import MenuBar from '../components/MenuBar/MenuBar';
+import MenuBar from './MenuBar';
 declare const meta: Meta<typeof MenuBar>;
 export default meta;
 type Story = StoryObj<typeof MenuBar>;

package/dist/{stories → components/PillButton}/PillButton.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import PillButton from '../components/PillButton/PillButton';
+import PillButton from './PillButton';
 declare const meta: Meta<typeof PillButton>;
 export default meta;
 type Story = StoryObj<typeof PillButton>;

package/dist/{stories → components/ProgressBar}/ProgressBar.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import ProgressBar from '../components/ProgressBar/ProgressBar';
+import ProgressBar from './ProgressBar';
 declare const meta: Meta<typeof ProgressBar>;
 export default meta;
 type Story = StoryObj<typeof ProgressBar>;

package/dist/{stories → components/Slider}/Slider.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Slider from '../components/Slider/Slider';
+import Slider from './Slider';
 declare const meta: Meta<typeof Slider>;
 export default meta;
 type Story = StoryObj<typeof Slider>;

package/dist/{stories → components/Stack}/Stack.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Stack from '../components/Stack/Stack';
+import Stack from './Stack';
 declare const meta: Meta<typeof Stack>;
 export default meta;
 type Story = StoryObj<typeof Stack>;

package/dist/{stories → components/Text}/Text.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Text from '../components/Text/Text';
+import Text from './Text';
 declare const meta: Meta<typeof Text>;
 export default meta;
 type Story = StoryObj<typeof Text>;

package/dist/{stories → components/Tile}/Tile.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import Tile from '../components/Tile/Tile';
+import Tile from './Tile';
 declare const meta: Meta<typeof Tile>;
 export default meta;
 type Story = StoryObj<typeof Tile>;

package/dist/{stories → components/TileChart}/TileChart.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import TileChart from '../components/TileChart/TileChart';
+import TileChart from './TileChart';
 declare const meta: Meta<typeof TileChart>;
 export default meta;
 type Story = StoryObj<typeof TileChart>;

package/dist/{stories → components/TitleBar}/TitleBar.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import TitleBar from '../components/TitleBar/TitleBar';
+import TitleBar from './TitleBar';
 declare const meta: Meta<typeof TitleBar>;
 export default meta;
 type Story = StoryObj<typeof TitleBar>;

package/dist/{stories → components/View}/View.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import View from '../components/View/View';
+import View from './View';
 declare const meta: Meta<typeof View>;
 export default meta;
 type Story = StoryObj<typeof View>;

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export { default as HeadingText } from './components/HeadingText/HeadingText';
 export { default as Icon } from './components/Icon/Icon';
 export { default as IconButton } from './components/IconButton/IconButton';
 export { default as Image } from './components/Image/Image';
+export { ItemListDropZone, ItemListProvider, ListItem, move, swap, } from './components/ItemList';
 export { default as LoadingDots } from './components/LoadingDots/LoadingDots';
 export { default as MenuBar } from './components/MenuBar/MenuBar';
 export { default as MenuBarItem } from './components/MenuBar/MenuBarItem';