@nild/components 0.0.42 → 0.0.43

package/dist/_shared/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './use-roving-index-navigation';

package/dist/_shared/hooks/use-roving-index-navigation/index.d.ts

@@ -0,0 +1,17 @@
+import { KeyboardEvent } from 'react';
+type RovingIndexOrientation = 'horizontal' | 'vertical';
+export interface RovingIndexNavigationOptions<TElement extends HTMLElement = HTMLElement> {
+    orientation: RovingIndexOrientation;
+    activeIndex: number;
+    selectedIndex: number;
+    enabledIndices: number[];
+    selectOnMove?: boolean;
+    selectOnConfirm?: boolean;
+    onActiveChange: (index: number) => void;
+    onSelect: (index: number) => void;
+    onKeyDown?: (evt: KeyboardEvent<TElement>) => void;
+}
+export declare const useRovingIndexNavigation: <TElement extends HTMLElement = HTMLElement>({ orientation, activeIndex, selectedIndex, enabledIndices, selectOnMove, selectOnConfirm, onActiveChange, onSelect, onKeyDown, }: RovingIndexNavigationOptions<TElement>) => {
+    handleKeyDown: (evt: KeyboardEvent<TElement>) => void;
+};
+export {};

package/dist/_shared/hooks/use-roving-index-navigation/index.js

@@ -0,0 +1 @@
+import{useEffectCallback as d}from"@nild/hooks";const v=(s,e,r)=>{const t=e.length-1;if(t<0)return-1;if(r==="start")return e[0];if(r==="end")return e[t];const i=e.indexOf(s);if(i===-1)return r===1?e[0]:e[t];const l=(i+r+e.length)%e.length;return e[l]},k=({orientation:s,activeIndex:e,selectedIndex:r,enabledIndices:t,selectOnMove:i=!1,selectOnConfirm:l=!0,onActiveChange:b,onSelect:f,onKeyDown:u})=>{const a=d(n=>{const c=t.includes(e)?e:r,o=v(c,t,n);o<0||(b(o),i&&f(o))});return{handleKeyDown:d(n=>{if(u?.(n),n.defaultPrevented||t.length===0)return;const c=s==="horizontal",o=s==="vertical";switch(n.key){case"ArrowRight":if(!c)break;n.preventDefault(),a(1);break;case"ArrowLeft":if(!c)break;n.preventDefault(),a(-1);break;case"ArrowDown":if(!o)break;n.preventDefault(),a(1);break;case"ArrowUp":if(!o)break;n.preventDefault(),a(-1);break;case"Home":n.preventDefault(),a("start");break;case"End":n.preventDefault(),a("end");break;case"Enter":case" ":if(!l)break;n.preventDefault(),t.includes(e)&&f(e);break}})}};export{k as useRovingIndexNavigation};

package/dist/index.d.ts

@@ -7,10 +7,12 @@ import { default as Input } from './input';
 import { default as Modal } from './modal';
 import { default as Popover } from './popover';
 import { default as Radio } from './radio';
+import { default as Segment } from './segment';
 import { default as Select } from './select';
 import { default as Switch } from './switch';
+import { default as Tabs } from './tabs';
 import { default as Tooltip } from './tooltip';
 import { default as Transition, TransitionStatus } from './transition';
 import { default as Typography } from './typography';
 import { default as Watermark } from './watermark';
-export { Button, Checkbox, Divider, Field, Form, Input, Modal, Popover, Radio, Select, Switch, Tooltip, Transition, TransitionStatus, Typography, Watermark, };
+export { Button, Checkbox, Divider, Field, Form, Input, Modal, Popover, Radio, Segment, Select, Switch, Tabs, Tooltip, Transition, TransitionStatus, Typography, Watermark, };

package/dist/index.js

