@nild/components 0.0.40 → 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/field/Field.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { FieldProps } from './interfaces';
+export declare const isFieldElement: (child: ReactNode) => child is ReactElement<FieldProps>;
+declare const Field: import('react').ForwardRefExoticComponent<FieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Field;

package/dist/field/Field.js

@@ -0,0 +1 @@
+import{jsx as d,jsxs as p}from"react/jsx-runtime";import{cnMerge as V}from"@nild/shared";import{forwardRef as j,cloneElement as w,isValidElement as I}from"react";import H from"../_shared/utils/merge-handlers/index.js";import L from"../_shared/utils/register-slots/index.js";import{useFormContext as P}from"../form/contexts/index.js";import{FieldProvider as S}from"./contexts/index.js";import{isHelperElement as u}from"./Helper.js";import{isLabelElement as c}from"./Label.js";import k,{isRequiredIndicatorElement as f}from"./RequiredIndicator.js";import z,{isStatusElement as h}from"./Status.js";import b from"./style/index.js";const D=e=>I(e)&&e.type===m,Z=L({label:{isMatched:c},helper:{isMatched:u},status:{isMatched:h},requiredIndicator:{isMatched:f},control:{isMatched:e=>!c(e)&&!u(e)&&!h(e)&&!f(e),strategy:"first"}}),m=j((e,v)=>{const s=P(),{className:E,children:M,name:a,required:g,disabled:q,bind:y="value",...x}=e,{slots:t}=Z(M),l=a&&s?s.getMeta(a):{},n=t.status.el,o=n?.props.type??l.status,C=g??!1,i=q??s?.disabled??!1,r=t.control.el,F=r&&w(r,{...a&&s?(()=>{const N=typeof r.props.onChange=="function"?r.props.onChange:void 0;return{[y]:s.getValue(a),onChange:H(N,(...R)=>{s.setValue(a,R[0])})}})():{},...i&&r.props.disabled===void 0?{disabled:i}:{}});return d(S,{value:{status:o,issue:l.issue,required:C,disabled:i},children:p("div",{...x,className:V(b.field({disabled:i,status:o}),E),"data-status":o,ref:v,children:[t.label.el&&p("div",{className:b.labelRow(),children:[t.label.el,t.requiredIndicator.el??d(k,{})]}),F,t.helper.el,t.status.el??(l.issue?d(z,{}):null)]})})});m.displayName="Field";export{m as default,D as isFieldElement};

package/dist/field/Helper.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { HelperProps } from './interfaces';
+declare const Helper: import('react').ForwardRefExoticComponent<HelperProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const isHelperElement: (child: ReactNode) => child is ReactElement<HelperProps>;
+export default Helper;

package/dist/field/Helper.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{cnMerge as m}from"@nild/shared";import{forwardRef as o,isValidElement as p}from"react";import t from"./style/index.js";const r=o(({className:e,children:s,...a},l)=>i("div",{...a,className:m(t.helper(),e),ref:l,children:s}));r.displayName="Field.Helper";const d=e=>p(e)&&e.type===r;export{r as default,d as isHelperElement};

package/dist/field/Label.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { LabelProps } from './interfaces';
+declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const isLabelElement: (child: ReactNode) => child is ReactElement<LabelProps>;
+export default Label;

package/dist/field/Label.js

@@ -0,0 +1 @@
+import{jsx as m}from"react/jsx-runtime";import{cnMerge as o}from"@nild/shared";import{forwardRef as t,isValidElement as d}from"react";import{useFieldContext as n}from"./contexts/index.js";import f from"./style/index.js";const s=t(({className:e,children:a,...r},l)=>{const{disabled:i}=n();return m("span",{...r,className:o(f.label({disabled:i}),e),ref:l,children:a})});s.displayName="Field.Label";const p=e=>d(e)&&e.type===s;export{s as default,p as isLabelElement};

package/dist/field/RequiredIndicator.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { RequiredIndicatorProps } from './interfaces';
+declare const RequiredIndicator: import('react').ForwardRefExoticComponent<RequiredIndicatorProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const isRequiredIndicatorElement: (child: ReactNode) => child is ReactElement<RequiredIndicatorProps>;
+export default RequiredIndicator;

