@nild/components 0.0.41 → 0.0.42

package/dist/_shared/utils/get-computed-style-value/__tests__/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/_shared/utils/get-computed-style-value/index.d.ts

@@ -0,0 +1,6 @@
+type ComputedStyleKey = Extract<{
+    [Key in keyof CSSStyleDeclaration]: CSSStyleDeclaration[Key] extends string ? Key : never;
+}[keyof CSSStyleDeclaration], string>;
+declare function getComputedStyleValue(element: HTMLElement | null, key: ComputedStyleKey): string | undefined;
+declare function getComputedStyleValue(element: HTMLElement | null, getter: (style: CSSStyleDeclaration) => string | undefined): string | undefined;
+export default getComputedStyleValue;

package/dist/_shared/utils/get-computed-style-value/index.js

@@ -0,0 +1 @@
+function o(e,t){if(!e||typeof window>"u"||typeof window.getComputedStyle!="function")return;const n=window.getComputedStyle(e);return typeof t=="function"?t(n):n[t]}export{o as default};

package/dist/_shared/utils/index.d.ts

@@ -1,3 +1,4 @@
+import { default as getComputedStyleValue } from './get-computed-style-value';
 import { default as getGlobalState, GlobalStateKey } from './get-global-state';
 import { default as getOwnerDocument } from './get-owner-document';
 import { default as isPlainChildren } from './is-plain-children';
@@ -5,4 +6,4 @@ import { default as lockDocumentScroll } from './lock-document-scroll';
 import { default as mergeHandlers } from './merge-handlers';
 import { default as mergeProps } from './merge-props';
 import { default as registerSlots } from './register-slots';
-export { getGlobalState, getOwnerDocument, GlobalStateKey, isPlainChildren, lockDocumentScroll, registerSlots, mergeHandlers, mergeProps, };
+export { getGlobalState, getComputedStyleValue, getOwnerDocument, GlobalStateKey, isPlainChildren, lockDocumentScroll, registerSlots, mergeHandlers, mergeProps, };

package/dist/index.d.ts

@@ -12,4 +12,5 @@ import { default as Switch } from './switch';
 import { default as Tooltip } from './tooltip';
 import { default as Transition, TransitionStatus } from './transition';
 import { default as Typography } from './typography';
-export { Button, Checkbox, Divider, Field, Form, Input, Modal, Popover, Radio, Select, Switch, Tooltip, Transition, TransitionStatus, Typography, };
+import { default as Watermark } from './watermark';
+export { Button, Checkbox, Divider, Field, Form, Input, Modal, Popover, Radio, Select, Switch, Tooltip, Transition, TransitionStatus, Typography, Watermark, };

package/dist/index.js

@@ -1 +1 @@
-import{default as a}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as t}from"./divider/Divider.js";import{default as r}from"./field/index.js";import{default as s}from"./form/index.js";import{default as m}from"./input/index.js";import{default as f}from"./modal/index.js";import{default as i}from"./popover/index.js";import{default as e}from"./radio/index.js";import{default as p}from"./select/index.js";import{default as d}from"./switch/index.js";import{default as u}from"./tooltip/index.js";import{default as l}from"./transition/Transition.js";import{TransitionStatus as n}from"./transition/interfaces/index.js";import{default as T}from"./typography/index.js";/* empty css            */export{a as Button,o as Checkbox,t as Divider,r as Field,s as Form,m as Input,f as Modal,i as Popover,e as Radio,p as Select,d as Switch,u as Tooltip,l as Transition,n as TransitionStatus,T as Typography};
+import{default as a}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as t}from"./divider/Divider.js";import{default as r}from"./field/index.js";import{default as s}from"./form/index.js";import{default as m}from"./input/index.js";import{default as f}from"./modal/index.js";import{default as i}from"./popover/index.js";import{default as e}from"./radio/index.js";import{default as p}from"./select/index.js";import{default as d}from"./switch/index.js";import{default as u}from"./tooltip/index.js";import{default as l}from"./transition/Transition.js";import{TransitionStatus as n}from"./transition/interfaces/index.js";import{default as T}from"./typography/index.js";import{default as h}from"./watermark/Watermark.js";/* empty css            */export{a as Button,o as Checkbox,t as Divider,r as Field,s as Form,m as Input,f as Modal,i as Popover,e as Radio,p as Select,d as Switch,u as Tooltip,l as Transition,n as TransitionStatus,T as Typography,h as Watermark};

