@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

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

@@ -0,0 +1,29 @@
+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 DatePickerProps = 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;
+};
+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/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.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,5 +1,5 @@
 import { c as a } from "../../index-D29mdTf5.js";
-const i = a(["h-[1px]", "bg-zinc-200", "w-full"], {
+const i = a(["h-px", "bg-zinc-200", "w-full"], {
   variants: {
     variant: {
       default: ""

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