@temp-spotwork/ui 1.4.3

package/dist/components/molecules/dataviz/donut-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { DonutChart } from './donut-chart';
+export type { DonutChartProps } from './donut-chart';

package/dist/components/molecules/dataviz/donut-chart/index.js

@@ -0,0 +1,4 @@
+import { DonutChart as t } from "./donut-chart.js";
+export {
+  t as DonutChart
+};

package/dist/components/molecules/dataviz/donut-chart/styles.d.ts

@@ -0,0 +1,11 @@
+export declare const getStyles: (donutSize: number) => {
+    container: string;
+    chartBox: string;
+    donutChart: string;
+    labelContainer: string;
+    subLabelBox: string;
+    summaryContainer: string;
+    legendBox: string;
+    dotStyle: string;
+    legendValue: string;
+};

package/dist/components/molecules/dataviz/donut-chart/styles.js

@@ -0,0 +1,14 @@
+const t = (e) => ({
+  container: "relative flex flex-col items-center gap-lg w-full",
+  chartBox: "flex justify-center items-center",
+  donutChart: `w-[${e}rem] h-[${e}rem]`,
+  labelContainer: "absolute z-10 top-200 left-[50%] translate-x-[-50%] flex flex-col items-center",
+  subLabelBox: "flex items-baseline gap-xxs",
+  summaryContainer: "flex items-start content-start flex-wrap gap-y-xs gap-x-lg",
+  legendBox: "flex items-center gap-xs",
+  dotStyle: "w-[1rem] h-[1rem] rounded-full",
+  legendValue: "flex flex-col items-center h-[1.5rem] w-[2.1rem] px-xxs justify-center content-center gap-md rounded-[0.2rem] bg-surface-active"
+});
+export {
+  t as getStyles
+};

package/dist/components/molecules/dataviz/dot-matrix/DotMatrix.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DotMatrix } from './';
+
+declare const meta: Meta<typeof DotMatrix>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/molecules/dataviz/dot-matrix/DotMatrix.stories.js

@@ -0,0 +1,20 @@
+import { f as o } from "../../../../index-DfdAzObv.js";
+import { DotMatrix as t } from "./dot-matrix.js";
+const e = {
+  title: "@spotwork-ui/DotMatrix",
+  component: t,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+  args: { onClick: o() }
+}, s = {
+  args: {}
+};
+export {
+  s as Primary,
+  e as default
+};

package/dist/components/molecules/dataviz/dot-matrix/dot-matrix.d.ts

@@ -0,0 +1,14 @@
+export type DotMatrixDataType = {
+    date?: Date;
+    label: string;
+};
+export type DotMatrixProps = {
+    showSummary?: boolean;
+    data: DotMatrixDataType[];
+    legendKey: {
+        [key: string]: string;
+    };
+    sortOrder?: 'date' | 'legend';
+    showSummaryZeroValues?: boolean;
+};
+export declare function DotMatrix({ showSummary, data, legendKey, sortOrder, showSummaryZeroValues, }: DotMatrixProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/dataviz/dot-matrix/dot-matrix.js

@@ -0,0 +1,67 @@
+import { jsx as l, jsxs as m } from "react/jsx-runtime";
+import { Typography as d } from "../../../styles/typography/typography.js";
+import { getClasses as g } from "./styles.js";
+import { c as f } from "../../../../index-fN7hCOo3.js";
+function S({
+  showSummary: n,
+  data: s,
+  legendKey: c,
+  sortOrder: b,
+  showSummaryZeroValues: u
+}) {
+  const r = g(), t = [];
+  switch (b) {
+    case "date":
+      s && t.push(
+        ...[...s].sort((e, i) => Number(i.date) - Number(e.date))
+      );
+      break;
+    case "legend":
+      s && t.push(
+        ...[...s].sort((e, i) => i.label.localeCompare(e.label))
+      );
+      break;
+    default:
+      s && t.push(...s);
+  }
+  const o = [];
+  if (n)
+    for (const e in c)
+      o.push({
+        label: e,
+        value: s && s.filter((i) => i.label === e).length
+      });
+  const a = ({ value: e }) => /* @__PURE__ */ l(
+    "div",
+    {
+      className: f(r.dotStyle, `bg-[${c[e.label]}]`),
+      "data-testid": `dot-${e.label}`
+    }
+  ), h = s && /* @__PURE__ */ l("div", { className: r.matrixBox, children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ l(a, { value: e }, Math.random().toString(36).substring(2, 7))) }), p = s && n && /* @__PURE__ */ l("div", { "data-testid": "summary", className: r.summaryBox, children: o == null ? void 0 : o.map((e) => e.value === 0 && !u ? null : /* @__PURE__ */ m(
+    "div",
+    {
+      className: r.legendBox,
+      "data-testid": `legend-${e.label}`,
+      children: [
+        /* @__PURE__ */ l(a, { value: e }),
+        /* @__PURE__ */ l(d, { swStyle: 1, children: e.label, color: "subdued" }),
+        /* @__PURE__ */ l("div", { className: r.legendValue, children: /* @__PURE__ */ l(
+          d,
+          {
+            swStyle: 1,
+            children: e.value.toString(),
+            color: "active"
+          }
+        ) })
+      ]
+    },
+    Math.random().toString(36).substring(2, 7)
+  )) });
+  return /* @__PURE__ */ m("div", { className: r.container, children: [
+    h,
+    p
+  ] });
+}
+export {
+  S as DotMatrix
+};

