@pautena/react-design-system 0.14.0 → 0.14.2

package/expandable-alert/index.js

@@ -1,2 +1,2 @@
-import{Typography as e,Link as t,useTheme as o,Paper as n,Box as r,IconButton as a,Tooltip as i,alertClasses as m,Alert as l,AlertTitle as c,Collapse as p}from"@mui/material";import s from"@mui/icons-material/ExpandMore";import E from"@mui/icons-material/ExpandLess";import x from"@mui/icons-material/Close";import u,{forwardRef as f,useState as h}from"react";import{blueGrey as g}from"@mui/material/colors";import d from"markdown-to-jsx";import y from"@mui/icons-material/ContentCopy";const C={overrides:{h1:{component:e,props:{gutterBottom:!0,variant:"h5"}},h2:{component:e,props:{gutterBottom:!0,variant:"h6"}},h3:{component:e,props:{gutterBottom:!0,variant:"subtitle1"}},h4:{component:e,props:{gutterBottom:!0,variant:"caption",paragraph:!0}},p:{component:e,props:{paragraph:!0}},a:{component:t},li:{component:"li"}}},v=({content:e,options:t=C})=>u.createElement(d,{options:t},e),w=({markdown:t,content:m,spacing:l=0,children:c,sx:p})=>{const{spacing:s,typography:E}=o();let x,f;t?x=t||"":Array.isArray(m)?(f=m.map(((t,o)=>u.createElement(e,{key:o,sx:{pb:l}},t))),x=m.join("\n")):(f=u.createElement(e,null,m),x=m||"");const h=t&&u.createElement(v,{content:t});return u.createElement(n,{sx:{position:"relative",pl:2,pr:4,py:1,backgroundColor:g[800],color:"white",...p}},u.createElement(r,{display:"flex",flexDirection:"row"},u.createElement(r,{width:1},c||h||f),u.createElement(r,{sx:{position:"absolute",top:s(.5),right:s(.5)}},x&&u.createElement(a,{"aria-label":"copy board content",color:"inherit",onClick:()=>navigator.clipboard.writeText(x)},u.createElement(i,{title:"Copy"},u.createElement(y,{sx:{fontSize:E.pxToRem(18)}}))))))},b={[`& .${m.message}`]:{width:1}},k=f((({severity:e,iconMapping:t,title:o,message:n,metadata:i,metadataComponent:m,onClose:f,sx:g={}},d)=>{const[y,C]=h(!1);return u.createElement(l,{ref:d,severity:e,iconMapping:t,onClose:f,action:u.createElement(r,{display:"flex",flexDirection:"column"},u.createElement(a,{color:"inherit",onClick:f},u.createElement(x,{fontSize:"small"})),i&&u.createElement(a,{color:"inherit",onClick:()=>C((e=>!e))},y?u.createElement(E,{fontSize:"small"}):u.createElement(s,{fontSize:"small"}))),sx:{...b,...g}},u.createElement(r,{sx:{w:1}},o&&u.createElement(c,null,o),n,i&&u.createElement(p,{in:y,sx:{mt:2}},u.createElement(w,{content:i},m))))}));export{k as ExpandableAlert};
+import{jsx as o,jsxs as r}from"react/jsx-runtime";import i,{alertClasses as t}from"@mui/material/Alert";import e from"@mui/material/Box";import n from"@mui/material/Collapse";import m from"@mui/material/IconButton";import a from"@mui/material/AlertTitle";import l from"@mui/icons-material/ExpandMore";import p from"@mui/icons-material/ExpandLess";import c from"@mui/icons-material/Close";import{forwardRef as s,useState as h}from"react";import d from"@mui/material/Paper";import u from"@mui/material/Tooltip";import f from"@mui/material/Typography";import{useTheme as x}from"@mui/material/styles";import{blueGrey as g}from"@mui/material/colors";import y from"@mui/material/Link";import C from"markdown-to-jsx";import v from"@mui/icons-material/ContentCopy";const w={overrides:{h1:{component:f,props:{gutterBottom:!0,variant:"h5"}},h2:{component:f,props:{gutterBottom:!0,variant:"h6"}},h3:{component:f,props:{gutterBottom:!0,variant:"subtitle1"}},h4:{component:f,props:{gutterBottom:!0,variant:"caption",paragraph:!0}},p:{component:f,props:{paragraph:!0}},a:{component:y},li:{component:"li"}}},b=({content:r,options:i=w})=>o(C,{options:i,children:r}),k=({markdown:i,content:t,spacing:n=0,children:a,sx:l})=>{const{spacing:p,typography:c}=x();let s,h;i?s=i||"":Array.isArray(t)?(h=t.map(((r,i)=>o(f,{sx:{pb:n},children:r},i))),s=t.join("\n")):(h=o(f,{children:t}),s=t||"");const y=i&&o(b,{content:i});return o(d,{sx:{position:"relative",pl:2,pr:4,py:1,backgroundColor:g[800],color:"white",...l},children:r(e,{display:"flex",flexDirection:"row",children:[o(e,{width:1,children:a||y||h}),o(e,{sx:{position:"absolute",top:p(.5),right:p(.5)},children:s&&o(m,{"aria-label":"copy board content",color:"inherit",onClick:()=>navigator.clipboard.writeText(s),children:o(u,{title:"Copy",children:o(v,{sx:{fontSize:c.pxToRem(18)}})})})})]})})},B={[`& .${t.message}`]:{width:1}},T=s((({severity:t,iconMapping:s,title:d,message:u,metadata:f,metadataComponent:x,onClose:g,sx:y={}},C)=>{const[v,w]=h(!1);return o(i,{ref:C,severity:t,iconMapping:s,onClose:g,action:r(e,{display:"flex",flexDirection:"column",children:[o(m,{color:"inherit",onClick:g,children:o(c,{fontSize:"small"})}),f&&o(m,{color:"inherit",onClick:()=>w((o=>!o)),children:o(v?p:l,{fontSize:"small"})})]}),sx:{...B,...y},children:r(e,{sx:{w:1},children:[d&&o(a,{children:d}),u,f&&o(n,{in:v,sx:{mt:2},children:o(k,{content:f,children:x})})]})})}));export{T as ExpandableAlert};
 //# sourceMappingURL=index.js.map

package/expandable-alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/markdown/markdown.tsx","../../src/board/board.tsx","../../src/expandable-alert/expandable-alert.tsx"],"sourcesContent":["import { Typography, Link } from \"@mui/material\";\nimport React from \"react\";\nimport ReactMarkdown, { MarkdownToJSX } from \"markdown-to-jsx\";\n\nexport interface MarkdownProps {\n  content: string;\n  options?: MarkdownToJSX.Options;\n}\n\nexport const markdownDefaultOptions: MarkdownToJSX.Options = {\n  overrides: {\n    h1: {\n      component: Typography,\n      props: {\n        gutterBottom: true,\n        variant: \"h5\",\n      },\n    },\n    h2: { component: Typography, props: { gutterBottom: true, variant: \"h6\" } },\n    h3: {\n      component: Typography,\n      props: { gutterBottom: true, variant: \"subtitle1\" },\n    },\n    h4: {\n      component: Typography,\n      props: { gutterBottom: true, variant: \"caption\", paragraph: true },\n    },\n    p: { component: Typography, props: { paragraph: true } },\n    a: { component: Link },\n    li: {\n      component: \"li\",\n    },\n  },\n};\n\nexport const Markdown = ({ content, options = markdownDefaultOptions }: MarkdownProps) => {\n  return <ReactMarkdown options={options}>{content}</ReactMarkdown>;\n};\n","import {\n  Box,\n  IconButton,\n  Paper,\n  SxProps,\n  Theme,\n  Tooltip,\n  Typography,\n  useTheme,\n} from \"@mui/material\";\nimport { blueGrey } from \"@mui/material/colors\";\nimport React, { PropsWithChildren, ReactNode } from \"react\";\nimport { Markdown } from \"../markdown\";\nimport ContentCopyIcon from \"@mui/icons-material/ContentCopy\";\n\nexport type BoardProps = PropsWithChildren<{\n  markdown?: string;\n  content?: string | string[];\n  spacing?: 0 | 1 | 2 | 3 | 4 | 5;\n  sx?: SxProps<Theme>;\n}>;\n\nexport const Board = ({\n  markdown: markdownProps,\n  content: contentProp,\n  spacing = 0,\n  children,\n  sx,\n}: BoardProps) => {\n  const { spacing: themeSpacing, typography } = useTheme();\n  let copyContent: string;\n  let content: ReactNode;\n\n  if (markdownProps) {\n    copyContent = markdownProps || \"\";\n  } else if (Array.isArray(contentProp)) {\n    content = contentProp.map((line, i) => (\n      <Typography key={i} sx={{ pb: spacing }}>\n        {line}\n      </Typography>\n    ));\n    copyContent = contentProp.join(\"\\n\");\n  } else {\n    content = <Typography>{contentProp}</Typography>;\n    copyContent = contentProp || \"\";\n  }\n\n  const markdown = markdownProps && <Markdown content={markdownProps} />;\n\n  return (\n    <Paper\n      sx={{\n        position: \"relative\",\n        pl: 2,\n        pr: 4,\n        py: 1,\n        backgroundColor: blueGrey[800],\n        color: \"white\",\n        ...sx,\n      }}\n    >\n      <Box display=\"flex\" flexDirection=\"row\">\n        <Box width={1}>{children || markdown || content}</Box>\n        <Box sx={{ position: \"absolute\", top: themeSpacing(0.5), right: themeSpacing(0.5) }}>\n          {copyContent && (\n            <IconButton\n              aria-label=\"copy board content\"\n              color=\"inherit\"\n              onClick={() => navigator.clipboard.writeText(copyContent)}\n            >\n              <Tooltip title=\"Copy\">\n                <ContentCopyIcon sx={{ fontSize: typography.pxToRem(18) }} />\n              </Tooltip>\n            </IconButton>\n          )}\n        </Box>\n      </Box>\n    </Paper>\n  );\n};\n","import {\n  Alert,\n  alertClasses,\n  AlertColor,\n  AlertTitle,\n  Box,\n  Collapse,\n  IconButton,\n  SxProps,\n  Theme,\n} from \"@mui/material\";\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\nimport ExpandLessIcon from \"@mui/icons-material/ExpandLess\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport { forwardRef, ReactElement, useState } from \"react\";\nimport React from \"react\";\nimport { Board } from \"~/board\";\n\nexport interface ExpandableAlertProps {\n  severity: AlertColor;\n  iconMapping?: Partial<Record<AlertColor, React.ReactNode>>;\n  title?: string;\n  message: string;\n  metadata?: string | string[];\n  metadataComponent?: ReactElement;\n  onClose: () => void;\n  sx?: SxProps<Theme>;\n}\n\nconst alertSx = {\n  [`& .${alertClasses.message}`]: {\n    width: 1,\n  },\n};\n\nexport const ExpandableAlert = forwardRef<any, ExpandableAlertProps>(\n  (\n    { severity, iconMapping, title, message, metadata, metadataComponent, onClose, sx = {} },\n    ref,\n  ) => {\n    const [expanded, setExpanded] = useState(false);\n    return (\n      <Alert\n        ref={ref}\n        severity={severity}\n        iconMapping={iconMapping}\n        onClose={onClose}\n        action={\n          <Box display=\"flex\" flexDirection=\"column\">\n            <IconButton color=\"inherit\" onClick={onClose}>\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n            {metadata && (\n              <IconButton color=\"inherit\" onClick={() => setExpanded((e) => !e)}>\n                {expanded ? (\n                  <ExpandLessIcon fontSize=\"small\" />\n                ) : (\n                  <ExpandMoreIcon fontSize=\"small\" />\n                )}\n              </IconButton>\n            )}\n          </Box>\n        }\n        sx={{ ...alertSx, ...sx }}\n      >\n        <Box sx={{ w: 1 }}>\n          {title && <AlertTitle>{title}</AlertTitle>}\n          {message}\n          {metadata && (\n            <Collapse in={expanded} sx={{ mt: 2 }}>\n              <Board content={metadata}>{metadataComponent}</Board>\n            </Collapse>\n          )}\n        </Box>\n      </Alert>\n    );\n  },\n);\n"],"names":["markdownDefaultOptions","overrides","h1","component","Typography","props","gutterBottom","variant","h2","h3","h4","paragraph","p","a","Link","li","Markdown","content","options","React","createElement","ReactMarkdown","Board","markdown","markdownProps","contentProp","spacing","children","sx","themeSpacing","typography","useTheme","copyContent","Array","isArray","map","line","i","key","pb","join","Paper","position","pl","pr","py","backgroundColor","blueGrey","color","Box","display","flexDirection","width","top","right","IconButton","onClick","navigator","clipboard","writeText","Tooltip","title","ContentCopyIcon","fontSize","pxToRem","alertSx","alertClasses","message","ExpandableAlert","forwardRef","severity","iconMapping","metadata","metadataComponent","onClose","ref","expanded","setExpanded","useState","Alert","action","CloseIcon","e","ExpandLessIcon","ExpandMoreIcon","w","AlertTitle","Collapse","in","mt"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/markdown/markdown.tsx","../../src/board/board.tsx","../../src/expandable-alert/expandable-alert.tsx"],"sourcesContent":["import Typography from \"@mui/material/Typography\";\nimport Link from \"@mui/material/Link\";\nimport ReactMarkdown, { MarkdownToJSX } from \"markdown-to-jsx\";\n\nexport interface MarkdownProps {\n  content: string;\n  options?: MarkdownToJSX.Options;\n}\n\nexport const markdownDefaultOptions: MarkdownToJSX.Options = {\n  overrides: {\n    h1: {\n      component: Typography,\n      props: {\n        gutterBottom: true,\n        variant: \"h5\",\n      },\n    },\n    h2: { component: Typography, props: { gutterBottom: true, variant: \"h6\" } },\n    h3: {\n      component: Typography,\n      props: { gutterBottom: true, variant: \"subtitle1\" },\n    },\n    h4: {\n      component: Typography,\n      props: { gutterBottom: true, variant: \"caption\", paragraph: true },\n    },\n    p: { component: Typography, props: { paragraph: true } },\n    a: { component: Link },\n    li: {\n      component: \"li\",\n    },\n  },\n};\n\nexport const Markdown = ({ content, options = markdownDefaultOptions }: MarkdownProps) => {\n  return <ReactMarkdown options={options}>{content}</ReactMarkdown>;\n};\n","import Box from \"@mui/material/Box\";\nimport IconButton from \"@mui/material/IconButton\";\nimport Paper from \"@mui/material/Paper\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme, SxProps, Theme } from \"@mui/material/styles\";\nimport { blueGrey } from \"@mui/material/colors\";\nimport { PropsWithChildren, ReactNode } from \"react\";\nimport { Markdown } from \"~/markdown\";\nimport ContentCopyIcon from \"@mui/icons-material/ContentCopy\";\n\nexport type BoardProps = PropsWithChildren<{\n  markdown?: string;\n  content?: string | string[];\n  spacing?: 0 | 1 | 2 | 3 | 4 | 5;\n  sx?: SxProps<Theme>;\n}>;\n\nexport const Board = ({\n  markdown: markdownProps,\n  content: contentProp,\n  spacing = 0,\n  children,\n  sx,\n}: BoardProps) => {\n  const { spacing: themeSpacing, typography } = useTheme();\n  let copyContent: string;\n  let content: ReactNode;\n\n  if (markdownProps) {\n    copyContent = markdownProps || \"\";\n  } else if (Array.isArray(contentProp)) {\n    content = contentProp.map((line, i) => (\n      <Typography key={i} sx={{ pb: spacing }}>\n        {line}\n      </Typography>\n    ));\n    copyContent = contentProp.join(\"\\n\");\n  } else {\n    content = <Typography>{contentProp}</Typography>;\n    copyContent = contentProp || \"\";\n  }\n\n  const markdown = markdownProps && <Markdown content={markdownProps} />;\n\n  return (\n    <Paper\n      sx={{\n        position: \"relative\",\n        pl: 2,\n        pr: 4,\n        py: 1,\n        backgroundColor: blueGrey[800],\n        color: \"white\",\n        ...sx,\n      }}\n    >\n      <Box display=\"flex\" flexDirection=\"row\">\n        <Box width={1}>{children || markdown || content}</Box>\n        <Box sx={{ position: \"absolute\", top: themeSpacing(0.5), right: themeSpacing(0.5) }}>\n          {copyContent && (\n            <IconButton\n              aria-label=\"copy board content\"\n              color=\"inherit\"\n              onClick={() => navigator.clipboard.writeText(copyContent)}\n            >\n              <Tooltip title=\"Copy\">\n                <ContentCopyIcon sx={{ fontSize: typography.pxToRem(18) }} />\n              </Tooltip>\n            </IconButton>\n          )}\n        </Box>\n      </Box>\n    </Paper>\n  );\n};\n","import Alert, { alertClasses, AlertColor } from \"@mui/material/Alert\";\nimport Box from \"@mui/material/Box\";\nimport Collapse from \"@mui/material/Collapse\";\nimport IconButton from \"@mui/material/IconButton\";\nimport AlertTitle from \"@mui/material/AlertTitle\";\nimport { SxProps, Theme } from \"@mui/material/styles\";\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\nimport ExpandLessIcon from \"@mui/icons-material/ExpandLess\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport { forwardRef, ReactElement, useState } from \"react\";\nimport { Board } from \"~/board\";\n\nexport interface ExpandableAlertProps {\n  severity: AlertColor;\n  iconMapping?: Partial<Record<AlertColor, React.ReactNode>>;\n  title?: string;\n  message: string;\n  metadata?: string | string[];\n  metadataComponent?: ReactElement;\n  onClose: () => void;\n  sx?: SxProps<Theme>;\n}\n\nconst alertSx = {\n  [`& .${alertClasses.message}`]: {\n    width: 1,\n  },\n};\n\nexport const ExpandableAlert = forwardRef<any, ExpandableAlertProps>(\n  (\n    { severity, iconMapping, title, message, metadata, metadataComponent, onClose, sx = {} },\n    ref,\n  ) => {\n    const [expanded, setExpanded] = useState(false);\n    return (\n      <Alert\n        ref={ref}\n        severity={severity}\n        iconMapping={iconMapping}\n        onClose={onClose}\n        action={\n          <Box display=\"flex\" flexDirection=\"column\">\n            <IconButton color=\"inherit\" onClick={onClose}>\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n            {metadata && (\n              <IconButton color=\"inherit\" onClick={() => setExpanded((e) => !e)}>\n                {expanded ? (\n                  <ExpandLessIcon fontSize=\"small\" />\n                ) : (\n                  <ExpandMoreIcon fontSize=\"small\" />\n                )}\n              </IconButton>\n            )}\n          </Box>\n        }\n        sx={{ ...alertSx, ...sx }}\n      >\n        <Box sx={{ w: 1 }}>\n          {title && <AlertTitle>{title}</AlertTitle>}\n          {message}\n          {metadata && (\n            <Collapse in={expanded} sx={{ mt: 2 }}>\n              <Board content={metadata}>{metadataComponent}</Board>\n            </Collapse>\n          )}\n        </Box>\n      </Alert>\n    );\n  },\n);\n"],"names":["markdownDefaultOptions","overrides","h1","component","Typography","props","gutterBottom","variant","h2","h3","h4","paragraph","p","a","Link","li","Markdown","content","options","_jsx","ReactMarkdown","children","Board","markdown","markdownProps","contentProp","spacing","sx","themeSpacing","typography","useTheme","copyContent","Array","isArray","map","line","i","pb","join","Paper","position","pl","pr","py","backgroundColor","blueGrey","color","_jsxs","Box","display","flexDirection","width","top","right","IconButton","onClick","navigator","clipboard","writeText","Tooltip","title","ContentCopyIcon","fontSize","pxToRem","alertSx","alertClasses","message","ExpandableAlert","forwardRef","severity","iconMapping","metadata","metadataComponent","onClose","ref","expanded","setExpanded","useState","Alert","action","CloseIcon","e","ExpandLessIcon","ExpandMoreIcon","w","AlertTitle","Collapse","in","mt"],"mappings":"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"}

