@dmsi/wedgekit-react 0.0.4 → 0.0.6

package/dist/components/Theme.js

@@ -1,13 +1,7 @@
+import {
+  Theme
+} from "../chunk-I2UVVKQI.js";
 import "../chunk-ORMEWXMH.js";
-
-// src/components/Theme.tsx
-import { jsx } from "react/jsx-runtime";
-function Theme({
-  theme,
-  children
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "contents", "data-theme": theme, children });
-}
 export {
   Theme
 };

package/dist/components/Time.cjs

@@ -485,7 +485,9 @@ var Input = (_a) => {
   }, [propValue, decimals, variant]);
   const getInputProps = () => {
     var _a2;
-    const baseProps = __spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals));
+    const baseProps = __spreadProps(__spreadValues(__spreadValues({}, props), getDecimalPlaceholder(decimals)), {
+      value: propValue
+    });
     switch (variant) {
       case "search":
         return __spreadProps(__spreadValues({}, baseProps), {
@@ -539,7 +541,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
       case "percentage":
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: "percent" }) });
       default:
@@ -657,38 +659,6 @@ UOM.displayName = "UOM";
 Currency.displayName = "Currency";
 Percentage.displayName = "Percentage";
 
-// src/components/Surface.tsx
-var import_clsx5 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Surface = (_a) => {
-  var _b = _a, {
-    className,
-    elevation = 0,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "elevation",
-    "children"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "div",
-    __spreadProps(__spreadValues({
-      className: (0, import_clsx5.default)(
-        "rounded-base",
-        {
-          "shadow-2": elevation === 2,
-          "shadow-4": elevation === 4,
-          "shadow-16": elevation === 16
-        },
-        className
-      )
-    }, props), {
-      children
-    })
-  );
-};
-Surface.displayName = "Surface";
-
 // src/components/Time.tsx
 var import_react_dom = require("react-dom");
 var import_clsx6 = __toESM(require("clsx"), 1);
@@ -716,6 +686,107 @@ function findDocumentRoot(element) {
   return window.document.body;
 }
 
+// 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)(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  justify === "between" && "justify-between",
+  justify === "around" && "justify-around"
+);
+var Stack = ({
+  children,
+  items,
+  justify,
+  grow,
+  padding,
+  paddingX,
+  horizontal,
+  horizontalMobile,
+  elevation = 0,
+  rounded,
+  centered,
+  width,
+  maxWidth,
+  minWidth,
+  height,
+  maxHeight,
+  borderColor,
+  backgroundColor,
+  sizing = "none",
+  overflowY = "inherit",
+  overflowX = "inherit",
+  flexShrink,
+  flexGrow,
+  position,
+  top,
+  left
+}) => {
+  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      style: {
+        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
+        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
+        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
+        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0
+      },
+      className: (0, import_clsx5.default)(
+        "scrollbar-thin",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
+      ),
+      children
+    }
+  );
+};
+
 // src/components/Time.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
