@nild/components 0.0.31 → 0.0.33
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/button/Button.js +1 -1
- package/dist/button/Group.js +1 -1
- package/dist/button/style/index.d.ts +2 -4
- package/dist/button/style/index.js +1 -1
- package/dist/checkbox/style/index.js +1 -1
- package/dist/divider/style/index.js +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +1 -1
- package/dist/input/Append.d.ts +5 -0
- package/dist/input/Append.js +1 -0
- package/dist/input/Composite.d.ts +3 -0
- package/dist/input/Composite.js +1 -0
- package/dist/input/Input.d.ts +5 -0
- package/dist/input/Input.js +1 -0
- package/dist/input/Number.d.ts +3 -0
- package/dist/input/Number.js +1 -0
- package/dist/input/OTP.d.ts +3 -0
- package/dist/input/OTP.js +1 -0
- package/dist/input/Password.d.ts +3 -0
- package/dist/input/Password.js +1 -0
- package/dist/input/Prefix.d.ts +5 -0
- package/dist/input/Prefix.js +1 -0
- package/dist/input/Prepend.d.ts +5 -0
- package/dist/input/Prepend.js +1 -0
- package/dist/input/Search.d.ts +3 -0
- package/dist/input/Search.js +1 -0
- package/dist/input/Suffix.d.ts +5 -0
- package/dist/input/Suffix.js +1 -0
- package/dist/input/contexts/index.d.ts +4 -0
- package/dist/input/contexts/index.js +1 -0
- package/dist/input/index.d.ts +16 -0
- package/dist/input/index.js +1 -0
- package/dist/input/style/index.d.ts +24 -0
- package/dist/input/style/index.js +1 -0
- package/dist/popup/Arrow.js +1 -1
- package/dist/popup/Popup.js +1 -1
- package/dist/popup/Portal.js +1 -1
- package/dist/popup/contexts/index.d.ts +1 -1
- package/dist/popup/style/index.d.ts +3 -3
- package/dist/popup/style/index.js +1 -1
- package/dist/radio/style/index.js +1 -1
- package/dist/switch/Switch.js +1 -1
- package/dist/switch/style/index.d.ts +3 -1
- package/dist/switch/style/index.js +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/tooltip/Tooltip.d.ts +4 -0
- package/dist/tooltip/Tooltip.js +1 -0
- package/dist/tooltip/index.d.ts +9 -0
- package/dist/tooltip/index.js +1 -0
- package/dist/typography/style/index.js +1 -1
- package/package.json +2 -2
- package/dist/_shared/utils/isPlainChildren.js +0 -1
package/dist/button/Button.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as b}from"react/jsx-runtime";import{cnMerge as c}from"@nild/shared";import{forwardRef as
|
|
1
|
+
import{jsx as b}from"react/jsx-runtime";import{cnMerge as c}from"@nild/shared";import{forwardRef as f,isValidElement as q}from"react";import{useGroupContext as N}from"./contexts/index.js";import{buttonClassNames as h}from"./style/index.js";const x=a=>q(a)&&a.type===s,s=f((a,r)=>{const e=N(),{className:o,children:i,variant:l=e.variant,size:n=e.size,shape:m="square",equal:d=e.equal,disabled:t=e.disabled,block:u,...p}=a;return b("button",{type:"button",...p,disabled:t,className:c(h({variant:l,size:n,shape:m,equal:d,block:u,disabled:t}),o),ref:r,children:i})});s.displayName="Button";export{s as default,x as isButtonElement};
|
package/dist/button/Group.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as f,jsx as h}from"react/jsx-runtime";import{isEmpty as g,cnMerge as v}from"@nild/shared";import{forwardRef as N,Children as y,cloneElement as B}from"react";import{isButtonElement as C}from"./Button.js";import{GroupProvider as E}from"./contexts/index.js";import{
|
|
1
|
+
import{jsxs as f,jsx as h}from"react/jsx-runtime";import{isEmpty as g,cnMerge as v}from"@nild/shared";import{forwardRef as N,Children as y,cloneElement as B}from"react";import{isButtonElement as C}from"./Button.js";import{GroupProvider as E}from"./contexts/index.js";import{groupedButtonClassNames as j,groupClassNames as x}from"./style/index.js";const o=N(({className:l,children:n,variant:a="solid",size:m="medium",equal:d=!1,disabled:p,direction:s="horizontal",...c},u)=>{const e=y.toArray(n);if(g(e))return null;const r=e.filter(C);return f(E,{value:{variant:a,size:m,equal:d,disabled:p},children:[r.length===1&&r[0],r.length>1&&h("div",{...c,className:v(x({direction:s}),l),ref:u,children:r.map((t,i)=>B(t,{...t.props,className:j({first:i===0,last:i===r.length-1,direction:s,variant:a})}))})]})});o.displayName="Button.Group";export{o as default};
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { ButtonProps, GroupProps } from '../interfaces';
|
|
2
|
-
export declare const buttonClassNames: (props?:
|
|
3
|
-
plain?: boolean;
|
|
4
|
-
}) | undefined) => string;
|
|
2
|
+
export declare const buttonClassNames: (props?: ButtonProps | undefined) => string;
|
|
5
3
|
export declare const groupClassNames: (props?: GroupProps | undefined) => string;
|
|
6
|
-
export declare const
|
|
4
|
+
export declare const groupedButtonClassNames: (props?: (GroupProps & {
|
|
7
5
|
first?: boolean;
|
|
8
6
|
last?: boolean;
|
|
9
7
|
}) | undefined) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import{DISABLED_CLS as
|
|
1
|
+
import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const r=e(["nd-button",["font-nd","cursor-pointer","transition-colors"],["whitespace-nowrap","truncate"],a],{variants:{variant:{solid:["bg-brand","text-on-brand","enabled:hover:bg-brand-hover","enabled:active:bg-brand-active"],outlined:["bg-transparent","border-solid","border","border-edge","text-body","enabled:hover:border-brand-hover","enabled:hover:text-brand-hover","enabled:active:border-brand-active","enabled:active:text-brand-active"],filled:["bg-surface","text-brand","enabled:hover:text-brand-hover","enabled:active:text-brand-active","enabled:hover:bg-surface-hover","enabled:active:bg-surface-active"],text:["bg-transparent","text-brand","enabled:hover:text-brand-hover","enabled:active:text-brand-active","enabled:hover:bg-surface-hover","enabled:active:bg-surface-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:""},disabled:{true:"disabled",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"]],{variants:{direction:{horizontal:"",vertical:"flex-col"}}}),o=e("",{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-solid","border-r","border-r-brand-hover"]},{last:!1,direction:"horizontal",variant:["filled","text"],className:["border-solid","border-r","border-r-surface-hover"]},{last:!1,direction:"vertical",variant:"solid",className:["border-solid","border-b","border-b-brand-hover"]},{last:!1,direction:"vertical",variant:["filled","text"],className:["border-solid","border-b","border-b-surface-hover"]}]});export{r as buttonClassNames,t as groupClassNames,o as groupedButtonClassNames};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const r=e(["nd-checkbox","group",["flex","items-center"],"cursor-pointer",a],{variants:{size:{small:"gap-1.5",medium:"gap-2",large:"gap-2.5"},disabled:{true:"disabled",false:""}}}),s=e(["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"}}}),
|
|
1
|
+
import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const r=e(["nd-checkbox","group",["flex","items-center"],"cursor-pointer",a],{variants:{size:{small:"gap-1.5",medium:"gap-2",large:"gap-2.5"},disabled:{true:"disabled",false:""}}}),s=e(["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"}}}),o=e([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),t=e([["flex","items-center","justify-center"],["size-full","rounded-sm","border-solid","border-1"],"transition-[background-color,color,border-color]"],{compoundVariants:[{checked:!0,variant:"solid",className:["bg-brand border-brand text-on-brand","group-enabled:group-hover:bg-brand-hover"]},{checked:!0,variant:"outlined",className:["bg-transparent border-brand text-brand","group-enabled:group-hover:border-brand-hover"]},{checked:!1,className:["bg-transparent border-edge text-transparent","group-enabled:group-hover:border-brand-hover"]}]}),l=e(["w-full"]),d=e(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}}),n=e(["nd-checkbox-group",["flex","gap-x-4","gap-y-2"]],{variants:{direction:{horizontal:"flex-row flex-wrap",vertical:"flex-col"}}});export{r as checkboxClassNames,t as defaultIndicatorBlockClassNames,l as defaultIndicatorIconClassNames,n as groupClassNames,s as indicatorClassNames,o as indicatorInputClassNames,d as labelClassNames};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";const r=e(["nd-divider","border-split","text-
|
|
1
|
+
import{cva as e}from"@nild/shared";const r=e(["nd-divider","border-split","text-body"],{compoundVariants:[{emptyChildren:!0,direction:"horizontal",className:["w-full","min-w-full","border-b","my-6"]},{emptyChildren:!0,direction:"vertical",className:["inline-block","h-[1em]","align-middle","border-r","ms-3 me-3"]},{emptyChildren:!0,variant:"solid",className:["border-solid"]},{emptyChildren:!0,variant:"dashed",className:["border-dashed"]},{emptyChildren:!0,variant:"dotted",className:["border-dotted"]},{emptyChildren:!1,direction:"horizontal",className:["flex items-center text-center",'before:h-0 before:content-[""] before:border-b before:border-[color:inherit]','after:h-0 after:content-[""] after:border-b after:border-[color:inherit]',"my-6"]},{emptyChildren:!1,direction:"horizontal",variant:"solid",className:["before:border-solid","after:border-solid"]},{emptyChildren:!1,direction:"horizontal",variant:"dashed",className:["before:border-dashed","after:border-dashed"]},{emptyChildren:!1,direction:"horizontal",variant:"dotted",className:["before:border-dotted","after:border-dotted"]},{emptyChildren:!1,direction:"horizontal",align:"left",className:["before:basis-1/12","before:grow-0","after:flex-1"]},{emptyChildren:!1,direction:"horizontal",align:"center",className:["before:flex-1","after:flex-1"]},{emptyChildren:!1,direction:"horizontal",align:"right",className:["before:flex-1","after:basis-1/12","after:grow-0"]}]});export{r as dividerClassNames};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { default as Button } from './button';
|
|
2
2
|
import { default as Checkbox } from './checkbox';
|
|
3
3
|
import { default as Divider } from './divider';
|
|
4
|
+
import { default as Input } from './input';
|
|
4
5
|
import { default as Popover } from './popover';
|
|
5
6
|
import { default as Radio } from './radio';
|
|
6
7
|
import { default as Switch } from './switch';
|
|
8
|
+
import { default as Tooltip } from './tooltip';
|
|
7
9
|
import { default as Transition } from './transition';
|
|
8
10
|
import { default as Typography } from './typography';
|
|
9
|
-
export { Button, Checkbox, Divider, Popover, Radio, Switch, Transition, Typography };
|
|
11
|
+
export { Button, Checkbox, Divider, Popover, Radio, Switch, Tooltip, Transition, Typography, Input };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{default as a}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as
|
|
1
|
+
import{default as a}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as t}from"./divider/Divider.js";import{default as r}from"./input/index.js";import{default as s}from"./popover/index.js";import{default as f}from"./radio/index.js";import{default as m}from"./switch/index.js";import{default as i}from"./tooltip/index.js";import{default as p}from"./transition/Transition.js";import{default as e}from"./typography/index.js";/* empty css */export{a as Button,o as Checkbox,t as Divider,r as Input,s as Popover,f as Radio,m as Switch,i as Tooltip,p as Transition,e as Typography};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as d}from"react/jsx-runtime";import{isString as c,cnMerge as t}from"@nild/shared";import{isValidElement as o,Children as u,cloneElement as f}from"react";import{useCompositeContext as v}from"./contexts/index.js";import{appendClassNames as l}from"./style/index.js";const y=e=>o(e)&&e.type===i,i=({children:e})=>{var n;const{size:a,variant:r,disabled:p}=v();if(c(e))return d("span",{className:t(l({type:"string",size:a,variant:r})),children:e});const s=u.toArray(e).find(m=>o(m));return f(s,{...s?.props,className:t(l({type:"element",size:a,variant:r}),(n=s?.props)==null?void 0:n.className),size:a,disabled:p})};i.displayName="Input.Append";export{i as default,y as isAppendElement};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as f,jsxs as u}from"react/jsx-runtime";import{cnMerge as v}from"@nild/shared";import{forwardRef as N,Children as C,cloneElement as E}from"react";import{isAppendElement as b}from"./Append.js";import{CompositeProvider as h}from"./contexts/index.js";import{isInputElement as x}from"./Input.js";import{isPrependElement as I}from"./Prepend.js";import{compositedInputWrapperClassNames as j,compositeClassNames as k}from"./style/index.js";const m=N(({className:p,children:l,variant:r="outlined",size:t="medium",block:i=!1,disabled:n=!1,...d},c)=>{let a,o,s;return C.forEach(l,e=>{I(e)?a=e:b(e)?o=e:x(e)&&(s=e)}),s?f(h,{value:{variant:r,size:t,block:i,disabled:n},children:u("span",{ref:c,className:v(k({block:i}),p),...d,children:[a,E(s,{...s?.props,className:j({variant:r,prepended:!!a,appended:!!o})}),o]})}):null});m.displayName="Input.Composite";export{m as default};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { InputProps } from './interfaces';
|
|
3
|
+
export declare const isInputElement: (child: ReactNode) => child is ReactElement<InputProps>;
|
|
4
|
+
declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
5
|
+
export default Input;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as p,jsxs as z}from"react/jsx-runtime";import{useControllableState as E}from"@nild/hooks";import{cnMerge as y}from"@nild/shared";import{forwardRef as k,Children as I,isValidElement as j}from"react";import{useCompositeContext as P,InputProvider as S}from"./contexts/index.js";import{isPrefixElement as V}from"./Prefix.js";import{inputClassNames as w,inputWrapperClassNames as M}from"./style/index.js";import{isSuffixElement as R}from"./Suffix.js";const J=e=>j(e)&&e.type===r,r=k((e,d)=>{const s=P(),{className:u,children:f,variant:i=s.variant,size:t=s.size,block:c=s.block,disabled:l=s.disabled,type:v="text",value:b,defaultValue:C="",onChange:n,...h}=e;let o=null,m=null;I.forEach(f,a=>{V(a)?o=a:R(a)&&(m=a)});const[x,N]=E(b,C),g=a=>{N(a.target.value),n?.(a.target.value,a)};return p(S,{value:{size:t,disabled:l,variant:i},children:z("span",{className:y(M({variant:i,size:t,block:c,disabled:l}),u),children:[o,p("input",{ref:d,type:v,value:x,onChange:g,disabled:l,className:w({size:t}),...h}),m]})})});r.displayName="Input";export{r as default,J as isInputElement};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as j,jsx as r}from"react/jsx-runtime";import{useControllableState as k}from"@nild/hooks";import{Icon as d}from"@nild/icons";import y from"@nild/icons/Minus";import w from"@nild/icons/Plus";import{isUndefined as f,isNumeric as I}from"@nild/shared";import{forwardRef as S}from"react";import u 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 c=S(({min:n=-1/0,max:i=1/0,step:a=1,value:h,defaultValue:b,onChange:t,...v},x)=>{const[e,l]=k(h,b),C=!f(e)&&e<=n,N=!f(e)&&e>=i,g=(m,o)=>{const p=I(m)?globalThis.Number(m):void 0;l(p),t?.(p,o)},s=m=>{let o=(e??0)+m;o<n&&(o=n),o>i&&(o=i),l(o),t?.(o)};return j(A,{children:[r(D,{children:r(u,{variant:"outlined",disabled:C,onClick:()=>s(-a),children:r(d,{component:y})})}),r(B,{ref:x,type:"number",value:e,onChange:g,...v}),r(V,{children:r(u,{variant:"outlined",disabled:N,onClick:()=>s(a),children:r(d,{component:w})})})]})});c.displayName="Input.Number";export{c as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as A,jsxs as P}from"react/jsx-runtime";import{useControllableState as q}from"@nild/hooks";import{isNumber as G,cnMerge as J,isFunction as K,isEmpty as v}from"@nild/shared";import{forwardRef as Q,useRef as F,useImperativeHandle as U,Fragment as V}from"react";import X from"./Input.js";import{otpInputWrapperClassNames as Y,otpWrapperClassNames as Z}from"./style/index.js";const z=Q(({className:B,placeholder:y,length:u=6,separator:d,block:k=!1,size:x="medium",type:b,value:I,defaultValue:R,onFocus:C,onBlur:D,onChange:N,onComplete:M,...w},S)=>{const[g,T]=q(I,R??[]),o=F([]),h=F(g);h.current=g;const p=()=>Array.from({length:u},(e,n)=>h.current[n]??""),m=(e,n)=>{h.current=e,T(e),N?.(e,n),e.every(a=>!v(a))&&M?.(e,n)},W=(e,n,a)=>{var l;const t=String(n??"");if(!t)return;const r=p(),c=t.split("");for(let s=0;s<c.length;s++)e+s<u&&(r[e+s]=c[s]);m(r,a);const f=Math.min(e+c.length,u-1);(l=o.current[f])==null||l.focus()},j=(e,n)=>{var a;const l=p(),t=l.findIndex(r=>r==="");v(l[e])&&t!==-1&&e>t?(n.preventDefault(),(a=o.current[t])==null||a.focus()):(n.target.select(),C?.(e,n))},E=e=>{e.currentTarget.contains(e.relatedTarget)||D==null||D(e)},H=(e,n)=>{var a,l,t;if(n.key==="Backspace"||n.keyCode===8){n.preventDefault();const r=p();v(r[e])?e>0&&(r[e-1]="",m(r,n),(a=o.current[e-1])==null||a.focus()):(r[e]="",m(r,n))}else n.key==="ArrowLeft"?(n.preventDefault(),(l=o.current[Math.max(0,e-1)])==null||l.focus()):n.key==="ArrowRight"&&(n.preventDefault(),(t=o.current[Math.min(u-1,e+1)])==null||t.focus())},L=e=>{var n,a,l;e.preventDefault();const t=((a=(n=e.clipboardData)==null?void 0:n.getData)==null?void 0:a.call(n,"text"))??"",r=b==="number"?t.replace(/\D/g,""):t.replace(/\s/g,"");if(!r)return;const c=Math.max(0,o.current.findIndex(i=>i===document.activeElement)),f=p(),s=r.split("");for(let i=0;i<s.length;i++)c+i<u&&(f[c+i]=s[i]);m(f,e);const O=Math.min(c+s.length,u-1);(l=o.current[O])==null||l.focus()};return U(S,()=>({focus:e=>{var n,a;if(G(e))(n=o.current[e])==null||n.focus();else{const l=p().findIndex(r=>r===""),t=l!==-1?l:0;(a=o.current[t])==null||a.focus()}},blur:()=>{o.current.forEach(e=>e?.blur())}})),A("span",{className:J(Z({block:k}),B),onPasteCapture:L,onBlur:E,children:Array.from({length:u}).map((e,n)=>P(V,{children:[A(X,{className:Y({block:k,size:x}),type:b,size:x,placeholder:y?.[n],value:g[n]??"",autoComplete:"one-time-code",ref:a=>{o.current[n]=a},onChange:(a,l)=>W(n,a,l),onFocus:a=>j(n,a),onKeyDown:a=>H(n,a),...w}),n<u-1&&(K(d)?d(n):d)]},n))})});z.displayName="Input.OTP";export{z as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useControllableState as a}from"@nild/hooks";import{Icon as g}from"@nild/icons";import v from"@nild/icons/PreviewCloseOne";import x from"@nild/icons/PreviewOpen";import{forwardRef as C}from"react";import w from"./Input.js";import S from"./Suffix.js";const s=C(({value:i,defaultValue:l="",visible:m,defaultVisible:f=!1,onChange:t,onVisibleChange:n,...p},u)=>{const[r,c]=a(m,f),[d,h]=a(i,l);return e(w,{ref:u,type:r?"text":"password",value:d,onChange:(o,b)=>{h(String(o)),t?.(String(o),b)},...p,children:e(S,{onClick:()=>{const o=!r;c(o),n?.(o)},className:"cursor-pointer flex items-center hover:text-brand transition-colors",children:e(g,{component:r?x:v})})})});s.displayName="Input.Password";export{s as default};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { PrefixProps } from './interfaces';
|
|
3
|
+
export declare const isPrefixElement: (child: ReactNode) => child is ReactElement<PrefixProps>;
|
|
4
|
+
declare const Prefix: import('react').ForwardRefExoticComponent<PrefixProps & import('react').RefAttributes<HTMLSpanElement>>;
|
|
5
|
+
export default Prefix;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as n,isValidElement as p}from"react";import{useInputContext as l}from"./contexts/index.js";import{prefixClassNames as c}from"./style/index.js";const d=s=>p(s)&&s.type===e,e=n((s,r)=>{const{size:a}=l(),{className:t,children:i,...m}=s;return o("span",{...m,className:f(c({size:a}),t),ref:r,children:i})});e.displayName="Input.Prefix";export{e as default,d as isPrefixElement};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as d}from"react/jsx-runtime";import{isString as c,cnMerge as t}from"@nild/shared";import{isValidElement as o,Children as u,cloneElement as f}from"react";import{useCompositeContext as v}from"./contexts/index.js";import{prependClassNames as l}from"./style/index.js";const y=e=>o(e)&&e.type===r,r=({children:e})=>{var i;const{size:a,variant:n,disabled:p}=v();if(c(e))return d("span",{className:t(l({type:"string",size:a,variant:n})),children:e});const s=u.toArray(e).find(m=>o(m));return f(s,{...s?.props,className:t(l({type:"element",size:a,variant:n}),(i=s?.props)==null?void 0:i.className),size:a,disabled:p})};r.displayName="Input.Prepend";export{r as default,y as isPrependElement};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as o}from"react/jsx-runtime";import{useControllableState as c}from"@nild/hooks";import{Icon as d}from"@nild/icons";import h from"@nild/icons/Search";import{forwardRef as S}from"react";import g from"./Input.js";import w from"./Prefix.js";import{searchIconClassNames as y}from"./style/index.js";const e=S(({value:t,defaultValue:m="",keyword:n,defaultKeyword:s,onChange:r,...l},f)=>{const[i,p]=c(n??t,s??m);return o(g,{ref:f,value:i,onChange:(a,u)=>{p(String(a)),r?.(String(a),u)},...l,children:o(w,{children:o(d,{component:h,className:y()})})})});e.displayName="Input.Search";export{e as default};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { SuffixProps } from './interfaces';
|
|
3
|
+
export declare const isSuffixElement: (child: ReactNode) => child is ReactElement<SuffixProps>;
|
|
4
|
+
declare const Suffix: import('react').ForwardRefExoticComponent<SuffixProps & import('react').RefAttributes<HTMLSpanElement>>;
|
|
5
|
+
export default Suffix;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as f}from"react/jsx-runtime";import{cnMerge as o}from"@nild/shared";import{forwardRef as n,isValidElement as p}from"react";import{useInputContext as l}from"./contexts/index.js";import{suffixClassNames as u}from"./style/index.js";const c=s=>p(s)&&s.type===e,e=n((s,a)=>{const{size:r}=l(),{className:t,children:i,...m}=s;return f("span",{...m,className:o(u({size:r}),t),ref:a,children:i})});e.displayName="Input.Suffix";export{e as default,c as isSuffixElement};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { CompositeProps, InputProps } from '../interfaces';
|
|
2
|
+
declare const CompositeProvider: import('react').Provider<Pick<CompositeProps, "variant" | "size" | "disabled" | "block">>, useCompositeContext: () => Pick<CompositeProps, "variant" | "size" | "disabled" | "block">;
|
|
3
|
+
declare const InputProvider: import('react').Provider<Pick<InputProps, "variant" | "size" | "disabled" | "block">>, useInputContext: () => Pick<InputProps, "variant" | "size" | "disabled" | "block">;
|
|
4
|
+
export { CompositeProvider, useCompositeContext, InputProvider, useInputContext };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createContextSuite as e}from"@nild/shared";const[t,o]=e({defaultValue:{variant:"outlined",size:"medium",block:!1,disabled:!1}}),[a,i]=e({defaultValue:{variant:"outlined",size:"medium",block:!1,disabled:!1}});export{t as CompositeProvider,a as InputProvider,o as useCompositeContext,i as useInputContext};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @category Components
|
|
3
|
+
*/
|
|
4
|
+
declare const Input: import('react').ForwardRefExoticComponent<import('./interfaces').InputProps & import('react').RefAttributes<HTMLInputElement>> & {
|
|
5
|
+
Composite: import('react').ForwardRefExoticComponent<import('./interfaces').CompositeProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
6
|
+
Prepend: import('react').FC<import('./interfaces').PrependProps>;
|
|
7
|
+
Append: import('react').FC<import('./interfaces').AppendProps>;
|
|
8
|
+
Prefix: import('react').ForwardRefExoticComponent<import('./interfaces').PrefixProps & import('react').RefAttributes<HTMLSpanElement>>;
|
|
9
|
+
Suffix: import('react').ForwardRefExoticComponent<import('./interfaces').SuffixProps & import('react').RefAttributes<HTMLSpanElement>>;
|
|
10
|
+
Search: import('react').ForwardRefExoticComponent<import('./interfaces').SearchProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
11
|
+
Password: import('react').ForwardRefExoticComponent<import('./interfaces').PasswordProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
12
|
+
OTP: import('react').ForwardRefExoticComponent<import('./interfaces').OTPProps & import('react').RefAttributes<import('./interfaces').OTPRef>>;
|
|
13
|
+
Number: import('react').ForwardRefExoticComponent<import('./interfaces').NumberProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
14
|
+
};
|
|
15
|
+
export type * from './interfaces';
|
|
16
|
+
export default Input;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import r from"./Append.js";import o from"./Composite.js";import m from"./Input.js";import p from"./Number.js";import t from"./OTP.js";import f from"./Password.js";import i from"./Prefix.js";import e from"./Prepend.js";import s from"./Search.js";import a from"./Suffix.js";const n=Object.assign(m,{Composite:o,Prepend:e,Append:r,Prefix:i,Suffix:a,Search:s,Password:f,OTP:t,Number:p});export{n as default};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { InputProps, OTPProps } from '../interfaces';
|
|
2
|
+
export declare const compositeClassNames: (props?: {
|
|
3
|
+
block?: boolean;
|
|
4
|
+
} | undefined) => string;
|
|
5
|
+
export declare const compositedInputWrapperClassNames: (props?: (Pick<InputProps, "variant"> & {
|
|
6
|
+
prepended?: boolean;
|
|
7
|
+
appended?: boolean;
|
|
8
|
+
}) | undefined) => string;
|
|
9
|
+
export declare const inputWrapperClassNames: (props?: InputProps | undefined) => string;
|
|
10
|
+
export declare const inputClassNames: (props?: InputProps | undefined) => string;
|
|
11
|
+
export declare const prefixClassNames: (props?: InputProps | undefined) => string;
|
|
12
|
+
export declare const suffixClassNames: (props?: InputProps | undefined) => string;
|
|
13
|
+
export declare const prependClassNames: (props?: (Pick<InputProps, "variant" | "size"> & {
|
|
14
|
+
type: "string" | "element";
|
|
15
|
+
}) | undefined) => string;
|
|
16
|
+
export declare const appendClassNames: (props?: (Pick<InputProps, "variant" | "size"> & {
|
|
17
|
+
type: "string" | "element";
|
|
18
|
+
}) | undefined) => string;
|
|
19
|
+
/**
|
|
20
|
+
* Preset component styles
|
|
21
|
+
*/
|
|
22
|
+
export declare const searchIconClassNames: (props?: InputProps | undefined) => string;
|
|
23
|
+
export declare const otpWrapperClassNames: (props?: Pick<OTPProps, "block"> | undefined) => string;
|
|
24
|
+
export declare const otpInputWrapperClassNames: (props?: Pick<InputProps, "size" | "block"> | undefined) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const s=e(["nd-input-composite","inline-flex","items-stretch"],{variants:{block:{true:["flex","w-full"],false:""}}}),a=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","focus-within:z-1"]}]}),r=e(["nd-input-wrapper","group",["inline-flex","items-center","box-border","font-nd","transition-colors","overflow-hidden"],["border-solid","border","enabled:focus-within:border-brand"],t],{variants:{variant:{outlined:["bg-transparent","border-edge","enabled:hover:border-brand-hover"],filled:["bg-surface","border-surface","enabled:[&:hover:not(:focus-within)]:bg-surface-hover","enabled:[&:hover:not(:focus-within)]:border-surface-hover"]},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:"disabled",false:""}}}),n=e(["nd-input","flex-auto","h-full","bg-transparent","border-none","outline-none","p-0","m-0","text-body","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"]}}}),l=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"]}}}),i=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-solid","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-surface","border-edge","text-muted"]},{type:"string",variant:"filled",className:["bg-brand","border-transparent","text-on-brand"]},{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-solid","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-surface","border-edge","text-muted"]},{type:"string",variant:"filled",className:["bg-brand","border-transparent","text-on-brand"]},{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"]}]});export{o as appendClassNames,s as compositeClassNames,a as compositedInputWrapperClassNames,n as inputClassNames,r as inputWrapperClassNames,u as otpInputWrapperClassNames,p as otpWrapperClassNames,l as prefixClassNames,d as prependClassNames,m as searchIconClassNames,i as suffixClassNames};
|
package/dist/popup/Arrow.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as m}from"react/jsx-runtime";import{usePopupContext as n,useArrowContext as p}from"./contexts/index.js";import{arrowClassNames as l}from"./style/index.js";const r=()=>{const{size:o,arrowed:s,borderless:e,refs:a}=n(),{style:t,orientation:i}=p();return m("div",{className:l({size:o,arrowed:s,borderless:e,orientation:i}),style:t,ref:a.arrow})};r.displayName="Popup.Arrow";export{r as default};
|
package/dist/popup/Popup.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as J,jsx as i}from"react/jsx-runtime";import{useControllableState as K,useEffectCallback as f,useIsomorphicLayoutEffect as M}from"@nild/hooks";import{isArray as Q,makeArray as W,isFunction as X}from"@nild/shared";import{Children as Y,isValidElement as Z,useState as _,useMemo as P,useRef as $}from"react";import G from"../transition/Transition.js";import{PopupProvider as ee,PortalProvider as re,ArrowProvider as te}from"./contexts/index.js";import oe from"./hooks/usePopup.js";import ae from"./Portal.js";import x from"./Trigger.js";const A=({children:E,placement:O,offset:R,action:p="click",size:d="medium",arrowed:h=!0,borderless:b=!1,delay:t=100,open:S,defaultOpen:v=!1,disabled:g,onOpen:w,onClose:k})=>{let l,y,n;Y.forEach(E,e=>{if(Z(e))switch(e.type){case x:y=e;break;case ae:n=e;break;default:l=e;break}});const[o,j]=_(v),[a,z]=K(S,v),[T,F=100]=Q(t)?t:[t,t],s=P(()=>new Set(W(p)),[p]),r=$(),[{triggerRef:u,portalRef:c,portalContext:I,arrowRef:L,arrowContext:N},{update:U,autoUpdate:V}]=oe({placement:O,offset:R}),m=f(e=>{g||z(H=>{const C=X(e)?e(H):e;return C?w?.():k?.(),C})}),q=f(()=>{s.has("hover")&&(r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{m(!0)},T))}),B=f(()=>{s.has("hover")&&(r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{m(!1)},F))}),D=P(()=>({actions:s,size:d,arrowed:h,borderless:b,refs:{trigger:u,portal:c,arrow:L},setOpen:m,enter:q,leave:B}),[s,d,h,b]);return M(()=>{if(a&&!o)j(!0);else if(a&&o&&u.current&&c.current)return V(u.current,c.current,U)},[a,o]),J(ee,{value:D,children:[y||l&&i(x,{children:l}),i(re,{value:I,children:i(te,{value:N,children:n&&i(G,{visible:a,children:o&&n})})})]})};A.displayName="Popup";export{A as default};
|
package/dist/popup/Portal.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as M,jsx as P}from"react/jsx-runtime";import{useEffectCallback as t}from"@nild/hooks";import{mergeRefs as b,cnMerge as n,getDPR as g}from"@nild/shared";import{forwardRef as h,Children as R,isValidElement as j,cloneElement as w}from"react";import{createPortal as z}from"react-dom";import L from"./Arrow.js";import{usePopupContext as $,usePortalContext as k}from"./contexts/index.js";import{portalContentClassNames as A,portalClassNames as D}from"./style/index.js";const m=h(({className:i,style:p,children:f,container:u=document.body,...s},c)=>{var r;const{size:d,borderless:v,refs:x,enter:C,leave:N}=$(),{coords:l}=k(),a=R.toArray(f).find(o=>j(o)),y=t(o=>{var e;(e=s?.onMouseEnter)==null||e.call(s,o),C()}),E=t(o=>{var e;(e=s?.onMouseLeave)==null||e.call(s,o),N()});return a?z(M("div",{...s,className:n(D(),i),style:{transform:`translate(${l.x}px, ${l.y}px)`,...g()>=1.5&&{willChange:"transform"},...p},onMouseEnter:y,onMouseLeave:E,ref:b(x.portal,c),children:[w(a,{...a.props,className:n(A({size:d,borderless:v}),(r=a?.props)==null?void 0:r.className)}),P(L,{})]}),u):null});m.displayName="Popup.Portal";export{m as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CSSProperties, Dispatch, RefObject, SetStateAction } from 'react';
|
|
2
2
|
import { ArrowOrientation, PopupProps, TriggerAction } from '../interfaces';
|
|
3
3
|
import { Coords } from '@floating-ui/dom';
|
|
4
|
-
export interface PopupContextValue extends Pick<PopupProps, 'arrowed' | '
|
|
4
|
+
export interface PopupContextValue extends Pick<PopupProps, 'size' | 'arrowed' | 'borderless'> {
|
|
5
5
|
actions: Set<TriggerAction>;
|
|
6
6
|
refs: {
|
|
7
7
|
trigger: RefObject<Element>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ArrowOrientation, PopupProps, PortalProps } from '../interfaces';
|
|
2
2
|
export declare const triggerClassNames: (props?: object | undefined) => string;
|
|
3
3
|
export declare const portalClassNames: (props?: PortalProps | undefined) => string;
|
|
4
|
-
export declare const portalContentClassNames: (props?: Pick<PopupProps, "size"> | undefined) => string;
|
|
5
|
-
export declare const arrowClassNames: (props?: ({
|
|
4
|
+
export declare const portalContentClassNames: (props?: Pick<PopupProps, "size" | "borderless"> | undefined) => string;
|
|
5
|
+
export declare const arrowClassNames: (props?: (Pick<PopupProps, "size" | "arrowed" | "borderless"> & {
|
|
6
6
|
orientation: ArrowOrientation;
|
|
7
|
-
}
|
|
7
|
+
}) | undefined) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as r}from"@nild/shared";const e=r(["nd-popup-trigger"]),
|
|
1
|
+
import{cva as r}from"@nild/shared";const e=r(["nd-popup-trigger"]),o=r(["nd-popup-portal",["absolute","top-0","left-0"]]),a=r(["bg-container","text-body","rounded-md","shadow-lg"],{variants:{size:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]},borderless:{true:"",false:["outline-solid","outline-1","outline-edge"]}}}),s=r(["nd-popup-arrow","absolute","bg-container"],{variants:{size:{small:["w-1.5","h-1.5"],medium:["w-3","h-3"],large:["w-4.5","h-4.5"]},arrowed:{true:"",false:["opacity-0","invisible"]},borderless:{true:"",false:["border-solid","border-edge"]},orientation:{up:["transform-[translateY(-50%)_rotate(45deg)]","rounded-tl-sm"],down:["transform-[translateY(50%)_rotate(45deg)]","rounded-br-sm"],left:["transform-[translateX(-50%)_rotate(45deg)]","rounded-bl-sm"],right:["transform-[translateX(50%)_rotate(45deg)]","rounded-tr-sm"]}},compoundVariants:[{borderless:!1,orientation:"up",className:["border-l-1","border-t-1"]},{borderless:!1,orientation:"down",className:["border-r-1","border-b-1"]},{borderless:!1,orientation:"left",className:["border-l-1","border-b-1"]},{borderless:!1,orientation:"right",className:["border-r-1","border-t-1"]}]});export{s as arrowClassNames,o as portalClassNames,a as portalContentClassNames,e as triggerClassNames};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as a}from"@nild/shared";import{DISABLED_CLS as e}from"../../_shared/style/index.js";const
|
|
1
|
+
import{cva as a}from"@nild/shared";import{DISABLED_CLS as e}from"../../_shared/style/index.js";const s=a(["nd-radio","group",["flex","items-center"],"cursor-pointer",e],{variants:{size:{small:"gap-1.5",medium:"gap-2",large:"gap-2.5"},disabled:{true:"disabled",false:""}}}),r=a(["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"}}}),l=a([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),t=a(["stroke-1","r-9","transition-[stroke,fill]"],{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-edge","group-enabled:group-hover:stroke-brand-hover"]}]}),i=a(["transition-[fill]"],{variants:{variant:{solid:"r-4.5",outlined:"r-5.5"}},compoundVariants:[{checked:!0,variant:"solid",className:["fill-on-brand"]},{checked:!0,variant:"outlined",className:["fill-brand"]},{checked:!1,className:["fill-transparent"]}]}),o=a(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}}),n=a(["nd-radio-group",["flex","gap-x-4","gap-y-2"]],{variants:{direction:{horizontal:"flex-row flex-wrap",vertical:"flex-col"}}});export{i as defaultIndicatorInnerCircleClassNames,t as defaultIndicatorOuterCircleClassNames,n as groupClassNames,r as indicatorClassNames,l as indicatorInputClassNames,o as labelClassNames,s as radioClassNames};
|
package/dist/switch/Switch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as a,jsxs as j}from"react/jsx-runtime";import{useControllableState as E}from"@nild/hooks";import{cnMerge as V}from"@nild/shared";import{forwardRef as z,Children as M,isValidElement as P}from"react";import{SwitchProvider as R}from"./contexts/index.js";import{switchClassNames as q}from"./style/index.js";import n from"./Thumb.js";import
|
|
1
|
+
import{jsx as a,jsxs as j}from"react/jsx-runtime";import{useControllableState as E}from"@nild/hooks";import{cnMerge as V}from"@nild/shared";import{forwardRef as z,Children as M,isValidElement as P}from"react";import{SwitchProvider as R}from"./contexts/index.js";import{switchClassNames as q}from"./style/index.js";import n from"./Thumb.js";import t from"./Track.js";const h=z(({className:p,children:f,variant:r="solid",size:c="medium",shape:i="round",checked:u,defaultChecked:k,value:v,defaultValue:y,disabled:g,onChange:l,style:C,...w},b)=>{let o,d,m;M.forEach(f,e=>{P(e)&&(e.type===t?e.props.type==="checked"?o=e:d=e:e.type===n&&(m=e))});const N={"--nd-switch-height":{small:"calc(var(--spacing) * 4)",medium:"calc(var(--spacing) * 6)",large:"calc(var(--spacing) * 8)"}[c]},[s,x]=E(u??v,k??y??!1),S=()=>{x(e=>(l?.(!e),!e))};return a(R,{value:{variant:r,shape:i,checked:s},children:j("button",{...w,type:"button",role:"switch","aria-checked":s,disabled:g,className:V(q({variant:r,size:c,shape:i,checked:s}),p),style:{...N,...C},ref:b,onClick:S,children:[o||a(t,{type:"checked"}),d||a(t,{type:"unchecked"}),m||a(n,{})]})})});h.displayName="Switch";export{h as default};
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { SwitchProps, TrackProps } from '../interfaces';
|
|
2
|
-
export declare const switchClassNames: (props?: SwitchProps
|
|
2
|
+
export declare const switchClassNames: (props?: (SwitchProps & {
|
|
3
|
+
checked: boolean;
|
|
4
|
+
}) | undefined) => string;
|
|
3
5
|
export declare const trackClassNames: (props?: (Pick<SwitchProps, "variant" | "checked"> & Pick<TrackProps, "type">) | undefined) => string;
|
|
4
6
|
export declare const thumbClassNames: (props?: Pick<SwitchProps, "variant" | "shape" | "checked"> | undefined) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import{DISABLED_CLS as 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"],a],{variants:{variant:{solid:"",outlined:["outline-solid","outline"
|
|
1
|
+
import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const t=e(["nd-switch","group","h-[var(--nd-switch-height)]","transition-[outline-color]",["relative","inline-block","font-nd","overflow-hidden","cursor-pointer"],a],{variants:{variant:{solid:"",outlined:["outline-solid","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-edge","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-on-brand"]],{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-fill","group-enabled:group-hover:bg-fill-hover"]},{variant:"outlined",className:["bg-transparent"]}]}),r=e(["h-[var(--nd-switch-height)]",["flex","justify-center","items-center"],["absolute","aspect-square","scale-80"],["text-on-brand","transition-[left,background-color]"]],{variants:{variant:{solid:["bg-on-brand","top-0"],outlined:["bg-brand","top-0","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"}}});export{t as switchClassNames,r as thumbClassNames,n as trackClassNames};
|
package/dist/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@theme static{ --nd-color-
|
|
1
|
+
@theme static{ --nd-brand-h: 158; --nd-brand-c: .14; --nd-neutral-c: .003; --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(94% var(--nd-brand-c) var(--nd-brand-h)), oklch(21% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(90% var(--nd-brand-c) var(--nd-brand-h)), oklch(26% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(85% var(--nd-brand-c) var(--nd-brand-h)), oklch(32% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(76% var(--nd-brand-c) var(--nd-brand-h)), oklch(42% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(67% var(--nd-brand-c) var(--nd-brand-h)), oklch(50% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(58% var(--nd-brand-c) var(--nd-brand-h)), oklch(58% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-60: light-dark( oklch(50% var(--nd-brand-c) var(--nd-brand-h)), oklch(67% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-70: light-dark( oklch(42% var(--nd-brand-c) var(--nd-brand-h)), oklch(76% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(35% var(--nd-brand-c) var(--nd-brand-h)), oklch(85% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(25% var(--nd-brand-c) var(--nd-brand-h)), oklch(93% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(15% var(--nd-brand-c) var(--nd-brand-h)), oklch(98% 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% 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(94% 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(90% 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(85% 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(76% 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(67% 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(58% 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(42% 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(35% 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(25% 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)) ); }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: var(--nd-color-brand-70); --color-brand-active: var(--nd-color-brand-80); --color-brand-subtle: var(--nd-color-brand-10); --color-brand-subtle-hover: var(--nd-color-brand-15); --color-brand-subtle-active: var(--nd-color-brand-20); --color-surface: var(--nd-color-neutral-5); --color-surface-hover: var(--nd-color-neutral-10); --color-surface-active: var(--nd-color-neutral-15); --color-edge: var(--nd-color-neutral-30); --color-split: var(--nd-color-neutral-20); --color-on-brand: var(--nd-color-neutral-0); --background-color-page: var(--nd-color-neutral-0); --background-color-container: var(--nd-color-neutral-5); --background-color-fill: var(--nd-color-neutral-20); --background-color-fill-hover: var(--nd-color-neutral-30); --text-color-body: var(--nd-color-neutral-100); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --text-color-link: var(--color-brand); --text-color-link-hover: var(--color-brand-hover); --text-color-link-active: var(--color-brand-active); --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-sm: .125rem; --radius-md: .25rem; --radius-lg: .375rem; --font-nd: -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"; --default-transition-duration: .2s; }@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility r-*{r: --value(number);}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import r from"../popup/index.js";const o=e=>t(r,{size:"small",placement:"top",...e,borderless:!0,action:"hover"});o.displayName="Tooltip";export{o as default};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @category Components
|
|
3
|
+
*/
|
|
4
|
+
declare const Tooltip: import('react').FC<import('./interfaces').TooltipProps> & {
|
|
5
|
+
Trigger: import('react').FC<import('../popup').TriggerProps>;
|
|
6
|
+
Portal: import('react').ForwardRefExoticComponent<import('../popup').PortalProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
7
|
+
};
|
|
8
|
+
export type * from './interfaces';
|
|
9
|
+
export default Tooltip;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import r from"../popup/index.js";import o from"./Tooltip.js";const t=Object.assign(o,{Trigger:r.Trigger,Portal:r.Portal});export{t as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const a=e(["nd-link",["font-nd","text-link","text-[length:inherit]","cursor-pointer","enabled:hover:text-link-hover","enabled:active:text-link-active"],t],{variants:{disabled:{true:"disabled",false:""},underlined:{true:"underline",false:"no-underline"}}}),r=e(["nd-paragraph",["font-nd","text-
|
|
1
|
+
import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const a=e(["nd-link",["font-nd","text-link","text-[length:inherit]","cursor-pointer","enabled:hover:text-link-hover","enabled:active:text-link-active"],t],{variants:{disabled:{true:"disabled",false:""},underlined:{true:"underline",false:"no-underline"}}}),r=e(["nd-paragraph",["font-nd","text-body","text-[length:inherit]"],["mt-0","mb-[1em]"]]),s=e(["nd-text",["font-nd","text-[length:inherit]"],t],{variants:{secondary:{true:"text-muted",false:"text-body"},disabled:{true:"disabled",false:""}}}),d=e("",{variants:{tag:{strong:"",del:"",u:["underline"],i:"",mark:["bg-brand","text-on-brand"],code:[["ps-1.5","pe-1.5"],["bg-brand-subtle","text-sm","rounded-sm"],["border","border-solid","border-brand-subtle"]],kbd:[["ps-1.5","pe-1.5"],["text-sm","rounded-sm"],["border","border-b-2","border-solid","border-brand-subtle"]]}}}),n=e(["nd-title",["font-nd","font-semibold","text-body"],["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=e(["nd-typography",["font-nd","text-md"]]);export{a as linkClassNames,r as paragraphClassNames,s as textClassNames,d as textTagClassNames,n as titleClassNames,l as typographyClassNames};
|
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.33",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./dist/index.js",
|
|
7
7
|
"exports": {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"react": "^18.2.0",
|
|
33
33
|
"react-dom": "^18.2.0",
|
|
34
34
|
"@nild/shared": "0.0.14",
|
|
35
|
-
"@nild/icons": "0.0.
|
|
35
|
+
"@nild/icons": "0.0.16",
|
|
36
36
|
"@nild/hooks": "0.0.16"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{isNil as e,isString as t,isNumber as o,isArray as r}from"@nild/shared";const i=s=>e(s)?!1:t(s)||o(s)?!0:r(s)?s.every(a=>i(a)):!1;export{i as default};
|