package/expandable-alert/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/expandable-alert",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/form-dialog/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("@mui/material/Dialog"),t=require("@mui/material/DialogTitle"),a=require("@mui/material/DialogActions"),i=require("@mui/material/IconButton"),n=require("@mui/material/DialogContent"),o=require("@mui/material/CircularProgress"),r=require("@mui/material/Box"),c=require("@mui/material/Button"),s=require("@mui/lab/LoadingButton"),u=require("@mui/icons-material/Close");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=d(l),p=d(t),x=d(a),b=d(i),C=d(n),f=d(o),g=d(r),h=d(c),j=d(s),q=d(u);const y=({open:l,title:t,component:a,componentProps:i={},disabled:n,disableAccept:o,disableCancel:r,actions:c=[],children:s,loading:u,cancelable:d,callCloseWhenCancel:y=!0,acceptable:T,acceptText:D="Accept",cancelText:k="Cancel",onAccept:v,onCancel:A=(()=>null),onClose:B,acceptType:P="button"})=>{const S=c.length>0||T||d;return e.jsxs(m.default,{open:l,onClose:B,children:[e.jsxs(p.default,{sx:{display:"flex",alignItems:"center"},children:[t,u&&!T&&e.jsx(f.default,{size:20,sx:{ml:2,color:e=>e.palette.grey[500]}}),e.jsx(b.default,{disabled:n,"aria-label":"close",onClick:B,sx:{position:"absolute",right:8,top:8,color:e=>e.palette.grey[500]},children:e.jsx(q.default,{})})]}),e.jsxs(g.default,{component:a,...i,children:[e.jsx(C.default,{dividers:!0,children:s}),S&&e.jsxs(x.default,{children:[c.map((({id:l,text:t,type:a="button",onClick:i,color:o="primary"})=>e.jsx(h.default,{type:a,disabled:n,onClick:i,color:o,children:t},l))),d&&e.jsx(h.default,{color:"error",disabled:n||r,onClick:()=>{A(),y&&B()},children:k}),T&&e.jsx(j.default,{type:P,loading:u,disabled:n||o,onClick:v,children:D})]})]})]})};exports.FormDialog=({open:l,title:t,loading:a,disabled:i,submitText:n="Submit",cancelText:o="Cancel",children:r,onSubmit:c,onCancel:s})=>e.jsx(y,{component:"form",componentProps:{onSubmit:e=>{e.preventDefault(),c((e=>{const l=new FormData(e.currentTarget),t={};return l.forEach(((e,l)=>{t[l]=e})),t})(e))}},title:t,loading:a,disabled:a||i,open:l,onClose:s,callCloseWhenCancel:!1,cancelable:!0,acceptable:!0,cancelText:o,onCancel:s,acceptText:n,acceptType:"submit",children:r});
+//# sourceMappingURL=index.js.map

package/form-dialog/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/bootstrap-dialog/bootstrap-dialog.tsx","../../../src/form-dialog/form-dialog.tsx","../../../src/utils/forms.ts"],"sourcesContent":["import Dialog from \"@mui/material/Dialog\";\nimport DialogTitle from \"@mui/material/DialogTitle\";\nimport DialogActions from \"@mui/material/DialogActions\";\nimport IconButton from \"@mui/material/IconButton\";\nimport DialogContent from \"@mui/material/DialogContent\";\nimport CircularProgress from \"@mui/material/CircularProgress\";\nimport Box from \"@mui/material/Box\";\nimport Button from \"@mui/material/Button\";\nimport LoadingButton from \"@mui/lab/LoadingButton\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport { BootstrapDialogDialogProps } from \"~/dialog/dialog.types\";\n\nexport const BootstrapDialog = ({\n  open,\n  title,\n  component,\n  componentProps = {},\n  disabled,\n  disableAccept,\n  disableCancel,\n  actions = [],\n  children,\n  loading,\n  cancelable,\n  callCloseWhenCancel = true,\n  acceptable,\n  acceptText = \"Accept\",\n  cancelText = \"Cancel\",\n  onAccept,\n  onCancel = () => null,\n  onClose,\n  acceptType = \"button\",\n}: BootstrapDialogDialogProps) => {\n  const hasActions = actions.length > 0 || acceptable || cancelable;\n\n  return (\n    <Dialog open={open} onClose={onClose}>\n      <DialogTitle sx={{ display: \"flex\", alignItems: \"center\" }}>\n        {title}\n        {loading && !acceptable && (\n          <CircularProgress size={20} sx={{ ml: 2, color: (theme) => theme.palette.grey[500] }} />\n        )}\n        <IconButton\n          disabled={disabled}\n          aria-label=\"close\"\n          onClick={onClose}\n          sx={{\n            position: \"absolute\",\n            right: 8,\n            top: 8,\n            color: (theme) => theme.palette.grey[500],\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      </DialogTitle>\n      <Box component={component} {...componentProps}>\n        <DialogContent dividers>{children}</DialogContent>\n        {hasActions && (\n          <DialogActions>\n            {actions.map(({ id, text, type = \"button\", onClick, color = \"primary\" }) => (\n              <Button key={id} type={type} disabled={disabled} onClick={onClick} color={color}>\n                {text}\n              </Button>\n            ))}\n            {cancelable && (\n              <Button\n                color=\"error\"\n                disabled={disabled || disableCancel}\n                onClick={() => {\n                  onCancel();\n                  callCloseWhenCancel && onClose();\n                }}\n              >\n                {cancelText}\n              </Button>\n            )}\n\n            {acceptable && (\n              <LoadingButton\n                type={acceptType}\n                loading={loading}\n                disabled={disabled || disableAccept}\n                onClick={onAccept}\n              >\n                {acceptText}\n              </LoadingButton>\n            )}\n          </DialogActions>\n        )}\n      </Box>\n    </Dialog>\n  );\n};\n","import { BootstrapDialog } from \"~/bootstrap-dialog\";\nimport { FormEvent } from \"react\";\nimport { BootstrapDialogDialogProps } from \"~/dialog\";\nimport { getFormData } from \"~/utils/forms\";\n\ntype OmitBaseDialogProps =\n  | \"cancelable\"\n  | \"acceptable\"\n  | \"onAccept\"\n  | \"onCancel\"\n  | \"onClose\"\n  | \"actions\"\n  | \"callCloseWhenCancel\"\n  | \"component\"\n  | \"acceptType\";\nexport interface FormDialogProps<T> extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {\n  submitText?: string;\n  canceText?: string;\n  onCancel: () => void;\n  onSubmit: (data: T) => void;\n}\n\nexport const FormDialog = <T,>({\n  open,\n  title,\n  loading,\n  disabled,\n  submitText = \"Submit\",\n  cancelText = \"Cancel\",\n  children,\n  onSubmit,\n  onCancel,\n}: FormDialogProps<T>) => {\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    onSubmit(getFormData<T>(e));\n  };\n\n  return (\n    <BootstrapDialog\n      component=\"form\"\n      componentProps={{\n        onSubmit: handleSubmit,\n      }}\n      title={title}\n      loading={loading}\n      disabled={loading || disabled}\n      open={open}\n      onClose={onCancel}\n      callCloseWhenCancel={false}\n      cancelable\n      acceptable\n      cancelText={cancelText}\n      onCancel={onCancel}\n      acceptText={submitText}\n      acceptType=\"submit\"\n    >\n      {children}\n    </BootstrapDialog>\n  );\n};\n","import { FormEvent } from \"react\";\n\nexport const getFormData = <T>(e: FormEvent<HTMLFormElement>): T => {\n  const data = new FormData(e.currentTarget);\n  const rawData: Record<string, any> = {};\n\n  data.forEach((value, key) => {\n    rawData[key] = value;\n  });\n  return rawData as T;\n};\n"],"names":["BootstrapDialog","open","title","component","componentProps","disabled","disableAccept","disableCancel","actions","children","loading","cancelable","callCloseWhenCancel","acceptable","acceptText","cancelText","onAccept","onCancel","onClose","acceptType","hasActions","length","_jsxs","Dialog","jsxs","DialogTitle","sx","display","alignItems","_jsx","CircularProgress","size","ml","color","theme","palette","grey","IconButton","onClick","position","right","top","CloseIcon","Box","jsx","DialogContent","dividers","DialogActions","map","id","text","type","Button","LoadingButton","submitText","onSubmit","e","preventDefault","data","FormData","currentTarget","rawData","forEach","value","key","getFormData"],"mappings":"knBAYO,MAAMA,EAAkB,EAC7BC,OACAC,QACAC,YACAC,iBAAiB,CAAA,EACjBC,WACAC,gBACAC,gBACAC,UAAU,GACVC,WACAC,UACAC,aACAC,uBAAsB,EACtBC,aACAC,aAAa,SACbC,aAAa,SACbC,WACAC,WAAW,KAAM,MACjBC,UACAC,aAAa,aAEb,MAAMC,EAAaZ,EAAQa,OAAS,GAAKR,GAAcF,EAEvD,OACEW,OAACC,EAAAA,QAAO,CAAAtB,KAAMA,EAAMiB,QAASA,EAC3BT,SAAA,CAAAa,EAAAE,KAACC,EAAW,QAAC,CAAAC,GAAI,CAAEC,QAAS,OAAQC,WAAY,UAAUnB,SAAA,CACvDP,EACAQ,IAAYG,GACXgB,MAACC,EAAgB,QAAA,CAACC,KAAM,GAAIL,GAAI,CAAEM,GAAI,EAAGC,MAAQC,GAAUA,EAAMC,QAAQC,KAAK,QAEhFP,EAAAA,IAACQ,EAAU,SACThC,SAAUA,EAAQ,aACP,QACXiC,QAASpB,EACTQ,GAAI,CACFa,SAAU,WACVC,MAAO,EACPC,IAAK,EACLR,MAAQC,GAAUA,EAAMC,QAAQC,KAAK,MAGvC3B,SAAAoB,EAAAA,IAACa,EAAAA,QAAY,CAAA,QAGjBpB,EAAAA,KAACqB,EAAAA,QAAI,CAAAxC,UAAWA,KAAeC,EAC7BK,SAAA,CAAAoB,EAAAe,IAACC,EAAa,QAAC,CAAAC,UAAU,EAAArC,SAAAA,IACxBW,GACCE,EAAAA,KAACyB,EAAAA,QAAa,CAAAtC,SAAA,CACXD,EAAQwC,KAAI,EAAGC,KAAIC,OAAMC,OAAO,SAAUb,UAASL,QAAQ,aAC1DJ,EAAAA,IAACuB,EAAAA,SAAgBD,KAAMA,EAAM9C,SAAUA,EAAUiC,QAASA,EAASL,MAAOA,EAAKxB,SAC5EyC,GADUD,KAIdtC,GACCkB,EAAAe,IAACQ,EAAM,QAAA,CACLnB,MAAM,QACN5B,SAAUA,GAAYE,EACtB+B,QAAS,KACPrB,IACAL,GAAuBM,GAAS,WAGjCH,IAIJF,GACCgB,EAAAA,IAACwB,EAAa,SACZF,KAAMhC,EACNT,QAASA,EACTL,SAAUA,GAAYC,EACtBgC,QAAStB,EAERP,SAAAK,YAOb,qBCtEsB,EACxBb,OACAC,QACAQ,UACAL,WACAiD,aAAa,SACbvC,aAAa,SACbN,WACA8C,WACAtC,cASEY,MAAC7B,EAAe,CACdG,UAAU,OACVC,eAAgB,CACdmD,SAVgBC,IACpBA,EAAEC,iBAEFF,EClCuB,CAAIC,IAC7B,MAAME,EAAO,IAAIC,SAASH,EAAEI,eACtBC,EAA+B,CAAA,EAKrC,OAHAH,EAAKI,SAAQ,CAACC,EAAOC,KACnBH,EAAQG,GAAOD,CAAK,IAEfF,CAAY,ED2BRI,CAAeT,GAAG,GASzBtD,MAAOA,EACPQ,QAASA,EACTL,SAAUK,GAAWL,EACrBJ,KAAMA,EACNiB,QAASD,EACTL,qBAAqB,EACrBD,cACAE,YAAU,EACVE,WAAYA,EACZE,SAAUA,EACVH,WAAYwC,EACZnC,WAAW,SAEVV,SAAAA"}

