@synnaxlabs/pluto 0.12.0

package/dist/haul/Haul.d.ts

@@ -0,0 +1,60 @@
+import { type DragEvent, type DragEventHandler, type MutableRefObject, type PropsWithChildren } from "react";
+import { type Key, type Optional } from "@synnaxlabs/x";
+import { type state } from '../state';
+export interface Item {
+    key: Key;
+    type: string;
+    data?: unknown;
+}
+export interface DraggingState {
+    source: Item;
+    items: Item[];
+}
+export declare const ZERO_DRAGGING_STATE: DraggingState;
+export interface ContextValue {
+    state: DraggingState;
+    start: (source: Item, items: Item[], onSuccessfulDrop?: (props: OnSuccessfulDropProps) => void) => void;
+    end: () => void;
+    drop: (target: Item, dropped: Item[]) => void;
+}
+export interface ProviderProps extends PropsWithChildren {
+    useState?: state.PureUse<DraggingState>;
+}
+export declare const useContext: () => ContextValue | null;
+export declare const Provider: ({ children, useState, }: ProviderProps) => JSX.Element;
+export declare const useDraggingRef: () => MutableRefObject<DraggingState>;
+export declare const useDraggingState: () => DraggingState;
+export interface OnSuccessfulDropProps {
+    target: Item;
+    hauled: Item[];
+    dropped: Item[];
+}
+export interface UseDragProps extends Optional<Item, "key"> {
+}
+export interface UseDragReturn {
+    startDrag: (items: Item[], onSuccessfulDrop?: (props: OnSuccessfulDropProps) => void) => void;
+    onDragEnd: () => void;
+}
+export declare const useDrag: ({ type, key }: UseDragProps) => UseDragReturn;
+export type CanDrop = (state: DraggingState) => boolean;
+export interface OnDropProps extends DraggingState {
+    event: DragEvent;
+}
+export type OnDragOverProps = OnDropProps;
+export interface UseDropProps extends Optional<Item, "key"> {
+    canDrop: CanDrop;
+    onDrop: (props: OnDropProps) => Item[];
+    onDragOver?: (props: OnDragOverProps) => void;
+}
+export interface UseDropReturn {
+    onDragOver: DragEventHandler;
+    onDrop: DragEventHandler;
+}
+export declare const useDrop: ({ type, key, canDrop, onDrop, onDragOver, }: UseDropProps) => UseDropReturn;
+export interface UseDragAndDropProps extends Omit<UseDragProps, "source">, Omit<UseDropProps, "target">, Optional<Item, "key"> {
+}
+export interface UseDragAndDropReturn extends UseDragReturn, UseDropReturn {
+}
+export declare const useDragAndDrop: ({ type, key, ...props }: UseDragAndDropProps) => UseDragAndDropReturn;
+export declare const canDropOfType: (type: string) => CanDrop;
+export declare const filterByType: (type: string, entities: Item[]) => Item[];

package/dist/haul/index.d.ts

@@ -0,0 +1 @@
+export * as Haul from '../haul/Haul';

package/dist/header/Actions.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement } from "react";
+import { Button } from '../button';
+export type ActionSpec = Button.IconProps | ReactElement;
+export interface ActionsProps {
+    children?: ActionSpec | ActionSpec[];
+}
+/**
+ * Custom actions to render on the right side of the header.
+ *
+ * @param children - The actions to render. If the action is of type
+ * {@link ButtonIconProps}, a correectly sized {@link ButtonIconOnly} is rendered
+ * using the given props. If the action is a JSX element, it is renderered directly.
+ * It's a good idea to prefer the latter in almost all cases for simplicity.
+ */
+export declare const Actions: ({ children }: ActionsProps) => ReactElement;

package/dist/header/ButtonTitle.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from "react";
+import { Button } from '../button';
+export interface ButtonTitleProps extends Omit<Button.ButtonProps, "variant" | "size"> {
+}
+/**
+ * Header.Title.Use renders a clickable header title.
+ *
+ * @param props - The comonent props. The props for this component are identical
+ * to {@link Button}, except the variant is always 'outlined' and that the component size
+ * is automatically inferred from the 'level' prop passsed to the parent {@link Header}
+ * component.
+ */
+export declare const ButtonTitle: ({ children, className, onClick, ...props }: ButtonTitleProps) => ReactElement;

