@pautena/react-design-system 0.16.0 → 0.17.0

package/value-image/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/value-content/value-content.tsx","../../../src/value-image/value-image.tsx"],"sourcesContent":["import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import Box from \"@mui/material/Box\";\nimport { ValueContent } from \"../value-content\";\nimport { BaseValueProps } from \"../value-base\";\n\nexport interface ValueImageProps extends BaseValueProps<string> {\n  /**\n   * Image size\n   */\n  size?: number;\n}\n\nconst DefaultSize = 100;\nconst DefaultDenseSize = 50;\n\n/**\n * Displays a image value with a label\n */\nexport const ValueImage = ({ label, value, size: sizeArg, dense }: ValueImageProps) => {\n  const size = sizeArg || (dense ? DefaultDenseSize : DefaultSize);\n  return (\n    <ValueContent label={label} dense={dense}>\n      <Box component=\"img\" src={value} alt={label} sx={{ width: size, height: size }} />\n    </ValueContent>\n  );\n};\n"],"names":["ValueContent","label","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","replace","getValueContentLabelId","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","Tooltip","title","placement","enterDelay","value","size","sizeArg","component","src","alt","height"],"mappings":"0LAKO,MA4CMA,EAAe,EAC1BC,QACAC,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,aACjBC,EAtD8B,CAACT,GACrC,SAASA,EAAMU,QAAQ,KAAM,OAqDlBC,CAAuBX,GAElC,OACEY,OAACC,EAAG,CAACC,MAAO,EAAGC,WAAYV,EAAQ,OAAIW,EAAWV,GAAIA,EAAEF,SAAA,EACpDH,GACAgB,EAAAA,IAACC,GACCC,QAASd,EAAQ,UAAY,YAC7Be,KAAK,QACLX,GAAIA,EACJM,WAAYV,EAAQE,EAAWc,QAAQ,SAAML,EAE5CZ,SAAAJ,IAGJE,EACCe,EAAAA,IAACK,EAAQ,CAAAC,MAAOrB,EAASsB,UAAU,MAAMC,WAAYtB,WAClDC,QAKD,qBC/DgB,EAAGJ,QAAO0B,QAAOC,KAAMC,EAASvB,YACxD,MAAMsB,EAAOC,IAAYvB,EANF,GADL,KAQlB,OACEY,MAAClB,GAAaC,MAAOA,EAAOK,MAAOA,WACjCY,MAACJ,GAAIgB,UAAU,MAAMC,IAAKJ,EAAOK,IAAK/B,EAAOM,GAAI,CAAEQ,MAAOa,EAAMK,OAAQL,MAC3D"}

package/value-image/cjs/package.json

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

package/value-image/index.d.ts

@@ -1 +0,0 @@
-export * from "./value-image";

package/value-image/index.js

@@ -1,2 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import i from"@mui/material/Box";import{useTheme as l}from"@mui/material/styles";import r from"@mui/material/Tooltip";import o from"@mui/material/Typography";const a=({label:a,hideLabel:m,tooltip:n,tooltipEnterDelay:p=2e3,children:s,dense:c,sx:d})=>{const{typography:h}=l(),u=(e=>`label-${e.replace(/ /g,"-")}`)(a);return e(i,{width:1,lineHeight:c?0:void 0,sx:d,children:[!m&&t(o,{variant:c?"caption":"subtitle2",role:"label",id:u,lineHeight:c?h.pxToRem(15):void 0,children:a}),n?t(r,{title:n,placement:"top",enterDelay:p,children:s}):s]})},m=({label:e,value:l,size:r,dense:o})=>{const m=r||(o?50:100);return t(a,{label:e,dense:o,children:t(i,{component:"img",src:l,alt:e,sx:{width:m,height:m}})})};export{m as ValueImage};
-//# sourceMappingURL=index.js.map

package/value-image/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/value-content/value-content.tsx","../../src/value-image/value-image.tsx"],"sourcesContent":["import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import Box from \"@mui/material/Box\";\nimport { ValueContent } from \"../value-content\";\nimport { BaseValueProps } from \"../value-base\";\n\nexport interface ValueImageProps extends BaseValueProps<string> {\n  /**\n   * Image size\n   */\n  size?: number;\n}\n\nconst DefaultSize = 100;\nconst DefaultDenseSize = 50;\n\n/**\n * Displays a image value with a label\n */\nexport const ValueImage = ({ label, value, size: sizeArg, dense }: ValueImageProps) => {\n  const size = sizeArg || (dense ? DefaultDenseSize : DefaultSize);\n  return (\n    <ValueContent label={label} dense={dense}>\n      <Box component=\"img\" src={value} alt={label} sx={{ width: size, height: size }} />\n    </ValueContent>\n  );\n};\n"],"names":["ValueContent","label","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","replace","getValueContentLabelId","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","Tooltip","title","placement","enterDelay","ValueImage","value","size","sizeArg","component","src","alt","height"],"mappings":"gNAKO,MA4CMA,EAAe,EAC1BC,QACAC,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,IACjBC,EAtD8B,CAACT,GACrC,SAASA,EAAMU,QAAQ,KAAM,OAqDlBC,CAAuBX,GAElC,OACEY,EAACC,EAAG,CAACC,MAAO,EAAGC,WAAYV,EAAQ,OAAIW,EAAWV,GAAIA,EAAEF,SAAA,EACpDH,GACAgB,EAACC,GACCC,QAASd,EAAQ,UAAY,YAC7Be,KAAK,QACLX,GAAIA,EACJM,WAAYV,EAAQE,EAAWc,QAAQ,SAAML,EAE5CZ,SAAAJ,IAGJE,EACCe,EAACK,EAAQ,CAAAC,MAAOrB,EAASsB,UAAU,MAAMC,WAAYtB,WAClDC,QAKD,EC/DGsB,EAAa,EAAG1B,QAAO2B,QAAOC,KAAMC,EAASxB,YACxD,MAAMuB,EAAOC,IAAYxB,EANF,GADL,KAQlB,OACEY,EAAClB,GAAaC,MAAOA,EAAOK,MAAOA,WACjCY,EAACJ,GAAIiB,UAAU,MAAMC,IAAKJ,EAAOK,IAAKhC,EAAOM,GAAI,CAAEQ,MAAOc,EAAMK,OAAQL,MAC3D"}

package/value-image/package.json

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

package/value-item/cjs/index.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Grid"),t=require("@mui/material/Box"),i=require("@mui/material");const o={root:"RdsValueItem-root",content:"RdsValueItem-content"};exports.ValueItem=({children:s,bordered:a=!0,...n})=>{const u=((e,r)=>{const t=`solid ${r} 1px`,i="none";if(e){if(Array.isArray(e))return e.map((e=>e?t:i));if("object"==typeof e){const r={};return Object.entries(e).forEach((([e,o])=>{r[e]=o?t:i})),r}return t}})(a,(({lightWeight:e=100,darkWeight:r=900}={})=>{const{palette:t}=i.useTheme();return"light"===t.mode?t.grey[e]:t.grey[r]})({lightWeight:200,darkWeight:800}));return e.jsx(r,{item:!0,className:o.root,...n,children:e.jsx(t,{className:o.content,px:1,borderLeft:u,children:s})})},exports.valueItemClasses=o;
-//# sourceMappingURL=index.js.map