package/dist/watermark/Watermark.d.ts

@@ -0,0 +1,6 @@
+import { WatermarkProps } from './interfaces';
+/**
+ * @category Components
+ */
+declare const Watermark: import('react').ForwardRefExoticComponent<WatermarkProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Watermark;

package/dist/watermark/Watermark.js

@@ -0,0 +1 @@
+import{jsxs as h,jsx as W}from"react/jsx-runtime";import{mergeRefs as j,cnMerge as w}from"@nild/shared";import{forwardRef as I,useRef as o,useMemo as M}from"react";import{useWatermarkLayer as T}from"./hooks/useWatermarkLayer.js";import{useWatermarkPreserve as z}from"./hooks/useWatermarkPreserve.js";import m from"./style/index.js";const l=I((n,a)=>{const{className:f,style:i,children:y,text:p,image:d,pattern:c,textStyle:u,opacity:x,zIndex:R,preserve:N=!0,onTamper:g,onError:k,...v}=n,e=o(null),r=o(null),S=M(()=>j(e,a),[a]),t=m.layer(),{layerStyle:s}=T({rootRef:e,layerRef:r,text:p,image:d,pattern:c,textStyle:u,opacity:x,zIndex:R,onError:k});return z({rootRef:e,layerRef:r,layerClassName:t,layerStyle:s,enabled:N,onTamper:g}),h("div",{...v,className:w(m.watermark(),f),ref:S,style:i,children:[y,W("div",{"aria-hidden":"true",className:t,ref:r,style:s})]})});l.displayName="Watermark";export{l as default};

package/dist/watermark/_shared/canvas.d.ts

@@ -0,0 +1,33 @@
+import { WatermarkImage, WatermarkPattern, WatermarkProps, WatermarkTextStyle } from '../interfaces';
+export interface RenderParams {
+    content: string[];
+    image?: WatermarkImage;
+    pattern: Required<Omit<WatermarkPattern, 'composition' | 'gap' | 'offset'>> & {
+        composition: NonNullable<WatermarkPattern['composition']>;
+        gap: [number, number];
+        offset: [number, number];
+    };
+    textStyle: Required<Omit<WatermarkTextStyle, 'textAlign'>> & {
+        textAlign: NonNullable<WatermarkTextStyle['textAlign']>;
+    };
+}
+export interface RenderResult {
+    dataUrl: string | null;
+    width?: number;
+    height?: number;
+    error?: Event | Error;
+    image?: WatermarkImage;
+}
+export declare const toTuple: (value: number | [number, number] | undefined, fallback: [number, number]) => [number, number];
+export declare const normalizeContent: (text: WatermarkProps["text"]) => string[];
+export declare const normalizeImage: (image: WatermarkProps["image"]) => WatermarkImage | undefined;
+export declare const drawToDataUrl: (params: RenderParams, $image?: HTMLImageElement) => {
+    dataUrl: null;
+    width?: undefined;
+    height?: undefined;
+} | {
+    dataUrl: string;
+    width: number;
+    height: number;
+};
+export declare const createTile: (params: RenderParams) => Promise<RenderResult>;

package/dist/watermark/_shared/canvas.js

