@koine/react 2.0.0-beta.14 → 2.0.0-beta.16

package/Details/Details.d.ts

@@ -1,18 +1,12 @@
-/// <reference types="react" />
-/// <reference types="react" />
 import type { Simplify } from "@koine/utils";
-import { type WithComponents } from "../helpers";
+import { type WithComponents } from "../extendComponent";
 export type OwnProps = React.ComponentPropsWithoutRef<"details"> & {
     open?: boolean;
     onChange?: () => any;
     summary: null | React.ReactNode;
-    /** Amount of milliseconds after which the component collapses */
-    /** @default "Expand" */
     ariaExpand?: string;
-    /** @default "Collapse" */
     ariaCollapse?: string;
     id?: string;
-    /** Used to trigger a recalculation effect */
     recalc?: any;
 };
 export type Components = {
@@ -55,12 +49,12 @@ export declare const Summary: NonNullable<import("react").ElementType<Omit<impor
 } & Pick<OwnProps, "onChange"> & {
     children?: import("react").ReactNode;
 }>>;
-export declare const Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+export declare const Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
     $open: OwnProps["open"];
 } & Pick<OwnProps, "onChange"> & {
     children?: import("react").ReactNode;
 }>>;
-export declare const Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+export declare const Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
     $open: OwnProps["open"];
     "aria-expanded"?: React.AriaAttributes["aria-expanded"];
     "aria-label"?: React.AriaAttributes["aria-label"];
