tcce-design-system-test 0.2.9 → 0.3.0

package/dist/tcce-design-system-components.umd.cjs

@@ -639,7 +639,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[Tn]+=1);const Ks={80:P`
 `,Og=k.span`
     ${rn}
     cursor: ${({$disabled:e})=>e?"not-allowed":"pointer"};
-`,Gl=({size:e="md",leftIcon:t,iconSize:n="sm",iconColor:r="currentColor",placeholder:o="Contraseña...",hasError:i=!1,disabled:s=!1,className:a,...l})=>{const[d,u]=f.useState(!1),c=()=>u(h=>!h);return m.jsxs(Ng,{$size:e,$hasError:i,$disabled:s,className:a,children:[t&&m.jsx(G,{component:t,size:n,color:s?"var(--color-dark-200)":r}),m.jsx(Bg,{type:d?"text":"password",placeholder:o,disabled:s,...l}),m.jsx(Og,{$disabled:s,onClick:s?void 0:c,children:m.jsx(G,{component:d?Vg:$g,size:n,color:s?"var(--color-dark-200)":r})})]})},Xl=e=>{const t=e.findIndex(n=>!n.disabled);return t!==-1?t:0},Fg=e=>{const t=e.map((n,r)=>({...n,index:r})).reverse().find(n=>!n.disabled)?.index;return t!==void 0?t:e.length-1},jg=(e,t,n)=>{let r=e;do r=(r+t+n.length)%n.length;while(n[r]?.disabled&&r!==e);return r},Rg=e=>({target:{value:String(e)}}),zg=(e,t)=>{if(t>=0&&e.current){const n=e.current.children[t];n&&n.scrollIntoView({block:"nearest",behavior:"smooth"})}},_g=(e,t)=>{if(typeof e=="string"||typeof e=="number"){const n=t.findIndex(r=>r.value===e);if(n!==-1&&!t[n].disabled)return n}return Xl(t)},Hg=k.div`
+`,Gl=({size:e="md",leftIcon:t,iconSize:n="sm",iconColor:r="currentColor",placeholder:o="Contraseña...",hasError:i=!1,disabled:s=!1,className:a,...l})=>{const[d,u]=f.useState(!1),c=()=>u(h=>!h);return m.jsxs(Ng,{$size:e,$hasError:i,$disabled:s,className:a,children:[t&&m.jsx(G,{component:t,size:n,color:s?"var(--color-dark-200)":r}),m.jsx(Bg,{type:d?"text":"password",placeholder:o,disabled:s,...l}),m.jsx(Og,{$disabled:s,onClick:s?void 0:c,children:m.jsx(G,{component:d?Vg:$g,size:n,color:s?"var(--color-dark-200)":r})})]})},Xl=e=>{const t=e.findIndex(n=>!n.disabled);return t!==-1?t:0},Fg=e=>{const t=e.map((n,r)=>({...n,index:r})).reverse().find(n=>!n.disabled)?.index;return t!==void 0?t:e.length-1},jg=(e,t,n)=>{let r=e;do r=(r+t+n.length)%n.length;while(n[r]?.disabled&&r!==e);return r},Rg=(e,t)=>({target:{value:String(e),name:t},currentTarget:{value:String(e),name:t}}),zg=(e,t)=>{if(t>=0&&e.current){const n=e.current.children[t];n&&n.scrollIntoView({block:"nearest",behavior:"smooth"})}},_g=(e,t)=>{if(typeof e=="string"||typeof e=="number"){const n=t.findIndex(r=>r.value===e);if(n!==-1&&!t[n].disabled)return n}return Xl(t)},Hg=k.div`
     position: relative;
     width: 100%;
 `,Ug=k.div`
@@ -718,7 +718,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[Tn]+=1);const Ks={80:P`
         ${z[18]}
     `,lg:P`
         ${z[18]}
-    `},Fo=f.forwardRef(({size:e="md",hasError:t=!1,disabled:n=!1,options:r=[],placeholder:o,onOptionSelect:i,onChange:s,value:a,name:l,className:d,inputClassName:u,optionsClassName:c,optionClassName:h},p)=>{const g=f.useRef(null),v=f.useRef(null),w=f.useRef(null),y=f.useRef(null),x=f.useId(),[b,E]=f.useState(!1),[T,S]=f.useState(-1),C=r.find(M=>M.value===a);f.useEffect(()=>{b&&v.current&&(v.current.focus(),S(_g(a,r)))},[b,r,a]),f.useEffect(()=>{zg(w,T)},[T]),f.useEffect(()=>{if(!b)return;const M=K=>{g.current&&(g.current.contains(K.target)||E(!1))};return document.addEventListener("mousedown",M),()=>document.removeEventListener("mousedown",M)},[b]),f.useEffect(()=>{b||requestAnimationFrame(()=>{p?.current?.focus?.(),y.current?.focus()})},[b,p]);const D=M=>{M.disabled||(i?.(M),s&&s(Rg(M.value)),E(!1),S(-1))},I=M=>{n||(M.key==="ArrowDown"||M.key==="ArrowUp"?(M.preventDefault(),E(!0)):(M.key==="Enter"||M.key===" ")&&(M.preventDefault(),E(K=>!K)))},_=M=>{if(M.key==="Escape"){M.preventDefault(),E(!1),S(-1);return}if(M.key==="ArrowDown"||M.key==="ArrowUp"){M.preventDefault();const K=M.key==="ArrowDown"?1:-1;S(jg(T,K,r))}else if(M.key==="Enter"){M.preventDefault();const K=r[T];K&&!K.disabled&&D(K)}else M.key==="Home"?(M.preventDefault(),S(Xl(r))):M.key==="End"&&(M.preventDefault(),S(Fg(r)))};return m.jsxs(Hg,{ref:g,className:d,children:[l&&m.jsx("input",{type:"hidden",name:l,value:C?.value??""}),m.jsx(Wg,{type:"button",$size:e,$hasError:t,$hasValue:!!C,$disabled:n,disabled:n,className:u,ref:M=>{y.current=M,typeof p=="function"?p(M):p&&"current"in p&&(p.current=M)},onClick:()=>!n&&E(M=>!M),onKeyDown:I,"aria-haspopup":"listbox","aria-expanded":b,"aria-controls":`${x}-listbox`,"aria-invalid":t||void 0,title:C?.label??o??"Select an option",children:C?.label??o??""}),m.jsx(Ug,{$size:e,$disabled:n,$open:b,children:m.jsx(G,{component:Ag,size:e==="sm"||e==="md"?"sm":"md",color:n?"var(--color-dark-200)":"var(--color-main-blue-primary)"})}),m.jsx(Nn,{children:b&&m.jsx(Kg,{ref:v,className:"custom-scrollbar",id:`${x}-listbox`,role:"listbox",tabIndex:0,"aria-activedescendant":T>=0?`${x}-option-${T}`:void 0,initial:{opacity:0,height:0,scaleY:.8},animate:{opacity:1,height:"auto",scaleY:1},exit:{opacity:0,height:0,scaleY:.8},transition:{duration:.25,ease:[.4,0,.2,1]},onKeyDown:_,children:m.jsx(Yg,{ref:w,className:c,children:r.map((M,K)=>{const W=K===T;return m.jsx(Gg,{id:`${x}-option-${K}`,className:h,role:"option",$size:e,"aria-selected":a===M.value,$active:W,$disabled:M.disabled,onMouseEnter:()=>{!M.disabled&&b&&S(K)},onClick:()=>D(M),children:M.label},M.value)})})})})]})});Fo.displayName="SelectInput";const qg=k.textarea`
+    `},Fo=f.forwardRef(({size:e="md",hasError:t=!1,disabled:n=!1,options:r=[],placeholder:o,onOptionSelect:i,onChange:s,value:a,name:l,className:d,inputClassName:u,optionsClassName:c,optionClassName:h},p)=>{const g=f.useRef(null),v=f.useRef(null),w=f.useRef(null),y=f.useRef(null),x=f.useId(),[b,E]=f.useState(!1),[T,S]=f.useState(-1),C=r.find(M=>M.value===a);f.useEffect(()=>{b&&v.current&&(v.current.focus(),S(_g(a,r)))},[b,r,a]),f.useEffect(()=>{zg(w,T)},[T]),f.useEffect(()=>{if(!b)return;const M=K=>{g.current&&(g.current.contains(K.target)||E(!1))};return document.addEventListener("mousedown",M),()=>document.removeEventListener("mousedown",M)},[b]),f.useEffect(()=>{b||requestAnimationFrame(()=>{p?.current?.focus?.(),y.current?.focus()})},[b,p]);const D=M=>{M.disabled||(i?.(M),s&&s(Rg(M.value,l)),E(!1),S(-1))},I=M=>{n||(M.key==="ArrowDown"||M.key==="ArrowUp"?(M.preventDefault(),E(!0)):(M.key==="Enter"||M.key===" ")&&(M.preventDefault(),E(K=>!K)))},_=M=>{if(M.key==="Escape"){M.preventDefault(),E(!1),S(-1);return}if(M.key==="ArrowDown"||M.key==="ArrowUp"){M.preventDefault();const K=M.key==="ArrowDown"?1:-1;S(jg(T,K,r))}else if(M.key==="Enter"){M.preventDefault();const K=r[T];K&&!K.disabled&&D(K)}else M.key==="Home"?(M.preventDefault(),S(Xl(r))):M.key==="End"&&(M.preventDefault(),S(Fg(r)))};return m.jsxs(Hg,{ref:g,className:d,children:[l&&m.jsx("input",{type:"hidden",name:l,value:C?.value??""}),m.jsx(Wg,{type:"button",$size:e,$hasError:t,$hasValue:!!C,$disabled:n,disabled:n,className:u,ref:M=>{y.current=M,typeof p=="function"?p(M):p&&"current"in p&&(p.current=M)},onClick:()=>!n&&E(M=>!M),onKeyDown:I,"aria-haspopup":"listbox","aria-expanded":b,"aria-controls":`${x}-listbox`,"aria-invalid":t||void 0,title:C?.label??o??"Select an option",children:C?.label??o??""}),m.jsx(Ug,{$size:e,$disabled:n,$open:b,children:m.jsx(G,{component:Ag,size:e==="sm"||e==="md"?"sm":"md",color:n?"var(--color-dark-200)":"var(--color-main-blue-primary)"})}),m.jsx(Nn,{children:b&&m.jsx(Kg,{ref:v,className:"custom-scrollbar",id:`${x}-listbox`,role:"listbox",tabIndex:0,"aria-activedescendant":T>=0?`${x}-option-${T}`:void 0,initial:{opacity:0,height:0,scaleY:.8},animate:{opacity:1,height:"auto",scaleY:1},exit:{opacity:0,height:0,scaleY:.8},transition:{duration:.25,ease:[.4,0,.2,1]},onKeyDown:_,children:m.jsx(Yg,{ref:w,className:c,children:r.map((M,K)=>{const W=K===T;return m.jsx(Gg,{id:`${x}-option-${K}`,className:h,role:"option",$size:e,"aria-selected":a===M.value,$active:W,$disabled:M.disabled,onMouseEnter:()=>{!M.disabled&&b&&S(K)},onClick:()=>D(M),children:M.label},M.value)})})})})]})});Fo.displayName="SelectInput";const qg=k.textarea`
     ${ct}
     ${({$size:e})=>Zg[e]}
     ${({$hasError:e})=>e&&dt}
@@ -1639,8 +1639,17 @@ See https://s-c.sh/2BAXzed for more info.`),window[Tn]+=1);const Ks={80:P`
 `,vy=k.main`
     flex: 1;
     margin-top: 4rem;
+    /* Mobile-first: no lateral offset so content occupies full width */
     margin-left: 0;
     padding: 1rem;
     overflow-y: auto;
-    margin-left: 5rem;
-`,by=({children:e,navigationConfig:t,userRoles:n=[],activePath:r,user:o,hasNotifications:i=!1,onNavigate:s,onNotificationClick:a,onUserProfileClick:l})=>m.jsxs(yy,{children:[m.jsx(Go,{navigationConfig:t,userRoles:n,onNavigate:s,activePath:r}),m.jsx(Qo,{user:o,hasNotifications:i,onNotificationClick:a,onUserProfileClick:l}),m.jsx(vy,{children:e})]}),wy=e=>m.jsx(lc,{children:m.jsx(by,{...e})});A.ALLOWED_INPUT_TYPES=Ul,A.BaseInput=Oo,A.Button=Lo,A.ButtonSpinner=zl,A.Card=lg,A.CardBody=hg,A.CardFooter=pg,A.CardHeader=dg,A.Checkbox=Gn,A.CheckboxInput=Ro,A.CheckboxLabel=Zl,A.Dialog=oc,A.DialogBody=ic,A.DialogFooter=ac,A.DialogHeader=sc,A.ErrorMessage=Bo,A.FormField=w0,A.FullScreenSpinner=Sm,A.Header=Qo,A.HeadingBold=Cn,A.HeadingRegular=Od,A.Icon=G,A.IconWrapperStyles=rn,A.Label=Kn,A.Layout=wy,A.Link=uc,A.PasswordInput=Gl,A.PinInput=zo,A.PinInputGroup=_o,A.RadioInput=Wo,A.RadioInputDot=Ho,A.RadioInputLabel=Uo,A.SearchInput=ql,A.SectionSpinner=Cm,A.SelectInput=Fo,A.Sidebar=Go,A.SidebarContext=Ko,A.SidebarProvider=lc,A.Spinner=Un,A.Table=vc,A.TableCell=Jo,A.TableHeaderCell=Zo,A.TermsAndConditions=D0,A.Text=kn,A.TextAreaInput=jo,A.ToastProvider=ng,A.baseContentTableStyles=Xo,A.baseFieldStyles=ct,A.baseInputStyles=Yn,A.baseTableCellsSizes=ut,A.createFieldConfig=Sg,A.createInputRefs=tc,A.disabledStyles=Ge,A.errorStyles=dt,A.flushedStyles=Wl,A.getPropsForInputType=Tg,A.handleDigitChange=Jl,A.handleKeyDown=Ql,A.handlePaste=ec,A.hasPermission=Yo,A.normalizeFieldTypes=wg,A.normalizeSelectOptions=xg,A.sizeStyles=nn,A.tableHoverMixin=fc,A.tableIconContainerStyles=qo,A.tableResponsiveMixin=pc,A.tableVariants=hc,A.validateCode=u0,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})}));
+
+    @media (min-width: 768px) {
+        padding: 1.25rem 1.5rem;
+        margin-left: 5rem;
+    }
+
+    @media (min-width: 1200px) {
+        margin-left: 5rem;
+    }
+`,by=({children:e,navigationConfig:t,userRoles:n=[],activePath:r,user:o,hasNotifications:i=!1,onNavigate:s,onNotificationClick:a,onUserProfileClick:l,contentClassName:d})=>m.jsxs(yy,{children:[m.jsx(Go,{navigationConfig:t,userRoles:n,onNavigate:s,activePath:r}),m.jsx(Qo,{user:o,hasNotifications:i,onNotificationClick:a,onUserProfileClick:l}),m.jsx(vy,{className:d,children:e})]}),wy=e=>m.jsx(lc,{children:m.jsx(by,{...e})});A.ALLOWED_INPUT_TYPES=Ul,A.BaseInput=Oo,A.Button=Lo,A.ButtonSpinner=zl,A.Card=lg,A.CardBody=hg,A.CardFooter=pg,A.CardHeader=dg,A.Checkbox=Gn,A.CheckboxInput=Ro,A.CheckboxLabel=Zl,A.Dialog=oc,A.DialogBody=ic,A.DialogFooter=ac,A.DialogHeader=sc,A.ErrorMessage=Bo,A.FormField=w0,A.FullScreenSpinner=Sm,A.Header=Qo,A.HeadingBold=Cn,A.HeadingRegular=Od,A.Icon=G,A.IconWrapperStyles=rn,A.Label=Kn,A.Layout=wy,A.Link=uc,A.PasswordInput=Gl,A.PinInput=zo,A.PinInputGroup=_o,A.RadioInput=Wo,A.RadioInputDot=Ho,A.RadioInputLabel=Uo,A.SearchInput=ql,A.SectionSpinner=Cm,A.SelectInput=Fo,A.Sidebar=Go,A.SidebarContext=Ko,A.SidebarProvider=lc,A.Spinner=Un,A.Table=vc,A.TableCell=Jo,A.TableHeaderCell=Zo,A.TermsAndConditions=D0,A.Text=kn,A.TextAreaInput=jo,A.ToastProvider=ng,A.baseContentTableStyles=Xo,A.baseFieldStyles=ct,A.baseInputStyles=Yn,A.baseTableCellsSizes=ut,A.createFieldConfig=Sg,A.createInputRefs=tc,A.disabledStyles=Ge,A.errorStyles=dt,A.flushedStyles=Wl,A.getPropsForInputType=Tg,A.handleDigitChange=Jl,A.handleKeyDown=Ql,A.handlePaste=ec,A.hasPermission=Yo,A.normalizeFieldTypes=wg,A.normalizeSelectOptions=xg,A.sizeStyles=nn,A.tableHoverMixin=fc,A.tableIconContainerStyles=qo,A.tableResponsiveMixin=pc,A.tableVariants=hc,A.validateCode=u0,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.9",
+  "version": "0.3.0",
   "description": "This package provides reusable UI components to ensure consistency across all CRM frontend applications",
   "author": "BizAppsTotal <bizapps@tcce.biz>",
   "type": "module",