@caseparts-org/caseblocks 0.0.212 → 0.0.213

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/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.212",
+  "version": "0.0.213",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",