@nild/components 0.0.45 → 0.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_shared/style/index.d.ts +4 -1
- package/dist/_shared/style/index.js +1 -1
- package/dist/_shared/utils/index.d.ts +1 -2
- package/dist/button/Group.js +1 -1
- package/dist/button/style/index.js +1 -1
- package/dist/checkbox/Checkbox.js +1 -1
- package/dist/checkbox/Group.js +1 -1
- package/dist/checkbox/style/index.js +1 -1
- package/dist/field/Field.js +1 -1
- package/dist/field/Label.js +1 -1
- package/dist/field/style/index.d.ts +1 -4
- package/dist/field/style/index.js +1 -1
- package/dist/form/Form.js +1 -1
- package/dist/form/style/index.d.ts +1 -3
- package/dist/form/style/index.js +1 -1
- package/dist/input/Composite.js +1 -1
- package/dist/input/Input.js +1 -1
- package/dist/input/Number.js +1 -1
- package/dist/input/style/index.d.ts +2 -4
- package/dist/input/style/index.js +1 -1
- package/dist/modal/Portal.js +1 -1
- package/dist/modal/hooks/useModalFocusScope.js +1 -1
- package/dist/popup/Popup.js +1 -1
- package/dist/radio/Group.js +1 -1
- package/dist/radio/Radio.js +1 -1
- package/dist/radio/style/index.js +1 -1
- package/dist/segment/Item.js +1 -1
- package/dist/segment/Segment.js +1 -1
- package/dist/segment/style/index.js +1 -1
- package/dist/select/Option.js +1 -1
- package/dist/select/hooks/useSelectNavigation.js +1 -1
- package/dist/select/style/index.js +1 -1
- package/dist/switch/style/index.js +1 -1
- package/dist/tabs/Tab.js +1 -1
- package/dist/tabs/Tabs.js +1 -1
- package/dist/tabs/style/index.d.ts +1 -0
- package/dist/tabs/style/index.js +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/typography/Link.js +1 -1
- package/dist/typography/Text.js +1 -1
- package/dist/typography/style/index.js +1 -1
- package/dist/watermark/hooks/useWatermarkLayer.js +3 -3
- package/package.json +4 -4
- package/dist/_shared/utils/lock-document-scroll/__tests__/index.test.d.ts +0 -1
- package/dist/_shared/utils/lock-document-scroll/index.d.ts +0 -2
- package/dist/_shared/utils/lock-document-scroll/index.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
const
|
|
1
|
+
const a=()=>["nd-disabled-carrier","disabled:cursor-not-allowed","disabled:select-none","disabled-visual:grayscale-25","disabled-visual:opacity-60"],d={disabled:a};export{d as default};
|
|
@@ -2,8 +2,7 @@ import { default as getComputedStyleValue } from './get-computed-style-value';
|
|
|
2
2
|
import { default as getGlobalState, GlobalStateKey } from './get-global-state';
|
|
3
3
|
import { default as getOwnerDocument } from './get-owner-document';
|
|
4
4
|
import { default as isPlainChildren } from './is-plain-children';
|
|
5
|
-
import { default as lockDocumentScroll } from './lock-document-scroll';
|
|
6
5
|
import { default as mergeHandlers } from './merge-handlers';
|
|
7
6
|
import { default as mergeProps } from './merge-props';
|
|
8
7
|
import { default as registerSlots } from './register-slots';
|
|
9
|
-
export { getGlobalState, getComputedStyleValue, getOwnerDocument, GlobalStateKey, isPlainChildren,
|
|
8
|
+
export { getGlobalState, getComputedStyleValue, getOwnerDocument, GlobalStateKey, isPlainChildren, registerSlots, mergeHandlers, mergeProps, };
|
package/dist/button/Group.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as h,jsx as
|
|
1
|
+
import{jsxs as h,jsx as v}from"react/jsx-runtime";import{isEmpty as g,cnMerge as N}from"@nild/shared";import{forwardRef as y,Children as B,cloneElement as E}from"react";import{isButtonElement as b}from"./Button.js";import{GroupProvider as j}from"./contexts/index.js";import l from"./style/index.js";const n=y(({className:d,children:m,variant:a="solid",size:p="medium",equal:c=!1,disabled:e,direction:i="horizontal",...u},f)=>{const t=B.toArray(m);if(g(t))return null;const r=t.filter(b);return h(j,{value:{variant:a,size:p,equal:c,disabled:e},children:[r.length===1&&r[0],r.length>1&&v("div",{...u,className:N(l.group({direction:i}),d),"data-disabled":e||void 0,ref:f,children:r.map((o,s)=>E(o,{...o.props,className:l.groupedButton({first:s===0,last:s===r.length-1,direction:i,variant:a})}))})]})});n.displayName="Button.Group";export{n as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import
|
|
1
|
+
import{cva as e}from"@nild/shared";import a from"../../_shared/style/index.js";const r=e(["nd-button",["font-nd","cursor-pointer","transition-colors"],["whitespace-nowrap","truncate"],"focus-visible:ring-focused",a.disabled()],{variants:{variant:{solid:["bg-brand","text-brand-contrast","enabled:hover:bg-brand-hover","enabled:active:bg-brand-active"],outlined:["bg-transparent","border","border-main","text-main","enabled:hover:border-brand-hover","enabled:hover:text-brand-hover","enabled:active:border-brand-active","enabled:active:text-brand-active"],filled:["bg-muted","text-main","enabled:hover:bg-muted-hover","enabled:active:bg-muted-active"],text:["bg-transparent","text-main","enabled:hover:bg-muted-hover","enabled:active:bg-muted-active"]},shape:{round:["rounded-full"],square:["rounded-md"]},size:{small:["px-2","h-6","text-sm"],medium:["px-4","h-8","text-md"],large:["px-6","h-10","text-lg"]},block:{true:"w-full",false:""},equal:{true:["flex","justify-center","items-center"],false:""}},compoundVariants:[{size:"small",equal:!0,className:["w-6 h-6","p-1"]},{size:"medium",equal:!0,className:["w-8 h-8","p-1.5"]},{size:"large",equal:!0,className:["w-10 h-10","p-2"]}]}),t=e(["nd-button-group",["flex"],a.disabled()],{variants:{direction:{horizontal:"",vertical:"flex-col"}}}),n=e("focus-visible:z-1",{compoundVariants:[{first:!0,direction:"horizontal",className:"rounded-r-none"},{first:!0,direction:"vertical",className:"rounded-b-none"},{last:!0,direction:"horizontal",className:"rounded-l-none"},{last:!0,direction:"vertical",className:"rounded-t-none"},{first:!1,last:!1,className:"rounded-none"},{last:!1,direction:"horizontal",variant:"outlined",className:["mr-[-1px]","hover:z-1"]},{last:!1,direction:"vertical",variant:"outlined",className:["mb-[-1px]","hover:z-1"]},{last:!1,direction:"horizontal",variant:"solid",className:["border-r","border-r-brand-hover"]},{last:!1,direction:"horizontal",variant:["filled","text"],className:["border-r","border-r-muted"]},{last:!1,direction:"vertical",variant:"solid",className:["border-b","border-b-brand-hover"]},{last:!1,direction:"vertical",variant:["filled","text"],className:["border-b","border-b-muted"]}]}),o={button:r,group:t,groupedButton:n};export{o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as d,jsxs as E}from"react/jsx-runtime";import{useControllableState as G,useEffectCallback as P}from"@nild/hooks";import{cnMerge as R}from"@nild/shared";import{forwardRef as S}from"react";import V from"../_shared/utils/register-slots/index.js";import{useGroupContext as A,CheckboxProvider as B}from"./contexts/index.js";import h from"./Indicator.js";import b from"./Label.js";import F from"./style/index.js";const I=V({indicator:{isMatched:a=>a.type===h},label:{isMatched:a=>a.type===b}}),
|
|
1
|
+
import{jsx as d,jsxs as E}from"react/jsx-runtime";import{useControllableState as G,useEffectCallback as P}from"@nild/hooks";import{cnMerge as R}from"@nild/shared";import{forwardRef as S}from"react";import V from"../_shared/utils/register-slots/index.js";import{useGroupContext as A,CheckboxProvider as B}from"./contexts/index.js";import h from"./Indicator.js";import b from"./Label.js";import F from"./style/index.js";const I=V({indicator:{isMatched:a=>a.type===h},label:{isMatched:a=>a.type===b}}),v=S((a,p)=>{var n;const e=A(),{className:C,children:k,variant:x=e?.variant??"solid",size:c=e?.size??"medium",disabled:i=e?.disabled??!1,checked:q,defaultChecked:y,value:r,onChange:m,...z}=a,{slots:l,plainChildren:s}=I(k),[M,N]=G(e?e.value.includes(r):q,y??!1),g=P(()=>{i||N(t=>(e?e.setValue(t?e.value.filter(w=>w!==r):e.value.concat(r)):m?.(!t),!t))}),u=l.indicator.el??d(h,{}),o=l.label.el??(s.length>0?d(b,{children:s[0].content}):null),j=l.label.el?l.label.seq:((n=s[0])==null?void 0:n.seq)??-1,f=!!l.indicator.el&&!!o&&j<l.indicator.seq;return d(B,{value:{variant:x,size:c,checked:M,disabled:i,setChecked:g},children:E("label",{...z,className:R(F.checkbox({size:c,disabled:i}),C),"data-disabled":i||void 0,ref:p,children:[f?o:u,f?u:o]})})});v.displayName="Checkbox";export{v as default};
|
package/dist/checkbox/Group.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import{useControllableState as h,useEffectCallback as x}from"@nild/hooks";import{forwardRefWithGenerics as C,cnMerge as G}from"@nild/shared";import{GroupProvider as N}from"./contexts/index.js";import g from"./style/index.js";const o=C(({className:l,children:s,direction:t="horizontal",variant:d="solid",size:n="medium",disabled:e=!1,value:c,defaultValue:m=[],onChange:a,...u},f)=>{const[p,v]=h(c,m),b=x(r=>{v(()=>(a?.(r),r))});return i(N,{value:{variant:d,size:n,disabled:e,value:p,setValue:b},children:i("div",{...u,className:G(g.group({direction:t}),l),"data-disabled":e||void 0,ref:f,children:s})})});o.displayName="Checkbox.Group";export{o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import
|
|
1
|
+
import{cva as e}from"@nild/shared";import r from"../../_shared/style/index.js";const a=e(["nd-checkbox","group",["flex","items-center"],"cursor-pointer",r.disabled()],{variants:{size:{small:"gap-1.5",medium:"gap-2",large:"gap-2.5"}}}),t=e(["nd-checkbox-indicator","relative",["flex","items-center","justify-center"]],{variants:{size:{small:"size-3.5 text-sm",medium:"size-4 text-md",large:"size-4.5 text-lg"},default:{true:["rounded-sm","transition-[box-shadow]","group-enabled:focus-visible-within:ring-focused"],false:""}}}),o=e([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),n=e([["flex","items-center","justify-center"],["size-full","rounded-sm","border"],"transition-[background-color,color,border-color]","group-enabled:group-hover:border-brand-hover"],{compoundVariants:[{checked:!0,variant:"solid",className:["bg-brand border-brand text-brand-contrast","group-enabled:group-hover:bg-brand-hover"]},{checked:!0,variant:"outlined",className:["bg-transparent border-brand text-brand","group-enabled:group-hover:text-brand-hover"]},{checked:!1,className:["bg-transparent border-main text-transparent"]}]}),d=e(["w-full"]),i=e(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}}),s=e(["nd-checkbox-group",["flex","gap-x-4","gap-y-2"],r.disabled()],{variants:{direction:{horizontal:"flex-row flex-wrap",vertical:"flex-col"}}}),l={checkbox:a,indicator:t,indicatorInput:o,defaultIndicatorBlock:n,defaultIndicatorIcon:d,label:i,group:s};export{l as default};
|
package/dist/field/Field.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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({
|
|
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({status:o}),E),"data-disabled":i||void 0,"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/Label.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as m}from"react/jsx-runtime";import{cnMerge as o}from"@nild/shared";import{forwardRef as
|
|
1
|
+
import{jsx as m}from"react/jsx-runtime";import{cnMerge as o}from"@nild/shared";import{forwardRef as i,isValidElement as t}from"react";import n from"./style/index.js";const e=i(({className:a,children:s,...r},l)=>m("span",{...r,className:o(n.label(),a),ref:l,children:s}));e.displayName="Field.Label";const c=a=>t(a)&&a.type===e;export{e as default,c as isLabelElement};
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import { FieldStatus } from '../interfaces';
|
|
2
2
|
declare const _default: {
|
|
3
3
|
field: (props?: {
|
|
4
|
-
disabled?: boolean;
|
|
5
4
|
status?: FieldStatus;
|
|
6
5
|
} | undefined) => string;
|
|
7
6
|
labelRow: (props?: object | undefined) => string;
|
|
8
|
-
label: (props?:
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
} | undefined) => string;
|
|
7
|
+
label: (props?: object | undefined) => string;
|
|
11
8
|
helper: (props?: object | undefined) => string;
|
|
12
9
|
status: (props?: {
|
|
13
10
|
status?: FieldStatus;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";const
|
|
1
|
+
import{cva as e}from"@nild/shared";import t from"../../_shared/style/index.js";const r=e(["nd-field","flex","flex-col","items-start","gap-1.5","font-nd","text-md",t.disabled()],{variants:{status:{success:"",warning:"",error:""}}}),s=e(["nd-field-label-row","inline-flex","items-center","gap-1.5"]),a=e(["nd-field-label","text-main","font-medium"]),i=e(["nd-field-helper","text-sm","text-subtle"]),l=e(["nd-field-status","text-sm"],{variants:{status:{success:["text-success"],warning:["text-warning"],error:["text-error"]}}}),n=e(["nd-field-required-indicator","text-error"]),d={field:r,labelRow:s,label:a,helper:i,status:l,requiredIndicator:n};export{d as default};
|
package/dist/form/Form.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as j,jsxs as k}from"react/jsx-runtime";import{useEffectCallback as
|
|
1
|
+
import{jsx as j,jsxs as k}from"react/jsx-runtime";import{useRefState as B,useEffectCallback as R}from"@nild/hooks";import{cnMerge as D}from"@nild/shared";import{forwardRef as T,useCallback as q,useMemo as z}from"react";import G from"../_shared/utils/register-slots/index.js";import{isFieldElement as H}from"../field/Field.js";import{updateByPath as J,getByPath as K}from"./_shared/path.js";import{isActionsElement as L}from"./Actions.js";import{FormProvider as O,hasIssues as Q}from"./contexts/index.js";import{useFormIssues as U}from"./hooks/useFormIssues.js";import W from"./style/index.js";const M=(r,t)=>Array.isArray(r)?r.includes(t):r===t,X=G({field:{isMatched:H,multiple:!0},actions:{isMatched:L}}),A=T((r,t)=>{const{className:F,children:V,defaultValue:w={},resolver:x,validateTrigger:u=["submit","change"],onChange:n,onInvalid:c,onSubmit:d,disabled:o=!1,...C}=r,[f,p,l]=B(w),{errors:E,getMeta:v,touch:I,touchAll:N,validateValue:h}=U({resolver:x}),g=R((a,s)=>{const e=J(l.current,a,s);e!==l.current&&(p(e),I(a),n?.(e),M(u,"change")&&h(e,a))}),b=q(a=>K(f,a),[f]),P=async a=>{if(a.preventDefault(),o)return;const s=l.current,e=M(u,"submit")?await h(s):{value:s,errors:E};if(!e)return;const i=e.value??s,m=e.errors??{};if(e.value&&p(e.value),Q(m)){N(i,m),c?.(m,i,a);return}await d?.(i,a)},S=z(()=>({disabled:o,getMeta:v,getValue:b,setValue:g}),[o,v,b,g]),{slots:y}=X(V);return j(O,{value:S,children:k("form",{...C,className:D(W.form(),F),"data-disabled":o||void 0,ref:t,onSubmit:P,children:[y.field.el,y.actions.el]})})});A.displayName="Form";export{A as default};
|
package/dist/form/style/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as
|
|
1
|
+
import{cva as o}from"@nild/shared";import t from"../../_shared/style/index.js";const e=o(["nd-form","flex","flex-col","gap-4","font-nd",t.disabled()]),f=o(["nd-form-actions","flex","items-center","justify-end","gap-3"]),a={form:e,actions:f};export{a as default};
|
package/dist/input/Composite.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as c,jsxs as u}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as
|
|
1
|
+
import{jsx as c,jsxs as u}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as v,cloneElement as b}from"react";import h from"../_shared/utils/register-slots/index.js";import{isAppendElement as E}from"./Append.js";import{CompositeProvider as M}from"./contexts/index.js";import{isInputElement as N}from"./Input.js";import{isPrependElement as x}from"./Prepend.js";import i from"./style/index.js";const I=h({prepend:{isMatched:x},input:{isMatched:N},append:{isMatched:E}}),o=v(({className:n,children:t,variant:p="outlined",size:d="medium",block:r=!1,disabled:a=!1,...l},m)=>{var s;const{slots:e}=I(t);return e.input.el?c(M,{value:{variant:p,size:d,block:r,disabled:a},children:u("span",{ref:m,className:f(i.composite({block:r,disabled:a}),n),"data-disabled":a||void 0,...l,children:[e.prepend.el,b(e.input.el,{...(s=e.input.el)==null?void 0:s.props,className:i.compositedInputWrapper({variant:p,prepended:!!e.prepend.el,appended:!!e.append.el})}),e.append.el]})}):null});o.displayName="Input.Composite";export{o as default};
|
package/dist/input/Input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as m,jsxs as y}from"react/jsx-runtime";import{useControllableState as E}from"@nild/hooks";import{cnMerge as N}from"@nild/shared";import{forwardRef as k,isValidElement as I}from"react";import M from"../_shared/utils/register-slots/index.js";import{useCompositeContext as j,InputProvider as P}from"./contexts/index.js";import{isPrefixElement as S}from"./Prefix.js";import p from"./style/index.js";import{isSuffixElement as V}from"./Suffix.js";const w=e=>I(e)&&e.type===r,J=M({prefix:{isMatched:S},suffix:{isMatched:V}}),r=k((e,
|
|
1
|
+
import{jsx as m,jsxs as y}from"react/jsx-runtime";import{useControllableState as E}from"@nild/hooks";import{cnMerge as N}from"@nild/shared";import{forwardRef as k,isValidElement as I}from"react";import M from"../_shared/utils/register-slots/index.js";import{useCompositeContext as j,InputProvider as P}from"./contexts/index.js";import{isPrefixElement as S}from"./Prefix.js";import p from"./style/index.js";import{isSuffixElement as V}from"./Suffix.js";const w=e=>I(e)&&e.type===r,J=M({prefix:{isMatched:S},suffix:{isMatched:V}}),r=k((e,d)=>{const a=j(),{className:f,children:u,variant:l=a.variant,size:t=a.size,block:c=a.block,disabled:s=a.disabled,type:v="text",value:x,defaultValue:b="",onChange:o,...h}=e,{slots:n}=J(u),[g,z]=E(x,b),C=i=>{z(i.target.value),o?.(i.target.value,i)};return m(P,{value:{size:t,disabled:s,variant:l},children:y("span",{className:N(p.inputWrapper({variant:l,size:t,block:c,disabled:s}),f),"data-disabled":s||void 0,children:[n.prefix.el,m("input",{ref:d,type:v,value:g,onChange:C,disabled:s,className:p.input({size:t}),...h}),n.suffix.el]})})});r.displayName="Input";export{r as default,w as isInputElement};
|
package/dist/input/Number.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as k,jsx as o}from"react/jsx-runtime";import{useControllableState as y}from"@nild/hooks";import{Icon as p}from"@nild/icons";import w from"@nild/icons/Minus";import I from"@nild/icons/Plus";import{isUndefined as u,isNumeric as R}from"@nild/shared";import{forwardRef as S}from"react";import c from"../button/index.js";import V from"./Append.js";import A from"./Composite.js";import B from"./Input.js";import D from"./Prepend.js";const b=S(({min:m=-1/0,max:n=1/0,step:l=1,value:h,defaultValue:v,disabled:e=!1,onChange:t,...x},C)=>{const[i,s]=y(h,v),N=e||!u(i)&&i<=m,g=e||!u(i)&&i>=n,j=(a,r)=>{const f=R(a)?globalThis.Number(a):void 0;s(f),t?.(f,r)},d=a=>{let r=(i??0)+a;r<m&&(r=m),r>n&&(r=n),s(r),t?.(r)};return k(A,{disabled:e,children:[o(D,{children:o(c,{variant:"outlined",disabled:N,onClick:()=>d(-l),children:o(p,{component:w})})}),o(B,{ref:C,type:"number",value:i,disabled:e,onChange:j,...x}),o(V,{children:o(c,{variant:"outlined",disabled:g,onClick:()=>d(l),children:o(p,{component:I})})})]})});b.displayName="Input.Number";export{b as default};
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import { InputProps, OTPProps } from '../interfaces';
|
|
1
|
+
import { CompositeProps, InputProps, OTPProps } from '../interfaces';
|
|
2
2
|
declare const _default: {
|
|
3
|
-
composite: (props?:
|
|
4
|
-
block?: boolean;
|
|
5
|
-
} | undefined) => string;
|
|
3
|
+
composite: (props?: Pick<CompositeProps, "disabled" | "block"> | undefined) => string;
|
|
6
4
|
compositedInputWrapper: (props?: (Pick<InputProps, "variant"> & {
|
|
7
5
|
prepended?: boolean;
|
|
8
6
|
appended?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import
|
|
1
|
+
import{cva as e}from"@nild/shared";import t from"../../_shared/style/index.js";const n=e(["nd-input-composite","inline-flex","items-stretch",t.disabled()],{variants:{block:{true:["flex","w-full"],false:""}}}),r=e(["flex-auto"],{variants:{prepended:{true:["rounded-l-none"],false:""},appended:{true:["rounded-r-none"],false:""}},compoundVariants:[{variant:"outlined",appended:!0,className:["mr-[-1px]","hover:z-1"]}]}),a=e(["nd-input-wrapper","group",["inline-flex","items-center","box-border","font-nd","transition-colors","overflow-hidden"],["border","enabled:focus-within:border-brand","enabled:focus-within:z-1"],"enabled:focus-visible-within:ring-focused",t.disabled()],{variants:{variant:{outlined:["bg-transparent","border-main","enabled:hover:border-brand-hover"],filled:["bg-muted","border-subtle","enabled:[&:hover:not(:focus-within)]:bg-muted-hover","enabled:[&:hover:not(:focus-within)]:border-muted"]},size:{small:["h-6","text-sm","rounded-sm"],medium:["h-8","text-md","rounded-md"],large:["h-10","text-lg","rounded-md"]},block:{true:["flex","w-full"],false:""}}}),i=e(["nd-input","flex-auto","h-full","bg-transparent","border-none","outline-none","p-0","m-0","text-main","placeholder:text-subtle","disabled:cursor-not-allowed","[&::-ms-reveal]:hidden","[&::-ms-clear]:hidden","[&::-webkit-inner-spin-button]:appearance-none","[&::-webkit-outer-spin-button]:appearance-none","[&::-webkit-inner-spin-button]:m-0","[&::-webkit-outer-spin-button]:m-0","[-moz-appearance:textfield]"],{variants:{size:{small:["px-2","text-sm"],medium:["px-3","text-md"],large:["px-4","text-lg"]}}}),s=e(["nd-input-prefix","shrink-0","h-full","inline-flex","items-center","text-muted"],{variants:{size:{small:["pl-2","text-sm"],medium:["pl-3","text-md"],large:["pl-4","text-lg"]}}}),l=e(["nd-input-suffix","shrink-0","h-full","inline-flex","items-center","text-muted"],{variants:{size:{small:["pr-2","text-sm"],medium:["pr-3","text-md"],large:["pr-4","text-lg"]}}}),d=e(["shrink-0"],{variants:{variant:{outlined:["mr-[-1px]","hover:z-1","focus:z-1","focus-within:z-1"],filled:[]},type:{string:["inline-flex","items-center","border"],element:["rounded-r-none"]},size:{small:["h-6","text-sm","rounded-l-sm"],medium:["h-8","text-md","rounded-l-md"],large:["h-10","text-lg","rounded-l-md"]}},compoundVariants:[{type:"string",variant:"outlined",className:["bg-muted","border-main","text-muted"]},{type:"string",variant:"filled",className:["bg-brand","border-transparent","text-brand-contrast"]},{type:"string",size:"small",className:["px-2"]},{type:"string",size:"medium",className:["px-3"]},{type:"string",size:"large",className:["px-4"]}]}),o=e(["shrink-0"],{variants:{type:{string:["inline-flex","items-center","border"],element:["rounded-l-none","h-auto"]},size:{small:["h-6","text-sm","rounded-r-sm"],medium:["h-8","text-md","rounded-r-md"],large:["h-10","text-lg","rounded-r-md"]}},compoundVariants:[{type:"string",variant:"outlined",className:["bg-muted","border-main","text-muted"]},{type:"string",variant:"filled",className:["bg-brand","border-transparent","text-brand-contrast"]},{type:"string",size:"small",className:["px-2"]},{type:"string",size:"medium",className:["px-3"]},{type:"string",size:"large",className:["px-4"]}]}),m=e(["group-focus-within:text-brand"]),p=e(["gap-2","items-center"],{variants:{block:{true:["flex","w-full"],false:["inline-flex"]}}}),u=e(["flex-auto","min-w-0","text-center"],{compoundVariants:[{size:"small",block:!1,className:["w-6"]},{size:"medium",block:!1,className:["w-8"]},{size:"large",block:!1,className:["w-10"]}]}),x={composite:n,compositedInputWrapper:r,inputWrapper:a,input:i,prefix:s,suffix:l,prepend:d,append:o,searchIcon:m,otpWrapper:p,otpInputWrapper:u};export{x as default};
|
package/dist/modal/Portal.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as E,jsx as v}from"react/jsx-runtime";import{useEffectCallback as g,useScrollLock as T,useEventListener as B}from"@nild/hooks";import{cnMerge as n,mergeRefs as H}from"@nild/shared";import{forwardRef as V,useRef as q,isValidElement as A}from"react";import{createPortal as G}from"react-dom";import J from"../_shared/utils/get-owner-document/index.js";import K from"../_shared/utils/register-slots/index.js";import{isBodyElement as Q}from"./Body.js";import U,{isCloseElement as W}from"./Close.js";import{useModalContext as X}from"./contexts/index.js";import{isFooterElement as Y}from"./Footer.js";import{isHeaderElement as Z}from"./Header.js";import{useModalStack as _}from"./hooks/useModalStack.js";import{useModalFocusScope as $}from"./hooks/useModalFocusScope.js";import c from"./style/index.js";const ee=e=>A(e)&&e.type===m,ae=K({header:{isMatched:e=>Z(e)},body:{isMatched:e=>Q(e)},footer:{isMatched:e=>Y(e)},close:{isMatched:e=>W(e)}}),m=V(({className:e,style:h,children:M,container:d,overlayless:p=!1,overlayClassName:k,surfaceClassName:N,onTransitionEnd:x,...C},F)=>{const{open:s,variant:R,placement:f,size:z,closeOnEscape:w,closeOnOverlayClick:I,trapFocus:O,lockScroll:P,restoreFocus:S,accessibility:l,refs:u,updateOpen:b}=X(),t=q(null),a=J(d,t.current,u.trigger.current),r=d??a?.body??null,{zIndex:j,topmost:i}=_(a,!!r),D=g(()=>{p||!s||!I||!i||b(!1)}),L=g(y=>{!s||!i||y.key==="Escape"&&w&&(y.preventDefault(),b(!1))});if(T(a,P&&!!r),$({open:s,trapFocus:O,restoreFocus:S,topmost:i,ownerDocument:a,surfaceRef:t,triggerRef:u.trigger}),B(a,"keydown",L),!r)return null;const{slots:o}=ae(M);return G(E("div",{className:n(c.portal({placement:f}),e),style:{zIndex:j,...h},...C,children:[!p&&v("div",{className:n(c.overlay(),k),onClick:D}),E("div",{ref:H(t,F),className:n(c.surface({variant:R,placement:f,size:z}),N),"aria-describedby":l["aria-describedby"],"aria-label":l["aria-label"],"aria-labelledby":l["aria-labelledby"],"aria-modal":"true",role:"dialog",tabIndex:-1,onTransitionEnd:x,children:[o.header.el,o.body.el,o.footer.el,o.close.el??v(U,{})]})]}),r)});m.displayName="Modal.Portal";export{m as default,ee as isPortalElement};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useEffectCallback as
|
|
1
|
+
import{useTimeout as C,useEffectCallback as h,useIsomorphicLayoutEffect as w,useEventListener as y}from"@nild/hooks";import{useRef as E,useEffect as g}from"react";const K=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe","summary",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(","),S=e=>{const n=e.ownerDocument.defaultView;if(!n)return!e.hidden;const u=n.getComputedStyle(e);return u.display!=="none"&&u.visibility!=="hidden"&&!e.hidden},x=e=>Array.from(e.querySelectorAll(K)).filter(n=>!n.hasAttribute("disabled")&&n.getAttribute("aria-hidden")!=="true"&&n.tabIndex>=0&&S(n)),p=(e,n=!1)=>{const u=x(e).at(n?-1:0)??e;return u.focus(),u},k=(e,n)=>{var u;const c=e!=null&&e.isConnected?e:n!=null&&n.isConnected?n:null;(u=c?.focus)==null||u.call(c)},F=({open:e,trapFocus:n,restoreFocus:u,topmost:c,ownerDocument:o,surfaceRef:a,triggerRef:b})=>{const v=E(null),i=E(e),d=C(()=>{const t=a.current;if(!t||!c)return;const r=o?.activeElement;(!r||!t.contains(r))&&p(t)},0),D=h(t=>{const r=a.current;if(!r||!e||!c||t.key!=="Tab"||!n)return;const s=x(r),l=o?.activeElement;if(s.length===0){t.preventDefault(),r.focus();return}if(!l||!r.contains(l)){t.preventDefault(),p(r,t.shiftKey);return}const f=s[0],m=s.at(-1);t.shiftKey&&l===f?(t.preventDefault(),m?.focus()):!t.shiftKey&&l===m&&(t.preventDefault(),f?.focus())}),A=h(t=>{const r=a.current,s=t.target;!r||!n||!e||!c||!s||r.contains(s)||p(r)});g(()=>{const t=i.current;e&&!t&&(v.current=o?.activeElement),i.current=e},[e,o]),g(()=>{const t=b.current;return()=>{!u||i.current||k(v.current,t)}},[u,b]),w(()=>{if(e)return d.run(),d.cancel},[d,e,o,a,c]),y(o,"keydown",D),y(o,"focusin",A)};export{F as useModalFocusScope};
|
package/dist/popup/Popup.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as K,jsx as i}from"react/jsx-runtime";import{useControllableState as Q,useEffectCallback as u,useTimeout as M,useIsomorphicLayoutEffect as V}from"@nild/hooks";import{isArray as W,makeArray as X,isFunction as Y}from"@nild/shared";import{useState as Z,useMemo as P}from"react";import _ from"../_shared/utils/register-slots/index.js";import $ from"../transition/Transition.js";import{PopupProvider as J,PortalProvider as ee,ArrowProvider as re}from"./contexts/index.js";import te from"./hooks/usePopup.js";import O from"./Portal.js";import m from"./Trigger.js";const oe=_({trigger:{isMatched:e=>e.type===m},portal:{isMatched:e=>e.type===O},firstBare:{isMatched:e=>e.type!==m&&e.type!==O,strategy:"first"}}),R=({children:e,placement:S,offset:j,action:f="click",size:d="medium",arrowed:h=!0,inverse:v=!1,delay:t=100,open:k,defaultOpen:y=!1,disabled:z,onOpen:g,onClose:w})=>{const{slots:r}=oe(e),[o,A]=Z(y),[a,B]=Q(k,y),[E,F=100]=W(t)?t:[t,t],s=P(()=>new Set(X(f)),[f]),[{triggerRef:l,portalRef:n,portalContext:I,arrowRef:L,arrowContext:N},{update:T,autoUpdate:U}]=te({placement:S,offset:j}),p=u(c=>{z||B(H=>{const b=Y(c)?c(H):c;return b?g?.():w?.(),b})}),x=M(()=>p(!0),E),C=M(()=>p(!1),F),q=u(()=>{s.has("hover")&&(C.cancel(),x.run())}),D=u(()=>{s.has("hover")&&(x.cancel(),C.run())}),G=P(()=>({actions:s,size:d,arrowed:h,inverse:v,refs:{trigger:l,portal:n,arrow:L},setOpen:p,enter:q,leave:D}),[s,d,h,v]);return V(()=>{if(a&&!o)A(!0);else if(a&&o&&l.current&&n.current)return U(l.current,n.current,T)},[a,o]),K(J,{value:G,children:[r.trigger.el??(r.firstBare.el&&i(m,{children:r.firstBare.el})),i(ee,{value:I,children:i(re,{value:N,children:r.portal.el&&i($,{visible:a,children:o&&r.portal.el})})})]})};R.displayName="Popup";export{R as default};
|
package/dist/radio/Group.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import{useControllableState as h,useEffectCallback as G}from"@nild/hooks";import{forwardRefWithGenerics as N,cnMerge as g}from"@nild/shared";import{GroupProvider as x}from"./contexts/index.js";import z from"./style/index.js";const o=N(({className:l,children:s,direction:t="horizontal",variant:d="solid",size:n="medium",disabled:a=!1,value:m,defaultValue:u,onChange:e,...c},f)=>{const[p,v]=h(m,u),b=G(r=>{v(()=>(e?.(r),r))});return i(x,{value:{variant:d,size:n,disabled:a,value:p,setValue:b},children:i("div",{...c,className:g(z.group({direction:t}),l),"data-disabled":a||void 0,ref:f,children:s})})});o.displayName="Radio.Group";export{o as default};
|
package/dist/radio/Radio.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as s,jsxs as j}from"react/jsx-runtime";import{useControllableState as w,useEffectCallback as E}from"@nild/hooks";import{cnMerge as G}from"@nild/shared";import{forwardRef as P}from"react";import S from"../_shared/utils/register-slots/index.js";import{useGroupContext as V,RadioProvider as A}from"./contexts/index.js";import p from"./Indicator.js";import h from"./Label.js";import F from"./style/index.js";const I=S({indicator:{isMatched:l=>l.type===p},label:{isMatched:l=>l.type===h}}),v=P((l,b)=>{var t;const e=V(),{className:C,children:k,variant:x=e?.variant??"solid",size:n=e?.size??"medium",disabled:i=e?.disabled??!1,checked:z,defaultChecked:q,value:c,onChange:m,...y}=l,{slots:a,plainChildren:o}=I(k),[M,N]=w(e?e.value===c:z,q??!1),R=E(()=>{i||N(d=>d||(e?e.setValue(c):m?.(!d),!d))}),u=a.indicator.el??s(p,{}),r=a.label.el??(o.length>0?s(h,{children:o[0].content}):null),g=a.label.el?a.label.seq:((t=o[0])==null?void 0:t.seq)??-1,f=!!a.indicator.el&&!!r&&g<a.indicator.seq;return s(A,{value:{variant:x,size:n,checked:M,disabled:i,setChecked:R},children:j("label",{...y,className:G(F.radio({size:n,disabled:i}),C),"data-disabled":i||void 0,ref:b,children:[f?r:u,f?u:r]})})});v.displayName="Radio";export{v as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import
|
|
1
|
+
import{cva as e}from"@nild/shared";import a from"../../_shared/style/index.js";const r=e(["nd-radio","group",["flex","items-center"],"cursor-pointer",a.disabled()],{variants:{size:{small:"gap-1.5",medium:"gap-2",large:"gap-2.5"}}}),t=e(["nd-radio-indicator","relative",["flex","items-center","justify-center"]],{variants:{size:{small:"size-3.5 text-sm",medium:"size-4 text-md",large:"size-4.5 text-lg"},default:{true:["rounded-full","transition-[box-shadow]","group-enabled:focus-visible-within:ring-focused"],false:""}}}),i=e([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),l=e(["size-full"]),o=e(["stroke-1","r-9","transition-[stroke,fill]","group-enabled:group-hover:stroke-brand-hover"],{compoundVariants:[{checked:!0,variant:"solid",className:["fill-brand stroke-brand","group-enabled:group-hover:fill-brand-hover"]},{checked:!0,variant:"outlined",className:["fill-transparent stroke-brand"]},{checked:!1,className:["fill-transparent stroke-main"]}]}),n=e(["transition-[fill]"],{variants:{variant:{solid:"r-4.5",outlined:"r-5.5"}},compoundVariants:[{checked:!0,variant:"solid",className:["fill-brand-contrast"]},{checked:!0,variant:"outlined",className:["fill-brand","group-enabled:group-hover:fill-brand-hover"]},{checked:!1,className:["fill-transparent"]}]}),s=e(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}}),d=e(["nd-radio-group",["flex","gap-x-4","gap-y-2"],a.disabled()],{variants:{direction:{horizontal:"flex-row flex-wrap",vertical:"flex-col"}}}),c={radio:r,indicator:t,indicatorInput:i,defaultIndicatorSvg:l,defaultIndicatorOuterCircle:o,defaultIndicatorInnerCircle:n,label:s,group:d};export{c as default};
|
package/dist/segment/Item.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as c}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as p,isValidElement as b}from"react";import{useSegmentContext as u}from"./contexts/index.js";import g from"./style/index.js";const h=e=>b(e)&&e.type===a,a=p((e,o)=>{const{selected:i=!1,size:r="medium",orientation:s="horizontal",block:m=!1}=u(),{className:
|
|
1
|
+
import{jsx as c}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as p,isValidElement as b}from"react";import{useSegmentContext as u}from"./contexts/index.js";import g from"./style/index.js";const h=e=>b(e)&&e.type===a,a=p((e,o)=>{const{selected:i=!1,size:r="medium",orientation:s="horizontal",block:m=!1}=u(),{className:l,children:d,value:k,disabled:t=!1,...n}=e;return c("button",{...n,"aria-checked":i,"aria-disabled":t,className:f(g.item({size:r,orientation:s,selected:i,disabled:t,block:m}),l),disabled:t,ref:o,role:"radio",type:"button",children:d})});a.displayName="Segment.Item";export{a as default,h as isItemElement};
|
package/dist/segment/Segment.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as _,jsx as z}from"react/jsx-runtime";import{useControllableState as U,useEffectCallback as u,useIsomorphicLayoutEffect as D,useResizeObserver as ee}from"@nild/hooks";import{forwardRefWithGenerics as te,mergeRefs as K,cnMerge as oe}from"@nild/shared";import{useRef as M,useState as F,useMemo as $,cloneElement as se}from"react";import{useRovingIndexNavigation as ne}from"../_shared/hooks/use-roving-index-navigation/index.js";import q from"../_shared/utils/merge-handlers/index.js";import ie from"../_shared/utils/register-slots/index.js";import{SegmentProvider as re}from"./contexts/index.js";import{isItemElement as ae}from"./Item.js";import A from"./style/index.js";const le=ie({item:{isMatched:ae,multiple:!0}}),de=g=>{const{slots:f}=le(g),y=f.item.el,a=[],l=[];return y.forEach((i,d)=>{var c;a.push({key:((c=i.key)==null?void 0:c.toString())??`${f.item.seq[d]}`,element:i,props:i.props}),i.props.disabled||l.push(d)}),{items:a,enabledIndices:l,firstEnabledIndex:l[0]??-1}},L=te((g,f)=>{const{className:y,children:a,value:l,defaultValue:i,onChange:d,size:c="medium",orientation:m="horizontal",disabled:p=!1,block:I=!1,...C}=g,w=M(null),h=M([]),[W,E]=F({opacity:0}),{items:s,enabledIndices:S,firstEnabledIndex:b}=$(()=>de(a),[a]),G=i??(b>=0?s[b].props.value:void 0),[N,H]=U(l,G),O=s.findIndex(e=>Object.is(e.props.value,N)),r=O>=0?O:b,v=S.includes(r)?r:b,[R,x]=F(v),P=u(e=>{Object.is(N,e)||(H(e),d?.(e))}),j=u(e=>{const t=s[e];!t||p||t.props.disabled||P(t.props.value)}),T=u(e=>{const t=h.current[e];!t||typeof window>"u"||window.requestAnimationFrame(()=>{t.isConnected&&t.focus()})}),V=u(e=>{x(e),T(e)}),{handleKeyDown:B}=ne({orientation:m,activeIndex:R,selectedIndex:v,enabledIndices:p?[]:S,selectOnMove:!0,selectOnConfirm:!0,onActiveChange:V,onSelect:j,onKeyDown:C.onKeyDown}),k=u(()=>{const e=w.current,t=h.current[r];if(!e||!t||r<0){E(o=>o.opacity===0?o:{opacity:0});return}const n={opacity:1,width:t.offsetWidth,height:t.offsetHeight,transform:`translate3d(${t.offsetLeft}px, ${t.offsetTop}px, 0)`};E(o=>o.opacity===n.opacity&&o.width===n.width&&o.height===n.height&&o.transform===n.transform?o:n)});D(()=>{x(v)},[v]),D(()=>{k()},[I,r,s,m,c,k]);const J=$(()=>[w,...s.map((e,t)=>({get current(){return h.current[t]}}))],[s]);ee(J,k);const Q=(e,t)=>{const{element:n}=e,o=p||!!e.props.disabled,X=t===r,Y=t===R;return z(re,{value:{selected:X,size:c,orientation:m,block:I},children:se(n,{value:e.props.value,disabled:o,tabIndex:Y&&!o?0:-1,onClick:q(e.props.onClick,()=>j(t)),onFocus:q(e.props.onFocus,()=>{!o&&x(t)}),ref:K(n.ref,Z=>{h.current[t]=Z})})},e.key)};return _("div",{...C,"aria-disabled":p,"aria-orientation":m,className:oe(A.segment({orientation:m,block:I}),y),"data-disabled":p||void 0,onKeyDown:B,ref:K(f,w),role:"radiogroup",children:[s.length>0&&z("div",{"aria-hidden":"true",className:A.indicator(),style:W}),s.map(Q)]})});L.displayName="Segment";export{L as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import
|
|
1
|
+
import{cva as e}from"@nild/shared";import t from"../../_shared/style/index.js";const n=e(["nd-segment","relative","isolate","font-nd","rounded-md","bg-muted","p-0.5","text-main",t.disabled()],{variants:{orientation:{horizontal:["flex-row","items-center"],vertical:["flex-col","items-stretch"]},block:{true:["flex","w-full"],false:"inline-flex"}}}),a=e(["nd-segment-indicator","pointer-events-none","absolute","top-0","left-0","z-0","rounded-sm","bg-canvas","shadow-sm","transition-[transform,width,height,opacity]","ease-out","motion-reduce:transition-none"]),i=e(["nd-segment-item","relative","z-1","inline-flex","min-w-0","items-center","justify-center","rounded-sm","border-0","bg-transparent","select-none","outline-none","transition-[background-color,box-shadow,color]","focus-visible:ring-focused",t.disabled()],{variants:{orientation:{horizontal:"",vertical:["w-full","justify-start"]},size:{small:["min-h-5","gap-1","px-2","text-sm"],medium:["min-h-7","gap-1.5","px-3","text-md"],large:["min-h-9","gap-2","px-4","text-lg"]},selected:{true:"text-brand",false:""},disabled:{true:"",false:"cursor-pointer"},block:{true:"",false:""}},compoundVariants:[{selected:!1,disabled:!1,className:["text-main","hover:text-brand-hover"]},{selected:!1,disabled:!0,className:"text-subtle"},{block:!0,orientation:"horizontal",className:"flex-1"}]}),o={segment:n,indicator:a,item:i};export{o as default};
|
package/dist/select/Option.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as N,jsx as
|
|
1
|
+
import{jsxs as N,jsx as s}from"react/jsx-runtime";import b from"@nild/icons/CheckSmall";import{forwardRefWithGenerics as v,cnMerge as x}from"@nild/shared";import{isValidElement as M}from"react";import i from"./style/index.js";const w=e=>M(e)&&e.type===a,a=v((e,r)=>{const{size:o="medium",label:l,disabled:n=!1,selected:t=!1,active:d=!1,children:c,className:m,onClick:p,onMouseDown:f,onMouseEnter:u,...h}=e;return N("div",{...h,"aria-disabled":n,"aria-selected":t,className:x(i.option({size:o,disabled:n,active:d}),m),onClick:p,onMouseDown:f,onMouseEnter:u,ref:r,role:"option",children:[s("div",{className:i.optionContent(),children:c??s("span",{className:i.optionLabel(),children:l})}),s("span",{"aria-hidden":"true",className:i.optionIndicator({size:o}),children:t?s(b,{className:"text-brand",size:"1em"}):null})]})});a.displayName="Select.Option";export{a as default,w as isOptionElement};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useEffectCallback as
|
|
1
|
+
import{useRaf as k,useEffectCallback as l,useIsomorphicLayoutEffect as w}from"@nild/hooks";import{useRef as C,useState as H}from"react";const g=n=>{if(typeof window>"u"||!n)return;const c=n.ownerDocument;c.activeElement!==n&&n.isConnected&&c.activeElement!==n&&n.focus()},K=({open:n,selectedIndex:c,enabledIndices:t,triggerRef:m,listboxRef:h,optionRefs:x,onOpen:p,onClose:f,onSelect:E})=>{const b=C(!1),[u,i]=H(-1),y=k(()=>g(h.current)),A=k(()=>g(m.current)),d=k(()=>{var e;(e=x.current[u])==null||e.scrollIntoView({block:"nearest"})}),v=l(()=>y.run()),D=l(()=>A.run()),r=e=>i(a=>{const s=t.length-1;if(s<0)return-1;if(e==="start")return t[0];if(e==="end")return t[s];const o=t.indexOf(a);if(o===-1)return e===1?t[0]:t[s];const T=Math.min(Math.max(o+e,0),s);return t[T]}),I=l(e=>{if(t.length!==0)switch(e.key){case"ArrowDown":e.preventDefault(),n?r(1):p();break;case"ArrowUp":e.preventDefault(),n?r(-1):p();break;case"Home":n&&(e.preventDefault(),r("start"));break;case"End":n&&(e.preventDefault(),r("end"));break;case"Enter":case" ":e.preventDefault(),n?E(u):p();break;case"Escape":n&&(e.preventDefault(),f(),D());break}}),L=l(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),r(1);break;case"ArrowUp":e.preventDefault(),r(-1);break;case"Home":e.preventDefault(),r("start");break;case"End":e.preventDefault(),r("end");break;case"Enter":case" ":e.preventDefault(),E(u);break;case"Escape":e.preventDefault(),f(),D();break;case"Tab":f();break}}),R=l(e=>{var a,s;const o=e.relatedTarget;(a=m.current)!=null&&a.contains(o)||(s=h.current)!=null&&s.contains(o)||f()});return w(()=>{if(!n){b.current=!1,i(-1);return}const e=c>=0?c:t[0]??-1;i(a=>b.current&&t.includes(a)?a:e),b.current=!0},[t,n,c]),w(()=>{n&&v()},[v,n]),w(()=>{if(!(!n||u<0))return d.run(),d.cancel},[u,n,d]),{activeIndex:u,setActiveIndex:i,focusTrigger:D,focusListbox:v,handleTriggerKeyDown:I,handleListboxKeyDown:L,handleListboxBlur:R}};export{K as useSelectNavigation};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import
|
|
1
|
+
import{cva as e}from"@nild/shared";import t from"../../_shared/style/index.js";const n=e(["nd-select-trigger","group",["inline-flex","items-center"],"box-border","font-nd","overflow-hidden","text-left","appearance-none","border","transition-colors","outline-none",t.disabled()],{variants:{variant:{outlined:["bg-transparent","border-main","enabled:hover:border-brand-hover"],filled:["bg-muted","border-subtle"]},size:{small:["h-6","text-sm","rounded-sm"],medium:["h-8","text-md","rounded-md"],large:["h-10","text-lg","rounded-md"]},block:{true:["flex","w-full"],false:""},disabled:{true:"",false:"cursor-pointer"},open:{true:["border-brand","z-1","ring-focused"],false:""}},compoundVariants:[{variant:"filled",disabled:!1,open:!1,className:["enabled:hover:bg-muted-hover","enabled:hover:border-muted"]},{variant:"filled",open:!0,className:["bg-muted-hover"]}]}),r=e(["nd-select-trigger-content","min-w-0","flex-auto","truncate"],{variants:{size:{small:["pl-2","text-sm"],medium:["pl-3","text-md"],large:["pl-4","text-lg"]},placeholder:{true:["text-subtle"],false:["text-main"]}}}),l=e(["nd-select-trigger-icon","shrink-0","inline-flex","items-center","text-muted","transition-transform"],{variants:{size:{small:["px-2","text-sm"],medium:["px-3","text-md"],large:["px-4","text-lg"]},open:{true:["rotate-180"],false:""}}}),o=e(["nd-select-listbox","max-h-60","overflow-auto","overscroll-contain","px-1","py-1","outline-none"]),i=e(["nd-select-option","w-full","flex","items-center","gap-2","rounded-sm","text-left","text-main","select-none","transition-colors",t.disabled()],{variants:{size:{small:["min-h-8","px-2","text-sm"],medium:["min-h-9","px-3","text-md"],large:["min-h-10","px-4","text-lg"]},disabled:{true:["text-subtle"],false:["cursor-pointer"]},active:{true:["bg-surface-muted"],false:""}}}),a=e(["nd-select-option-content","min-w-0","flex-auto"]),s=e(["nd-select-option-label","block","truncate"]),d=e(["nd-select-option-indicator","shrink-0","inline-flex","items-center","justify-center"],{variants:{size:{small:["size-3.5","text-sm"],medium:["size-4","text-md"],large:["size-4.5","text-lg"]}}}),m={trigger:n,triggerContent:r,triggerIcon:l,listbox:o,option:i,optionContent:a,optionLabel:s,optionIndicator:d};export{m as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import
|
|
1
|
+
import{cva as e}from"@nild/shared";import a from"../../_shared/style/index.js";const t=e(["nd-switch","group","h-[var(--nd-switch-height)]",["relative","inline-block","font-nd","overflow-hidden","cursor-pointer"],"transition-[outline-color,box-shadow]",a.disabled()],{variants:{variant:{solid:"focus-visible:ring-focused",outlined:["outline","focus-visible:ring-focused-with-outline"]},size:{small:["min-w-8","text-sm"],medium:["min-w-10","text-md"],large:["min-w-12","text-lg"]},shape:{round:"rounded-full",square:"rounded-md"}},compoundVariants:[{checked:!0,variant:"outlined",className:["outline-brand"]},{checked:!1,variant:"outlined",className:["outline-main","enabled:hover:outline-brand-hover"]}]}),n=e(["h-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-brand-contrast"]],{variants:{type:{checked:["ps-[calc(var(--nd-switch-height)/3)]","pe-[calc(var(--nd-switch-height)*1.1)]"],unchecked:["ps-[calc(var(--nd-switch-height)*1.1)]","pe-[calc(var(--nd-switch-height)/3)]","-mt-[var(--nd-switch-height)]"]}},compoundVariants:[{type:"checked",checked:!0,className:["ms-0","me-0"]},{type:"checked",checked:!1,className:["-ms-[100%]","me-[100%]"]},{type:"unchecked",checked:!0,className:["ms-[100%]","-me-[100%]"]},{type:"unchecked",checked:!1,className:["ms-0","me-0"]},{variant:"solid",checked:!0,className:["bg-brand","group-enabled:group-hover:bg-brand-hover"]},{variant:"solid",checked:!1,className:["bg-emphasized","group-enabled:group-hover:bg-emphasized-hover"]},{variant:"outlined",className:["bg-transparent"]}]}),r=e(["h-[var(--nd-switch-height)]",["flex","justify-center","items-center"],["absolute","top-0","aspect-square","scale-80"],["text-brand-contrast","transition-[left,background-color]"]],{variants:{variant:{solid:["bg-brand-contrast"],outlined:["bg-emphasized","group-enabled:group-hover:bg-brand-hover"]},shape:{round:"rounded-full",square:"rounded-md"},checked:{true:"left-[calc(100%-var(--nd-switch-height))]",false:"left-0"}},compoundVariants:[{variant:"outlined",checked:!0,className:["bg-brand"]}]}),c={switch:t,track:n,thumb:r};export{c as default};
|
package/dist/tabs/Tab.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as N,jsx as
|
|
1
|
+
import{jsxs as N,jsx as t}from"react/jsx-runtime";import{Icon as T}from"@nild/icons";import g from"@nild/icons/CloseSmall";import{cnMerge as y}from"@nild/shared";import{forwardRef as z,isValidElement as I}from"react";import E from"../button/index.js";import{useTabsContext as P}from"./contexts/index.js";import i from"./style/index.js";const j="Close tab",q=a=>I(a)&&a.type===r,r=z((a,c)=>{const{variant:b="line",size:l="medium",orientation:p="horizontal",selectedTabId:f,onClose:n}=P(),{className:u,children:x,value:h,disabled:o=!1,closable:m=!1,id:s,...v}=a,d=!!s&&s===f,C=e=>{e.stopPropagation(),n?.(h,e)};return N("div",{...v,"aria-disabled":o,"aria-selected":d,className:y(i.tab({variant:b,size:l,orientation:p,selected:d,disabled:o,closable:m}),u),id:s,ref:c,role:"tab",children:[t("span",{className:i.tabContent(),children:x}),m&&t(E,{equal:!0,variant:"text","aria-label":j,className:i.close({size:l}),disabled:o,onClick:C,onKeyDown:e=>e.stopPropagation(),tabIndex:-1,children:t(T,{component:g})})]})});r.displayName="Tabs.Tab";export{r as default,q as isTabElement};
|
package/dist/tabs/Tabs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as ee,jsxs as ae}from"react/jsx-runtime";import{useControllableState as oe,useEffectCallback as x,useIsomorphicLayoutEffect as se}from"@nild/hooks";import{forwardRefWithGenerics as le,cnMerge as ne,mergeRefs as te}from"@nild/shared";import{useId as
|
|
1
|
+
import{jsx as ee,jsxs as ae}from"react/jsx-runtime";import{useControllableState as oe,useEffectCallback as x,useIsomorphicLayoutEffect as se}from"@nild/hooks";import{forwardRefWithGenerics as le,cnMerge as ne,mergeRefs as te}from"@nild/shared";import{useId as ie,useRef as re,useMemo as de,useState as pe,cloneElement as O}from"react";import{useRovingIndexNavigation as ce}from"../_shared/hooks/use-roving-index-navigation/index.js";import q from"../_shared/utils/merge-handlers/index.js";import z from"../_shared/utils/register-slots/index.js";import{TabsProvider as ue}from"./contexts/index.js";import{isListElement as me}from"./List.js";import{isPanelElement as be}from"./Panel.js";import fe from"./style/index.js";import{isTabElement as ve}from"./Tab.js";const he=z({list:{isMatched:me},panel:{isMatched:be,multiple:!0}}),ye=z({tab:{isMatched:ve,multiple:!0}}),Ie=(w,h)=>{const{slots:v}=he(w),b=v.list.el,{slots:y}=ye(b?.props.children),C=y.tab.el,I=v.panel.el,p=[],g=[],n=[],t=new Map;C.forEach((a,s)=>{var c;const u=a.props.value,r=t.get(u);r?r.push(s):t.set(u,[s]),p.push({key:((c=a.key)==null?void 0:c.toString())??`${y.tab.seq[s]}`,el:a,id:a.props.id??`${h}-tab-${s}`,props:a.props}),a.props.disabled||n.push(s)});const i=new Set;return I.forEach((a,s)=>{var c,u,r;const m=a.props.value,l=(c=t.get(m))==null?void 0:c[0],d=a.props.id??`${h}-panel-${s}`;g.push({key:((u=a.key)==null?void 0:u.toString())??`${v.panel.seq[s]}`,el:a,id:d,tabId:l===void 0?void 0:p[l].id,props:a.props}),i.has(m)||(i.add(m),(r=t.get(m))==null||r.forEach(M=>{p[M].panelId=d}))}),{listEl:b,tabs:p,panels:g,enabledIndices:n,firstEnabledIndex:n[0]??-1,getTabIndexByValue:a=>{var s;return((s=t.get(a))==null?void 0:s[0])??-1}}},F=le((w,h)=>{const{className:v,children:b,value:y,defaultValue:C,onChange:I,variant:p="line",size:g="medium",orientation:n="horizontal",activation:t="auto",disabled:i=!1,closable:a=!1,onClose:s,destroyOnInactive:c=!1,...u}=w,r=ie(),m=re([]),{listEl:l,tabs:d,panels:M,enabledIndices:j,firstEnabledIndex:E,getTabIndexByValue:A}=de(()=>Ie(b,r),[b,r]),B=C??(E>=0?d[E].props.value:void 0),[T,L]=oe(y,B),D=A(T),f=D>=0?D:E,K=f>=0?d[f].props.value:T,P=f>=0?d[f].id:void 0,k=j.includes(f)?f:E,[N,S]=pe(k),G=i?[]:j,W=x(e=>{Object.is(T,e)||(L(e),I?.(e))}),R=x(e=>{const o=d[e];!o||i||o.props.disabled||W(o.props.value)}),H=x(e=>{const o=m.current[e];!o||typeof window>"u"||window.requestAnimationFrame(()=>{o.isConnected&&o.focus()})}),J=x(e=>{S(e),H(e)}),{handleKeyDown:Q}=ce({orientation:n,activeIndex:N,selectedIndex:k,enabledIndices:G,selectOnMove:t==="auto",selectOnConfirm:t==="manual",onActiveChange:J,onSelect:R,onKeyDown:l?.props.onKeyDown});se(()=>{S(k)},[k]);const U=(e,o)=>{const{el:V}=e,$=i||!!e.props.disabled,Y=o===N,_=e.props.closable??a;return O(V,{key:e.key,id:e.id,value:e.props.value,"aria-controls":e.panelId,disabled:$,closable:_,tabIndex:Y&&!$?0:-1,onClick:q(e.props.onClick,()=>R(o)),onFocus:q(e.props.onFocus,()=>{!$&&S(o)}),ref:te(V.ref,Z=>{m.current[o]=Z})})},X=e=>{const o=Object.is(e.props.value,K);return c&&!o?null:O(e.el,{key:e.key,id:e.id,value:e.props.value,"aria-labelledby":e.tabId,ref:e.el.ref})};return ee(ue,{value:{variant:p,size:g,orientation:n,selectedTabId:P,selectedValue:K,onClose:s},children:ae("div",{...u,className:ne(fe.tabs({variant:p,orientation:n,disabled:i}),v),"data-disabled":i||void 0,ref:h,children:[l&&O(l,{...l.props,role:"tablist","aria-orientation":n,children:d.map(U),onKeyDown:Q,ref:l.ref}),M.map(X)]})})});F.displayName="Tabs";export{F as default};
|
package/dist/tabs/style/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as a}from"@nild/shared";import
|
|
1
|
+
import{cva as a}from"@nild/shared";import e from"../../_shared/style/index.js";const t=a(["nd-tabs","font-nd","text-main",e.disabled()],{variants:{orientation:{horizontal:"",vertical:["flex","items-start"]},variant:{line:"",card:""}},compoundVariants:[{orientation:"vertical",variant:"line",className:"gap-4"},{orientation:"vertical",variant:"card",className:"items-stretch"}]}),r=a(["nd-tabs-list","flex","shrink-0"],{variants:{orientation:{horizontal:["flex-row","items-end"],vertical:["flex-col","items-stretch"]},variant:{line:"",card:""}},compoundVariants:[{orientation:"horizontal",variant:"line",className:["border-b","border-main"]},{orientation:"vertical",variant:"line",className:["border-r","border-main"]},{orientation:"horizontal",variant:"card",className:["mb-[-1px]","gap-1"]},{orientation:"vertical",variant:"card",className:["mr-[-1px]","gap-1"]}]}),n=a(["nd-tabs-tab","group","relative","inline-flex","items-center","justify-center","min-w-0","select-none","outline-none","transition-[background-color,border-color,color]","focus-visible:ring-focused",e.disabled()],{variants:{orientation:{horizontal:"",vertical:["w-full","justify-start"]},variant:{line:["bg-transparent","border-transparent"],card:["border","border-main"]},size:{small:["min-h-7","gap-1","px-2","text-sm"],medium:["min-h-8","gap-1.5","px-3","text-md"],large:["min-h-10","gap-2","px-4","text-lg"]},selected:{true:"",false:""},disabled:{true:"",false:["cursor-pointer"]},closable:{true:"",false:""}},compoundVariants:[{variant:"line",orientation:"horizontal",className:["border-b-2","mb-[-1px]"]},{variant:"line",orientation:"vertical",className:["border-r-2","mr-[-1px]"]},{variant:"line",selected:!0,className:["text-brand","border-brand"]},{variant:"line",selected:!1,disabled:!1,className:["hover:text-brand-hover"]},{variant:"card",orientation:"horizontal",className:["rounded-t-md","border-b-main"]},{variant:"card",orientation:"vertical",className:["rounded-l-md","border-r-main"]},{variant:"card",selected:!0,className:["z-1","bg-canvas","text-brand"]},{variant:"card",selected:!1,disabled:!1,className:["bg-muted","text-main","hover:text-brand-hover"]},{variant:"card",selected:!0,orientation:"horizontal",className:"border-b-transparent"},{variant:"card",selected:!0,orientation:"vertical",className:"border-r-transparent"},{closable:!0,size:"small",className:"pr-1"},{closable:!0,size:"medium",className:"pr-1.5"},{closable:!0,size:"large",className:"pr-2"}]}),i=a(["nd-tabs-tab-content","min-w-0","truncate"]),o=a(["nd-tabs-tab-close","shrink-0"],{variants:{size:{small:["size-4","text-sm"],medium:["size-4.5","text-md"],large:["size-5","text-lg"]}}}),s=a(["nd-tabs-panel","min-w-0","outline-none"],{variants:{orientation:{horizontal:"",vertical:["flex-auto"]},variant:{line:"",card:["border","border-main","bg-canvas","p-4"]}},compoundVariants:[{variant:"line",orientation:"horizontal",className:"pt-4"},{variant:"line",orientation:"vertical",className:"pt-0"},{variant:"card",orientation:"horizontal",className:["rounded-b-md","rounded-tr-md"]},{variant:"card",orientation:"vertical",className:["rounded-r-md","rounded-bl-md"]}]}),l={tabs:t,list:r,tab:n,tabContent:i,close:o,panel:s};export{l as default};
|
package/dist/tailwind.css
CHANGED
|
@@ -1 +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-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-canvas: var(--nd-color-neutral-0); --background-color-canvas-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-surface: light-dark( var(--nd-color-neutral-0), var(--nd-color-neutral-10) ); --background-color-surface-subtle: light-dark(var(--nd-color-neutral-5), var(--nd-color-neutral-15)); --background-color-surface-muted: light-dark(var(--nd-color-neutral-10), var(--nd-color-neutral-20)); --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;}}
|
|
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-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-canvas: var(--nd-color-neutral-0); --background-color-canvas-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-surface: light-dark( var(--nd-color-neutral-0), var(--nd-color-neutral-10) ); --background-color-surface-subtle: light-dark(var(--nd-color-neutral-5), var(--nd-color-neutral-15)); --background-color-surface-muted: light-dark(var(--nd-color-neutral-10), var(--nd-color-neutral-20)); --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{&:where(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}@custom-variant disabled-visual{&:where(:disabled,[aria-disabled="true"],[data-disabled]):not(:where(.nd-disabled-carrier:where(:disabled,[aria-disabled="true"],[data-disabled])) :where(:disabled,[aria-disabled="true"],[data-disabled])) {@slot;}}@custom-variant enabled{&:not(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}
|
package/dist/typography/Link.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as m}from"react/jsx-runtime";import{cnMerge as n}from"@nild/shared";import{forwardRef as f}from"react";import p from"./style/index.js";const
|
|
1
|
+
import{jsx as m}from"react/jsx-runtime";import{cnMerge as n}from"@nild/shared";import{forwardRef as f}from"react";import p from"./style/index.js";const e=f(({className:a,children:i,underlined:d=!1,disabled:r=!1,href:o="#",...s},l)=>m("a",{...s,"aria-disabled":r,href:r?void 0:o,className:n(p.link({underlined:d}),a),ref:l,children:i}));e.displayName="Typography.Link";export{e as default};
|
package/dist/typography/Text.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as x}from"react";import r from"./style/index.js";const s=x(({className:t,children:o,tags:c=[],secondary:d=!1,disabled:m=!1,...i},n)=>{const l=[...new Set(c)].reduce((p,a)=>e(a,{className:r.textTag({tag:a}),children:p}),o);return e("span",{...i,"aria-disabled":m,className:f(r.text({secondary:d}),t),ref:n,children:l})});s.displayName="Typography.Text";export{s as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as t}from"@nild/shared";import
|
|
1
|
+
import{cva as t}from"@nild/shared";import e from"../../_shared/style/index.js";const n=t(["nd-link",["font-nd","text-brand","text-[length:inherit]","cursor-pointer","enabled:hover:text-brand-hover","enabled:active:text-brand-active"],e.disabled()],{variants:{underlined:{true:"underline",false:"no-underline"}}}),r=t(["nd-paragraph",["font-nd","text-main","text-[length:inherit]"],["mt-0","mb-[1em]"]]),d=t(["nd-text",["font-nd","text-[length:inherit]"],e.disabled()],{variants:{secondary:{true:"text-muted",false:"text-main"}}}),a=t("",{variants:{tag:{strong:"",del:"",u:["underline"],i:"",mark:["bg-brand","text-brand-contrast"],code:[["ps-1.5","pe-1.5"],["bg-brand-subtle","text-sm","rounded-sm"],["border","border-brand-subtle"]],kbd:[["ps-1.5","pe-1.5"],["text-sm","rounded-sm"],["border","border-b-2","border-brand-subtle"]]}}}),o=t(["nd-title",["font-nd","font-semibold","text-main"],["mt-[1em]","mb-[0.5em]"]],{variants:{level:{1:["text-6xl"],2:["text-5xl"],3:["text-4xl"],4:["text-3xl"],5:["text-2xl"],6:["text-lg"]}}}),l=t(["nd-typography",["font-nd","text-md"]]),i={link:n,paragraph:r,text:d,textTag:a,title:o,typography:l};export{i as default};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{useEffectCallback as
|
|
2
|
-
`),[
|
|
3
|
-
`):[];if(!i.length&&!s){d(
|
|
1
|
+
import{useRefState as F,useEffectCallback as H}from"@nild/hooks";import{useMemo as f,useCallback as b,useEffect as W}from"react";import k from"../../_shared/utils/get-computed-style-value/index.js";import"@nild/shared";import{normalizeContent as j,normalizeImage as G,toTuple as I,createTile as N}from"../_shared/canvas.js";const w={dataUrl:null,size:null},C=E=>{const{rootRef:m,layerRef:v,text:p,image:g,pattern:t,textStyle:o,opacity:$,zIndex:A,onError:h}=E,[n,y,z]=F(w),u=f(()=>j(p).join(`
|
|
2
|
+
`),[p]),s=f(()=>{const l=G(g);return l?{...l}:void 0},[g]),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(v.current,"color");return{fontSize:l,fontWeight:o?.fontWeight??400,fontFamily:o?.fontFamily||k(m.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"}},[v,m,o?.color,o?.fontFamily,o?.fontSize,o?.fontStyle,o?.fontWeight,o?.lineHeight,o?.textAlign]),x=H((l,i)=>{h?.(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))&&y(l)},[y,z]);return W(()=>{let l=!1;const i=u?u.split(`
|
|
3
|
+
`):[];if(!i.length&&!s){d(w);return}return N({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:$??.16,zIndex:A??1}}};export{C as default,C as useWatermarkLayer};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nild/components",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.47",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./dist/index.js",
|
|
7
7
|
"exports": {
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "^18.2.0",
|
|
33
33
|
"react-dom": "^18.2.0",
|
|
34
|
-
"@nild/
|
|
35
|
-
"@nild/
|
|
36
|
-
"@nild/icons": "^0.0.
|
|
34
|
+
"@nild/hooks": "^0.0.21",
|
|
35
|
+
"@nild/shared": "^0.0.18",
|
|
36
|
+
"@nild/icons": "^0.0.21"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "vite build --mode PROD",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{isBrowser as r}from"@nild/shared";let t=0,n="",i="";const a=e=>{const o=e.defaultView??(r()?window:null);return o?[e.documentElement,e.body].some(d=>{const l=o.getComputedStyle(d),s=l.getPropertyValue("scrollbar-gutter")||l.scrollbarGutter||"";return/\bstable\b/.test(s)}):!1},y=e=>{if(!r())return()=>{};if(t===0){n=e.body.style.overflow,i=e.body.style.paddingRight;const o=Number.parseFloat(window.getComputedStyle(e.body).paddingRight||"0")||0,d=e.documentElement.clientWidth>0?window.innerWidth-e.documentElement.clientWidth:0,l=!a(e);e.body.style.overflow="hidden",l&&d>0&&(e.body.style.paddingRight=`${o+d}px`)}return t+=1,()=>{t=Math.max(0,t-1),t===0&&(e.body.style.overflow=n,e.body.style.paddingRight=i)}};export{y as default};
|