@dmsi/wedgekit-react 0.0.476 → 0.0.477

package/dist/components/index.js

@@ -1,7 +1,8 @@
 import {
   DataGrid,
+  DateInput,
   MobileDataGrid
-} from "../chunk-HSJ34DOK.js";
+} from "../chunk-WIDUWFLX.js";
 import "../chunk-M7INAUAJ.js";
 import "../chunk-4Q7T4GJ2.js";
 import "../chunk-3DEYCNUE.js";
@@ -125,6 +126,7 @@ export {
   DataCellHeader,
   DataGrid,
   DataGridCell,
+  DateInput,
   DragAlongCell,
   DraggableCellHeader,
   EmptyCartIcon,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.476",
+  "version": "0.0.477",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/index.ts

@@ -18,6 +18,7 @@ export { MenuOption } from "./MenuOption";
 export { Search } from "./Search";
 export { Tooltip } from "./Tooltip";
 export { Input } from "./Input";
+export { DateInput } from "./DateInput";
 export { Accordion } from "./Accordion";
 export { Card } from "./Card";
 export { MobileDataGrid } from "./MobileDataGrid";

package/dist/chunk-X35NLL3N.js

@@ -1,493 +0,0 @@
-import {
-  Menu
-} from "./chunk-TCMOGTPB.js";
-import {
-  MenuOption
-} from "./chunk-IPAKWF2V.js";
-import {
-  Icon
-} from "./chunk-NKUETCDA.js";
-import {
-  componentPadding,
-  layoutGap,
-  layoutPaddding,
-  typography
-} from "./chunk-IXR65MOU.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/CalendarRange.tsx
-import clsx from "clsx";
-import React, { useEffect, useRef, useState } from "react";
-import { Temporal } from "@js-temporal/polyfill";
-import { jsx, jsxs } from "react/jsx-runtime";
-function isWeekend(date) {
-  return date.dayOfWeek === 6 || date.dayOfWeek === 7;
-}
-function DateCell(_a) {
-  var _b = _a, {
-    date,
-    isInMonth,
-    isToday,
-    isSelected,
-    inRange,
-    isDisabled,
-    isRangeStart,
-    isRangeEnd,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    cellPadding = "",
-    isRangeDisabled = false,
-    id,
-    testid
-  } = _b, props = __objRest(_b, [
-    "date",
-    "isInMonth",
-    "isToday",
-    "isSelected",
-    "inRange",
-    "isDisabled",
-    "isRangeStart",
-    "isRangeEnd",
-    "onClick",
-    "onMouseEnter",
-    "onMouseLeave",
-    "cellPadding",
-    "isRangeDisabled",
-    "id",
-    "testid"
-  ]);
-  return /* @__PURE__ */ jsx(
-    "span",
-    __spreadProps(__spreadValues({}, props), {
-      id,
-      "data-testid": testid,
-      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",
-        !isSelected && !inRange && "rounded-base",
-        // When range is disabled OR when only 'from' is selected (no range yet), apply rounded corners
-        (isRangeDisabled || !inRange && isSelected) && "rounded-base",
-        inRange && isSelected && "hover:border-action-500",
-        // 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 (or red text if selected)
-          isSelected ? "hover:bg-background-action-primary-hover hover:text-white" : "hover:bg-action-100 hover:text-text-action-primary-hover",
-          // 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",
-  cardStyle = false,
-  disableRange = false,
-  id,
-  testid
-}) {
-  const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-  const parseDate = (d) => {
-    if (!d) {
-      return void 0;
-    }
-    try {
-      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;
-    } catch (error) {
-      console.error("Invalid date format:", d, error);
-      return Temporal.Now.plainDateISO();
-    }
-  };
-  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);
-  useEffect(() => {
-    if (fromDate) {
-      setBaseMonth(fromDate.with({ day: 1 }));
-    } else if (toDate) {
-      setBaseMonth(toDate.with({ day: 1 }));
-    }
-  }, [from, to]);
-  useEffect(() => {
-    if (fromDate && toDate) {
-      setSelecting("from");
-      setPendingFrom(void 0);
-      setHoveredDate(void 0);
-    }
-  }, [from, to]);
-  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 getMonthDataWith(monthOffset) {
-    const monthDate = baseMonth.with({ month: 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 (mode === "single" && disableRange) {
-      if (onChange) {
-        onChange(date.toString(), date.toString());
-      }
-      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 (mode === "single" && disableRange) {
-      return false;
-    }
-    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",
-    {
-      id,
-      "data-testid": testid,
-      className: clsx(
-        "relative bg-background-grouped-primary-normal rounded-base w-fit",
-        layoutPaddding,
-        layoutGap,
-        cardStyle && "shadow-4",
-        // baseTransition,
-        "overflow-hidden"
-      ),
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: clsx(
-            "flex flex-row items-start justify-start bg-background-primary-normal overflow-clip",
-            layoutGap
-          ),
-          children: (mode === "double" ? [0, 1] : [0]).map((offset, idx) => {
-            return /* @__PURE__ */ jsx(
-              CalendarPane,
-              {
-                getMonthData,
-                getMonthDataWith,
-                offset,
-                idx,
-                id,
-                testid,
-                baseMonth,
-                setBaseMonth,
-                mode,
-                pendingFrom,
-                weekDays,
-                fromDate,
-                toDate,
-                isDateAvailable,
-                disableRange,
-                hoveredDate,
-                isInRange,
-                today,
-                setHoveredDate,
-                handleDayClick
-              },
-              idx
-            );
-          })
-        }
-      )
-    }
-  );
-}
-function CalendarPane({
-  getMonthData,
-  getMonthDataWith,
-  offset,
-  idx,
-  id,
-  testid,
-  baseMonth,
-  setBaseMonth,
-  mode,
-  pendingFrom,
-  weekDays,
-  fromDate,
-  toDate,
-  isDateAvailable,
-  disableRange,
-  hoveredDate,
-  isInRange,
-  today,
-  setHoveredDate,
-  handleDayClick
-}) {
-  const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-  const years = Array.from({ length: 100 }).map(
-    (_, i) => baseMonth.year - 50 + i
-  );
-  const [monthMenuOpen, setMonthMenuOpen] = useState(false);
-  const [yearMenuOpen, setYearMenuOpen] = useState(false);
-  const monthMenuRef = useRef(null);
-  const yearMenuRef = useRef(null);
-  const month = getMonthData(offset);
-  const totalCells = 42;
-  const emptyCells = month.firstDayOffset;
-  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx("flex flex-col"),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: clsx(
-                "flex flex-row items-center justify-between",
-                typography.label,
-                "text-text-action-primary-normal"
-              ),
-              children: [
-                idx === 0 ? /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    id: id ? `${id}-prev-month-button` : void 0,
-                    "data-testid": testid ? `${testid}-prev-month-button` : void 0,
-                    type: "button",
-                    className: clsx(
-                      "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
-                      componentPadding
-                    ),
-                    "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__ */ jsxs("div", { className: "flex gap-desktop-compact-component-padding", children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      ref: (el) => {
-                        monthMenuRef.current = el;
-                      },
-                      type: "button",
-                      onClick: () => {
-                        setMonthMenuOpen(true);
-                        setYearMenuOpen(false);
-                      },
-                      className: "font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate",
-                      children: month.name
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Menu,
-                    {
-                      show: monthMenuOpen,
-                      positionTo: monthMenuRef,
-                      setShow: () => setMonthMenuOpen(false),
-                      children: months.map((x) => [x, getMonthDataWith(x + 1)]).map(([x, m]) => /* @__PURE__ */ jsx(
-                        MenuOption,
-                        {
-                          selected: baseMonth.month === x + 1,
-                          onClick: () => {
-                            setBaseMonth(baseMonth.with({ month: x + 1 }));
-                            setMonthMenuOpen(false);
-                          },
-                          children: m.name
-                        },
-                        m.name
-                      ))
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      ref: (el) => {
-                        yearMenuRef.current = el;
-                      },
-                      type: "button",
-                      onClick: () => {
-                        setYearMenuOpen(true);
-                        setMonthMenuOpen(false);
-                      },
-                      className: "font-semibold text-text-action-primary-normal text-[14px] py-[2px] truncate",
-                      children: month.year
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Menu,
-                    {
-                      show: yearMenuOpen,
-                      positionTo: yearMenuRef,
-                      setShow: () => setYearMenuOpen(false),
-                      children: years.map((y) => /* @__PURE__ */ jsx(
-                        MenuOption,
-                        {
-                          selected: baseMonth.year === y,
-                          onClick: () => {
-                            setBaseMonth(baseMonth.with({ year: y }));
-                            setYearMenuOpen(false);
-                          },
-                          children: y
-                        },
-                        y
-                      ))
-                    }
-                  )
-                ] }),
-                (mode === "double" ? idx === 1 : true) ? /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    id: id ? `${id}-next-month-button` : void 0,
-                    "data-testid": testid ? `${testid}-next-month-button` : void 0,
-                    type: "button",
-                    className: clsx(
-                      "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
-                      componentPadding
-                    ),
-                    "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"), children: weekDays.map((d) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: clsx(
-                typography.caption,
-                "text-text-secondary-normal text-center",
-                "w-10"
-              ),
-              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 = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && fromDate && date.equals(fromDate) || hoverDateIsAfterPendingFrom && date.equals(pendingFrom);
-            const isRangeEnd = mode === "single" && disableRange ? false : !pendingFrom && isInMonth && toDate && date.equals(toDate) || hoverDateIsBeforePendingFrom && date.equals(pendingFrom);
-            return /* @__PURE__ */ jsx(
-              DateCell,
-              {
-                id: id ? `${id}-date-${date.toString()}` : void 0,
-                testid: testid ? `${testid}-date-${date.toString()}` : void 0,
-                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,
-                isRangeDisabled: mode === "single" && disableRange,
-                cellPadding: componentPadding
-              },
-              i
-            );
-          }) })
-        ]
-      }
-    ),
-    mode === "double" && idx === 0 && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(
-          "self-stretch bg-border-primary-normal rounded-base",
-          // 1px width, full height, matches Figma divider
-          "w-px"
-        )
-      }
-    )
-  ] }, month.name + month.year);
-}
-var CalendarRange_default = CalendarRange;
-
-export {
-  isWeekend,
-  CalendarRange,
-  CalendarRange_default
-};