package/dist/components/molecules/dataviz/dot-matrix/index.d.ts

@@ -0,0 +1,2 @@
+export { DotMatrix } from './dot-matrix';
+export type { DotMatrixProps, DotMatrixDataType } from './dot-matrix';

package/dist/components/molecules/dataviz/dot-matrix/index.js

@@ -0,0 +1,4 @@
+import { DotMatrix as t } from "./dot-matrix.js";
+export {
+  t as DotMatrix
+};

package/dist/components/molecules/dataviz/dot-matrix/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const getClasses: () => {
+    container: string;
+    matrixBox: string;
+    dotStyle: string;
+    summaryBox: string;
+    legendBox: string;
+    legendValue: string;
+};

package/dist/components/molecules/dataviz/dot-matrix/styles.js

@@ -0,0 +1,11 @@
+const e = () => ({
+  container: "flex flex-col gap-xl",
+  matrixBox: "flex gap-xs flex-wrap",
+  dotStyle: "w-[1rem] h-[1rem] rounded-full",
+  summaryBox: "flex gap-y-xs gap-y-xl flex-wrap",
+  legendBox: "flex items-center gap-xs",
+  legendValue: "flex items-center justify-center min-w-[2rem] h-[1.5rem] px-xxs rounded-[0.2rem] bg-surface-active"
+});
+export {
+  e as getClasses
+};

package/dist/components/molecules/dataviz/legend/index.d.ts

@@ -0,0 +1,2 @@
+export { Legend } from './legend';
+export type { LegendProps } from './legend';

package/dist/components/molecules/dataviz/legend/index.js

@@ -0,0 +1,4 @@
+import { Legend as r } from "./legend.js";
+export {
+  r as Legend
+};

package/dist/components/molecules/dataviz/legend/legend.d.ts

@@ -0,0 +1,12 @@
+import { DataVizColor } from '../../../styles/colors';
+
+export type LegendProps = {
+    data: {
+        label: string;
+        value: number;
+        color: DataVizColor;
+    }[];
+    width?: number;
+    filterZeroValues?: boolean;
+};
+export declare function Legend({ data, width, filterZeroValues }: LegendProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/dataviz/legend/legend.js

@@ -0,0 +1,53 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import "../../../styles/colors/colors.js";
+import { dataVizColors as c } from "../../../styles/colors/colormap.js";
+import { Typography as t } from "../../../styles/typography/typography.js";
+function n({ data: a, width: l, filterZeroValues: s }) {
+  const o = s ? a.filter((e) => e.value !== 0) : a;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "flex flex-wrap gap-x-xl gap-y-xs ",
+      style: {
+        width: l ? `${l}rem` : "100%"
+      },
+      "data-testid": "legend-box",
+      children: o.map((e) => /* @__PURE__ */ i(
+        "div",
+        {
+          "data-testid": "legend-" + e.label,
+          className: "flex items-center gap-xs",
+          children: [
+            /* @__PURE__ */ r(
+              "div",
+              {
+                title: e.label,
+                "data-testid": "legend-" + e.label,
+                style: {
+                  background: c[e.color]
+                  // dynamic values doesn't support by tailwind
+                },
+                className: "h-[1rem] w-[1rem] rounded-full"
+              },
+              e.label
+            ),
+            /* @__PURE__ */ r(t, { swStyle: 1, color: "subdued", children: e.label }),
+            /* @__PURE__ */ r(
+              t,
+              {
+                swStyle: 1,
+                color: "active",
+                className: "bg-surface-active px-xxs min-w-[2rem] text-center rounded-[0.2rem]",
+                children: e.value
+              }
+            )
+          ]
+        },
+        e.label
+      ))
+    }
+  );
+}
+export {
+  n as Legend
+};

