@gamecrafters/base-ui 0.0.35 → 0.0.36

package/build/components/resizable/Resizable.d.ts

@@ -1,7 +1,13 @@
 import * as React from "react";
-declare const _default: (props: Omit<import("react-resizable-panels").GroupProps, "orientation" | "elementRef" | "groupRef"> & {
+import type { ResizableInstance } from "./Resizable.types";
+declare const _default: (props: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onResize"> & {
     orientation?: import("./Resizable.types").ResizableOrientation;
-    resizableRef?: import("react-resizable-panels").GroupProps["groupRef"];
+    disabled?: boolean;
+    disableCursor?: boolean;
+    defaultLayout?: import("./Resizable.types").ResizableLayout;
+    onLayoutChange?: (layout: import("./Resizable.types").ResizableLayout) => void;
+    onLayoutChanged?: (layout: import("./Resizable.types").ResizableLayout, details: import("./Resizable.types").ResizableLayoutChangeDetails) => void;
+    resizableRef?: React.Ref<ResizableInstance | null>;
     className?: string;
 } & React.RefAttributes<any>) => React.ReactNode;
 export default _default;

package/build/components/resizable/Resizable.types.d.ts

@@ -1,18 +1,49 @@
 import type * as React from "react";
-import type { GroupImperativeHandle, GroupProps, Layout, PanelImperativeHandle, PanelProps, SeparatorProps as PanelSeparatorProps } from "react-resizable-panels";
 export type ResizableOrientation = "horizontal" | "vertical";
-export type ResizableLayout = Layout;
-export type ResizableInstance = GroupImperativeHandle;
-export type ResizablePanelInstance = PanelImperativeHandle;
-export type ResizableProps = Omit<GroupProps, "elementRef" | "groupRef" | "orientation"> & {
+export type ResizableLayout = Record<string, number>;
+export type ResizablePanelSize = number | string;
+export type ResizablePanelSizes = {
+    asPercentage: number;
+    inPixels: number;
+};
+export type ResizableLayoutChangeDetails = {
+    isUserInteraction: boolean;
+};
+export type ResizableInstance = {
+    getLayout: () => ResizableLayout;
+    setLayout: (layout: ResizableLayout) => ResizableLayout;
+};
+export type ResizablePanelInstance = {
+    collapse: () => void;
+    expand: () => void;
+    getSize: () => ResizablePanelSizes;
+    isCollapsed: () => boolean;
+    resize: (size: ResizablePanelSize) => void;
+};
+export type ResizableProps = Omit<React.ComponentPropsWithoutRef<"div">, "onResize"> & {
     orientation?: ResizableOrientation;
-    resizableRef?: GroupProps["groupRef"];
+    disabled?: boolean;
+    disableCursor?: boolean;
+    defaultLayout?: ResizableLayout;
+    onLayoutChange?: (layout: ResizableLayout) => void;
+    onLayoutChanged?: (layout: ResizableLayout, details: ResizableLayoutChangeDetails) => void;
+    resizableRef?: React.Ref<ResizableInstance | null>;
     className?: string;
 };
-export type ResizablePanelProps = Omit<PanelProps, "elementRef"> & {
+export type ResizablePanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "onResize" | "id"> & {
+    id?: string | number;
+    defaultSize?: ResizablePanelSize;
+    minSize?: ResizablePanelSize;
+    maxSize?: ResizablePanelSize;
+    collapsible?: boolean;
+    collapsedSize?: ResizablePanelSize;
+    disabled?: boolean;
+    onResize?: (size: ResizablePanelSizes, id: string, previous: ResizablePanelSizes | undefined) => void;
+    panelRef?: React.Ref<ResizablePanelInstance | null>;
     className?: string;
 };
-export type ResizableResizeTriggerProps = Omit<PanelSeparatorProps, "elementRef"> & {
+export type ResizableResizeTriggerProps = React.ComponentPropsWithoutRef<"div"> & {
+    disabled?: boolean;
     className?: string;
 };
 export type ResizableResizeTriggerSeparatorProps = React.ComponentPropsWithoutRef<"span"> & {

package/build/components/resizable/ResizableContext.d.ts

@@ -0,0 +1,50 @@
+import type { UseResizableReturn } from "./useResizable";
+export type ResizableContextValue = Partial<UseResizableReturn>;
+export declare const ResizableContext: import("react").Context<Partial<{
+    groupRef: import("react").RefObject<HTMLDivElement | null>;
+    orientation: import("./Resizable.types").ResizableOrientation;
+    disabled: boolean;
+    layout: import("./Resizable.types").ResizableLayout;
+    registerPanel: (record: import("./resizableLayout").ResizablePanelRecord & {
+        onResize?: (size: import("./Resizable.types").ResizablePanelSizes, id: string, previous: import("./Resizable.types").ResizablePanelSizes | undefined) => void;
+    }) => () => void;
+    sizeOf: (id: string) => number;
+    startDrag: (trigger: HTMLElement, event: React.PointerEvent) => void;
+    moveDrag: (event: React.PointerEvent) => void;
+    endDrag: (trigger: HTMLElement, event: React.PointerEvent) => void;
+    handleTriggerKeyDown: (trigger: HTMLElement, event: React.KeyboardEvent) => void;
+    resetAt: (trigger: HTMLElement) => void;
+    collapsePanel: (id: string) => void;
+    expandPanel: (id: string) => void;
+    resizePanel: (id: string, size: import("./Resizable.types").ResizablePanelSize) => void;
+    panelSizes: (id: string) => import("./Resizable.types").ResizablePanelSizes;
+    isPanelCollapsed: (id: string) => boolean;
+    getLayout: () => {
+        [x: string]: number;
+    };
+    setLayout: (next: import("./Resizable.types").ResizableLayout) => import("./Resizable.types").ResizableLayout;
+}>>;
+export declare const useResizableContext: () => Partial<{
+    groupRef: import("react").RefObject<HTMLDivElement | null>;
+    orientation: import("./Resizable.types").ResizableOrientation;
+    disabled: boolean;
+    layout: import("./Resizable.types").ResizableLayout;
+    registerPanel: (record: import("./resizableLayout").ResizablePanelRecord & {
+        onResize?: (size: import("./Resizable.types").ResizablePanelSizes, id: string, previous: import("./Resizable.types").ResizablePanelSizes | undefined) => void;
+    }) => () => void;
+    sizeOf: (id: string) => number;
+    startDrag: (trigger: HTMLElement, event: React.PointerEvent) => void;
+    moveDrag: (event: React.PointerEvent) => void;
+    endDrag: (trigger: HTMLElement, event: React.PointerEvent) => void;
+    handleTriggerKeyDown: (trigger: HTMLElement, event: React.KeyboardEvent) => void;
+    resetAt: (trigger: HTMLElement) => void;
+    collapsePanel: (id: string) => void;
+    expandPanel: (id: string) => void;
+    resizePanel: (id: string, size: import("./Resizable.types").ResizablePanelSize) => void;
+    panelSizes: (id: string) => import("./Resizable.types").ResizablePanelSizes;
+    isPanelCollapsed: (id: string) => boolean;
+    getLayout: () => {
+        [x: string]: number;
+    };
+    setLayout: (next: import("./Resizable.types").ResizableLayout) => import("./Resizable.types").ResizableLayout;
+}>;

package/build/components/resizable/ResizablePanel.d.ts

@@ -1,5 +1,15 @@
 import * as React from "react";
-declare const _default: (props: Omit<import("react-resizable-panels").PanelProps, "elementRef"> & {
+import type { ResizablePanelInstance } from "./Resizable.types";
+declare const _default: (props: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "id" | "onResize"> & {
+    id?: string | number;
+    defaultSize?: import("./Resizable.types").ResizablePanelSize;
+    minSize?: import("./Resizable.types").ResizablePanelSize;
+    maxSize?: import("./Resizable.types").ResizablePanelSize;
+    collapsible?: boolean;
+    collapsedSize?: import("./Resizable.types").ResizablePanelSize;
+    disabled?: boolean;
+    onResize?: (size: import("./Resizable.types").ResizablePanelSizes, id: string, previous: import("./Resizable.types").ResizablePanelSizes | undefined) => void;
+    panelRef?: React.Ref<ResizablePanelInstance | null>;
     className?: string;
 } & React.RefAttributes<any>) => React.ReactNode;
 export default _default;

package/build/components/resizable/ResizableResizeTrigger.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-declare const _default: (props: Omit<import("react-resizable-panels").SeparatorProps, "elementRef"> & {
+declare const _default: (props: Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    disabled?: boolean;
     className?: string;
 } & React.RefAttributes<any>) => React.ReactNode;
 export default _default;

package/build/components/resizable/index.d.ts

@@ -2,15 +2,30 @@ import ResizablePanel from "./ResizablePanel";
 import ResizableResizeTrigger from "./ResizableResizeTrigger";
 import ResizableResizeTriggerIndicator from "./ResizableResizeTriggerIndicator";
 import ResizableResizeTriggerSeparator from "./ResizableResizeTriggerSeparator";
-export declare const Resizable: ((props: Omit<import("react-resizable-panels").GroupProps, "orientation" | "elementRef" | "groupRef"> & {
+export declare const Resizable: ((props: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onResize"> & {
     orientation?: import("./Resizable.types").ResizableOrientation;
-    resizableRef?: import("react-resizable-panels").GroupProps["groupRef"];
+    disabled?: boolean;
+    disableCursor?: boolean;
+    defaultLayout?: import("./Resizable.types").ResizableLayout;
+    onLayoutChange?: (layout: import("./Resizable.types").ResizableLayout) => void;
+    onLayoutChanged?: (layout: import("./Resizable.types").ResizableLayout, details: import("./Resizable.types").ResizableLayoutChangeDetails) => void;
+    resizableRef?: React.Ref<import("./Resizable.types").ResizableInstance | null>;
     className?: string;
 } & import("react").RefAttributes<any>) => React.ReactNode) & {
-    Panel: (props: Omit<import("react-resizable-panels").PanelProps, "elementRef"> & {
+    Panel: (props: Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "id" | "onResize"> & {
+        id?: string | number;
+        defaultSize?: import("./Resizable.types").ResizablePanelSize;
+        minSize?: import("./Resizable.types").ResizablePanelSize;
+        maxSize?: import("./Resizable.types").ResizablePanelSize;
+        collapsible?: boolean;
+        collapsedSize?: import("./Resizable.types").ResizablePanelSize;
+        disabled?: boolean;
+        onResize?: (size: import("./Resizable.types").ResizablePanelSizes, id: string, previous: import("./Resizable.types").ResizablePanelSizes | undefined) => void;
+        panelRef?: React.Ref<import("./Resizable.types").ResizablePanelInstance | null>;
         className?: string;
     } & import("react").RefAttributes<any>) => React.ReactNode;
-    ResizeTrigger: (props: Omit<import("react-resizable-panels").SeparatorProps, "elementRef"> & {
+    ResizeTrigger: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        disabled?: boolean;
         className?: string;
     } & import("react").RefAttributes<any>) => React.ReactNode;
     ResizeTriggerSeparator: (props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
@@ -21,4 +36,6 @@ export declare const Resizable: ((props: Omit<import("react-resizable-panels").G
     } & import("react").RefAttributes<any>) => React.ReactNode;
 };
 export { ResizablePanel, ResizableResizeTrigger, ResizableResizeTriggerSeparator, ResizableResizeTriggerIndicator, };
+export { ResizableContext, useResizableContext } from "./ResizableContext";
+export { useResizable } from "./useResizable";
 export * from "./Resizable.types";

package/build/components/resizable/resizableLayout.d.ts

@@ -0,0 +1,36 @@
+import type { ResizableLayout, ResizablePanelSize } from "./Resizable.types";
+export type ResizableSizeContext = {
+    availablePx: number;
+    remPx: number;
+    emPx: number;
+    vhPx: number;
+    vwPx: number;
+};
+export type ResizableConstraints = {
+    min: number;
+    max: number;
+    collapsedTo: number;
+    collapsible: boolean;
+    disabled: boolean;
+};
+export type ResizablePanelRecord = {
+    id: string;
+    defaultSize?: ResizablePanelSize;
+    minSize?: ResizablePanelSize;
+    maxSize?: ResizablePanelSize;
+    collapsedSize?: ResizablePanelSize;
+    collapsible?: boolean;
+    disabled?: boolean;
+};
+export declare const clamp: (value: number, low: number, high: number) => number;
+export declare const sum: (values: number[]) => number;
+export declare const toPercentage: (size: ResizablePanelSize | undefined, context: ResizableSizeContext) => number | undefined;
+export declare const constraintsOf: (panel: ResizablePanelRecord, context: ResizableSizeContext) => ResizableConstraints;
+export declare const floorOf: (constraints: ResizableConstraints) => number;
+export declare const isCollapsed: (size: number, constraints: ResizableConstraints) => boolean;
+export declare const startingSizes: (panels: ResizablePanelRecord[], context: ResizableSizeContext, saved?: ResizableLayout) => number[];
+export declare const settle: (sizes: number[], constraints: ResizableConstraints[]) => number[];
+export declare const setSizeAt: (sizes: number[], constraints: ResizableConstraints[], index: number, target: number) => number[];
+export declare const resizeAt: (sizes: number[], constraints: ResizableConstraints[], index: number, delta: number) => number[];
+export declare const toLayout: (panels: ResizablePanelRecord[], sizes: number[]) => ResizableLayout;
+export declare const sameLayout: (left: ResizableLayout, right: ResizableLayout) => boolean;

package/build/components/resizable/useResizable.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { ResizablePanelRecord } from "./resizableLayout";
+import type { ResizableLayout, ResizableOrientation, ResizablePanelSize, ResizablePanelSizes, ResizableProps } from "./Resizable.types";
+type PanelRegistration = ResizablePanelRecord & {
+    onResize?: (size: ResizablePanelSizes, id: string, previous: ResizablePanelSizes | undefined) => void;
+};
+export type UseResizableProps = Pick<ResizableProps, "orientation" | "disabled" | "disableCursor" | "defaultLayout" | "onLayoutChange" | "onLayoutChanged">;
+export declare const useResizable: (props?: UseResizableProps) => {
+    groupRef: React.RefObject<HTMLDivElement | null>;
+    orientation: ResizableOrientation;
+    disabled: boolean;
+    layout: ResizableLayout;
+    registerPanel: (record: PanelRegistration) => () => void;
+    sizeOf: (id: string) => number;
+    startDrag: (trigger: HTMLElement, event: React.PointerEvent) => void;
+    moveDrag: (event: React.PointerEvent) => void;
+    endDrag: (trigger: HTMLElement, event: React.PointerEvent) => void;
+    handleTriggerKeyDown: (trigger: HTMLElement, event: React.KeyboardEvent) => void;
+    resetAt: (trigger: HTMLElement) => void;
+    collapsePanel: (id: string) => void;
+    expandPanel: (id: string) => void;
+    resizePanel: (id: string, size: ResizablePanelSize) => void;
+    panelSizes: (id: string) => ResizablePanelSizes;
+    isPanelCollapsed: (id: string) => boolean;
+    getLayout: () => {
+        [x: string]: number;
+    };
+    setLayout: (next: ResizableLayout) => ResizableLayout;
+};
+export type UseResizableReturn = ReturnType<typeof useResizable>;
+export {};