package/dist/field/RequiredIndicator.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{cnMerge as d}from"@nild/shared";import{forwardRef as m,isValidElement as n}from"react";import{useFieldContext as l}from"./contexts/index.js";import c from"./style/index.js";const r=m(({className:e,children:a="*",...s},i)=>{const{required:o}=l();return o?t("span",{...s,className:d(c.requiredIndicator(),e),ref:i,children:a}):null});r.displayName="Field.RequiredIndicator";const f=e=>n(e)&&e.type===r;export{r as default,f as isRequiredIndicatorElement};

package/dist/field/Status.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { StatusProps } from './interfaces';
+declare const Status: import('react').ForwardRefExoticComponent<StatusProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const isStatusElement: (child: ReactNode) => child is ReactElement<StatusProps>;
+export default Status;

package/dist/field/Status.js

@@ -0,0 +1 @@
+import{jsx as d}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as p,isValidElement as c}from"react";import{useFieldContext as x}from"./contexts/index.js";import y from"./style/index.js";const o=s=>s!=null&&s!==!1,t=p(({className:s,children:a,type:l,...m},i)=>{const{issue:n,status:u}=x(),e=l??u,r=o(a)?a:n;return o(r)?d("div",{...m,className:f(y.status({status:e}),s),"data-status":e,ref:i,children:r}):null});t.displayName="Field.Status";const N=s=>c(s)&&s.type===t;export{t as default,N as isStatusElement};

package/dist/field/contexts/index.d.ts

@@ -0,0 +1,10 @@
+import { FieldStatus } from '../interfaces';
+import { ReactNode } from 'react';
+export interface FieldContextValue {
+    status?: FieldStatus;
+    issue?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+}
+declare const FieldProvider: import('react').Provider<FieldContextValue>, useFieldContext: () => FieldContextValue;
+export { FieldProvider, useFieldContext };

package/dist/field/contexts/index.js

@@ -0,0 +1 @@
+import{createContextSuite as e}from"@nild/shared";const[t,o]=e({defaultValue:{}});export{t as FieldProvider,o as useFieldContext};

package/dist/field/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @category Components
+ */
+declare const Field: import('react').ForwardRefExoticComponent<import('./interfaces').FieldProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Label: import('react').ForwardRefExoticComponent<import('./interfaces').LabelProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Helper: import('react').ForwardRefExoticComponent<import('./interfaces').HelperProps & import('react').RefAttributes<HTMLDivElement>>;
+    Status: import('react').ForwardRefExoticComponent<import('./interfaces').StatusProps & import('react').RefAttributes<HTMLDivElement>>;
+    RequiredIndicator: import('react').ForwardRefExoticComponent<import('./interfaces').RequiredIndicatorProps & import('react').RefAttributes<HTMLSpanElement>>;
+};
+export type * from './interfaces';
+export default Field;

package/dist/field/index.js

@@ -0,0 +1 @@
+import r from"./Field.js";import o from"./Helper.js";import t from"./Label.js";import m from"./RequiredIndicator.js";import e from"./Status.js";const i=Object.assign(r,{Label:t,Helper:o,Status:e,RequiredIndicator:m});export{i as default};

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

@@ -0,0 +1,17 @@
+import { FieldStatus } from '../interfaces';
+declare const _default: {
+    field: (props?: {
+        disabled?: boolean;
+        status?: FieldStatus;
+    } | undefined) => string;
+    labelRow: (props?: object | undefined) => string;
+    label: (props?: {
+        disabled?: boolean;
+    } | undefined) => string;
+    helper: (props?: object | undefined) => string;
+    status: (props?: {
+        status?: FieldStatus;
+    } | undefined) => string;
+    requiredIndicator: (props?: object | undefined) => string;
+};
+export default _default;

package/dist/field/style/index.js

@@ -0,0 +1 @@
+import{cva as e}from"@nild/shared";const t=e(["nd-field","flex","flex-col","items-start","gap-1.5","font-nd","text-md"],{variants:{disabled:{true:["disabled"],false:""},status:{success:"",warning:"",error:""}}}),r=e(["nd-field-label-row","inline-flex","items-center","gap-1.5"]),s=e(["nd-field-label","text-main","font-medium"],{variants:{disabled:{true:["opacity-60"],false:""}}}),a=e(["nd-field-helper","text-sm","text-subtle"]),i=e(["nd-field-status","text-sm"],{variants:{status:{success:["text-success"],warning:["text-warning"],error:["text-error"]}}}),l=e(["nd-field-required-indicator","text-error"]),d={field:t,labelRow:r,label:s,helper:a,status:i,requiredIndicator:l};export{d as default};

package/dist/form/Actions.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { ActionsProps } from './interfaces';
+declare const Actions: import('react').ForwardRefExoticComponent<ActionsProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const isActionsElement: (child: ReactNode) => child is ReactElement<ActionsProps>;
+export default Actions;

package/dist/form/Actions.js

@@ -0,0 +1 @@
+import{jsx as m}from"react/jsx-runtime";import{cnMerge as r}from"@nild/shared";import{forwardRef as t,isValidElement as c}from"react";import n from"./style/index.js";const a=t(({className:s,children:e,...o},i)=>m("div",{...o,className:r(n.actions(),s),ref:i,children:e}));a.displayName="Form.Actions";const l=s=>c(s)&&s.type===a;export{a as default,l as isActionsElement};

package/dist/form/Form.d.ts

@@ -0,0 +1,3 @@
+import { FormProps } from './interfaces';
+declare const Form: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<HTMLFormElement>>;
+export default Form;

package/dist/form/Form.js

@@ -0,0 +1 @@
+import{jsx as j,jsxs as k}from"react/jsx-runtime";import{useEffectCallback as B}from"@nild/hooks";import{cnMerge as R}from"@nild/shared";import{forwardRef as D,useState as T,useRef as q,useCallback as z,useMemo as G}from"react";import H from"../_shared/utils/register-slots/index.js";import{isFieldElement as J}from"../field/Field.js";import{updateByPath as K,getByPath as L}from"./_shared/path.js";import{isActionsElement as O}from"./Actions.js";import{FormProvider as Q,hasIssues as U}from"./contexts/index.js";import{useFormIssues as W}from"./hooks/useFormIssues.js";import X from"./style/index.js";const M=(s,o)=>Array.isArray(s)?s.includes(o):s===o,Y=H({field:{isMatched:J,multiple:!0},actions:{isMatched:O}}),A=D((s,o)=>{const{className:F,children:V,defaultValue:w={},resolver:x,validateTrigger:m=["submit","change"],onChange:c,onInvalid:f,onSubmit:d,disabled:l=!1,...C}=s,[i,p]=T(w),{errors:E,getMeta:v,touch:I,touchAll:N,validateValue:h}=W({resolver:x}),a=q(i);a.current=i;const g=B((r,t)=>{const e=K(a.current,r,t);e!==a.current&&(p(e),a.current=e,I(r),c?.(e),M(m,"change")&&h(e,r))}),b=z(r=>L(i,r),[i]),P=async r=>{if(r.preventDefault(),l)return;const t=a.current,e=M(m,"submit")?await h(t):{value:t,errors:E};if(!e)return;const u=e.value??t,n=e.errors??{};if(e.value&&(a.current=e.value,p(e.value)),U(n)){N(u,n),f?.(n,u,r);return}await d?.(u,r)},S=G(()=>({disabled:l,getMeta:v,getValue:b,setValue:g}),[l,v,b,g]),{slots:y}=Y(V);return j(Q,{value:S,children:k("form",{...C,className:R(X.form({disabled:l}),F),ref:o,onSubmit:P,children:[y.field.el,y.actions.el]})})});A.displayName="Form";export{A as default};

package/dist/form/_shared/path.d.ts

@@ -0,0 +1,3 @@
+export declare const getByPath: (value: Record<string, unknown>, path: string) => unknown;
+export declare const updateByPath: (formValue: Record<string, unknown>, path: string, value: unknown) => Record<string, unknown>;
+export declare const collectPaths: (value: unknown, prefix?: string, paths?: string[]) => string[];

package/dist/form/_shared/path.js

@@ -0,0 +1 @@
+const A=/^\d+$/,h=e=>e.split(".").filter(Boolean),i=e=>typeof e=="object"&&e!==null&&!Array.isArray(e),y=(e,r)=>Array.isArray(e)?[...e]:i(e)?{...e}:r&&A.test(r)?[]:{},$=(e,r)=>{const t=h(r);let n=e;for(const s of t){if(n==null)return;n=n[s]}return n},g=(e,r,t)=>{const n=h(r);if(n.length===0)return e;const s=[e];let c=e;for(const l of n)c=c?.[l],s.push(c);if(Object.is(c,t))return e;const u=y(e,n[0]);let a=u;for(let l=0;l<n.length-1;l+=1){const p=n[l],f=y(s[l+1],n[l+1]);a[p]=f,a=f}return a[n[n.length-1]]=t,u},o=(e,r="",t=[])=>{if(Array.isArray(e))return e.forEach((n,s)=>o(n,r?`${r}.${s}`:`${s}`,t)),t;if(i(e)){const n=Object.keys(e);return n.length===0?(r&&t.push(r),t):(n.forEach(s=>o(e[s],r?`${r}.${s}`:s,t)),t)}return r&&t.push(r),t};export{o as collectPaths,$ as getByPath,g as updateByPath};

package/dist/form/contexts/index.d.ts

@@ -0,0 +1,16 @@
+import { FieldStatus } from '../../field';
+import { FormIssueMap } from '../interfaces';
+import { ReactNode } from 'react';
+export interface FieldMeta {
+    status?: FieldStatus;
+    issue?: ReactNode;
+}
+export interface FormContextValue {
+    disabled?: boolean;
+    getValue: (name: string) => unknown;
+    getMeta: (name: string) => FieldMeta;
+    setValue: (name: string, value: unknown) => void;
+}
+declare const FormProvider: import('react').Provider<FormContextValue | undefined>, useFormContext: () => FormContextValue | undefined;
+export declare const hasIssues: (issues: FormIssueMap | undefined) => boolean;
+export { FormProvider, useFormContext };

package/dist/form/contexts/index.js

@@ -0,0 +1 @@
+import{createContextSuite as t}from"@nild/shared";const[o,a]=t({defaultValue:void 0}),u=r=>r?Object.keys(r).some(e=>{const s=r[e];return s?Array.isArray(s)?s.length>0:!0:!1}):!1;export{o as FormProvider,u as hasIssues,a as useFormContext};

package/dist/form/hooks/useFormIssues.d.ts

@@ -0,0 +1,14 @@
+import { FieldMeta } from '../contexts';
+import { FormIssueMap, FormResolver, FormResolverResult, FormValue } from '../interfaces';
+interface UseFormIssuesOptions {
+    resolver?: FormResolver;
+}
+export declare const useFormIssues: ({ resolver }: UseFormIssuesOptions) => {
+    errors: FormIssueMap;
+    warnings: FormIssueMap;
+    getMeta: (name: string) => FieldMeta;
+    touch: (name: string) => void;
+    touchAll: (formValue: FormValue, issues: FormIssueMap) => void;
+    validateValue: (formValue: FormValue, name?: string) => Promise<FormResolverResult | undefined>;
+};
+export {};

package/dist/form/hooks/useFormIssues.js

@@ -0,0 +1 @@
+import{useState as f,useRef as C,useCallback as g,isValidElement as F}from"react";import{collectPaths as I}from"../_shared/path.js";const d=r=>Array.isArray(r)?r[0]:r,b=r=>{const e=d(r);if(e)return typeof e=="object"&&!F(e)&&"message"in e?e.message:e},j=(r,e,u)=>{const n=d(u);if(!n){if(!(e in r))return r;const a={...r};return delete a[e],a}return Object.is(d(r[e]),n)?r:{...r,[e]:n}},p=(r,e)=>r[e]?r:{...r,[e]:!0},E=(r,e,u)=>{const n={};return I(r).forEach(a=>{n[a]=!0}),Object.keys(e??{}).forEach(a=>{n[a]=!0}),Object.keys(u??{}).forEach(a=>{n[a]=!0}),n},S=({resolver:r})=>{const[e,u]=f({}),[n,a]=f({}),[m,w]=f({}),[h,y]=f({}),v=C(0),k=g(async(t,s)=>{if(!r)return{value:t,errors:{},warnings:{}};const c=v.current+1;v.current=c;const o=await r(t);if(v.current===c)return s?(u(i=>{var l;return j(i,s,(l=o.errors)==null?void 0:l[s])}),a(i=>{var l;return j(i,s,(l=o.warnings)==null?void 0:l[s])}),y(i=>p(i,s))):(u(o.errors??{}),a(o.warnings??{}),y(E(t,o.errors,o.warnings))),o},[r]),A=g(t=>{w(s=>p(s,t))},[]),O=g((t,s)=>{w(E(t,s,void 0))},[]),x=g(t=>{const s=b(e[t]);if(s)return{status:"error",issue:s};const c=b(n[t]);return c?{status:"warning",issue:c}:r&&m[t]&&h[t]?{status:"success"}:{}},[e,r,m,h,n]);return{errors:e,warnings:n,getMeta:x,touch:A,touchAll:O,validateValue:k}};export{S as useFormIssues};

package/dist/form/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @category Components
+ */
+declare const Form: import('react').ForwardRefExoticComponent<import('./interfaces').FormProps & import('react').RefAttributes<HTMLFormElement>> & {
+    Actions: import('react').ForwardRefExoticComponent<import('./interfaces').ActionsProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export type * from './interfaces';
+export default Form;

package/dist/form/index.js

@@ -0,0 +1 @@
+import o from"./Actions.js";import t from"./Form.js";const r=Object.assign(t,{Actions:o});export{r as default};

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    form: (props?: {
+        disabled?: boolean;
+    } | undefined) => string;
+    actions: (props?: object | undefined) => string;
+};
+export default _default;

package/dist/form/style/index.js

@@ -0,0 +1 @@
+import{cva as a}from"@nild/shared";const e=a(["nd-form","flex","flex-col","gap-4","font-nd"],{variants:{disabled:{true:["disabled"],false:""}}}),t=a(["nd-form-actions","flex","items-center","justify-end","gap-3"]),o={form:e,actions:t};export{o as default};

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { default as Button } from './button';
 import { default as Checkbox } from './checkbox';
 import { default as Divider } from './divider';
+import { default as Field } from './field';
+import { default as Form } from './form';
 import { default as Input } from './input';
 import { default as Modal } from './modal';
 import { default as Popover } from './popover';
@@ -10,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, 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"./input/index.js";import{default as s}from"./modal/index.js";import{default as m}from"./popover/index.js";import{default as f}from"./radio/index.js";import{default as i}from"./select/index.js";import{default as p}from"./switch/index.js";import{default as e}from"./tooltip/index.js";import{default as d}from"./transition/Transition.js";import{TransitionStatus as u}from"./transition/interfaces/index.js";import{default as l}from"./typography/index.js";/* empty css            */export{a as Button,o as Checkbox,t as Divider,r as Input,s as Modal,m as Popover,f as Radio,i as Select,p as Switch,e as Tooltip,d as Transition,u as TransitionStatus,l 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/tailwind.css

@@ -1 +1 @@
-@theme static{ --nd-brand-h: 158; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% var(--nd-brand-c) var(--nd-brand-h)), oklch(14% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% var(--nd-brand-c) var(--nd-brand-h)), oklch(17% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% var(--nd-brand-c) var(--nd-brand-h)), oklch(20% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% var(--nd-brand-c) var(--nd-brand-h)), oklch(25% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% var(--nd-brand-c) var(--nd-brand-h)), oklch(30% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% var(--nd-brand-c) var(--nd-brand-h)), oklch(38% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% var(--nd-brand-c) var(--nd-brand-h)), oklch(46% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% var(--nd-brand-c) var(--nd-brand-h)), oklch(52% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-60: oklch(58% var(--nd-brand-c) var(--nd-brand-h)); --nd-color-brand-70: light-dark( oklch(50% var(--nd-brand-c) var(--nd-brand-h)), oklch(66% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% var(--nd-brand-c) var(--nd-brand-h)), oklch(76% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% var(--nd-brand-c) var(--nd-brand-h)), oklch(88% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% var(--nd-brand-c) var(--nd-brand-h)), oklch(96% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99% var(--nd-neutral-c) var(--nd-brand-h)), oklch(14% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-5: light-dark( oklch(97.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(17% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-10: light-dark( oklch(95.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(21% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-15: light-dark( oklch(92.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(26% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-20: light-dark( oklch(89% var(--nd-neutral-c) var(--nd-brand-h)), oklch(32% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-30: light-dark( oklch(81% var(--nd-neutral-c) var(--nd-brand-h)), oklch(42% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-40: light-dark( oklch(72% var(--nd-neutral-c) var(--nd-brand-h)), oklch(50% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-50: light-dark( oklch(60% var(--nd-neutral-c) var(--nd-brand-h)), oklch(58% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-60: light-dark( oklch(50% var(--nd-neutral-c) var(--nd-brand-h)), oklch(67% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-70: light-dark( oklch(40% var(--nd-neutral-c) var(--nd-brand-h)), oklch(76% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-80: light-dark( oklch(32% var(--nd-neutral-c) var(--nd-brand-h)), oklch(85% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-90: light-dark( oklch(22% var(--nd-neutral-c) var(--nd-brand-h)), oklch(93% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-100: light-dark( oklch(15% var(--nd-neutral-c) var(--nd-brand-h)), oklch(98% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-shadow-key: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 16%), oklch(0% 0 0deg / 65%) ); --nd-color-shadow-ambient: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 4%), oklch(0% 0 0deg / 30%) ); --nd-font-family: -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"; }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: light-dark(var(--nd-color-brand-50), var(--nd-color-brand-70)); --color-brand-active: var(--nd-color-brand-60); --color-brand-subtle: var(--nd-color-brand-15); --color-brand-subtle-hover: var(--nd-color-brand-20); --color-brand-subtle-active: var(--nd-color-brand-30); --color-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-brand-ring: light-dark( color-mix(in oklch, var(--nd-color-brand-60) 28%, transparent), color-mix(in oklch, var(--nd-color-brand-60) 36%, transparent) ); --border-color-main: var(--nd-color-neutral-20); --border-color-muted: var(--nd-color-neutral-15); --border-color-subtle: var(--nd-color-neutral-10); --outline-color-main: var(--border-color-main); --outline-color-muted: var(--border-color-muted); --outline-color-subtle: var(--border-color-subtle); --background-color-page: var(--nd-color-neutral-0); --background-color-page-inverse: var(--nd-color-neutral-100); --background-color-subtle: var(--nd-color-neutral-5); --background-color-subtle-hover: var(--nd-color-neutral-10); --background-color-muted: var(--nd-color-neutral-10); --background-color-muted-hover: var(--nd-color-neutral-15); --background-color-muted-active: var(--nd-color-neutral-20); --background-color-emphasized: var(--nd-color-neutral-20); --background-color-emphasized-hover: var(--nd-color-neutral-30); --background-color-panel: light-dark( var(--background-color-page), var(--background-color-muted) ); --text-color-main: var(--nd-color-neutral-100); --text-color-main-inverse: var(--nd-color-neutral-0); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --text-sm: .75rem; --text-sm--line-height: 1.25rem; --text-md: .875rem; --text-md--line-height: 1.375rem; --text-lg: 1rem; --text-lg--line-height: 1.5rem; --text-xl: 1.125rem; --text-xl--line-height: 1.625rem; --text-2xl: 1.25rem; --text-2xl--line-height: 1.75rem; --text-3xl: 1.5rem; --text-3xl--line-height: 2rem; --text-4xl: 1.875rem; --text-4xl--line-height: 2.375rem; --text-5xl: 2.375rem; --text-5xl--line-height: 2.875rem; --text-6xl: 2.875rem; --text-6xl--line-height: 3.375rem; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-sm: 0 0 0 .8px var(--border-color-muted), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 .8px var(--border-color-muted), 0 4px 6px -1px var(--nd-color-shadow-key), 0 2px 4px -2px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 .8px var(--border-color-muted), 0 10px 15px -3px var(--nd-color-shadow-key), 0 4px 6px -4px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 .8px var(--border-color-muted), 0 20px 25px -5px var(--nd-color-shadow-key), 0 8px 10px -6px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 .8px var(--border-color-muted), 0 25px 50px -12px var(--nd-color-shadow-key), 0 12px 24px -12px var(--nd-color-shadow-ambient); --font-nd: var(--nd-font-family); --default-transition-duration: .2s; }@utility stroke-main{stroke: var(--border-color-main);}@utility stroke-muted{stroke: var(--border-color-muted);}@utility stroke-subtle{stroke: var(--border-color-subtle);}@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility ring-focused{outline: none; box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}
+@theme static{ --nd-brand-h: 158; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% var(--nd-brand-c) var(--nd-brand-h)), oklch(14% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% var(--nd-brand-c) var(--nd-brand-h)), oklch(17% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% var(--nd-brand-c) var(--nd-brand-h)), oklch(20% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% var(--nd-brand-c) var(--nd-brand-h)), oklch(25% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% var(--nd-brand-c) var(--nd-brand-h)), oklch(30% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% var(--nd-brand-c) var(--nd-brand-h)), oklch(38% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% var(--nd-brand-c) var(--nd-brand-h)), oklch(46% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% var(--nd-brand-c) var(--nd-brand-h)), oklch(52% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-60: oklch(58% var(--nd-brand-c) var(--nd-brand-h)); --nd-color-brand-70: light-dark( oklch(50% var(--nd-brand-c) var(--nd-brand-h)), oklch(66% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% var(--nd-brand-c) var(--nd-brand-h)), oklch(76% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% var(--nd-brand-c) var(--nd-brand-h)), oklch(88% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% var(--nd-brand-c) var(--nd-brand-h)), oklch(96% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99% var(--nd-neutral-c) var(--nd-brand-h)), oklch(14% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-5: light-dark( oklch(97.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(17% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-10: light-dark( oklch(95.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(21% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-15: light-dark( oklch(92.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(26% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-20: light-dark( oklch(89% var(--nd-neutral-c) var(--nd-brand-h)), oklch(32% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-30: light-dark( oklch(81% var(--nd-neutral-c) var(--nd-brand-h)), oklch(42% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-40: light-dark( oklch(72% var(--nd-neutral-c) var(--nd-brand-h)), oklch(50% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-50: light-dark( oklch(60% var(--nd-neutral-c) var(--nd-brand-h)), oklch(58% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-60: light-dark( oklch(50% var(--nd-neutral-c) var(--nd-brand-h)), oklch(67% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-70: light-dark( oklch(40% var(--nd-neutral-c) var(--nd-brand-h)), oklch(76% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-80: light-dark( oklch(32% var(--nd-neutral-c) var(--nd-brand-h)), oklch(85% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-90: light-dark( oklch(22% var(--nd-neutral-c) var(--nd-brand-h)), oklch(93% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-100: light-dark( oklch(15% var(--nd-neutral-c) var(--nd-brand-h)), oklch(98% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-success-base: oklch(60% .14 140deg); --nd-color-warning-base: oklch(76% .15 80deg); --nd-color-error-base: oklch(58% .16 28deg); --nd-color-shadow-key: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 16%), oklch(0% 0 0deg / 65%) ); --nd-color-shadow-ambient: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 4%), oklch(0% 0 0deg / 30%) ); --nd-font-family: -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"; }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: light-dark(var(--nd-color-brand-50), var(--nd-color-brand-70)); --color-brand-active: var(--nd-color-brand-60); --color-brand-subtle: var(--nd-color-brand-15); --color-brand-subtle-hover: var(--nd-color-brand-20); --color-brand-subtle-active: var(--nd-color-brand-30); --color-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-brand-ring: light-dark( color-mix(in oklch, var(--nd-color-brand-60) 28%, transparent), color-mix(in oklch, var(--nd-color-brand-60) 36%, transparent) ); --color-success: color-mix(in oklch, var(--nd-color-success-base) 90%, var(--nd-color-brand-60) 10%); --color-success-hover: light-dark( color-mix(in oklch, oklch(66% .14 140deg) 90%, var(--nd-color-brand-50) 10%), color-mix(in oklch, oklch(52% .14 140deg) 90%, var(--nd-color-brand-70) 10%) ); --color-success-subtle: light-dark( color-mix(in oklch, oklch(95% .05 140deg) 92%, var(--nd-color-brand-15) 8%), color-mix(in oklch, oklch(26% .06 140deg) 92%, var(--nd-color-brand-20) 8%) ); --color-success-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-success-ring: light-dark( color-mix(in oklch, var(--color-success) 28%, transparent), color-mix(in oklch, var(--color-success) 36%, transparent) ); --color-warning: color-mix(in oklch, var(--nd-color-warning-base) 95%, var(--nd-color-brand-60) 5%); --color-warning-hover: light-dark( color-mix(in oklch, oklch(82% .15 80deg) 95%, var(--nd-color-brand-50) 5%), color-mix(in oklch, oklch(68% .15 80deg) 95%, var(--nd-color-brand-70) 5%) ); --color-warning-subtle: light-dark( color-mix(in oklch, oklch(96% .06 80deg) 96%, var(--nd-color-brand-15) 4%), color-mix(in oklch, oklch(28% .06 80deg) 96%, var(--nd-color-brand-20) 4%) ); --color-warning-contrast: light-dark(var(--nd-color-neutral-100), var(--nd-color-neutral-0)); --color-warning-ring: light-dark( color-mix(in oklch, var(--color-warning) 30%, transparent), color-mix(in oklch, var(--color-warning) 38%, transparent) ); --color-error: color-mix(in oklch, var(--nd-color-error-base) 92%, var(--nd-color-brand-60) 8%); --color-error-hover: light-dark( color-mix(in oklch, oklch(64% .16 28deg) 92%, var(--nd-color-brand-50) 8%), color-mix(in oklch, oklch(50% .16 28deg) 92%, var(--nd-color-brand-70) 8%) ); --color-error-subtle: light-dark( color-mix(in oklch, oklch(94% .05 28deg) 92%, var(--nd-color-brand-15) 8%), color-mix(in oklch, oklch(26% .06 28deg) 92%, var(--nd-color-brand-20) 8%) ); --color-error-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-error-ring: light-dark( color-mix(in oklch, var(--color-error) 28%, transparent), color-mix(in oklch, var(--color-error) 36%, transparent) ); --border-color-main: var(--nd-color-neutral-20); --border-color-muted: var(--nd-color-neutral-15); --border-color-subtle: var(--nd-color-neutral-10); --outline-color-main: var(--border-color-main); --outline-color-muted: var(--border-color-muted); --outline-color-subtle: var(--border-color-subtle); --background-color-page: var(--nd-color-neutral-0); --background-color-page-inverse: var(--nd-color-neutral-100); --background-color-subtle: var(--nd-color-neutral-5); --background-color-subtle-hover: var(--nd-color-neutral-10); --background-color-muted: var(--nd-color-neutral-10); --background-color-muted-hover: var(--nd-color-neutral-15); --background-color-muted-active: var(--nd-color-neutral-20); --background-color-emphasized: var(--nd-color-neutral-20); --background-color-emphasized-hover: var(--nd-color-neutral-30); --background-color-panel: light-dark( var(--background-color-page), var(--background-color-muted) ); --text-color-main: var(--nd-color-neutral-100); --text-color-main-inverse: var(--nd-color-neutral-0); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --text-sm: .75rem; --text-sm--line-height: 1.25rem; --text-md: .875rem; --text-md--line-height: 1.375rem; --text-lg: 1rem; --text-lg--line-height: 1.5rem; --text-xl: 1.125rem; --text-xl--line-height: 1.625rem; --text-2xl: 1.25rem; --text-2xl--line-height: 1.75rem; --text-3xl: 1.5rem; --text-3xl--line-height: 2rem; --text-4xl: 1.875rem; --text-4xl--line-height: 2.375rem; --text-5xl: 2.375rem; --text-5xl--line-height: 2.875rem; --text-6xl: 2.875rem; --text-6xl--line-height: 3.375rem; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-sm: 0 0 0 .8px var(--border-color-muted), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 .8px var(--border-color-muted), 0 4px 6px -1px var(--nd-color-shadow-key), 0 2px 4px -2px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 .8px var(--border-color-muted), 0 10px 15px -3px var(--nd-color-shadow-key), 0 4px 6px -4px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 .8px var(--border-color-muted), 0 20px 25px -5px var(--nd-color-shadow-key), 0 8px 10px -6px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 .8px var(--border-color-muted), 0 25px 50px -12px var(--nd-color-shadow-key), 0 12px 24px -12px var(--nd-color-shadow-ambient); --font-nd: var(--nd-font-family); --default-transition-duration: .2s; }@utility stroke-main{stroke: var(--border-color-main);}@utility stroke-muted{stroke: var(--border-color-muted);}@utility stroke-subtle{stroke: var(--border-color-subtle);}@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility ring-focused{outline: none; box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}

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.40",
+  "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/hooks": "0.0.18",
-    "@nild/icons": "0.0.18"
+    "@nild/shared": "0.0.17",
+    "@nild/hooks": "0.0.19",
+    "@nild/icons": "0.0.19"
   },
   "scripts": {
     "build": "vite build --mode PROD",