spotlibs-components 0.1.21 → 0.1.23

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

@@ -22,7 +22,6 @@ import CollapseRaw from '@mui/material/Collapse';
 import IconButtonRaw from '@mui/material/IconButton';
 import KeyboardArrowDownIconRaw from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIconRaw from '@mui/icons-material/KeyboardArrowUp';
-import { Watermark } from '@hirohe/react-watermark';
 import SnackbarRaw from '@mui/material/Snackbar';
 import MuiCheckboxRaw from '@mui/material/Checkbox';
 import FormControlLabelRaw from '@mui/material/FormControlLabel';
@@ -74,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';
@@ -1404,6 +1404,139 @@ var BaseChip = (_a130) => {
     }, rest)
   );
 };
+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 getTypographyStyle(variant) {
+  const style = VariantStyles[variant] || VariantStyles[WATERMARK_DEFAULTS.textVariant];
+  return {
+    fontSize: parseInt(style.fontSize, 10) || 14,
+    fontWeight: style.fontWeight || 400
+  };
+}
+function truncateText(text, maxChars) {
+  if (!text) return "";
+  return text.length > maxChars ? text.slice(0, maxChars) + "..." : text;
+}
+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)
+  };
+}
+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;
 var MuiCard = (_b14 = (_a14 = MuiCardRaw) == null ? void 0 : _a14.default) != null ? _b14 : MuiCardRaw;
 var _a15, _b15;
@@ -1554,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
         }
@@ -1583,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
           }
@@ -6627,6 +6750,6 @@ var SubFormBuilder = ({
   )) }) });
 };
 
-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