package/form-dialog/cjs/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@pautena/react-design-system/form-dialog",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.134",
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/form-dialog/form-dialog.d.ts

@@ -1,4 +1,4 @@
-import { BootstrapDialogDialogProps } from "../dialog/dialog.types";
+import { BootstrapDialogDialogProps } from "~/dialog";
 type OmitBaseDialogProps = "cancelable" | "acceptable" | "onAccept" | "onCancel" | "onClose" | "actions" | "callCloseWhenCancel" | "component" | "acceptType";
 export interface FormDialogProps<T> extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {
     submitText?: string;

package/form-dialog/index.js

@@ -1,2 +1,2 @@
-import{Dialog as e,DialogTitle as t,CircularProgress as l,IconButton as n,Box as c,DialogContent as o,DialogActions as a,Button as r}from"@mui/material";import{LoadingButton as i}from"@mui/lab";import m from"@mui/icons-material/Close";import p from"react";const s=({open:s,title:d,component:b,componentProps:C={},disabled:u,disableAccept:E,disableCancel:x,actions:g=[],children:y,loading:T,cancelable:f,callCloseWhenCancel:h=!0,acceptable:k,acceptText:A="Accept",cancelText:S="Cancel",onAccept:v,onCancel:D=(()=>null),onClose:P,acceptType:W="button"})=>{const w=g.length>0||k||f;return p.createElement(e,{open:s,onClose:P},p.createElement(t,{sx:{display:"flex",alignItems:"center"}},d,T&&!k&&p.createElement(l,{size:20,sx:{ml:2,color:e=>e.palette.grey[500]}}),p.createElement(n,{disabled:u,"aria-label":"close",onClick:P,sx:{position:"absolute",right:8,top:8,color:e=>e.palette.grey[500]}},p.createElement(m,null))),p.createElement(c,{component:b,...C},p.createElement(o,{dividers:!0},y),w&&p.createElement(a,null,g.map((({id:e,text:t,type:l="button",onClick:n,color:c="primary"})=>p.createElement(r,{key:e,type:l,disabled:u,onClick:n,color:c},t))),f&&p.createElement(r,{color:"error",disabled:u||x,onClick:()=>{D(),h&&P()}},S),k&&p.createElement(i,{type:W,loading:T,disabled:u||E,onClick:v},A))))},d=({open:e,title:t,loading:l,disabled:n,submitText:c="Submit",cancelText:o="Cancel",children:a,onSubmit:r,onCancel:i})=>p.createElement(s,{component:"form",componentProps:{onSubmit:e=>{e.preventDefault(),r((e=>{const t=new FormData(e.currentTarget),l={};return t.forEach(((e,t)=>{l[t]=e})),l})(e))}},title:t,loading:l,disabled:l||n,open:e,onClose:i,callCloseWhenCancel:!1,cancelable:!0,acceptable:!0,cancelText:o,onCancel:i,acceptText:c,acceptType:"submit"},a);export{d as FormDialog};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import l from"@mui/material/Dialog";import t from"@mui/material/DialogTitle";import i from"@mui/material/DialogActions";import n from"@mui/material/IconButton";import a from"@mui/material/DialogContent";import r from"@mui/material/CircularProgress";import c from"@mui/material/Box";import m from"@mui/material/Button";import p from"@mui/lab/LoadingButton";import s from"@mui/icons-material/Close";const d=({open:d,title:u,component:b,componentProps:C={},disabled:h,disableAccept:g,disableCancel:f,actions:x=[],children:T,loading:y,cancelable:D,callCloseWhenCancel:k=!0,acceptable:A,acceptText:B="Accept",cancelText:P="Cancel",onAccept:S,onCancel:v=(()=>null),onClose:I,acceptType:W="button"})=>{const j=x.length>0||A||D;return e(l,{open:d,onClose:I,children:[e(t,{sx:{display:"flex",alignItems:"center"},children:[u,y&&!A&&o(r,{size:20,sx:{ml:2,color:e=>e.palette.grey[500]}}),o(n,{disabled:h,"aria-label":"close",onClick:I,sx:{position:"absolute",right:8,top:8,color:e=>e.palette.grey[500]},children:o(s,{})})]}),e(c,{component:b,...C,children:[o(a,{dividers:!0,children:T}),j&&e(i,{children:[x.map((({id:e,text:l,type:t="button",onClick:i,color:n="primary"})=>o(m,{type:t,disabled:h,onClick:i,color:n,children:l},e))),D&&o(m,{color:"error",disabled:h||f,onClick:()=>{v(),k&&I()},children:P}),A&&o(p,{type:W,loading:y,disabled:h||g,onClick:S,children:B})]})]})]})},u=({open:e,title:l,loading:t,disabled:i,submitText:n="Submit",cancelText:a="Cancel",children:r,onSubmit:c,onCancel:m})=>o(d,{component:"form",componentProps:{onSubmit:e=>{e.preventDefault(),c((e=>{const o=new FormData(e.currentTarget),l={};return o.forEach(((e,o)=>{l[o]=e})),l})(e))}},title:l,loading:t,disabled:t||i,open:e,onClose:m,callCloseWhenCancel:!1,cancelable:!0,acceptable:!0,cancelText:a,onCancel:m,acceptText:n,acceptType:"submit",children:r});export{u as FormDialog};
 //# sourceMappingURL=index.js.map

package/form-dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/bootstrap-dialog/bootstrap-dialog.tsx","../../src/form-dialog/form-dialog.tsx","../../src/utils/forms.ts"],"sourcesContent":["import {\n  Dialog,\n  DialogTitle,\n  DialogActions,\n  Button,\n  IconButton,\n  DialogContent,\n  Box,\n  CircularProgress,\n} from \"@mui/material\";\nimport { LoadingButton } from \"@mui/lab\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport React from \"react\";\nimport { BootstrapDialogDialogProps } from \"../dialog/dialog.types\";\n\nexport const BootstrapDialog = ({\n  open,\n  title,\n  component,\n  componentProps = {},\n  disabled,\n  disableAccept,\n  disableCancel,\n  actions = [],\n  children,\n  loading,\n  cancelable,\n  callCloseWhenCancel = true,\n  acceptable,\n  acceptText = \"Accept\",\n  cancelText = \"Cancel\",\n  onAccept,\n  onCancel = () => null,\n  onClose,\n  acceptType = \"button\",\n}: BootstrapDialogDialogProps) => {\n  const hasActions = actions.length > 0 || acceptable || cancelable;\n\n  return (\n    <Dialog open={open} onClose={onClose}>\n      <DialogTitle sx={{ display: \"flex\", alignItems: \"center\" }}>\n        {title}\n        {loading && !acceptable && (\n          <CircularProgress size={20} sx={{ ml: 2, color: (theme) => theme.palette.grey[500] }} />\n        )}\n        <IconButton\n          disabled={disabled}\n          aria-label=\"close\"\n          onClick={onClose}\n          sx={{\n            position: \"absolute\",\n            right: 8,\n            top: 8,\n            color: (theme) => theme.palette.grey[500],\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      </DialogTitle>\n      <Box component={component} {...componentProps}>\n        <DialogContent dividers>{children}</DialogContent>\n        {hasActions && (\n          <DialogActions>\n            {actions.map(({ id, text, type = \"button\", onClick, color = \"primary\" }) => (\n              <Button key={id} type={type} disabled={disabled} onClick={onClick} color={color}>\n                {text}\n              </Button>\n            ))}\n            {cancelable && (\n              <Button\n                color=\"error\"\n                disabled={disabled || disableCancel}\n                onClick={() => {\n                  onCancel();\n                  callCloseWhenCancel && onClose();\n                }}\n              >\n                {cancelText}\n              </Button>\n            )}\n\n            {acceptable && (\n              <LoadingButton\n                type={acceptType}\n                loading={loading}\n                disabled={disabled || disableAccept}\n                onClick={onAccept}\n              >\n                {acceptText}\n              </LoadingButton>\n            )}\n          </DialogActions>\n        )}\n      </Box>\n    </Dialog>\n  );\n};\n","import { BootstrapDialog } from \"../bootstrap-dialog\";\nimport { FormEvent } from \"react\";\nimport React from \"react\";\nimport { BootstrapDialogDialogProps } from \"../dialog/dialog.types\";\nimport { getFormData } from \"~/utils/forms\";\n\ntype OmitBaseDialogProps =\n  | \"cancelable\"\n  | \"acceptable\"\n  | \"onAccept\"\n  | \"onCancel\"\n  | \"onClose\"\n  | \"actions\"\n  | \"callCloseWhenCancel\"\n  | \"component\"\n  | \"acceptType\";\nexport interface FormDialogProps<T> extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {\n  submitText?: string;\n  canceText?: string;\n  onCancel: () => void;\n  onSubmit: (data: T) => void;\n}\n\nexport const FormDialog = <T,>({\n  open,\n  title,\n  loading,\n  disabled,\n  submitText = \"Submit\",\n  cancelText = \"Cancel\",\n  children,\n  onSubmit,\n  onCancel,\n}: FormDialogProps<T>) => {\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    onSubmit(getFormData<T>(e));\n  };\n\n  return (\n    <BootstrapDialog\n      component=\"form\"\n      componentProps={{\n        onSubmit: handleSubmit,\n      }}\n      title={title}\n      loading={loading}\n      disabled={loading || disabled}\n      open={open}\n      onClose={onCancel}\n      callCloseWhenCancel={false}\n      cancelable\n      acceptable\n      cancelText={cancelText}\n      onCancel={onCancel}\n      acceptText={submitText}\n      acceptType=\"submit\"\n    >\n      {children}\n    </BootstrapDialog>\n  );\n};\n","import { FormEvent } from \"react\";\n\nexport const getFormData = <T>(e: FormEvent<HTMLFormElement>): T => {\n  const data = new FormData(e.currentTarget);\n  const rawData: Record<string, any> = {};\n\n  data.forEach((value, key) => {\n    rawData[key] = value;\n  });\n  return rawData as T;\n};\n"],"names":["BootstrapDialog","open","title","component","componentProps","disabled","disableAccept","disableCancel","actions","children","loading","cancelable","callCloseWhenCancel","acceptable","acceptText","cancelText","onAccept","onCancel","onClose","acceptType","hasActions","length","React","createElement","Dialog","DialogTitle","sx","display","alignItems","CircularProgress","size","ml","color","theme","palette","grey","IconButton","onClick","position","right","top","CloseIcon","Box","DialogContent","dividers","DialogActions","map","id","text","type","Button","key","LoadingButton","FormDialog","submitText","onSubmit","e","preventDefault","data","FormData","currentTarget","rawData","forEach","value","getFormData"],"mappings":"gQAeO,MAAMA,EAAkB,EAC7BC,OACAC,QACAC,YACAC,iBAAiB,CAAA,EACjBC,WACAC,gBACAC,gBACAC,UAAU,GACVC,WACAC,UACAC,aACAC,uBAAsB,EACtBC,aACAC,aAAa,SACbC,aAAa,SACbC,WACAC,WAAW,KAAM,MACjBC,UACAC,aAAa,aAEb,MAAMC,EAAaZ,EAAQa,OAAS,GAAKR,GAAcF,EAEvD,OACEW,EAACC,cAAAC,EAAO,CAAAvB,KAAMA,EAAMiB,QAASA,GAC3BI,EAAAC,cAACE,EAAW,CAACC,GAAI,CAAEC,QAAS,OAAQC,WAAY,WAC7C1B,EACAQ,IAAYG,GACXS,gBAACO,EAAgB,CAACC,KAAM,GAAIJ,GAAI,CAAEK,GAAI,EAAGC,MAAQC,GAAUA,EAAMC,QAAQC,KAAK,QAEhFb,EAAAC,cAACa,EAAU,CACT/B,SAAUA,EAAQ,aACP,QACXgC,QAASnB,EACTQ,GAAI,CACFY,SAAU,WACVC,MAAO,EACPC,IAAK,EACLR,MAAQC,GAAUA,EAAMC,QAAQC,KAAK,OAGvCb,EAACC,cAAAkB,EAAY,QAGjBnB,EAAAC,cAACmB,EAAI,CAAAvC,UAAWA,KAAeC,GAC7BkB,EAAAC,cAACoB,EAAa,CAACC,UAAQ,GAAEnC,GACxBW,GACCE,EAAAC,cAACsB,EAAa,KACXrC,EAAQsC,KAAI,EAAGC,KAAIC,OAAMC,OAAO,SAAUZ,UAASL,QAAQ,aAC1DV,EAAAC,cAAC2B,EAAO,CAAAC,IAAKJ,EAAIE,KAAMA,EAAM5C,SAAUA,EAAUgC,QAASA,EAASL,MAAOA,GACvEgB,KAGJrC,GACCW,EAAAC,cAAC2B,EACC,CAAAlB,MAAM,QACN3B,SAAUA,GAAYE,EACtB8B,QAAS,KACPpB,IACAL,GAAuBM,GAAS,GAGjCH,GAIJF,GACCS,EAACC,cAAA6B,EACC,CAAAH,KAAM9B,EACNT,QAASA,EACTL,SAAUA,GAAYC,EACtB+B,QAASrB,GAERF,KAOb,ECxESuC,EAAa,EACxBpD,OACAC,QACAQ,UACAL,WACAiD,aAAa,SACbvC,aAAa,SACbN,WACA8C,WACAtC,cASEK,gBAACtB,EAAe,CACdG,UAAU,OACVC,eAAgB,CACdmD,SAVgBC,IACpBA,EAAEC,iBAEFF,ECnCuB,CAAIC,IAC7B,MAAME,EAAO,IAAIC,SAASH,EAAEI,eACtBC,EAA+B,CAAA,EAKrC,OAHAH,EAAKI,SAAQ,CAACC,EAAOZ,KACnBU,EAAQV,GAAOY,CAAK,IAEfF,CAAY,ED4BRG,CAAeR,GAAG,GASzBtD,MAAOA,EACPQ,QAASA,EACTL,SAAUK,GAAWL,EACrBJ,KAAMA,EACNiB,QAASD,EACTL,qBAAqB,EACrBD,cACAE,YAAU,EACVE,WAAYA,EACZE,SAAUA,EACVH,WAAYwC,EACZnC,WAAW,UAEVV"}
+{"version":3,"file":"index.js","sources":["../../src/bootstrap-dialog/bootstrap-dialog.tsx","../../src/form-dialog/form-dialog.tsx","../../src/utils/forms.ts"],"sourcesContent":["import Dialog from \"@mui/material/Dialog\";\nimport DialogTitle from \"@mui/material/DialogTitle\";\nimport DialogActions from \"@mui/material/DialogActions\";\nimport IconButton from \"@mui/material/IconButton\";\nimport DialogContent from \"@mui/material/DialogContent\";\nimport CircularProgress from \"@mui/material/CircularProgress\";\nimport Box from \"@mui/material/Box\";\nimport Button from \"@mui/material/Button\";\nimport LoadingButton from \"@mui/lab/LoadingButton\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport { BootstrapDialogDialogProps } from \"~/dialog/dialog.types\";\n\nexport const BootstrapDialog = ({\n  open,\n  title,\n  component,\n  componentProps = {},\n  disabled,\n  disableAccept,\n  disableCancel,\n  actions = [],\n  children,\n  loading,\n  cancelable,\n  callCloseWhenCancel = true,\n  acceptable,\n  acceptText = \"Accept\",\n  cancelText = \"Cancel\",\n  onAccept,\n  onCancel = () => null,\n  onClose,\n  acceptType = \"button\",\n}: BootstrapDialogDialogProps) => {\n  const hasActions = actions.length > 0 || acceptable || cancelable;\n\n  return (\n    <Dialog open={open} onClose={onClose}>\n      <DialogTitle sx={{ display: \"flex\", alignItems: \"center\" }}>\n        {title}\n        {loading && !acceptable && (\n          <CircularProgress size={20} sx={{ ml: 2, color: (theme) => theme.palette.grey[500] }} />\n        )}\n        <IconButton\n          disabled={disabled}\n          aria-label=\"close\"\n          onClick={onClose}\n          sx={{\n            position: \"absolute\",\n            right: 8,\n            top: 8,\n            color: (theme) => theme.palette.grey[500],\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      </DialogTitle>\n      <Box component={component} {...componentProps}>\n        <DialogContent dividers>{children}</DialogContent>\n        {hasActions && (\n          <DialogActions>\n            {actions.map(({ id, text, type = \"button\", onClick, color = \"primary\" }) => (\n              <Button key={id} type={type} disabled={disabled} onClick={onClick} color={color}>\n                {text}\n              </Button>\n            ))}\n            {cancelable && (\n              <Button\n                color=\"error\"\n                disabled={disabled || disableCancel}\n                onClick={() => {\n                  onCancel();\n                  callCloseWhenCancel && onClose();\n                }}\n              >\n                {cancelText}\n              </Button>\n            )}\n\n            {acceptable && (\n              <LoadingButton\n                type={acceptType}\n                loading={loading}\n                disabled={disabled || disableAccept}\n                onClick={onAccept}\n              >\n                {acceptText}\n              </LoadingButton>\n            )}\n          </DialogActions>\n        )}\n      </Box>\n    </Dialog>\n  );\n};\n","import { BootstrapDialog } from \"~/bootstrap-dialog\";\nimport { FormEvent } from \"react\";\nimport { BootstrapDialogDialogProps } from \"~/dialog\";\nimport { getFormData } from \"~/utils/forms\";\n\ntype OmitBaseDialogProps =\n  | \"cancelable\"\n  | \"acceptable\"\n  | \"onAccept\"\n  | \"onCancel\"\n  | \"onClose\"\n  | \"actions\"\n  | \"callCloseWhenCancel\"\n  | \"component\"\n  | \"acceptType\";\nexport interface FormDialogProps<T> extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {\n  submitText?: string;\n  canceText?: string;\n  onCancel: () => void;\n  onSubmit: (data: T) => void;\n}\n\nexport const FormDialog = <T,>({\n  open,\n  title,\n  loading,\n  disabled,\n  submitText = \"Submit\",\n  cancelText = \"Cancel\",\n  children,\n  onSubmit,\n  onCancel,\n}: FormDialogProps<T>) => {\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    onSubmit(getFormData<T>(e));\n  };\n\n  return (\n    <BootstrapDialog\n      component=\"form\"\n      componentProps={{\n        onSubmit: handleSubmit,\n      }}\n      title={title}\n      loading={loading}\n      disabled={loading || disabled}\n      open={open}\n      onClose={onCancel}\n      callCloseWhenCancel={false}\n      cancelable\n      acceptable\n      cancelText={cancelText}\n      onCancel={onCancel}\n      acceptText={submitText}\n      acceptType=\"submit\"\n    >\n      {children}\n    </BootstrapDialog>\n  );\n};\n","import { FormEvent } from \"react\";\n\nexport const getFormData = <T>(e: FormEvent<HTMLFormElement>): T => {\n  const data = new FormData(e.currentTarget);\n  const rawData: Record<string, any> = {};\n\n  data.forEach((value, key) => {\n    rawData[key] = value;\n  });\n  return rawData as T;\n};\n"],"names":["BootstrapDialog","open","title","component","componentProps","disabled","disableAccept","disableCancel","actions","children","loading","cancelable","callCloseWhenCancel","acceptable","acceptText","cancelText","onAccept","onCancel","onClose","acceptType","hasActions","length","_jsxs","Dialog","DialogTitle","sx","display","alignItems","_jsx","CircularProgress","size","ml","color","theme","palette","grey","IconButton","onClick","position","right","top","CloseIcon","Box","DialogContent","dividers","DialogActions","map","id","text","type","Button","LoadingButton","FormDialog","submitText","onSubmit","e","preventDefault","data","FormData","currentTarget","rawData","forEach","value","key","getFormData"],"mappings":"+bAYO,MAAMA,EAAkB,EAC7BC,OACAC,QACAC,YACAC,iBAAiB,CAAA,EACjBC,WACAC,gBACAC,gBACAC,UAAU,GACVC,WACAC,UACAC,aACAC,uBAAsB,EACtBC,aACAC,aAAa,SACbC,aAAa,SACbC,WACAC,WAAW,KAAM,MACjBC,UACAC,aAAa,aAEb,MAAMC,EAAaZ,EAAQa,OAAS,GAAKR,GAAcF,EAEvD,OACEW,EAACC,EAAO,CAAAtB,KAAMA,EAAMiB,QAASA,EAC3BT,SAAA,CAAAa,EAACE,EAAY,CAAAC,GAAI,CAAEC,QAAS,OAAQC,WAAY,UAAUlB,SAAA,CACvDP,EACAQ,IAAYG,GACXe,EAACC,EAAgB,CAACC,KAAM,GAAIL,GAAI,CAAEM,GAAI,EAAGC,MAAQC,GAAUA,EAAMC,QAAQC,KAAK,QAEhFP,EAACQ,GACC/B,SAAUA,EAAQ,aACP,QACXgC,QAASnB,EACTO,GAAI,CACFa,SAAU,WACVC,MAAO,EACPC,IAAK,EACLR,MAAQC,GAAUA,EAAMC,QAAQC,KAAK,MAGvC1B,SAAAmB,EAACa,EAAY,CAAA,QAGjBnB,EAACoB,EAAI,CAAAvC,UAAWA,KAAeC,EAC7BK,SAAA,CAAAmB,EAACe,EAAc,CAAAC,UAAU,EAAAnC,SAAAA,IACxBW,GACCE,EAACuB,EAAa,CAAApC,SAAA,CACXD,EAAQsC,KAAI,EAAGC,KAAIC,OAAMC,OAAO,SAAUZ,UAASL,QAAQ,aAC1DJ,EAACsB,GAAgBD,KAAMA,EAAM5C,SAAUA,EAAUgC,QAASA,EAASL,MAAOA,EAAKvB,SAC5EuC,GADUD,KAIdpC,GACCiB,EAACsB,EAAM,CACLlB,MAAM,QACN3B,SAAUA,GAAYE,EACtB8B,QAAS,KACPpB,IACAL,GAAuBM,GAAS,WAGjCH,IAIJF,GACCe,EAACuB,GACCF,KAAM9B,EACNT,QAASA,EACTL,SAAUA,GAAYC,EACtB+B,QAASrB,EAERP,SAAAK,YAOb,ECtESsC,EAAa,EACxBnD,OACAC,QACAQ,UACAL,WACAgD,aAAa,SACbtC,aAAa,SACbN,WACA6C,WACArC,cASEW,EAAC5B,EAAe,CACdG,UAAU,OACVC,eAAgB,CACdkD,SAVgBC,IACpBA,EAAEC,iBAEFF,EClCuB,CAAIC,IAC7B,MAAME,EAAO,IAAIC,SAASH,EAAEI,eACtBC,EAA+B,CAAA,EAKrC,OAHAH,EAAKI,SAAQ,CAACC,EAAOC,KACnBH,EAAQG,GAAOD,CAAK,IAEfF,CAAY,ED2BRI,CAAeT,GAAG,GASzBrD,MAAOA,EACPQ,QAASA,EACTL,SAAUK,GAAWL,EACrBJ,KAAMA,EACNiB,QAASD,EACTL,qBAAqB,EACrBD,cACAE,YAAU,EACVE,WAAYA,EACZE,SAAUA,EACVH,WAAYuC,EACZlC,WAAW,SAEVV,SAAAA"}