@@ -0,0 +1,2 @@
+import{makeArray as f,getDPR as y}from"@nild/shared";const M=(t,n)=>Array.isArray(t)?t:typeof t=="number"?[t,t]:n,S=t=>t?f(t).flatMap(n=>n.split(`
+`)).map(n=>n.trim()).filter(Boolean):[],A=t=>t?typeof t=="string"?{src:t}:t.src?t:void 0:void 0,B=t=>new Promise((n,a)=>{const e=new Image;let h=!1;t.crossOrigin!==void 0&&(e.crossOrigin=t.crossOrigin),e.onload=()=>{h||(h=!0,n(e))},e.onerror=i=>{h||(h=!0,a(i))},e.src=t.src,e.complete&&(e.naturalWidth||e.width)&&(h=!0,n(e))}),H=(t,n,a)=>{const e=n.naturalWidth||n.width||1,h=n.naturalHeight||n.height||1,i=e/h,g=typeof t.width=="number",r=typeof t.height=="number";if(g||r)return{width:t.width??t.height*i,height:t.height??t.width/i};const l=Number.isFinite(t.scale)?t.scale:1,o=Math.max(1,a*l);return{width:o*i,height:o}},b=(t,n,a)=>t==="left"||t==="start"?n-a/2:t==="right"||t==="end"?n+a/2:n,u=(t,n,a,e,h,i,g)=>{const r=e-(n.length-1)*i/2,l=b(g,a,h);n.forEach((o,s)=>{const c=t.measureText(o),d=typeof c.actualBoundingBoxAscent=="number"?c.actualBoundingBoxAscent:i/2,p=typeof c.actualBoundingBoxDescent=="number"?c.actualBoundingBoxDescent:i/2,w=r+s*i+(d-p)/2;t.fillText(o,l,w,h)})},x=(t,n,a,e,h,i)=>{t.drawImage(n,a-h/2,e-i/2,h,i)},v=(t,n,a)=>n.length?{width:Math.max(...n.map(e=>t.measureText(e).width),1),height:Math.max(1,n.length*a)}:{width:0,height:0},z=(t,n,a)=>{const{content:e,image:h,pattern:i,textStyle:g}=n,{width:r,height:l}=v(t,e,g.lineHeight),o=h&&a?H(h,a,g.lineHeight):null;return o&&e.length&&i.composition==="stack"?{width:Math.max(o.width,r),height:o.height+i.compositionGap+l,textWidth:r,textHeight:l,imageSize:o}:o&&e.length&&i.composition==="inline"?{width:o.width+i.compositionGap+r,height:Math.max(o.height,l),textWidth:r,textHeight:l,imageSize:o}:{width:Math.max(o?.width??0,r),height:Math.max(o?.height??0,l),textWidth:r,textHeight:l,imageSize:o}},W=(t,n,a)=>{const e=a*Math.PI/180,h=Math.abs(Math.cos(e)),i=Math.abs(Math.sin(e));return{width:Math.ceil(t*h+n*i),height:Math.ceil(t*i+n*h)}},$=(t,n,a,e)=>{const{content:h,pattern:i,textStyle:g}=n,{imageSize:r,textHeight:l,textWidth:o}=a;if(r&&h.length&&i.composition==="stack"){const s=r.height+i.compositionGap+l,c=-s/2+r.height/2,d=s/2-l/2;x(t,e,0,c,r.width,r.height),u(t,h,0,d,o,g.lineHeight,g.textAlign);return}if(r&&h.length&&i.composition==="inline"){const s=r.width+i.compositionGap+o,c=-s/2+r.width/2,d=s/2-o/2;x(t,e,c,0,r.width,r.height),u(t,h,d,0,o,g.lineHeight,g.textAlign);return}r&&x(t,e,0,0,r.width,r.height),h.length&&u(t,h,0,0,o,g.lineHeight,g.textAlign)},m=(t,n)=>{const{pattern:a,textStyle:e}=t,h=document.createElement("canvas"),i=h.getContext("2d");if(!i)return{dataUrl:null};i.font=`${e.fontStyle} ${e.fontWeight} ${e.fontSize}px ${e.fontFamily}`;const g=z(i,t,n),r=W(g.width,g.height,a.rotate),l=r.width+a.gap[0],o=r.height+a.gap[1],s=Math.min(y()||1,2);return h.width=Math.round(l*s),h.height=Math.round(o*s),i.scale(s,s),i.clearRect(0,0,l,o),i.save(),i.translate(r.width/2,r.height/2),i.rotate(a.rotate*Math.PI/180),i.font=`${e.fontStyle} ${e.fontWeight} ${e.fontSize}px ${e.fontFamily}`,i.fillStyle=e.color,i.textAlign=e.textAlign,i.textBaseline="alphabetic",$(i,t,g,n),i.restore(),{dataUrl:h.toDataURL(),width:l,height:o}},T=async t=>{if(!t.content.length&&!t.image)return{dataUrl:null};if(!t.image)return m(t);const n=a=>{const e=a instanceof Event||a instanceof Error?a:new Error(String(a));return t.content.length?{...m({...t,image:void 0}),error:e,image:t.image}:{dataUrl:null,error:e,image:t.image}};try{const a=await B(t.image);try{return m(t,a)}catch(e){return n(e)}}catch(a){return n(a)}};export{T as createTile,m as drawToDataUrl,S as normalizeContent,A as normalizeImage,M as toTuple};

package/dist/watermark/_shared/layer.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+export type StyleSnapshot = Record<string, string>;
+export declare const restoreStyle: ($layer: HTMLDivElement, style: CSSProperties) => void;
+export declare const createStyleSnapshot: (style: CSSProperties) => StyleSnapshot;
+export declare const matchesStyleSnapshot: ($layer: HTMLDivElement, snapshot: StyleSnapshot) => boolean;

