@konstructio/ui 0.1.2-alpha.54 → 0.1.2-alpha.55

package/dist/components/Drawer/Drawer.variants.js

@@ -0,0 +1,92 @@
+import { c as t } from "../../index-D29mdTf5.js";
+const o = t(
+  [
+    "bg-white",
+    "dark:bg-metal-900",
+    "duration-300",
+    "ease-in-out",
+    "fixed",
+    "flex",
+    "flex-col",
+    "group/drawer",
+    "inset-y-0",
+    "shadow-xl",
+    "transform",
+    "transition-transform",
+    "z-50"
+  ],
+  {
+    variants: {
+      position: {
+        left: [
+          "left-0",
+          "border-r",
+          "border-slate-200",
+          "dark:border-metal-700"
+        ],
+        right: [
+          "right-0",
+          "border-l",
+          "border-slate-200",
+          "dark:border-metal-700"
+        ]
+      }
+    },
+    defaultVariants: {
+      position: "right"
+    }
+  }
+), a = t([
+  "fixed",
+  "inset-0",
+  "z-40",
+  "bg-black",
+  "transition-opacity",
+  "duration-300"
+]), e = t([
+  "absolute",
+  "right-3",
+  "top-3",
+  "cursor-pointer",
+  "text-slate-500",
+  "hover:text-slate-700",
+  "dark:text-metal-400",
+  "dark:hover:text-metal-300",
+  "transition-colors",
+  "z-10"
+]), i = t(
+  [
+    "absolute",
+    "bg-slate-200",
+    "dark:bg-metal-700",
+    "border-none",
+    "cursor-col-resize",
+    "h-full",
+    "opacity-0",
+    "p-0",
+    "top-0",
+    "transition-opacity",
+    "w-1",
+    "z-50",
+    "group-hover/drawer:opacity-100",
+    "hover:opacity-100!",
+    "focus:outline-none"
+  ],
+  {
+    variants: {
+      position: {
+        left: ["right-0"],
+        right: ["left-0"]
+      }
+    },
+    defaultVariants: {
+      position: "right"
+    }
+  }
+);
+export {
+  e as buttonCloseVariants,
+  o as drawerVariants,
+  a as overlayVariants,
+  i as resizeHandleVariants
+};

package/dist/components/Drawer/components/Body/Body.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './Body.types';
+export declare const Body: FC<Props>;

package/dist/components/Drawer/components/Body/Body.js

@@ -0,0 +1,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import { memo as t } from "react";
+import { cn as s } from "../../../../utils/index.js";
+import { useDrawerContext as a } from "../../contexts/Drawer.context.js";
+const p = t(({ children: o, className: r }) => {
+  const { classNames: m } = a();
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: s(
+        "flex-1",
+        "overflow-y-auto",
+        "p-4",
+        m?.body,
+        r
+      ),
+      children: o
+    }
+  );
+});
+p.displayName = "Drawer.Body";
+export {
+  p as Body
+};

package/dist/components/Drawer/components/Body/Body.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type Props = {
+    /** Content of the body section */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};

package/dist/components/Drawer/components/Body/index.d.ts

@@ -0,0 +1,2 @@
+export { Body } from './Body';
+export type { Props as BodyProps } from './Body.types';

package/dist/components/Drawer/components/Body/index.js

@@ -0,0 +1,4 @@
+import { Body as d } from "./Body.js";
+export {
+  d as Body
+};

package/dist/components/Drawer/components/Footer/Footer.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './Footer.types';
+export declare const Footer: FC<Props>;

package/dist/components/Drawer/components/Footer/Footer.js

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import { memo as m } from "react";
+import { cn as s } from "../../../../utils/index.js";
+import { useDrawerContext as a } from "../../contexts/Drawer.context.js";
+const i = m(({ children: r, className: o }) => {
+  const { classNames: e } = a();
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: s(
+        "flex-shrink-0",
+        "border-t",
+        "border-slate-200",
+        "dark:border-metal-700",
+        "p-4",
+        e?.footer,
+        o
+      ),
+      children: r
+    }
+  );
+});
+i.displayName = "Drawer.Footer";
+export {
+  i as Footer
+};

package/dist/components/Drawer/components/Footer/Footer.types.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type Props = {
+    /** Content of the footer section */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};

package/dist/components/Drawer/components/Footer/index.d.ts

@@ -0,0 +1,2 @@
+export { Footer } from './Footer';
+export type { Props as FooterProps } from './Footer.types';

