spotlibs-components 0.1.22 → 0.1.24

package/dist/index.d.mts

@@ -544,6 +544,48 @@ interface BaseChipProps {
 
 declare function BaseChip(props: BaseChipProps): React.ReactElement;
 
+interface BaseWatermarkProps {
+  /** Watermark text to display */
+  text?: string;
+  /** Show/hide watermark. Default: true */
+  show?: boolean;
+  /** Text color from DerivedColor token. Default: DerivedColor.color_text_default */
+  textColor?: string;
+  /** Typography variant from VariantStyles (fontSize + fontWeight). Default: "body1_regular" */
+  textVariant?: string;
+  /** Font family. Default: "BRIDigitalText, sans-serif" */
+  fontFamily?: string;
+  /** Text opacity (0-1). Default: 0.15 */
+  opacity?: number;
+  /** Spacing between repetitions (from SpacingToken). Default: SpacingToken.spacing5 */
+  gutter?: number;
+  /** Rotation angle in degrees. Default: -30 */
+  rotate?: number;
+  /** CSS z-index of watermark overlay. Default: 10 */
+  zIndex?: number;
+  /** Max characters before truncation. Default: 40 */
+  maxChars?: number;
+  /** Custom styles for wrapper element */
+  wrapperStyle?: React.CSSProperties;
+  /** HTML tag for wrapper element. Default: "div" */
+  wrapperElement?: keyof JSX.IntrinsicElements;
+  /** Content to render with watermark overlay */
+  children?: React.ReactNode;
+}
+
+/**
+ * BaseWatermark — watermark overlay component.
+ *
+ * All styling from spotlibs design tokens:
+ * - Typography: VariantStyles (fontSize, fontWeight)
+ * - Color: DerivedColor tokens
+ * - Spacing: SpacingToken
+ * - Font: BRIDigitalText
+ *
+ * Renders staggered repeating pattern via canvas (not grid-aligned).
+ */
+declare function BaseWatermark(props: BaseWatermarkProps): React.ReactElement;
+
 interface BaseCardProps {
   /** 
    * Card variant type. Supports typography suffix: "with-header.header1_bold"
@@ -1497,4 +1539,4 @@ interface SubFormBuilderProps<T = any> {
 declare function FormBuilder<T = any>(props: FormBuilderProps<T>): React.ReactElement;
 declare function SubFormBuilder<T = any>(props: SubFormBuilderProps<T>): React.ReactElement;
 
-export { BaseAlert, BaseButton, BaseCard, BaseCheckbox, BaseChip, BaseDatatable, BaseDatePicker, BaseDropdown, BaseDropzone, BaseModalAlert, BaseModalAlertDialog, BaseModalAlertProvider, BaseModalLoading, BaseModalLoadingDialog, BaseModalLoadingProvider, BaseModalOTP, BaseModalPopup, BaseModalStepper, BaseRadioButton, BaseSkeleton, BaseSnackbar, BaseStepper, BaseSwitch, BaseTextArea, BaseTextField, BaseTypography, CONTENT_SPACING_TOKENS, CapsLockOn, ContentSpacing, DatatablePagination, DerivedColor, DownloadIconLarge, FORM_TYPE, FormBuilder, IconBiometricScan, IconDocumentAdd, IconEdit, IconFile, IconGradingRounded, IconListDocument, IconMoney, IconProgress, IconReset, IconSave, IconSaveOutlined, IconSendWhite, IconSendWhiteFull, IconUpload, IconUserScan, IconVerification, MoneyIcon, NumberedPagination, PrimitiveColor, Radius, RadiusToken, ServerSidePaginationActions, Shadow, ShadowToken, Spacing, SpacingToken, SubFormBuilder, TextFieldUpload, UsersIcon, VariantStyles };
+export { BaseAlert, BaseButton, BaseCard, BaseCheckbox, BaseChip, BaseDatatable, BaseDatePicker, BaseDropdown, BaseDropzone, BaseModalAlert, BaseModalAlertDialog, BaseModalAlertProvider, BaseModalLoading, BaseModalLoadingDialog, BaseModalLoadingProvider, BaseModalOTP, BaseModalPopup, BaseModalStepper, BaseRadioButton, BaseSkeleton, BaseSnackbar, BaseStepper, BaseSwitch, BaseTextArea, BaseTextField, BaseTypography, BaseWatermark, CONTENT_SPACING_TOKENS, CapsLockOn, ContentSpacing, DatatablePagination, DerivedColor, DownloadIconLarge, FORM_TYPE, FormBuilder, IconBiometricScan, IconDocumentAdd, IconEdit, IconFile, IconGradingRounded, IconListDocument, IconMoney, IconProgress, IconReset, IconSave, IconSaveOutlined, IconSendWhite, IconSendWhiteFull, IconUpload, IconUserScan, IconVerification, MoneyIcon, NumberedPagination, PrimitiveColor, Radius, RadiusToken, ServerSidePaginationActions, Shadow, ShadowToken, Spacing, SpacingToken, SubFormBuilder, TextFieldUpload, UsersIcon, VariantStyles };

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { DerivedColor, PrimitiveColor, SpacingToken } from './chunk-G2BF4U5I.mjs
 export { AppHeader, AppSidebar, Backdrop, CONTENT_SPACING_TOKENS, ContentSpacing, DerivedColor, LayoutShell, PrimitiveColor, SidebarProvider, spacing_default as Spacing, SpacingToken, parseAccessMenu, useSidebar } from './chunk-G2BF4U5I.mjs';
 import { __spreadValues, __spreadProps, __objRest } from './chunk-YOSPWY5K.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React3, { useMemo, useState, useCallback, isValidElement, createElement, useEffect, useRef, Fragment as Fragment$1, useId } from 'react';
+import React2, { useMemo, useState, useCallback, isValidElement, createElement, useEffect, useRef, Fragment as Fragment$1, useId } from 'react';
 import AlertRaw from '@mui/material/Alert';
 import AlertTitleRaw from '@mui/material/AlertTitle';
 import BoxRaw from '@mui/material/Box';
@@ -73,6 +73,7 @@ import UploadFileRaw from '@mui/icons-material/UploadFile';
 import DialogRaw from '@mui/material/Dialog';
 import DialogContentRaw from '@mui/material/DialogContent';
 import DialogActionsRaw from '@mui/material/DialogActions';
+import { Watermark } from '@hirohe/react-watermark';
 import DialogTitleRaw from '@mui/material/DialogTitle';
 import StepContentRaw from '@mui/material/StepContent';
 import InfoIconRaw from '@mui/icons-material/Info';
@@ -1403,71 +1404,137 @@ var BaseChip = (_a130) => {
     }, rest)
   );
 };
-var __assign = function() {
-  __assign = Object.assign || function __assign2(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
+var WATERMARK_DEFAULTS = {
+  /** Typography variant for watermark text */
+  textVariant: "body1_regular",
+  /** Text color from DerivedColor */
+  textColor: DerivedColor.color_text_default,
+  /** Font family — BRIDigitalText brand font */
+  fontFamily: "BRIDigitalText, sans-serif",
+  /** Opacity — subtle enough to not distract */
+  opacity: 0.35,
+  /** Spacing between watermark repetitions (from SpacingToken) */
+  gutter: parseInt(SpacingToken.spacing5, 10) || 20,
+  /** Rotation angle */
+  rotate: -30,
+  /** Z-index for overlay */
+  zIndex: 10,
+  /** Max characters before truncation */
+  maxChars: 40,
+  /** Offset ratio for staggered pattern (0.33 = 1/3 shift per row) */
+  staggerOffset: 0.33,
+  /** Border radius from design token */
+  borderRadius: Radius.radius_2
 };
-function generateSvg(options) {
-  var text = options.text, textColor = options.textColor, textSize = options.textSize, fontFamily = options.fontFamily, lineHeight = options.lineHeight, multiline = options.multiline, opacity = options.opacity, gutter = options.gutter, rotate = options.rotate;
-  var rect = calcTextRenderedRect(text, textSize, lineHeight, fontFamily);
-  var size = Math.sqrt(rect.width * rect.width + rect.height * rect.height) + gutter * 2;
-  var center = size / 2;
-  var textContent = text;
-  if (multiline) {
-    var texts = text.split("\n").map(function(textByLine, index) {
-      return "<tspan x='50%' dy='".concat(index === 0 ? "0" : lineHeight, "'>").concat(textByLine, "</tspan>");
-    });
-    textContent = texts.join("");
-  }
-  var textEl = "<text fill='".concat(textColor, "' x='50%' y='50%' font-size='").concat(textSize, "' text-anchor='middle' font-family='").concat(fontFamily, "' transform='rotate(").concat(rotate, " ").concat(center, " ").concat(center, ")' opacity='").concat(opacity, "'>").concat(textContent, "</text>");
-  return "<svg width='".concat(size, "' height='").concat(size / 1.5, "' xmlns='http://www.w3.org/2000/svg'>").concat(textEl, "</svg>");
+function getTypographyStyle(variant) {
+  const style = VariantStyles[variant] || VariantStyles[WATERMARK_DEFAULTS.textVariant];
+  return {
+    fontSize: parseInt(style.fontSize, 10) || 14,
+    fontWeight: style.fontWeight || 400
+  };
 }
-function calcTextRenderedRect(text, fontSize, lineHeight, fontFamily) {
-  var span = document.createElement("span");
-  span.innerText = text;
-  span.style.fontSize = fontSize + "px";
-  span.style.fontFamily = fontFamily;
-  span.style.visibility = "hidden";
-  document.body.appendChild(span);
-  var rect = span.getBoundingClientRect();
-  document.body.removeChild(span);
-  return rect;
+function truncateText(text, maxChars) {
+  if (!text) return "";
+  return text.length > maxChars ? text.slice(0, maxChars) + "..." : text;
 }
-var watermarkWrapperStyle = {
-  position: "relative"
-};
-var Watermark = function(_a130) {
-  var _b130 = _a130.show, show3 = _b130 === void 0 ? true : _b130, text = _a130.text, _c = _a130.textColor, textColor = _c === void 0 ? "#cccccc" : _c, _d = _a130.textSize, textSize = _d === void 0 ? 24 : _d, _e = _a130.fontFamily, fontFamily = _e === void 0 ? "Arial, Helvetica, sans-serif" : _e, _f = _a130.opacity, opacity = _f === void 0 ? 0.2 : _f, _g = _a130.lineHeight, lineHeight = _g === void 0 ? "1.2rem" : _g, _h = _a130.multiline, multiline = _h === void 0 ? false : _h, wrapperStyle = _a130.wrapperStyle, _j = _a130.wrapperElement, wrapperElement = _j === void 0 ? "div" : _j, _k = _a130.gutter, gutter = _k === void 0 ? 0 : _k, _l = _a130.rotate, rotate = _l === void 0 ? -45 : _l, _m = _a130.zIndex, zIndex = _m === void 0 ? 1 : _m, children = _a130.children;
-  var _o = useState(""), backgroundImage = _o[0], setBackgroundImage = _o[1];
-  useEffect(function() {
-    var svg = generateSvg({ text, textColor, textSize, fontFamily, opacity, gutter, rotate, multiline, lineHeight });
-    var convertedSvg = encodeURIComponent(svg).replace(/'/g, "%27").replace(/"/g, "%22");
-    setBackgroundImage('url("data:image/svg+xml,'.concat(convertedSvg, '")'));
-  }, [show3, text, textColor, textSize, opacity, gutter, rotate]);
-  var watermarkStyle = {
-    pointerEvents: "none",
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    content: "",
-    backgroundRepeat: "repeat",
-    zIndex,
-    backgroundImage
+function getRotatedBounds(width, height, angleDeg) {
+  const radians = Math.abs(angleDeg * Math.PI / 180);
+  return {
+    width: width * Math.cos(radians) + height * Math.sin(radians),
+    height: width * Math.sin(radians) + height * Math.cos(radians)
   };
-  var Wrapper = wrapperElement;
-  return React3.createElement(
-    Wrapper,
-    { style: __assign(__assign({}, watermarkWrapperStyle), wrapperStyle) },
-    show3 && React3.createElement("div", { style: watermarkStyle }),
-    children
+}
+function generateWatermarkImage({ displayText, fontSize, fontWeight, fontFamily, textColor, opacity, rotate, gutter, staggerOffset }) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  const font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.font = font;
+  const textWidth = ctx.measureText(displayText).width;
+  const textHeight = fontSize * 1.2;
+  const bounds = getRotatedBounds(textWidth, textHeight, rotate);
+  const cellWidth = Math.ceil(bounds.width + gutter * 2);
+  const cellHeight = Math.ceil(bounds.height + gutter * 2);
+  canvas.width = cellWidth;
+  canvas.height = cellHeight * 2;
+  drawText(ctx, { displayText, font, textColor, opacity, rotate, x: cellWidth / 2, y: cellHeight / 2 });
+  const offsetX = (cellWidth / 2 + cellWidth * staggerOffset) % cellWidth;
+  drawText(ctx, { displayText, font, textColor, opacity, rotate, x: offsetX, y: cellHeight + cellHeight / 2 });
+  return canvas.toDataURL("image/png");
+}
+function drawText(ctx, { displayText, font, textColor, opacity, rotate, x, y }) {
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(rotate * Math.PI / 180);
+  ctx.font = font;
+  ctx.fillStyle = textColor;
+  ctx.globalAlpha = opacity;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(displayText, 0, 0);
+  ctx.restore();
+}
+var BaseWatermark = ({
+  text = "",
+  show: show3 = true,
+  textColor = WATERMARK_DEFAULTS.textColor,
+  textVariant = WATERMARK_DEFAULTS.textVariant,
+  fontFamily = WATERMARK_DEFAULTS.fontFamily,
+  opacity = WATERMARK_DEFAULTS.opacity,
+  gutter = WATERMARK_DEFAULTS.gutter,
+  rotate = WATERMARK_DEFAULTS.rotate,
+  zIndex = WATERMARK_DEFAULTS.zIndex,
+  maxChars = WATERMARK_DEFAULTS.maxChars,
+  wrapperStyle,
+  wrapperElement: WrapperElement = "div",
+  children
+}) => {
+  const [bgUrl, setBgUrl] = useState(null);
+  useEffect(() => {
+    if (typeof window === "undefined" || !text || !show3) {
+      setBgUrl(null);
+      return;
+    }
+    const { fontSize, fontWeight } = getTypographyStyle(textVariant);
+    const displayText = truncateText(text, maxChars);
+    const url = generateWatermarkImage({
+      displayText,
+      fontSize,
+      fontWeight,
+      fontFamily,
+      textColor,
+      opacity,
+      rotate,
+      gutter,
+      staggerOffset: WATERMARK_DEFAULTS.staggerOffset
+    });
+    setBgUrl(url);
+  }, [text, show3, textColor, textVariant, fontFamily, opacity, gutter, rotate, maxChars]);
+  return /* @__PURE__ */ jsxs(
+    WrapperElement,
+    {
+      style: __spreadValues({
+        position: "relative",
+        overflow: "hidden"
+      }, wrapperStyle),
+      children: [
+        children,
+        show3 && bgUrl && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundImage: `url(${bgUrl})`,
+              backgroundRepeat: "repeat",
+              pointerEvents: "none",
+              zIndex
+            }
+          }
+        )
+      ]
+    }
   );
 };
 var _a14, _b14;
@@ -1620,14 +1687,9 @@ var BaseCard = (_a130) => {
         backgroundColor: cardBg
       },
       children: isWatermark && watermarkText ? /* @__PURE__ */ jsx(
-        Watermark,
+        BaseWatermark,
         {
           text: watermarkText,
-          textColor: "#000000",
-          textSize: 14,
-          opacity: 0.15,
-          gutter: 20,
-          rotate: -30,
           wrapperStyle: { minHeight: "100px", position: "relative" },
           children
         }
@@ -1649,14 +1711,9 @@ var BaseCard = (_a130) => {
         }, sx)
       }, rest), {
         children: isWatermark && watermarkText ? /* @__PURE__ */ jsx(
-          Watermark,
+          BaseWatermark,
           {
             text: watermarkText,
-            textColor: "#000000",
-            textSize: 14,
-            opacity: 0.15,
-            gutter: 20,
-            rotate: -30,
             wrapperStyle: { minHeight: "100px", position: "relative" },
             children
           }
@@ -3160,7 +3217,7 @@ BaseDatatable.propTypes = {
   containerSx: PropTypes3.object,
   tableSx: PropTypes3.object
 };
-React3.memo(BaseDatatable);
+React2.memo(BaseDatatable);
 var _a49, _b49;
 var TextField = (_b49 = (_a49 = TextFieldRaw) == null ? void 0 : _a49.default) != null ? _b49 : TextFieldRaw;
 var _a50, _b50;
@@ -6611,20 +6668,20 @@ var FormField = ({ item, index, control, resolvedLayout, resolvedLabelWidth, res
   );
 };
 var Form = ({ children, sx = {}, methods, onSubmit }) => {
-  return /* @__PURE__ */ jsx(Box25, { component: "form", sx, onSubmit: methods == null ? void 0 : methods.handleSubmit(onSubmit), children: React3.Children.map(children, (child) => {
+  return /* @__PURE__ */ jsx(Box25, { component: "form", sx, onSubmit: methods == null ? void 0 : methods.handleSubmit(onSubmit), children: React2.Children.map(children, (child) => {
     var _a130;
     if (!child) return null;
-    return ((_a130 = child.props) == null ? void 0 : _a130.name) ? React3.createElement(child.type, __spreadProps(__spreadValues({}, child.props), {
+    return ((_a130 = child.props) == null ? void 0 : _a130.name) ? React2.createElement(child.type, __spreadProps(__spreadValues({}, child.props), {
       control: methods == null ? void 0 : methods.control,
       key: child.props.name
     })) : child;
   }) });
 };
 var SubForm = ({ children, sx = {}, methods }) => {
-  return /* @__PURE__ */ jsx(Box25, { sx, children: React3.Children.map(children, (child) => {
+  return /* @__PURE__ */ jsx(Box25, { sx, children: React2.Children.map(children, (child) => {
     var _a130;
     if (!child) return null;
-    return ((_a130 = child.props) == null ? void 0 : _a130.name) ? React3.createElement(child.type, __spreadProps(__spreadValues({}, child.props), {
+    return ((_a130 = child.props) == null ? void 0 : _a130.name) ? React2.createElement(child.type, __spreadProps(__spreadValues({}, child.props), {
       control: methods == null ? void 0 : methods.control,
       key: child.props.name
     })) : child;
@@ -6692,25 +6749,7 @@ var SubFormBuilder = ({
     item.name || `subform-item-${index}`
   )) }) });
 };
-/*! Bundled license information:
-
-@hirohe/react-watermark/build/index.esm.js:
-  (*! *****************************************************************************
-  Copyright (c) Microsoft Corporation.
-  
-  Permission to use, copy, modify, and/or distribute this software for any
-  purpose with or without fee is hereby granted.
-  
-  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-  PERFORMANCE OF THIS SOFTWARE.
-  ***************************************************************************** *)
-*/
 
-export { BaseAlert, BaseButton, BaseCard, BaseCheckbox, BaseChip, BaseDatatable, BaseDatePicker, BaseDropdown, BaseDropzone, BaseModalAlert, BaseModalAlertDialog, BaseModalAlertProvider, BaseModalLoading, BaseModalLoadingDialog, BaseModalLoadingProvider, BaseModalOTP, BaseModalPopup, BaseModalStepper, BaseRadioButton, BaseSkeleton, BaseSnackbar, BaseStepper, BaseSwitch, BaseTextArea, BaseTextField, BaseTypography, CapsLockOn, DatatablePagination, DownloadIconLarge, FORM_TYPE, FormBuilder, IconBiometricScan, IconDocumentAdd, IconEdit, IconFile, IconGradingRounded, IconListDocument, IconMoney, IconProgress, IconReset, IconSave, IconSaveOutlined, IconSendWhite, IconSendWhiteFull, IconUpload, IconUserScan, IconVerification, MoneyIcon, NumberedPagination, Radius, radius_default as RadiusToken, ServerSidePaginationActions, Shadow, shadow_default as ShadowToken, SubFormBuilder, TextFieldUpload, UsersIcon, VariantStyles };
+export { BaseAlert, BaseButton, BaseCard, BaseCheckbox, BaseChip, BaseDatatable, BaseDatePicker, BaseDropdown, BaseDropzone, BaseModalAlert, BaseModalAlertDialog, BaseModalAlertProvider, BaseModalLoading, BaseModalLoadingDialog, BaseModalLoadingProvider, BaseModalOTP, BaseModalPopup, BaseModalStepper, BaseRadioButton, BaseSkeleton, BaseSnackbar, BaseStepper, BaseSwitch, BaseTextArea, BaseTextField, BaseTypography, BaseWatermark, CapsLockOn, DatatablePagination, DownloadIconLarge, FORM_TYPE, FormBuilder, IconBiometricScan, IconDocumentAdd, IconEdit, IconFile, IconGradingRounded, IconListDocument, IconMoney, IconProgress, IconReset, IconSave, IconSaveOutlined, IconSendWhite, IconSendWhiteFull, IconUpload, IconUserScan, IconVerification, MoneyIcon, NumberedPagination, Radius, radius_default as RadiusToken, ServerSidePaginationActions, Shadow, shadow_default as ShadowToken, SubFormBuilder, TextFieldUpload, UsersIcon, VariantStyles };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map