@@ -1 +1 @@
-import{default as a}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as t}from"./divider/Divider.js";import{default as r}from"./field/index.js";import{default as s}from"./form/index.js";import{default as m}from"./input/index.js";import{default as f}from"./modal/index.js";import{default as i}from"./popover/index.js";import{default as e}from"./radio/index.js";import{default as p}from"./select/index.js";import{default as d}from"./switch/index.js";import{default as u}from"./tooltip/index.js";import{default as l}from"./transition/Transition.js";import{TransitionStatus as n}from"./transition/interfaces/index.js";import{default as T}from"./typography/index.js";import{default as h}from"./watermark/Watermark.js";/* empty css            */export{a as Button,o as Checkbox,t as Divider,r as Field,s as Form,m as Input,f as Modal,i as Popover,e as Radio,p as Select,d as Switch,u as Tooltip,l as Transition,n as TransitionStatus,T as Typography,h as Watermark};
+import{default as a}from"./button/index.js";import{default as t}from"./checkbox/index.js";import{default as o}from"./divider/Divider.js";import{default as r}from"./field/index.js";import{default as s}from"./form/index.js";import{default as m}from"./input/index.js";import{default as f}from"./modal/index.js";import{default as i}from"./popover/index.js";import{default as e}from"./radio/index.js";import{default as p}from"./segment/index.js";import{default as l}from"./select/index.js";import{default as u}from"./switch/index.js";import{default as d}from"./tabs/index.js";import{default as n}from"./tooltip/index.js";import{default as T}from"./transition/Transition.js";import{TransitionStatus as S}from"./transition/interfaces/index.js";import{default as c}from"./typography/index.js";import{default as b}from"./watermark/Watermark.js";/* empty css            */export{a as Button,t as Checkbox,o as Divider,r as Field,s as Form,m as Input,f as Modal,i as Popover,e as Radio,p as Segment,l as Select,u as Switch,d as Tabs,n as Tooltip,T as Transition,S as TransitionStatus,c as Typography,b as Watermark};

package/dist/segment/Item.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { ItemProps } from './interfaces';
+export declare const isItemElement: <T>(child: ReactNode) => child is ReactElement<ItemProps<T>>;
+declare const Item: import('react').ForwardRefExoticComponent<ItemProps<unknown> & import('react').RefAttributes<HTMLButtonElement>>;
+export default Item;

package/dist/segment/Item.js

@@ -0,0 +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:d,children:l,value:k,disabled:t=!1,...n}=e;return c("button",{...n,"aria-checked":i,"aria-disabled":t||void 0,className:f(g.item({size:r,orientation:s,selected:i,disabled:t,block:m}),d),disabled:t,ref:o,role:"radio",type:"button",children:l})});a.displayName="Segment.Item";export{a as default,h as isItemElement};