package/dist/components/Drawer/components/Footer/index.js

@@ -0,0 +1,4 @@
+import { Footer as e } from "./Footer.js";
+export {
+  e as Footer
+};

package/dist/components/Drawer/components/Header/Header.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './Header.types';
+export declare const Header: FC<Props>;

package/dist/components/Drawer/components/Header/Header.js

@@ -0,0 +1,27 @@
+import { jsx as d } from "react/jsx-runtime";
+import { memo as s } from "react";
+import { cn as t } from "../../../../utils/index.js";
+import { useDrawerContext as i } from "../../contexts/Drawer.context.js";
+const p = s(({ children: r, className: e, id: o }) => {
+  const { classNames: a, headerId: m } = i();
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      id: o ?? m,
+      className: t(
+        "flex-shrink-0",
+        "border-b",
+        "border-slate-200",
+        "dark:border-metal-700",
+        "p-4",
+        a?.header,
+        e
+      ),
+      children: r
+    }
+  );
+});
+p.displayName = "Drawer.Header";
+export {
+  p as Header
+};

package/dist/components/Drawer/components/Header/Header.types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type Props = {
+    /** Content of the header section */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** ID for accessibility (aria-labelledby) */
+    id?: string;
+};

package/dist/components/Drawer/components/Header/index.d.ts

@@ -0,0 +1,2 @@
+export { Header } from './Header';
+export type { Props as HeaderProps } from './Header.types';

package/dist/components/Drawer/components/Header/index.js

@@ -0,0 +1,4 @@
+import { Header as o } from "./Header.js";
+export {
+  o as Header
+};

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

@@ -0,0 +1,3 @@
+export { Header, type HeaderProps } from './Header';
+export { Body, type BodyProps } from './Body';
+export { Footer, type FooterProps } from './Footer';

package/dist/components/Drawer/components/index.js

@@ -0,0 +1,8 @@
+import { Header as e } from "./Header/Header.js";
+import { Body as f } from "./Body/Body.js";
+import { Footer as p } from "./Footer/Footer.js";
+export {
+  f as Body,
+  p as Footer,
+  e as Header
+};

package/dist/components/Drawer/constants/index.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_WIDTH = 500;
+export declare const DEFAULT_MIN_WIDTH = 400;
+export declare const DEFAULT_MAX_WIDTH = 800;
+export declare const ANIMATION_DELAY_MS = 10;
+export declare const ANIMATION_DURATION_MS = 300;
+export declare const KEYBOARD_RESIZE_STEP = 20;

package/dist/components/Drawer/constants/index.js

@@ -0,0 +1,9 @@
+const A = 500, _ = 400, I = 800, T = 10, D = 300, E = 20;
+export {
+  T as ANIMATION_DELAY_MS,
+  D as ANIMATION_DURATION_MS,
+  I as DEFAULT_MAX_WIDTH,
+  _ as DEFAULT_MIN_WIDTH,
+  A as DEFAULT_WIDTH,
+  E as KEYBOARD_RESIZE_STEP
+};

package/dist/components/Drawer/contexts/Drawer.context.d.ts

@@ -0,0 +1,7 @@
+import { ClassNames } from '../Drawer.types';
+export type ContextValue = {
+    classNames?: ClassNames;
+    headerId?: string;
+};
+export declare const DrawerContext: import('react').Context<ContextValue>;
+export declare const useDrawerContext: () => ContextValue;

package/dist/components/Drawer/contexts/Drawer.context.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as e } from "react";
+const o = t({}), n = () => e(o);
+export {
+  o as DrawerContext,
+  n as useDrawerContext
+};

package/dist/components/Drawer/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawerContext, useDrawerContext } from './Drawer.context';
+export type { ContextValue } from './Drawer.context';

package/dist/components/Drawer/contexts/index.js

@@ -0,0 +1,5 @@
+import { DrawerContext as t, useDrawerContext as o } from "./Drawer.context.js";
+export {
+  t as DrawerContext,
+  o as useDrawerContext
+};

package/dist/components/Drawer/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useDrawer } from './useDrawer';
+export type { UseDrawerProps, UseDrawerReturn } from './useDrawer.types';

package/dist/components/Drawer/hooks/index.js

@@ -0,0 +1,4 @@
+import { useDrawer as o } from "./useDrawer.js";
+export {
+  o as useDrawer
+};

package/dist/components/Drawer/hooks/useDrawer.d.ts

