@nild/components 0.0.18 → 0.0.20

package/dist/portal/Arrow.d.ts

@@ -1,9 +1,3 @@
-import { CSSProperties, HTMLAttributes } from 'react';
-import { ArrowSize, ArrowOrientation } from './style';
-export interface ArrowProps extends HTMLAttributes<HTMLSpanElement> {
-    style?: CSSProperties;
-    orientation?: ArrowOrientation;
-    size?: ArrowSize;
-}
+import { ArrowProps } from './interfaces';
 declare const Arrow: import('react').ForwardRefExoticComponent<ArrowProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Arrow;

package/dist/portal/Arrow.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{cnMerge as d}from"@nild/shared";import{forwardRef as R}from"react";import{ARROW_ORIENTATION_STYLE_MAP as _,ARROW_ORIENTATION_CLS_MAP as f,ARROW_SIZE_CLS_MAP as A}from"./style/index.js";const a=R(({className:e,style:o,orientation:r="up",size:s="medium",...i},m)=>t("div",{...i,style:{..._[r],...o},className:d("nd-arrow","bg-container border-solid border-edge",f[r],A[s],e),ref:m}));a.displayName="Arrow";export{a as default};
+import{jsx as m}from"react/jsx-runtime";import{cnMerge as t}from"@nild/shared";import{forwardRef as f}from"react";import{arrowClassNames as p}from"./style/index.js";const r=f(({className:a,orientation:s="up",size:o="medium",...e},i)=>m("div",{...e,className:t(p({orientation:s,size:o}),a),ref:i}));r.displayName="Arrow";export{r as default};

package/dist/portal/Portal.d.ts

@@ -1,14 +1,4 @@
-import { HTMLAttributes, Ref } from 'react';
-import { ArrowProps } from './Arrow';
-import { PaddingSize } from './style';
-export interface ArrowOptions extends ArrowProps {
-    ref: Ref<HTMLDivElement>;
-}
-export interface PortalProps extends HTMLAttributes<HTMLDivElement> {
-    container?: Element | DocumentFragment;
-    paddingSize?: PaddingSize;
-    arrow?: ArrowOptions | false;
-}
+import { PortalProps } from './interfaces';
 /**
  * @category Components
  */

package/dist/portal/Portal.js

@@ -1 +1 @@
-import{jsxs as p,jsx as u}from"react/jsx-runtime";import{cnMerge as r,cnJoin as f}from"@nild/shared";import{forwardRef as N,Children as g,isValidElement as b,cloneElement as P}from"react";import{createPortal as h}from"react-dom";import v from"./Arrow.js";import{PADDING_SIZE_CLS_MAP as x}from"./style/index.js";const s=N(({className:l,children:t,container:n=document.body,paddingSize:i="medium",arrow:e=!1,...m},d)=>{var o;const a=g.toArray(t).find(c=>b(c));return a?h(p("div",{...m,className:r("nd-portal","absolute top-0 left-0",l),ref:d,children:[P(a,{...a.props,className:r("bg-container rounded-md outline-solid outline-1 outline-edge shadow-lg",x[i],(o=a?.props)==null?void 0:o.className)}),e!==!1&&u(v,{...e,className:f("absolute",e.className)})]}),n):null});s.displayName="Portal";export{s as default};
+import{jsxs as p,jsx as f}from"react/jsx-runtime";import{cnMerge as e,cnJoin as N}from"@nild/shared";import{forwardRef as u,Children as C,isValidElement as v,cloneElement as x}from"react";import{createPortal as y}from"react-dom";import g from"./Arrow.js";import{portalContentClassNames as h,portalArrowClassNames as j,portalClassNames as w}from"./style/index.js";const o=u(({className:l,children:m,container:t=document.body,paddingSize:i="medium",arrow:s=!1,...n},d)=>{var r;const a=C.toArray(m).find(c=>v(c));return a?y(p("div",{...n,className:e(w(),l),ref:d,children:[x(a,{...a.props,className:e(h({paddingSize:i}),(r=a?.props)==null?void 0:r.className)}),s!==!1&&f(g,{...s,className:N(j(),s.className)})]}),t):null});o.displayName="Portal";export{o as default};

package/dist/portal/index.d.ts

@@ -1,6 +1,5 @@
-import { default as Arrow, ArrowProps } from './Arrow';
-import { default as Portal, PortalProps, ArrowOptions } from './Portal';
-import { PaddingSize } from './style';
-export type { ArrowProps, PortalProps, PaddingSize, ArrowOptions };
+import { default as Arrow } from './Arrow';
+import { default as Portal } from './Portal';
+export type * from './interfaces';
 export { Arrow };
 export default Portal;

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