package/value-item/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/utils/theme.ts","../../../src/value-item/value-item.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, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n  Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n  return (\n    <Grid item className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n"],"names":["valueItemClasses","root","content","children","bordered","rest","borderLeft","color","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","key","value","resolveBorderStyle","lightWeight","darkWeight","palette","useTheme","mode","grey","useGetDefaultThemeColor","_jsx","Grid","item","className","Box","px"],"mappings":"0IAIO,MCQMA,EAAmB,CAC9BC,KAAM,oBACNC,QAAS,0CA0BkC,EAC3CC,WACAC,YAAW,KACRC,MAEH,MACMC,EA7BmB,EAACF,EAAyCG,KACnE,MAAMC,EAAc,SAASD,QACvBE,EAAW,OAEjB,GAAKL,EAAL,CAIA,GAAIM,MAAMC,QAAQP,GAChB,OAAOA,EAASQ,KAAKC,GAAOA,EAAIL,EAAcC,IAGhD,GAAwB,iBAAbL,EAAuB,CAChC,MAAMU,EAA4C,CAAE,EAIpD,OAHAC,OAAOC,QAAQZ,GAAUa,SAAQ,EAAEC,EAAKC,MACtCL,EAAMI,GAAOC,EAAQX,EAAcC,CAAQ,IAEtCK,EAGT,OAAON,EAAW,EASCY,CAAmBhB,ED1CD,GACrCiB,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYC,aACpB,MAAwB,UAAjBD,EAAQE,KAAmBF,EAAQG,KAAKL,GAAeE,EAAQG,KAAKJ,EAAW,ECoCjEK,CAAwB,CAAEN,YAAa,IAAKC,WAAY,OAE7E,OACEM,MAACC,EAAI,CAACC,MAAK,EAAAC,UAAW/B,EAAiBC,QAAUI,EAAIF,SACnDyB,MAACI,EAAG,CAACD,UAAW/B,EAAiBE,QAAS+B,GAAI,EAAG3B,WAAYA,EAC1DH,SAAAA,KAEE"}

package/value-item/cjs/package.json

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

package/value-item/index.d.ts

@@ -1 +0,0 @@
-export * from "./value-item";

package/value-item/index.js

@@ -1,2 +0,0 @@
-import{jsx as t}from"react/jsx-runtime";import r from"@mui/material/Grid";import e from"@mui/material/Box";import{useTheme as o}from"@mui/material";const i={root:"RdsValueItem-root",content:"RdsValueItem-content"},n=({children:n,bordered:m=!0,...a})=>{const c=((t,r)=>{const e=`solid ${r} 1px`,o="none";if(t){if(Array.isArray(t))return t.map((t=>t?e:o));if("object"==typeof t){const r={};return Object.entries(t).forEach((([t,i])=>{r[t]=i?e:o})),r}return e}})(m,(({lightWeight:t=100,darkWeight:r=900}={})=>{const{palette:e}=o();return"light"===e.mode?e.grey[t]:e.grey[r]})({lightWeight:200,darkWeight:800}));return t(r,{item:!0,className:i.root,...a,children:t(e,{className:i.content,px:1,borderLeft:c,children:n})})};export{n as ValueItem,i as valueItemClasses};
-//# sourceMappingURL=index.js.map

package/value-item/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/theme.ts","../../src/value-item/value-item.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, { GridProps } from \"@mui/material/Grid\";\nimport Box from \"@mui/material/Box\";\nimport { ResponsiveStyleValue } from \"@mui/system\";\nimport { PropsWithChildren, FunctionComponent, ReactElement } from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils\";\n\nexport type ValueItemProps = PropsWithChildren<\n  Omit<GridProps, \"item\" | \"container\"> & { bordered?: ResponsiveStyleValue<boolean> }\n>;\nexport type ValueItemComponent = FunctionComponent<ValueItemProps>;\nexport type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;\n\nexport const valueItemClasses = {\n  root: \"RdsValueItem-root\",\n  content: \"RdsValueItem-content\",\n};\n\nconst resolveBorderStyle = (bordered: ResponsiveStyleValue<boolean>, color: string) => {\n  const borderStyle = `solid ${color} 1px`;\n  const noBorder = \"none\";\n\n  if (!bordered) {\n    return undefined;\n  }\n\n  if (Array.isArray(bordered)) {\n    return bordered.map((b) => (b ? borderStyle : noBorder));\n  }\n\n  if (typeof bordered === \"object\") {\n    const style: Record<string, string | undefined> = {};\n    Object.entries(bordered).forEach(([key, value]) => {\n      style[key] = value ? borderStyle : noBorder;\n    });\n    return style;\n  }\n\n  return borderStyle;\n};\n\nexport const ValueItem: ValueItemComponent = ({\n  children,\n  bordered = true,\n  ...rest\n}: ValueItemProps) => {\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n  const borderLeft = resolveBorderStyle(bordered, defaultColor);\n  return (\n    <Grid item className={valueItemClasses.root} {...rest}>\n      <Box className={valueItemClasses.content} px={1} borderLeft={borderLeft}>\n        {children}\n      </Box>\n    </Grid>\n  );\n};\n"],"names":["valueItemClasses","root","content","ValueItem","children","bordered","rest","borderLeft","color","borderStyle","noBorder","Array","isArray","map","b","style","Object","entries","forEach","key","value","resolveBorderStyle","lightWeight","darkWeight","palette","useTheme","mode","grey","useGetDefaultThemeColor","_jsx","Grid","item","className","Box","px"],"mappings":"oJAIO,MCQMA,EAAmB,CAC9BC,KAAM,oBACNC,QAAS,wBA0BEC,EAAgC,EAC3CC,WACAC,YAAW,KACRC,MAEH,MACMC,EA7BmB,EAACF,EAAyCG,KACnE,MAAMC,EAAc,SAASD,QACvBE,EAAW,OAEjB,GAAKL,EAAL,CAIA,GAAIM,MAAMC,QAAQP,GAChB,OAAOA,EAASQ,KAAKC,GAAOA,EAAIL,EAAcC,IAGhD,GAAwB,iBAAbL,EAAuB,CAChC,MAAMU,EAA4C,CAAE,EAIpD,OAHAC,OAAOC,QAAQZ,GAAUa,SAAQ,EAAEC,EAAKC,MACtCL,EAAMI,GAAOC,EAAQX,EAAcC,CAAQ,IAEtCK,EAGT,OAAON,EAAW,EASCY,CAAmBhB,ED1CD,GACrCiB,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYC,IACpB,MAAwB,UAAjBD,EAAQE,KAAmBF,EAAQG,KAAKL,GAAeE,EAAQG,KAAKJ,EAAW,ECoCjEK,CAAwB,CAAEN,YAAa,IAAKC,WAAY,OAE7E,OACEM,EAACC,EAAI,CAACC,MAAK,EAAAC,UAAWhC,EAAiBC,QAAUK,EAAIF,SACnDyB,EAACI,EAAG,CAACD,UAAWhC,EAAiBE,QAASgC,GAAI,EAAG3B,WAAYA,EAC1DH,SAAAA,KAEE"}

package/value-item/package.json

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

package/value-label/cjs/index.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime");require("react"),require("@mui/icons-material/Check"),require("@mui/icons-material/Clear");var r=require("@mui/material/styles");require("@mui/material/Button"),require("@mui/material/IconButton"),require("@mui/material/InputAdornment"),require("@mui/icons-material/Edit");var t=require("@mui/material/Box"),i=require("@mui/material/Tooltip"),a=require("@mui/material/Typography"),l=require("@mui/material/Grid");const n=e=>`label-${e.replace(/ /g,"-")}`,o=({label:l,hideLabel:o,tooltip:s,tooltipEnterDelay:c=2e3,children:u,dense:m,sx:d})=>{const{typography:y}=r.useTheme(),h=n(l);return e.jsxs(t,{width:1,lineHeight:m?0:void 0,sx:d,children:[!o&&e.jsx(a,{variant:m?"caption":"subtitle2",role:"label",id:h,lineHeight:m?y.pxToRem(15):void 0,children:l}),s?e.jsx(i,{title:s,placement:"top",enterDelay:c,children:u}):u]})},s=({text:i,color:a,variant:l="default",textTransform:n="capitalize",sx:o})=>{const{palette:s,typography:c}=r.useTheme(),u={default:"light"===s.mode?s.grey[100]:s.grey[900],primary:s.primary.light,secondary:s.secondary.light,info:s.info.light,warning:s.warning.light,error:s.error.light,success:s.success.light},m={default:s.getContrastText(u.default),primary:s.primary.contrastText,secondary:s.secondary.contrastText,info:s.info.contrastText,warning:s.warning.contrastText,error:s.error.contrastText,success:s.success.contrastText},d=a||u[l],y=a?s.getContrastText(a):m[l];return e.jsx(t,{height:24,minWidth:22,display:"inline-flex",justifyContent:"center",alignItems:"center",bgcolor:d,color:y,fontSize:c.caption.fontSize,fontWeight:c.fontWeightBold,lineHeight:0,textTransform:n,whiteSpace:"nowrap",borderRadius:2,role:"label","aria-label":`${i} ${l} label`,py:0,px:1,sx:{cursor:"default",...o},children:i})};exports.ValueLabel=({label:r,value:t,placeholder:i="-",color:a,variant:c})=>{const u=n(r),m=Array.isArray(t)?t.map(((r,t)=>e.jsx(s,{text:r.toString()||i,variant:Array.isArray(c)?c[t]:c,color:Array.isArray(a)?a[t]:a},t))):e.jsx(s,{text:t?.toString()||i,variant:Array.isArray(c)?c[0]:c,color:Array.isArray(a)?a[0]:a});return e.jsx(o,{label:r,children:e.jsx(l,{container:!0,gap:1,"aria-labelledby":u,children:m})})};
-//# sourceMappingURL=index.js.map