package/form-dialog/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/form-dialog",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/generators/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={string:"",number:0,boolean:!1,enum:"",multienum:[],date:new Date(1970,0,1,0,0),time:new Date(1970,0,1,0,0),datetime:new Date(1970,0,1,0,0),group:{},"group[]":[],"string[]":[],"number[]":[]},t=(t,n)=>n&&n[t.id]||"default"in t&&t.default||e[t.type];exports.newInstanceFromValuesOrZeroValue=(e,n=undefined)=>{const r={};return e.fields.forEach((e=>{if("group"===e.type){const u={};e.value.forEach((r=>{u[r.id]=t(r,n&&n[e.id])})),r[e.id]=u}else r[e.id]=t(e,n)})),r};
+//# sourceMappingURL=index.js.map

package/generators/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/generators/generators.model.ts"],"sourcesContent":["/**\n * MODEL TYPES\n * Types used to specify the model\n */\nexport type ModelFieldTypes =\n  | \"string\"\n  | \"number\"\n  | \"string[]\"\n  | \"number[]\"\n  | \"boolean\"\n  | \"enum\"\n  | \"multienum\"\n  | \"date\"\n  | \"time\"\n  | \"datetime\";\n\ntype Base = {\n  id: string;\n  description: string;\n  name: string;\n  listable?: boolean;\n  updatable?: boolean;\n  required?: boolean;\n};\n\ntype Breakpoints = {\n  xs?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n};\n\ntype StringField = {\n  type: \"string\";\n};\n\ntype StringArrayField = {\n  type: \"string[]\";\n};\n\ntype NumberField = {\n  type: \"number\";\n};\n\ntype NumberArrayField = {\n  type: \"number[]\";\n};\n\ntype BooleanField = {\n  type: \"boolean\";\n};\n\ntype EnumField = {\n  type: \"enum\";\n  value: string[];\n};\n\ntype MultiEnumField = {\n  type: \"multienum\";\n  value: string[];\n};\n\ntype DateField = {\n  type: \"date\";\n  format: string;\n  default: Date;\n};\n\ntype TimeField = {\n  type: \"time\";\n  format: string;\n  default: Date;\n};\n\ntype DatetimeField = {\n  type: \"datetime\";\n  format: string;\n  default: Date;\n};\n\ntype SingleFields =\n  | StringField\n  | NumberField\n  | StringArrayField\n  | NumberArrayField\n  | BooleanField\n  | EnumField\n  | MultiEnumField\n  | DateField\n  | TimeField\n  | DatetimeField;\n\nexport type GroupField = {\n  type: \"group\";\n  value: (Base & Breakpoints & SingleFields)[];\n} & Base;\n\nexport type ArrayGroupField = {\n  type: \"group[]\";\n  value: (Base & Breakpoints & SingleFields)[];\n} & Base;\n\ntype Fields = SingleFields | GroupField | ArrayGroupField;\nexport type ModelField = Base & Breakpoints & Fields;\n\nexport type Model = {\n  fields: ModelField[];\n};\n\n/**\n * INSTANCE TYPES\n * Types used to represent an instance of a model specification\n */\nexport type BaseFieldType = string | number | boolean | Date;\nexport type ArrayFieldType = string[] | number[];\nexport type SingleFieldType = BaseFieldType | ArrayFieldType;\nexport type GroupInstanceType = { [key: string]: SingleFieldType };\nexport type ArrayInstanceType = { [key: string]: SingleFieldType }[];\nexport type FieldType = SingleFieldType | GroupInstanceType;\n\nexport interface BasicModelInstance {\n  id: string;\n  [key: string]: FieldType;\n}\n\n/**\n * UTILITIES\n * Some functions used in several places to help to manage models\n */\nconst InitialStateZeroValue: Record<ModelFieldTypes | \"group\" | \"group[]\", FieldType | undefined> =\n  {\n    string: \"\",\n    number: 0,\n    boolean: false,\n    enum: \"\",\n    multienum: [],\n    date: new Date(1970, 0, 1, 0, 0),\n    time: new Date(1970, 0, 1, 0, 0),\n    datetime: new Date(1970, 0, 1, 0, 0),\n    group: {},\n    \"group[]\": [],\n    \"string[]\": [],\n    \"number[]\": [],\n  };\n\nconst getFieldValueOrZero = (\n  field: ModelField,\n  values: BasicModelInstance | GroupInstanceType | undefined,\n) => {\n  return (\n    (values && values[field.id]) ||\n    (\"default\" in field && field.default) ||\n    InitialStateZeroValue[field.type]\n  );\n};\n\nexport const newInstanceFromValuesOrZeroValue = <T extends BasicModelInstance>(\n  model: Model,\n  values: T | undefined = undefined,\n): T => {\n  const obj: Record<string, FieldType | undefined> = {};\n\n  model.fields.forEach((field) => {\n    if (field.type === \"group\") {\n      const value: GroupInstanceType = {};\n      field.value.forEach((groupField) => {\n        value[groupField.id] = getFieldValueOrZero(\n          groupField,\n          values && (values[field.id] as GroupInstanceType),\n        ) as SingleFieldType;\n      });\n      obj[field.id] = value;\n    } else {\n      obj[field.id] = getFieldValueOrZero(field, values);\n    }\n  });\n\n  return obj as T;\n};\n"],"names":["InitialStateZeroValue","string","number","boolean","enum","multienum","date","Date","time","datetime","group","getFieldValueOrZero","field","values","id","default","type","model","undefined","obj","fields","forEach","value","groupField"],"mappings":"oEAkIA,MAAMA,EACJ,CACEC,OAAQ,GACRC,OAAQ,EACRC,SAAS,EACTC,KAAM,GACNC,UAAW,GACXC,KAAM,IAAIC,KAAK,KAAM,EAAG,EAAG,EAAG,GAC9BC,KAAM,IAAID,KAAK,KAAM,EAAG,EAAG,EAAG,GAC9BE,SAAU,IAAIF,KAAK,KAAM,EAAG,EAAG,EAAG,GAClCG,MAAO,CAAE,EACT,UAAW,GACX,WAAY,GACZ,WAAY,IAGVC,EAAsB,CAC1BC,EACAC,IAGGA,GAAUA,EAAOD,EAAME,KACvB,YAAaF,GAASA,EAAMG,SAC7Bf,EAAsBY,EAAMI,+CAIgB,CAC9CC,EACAJ,EAAwBK,aAExB,MAAMC,EAA6C,CAAA,EAiBnD,OAfAF,EAAMG,OAAOC,SAAST,IACpB,GAAmB,UAAfA,EAAMI,KAAkB,CAC1B,MAAMM,EAA2B,CAAA,EACjCV,EAAMU,MAAMD,SAASE,IACnBD,EAAMC,EAAWT,IAAMH,EACrBY,EACAV,GAAWA,EAAOD,EAAME,IACN,IAEtBK,EAAIP,EAAME,IAAMQ,CACjB,MACCH,EAAIP,EAAME,IAAMH,EAAoBC,EAAOC,EAC5C,IAGIM,CAAQ"}

