@dmsi/wedgekit-react 0.0.29 → 0.0.30

package/dist/components/SideMenuGroup.cjs

@@ -238,7 +238,7 @@ Label.displayName = "Label";
 // src/components/Stack.tsx
 var import_clsx3 = __toESM(require("clsx"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx3.default)(
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx3.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -311,7 +311,7 @@ var Stack = (_a) => {
     "left",
     "id"
   ]);
-  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     __spreadProps(__spreadValues({
@@ -333,6 +333,7 @@ var Stack = (_a) => {
       },
       className: (0, import_clsx3.default)(
         "scrollbar-thin",
+        "max-w-screen",
         width !== "fit" && "w-full",
         width === "full" && "w-full",
         centered && "mx-auto",

package/dist/components/SideMenuGroup.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Stack
-} from "../chunk-57WRM337.js";
+} from "../chunk-5POWRPIO.js";
 import {
   Label
 } from "../chunk-S5K22XTH.js";

package/dist/components/SideMenuItem.cjs

@@ -193,7 +193,7 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 // src/components/Stack.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
-var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx2.default)(
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx2.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -266,7 +266,7 @@ var Stack = (_a) => {
     "left",
     "id"
   ]);
-  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     __spreadProps(__spreadValues({
@@ -288,6 +288,7 @@ var Stack = (_a) => {
       },
       className: (0, import_clsx2.default)(
         "scrollbar-thin",
+        "max-w-screen",
         width !== "fit" && "w-full",
         width === "full" && "w-full",
         centered && "mx-auto",

package/dist/components/SideMenuItem.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-57WRM337.js";
+} from "../chunk-5POWRPIO.js";
 import {
   Paragraph
 } from "../chunk-VG4EPHJA.js";

package/dist/components/Stack.cjs

@@ -64,7 +64,7 @@ __export(Stack_exports, {
 module.exports = __toCommonJS(Stack_exports);
 var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
-var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx.default)(
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -137,7 +137,7 @@ var Stack = (_a) => {
     "left",
     "id"
   ]);
-  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     __spreadProps(__spreadValues({
@@ -159,6 +159,7 @@ var Stack = (_a) => {
       },
       className: (0, import_clsx.default)(
         "scrollbar-thin",
+        "max-w-screen",
         width !== "fit" && "w-full",
         width === "full" && "w-full",
         centered && "mx-auto",

package/dist/components/Stack.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-57WRM337.js";
+} from "../chunk-5POWRPIO.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Stack

package/dist/components/Swatch.cjs

@@ -243,7 +243,7 @@ Display2.displayName = "Display2";
 // src/components/Stack.tsx
 var import_clsx3 = __toESM(require("clsx"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx3.default)(
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx3.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -316,7 +316,7 @@ var Stack = (_a) => {
     "left",
     "id"
   ]);
-  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     __spreadProps(__spreadValues({
@@ -338,6 +338,7 @@ var Stack = (_a) => {
       },
       className: (0, import_clsx3.default)(
         "scrollbar-thin",
+        "max-w-screen",
         width !== "fit" && "w-full",
         width === "full" && "w-full",
         centered && "mx-auto",

package/dist/components/Swatch.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-57WRM337.js";
+} from "../chunk-5POWRPIO.js";
 import {
   Display1
 } from "../chunk-AY7ELVQY.js";

package/dist/components/Time.cjs

@@ -712,7 +712,7 @@ function findDocumentRoot(element) {
 // src/components/Stack.tsx
 var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var useFlexClassNames = ({ items, justify, grow }) => (0, import_clsx5.default)(
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx5.default)(
   "flex",
   items === "start" && "items-start",
   grow && "grow",
@@ -785,7 +785,7 @@ var Stack = (_a) => {
     "left",
     "id"
   ]);
-  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     __spreadProps(__spreadValues({
@@ -807,6 +807,7 @@ var Stack = (_a) => {
       },
       className: (0, import_clsx5.default)(
         "scrollbar-thin",
+        "max-w-screen",
         width !== "fit" && "w-full",
         width === "full" && "w-full",
         centered && "mx-auto",

package/dist/components/Time.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-57WRM337.js";
+} from "../chunk-5POWRPIO.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";

package/dist/index.css

@@ -560,6 +560,9 @@
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
   .z-40 {
     z-index: 40;
   }
@@ -746,6 +749,9 @@
   .min-h-\[34px\] {
     min-height: 34px;
   }
+  .min-h-min {
+    min-height: min-content;
+  }
   .min-h-mobile-container-padding {
     min-height: var(--spacing-mobile-container-padding);
   }
@@ -821,6 +827,9 @@
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-screen {
+    max-width: 100vw;
+  }
   .max-w-xl {
     max-width: var(--container-xl);
   }

package/package.json

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

package/src/components/CalendarRange.tsx

@@ -7,7 +7,7 @@ import {
   layoutGap,
 } from "../classNames";
 import { Icon } from "./Icon";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Temporal } from "@js-temporal/polyfill";
 
 export interface CalendarRangeProps {
@@ -146,11 +146,24 @@ export function CalendarRange({
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   // Parse from/to props
   const parseDate = (d?: string | number) => {
-    if (!d) return undefined;
-    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 undefined;
+    if (!d) {
+      return undefined;
+    }
+    
+    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 undefined;
+    } catch (error) {
+      // If parsing fails, return current date instead of throwing
+      return Temporal.Now.plainDateISO();
+    }
   };
   const fromDate = parseDate(from);
   const toDate = parseDate(to);
@@ -168,6 +181,24 @@ export function CalendarRange({
     Temporal.PlainDate | undefined
   >(undefined);
 
+  // Update base month when from/to props change
+  useEffect(() => {
+    if (fromDate) {
+      setBaseMonth(fromDate.with({ day: 1 }));
+    } else if (toDate) {
+      setBaseMonth(toDate.with({ day: 1 }));
+    }
+  }, [from, to]);
+
+  // Reset selection state when from/to props change externally
+  useEffect(() => {
+    if (fromDate && toDate) {
+      setSelecting("from");
+      setPendingFrom(undefined);
+      setHoveredDate(undefined);
+    }
+  }, [from, to]);
+
   // Helper to get month data
   function getMonthData(monthOffset: number) {
     const monthDate = baseMonth.add({ months: monthOffset }).with({ day: 1 });