package/value-label/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/value-base/value-displays.types.ts","../../../src/value-content/value-content.tsx","../../../src/label/label.tsx","../../../src/value-label/value-label.tsx"],"sourcesContent":["export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import Box from \"@mui/material/Box\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\n\nexport type LabelVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport const labelClasses = {\n  root: \"RdsLabel-root\",\n};\n\nexport interface LabelProps {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: LabelVariant;\n  /**\n   * Background color. Overrides variant\n   */\n  color?: string;\n\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Show the text as uppercase\n   */\n  textTransform?: \"none\" | \"capitalize\" | \"uppercase\";\n}\n\n/**\n * Compact element to represent a text\n */\nexport const Label = ({\n  text,\n  color: colorProp,\n  variant = \"default\",\n  textTransform = \"capitalize\",\n  sx,\n}: LabelProps) => {\n  const { palette, typography } = useTheme();\n\n  const backgroundColor: Record<LabelVariant, string> = {\n    default: palette.mode === \"light\" ? palette.grey[100] : palette.grey[900],\n    primary: palette.primary.light,\n    secondary: palette.secondary.light,\n    info: palette.info.light,\n    warning: palette.warning.light,\n    error: palette.error.light,\n    success: palette.success.light,\n  };\n\n  const textColor: Record<LabelVariant, string> = {\n    default: palette.getContrastText(backgroundColor.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    info: palette.info.contrastText,\n    warning: palette.warning.contrastText,\n    error: palette.error.contrastText,\n    success: palette.success.contrastText,\n  };\n\n  const bgcolor = colorProp ? colorProp : backgroundColor[variant];\n  const color = colorProp ? palette.getContrastText(colorProp) : textColor[variant];\n\n  return (\n    <Box\n      height={24}\n      minWidth={22}\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bgcolor={bgcolor}\n      color={color}\n      fontSize={typography.caption.fontSize}\n      fontWeight={typography.fontWeightBold}\n      lineHeight={0}\n      textTransform={textTransform}\n      whiteSpace=\"nowrap\"\n      borderRadius={2}\n      role=\"label\"\n      aria-label={`${text} ${variant} label`}\n      py={0}\n      px={1}\n      sx={{ cursor: \"default\", ...sx }}\n    >\n      {text}\n    </Box>\n  );\n};\n","import { BaseValueProps, DefaultPlaceholder } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\nimport { Label, LabelVariant } from \"../label\";\nimport Grid from \"@mui/material/Grid\";\n\nexport type ValueLabelProps = BaseValueProps<string | number | string[] | number[]> & {\n  variant?: LabelVariant | LabelVariant[];\n  color?: string | string[];\n};\n\n/**\n * Displays a label component value with a label\n */\nexport const ValueLabel = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  color,\n  variant,\n}: ValueLabelProps) => {\n  const id = getValueContentLabelId(label);\n  const value = Array.isArray(valueProp) ? (\n    valueProp.map((value, i) => (\n      <Label\n        text={value.toString() || placeholder}\n        variant={Array.isArray(variant) ? variant[i] : variant}\n        color={Array.isArray(color) ? color[i] : color}\n        key={i}\n      />\n    ))\n  ) : (\n    <Label\n      text={valueProp?.toString() || placeholder}\n      variant={Array.isArray(variant) ? variant[0] : variant}\n      color={Array.isArray(color) ? color[0] : color}\n    />\n  );\n\n  return (\n    <ValueContent label={label}>\n      <Grid container gap={1} aria-labelledby={id}>\n        {value}\n      </Grid>\n    </ValueContent>\n  );\n};\n"],"names":["getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","Tooltip","title","placement","enterDelay","Label","text","color","colorProp","textTransform","palette","backgroundColor","default","mode","grey","primary","light","secondary","info","warning","error","success","textColor","getContrastText","contrastText","bgcolor","height","minWidth","display","justifyContent","alignItems","fontSize","caption","fontWeight","fontWeightBold","whiteSpace","borderRadius","py","px","cursor","value","valueProp","placeholder","Array","isArray","map","i","toString","jsx","Grid","container","gap"],"mappings":"6cAmCO,MC9BMA,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,aACjBC,EAAKZ,EAAuBC,GAElC,OACEY,OAACC,EAAG,CAACC,MAAO,EAAGC,WAAYR,EAAQ,OAAIS,EAAWR,GAAIA,EAAEF,SAAA,EACpDH,GACAc,EAAAA,IAACC,GACCC,QAASZ,EAAQ,UAAY,YAC7Ba,KAAK,QACLT,GAAIA,EACJI,WAAYR,EAAQE,EAAWY,QAAQ,SAAML,EAE5CV,SAAAN,IAGJI,EACCa,EAAAA,IAACK,EAAQ,CAAAC,MAAOnB,EAASoB,UAAU,MAAMC,WAAYpB,WAClDC,QAKD,ECpCGoB,EAAQ,EACnBC,OACAC,MAAOC,EACPV,UAAU,UACVW,gBAAgB,aAChBtB,SAEA,MAAMuB,QAAEA,EAAOtB,WAAEA,GAAeC,aAE1BsB,EAAgD,CACpDC,QAA0B,UAAjBF,EAAQG,KAAmBH,EAAQI,KAAK,KAAOJ,EAAQI,KAAK,KACrEC,QAASL,EAAQK,QAAQC,MACzBC,UAAWP,EAAQO,UAAUD,MAC7BE,KAAMR,EAAQQ,KAAKF,MACnBG,QAAST,EAAQS,QAAQH,MACzBI,MAAOV,EAAQU,MAAMJ,MACrBK,QAASX,EAAQW,QAAQL,OAGrBM,EAA0C,CAC9CV,QAASF,EAAQa,gBAAgBZ,EAAgBC,SACjDG,QAASL,EAAQK,QAAQS,aACzBP,UAAWP,EAAQO,UAAUO,aAC7BN,KAAMR,EAAQQ,KAAKM,aACnBL,QAAST,EAAQS,QAAQK,aACzBJ,MAAOV,EAAQU,MAAMI,aACrBH,QAASX,EAAQW,QAAQG,cAGrBC,EAAUjB,GAAwBG,EAAgBb,GAClDS,EAAQC,EAAYE,EAAQa,gBAAgBf,GAAac,EAAUxB,GAEzE,OACEF,MAACJ,EAAG,CACFkC,OAAQ,GACRC,SAAU,GACVC,QAAQ,cACRC,eAAe,SACfC,WAAW,SACXL,QAASA,EACTlB,MAAOA,EACPwB,SAAU3C,EAAW4C,QAAQD,SAC7BE,WAAY7C,EAAW8C,eACvBxC,WAAY,EACZe,cAAeA,EACf0B,WAAW,SACXC,aAAc,EACdrC,KAAK,qBACO,GAAGO,KAAQR,UACvBuC,GAAI,EACJC,GAAI,EACJnD,GAAI,CAAEoD,OAAQ,aAAcpD,GAE3BF,SAAAqB,GACG,qBCrFgB,EACxB3B,QACA6D,MAAOC,EACPC,cHmBgC,IGlBhCnC,QACAT,cAEA,MAAMR,EAAKZ,EAAuBC,GAC5B6D,EAAQG,MAAMC,QAAQH,GAC1BA,EAAUI,KAAI,CAACL,EAAOM,IACpBlD,EAAAA,IAACS,EACC,CAAAC,KAAMkC,EAAMO,YAAcL,EAC1B5C,QAAS6C,MAAMC,QAAQ9C,GAAWA,EAAQgD,GAAKhD,EAC/CS,MAAOoC,MAAMC,QAAQrC,GAASA,EAAMuC,GAAKvC,GACpCuC,KAITlD,EAAAA,IAACS,EAAK,CACJC,KAAMmC,GAAWM,YAAcL,EAC/B5C,QAAS6C,MAAMC,QAAQ9C,GAAWA,EAAQ,GAAKA,EAC/CS,MAAOoC,MAAMC,QAAQrC,GAASA,EAAM,GAAKA,IAI7C,OACEX,EAAAA,IAACf,EAAY,CAACF,MAAOA,EACnBM,SAAAW,EAAAoD,IAACC,EAAI,CAACC,WAAU,EAAAC,IAAK,EAAoB,kBAAA7D,WACtCkD,KAEU"}

package/value-label/cjs/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@pautena/react-design-system/value-label",
-  "private": true,
-  "main": "./cjs/index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "dependencies": {
-    "@mui/icons-material": "^6.4.5",
-    "@mui/material": "^6.4.5",
-    "react": "^19.0.0"
-  }
-}

package/value-label/index.d.ts

@@ -1 +0,0 @@
-export * from "./value-label";

package/value-label/index.js

@@ -1,2 +0,0 @@
-import{jsxs as r,jsx as t}from"react/jsx-runtime";import"react";import"@mui/icons-material/Check";import"@mui/icons-material/Clear";import{useTheme as e}from"@mui/material/styles";import"@mui/material/Button";import"@mui/material/IconButton";import"@mui/material/InputAdornment";import"@mui/icons-material/Edit";import i from"@mui/material/Box";import a from"@mui/material/Tooltip";import o from"@mui/material/Typography";import l from"@mui/material/Grid";const n=r=>`label-${r.replace(/ /g,"-")}`,m=({label:l,hideLabel:m,tooltip:c,tooltipEnterDelay:s=2e3,children:p,dense:d,sx:y})=>{const{typography:u}=e(),g=n(l);return r(i,{width:1,lineHeight:d?0:void 0,sx:y,children:[!m&&t(o,{variant:d?"caption":"subtitle2",role:"label",id:g,lineHeight:d?u.pxToRem(15):void 0,children:l}),c?t(a,{title:c,placement:"top",enterDelay:s,children:p}):p]})},c=({text:r,color:a,variant:o="default",textTransform:l="capitalize",sx:n})=>{const{palette:m,typography:c}=e(),s={default:"light"===m.mode?m.grey[100]:m.grey[900],primary:m.primary.light,secondary:m.secondary.light,info:m.info.light,warning:m.warning.light,error:m.error.light,success:m.success.light},p={default:m.getContrastText(s.default),primary:m.primary.contrastText,secondary:m.secondary.contrastText,info:m.info.contrastText,warning:m.warning.contrastText,error:m.error.contrastText,success:m.success.contrastText},d=a||s[o],y=a?m.getContrastText(a):p[o];return t(i,{height:24,minWidth:22,display:"inline-flex",justifyContent:"center",alignItems:"center",bgcolor:d,color:y,fontSize:c.caption.fontSize,fontWeight:c.fontWeightBold,lineHeight:0,textTransform:l,whiteSpace:"nowrap",borderRadius:2,role:"label","aria-label":`${r} ${o} label`,py:0,px:1,sx:{cursor:"default",...n},children:r})},s=({label:r,value:e,placeholder:i="-",color:a,variant:o})=>{const s=n(r),p=Array.isArray(e)?e.map(((r,e)=>t(c,{text:r.toString()||i,variant:Array.isArray(o)?o[e]:o,color:Array.isArray(a)?a[e]:a},e))):t(c,{text:e?.toString()||i,variant:Array.isArray(o)?o[0]:o,color:Array.isArray(a)?a[0]:a});return t(m,{label:r,children:t(l,{container:!0,gap:1,"aria-labelledby":s,children:p})})};export{s as ValueLabel};
-//# sourceMappingURL=index.js.map