package/generators/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@pautena/react-design-system/generators",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts"
+}

package/generators/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/generators",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts"
 }

package/group-value-card/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material/Grid"),t=require("@mui/material/Paper"),i=require("@mui/material/Box"),a=require("@mui/material/Typography"),l=require("@mui/material/styles"),u=require("@mui/material");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(r),o=n(t),s=n(i),h=n(a);exports.GroupValueCard=({title:r,subtitle:t,centered:i,children:a,dense:n})=>{const{typography:c}=l.useTheme(),g=(({lightWeight:e=100,darkWeight:r=900}={})=>{const{palette:t}=u.useTheme();return"light"===t.mode?t.grey[e]:t.grey[r]})({lightWeight:200,darkWeight:800});return e.jsxs(o.default,{sx:{paddingBottom:n?0:1},children:[e.jsxs(s.default,{bgcolor:g,px:n?1:2,py:n?.5:1,lineHeight:n?0:void 0,children:[e.jsx(h.default,{variant:n?"body1":"h6",role:"heading","aria-level":1,children:r}),t&&e.jsx(h.default,{variant:n?"caption":"body2",role:"heading","aria-level":2,lineHeight:n?c.pxToRem(15):void 0,children:t})]}),e.jsx(d.default,{container:!0,padding:1,rowSpacing:n?1:2,justifyContent:i?"center":"flex-start",children:a})]})};
+//# sourceMappingURL=index.js.map

package/group-value-card/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/group-value-card/group-value-card.tsx","../../../src/utils/theme.ts"],"sourcesContent":["import Grid from \"@mui/material/Grid\";\nimport Paper from \"@mui/material/Paper\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\nimport { ValueItemElement } from \"~/value-item\";\n\nexport interface GroupValueCardProps {\n  title: string;\n  subtitle?: string;\n  centered?: boolean;\n  children: ValueItemElement | ValueItemElement[];\n  dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n  title,\n  subtitle,\n  centered,\n  children,\n  dense,\n}: GroupValueCardProps) => {\n  const { typography } = useTheme();\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n  return (\n    <Paper\n      sx={{\n        paddingBottom: dense ? 0 : 1,\n      }}\n    >\n      <Box\n        bgcolor={defaultColor}\n        px={dense ? 1 : 2}\n        py={dense ? 0.5 : 1}\n        lineHeight={dense ? 0 : undefined}\n      >\n        <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n          {title}\n        </Typography>\n        {subtitle && (\n          <Typography\n            variant={dense ? \"caption\" : \"body2\"}\n            role=\"heading\"\n            aria-level={2}\n            lineHeight={dense ? typography.pxToRem(15) : undefined}\n          >\n            {subtitle}\n          </Typography>\n        )}\n      </Box>\n      <Grid\n        container\n        padding={1}\n        rowSpacing={dense ? 1 : 2}\n        justifyContent={centered ? \"center\" : \"flex-start\"}\n      >\n        {children}\n      </Grid>\n    </Paper>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n"],"names":["title","subtitle","centered","children","dense","typography","useTheme","defaultColor","lightWeight","darkWeight","palette","mode","grey","useGetDefaultThemeColor","_jsxs","jsxs","Paper","sx","paddingBottom","Box","bgcolor","px","py","lineHeight","undefined","_jsx","jsx","Typography","variant","role","pxToRem","Grid","container","padding","rowSpacing","justifyContent"],"mappings":"yaAgB8B,EAC5BA,QACAC,WACAC,WACAC,WACAC,YAEA,MAAMC,WAAEA,GAAeC,EAAAA,WACjBC,ECpB+B,GACrCC,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYJ,EAAAA,WACpB,MAAwB,UAAjBI,EAAQC,KAAmBD,EAAQE,KAAKJ,GAAeE,EAAQE,KAAKH,EAAW,EDejEI,CAAwB,CAAEL,YAAa,IAAKC,WAAY,MAE7E,OACEK,EAAAC,KAACC,UAAK,CACJC,GAAI,CACFC,cAAed,EAAQ,EAAI,GAC5BD,SAAA,CAEDW,OAACK,EAAAA,QACC,CAAAC,QAASb,EACTc,GAAIjB,EAAQ,EAAI,EAChBkB,GAAIlB,EAAQ,GAAM,EAClBmB,WAAYnB,EAAQ,OAAIoB,YAExBC,EAACC,IAAAC,UAAW,CAAAC,QAASxB,EAAQ,QAAU,KAAMyB,KAAK,UAAS,aAAa,EACrE1B,SAAAH,IAEFC,GACCwB,EAAAA,IAACE,EAAAA,SACCC,QAASxB,EAAQ,UAAY,QAC7ByB,KAAK,UAAS,aACF,EACZN,WAAYnB,EAAQC,EAAWyB,QAAQ,SAAMN,EAASrB,SAErDF,OAIPwB,EAACC,IAAAK,EAAI,QACH,CAAAC,WACA,EAAAC,QAAS,EACTC,WAAY9B,EAAQ,EAAI,EACxB+B,eAAgBjC,EAAW,SAAW,aAErCC,SAAAA,MAGL"}

package/group-value-card/cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@pautena/react-design-system/group-value-card",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/group-value-card/group-value-card.d.ts

@@ -1,4 +1,4 @@
-import { ValueItemElement } from "../value-item/value-item";
+import { ValueItemElement } from "~/value-item";
 export interface GroupValueCardProps {
     title: string;
     subtitle?: string;

package/group-value-card/index.js

@@ -1,2 +1,2 @@
-import{useTheme as e,Paper as t,Box as r,Typography as i,Grid as a}from"@mui/material";import n from"react";const o=({title:o,subtitle:l,centered:g,children:c,dense:d})=>{const{typography:h}=e(),m=(({lightWeight:t=100,darkWeight:r=900}={})=>{const{palette:i}=e();return"light"===i.mode?i.grey[t]:i.grey[r]})({lightWeight:200,darkWeight:800});return n.createElement(t,{sx:{paddingBottom:d?0:1}},n.createElement(r,{bgcolor:m,px:d?1:2,py:d?.5:1,lineHeight:d?0:void 0},n.createElement(i,{variant:d?"body1":"h6",role:"heading","aria-level":1},o),l&&n.createElement(i,{variant:d?"caption":"body2",role:"heading","aria-level":2,lineHeight:d?h.pxToRem(15):void 0},l)),n.createElement(a,{container:!0,padding:1,rowSpacing:d?1:2,justifyContent:g?"center":"flex-start"},c))};export{o as GroupValueCard};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import r from"@mui/material/Grid";import t from"@mui/material/Paper";import o from"@mui/material/Box";import a from"@mui/material/Typography";import{useTheme as m}from"@mui/material/styles";import{useTheme as l}from"@mui/material";const n=({title:n,subtitle:d,centered:h,children:p,dense:g})=>{const{typography:c}=m(),s=(({lightWeight:e=100,darkWeight:i=900}={})=>{const{palette:r}=l();return"light"===r.mode?r.grey[e]:r.grey[i]})({lightWeight:200,darkWeight:800});return e(t,{sx:{paddingBottom:g?0:1},children:[e(o,{bgcolor:s,px:g?1:2,py:g?.5:1,lineHeight:g?0:void 0,children:[i(a,{variant:g?"body1":"h6",role:"heading","aria-level":1,children:n}),d&&i(a,{variant:g?"caption":"body2",role:"heading","aria-level":2,lineHeight:g?c.pxToRem(15):void 0,children:d})]}),i(r,{container:!0,padding:1,rowSpacing:g?1:2,justifyContent:h?"center":"flex-start",children:p})]})};export{n as GroupValueCard};
 //# sourceMappingURL=index.js.map

package/group-value-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/theme.ts","../../src/group-value-card/group-value-card.tsx"],"sourcesContent":["import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import { Grid, Paper, Box, Typography, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils/theme\";\nimport { ValueItemElement } from \"../value-item/value-item\";\n\nexport interface GroupValueCardProps {\n  title: string;\n  subtitle?: string;\n  centered?: boolean;\n  children: ValueItemElement | ValueItemElement[];\n  dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n  title,\n  subtitle,\n  centered,\n  children,\n  dense,\n}: GroupValueCardProps) => {\n  const { typography } = useTheme();\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n  return (\n    <Paper\n      sx={{\n        paddingBottom: dense ? 0 : 1,\n      }}\n    >\n      <Box\n        bgcolor={defaultColor}\n        px={dense ? 1 : 2}\n        py={dense ? 0.5 : 1}\n        lineHeight={dense ? 0 : undefined}\n      >\n        <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n          {title}\n        </Typography>\n        {subtitle && (\n          <Typography\n            variant={dense ? \"caption\" : \"body2\"}\n            role=\"heading\"\n            aria-level={2}\n            lineHeight={dense ? typography.pxToRem(15) : undefined}\n          >\n            {subtitle}\n          </Typography>\n        )}\n      </Box>\n      <Grid\n        container\n        padding={1}\n        rowSpacing={dense ? 1 : 2}\n        justifyContent={centered ? \"center\" : \"flex-start\"}\n      >\n        {children}\n      </Grid>\n    </Paper>\n  );\n};\n"],"names":["GroupValueCard","title","subtitle","centered","children","dense","typography","useTheme","defaultColor","lightWeight","darkWeight","palette","mode","grey","useGetDefaultThemeColor","React","createElement","Paper","sx","paddingBottom","Box","bgcolor","px","py","lineHeight","undefined","Typography","variant","role","pxToRem","Grid","container","padding","rowSpacing","justifyContent"],"mappings":"4GAIO,MCSMA,EAAiB,EAC5BC,QACAC,WACAC,WACAC,WACAC,YAEA,MAAMC,WAAEA,GAAeC,IACjBC,EDjB+B,GACrCC,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYJ,IACpB,MAAwB,UAAjBI,EAAQC,KAAmBD,EAAQE,KAAKJ,GAAeE,EAAQE,KAAKH,EAAW,ECYjEI,CAAwB,CAAEL,YAAa,IAAKC,WAAY,MAE7E,OACEK,EAAAC,cAACC,EAAK,CACJC,GAAI,CACFC,cAAed,EAAQ,EAAI,IAG7BU,EAAAC,cAACI,EACC,CAAAC,QAASb,EACTc,GAAIjB,EAAQ,EAAI,EAChBkB,GAAIlB,EAAQ,GAAM,EAClBmB,WAAYnB,EAAQ,OAAIoB,GAExBV,EAACC,cAAAU,GAAWC,QAAStB,EAAQ,QAAU,KAAMuB,KAAK,UAAsB,aAAA,GACrE3B,GAEFC,GACCa,EAAAC,cAACU,EACC,CAAAC,QAAStB,EAAQ,UAAY,QAC7BuB,KAAK,UAAS,aACF,EACZJ,WAAYnB,EAAQC,EAAWuB,QAAQ,SAAMJ,GAE5CvB,IAIPa,EAAAC,cAACc,EACC,CAAAC,WACA,EAAAC,QAAS,EACTC,WAAY5B,EAAQ,EAAI,EACxB6B,eAAgB/B,EAAW,SAAW,cAErCC,GAGL"}
+{"version":3,"file":"index.js","sources":["../../src/utils/theme.ts","../../src/group-value-card/group-value-card.tsx"],"sourcesContent":["import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import Grid from \"@mui/material/Grid\";\nimport Paper from \"@mui/material/Paper\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\nimport { ValueItemElement } from \"~/value-item\";\n\nexport interface GroupValueCardProps {\n  title: string;\n  subtitle?: string;\n  centered?: boolean;\n  children: ValueItemElement | ValueItemElement[];\n  dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n  title,\n  subtitle,\n  centered,\n  children,\n  dense,\n}: GroupValueCardProps) => {\n  const { typography } = useTheme();\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n  return (\n    <Paper\n      sx={{\n        paddingBottom: dense ? 0 : 1,\n      }}\n    >\n      <Box\n        bgcolor={defaultColor}\n        px={dense ? 1 : 2}\n        py={dense ? 0.5 : 1}\n        lineHeight={dense ? 0 : undefined}\n      >\n        <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n          {title}\n        </Typography>\n        {subtitle && (\n          <Typography\n            variant={dense ? \"caption\" : \"body2\"}\n            role=\"heading\"\n            aria-level={2}\n            lineHeight={dense ? typography.pxToRem(15) : undefined}\n          >\n            {subtitle}\n          </Typography>\n        )}\n      </Box>\n      <Grid\n        container\n        padding={1}\n        rowSpacing={dense ? 1 : 2}\n        justifyContent={centered ? \"center\" : \"flex-start\"}\n      >\n        {children}\n      </Grid>\n    </Paper>\n  );\n};\n"],"names":["GroupValueCard","title","subtitle","centered","children","dense","typography","useTheme","defaultColor","lightWeight","darkWeight","palette","mode","grey","useGetDefaultThemeColor","_jsxs","Paper","sx","paddingBottom","Box","bgcolor","px","py","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","Grid","container","padding","rowSpacing","justifyContent"],"mappings":"yRAIO,MCYMA,EAAiB,EAC5BC,QACAC,WACAC,WACAC,WACAC,YAEA,MAAMC,WAAEA,GAAeC,IACjBC,EDpB+B,GACrCC,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYJ,IACpB,MAAwB,UAAjBI,EAAQC,KAAmBD,EAAQE,KAAKJ,GAAeE,EAAQE,KAAKH,EAAW,ECejEI,CAAwB,CAAEL,YAAa,IAAKC,WAAY,MAE7E,OACEK,EAACC,EAAK,CACJC,GAAI,CACFC,cAAeb,EAAQ,EAAI,GAC5BD,SAAA,CAEDW,EAACI,EACC,CAAAC,QAASZ,EACTa,GAAIhB,EAAQ,EAAI,EAChBiB,GAAIjB,EAAQ,GAAM,EAClBkB,WAAYlB,EAAQ,OAAImB,YAExBC,EAACC,EAAW,CAAAC,QAAStB,EAAQ,QAAU,KAAMuB,KAAK,UAAS,aAAa,EACrExB,SAAAH,IAEFC,GACCuB,EAACC,GACCC,QAAStB,EAAQ,UAAY,QAC7BuB,KAAK,UAAS,aACF,EACZL,WAAYlB,EAAQC,EAAWuB,QAAQ,SAAML,EAASpB,SAErDF,OAIPuB,EAACK,EACC,CAAAC,WACA,EAAAC,QAAS,EACTC,WAAY5B,EAAQ,EAAI,EACxB6B,eAAgB/B,EAAW,SAAW,aAErCC,SAAAA,MAGL"}

