@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/Datepicker/DatePicker.types.d.ts

@@ -0,0 +1,31 @@
+import { VariantProps } from 'class-variance-authority';
+import { getAllTimezones } from 'countries-and-timezones';
+import { DayPickerProps as DayPickerPrimitiveProps } from 'react-day-picker';
+import { datePickerVariants } from './DatePicker.variants';
+type TimeZone = keyof ReturnType<typeof getAllTimezones>;
+/**
+ * Props for the DatePicker component.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   defaultSelected={new Date()}
+ *   onSelect={(date) => setSelectedDate(date)}
+ * />
+ * ```
+ */
+export type Props = Omit<DayPickerPrimitiveProps, 'mode'> & VariantProps<typeof datePickerVariants> & {
+    /** CSS classes for the navigation arrows */
+    arrowClassName?: string;
+    /** CSS classes for the months container */
+    monthsClassName?: string;
+    /** Timezone for date display */
+    timeZone?: TimeZone;
+    /** Initial selected date */
+    defaultSelected?: Date;
+    /** Callback when a date is selected */
+    onSelect?: (date: Date) => void;
+};
+/** @deprecated Use Props instead */
+export type DatePickerProps = Props;
+export {};

package/dist/components/Datepicker/DatePicker.variants.d.ts

@@ -0,0 +1 @@
+export declare const datePickerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Datepicker/DatePicker.variants.js

@@ -1,5 +1,5 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const r = t("w-fit py-4 px-6");
+import { t as a } from "../../dist-DtEbXv47.js";
+var t = a("w-fit py-4 px-6");
 export {
-  r as datePickerVariants
+  t as datePickerVariants
 };

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,17 @@
+import { FC, HTMLAttributes } from 'react';
+/**
+ * A horizontal divider/separator line.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <p>Section 1</p>
+ *   <Divider />
+ *   <p>Section 2</p>
+ * </div>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-divider--docs Storybook}
+ */
+declare const Divider: FC<HTMLAttributes<HTMLDivElement>>;
+export { Divider };

package/dist/components/Divider/Divider.js

@@ -1,10 +1,10 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as o } from "../../utils/index.js";
-import { dividerVariants as a } from "./Divider.variants.js";
-const d = ({
-  className: i,
+import { t as a } from "../../utils-DHuiYnx1.js";
+import { dividerVariants as m } from "./Divider.variants.js";
+import { jsx as o } from "react/jsx-runtime";
+var d = ({ className: i, ...r }) => /* @__PURE__ */ o("div", {
+  className: a(m({ className: i })),
   ...r
-}) => /* @__PURE__ */ m("div", { className: o(a({ className: i })), ...r });
+});
 d.displayName = "Divider";
 export {
   d as Divider

package/dist/components/Divider/Divider.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const dividerVariants: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Divider/Divider.variants.js

@@ -1,14 +1,12 @@
-import { c as a } from "../../index-D29mdTf5.js";
-const i = a(["h-[1px]", "bg-zinc-200", "w-full"], {
-  variants: {
-    variant: {
-      default: ""
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
+import { t as a } from "../../dist-DtEbXv47.js";
+var r = a([
+  "h-px",
+  "bg-zinc-200",
+  "w-full"
+], {
+  variants: { variant: { default: "" } },
+  defaultVariants: { variant: "default" }
 });
 export {
-  i as dividerVariants
+  r as dividerVariants
 };

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

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { BodyProps, FooterProps, HeaderProps } from './components';
+import { Props } from './Drawer.types';
+/**
+ * A drawer/panel component that slides in from the side of the screen.
+ * Supports Header, Body, and Footer sub-components, keyboard navigation (Escape to close),
+ * and optional resizing.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+ *
+ * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Drawer.Header>Panel Title</Drawer.Header>
+ *   <Drawer.Body>
+ *     Panel content goes here.
+ *   </Drawer.Body>
+ *   <Drawer.Footer>
+ *     <Button variant="secondary" onClick={() => setIsOpen(false)}>
+ *       Cancel
+ *     </Button>
+ *     <Button onClick={handleConfirm}>Confirm</Button>
+ *   </Drawer.Footer>
+ * </Drawer>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-drawer--docs Storybook}
+ */
+declare const Drawer: FC<Props> & {
+    Header: FC<HeaderProps>;
+    Body: FC<BodyProps>;
+    Footer: FC<FooterProps>;
+};
+export { Drawer };

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,76 @@
+"use client";
+import { t as g } from "../../x-BwIi6Wii.js";
+import { t as z } from "../../dist-CBnErrr1.js";
+import { t as o } from "../../utils-DHuiYnx1.js";
+import { t as B } from "../../Combination-DUTBK_qM.js";
+import { DrawerContext as C } from "./contexts/Drawer.context.js";
+import { Header as F } from "./components/Header/Header.js";
+import { Body as I } from "./components/Body/Body.js";
+import { Footer as M } from "./components/Footer/Footer.js";
+import { buttonCloseVariants as j, drawerVariants as k, overlayVariants as A, resizeHandleVariants as K } from "./Drawer.variants.js";
+import "./constants/index.js";
+import { useDrawer as P } from "./hooks/useDrawer.js";
+import { useId as R, useMemo as T } from "react";
+import { createPortal as W } from "react-dom";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+var d = ({ canResize: t = !1, children: s, className: f, classNames: r, container: u, isOpen: c, maxWidth: p, minWidth: h, position: i = "right", showCloseButton: w = !0, theme: y, onClose: a }) => {
+  const l = R(), { handleKeyDown: v, handleMouseDown: b, isAnimating: m, isVisible: D, translateClass: x, width: V } = P({
+    canResize: t,
+    defaultWidth: 500,
+    isOpen: c,
+    maxWidth: p,
+    minWidth: h,
+    position: i,
+    onClose: a
+  }), H = T(() => ({
+    classNames: r,
+    headerId: l
+  }), [r, l]);
+  return D ? W(/* @__PURE__ */ e(C.Provider, {
+    value: H,
+    children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ n("div", {
+      className: o("fixed inset-0 z-40", r?.root),
+      "data-theme": y,
+      children: [/* @__PURE__ */ e("div", {
+        className: o(A(), {
+          "opacity-50": m,
+          "opacity-0": !m
+        }, r?.overlay),
+        "aria-hidden": "true",
+        onClick: a,
+        role: "presentation"
+      }), /* @__PURE__ */ n("div", {
+        className: o(k({ position: i }), x, r?.panel, f),
+        style: { width: t ? V : 500 },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": l,
+        children: [
+          t && /* @__PURE__ */ e("button", {
+            type: "button",
+            "aria-label": "Resize drawer",
+            className: o(K({ position: i }), r?.resizeHandle),
+            onMouseDown: b,
+            onKeyDown: v
+          }),
+          w && /* @__PURE__ */ n("button", {
+            className: o(j(), r?.closeButton),
+            onClick: a,
+            type: "button",
+            children: [/* @__PURE__ */ e(g, { size: 20 }), /* @__PURE__ */ e(z, { children: "Dismiss drawer" })]
+          }),
+          /* @__PURE__ */ e("div", {
+            className: o("flex flex-1 flex-col h-full overflow-hidden", r?.content),
+            children: s
+          })
+        ]
+      })]
+    }) })
+  }), u || document.body) : null;
+};
+d.Header = F;
+d.Body = I;
+d.Footer = M;
+export {
+  d as Drawer
+};

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

@@ -0,0 +1,65 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { drawerVariants } from './Drawer.variants';
+import { Theme } from '../../domain/theme';
+/**
+ * Custom class names for each Drawer element.
+ */
+export type ClassNames = {
+    /** Class for the drawer body section */
+    body?: string;
+    /** Class for the close button */
+    closeButton?: string;
+    /** Class for the content wrapper (contains header, body, footer) */
+    content?: string;
+    /** Class for the drawer footer section */
+    footer?: string;
+    /** Class for the drawer header section */
+    header?: string;
+    /** Class for the background overlay */
+    overlay?: string;
+    /** Class for the drawer panel */
+    panel?: string;
+    /** Class for the resize handle */
+    resizeHandle?: string;
+    /** Class for the root wrapper */
+    root?: string;
+};
+/**
+ * Props for the Drawer component.
+ *
+ * @example
+ * ```tsx
+ * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Drawer.Header>Title</Drawer.Header>
+ *   <Drawer.Body>Content</Drawer.Body>
+ *   <Drawer.Footer>
+ *     <Button onClick={() => setIsOpen(false)}>Close</Button>
+ *   </Drawer.Footer>
+ * </Drawer>
+ * ```
+ */
+export type Props = PropsWithChildren & VariantProps<typeof drawerVariants> & {
+    /** Enable resizable drawer */
+    canResize?: boolean;
+    /** Additional CSS classes for the drawer panel */
+    className?: string;
+    /** Custom class names for each element */
+    classNames?: ClassNames;
+    /** DOM element to portal the drawer into (defaults to document.body) */
+    container?: Element | DocumentFragment;
+    /** Whether the drawer is open */
+    isOpen?: boolean;
+    /** Maximum width when resizable (default: 800) */
+    maxWidth?: number;
+    /** Minimum width when resizable (default: 400) */
+    minWidth?: number;
+    /** Position of the drawer */
+    position?: 'left' | 'right';
+    /** Show the X close button in the corner */
+    showCloseButton?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Callback when drawer is closed (Escape key, overlay click, or close button) */
+    onClose?: () => void;
+};

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

@@ -0,0 +1,8 @@
+export declare const drawerVariants: (props?: ({
+    position?: "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const overlayVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const buttonCloseVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const resizeHandleVariants: (props?: ({
+    position?: "left" | "right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1,78 @@
+import { t } from "../../dist-DtEbXv47.js";
+var a = 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" }
+}), e = t([
+  "fixed",
+  "inset-0",
+  "z-40",
+  "bg-black",
+  "transition-opacity",
+  "duration-300"
+]), o = 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 {
+  o as buttonCloseVariants,
+  a as drawerVariants,
+  e 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,15 @@
+import { t as e } from "../../../../utils-DHuiYnx1.js";
+import { useDrawerContext as a } from "../../contexts/Drawer.context.js";
+import { memo as t } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var p = t(({ children: o, className: r }) => {
+  const { classNames: m } = a();
+  return /* @__PURE__ */ s("div", {
+    className: e("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 r } from "./Body.js";
+export {
+  r 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,15 @@
+import { t } from "../../../../utils-DHuiYnx1.js";
+import { useDrawerContext as m } from "../../contexts/Drawer.context.js";
+import { memo as a } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var i = a(({ children: r, className: o }) => {
+  const { classNames: e } = m();
+  return /* @__PURE__ */ s("div", {
+    className: t("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 r } from "./Footer.js";
+export {
+  r 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,16 @@
+import { t as d } from "../../../../utils-DHuiYnx1.js";
+import { useDrawerContext as s } from "../../contexts/Drawer.context.js";
+import { memo as t } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var p = t(({ children: r, className: e, id: a }) => {
+  const { classNames: o, headerId: m } = s();
+  return /* @__PURE__ */ i("div", {
+    id: a ?? m,
+    className: d("flex-shrink-0", "border-b", "border-slate-200", "dark:border-metal-700", "p-4", o?.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 e } from "./Header.js";
+export {
+  e 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 r } from "./Header/Header.js";
+import { Body as t } from "./Body/Body.js";
+import { Footer as p } from "./Footer/Footer.js";
+export {
+  t as Body,
+  p as Footer,
+  r 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 @@
+var 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 e, useContext as t } from "react";
+var r = e({}), a = () => t(r);
+export {
+  r as DrawerContext,
+  a 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 e, useDrawerContext as t } from "./Drawer.context.js";
+export {
+  e as DrawerContext,
+  t 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 e } from "./useDrawer.js";
+export {
+  e 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,62 @@
+import "../constants/index.js";
+import { useCallback as D, useEffect as c, useMemo as v, useRef as w, useState as E } from "react";
+var H = ({ canResize: n = !1, defaultWidth: I = 500, isOpen: s, maxWidth: u = 800, minWidth: l = 400, position: t = "right", onClose: M }) => {
+  const [T, g] = E(!1), [a, h] = E(!1), [L, f] = E(I), d = w(!1), i = w(() => {
+  }), m = w(() => {
+  });
+  c(() => {
+    let e;
+    return s ? (g(!0), e = setTimeout(() => h(!0), 10)) : (h(!1), e = setTimeout(() => g(!1), 300)), () => {
+      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 = D(() => {
+    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 _ = D(() => {
+    d.current = !0, document.addEventListener("mousemove", i.current), document.addEventListener("mouseup", m.current), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
+  }, []), b = D((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 + 20))) : A && (e.preventDefault(), f((y) => Math.max(l, y - 20)));
+  }, [
+    n,
+    t,
+    u,
+    l
+  ]);
+  return c(() => o, [o]), {
+    isAnimating: a,
+    isVisible: T,
+    width: L,
+    translateClass: v(() => a ? "translate-x-0" : t === "left" ? "-translate-x-full" : "translate-x-full", [a, t]),
+    handleMouseDown: _,
+    handleKeyDown: b
+  };
+};
+export {
+  H as useDrawer
+};