package/value-label/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/value-base/value-displays.types.ts","../../src/value-content/value-content.tsx","../../src/label/label.tsx","../../src/value-label/value-label.tsx"],"sourcesContent":["export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import Box from \"@mui/material/Box\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\n\nexport type LabelVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport const labelClasses = {\n  root: \"RdsLabel-root\",\n};\n\nexport interface LabelProps {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: LabelVariant;\n  /**\n   * Background color. Overrides variant\n   */\n  color?: string;\n\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Show the text as uppercase\n   */\n  textTransform?: \"none\" | \"capitalize\" | \"uppercase\";\n}\n\n/**\n * Compact element to represent a text\n */\nexport const Label = ({\n  text,\n  color: colorProp,\n  variant = \"default\",\n  textTransform = \"capitalize\",\n  sx,\n}: LabelProps) => {\n  const { palette, typography } = useTheme();\n\n  const backgroundColor: Record<LabelVariant, string> = {\n    default: palette.mode === \"light\" ? palette.grey[100] : palette.grey[900],\n    primary: palette.primary.light,\n    secondary: palette.secondary.light,\n    info: palette.info.light,\n    warning: palette.warning.light,\n    error: palette.error.light,\n    success: palette.success.light,\n  };\n\n  const textColor: Record<LabelVariant, string> = {\n    default: palette.getContrastText(backgroundColor.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    info: palette.info.contrastText,\n    warning: palette.warning.contrastText,\n    error: palette.error.contrastText,\n    success: palette.success.contrastText,\n  };\n\n  const bgcolor = colorProp ? colorProp : backgroundColor[variant];\n  const color = colorProp ? palette.getContrastText(colorProp) : textColor[variant];\n\n  return (\n    <Box\n      height={24}\n      minWidth={22}\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bgcolor={bgcolor}\n      color={color}\n      fontSize={typography.caption.fontSize}\n      fontWeight={typography.fontWeightBold}\n      lineHeight={0}\n      textTransform={textTransform}\n      whiteSpace=\"nowrap\"\n      borderRadius={2}\n      role=\"label\"\n      aria-label={`${text} ${variant} label`}\n      py={0}\n      px={1}\n      sx={{ cursor: \"default\", ...sx }}\n    >\n      {text}\n    </Box>\n  );\n};\n","import { BaseValueProps, DefaultPlaceholder } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\nimport { Label, LabelVariant } from \"../label\";\nimport Grid from \"@mui/material/Grid\";\n\nexport type ValueLabelProps = BaseValueProps<string | number | string[] | number[]> & {\n  variant?: LabelVariant | LabelVariant[];\n  color?: string | string[];\n};\n\n/**\n * Displays a label component value with a label\n */\nexport const ValueLabel = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  color,\n  variant,\n}: ValueLabelProps) => {\n  const id = getValueContentLabelId(label);\n  const value = Array.isArray(valueProp) ? (\n    valueProp.map((value, i) => (\n      <Label\n        text={value.toString() || placeholder}\n        variant={Array.isArray(variant) ? variant[i] : variant}\n        color={Array.isArray(color) ? color[i] : color}\n        key={i}\n      />\n    ))\n  ) : (\n    <Label\n      text={valueProp?.toString() || placeholder}\n      variant={Array.isArray(variant) ? variant[0] : variant}\n      color={Array.isArray(color) ? color[0] : color}\n    />\n  );\n\n  return (\n    <ValueContent label={label}>\n      <Grid container gap={1} aria-labelledby={id}>\n        {value}\n      </Grid>\n    </ValueContent>\n  );\n};\n"],"names":["getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","_jsxs","Box","width","lineHeight","undefined","_jsx","Typography","variant","role","pxToRem","Tooltip","title","placement","enterDelay","Label","text","color","colorProp","textTransform","palette","backgroundColor","default","mode","grey","primary","light","secondary","info","warning","error","success","textColor","getContrastText","contrastText","bgcolor","height","minWidth","display","justifyContent","alignItems","fontSize","caption","fontWeight","fontWeightBold","whiteSpace","borderRadius","py","px","cursor","ValueLabel","value","valueProp","placeholder","Array","isArray","map","i","toString","Grid","container","gap"],"mappings":"wcAmCO,MC9BMA,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpBC,WACAC,QACAC,SAEA,MAAMC,WAAEA,GAAeC,IACjBC,EAAKZ,EAAuBC,GAElC,OACEY,EAACC,EAAG,CAACC,MAAO,EAAGC,WAAYR,EAAQ,OAAIS,EAAWR,GAAIA,EAAEF,SAAA,EACpDH,GACAc,EAACC,GACCC,QAASZ,EAAQ,UAAY,YAC7Ba,KAAK,QACLT,GAAIA,EACJI,WAAYR,EAAQE,EAAWY,QAAQ,SAAML,EAE5CV,SAAAN,IAGJI,EACCa,EAACK,EAAQ,CAAAC,MAAOnB,EAASoB,UAAU,MAAMC,WAAYpB,WAClDC,QAKD,ECpCGoB,EAAQ,EACnBC,OACAC,MAAOC,EACPV,UAAU,UACVW,gBAAgB,aAChBtB,SAEA,MAAMuB,QAAEA,EAAOtB,WAAEA,GAAeC,IAE1BsB,EAAgD,CACpDC,QAA0B,UAAjBF,EAAQG,KAAmBH,EAAQI,KAAK,KAAOJ,EAAQI,KAAK,KACrEC,QAASL,EAAQK,QAAQC,MACzBC,UAAWP,EAAQO,UAAUD,MAC7BE,KAAMR,EAAQQ,KAAKF,MACnBG,QAAST,EAAQS,QAAQH,MACzBI,MAAOV,EAAQU,MAAMJ,MACrBK,QAASX,EAAQW,QAAQL,OAGrBM,EAA0C,CAC9CV,QAASF,EAAQa,gBAAgBZ,EAAgBC,SACjDG,QAASL,EAAQK,QAAQS,aACzBP,UAAWP,EAAQO,UAAUO,aAC7BN,KAAMR,EAAQQ,KAAKM,aACnBL,QAAST,EAAQS,QAAQK,aACzBJ,MAAOV,EAAQU,MAAMI,aACrBH,QAASX,EAAQW,QAAQG,cAGrBC,EAAUjB,GAAwBG,EAAgBb,GAClDS,EAAQC,EAAYE,EAAQa,gBAAgBf,GAAac,EAAUxB,GAEzE,OACEF,EAACJ,EAAG,CACFkC,OAAQ,GACRC,SAAU,GACVC,QAAQ,cACRC,eAAe,SACfC,WAAW,SACXL,QAASA,EACTlB,MAAOA,EACPwB,SAAU3C,EAAW4C,QAAQD,SAC7BE,WAAY7C,EAAW8C,eACvBxC,WAAY,EACZe,cAAeA,EACf0B,WAAW,SACXC,aAAc,EACdrC,KAAK,qBACO,GAAGO,KAAQR,UACvBuC,GAAI,EACJC,GAAI,EACJnD,GAAI,CAAEoD,OAAQ,aAAcpD,GAE3BF,SAAAqB,GACG,ECrFGkC,EAAa,EACxB7D,QACA8D,MAAOC,EACPC,cHmBgC,IGlBhCpC,QACAT,cAEA,MAAMR,EAAKZ,EAAuBC,GAC5B8D,EAAQG,MAAMC,QAAQH,GAC1BA,EAAUI,KAAI,CAACL,EAAOM,IACpBnD,EAACS,EACC,CAAAC,KAAMmC,EAAMO,YAAcL,EAC1B7C,QAAS8C,MAAMC,QAAQ/C,GAAWA,EAAQiD,GAAKjD,EAC/CS,MAAOqC,MAAMC,QAAQtC,GAASA,EAAMwC,GAAKxC,GACpCwC,KAITnD,EAACS,EAAK,CACJC,KAAMoC,GAAWM,YAAcL,EAC/B7C,QAAS8C,MAAMC,QAAQ/C,GAAWA,EAAQ,GAAKA,EAC/CS,MAAOqC,MAAMC,QAAQtC,GAASA,EAAM,GAAKA,IAI7C,OACEX,EAACf,EAAY,CAACF,MAAOA,EACnBM,SAAAW,EAACqD,EAAI,CAACC,WAAU,EAAAC,IAAK,EAAoB,kBAAA7D,WACtCmD,KAEU"}

package/value-label/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@pautena/react-design-system/value-label",
-  "private": true,
-  "main": "./cjs/index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "dependencies": {
-    "@mui/icons-material": "^6.4.5",
-    "@mui/material": "^6.4.5",
-    "react": "^19.0.0"
-  }
-}