package/dist/watermark/_shared/layer.js

@@ -0,0 +1 @@
+import{kebabize as a}from"@nild/shared";const y=(t,e)=>{t.removeAttribute("style"),Object.entries(e).forEach(([r,s])=>{s!=null&&t.style.setProperty(a(r),String(s))})},l=t=>{const e=document.createElement("div");return y(e,t),Object.fromEntries(Array.from(e.style).map(r=>[r,e.style.getPropertyValue(r)]))},o=(t,e)=>{const r=Object.keys(e);return r.every(s=>t.style.getPropertyValue(s)===e[s])&&Array.from(t.style).every(s=>r.includes(s))};export{l as createStyleSnapshot,o as matchesStyleSnapshot,y as restoreStyle};

package/dist/watermark/hooks/useWatermarkLayer.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, RefObject } from 'react';
+import { WatermarkProps } from '../interfaces';
+interface UseWatermarkLayerOptions {
+    rootRef: RefObject<HTMLDivElement>;
+    layerRef: RefObject<HTMLDivElement>;
+    text?: WatermarkProps['text'];
+    image?: WatermarkProps['image'];
+    pattern?: WatermarkProps['pattern'];
+    textStyle?: WatermarkProps['textStyle'];
+    opacity?: WatermarkProps['opacity'];
+    zIndex?: WatermarkProps['zIndex'];
+    onError?: WatermarkProps['onError'];
+}
+export declare const useWatermarkLayer: (options: UseWatermarkLayerOptions) => {
+    layerStyle: CSSProperties;
+};
+export default useWatermarkLayer;

package/dist/watermark/hooks/useWatermarkLayer.js

@@ -0,0 +1,3 @@
+import{useEffectCallback as F}from"@nild/hooks";import{useState as H,useRef as W,useMemo as f,useCallback as b,useEffect as $}from"react";import k from"../../_shared/utils/get-computed-style-value/index.js";import"@nild/shared";import{normalizeContent as G,normalizeImage as N,toTuple as I,createTile as R}from"../_shared/canvas.js";const m={dataUrl:null,size:null},w=C=>{const{rootRef:v,layerRef:p,text:g,image:h,pattern:t,textStyle:o,opacity:E,zIndex:j,onError:y}=C,[n,A]=H(m),z=W(m),u=f(()=>G(g).join(`
+`),[g]),s=f(()=>{const l=N(h);return l?{...l}:void 0},[h]),r=f(()=>{const[l,i]=I(t?.gap,[64,48]),[e,a]=I(t?.offset,[0,0]);return{gap:[l,i],offset:[e,a],rotate:t?.rotate??-22,composition:t?.composition??"stack",compositionGap:t?.compositionGap??8}},[t?.composition,t?.compositionGap,t?.gap,t?.offset,t?.rotate]),S=b(()=>{const l=o?.fontSize??16,i=k(p.current,"color");return{fontSize:l,fontWeight:o?.fontWeight??400,fontFamily:o?.fontFamily||k(v.current,"fontFamily")||"-apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",fontStyle:o?.fontStyle??"normal",lineHeight:o?.lineHeight??l*1.4,color:o!=null&&o.color?i||o.color:i||"currentColor",textAlign:o?.textAlign??"center"}},[p,v,o?.color,o?.fontFamily,o?.fontSize,o?.fontStyle,o?.fontWeight,o?.lineHeight,o?.textAlign]),x=F((l,i)=>{y?.(l,i)}),d=b(l=>{var i,e,a,U;const{current:c}=z;(c.dataUrl!==l.dataUrl||((i=c.size)==null?void 0:i.width)!==((e=l.size)==null?void 0:e.width)||((a=c.size)==null?void 0:a.height)!==((U=l.size)==null?void 0:U.height))&&(z.current=l,A(l))},[]);return $(()=>{let l=!1;const i=u?u.split(`
+`):[];if(!i.length&&!s){d(m);return}return R({content:i,image:s,pattern:r,textStyle:S()}).then(e=>{l||(d({dataUrl:e.dataUrl,size:e.width&&e.height?{width:e.width,height:e.height}:null}),e.error&&e.image&&x(e.error,e.image))}),()=>{l=!0}},[x,u,s,r,S,d]),{layerStyle:{backgroundImage:n.dataUrl?`url(${n.dataUrl})`:void 0,backgroundSize:n.size?`${n.size.width}px ${n.size.height}px`:void 0,backgroundPosition:`${r.offset[0]}px ${r.offset[1]}px`,color:o?.color,opacity:E??.16,zIndex:j??1}}};export{w as default,w as useWatermarkLayer};