package/dist/components/molecules/dataviz/progress-bar/ProgressBar.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProgressBar } from '.';
+
+declare const meta: Meta<typeof ProgressBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutLabelColor: Story;
+export declare const WithLabelColorSuccess: Story;
+export declare const WithLabelColorAlert: Story;
+export declare const WithLabelColorWarning: Story;
+export declare const WithLabelColorActive: Story;
+export declare const WithTotalCount: Story;

package/dist/components/molecules/dataviz/progress-bar/ProgressBar.stories.js

@@ -0,0 +1,88 @@
+import { ProgressBar as o } from "./progress-bar.js";
+import "../../../styles/colors/colors.js";
+import { glyphColorsKeys as t } from "../../../styles/colors/colormap.js";
+const s = {
+  title: "@spotwork-ui/ProgresBar",
+  component: o,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    labelColor: {
+      control: "select",
+      options: t,
+      description: 'Custom color for the label. Defaults to "subdued" if not provided.'
+    },
+    progress: {
+      control: "number"
+    },
+    total: {
+      control: "number"
+    },
+    hasTotalCount: {
+      control: "boolean"
+    },
+    text: {
+      control: "text"
+    }
+  }
+}, a = {
+  args: {
+    progress: 50,
+    total: 100,
+    text: "Filled"
+  }
+}, n = {
+  args: {
+    progress: 75,
+    total: 100,
+    text: "Filled"
+  }
+}, i = {
+  args: {
+    progress: 80,
+    total: 100,
+    text: "Filled",
+    labelColor: "success"
+  }
+}, c = {
+  args: {
+    progress: 30,
+    total: 100,
+    text: "Filled",
+    labelColor: "alert"
+  }
+}, g = {
+  args: {
+    progress: 60,
+    total: 100,
+    text: "Filled",
+    labelColor: "warning"
+  }
+}, p = {
+  args: {
+    progress: 90,
+    total: 100,
+    text: "Filled",
+    labelColor: "active"
+  }
+}, u = {
+  args: {
+    progress: 75,
+    total: 100,
+    text: "Filled",
+    hasTotalCount: !0,
+    labelColor: "active"
+  }
+};
+export {
+  a as Default,
+  p as WithLabelColorActive,
+  c as WithLabelColorAlert,
+  i as WithLabelColorSuccess,
+  g as WithLabelColorWarning,
+  u as WithTotalCount,
+  n as WithoutLabelColor,
+  s as default
+};

package/dist/components/molecules/dataviz/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './progress-bar';
+export type { ProgressBarProps } from './progress-bar';

package/dist/components/molecules/dataviz/progress-bar/index.js

@@ -0,0 +1,4 @@
+import { ProgressBar as e } from "./progress-bar.js";
+export {
+  e as ProgressBar
+};

package/dist/components/molecules/dataviz/progress-bar/progress-bar.d.ts