package/value-rating/cjs/index.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/Box"),t=require("@mui/material/Rating"),a=require("react"),r=require("@mui/icons-material/Check"),l=require("@mui/icons-material/Clear"),n=require("@mui/material/styles"),s=require("@mui/material/Button"),o=require("@mui/material/IconButton"),u=require("@mui/material/InputAdornment"),c=require("@mui/icons-material/Edit"),m=require("@mui/material/Tooltip"),d=require("@mui/material/Typography");const x=({onClickCancel:i,onClickSubmit:t,sx:a})=>e.jsxs(u,{position:"end",sx:a,children:[e.jsx(s,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(l,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(s,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(r,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0}})]}),h=({dense:i,onClick:t})=>{const{typography:a}=n.useTheme();return e.jsx(o,{size:"small",onClick:t,sx:{ml:i?.5:1},"aria-label":"edit button",children:e.jsx(c,{sx:{fontSize:a.pxToRem(i?18:24)}})})},p=e=>`label-${e.replace(/ /g,"-")}`,b=({label:t,hideLabel:a,tooltip:r,tooltipEnterDelay:l=2e3,children:s,dense:o,sx:u})=>{const{typography:c}=n.useTheme(),x=p(t);return e.jsxs(i,{width:1,lineHeight:o?0:void 0,sx:u,children:[!a&&e.jsx(d,{variant:o?"caption":"subtitle2",role:"label",id:x,lineHeight:o?c.pxToRem(15):void 0,children:t}),r?e.jsx(m,{title:r,placement:"top",enterDelay:l,children:s}):s]})};exports.ValueRating=({label:r,value:l=0,maxRating:n=5,editable:s,dense:o,onEdit:u=(()=>null)})=>{const{isEditing:c,editValue:m,startEdit:d,cancelEdit:g,setEditValue:j,submitEdit:C}=((e,i)=>{const[t,r]=a.useState(!1),[l,n]=a.useState(e),s=()=>{r(!1),n(e)};return{isEditing:t,cancelEdit:s,editValue:l,setEditValue:n,startEdit:()=>{r(!0)},submitEdit:()=>{i(l),s()}}})(l,u),q=p(r);return e.jsx(b,{label:r,tooltip:l.toString(),dense:o,children:e.jsxs(i,{display:"flex",alignItems:"center","aria-labelledby":q,children:[e.jsx(t,{readOnly:!c,max:n,size:o?"small":"medium",value:c?m:l,onChange:(e,i)=>{Number.isNaN(i)&&e.currentTarget.value?j(parseInt(e.currentTarget.value,10)):i&&j(i)}}),s&&!c&&e.jsx(h,{dense:o,onClick:d}),c&&e.jsx(x,{onClickCancel:g,onClickSubmit:C})]})})};
-//# sourceMappingURL=index.js.map

package/value-rating/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-rating/value-rating.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n  onClickCancel: () => void;\n  onClickSubmit: () => void;\n  sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n  return (\n    <InputAdornment position=\"end\" sx={sx}>\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"error\"\n        aria-label=\"cancel button\"\n        startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickCancel}\n        sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n      />\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"primary\"\n        aria-label=\"submit button\"\n        startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickSubmit}\n        sx={{ paddingRight: 0, minWidth: 0 }}\n      />\n    </InputAdornment>\n  );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n  initialValue: T | undefined,\n  onEdit: (value?: T) => void,\n) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n  const cancelEdit = () => {\n    setIsEditing(false);\n    setEditValue(initialValue);\n  };\n  const startEdit = () => {\n    setIsEditing(true);\n  };\n\n  const submitEdit = () => {\n    onEdit(editValue);\n    cancelEdit();\n  };\n\n  return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n  dense?: boolean;\n  onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n  const { typography } = useTheme();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onClick}\n      sx={{ ml: dense ? 0.5 : 1 }}\n      aria-label=\"edit button\"\n    >\n      <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n    </IconButton>\n  );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import Box from \"@mui/material/Box\";\nimport Rating from \"@mui/material/Rating\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { BaseValueProps, EditableValueProps } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueRatingProps = BaseValueProps<number> & {\n  maxRating?: number;\n} & EditableValueProps<number>;\n\n/**\n * Displays a number using stars\n */\nexport const ValueRating = ({\n  label,\n  value = 0,\n  maxRating = 5,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueRatingProps) => {\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n  const id = getValueContentLabelId(label);\n\n  return (\n    <ValueContent label={label} tooltip={value.toString()} dense={dense}>\n      <Box display=\"flex\" alignItems=\"center\" aria-labelledby={id}>\n        <Rating\n          readOnly={!isEditing}\n          max={maxRating}\n          size={dense ? \"small\" : \"medium\"}\n          value={isEditing ? editValue : value}\n          onChange={(e, newValue) => {\n            if (Number.isNaN(newValue) && (e.currentTarget as any).value) {\n              setEditValue(parseInt((e.currentTarget as any).value, 10));\n            } else if (newValue) {\n              setEditValue(newValue);\n            }\n          }}\n        />\n        {editable && !isEditing && <ValueEditButton dense={dense} onClick={startEdit} />}\n        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />}\n      </Box>\n    </ValueContent>\n  );\n};\n"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","value","maxRating","editable","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","display","alignItems","Rating","readOnly","max","onChange","e","newValue","Number","isNaN","currentTarget","parseInt"],"mappings":"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"}

package/value-rating/cjs/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@pautena/react-design-system/value-rating",
-  "private": true,
-  "main": "./cjs/index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "dependencies": {
-    "@mui/icons-material": "^6.4.5",
-    "@mui/material": "^6.4.5",
-    "react": "^19.0.0"
-  }
-}

package/value-rating/index.d.ts

@@ -1 +0,0 @@
-export * from "./value-rating";

package/value-rating/index.js

@@ -1,2 +0,0 @@
-import{jsx as i,jsxs as t}from"react/jsx-runtime";import e from"@mui/material/Box";import a from"@mui/material/Rating";import{useState as r}from"react";import l from"@mui/icons-material/Check";import n from"@mui/icons-material/Clear";import{useTheme as o}from"@mui/material/styles";import m from"@mui/material/Button";import s from"@mui/material/IconButton";import c from"@mui/material/InputAdornment";import d from"@mui/icons-material/Edit";import u from"@mui/material/Tooltip";import p from"@mui/material/Typography";const b=({onClickCancel:e,onClickSubmit:a,sx:r})=>t(c,{position:"end",sx:r,children:[i(m,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:i(n,{sx:{fontSize:12}}),onClick:e,sx:{paddingRight:0,minWidth:0,marginRight:1}}),i(m,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:i(l,{sx:{fontSize:12}}),onClick:a,sx:{paddingRight:0,minWidth:0}})]}),h=({dense:t,onClick:e})=>{const{typography:a}=o();return i(s,{size:"small",onClick:e,sx:{ml:t?.5:1},"aria-label":"edit button",children:i(d,{sx:{fontSize:a.pxToRem(t?18:24)}})})},g=i=>`label-${i.replace(/ /g,"-")}`,x=({label:a,hideLabel:r,tooltip:l,tooltipEnterDelay:n=2e3,children:m,dense:s,sx:c})=>{const{typography:d}=o(),b=g(a);return t(e,{width:1,lineHeight:s?0:void 0,sx:c,children:[!r&&i(p,{variant:s?"caption":"subtitle2",role:"label",id:b,lineHeight:s?d.pxToRem(15):void 0,children:a}),l?i(u,{title:l,placement:"top",enterDelay:n,children:m}):m]})},f=({label:l,value:n=0,maxRating:o=5,editable:m,dense:s,onEdit:c=(()=>null)})=>{const{isEditing:d,editValue:u,startEdit:p,cancelEdit:f,setEditValue:C,submitEdit:y}=((i,t)=>{const[e,a]=r(!1),[l,n]=r(i),o=()=>{a(!1),n(i)};return{isEditing:e,cancelEdit:o,editValue:l,setEditValue:n,startEdit:()=>{a(!0)},submitEdit:()=>{t(l),o()}}})(n,c),E=g(l);return i(x,{label:l,tooltip:n.toString(),dense:s,children:t(e,{display:"flex",alignItems:"center","aria-labelledby":E,children:[i(a,{readOnly:!d,max:o,size:s?"small":"medium",value:d?u:n,onChange:(i,t)=>{Number.isNaN(t)&&i.currentTarget.value?C(parseInt(i.currentTarget.value,10)):t&&C(t)}}),m&&!d&&i(h,{dense:s,onClick:p}),d&&i(b,{onClickCancel:f,onClickSubmit:y})]})})};export{f as ValueRating};
-//# sourceMappingURL=index.js.map