package/dist/segment/Segment.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement, RefAttributes } from 'react';
+import { SegmentProps } from './interfaces';
+declare const Segment: <T>(props: SegmentProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export default Segment;

package/dist/segment/Segment.js

@@ -0,0 +1 @@
+import{jsxs as Y,jsx as j}from"react/jsx-runtime";import{useControllableState as Z,useEffectCallback as f,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 re}from"./Item.js";import $ from"./style/index.js";const ie=ne({item:{isMatched:re,multiple:!0}}),ae=y=>{const{slots:u}=ie(y),g=u.item.el,a=[],l=[];return g.forEach((r,c)=>{var d;a.push({key:((d=r.key)==null?void 0:d.toString())??`${u.item.seq[c]}`,element:r,props:r.props}),r.props.disabled||l.push(c)}),{items:a,enabledIndices:l,firstEnabledIndex:l[0]??-1}},q=_((y,u)=>{const{className:g,children:a,value:l,defaultValue:r,onChange:c,size:d="medium",orientation:m="horizontal",disabled:h=!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=r??(b>=0?s[b].props.value:void 0),[S,G]=Z(l,W),N=s.findIndex(e=>Object.is(e.props.value,S)),i=N>=0?N:b,w=z.includes(i)?i:b,[O,E]=M(w),H=f(e=>{Object.is(S,e)||(G(e),c?.(e))}),R=f(e=>{const t=s[e];!t||h||t.props.disabled||H(t.props.value)}),P=f(e=>{const t=v.current[e];!t||typeof window>"u"||window.requestAnimationFrame(()=>{t.isConnected&&t.focus()})}),T=f(e=>{E(e),P(e)}),{handleKeyDown:V}=oe({orientation:m,activeIndex:O,selectedIndex:w,enabledIndices:h?[]:z,selectOnMove:!0,selectOnConfirm:!0,onActiveChange:T,onSelect:R,onKeyDown:k.onKeyDown}),p=f(()=>{const e=I.current,t=v.current[i];if(!e||!t||i<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(()=>{p();const e=I.current;if(!e||typeof window>"u")return;const t=window.ResizeObserver;if(t){const n=new t(p);return n.observe(e),v.current.slice(0,s.length).forEach(o=>{o&&n.observe(o)}),()=>{n.disconnect()}}return window.addEventListener("resize",p),()=>{window.removeEventListener("resize",p)}},[x,i,s,m,d,p]);const B=(e,t)=>{const{element:n}=e,o=h||!!e.props.disabled,J=t===i,U=t===O;return j(se,{value:{selected:J,size:d,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":h||void 0,"aria-orientation":m,className:Q($.segment({orientation:m,block:x}),g),onKeyDown:V,ref:K(u,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};

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

@@ -0,0 +1,7 @@
+import { SegmentProps } from '../interfaces';
+declare const SegmentProvider: import('react').Provider<Pick<SegmentProps<unknown>, "size" | "block" | "orientation"> & {
+    selected?: boolean;
+}>, useSegmentContext: () => Pick<SegmentProps<unknown>, "size" | "block" | "orientation"> & {
+    selected?: boolean;
+};
+export { SegmentProvider, useSegmentContext };

package/dist/segment/contexts/index.js

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

package/dist/segment/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @category Components
+ */
+declare const Segment: (<T>(props: import('./interfaces').SegmentProps<T> & import('react').RefAttributes<HTMLDivElement>) => import('react').ReactElement | null) & {
+    Item: import('react').ForwardRefExoticComponent<import('./interfaces').ItemProps<unknown> & import('react').RefAttributes<HTMLButtonElement>>;
+};
+export type * from './interfaces';
+export default Segment;

package/dist/segment/index.js

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

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

@@ -0,0 +1,15 @@
+import { SegmentOrientation, SegmentProps, SegmentSize } from '../interfaces';
+declare const _default: {
+    segment: (props?: (Pick<SegmentProps<unknown>, "block"> & {
+        orientation?: SegmentOrientation;
+    }) | undefined) => string;
+    indicator: (props?: object | undefined) => string;
+    item: (props?: {
+        orientation?: SegmentOrientation;
+        size?: SegmentSize;
+        selected?: boolean;
+        disabled?: boolean;
+        block?: boolean;
+    } | undefined) => string;
+};
+export default _default;

package/dist/segment/style/index.js

@@ -0,0 +1 @@
+import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const n=e(["nd-segment","relative","isolate","font-nd","rounded-md","bg-muted","p-0.5","text-main"],{variants:{orientation:{horizontal:["flex-row","items-center"],vertical:["flex-col","items-stretch"]},block:{true:["flex","w-full"],false:"inline-flex"}}}),o=e(["nd-segment-indicator","pointer-events-none","absolute","top-0","left-0","z-0","rounded-sm","bg-page","shadow-sm","transition-[transform,width,height,opacity]","ease-out","motion-reduce:transition-none"]),a=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],{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:["disabled","cursor-not-allowed"],false:"cursor-pointer"},block:{true:"",false:""}},compoundVariants:[{selected:!1,disabled:!1,className:["text-main","hover:bg-muted-hover","hover:text-brand-hover"]},{selected:!1,disabled:!0,className:"text-subtle"},{block:!0,orientation:"horizontal",className:"flex-1"}]}),i={segment:n,indicator:o,item:a};export{i as default};

package/dist/tabs/List.d.ts

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

package/dist/tabs/List.js

@@ -0,0 +1 @@
+import{jsx as m}from"react/jsx-runtime";import{cnMerge as l}from"@nild/shared";import{forwardRef as f,isValidElement as p}from"react";import{useTabsContext as c}from"./contexts/index.js";import d from"./style/index.js";const b=a=>p(a)&&a.type===r,r=f((a,i)=>{const{variant:t="line",orientation:e="horizontal"}=c(),{className:s,children:o,...n}=a;return m("div",{...n,className:l(d.list({variant:t,orientation:e}),s),ref:i,children:o})});r.displayName="Tabs.List";export{r as default,b as isListElement};

package/dist/tabs/Panel.d.ts

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

package/dist/tabs/Panel.js

@@ -0,0 +1 @@
+import{jsx as c}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as b,isValidElement as u}from"react";import{useTabsContext as h}from"./contexts/index.js";import v from"./style/index.js";const x=e=>u(e)&&e.type===a,a=b((e,t)=>{const{variant:r="line",orientation:n="horizontal",selectedValue:i}=h(),{className:o,children:s,hidden:l,value:m,...d}=e,p=Object.is(m,i);return c("div",{...d,className:f(v.panel({variant:r,orientation:n}),o),hidden:l||!p,ref:t,role:"tabpanel",tabIndex:0,children:s})});a.displayName="Tabs.Panel";export{a as default,x as isPanelElement};

package/dist/tabs/Tab.d.ts

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

package/dist/tabs/Tab.js

@@ -0,0 +1 @@
+import{jsxs as N,jsx as t}from"react/jsx-runtime";import{Icon as T}from"@nild/icons";import y from"@nild/icons/CloseSmall";import{cnMerge as g}from"@nild/shared";import{forwardRef as z,isValidElement as I}from"react";import{useTabsContext as E}from"./contexts/index.js";import i from"./style/index.js";const j="Close tab",k=a=>I(a)&&a.type===l,l=z((a,c)=>{const{variant:b="line",size:r="medium",orientation:p="horizontal",selectedTabId:f,onClose:n}=E(),{className:u,children:h,value:v,disabled:o=!1,closable:d=!1,id:s,...x}=a,m=!!s&&s===f,C=e=>{e.stopPropagation(),n?.(v,e)};return N("div",{...x,"aria-disabled":o||void 0,"aria-selected":m,className:g(i.tab({variant:b,size:r,orientation:p,selected:m,disabled:o,closable:d}),u),id:s,ref:c,role:"tab",children:[t("span",{className:i.tabContent(),children:h}),d&&t("button",{"aria-label":j,className:i.close({size:r}),disabled:o,onClick:C,onKeyDown:e=>e.stopPropagation(),tabIndex:-1,type:"button",children:t(T,{component:y})})]})});l.displayName="Tabs.Tab";export{l as default,k as isTabElement};

package/dist/tabs/Tabs.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement, RefAttributes } from 'react';
+import { TabsProps } from './interfaces';
+declare const Tabs: <T>(props: TabsProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export default Tabs;

package/dist/tabs/Tabs.js

@@ -0,0 +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 re,useRef as ie,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 fe}from"./Panel.js";import ve from"./style/index.js";import{isTabElement as be}from"./Tab.js";const he=z({list:{isMatched:me},panel:{isMatched:fe,multiple:!0}}),ye=z({tab:{isMatched:be,multiple:!0}}),Ie=(w,h)=>{const{slots:b}=he(w),m=b.list.el,{slots:y}=ye(m?.props.children),C=y.tab.el,I=b.panel.el,d=[],g=[],n=[],t=new Map;C.forEach((a,s)=>{var p;const c=a.props.value,r=t.get(c);r?r.push(s):t.set(c,[s]),d.push({key:((p=a.key)==null?void 0:p.toString())??`${y.tab.seq[s]}`,el:a,id:a.props.id??`${h}-tab-${s}`,props:a.props}),a.props.disabled||n.push(s)});const f=new Set;return I.forEach((a,s)=>{var p,c,r;const u=a.props.value,l=(p=t.get(u))==null?void 0:p[0],i=a.props.id??`${h}-panel-${s}`;g.push({key:((c=a.key)==null?void 0:c.toString())??`${b.panel.seq[s]}`,el:a,id:i,tabId:l===void 0?void 0:d[l].id,props:a.props}),f.has(u)||(f.add(u),(r=t.get(u))==null||r.forEach(M=>{d[M].panelId=i}))}),{listEl:m,tabs:d,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:b,children:m,value:y,defaultValue:C,onChange:I,variant:d="line",size:g="medium",orientation:n="horizontal",activation:t="auto",disabled:f=!1,closable:a=!1,onClose:s,destroyOnInactive:p=!1,...c}=w,r=re(),u=ie([]),{listEl:l,tabs:i,panels:M,enabledIndices:j,firstEnabledIndex:E,getTabIndexByValue:A}=de(()=>Ie(m,r),[m,r]),B=C??(E>=0?i[E].props.value:void 0),[T,L]=oe(y,B),D=A(T),v=D>=0?D:E,K=v>=0?i[v].props.value:T,P=v>=0?i[v].id:void 0,k=j.includes(v)?v:E,[N,S]=pe(k),G=f?[]:j,W=x(e=>{Object.is(T,e)||(L(e),I?.(e))}),R=x(e=>{const o=i[e];!o||f||o.props.disabled||W(o.props.value)}),H=x(e=>{const o=u.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,$=f||!!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=>{u.current[o]=Z})})},X=e=>{const o=Object.is(e.props.value,K);return p&&!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:d,size:g,orientation:n,selectedTabId:P,selectedValue:K,onClose:s},children:ae("div",{...c,className:ne(ve.tabs({variant:d,orientation:n}),b),ref:h,children:[l&&O(l,{...l.props,role:"tablist","aria-orientation":n,children:i.map(U),onKeyDown:Q,ref:l.ref}),M.map(X)]})})});F.displayName="Tabs";export{F as default};

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