@@ -724,6 +795,7 @@ var Time = (_a) => {
   const [showTimePicker, setShowTimePicker] = (0, import_react2.useState)(false);
   const [hasInteracted, setHasInteracted] = (0, import_react2.useState)(false);
   const inputRef = (0, import_react2.useRef)(null);
+  const inputContainerRef = (0, import_react2.useRef)(null);
   const timeRef = (0, import_react2.useRef)(null);
   const [timePosition, setTimePosition] = (0, import_react2.useState)({
     top: 0,
@@ -737,32 +809,20 @@ var Time = (_a) => {
   const is12HourFormat = format === "12h";
   const formattedTime = hour && minute ? is12HourFormat ? meridiem ? `${hour}:${minute} ${meridiem}` : `${hour}:${minute}` : `${hour}:${minute}` : "";
   const updatePosition = () => {
-    if (inputRef.current) {
-      requestAnimationFrame(() => {
-        const parent = inputRef.current ? inputRef.current.parentElement : null;
-        const rect = parent == null ? void 0 : parent.getBoundingClientRect();
-        if (rect) {
-          setTimePosition({
-            top: rect.bottom + window.scrollY + 6,
-            left: rect.left + window.scrollX,
-            width: rect.width
-          });
-        }
+    if (inputContainerRef.current) {
+      const rect = inputContainerRef.current.getBoundingClientRect();
+      setTimePosition({
+        top: rect.bottom + window.scrollY + 6,
+        left: rect.left + window.scrollX,
+        width: rect.width
       });
     }
   };
   (0, import_react2.useEffect)(() => {
-    updatePosition();
-    const resizeObserver = new ResizeObserver(updatePosition);
-    if (inputRef.current) {
-      resizeObserver.observe(inputRef.current);
+    if (showTimePicker) {
+      updatePosition();
     }
-    window.addEventListener("scroll", updatePosition);
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updatePosition);
-    };
-  }, []);
+  }, [showTimePicker, is12HourFormat]);
   (0, import_react2.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (inputRef.current && timeRef.current && !inputRef.current.contains(event.target) && !timeRef.current.contains(event.target)) {
@@ -775,7 +835,7 @@ var Time = (_a) => {
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [showTimePicker]);
+  }, [showTimePicker, is12HourFormat]);
   (0, import_react2.useEffect)(() => {
     if (formattedTime && hasInteracted) {
       setInputValue(formattedTime);
@@ -848,6 +908,11 @@ var Time = (_a) => {
     }
     onChange == null ? void 0 : onChange(e);
   };
+  const selectedRefs = {
+    hour: (0, import_react2.useRef)(null),
+    minute: (0, import_react2.useRef)(null),
+    meridiem: (0, import_react2.useRef)(null)
+  };
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
       setShowTimePicker(false);
@@ -902,39 +967,27 @@ var Time = (_a) => {
     setMinute(m.toString().padStart(2, "0"));
     if (is12HourFormat) setMeridiem(mer);
   };
-  const selectedRefs = {
-    hour: (0, import_react2.useRef)(null),
-    minute: (0, import_react2.useRef)(null),
-    meridiem: (0, import_react2.useRef)(null)
-  };
   (0, import_react2.useEffect)(() => {
-    var _a2, _b2, _c;
     if (showTimePicker) {
-      (_a2 = selectedRefs.hour.current) == null ? void 0 : _a2.scrollIntoView({
-        block: "center",
-        behavior: "instant"
-      });
-      (_b2 = selectedRefs.minute.current) == null ? void 0 : _b2.scrollIntoView({
-        block: "center",
-        behavior: "instant"
-      });
-      if (is12HourFormat) {
-        (_c = selectedRefs.meridiem.current) == null ? void 0 : _c.scrollIntoView({
-          block: "center",
+      setTimeout(() => {
+        var _a2, _b2, _c;
+        (_a2 = selectedRefs.hour.current) == null ? void 0 : _a2.scrollIntoView({
+          block: "nearest",
           behavior: "instant"
         });
-      }
+        (_b2 = selectedRefs.minute.current) == null ? void 0 : _b2.scrollIntoView({
+          block: "nearest",
+          behavior: "instant"
+        });
+        if (is12HourFormat) {
+          (_c = selectedRefs.meridiem.current) == null ? void 0 : _c.scrollIntoView({
+            block: "nearest",
+            behavior: "instant"
+          });
+        }
+      }, 0);
     }
-  }, [
-    showTimePicker,
-    hour,
-    minute,
-    meridiem,
-    is12HourFormat,
-    selectedRefs.hour,
-    selectedRefs.minute,
-    selectedRefs.meridiem
-  ]);
+  }, [showTimePicker, is12HourFormat, selectedRefs.hour, selectedRefs.minute, selectedRefs.meridiem]);
   const renderOptions = (items, type) => items.map((val) => {
     const isSelected = type === "hour" && val === hour || type === "minute" && val === minute || type === "meridiem" && val === meridiem;
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -956,6 +1009,7 @@ var Time = (_a) => {
       InputBase,
       __spreadProps(__spreadValues({}, props), {
         ref: inputRef,
+        inputContainerRef,
         value: inputValue,
         placeholder: is12HourFormat ? "hh:mm am" : "hh:mm",
         after: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "schedule" }) }),
@@ -968,15 +1022,20 @@ var Time = (_a) => {
     ),
     showTimePicker && (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        Surface,
+        Stack,
         {
           elevation: 4,
-          className: "absolute z-50 bg-background-grouped-primary-normal h-60 overflow-hidden",
-          style: {
-            top: `${timePosition.top}px`,
-            left: `${timePosition.left}px`,
-            minWidth: `${timePosition.width}px`
-          },
+          height: 240,
+          position: "absolute",
+          backgroundColor: "background-grouped-primary-normal",
+          overflowX: "hidden",
+          overflowY: "hidden",
+          zIndex: 50,
+          top: timePosition.top,
+          left: timePosition.left,
+          minWidth: timePosition.width,
+          maxWidth: 0,
+          rounded: true,
           children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: timeRef, className: "px-4 flex h-60", children: [
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx6.default)(timePickerScrollableStyle), children: renderOptions(
               Array.from(

package/dist/components/Time.js

@@ -1,12 +1,12 @@
 import {
-  Surface
-} from "../chunk-TTKSTVEF.js";
+  Stack
+} from "../chunk-U42SKNR6.js";
 import {
   findDocumentRoot
 } from "../chunk-4T7F5BZZ.js";
 import {
   InputBase
-} from "../chunk-UGXT677T.js";
+} from "../chunk-BWRHL2AG.js";
 import "../chunk-4C66DLIJ.js";
 import {
   Icon
@@ -31,6 +31,7 @@ var Time = (_a) => {
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [hasInteracted, setHasInteracted] = useState(false);
   const inputRef = useRef(null);
+  const inputContainerRef = useRef(null);
   const timeRef = useRef(null);
   const [timePosition, setTimePosition] = useState({
     top: 0,
@@ -44,32 +45,20 @@ var Time = (_a) => {
   const is12HourFormat = format === "12h";
   const formattedTime = hour && minute ? is12HourFormat ? meridiem ? `${hour}:${minute} ${meridiem}` : `${hour}:${minute}` : `${hour}:${minute}` : "";
   const updatePosition = () => {
-    if (inputRef.current) {
-      requestAnimationFrame(() => {
-        const parent = inputRef.current ? inputRef.current.parentElement : null;
-        const rect = parent == null ? void 0 : parent.getBoundingClientRect();
-        if (rect) {
-          setTimePosition({
-            top: rect.bottom + window.scrollY + 6,
-            left: rect.left + window.scrollX,
-            width: rect.width
-          });
-        }
+    if (inputContainerRef.current) {
+      const rect = inputContainerRef.current.getBoundingClientRect();
+      setTimePosition({
+        top: rect.bottom + window.scrollY + 6,
+        left: rect.left + window.scrollX,
+        width: rect.width
       });
     }
   };
   useEffect(() => {
-    updatePosition();
-    const resizeObserver = new ResizeObserver(updatePosition);
-    if (inputRef.current) {
-      resizeObserver.observe(inputRef.current);
+    if (showTimePicker) {
+      updatePosition();
     }
-    window.addEventListener("scroll", updatePosition);
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updatePosition);
-    };
-  }, []);
+  }, [showTimePicker, is12HourFormat]);
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (inputRef.current && timeRef.current && !inputRef.current.contains(event.target) && !timeRef.current.contains(event.target)) {
@@ -82,7 +71,7 @@ var Time = (_a) => {
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [showTimePicker]);
+  }, [showTimePicker, is12HourFormat]);
   useEffect(() => {
     if (formattedTime && hasInteracted) {
       setInputValue(formattedTime);
@@ -155,6 +144,11 @@ var Time = (_a) => {
     }
     onChange == null ? void 0 : onChange(e);
   };
+  const selectedRefs = {
+    hour: useRef(null),
+    minute: useRef(null),
+    meridiem: useRef(null)
+  };
   const handleKeyDown = (e) => {
     if (e.key === "Enter") {
       setShowTimePicker(false);
@@ -209,39 +203,27 @@ var Time = (_a) => {
     setMinute(m.toString().padStart(2, "0"));
     if (is12HourFormat) setMeridiem(mer);
   };
-  const selectedRefs = {
-    hour: useRef(null),
-    minute: useRef(null),
-    meridiem: useRef(null)
-  };
   useEffect(() => {
-    var _a2, _b2, _c;
     if (showTimePicker) {
-      (_a2 = selectedRefs.hour.current) == null ? void 0 : _a2.scrollIntoView({
-        block: "center",
-        behavior: "instant"
-      });
-      (_b2 = selectedRefs.minute.current) == null ? void 0 : _b2.scrollIntoView({
-        block: "center",
-        behavior: "instant"
-      });
-      if (is12HourFormat) {
-        (_c = selectedRefs.meridiem.current) == null ? void 0 : _c.scrollIntoView({
-          block: "center",
+      setTimeout(() => {
+        var _a2, _b2, _c;
+        (_a2 = selectedRefs.hour.current) == null ? void 0 : _a2.scrollIntoView({
+          block: "nearest",
           behavior: "instant"
         });
-      }
+        (_b2 = selectedRefs.minute.current) == null ? void 0 : _b2.scrollIntoView({
+          block: "nearest",
+          behavior: "instant"
+        });
+        if (is12HourFormat) {
+          (_c = selectedRefs.meridiem.current) == null ? void 0 : _c.scrollIntoView({
+            block: "nearest",
+            behavior: "instant"
+          });
+        }
+      }, 0);
     }
-  }, [
-    showTimePicker,
-    hour,
-    minute,
-    meridiem,
-    is12HourFormat,
-    selectedRefs.hour,
-    selectedRefs.minute,
-    selectedRefs.meridiem
-  ]);
+  }, [showTimePicker, is12HourFormat, selectedRefs.hour, selectedRefs.minute, selectedRefs.meridiem]);
   const renderOptions = (items, type) => items.map((val) => {
     const isSelected = type === "hour" && val === hour || type === "minute" && val === minute || type === "meridiem" && val === meridiem;
     return /* @__PURE__ */ jsx(
@@ -263,6 +245,7 @@ var Time = (_a) => {
       InputBase,
       __spreadProps(__spreadValues({}, props), {
         ref: inputRef,
+        inputContainerRef,
         value: inputValue,
         placeholder: is12HourFormat ? "hh:mm am" : "hh:mm",
         after: /* @__PURE__ */ jsx("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ jsx(Icon, { name: "schedule" }) }),
@@ -275,15 +258,20 @@ var Time = (_a) => {
     ),
     showTimePicker && createPortal(
       /* @__PURE__ */ jsx(
-        Surface,
+        Stack,
         {
           elevation: 4,
-          className: "absolute z-50 bg-background-grouped-primary-normal h-60 overflow-hidden",
-          style: {
-            top: `${timePosition.top}px`,
-            left: `${timePosition.left}px`,
-            minWidth: `${timePosition.width}px`
-          },
+          height: 240,
+          position: "absolute",
+          backgroundColor: "background-grouped-primary-normal",
+          overflowX: "hidden",
+          overflowY: "hidden",
+          zIndex: 50,
+          top: timePosition.top,
+          left: timePosition.left,
+          minWidth: timePosition.width,
+          maxWidth: 0,
+          rounded: true,
           children: /* @__PURE__ */ jsxs("div", { ref: timeRef, className: "px-4 flex h-60", children: [
             /* @__PURE__ */ jsx("div", { className: clsx(timePickerScrollableStyle), children: renderOptions(
               Array.from(

package/dist/components/Toast.cjs

@@ -604,7 +604,7 @@ var Toast = (_a) => {
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex gap-desktop-layout-group-gap items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col gap-desktop-component-gap w-68", children: [
             title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Heading3, { children: title }),
-            message && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { className: "break-all", children: message })
+            message && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { children: message })
           ] }),
           showViewButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { variant: "tertiary", href: viewButtonLink, children: "View" })
         ] })

package/dist/components/Toast.js

@@ -179,7 +179,7 @@ var Toast = (_a) => {
         /* @__PURE__ */ jsxs("div", { className: "flex gap-desktop-layout-group-gap items-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-desktop-component-gap w-68", children: [
             title && /* @__PURE__ */ jsx(Heading3, { children: title }),
-            message && /* @__PURE__ */ jsx(Paragraph, { className: "break-all", children: message })
+            message && /* @__PURE__ */ jsx(Paragraph, { children: message })
           ] }),
           showViewButton && /* @__PURE__ */ jsx(Button, { variant: "tertiary", href: viewButtonLink, children: "View" })
         ] })

package/dist/fonts.css

@@ -10,10 +10,12 @@
   src: url("./icons-light[FILL]-PPZXOLWS.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
+  font-display: block;
 }
 @font-face {
   font-family: "Icons";
   src: url("./icons-normal[FILL]-PPZXOLWS.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
+  font-display: block;
 }