@dmsi/wedgekit-react 0.0.4 → 0.0.6

package/dist/components/SideMenuGroup.cjs

@@ -226,11 +226,28 @@ 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)(
+  "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,
@@ -238,48 +255,60 @@ var Stack = ({
   centered,
   width,
   maxWidth,
+  minWidth,
   height,
   maxHeight,
   borderColor,
   backgroundColor,
   sizing = "none",
-  overflowY = "inherit"
+  overflowY = "inherit",
+  overflowX = "inherit",
+  flexShrink,
+  flexGrow,
+  position,
+  top,
+  left
 }) => {
+  const flexClassNames = useFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       style: {
-        height: height !== void 0 ? `${height}px` : void 0,
+        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 ? `${width}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
+        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_clsx3.default)(
         "scrollbar-thin",
-        "w-full",
-        "flex",
+        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",
-        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",
+        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",

package/dist/components/SideMenuGroup.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Stack
-} from "../chunk-PMQOPIJZ.js";
+} from "../chunk-U42SKNR6.js";
 import {
   Label
 } from "../chunk-4C66DLIJ.js";

package/dist/components/SideMenuItem.cjs

@@ -184,11 +184,28 @@ 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)(
+  "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,
@@ -196,48 +213,60 @@ var Stack = ({
   centered,
   width,
   maxWidth,
+  minWidth,
   height,
   maxHeight,
   borderColor,
   backgroundColor,
   sizing = "none",
-  overflowY = "inherit"
+  overflowY = "inherit",
+  overflowX = "inherit",
+  flexShrink,
+  flexGrow,
+  position,
+  top,
+  left
 }) => {
+  const flexClassNames = useFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       style: {
-        height: height !== void 0 ? `${height}px` : void 0,
+        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 ? `${width}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
+        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_clsx2.default)(
         "scrollbar-thin",
-        "w-full",
-        "flex",
+        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",
-        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",
+        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",

package/dist/components/SideMenuItem.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-PMQOPIJZ.js";
+} from "../chunk-U42SKNR6.js";
 import {
   Paragraph
 } from "../chunk-K3IKUSZW.js";

package/dist/components/Stack.cjs

@@ -35,11 +35,28 @@ __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)(
+  "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,
@@ -47,48 +64,60 @@ var Stack = ({
   centered,
   width,
   maxWidth,
+  minWidth,
   height,
   maxHeight,
   borderColor,
   backgroundColor,
   sizing = "none",
-  overflowY = "inherit"
+  overflowY = "inherit",
+  overflowX = "inherit",
+  flexShrink,
+  flexGrow,
+  position,
+  top,
+  left
 }) => {
+  const flexClassNames = useFlexClassNames({ items, justify, grow });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       style: {
-        height: height !== void 0 ? `${height}px` : void 0,
+        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 ? `${width}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
+        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_clsx.default)(
         "scrollbar-thin",
-        "w-full",
-        "flex",
+        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",
-        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",
+        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",

package/dist/components/Stack.js

@@ -1,6 +1,6 @@
 import {
   Stack
-} from "../chunk-PMQOPIJZ.js";
+} from "../chunk-U42SKNR6.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Stack

package/dist/components/Stepper.cjs

@@ -621,7 +621,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), {
@@ -675,7 +677,7 @@ var Input = (_a) => {
       case "finder":
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "search" });
       case "uom":
-        return uom ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom }) : null;
+        return uom ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-text-secondary-normal uppercase", children: uom.slice(0, 4) }) : null;
       case "percentage":
         return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "percent" }) });
       default:

package/dist/components/Stepper.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   InputBase
-} from "../chunk-UGXT677T.js";
+} from "../chunk-BWRHL2AG.js";
 import "../chunk-4C66DLIJ.js";
 import {
   Button

package/dist/components/Surface.cjs

@@ -66,13 +66,13 @@ var import_clsx = __toESM(require("clsx"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 var Surface = (_a) => {
   var _b = _a, {
+    children,
     className,
-    elevation = 0,
-    children
+    elevation = 0
   } = _b, props = __objRest(_b, [
+    "children",
     "className",
-    "elevation",
-    "children"
+    "elevation"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",

package/dist/components/Surface.js

@@ -1,7 +1,40 @@
 import {
-  Surface
-} from "../chunk-TTKSTVEF.js";
-import "../chunk-ORMEWXMH.js";
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+
+// src/components/Surface.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Surface = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    elevation = 0
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "elevation"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      className: clsx(
+        "rounded-base",
+        {
+          "shadow-2": elevation === 2,
+          "shadow-4": elevation === 4,
+          "shadow-16": elevation === 16
+        },
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+};
+Surface.displayName = "Surface";
 export {
   Surface
 };