@dmsi/wedgekit-react 1.0.1 → 2.0.1

package/dist/components/Stack.js

@@ -0,0 +1,174 @@
+import { jsx as z } from "react/jsx-runtime";
+import { clsx as f } from "../node_modules/clsx/dist/clsx.js";
+import { paddingYUsingLayoutGroupGap as oo } from "../classNames.js";
+const po = ({ items: p, justify: a, grow: y }) => f(
+  "flex",
+  p === "start" && "items-start",
+  y && "grow",
+  p === "start" && "items-start",
+  p === "center" && "items-center",
+  p === "end" && "items-end",
+  p === "start-center" && "items-start desktop:items-center",
+  a === "start" && "justify-start",
+  a === "center" && "justify-center",
+  a === "end" && "justify-end",
+  a === "end" && "justify-end",
+  a === "between" && "justify-between",
+  a === "around" && "justify-around"
+), to = (p) => f(
+  p === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+  p === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+  p === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+  p === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
+);
+function no({
+  children: p,
+  items: a,
+  justify: y,
+  grow: K,
+  padding: e,
+  paddingX: c,
+  paddingY: n,
+  paddingBottom: m,
+  paddingTop: l,
+  paddingLeft: i,
+  paddingRight: r,
+  margin: M,
+  marginX: O,
+  marginY: P,
+  horizontal: Q,
+  horizontalMobile: V,
+  elevation: s = 0,
+  rounded: Z,
+  centered: _,
+  width: d,
+  minHeight: u,
+  maxWidth: k,
+  minWidth: $,
+  height: b,
+  maxHeight: g,
+  borderColor: w,
+  borderTopColor: N,
+  borderRightColor: I,
+  borderBottomColor: G,
+  borderLeftColor: j,
+  backgroundColor: F,
+  sizing: o = "none",
+  overflowY: x = "inherit",
+  overflowX: v = "inherit",
+  flexShrink: S,
+  flexGrow: U,
+  position: q,
+  top: A,
+  left: D,
+  id: h,
+  noGap: B,
+  marginTop: C,
+  marginBottom: W,
+  testid: H,
+  bottom: E,
+  zIndex: J,
+  flexWrap: L,
+  className: R,
+  unclipEdges: T,
+  ...t
+}) {
+  const Y = po({ items: a, justify: y, grow: K }), X = to(o);
+  return /* @__PURE__ */ z(
+    "div",
+    {
+      id: h,
+      "data-testid": H,
+      ...t,
+      style: {
+        height: b === "full" ? "100%" : b !== void 0 ? `${b}px` : void 0,
+        maxHeight: g !== void 0 ? isNaN(+g) ? g : `${g}px` : t.style?.maxHeight,
+        maxWidth: k !== void 0 ? isNaN(+k) ? k : `${k}px` : t.style?.maxWidth,
+        minHeight: u !== void 0 ? isNaN(+u) ? u : `${u}px` : t.style?.minHeight,
+        width: d !== void 0 && typeof d == "number" ? `${d}px` : void 0,
+        minWidth: $ !== void 0 ? `${$}px` : void 0,
+        border: w ? `1px solid var(--color-${w})` : void 0,
+        borderTop: N ? `1px solid var(--color-${N})` : void 0,
+        borderRight: I ? `1px solid var(--color-${I})` : void 0,
+        borderBottom: G ? `1px solid var(--color-${G})` : void 0,
+        borderLeft: j ? `1px solid var(--color-${j})` : void 0,
+        backgroundColor: F ? `var(--color-${F})` : void 0,
+        flexGrow: U !== void 0 ? U : void 0,
+        flexShrink: S !== void 0 ? S : void 0,
+        position: q !== void 0 ? q : void 0,
+        top: A !== void 0 ? `${A}px` : void 0,
+        bottom: E !== void 0 ? `${E}px` : void 0,
+        left: D !== void 0 ? `${D}px` : void 0,
+        borderBlock: t.style?.borderBlock,
+        marginInline: t.style?.marginInline,
+        zIndex: J !== void 0 ? J : void 0,
+        flexWrap: L,
+        paddingInline: t.style?.paddingInline,
+        gap: t.style?.gap,
+        ...t.style
+      },
+      className: f(
+        "scrollbar-thin",
+        "max-w-screen",
+        d !== "fit" && "w-full",
+        d === "full" && "w-full",
+        d === "max" && "w-max",
+        _ && "mx-auto",
+        x == "auto" && "overflow-y-auto",
+        x == "hidden" && "overflow-y-hidden",
+        x == "scroll" && "overflow-y-scroll",
+        v == "auto" && "overflow-x-auto",
+        v == "hidden" && "overflow-x-hidden",
+        v == "scroll" && "overflow-x-scroll",
+        e && o === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        e && o === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        e && o === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        e && o === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        c && o === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        c && o === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        c && o === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        c && o === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        n && o === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        n && o === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        n && o === "layout-group" && oo,
+        n && o === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        m && o === "container" && "pb-mobile-container-padding desktop:pb-desktop-container-padding compact:pb-desktop-compact-container-padding",
+        m && o === "layout" && "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding",
+        m && o === "layout-group" && "pb-mobile-layout-group-padding desktop:pb-desktop-layout-group-padding compact:pb-desktop-compact-layout-group-padding",
+        m && o === "component" && "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding",
+        l && o === "container" && "pt-mobile-container-padding desktop:pt-desktop-container-padding compact:pt-desktop-compact-container-padding",
+        l && o === "layout" && "pt-mobile-layout-padding desktop:pt-desktop-layout-padding compact:pt-desktop-compact-layout-padding",
+        l && o === "layout-group" && "pt-mobile-layout-group-padding desktop:pt-desktop-layout-group-padding compact:pt-desktop-compact-layout-group-padding",
+        l && o === "component" && "pt-mobile-component-padding desktop:pt-desktop-component-padding compact:pt-desktop-compact-component-padding",
+        i && o === "container" && "pl-mobile-container-padding desktop:pl-desktop-container-padding compact:pl-desktop-compact-container-padding",
+        i && o === "layout" && "pl-mobile-layout-padding desktop:pl-desktop-layout-padding compact:pl-desktop-compact-layout-padding",
+        i && o === "layout-group" && "pl-mobile-layout-group-padding desktop:pl-desktop-layout-group-padding compact:pl-desktop-compact-layout-group-padding",
+        i && o === "component" && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding",
+        r && o === "container" && "pr-mobile-container-padding desktop:pr-desktop-container-padding compact:pr-desktop-compact-container-padding",
+        r && o === "layout" && "pr-mobile-layout-padding desktop:pr-desktop-layout-padding compact:pr-desktop-compact-layout-padding",
+        r && o === "layout-group" && "pr-mobile-layout-group-padding desktop:pr-desktop-layout-group-padding compact:pr-desktop-compact-layout-group-padding",
+        r && o === "component" && "pr-mobile-component-padding desktop:pr-desktop-component-padding compact:pr-desktop-compact-component-padding",
+        M && o === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
+        O && o === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
+        C && o === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
+        W && o === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
+        P && o === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
+        Q ? "desktop:flex-row" : "desktop:flex-col",
+        V ? "flex-row" : "flex-col",
+        Y,
+        !B && X,
+        s === 0 && "shadow-none",
+        s === 2 && "shadow-2",
+        s === 4 && "shadow-4",
+        s === 16 && "shadow-16",
+        Z && "rounded",
+        T && "-m-0.75 p-1",
+        R
+      ),
+      children: p
+    }
+  );
+}
+export {
+  no as Stack
+};