package/dist/watermark/hooks/useWatermarkPreserve.d.ts

@@ -0,0 +1,12 @@
+import { WatermarkProps } from '../interfaces';
+import { CSSProperties, RefObject } from 'react';
+interface UseWatermarkPreserveOptions {
+    rootRef: RefObject<HTMLDivElement>;
+    layerRef: RefObject<HTMLDivElement>;
+    layerClassName: string;
+    layerStyle: CSSProperties;
+    enabled?: boolean;
+    onTamper?: WatermarkProps['onTamper'];
+}
+export declare const useWatermarkPreserve: (options: UseWatermarkPreserveOptions) => void;
+export default useWatermarkPreserve;

package/dist/watermark/hooks/useWatermarkPreserve.js

@@ -0,0 +1 @@
+import{useRef as C,useEffect as F}from"react";import{restoreStyle as E,matchesStyleSnapshot as O,createStyleSnapshot as R}from"../_shared/layer.js";const q=(l,t,n)=>t.parentNode!==l?{type:"removed"}:l.lastElementChild!==t?{type:"reordered"}:t.className!==n.className?{type:"attribute",attributeName:"class"}:t.getAttribute("aria-hidden")!=="true"?{type:"attribute",attributeName:"aria-hidden"}:t.hidden?{type:"attribute",attributeName:"hidden"}:O(t,R(n.style))?null:{type:"attribute",attributeName:"style"},S=l=>{const{rootRef:t,layerRef:n,layerClassName:c,layerStyle:d,enabled:m=!0,onTamper:p}=l,y=C({className:c,style:d,onTamper:p});y.current={className:c,style:d,onTamper:p},F(()=>{if(!m||typeof MutationObserver>"u"||!t.current||!n.current)return;let u=!1,a=null;const s=t.current,e=n.current,b=new MutationObserver(A),f=new MutationObserver(A);function h(){u||(b.observe(s,{childList:!0}),f.observe(e,{attributes:!0,attributeFilter:["aria-hidden","class","hidden","style"]}),u=!0)}function N(){u&&(b.disconnect(),f.disconnect(),u=!1)}const v=()=>{var i;const r=y.current,o=q(s,e,r);o&&(N(),(i=r.onTamper)==null||i.call(r,o),(e.parentNode!==s||s.lastElementChild!==e)&&s.appendChild(e),e.className!==r.className&&(e.className=r.className),e.getAttribute("aria-hidden")!=="true"&&e.setAttribute("aria-hidden","true"),e.hidden&&(e.hidden=!1),E(e,r.style),h())};function A(){if(a)return;const i=()=>{a=null,v()};if(typeof requestAnimationFrame=="function"){const o=requestAnimationFrame(i);a=()=>cancelAnimationFrame(o);return}const r=setTimeout(i);a=()=>clearTimeout(r)}const T=()=>{a?.(),a=null};return v(),h(),()=>{T(),N()}},[m,n,t])};export{S as default,S as useWatermarkPreserve};

package/dist/watermark/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Watermark } from './Watermark';
+export type * from './interfaces';
+export default Watermark;

package/dist/watermark/index.js

@@ -0,0 +1 @@
+import a from"./Watermark.js";export{a as default};

package/dist/watermark/style/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    watermark: (props?: object | undefined) => string;
+    layer: (props?: object | undefined) => string;
+};
+export default _default;

package/dist/watermark/style/index.js

@@ -0,0 +1 @@
+import{cva as e}from"@nild/shared";const t=e(["nd-watermark","relative","font-nd"]),a=e(["nd-watermark-layer","pointer-events-none","absolute","inset-0","bg-repeat","text-subtle"]),r={watermark:t,layer:a};export{r as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.41",
+  "version": "0.0.42",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -31,9 +31,9 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@nild/shared": "0.0.16",
-    "@nild/icons": "0.0.18",
-    "@nild/hooks": "0.0.18"
+    "@nild/shared": "0.0.17",
+    "@nild/hooks": "0.0.19",
+    "@nild/icons": "0.0.19"
   },
   "scripts": {
     "build": "vite build --mode PROD",