package/group-value-card/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/group-value-card",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/header/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material/styles"),t=require("@mui/material/Breadcrumbs"),i=require("@mui/material/Container"),a=require("@mui/material/Box"),n=require("@mui/material/Tabs"),l=require("@mui/material/Tab"),o=require("@mui/material/Button"),s=require("react-router-dom"),d=require("react"),u=require("@mui/material/Link"),c=require("@mui/material"),h=require("@mui/material/CircularProgress"),m=require("@mui/material/Typography");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=f(t),p=f(i),b=f(a),g=f(n),y=f(l),j=f(o),q=f(u),v=f(h),T=f(m);const C=d.forwardRef(((r,t)=>{const{href:i,...a}=r;return e.jsx(s.Link,{ref:t,to:i,...a})})),k=d.forwardRef(((r,t)=>e.jsx(q.default,{...r,component:C}))),z=d.createContext([0,()=>null]);z.Provider;const w=({loading:t,children:i})=>{const{typography:a}=r.useTheme();return t?e.jsx(v.default,{color:"inherit",size:a.h4.fontSize,"aria-label":"title loading"}):"string"==typeof i?e.jsx(T.default,{variant:"h4",role:"heading","aria-level":1,children:i}):e.jsx(e.Fragment,{children:i})},B=({loading:t,children:i})=>{const{typography:a}=r.useTheme();return t?e.jsx(v.default,{color:"inherit",size:a.body1.fontSize,"aria-label":"subtitle loading"}):"string"==typeof i?e.jsx(T.default,{variant:"body1",role:"heading","aria-level":2,children:i}):e.jsx(e.Fragment,{children:i})};exports.Header=({title:t="",loadingTitle:i,subtitle:a,loadingSubtitle:n,preset:l="default",actionsVariant:o="outlined",breadcrumbs:u,actions:h,tabs:m,tabsMode:f="panel",navigationButton:q})=>{const v=s.useLocation(),{palette:T}=r.useTheme(),C=(({lightWeight:e=100,darkWeight:r=900}={})=>{const{palette:t}=c.useTheme();return"light"===t.mode?t.grey[e]:t.grey[r]})(),[L,S]=d.useContext(z),H={default:C,primary:T.primary.main,secondary:T.secondary.main,inherit:"inherit",transparent:"transparent"},P=H[l],F={default:T.getContrastText(H.default),primary:T.primary.contrastText,secondary:T.secondary.contrastText,inherit:"inherit",transparent:T.text.primary}[l],I="panel"===f?L:m?.findIndex((e=>e.href===v.pathname));return e.jsx(b.default,{bgcolor:P,color:F,children:e.jsxs(p.default,{children:[e.jsxs(b.default,{sx:{py:3,display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[e.jsxs(b.default,{children:[q&&e.jsx(j.default,{href:q.href,size:"small",color:"inherit",LinkComponent:k,startIcon:q.icon,sx:{mb:1},children:q.text}),u?.length&&e.jsx(x.default,{color:"inherit",separator:"›","aria-label":"breadcrumb",sx:{marginTop:1},children:u.map((({id:r,link:t,text:i})=>e.jsx(k,{underline:"hover",color:"inherit",href:t,variant:"body2",role:"link",children:i},r)))}),e.jsx(w,{loading:i,children:t}),(a||n)&&e.jsx(B,{loading:n,children:a})]}),h&&e.jsx(b.default,{children:h.map((({disabled:r,id:t,href:i,onClick:a,text:n},l)=>e.jsx(j.default,{component:i?k:"button",role:"button",color:"inherit",disabled:r,variant:o,size:"small",href:i,onClick:a,sx:{mr:l!=h.length-1?1:0},children:n},t)))})]}),m&&e.jsx(g.default,{value:I,textColor:"inherit",onChange:"panel"===f?(e,r)=>S(r):void 0,children:m.map((({id:r,label:t,disabled:i,href:a})=>{const n={label:t,disabled:i};return"panel"===f?e.jsx(y.default,{...n},r):e.jsx(y.default,{...n,component:k,href:a},r)}))})]})})},exports.HeaderSubtitle=B,exports.HeaderTitle=w;
+//# sourceMappingURL=index.js.map

package/header/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/link/link.tsx","../../../src/tab-provider/tab-provider.context.ts","../../../src/header/header-title.tsx","../../../src/header/header.tsx","../../../src/utils/theme.ts"],"sourcesContent":["import { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport MuiLink, { LinkProps } from \"@mui/material/Link\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\n\nexport const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([\n  0,\n  () => null,\n]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n","import CircularProgress from \"@mui/material/CircularProgress\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { PropsWithChildren } from \"react\";\n\nexport type HeaderTitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderTitle = ({ loading, children }: HeaderTitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress color=\"inherit\" size={typography.h4.fontSize} aria-label=\"title loading\" />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport type HeaderSubtitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderSubtitle = ({ loading, children }: HeaderSubtitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress\n        color=\"inherit\"\n        size={typography.body1.fontSize}\n        aria-label=\"subtitle loading\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"body1\" role=\"heading\" aria-level={2}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Breadcrumbs from \"@mui/material/Breadcrumbs\";\nimport Container from \"@mui/material/Container\";\nimport Box from \"@mui/material/Box\";\nimport Tabs from \"@mui/material/Tabs\";\nimport Tab from \"@mui/material/Tab\";\nimport Button from \"@mui/material/Button\";\nimport { Link } from \"~/link\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\nimport { HeaderComponent, HeaderPreset, HeaderProps } from \"./header.types\";\nimport { useTab } from \"~/tab-provider\";\nimport { useLocation } from \"react-router-dom\";\nimport { HeaderSubtitle, HeaderTitle } from \"./header-title\";\n\n/**\n * Section used to explain give basic information about the page\n * and put the main actions\n */\nexport const Header: HeaderComponent = ({\n  title = \"\",\n  loadingTitle,\n  subtitle,\n  loadingSubtitle,\n  preset = \"default\",\n  actionsVariant = \"outlined\",\n  breadcrumbs,\n  actions,\n  tabs,\n  tabsMode = \"panel\",\n  navigationButton,\n}: HeaderProps) => {\n  const location = useLocation();\n  const { palette } = useTheme();\n  const defaultColor = useGetDefaultThemeColor();\n  const [selectedTab, setSelectedTab] = useTab();\n\n  const bgColorPresets: Record<HeaderPreset, string> = {\n    default: defaultColor,\n    primary: palette.primary.main,\n    secondary: palette.secondary.main,\n    inherit: \"inherit\",\n    transparent: \"transparent\",\n  };\n  const bgColor = bgColorPresets[preset];\n  const textColorPresets: Record<HeaderPreset, string> = {\n    default: palette.getContrastText(bgColorPresets.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    inherit: \"inherit\",\n    transparent: palette.text.primary,\n  };\n  const textColor = textColorPresets[preset];\n\n  const modedSelectedTab =\n    tabsMode === \"panel\" ? selectedTab : tabs?.findIndex((tab) => tab.href === location.pathname);\n\n  return (\n    <Box bgcolor={bgColor} color={textColor}>\n      <Container>\n        <Box sx={{ py: 3, display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\" }}>\n          <Box>\n            {navigationButton && (\n              <Button\n                href={navigationButton.href}\n                size=\"small\"\n                color=\"inherit\"\n                LinkComponent={Link}\n                startIcon={navigationButton.icon}\n                sx={{ mb: 1 }}\n              >\n                {navigationButton.text}\n              </Button>\n            )}\n            {breadcrumbs?.length && (\n              <Breadcrumbs\n                color=\"inherit\"\n                separator=\"›\"\n                aria-label=\"breadcrumb\"\n                sx={{ marginTop: 1 }}\n              >\n                {breadcrumbs.map(({ id, link, text }) => (\n                  <Link\n                    key={id}\n                    underline=\"hover\"\n                    color=\"inherit\"\n                    href={link}\n                    variant=\"body2\"\n                    role=\"link\"\n                  >\n                    {text}\n                  </Link>\n                ))}\n              </Breadcrumbs>\n            )}\n            <HeaderTitle loading={loadingTitle}>{title}</HeaderTitle>\n            {(subtitle || loadingSubtitle) && (\n              <HeaderSubtitle loading={loadingSubtitle}>{subtitle}</HeaderSubtitle>\n            )}\n          </Box>\n          {actions && (\n            <Box>\n              {actions.map(({ disabled, id, href, onClick, text }, i) => (\n                <Button\n                  component={href ? Link : \"button\"}\n                  role=\"button\"\n                  color=\"inherit\"\n                  disabled={disabled}\n                  key={id}\n                  variant={actionsVariant}\n                  size=\"small\"\n                  href={href}\n                  onClick={onClick}\n                  sx={{ mr: i != actions.length - 1 ? 1 : 0 }}\n                >\n                  {text}\n                </Button>\n              ))}\n            </Box>\n          )}\n        </Box>\n        {tabs && (\n          <Tabs\n            value={modedSelectedTab}\n            textColor=\"inherit\"\n            onChange={tabsMode === \"panel\" ? (_, index) => setSelectedTab(index) : undefined}\n          >\n            {tabs.map(({ id, label, disabled, href }) => {\n              const tabProps = { label, disabled };\n              if (tabsMode === \"panel\") {\n                return <Tab key={id} {...tabProps} />;\n              } else {\n                return <Tab key={id} {...tabProps} component={Link} href={href} />;\n              }\n            })}\n          </Tabs>\n        )}\n      </Container>\n    </Box>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n"],"names":["LinkBehaviour","forwardRef","props","ref","href","other","_jsx","jsx","RouterLink","to","Link","_1","MuiLink","component","TabContext","createContext","Provider","HeaderTitle","loading","children","typography","useTheme","CircularProgress","color","size","h4","fontSize","Typography","variant","role","_Fragment","Fragment","HeaderSubtitle","body1","title","loadingTitle","subtitle","loadingSubtitle","preset","actionsVariant","breadcrumbs","actions","tabs","tabsMode","navigationButton","location","useLocation","palette","defaultColor","lightWeight","darkWeight","mode","grey","useGetDefaultThemeColor","selectedTab","setSelectedTab","useContext","bgColorPresets","default","primary","main","secondary","inherit","transparent","bgColor","textColor","getContrastText","contrastText","text","modedSelectedTab","findIndex","tab","pathname","Box","bgcolor","_jsxs","Container","sx","py","display","flexDirection","justifyContent","Button","LinkComponent","startIcon","icon","mb","length","Breadcrumbs","separator","marginTop","map","id","link","underline","disabled","onClick","i","mr","Tabs","value","onChange","_","index","undefined","label","tabProps","Tab"],"mappings":"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"}

package/header/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/header",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.14.0"
+  }
+}

package/header/index.js

@@ -1,2 +1,2 @@
-import e,{forwardRef as t,createContext as r,useContext as n}from"react";import{Link as a,useTheme as l,CircularProgress as i,Typography as o,Box as c,Container as m,Button as s,Breadcrumbs as d,Tabs as p,Tab as h}from"@mui/material";import{Link as u,useLocation as g}from"react-router-dom";const y=t(((t,r)=>{const{href:n,...a}=t;return e.createElement(u,{ref:r,to:n,...a})})),b=t(((t,r)=>e.createElement(a,{...t,component:y}))),f=r([0,()=>null]);f.Provider;const E=({loading:t,children:r})=>{const{typography:n}=l();return t?e.createElement(i,{color:"inherit",size:n.h4.fontSize,"aria-label":"title loading"}):"string"==typeof r?e.createElement(o,{variant:"h4",role:"heading","aria-level":1},r):e.createElement(e.Fragment,null,r)},x=({loading:t,children:r})=>{const{typography:n}=l();return t?e.createElement(i,{color:"inherit",size:n.body1.fontSize,"aria-label":"subtitle loading"}):"string"==typeof r?e.createElement(o,{variant:"body1",role:"heading","aria-level":2},r):e.createElement(e.Fragment,null,r)},k=({title:t="",loadingTitle:r,subtitle:a,loadingSubtitle:i,preset:o="default",actionsVariant:u="outlined",breadcrumbs:y,actions:k,tabs:v,tabsMode:C="panel",navigationButton:z})=>{const T=g(),{palette:L}=l(),S=(({lightWeight:e=100,darkWeight:t=900}={})=>{const{palette:r}=l();return"light"===r.mode?r.grey[e]:r.grey[t]})(),[w,F]=n(f),I={default:S,primary:L.primary.main,secondary:L.secondary.main,inherit:"inherit",transparent:"transparent"},W=I[o],j={default:L.getContrastText(I.default),primary:L.primary.contrastText,secondary:L.secondary.contrastText,inherit:"inherit",transparent:L.text.primary}[o],B="panel"===C?w:v?.findIndex((e=>e.href===T.pathname));return e.createElement(c,{bgcolor:W,color:j},e.createElement(m,null,e.createElement(c,{sx:{py:3,display:"flex",flexDirection:"row",justifyContent:"space-between"}},e.createElement(c,null,z&&e.createElement(s,{href:z.href,size:"small",color:"inherit",LinkComponent:b,startIcon:z.icon,sx:{mb:1}},z.text),y?.length&&e.createElement(d,{color:"inherit",separator:"›","aria-label":"breadcrumb",sx:{marginTop:1}},y.map((({id:t,link:r,text:n})=>e.createElement(b,{key:t,underline:"hover",color:"inherit",href:r,variant:"body2",role:"link"},n)))),e.createElement(E,{loading:r},t),(a||i)&&e.createElement(x,{loading:i},a)),k&&e.createElement(c,null,k.map((({disabled:t,id:r,href:n,onClick:a,text:l},i)=>e.createElement(s,{component:n?b:"button",role:"button",color:"inherit",disabled:t,key:r,variant:u,size:"small",href:n,onClick:a,sx:{mr:i!=k.length-1?1:0}},l))))),v&&e.createElement(p,{value:B,textColor:"inherit",onChange:"panel"===C?(e,t)=>F(t):void 0},v.map((({id:t,label:r,disabled:n,href:a})=>{const l={label:r,disabled:n};return"panel"===C?e.createElement(h,{key:t,...l}):e.createElement(h,{key:t,...l,component:b,href:a})})))))};export{k as Header,x as HeaderSubtitle,E as HeaderTitle};
+import{jsx as r,Fragment as e,jsxs as i}from"react/jsx-runtime";import{useTheme as t}from"@mui/material/styles";import a from"@mui/material/Breadcrumbs";import n from"@mui/material/Container";import o from"@mui/material/Box";import l from"@mui/material/Tabs";import m from"@mui/material/Tab";import d from"@mui/material/Button";import{Link as c,useLocation as s}from"react-router-dom";import{forwardRef as h,createContext as p,useContext as u}from"react";import f from"@mui/material/Link";import{useTheme as b}from"@mui/material";import g from"@mui/material/CircularProgress";import y from"@mui/material/Typography";const x=h(((e,i)=>{const{href:t,...a}=e;return r(c,{ref:i,to:t,...a})})),v=h(((e,i)=>r(f,{...e,component:x}))),C=p([0,()=>null]);C.Provider;const T=({loading:i,children:a})=>{const{typography:n}=t();return i?r(g,{color:"inherit",size:n.h4.fontSize,"aria-label":"title loading"}):"string"==typeof a?r(y,{variant:"h4",role:"heading","aria-level":1,children:a}):r(e,{children:a})},k=({loading:i,children:a})=>{const{typography:n}=t();return i?r(g,{color:"inherit",size:n.body1.fontSize,"aria-label":"subtitle loading"}):"string"==typeof a?r(y,{variant:"body1",role:"heading","aria-level":2,children:a}):r(e,{children:a})},z=({title:e="",loadingTitle:c,subtitle:h,loadingSubtitle:p,preset:f="default",actionsVariant:g="outlined",breadcrumbs:y,actions:x,tabs:z,tabsMode:B="panel",navigationButton:L})=>{const S=s(),{palette:j}=t(),w=(({lightWeight:r=100,darkWeight:e=900}={})=>{const{palette:i}=b();return"light"===i.mode?i.grey[r]:i.grey[e]})(),[I,P]=u(C),W={default:w,primary:j.primary.main,secondary:j.secondary.main,inherit:"inherit",transparent:"transparent"},D=W[f],M={default:j.getContrastText(W.default),primary:j.primary.contrastText,secondary:j.secondary.contrastText,inherit:"inherit",transparent:j.text.primary}[f],V="panel"===B?I:z?.findIndex((r=>r.href===S.pathname));return r(o,{bgcolor:D,color:M,children:i(n,{children:[i(o,{sx:{py:3,display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[i(o,{children:[L&&r(d,{href:L.href,size:"small",color:"inherit",LinkComponent:v,startIcon:L.icon,sx:{mb:1},children:L.text}),y?.length&&r(a,{color:"inherit",separator:"›","aria-label":"breadcrumb",sx:{marginTop:1},children:y.map((({id:e,link:i,text:t})=>r(v,{underline:"hover",color:"inherit",href:i,variant:"body2",role:"link",children:t},e)))}),r(T,{loading:c,children:e}),(h||p)&&r(k,{loading:p,children:h})]}),x&&r(o,{children:x.map((({disabled:e,id:i,href:t,onClick:a,text:n},o)=>r(d,{component:t?v:"button",role:"button",color:"inherit",disabled:e,variant:g,size:"small",href:t,onClick:a,sx:{mr:o!=x.length-1?1:0},children:n},i)))})]}),z&&r(l,{value:V,textColor:"inherit",onChange:"panel"===B?(r,e)=>P(e):void 0,children:z.map((({id:e,label:i,disabled:t,href:a})=>{const n={label:i,disabled:t};return r(m,"panel"===B?{...n}:{...n,component:v,href:a},e)}))})]})})};export{z as Header,k as HeaderSubtitle,T as HeaderTitle};
 //# sourceMappingURL=index.js.map

package/header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/link/link.tsx","../../src/tab-provider/tab-provider.context.ts","../../src/header/header-title.tsx","../../src/header/header.tsx","../../src/utils/theme.ts"],"sourcesContent":["import React from \"react\";\nimport { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport { LinkProps, Link as MuiLink } from \"@mui/material\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\n\nexport const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([\n  0,\n  () => null,\n]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n","import { CircularProgress, Typography, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { PropsWithChildren } from \"react\";\n\nexport type HeaderTitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderTitle = ({ loading, children }: HeaderTitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress color=\"inherit\" size={typography.h4.fontSize} aria-label=\"title loading\" />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport type HeaderSubtitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderSubtitle = ({ loading, children }: HeaderSubtitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress\n        color=\"inherit\"\n        size={typography.body1.fontSize}\n        aria-label=\"subtitle loading\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"body1\" role=\"heading\" aria-level={2}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n","import React from \"react\";\nimport {\n  Breadcrumbs,\n  Typography,\n  Container,\n  useTheme,\n  Box,\n  Tabs,\n  Tab,\n  Button,\n} from \"@mui/material\";\nimport { Link } from \"~/link\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\nimport { HeaderComponent, HeaderPreset, HeaderProps } from \"./header.types\";\nimport { useTab } from \"~/tab-provider\";\nimport { useLocation } from \"react-router-dom\";\nimport { HeaderSubtitle, HeaderTitle } from \"./header-title\";\n\n/**\n * Section used to explain give basic information about the page\n * and put the main actions\n */\nexport const Header: HeaderComponent = ({\n  title = \"\",\n  loadingTitle,\n  subtitle,\n  loadingSubtitle,\n  preset = \"default\",\n  actionsVariant = \"outlined\",\n  breadcrumbs,\n  actions,\n  tabs,\n  tabsMode = \"panel\",\n  navigationButton,\n}: HeaderProps) => {\n  const location = useLocation();\n  const { palette } = useTheme();\n  const defaultColor = useGetDefaultThemeColor();\n  const [selectedTab, setSelectedTab] = useTab();\n\n  const bgColorPresets: Record<HeaderPreset, string> = {\n    default: defaultColor,\n    primary: palette.primary.main,\n    secondary: palette.secondary.main,\n    inherit: \"inherit\",\n    transparent: \"transparent\",\n  };\n  const bgColor = bgColorPresets[preset];\n  const textColorPresets: Record<HeaderPreset, string> = {\n    default: palette.getContrastText(bgColorPresets.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    inherit: \"inherit\",\n    transparent: palette.text.primary,\n  };\n  const textColor = textColorPresets[preset];\n\n  const modedSelectedTab =\n    tabsMode === \"panel\" ? selectedTab : tabs?.findIndex((tab) => tab.href === location.pathname);\n\n  return (\n    <Box bgcolor={bgColor} color={textColor}>\n      <Container>\n        <Box sx={{ py: 3, display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\" }}>\n          <Box>\n            {navigationButton && (\n              <Button\n                href={navigationButton.href}\n                size=\"small\"\n                color=\"inherit\"\n                LinkComponent={Link}\n                startIcon={navigationButton.icon}\n                sx={{ mb: 1 }}\n              >\n                {navigationButton.text}\n              </Button>\n            )}\n            {breadcrumbs?.length && (\n              <Breadcrumbs\n                color=\"inherit\"\n                separator=\"›\"\n                aria-label=\"breadcrumb\"\n                sx={{ marginTop: 1 }}\n              >\n                {breadcrumbs.map(({ id, link, text }) => (\n                  <Link\n                    key={id}\n                    underline=\"hover\"\n                    color=\"inherit\"\n                    href={link}\n                    variant=\"body2\"\n                    role=\"link\"\n                  >\n                    {text}\n                  </Link>\n                ))}\n              </Breadcrumbs>\n            )}\n            <HeaderTitle loading={loadingTitle}>{title}</HeaderTitle>\n            {(subtitle || loadingSubtitle) && (\n              <HeaderSubtitle loading={loadingSubtitle}>{subtitle}</HeaderSubtitle>\n            )}\n          </Box>\n          {actions && (\n            <Box>\n              {actions.map(({ disabled, id, href, onClick, text }, i) => (\n                <Button\n                  component={href ? Link : \"button\"}\n                  role=\"button\"\n                  color=\"inherit\"\n                  disabled={disabled}\n                  key={id}\n                  variant={actionsVariant}\n                  size=\"small\"\n                  href={href}\n                  onClick={onClick}\n                  sx={{ mr: i != actions.length - 1 ? 1 : 0 }}\n                >\n                  {text}\n                </Button>\n              ))}\n            </Box>\n          )}\n        </Box>\n        {tabs && (\n          <Tabs\n            value={modedSelectedTab}\n            textColor=\"inherit\"\n            onChange={tabsMode === \"panel\" ? (_, index) => setSelectedTab(index) : undefined}\n          >\n            {tabs.map(({ id, label, disabled, href }) => {\n              const tabProps = { label, disabled };\n              if (tabsMode === \"panel\") {\n                return <Tab key={id} {...tabProps} />;\n              } else {\n                return <Tab key={id} {...tabProps} component={Link} href={href} />;\n              }\n            })}\n          </Tabs>\n        )}\n      </Container>\n    </Box>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n"],"names":["LinkBehaviour","forwardRef","props","ref","href","other","React","createElement","RouterLink","to","Link","_1","MuiLink","component","TabContext","createContext","Provider","HeaderTitle","loading","children","typography","useTheme","CircularProgress","color","size","h4","fontSize","Typography","variant","role","Fragment","HeaderSubtitle","body1","Header","title","loadingTitle","subtitle","loadingSubtitle","preset","actionsVariant","breadcrumbs","actions","tabs","tabsMode","navigationButton","location","useLocation","palette","defaultColor","lightWeight","darkWeight","mode","grey","useGetDefaultThemeColor","selectedTab","setSelectedTab","useContext","bgColorPresets","default","primary","main","secondary","inherit","transparent","bgColor","textColor","getContrastText","contrastText","text","modedSelectedTab","findIndex","tab","pathname","Box","bgcolor","Container","sx","py","display","flexDirection","justifyContent","Button","LinkComponent","startIcon","icon","mb","length","Breadcrumbs","separator","marginTop","map","id","link","key","underline","disabled","onClick","i","mr","Tabs","value","onChange","_","index","undefined","label","tabProps","Tab"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/link/link.tsx","../../src/tab-provider/tab-provider.context.ts","../../src/header/header-title.tsx","../../src/header/header.tsx","../../src/utils/theme.ts"],"sourcesContent":["import { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport MuiLink, { LinkProps } from \"@mui/material/Link\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\n\nexport const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([\n  0,\n  () => null,\n]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n","import CircularProgress from \"@mui/material/CircularProgress\";\nimport Typography from \"@mui/material/Typography\";\nimport { useTheme } from \"@mui/material/styles\";\nimport { PropsWithChildren } from \"react\";\n\nexport type HeaderTitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderTitle = ({ loading, children }: HeaderTitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress color=\"inherit\" size={typography.h4.fontSize} aria-label=\"title loading\" />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport type HeaderSubtitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderSubtitle = ({ loading, children }: HeaderSubtitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress\n        color=\"inherit\"\n        size={typography.body1.fontSize}\n        aria-label=\"subtitle loading\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"body1\" role=\"heading\" aria-level={2}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n","import { useTheme } from \"@mui/material/styles\";\nimport Breadcrumbs from \"@mui/material/Breadcrumbs\";\nimport Container from \"@mui/material/Container\";\nimport Box from \"@mui/material/Box\";\nimport Tabs from \"@mui/material/Tabs\";\nimport Tab from \"@mui/material/Tab\";\nimport Button from \"@mui/material/Button\";\nimport { Link } from \"~/link\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\nimport { HeaderComponent, HeaderPreset, HeaderProps } from \"./header.types\";\nimport { useTab } from \"~/tab-provider\";\nimport { useLocation } from \"react-router-dom\";\nimport { HeaderSubtitle, HeaderTitle } from \"./header-title\";\n\n/**\n * Section used to explain give basic information about the page\n * and put the main actions\n */\nexport const Header: HeaderComponent = ({\n  title = \"\",\n  loadingTitle,\n  subtitle,\n  loadingSubtitle,\n  preset = \"default\",\n  actionsVariant = \"outlined\",\n  breadcrumbs,\n  actions,\n  tabs,\n  tabsMode = \"panel\",\n  navigationButton,\n}: HeaderProps) => {\n  const location = useLocation();\n  const { palette } = useTheme();\n  const defaultColor = useGetDefaultThemeColor();\n  const [selectedTab, setSelectedTab] = useTab();\n\n  const bgColorPresets: Record<HeaderPreset, string> = {\n    default: defaultColor,\n    primary: palette.primary.main,\n    secondary: palette.secondary.main,\n    inherit: \"inherit\",\n    transparent: \"transparent\",\n  };\n  const bgColor = bgColorPresets[preset];\n  const textColorPresets: Record<HeaderPreset, string> = {\n    default: palette.getContrastText(bgColorPresets.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    inherit: \"inherit\",\n    transparent: palette.text.primary,\n  };\n  const textColor = textColorPresets[preset];\n\n  const modedSelectedTab =\n    tabsMode === \"panel\" ? selectedTab : tabs?.findIndex((tab) => tab.href === location.pathname);\n\n  return (\n    <Box bgcolor={bgColor} color={textColor}>\n      <Container>\n        <Box sx={{ py: 3, display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\" }}>\n          <Box>\n            {navigationButton && (\n              <Button\n                href={navigationButton.href}\n                size=\"small\"\n                color=\"inherit\"\n                LinkComponent={Link}\n                startIcon={navigationButton.icon}\n                sx={{ mb: 1 }}\n              >\n                {navigationButton.text}\n              </Button>\n            )}\n            {breadcrumbs?.length && (\n              <Breadcrumbs\n                color=\"inherit\"\n                separator=\"›\"\n                aria-label=\"breadcrumb\"\n                sx={{ marginTop: 1 }}\n              >\n                {breadcrumbs.map(({ id, link, text }) => (\n                  <Link\n                    key={id}\n                    underline=\"hover\"\n                    color=\"inherit\"\n                    href={link}\n                    variant=\"body2\"\n                    role=\"link\"\n                  >\n                    {text}\n                  </Link>\n                ))}\n              </Breadcrumbs>\n            )}\n            <HeaderTitle loading={loadingTitle}>{title}</HeaderTitle>\n            {(subtitle || loadingSubtitle) && (\n              <HeaderSubtitle loading={loadingSubtitle}>{subtitle}</HeaderSubtitle>\n            )}\n          </Box>\n          {actions && (\n            <Box>\n              {actions.map(({ disabled, id, href, onClick, text }, i) => (\n                <Button\n                  component={href ? Link : \"button\"}\n                  role=\"button\"\n                  color=\"inherit\"\n                  disabled={disabled}\n                  key={id}\n                  variant={actionsVariant}\n                  size=\"small\"\n                  href={href}\n                  onClick={onClick}\n                  sx={{ mr: i != actions.length - 1 ? 1 : 0 }}\n                >\n                  {text}\n                </Button>\n              ))}\n            </Box>\n          )}\n        </Box>\n        {tabs && (\n          <Tabs\n            value={modedSelectedTab}\n            textColor=\"inherit\"\n            onChange={tabsMode === \"panel\" ? (_, index) => setSelectedTab(index) : undefined}\n          >\n            {tabs.map(({ id, label, disabled, href }) => {\n              const tabProps = { label, disabled };\n              if (tabsMode === \"panel\") {\n                return <Tab key={id} {...tabProps} />;\n              } else {\n                return <Tab key={id} {...tabProps} component={Link} href={href} />;\n              }\n            })}\n          </Tabs>\n        )}\n      </Container>\n    </Box>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n"],"names":["LinkBehaviour","forwardRef","props","ref","href","other","_jsx","RouterLink","to","Link","_1","MuiLink","component","TabContext","createContext","Provider","HeaderTitle","loading","children","typography","useTheme","CircularProgress","color","size","h4","fontSize","Typography","variant","role","_Fragment","HeaderSubtitle","body1","Header","title","loadingTitle","subtitle","loadingSubtitle","preset","actionsVariant","breadcrumbs","actions","tabs","tabsMode","navigationButton","location","useLocation","palette","defaultColor","lightWeight","darkWeight","mode","grey","useGetDefaultThemeColor","selectedTab","setSelectedTab","useContext","bgColorPresets","default","primary","main","secondary","inherit","transparent","bgColor","textColor","getContrastText","contrastText","text","modedSelectedTab","findIndex","tab","pathname","Box","bgcolor","_jsxs","Container","sx","py","display","flexDirection","justifyContent","Button","LinkComponent","startIcon","icon","mb","length","Breadcrumbs","separator","marginTop","map","id","link","underline","disabled","onClick","i","mr","Tabs","value","onChange","_","index","undefined","label","tabProps","Tab"],"mappings":"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"}

