zaravand-ui 6.0.0 → 7.0.1

package/README.md

@@ -1,45 +1,45 @@
-# zaravand-ui
-
-Reusable React UI library with centralized theme tokens.
-
-## Install
-
-```bash
-npm i zaravand-ui
-```
-
-## Usage
-
-```tsx
-import "zaravand-ui/styles.css"
-import { Button, applyTheme } from "zaravand-ui"
-
-applyTheme({
-  primary: "#2563EB",
-  secondary: "#0891B2",
-  text: "#F8FAFC",
-  success: "#16A34A",
-  warning: "#EAB308",
-  danger: "#DC2626",
-  border: "#334155",
-  surface: "#0F172A",
-  mutedSurface: "#1E293B",
-  tooltipSurface: "#0B1120",
-})
-
-export function Example() {
-  return <Button label="Save" />
-}
-```
-
-## Scripts
-
-- `npm run build`
-- `npm run docs:dev`
-- `npm run docs:build`
-- `npm run docs:preview`
-
-## Documentation
-
-- Developer docs (VitePress): `docs/`
-- Full integration guide: `ZARAVAND_UI_INTEGRATION_GUIDE.md`
+# zaravand-ui
+
+Reusable React UI library with centralized theme tokens.
+
+## Install
+
+```bash
+npm i zaravand-ui
+```
+
+## Usage
+
+```tsx
+import "zaravand-ui/styles.css"
+import { Button, applyTheme } from "zaravand-ui"
+
+applyTheme({
+  primary: "#2563EB",
+  secondary: "#0891B2",
+  text: "#F8FAFC",
+  success: "#16A34A",
+  warning: "#EAB308",
+  danger: "#DC2626",
+  border: "#334155",
+  surface: "#0F172A",
+  mutedSurface: "#1E293B",
+  tooltipSurface: "#0B1120",
+})
+
+export function Example() {
+  return <Button label="Save" />
+}
+```
+
+## Scripts
+
+- `npm run build`
+- `npm run docs:dev`
+- `npm run docs:build`
+- `npm run docs:preview`
+
+## Documentation
+
+- Developer docs (VitePress): `docs/`
+- Full integration guide: `ZARAVAND_UI_INTEGRATION_GUIDE.md`

package/dist/components/Accordion/Accordion.cjs

