@useloops/design-system 1.4.697 → 1.4.698

package/dist/esm/systems/Platform/CommentFeedbackCard/CommentFeedbackCard.js

@@ -1 +1 @@
-import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useTheme as e,Stack as t,Box as i}from"@mui/material";import c from"../../WebCore/TintedSurface/TintedSurface.js";const n=({children:n,colorScheme:l="info",headSection:d,slotProps:m})=>(e(),o(c,{colorScheme:l,slotProps:{root:m?.root},...m?.root,children:r(t,{sx:{gap:2},children:[d&&o(i,{...m?.headSection,children:d}),o(i,{...m?.children,children:n})]})}));export{n as default};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Box as t}from"@mui/material";import{AnimatePresence as o,motion as n}from"motion/react";import r from"../../WebCore/TintedSurface/TintedSurface.js";import{Text as a}from"../../WebCore/Text/Text.js";const c={duration:.25,ease:"easeInOut"},l=({children:l,colorScheme:s="info",headSection:d,loading:m,loadingText:p="Loading",slotProps:h})=>e(r,{colorScheme:s,slotProps:{root:h?.root},children:i(t,{sx:{position:"relative"},children:[e(o,{initial:!1,children:m&&e(t,{component:n.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:c,sx:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center"},children:e(a,{children:p})},"loading")}),i(t,{component:n.div,animate:{opacity:m?0:1},transition:c,style:{pointerEvents:m?"none":"auto"},sx:{display:"flex",flexDirection:"column",gap:2},children:[d&&e(t,{...h?.headSection,children:d}),e(t,{...h?.children,children:l})]})]})});export{l as default};

package/dist/esm/systems/WebCore/CheckboxGroup/CheckboxGroup.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{FormGroup as o,Box as i}from"@mui/material";import{useMemo as n}from"react";import r from"../FormControlLabel/FormControlLabel.js";import a from"../Checkbox/StyledCheckbox.js";import c from"../TextField/TextField.js";const s=({sizing:s,options:u,other:d,internalChange:h,value:m,inputRef:f,onChange:p,maxSelections:b,noneOfTheseOption:g})=>{const x=d?.name||"other-option",C=g?.value||"none-of-these-option",v=`${x}-value-`,k=e=>`${v}${e}`,M=d?.enabled,F=m?.includes(x)&&M,j=m?.find(e=>e.includes(v)),y=n(()=>m?m.filter(e=>!e.startsWith(v)).length:0,[m,v]),z=!!b&&y>=b;if(!m)return e("div",{});const S=(e,l)=>{const t=m.includes(e);if(!t&&z&&!l)return;let o;t?o=m.filter(l=>l!==e):l?o=[e]:(o=[...new Set(m),e],o=o.filter(e=>!u.find(l=>l?.exclusive&&e===l.value)),g&&(o=o.filter(e=>e!==C))),d?.enabled&&(l?o=o.filter(e=>e!==x&&!e.includes(v)):e===x&&t&&(o=o.filter(e=>!e.includes(v)))),p(o),h&&h()},T=(e,l)=>!l&&(z&&!m.includes(e));return l(t,{children:[l(o,{sx:{display:"flex",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:not(.Mui-disabled):hover":{"& .MuiCheckbox-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},children:[u?.map(l=>{const t=l.value,o=T(t,l.exclusive);return e(r,{sx:{"& .MuiButtonBase-root.MuiCheckbox-root":{alignSelf:"baseline"},"& .MuiTypography-root":{mt:"default"!==s?.5:0}},onChange:()=>S(t,l.exclusive),checked:m.includes(t),disabled:o,control:e(a,{sizing:s,disabled:o}),label:l.label},t)}),M&&e(r,{inputRef:f,onChange:()=>S(x),label:d?.label||"Other",checked:m.includes(x),disabled:T(x),control:e(a,{sizing:s})},x),g&&e(r,{onChange:()=>S(C,!0),checked:m.includes(C),control:e(a,{sizing:s}),label:g.label},C)]}),F&&e(i,{sx:{mt:1},children:e(c,{fullWidth:!0,autoFocus:!0,defaultValue:j?j.replace(v,""):"",placeholder:d?.placeholder,onChange:e=>{const l=m.find(e=>e.includes(v)),t=(l?m.map(l=>l.includes(v)?k(e.target.value):l):[...m,k(e.target.value)]).filter(e=>e!==v);p(t),h&&h()},required:!0})})]})};export{s as default};
+import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{FormGroup as o,Box as i}from"@mui/material";import{useMemo as n}from"react";import r from"../FormControlLabel/FormControlLabel.js";import a from"../Checkbox/StyledCheckbox.js";import c from"../TextField/TextField.js";const s=({sizing:s,options:u,other:d,internalChange:h,value:m,inputRef:f,onChange:p,maxSelections:b,noneOfTheseOption:g})=>{const x=d?.name||"other-option",C=g?.value||"none-of-these-option",v=`${x}-value-`,k=e=>`${v}${e}`,M=d?.enabled,F=m?.includes(x)&&M,j=m?.find(e=>e.includes(v)),y=n(()=>m?m.filter(e=>!e.startsWith(v)).length:0,[m,v]),z=!!b&&y>=b;if(!m)return e("div",{});const S=(e,l)=>{const t=m.includes(e);if(!t&&z&&!l)return;let o;t?o=m.filter(l=>l!==e):l?o=[e]:(o=[...new Set(m),e],o=o.filter(e=>!u.find(l=>l?.exclusive&&e===l.value)),g&&(o=o.filter(e=>e!==C))),d?.enabled&&(l?o=o.filter(e=>e!==x&&!e.includes(v)):e===x&&t&&(o=o.filter(e=>!e.includes(v)))),p(o),h&&h()},T=(e,l)=>!l&&(z&&!m.includes(e));return l(t,{children:[l(o,{sx:{display:"flex",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:not(.Mui-disabled):hover":{"& .MuiCheckbox-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},children:[u?.map(l=>{const t=l.value,o=T(t,l.exclusive);return e(r,{sx:{"& .MuiButtonBase-root.MuiCheckbox-root":{alignSelf:"baseline"},"& .MuiTypography-root":{mt:0}},onChange:()=>S(t,l.exclusive),checked:m.includes(t),disabled:o,control:e(a,{sizing:s,disabled:o}),label:l.label},t)}),M&&e(r,{inputRef:f,onChange:()=>S(x),label:d?.label||"Other",checked:m.includes(x),disabled:T(x),control:e(a,{sizing:s})},x),g&&e(r,{onChange:()=>S(C,!0),checked:m.includes(C),control:e(a,{sizing:s}),label:g.label},C)]}),F&&e(i,{sx:{mt:1},children:e(c,{fullWidth:!0,autoFocus:!0,defaultValue:j?j.replace(v,""):"",placeholder:d?.placeholder,onChange:e=>{const l=m.find(e=>e.includes(v)),t=(l?m.map(l=>l.includes(v)?k(e.target.value):l):[...m,k(e.target.value)]).filter(e=>e!==v);p(t),h&&h()},required:!0})})]})};export{s as default};

package/dist/systems/Platform/CommentFeedbackCard/CommentFeedbackCard.d.ts

@@ -6,6 +6,8 @@ import { TintedSurfaceProps } from 'systems/WebCore/TintedSurface';
 interface CommentFeedbackCardProps extends PropsWithChildren {
     colorScheme?: TintedSurfaceProps['colorScheme'];
     headSection?: ReactNode;
+    loading?: boolean;
+    loadingText?: ReactNode;
     slotProps?: {
         root?: Omit<SurfaceProps, 'children'>;
         headSection?: BoxProps;

package/dist/systems/Platform/CommentFeedbackCard/CommentFeedbackCard.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),o=require("../../WebCore/TintedSurface/TintedSurface.js");module.exports=({children:i,colorScheme:c="info",headSection:s,slotProps:t})=>(r.useTheme(),e.jsx(o,{colorScheme:c,slotProps:{root:t?.root},...t?.root,children:e.jsxs(r.Stack,{sx:{gap:2},children:[s&&e.jsx(r.Box,{...t?.headSection,children:s}),e.jsx(r.Box,{...t?.children,children:i})]})}));
+"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material"),o=require("motion/react"),t=require("../../WebCore/TintedSurface/TintedSurface.js"),n=require("../../WebCore/Text/Text.js");const r={duration:.25,ease:"easeInOut"};module.exports=({children:s,colorScheme:a="info",headSection:c,loading:l,loadingText:x="Loading",slotProps:d})=>e.jsx(t,{colorScheme:a,slotProps:{root:d?.root},children:e.jsxs(i.Box,{sx:{position:"relative"},children:[e.jsx(o.AnimatePresence,{initial:!1,children:l&&e.jsx(i.Box,{component:o.motion.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:r,sx:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx(n.Text,{children:x})},"loading")}),e.jsxs(i.Box,{component:o.motion.div,animate:{opacity:l?0:1},transition:r,style:{pointerEvents:l?"none":"auto"},sx:{display:"flex",flexDirection:"column",gap:2},children:[c&&e.jsx(i.Box,{...d?.headSection,children:c}),e.jsx(i.Box,{...d?.children,children:s})]})]})});

package/dist/systems/WebCore/CheckboxGroup/CheckboxGroup.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),l=require("@mui/material"),i=require("react"),t=require("../FormControlLabel/FormControlLabel.js"),n=require("../Checkbox/StyledCheckbox.js"),r=require("../TextField/TextField.js");module.exports=({sizing:o,options:s,other:a,internalChange:u,value:c,inputRef:d,onChange:h,maxSelections:x,noneOfTheseOption:b})=>{const f=a?.name||"other-option",m=b?.value||"none-of-these-option",p=`${f}-value-`,g=e=>`${p}${e}`,j=a?.enabled,v=c?.includes(f)&&j,C=c?.find(e=>e.includes(p)),k=i.useMemo(()=>c?c.filter(e=>!e.startsWith(p)).length:0,[c,p]),q=!!x&&k>=x;if(!c)return e.jsx("div",{});const F=(e,l)=>{const i=c.includes(e);if(!i&&q&&!l)return;let t;i?t=c.filter(l=>l!==e):l?t=[e]:(t=[...new Set(c),e],t=t.filter(e=>!s.find(l=>l?.exclusive&&e===l.value)),b&&(t=t.filter(e=>e!==m))),a?.enabled&&(l?t=t.filter(e=>e!==f&&!e.includes(p)):e===f&&i&&(t=t.filter(e=>!e.includes(p)))),h(t),u&&u()},M=(e,l)=>!l&&(q&&!c.includes(e));return e.jsxs(e.Fragment,{children:[e.jsxs(l.FormGroup,{sx:{display:"flex",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:not(.Mui-disabled):hover":{"& .MuiCheckbox-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},children:[s?.map(l=>{const i=l.value,r=M(i,l.exclusive);return e.jsx(t,{sx:{"& .MuiButtonBase-root.MuiCheckbox-root":{alignSelf:"baseline"},"& .MuiTypography-root":{mt:"default"!==o?.5:0}},onChange:()=>F(i,l.exclusive),checked:c.includes(i),disabled:r,control:e.jsx(n,{sizing:o,disabled:r}),label:l.label},i)}),j&&e.jsx(t,{inputRef:d,onChange:()=>F(f),label:a?.label||"Other",checked:c.includes(f),disabled:M(f),control:e.jsx(n,{sizing:o})},f),b&&e.jsx(t,{onChange:()=>F(m,!0),checked:c.includes(m),control:e.jsx(n,{sizing:o}),label:b.label},m)]}),v&&e.jsx(l.Box,{sx:{mt:1},children:e.jsx(r,{fullWidth:!0,autoFocus:!0,defaultValue:C?C.replace(p,""):"",placeholder:a?.placeholder,onChange:e=>{const l=c.find(e=>e.includes(p)),i=(l?c.map(l=>l.includes(p)?g(e.target.value):l):[...c,g(e.target.value)]).filter(e=>e!==p);h(i),u&&u()},required:!0})})]})};
+"use strict";var e=require("react/jsx-runtime"),l=require("@mui/material"),i=require("react"),t=require("../FormControlLabel/FormControlLabel.js"),n=require("../Checkbox/StyledCheckbox.js"),r=require("../TextField/TextField.js");module.exports=({sizing:o,options:s,other:a,internalChange:u,value:c,inputRef:d,onChange:h,maxSelections:x,noneOfTheseOption:b})=>{const m=a?.name||"other-option",p=b?.value||"none-of-these-option",f=`${m}-value-`,g=e=>`${f}${e}`,j=a?.enabled,v=c?.includes(m)&&j,C=c?.find(e=>e.includes(f)),k=i.useMemo(()=>c?c.filter(e=>!e.startsWith(f)).length:0,[c,f]),q=!!x&&k>=x;if(!c)return e.jsx("div",{});const F=(e,l)=>{const i=c.includes(e);if(!i&&q&&!l)return;let t;i?t=c.filter(l=>l!==e):l?t=[e]:(t=[...new Set(c),e],t=t.filter(e=>!s.find(l=>l?.exclusive&&e===l.value)),b&&(t=t.filter(e=>e!==p))),a?.enabled&&(l?t=t.filter(e=>e!==m&&!e.includes(f)):e===m&&i&&(t=t.filter(e=>!e.includes(f)))),h(t),u&&u()},M=(e,l)=>!l&&(q&&!c.includes(e));return e.jsxs(e.Fragment,{children:[e.jsxs(l.FormGroup,{sx:{display:"flex",gap:e=>e.custom.margin.sm,label:{"&:last-child":{mb:0},"&:not(.Mui-disabled):hover":{"& .MuiCheckbox-root":{backgroundColor:e=>e.custom.palette.interaction.hover,"&.Mui-checked":{backgroundColor:e=>e.custom.palette.purple[500]}}}}},children:[s?.map(l=>{const i=l.value,r=M(i,l.exclusive);return e.jsx(t,{sx:{"& .MuiButtonBase-root.MuiCheckbox-root":{alignSelf:"baseline"},"& .MuiTypography-root":{mt:0}},onChange:()=>F(i,l.exclusive),checked:c.includes(i),disabled:r,control:e.jsx(n,{sizing:o,disabled:r}),label:l.label},i)}),j&&e.jsx(t,{inputRef:d,onChange:()=>F(m),label:a?.label||"Other",checked:c.includes(m),disabled:M(m),control:e.jsx(n,{sizing:o})},m),b&&e.jsx(t,{onChange:()=>F(p,!0),checked:c.includes(p),control:e.jsx(n,{sizing:o}),label:b.label},p)]}),v&&e.jsx(l.Box,{sx:{mt:1},children:e.jsx(r,{fullWidth:!0,autoFocus:!0,defaultValue:C?C.replace(f,""):"",placeholder:a?.placeholder,onChange:e=>{const l=c.find(e=>e.includes(f)),i=(l?c.map(l=>l.includes(f)?g(e.target.value):l):[...c,g(e.target.value)]).filter(e=>e!==f);h(i),u&&u()},required:!0})})]})};

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" | "md" | "lg" | "xl";
+    breakpoint: "" | "sm" | "lg" | "md" | "xl";
     custom: CustomTheme;
     gridOverlayVisible: boolean;
     mode: PaletteMode;

package/package.json

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