@@ -0,0 +1,2 @@
+import { UseDrawerProps, UseDrawerReturn } from './useDrawer.types';
+export declare const useDrawer: ({ canResize, defaultWidth, isOpen, maxWidth, minWidth, position, onClose, }: UseDrawerProps) => UseDrawerReturn;

package/dist/components/Drawer/hooks/useDrawer.js

@@ -0,0 +1,66 @@
+import { useState as D, useRef as w, useEffect as c, useCallback as E, useMemo as S } from "react";
+import { DEFAULT_WIDTH as k, ANIMATION_DELAY_MS as N, ANIMATION_DURATION_MS as K, DEFAULT_MIN_WIDTH as U, DEFAULT_MAX_WIDTH as x, KEYBOARD_RESIZE_STEP as I } from "../constants/index.js";
+const X = ({
+  canResize: n = !1,
+  defaultWidth: T = k,
+  isOpen: s,
+  maxWidth: u = x,
+  minWidth: l = U,
+  position: t = "right",
+  onClose: M
+}) => {
+  const [L, g] = D(!1), [a, h] = D(!1), [_, f] = D(T), d = w(!1), i = w(() => {
+  }), m = w(() => {
+  });
+  c(() => {
+    let e;
+    return s ? (g(!0), e = setTimeout(() => h(!0), N)) : (h(!1), e = setTimeout(() => g(!1), K)), () => {
+      clearTimeout(e);
+    };
+  }, [s]), c(() => {
+    if (!s) return;
+    const e = new AbortController(), r = (A) => {
+      A.code === "Escape" && M?.();
+    };
+    return window.addEventListener("keydown", r, {
+      signal: e.signal
+    }), () => {
+      e.abort();
+    };
+  }, [s, M]);
+  const o = E(() => {
+    document.removeEventListener("mousemove", i.current), document.removeEventListener("mouseup", m.current), document.body.style.cursor = "", document.body.style.userSelect = "";
+  }, []);
+  c(() => {
+    i.current = (e) => {
+      if (!d.current || !n) return;
+      let r;
+      t === "right" ? r = window.innerWidth - e.clientX : r = e.clientX, r = Math.max(l, Math.min(u, r)), f(r);
+    }, m.current = () => {
+      d.current = !1, o();
+    };
+  }, [t, l, u, n, o]);
+  const b = E(() => {
+    d.current = !0, document.addEventListener("mousemove", i.current), document.addEventListener("mouseup", m.current), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+  }, []), v = E(
+    (e) => {
+      if (!n) return;
+      const r = t === "right" && e.key === "ArrowLeft" || t === "left" && e.key === "ArrowRight", A = t === "right" && e.key === "ArrowRight" || t === "left" && e.key === "ArrowLeft";
+      r ? (e.preventDefault(), f((y) => Math.min(u, y + I))) : A && (e.preventDefault(), f((y) => Math.max(l, y - I)));
+    },
+    [n, t, u, l]
+  );
+  c(() => o, [o]);
+  const R = S(() => a ? "translate-x-0" : t === "left" ? "-translate-x-full" : "translate-x-full", [a, t]);
+  return {
+    isAnimating: a,
+    isVisible: L,
+    width: _,
+    translateClass: R,
+    handleMouseDown: b,
+    handleKeyDown: v
+  };
+};
+export {
+  X as useDrawer
+};

package/dist/components/Drawer/hooks/useDrawer.types.d.ts

@@ -0,0 +1,30 @@
+export type UseDrawerProps = {
+    /** Enable resizable drawer */
+    canResize?: boolean;
+    /** Default width */
+    defaultWidth?: number;
+    /** Whether the drawer is open */
+    isOpen?: boolean;
+    /** Maximum width when resizable */
+    maxWidth?: number;
+    /** Minimum width when resizable */
+    minWidth?: number;
+    /** Position of the drawer */
+    position?: 'left' | 'right';
+    /** Callback when drawer is closed */
+    onClose?: () => void;
+};
+export type UseDrawerReturn = {
+    /** Whether the drawer is animating (for CSS transitions) */
+    isAnimating: boolean;
+    /** Whether the drawer is visible in the DOM */
+    isVisible: boolean;
+    /** Current width of the drawer */
+    width: number;
+    /** The translate class based on animation state */
+    translateClass: string;
+    /** Handler for resize mouse down event */
+    handleMouseDown: () => void;
+    /** Handler for resize keyboard events */
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+};