@caseparts-org/caseblocks 0.0.211 → 0.0.213

package/dist/assets/Availability.css

@@ -1 +1 @@
-._availability_9rzvh_1{font-style:italic}._tooltipContent_9rzvh_5{max-width:370px}._tooltipContent_9rzvh_5>ul{padding:0;margin:var(--spacing-spacing-2xs) 0}._tooltipContent_9rzvh_5 li{list-style:none}._available_9rzvh_18,._in-stock_9rzvh_18{color:var(--color-alerts-success)}._limited_9rzvh_21{color:var(--color-alerts-warning)}._discontinued_9rzvh_24{color:var(--color-alerts-error-warning)}
+._availability_kb59t_1{font-style:italic}._pointer_kb59t_5{cursor:pointer}._tooltip_kb59t_9{background-color:#fafafa}._tooltipContent_kb59t_13{max-width:370px}._tooltipContent_kb59t_13>ul{padding:0;margin:var(--spacing-spacing-2xs) 0}._tooltipContent_kb59t_13 li{list-style:none}._available_kb59t_26,._in-stock_kb59t_26{color:var(--color-alerts-success)}._limited_kb59t_29{color:var(--color-alerts-warning)}._discontinued_kb59t_32{color:var(--color-alerts-error-warning)}

package/dist/assets/ProgressBar.css

@@ -0,0 +1 @@
+._progressBar-section_w0n30_1{width:500px;display:grid;gap:var(--spacing-spacing-2xs)}._progressBar-cell_w0n30_11{width:90px;display:flex;align-items:center;gap:var(--spacing-spacing-2xs)}._progressBar-cell_w0n30_11>._track_w0n30_25{height:8px}._progressBar-section_w0n30_1>._track_w0n30_25{height:24px}._track_w0n30_25{border:1px solid var(--border-border-primary);border-radius:28px;width:100%;display:flex;flex-direction:row;overflow:hidden;background-color:var(--color-neutrals-neutral-1)}._completed_w0n30_59{background-color:var(--color-alerts-success);height:100%}._inProgress_w0n30_69{background-color:var(--color-alerts-caution-tips);height:100%}._completed_w0n30_59,._completedFull_w0n30_81,._inProgress_w0n30_69{transition:width .8s ease}._labels_w0n30_91{display:flex;flex-direction:row;justify-content:flex-start;gap:var(--spacing-spacing-default)}._labelContainer_w0n30_105{display:flex;flex-direction:row;gap:4px}

package/dist/atoms/Pill/Pill.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 import { TextColorToken } from '../Text/Text';
-export interface PillProps {
+export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: ReactNode;
     colorToken?: "neutral" | "secondary" | "caution-tips" | "warning" | "success" | "error-warning";
     customColor?: string;
@@ -8,4 +8,4 @@ export interface PillProps {
     size: "xs" | "sm" | "md";
     className?: string;
 }
-export declare function Pill({ children, colorToken, textColorToken, customColor, size, className }: PillProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pill({ colorToken, textColorToken, customColor, size, className, children, ...otherProps }: PillProps): import("react/jsx-runtime").JSX.Element;

package/dist/atoms/Pill/Pill.js

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
-import { Text as s } from "../Text/Text.js";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Pill.css';const d = "_pill_1dm0w_1", l = {
-  pill: d,
+import { Text as m } from "../Text/Text.js";
+import { c as d } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Pill.css';const t = "_pill_1dm0w_1", l = {
+  pill: t,
   "pill-xs": "_pill-xs_1dm0w_17",
   "pill-sm": "_pill-sm_1dm0w_25",
   "pill-md": "_pill-md_1dm0w_33",
@@ -13,21 +13,30 @@ import '../../assets/Pill.css';const d = "_pill_1dm0w_1", l = {
   "pill-color-success": "_pill-color-success_1dm0w_73",
   "pill-color-error-warning": "_pill-color-error-warning_1dm0w_81"
 };
-function w({ children: p, colorToken: _ = "neutral", textColorToken: c, customColor: o, size: r, className: n }) {
+function u({
+  colorToken: p = "neutral",
+  textColorToken: _,
+  customColor: o,
+  size: r,
+  className: c,
+  children: n,
+  ...s
+}) {
   return /* @__PURE__ */ i(
     "span",
     {
-      className: m(
+      className: d(
         l.pill,
-        l[`pill-color-${_}`],
+        l[`pill-color-${p}`],
         l[`pill-${r}`],
-        n
+        c
       ),
       style: o ? { background: o } : void 0,
-      children: /* @__PURE__ */ i(s, { size: r, colorToken: c, children: p })
+      ...s,
+      children: /* @__PURE__ */ i(m, { size: r, colorToken: _, children: n })
     }
   );
 }
 export {
-  w as Pill
+  u as Pill
 };

package/dist/molecules/Availability/Availability.js

@@ -1,67 +1,70 @@
-import { jsx as l, jsxs as s, Fragment as p } from "react/jsx-runtime";
+import { jsx as e, jsxs as o, Fragment as m } from "react/jsx-runtime";
 import { c as _ } from "../../clsx-OuTLNxxd.js";
-import { Text as t } from "../../atoms/Text/Text.js";
-import { Tooltip as f } from "../../atoms/Tooltip/Tooltip.js";
-import '../../assets/Availability.css';const b = "_availability_9rzvh_1", z = "_tooltipContent_9rzvh_5", g = "_available_9rzvh_18", w = "_limited_9rzvh_21", C = "_discontinued_9rzvh_24", c = {
-  availability: b,
-  tooltipContent: z,
-  available: g,
-  "in-stock": "_in-stock_9rzvh_18",
-  limited: w,
-  discontinued: C
+import { Text as l } from "../../atoms/Text/Text.js";
+import { Tooltip as b } from "../../atoms/Tooltip/Tooltip.js";
+import '../../assets/Availability.css';const k = "_availability_kb59t_1", f = "_pointer_kb59t_5", C = "_tooltip_kb59t_9", g = "_tooltipContent_kb59t_13", w = "_available_kb59t_26", z = "_limited_kb59t_29", S = "_discontinued_kb59t_32", s = {
+  availability: k,
+  pointer: f,
+  tooltip: C,
+  tooltipContent: g,
+  available: w,
+  "in-stock": "_in-stock_kb59t_26",
+  limited: z,
+  discontinued: S
 };
-function T({
+function L({
   availId: i,
-  availDescription: e,
+  availDescription: t,
   availClassName: d,
-  enableTooltip: r = !1,
+  enableTooltip: n = !1,
   inventory: a
 }) {
-  const o = /* @__PURE__ */ l(t, { size: "xs", className: _(c.availability, c[i], d), children: e });
-  return r && a && i !== "not-found" ? /* @__PURE__ */ l(
-    f,
+  const c = n && a && i !== "not-found", r = /* @__PURE__ */ e(l, { size: "xs", className: _(s.availability, s[i], c ? s.pointer : null, d), children: t });
+  return c ? /* @__PURE__ */ e(
+    b,
     {
       closeDelay: 0,
       openDelay: 250,
       position: "top center",
-      trigger: o,
-      children: /* @__PURE__ */ l(k, { availabilityId: i, inventory: a })
+      trigger: r,
+      contentClassName: s.tooltip,
+      children: /* @__PURE__ */ e(A, { availabilityId: i, inventory: a })
     }
-  ) : o;
+  ) : r;
 }
-function k({ availabilityId: i, inventory: e }) {
-  var r, a, o, n, h, u;
-  const d = (((r = e == null ? void 0 : e.MPK) == null ? void 0 : r.Unreserved) ?? 0) + (((a = e == null ? void 0 : e.SEA) == null ? void 0 : a.Unreserved) ?? 0) + (((o = e == null ? void 0 : e.STL) == null ? void 0 : o.Unreserved) ?? 0);
+function A({ availabilityId: i, inventory: t }) {
+  var n, a, c, r, p, u;
+  const d = (((n = t == null ? void 0 : t.MPK) == null ? void 0 : n.Unreserved) ?? 0) + (((a = t == null ? void 0 : t.SEA) == null ? void 0 : a.Unreserved) ?? 0) + (((c = t == null ? void 0 : t.STL) == null ? void 0 : c.Unreserved) ?? 0);
   if (i === "in-stock" || i === "limited") {
-    const m = i === "in-stock" ? "Additional quantity will be backordered. If you need more than we have at any one warehouse, a CSR will contact you with options." : "Once our stock is depleted, this item will no longer be available.";
-    return /* @__PURE__ */ s("div", { className: c.tooltipContent, children: [
-      /* @__PURE__ */ s(t, { size: "sm", children: [
+    const h = i === "in-stock" ? "Additional quantity will be backordered. If you need more than we have at any one warehouse, a CSR will contact you with options." : "Once our stock is depleted, this item will no longer be available.";
+    return /* @__PURE__ */ o("div", { className: s.tooltipContent, children: [
+      /* @__PURE__ */ o(l, { size: "sm", children: [
         "We currently have (",
         d,
         ") in stock across our three warehouses:"
       ] }),
-      /* @__PURE__ */ s("ul", { children: [
-        /* @__PURE__ */ l("li", { children: /* @__PURE__ */ s(t, { size: "sm", children: [
+      /* @__PURE__ */ o("ul", { children: [
+        /* @__PURE__ */ e("li", { children: /* @__PURE__ */ o(l, { size: "sm", children: [
           "(",
-          ((n = e == null ? void 0 : e.MPK) == null ? void 0 : n.Unreserved) ?? 0,
+          ((r = t == null ? void 0 : t.MPK) == null ? void 0 : r.Unreserved) ?? 0,
           ") Los Angeles"
         ] }) }),
-        /* @__PURE__ */ l("li", { children: /* @__PURE__ */ s(t, { size: "sm", children: [
+        /* @__PURE__ */ e("li", { children: /* @__PURE__ */ o(l, { size: "sm", children: [
           "(",
-          ((h = e == null ? void 0 : e.STL) == null ? void 0 : h.Unreserved) ?? 0,
+          ((p = t == null ? void 0 : t.STL) == null ? void 0 : p.Unreserved) ?? 0,
           ") St. Louis"
         ] }) }),
-        /* @__PURE__ */ l("li", { children: /* @__PURE__ */ s(t, { size: "sm", children: [
+        /* @__PURE__ */ e("li", { children: /* @__PURE__ */ o(l, { size: "sm", children: [
           "(",
-          ((u = e == null ? void 0 : e.SEA) == null ? void 0 : u.Unreserved) ?? 0,
+          ((u = t == null ? void 0 : t.SEA) == null ? void 0 : u.Unreserved) ?? 0,
           ") Seattle"
         ] }) })
       ] }),
-      /* @__PURE__ */ l(t, { size: "sm", children: m })
+      /* @__PURE__ */ e(l, { size: "sm", children: h })
     ] });
   }
-  return i === "available" ? /* @__PURE__ */ l("div", { className: c.tooltipContent, children: /* @__PURE__ */ l(t, { size: "sm", children: "While this part is not currently in stock, we will arrange to get it to you asap, and your CSR will keep you advised of the lead time." }) }) : i === "discontinued" ? /* @__PURE__ */ l("div", { className: c.tooltipContent, children: /* @__PURE__ */ l(t, { size: "sm", children: "Unfortunately, this item is no longer available to purchase." }) }) : /* @__PURE__ */ l(p, {});
+  return i === "available" ? /* @__PURE__ */ e("div", { className: s.tooltipContent, children: /* @__PURE__ */ e(l, { size: "sm", children: "While this part is not currently in stock, we will arrange to get it to you asap, and your CSR will keep you advised of the lead time." }) }) : i === "discontinued" ? /* @__PURE__ */ e("div", { className: s.tooltipContent, children: /* @__PURE__ */ e(l, { size: "sm", children: "Unfortunately, this item is no longer available to purchase." }) }) : /* @__PURE__ */ e(m, {});
 }
 export {
-  T as Availability
+  L as Availability
 };

package/dist/molecules/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    kind?: "percent" | "raw";
+    completedValue: number;
+    inProgressValue?: number;
+    totalValue?: number;
+    totalLabel?: string;
+    completedLabel?: string;
+    inProgressLabel?: string;
+    variant: "cell" | "section";
+    className?: string;
+}
+export declare function ProgressBar({ kind, completedValue, inProgressValue, totalValue, totalLabel, completedLabel, inProgressLabel, variant, className, ...otherProps }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/ProgressBar/ProgressBar.js

@@ -0,0 +1,83 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { Text as _ } from "../../atoms/Text/Text.js";
+import { c as f } from "../../clsx-OuTLNxxd.js";
+import '../../assets/ProgressBar.css';const g = "_track_w0n30_25", v = "_completed_w0n30_59", x = "_inProgress_w0n30_69", B = "_completedFull_w0n30_81", N = "_labels_w0n30_91", k = "_labelContainer_w0n30_105", r = {
+  "progressBar-section": "_progressBar-section_w0n30_1",
+  "progressBar-cell": "_progressBar-cell_w0n30_11",
+  track: g,
+  completed: v,
+  inProgress: x,
+  completedFull: B,
+  labels: N,
+  labelContainer: k
+};
+function z({
+  kind: o = "percent",
+  completedValue: s,
+  inProgressValue: e,
+  totalValue: i,
+  totalLabel: d,
+  completedLabel: p,
+  inProgressLabel: h,
+  variant: a,
+  className: b,
+  ...w
+}) {
+  let c = 0, t = 0;
+  return o === "percent" && (c = s, t = e ?? 0), o === "raw" && i !== void 0 && (c = s / i * 100, e === void 0 && (e = 0), t = e / i * 100), c = Math.min(100, Math.max(0, c)), t = Math.min(100, Math.max(0, t)), /* @__PURE__ */ n(
+    "div",
+    {
+      className: f(
+        r.progressBar,
+        r[`progressBar-${a}`],
+        b
+      ),
+      ...w,
+      children: [
+        a === "section" && /* @__PURE__ */ n("div", { className: r.labels, children: [
+          /* @__PURE__ */ l(
+            m,
+            {
+              label: d,
+              value: i
+            }
+          ),
+          /* @__PURE__ */ l(
+            m,
+            {
+              label: p,
+              value: s
+            }
+          ),
+          /* @__PURE__ */ l(
+            m,
+            {
+              label: h,
+              value: e
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("div", { className: r.track, children: [
+          /* @__PURE__ */ l("div", { className: r.completed, style: { width: `${c}%` } }),
+          a === "section" && e !== void 0 && e !== 0 && s < 100 && /* @__PURE__ */ l("div", { className: r.inProgress, style: { width: `${t}%` } })
+        ] }),
+        a === "cell" && /* @__PURE__ */ n(_, { weight: "semibold", size: "xs", children: [
+          s,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+function m({ isVisible: o = !0, label: s, value: e }) {
+  return !o || !s || !e ? null : /* @__PURE__ */ n("div", { className: r.labelContainer, children: [
+    /* @__PURE__ */ n(_, { size: "sm", colorToken: "quaternary", children: [
+      s,
+      ":"
+    ] }),
+    /* @__PURE__ */ l(_, { weight: "semibold", size: "sm", children: e })
+  ] });
+}
+export {
+  z as ProgressBar
+};

package/dist/molecules/ProgressBar/ProgressBar.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ProgressBar } from './ProgressBar';
+declare const meta: {
+    title: string;
+    component: typeof ProgressBar;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CellVariant: Story;
+export declare const SectionVariant: Story;
+export declare const SectionAllLabelsUsed: Story;
+export declare const CellZeroPercentProgress: Story;
+export declare const CellHundredPercentProgress: Story;
+export declare const SectionZeroPercentProgress: Story;
+export declare const SectionHundredPercentProgress: Story;

package/dist/molecules/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,69 @@
+import { ProgressBar as e } from "./ProgressBar.js";
+const r = {
+  title: "Case Parts/Molecules/ProgressBar",
+  component: e,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+}, a = {
+  args: {
+    variant: "cell",
+    kind: "percent",
+    completedValue: 75
+  }
+}, o = {
+  args: {
+    variant: "section",
+    kind: "percent",
+    completedValue: 60,
+    completedLabel: "Completed"
+  }
+}, l = {
+  args: {
+    variant: "section",
+    kind: "raw",
+    completedValue: 50,
+    inProgressValue: 30,
+    totalValue: 120,
+    totalLabel: "Total",
+    completedLabel: "Completed",
+    inProgressLabel: "In progress"
+  }
+}, n = {
+  args: {
+    variant: "cell",
+    kind: "percent",
+    completedValue: 0
+  }
+}, s = {
+  args: {
+    variant: "cell",
+    kind: "percent",
+    completedValue: 100
+  }
+}, c = {
+  args: {
+    variant: "section",
+    kind: "percent",
+    completedValue: 0,
+    completedLabel: "Completed"
+  }
+}, d = {
+  args: {
+    variant: "section",
+    kind: "percent",
+    completedValue: 100,
+    completedLabel: "Completed"
+  }
+};
+export {
+  s as CellHundredPercentProgress,
+  a as CellVariant,
+  n as CellZeroPercentProgress,
+  l as SectionAllLabelsUsed,
+  d as SectionHundredPercentProgress,
+  o as SectionVariant,
+  c as SectionZeroPercentProgress,
+  r as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.211",
+  "version": "0.0.213",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",