package/value-rating/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-rating/value-rating.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n  onClickCancel: () => void;\n  onClickSubmit: () => void;\n  sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n  return (\n    <InputAdornment position=\"end\" sx={sx}>\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"error\"\n        aria-label=\"cancel button\"\n        startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickCancel}\n        sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n      />\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"primary\"\n        aria-label=\"submit button\"\n        startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickSubmit}\n        sx={{ paddingRight: 0, minWidth: 0 }}\n      />\n    </InputAdornment>\n  );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n  initialValue: T | undefined,\n  onEdit: (value?: T) => void,\n) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n  const cancelEdit = () => {\n    setIsEditing(false);\n    setEditValue(initialValue);\n  };\n  const startEdit = () => {\n    setIsEditing(true);\n  };\n\n  const submitEdit = () => {\n    onEdit(editValue);\n    cancelEdit();\n  };\n\n  return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n  dense?: boolean;\n  onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n  const { typography } = useTheme();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onClick}\n      sx={{ ml: dense ? 0.5 : 1 }}\n      aria-label=\"edit button\"\n    >\n      <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n    </IconButton>\n  );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import Box from \"@mui/material/Box\";\nimport Rating from \"@mui/material/Rating\";\nimport { useEditableValueDisplay, ValueEditButton, ValueEditButtons } from \"../value-base\";\nimport { BaseValueProps, EditableValueProps } from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueRatingProps = BaseValueProps<number> & {\n  maxRating?: number;\n} & EditableValueProps<number>;\n\n/**\n * Displays a number using stars\n */\nexport const ValueRating = ({\n  label,\n  value = 0,\n  maxRating = 5,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueRatingProps) => {\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(value, onEdit);\n  const id = getValueContentLabelId(label);\n\n  return (\n    <ValueContent label={label} tooltip={value.toString()} dense={dense}>\n      <Box display=\"flex\" alignItems=\"center\" aria-labelledby={id}>\n        <Rating\n          readOnly={!isEditing}\n          max={maxRating}\n          size={dense ? \"small\" : \"medium\"}\n          value={isEditing ? editValue : value}\n          onChange={(e, newValue) => {\n            if (Number.isNaN(newValue) && (e.currentTarget as any).value) {\n              setEditValue(parseInt((e.currentTarget as any).value, 10));\n            } else if (newValue) {\n              setEditValue(newValue);\n            }\n          }}\n        />\n        {editable && !isEditing && <ValueEditButton dense={dense} onClick={startEdit} />}\n        {isEditing && <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />}\n      </Box>\n    </ValueContent>\n  );\n};\n"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","ValueRating","value","maxRating","editable","onEdit","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","display","alignItems","Rating","readOnly","max","onChange","e","newValue","Number","isNaN","currentTarget","parseInt"],"mappings":"ugBAeO,MAAMA,EAAmB,EAAGC,gBAAeC,gBAAeC,QAE7DC,EAACC,EAAe,CAAAC,SAAS,MAAMH,GAAIA,EAAEI,SAAA,CACnCC,EAACC,EAAM,CACLC,QAAQ,YACRC,KAAK,QACLC,MAAM,QAAO,aACF,gBACXC,UAAWL,EAACM,EAAS,CAACX,GAAI,CAAEY,SAAU,MACtCC,QAASf,EACTE,GAAI,CAAEc,aAAc,EAAGC,SAAU,EAAGC,YAAa,KAEnDX,EAACC,EACC,CAAAC,QAAQ,YACRC,KAAK,QACLC,MAAM,UAAS,aACJ,gBACXC,UAAWL,EAACY,GAAUjB,GAAI,CAAEY,SAAU,MACtCC,QAASd,EACTC,GAAI,CAAEc,aAAc,EAAGC,SAAU,QAqC5BG,EAAkB,EAAGC,QAAON,cACvC,MAAMO,WAAEA,GAAeC,IACvB,OACEhB,EAACiB,EACC,CAAAd,KAAK,QACLK,QAASA,EACTb,GAAI,CAAEuB,GAAIJ,EAAQ,GAAM,GAAG,aAChB,cAEXf,SAAAC,EAACmB,EAAQ,CAACxB,GAAI,CAAEY,SAAUQ,EAAWK,QAAQN,EAAQ,GAAK,QAC/C,EC5EJO,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpB5B,WACAe,QACAnB,SAEA,MAAMoB,WAAEA,GAAeC,IACjBY,EAAKP,EAAuBC,GAElC,OACE1B,EAACiC,EAAG,CAACC,MAAO,EAAGC,WAAYjB,EAAQ,OAAIkB,EAAWrC,GAAIA,EAAEI,SAAA,EACpD0B,GACAzB,EAACiC,GACC/B,QAASY,EAAQ,UAAY,YAC7BoB,KAAK,QACLN,GAAIA,EACJG,WAAYjB,EAAQC,EAAWK,QAAQ,SAAMY,EAE5CjC,SAAAuB,IAGJI,EACC1B,EAACmC,EAAQ,CAAAC,MAAOV,EAASW,UAAU,MAAMC,WAAYX,WAClD5B,QAKD,ECnEGwC,EAAc,EACzBjB,QACAkB,QAAQ,EACRC,YAAY,EACZC,WACA5B,QACA6B,SAAS,KAAM,UAEf,MAAMC,UAAEA,EAASC,UAAEA,EAASC,UAAEA,EAASC,WAAEA,EAAUC,aAAEA,EAAYC,WAAEA,GFsB9B,EACrCC,EACAP,KAEA,MAAOC,EAAWO,GAAgBC,GAAS,IACpCP,EAAWG,GAAgBI,EAAwBF,GAEpDH,EAAa,KACjBI,GAAa,GACbH,EAAaE,EAAa,EAW5B,MAAO,CAAEN,YAAWG,aAAYF,YAAWG,eAAcF,UATvC,KAChBK,GAAa,EAAK,EAQgDF,WALjD,KACjBN,EAAOE,GACPE,GAAY,EAGkE,EEzC9EM,CAAwBb,EAAOG,GAC3Bf,EAAKP,EAAuBC,GAElC,OACEtB,EAACwB,EAAY,CAACF,MAAOA,EAAOI,QAASc,EAAMc,WAAYxC,MAAOA,EAAKf,SACjEH,EAACiC,EAAG,CAAC0B,QAAQ,OAAOC,WAAW,2BAA0B5B,EAAE7B,SAAA,CACzDC,EAACyD,GACCC,UAAWd,EACXe,IAAKlB,EACLtC,KAAMW,EAAQ,QAAU,SACxB0B,MAAOI,EAAYC,EAAYL,EAC/BoB,SAAU,CAACC,EAAGC,KACRC,OAAOC,MAAMF,IAAcD,EAAEI,cAAsBzB,MACrDQ,EAAakB,SAAUL,EAAEI,cAAsBzB,MAAO,KAC7CsB,GACTd,EAAac,MAIlBpB,IAAaE,GAAa5C,EAACa,GAAgBC,MAAOA,EAAON,QAASsC,IAClEF,GAAa5C,EAACR,EAAgB,CAACC,cAAesD,EAAYrD,cAAeuD,QAE/D"}

package/value-rating/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@pautena/react-design-system/value-rating",
-  "private": true,
-  "main": "./cjs/index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "dependencies": {
-    "@mui/icons-material": "^6.4.5",
-    "@mui/material": "^6.4.5",
-    "react": "^19.0.0"
-  }
-}

package/value-text/cjs/index.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("@mui/material/Typography"),t=require("@mui/material/TextField"),r=require("@mui/material/Box"),l=require("react"),a=require("@mui/icons-material/Check"),n=require("@mui/icons-material/Clear"),s=require("@mui/material/styles"),o=require("@mui/material/Button"),u=require("@mui/material/IconButton"),d=require("@mui/material/InputAdornment"),c=require("@mui/icons-material/Edit"),m=require("@mui/material/Tooltip");const x=({onClickCancel:i,onClickSubmit:t,sx:r})=>e.jsxs(d,{position:"end",sx:r,children:[e.jsx(o,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:e.jsx(n,{sx:{fontSize:12}}),onClick:i,sx:{paddingRight:0,minWidth:0,marginRight:1}}),e.jsx(o,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:e.jsx(a,{sx:{fontSize:12}}),onClick:t,sx:{paddingRight:0,minWidth:0}})]}),p=({dense:i,onClick:t})=>{const{typography:r}=s.useTheme();return e.jsx(u,{size:"small",onClick:t,sx:{ml:i?.5:1},"aria-label":"edit button",children:e.jsx(c,{sx:{fontSize:r.pxToRem(i?18:24)}})})},h=e=>`label-${e.replace(/ /g,"-")}`,b=({label:t,hideLabel:l,tooltip:a,tooltipEnterDelay:n=2e3,children:o,dense:u,sx:d})=>{const{typography:c}=s.useTheme(),x=h(t);return e.jsxs(r,{width:1,lineHeight:u?0:void 0,sx:d,children:[!l&&e.jsx(i,{variant:u?"caption":"subtitle2",role:"label",id:x,lineHeight:u?c.pxToRem(15):void 0,children:t}),a?e.jsx(m,{title:a,placement:"top",enterDelay:n,children:o}):o]})};exports.ValueText=({label:a,value:n,placeholder:s="-",editable:o,dense:u,onEdit:d=(()=>null)})=>{const c=l.useRef(null),{isEditing:m,editValue:g,startEdit:j,cancelEdit:E,setEditValue:y,submitEdit:v}=((e,i)=>{const[t,r]=l.useState(!1),[a,n]=l.useState(e),s=()=>{r(!1),n(e)};return{isEditing:t,cancelEdit:s,editValue:a,setEditValue:n,startEdit:()=>{r(!0)},submitEdit:()=>{i(a),s()}}})(n?.toString(),d),C=h(a),k=n?.toString()||s,q=e=>{"Enter"===e.key&&d(e.target.value)};return l.useEffect((()=>(c.current?.addEventListener("keypress",q),()=>c.current?.removeEventListener("keypress",q))),[c.current]),e.jsx(b,{hideLabel:m,label:a,tooltip:k,dense:u,children:m?e.jsx(t,{inputRef:c,value:g,label:a,size:"small",onChange:e=>y(e.target.value),InputProps:{endAdornment:e.jsx(x,{onClickCancel:E,onClickSubmit:v})},sx:{marginY:u?0:1}}):e.jsxs(r,{display:"flex","aria-labelledby":C,children:[e.jsx(i,{variant:u?"body1":"h5",noWrap:!0,children:k}),o&&e.jsx(p,{dense:u,onClick:j})]})})};
-//# sourceMappingURL=index.js.map