@@ -1,8 +1,5 @@
-import { CSSProperties } from 'react';
-export type ArrowSize = 'small' | 'medium' | 'large';
-export declare const ARROW_SIZE_CLS_MAP: Record<ArrowSize, string>;
-export type ArrowOrientation = 'up' | 'down' | 'left' | 'right';
-export declare const ARROW_ORIENTATION_STYLE_MAP: Record<ArrowOrientation, Pick<CSSProperties, 'clipPath' | 'transform'>>;
-export declare const ARROW_ORIENTATION_CLS_MAP: Record<ArrowOrientation, string>;
-export type PaddingSize = 'small' | 'medium' | 'large';
-export declare const PADDING_SIZE_CLS_MAP: Record<PaddingSize, string>;
+import { ArrowProps, PortalProps } from '../interfaces';
+export declare const arrowClassNames: (props?: ArrowProps | undefined) => string;
+export declare const portalClassNames: (props?: PortalProps | undefined) => string;
+export declare const portalContentClassNames: (props?: PortalProps | undefined) => string;
+export declare const portalArrowClassNames: (props?: ArrowProps | undefined) => string;

package/dist/portal/style/index.js

@@ -1 +1 @@
-const r={small:"w-1.5 h-1.5",medium:"w-3 h-3",large:"w-4.5 h-4.5"},e={up:{transform:"translateY(-50%) rotate(45deg)"},down:{transform:"translateY(50%) rotate(45deg)"},left:{transform:"translateX(-50%) rotate(45deg)"},right:{transform:"translateX(50%) rotate(45deg)"}},t={up:"rounded-tl-sm border-l-1 border-t-1",down:"rounded-br-sm border-r-1 border-b-1",left:"rounded-bl-sm border-l-1 border-b-1",right:"rounded-tr-sm border-r-1 border-t-1"},o={small:"px-2 py-1",medium:"px-4 py-3",large:"px-6 py-5"};export{t as ARROW_ORIENTATION_CLS_MAP,e as ARROW_ORIENTATION_STYLE_MAP,r as ARROW_SIZE_CLS_MAP,o as PADDING_SIZE_CLS_MAP};
+import{cva as r}from"@nild/shared";const e=r(["nd-arrow","bg-container",["border-solid","border-edge"]],{variants:{orientation:{up:["transform-[translateY(-50%)_rotate(45deg)]",["rounded-tl-sm","border-l-1","border-t-1"]],down:["transform-[translateY(50%)_rotate(45deg)]",["rounded-br-sm","border-r-1","border-b-1"]],left:["transform-[translateX(-50%)_rotate(45deg)]",["rounded-bl-sm","border-l-1","border-b-1"]],right:["transform-[translateX(50%)_rotate(45deg)]",["rounded-tr-sm","border-r-1","border-t-1"]]},size:{small:["w-1.5","h-1.5"],medium:["w-3","h-3"],large:["w-4.5","h-4.5"]}}}),a=r(["nd-portal",["absolute","top-0","left-0"]]),o=r(["bg-container","rounded-md",["outline-solid","outline-1","outline-edge"],"shadow-lg"],{variants:{paddingSize:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]}}}),t=r(["absolute"]);export{e as arrowClassNames,t as portalArrowClassNames,a as portalClassNames,o as portalContentClassNames};

package/dist/switch/style/index.js