package/dist/components/StatusPill.js

@@ -0,0 +1,44 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Label as m } from "./Label.js";
+import { clsx as a } from "../node_modules/clsx/dist/clsx.js";
+import { paddingXUsingLayoutGroupGap as p, componentPaddingYUsingComponentGap as u } from "../classNames.js";
+function f({
+  children: e,
+  state: r = "in-progress",
+  intent: o = "neutral",
+  id: c,
+  testid: l,
+  ...i
+}) {
+  const g = a(
+    r === "completed" && ["neutral", "critical"].includes(o) ? "text-text-on-action-primary-normal" : "text-neutral-500"
+  ), s = a({
+    "bg-neutral-200": o === "neutral" && r === "in-progress",
+    "bg-text-primary-normal": o === "neutral" && r === "completed",
+    "bg-warning-200": o === "warning" && r === "in-progress",
+    "bg-background-warning-normal": o === "warning" && r === "completed",
+    "bg-success-200": o === "success" && r === "in-progress",
+    "bg-background-success-normal": o === "success" && r === "completed",
+    "bg-critical-200": o === "critical" && r === "in-progress",
+    "bg-background-critical-normal": o === "critical" && r === "completed"
+  });
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      id: c,
+      "data-testid": l,
+      ...i,
+      className: a(
+        "rounded flex items-center",
+        g,
+        s,
+        p,
+        u
+      ),
+      children: /* @__PURE__ */ n(m, { id: c ? `${c}-label` : void 0, testid: l ? `${l}-label` : void 0, children: e })
+    }
+  );
+}
+export {
+  f as StatusPill
+};

