@dmsi/wedgekit-react 0.0.5 → 0.0.7

package/dist/chunk-HL2IYNCS.js

@@ -1,50 +0,0 @@
-import {
-  typography
-} from "./chunk-KX3O6GJ6.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Display1.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-var Display1 = (_a) => {
-  var _b = _a, {
-    className,
-    children,
-    as = "h1",
-    color,
-    align
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "as",
-    "color",
-    "align"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ jsx(
-    Element,
-    __spreadProps(__spreadValues({
-      className: clsx(
-        typography.display1,
-        className,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right"
-      ),
-      style: __spreadProps(__spreadValues({}, props.style), {
-        color: color ? `var(--color-${color})` : void 0
-      })
-    }, props), {
-      children
-    })
-  );
-};
-Display1.displayName = "Display1";
-
-export {
-  Display1
-};

package/dist/chunk-I5A3SU35.js

@@ -1,282 +0,0 @@
-import {
-  Icon
-} from "./chunk-DZLUR2I7.js";
-import {
-  componentGap,
-  componentPadding,
-  componentPaddingXUsingComponentGap,
-  componentPaddingYUsingComponentGap,
-  paddingUsingComponentGap,
-  typography
-} from "./chunk-6XDXJ3Z3.js";
-
-// src/components/CalendarRange.tsx
-import clsx from "clsx";
-import { useState } from "react";
-import { Temporal } from "@js-temporal/polyfill";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function isWeekend(date) {
-  console.log("wut", date.dayOfWeek, date.day, date.month, date.year);
-  return date.dayOfWeek === 6 || date.dayOfWeek === 7;
-}
-function DateCell({
-  date,
-  isInMonth,
-  isToday,
-  isSelected,
-  inRange,
-  isDisabled,
-  isRangeStart,
-  isRangeEnd,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  cellPadding = ""
-}) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: clsx(
-        "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
-        typography.caption,
-        cellPadding,
-        !isToday && !isSelected && !inRange && !isDisabled && !isRangeStart && !isRangeEnd && "border-transparent",
-        !isInMonth && "border-transparent",
-        // Today: subtle border ring
-        isToday && !isSelected && !inRange && "rounded-full border-border-primary-normal ",
-        // Selected: Figma blue, white text, strong shadow
-        isSelected && "bg-action-400 text-white border-action-400 z-10",
-        // In range: Figma light blue background
-        inRange && !isSelected && "bg-action-100 text-text-primary-normal border-y-action-400 border-x-0  ",
-        // Disabled: Figma gray, no pointer, no hover
-        isDisabled && !inRange ? "text-text-primary-disabled bg-transparent pointer-events-none opacity-40 border-transparent" : [
-          "text-text-primary-normal cursor-pointer",
-          // Figma hover: blue bg, blue text
-          "hover:bg-action-100 hover:text-action-400",
-          // Figma active: darker blue bg, white text
-          "active:bg-action-300 active:text-white",
-          // Figma focus: ring
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-400"
-        ],
-        isRangeStart && "rounded-l",
-        isRangeEnd && "rounded-r"
-      ),
-      tabIndex: isDisabled ? -1 : 0,
-      "aria-disabled": isDisabled,
-      onClick: () => !isDisabled && isInMonth && onClick(),
-      onMouseEnter: () => isInMonth && onMouseEnter(),
-      onMouseLeave: () => isInMonth && onMouseLeave(),
-      children: isInMonth ? date.day : ""
-    }
-  );
-}
-function CalendarRange({
-  from,
-  to,
-  onChange,
-  isDateAvailable,
-  mode = "double"
-}) {
-  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-  const parseDate = (d) => {
-    if (!d) return void 0;
-    if (typeof d === "number")
-      return Temporal.PlainDate.from(new Date(d).toISOString().slice(0, 10));
-    if (typeof d === "string") return Temporal.PlainDate.from(d);
-    return void 0;
-  };
-  const fromDate = parseDate(from);
-  const toDate = parseDate(to);
-  const today = Temporal.Now.plainDateISO();
-  const [baseMonth, setBaseMonth] = useState(
-    fromDate != null ? fromDate : today.with({ day: 1 })
-  );
-  const [selecting, setSelecting] = useState("from");
-  const [pendingFrom, setPendingFrom] = useState(void 0);
-  const [hoveredDate, setHoveredDate] = useState(void 0);
-  function getMonthData(monthOffset) {
-    const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });
-    const days = monthDate.daysInMonth;
-    const firstDayOffset = monthDate.dayOfWeek % 7;
-    return {
-      name: monthDate.toLocaleString("en-US", { month: "long" }),
-      year: monthDate.year,
-      days,
-      firstDayOffset,
-      date: monthDate
-    };
-  }
-  function handleDayClick(date) {
-    if (isDateAvailable && !isDateAvailable(date)) return;
-    if (selecting === "from") {
-      setPendingFrom(date);
-      setSelecting("to");
-      setHoveredDate(void 0);
-    } else if (pendingFrom) {
-      if (onChange) {
-        const [start, end] = Temporal.PlainDate.compare(date, pendingFrom) < 0 ? [date, pendingFrom] : [pendingFrom, date];
-        onChange(start.toString(), end.toString());
-      }
-      setPendingFrom(void 0);
-      setSelecting("from");
-      setHoveredDate(void 0);
-    }
-  }
-  function isInRange(date) {
-    if (pendingFrom && selecting === "to" && hoveredDate) {
-      const [start, end] = Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0 ? [hoveredDate, pendingFrom] : [pendingFrom, hoveredDate];
-      return Temporal.PlainDate.compare(date, start) >= 0 && Temporal.PlainDate.compare(date, end) <= 0;
-    }
-    if (!pendingFrom && fromDate && toDate) {
-      return Temporal.PlainDate.compare(date, fromDate) >= 0 && Temporal.PlainDate.compare(date, toDate) <= 0;
-    }
-    return false;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(
-        "relative bg-background-grouped-primary-normal rounded-base w-fit",
-        componentPadding,
-        componentGap
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx(
-            "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
-            componentGap,
-            paddingUsingComponentGap
-          ),
-          children: (mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
-            const month = getMonthData(offset);
-            const totalCells = 42;
-            const emptyCells = month.firstDayOffset;
-            return /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: clsx(
-                    "flex flex-col",
-                    componentGap,
-                    componentPadding
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: clsx(
-                          "flex flex-row items-center justify-between",
-                          componentGap,
-                          componentPaddingXUsingComponentGap,
-                          componentPaddingYUsingComponentGap,
-                          "mb-3",
-                          typography.label,
-                          "text-text-action-primary-normal"
-                        ),
-                        children: [
-                          idx === 0 ? /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              className: clsx(
-                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
-                                componentPadding,
-                                "mr-1"
-                              ),
-                              "aria-label": "Previous month",
-                              onClick: () => setBaseMonth(baseMonth.subtract({ months: 1 })),
-                              children: /* @__PURE__ */ jsx(Icon, { name: "chevron_left", size: 24 })
-                            }
-                          ) : /* @__PURE__ */ jsx("span", { className: clsx(componentPadding, "mr-1") }),
-                          /* @__PURE__ */ jsx("span", { className: "font-semibold text-text-action-primary-normal text-[14px] leading-[1] truncate", children: month.name }),
-                          /* @__PURE__ */ jsx("span", { className: "font-semibold text-text-action-primary-normal text-[14px] leading-[1] px-1 truncate", children: month.year }),
-                          (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              type: "button",
-                              className: clsx(
-                                "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-primary-normal",
-                                componentPadding,
-                                "ml-1"
-                              ),
-                              "aria-label": "Next month",
-                              onClick: () => setBaseMonth(baseMonth.add({ months: 1 })),
-                              children: /* @__PURE__ */ jsx(Icon, { name: "chevron_right", size: 24 })
-                            }
-                          ) : /* @__PURE__ */ jsx("span", { className: clsx(componentPadding, "ml-1") })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-7 mb-1", componentGap), children: weekDays.map((d) => /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: clsx(
-                          typography.caption,
-                          "text-text-secondary-normal text-center"
-                        ),
-                        children: d
-                      },
-                      d
-                    )) }),
-                    /* @__PURE__ */ jsx("div", { className: clsx("grid grid-cols-7"), children: Array.from({ length: totalCells }).map((_, i) => {
-                      const day = i - emptyCells + 1;
-                      const date = month.date.with({ day: 1 }).add({
-                        days: i - emptyCells
-                      });
-                      const isInMonth = day > 0 && day <= month.days;
-                      const isToday = isInMonth && date.equals(today);
-                      const isSelected = isInMonth && (!pendingFrom && fromDate && date.equals(fromDate) || !pendingFrom && toDate && date.equals(toDate) || pendingFrom && date.equals(pendingFrom));
-                      const inRange = isInMonth && isInRange(date);
-                      const isDisabled = !isInMonth || (isDateAvailable ? !isDateAvailable(date) : false);
-                      const hoverDateIsBeforePendingFrom = hoveredDate && pendingFrom && Temporal.PlainDate.compare(hoveredDate, pendingFrom) < 0;
-                      const hoverDateIsAfterPendingFrom = hoveredDate && pendingFrom && Temporal.PlainDate.compare(hoveredDate, pendingFrom) >= 0;
-                      const isRangeStart = !pendingFrom && isInMonth && fromDate && date.equals(fromDate) || hoverDateIsAfterPendingFrom && date.equals(pendingFrom);
-                      const isRangeEnd = !pendingFrom && isInMonth && toDate && date.equals(toDate) || hoverDateIsBeforePendingFrom && date.equals(pendingFrom);
-                      return /* @__PURE__ */ jsx(
-                        DateCell,
-                        {
-                          date,
-                          isInMonth: !!isInMonth,
-                          isToday: !!isToday,
-                          isSelected: !!isSelected,
-                          inRange: !!inRange,
-                          isDisabled: !!isDisabled,
-                          onClick: () => handleDayClick(date),
-                          onMouseEnter: () => setHoveredDate(date),
-                          onMouseLeave: () => setHoveredDate(void 0),
-                          isRangeStart: !!isRangeStart,
-                          isRangeEnd: !!isRangeEnd,
-                          cellPadding: "p-1.5 md:p-2 lg:p-2.5"
-                        },
-                        i
-                      );
-                    }) })
-                  ]
-                },
-                month.name + month.year
-              ),
-              mode === "double" && idx === 0 && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: clsx(
-                    "self-stretch bg-border-primary-normal rounded-base mx-mobile-component-padding desktop:mx-desktop-component-padding compact:mx-desktop-compact-component-padding",
-                    // 1px width, full height, matches Figma divider
-                    "w-px"
-                  )
-                }
-              )
-            ] });
-          })
-        }
-      )
-    }
-  );
-}
-var CalendarRange_default = CalendarRange;
-
-export {
-  isWeekend,
-  CalendarRange,
-  CalendarRange_default
-};