@@ -1 +1 @@
-import{cva as e}from"@nild/shared";import{DISABLED_CLS as r}from"../../_shared/style/index.js";const a=e(["nd-switch","group","h-[var(--nd-switch-height)]",["relative","inline-block","font-nd","overflow-hidden","cursor-pointer"],r],{variants:{variant:{solid:"",outlined:["border-solid","border","border-primary"]},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"}}}),t=e(["h-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-contrast"],["ps-[calc(var(--nd-switch-height)/3)]","pe-[calc(var(--nd-switch-height)*1.1)]"]],{variants:{checked:{true:["ms-0","me-0"],false:["-ms-[100%]","me-[100%]"]}},compoundVariants:[{variant:"solid",checked:!0,className:["bg-primary","group-enabled:group-hover:bg-primary-hover"]},{variant:"solid",checked:!1,className:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},{variant:"outlined",className:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),s=e(["h-[var(--nd-switch-height)]","-mt-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-contrast"],["ps-[calc(var(--nd-switch-height)*1.1)]","pe-[calc(var(--nd-switch-height)/3)]"]],{variants:{checked:{true:["ms-[100%]","-me-[100%]"],false:["ms-0","me-0"]}},compoundVariants:[{variant:"solid",checked:!0,className:["bg-primary","group-enabled:group-hover:bg-primary-hover"]},{variant:"solid",checked:!1,className:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},{variant:"outlined",className:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),i=e(["h-[var(--nd-switch-height)]",["flex","justify-center","items-center"],["absolute","aspect-square","scale-80"],["text-contrast","transition-[left,background-color]"]],{variants:{variant:{solid:["bg-contrast","top-0"],outlined:["bg-primary","top-[50%]","-translate-y-[50%]","group-enabled:group-hover:bg-primary-hover"]},shape:{round:"rounded-full",square:"rounded-md"},checked:{true:"left-[calc(100%-var(--nd-switch-height))]",false:"left-0"}}});export{t as checkedClassNames,a as switchClassNames,i as thumbClassNames,s as uncheckedClassNames};
+import{cva as e}from"@nild/shared";import{DISABLED_CLS as r}from"../../_shared/style/index.js";const a=e(["nd-switch","group","h-[var(--nd-switch-height)]",["relative","inline-block","font-nd","overflow-hidden","cursor-pointer"],r],{variants:{variant:{solid:"",outlined:["outline-solid","outline","outline-primary"]},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"}}}),t=e(["h-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-contrast"],["ps-[calc(var(--nd-switch-height)/3)]","pe-[calc(var(--nd-switch-height)*1.1)]"]],{variants:{checked:{true:["ms-0","me-0"],false:["-ms-[100%]","me-[100%]"]}},compoundVariants:[{variant:"solid",checked:!0,className:["bg-primary","group-enabled:group-hover:bg-primary-hover"]},{variant:"solid",checked:!1,className:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},{variant:"outlined",className:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),i=e(["h-[var(--nd-switch-height)]","-mt-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-contrast"],["ps-[calc(var(--nd-switch-height)*1.1)]","pe-[calc(var(--nd-switch-height)/3)]"]],{variants:{checked:{true:["ms-[100%]","-me-[100%]"],false:["ms-0","me-0"]}},compoundVariants:[{variant:"solid",checked:!0,className:["bg-primary","group-enabled:group-hover:bg-primary-hover"]},{variant:"solid",checked:!1,className:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},{variant:"outlined",className:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),s=e(["h-[var(--nd-switch-height)]",["flex","justify-center","items-center"],["absolute","aspect-square","scale-80"],["text-contrast","transition-[left,background-color]"]],{variants:{variant:{solid:["bg-contrast","top-0"],outlined:["bg-primary","top-0","group-enabled:group-hover:bg-primary-hover"]},shape:{round:"rounded-full",square:"rounded-md"},checked:{true:"left-[calc(100%-var(--nd-switch-height))]",false:"left-0"}}});export{t as checkedClassNames,a as switchClassNames,s as thumbClassNames,i as uncheckedClassNames};

package/dist/transition/Transition.d.ts

@@ -1,9 +1,5 @@
-import { FC, ReactNode } from 'react';
-export interface TransitionProps {
-    className?: string;
-    children?: ReactNode;
-    visible?: boolean;
-}
+import { FC } from 'react';
+import { TransitionProps } from './interfaces';
 /**
  * @category Components
  */

package/dist/transition/Transition.js

@@ -1 +1 @@
-import{useEffectCallback as o}from"@nild/hooks";import{cnMerge as E}from"@nild/shared";import{Children as T,isValidElement as k,useState as h,useRef as p,useEffect as f,cloneElement as N}from"react";const x=({className:b,children:v,visible:l=!0})=>{const c=T.toArray(v).find(a=>k(a)),u=c?l?"entered":"exited":"unmounted",[t,n]=h(u),e=p(),r=p(c);r.current=t==="unmounted"?c:c??r.current;const i=o(a=>{s();let d=!0;const m=()=>{d&&(d=!1,e.current=void 0,a?.())};m.cancel=()=>{d=!1},e.current=m}),g=o(()=>{e.current&&(e.current(),e.current=void 0)}),s=o(()=>{e.current&&(e.current.cancel(),e.current=void 0)}),y=o(()=>{u==="unmounted"&&t==="exited"&&n("unmounted")});return f(()=>{g()},[t]),f(()=>{switch(u){case"entered":t!=="entering"&&t!=="entered"&&(t==="unmounted"?n("exited"):(s(),n("entering"),i(()=>{i(()=>{n("entered")}),e.current&&setTimeout(e.current,0)})));break;case"exited":(t==="entering"||t==="entered")&&(s(),n("exiting"),i(()=>{i(()=>{n("exited")}),e.current&&setTimeout(e.current,0)}));break;case"unmounted":default:t!=="exited"&&t!=="unmounted"&&(s(),n("exiting"),i(()=>{i(()=>{n("exited")}),e.current&&setTimeout(e.current,0)}));break}},[l,u,t]),r.current?N(r.current,{...r.current.props,className:E(r.current.props.className,"transition-[opacity,visibility]",t==="entered"?"opacity-100 visible":"opacity-0 invisible",b),onTransitionEnd:y}):null};x.displayName="Transition";export{x as default};
+import{useEffectCallback as o}from"@nild/hooks";import{cnMerge as R}from"@nild/shared";import{Children as X,isValidElement as M,useState as O,useRef as m,useEffect as D,cloneElement as b}from"react";import{Status as r}from"./interfaces/index.js";import{transitionClassNames as G}from"./style/index.js";const I=({className:U,children:f,visible:i=!0})=>{const a=X.toArray(f).find(N=>M(N)),c=a?i?r.ENTERED:r.EXITED:r.UNMOUNTED,[t,E]=O(c),e=m(),n=m(a);n.current=t===r.UNMOUNTED?a:a??n.current;const s=o(N=>{u();let T=!0;const l=()=>{T&&(T=!1,e.current=void 0,N?.())};l.cancel=()=>{T=!1},e.current=l}),d=o(()=>{e.current&&(e.current(),e.current=void 0)}),u=o(()=>{e.current&&(e.current.cancel(),e.current=void 0)}),p=o(()=>{c===r.UNMOUNTED&&t===r.EXITED&&E(r.UNMOUNTED)});return D(()=>{d()},[t]),D(()=>{switch(c){case r.ENTERED:t!==r.ENTERING&&t!==r.ENTERED&&(t===r.UNMOUNTED?E(r.EXITED):(u(),E(r.ENTERING),s(()=>{s(()=>{E(r.ENTERED)}),e.current&&setTimeout(e.current,0)})));break;case r.EXITED:(t===r.ENTERING||t===r.ENTERED)&&(u(),E(r.EXITING),s(()=>{s(()=>{E(r.EXITED)}),e.current&&setTimeout(e.current,0)}));break;case r.UNMOUNTED:default:t!==r.EXITED&&t!==r.UNMOUNTED&&(u(),E(r.EXITING),s(()=>{s(()=>{E(r.EXITED)}),e.current&&setTimeout(e.current,0)}));break}},[i,c,t]),n.current?b(n.current,{...n.current.props,className:R(n.current.props.className,G({status:t}),U),onTransitionEnd:p}):null};I.displayName="Transition";export{I as default};

package/dist/transition/index.d.ts

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

package/dist/transition/interfaces/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare enum Status {
+    UNMOUNTED = "unmounted",
+    ENTERING = "entering",
+    ENTERED = "entered",
+    EXITING = "exiting",
+    EXITED = "exited"
+}
+export interface TransitionProps {
+    className?: string;
+    children?: ReactNode;
+    visible?: boolean;
+}

package/dist/transition/interfaces/index.js

@@ -0,0 +1 @@
+var t=(E=>(E.UNMOUNTED="unmounted",E.ENTERING="entering",E.ENTERED="entered",E.EXITING="exiting",E.EXITED="exited",E))(t||{});export{t as Status};

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

@@ -0,0 +1,4 @@
+import { Status } from '../interfaces';
+export declare const transitionClassNames: (props?: {
+    status: Status;
+} | undefined) => string;

package/dist/transition/style/index.js

@@ -0,0 +1 @@
+import{cva as a}from"@nild/shared";import{Status as s}from"../interfaces/index.js";const i=a(["transition-[opacity,visibility]"],{compoundVariants:[{status:s.ENTERED,className:["opacity-100","visible"]},{status:[s.UNMOUNTED,s.ENTERING,s.EXITING,s.EXITED],className:["opacity-0","invisible"]}]});export{i as transitionClassNames};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.18",
+  "version": "0.0.20",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -32,8 +32,8 @@
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "@nild/shared": "0.0.9",
-    "@nild/hooks": "0.0.11",
-    "@nild/icons": "0.0.10"
+    "@nild/icons": "0.0.10",
+    "@nild/hooks": "0.0.11"
   },
   "scripts": {
     "build": "vite build --mode PROD",