@@ -0,0 +1,9 @@
+import { TabsProps } from '../interfaces';
+declare const TabsProvider: import('react').Provider<Pick<TabsProps<unknown>, "variant" | "size" | "onClose" | "orientation"> & {
+    selectedTabId?: string;
+    selectedValue?: unknown;
+}>, useTabsContext: () => Pick<TabsProps<unknown>, "variant" | "size" | "onClose" | "orientation"> & {
+    selectedTabId?: string;
+    selectedValue?: unknown;
+};
+export { TabsProvider, useTabsContext };

package/dist/tabs/contexts/index.js

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

package/dist/tabs/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @category Components
+ */
+declare const Tabs: (<T>(props: import('./interfaces').TabsProps<T> & import('react').RefAttributes<HTMLDivElement>) => import('react').ReactElement | null) & {
+    List: import('react').ForwardRefExoticComponent<import('./interfaces').ListProps & import('react').RefAttributes<HTMLDivElement>>;
+    Tab: import('react').ForwardRefExoticComponent<import('./interfaces').TabProps<unknown> & import('react').RefAttributes<HTMLDivElement>>;
+    Panel: import('react').ForwardRefExoticComponent<import('./interfaces').PanelProps<unknown> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export type * from './interfaces';
+export default Tabs;

package/dist/tabs/index.js

@@ -0,0 +1 @@
+import o from"./List.js";import r from"./Panel.js";import t from"./Tab.js";import m from"./Tabs.js";const i=Object.assign(m,{List:o,Tab:t,Panel:r});export{i as default};

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

@@ -0,0 +1,28 @@
+import { TabsOrientation, TabsSize, TabsVariant } from '../interfaces';
+declare const _default: {
+    tabs: (props?: {
+        orientation?: TabsOrientation;
+        variant?: TabsVariant;
+    } | undefined) => string;
+    list: (props?: {
+        orientation?: TabsOrientation;
+        variant?: TabsVariant;
+    } | undefined) => string;
+    tab: (props?: {
+        orientation?: TabsOrientation;
+        variant?: TabsVariant;
+        size?: TabsSize;
+        selected?: boolean;
+        disabled?: boolean;
+        closable?: boolean;
+    } | undefined) => string;
+    tabContent: (props?: object | undefined) => string;
+    close: (props?: {
+        size?: TabsSize;
+    } | undefined) => string;
+    panel: (props?: {
+        orientation?: TabsOrientation;
+        variant?: TabsVariant;
+    } | undefined) => string;
+};
+export default _default;

package/dist/tabs/style/index.js

@@ -0,0 +1 @@
+import{cva as a}from"@nild/shared";import{DISABLED_CLS as e}from"../../_shared/style/index.js";const r=a(["nd-tabs","font-nd","text-main"],{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"}]}),t=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],{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:["disabled","cursor-not-allowed"],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:["text-muted","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-panel","text-brand"]},{variant:"card",selected:!1,disabled:!1,className:["bg-muted","text-main","hover:bg-muted-hover","hover:text-brand-hover"]},{variant:"card",selected:!0,orientation:"horizontal",className:"border-b-[var(--background-color-panel)]"},{variant:"card",selected:!0,orientation:"vertical",className:"border-r-[var(--background-color-panel)]"},{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","inline-flex","shrink-0","items-center","justify-center","rounded-sm","border-0","bg-transparent","cursor-pointer","p-0","text-muted","outline-none","transition-colors","hover:bg-muted-hover","hover:text-brand-hover","focus-visible:ring-focused","disabled:cursor-not-allowed","disabled:opacity-50"],{variants:{size:{small:["size-4","text-sm"],medium:["size-4.5","text-md"],large:["size-5","text-lg"]}}}),l=a(["nd-tabs-panel","min-w-0","outline-none"],{variants:{orientation:{horizontal:"",vertical:["flex-auto"]},variant:{line:"",card:["border","border-main","bg-panel","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"]}]}),s={tabs:r,list:t,tab:n,tabContent:i,close:o,panel:l};export{s as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.42",
+  "version": "0.0.43",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {