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

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.variants.js

@@ -0,0 +1,89 @@
+import { c as t } from "../../../../index-D29mdTf5.js";
+const r = t(
+  [
+    "flex",
+    "flex-1",
+    "items-start",
+    "cursor-pointer",
+    "select-none",
+    "transition-colors",
+    "p-2",
+    "border-metal-700",
+    "border-t",
+    "border-b",
+    "bg-metal-900",
+    "first:border-l",
+    "first:rounded-l-lg",
+    "last:border-r",
+    "last:rounded-r-lg",
+    "focus:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-aurora-500",
+    "focus-visible:ring-inset"
+  ],
+  {
+    variants: {
+      disabled: {
+        true: "pointer-events-none opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), s = t([
+  "absolute",
+  "inset-2",
+  "bg-metal-800",
+  "rounded-lg"
+]), a = t(
+  ["flex", "flex-col", "flex-1", "rounded-lg", "px-4", "py-2"],
+  {
+    variants: {
+      hasDescription: {
+        true: "items-start text-left justify-start",
+        false: "items-center text-center justify-center"
+      }
+    },
+    defaultVariants: {
+      hasDescription: !1
+    }
+  }
+), n = t(
+  [
+    "text-sm",
+    "font-medium",
+    "leading-5",
+    "tracking-[0.1px]",
+    "flex",
+    "items-center",
+    "gap-2",
+    "transition-colors",
+    "ease-in-out"
+  ],
+  {
+    variants: {
+      selected: {
+        true: "text-aurora-500",
+        false: "text-metal-50"
+      }
+    },
+    defaultVariants: {
+      selected: !1
+    }
+  }
+), o = t([
+  "text-sm",
+  "font-normal",
+  "leading-5",
+  "tracking-[0.15px]",
+  "text-metal-300"
+]);
+export {
+  o as buttonGroupDescriptionVariants,
+  a as buttonGroupItemContentVariants,
+  r as buttonGroupItemVariants,
+  n as buttonGroupLabelVariants,
+  s as buttonGroupPillVariants
+};

package/dist/components/ButtonGroup/components/ButtonGroupItem/index.d.ts

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

package/dist/components/ButtonGroup/components/ButtonGroupItem/index.js

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

package/dist/components/ButtonGroup/components/ButtonGroupLabel/ButtonGroupLabel.d.ts

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

package/dist/components/ButtonGroup/components/ButtonGroupLabel/ButtonGroupLabel.js

@@ -0,0 +1,45 @@
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import { memo as l } from "react";
+import { cn as t } from "../../../../utils/index.js";
+import { Typography as e } from "../../../Typography/Typography.js";
+const c = l(
+  ({ className: o, htmlFor: r, isRequired: m, label: a, requiredClassName: n }) => /* @__PURE__ */ p(
+    e,
+    {
+      component: "label",
+      variant: "labelLarge",
+      htmlFor: r,
+      className: t(
+        "cursor-pointer",
+        "flex",
+        "gap-1",
+        "text-sm",
+        "font-medium",
+        "text-metal-50",
+        o
+      ),
+      children: [
+        a,
+        " ",
+        m && /* @__PURE__ */ s(
+          e,
+          {
+            component: "span",
+            className: t(
+              "text-red-600",
+              "dark:text-red-500",
+              "text-xs",
+              "mt-0.5",
+              n
+            ),
+            children: "*"
+          }
+        )
+      ]
+    }
+  )
+);
+c.displayName = "KonstructButtonGroupLabel";
+export {
+  c as ButtonGroupLabel
+};

package/dist/components/ButtonGroup/components/ButtonGroupLabel/ButtonGroupLabel.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type Props = {
+    className?: string;
+    htmlFor: string;
+    isRequired?: boolean;
+    label: ReactNode | string;
+    requiredClassName?: string;
+};

package/dist/components/ButtonGroup/components/ButtonGroupLabel/index.d.ts

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

package/dist/components/ButtonGroup/components/ButtonGroupLabel/index.js

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

package/dist/components/ButtonGroup/components/ButtonGroupMessage/ButtonGroupMessage.d.ts

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

package/dist/components/ButtonGroup/components/ButtonGroupMessage/ButtonGroupMessage.js

@@ -0,0 +1,37 @@
+import { jsx as o } from "react/jsx-runtime";
+import { memo as m } from "react";
+import { cn as r } from "../../../../utils/index.js";
+import { Typography as e } from "../../../Typography/Typography.js";
+const p = m(
+  ({ error: t, errorClassName: s, helperText: n, helperTextClassName: a }) => typeof t == "string" && t.length > 0 ? /* @__PURE__ */ o(
+    e,
+    {
+      component: "span",
+      className: r(
+        "text-xs",
+        "tracking-normal",
+        "text-red-400",
+        s
+      ),
+      children: t
+    }
+  ) : n ? /* @__PURE__ */ o(
+    e,
+    {
+      component: "span",
+      variant: "body1",
+      className: r(
+        "text-xs",
+        "text-metal-300",
+        "select-none",
+        "tracking-normal",
+        a
+      ),
+      children: n
+    }
+  ) : null
+);
+p.displayName = "KonstructButtonGroupMessage";
+export {
+  p as ButtonGroupMessage
+};

package/dist/components/ButtonGroup/components/ButtonGroupMessage/ButtonGroupMessage.types.d.ts

@@ -0,0 +1,6 @@
+export type Props = {
+    error?: string;
+    errorClassName?: string;
+    helperText?: string;
+    helperTextClassName?: string;
+};

package/dist/components/ButtonGroup/components/ButtonGroupMessage/index.d.ts

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

package/dist/components/ButtonGroup/components/ButtonGroupMessage/index.js

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

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

@@ -0,0 +1,3 @@
+export { ButtonGroupItem } from './ButtonGroupItem';
+export { ButtonGroupLabel } from './ButtonGroupLabel';
+export { ButtonGroupMessage } from './ButtonGroupMessage';

package/dist/components/ButtonGroup/components/index.js

@@ -0,0 +1,8 @@
+import { ButtonGroupItem as r } from "./ButtonGroupItem/ButtonGroupItem.js";
+import { ButtonGroupLabel as p } from "./ButtonGroupLabel/ButtonGroupLabel.js";
+import { ButtonGroupMessage as m } from "./ButtonGroupMessage/ButtonGroupMessage.js";
+export {
+  r as ButtonGroupItem,
+  p as ButtonGroupLabel,
+  m as ButtonGroupMessage
+};

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

@@ -0,0 +1,2 @@
+export { useButtonGroup } from './useButtonGroup';
+export type { AnimationDirection, UseButtonGroupProps, UseButtonGroupReturn, } from './useButtonGroup.types';

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

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

package/dist/components/ButtonGroup/hooks/useButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import { UseButtonGroupProps, UseButtonGroupReturn } from './useButtonGroup.types';
+export type { AnimationDirection } from './useButtonGroup.types';
+export declare const useButtonGroup: ({ defaultValue, disabled, options, value, onValueChange, }: UseButtonGroupProps) => UseButtonGroupReturn;

package/dist/components/ButtonGroup/hooks/useButtonGroup.js

@@ -0,0 +1,67 @@
+import { useId as A, useRef as S, useState as D, useCallback as d } from "react";
+const R = ({
+  defaultValue: g,
+  disabled: l,
+  options: o,
+  value: f,
+  onValueChange: x
+}) => {
+  const p = A(), I = S(null), u = f !== void 0, [k, w] = D(
+    () => g
+  ), a = u ? f : k, [b, m] = D("none"), s = d(
+    (e) => e ? o.findIndex((n) => n.value === e) : -1,
+    [o]
+  ), i = d(
+    (e) => {
+      if (l) return;
+      const n = s(a), t = s(e);
+      n !== -1 && t !== -1 && m(t > n ? "right" : "left"), u || w(e), x?.(e);
+    },
+    [l, s, u, x, a]
+  ), v = d(
+    (e, n) => {
+      const t = o.filter(
+        (c) => !c.disabled && !l
+      ), h = t.findIndex(
+        (c) => c.value === o[n].value
+      );
+      let r = -1;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault(), r = (h + 1) % t.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault(), r = (h - 1 + t.length) % t.length;
+          break;
+        case "Home":
+          e.preventDefault(), r = 0;
+          break;
+        case "End":
+          e.preventDefault(), r = t.length - 1;
+          break;
+        default:
+          return;
+      }
+      if (r >= 0) {
+        const c = t[r];
+        i(c.value), I.current?.querySelector(
+          `[data-value="${c.value}"]`
+        )?.focus();
+      }
+    },
+    [l, i, o]
+  );
+  return {
+    animationDirection: b,
+    groupRef: I,
+    id: p,
+    selected: a,
+    handleKeyDown: v,
+    handleSelect: i
+  };
+};
+export {
+  R as useButtonGroup
+};

package/dist/components/ButtonGroup/hooks/useButtonGroup.types.d.ts

@@ -0,0 +1,18 @@
+import { KeyboardEvent, RefObject } from 'react';
+import { ButtonGroupOption } from '../ButtonGroup.types';
+export type AnimationDirection = 'left' | 'right' | 'none';
+export type UseButtonGroupProps = {
+    defaultValue?: string;
+    disabled?: boolean;
+    options: ButtonGroupOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+export type UseButtonGroupReturn = {
+    animationDirection: AnimationDirection;
+    groupRef: RefObject<HTMLDivElement | null>;
+    id: string;
+    selected: string | undefined;
+    handleKeyDown: (event: KeyboardEvent<HTMLButtonElement>, currentIndex: number) => void;
+    handleSelect: (value: string) => void;
+};

package/dist/components/DateRangePicker/components/CalendarPanel/components/IndependentModeCalendar/IndependentModeCalendar.js

@@ -7,7 +7,7 @@ import { CalendarDivider as tt } from "../CalendarDivider/CalendarDivider.js";
 import { CalendarMonth as d } from "../CalendarMonth/CalendarMonth.js";
 import { NavigationButton as g } from "../NavigationButton/NavigationButton.js";
 import { useIndependentCarousel as nt } from "../../hooks/useIndependentCarousel.js";
-import { m as et } from "../../../../../../proxy-Drz23HDt.js";
+import { m as et } from "../../../../../../proxy-i19-YB39.js";
 const at = ({
   className: b,
   calendarWidth: x = 550,

package/dist/components/DateRangePicker/components/CalendarPanel/components/TogetherModeCalendar/TogetherModeCalendar.js

@@ -6,7 +6,7 @@ import { CalendarDivider as F } from "../CalendarDivider/CalendarDivider.js";
 import { CalendarMonth as G } from "../CalendarMonth/CalendarMonth.js";
 import { NavigationButton as m } from "../NavigationButton/NavigationButton.js";
 import { useTogetherCarousel as H } from "../../hooks/useTogetherCarousel.js";
-import { m as R } from "../../../../../../proxy-Drz23HDt.js";
+import { m as R } from "../../../../../../proxy-i19-YB39.js";
 const S = ({
   className: s,
   calendarWidth: h = 550,

package/dist/components/DateRangePicker/components/PresetPanel/PresetPanel.js

@@ -1,11 +1,11 @@
 import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { useCallback as h, useMemo as k } from "react";
+import { useCallback as h, useMemo as x } from "react";
 import { cn as t } from "../../../../utils/index.js";
-import { RadioGroup as x } from "../../../RadioGroup/RadioGroup.js";
-import { Typography as y } from "../../../Typography/Typography.js";
-import { presetTitleVariants as g, presetPanelVariants as T } from "./PresetPanel.variants.js";
+import { RadioGroup as y } from "../../../RadioGroup/RadioGroup.js";
+import { Typography as g } from "../../../Typography/Typography.js";
+import { presetTitleVariants as k, presetPanelVariants as T } from "./PresetPanel.variants.js";
 import { useDateRangePicker as b } from "../../contexts/date-range-picker.hook.js";
-import { PRESET_OPTIONS as C } from "../../constants/presets.js";
+import { PRESET_OPTIONS as v } from "../../constants/presets.js";
 const E = {
   today: "today",
   "current-month": "currentMonth",
@@ -24,8 +24,8 @@ const E = {
       o(e);
     },
     [o]
-  ), u = k(
-    () => C.map((e) => {
+  ), u = x(
+    () => v.map((e) => {
       const n = E[e.value], P = n && r?.[n];
       return {
         value: e.value,
@@ -37,20 +37,20 @@ const E = {
   );
   return /* @__PURE__ */ f("div", { className: t(T({ className: l }), a?.root), children: [
     /* @__PURE__ */ i(
-      y,
+      g,
       {
         component: "span",
-        className: t(g(), a?.title),
+        className: t(k(), a?.title),
         "aria-label": p,
         children: m
       }
     ),
     /* @__PURE__ */ i(
-      x,
+      y,
       {
         name: "date-range-preset",
         options: u,
-        defaultChecked: c,
+        value: c,
         onValueChange: d,
         direction: "col",
         wrapperClassName: t("gap-4 pl-2", a?.radioGroup),

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;