@useloops/design-system 1.4.711 → 1.4.712

package/dist/WebCore/Pill.d.ts

@@ -1,2 +1,2 @@
 export { default } from '../systems/WebCore/Pill/Pill.js';
-export { PillProps } from '../systems/WebCore/Pill/types.js';
+export { PillProps, PillVariation } from '../systems/WebCore/Pill/types.js';

package/dist/WebCore.d.ts

@@ -69,7 +69,7 @@ export { default as Nudge, NudgeProps } from './systems/WebCore/Nudge/Nudge.js';
 export { default as NumberField } from './systems/WebCore/NumberField/NumberField.js';
 export { NumberFieldProps } from './systems/WebCore/NumberField/types.js';
 export { default as Pill } from './systems/WebCore/Pill/Pill.js';
-export { PillProps } from './systems/WebCore/Pill/types.js';
+export { PillProps, PillVariation } from './systems/WebCore/Pill/types.js';
 export { default as Popper, PopperProps } from './systems/WebCore/Popper/Popper.js';
 export { default as PoweredByWatermarkLogo } from './systems/WebCore/PoweredByWatermarkLogo/PoweredByWatermarkLogo.js';
 export { default as Progress, ProgressProps } from './systems/WebCore/Progress/Progress.js';

package/dist/esm/systems/Platform/Header/_partials/HeaderSearch.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{styled as n,Box as i,useTheme as r}from"@mui/material";import{motion as o}from"motion/react";import{useRef as a,useState as l,useEffect as s}from"react";import c from"../../../BrandCore/Icon/Icon.js";import d from"../../../WebCore/IconButton/IconButton.js";import"../../../BrandCore/primitiveVariables.js";import u from"../../../WebCore/TextField/TextField.js";const m=[.16,1,.3,1],p=({value:n,onChange:i,placeholder:o="Search…",open:p,defaultOpen:b=!1,onOpenChange:w,onSubmit:y,onClear:I,results:O,maxWidth:j=640,buttons:z,slotProps:B})=>{const E=r(),R=a(null),W=a(null),k=a(null),[F,M]=l(b),A=void 0!==p,S=A?p:F,[T,D]=l(null),G=e=>{A||M(e),w?.(e)};s(()=>{const e=()=>{const e=W.current,t=k.current;if(!e||!t)return;const n=e.parentElement?.parentElement??e,i=e.getBoundingClientRect(),r=t.getBoundingClientRect(),o=n.getBoundingClientRect(),a=i.left+i.width/2,l=r.left+r.width/2,s=o.left+o.width/2,c=Math.min(j,i.width),d=s-c/2,u=Math.max(i.left,Math.min(d,i.right-c))+c/2;D({width:r.width,closedOffset:l-a,openOffset:u-a})};e();const t=new ResizeObserver(e);return W.current&&t.observe(W.current),()=>t.disconnect()},[j]),s(()=>{S&&R.current?.focus()},[S]);const K=()=>G(!1),P=()=>{i?.(""),R.current&&(R.current.value="")};return e(h,{children:[e(f,{children:[t(d,{ref:k,icon:t(c,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-label":"Open search",onClick:()=>G(!0),sx:{opacity:S?0:1,pointerEvents:S?"none":"auto"}}),t(f,{"aria-hidden":S,initial:!1,animate:{opacity:S?0:1},transition:{duration:.6,ease:m},sx:{pointerEvents:S?"none":"auto"},children:z})]}),t(x,{ref:W,sx:{pointerEvents:S?"auto":"none"},children:T&&e(g,{initial:!1,animate:{width:S?j:T.width,x:S?T.openOffset:T.closedOffset,opacity:S?1:0},transition:{duration:.6,ease:m,opacity:{duration:S?0:.6,ease:m}},children:[t(v,{sx:{borderRadius:E.r.md},children:t(u,{fullWidth:!0,value:n,placeholder:o,inputRef:R,onChange:e=>i?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&K(),"Enter"===e.key&&y?.(R.current?.value??n??"")},startAdornment:t(c,{name:"search",size:20}),endAdornment:t(d,{icon:t(c,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{I?I({clear:P,collapse:K}):(P(),K())}}),...B?.textField})}),S&&O&&t(C,{children:O})]})})]})},h=n(i)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),f=n(o.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),x=n(i)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center"}),g=n(o.div)({position:"relative",maxWidth:"100%"}),v=n(i)({overflow:"hidden"}),C=n(i)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));export{p as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{styled as i,Box as n,useTheme as o}from"@mui/material";import{motion as r}from"motion/react";import{useRef as a,useState as s,useEffect as l}from"react";import d from"../../../BrandCore/Icon/Icon.js";import{space as u}from"../../../BrandCore/primitiveVariables.js";import c from"../../../WebCore/IconButton/IconButton.js";import h from"../../../WebCore/TextField/TextField.js";const p=.3,m=[.16,1,.3,1],f=u[500],g=({value:i,onChange:n,placeholder:r="Search…",open:u,defaultOpen:g=!1,onOpenChange:O,onSubmit:E,onClear:z,hideClearButton:B=!1,results:M,maxWidth:j=640,buttons:R,slotProps:W})=>{const S=o(),F=a(null),A=a(null),D=a(null),[K,T]=s(g),$=void 0!==u,G=$?u:K,[L,P]=s(null),V=e=>{$||T(e),O?.(e)};l(()=>{const e=()=>{const e=A.current,t=D.current;if(!e||!t)return;const i=e.parentElement?.parentElement??e,n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=i.getBoundingClientRect(),a=n.left+n.width/2,s=o.left+o.width/2,l=r.left+r.width/2,d=Math.min(j,n.width),u=l-d/2,c=Math.max(n.left,Math.min(u,n.right-d))+d/2;P({width:o.width,height:o.height,closedOffset:s-a,openOffset:c-a})};e();const t=new ResizeObserver(e);return A.current&&t.observe(A.current),()=>t.disconnect()},[j]),l(()=>{G&&F.current?.focus()},[G]);const Y=()=>V(!1),q=()=>{n?.(""),F.current&&(F.current.value="")};return e(v,{children:[e(x,{children:[t(c,{ref:D,icon:t(d,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-hidden":!0,tabIndex:-1,sx:{visibility:"hidden"}}),t(x,{"aria-hidden":G,initial:!1,animate:{opacity:G?0:1},transition:{duration:p,ease:m},sx:{pointerEvents:G?"none":"auto"},children:R})]}),t(b,{ref:A,children:L&&e(C,{initial:!1,animate:{width:G?j:L.width,height:G?f:L.height,x:G?L.openOffset:L.closedOffset},transition:{duration:p,ease:m},children:[e(w,{initial:!1,animate:{backgroundColor:G?S.custom.palette.input.default:S.custom.palette.surface.raised},transition:{duration:p,ease:m},role:G?void 0:"button","aria-label":G?void 0:"Open search",tabIndex:G?-1:0,onClick:()=>{G||V(!0)},onKeyDown:e=>{G||"Enter"!==e.key&&" "!==e.key||V(!0)},sx:{borderRadius:S.r.md,border:`1px solid ${S.custom.palette.stroke.default}`,cursor:G?void 0:"pointer","&::after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",transition:S.custom.easing.input},"&:hover::after":{backgroundColor:S.custom.palette.interaction.hover},"&:focus-within":G?{borderColor:S.custom.palette.stroke.focus,boxShadow:S.custom.boxShadow.input.focus}:void 0},children:[t(y,{initial:!1,animate:{left:G?10:(L.width-20)/2-1},transition:{duration:p,ease:m},children:t(d,{name:"search",size:20})}),t(I,{initial:!1,animate:{opacity:G?1:0},transition:{duration:.15,ease:m,delay:G?p/3:0},children:t(h,{fullWidth:!0,value:i,placeholder:r,inputRef:F,onChange:e=>n?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&Y(),"Enter"===e.key&&E?.(F.current?.value??i??"")},sx:{height:1,"& .MuiOutlinedInput-root, &:hover .MuiOutlinedInput-root":{height:1,backgroundColor:"transparent"},"& fieldset":{display:"none"},"& .MuiOutlinedInput-input":{paddingLeft:"38px",paddingRight:S.spacing(1)},"& .MuiInputAdornment-root .MuiSvgIcon-root":{width:16,height:16}},endAdornment:B?void 0:t(c,{icon:t(d,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{z?z({clear:q,collapse:Y}):(q(),Y())},sx:{width:24,height:24}}),...W?.textField})})]}),G&&M&&t(k,{children:M})]})})]})},v=i(n)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),x=i(r.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),b=i(n)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",pointerEvents:"none"}),C=i(r.div)({position:"relative",maxWidth:"100%",pointerEvents:"auto"}),w=i(r.div)({position:"relative",overflow:"hidden",height:"100%",display:"flex",alignItems:"center"}),y=i(r.div)({position:"absolute",top:"50%",transform:"translateY(-50%)",display:"flex",zIndex:1,pointerEvents:"none"}),I=i(r.div)({width:"100%",height:"100%",display:"flex",alignItems:"center",position:"relative",zIndex:1}),k=i(n)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));export{g as default};

package/dist/index.d.ts

@@ -148,7 +148,7 @@ export { default as Nudge, NudgeProps } from './systems/WebCore/Nudge/Nudge.js';
 export { default as NumberField } from './systems/WebCore/NumberField/NumberField.js';
 export { NumberFieldProps } from './systems/WebCore/NumberField/types.js';
 export { default as Pill } from './systems/WebCore/Pill/Pill.js';
-export { PillProps } from './systems/WebCore/Pill/types.js';
+export { PillProps, PillVariation } from './systems/WebCore/Pill/types.js';
 export { default as Popper, PopperProps } from './systems/WebCore/Popper/Popper.js';
 export { default as PoweredByWatermarkLogo } from './systems/WebCore/PoweredByWatermarkLogo/PoweredByWatermarkLogo.js';
 export { default as Progress, ProgressProps } from './systems/WebCore/Progress/Progress.js';

package/dist/systems/Platform/Header/_partials/HeaderSearch.d.ts

@@ -13,6 +13,7 @@ interface HeaderSearchProps {
         clear: () => void;
         collapse: () => void;
     }) => void;
+    hideClearButton?: boolean;
     results?: ReactNode;
     maxWidth?: number;
     buttons?: ReactNode;

package/dist/systems/Platform/Header/_partials/HeaderSearch.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),n=require("motion/react"),i=require("react"),r=require("../../../BrandCore/Icon/Icon.js"),s=require("../../../WebCore/IconButton/IconButton.js");require("../../../BrandCore/primitiveVariables.js");var o=require("../../../WebCore/TextField/TextField.js");const a=[.16,1,.3,1],l=t.styled(t.Box)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),u=t.styled(n.motion.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),d=t.styled(t.Box)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center"}),c=t.styled(n.motion.div)({position:"relative",maxWidth:"100%"}),h=t.styled(t.Box)({overflow:"hidden"}),f=t.styled(t.Box)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));module.exports=({value:n,onChange:x,placeholder:p="Search…",open:m,defaultOpen:v=!1,onOpenChange:j,onSubmit:g,onClear:y,results:C,maxWidth:b=640,buttons:w,slotProps:B})=>{const E=t.useTheme(),R=i.useRef(null),q=i.useRef(null),I=i.useRef(null),[O,z]=i.useState(v),W=void 0!==m,k=W?m:O,[S,F]=i.useState(null),M=e=>{W||z(e),j?.(e)};i.useEffect(()=>{const e=()=>{const e=q.current,t=I.current;if(!e||!t)return;const n=e.parentElement?.parentElement??e,i=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=n.getBoundingClientRect(),o=i.left+i.width/2,a=r.left+r.width/2,l=s.left+s.width/2,u=Math.min(b,i.width),d=l-u/2,c=Math.max(i.left,Math.min(d,i.right-u))+u/2;F({width:r.width,closedOffset:a-o,openOffset:c-o})};e();const t=new ResizeObserver(e);return q.current&&t.observe(q.current),()=>t.disconnect()},[b]),i.useEffect(()=>{k&&R.current?.focus()},[k]);const T=()=>M(!1),A=()=>{x?.(""),R.current&&(R.current.value="")};return e.jsxs(l,{children:[e.jsxs(u,{children:[e.jsx(s,{ref:I,icon:e.jsx(r.default,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-label":"Open search",onClick:()=>M(!0),sx:{opacity:k?0:1,pointerEvents:k?"none":"auto"}}),e.jsx(u,{"aria-hidden":k,initial:!1,animate:{opacity:k?0:1},transition:{duration:.6,ease:a},sx:{pointerEvents:k?"none":"auto"},children:w})]}),e.jsx(d,{ref:q,sx:{pointerEvents:k?"auto":"none"},children:S&&e.jsxs(c,{initial:!1,animate:{width:k?b:S.width,x:k?S.openOffset:S.closedOffset,opacity:k?1:0},transition:{duration:.6,ease:a,opacity:{duration:k?0:.6,ease:a}},children:[e.jsx(h,{sx:{borderRadius:E.r.md},children:e.jsx(o,{fullWidth:!0,value:n,placeholder:p,inputRef:R,onChange:e=>x?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&T(),"Enter"===e.key&&g?.(R.current?.value??n??"")},startAdornment:e.jsx(r.default,{name:"search",size:20}),endAdornment:e.jsx(s,{icon:e.jsx(r.default,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{y?y({clear:A,collapse:T}):(A(),T())}}),...B?.textField})}),k&&C&&e.jsx(f,{children:C})]})})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("motion/react"),n=require("react"),o=require("../../../BrandCore/Icon/Icon.js"),r=require("../../../BrandCore/primitiveVariables.js"),s=require("../../../WebCore/IconButton/IconButton.js"),a=require("../../../WebCore/TextField/TextField.js");const l=.3,d=[.16,1,.3,1],u=r.space[500],c=t.styled(t.Box)(({theme:e})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"flex-end",gap:e.p.sm,flexGrow:1,minWidth:0})),h=t.styled(i.motion.div)(({theme:e})=>({display:"flex",alignItems:"center",gap:e.p.sm})),p=t.styled(t.Box)({position:"absolute",inset:0,display:"flex",justifyContent:"center",alignItems:"center",pointerEvents:"none"}),f=t.styled(i.motion.div)({position:"relative",maxWidth:"100%",pointerEvents:"auto"}),m=t.styled(i.motion.div)({position:"relative",overflow:"hidden",height:"100%",display:"flex",alignItems:"center"}),x=t.styled(i.motion.div)({position:"absolute",top:"50%",transform:"translateY(-50%)",display:"flex",zIndex:1,pointerEvents:"none"}),g=t.styled(i.motion.div)({width:"100%",height:"100%",display:"flex",alignItems:"center",position:"relative",zIndex:1}),v=t.styled(t.Box)(({theme:e})=>({position:"absolute",top:`calc(100% + ${e.p.xs})`,left:0,right:0,zIndex:1e3}));module.exports=({value:i,onChange:r,placeholder:y="Search…",open:b,defaultOpen:j=!1,onOpenChange:C,onSubmit:w,onClear:I,hideClearButton:E=!1,results:k,maxWidth:B=640,buttons:O,slotProps:R})=>{const z=t.useTheme(),q=n.useRef(null),M=n.useRef(null),S=n.useRef(null),[W,F]=n.useState(j),T=void 0!==b,A=T?b:W,[D,K]=n.useState(null),$=e=>{T||F(e),C?.(e)};n.useEffect(()=>{const e=()=>{const e=M.current,t=S.current;if(!e||!t)return;const i=e.parentElement?.parentElement??e,n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),r=i.getBoundingClientRect(),s=n.left+n.width/2,a=o.left+o.width/2,l=r.left+r.width/2,d=Math.min(B,n.width),u=l-d/2,c=Math.max(n.left,Math.min(u,n.right-d))+d/2;K({width:o.width,height:o.height,closedOffset:a-s,openOffset:c-s})};e();const t=new ResizeObserver(e);return M.current&&t.observe(M.current),()=>t.disconnect()},[B]),n.useEffect(()=>{A&&q.current?.focus()},[A]);const G=()=>$(!1),L=()=>{r?.(""),q.current&&(q.current.value="")};return e.jsxs(c,{children:[e.jsxs(h,{children:[e.jsx(s,{ref:S,icon:e.jsx(o.default,{name:"search",size:20}),sizing:"md",variation:"outlined","aria-hidden":!0,tabIndex:-1,sx:{visibility:"hidden"}}),e.jsx(h,{"aria-hidden":A,initial:!1,animate:{opacity:A?0:1},transition:{duration:l,ease:d},sx:{pointerEvents:A?"none":"auto"},children:O})]}),e.jsx(p,{ref:M,children:D&&e.jsxs(f,{initial:!1,animate:{width:A?B:D.width,height:A?u:D.height,x:A?D.openOffset:D.closedOffset},transition:{duration:l,ease:d},children:[e.jsxs(m,{initial:!1,animate:{backgroundColor:A?z.custom.palette.input.default:z.custom.palette.surface.raised},transition:{duration:l,ease:d},role:A?void 0:"button","aria-label":A?void 0:"Open search",tabIndex:A?-1:0,onClick:()=>{A||$(!0)},onKeyDown:e=>{A||"Enter"!==e.key&&" "!==e.key||$(!0)},sx:{borderRadius:z.r.md,border:`1px solid ${z.custom.palette.stroke.default}`,cursor:A?void 0:"pointer","&::after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",transition:z.custom.easing.input},"&:hover::after":{backgroundColor:z.custom.palette.interaction.hover},"&:focus-within":A?{borderColor:z.custom.palette.stroke.focus,boxShadow:z.custom.boxShadow.input.focus}:void 0},children:[e.jsx(x,{initial:!1,animate:{left:A?10:(D.width-20)/2-1},transition:{duration:l,ease:d},children:e.jsx(o.default,{name:"search",size:20})}),e.jsx(g,{initial:!1,animate:{opacity:A?1:0},transition:{duration:.15,ease:d,delay:A?l/3:0},children:e.jsx(a,{fullWidth:!0,value:i,placeholder:y,inputRef:q,onChange:e=>r?.(e.target.value),onKeyDown:e=>{"Escape"===e.key&&G(),"Enter"===e.key&&w?.(q.current?.value??i??"")},sx:{height:1,"& .MuiOutlinedInput-root, &:hover .MuiOutlinedInput-root":{height:1,backgroundColor:"transparent"},"& fieldset":{display:"none"},"& .MuiOutlinedInput-input":{paddingLeft:"38px",paddingRight:z.spacing(1)},"& .MuiInputAdornment-root .MuiSvgIcon-root":{width:16,height:16}},endAdornment:E?void 0:e.jsx(s,{icon:e.jsx(o.default,{name:"close",size:16}),sizing:"xs",shape:"round",variation:"default","aria-label":"Close search",onClick:()=>{I?I({clear:L,collapse:G}):(L(),G())},sx:{width:24,height:24}}),...R?.textField})})]}),A&&k&&e.jsx(v,{children:k})]})})]})};

package/dist/theme/theme.hooks.d.ts

@@ -4,7 +4,7 @@ import { PaletteMode, Direction } from '@mui/material';
 import { ScreenSize, CustomTheme } from './types.js';
 
 declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
-    breakpoint: "" | "sm" | "lg" | "md" | "xl";
+    breakpoint: "" | "sm" | "md" | "lg" | "xl";
     custom: CustomTheme;
     gridOverlayVisible: boolean;
     mode: PaletteMode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@useloops/design-system",
-    "version": "1.4.711",
+    "version": "1.4.712",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",