@temp-spotwork/ui 1.7.3 → 1.7.4

package/dist/components/atoms/avatar/avatar.js

@@ -1,10 +1,10 @@
-import { jsx as r, Fragment as E, jsxs as I } from "react/jsx-runtime";
+import { jsx as r, Fragment as g, jsxs as I } from "react/jsx-runtime";
 import { Typography as y } from "../../styles/typography/typography.js";
 import { classesMap as D } from "./styles.js";
 import F from "./statusIndicatorIcon.js";
 import { t as l } from "../../../bundle-mjs-BjFsLjkg.js";
 function w({
-  id: g,
+  id: E,
   hasBorder: i = !1,
   variant: d,
   image: m,
@@ -14,19 +14,19 @@ function w({
   onClick: s,
   size: t
 }) {
-  const S = (() => {
-    const o = u.trim().split(/\s+/);
-    return o.length > 1 ? (o[0][0] + o[o.length - 1][0]).toUpperCase() : u;
-  })(), e = d === "circular", a = e ? 5 : 5.5, c = t ? t / a : 1, p = D[d](i), h = !e && i && n ? "border-bcolor-active" : "border-bcolor-divider", A = t && a > t ? 1 : 7, C = () => {
-    s && s(g);
-  }, U = m ? /* @__PURE__ */ r(E, { children: /* @__PURE__ */ r(
+  const C = (() => {
+    const e = u.trim().split(/\s+/);
+    return e.length > 1 ? (e[0][0] + e[e.length - 1][0]).toUpperCase() : e.length === 1 ? e[0][0].toUpperCase() : u;
+  })(), a = d === "circular", o = a ? 5 : 5.5, c = t ? t / o : 1, p = D[d](i), h = !a && i && n ? "border-bcolor-active" : "border-bcolor-divider", S = t && o > t ? 1 : 7, U = () => {
+    s && s(E);
+  }, A = m ? /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
     "img",
     {
       className: l(p.image, h),
       src: m,
       alt: "avatar-image"
     }
-  ) }) : /* @__PURE__ */ r(E, { children: /* @__PURE__ */ r(
+  ) }) : /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
     "div",
     {
       "data-testid": "avatar-text-box",
@@ -34,13 +34,13 @@ function w({
       children: /* @__PURE__ */ r(
         y,
         {
-          swStyle: A,
-          children: S,
+          swStyle: S,
+          children: C,
           color: "visualPlaceholderDefault"
         }
       )
     }
-  ) }), f = 0.25, x = e && v && !n && /* @__PURE__ */ r(
+  ) }), f = 0.25, x = a && v && !n && /* @__PURE__ */ r(
     "div",
     {
       className: "absolute",
@@ -51,15 +51,15 @@ function w({
       "data-testid": "avatar-online-status",
       children: /* @__PURE__ */ r(F, { scalingFactor: c })
     }
-  ), b = s ? "button" : "div", _ = () => e && n ? "border-bcolor-active" : "border-[transparent]";
+  ), b = s ? "button" : "div", _ = () => a && n ? "border-bcolor-active" : "border-[transparent]";
   return /* @__PURE__ */ I(
     b,
     {
       "data-testid": "avatar-container",
-      onClick: C,
+      onClick: U,
       style: {
-        width: `${t || a}rem`,
-        height: `${t || a}rem`
+        width: `${t || o}rem`,
+        height: `${t || o}rem`
       },
       className: l(
         "flex items-center justify-center flex-shrink-0 flex-grow-0 relative",
@@ -68,7 +68,7 @@ function w({
       ),
       ...b === "button" ? { type: "button" } : {},
       children: [
-        U,
+        A,
         x
       ]
     }

package/dist/components/atoms/small-large-text/SmallLargeText.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { SmallLargeText } from './small-large-text';
+
+declare const meta: Meta<typeof SmallLargeText>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const TruncatedText: Story;
+export declare const CustomSize: Story;
+export declare const InitiallyExpanded: Story;
+export declare const WithHtmlContent: Story;

package/dist/components/atoms/small-large-text/SmallLargeText.stories.js

@@ -0,0 +1,60 @@
+import { SmallLargeText as e } from "./small-large-text.js";
+const a = {
+  title: "@spotwork-ui/atoms/SmallLargeText",
+  component: e,
+  parameters: {
+    layout: "padded"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    text: {
+      control: "text",
+      description: "The text content to display"
+    },
+    size: {
+      control: "number",
+      description: "Maximum number of characters to show when truncated (default: 300)"
+    },
+    isSmall: {
+      control: "boolean",
+      description: "Whether the text should initially be truncated (default: true)"
+    }
+  }
+}, t = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.", o = {
+  args: {
+    text: "This is a short piece of text that does not need to be truncated."
+  }
+}, n = {
+  args: {
+    text: t
+  }
+}, s = {
+  args: {
+    text: t,
+    size: 100
+  }
+}, r = {
+  args: {
+    text: t,
+    isSmall: !1
+  }
+}, l = {
+  args: {
+    text: `This text contains <strong>HTML tags</strong> and a list:
+<ul>
+  <li>First item</li>
+  <li>Second item</li>
+</ul>
+This shows how the component sanitizes and renders HTML content properly.
+` + t,
+    size: 200
+  }
+};
+export {
+  s as CustomSize,
+  o as Default,
+  r as InitiallyExpanded,
+  n as TruncatedText,
+  l as WithHtmlContent,
+  a as default
+};

package/dist/components/atoms/small-large-text/small-large-text.js

@@ -1,13 +1,13 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import "../../styles/tailwind-config/index.js";
-import { Typography as l } from "../../styles/typography/typography.js";
+import { Typography as a } from "../../styles/typography/typography.js";
 import "../../styles/colors/colors.js";
 import "../../styles/colors/colormap.js";
 import "../icons/iconsSVGs/Large/Profile.js";
 import "../icons/iconsSVGs/Small/Profile.js";
 import "../../../index-fN7hCOo3.js";
-import { Link as s } from "../../molecules/link/link.js";
-import { useState as c } from "react";
+import { Link as c } from "../../molecules/link/link.js";
+import { useState as d } from "react";
 import "../form/dateselect/dateselect.js";
 import "../form/time-picker/time-picker.js";
 import "../form/dropdown/dropdown.js";
@@ -24,13 +24,22 @@ import "../../molecules/dataviz/donut-chart/donut-chart.js";
 import "../../../react-spring_web.modern-BzbxCya-.js";
 import "../../molecules/form/radiogroup/radiogroup.js";
 import "../../../card-Cc2Qkiqr.js";
-function G({ text: r, size: o = 300, isSmall: m = !0 }) {
-  const [t, p] = c(m);
+import { p as u } from "../../../purify.es-CcKdJiNO.js";
+function J({ text: o, size: r = 300, isSmall: m = !0 }) {
+  const [i, p] = d(m), e = i ? `${o.slice(0, r)}${o.length > r ? "..." : ""}` : o, l = i ? "Show More" : "Show Less";
   return /* @__PURE__ */ n("div", { children: [
-    /* @__PURE__ */ i(l, { swStyle: 3, color: "default", children: t ? `${r.slice(0, o)}${r.length > o ? "..." : ""}` : r }),
-    r.length > o && /* @__PURE__ */ i(s, { text: t ? "Show More" : "Show Less", onClick: () => p((e) => !e) })
+    /* @__PURE__ */ t(a, { swStyle: 3, color: "default", children: /* @__PURE__ */ t(
+      "div",
+      {
+        className: "prose max-w-none [&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6",
+        dangerouslySetInnerHTML: {
+          __html: u.sanitize(e)
+        }
+      }
+    ) }),
+    o.length > r && /* @__PURE__ */ t(c, { text: l, onClick: () => p((s) => !s) })
   ] });
 }
 export {
-  G as SmallLargeText
+  J as SmallLargeText
 };

package/dist/components/molecules/alert/alert.js

@@ -26,8 +26,9 @@ import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
 import "../../../react-spring_web.modern-BzbxCya-.js";
 import "../form/radiogroup/radiogroup.js";
+import "../../../purify.es-CcKdJiNO.js";
 import "../../../card-Cc2Qkiqr.js";
-function er({
+function or({
   children: p,
   width: c,
   open: d,
@@ -75,5 +76,5 @@ function er({
   ] }) });
 }
 export {
-  er as Alert
+  or as Alert
 };

package/dist/components/molecules/dialog/dialog.js

@@ -26,9 +26,10 @@ import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
 import "../../../react-spring_web.modern-BzbxCya-.js";
 import "../form/radiogroup/radiogroup.js";
+import "../../../purify.es-CcKdJiNO.js";
 import "../../../card-Cc2Qkiqr.js";
 import { useUIElementSize as n } from "./use-ui-element-size.js";
-function sr({
+function cr({
   children: f,
   width: h,
   open: x,
@@ -100,5 +101,5 @@ function sr({
   ] }) });
 }
 export {
-  sr as Dialog
+  cr as Dialog
 };

package/dist/components/molecules/drawer/drawer.js

@@ -25,8 +25,9 @@ import { Button as L } from "../button/button.js";
 import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
 import "../form/radiogroup/radiogroup.js";
+import "../../../purify.es-CcKdJiNO.js";
 import "../../../card-Cc2Qkiqr.js";
-function gr({
+function wr({
   children: N,
   actionBox: b,
   title: l,
@@ -123,5 +124,5 @@ function gr({
   ) }) });
 }
 export {
-  gr as Drawer
+  wr as Drawer
 };

package/dist/components/molecules/snackbar/Snackbar.stories.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import { useState as l } from "react";
-import { S as r, P as c, V as d } from "../../../snackbar-BUPlWHWk.js";
+import { S as r, P as c, V as d } from "../../../snackbar-CHpPc7Hi.js";
 import { Button as h } from "../button/button.js";
 const w = {
   title: "@spotwork-ui/Snackbar",

package/dist/components/molecules/snackbar/index.js

@@ -1,4 +1,4 @@
-import { S as o } from "../../../snackbar-BUPlWHWk.js";
+import { S as o } from "../../../snackbar-CHpPc7Hi.js";
 export {
   o as Snackbar
 };

package/dist/components/molecules/snackbar/snackbar.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { S as D } from "../../../snackbar-BUPlWHWk.js";
+import { S as E } from "../../../snackbar-CHpPc7Hi.js";
 import "../../styles/tailwind-config/index.js";
 import "../../styles/typography/typography.js";
 import "../../styles/colors/colors.js";
@@ -25,8 +25,9 @@ import "../datatables/cell/cell.js";
 import "../dataviz/donut-chart/donut-chart.js";
 import "../../../react-spring_web.modern-BzbxCya-.js";
 import "../form/radiogroup/radiogroup.js";
+import "../../../purify.es-CcKdJiNO.js";
 import "../../../card-Cc2Qkiqr.js";
 import "./styles.js";
 export {
-  D as Snackbar
+  E as Snackbar
 };

package/dist/main.js

@@ -58,7 +58,7 @@ import { Link as pr } from "./components/molecules/link/link.js";
 import { Header as ar } from "./components/molecules/navigation/header/header.js";
 import { Sidebar as fr } from "./components/molecules/navigation/sidebar/sidebar.js";
 import { Content as nr } from "./components/molecules/notifications/content/content.js";
-import { S as sr, i as dr } from "./snackbar-BUPlWHWk.js";
+import { S as sr, i as dr } from "./snackbar-CHpPc7Hi.js";
 import { Tooltip as br } from "./components/atoms/tooltip/tooltip.js";
 import { TabGroup as ur } from "./components/molecules/tab-group/tab-group.js";
 import { Menubar as hr } from "./components/molecules/navigation/menubar/menubar.js";

package/dist/{snackbar-BUPlWHWk.js → snackbar-CHpPc7Hi.js}

@@ -27,6 +27,7 @@ import "./components/molecules/datatables/cell/cell.js";
 import "./components/molecules/dataviz/donut-chart/donut-chart.js";
 import "./react-spring_web.modern-BzbxCya-.js";
 import "./components/molecules/form/radiogroup/radiogroup.js";
+import "./purify.es-CcKdJiNO.js";
 import "./card-Cc2Qkiqr.js";
 import { getClasses as Le } from "./components/molecules/snackbar/styles.js";
 var Z = "ToastProvider", [ee, Me, ke] = Fe("Toast"), [pe, Oe] = Re("Toast", [ke]), [Ve, X] = pe(Z), te = (t) => {
@@ -444,7 +445,7 @@ function z(t) {
   return t.some((o) => o === r ? !0 : (o.focus(), document.activeElement !== r));
 }
 var Ze = te, et = oe, ye = re, tt = ne, ot = se, rt = ae, nt = $;
-const Mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const kt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Action: rt,
   Close: nt,
@@ -462,7 +463,7 @@ const Mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   Viewport: et,
   createToastScope: Oe
 }, Symbol.toStringTag, { value: "Module" }));
-function kt({
+function Ot({
   title: t,
   open: r = !0,
   setOpen: o,
@@ -495,7 +496,7 @@ function kt({
 }
 export {
   Ze as P,
-  kt as S,
+  Ot as S,
   et as V,
-  Mt as i
+  kt as i
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@temp-spotwork/ui",
   "private": false,
-  "version": "1.7.3",
+  "version": "1.7.4",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -14,6 +14,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc --p ./tsconfig-build.json && vite build",
+    "build:watch": "vite build --watch",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "prepublishOnly": "npm run build",
@@ -29,7 +30,7 @@
     "chart.js": "^4.4.2",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
-    "dompurify": "^3.0.11",
+    "dompurify": "^3.4.2",
     "moment-timezone": "^0.6.0",
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",