package/dist/components/Stepper.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsxs as T, jsx as e } from "react/jsx-runtime";
+import { useState as x, useEffect as j } from "react";
+import { Button as b } from "./Button.js";
+import { InputBase as w } from "./Input.js";
+import { Icon as I } from "./Icon.js";
+import { clsx as p } from "../node_modules/clsx/dist/clsx.js";
+import { componentGap as B } from "../classNames.js";
+import { Tooltip as $ } from "./Tooltip.js";
+function J({
+  error: v,
+  disabled: r,
+  hideButtons: d = !1,
+  value: n,
+  setValue: s,
+  onDecrease: M,
+  onIncrease: N,
+  onBlur: S,
+  id: i,
+  testid: t,
+  min: a,
+  max: o,
+  step: u = 1,
+  ...k
+}) {
+  const [f, y] = x(!1), [C, l] = x(String(n));
+  j(() => {
+    f || l(String(n));
+  }, [n, f]);
+  function D() {
+    o != null && n >= o || (s((c) => Math.min(c + u, o ?? 1 / 0)), N?.());
+  }
+  function E() {
+    a != null && n <= a || (s((c) => Math.max(c - u, a ?? -1 / 0)), M?.());
+  }
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      id: i,
+      "data-testid": t,
+      className: p("flex items-center", B),
+      children: [
+        !d && /* @__PURE__ */ e(
+          $,
+          {
+            message: "Decrease Quantity",
+            testid: t ? `${t}-decrease-tooltip` : void 0,
+            children: /* @__PURE__ */ e(
+              b,
+              {
+                id: i ? `${i}-decrease-button` : void 0,
+                testid: t ? `${t}-decrease-button` : void 0,
+                iconOnly: !0,
+                variant: "tertiary",
+                leftIcon: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: p(
+                      !r || n > 0 && "text-icon-action-primary-normal",
+                      r || n === 0 && "text-icon-action-primary-disabled",
+                      "contents"
+                    ),
+                    children: /* @__PURE__ */ e(I, { name: "remove" })
+                  }
+                ),
+                onClick: E,
+                disabled: r || n <= 0 || a != null && n <= a
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(
+          w,
+          {
+            ...k,
+            id: i ? `${i}-input` : void 0,
+            testid: t ? `${t}-input` : void 0,
+            type: "text",
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+            align: "center",
+            value: C,
+            onFocus: () => y(!0),
+            onChange: (c) => {
+              const m = c.target.value;
+              if (m === "") {
+                l(""), s(0);
+                return;
+              }
+              if (!/^\d*$/.test(m))
+                return;
+              const g = m.replace(/^0+/, "") || "0", h = parseInt(g, 10);
+              o != null && h > o || (l(g), s(h));
+            },
+            onBlur: () => {
+              y(!1), l(String(n)), S?.();
+            },
+            error: v,
+            disabled: r,
+            className: "!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
+          }
+        ) }),
+        !d && /* @__PURE__ */ e(
+          $,
+          {
+            message: "Increase Quantity",
+            testid: t ? `${t}-increase-tooltip` : void 0,
+            children: /* @__PURE__ */ e(
+              b,
+              {
+                id: i ? `${i}-increase-button` : void 0,
+                testid: t ? `${t}-increase-button` : void 0,
+                iconOnly: !0,
+                variant: "tertiary",
+                leftIcon: /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: p(
+                      !r && "text-icon-action-primary-normal",
+                      r && "text-icon-action-primary-disabled",
+                      "contents"
+                    ),
+                    children: /* @__PURE__ */ e(I, { name: "add" })
+                  }
+                ),
+                onClick: D,
+                disabled: r || o != null && n >= o
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  J as Stepper
+};

package/dist/components/Subheader.d.ts

@@ -4,7 +4,8 @@ type SubheaderProps = {
     as?: Tags;
     id?: string;
     testid?: string;
+    addOverflow?: boolean;
 } & AsProps<Tags> & TextAttributes & TypographyProps;
-export declare function Subheader({ className, children, as, align, color, tall, id, testid, ...props }: SubheaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Subheader({ className, children, as, align, color, tall, addOverflow, id, testid, ...props }: SubheaderProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Subheader.d.ts.map

package/dist/components/Subheader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Subheader.d.ts","sourceRoot":"","sources":["../../src/components/Subheader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGpE,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,GAAG,CAAC;AAEnE,KAAK,cAAc,GAAG;IACpB,EAAE,CAAC,EAAE,IAAI,CAAC;IACV,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,OAAO,CAAC,IAAI,CAAC,GACf,cAAc,GACd,eAAe,CAAC;AAElB,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,EAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,EACJ,EAAE,EACF,MAAM,EACN,GAAG,KAAK,EACT,EAAE,cAAc,2CAuBhB"}
+{"version":3,"file":"Subheader.d.ts","sourceRoot":"","sources":["../../src/components/Subheader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGpE,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,GAAG,CAAC;AAEnE,KAAK,cAAc,GAAG;IACpB,EAAE,CAAC,EAAE,IAAI,CAAC;IACV,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,OAAO,CAAC,IAAI,CAAC,GACf,cAAc,GACd,eAAe,CAAC;AAElB,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,EAAW,EACX,KAAK,EACL,KAAK,EACL,IAAI,EACJ,WAAW,EACX,EAAE,EACF,MAAM,EACN,GAAG,KAAK,EACT,EAAE,cAAc,2CAwBhB"}

package/dist/components/Subheader.js

@@ -0,0 +1,41 @@
+import { jsx as c } from "react/jsx-runtime";
+import { clsx as d } from "../node_modules/clsx/dist/clsx.js";
+import { typography as p } from "../classNames.js";
+function y({
+  className: o,
+  children: s,
+  as: i = "span",
+  align: e,
+  color: t,
+  tall: l,
+  addOverflow: a,
+  id: n,
+  testid: m,
+  ...r
+}) {
+  return /* @__PURE__ */ c(
+    i,
+    {
+      id: n,
+      "data-testid": m,
+      className: d(
+        p.subheader,
+        o,
+        e === "left" && "text-left",
+        e === "center" && "text-center",
+        e === "right" && "text-right",
+        l && "!leading-6",
+        a && "whitespace-nowrap text-ellipsis overflow-hidden"
+      ),
+      style: {
+        ...r.style,
+        color: t ? `var(--color-${t})` : void 0
+      },
+      ...r,
+      children: s
+    }
+  );
+}
+export {
+  y as Subheader
+};

package/dist/components/Surface.js

@@ -0,0 +1,30 @@
+import { jsx as m } from "react/jsx-runtime";
+import { clsx as c } from "../node_modules/clsx/dist/clsx.js";
+function h({
+  children: o,
+  className: s,
+  elevation: r = 0,
+  id: d,
+  ...a
+}) {
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      id: d,
+      className: c(
+        "rounded-base",
+        {
+          "shadow-2": r === 2,
+          "shadow-4": r === 4,
+          "shadow-16": r === 16
+        },
+        s
+      ),
+      ...a,
+      children: o
+    }
+  );
+}
+export {
+  h as Surface
+};