package/value-text/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/value-base/value-edit.tsx","../../../src/value-content/value-content.tsx","../../../src/value-text/value-text.tsx","../../../src/value-base/value-displays.types.ts"],"sourcesContent":["import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n  onClickCancel: () => void;\n  onClickSubmit: () => void;\n  sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n  return (\n    <InputAdornment position=\"end\" sx={sx}>\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"error\"\n        aria-label=\"cancel button\"\n        startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickCancel}\n        sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n      />\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"primary\"\n        aria-label=\"submit button\"\n        startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickSubmit}\n        sx={{ paddingRight: 0, minWidth: 0 }}\n      />\n    </InputAdornment>\n  );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n  initialValue: T | undefined,\n  onEdit: (value?: T) => void,\n) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n  const cancelEdit = () => {\n    setIsEditing(false);\n    setEditValue(initialValue);\n  };\n  const startEdit = () => {\n    setIsEditing(true);\n  };\n\n  const submitEdit = () => {\n    onEdit(editValue);\n    cancelEdit();\n  };\n\n  return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n  dense?: boolean;\n  onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n  const { typography } = useTheme();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onClick}\n      sx={{ ml: dense ? 0.5 : 1 }}\n      aria-label=\"edit button\"\n    >\n      <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n    </IconButton>\n  );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport Box from \"@mui/material/Box\";\nimport { useEffect, useRef } from \"react\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n  useEditableValueDisplay,\n  ValueEditButton,\n  ValueEditButtons,\n} from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueTextProps) => {\n  const editInputRef = useRef<HTMLInputElement>(null);\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(valueProp?.toString(), onEdit);\n  const id = getValueContentLabelId(label);\n  const value = valueProp?.toString() || placeholder;\n\n  const editKeyPressListener = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\") {\n      onEdit((e.target as any).value);\n    }\n  };\n\n  useEffect(() => {\n    editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n    return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n  }, [editInputRef.current]);\n\n  return (\n    <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n      {isEditing ? (\n        <TextField\n          inputRef={editInputRef}\n          value={editValue}\n          label={label}\n          size=\"small\"\n          onChange={(e) => setEditValue(e.target.value)}\n          InputProps={{\n            endAdornment: (\n              <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n            ),\n          }}\n          sx={{ marginY: !dense ? 1 : 0 }}\n        />\n      ) : (\n        <Box display=\"flex\" aria-labelledby={id}>\n          <Typography variant={dense ? \"body1\" : \"h5\"} noWrap>\n            {value}\n          </Typography>\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Box>\n      )}\n    </ValueContent>\n  );\n};\n","export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","jsx","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","value","valueProp","placeholder","editable","onEdit","editInputRef","useRef","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","editKeyPressListener","e","key","target","useEffect","current","addEventListener","removeEventListener","TextField","inputRef","onChange","InputProps","endAdornment","marginY","display","noWrap"],"mappings":"wdAeO,MAAMA,EAAmB,EAAGC,gBAAeC,gBAAeC,QAE7DC,EAAAA,KAACC,EAAe,CAAAC,SAAS,MAAMH,GAAIA,EAAEI,SAAA,CACnCC,MAACC,EAAM,CACLC,QAAQ,YACRC,KAAK,QACLC,MAAM,QAAO,aACF,gBACXC,UAAWL,EAAAM,IAACC,EAAS,CAACZ,GAAI,CAAEa,SAAU,MACtCC,QAAShB,EACTE,GAAI,CAAEe,aAAc,EAAGC,SAAU,EAAGC,YAAa,KAEnDZ,EAACM,IAAAL,EACC,CAAAC,QAAQ,YACRC,KAAK,QACLC,MAAM,UAAS,aACJ,gBACXC,UAAWL,EAAAA,IAACa,GAAUlB,GAAI,CAAEa,SAAU,MACtCC,QAASf,EACTC,GAAI,CAAEe,aAAc,EAAGC,SAAU,QAqC5BG,EAAkB,EAAGC,QAAON,cACvC,MAAMO,WAAEA,GAAeC,aACvB,OACEjB,EAACM,IAAAY,EACC,CAAAf,KAAK,QACLM,QAASA,EACTd,GAAI,CAAEwB,GAAIJ,EAAQ,GAAM,GAAG,aAChB,cAEXhB,SAAAC,EAAAA,IAACoB,EAAQ,CAACzB,GAAI,CAAEa,SAAUQ,EAAWK,QAAQN,EAAQ,GAAK,QAC/C,EC5EJO,EAA0BC,GACrC,SAASA,EAAMC,QAAQ,KAAM,OA2ClBC,EAAe,EAC1BF,QACAG,YACAC,UACAC,oBAAoB,IACpB7B,WACAgB,QACApB,SAEA,MAAMqB,WAAEA,GAAeC,aACjBY,EAAKP,EAAuBC,GAElC,OACE3B,OAACkC,EAAG,CAACC,MAAO,EAAGC,WAAYjB,EAAQ,OAAIkB,EAAWtC,GAAIA,EAAEI,SAAA,EACpD2B,GACA1B,EAAAA,IAACkC,GACChC,QAASa,EAAQ,UAAY,YAC7BoB,KAAK,QACLN,GAAIA,EACJG,WAAYjB,EAAQC,EAAWK,QAAQ,SAAMY,EAE5ClC,SAAAwB,IAGJI,EACC3B,EAAAA,IAACoC,EAAQ,CAAAC,MAAOV,EAASW,UAAU,MAAMC,WAAYX,WAClD7B,QAKD,oBC7De,EACvBwB,QACAiB,MAAOC,EACPC,cCagC,IDZhCC,WACA5B,QACA6B,SAAS,KAAM,UAEf,MAAMC,EAAeC,EAAMA,OAAmB,OACxCC,UAAEA,EAASC,UAAEA,EAASC,UAAEA,EAASC,WAAEA,EAAUC,aAAEA,EAAYC,WAAEA,GFe9B,EACrCC,EACAT,KAEA,MAAOG,EAAWO,GAAgBC,EAAAA,UAAS,IACpCP,EAAWG,GAAgBI,EAAAA,SAAwBF,GAEpDH,EAAa,KACjBI,GAAa,GACbH,EAAaE,EAAa,EAW5B,MAAO,CAAEN,YAAWG,aAAYF,YAAWG,eAAcF,UATvC,KAChBK,GAAa,EAAK,EAQgDF,WALjD,KACjBR,EAAOI,GACPE,GAAY,EAGkE,EElC9EM,CAAwBf,GAAWgB,WAAYb,GAC3Cf,EAAKP,EAAuBC,GAC5BiB,EAAQC,GAAWgB,YAAcf,EAEjCgB,EAAwBC,IACd,UAAVA,EAAEC,KACJhB,EAAQe,EAAEE,OAAerB,QAS7B,OALAsB,EAAAA,WAAU,KACRjB,EAAakB,SAASC,iBAAiB,WAAYN,GAC5C,IAAMb,EAAakB,SAASE,oBAAoB,WAAYP,KAClE,CAACb,EAAakB,UAGf/D,EAAAA,IAACyB,EAAY,CAACC,UAAWqB,EAAWxB,MAAOA,EAAOI,QAASa,EAAOzB,MAAOA,EAAKhB,SAC3EgD,EACC/C,EAAAM,IAAC4D,EAAS,CACRC,SAAUtB,EACVL,MAAOQ,EACPzB,MAAOA,EACPpB,KAAK,QACLiE,SAAWT,GAAMR,EAAaQ,EAAEE,OAAOrB,OACvC6B,WAAY,CACVC,aACEtE,EAAAA,IAACR,EAAiB,CAAAC,cAAeyD,EAAYxD,cAAe0D,KAGhEzD,GAAI,CAAE4E,QAAUxD,EAAY,EAAJ,KAG1BnB,OAACkC,EAAG,CAAC0C,QAAQ,OAAM,kBAAkB3C,EAAE9B,SAAA,CACrCC,EAAAA,IAACkC,EAAU,CAAChC,QAASa,EAAQ,QAAU,KAAM0D,QAC1C,EAAA1E,SAAAyC,IAEFG,GAAY3C,EAAAA,IAACc,EAAe,CAACC,MAAOA,EAAON,QAASwC,QAG5C"}

package/value-text/cjs/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@pautena/react-design-system/value-text",
-  "private": true,
-  "main": "./cjs/index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "dependencies": {
-    "@mui/icons-material": "^6.4.5",
-    "@mui/material": "^6.4.5",
-    "react": "^19.0.0"
-  }
-}

package/value-text/index.d.ts

@@ -1 +0,0 @@
-export * from "./value-text";

package/value-text/index.js

@@ -1,2 +0,0 @@
-import{jsxs as i,jsx as t}from"react/jsx-runtime";import e from"@mui/material/Typography";import r from"@mui/material/TextField";import l from"@mui/material/Box";import{useState as n,useRef as a,useEffect as o}from"react";import m from"@mui/icons-material/Check";import s from"@mui/icons-material/Clear";import{useTheme as d}from"@mui/material/styles";import c from"@mui/material/Button";import p from"@mui/material/IconButton";import u from"@mui/material/InputAdornment";import h from"@mui/icons-material/Edit";import b from"@mui/material/Tooltip";const g=({onClickCancel:e,onClickSubmit:r,sx:l})=>i(u,{position:"end",sx:l,children:[t(c,{variant:"contained",size:"small",color:"error","aria-label":"cancel button",startIcon:t(s,{sx:{fontSize:12}}),onClick:e,sx:{paddingRight:0,minWidth:0,marginRight:1}}),t(c,{variant:"contained",size:"small",color:"primary","aria-label":"submit button",startIcon:t(m,{sx:{fontSize:12}}),onClick:r,sx:{paddingRight:0,minWidth:0}})]}),f=({dense:i,onClick:e})=>{const{typography:r}=d();return t(p,{size:"small",onClick:e,sx:{ml:i?.5:1},"aria-label":"edit button",children:t(h,{sx:{fontSize:r.pxToRem(i?18:24)}})})},x=i=>`label-${i.replace(/ /g,"-")}`,y=({label:r,hideLabel:n,tooltip:a,tooltipEnterDelay:o=2e3,children:m,dense:s,sx:c})=>{const{typography:p}=d(),u=x(r);return i(l,{width:1,lineHeight:s?0:void 0,sx:c,children:[!n&&t(e,{variant:s?"caption":"subtitle2",role:"label",id:u,lineHeight:s?p.pxToRem(15):void 0,children:r}),a?t(b,{title:a,placement:"top",enterDelay:o,children:m}):m]})},E=({label:m,value:s,placeholder:d="-",editable:c,dense:p,onEdit:u=(()=>null)})=>{const h=a(null),{isEditing:b,editValue:E,startEdit:C,cancelEdit:k,setEditValue:v,submitEdit:z}=((i,t)=>{const[e,r]=n(!1),[l,a]=n(i),o=()=>{r(!1),a(i)};return{isEditing:e,cancelEdit:o,editValue:l,setEditValue:a,startEdit:()=>{r(!0)},submitEdit:()=>{t(l),o()}}})(s?.toString(),u),S=x(m),R=s?.toString()||d,I=i=>{"Enter"===i.key&&u(i.target.value)};return o((()=>(h.current?.addEventListener("keypress",I),()=>h.current?.removeEventListener("keypress",I))),[h.current]),t(y,{hideLabel:b,label:m,tooltip:R,dense:p,children:b?t(r,{inputRef:h,value:E,label:m,size:"small",onChange:i=>v(i.target.value),InputProps:{endAdornment:t(g,{onClickCancel:k,onClickSubmit:z})},sx:{marginY:p?0:1}}):i(l,{display:"flex","aria-labelledby":S,children:[t(e,{variant:p?"body1":"h5",noWrap:!0,children:R}),c&&t(f,{dense:p,onClick:C})]})})};export{E as ValueText};
-//# sourceMappingURL=index.js.map