@@ -1 +1 @@
-"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../lib/utils.cjs`),r=require(`../shared/IconActionButton.cjs`),i=require(`../shared/useControllableState.cjs`),a=require(`../shared/useExclusiveAction.cjs`),o=require(`./Accordion.variant.cjs`);let s=require(`react`);s=e.__toESM(s,1);let c=require(`react/jsx-runtime`),l=require(`lucide-react`);var u=`zui:size-4`,d=s.createContext(null);function f(e){let t=s.useContext(d);if(!t)throw Error(`${e} must be used within an <Accordion> component`);return t}var p=s.createContext(null);function m(e){let t=s.useContext(p);if(!t)throw Error(`${e} must be used within an <AccordionItem> component`);return t}function h(e){return e===void 0?[]:Array.isArray(e)?e:[e]}function g(e){return typeof e==`string`||typeof e==`number`?String(e):``}function _(e){return`${g(e.title)} ${Array.isArray(e.content)?e.content.map(e=>g(e.label)).join(` `):g(e.content)}`.toLocaleLowerCase()}var v=s.forwardRef(function({type:e=`single`,value:f,defaultValue:p,onValueChange:m,collapsible:g=!1,dir:v,items:S,searchable:C=!1,onAdd:w,onEdit:T,onDelete:E,onContentItemEdit:D,onContentItemDelete:O,className:k,children:A},j){let{messages:M,dir:N}=t.useZuiConfig(),P=v??N,[F,I]=i.useControllableState({value:s.useMemo(()=>f===void 0?void 0:h(f),[f]),defaultValue:()=>h(p)}),[L,R]=a.useExclusiveAction(),[z,B]=s.useState(``),V=C&&Array.isArray(S),H=typeof w==`function`,U=z.trim().toLocaleLowerCase(),W=s.useMemo(()=>{if(!S)return;let e=S.map((e,t)=>({item:e,originalIndex:t}));return!V||U.length===0?e:e.filter(({item:e})=>_(e).includes(U))},[S,U,V]),G=s.useCallback(t=>{I(t),e===`multiple`?m?.(t):m?.(t[0]??``)},[m,I,e]),K=s.useCallback(t=>{let n=F.includes(t);if(e===`multiple`){G(n?F.filter(e=>e!==t):[...F,t]);return}if(n){G(g?[]:F);return}G([t])},[g,G,F,e]),q=s.useCallback(async()=>{w&&await R(w)},[w,R]),J=s.useCallback(async(e,t)=>{T&&await R(()=>T({item:e,index:t}))},[T,R]),Y=s.useCallback(async(e,t)=>{E&&await R(()=>E({item:e,index:t}))},[E,R]),X=s.useCallback(async(e,t,n,r)=>{D&&await R(()=>D({item:e,itemIndex:t,contentItem:n,contentIndex:r}))},[D,R]),Z=s.useCallback(async(e,t,n,r)=>{O&&await R(()=>O({item:e,itemIndex:t,contentItem:n,contentIndex:r}))},[O,R]),Q=s.useMemo(()=>({openValues:F,toggleValue:K,dir:P,type:e}),[F,K,P,e]);return(0,c.jsx)(d.Provider,{value:Q,children:(0,c.jsxs)(`div`,{ref:j,dir:P,"data-slot":`accordion`,className:n.cn(o.accordionVariants(),k),children:[V||H?(0,c.jsx)(r.ListToolbar,{"data-slot":`accordion-controls`,searchSlot:`accordion-search-input`,actionsSlot:`accordion-actions`,className:`zui:mb-2`,search:V?{value:z,onChange:e=>B(e.target.value),placeholder:M.common.searchPlaceholder,ariaLabel:M.accordion.searchAriaLabel}:void 0,actions:H?(0,c.jsx)(r.ToolbarIconButton,{"data-slot":`accordion-action-add-button`,label:M.common.add,disabled:L,onClick:()=>void q(),icon:(0,c.jsx)(l.Plus,{})}):void 0}):null,W&&V&&W.length===0?(0,c.jsx)(`div`,{"data-slot":`accordion-empty-state`,className:o.accordionEmptyStateVariants(),children:M.accordion.noSearchResults}):null,W?W.map(({item:e,originalIndex:t})=>{let n=e.isEdit&&typeof T==`function`,i=e.isDelete&&typeof E==`function`,a=n||i?(0,c.jsxs)(c.Fragment,{children:[n?(0,c.jsx)(r.IconActionButton,{"data-slot":`accordion-action-edit-button`,label:M.common.edit,icon:(0,c.jsx)(l.Pencil,{className:u,"aria-hidden":`true`}),disabled:L,className:o.accordionActionButtonVariants({tone:`edit`}),onClick:()=>void J(e,t)}):null,i?(0,c.jsx)(r.IconActionButton,{"data-slot":`accordion-action-delete-button`,label:M.common.delete,icon:(0,c.jsx)(l.Trash2,{className:u,"aria-hidden":`true`}),disabled:L,className:o.accordionActionButtonVariants({tone:`delete`}),onClick:()=>void Y(e,t)}):null]}):void 0,s=Array.isArray(e.content)?(0,c.jsx)(`div`,{"data-slot":`accordion-content-list`,className:o.accordionContentListVariants(),children:e.content.map((n,i)=>{let a=n.isEdit&&typeof D==`function`,s=n.isDelete&&typeof O==`function`;return(0,c.jsxs)(`div`,{"data-slot":`accordion-content-list-row`,className:o.accordionContentListRowVariants(),children:[(0,c.jsx)(`span`,{className:`zui:min-w-0 zui:flex-1 zui:text-start`,children:n.label}),a?(0,c.jsx)(r.IconActionButton,{"data-slot":`accordion-content-item-edit-button`,label:M.common.edit,icon:(0,c.jsx)(l.Pencil,{className:u,"aria-hidden":`true`}),disabled:L,className:o.accordionContentActionButtonVariants({tone:`edit`}),onClick:()=>void X(e,t,n,i)}):null,s?(0,c.jsx)(r.IconActionButton,{"data-slot":`accordion-content-item-delete-button`,label:M.common.delete,icon:(0,c.jsx)(l.Trash2,{className:u,"aria-hidden":`true`}),disabled:L,className:o.accordionContentActionButtonVariants({tone:`delete`}),onClick:()=>void Z(e,t,n,i)}):null]},n.value)})}):e.content;return(0,c.jsxs)(y,{value:e.value,disabled:e.disabled,children:[(0,c.jsx)(b,{icon:e.icon,actions:a,children:e.title}),(0,c.jsx)(x,{children:s})]},e.value)}):A]})})}),y=s.forwardRef(function({value:e,disabled:t=!1,className:r,children:i},a){let{openValues:l}=f(`AccordionItem`),u=l.includes(e),d=s.useId(),m=`accordion-trigger-${d}`,h=`accordion-content-${d}`,g=s.useMemo(()=>({value:e,isOpen:u,disabled:t,triggerId:m,contentId:h}),[e,u,t,m,h]);return(0,c.jsx)(p.Provider,{value:g,children:(0,c.jsx)(`div`,{ref:a,"data-slot":`accordion-item`,"data-state":u?`open`:`closed`,"data-disabled":t?``:void 0,className:n.cn(o.accordionItemVariants(),r),children:i})})}),b=s.forwardRef(function({icon:e,actions:t,className:r,children:i},a){let{toggleValue:s}=f(`AccordionTrigger`),{value:u,isOpen:d,disabled:p,triggerId:h,contentId:g}=m(`AccordionTrigger`);return(0,c.jsxs)(`div`,{"data-slot":`accordion-trigger-row`,className:o.accordionTriggerRowVariants(),children:[(0,c.jsxs)(`button`,{ref:a,type:`button`,id:h,"aria-expanded":d,"aria-controls":g,disabled:p,"data-slot":`accordion-trigger`,"data-state":d?`open`:`closed`,onClick:()=>{p||s(u)},className:n.cn(o.accordionTriggerVariants(),r),children:[(0,c.jsx)(`span`,{className:`zui:flex-1 zui:text-start`,children:i}),e??(0,c.jsx)(l.ChevronDown,{"aria-hidden":`true`,className:n.cn(`zui:size-4 zui:shrink-0 zui:text-[var(--zui-color-text)] zui:transition-transform zui:duration-200 zui:ease-out`,d?`zui:rotate-180`:`zui:rotate-0`)})]}),t?(0,c.jsx)(`div`,{"data-slot":`accordion-trigger-actions`,className:o.accordionTriggerActionsVariants(),children:t}):null]})}),x=s.forwardRef(function({forceMount:e,className:t,children:r},i){let{isOpen:a,triggerId:s,contentId:l}=m(`AccordionContent`);return!e&&!a?null:(0,c.jsx)(`div`,{ref:i,role:`region`,id:l,"aria-labelledby":s,"data-slot":`accordion-content`,"data-state":a?`open`:`closed`,hidden:e?!a:void 0,className:n.cn(o.accordionContentVariants(),t),children:r})});exports.AccordionContent=x,exports.AccordionItem=y,exports.AccordionTrigger=b,exports.default=v;
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../lib/utils.cjs`),r=require(`../shared/ActionSheet.cjs`),i=require(`../shared/FieldClearButton.cjs`),a=require(`../shared/IconActionButton.cjs`),o=require(`../shared/useControllableState.cjs`),s=require(`../shared/useExclusiveAction.cjs`),c=require(`../shared/useStickyToolbar.cjs`),l=require(`../shared/viewport.cjs`),u=require(`./Accordion.variant.cjs`);let d=require(`react`);d=e.__toESM(d,1);let f=require(`react/jsx-runtime`),p=require(`lucide-react`);var m=`zui:size-4`,h=d.createContext(null);function g(e){let t=d.useContext(h);if(!t)throw Error(`${e} must be used within an <Accordion> component`);return t}var _=d.createContext(null);function v(e){let t=d.useContext(_);if(!t)throw Error(`${e} must be used within an <AccordionItem> component`);return t}function y(e){return e===void 0?[]:Array.isArray(e)?e:[e]}function b(e){return typeof e==`string`||typeof e==`number`?String(e):``}function ee(e){return`${b(e.title)} ${Array.isArray(e.content)?e.content.map(e=>b(e.label)).join(` `):b(e.content)}`.toLocaleLowerCase()}var x=d.forwardRef(function({type:e=`single`,value:g,defaultValue:_,onValueChange:v,collapsible:b=!1,dir:x,items:T,searchable:te=!1,onAdd:E,onEdit:D,onDelete:O,onContentItemEdit:k,onContentItemDelete:A,stickyToolbar:j=!0,className:ne,children:re},ie){let{messages:M,dir:ae}=t.useZuiConfig(),N=x??ae,[P,F]=o.useControllableState({value:d.useMemo(()=>g===void 0?void 0:y(g),[g]),defaultValue:()=>y(_)}),[I,L]=s.useExclusiveAction(),R=l.useIsMobileViewport(),[z,B]=d.useState({open:!1,actions:[]}),V=e=>B({open:!0,actions:e}),[H,oe]=d.useState(``),U=te&&Array.isArray(T),W=typeof E==`function`,G=U||W,K=d.useRef(null),q=d.useRef(null);c.useStickyToolbar(K,q,R&&j&&G);let J=H.trim().toLocaleLowerCase(),Y=d.useMemo(()=>{if(!T)return;let e=T.map((e,t)=>({item:e,originalIndex:t}));return!U||J.length===0?e:e.filter(({item:e})=>ee(e).includes(J))},[T,J,U]),X=d.useCallback(t=>{F(t),e===`multiple`?v?.(t):v?.(t[0]??``)},[v,F,e]),Z=d.useCallback(t=>{let n=P.includes(t);if(e===`multiple`){X(n?P.filter(e=>e!==t):[...P,t]);return}if(n){X(b?[]:P);return}X([t])},[b,X,P,e]),se=d.useCallback(async()=>{E&&await L(E)},[E,L]),Q=d.useCallback(async(e,t)=>{D&&await L(()=>D({item:e,index:t}))},[D,L]),$=d.useCallback(async(e,t)=>{O&&await L(()=>O({item:e,index:t}))},[O,L]),ce=d.useCallback(async(e,t,n,r)=>{k&&await L(()=>k({item:e,itemIndex:t,contentItem:n,contentIndex:r}))},[k,L]),le=d.useCallback(async(e,t,n,r)=>{A&&await L(()=>A({item:e,itemIndex:t,contentItem:n,contentIndex:r}))},[A,L]),ue=d.useMemo(()=>({openValues:P,toggleValue:Z,dir:N,type:e}),[P,Z,N,e]);return(0,f.jsx)(h.Provider,{value:ue,children:(0,f.jsxs)(`div`,{ref:ie,dir:N,"data-slot":`accordion`,className:n.cn(u.accordionVariants(),ne),children:[G?(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(`div`,{ref:q,"aria-hidden":`true`,"data-slot":`accordion-sticky-sentinel`,className:`zui:-mb-2`}),(0,f.jsx)(`div`,{ref:K,"data-slot":`accordion-sticky-toolbar`,"data-sticky-toolbar":R&&j?`true`:void 0,className:`zui:mb-2`,children:(0,f.jsx)(a.ListToolbar,{"data-slot":`accordion-controls`,searchSlot:`accordion-search-input`,actionsSlot:`accordion-actions`,inlineActionsOnMobile:W,search:U?{value:H,onChange:e=>oe(e.target.value),placeholder:M.common.searchPlaceholder,ariaLabel:M.accordion.searchAriaLabel}:void 0,actions:W?(0,f.jsx)(a.ToolbarIconButton,{"data-slot":`accordion-action-add-button`,label:M.common.add,disabled:I,onClick:()=>void se(),icon:(0,f.jsx)(p.Plus,{})}):void 0})})]}):null,Y&&U&&Y.length===0?(0,f.jsx)(`div`,{"data-slot":`accordion-empty-state`,className:u.accordionEmptyStateVariants(),children:M.accordion.noSearchResults}):null,Y?Y.map(({item:e,originalIndex:t})=>{let n=e.isEdit&&typeof D==`function`,r=e.isDelete&&typeof O==`function`,o=n||r,s=e=>(0,f.jsx)(e,{className:i.CLEAR_ICON_CLASS,"aria-hidden":`true`}),c=[...n?[{key:`edit`,label:M.common.edit,icon:s(p.Pencil),onSelect:()=>void Q(e,t)}]:[],...r?[{key:`delete`,label:M.common.delete,icon:s(p.Trash2),danger:!0,onSelect:()=>void $(e,t)}]:[]],l=R&&c.length>1?(0,f.jsx)(a.IconActionButton,{"data-slot":`accordion-action-menu-button`,label:M.accordion.actions,icon:(0,f.jsx)(p.EllipsisVertical,{className:m,"aria-hidden":`true`}),disabled:I,className:u.accordionActionButtonVariants({tone:`edit`}),onClick:()=>V(c)}):o?(0,f.jsxs)(f.Fragment,{children:[n?(0,f.jsx)(a.IconActionButton,{"data-slot":`accordion-action-edit-button`,label:M.common.edit,icon:(0,f.jsx)(p.Pencil,{className:m,"aria-hidden":`true`}),disabled:I,className:u.accordionActionButtonVariants({tone:`edit`}),onClick:()=>void Q(e,t)}):null,r?(0,f.jsx)(a.IconActionButton,{"data-slot":`accordion-action-delete-button`,label:M.common.delete,icon:(0,f.jsx)(p.Trash2,{className:m,"aria-hidden":`true`}),disabled:I,className:u.accordionActionButtonVariants({tone:`delete`}),onClick:()=>void $(e,t)}):null]}):void 0,d=Array.isArray(e.content)?(0,f.jsx)(`div`,{"data-slot":`accordion-content-list`,className:u.accordionContentListVariants(),children:e.content.map((n,r)=>{let i=n.isEdit&&typeof k==`function`,o=n.isDelete&&typeof A==`function`,c=[...i?[{key:`edit`,label:M.common.edit,icon:s(p.Pencil),onSelect:()=>void ce(e,t,n,r)}]:[],...o?[{key:`delete`,label:M.common.delete,icon:s(p.Trash2),danger:!0,onSelect:()=>void le(e,t,n,r)}]:[]],l=R&&c.length>1;return(0,f.jsxs)(`div`,{"data-slot":`accordion-content-list-row`,className:u.accordionContentListRowVariants(),children:[(0,f.jsx)(`span`,{className:`zui:min-w-0 zui:flex-1 zui:text-start`,children:n.label}),l?(0,f.jsx)(a.IconActionButton,{"data-slot":`accordion-content-item-menu-button`,label:M.accordion.actions,icon:(0,f.jsx)(p.EllipsisVertical,{className:m,"aria-hidden":`true`}),disabled:I,className:u.accordionContentActionButtonVariants({tone:`edit`}),onClick:()=>V(c)}):null,!l&&i?(0,f.jsx)(a.IconActionButton,{"data-slot":`accordion-content-item-edit-button`,label:M.common.edit,icon:(0,f.jsx)(p.Pencil,{className:m,"aria-hidden":`true`}),disabled:I,className:u.accordionContentActionButtonVariants({tone:`edit`}),onClick:()=>void ce(e,t,n,r)}):null,!l&&o?(0,f.jsx)(a.IconActionButton,{"data-slot":`accordion-content-item-delete-button`,label:M.common.delete,icon:(0,f.jsx)(p.Trash2,{className:m,"aria-hidden":`true`}),disabled:I,className:u.accordionContentActionButtonVariants({tone:`delete`}),onClick:()=>void le(e,t,n,r)}):null]},n.value)})}):e.content;return(0,f.jsxs)(S,{value:e.value,disabled:e.disabled,children:[(0,f.jsx)(C,{icon:e.icon,actions:l,children:e.title}),(0,f.jsx)(w,{children:d})]},e.value)}):re,R?(0,f.jsx)(r.default,{open:z.open,onOpenChange:e=>B(t=>({...t,open:e})),actions:z.actions,label:M.accordion.actions}):null]})})}),S=d.forwardRef(function({value:e,disabled:t=!1,className:r,children:i},a){let{openValues:o}=g(`AccordionItem`),s=o.includes(e),c=d.useId(),l=`accordion-trigger-${c}`,p=`accordion-content-${c}`,m=d.useMemo(()=>({value:e,isOpen:s,disabled:t,triggerId:l,contentId:p}),[e,s,t,l,p]);return(0,f.jsx)(_.Provider,{value:m,children:(0,f.jsx)(`div`,{ref:a,"data-slot":`accordion-item`,"data-state":s?`open`:`closed`,"data-disabled":t?``:void 0,className:n.cn(u.accordionItemVariants(),r),children:i})})}),C=d.forwardRef(function({icon:e,actions:t,className:r,children:i},a){let{toggleValue:o}=g(`AccordionTrigger`),{value:s,isOpen:c,disabled:l,triggerId:d,contentId:m}=v(`AccordionTrigger`);return(0,f.jsxs)(`div`,{"data-slot":`accordion-trigger-row`,className:u.accordionTriggerRowVariants(),children:[(0,f.jsxs)(`button`,{ref:a,type:`button`,id:d,"aria-expanded":c,"aria-controls":m,disabled:l,"data-slot":`accordion-trigger`,"data-state":c?`open`:`closed`,onClick:()=>{l||o(s)},className:n.cn(u.accordionTriggerVariants(),r),children:[(0,f.jsx)(`span`,{className:`zui:flex-1 zui:text-start`,children:i}),e??(0,f.jsx)(p.ChevronDown,{"aria-hidden":`true`,className:n.cn(`zui:size-4 zui:shrink-0 zui:text-[var(--zui-color-text)] zui:transition-transform zui:duration-200 zui:ease-out`,c?`zui:rotate-180`:`zui:rotate-0`)})]}),t?(0,f.jsx)(`div`,{"data-slot":`accordion-trigger-actions`,className:u.accordionTriggerActionsVariants(),children:t}):null]})}),w=d.forwardRef(function({forceMount:e,className:t,children:r},i){let{isOpen:a,triggerId:o,contentId:s}=v(`AccordionContent`);return!e&&!a?null:(0,f.jsx)(`div`,{ref:i,role:`region`,id:s,"aria-labelledby":o,"data-slot":`accordion-content`,"data-state":a?`open`:`closed`,hidden:e?!a:void 0,className:n.cn(u.accordionContentVariants(),t),children:r})});exports.AccordionContent=w,exports.AccordionItem=S,exports.AccordionTrigger=C,exports.default=x;

package/dist/components/Accordion/Accordion.interface.d.cts

@@ -72,6 +72,14 @@ export interface AccordionProps {
     onContentItemEdit?: AccordionContentItemEditHandler;
     /** Called when a content-list row's delete icon (`AccordionContentItem.isDelete`) is clicked. */
     onContentItemDelete?: AccordionContentItemDeleteHandler;
+    /**
+     * On phones the search and "+" button stay pinned to the top while the items scroll: they slide
+     * away when the user scrolls down and come back as soon as they scroll up. Set to `false` to let
+     * them scroll away with the page. Pin them below a fixed header of your own with the CSS variable
+     * `--zui-table-sticky-top` (e.g. `56px`). No effect on larger screens.
+     * @default true
+     */
+    stickyToolbar?: boolean;
     className?: string;
     children?: React.ReactNode;
 }

package/dist/components/Accordion/Accordion.interface.d.ts

@@ -72,6 +72,14 @@ export interface AccordionProps {
     onContentItemEdit?: AccordionContentItemEditHandler;
     /** Called when a content-list row's delete icon (`AccordionContentItem.isDelete`) is clicked. */
     onContentItemDelete?: AccordionContentItemDeleteHandler;
+    /**
+     * On phones the search and "+" button stay pinned to the top while the items scroll: they slide
+     * away when the user scrolls down and come back as soon as they scroll up. Set to `false` to let
+     * them scroll away with the page. Pin them below a fixed header of your own with the CSS variable
+     * `--zui-table-sticky-top` (e.g. `56px`). No effect on larger screens.
+     * @default true
+     */
+    stickyToolbar?: boolean;
     className?: string;
     children?: React.ReactNode;
 }