package/dist/chunk-I5HKQSF2.js

@@ -1,59 +0,0 @@
-import {
-  componentPaddingXUsingComponentGap,
-  typography
-} from "./chunk-JDHZQIFC.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Paragraph.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-var Paragraph = (_a) => {
-  var _b = _a, {
-    className,
-    color,
-    padded,
-    align = "left",
-    tall,
-    addOverflow,
-    children,
-    as = "p"
-  } = _b, props = __objRest(_b, [
-    "className",
-    "color",
-    "padded",
-    "align",
-    "tall",
-    "addOverflow",
-    "children",
-    "as"
-  ]);
-  const Element = as;
-  return /* @__PURE__ */ jsx(
-    Element,
-    __spreadProps(__spreadValues({}, props), {
-      className: clsx(
-        typography.paragraph,
-        className,
-        padded && componentPaddingXUsingComponentGap,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right",
-        tall && "!leading-6",
-        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden"
-      ),
-      style: __spreadProps(__spreadValues({}, props.style), {
-        color: color ? `var(--color-${color})` : void 0
-      }),
-      children
-    })
-  );
-};
-Paragraph.displayName = "Paragraph";
-
-export {
-  Paragraph
-};

package/dist/chunk-I7LXSGQA.js

@@ -1,10 +0,0 @@
-// src/components/ModalContent.tsx
-import { jsx } from "react/jsx-runtime";
-function ModalContent({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "p-4", children });
-}
-ModalContent.displayName = "ModalContent";
-
-export {
-  ModalContent
-};

package/dist/chunk-IDAZ53A4.js

@@ -1,261 +0,0 @@
-import {
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/useMenuSystem.tsx
-import { useState, useRef, useEffect, useCallback } from "react";
-function useSubMenuSystem() {
-  const [activeMenus, setActiveMenus] = useState(
-    {}
-  );
-  const menuRootRef = useRef(null);
-  const subMenuRefs = useRef({});
-  const hoverTimeoutRef = useRef(null);
-  const closeTimeoutRef = useRef(null);
-  const toggleMenu = (menuId, level) => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-    setActiveMenus((prev) => {
-      const newActiveMenus = __spreadValues({}, prev);
-      if (newActiveMenus[level] === menuId) {
-        delete newActiveMenus[level];
-      } else {
-        newActiveMenus[level] = menuId;
-      }
-      Object.keys(newActiveMenus).forEach((key) => {
-        if (Number(key) > level) {
-          delete newActiveMenus[Number(key)];
-        }
-      });
-      return newActiveMenus;
-    });
-  };
-  const openMenu = (menuId, level) => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-    setActiveMenus((prev) => {
-      const newActiveMenus = __spreadValues({}, prev);
-      newActiveMenus[level] = menuId;
-      Object.keys(newActiveMenus).forEach((key) => {
-        if (Number(key) > level) {
-          delete newActiveMenus[Number(key)];
-        }
-      });
-      return newActiveMenus;
-    });
-  };
-  const openMenuWithDelay = (menuId, level, delay = 150) => {
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-    }
-    hoverTimeoutRef.current = setTimeout(() => {
-      openMenu(menuId, level);
-    }, delay);
-  };
-  const closeMenuWithDelay = (level, delay = 300) => {
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = null;
-    }
-    closeTimeoutRef.current = setTimeout(() => {
-      closeSubMenuLevel(level);
-    }, delay);
-  };
-  const cancelCloseTimeout = () => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-  };
-  const closeSubMenuLevel = (level) => {
-    setActiveMenus((prev) => {
-      const newActiveMenus = __spreadValues({}, prev);
-      delete newActiveMenus[level];
-      Object.keys(newActiveMenus).forEach((key) => {
-        if (Number(key) >= level) {
-          delete newActiveMenus[Number(key)];
-        }
-      });
-      return newActiveMenus;
-    });
-  };
-  const registerSubMenu = (id, element) => {
-    subMenuRefs.current[id] = element;
-  };
-  const isMenuActive = (menuId, level) => {
-    return activeMenus[level] === menuId;
-  };
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      var _a;
-      if (Object.keys(activeMenus).length === 0) return;
-      const target = event.target;
-      if ((_a = menuRootRef.current) == null ? void 0 : _a.contains(target)) return;
-      const isInsideActiveSubmenu = Object.values(activeMenus).some((id) => {
-        const submenuEl = subMenuRefs.current[id];
-        return submenuEl == null ? void 0 : submenuEl.contains(target);
-      });
-      if (!isInsideActiveSubmenu) {
-        setActiveMenus({});
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [activeMenus]);
-  useEffect(() => {
-    return () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-      }
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-    };
-  }, []);
-  const getAllFocusableMenuElements = () => {
-    const elements = [];
-    if (menuRootRef.current) {
-      elements.push(...Array.from(menuRootRef.current.children));
-    }
-    Object.values(activeMenus).forEach((menuId) => {
-      const submenuEl = subMenuRefs.current[menuId];
-      if (submenuEl) {
-        elements.push(...Array.from(submenuEl.children));
-      }
-    });
-    return elements;
-  };
-  const findCurrentMenuLevel = (element) => {
-    let current = element.parentElement;
-    while (current) {
-      const level = current.getAttribute("data-menu-level");
-      if (level !== null) {
-        return parseInt(level, 10);
-      }
-      current = current.parentElement;
-    }
-    return 0;
-  };
-  const getMenuElementsAtLevel = (level) => {
-    var _a;
-    if (level === 0 && menuRootRef.current) {
-      return Array.from(menuRootRef.current.children);
-    }
-    const menuId = (_a = Object.entries(activeMenus).find(([, id]) => {
-      const submenuEl = subMenuRefs.current[id];
-      return submenuEl && submenuEl.getAttribute("data-menu-level") === level.toString();
-    })) == null ? void 0 : _a[1];
-    if (menuId) {
-      const submenuEl = subMenuRefs.current[menuId];
-      if (submenuEl) {
-        return Array.from(submenuEl.children);
-      }
-    }
-    return [];
-  };
-  return {
-    menuRootRef,
-    activeMenus,
-    toggleMenu,
-    openMenu,
-    openMenuWithDelay,
-    closeMenuWithDelay,
-    cancelCloseTimeout,
-    isMenuActive,
-    registerSubMenu,
-    closeSubMenuLevel,
-    getAllFocusableMenuElements,
-    findCurrentMenuLevel,
-    getMenuElementsAtLevel
-  };
-}
-function useMenuPosition(elementRef, position = "bottom", options) {
-  const [menuPosition, setMenuPosition] = useState({
-    top: 0,
-    left: 0,
-    minWidth: 0
-  });
-  const updatePosition = useCallback(() => {
-    var _a, _b, _c;
-    if (!(elementRef == null ? void 0 : elementRef.current)) return;
-    const triggerRect = elementRef.current.getBoundingClientRect();
-    const menuRect = (_b = (_a = options == null ? void 0 : options.menuRef) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect();
-    const viewportWidth = window.innerWidth;
-    const menuWidth = (menuRect == null ? void 0 : menuRect.width) || triggerRect.width;
-    const topOffset = (_c = options == null ? void 0 : options.topOffset) != null ? _c : 4;
-    let top = 0;
-    let left = 0;
-    if (position === "bottom" || position === "bottom-right") {
-      top = triggerRect.top + window.scrollY + triggerRect.height + topOffset;
-    } else {
-      top = triggerRect.top + window.scrollY;
-    }
-    if (position === "bottom") {
-      left = triggerRect.left + window.scrollX;
-    } else if (position === "bottom-right") {
-      left = triggerRect.right + window.scrollX - menuWidth;
-    } else if (position === "right") {
-      left = triggerRect.right + window.scrollX;
-    }
-    if (left + menuWidth > viewportWidth) {
-      left = Math.max(viewportWidth - menuWidth, 0);
-    }
-    setMenuPosition({
-      top,
-      left,
-      minWidth: triggerRect.width
-    });
-  }, [elementRef, position, options == null ? void 0 : options.menuRef, options == null ? void 0 : options.topOffset]);
-  useEffect(() => {
-    if (!(options == null ? void 0 : options.isOpen) || !(options == null ? void 0 : options.setIsOpen)) return;
-    const handleClickOutside = (event) => {
-      var _a, _b, _c, _d, _e;
-      const target = event.target;
-      if ((_a = elementRef.current) == null ? void 0 : _a.contains(target)) return;
-      if ((_c = (_b = options.menuRef) == null ? void 0 : _b.current) == null ? void 0 : _c.contains(target)) return;
-      if ((_d = options.additionalRefs) == null ? void 0 : _d.some((ref) => {
-        var _a2;
-        return (_a2 = ref.current) == null ? void 0 : _a2.contains(target);
-      }))
-        return;
-      (_e = options.setIsOpen) == null ? void 0 : _e.call(options, false);
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [
-    options,
-    elementRef,
-    options == null ? void 0 : options.isOpen,
-    options == null ? void 0 : options.setIsOpen,
-    options == null ? void 0 : options.menuRef,
-    options == null ? void 0 : options.additionalRefs
-  ]);
-  useEffect(() => {
-    updatePosition();
-    const resizeObserver = new ResizeObserver(updatePosition);
-    if (elementRef == null ? void 0 : elementRef.current) {
-      resizeObserver.observe(elementRef.current);
-    }
-    window.addEventListener("scroll", updatePosition);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updatePosition);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [elementRef, updatePosition]);
-  return { menuPosition, updatePosition };
-}
-
-export {
-  useSubMenuSystem,
-  useMenuPosition
-};