package/value-text/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/value-base/value-edit.tsx","../../src/value-content/value-content.tsx","../../src/value-text/value-text.tsx","../../src/value-base/value-displays.types.ts"],"sourcesContent":["import { useState } from \"react\";\nimport CheckIcon from \"@mui/icons-material/Check\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Button from \"@mui/material/Button\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport EditIcon from \"@mui/icons-material/Edit\";\n\nexport interface ValueEditButtonsProps {\n  onClickCancel: () => void;\n  onClickSubmit: () => void;\n  sx?: SxProps<Theme>;\n}\n\nexport const ValueEditButtons = ({ onClickCancel, onClickSubmit, sx }: ValueEditButtonsProps) => {\n  return (\n    <InputAdornment position=\"end\" sx={sx}>\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"error\"\n        aria-label=\"cancel button\"\n        startIcon={<ClearIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickCancel}\n        sx={{ paddingRight: 0, minWidth: 0, marginRight: 1 }}\n      />\n      <Button\n        variant=\"contained\"\n        size=\"small\"\n        color=\"primary\"\n        aria-label=\"submit button\"\n        startIcon={<CheckIcon sx={{ fontSize: 12 }} />}\n        onClick={onClickSubmit}\n        sx={{ paddingRight: 0, minWidth: 0 }}\n      />\n    </InputAdornment>\n  );\n};\n\n/**\n * Hook to manage the editing behaviour\n */\nexport const useEditableValueDisplay = <T,>(\n  initialValue: T | undefined,\n  onEdit: (value?: T) => void,\n) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [editValue, setEditValue] = useState<T | undefined>(initialValue);\n\n  const cancelEdit = () => {\n    setIsEditing(false);\n    setEditValue(initialValue);\n  };\n  const startEdit = () => {\n    setIsEditing(true);\n  };\n\n  const submitEdit = () => {\n    onEdit(editValue);\n    cancelEdit();\n  };\n\n  return { isEditing, cancelEdit, editValue, setEditValue, startEdit, submitEdit };\n};\n\nexport interface ValueEditButtonProps {\n  dense?: boolean;\n  onClick: () => void;\n}\n\nexport const ValueEditButton = ({ dense, onClick }: ValueEditButtonProps) => {\n  const { typography } = useTheme();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onClick}\n      sx={{ ml: dense ? 0.5 : 1 }}\n      aria-label=\"edit button\"\n    >\n      <EditIcon sx={{ fontSize: typography.pxToRem(dense ? 18 : 24) }} />\n    </IconButton>\n  );\n};\n","import { SxProps, Theme, useTheme } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport Typography from \"@mui/material/Typography\";\n\nexport const getValueContentLabelId = (label: string): string =>\n  `label-${label.replace(/ /g, \"-\")}`;\n\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * If true, the label will not be shown\n   */\n  hideLabel?: boolean;\n\n  /**\n   * If defined, a tooltip is going to be added arround the children;\n   */\n  tooltip?: string;\n\n  /**\n   * Timeout before the tooltip appears when the user hovers the value\n   */\n  tooltipEnterDelay?: number;\n\n  /**\n   * Component that's going to be renderd under the label\n   */\n  children: React.ReactElement<any, any>;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n\n  /**\n   * Custom styles for the root component\n   */\n  sx?: SxProps<Theme>;\n}\n\n/**\n * Displays a string value with a label\n */\nexport const ValueContent = ({\n  label,\n  hideLabel,\n  tooltip,\n  tooltipEnterDelay = 2000,\n  children,\n  dense,\n  sx,\n}: ValueContentProps) => {\n  const { typography } = useTheme();\n  const id = getValueContentLabelId(label);\n\n  return (\n    <Box width={1} lineHeight={dense ? 0 : undefined} sx={sx}>\n      {!hideLabel && (\n        <Typography\n          variant={dense ? \"caption\" : \"subtitle2\"}\n          role=\"label\"\n          id={id}\n          lineHeight={dense ? typography.pxToRem(15) : undefined}\n        >\n          {label}\n        </Typography>\n      )}\n      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          {children}\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n};\n","import Typography from \"@mui/material/Typography\";\nimport TextField from \"@mui/material/TextField\";\nimport Box from \"@mui/material/Box\";\nimport { useEffect, useRef } from \"react\";\nimport {\n  BaseValueProps,\n  DefaultPlaceholder,\n  EditableValueProps,\n  useEditableValueDisplay,\n  ValueEditButton,\n  ValueEditButtons,\n} from \"../value-base\";\nimport { getValueContentLabelId, ValueContent } from \"../value-content\";\n\nexport type ValueTextProps = BaseValueProps<string | number> & EditableValueProps<string>;\n\n/**\n * Displays a string value with a label\n */\nexport const ValueText = ({\n  label,\n  value: valueProp,\n  placeholder = DefaultPlaceholder,\n  editable,\n  dense,\n  onEdit = () => null,\n}: ValueTextProps) => {\n  const editInputRef = useRef<HTMLInputElement>(null);\n  const { isEditing, editValue, startEdit, cancelEdit, setEditValue, submitEdit } =\n    useEditableValueDisplay(valueProp?.toString(), onEdit);\n  const id = getValueContentLabelId(label);\n  const value = valueProp?.toString() || placeholder;\n\n  const editKeyPressListener = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\") {\n      onEdit((e.target as any).value);\n    }\n  };\n\n  useEffect(() => {\n    editInputRef.current?.addEventListener(\"keypress\", editKeyPressListener);\n    return () => editInputRef.current?.removeEventListener(\"keypress\", editKeyPressListener);\n  }, [editInputRef.current]);\n\n  return (\n    <ValueContent hideLabel={isEditing} label={label} tooltip={value} dense={dense}>\n      {isEditing ? (\n        <TextField\n          inputRef={editInputRef}\n          value={editValue}\n          label={label}\n          size=\"small\"\n          onChange={(e) => setEditValue(e.target.value)}\n          InputProps={{\n            endAdornment: (\n              <ValueEditButtons onClickCancel={cancelEdit} onClickSubmit={submitEdit} />\n            ),\n          }}\n          sx={{ marginY: !dense ? 1 : 0 }}\n        />\n      ) : (\n        <Box display=\"flex\" aria-labelledby={id}>\n          <Typography variant={dense ? \"body1\" : \"h5\"} noWrap>\n            {value}\n          </Typography>\n          {editable && <ValueEditButton dense={dense} onClick={startEdit} />}\n        </Box>\n      )}\n    </ValueContent>\n  );\n};\n","export interface BaseValueProps<T> {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\n\n  /**\n   * Value displayed\n   */\n  value?: T;\n\n  /**\n   * String rendered if value is undefined\n   */\n  placeholder?: string;\n\n  /**\n   * The value has to be displayed as compact or not.\n   * False by default\n   */\n  dense?: boolean;\n}\n\nexport interface EditableValueProps<T> {\n  /**\n   * This field can be edited or not\n   */\n  editable?: boolean;\n\n  /**\n   * Callback executed when the value is edited\n   */\n  onEdit?: (value?: T) => void;\n}\n\nexport const DefaultPlaceholder = \"-\";\n"],"names":["ValueEditButtons","onClickCancel","onClickSubmit","sx","_jsxs","InputAdornment","position","children","_jsx","Button","variant","size","color","startIcon","ClearIcon","fontSize","onClick","paddingRight","minWidth","marginRight","CheckIcon","ValueEditButton","dense","typography","useTheme","IconButton","ml","EditIcon","pxToRem","getValueContentLabelId","label","replace","ValueContent","hideLabel","tooltip","tooltipEnterDelay","id","Box","width","lineHeight","undefined","Typography","role","Tooltip","title","placement","enterDelay","ValueText","value","valueProp","placeholder","editable","onEdit","editInputRef","useRef","isEditing","editValue","startEdit","cancelEdit","setEditValue","submitEdit","initialValue","setIsEditing","useState","useEditableValueDisplay","toString","editKeyPressListener","e","key","target","useEffect","current","addEventListener","removeEventListener","TextField","inputRef","onChange","InputProps","endAdornment","marginY","display","noWrap"],"mappings":"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"}

package/value-text/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@pautena/react-design-system/value-text",
-  "private": true,
-  "main": "./cjs/index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "dependencies": {
-    "@mui/icons-material": "^6.4.5",
-    "@mui/material": "^6.4.5",
-    "react": "^19.0.0"
-  }
-}