package/dist/header/Header.d.ts

@@ -0,0 +1,28 @@
+import { type ReactElement, type ReactNode } from "react";
+import { Align } from '../align';
+import { type Text } from '../text';
+export interface HeaderProps extends Omit<Align.SpaceProps, "children" | "el"> {
+    level?: Text.Level;
+    divided?: boolean;
+    children: ReactNode | [ReactNode, ReactNode];
+}
+export interface ContextValue {
+    divided: boolean;
+    level: Text.Level;
+}
+export declare const useContext: () => ContextValue;
+/**
+ * The container for a module header.
+ *
+ * @param props - The component props. All unused props will be passed down to the
+ * {@link Space} containing the header.
+ * @param props.level - The font level for the header. See the {@link Typography.Text}
+ * component for all possible levels. Default is "h1."
+ * @param props.icon - An optional icon to add add before the start of the header text.
+ * @param props.actions - A list of actions to be rendered on the right side ofthe header.
+ * If the action is a JSX element, it will be rendered directly, and if its of type
+ * ButtonIconProps, a ButtonIconOnly will be rendered using the given props.
+ * @param props.divided - If true, creates a divider between the start icon, header text,
+ * and each action. Default is false.
+ */
+export declare const Header: ({ children, className, level, divided, ...props }: HeaderProps) => ReactElement;

package/dist/header/Header.spec.d.ts

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