@@ -0,0 +1,34 @@
+import { StyleMapKey } from '../../../styles/typography';
+import { GlyphColor } from '../../../styles/colors';
+
+export type ProgressBarProps = {
+    /**
+     * The current progress value displayed on the chart.
+     */
+    progress: number;
+    /**
+     * The maximum value of progress, defining the scale of the chart.
+     */
+    total: number;
+    /**
+     * Determines whether to display the total value in a label within the component.
+     */
+    hasTotalCount?: boolean;
+    /**
+     * Custom text to be displayed in the label of the component.
+     */
+    text?: string;
+    /**
+     * Custom style gor the label of the component
+     */
+    swStyle?: StyleMapKey;
+    /**
+     * Custom color for the label. Defaults to 'subdued' if not provided.
+     */
+    labelColor?: GlyphColor;
+    /**
+     * Custom class name for the component
+     */
+    className?: string;
+};
+export declare function ProgressBar({ progress, total, hasTotalCount, text, swStyle, labelColor, className, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/dataviz/progress-bar/progress-bar.js

@@ -0,0 +1,48 @@
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import { Typography as h } from "../../../styles/typography/typography.js";
+import "../../../styles/colors/colors.js";
+import { surface as b, crusta as B, sun as v, apple as y } from "../../../styles/colors/colormap.js";
+import { getStyles as $ } from "./styles.js";
+import { t as o } from "../../../../bundle-mjs-CAy1p0fn.js";
+function P({
+  progress: e,
+  total: r,
+  hasTotalCount: n = !1,
+  text: l = "Filled",
+  swStyle: m = 1,
+  labelColor: u,
+  className: p
+}) {
+  const s = e && r > 0 ? e / r * 100 : 0, i = 100 - s, f = s <= 33.99 ? b.badge : s <= 66.99 ? B[400] : s <= 99.99 ? v[400] : y[600], g = (n ? `${e > r ? r : e}/${r}` : `${e > r ? r : e}`) + " " + l, t = u ?? "subdued", d = $();
+  return /* @__PURE__ */ a("div", { children: /* @__PURE__ */ c("div", { className: o(d.container, p), children: [
+    /* @__PURE__ */ a(h, { swStyle: m, color: t, children: g }),
+    /* @__PURE__ */ c("div", { className: d.chartBox, children: [
+      /* @__PURE__ */ a(
+        "div",
+        {
+          "data-testid": "progress-bar",
+          style: { width: `${s}%`, background: f },
+          className: o(
+            d.progressBar,
+            s >= 100 ? "rounded-r-[0.3rem] rounded-l-[0.3rem]" : "rounded-l-[0.3rem]"
+          )
+        }
+      ),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          "data-testid": "unfilled-progress-bar",
+          style: { width: `${i}%` },
+          className: o(
+            d.progressBar,
+            t === "active" ? "bg-progressBar-trackActive" : "bg-progressBar-trackDefault",
+            i >= 100 ? "rounded-[0.3rem]" : "rounded-r-[0.3rem]"
+          )
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  P as ProgressBar
+};

package/dist/components/molecules/dataviz/progress-bar/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const getStyles: () => {
+    container: string;
+    chartBox: string;
+    progressBar: string;
+};

package/dist/components/molecules/dataviz/progress-bar/styles.js

@@ -0,0 +1,8 @@
+const e = () => ({
+  container: "w-full flex flex-col gap-xs",
+  chartBox: "flex flex-row",
+  progressBar: "h-[0.5rem]"
+});
+export {
+  e as getStyles
+};

package/dist/components/molecules/dataviz/single-stacked-bar/SingleStackedBar.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SingleStackedBar } from './';
+
+declare const meta: Meta<typeof SingleStackedBar>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/molecules/dataviz/single-stacked-bar/SingleStackedBar.stories.js

@@ -0,0 +1,20 @@
+import { f as o } from "../../../../index-DfdAzObv.js";
+import { SingleStackedBar as r } from "./single-stacked-bar.js";
+const e = {
+  title: "@spotwork-ui/SingleStackedBar",
+  component: r,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    backgroundColor: { control: "color" }
+  },
+  args: { onClick: o() }
+}, c = {
+  args: {}
+};
+export {
+  c as Primary,
+  e as default
+};

package/dist/components/molecules/dataviz/single-stacked-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { SingleStackedBar } from './single-stacked-bar';
+export type { SingleStackedBarProps } from './single-stacked-bar';

package/dist/components/molecules/dataviz/single-stacked-bar/index.js

@@ -0,0 +1,4 @@
+import { SingleStackedBar as a } from "./single-stacked-bar.js";
+export {
+  a as SingleStackedBar
+};

package/dist/components/molecules/dataviz/single-stacked-bar/single-stacked-bar.d.ts

@@ -0,0 +1,15 @@
+import { DataVizColor } from '../../../styles/colors';
+
+export type SingleStackedBarProps = {
+    title: string;
+    score: number;
+    maxScore?: number;
+    data: {
+        label: string;
+        value: number;
+        color: DataVizColor;
+    }[];
+    width?: number;
+    filterZeroValues?: boolean;
+};
+export declare function SingleStackedBar({ title, score, maxScore, data, width, filterZeroValues, }: SingleStackedBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/molecules/dataviz/single-stacked-bar/single-stacked-bar.js

@@ -0,0 +1,81 @@
+import { jsxs as l, jsx as t, Fragment as h } from "react/jsx-runtime";
+import { Typography as a } from "../../../styles/typography/typography.js";
+import "../../../styles/colors/colors.js";
+import { dataVizColors as f } from "../../../styles/colors/colormap.js";
+function y({
+  title: o,
+  score: c,
+  maxScore: r,
+  data: d,
+  width: s,
+  filterZeroValues: n
+}) {
+  const i = n ? d.filter((e) => e.value !== 0) : d, m = i.reduce((e, x) => e + x.value, 0), u = (e) => e / m * 100 + "%";
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: "flex flex-col gap-xs",
+      "data-testid": "stacked-bar-container",
+      style: {
+        width: s ? `${s}rem` : "100%"
+      },
+      children: [
+        /* @__PURE__ */ t(
+          a,
+          {
+            "data-testid": "stacked-bar-title",
+            children: o,
+            swStyle: 8
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: "flex flex-row items-baseline gap-xxs",
+            "data-testid": "metric-box",
+            children: [
+              /* @__PURE__ */ t(
+                a,
+                {
+                  "data-testid": "calculated-score",
+                  children: c.toString(),
+                  swStyle: 9
+                }
+              ),
+              r && /* @__PURE__ */ l(h, { children: [
+                /* @__PURE__ */ t(a, { children: "out of", color: "subdued", swStyle: 1 }),
+                /* @__PURE__ */ t(
+                  a,
+                  {
+                    "data-testid": "max-score",
+                    children: r.toString(),
+                    color: "subdued",
+                    swStyle: 1
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "mt-xs  rounded-xxs overflow-hidden", children: /* @__PURE__ */ t("div", { className: "flex flex-row gap-[0.1rem]", "data-testid": "chart-box", children: i.map((e) => /* @__PURE__ */ t(
+          "div",
+          {
+            title: e.label,
+            "data-testid": "chart-" + e.label,
+            style: {
+              width: u(e.value),
+              // dynamic values doesn't support by tailwind
+              background: f[e.color]
+              // dynamic values doesn't support by tailwind
+            },
+            className: "h-[0.5rem]"
+          },
+          e.label
+        )) }) })
+      ]
+    }
+  );
+}
+export {
+  y as SingleStackedBar
+};

package/dist/components/molecules/dialog/dialog.d.ts

@@ -0,0 +1,25 @@
+import { default as React, ReactNode } from 'react';
+import { ButtonProps } from '../../../main';
+
+/**
+ * Dialog component props interface
+ * Provides a modal dialog with customizable header, content, and action buttons
+ */
+export type DialogProps = {
+    title: string;
+    open: boolean;
+    subTitle?: ReactNode;
+    setClose: () => void;
+    cancelButtonText?: string;
+    children: React.ReactNode;
+    width?: string;
+    hasPadding?: boolean;
+    hasActionButtons?: boolean;
+    hasBottomBorder?: boolean;
+    actionButtons?: ButtonProps[];
+};
+/**
+ * Dialog component that renders a modal overlay with customizable content
+ * Uses Radix UI for accessibility and proper modal behavior
+ */
+export declare function Dialog({ children, width, open, title, subTitle, cancelButtonText, setClose, actionButtons, hasPadding, hasActionButtons, hasBottomBorder, }: DialogProps): import("react/jsx-runtime").JSX.Element;