package/header/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/header",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/header-layout/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material/Box"),t=require("@mui/material/LinearProgress"),i=require("@mui/material/CircularProgress"),l=require("react"),a=require("@mui/icons-material/ReportProblem"),n=require("@mui/material/Typography"),s=require("@mui/material/Button");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=u(r),c=u(t),d=u(i),h=u(a),x=u(n),f=u(s);const m=()=>e.jsx(o.default,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center",children:e.jsx(d.default,{})}),j=l.createContext([0,()=>null]).Provider,g=({children:r,initialValue:t=0})=>{const i=l.useState(t);return e.jsx(j,{value:i,children:r})},p=({title:r,subtitle:t,icon:i,iconSize:l=200,actions:a})=>e.jsxs(o.default,{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",children:[i&&i({size:l,color:"primary"}),e.jsx(x.default,{variant:"h4",role:"heading","aria-level":1,children:r}),e.jsx(x.default,{variant:"subtitle1",role:"heading","aria-level":2,sx:{mt:2},children:t}),a&&e.jsx(o.default,{sx:{pt:2},children:a.map((({id:r,text:t,href:i,onClick:l},n)=>e.jsx(f.default,{role:"button",variant:"contained",href:i,onClick:l,sx:{mr:n<a.length-1?2:0},children:t},r)))})]}),y=()=>e.jsx(h.default,{color:"error",sx:{width:200,height:200}});exports.HeaderLayout=({loading:r,children:t,fetching:i,error:l})=>{const[a,n]=t;return e.jsx(g,{children:e.jsxs(o.default,{display:"flex",flexDirection:"column",height:1,children:[a,i&&e.jsx(o.default,{width:1,children:e.jsx(c.default,{})}),r&&e.jsx(m,{}),l&&e.jsx(o.default,{mt:4,children:e.jsx(p,{icon:l.icon||y,title:l.title||"There has been an error",subtitle:l.message})}),!r&&!l&&n]})})};
+//# sourceMappingURL=index.js.map

package/header-layout/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/loading-area/loading-area.tsx","../../../src/tab-provider/tab-provider.context.ts","../../../src/tab-provider/tab-provider.provider.tsx","../../../src/placeholder/placeholder.tsx","../../../src/header-layout/header-layout.tsx"],"sourcesContent":["import CircularProgress from \"@mui/material/CircularProgress\";\nimport Box from \"@mui/material/Box\";\n\n/**\n * Displays a centered loading indicator\n */\nexport const LoadingArea = () => {\n  return (\n    <Box width={1} height={1} display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n      <CircularProgress />\n    </Box>\n  );\n};\n","import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\n\nexport const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([\n  0,\n  () => null,\n]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n","import { PropsWithChildren, useState } from \"react\";\nimport { TabContextProvider } from \"./tab-provider.context\";\n\ntype TabProviderProps = PropsWithChildren<{\n  initialValue?: number;\n}>;\n\nexport const TabProvider = ({ children, initialValue = 0 }: TabProviderProps) => {\n  const tabState = useState(initialValue);\n\n  return <TabContextProvider value={tabState}>{children}</TabContextProvider>;\n};\n","import { ReactElement } from \"react\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport Button from \"@mui/material/Button\";\n\ntype IconColor =\n  | \"inherit\"\n  | \"action\"\n  | \"disabled\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"info\"\n  | \"success\"\n  | \"warning\";\n\nexport interface PlaceholderAction {\n  id: string;\n  text: string;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface PlaceholderIconArgs {\n  size: number;\n  color: IconColor;\n}\n\nexport type PlaceholderIcon = ({ size, color }: PlaceholderIconArgs) => ReactElement;\n\nexport interface PlaceholderProps {\n  title: string;\n  subtitle: string;\n  iconSize?: number;\n  icon?: PlaceholderIcon;\n  actions?: PlaceholderAction[];\n}\n\nexport const Placeholder = ({\n  title,\n  subtitle,\n  icon,\n  iconSize = 200,\n  actions,\n}: PlaceholderProps) => {\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      textAlign=\"center\"\n    >\n      {icon && icon({ size: iconSize, color: \"primary\" })}\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {title}\n      </Typography>\n      <Typography variant=\"subtitle1\" role=\"heading\" aria-level={2} sx={{ mt: 2 }}>\n        {subtitle}\n      </Typography>\n      {actions && (\n        <Box sx={{ pt: 2 }}>\n          {actions.map(({ id, text, href, onClick }, index) => (\n            <Button\n              key={id}\n              role=\"button\"\n              variant=\"contained\"\n              href={href}\n              onClick={onClick}\n              sx={{ mr: index < actions.length - 1 ? 2 : 0 }}\n            >\n              {text}\n            </Button>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n};\n","import Box from \"@mui/material/Box\";\nimport LinearProgress from \"@mui/material/LinearProgress\";\nimport { LoadingArea } from \"~/loading-area\";\nimport { TabProvider } from \"~/tab-provider\";\nimport ReportProblemIcon from \"@mui/icons-material/ReportProblem\";\nimport { Placeholder, PlaceholderIcon } from \"~/placeholder\";\nimport { HeaderElement } from \"~/header\";\nimport { ContentElement } from \"~/content\";\n\nexport interface HeaderLayoutError {\n  icon?: PlaceholderIcon;\n  title?: string;\n  message: string;\n}\n\nexport interface HeaderLayoutProps {\n  loading?: boolean;\n  fetching?: boolean;\n  error?: HeaderLayoutError;\n  children: [HeaderElement, ContentElement];\n}\n\nconst DefaultErrorIcon = () => <ReportProblemIcon color=\"error\" sx={{ width: 200, height: 200 }} />;\n\nexport const HeaderLayout = ({ loading, children, fetching, error }: HeaderLayoutProps) => {\n  const [headerElement, contentElement] = children;\n\n  return (\n    <TabProvider>\n      <Box display=\"flex\" flexDirection=\"column\" height={1}>\n        {headerElement}\n        {fetching && (\n          <Box width={1}>\n            <LinearProgress />\n          </Box>\n        )}\n        {loading && <LoadingArea />}\n        {error && (\n          <Box mt={4}>\n            <Placeholder\n              icon={error.icon || DefaultErrorIcon}\n              title={error.title || \"There has been an error\"}\n              subtitle={error.message}\n            />\n          </Box>\n        )}\n        {!loading && !error && contentElement}\n      </Box>\n    </TabProvider>\n  );\n};\n"],"names":["LoadingArea","_jsx","jsx","Box","width","height","display","justifyContent","alignItems","children","CircularProgress","TabContextProvider","createContext","Provider","TabProvider","initialValue","tabState","useState","value","Placeholder","title","subtitle","icon","iconSize","actions","_jsxs","jsxs","flexDirection","textAlign","size","color","Typography","variant","role","sx","mt","pt","map","id","text","href","onClick","index","Button","mr","length","DefaultErrorIcon","ReportProblemIcon","loading","fetching","error","headerElement","contentElement","LinearProgress","message"],"mappings":"4dAMO,MAAMA,EAAc,IAEvBC,EAAAC,IAACC,EAAG,QAAA,CAACC,MAAO,EAAGC,OAAQ,EAAGC,QAAQ,OAAOC,eAAe,SAASC,WAAW,SAAQC,SAClFR,EAACC,IAAAQ,UAAmB,CAAA,KCHbC,EAJaC,EAAAA,cAA0D,CAClF,EACA,IAAM,OAEqCC,SCChCC,EAAc,EAAGL,WAAUM,eAAe,MACrD,MAAMC,EAAWC,WAASF,GAE1B,OAAOd,EAAAA,IAACU,EAAmB,CAAAO,MAAOF,EAAQP,SAAGA,GAA8B,EC4BhEU,EAAc,EACzBC,QACAC,WACAC,OACAC,WAAW,IACXC,aAGEC,EAACC,KAAAvB,UACC,CAAAG,QAAQ,OACRqB,cAAc,SACdpB,eAAe,SACfC,WAAW,SACXoB,UAAU,SAAQnB,SAAA,CAEjBa,GAAQA,EAAK,CAAEO,KAAMN,EAAUO,MAAO,YACvC7B,EAAAA,IAAC8B,EAAU,QAAA,CAACC,QAAQ,KAAKC,KAAK,UAAS,aAAa,EAACxB,SAClDW,IAEHnB,MAAC8B,UAAU,CAACC,QAAQ,YAAYC,KAAK,UAAS,aAAa,EAAGC,GAAI,CAAEC,GAAI,GAAG1B,SACxEY,IAEFG,GACCvB,EAAAA,IAACE,EAAG,SAAC+B,GAAI,CAAEE,GAAI,GACZ3B,SAAAe,EAAQa,KAAI,EAAGC,KAAIC,OAAMC,OAAMC,WAAWC,IACzCzC,EAACC,IAAAyC,WAECV,KAAK,SACLD,QAAQ,YACRQ,KAAMA,EACNC,QAASA,EACTP,GAAI,CAAEU,GAAIF,EAAQlB,EAAQqB,OAAS,EAAI,EAAI,GAE1CpC,SAAA8B,GAPID,UC1CbQ,EAAmB,IAAM7C,MAAC8C,UAAiB,CAACjB,MAAM,QAAQI,GAAI,CAAE9B,MAAO,IAAKC,OAAQ,4BAE9D,EAAG2C,UAASvC,WAAUwC,WAAUC,YAC1D,MAAOC,EAAeC,GAAkB3C,EAExC,OACER,EAACC,IAAAY,YACCW,EAAAA,KAACtB,EAAAA,SAAIG,QAAQ,OAAOqB,cAAc,SAAStB,OAAQ,YAChD8C,EACAF,GACChD,EAAAA,IAACE,EAAAA,QAAG,CAACC,MAAO,WACVH,EAACC,IAAAmD,EAAc,cAGlBL,GAAW/C,MAACD,EAAW,IACvBkD,GACCjD,EAACC,IAAAC,EAAG,SAACgC,GAAI,EACP1B,SAAAR,EAAAA,IAACkB,EACC,CAAAG,KAAM4B,EAAM5B,MAAQwB,EACpB1B,MAAO8B,EAAM9B,OAAS,0BACtBC,SAAU6B,EAAMI,aAIpBN,IAAYE,GAASE,MAG3B"}

package/header-layout/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/header-layout",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/header-layout/index.js

@@ -1,2 +1,2 @@
-import{Box as e,CircularProgress as t,Typography as r,Button as l,LinearProgress as n}from"@mui/material";import i,{createContext as a,useState as c}from"react";import o from"@mui/icons-material/ReportProblem";const m=()=>i.createElement(e,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center"},i.createElement(t,null)),s=a([0,()=>null]).Provider,h=({children:e,initialValue:t=0})=>{const r=c(t);return i.createElement(s,{value:r},e)},u=({title:t,subtitle:n,icon:a,iconSize:c=200,actions:o})=>i.createElement(e,{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center"},a&&a({size:c,color:"primary"}),i.createElement(r,{variant:"h4",role:"heading","aria-level":1},t),i.createElement(r,{variant:"subtitle1",role:"heading","aria-level":2,sx:{mt:2}},n),o&&i.createElement(e,{sx:{pt:2}},o.map((({id:e,text:t,href:r,onClick:n},a)=>i.createElement(l,{key:e,role:"button",variant:"contained",href:r,onClick:n,sx:{mr:a<o.length-1?2:0}},t))))),E=()=>i.createElement(o,{color:"error",sx:{width:200,height:200}}),d=({loading:t,children:r,fetching:l,error:a})=>{const[c,o]=r;return i.createElement(h,null,i.createElement(e,{display:"flex",flexDirection:"column",height:1},c,l&&i.createElement(e,{width:1},i.createElement(n,null)),t&&i.createElement(m,null),a&&i.createElement(e,{mt:4},i.createElement(u,{icon:a.icon||E,title:a.title||"There has been an error",subtitle:a.message})),!t&&!a&&o))};export{d as HeaderLayout};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import i from"@mui/material/Box";import t from"@mui/material/LinearProgress";import n from"@mui/material/CircularProgress";import{createContext as l,useState as o}from"react";import a from"@mui/icons-material/ReportProblem";import c from"@mui/material/Typography";import m from"@mui/material/Button";const h=()=>e(i,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center",children:e(n,{})}),s=l([0,()=>null]).Provider,d=({children:r,initialValue:i=0})=>{const t=o(i);return e(s,{value:t,children:r})},u=({title:t,subtitle:n,icon:l,iconSize:o=200,actions:a})=>r(i,{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",children:[l&&l({size:o,color:"primary"}),e(c,{variant:"h4",role:"heading","aria-level":1,children:t}),e(c,{variant:"subtitle1",role:"heading","aria-level":2,sx:{mt:2},children:n}),a&&e(i,{sx:{pt:2},children:a.map((({id:r,text:i,href:t,onClick:n},l)=>e(m,{role:"button",variant:"contained",href:t,onClick:n,sx:{mr:l<a.length-1?2:0},children:i},r)))})]}),f=()=>e(a,{color:"error",sx:{width:200,height:200}}),p=({loading:n,children:l,fetching:o,error:a})=>{const[c,m]=l;return e(d,{children:r(i,{display:"flex",flexDirection:"column",height:1,children:[c,o&&e(i,{width:1,children:e(t,{})}),n&&e(h,{}),a&&e(i,{mt:4,children:e(u,{icon:a.icon||f,title:a.title||"There has been an error",subtitle:a.message})}),!n&&!a&&m]})})};export{p as HeaderLayout};
 //# sourceMappingURL=index.js.map