package/dist/header/Header.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from "@storybook/react";
+import { Header } from '../header';
+declare const story: Meta<typeof Header.Header>;
+export declare const Default: ({ children, className, level, divided, ...props }: Header.HeaderProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default story;

package/dist/header/Title.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from "react";
+import { type Optional } from "@synnaxlabs/x";
+import { Text } from '../text';
+export interface TitleProps extends Optional<Omit<Text.WithIconProps, "divided">, "level"> {
+}
+/**
+ * Renders the title for the header component.
+ *
+ * @param props - The component props. The props for this component are identical
+ * to the {@link Typography.TextWithIcon} component, except that the 'level', and
+ * 'divider' props are inherited from the parent {@link Header} component.
+ */
+export declare const Title: ({ className, level: propsLevel, ...props }: TitleProps) => ReactElement;

package/dist/header/external.d.ts

@@ -0,0 +1,4 @@
+export * from '../header/Actions';
+export * from '../header/ButtonTitle';
+export * from '../header/Header';
+export * from '../header/Title';

package/dist/header/index.d.ts

@@ -0,0 +1 @@
+export * as Header from '../header/external';

package/dist/header.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const external = require("./external-9Ncn2J9B.cjs");
+require("./jsx-runtime-N1ikfypN.cjs");
+require("react");
+require("./css-V3VUT_Js.cjs");
+require("zod");
+require("./Center-ZAcURh-3.cjs");
+require("./Toggle-eOKYw1OT.cjs");
+require("./component-joFaJiQW.cjs");
+require("react-dom");
+require("react-hook-form");
+require("./Header-5YX6FUn6.cjs");
+exports.Header = external.external;
+//# sourceMappingURL=header.cjs.map

package/dist/header.cjs.map

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

package/dist/header.js

@@ -0,0 +1,15 @@
+import { e } from "./external-up1sE3F6.js";
+import "./jsx-runtime-rX5tAIG2.js";
+import "react";
+import "./css-NTD4Xm8x.js";
+import "zod";
+import "./Center-gEKkAkdh.js";
+import "./Toggle-kLunfJtR.js";
+import "./component-k78Jq9I7.js";
+import "react-dom";
+import "react-hook-form";
+import "./Header-7x6367IV.js";
+export {
+  e as Header
+};
+//# sourceMappingURL=header.js.map

package/dist/header.js.map

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

package/dist/hooks/effect.d.ts

@@ -0,0 +1,14 @@
+import { type DependencyList, type EffectCallback } from "react";
+export type AsyncDestructor = Promise<(() => void) | void>;
+/** An async version of React.EffectCallback */
+export type AsyncEffectCallback = () => AsyncDestructor;
+/**
+ * A version of useEffect that supports async functions and destructors. NOTE: The behavior
+ * of this hook hasn't been carefully though out, so it may produce unexpected results.
+ * Caveat emptor.
+ *
+ * @param effect - The async effect callback.
+ * @param deps - The dependencies of the effect.
+ */
+export declare const useAsyncEffect: (effect: AsyncEffectCallback, deps?: unknown[]) => void;
+export declare const useEffectCompare: <D extends DependencyList>(cbk: EffectCallback, areEqual: (prevDeps: D, nextDeps: D) => boolean, deps: D) => void;

package/dist/hooks/index.d.ts

@@ -0,0 +1,8 @@
+export * from '../hooks/useClickOutside';
+export * from '../hooks/useFilter';
+export * from '../hooks/useTransforms';
+export * from '../memo/useMemoCompare';
+export * from '../hooks/effect';
+export * from '../hooks/useResize';
+export * from '../hooks/useDebouncedCallback';
+export * from '../hooks/ref';

package/dist/hooks/ref.d.ts

@@ -0,0 +1,31 @@
+import { type MutableRefObject, type ForwardedRef, type RefCallback } from "react";
+import { type Primitive } from "@synnaxlabs/x";
+import { state } from '../state';
+/**
+ * A ref that satisfies the interface of useState, but returns a ref as the first
+ * element of the tuple. This is useful when you want to keep a piece of state
+ * but don't want it's changes to trigger a re-render.
+ *
+ * @param initialValue - The initial value of the ref.
+ * @returns a tuple containing the ref and the pseudo-setState function.
+ */
+export declare const useStateRef: <T extends state.State>(initialValue: state.Initial<T>) => [MutableRefObject<T>, state.Set<T>];
+/**
+ * Use synced ref keeps the provided value in sync with the returned ref. This is
+ * useful when you want access to a piece of state but don't want it's changes
+ * to trigger a re-render.
+ *
+ * @param value - The value to keep in sync with the ref.
+ * @returns a ref that is kept in sync with the provided value.
+ */
+export declare const useSyncedRef: <T>(value: T) => MutableRefObject<T>;
+/**
+ * Combines multiple refs into one. Note that the returned ref callback will not be
+ * updated when the provided refs changes. These refs are only set once, and are assumed
+ * to be static throughout the lifetime of the component.
+ *
+ * @param refs - The refs to combine.
+ * @returns - A callback ref that will set all of the provided refs.
+ */
+export declare const useCombinedRefs: <T>(...refs: ForwardedRef<T>[]) => RefCallback<T>;
+export declare const useCombinedStateAndRef: <T extends object | Primitive>(initialState: state.Initial<T>) => [T, state.Set<T>, MutableRefObject<T>];

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from "react";
+/**
+ * A hooks that calls the provided callback when a click event occurs outside of the
+ * provided ref.
+ * @param ref - The ref to check for clicks outside of.
+ * @param onClickOutside - The callback to call when a click event occurs outside of the
+ * provided ref.
+ */
+export declare const useClickOutside: (ref: RefObject<HTMLElement>, onClickOutside: () => void) => void;

package/dist/hooks/useCursorDrag/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useCursorDrag";
+export * from "./useVirtualCursorDrag";

package/dist/hooks/useCursorDrag/types.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from "react";
+import { type UseCursorDragProps } from "./useCursorDrag";
+export interface UseVirtualCursorDragProps extends UseCursorDragProps {
+    ref: RefObject<HTMLElement>;
+}

package/dist/hooks/useCursorDrag/useCursorDrag.d.ts

@@ -0,0 +1,10 @@
+import { type DragEvent } from "react";
+import { xy, box } from "@synnaxlabs/x";
+import { Triggers } from '../../triggers';
+export interface UseCursorDragProps {
+    onStart?: (loc: xy.XY, mouseKey: Triggers.Key, e: DragEvent) => void;
+    onMove?: (box: box.Box, mouseKey: Triggers.Key, e: MouseEvent) => void;
+    onEnd?: (box: box.Box, mouseKey: Triggers.Key, e: MouseEvent) => void;
+}
+export type UseCursorDragStart = (e: DragEvent) => void;
+export declare const useCursorDrag: ({ onMove, onStart, onEnd, }: UseCursorDragProps) => UseCursorDragStart;

package/dist/hooks/useCursorDrag/useVirtualCursorDrag.d.ts

@@ -0,0 +1 @@
+export declare const useVirtualCursorDrag: ({ ref, onMove, onStart, onEnd, }: import("./types").UseVirtualCursorDragProps) => void;

package/dist/hooks/useCursorDrag/useVirtualCursorDragWebKit.d.ts

@@ -0,0 +1,2 @@
+import { type UseVirtualCursorDragProps } from "./types";
+export declare const useVirtualCursorDragWebKit: ({ ref, onMove, onStart, onEnd, }: UseVirtualCursorDragProps) => void;

package/dist/hooks/useCursorDrag/useVirtualCursorDragWebView.d.ts

@@ -0,0 +1,2 @@
+import { type UseVirtualCursorDragProps } from '../../hooks/useCursorDrag/types';
+export declare const useVirtualCursorDragWebView: ({ ref, onMove, onStart, onEnd, }: UseVirtualCursorDragProps) => void;

package/dist/hooks/useDebouncedCallback.d.ts

@@ -0,0 +1,2 @@
+import { type DependencyList } from "react";
+export declare const useDebouncedCallback: <F extends (...args: any[]) => void>(func: F, waitFor: number, deps: DependencyList) => F;

package/dist/hooks/useFilter.d.ts

@@ -0,0 +1,21 @@
+import { type ArrayTransform, type KeyedRecord, type Key, type TermSearcher } from "@synnaxlabs/x";
+/** Props for the {@link createFilterTransform} function. */
+export interface CreateFilterTransformProps<K extends Key, E extends KeyedRecord<K, E>> {
+    term: string;
+    searcher?: TermSearcher<string, K, E> | ((data: E[]) => TermSearcher<string, K, E>);
+}
+export declare const fuseFilter: (opts?: any) => <K extends Key, E extends KeyedRecord<K, E>>(data: E[]) => TermSearcher<string, K, E>;
+/**
+ * @returns a transform that can be used to filter an array of objects in memory
+ * based on a search query.
+ *
+ * Can be used in conjunction with `useTransform` to add search functionality
+ * alongside other transforms.
+ *
+ * Uses fuse.js under the hood.
+ *
+ * @param query - The query to search for.
+ * @param opts - The options to pass to the Fuse.js search. See the Fuse.js
+ * documentation for more information on these options.
+ */
+export declare const createFilterTransform: <K extends Key, E extends KeyedRecord<K, E>>({ term, searcher, }: CreateFilterTransformProps<K, E>) => ArrayTransform<E>;

package/dist/hooks/useResize.d.ts

@@ -0,0 +1,24 @@
+import { type RefCallback } from "react";
+import { box, type direction } from "@synnaxlabs/x";
+export interface UseResizeOpts {
+    /**
+     * A list of triggers that should cause the callback to be called.
+     */
+    triggers?: direction.Direction[];
+    /**  Debounce the resize event by this many milliseconds.
+    Useful for preventing expensive renders until rezizing has stopped. */
+    debounce?: number;
+    /** If false, the hook wont observe the element. Defaults to true. */
+    enabled?: boolean;
+}
+export type UseResizeHandler = <E extends HTMLElement>(box: box.Box, el: E) => void;
+/**
+ * Tracks the dimensions of an element and executes a callback when they change.
+ *
+ * @param onResize - A callback that receives a box representing the dimensions and
+ * position of the element.
+ * @param opts -  Options for the hook. See UseResizeOpts.
+ *
+ * @returns a ref callback to attach to the desire element.
+ */
+export declare const useResize: <E extends HTMLElement>(onResize: UseResizeHandler, opts?: UseResizeOpts) => RefCallback<E>;

package/dist/hooks/useSelectMultiple.d.ts

@@ -0,0 +1,51 @@
+import { type Key, type KeyedRecord } from "@synnaxlabs/x";
+/**
+ * Extra information passed as an additional argument to the `onChange` callback.
+ * of the {@link useSelectMultiple} hook.
+ */
+export interface UseSelectMultipleOnChangeExtra<K extends Key = Key, E extends KeyedRecord<K, E> = KeyedRecord<K>> {
+    /** The key of the entry that was last clicked. */
+    clicked: K | null;
+    /** The entries that are currently selected. */
+    entries: E[];
+}
+/** Props for the {@link useSelectMultiple} hook. */
+export interface UseSelectMultipleProps<K extends Key = Key, E extends KeyedRecord<K, E> = KeyedRecord<K>> {
+    data: E[];
+    allowMultiple?: boolean;
+    allowNone?: boolean;
+    replaceOnSingle?: boolean;
+    value: K[];
+    onChange: (next: K[], extra: UseSelectMultipleOnChangeExtra<K, E>) => void;
+}
+/** Return value for the {@link useSelectMultiple} hook. */
+export interface UseSelectMultipleReturn<K extends Key = Key, E extends KeyedRecord<K, E> = KeyedRecord<K>> {
+    onSelect: (key: K) => void;
+    clear: () => void;
+}
+/**
+ * Implements generic multiple selection over a collection of keyed records. The hook
+ * does not maintain internal selection state, but instead relies on the `value` and
+ * `onChange` props to manage the selection state. This allows the hook to be used
+ * with any selection state implementation, such as a React state hook or a Redux
+ * store.
+ *
+ * The hook also supports shift-selection of a range. This means that the data passed in
+ * must be in the same order/cardinality as the data that is displayed.
+ *
+ * It's important to note that the hook implements the InputControl interface, which
+ *  means that it can be used as a controlled input in a form.
+ *
+ * @param props - The props for the hook.
+ * @param props.data - The data to select from.
+ * @param props.value - The current selection state.
+ * @param props.onChange - The callback to invoke when the selection state changes.
+ * @param props.allowMultiple - Whether to allow multiple selections.
+ *
+ * @returns transform - A transform that can be used to add a `selected` property to
+ * each record in the data.
+ * @returns onSelect - A callback that can be used to select a record. This should
+ * probably be passed to the `onClick` corresponding to each record.
+ * @returns clear - A callback that can be used to clear the selection.
+ */
+export declare const useSelectMultiple: <K extends Key = Key, E extends KeyedRecord<K, E> = KeyedRecord<K>>({ data, value, allowMultiple, allowNone, replaceOnSingle, onChange, }: UseSelectMultipleProps<K, E>) => UseSelectMultipleReturn<K, E>;

package/dist/hooks/useTransforms.d.ts

@@ -0,0 +1,15 @@
+import { type UnknownRecord, type ArrayTransform } from "@synnaxlabs/x";
+export interface ArrayTransformEntry<E extends UnknownRecord = UnknownRecord> {
+    transform: ArrayTransform<E>;
+    key: string;
+    priority: number;
+}
+export interface UseTransformsProps<E extends UnknownRecord = UnknownRecord> {
+    transforms?: Array<ArrayTransformEntry<E>>;
+}
+export interface UseTransformsReturn<E extends UnknownRecord = UnknownRecord> {
+    transform: ArrayTransform<E>;
+    setTransform: (key: string, t: ArrayTransform<E>, priority?: number) => void;
+    deleteTransform: (key: string) => void;
+}
+export declare const useTransforms: <E extends Partial<Record<import("@synnaxlabs/x").Key, unknown>>>({ transforms: initialTransforms, }: UseTransformsProps<E>) => UseTransformsReturn<E>;

package/dist/hooks/useUniqueKey.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @returns a unique key that persists for the lifetime of the component.
+ * @param override - An optional override for the key. If provided, this will be returned
+ * instead of the generated key.
+ * */
+export declare const useUniqueKey: (override?: string) => string;