@mich8060/unified-design-system 0.2.45 → 0.2.46

package/dist/ai/manifest.json

@@ -3244,7 +3244,7 @@
       "name": "Toolbar",
       "category": "layout",
       "intent": "Top bar with edge actions and centered identity/title",
-      "purpose": "Top action bar with left and right action regions and centered title/branding.",
+      "purpose": "Top action bar with three composable slots: left, center, and right.",
       "tier": 2,
       "description": "A horizontal application bar that reserves left and right action regions and a centered title or branding slot.",
       "roles": [

package/dist/app-shell/AppShell.d.ts

@@ -45,12 +45,16 @@ export interface AppShellProps {
 export interface AppShellSectionProps {
     children?: React.ReactNode;
 }
-declare const AppShellMenuSlot: ({ children }: AppShellSectionProps) => import("react/jsx-runtime").JSX.Element;
-declare const AppShellContentSlot: ({ children }: AppShellSectionProps) => import("react/jsx-runtime").JSX.Element;
-declare const AppShellListviewSlot: ({ children }: AppShellSectionProps) => import("react/jsx-runtime").JSX.Element;
-declare const AppShellMainSlot: ({ children }: AppShellSectionProps) => import("react/jsx-runtime").JSX.Element;
-declare const AppShellSidePanelSlot: ({ children }: AppShellSectionProps) => import("react/jsx-runtime").JSX.Element;
-declare const AppShellFooterSlot: ({ children }: AppShellSectionProps) => import("react/jsx-runtime").JSX.Element;
+type AppShellSlotName = "Menu" | "Content" | "Listview" | "Main" | "SidePanel" | "Footer";
+type AppShellSlotComponent = React.FC<AppShellSectionProps> & {
+    __appShellSlot?: AppShellSlotName;
+};
+declare const AppShellMenuSlot: AppShellSlotComponent;
+declare const AppShellContentSlot: AppShellSlotComponent;
+declare const AppShellListviewSlot: AppShellSlotComponent;
+declare const AppShellMainSlot: AppShellSlotComponent;
+declare const AppShellSidePanelSlot: AppShellSlotComponent;
+declare const AppShellFooterSlot: AppShellSlotComponent;
 type AppShellCompound = React.FC<AppShellProps> & {
     Menu: typeof AppShellMenuSlot;
     Content: typeof AppShellContentSlot;

package/dist/components/Toolbar/Toolbar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css                */const d=require("../Text/Text.cjs");function u({left:s,right:l,title:r,branding:o,center:t,className:a="",...n}){const i=["uds-toolbar",a].filter(Boolean).join(" "),c=t??o??(r!=null?e.jsx(d.Text,{as:"span",variant:"body-16",weight:"semibold",leading:"regular",children:r}):null);return e.jsxs("div",{className:i,role:"toolbar",...n,children:[e.jsx("div",{className:"uds-toolbar__left",children:s}),e.jsx("div",{className:"uds-toolbar__center",children:c}),e.jsx("div",{className:"uds-toolbar__right",children:l})]})}exports.Toolbar=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");;/* empty css                */function i({left:o,center:r,right:s,className:l="",...a}){const t=["uds-toolbar",l].filter(Boolean).join(" ");return e.jsxs("div",{className:t,role:"toolbar",...a,children:[e.jsx("div",{className:"uds-toolbar__left",children:o}),e.jsx("div",{className:"uds-toolbar__center",children:r}),e.jsx("div",{className:"uds-toolbar__right",children:s})]})}exports.Toolbar=i;

package/dist/components/Toolbar/Toolbar.js

@@ -1 +1 @@
-import{jsxs as c,jsx as o}from"react/jsx-runtime";/* empty css             */import{Text as m}from"../Text/Text.js";function _({left:l,right:e,title:r,branding:a,center:s,className:n="",...t}){const i=["uds-toolbar",n].filter(Boolean).join(" "),d=s??a??(r!=null?o(m,{as:"span",variant:"body-16",weight:"semibold",leading:"regular",children:r}):null);return c("div",{className:i,role:"toolbar",...t,children:[o("div",{className:"uds-toolbar__left",children:l}),o("div",{className:"uds-toolbar__center",children:d}),o("div",{className:"uds-toolbar__right",children:e})]})}export{_ as Toolbar};
+import{jsxs as i,jsx as o}from"react/jsx-runtime";/* empty css             */function n({left:r,center:l,right:s,className:a="",...e}){const t=["uds-toolbar",a].filter(Boolean).join(" ");return i("div",{className:t,role:"toolbar",...e,children:[o("div",{className:"uds-toolbar__left",children:r}),o("div",{className:"uds-toolbar__center",children:l}),o("div",{className:"uds-toolbar__right",children:s})]})}export{n as Toolbar};

package/dist/design-system/components/Toolbar/Toolbar.d.ts

@@ -1,3 +1,3 @@
 import "./_toolbar.scss";
 import type { ToolbarProps } from "./Toolbar.types";
-export declare function Toolbar({ left, right, title, branding, center, className, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toolbar({ left, center, right, className, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/design-system/components/Toolbar/Toolbar.types.d.ts

@@ -1,8 +1,6 @@
 import type { HTMLAttributes, ReactNode } from "react";
 export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
     left?: ReactNode;
-    right?: ReactNode;
-    title?: ReactNode;
-    branding?: ReactNode;
     center?: ReactNode;
+    right?: ReactNode;
 }

package/dist/src/app-shell/AppShell.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),X=require("./layout.types.cjs"),Y=require("../../components/Avatar/Avatar.cjs"),Z=require("../../components/ActionMenu/ActionMenu.cjs"),U=require("../../components/Button/Button.cjs"),ee=require("../../components/Branding/Branding.cjs"),ne=require("../../components/Toolbar/Toolbar.cjs");;/* empty css             */const C=({children:l})=>e.jsx(e.Fragment,{children:l}),M=({children:l})=>e.jsx(e.Fragment,{children:l}),A=({children:l})=>e.jsx(e.Fragment,{children:l}),k=({children:l})=>e.jsx(e.Fragment,{children:l}),w=({children:l})=>e.jsx(e.Fragment,{children:l}),F=({children:l})=>e.jsx(e.Fragment,{children:l}),u=l=>t.Children.toArray(l).some(a=>typeof a=="string"?a.trim().length>0:a!=null&&a!==!1);function le({layout:l,slots:a,children:N,standalone:L=!1,brand:d="default",theme:q="light",className:$="",skipToContent:P=!0,skipToContentLabel:E="Skip to content",mainContentId:O,mobileBrandLabel:I,mobileUserName:h="Jane Doe",mobileUserInitials:B="JD",mobileUserAvatarSrc:R,mobileAccountMenuItems:m=[]}){const o=t.useMemo(()=>({...X.defaultLayout,...l}),[l]),T=t.useId().replace(/[:]/g,""),v=O??`app-shell-main-${T}`,[i,y]=t.useState(!1),z=I??(d==="default"?"design-system":d),D=t.useMemo(()=>Array.isArray(m)?m:[],[m]),r=t.useCallback(()=>y(!1),[]),J=t.useCallback(()=>y(n=>!n),[]);t.useEffect(()=>{if(!i)return;const n=p=>{p.key==="Escape"&&r()};return window.addEventListener("keydown",n),()=>window.removeEventListener("keydown",n)},[r,i]);const G=t.useCallback(n=>{const p=n.target;p&&p.closest("a")&&r()},[r]);let b=null,j=null,f=null,x=null,g=null,S=null;const H=t.Children.toArray(N);for(const n of H){if(n.type===C){b=n.props.children;continue}if(n.type===M){j=n.props.children;continue}n.type===F&&(S=n.props.children)}const K=t.Children.toArray(j);for(const n of K){if(n.type===A){f=n.props.children;continue}if(n.type===k){x=n.props.children;continue}n.type===w&&(g=n.props.children)}const _=(a==null?void 0:a.Footer)??S,c=!L&&o.sidebar&&u(b),Q=u(f),V=u(g),W=["app-shell",`brand-${d}`,`theme-${q}`,`density-${o.density}`,`container-${o.container}`,`padding-${o.padding}`,c?"app-shell--has-nav":"app-shell--standalone",i?"app-shell--mobile-menu-open":"",$].join(" ");return e.jsxs("div",{className:W,children:[P?e.jsx("a",{className:"app-shell__skip-link",href:`#${v}`,children:E}):null,c?e.jsx("div",{className:"app-shell__mobile-toolbar-wrap",children:e.jsx(ne.Toolbar,{className:"app-shell__mobile-toolbar",left:e.jsx(U.default,{appearance:"text",icon:"List",label:i?"Close navigation menu":"Open navigation menu",layout:"icon-only","aria-label":i?"Close navigation menu":"Open navigation menu",onClick:J}),center:e.jsx(ee.default,{brand:z,symbol:!0}),right:e.jsx(Z.default,{placement:"bottom-end",items:D,trigger:e.jsx("button",{type:"button",className:"app-shell__mobile-avatar-trigger","aria-label":`${h} account menu`,children:e.jsx(Y.default,{src:R,initials:B,alt:h?`${h} avatar`:"User avatar",size:"default"})})})})}):null,e.jsxs("div",{className:"app-shell__body",children:[c?e.jsx("aside",{className:"app-shell__sidebar","aria-label":"Primary",onClickCapture:G,children:b}):null,e.jsxs("div",{className:"app-shell__main",children:[e.jsxs("main",{className:"app-shell__content",id:v,tabIndex:-1,children:[Q?e.jsx("aside",{className:"app-shell__listview",children:f}):null,e.jsx("section",{className:"app-shell__main-content",children:x}),V?e.jsx("aside",{className:"app-shell__side-panel",children:g}):null]}),o.footer&&u(_)?_:null]})]}),c?e.jsx("button",{type:"button",className:"app-shell__mobile-backdrop",onClick:r,"aria-label":"Close navigation menu"}):null]})}const s=le;s.Menu=C;s.Content=M;s.Listview=A;s.Main=k;s.SidePanel=w;s.Footer=F;exports.AppShell=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("react"),Z=require("./layout.types.cjs"),U=require("../../components/Avatar/Avatar.cjs"),ee=require("../../components/ActionMenu/ActionMenu.cjs"),ne=require("../../components/Button/Button.cjs"),le=require("../../components/Branding/Branding.cjs"),te=require("../../components/Toolbar/Toolbar.cjs");;/* empty css             */const i=l=>{const t=({children:h})=>n.jsx(n.Fragment,{children:h});return t.__appShellSlot=l,t},A=l=>{if(l&&(typeof l=="function"||typeof l=="object"&&l!==null))return l.__appShellSlot},k=i("Menu"),w=i("Content"),N=i("Listview"),L=i("Main"),q=i("SidePanel"),$=i("Footer"),d=l=>o.Children.toArray(l).some(t=>typeof t=="string"?t.trim().length>0:t!=null&&t!==!1);function ae({layout:l,slots:t,children:h,standalone:F=!1,brand:m="default",theme:P="light",className:E="",skipToContent:O=!0,skipToContentLabel:I="Skip to content",mainContentId:B,mobileBrandLabel:R,mobileUserName:f="Jane Doe",mobileUserInitials:T="JD",mobileUserAvatarSrc:z,mobileAccountMenuItems:b=[]}){const r=o.useMemo(()=>({...Z.defaultLayout,...l}),[l]),D=o.useId().replace(/[:]/g,""),_=B??`app-shell-main-${D}`,[c,g]=o.useState(!1),J=R??(m==="default"?"design-system":m),G=o.useMemo(()=>Array.isArray(b)?b:[],[b]),p=o.useCallback(()=>g(!1),[]),H=o.useCallback(()=>g(e=>!e),[]);o.useEffect(()=>{if(!c)return;const e=a=>{a.key==="Escape"&&p()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[p,c]);const K=o.useCallback(e=>{const a=e.target;a&&a.closest("a")&&p()},[p]);let S=null,C=null,v=null,M=null,y=null,j=null;const Q=o.Children.toArray(h);for(const e of Q){const a=A(e.type);if(e.type===k||a==="Menu"){S=e.props.children;continue}if(e.type===w||a==="Content"){C=e.props.children;continue}(e.type===$||a==="Footer")&&(j=e.props.children)}const V=o.Children.toArray(C);for(const e of V){const a=A(e.type);if(e.type===N||a==="Listview"){v=e.props.children;continue}if(e.type===L||a==="Main"){M=e.props.children;continue}(e.type===q||a==="SidePanel")&&(y=e.props.children)}const x=(t==null?void 0:t.Footer)??j,u=!F&&r.sidebar&&d(S),W=d(v),X=d(y),Y=["app-shell",`brand-${m}`,`theme-${P}`,`density-${r.density}`,`container-${r.container}`,`padding-${r.padding}`,u?"app-shell--has-nav":"app-shell--standalone",c?"app-shell--mobile-menu-open":"",E].join(" ");return n.jsxs("div",{className:Y,children:[O?n.jsx("a",{className:"app-shell__skip-link",href:`#${_}`,children:I}):null,u?n.jsx("div",{className:"app-shell__mobile-toolbar-wrap",children:n.jsx(te.Toolbar,{className:"app-shell__mobile-toolbar",left:n.jsx(ne.default,{appearance:"text",icon:"List",label:c?"Close navigation menu":"Open navigation menu",layout:"icon-only","aria-label":c?"Close navigation menu":"Open navigation menu",onClick:H}),center:n.jsx(le.default,{brand:J,symbol:!0}),right:n.jsx(ee.default,{placement:"bottom-end",items:G,trigger:n.jsx("button",{type:"button",className:"app-shell__mobile-avatar-trigger","aria-label":`${f} account menu`,children:n.jsx(U.default,{src:z,initials:T,alt:f?`${f} avatar`:"User avatar",size:"default"})})})})}):null,n.jsxs("div",{className:"app-shell__body",children:[u?n.jsx("aside",{className:"app-shell__sidebar","aria-label":"Primary",onClickCapture:K,children:S}):null,n.jsxs("div",{className:"app-shell__main",children:[n.jsxs("main",{className:"app-shell__content",id:_,tabIndex:-1,children:[W?n.jsx("aside",{className:"app-shell__listview",children:v}):null,n.jsx("section",{className:"app-shell__main-content",children:M}),X?n.jsx("aside",{className:"app-shell__side-panel",children:y}):null]}),r.footer&&d(x)?x:null]})]}),u?n.jsx("button",{type:"button",className:"app-shell__mobile-backdrop",onClick:p,"aria-label":"Close navigation menu"}):null]})}const s=ae;s.Menu=k;s.Content=w;s.Listview=N;s.Main=L;s.SidePanel=q;s.Footer=$;exports.AppShell=s;

package/dist/src/app-shell/AppShell.js

@@ -1 +1 @@
-import{jsxs as d,jsx as n,Fragment as a}from"react/jsx-runtime";import _,{useMemo as N,useId as ee,useState as ne,useCallback as y,useEffect as le}from"react";import{defaultLayout as te}from"./layout.types.js";import ae from"../../components/Avatar/Avatar.js";import oe from"../../components/ActionMenu/ActionMenu.js";import ie from"../../components/Button/Button.js";import se from"../../components/Branding/Branding.js";import{Toolbar as re}from"../../components/Toolbar/Toolbar.js";/* empty css          */const L=({children:l})=>n(a,{children:l}),$=({children:l})=>n(a,{children:l}),F=({children:l})=>n(a,{children:l}),x=({children:l})=>n(a,{children:l}),E=({children:l})=>n(a,{children:l}),P=({children:l})=>n(a,{children:l}),u=l=>_.Children.toArray(l).some(t=>typeof t=="string"?t.trim().length>0:t!=null&&t!==!1);function pe({layout:l,slots:t,children:I,standalone:O=!1,brand:m="default",theme:j="light",className:B="",skipToContent:z=!0,skipToContentLabel:D="Skip to content",mainContentId:J,mobileBrandLabel:R,mobileUserName:h="Jane Doe",mobileUserInitials:T="JD",mobileUserAvatarSrc:q,mobileAccountMenuItems:f=[]}){const i=N(()=>({...te,...l}),[l]),G=ee().replace(/[:]/g,""),C=J??`app-shell-main-${G}`,[s,S]=ne(!1),H=R??(m==="default"?"design-system":m),K=N(()=>Array.isArray(f)?f:[],[f]),r=y(()=>S(!1),[]),Q=y(()=>S(e=>!e),[]);le(()=>{if(!s)return;const e=c=>{c.key==="Escape"&&r()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[r,s]);const V=y(e=>{const c=e.target;c&&c.closest("a")&&r()},[r]);let b=null,M=null,v=null,A=null,g=null,k=null;const W=_.Children.toArray(I);for(const e of W){if(e.type===L){b=e.props.children;continue}if(e.type===$){M=e.props.children;continue}e.type===P&&(k=e.props.children)}const X=_.Children.toArray(M);for(const e of X){if(e.type===F){v=e.props.children;continue}if(e.type===x){A=e.props.children;continue}e.type===E&&(g=e.props.children)}const w=(t==null?void 0:t.Footer)??k,p=!O&&i.sidebar&&u(b),Y=u(v),Z=u(g),U=["app-shell",`brand-${m}`,`theme-${j}`,`density-${i.density}`,`container-${i.container}`,`padding-${i.padding}`,p?"app-shell--has-nav":"app-shell--standalone",s?"app-shell--mobile-menu-open":"",B].join(" ");return d("div",{className:U,children:[z?n("a",{className:"app-shell__skip-link",href:`#${C}`,children:D}):null,p?n("div",{className:"app-shell__mobile-toolbar-wrap",children:n(re,{className:"app-shell__mobile-toolbar",left:n(ie,{appearance:"text",icon:"List",label:s?"Close navigation menu":"Open navigation menu",layout:"icon-only","aria-label":s?"Close navigation menu":"Open navigation menu",onClick:Q}),center:n(se,{brand:H,symbol:!0}),right:n(oe,{placement:"bottom-end",items:K,trigger:n("button",{type:"button",className:"app-shell__mobile-avatar-trigger","aria-label":`${h} account menu`,children:n(ae,{src:q,initials:T,alt:h?`${h} avatar`:"User avatar",size:"default"})})})})}):null,d("div",{className:"app-shell__body",children:[p?n("aside",{className:"app-shell__sidebar","aria-label":"Primary",onClickCapture:V,children:b}):null,d("div",{className:"app-shell__main",children:[d("main",{className:"app-shell__content",id:C,tabIndex:-1,children:[Y?n("aside",{className:"app-shell__listview",children:v}):null,n("section",{className:"app-shell__main-content",children:A}),Z?n("aside",{className:"app-shell__side-panel",children:g}):null]}),i.footer&&u(w)?w:null]})]}),p?n("button",{type:"button",className:"app-shell__mobile-backdrop",onClick:r,"aria-label":"Close navigation menu"}):null]})}const o=pe;o.Menu=L;o.Content=$;o.Listview=F;o.Main=x;o.SidePanel=E;o.Footer=P;export{o as AppShell};
+import{jsxs as d,jsx as n,Fragment as ne}from"react/jsx-runtime";import y,{useMemo as L,useId as te,useState as le,useCallback as g,useEffect as oe}from"react";import{defaultLayout as ae}from"./layout.types.js";import ie from"../../components/Avatar/Avatar.js";import se from"../../components/ActionMenu/ActionMenu.js";import re from"../../components/Button/Button.js";import pe from"../../components/Branding/Branding.js";import{Toolbar as ce}from"../../components/Toolbar/Toolbar.js";/* empty css          */const a=t=>{const l=({children:h})=>n(ne,{children:h});return l.__appShellSlot=t,l},$=t=>{if(t&&(typeof t=="function"||typeof t=="object"&&t!==null))return t.__appShellSlot},F=a("Menu"),P=a("Content"),x=a("Listview"),E=a("Main"),j=a("SidePanel"),I=a("Footer"),u=t=>y.Children.toArray(t).some(l=>typeof l=="string"?l.trim().length>0:l!=null&&l!==!1);function de({layout:t,slots:l,children:h,standalone:O=!1,brand:m="default",theme:B="light",className:z="",skipToContent:D=!0,skipToContentLabel:J="Skip to content",mainContentId:R,mobileBrandLabel:T,mobileUserName:f="Jane Doe",mobileUserInitials:q="JD",mobileUserAvatarSrc:G,mobileAccountMenuItems:S=[]}){const s=L(()=>({...ae,...t}),[t]),H=te().replace(/[:]/g,""),C=R??`app-shell-main-${H}`,[r,M]=le(!1),K=T??(m==="default"?"design-system":m),Q=L(()=>Array.isArray(S)?S:[],[S]),p=g(()=>M(!1),[]),V=g(()=>M(e=>!e),[]);oe(()=>{if(!r)return;const e=o=>{o.key==="Escape"&&p()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[p,r]);const W=g(e=>{const o=e.target;o&&o.closest("a")&&p()},[p]);let b=null,A=null,v=null,w=null,_=null,N=null;const X=y.Children.toArray(h);for(const e of X){const o=$(e.type);if(e.type===F||o==="Menu"){b=e.props.children;continue}if(e.type===P||o==="Content"){A=e.props.children;continue}(e.type===I||o==="Footer")&&(N=e.props.children)}const Y=y.Children.toArray(A);for(const e of Y){const o=$(e.type);if(e.type===x||o==="Listview"){v=e.props.children;continue}if(e.type===E||o==="Main"){w=e.props.children;continue}(e.type===j||o==="SidePanel")&&(_=e.props.children)}const k=(l==null?void 0:l.Footer)??N,c=!O&&s.sidebar&&u(b),Z=u(v),U=u(_),ee=["app-shell",`brand-${m}`,`theme-${B}`,`density-${s.density}`,`container-${s.container}`,`padding-${s.padding}`,c?"app-shell--has-nav":"app-shell--standalone",r?"app-shell--mobile-menu-open":"",z].join(" ");return d("div",{className:ee,children:[D?n("a",{className:"app-shell__skip-link",href:`#${C}`,children:J}):null,c?n("div",{className:"app-shell__mobile-toolbar-wrap",children:n(ce,{className:"app-shell__mobile-toolbar",left:n(re,{appearance:"text",icon:"List",label:r?"Close navigation menu":"Open navigation menu",layout:"icon-only","aria-label":r?"Close navigation menu":"Open navigation menu",onClick:V}),center:n(pe,{brand:K,symbol:!0}),right:n(se,{placement:"bottom-end",items:Q,trigger:n("button",{type:"button",className:"app-shell__mobile-avatar-trigger","aria-label":`${f} account menu`,children:n(ie,{src:G,initials:q,alt:f?`${f} avatar`:"User avatar",size:"default"})})})})}):null,d("div",{className:"app-shell__body",children:[c?n("aside",{className:"app-shell__sidebar","aria-label":"Primary",onClickCapture:W,children:b}):null,d("div",{className:"app-shell__main",children:[d("main",{className:"app-shell__content",id:C,tabIndex:-1,children:[Z?n("aside",{className:"app-shell__listview",children:v}):null,n("section",{className:"app-shell__main-content",children:w}),U?n("aside",{className:"app-shell__side-panel",children:_}):null]}),s.footer&&u(k)?k:null]})]}),c?n("button",{type:"button",className:"app-shell__mobile-backdrop",onClick:p,"aria-label":"Close navigation menu"}):null]})}const i=de;i.Menu=F;i.Content=P;i.Listview=x;i.Main=E;i.SidePanel=j;i.Footer=I;export{i as AppShell};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mich8060/unified-design-system",
   "private": false,
-  "version": "0.2.45",
+  "version": "0.2.46",
   "type": "module",
   "license": "MIT",
   "publishConfig": {