@nild/components 0.0.45 → 0.0.46
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/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/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/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/package.json +3 -3
|
@@ -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};
|
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 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=(
|
|
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=(t,o)=>Array.isArray(t)?t.includes(o):t===o,Y=H({field:{isMatched:J,multiple:!0},actions:{isMatched:O}}),A=D((t,o)=>{const{className:F,children:V,defaultValue:w={},resolver:x,validateTrigger:m=["submit","change"],onChange:c,onInvalid:d,onSubmit:f,disabled:l=!1,...C}=t,[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,s)=>{const e=K(a.current,r,s);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 s=a.current,e=M(m,"submit")?await h(s):{value:s,errors:E};if(!e)return;const u=e.value??s,n=e.errors??{};if(e.value&&(a.current=e.value,p(e.value)),U(n)){N(u,n),d?.(n,u,r);return}await f?.(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(),F),"data-disabled":l||void 0,ref:o,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/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 Y,jsx as j}from"react/jsx-runtime";import{useControllableState as Z,useEffectCallback as
|
|
1
|
+
import{jsxs as Y,jsx as j}from"react/jsx-runtime";import{useControllableState as Z,useEffectCallback as u,useIsomorphicLayoutEffect as D}from"@nild/hooks";import{forwardRefWithGenerics as _,mergeRefs as K,cnMerge as Q}from"@nild/shared";import{useRef as L,useState as M,useMemo as ee,cloneElement as te}from"react";import{useRovingIndexNavigation as oe}from"../_shared/hooks/use-roving-index-navigation/index.js";import F from"../_shared/utils/merge-handlers/index.js";import ne from"../_shared/utils/register-slots/index.js";import{SegmentProvider as se}from"./contexts/index.js";import{isItemElement as ie}from"./Item.js";import $ from"./style/index.js";const re=ne({item:{isMatched:ie,multiple:!0}}),ae=y=>{const{slots:h}=re(y),g=h.item.el,a=[],d=[];return g.forEach((i,l)=>{var c;a.push({key:((c=i.key)==null?void 0:c.toString())??`${h.item.seq[l]}`,element:i,props:i.props}),i.props.disabled||d.push(l)}),{items:a,enabledIndices:d,firstEnabledIndex:d[0]??-1}},q=_((y,h)=>{const{className:g,children:a,value:d,defaultValue:i,onChange:l,size:c="medium",orientation:m="horizontal",disabled:p=!1,block:x=!1,...k}=y,I=L(null),v=L([]),[A,C]=M({opacity:0}),{items:s,enabledIndices:z,firstEnabledIndex:b}=ee(()=>ae(a),[a]),W=i??(b>=0?s[b].props.value:void 0),[S,G]=Z(d,W),N=s.findIndex(e=>Object.is(e.props.value,S)),r=N>=0?N:b,w=z.includes(r)?r:b,[O,E]=M(w),H=u(e=>{Object.is(S,e)||(G(e),l?.(e))}),R=u(e=>{const t=s[e];!t||p||t.props.disabled||H(t.props.value)}),P=u(e=>{const t=v.current[e];!t||typeof window>"u"||window.requestAnimationFrame(()=>{t.isConnected&&t.focus()})}),T=u(e=>{E(e),P(e)}),{handleKeyDown:V}=oe({orientation:m,activeIndex:O,selectedIndex:w,enabledIndices:p?[]:z,selectOnMove:!0,selectOnConfirm:!0,onActiveChange:T,onSelect:R,onKeyDown:k.onKeyDown}),f=u(()=>{const e=I.current,t=v.current[r];if(!e||!t||r<0){C(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)`};C(o=>o.opacity===n.opacity&&o.width===n.width&&o.height===n.height&&o.transform===n.transform?o:n)});D(()=>{E(w)},[w]),D(()=>{f();const e=I.current;if(!e||typeof window>"u")return;const t=window.ResizeObserver;if(t){const n=new t(f);return n.observe(e),v.current.slice(0,s.length).forEach(o=>{o&&n.observe(o)}),()=>{n.disconnect()}}return window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f)}},[x,r,s,m,c,f]);const B=(e,t)=>{const{element:n}=e,o=p||!!e.props.disabled,J=t===r,U=t===O;return j(se,{value:{selected:J,size:c,orientation:m,block:x},children:te(n,{value:e.props.value,disabled:o,tabIndex:U&&!o?0:-1,onClick:F(e.props.onClick,()=>R(t)),onFocus:F(e.props.onFocus,()=>{!o&&E(t)}),ref:K(n.ref,X=>{v.current[t]=X})})},e.key)};return Y("div",{...k,"aria-disabled":p,"aria-orientation":m,className:Q($.segment({orientation:m,block:x}),g),"data-disabled":p||void 0,onKeyDown:V,ref:K(h,I),role:"radiogroup",children:[s.length>0&&j("div",{"aria-hidden":"true",className:$.indicator(),style:A}),s.map(B)]})});q.displayName="Segment";export{q 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{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};
|
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.46",
|
|
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/
|
|
34
|
+
"@nild/icons": "^0.0.20",
|
|
35
35
|
"@nild/hooks": "^0.0.20",
|
|
36
|
-
"@nild/
|
|
36
|
+
"@nild/shared": "^0.0.17"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "vite build --mode PROD",
|