@@ -69,55 +63,22 @@ export declare const Content: NonNullable<import("react").ElementType<Omit<Omit<
 }>>;
 export declare const KoineDetails: ((props: {
     key?: import("react").Key | null | undefined;
-    id?: string | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined;
-    color?: string | undefined;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    autoFocus?: boolean | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
-    contextMenu?: string | undefined;
-    dir?: string | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined;
+    children?: import("react").ReactNode;
+    suppressHydrationWarning?: boolean | undefined;
+    color?: string | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
-    nonce?: string | undefined;
-    placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
-    radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
-    about?: string | undefined;
-    content?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    rel?: string | undefined;
-    resource?: string | undefined;
-    rev?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-    is?: string | undefined;
+    tabIndex?: number | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
@@ -130,7 +91,7 @@ export declare const KoineDetails: ((props: {
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "location" | "true" | "false" | "page" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
@@ -157,7 +118,7 @@ export declare const KoineDetails: ((props: {
     'aria-posinset'?: number | undefined;
     'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-readonly'?: (boolean | "true" | "false") | undefined;
-    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     'aria-required'?: (boolean | "true" | "false") | undefined;
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
@@ -171,7 +132,6 @@ export declare const KoineDetails: ((props: {
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
-    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -267,9 +227,7 @@ export declare const KoineDetails: ((props: {
     onContextMenuCapture?: import("react").MouseEventHandler<HTMLDetailsElement> | undefined;
     onDoubleClick?: import("react").MouseEventHandler<HTMLDetailsElement> | undefined;
     onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDetailsElement> | undefined;
-    onDrag?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
-    onDragEnd?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragEndCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragEnter?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragEnterCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
@@ -279,7 +237,6 @@ export declare const KoineDetails: ((props: {
     onDragLeaveCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragOver?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragOverCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
-    onDragStart?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDragStartCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDrop?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
     onDropCapture?: import("react").DragEventHandler<HTMLDetailsElement> | undefined;
@@ -329,14 +286,51 @@ export declare const KoineDetails: ((props: {
     onScrollCapture?: import("react").UIEventHandler<HTMLDetailsElement> | undefined;
     onWheel?: import("react").WheelEventHandler<HTMLDetailsElement> | undefined;
     onWheelCapture?: import("react").WheelEventHandler<HTMLDetailsElement> | undefined;
-    onAnimationStart?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     onAnimationIteration?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDetailsElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDetailsElement> | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
     open?: boolean | undefined;
     onToggle?: import("react").ReactEventHandler<HTMLDetailsElement> | undefined;
     summary: null | React.ReactNode;
@@ -349,12 +343,12 @@ export declare const KoineDetails: ((props: {
     } & Pick<OwnProps, "onChange"> & {
         children?: import("react").ReactNode;
     }>>;
-    Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         $open: OwnProps["open"];
     } & Pick<OwnProps, "onChange"> & {
         children?: import("react").ReactNode;
     }>>;
-    Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         $open: OwnProps["open"];
         "aria-expanded"?: React.AriaAttributes["aria-expanded"];
         "aria-label"?: React.AriaAttributes["aria-label"];
@@ -368,12 +362,12 @@ export declare const KoineDetails: ((props: {
     } & Pick<OwnProps, "onChange"> & {
         children?: import("react").ReactNode;
     }>>;
-    Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         $open: OwnProps["open"];
     } & Pick<OwnProps, "onChange"> & {
         children?: import("react").ReactNode;
     }>>;
-    Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         $open: OwnProps["open"];
         "aria-expanded"?: React.AriaAttributes["aria-expanded"];
         "aria-label"?: React.AriaAttributes["aria-label"];
@@ -388,12 +382,12 @@ export declare const KoineDetails: ((props: {
         } & Pick<OwnProps, "onChange"> & {
             children?: import("react").ReactNode;
         }>>;
-        Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        Body: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
             $open: OwnProps["open"];
         } & Pick<OwnProps, "onChange"> & {
             children?: import("react").ReactNode;
         }>>;
-        Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        Content: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
             $open: OwnProps["open"];
             "aria-expanded"?: React.AriaAttributes["aria-expanded"];
             "aria-label"?: React.AriaAttributes["aria-label"];

package/Details/Details.js

@@ -0,0 +1,52 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useRef, useState, } from "react";
+import { extendComponent, } from "../extendComponent.js";
+import { useWindowSize } from "../useWindowSize.js";
+export var Root = "details";
+export var Summary = "summary";
+export var Body = "div";
+export var Content = "div";
+var DetailsWithRef = forwardRef(function Details(_a, ref) {
+    var id = _a.id, propOpen = _a.open, recalc = _a.recalc, summary = _a.summary, children = _a.children, _Root = _a.Root, _Summary = _a.Summary, _Body = _a.Body, _Content = _a.Content, onChange = _a.onChange, props = __rest(_a, ["id", "open", "recalc", "summary", "children", "Root", "Summary", "Body", "Content", "onChange"]);
+    var isControlled = typeof propOpen !== "undefined";
+    var _b = useState(propOpen), stateOpen = _b[0], setStateOpen = _b[1];
+    var _c = useState(0), setHeight = _c[1];
+    var hash = id ? "#".concat(id) : "";
+    var winSize = useWindowSize();
+    var open = isControlled ? propOpen : stateOpen;
+    var overflow = useState(open ? "unset" : "hidden")[0];
+    var content = useRef(null);
+    var defaultId = useId();
+    id = id || defaultId;
+    var handleClick = useCallback(function () {
+        if (hash) {
+            window.history.replaceState(null, "", open ? window.location.pathname + window.location.search : hash);
+        }
+        if (onChange) {
+            onChange();
+        }
+        if (!isControlled) {
+            setStateOpen(function (prevOpen) { return !prevOpen; });
+        }
+    }, [open, hash, onChange, isControlled]);
+    useEffect(function () {
+        if (content.current) {
+            setHeight(Math.ceil(content.current.offsetHeight));
+        }
+    }, [winSize, recalc]);
+    useEffect(function () {
+        if (!isControlled && hash && window.location.hash === hash) {
+            setStateOpen(true);
+        }
+    }, [hash, isControlled]);
+    return (_jsxs(Root, __assign({}, props, { open: open || false, children: [_jsx(Summary, { "$open": open, onClick: handleClick, children: summary || " " }), _jsx(Body, { "$open": open, style: { overflow: overflow }, children: _jsx(Content, { "$open": open, style: {
+                        pointerEvents: open ? "all" : "none",
+                    }, children: children }) })] })));
+});
+export var KoineDetails = extendComponent(DetailsWithRef, {
+    Root: Root,
+    Summary: Summary,
+    Body: Body,
+    Content: Content,
+});

package/Details/index.d.ts

@@ -1 +1 @@
-export * from "./Details";
+export * from "./Details.js";

package/Details/index.js

@@ -0,0 +1 @@
+export * from "./Details.js";

package/Dialog/DialogMui.d.ts

@@ -2,13 +2,11 @@ import ModalUnstyled, { type ModalProps as ModalUnstyledProps } from "@mui/base/
 import type { MotionProps } from "framer-motion";
 import React from "react";
 import type { Simplify } from "@koine/utils";
-import { type WithComponents } from "../helpers";
+import { type WithComponents } from "../extendComponent.js";
 type ReducedModalUnstyledProps = Omit<ModalUnstyledProps, "onClose" | "BackdropComponent" | "classes" | "closeAfterTransition" | "component" | "components" | "componentsProps">;
 export type OwnProps = React.PropsWithChildren<ReducedModalUnstyledProps & {
     onClose: (event: object, reason?: string) => any;
     title?: string;
-    /** @default true */
-    /** @default false */
     $scrollPaper?: boolean;
     mBackdrop?: MotionProps;
     mPaper?: MotionProps;
@@ -58,13 +56,13 @@ export type Props = Simplify<WithComponents<OwnProps, Components>>;
 export type DialogProps = Props;
 export type KoineDialogProps = Props;
 export declare const Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Modal").ModalTypeMap<{}, "div">>;
-export declare const Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+export declare const Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
     open?: OwnProps["open"];
 }>>;
 export declare const Container: NonNullable<React.ElementType<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<OwnProps, "$scrollPaper"> & {
     children?: React.ReactNode;
 }>>;
-export declare const Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+export declare const Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
     "aria-label": string;
 } & Pick<OwnProps, "$scrollPaper"> & {
     children?: React.ReactNode;
@@ -91,13 +89,13 @@ export declare const KoineDialog: ((props: Omit<{
     mPaper?: MotionProps | undefined;
     children?: React.ReactNode;
     Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Modal").ModalTypeMap<{}, "div">>;
-    Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         open?: OwnProps["open"];
     }>>;
     Container: NonNullable<React.ElementType<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<OwnProps, "$scrollPaper"> & {
         children?: React.ReactNode;
     }>>;
-    Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         "aria-label": string;
     } & Pick<OwnProps, "$scrollPaper"> & {
         children?: React.ReactNode;
@@ -115,13 +113,13 @@ export declare const KoineDialog: ((props: Omit<{
     }>>;
 }, "ref"> & React.RefAttributes<HTMLDivElement>) => React.FunctionComponentElement<any>) & {
     Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Modal").ModalTypeMap<{}, "div">>;
-    Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         open?: OwnProps["open"];
     }>>;
     Container: NonNullable<React.ElementType<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<OwnProps, "$scrollPaper"> & {
         children?: React.ReactNode;
     }>>;
-    Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         "aria-label": string;
     } & Pick<OwnProps, "$scrollPaper"> & {
         children?: React.ReactNode;
@@ -140,13 +138,13 @@ export declare const KoineDialog: ((props: Omit<{
 } & {
     defaultProps: {
         Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Modal").ModalTypeMap<{}, "div">>;
-        Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        Backdrop: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
             open?: OwnProps["open"];
         }>>;
         Container: NonNullable<React.ElementType<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<OwnProps, "$scrollPaper"> & {
             children?: React.ReactNode;
         }>>;
-        Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        Paper: NonNullable<React.ElementType<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
             "aria-label": string;
         } & Pick<OwnProps, "$scrollPaper"> & {
             children?: React.ReactNode;

package/Dialog/DialogMui.js

@@ -0,0 +1,39 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ModalUnstyled from "@mui/base/Modal";
+import { forwardRef, useRef } from "react";
+import { MdClear as IconClose } from "react-icons/md";
+import { extendComponent } from "../extendComponent.js";
+export var Root = ModalUnstyled;
+export var Backdrop = "div";
+export var Container = "div";
+export var Paper = "div";
+export var Close = "button";
+export var Header = "div";
+export var Body = "div";
+var DialogWithRef = forwardRef(function Dialog(_a, ref) {
+    var children = _a.children, title = _a.title, $scrollPaper = _a.$scrollPaper, _Root = _a.Root, _Backdrop = _a.Backdrop, _Container = _a.Container, _Paper = _a.Paper, _Close = _a.Close, _Header = _a.Header, _Body = _a.Body, onClose = _a.onClose, props = __rest(_a, ["children", "title", "$scrollPaper", "Root", "Backdrop", "Container", "Paper", "Close", "Header", "Body", "onClose"]);
+    var backdropClick = useRef();
+    var handleMouseDown = function (event) {
+        backdropClick.current = event.target === event.currentTarget;
+    };
+    var handleBackdropClick = function (event) {
+        if (!backdropClick.current) {
+            return;
+        }
+        backdropClick.current = null;
+        if (onClose) {
+            onClose(event, "backdropClick");
+        }
+    };
+    return (_jsx(Root, __assign({ slots: { backdrop: Backdrop }, onClick: handleBackdropClick, onClose: onClose, ref: ref }, props, { children: _jsx(Container, { "$scrollPaper": $scrollPaper, onMouseDown: handleMouseDown, children: _jsxs(Paper, { "aria-label": title || "", "$scrollPaper": $scrollPaper, children: [title && _jsx(Header, { children: title }), _jsx(Close, { onClick: onClose, children: _jsx(IconClose, {}) }), _jsx(Body, { children: children })] }) }) })));
+});
+export var KoineDialog = extendComponent(DialogWithRef, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
+});

package/Dialog/css/bare.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import * as _ from "../DialogMui";
+import * as _ from "../DialogMui.js";
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
@@ -7,7 +6,7 @@ export declare const Root: import("react").ForwardRefExoticComponent<Omit<{
 export declare const Backdrop: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
-}, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+}, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
     open?: any;
 }>>>>;
 export declare const Container: import("react").ForwardRefExoticComponent<Omit<{
@@ -19,7 +18,7 @@ export declare const Container: import("react").ForwardRefExoticComponent<Omit<{
 export declare const Paper: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
-}, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+}, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
     "aria-label": string;
 } & Pick<_.OwnProps, "$scrollPaper"> & {
     children?: import("react").ReactNode;
@@ -55,13 +54,13 @@ export declare const KoineDialog: ((props: Omit<{
     mPaper?: import("framer-motion").MotionProps | undefined;
     children?: import("react").ReactNode;
     Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Modal").ModalTypeMap<{}, "div">>;
-    Backdrop: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Backdrop: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         open?: any;
     }>>;
     Container: NonNullable<import("react").ElementType<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Pick<_.OwnProps, "$scrollPaper"> & {
         children?: import("react").ReactNode;
     }>>;
-    Paper: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    Paper: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         "aria-label": string;
     } & Pick<_.OwnProps, "$scrollPaper"> & {
         children?: import("react").ReactNode;
@@ -85,7 +84,7 @@ export declare const KoineDialog: ((props: Omit<{
     Backdrop: import("react").ForwardRefExoticComponent<Omit<{
         className?: string | undefined;
         ref?: import("react").Ref<any> | undefined;
-    }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         open?: any;
     }>>>>;
     Container: import("react").ForwardRefExoticComponent<Omit<{
@@ -97,7 +96,7 @@ export declare const KoineDialog: ((props: Omit<{
     Paper: import("react").ForwardRefExoticComponent<Omit<{
         className?: string | undefined;
         ref?: import("react").Ref<any> | undefined;
-    }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+    }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
         "aria-label": string;
     } & Pick<_.OwnProps, "$scrollPaper"> & {
         children?: import("react").ReactNode;
@@ -131,7 +130,7 @@ export declare const KoineDialog: ((props: Omit<{
         Backdrop: import("react").ForwardRefExoticComponent<Omit<{
             className?: string | undefined;
             ref?: import("react").Ref<any> | undefined;
-        }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
             open?: any;
         }>>>>;
         Container: import("react").ForwardRefExoticComponent<Omit<{
@@ -143,7 +142,7 @@ export declare const KoineDialog: ((props: Omit<{
         Paper: import("react").ForwardRefExoticComponent<Omit<{
             className?: string | undefined;
             ref?: import("react").Ref<any> | undefined;
-        }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & {
+        }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"> & {
             "aria-label": string;
         } & Pick<_.OwnProps, "$scrollPaper"> & {
             children?: import("react").ReactNode;

package/Dialog/css/bare.js

@@ -0,0 +1,21 @@
+import { __makeTemplateObject } from "tslib";
+import { classed } from "../../classed.js";
+import { extendComponent } from "../../extendComponent.js";
+import * as _ from "../DialogMui.js";
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["dialog"], ["dialog"])));
+export var Backdrop = classed(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["dialogBackdrop"], ["dialogBackdrop"])));
+export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["dialogContainer"], ["dialogContainer"])));
+export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["dialogPaper"], ["dialogPaper"])));
+export var Close = classed(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\"dialogClose"], ["\"dialogClose"])));
+export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["dialogHeader"], ["dialogHeader"])));
+export var Body = classed(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["dialogBody"], ["dialogBody"])));
+export var KoineDialog = extendComponent(_.KoineDialog, {
+    Root: Root,
+    Backdrop: Backdrop,
+    Container: Container,
+    Paper: Paper,
+    Close: Close,
+    Header: Header,
+    Body: Body,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/index.d.ts

@@ -1,2 +1,2 @@
-export type { KoineDialogProps } from "./DialogMui";
-export { KoineDialog } from "./DialogMui";
+export type { KoineDialogProps } from "./DialogMui.js";
+export { KoineDialog } from "./DialogMui.js";

package/Dialog/index.js

@@ -0,0 +1 @@
+export { KoineDialog } from "./DialogMui.js";

package/Dialog/m/bare.js

@@ -0,0 +1,3 @@
+import { extendComponent } from "../../extendComponent.js";
+var Dialog = function () { return null; };
+export var KoineDialog = extendComponent(Dialog, {});

package/Dialog/m/basic.d.ts

@@ -1,4 +1,4 @@
 import type { MotionProps } from "framer-motion";
-export * from "./index";
+export * from "./index.js";
 export declare const dialogBackdropMotion: MotionProps;
 export declare const dialogPaperMotion: MotionProps;

package/Dialog/m/basic.js

@@ -0,0 +1,28 @@
+export * from "./index.js";
+export var dialogBackdropMotion = {
+    initial: {
+        opacity: 0,
+    },
+    animate: {
+        backdropFilter: "blur(10px)",
+        opacity: 1,
+    },
+    exit: {
+        backdropFilter: "blur(0px)",
+        opacity: 0,
+    },
+};
+export var dialogPaperMotion = {
+    initial: {
+        translateY: -60,
+        opacity: 0,
+    },
+    animate: {
+        translateY: 0,
+        opacity: 1,
+    },
+    exit: {
+        translateY: 60,
+        opacity: 0,
+    },
+};

package/Dialog/m/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import type { KoineDialogProps } from "../DialogMui";
+import type { KoineDialogProps } from "../DialogMui.js";
 export declare const mRootStyle: (props: Pick<KoineDialogProps, "open" | "style">) => import("react").CSSProperties;

package/Dialog/m/index.js

@@ -0,0 +1,4 @@
+import { __assign } from "tslib";
+export var mRootStyle = function (props) {
+    return (__assign({ pointerEvents: props.open ? "all" : "none" }, (props.style || {})));
+};