@pautena/react-design-system 0.20.2 → 1.0.0

package/dist/TabProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TabProvider.context';
+export * from './TabProvider.provider';

package/dist/TextField/TextField.d.ts

@@ -0,0 +1,127 @@
+import { CircularProgressProps, TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import { FormControlProps } from '@mui/material/FormControl';
+import { FormHelperTextProps } from '@mui/material/FormHelperText';
+import { InputAdornmentProps } from '@mui/material/InputAdornment';
+import { InputLabelProps as MuiInputLabelProps } from '@mui/material/InputLabel';
+import { LinearProgressProps } from '@mui/material/LinearProgress';
+import { OutlinedInputProps } from '@mui/material/OutlinedInput';
+import { JSXElementConstructor } from 'react';
+/**
+ * Interface representing the slots for the TextField component.
+ */
+export interface TextFieldSlots {
+    /**
+     * Root form control component
+     */
+    formControl?: JSXElementConstructor<FormControlProps>;
+    /**
+     * Input label component
+     */
+    inputLabel?: JSXElementConstructor<MuiInputLabelProps>;
+    /**
+     * Input component
+     */
+    input?: JSXElementConstructor<OutlinedInputProps>;
+    /**
+     * Input adornment component for end position
+     */
+    inputAdornment?: JSXElementConstructor<InputAdornmentProps>;
+    /**
+     * Loading indicator component
+     */
+    loadingIndicator?: JSXElementConstructor<CircularProgressProps>;
+    /**
+     * Fetching indicator component
+     */
+    fetchingIndicator?: JSXElementConstructor<LinearProgressProps>;
+    /**
+     * Helper text component
+     */
+    helperText?: JSXElementConstructor<FormHelperTextProps>;
+}
+/**
+ * Interface representing the slot properties for the TextField component.
+ */
+export interface TextFieldSlotProps {
+    /**
+     * Props for the form control
+     */
+    formControl?: Partial<FormControlProps>;
+    /**
+     * Props for the input label
+     */
+    inputLabel?: Partial<MuiInputLabelProps>;
+    /**
+     * Props for the input
+     */
+    input?: Partial<OutlinedInputProps>;
+    /**
+     * Props for the input adornment
+     */
+    inputAdornment?: Partial<InputAdornmentProps>;
+    /**
+     * Props for the loading indicator
+     */
+    loadingIndicator?: Partial<CircularProgressProps>;
+    /**
+     * Props for the fetching indicator
+     */
+    fetchingIndicator?: Partial<LinearProgressProps>;
+    /**
+     * Props for the helper text
+     */
+    helperText?: Partial<FormHelperTextProps>;
+}
+/**
+ * Props for the TextField component.
+ *
+ * @extends MuiTextFieldProps
+ */
+export type TextFieldProps = MuiTextFieldProps & {
+    /**
+     * Indicates if the field is in a fetching state.
+     */
+    fetching?: boolean;
+    /**
+     * Indicates if the field is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Optional hex color code for the text field.
+     */
+    hexColor?: string;
+    /**
+     * Optional slots for custom rendering within the text field
+     */
+    slots?: TextFieldSlots;
+    /**
+     * Optional props for the slots
+     */
+    slotProps?: TextFieldSlotProps;
+};
+/**
+ * A customizable TextField component that extends the functionality of the Material-UI TextField component
+ * and supports various props for styling and functionality.
+ *
+ * Supports extensive customization through slots and slotProps.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextField label="Email" />
+ *
+ * // With loading state
+ * <TextField label="Search" loading />
+ *
+ * // Custom loading indicator size
+ * <TextField
+ *   label="Username"
+ *   loading
+ *   slotProps={{
+ *     loadingIndicator: { size: 24 }
+ *   }}
+ * />
+ * ```
+ */
+export declare function TextField({ id: overrideId, label, InputLabelProps, InputProps, fetching, loading, helperText, hexColor, size, fullWidth, sx, slots, slotProps, ...rest }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export default TextField;

package/dist/TextField/TextField.mjs

@@ -0,0 +1,119 @@
+import { j as r } from "../_virtual/jsx-runtime.mjs";
+import v from "../node_modules/@mui/utils/esm/useId/useId.mjs";
+import H from "../node_modules/@mui/material/esm/FormControl/FormControl.mjs";
+import O from "../node_modules/@mui/material/esm/InputLabel/InputLabel.mjs";
+import k from "../node_modules/@mui/material/esm/OutlinedInput/OutlinedInput.mjs";
+import z from "../node_modules/@mui/material/esm/InputAdornment/InputAdornment.mjs";
+import B from "../node_modules/@mui/material/esm/CircularProgress/CircularProgress.mjs";
+import E from "../node_modules/@mui/material/esm/LinearProgress/LinearProgress.mjs";
+import R from "../node_modules/@mui/material/esm/FormHelperText/FormHelperText.mjs";
+import S from "../node_modules/@mui/material/esm/Autocomplete/autocompleteClasses.mjs";
+import q from "../node_modules/@mui/material/esm/IconButton/iconButtonClasses.mjs";
+import w from "../node_modules/@mui/material/esm/LinearProgress/linearProgressClasses.mjs";
+import y from "../node_modules/@mui/material/esm/CircularProgress/circularProgressClasses.mjs";
+import D from "../node_modules/@mui/material/esm/InputLabel/inputLabelClasses.mjs";
+import a from "../node_modules/@mui/material/esm/OutlinedInput/outlinedInputClasses.mjs";
+function no({
+  id: l,
+  label: i,
+  InputLabelProps: u,
+  InputProps: p,
+  fetching: f,
+  loading: d,
+  helperText: m,
+  hexColor: o,
+  size: c,
+  fullWidth: s,
+  sx: C,
+  slots: n,
+  slotProps: t,
+  ...I
+}) {
+  const e = v(l), x = m && e ? `${e}-helper-text` : void 0, g = i && e ? `${e}-label` : void 0, b = n?.formControl ?? H, $ = n?.inputLabel ?? O, j = n?.input ?? k, h = n?.inputAdornment ?? z, L = n?.loadingIndicator ?? B, A = n?.fetchingIndicator ?? E, F = n?.helperText ?? R, T = o ? {
+    [`& .${a.notchedOutline}`]: {
+      borderColor: `${o} !important`
+    },
+    [`& .${D.root}`]: {
+      color: o
+    },
+    [`& .${a.input}`]: {
+      color: o
+    },
+    [`& .${y.root}`]: {
+      color: o
+    },
+    [`& .${w.bar}`]: {
+      backgroundColor: o
+    },
+    [`& .${S.endAdornment} .${q.root}`]: {
+      color: o
+    }
+  } : {};
+  return /* @__PURE__ */ r.jsxs(
+    b,
+    {
+      sx: T,
+      fullWidth: s,
+      ...t?.formControl,
+      children: [
+        /* @__PURE__ */ r.jsx(
+          $,
+          {
+            size: c === "small" ? "small" : "medium",
+            id: g,
+            htmlFor: e,
+            ...u,
+            ...t?.inputLabel,
+            children: i
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          j,
+          {
+            ...p,
+            id: e,
+            label: i,
+            size: c,
+            fullWidth: s,
+            endAdornment: /* @__PURE__ */ r.jsxs(
+              h,
+              {
+                position: "end",
+                ...t?.inputAdornment,
+                children: [
+                  p?.endAdornment,
+                  d ? /* @__PURE__ */ r.jsx(
+                    L,
+                    {
+                      color: "inherit",
+                      size: 20,
+                      sx: { ml: 1 },
+                      ...t?.loadingIndicator
+                    }
+                  ) : null
+                ]
+              }
+            ),
+            sx: C,
+            ...I,
+            ...t?.input
+          }
+        ),
+        f && !d && /* @__PURE__ */ r.jsx(
+          A,
+          {
+            color: "inherit",
+            sx: { position: "absolute", left: 0, right: 0, bottom: 0 },
+            ...t?.fetchingIndicator
+          }
+        ),
+        m && /* @__PURE__ */ r.jsx(F, { id: x, ...t?.helperText, children: m })
+      ]
+    }
+  );
+}
+export {
+  no as TextField,
+  no as default
+};
+//# sourceMappingURL=TextField.mjs.map

package/dist/TextField/TextField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.mjs","sources":["../../src/TextField/TextField.tsx"],"sourcesContent":["import type {\n  CircularProgressProps,\n  TextFieldProps as MuiTextFieldProps,\n} from \"@mui/material\";\nimport { autocompleteClasses } from \"@mui/material/Autocomplete\";\nimport CircularProgress, {\n  circularProgressClasses,\n} from \"@mui/material/CircularProgress\";\nimport FormControl, { type FormControlProps } from \"@mui/material/FormControl\";\nimport FormHelperText, {\n  type FormHelperTextProps,\n} from \"@mui/material/FormHelperText\";\nimport { iconButtonClasses } from \"@mui/material/IconButton\";\nimport InputAdornment, {\n  type InputAdornmentProps,\n} from \"@mui/material/InputAdornment\";\nimport InputLabel, {\n  inputLabelClasses,\n  type InputLabelProps as MuiInputLabelProps,\n} from \"@mui/material/InputLabel\";\nimport LinearProgress, {\n  type LinearProgressProps,\n  linearProgressClasses,\n} from \"@mui/material/LinearProgress\";\nimport OutlinedInput, {\n  type OutlinedInputProps,\n  outlinedInputClasses,\n} from \"@mui/material/OutlinedInput\";\nimport useId from \"@mui/utils/useId\";\nimport type { JSXElementConstructor } from \"react\";\n\n/**\n * Interface representing the slots for the TextField component.\n */\nexport interface TextFieldSlots {\n  /**\n   * Root form control component\n   */\n  formControl?: JSXElementConstructor<FormControlProps>;\n  /**\n   * Input label component\n   */\n  inputLabel?: JSXElementConstructor<MuiInputLabelProps>;\n  /**\n   * Input component\n   */\n  input?: JSXElementConstructor<OutlinedInputProps>;\n  /**\n   * Input adornment component for end position\n   */\n  inputAdornment?: JSXElementConstructor<InputAdornmentProps>;\n  /**\n   * Loading indicator component\n   */\n  loadingIndicator?: JSXElementConstructor<CircularProgressProps>;\n  /**\n   * Fetching indicator component\n   */\n  fetchingIndicator?: JSXElementConstructor<LinearProgressProps>;\n  /**\n   * Helper text component\n   */\n  helperText?: JSXElementConstructor<FormHelperTextProps>;\n}\n\n/**\n * Interface representing the slot properties for the TextField component.\n */\nexport interface TextFieldSlotProps {\n  /**\n   * Props for the form control\n   */\n  formControl?: Partial<FormControlProps>;\n  /**\n   * Props for the input label\n   */\n  inputLabel?: Partial<MuiInputLabelProps>;\n  /**\n   * Props for the input\n   */\n  input?: Partial<OutlinedInputProps>;\n  /**\n   * Props for the input adornment\n   */\n  inputAdornment?: Partial<InputAdornmentProps>;\n  /**\n   * Props for the loading indicator\n   */\n  loadingIndicator?: Partial<CircularProgressProps>;\n  /**\n   * Props for the fetching indicator\n   */\n  fetchingIndicator?: Partial<LinearProgressProps>;\n  /**\n   * Props for the helper text\n   */\n  helperText?: Partial<FormHelperTextProps>;\n}\n\n/**\n * Props for the TextField component.\n *\n * @extends MuiTextFieldProps\n */\nexport type TextFieldProps = MuiTextFieldProps & {\n  /**\n   * Indicates if the field is in a fetching state.\n   */\n  fetching?: boolean;\n  /**\n   * Indicates if the field is in a loading state.\n   */\n  loading?: boolean;\n  /**\n   * Optional hex color code for the text field.\n   */\n  hexColor?: string;\n  /**\n   * Optional slots for custom rendering within the text field\n   */\n  slots?: TextFieldSlots;\n  /**\n   * Optional props for the slots\n   */\n  slotProps?: TextFieldSlotProps;\n};\n\n/**\n * A customizable TextField component that extends the functionality of the Material-UI TextField component\n * and supports various props for styling and functionality.\n *\n * Supports extensive customization through slots and slotProps.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextField label=\"Email\" />\n *\n * // With loading state\n * <TextField label=\"Search\" loading />\n *\n * // Custom loading indicator size\n * <TextField\n *   label=\"Username\"\n *   loading\n *   slotProps={{\n *     loadingIndicator: { size: 24 }\n *   }}\n * />\n * ```\n */\nexport function TextField({\n  id: overrideId,\n  label,\n  InputLabelProps,\n  InputProps,\n  fetching,\n  loading,\n  helperText,\n  hexColor,\n  size,\n  fullWidth,\n  sx,\n  slots,\n  slotProps,\n  ...rest\n}: TextFieldProps) {\n  const id = useId(overrideId);\n  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;\n  const inputLabelId = label && id ? `${id}-label` : undefined;\n\n  // Slot components with defaults\n  const FormControlComponent = slots?.formControl ?? FormControl;\n  const InputLabelComponent = slots?.inputLabel ?? InputLabel;\n  const InputComponent = slots?.input ?? OutlinedInput;\n  const InputAdornmentComponent = slots?.inputAdornment ?? InputAdornment;\n  const LoadingIndicatorComponent = slots?.loadingIndicator ?? CircularProgress;\n  const FetchingIndicatorComponent = slots?.fetchingIndicator ?? LinearProgress;\n  const HelperTextComponent = slots?.helperText ?? FormHelperText;\n\n  const hexColorSx = hexColor\n    ? {\n        [`& .${outlinedInputClasses.notchedOutline}`]: {\n          borderColor: `${hexColor} !important`,\n        },\n        [`& .${inputLabelClasses.root}`]: {\n          color: hexColor,\n        },\n        [`& .${outlinedInputClasses.input}`]: {\n          color: hexColor,\n        },\n        [`& .${circularProgressClasses.root}`]: {\n          color: hexColor,\n        },\n        [`& .${linearProgressClasses.bar}`]: {\n          backgroundColor: hexColor,\n        },\n        [`& .${autocompleteClasses.endAdornment} .${iconButtonClasses.root}`]: {\n          color: hexColor,\n        },\n      }\n    : {};\n\n  return (\n    <FormControlComponent\n      sx={hexColorSx}\n      fullWidth={fullWidth}\n      {...slotProps?.formControl}\n    >\n      <InputLabelComponent\n        size={size === \"small\" ? \"small\" : \"medium\"}\n        id={inputLabelId}\n        htmlFor={id}\n        {...InputLabelProps}\n        {...slotProps?.inputLabel}\n      >\n        {label}\n      </InputLabelComponent>\n      <InputComponent\n        {...InputProps}\n        id={id}\n        label={label}\n        size={size}\n        fullWidth={fullWidth}\n        endAdornment={\n          <InputAdornmentComponent\n            position=\"end\"\n            {...slotProps?.inputAdornment}\n          >\n            {InputProps?.endAdornment}\n            {loading ? (\n              <LoadingIndicatorComponent\n                color=\"inherit\"\n                size={20}\n                sx={{ ml: 1 }}\n                {...slotProps?.loadingIndicator}\n              />\n            ) : null}\n          </InputAdornmentComponent>\n        }\n        sx={sx}\n        {...(rest as any)}\n        {...slotProps?.input}\n      />\n      {fetching && !loading && (\n        <FetchingIndicatorComponent\n          color=\"inherit\"\n          sx={{ position: \"absolute\", left: 0, right: 0, bottom: 0 }}\n          {...slotProps?.fetchingIndicator}\n        />\n      )}\n      {helperText && (\n        <HelperTextComponent id={helperTextId} {...slotProps?.helperText}>\n          {helperText}\n        </HelperTextComponent>\n      )}\n    </FormControlComponent>\n  );\n}\n\nexport default TextField;\n"],"names":["TextField","overrideId","label","InputLabelProps","InputProps","fetching","loading","helperText","hexColor","size","fullWidth","sx","slots","slotProps","rest","id","useId","helperTextId","inputLabelId","FormControlComponent","FormControl","InputLabelComponent","InputLabel","InputComponent","OutlinedInput","InputAdornmentComponent","InputAdornment","LoadingIndicatorComponent","CircularProgress","FetchingIndicatorComponent","LinearProgress","HelperTextComponent","FormHelperText","hexColorSx","outlinedInputClasses","inputLabelClasses","circularProgressClasses","linearProgressClasses","autocompleteClasses","iconButtonClasses","jsxs","jsx"],"mappings":"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"}

package/dist/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export type { TextFieldProps } from './TextField';
+export { default, default as TextField } from './TextField';

package/dist/ValueBase/ValueDisplays.types.d.ts

@@ -0,0 +1,20 @@
+export interface BaseValueProps<T> {
+    /**
+     * Name of the displayed value
+     */
+    label: string;
+    /**
+     * Value displayed
+     */
+    value?: T;
+    /**
+     * String rendered if value is undefined
+     */
+    placeholder?: string;
+    /**
+     * The value has to be displayed as compact or not.
+     * False by default
+     */
+    dense?: boolean;
+}
+export declare const DefaultPlaceholder = "-";

package/dist/ValueBase/ValueDisplays.types.mjs

@@ -0,0 +1,5 @@
+const e = "-";
+export {
+  e as DefaultPlaceholder
+};
+//# sourceMappingURL=ValueDisplays.types.mjs.map

package/dist/ValueBase/ValueDisplays.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueDisplays.types.mjs","sources":["../../src/ValueBase/ValueDisplays.types.ts"],"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 const DefaultPlaceholder = \"-\";\n"],"names":["DefaultPlaceholder"],"mappings":"AAuBO,MAAMA,IAAqB;"}

package/dist/ValueBase/index.d.ts

@@ -0,0 +1 @@
+export * from './ValueDisplays.types';

package/dist/ValueBoolean/ValueBoolean.d.ts

@@ -0,0 +1,12 @@
+import { BaseValueProps } from '../ValueBase';
+/**
+ * Props for the ValueBoolean component
+ *
+ * @extends BaseValueProps
+ */
+export type ValueBooleanProps = BaseValueProps<boolean>;
+/**
+ * Displays a boolean value with a label
+ */
+export declare function ValueBoolean({ label, value, placeholder, dense, }: ValueBooleanProps): import("react/jsx-runtime").JSX.Element;
+export default ValueBoolean;

package/dist/ValueBoolean/ValueBoolean.mjs

@@ -0,0 +1,34 @@
+import { j as o } from "../_virtual/jsx-runtime.mjs";
+import m from "../node_modules/@mui/icons-material/esm/Check.mjs";
+import a from "../node_modules/@mui/icons-material/esm/Close.mjs";
+import { DefaultPlaceholder as l } from "../ValueBase/ValueDisplays.types.mjs";
+import { getValueContentLabelId as f, ValueContent as p } from "../ValueContent/ValueContent.mjs";
+import x from "../node_modules/@mui/material/esm/styles/useTheme.mjs";
+import h from "../node_modules/@mui/material/esm/Box/Box.mjs";
+import d from "../node_modules/@mui/material/esm/Typography/Typography.mjs";
+function k({
+  label: e,
+  value: r,
+  placeholder: c = l,
+  dense: t
+}) {
+  const s = f(e), { typography: i } = x(), n = {
+    fontSize: t ? i.h6.fontSize : i.h5.fontSize
+  };
+  return /* @__PURE__ */ o.jsx(p, { label: e, dense: t, children: /* @__PURE__ */ o.jsx(
+    h,
+    {
+      display: "flex",
+      alignItems: "center",
+      "aria-labelledby": s,
+      role: "checkbox",
+      "aria-checked": r,
+      children: r === void 0 ? /* @__PURE__ */ o.jsx(d, { variant: "h5", children: c }) : r ? /* @__PURE__ */ o.jsx(m, { color: "success", sx: n }) : /* @__PURE__ */ o.jsx(a, { color: "error", sx: n })
+    }
+  ) });
+}
+export {
+  k as ValueBoolean,
+  k as default
+};
+//# sourceMappingURL=ValueBoolean.mjs.map

package/dist/ValueBoolean/ValueBoolean.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueBoolean.mjs","sources":["../../src/ValueBoolean/ValueBoolean.tsx"],"sourcesContent":["import CheckIcon from \"@mui/icons-material/Check\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport Box from \"@mui/material/Box\";\nimport { useTheme } from \"@mui/material/styles\";\nimport Typography from \"@mui/material/Typography\";\nimport { type BaseValueProps, DefaultPlaceholder } from \"../ValueBase\";\nimport ValueContent, { getValueContentLabelId } from \"../ValueContent\";\n\n/**\n * Props for the ValueBoolean component\n *\n * @extends BaseValueProps\n */\nexport type ValueBooleanProps = BaseValueProps<boolean>;\n\n/**\n * Displays a boolean value with a label\n */\nexport function ValueBoolean({\n  label,\n  value,\n  placeholder = DefaultPlaceholder,\n  dense,\n}: ValueBooleanProps) {\n  const id = getValueContentLabelId(label);\n  const { typography } = useTheme();\n\n  const iconSx = {\n    fontSize: dense ? typography.h6.fontSize : typography.h5.fontSize,\n  };\n\n  return (\n    <ValueContent label={label} dense={dense}>\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        aria-labelledby={id}\n        role=\"checkbox\"\n        aria-checked={value}\n      >\n        {value === undefined ? (\n          <Typography variant=\"h5\">{placeholder}</Typography>\n        ) : value ? (\n          <CheckIcon color=\"success\" sx={iconSx} />\n        ) : (\n          <CloseIcon color=\"error\" sx={iconSx} />\n        )}\n      </Box>\n    </ValueContent>\n  );\n}\n\nexport default ValueBoolean;\n"],"names":["ValueBoolean","label","value","placeholder","DefaultPlaceholder","dense","id","getValueContentLabelId","typography","useTheme","iconSx","jsx","ValueContent","Box","Typography","CheckIcon","CloseIcon"],"mappings":";;;;;;;;AAkBO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAcC;AAAA,EACd,OAAAC;AACF,GAAsB;AACpB,QAAMC,IAAKC,EAAuBN,CAAK,GACjC,EAAE,YAAAO,EAAA,IAAeC,EAAA,GAEjBC,IAAS;AAAA,IACb,UAAUL,IAAQG,EAAW,GAAG,WAAWA,EAAW,GAAG;AAAA,EAAA;AAG3D,SACEG,gBAAAA,EAAAA,IAACC,GAAA,EAAa,OAAAX,GAAc,OAAAI,GAC1B,UAAAM,gBAAAA,EAAAA;AAAAA,IAACE;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,mBAAiBP;AAAA,MACjB,MAAK;AAAA,MACL,gBAAcJ;AAAA,MAEb,UAAAA,MAAU,SACTS,gBAAAA,EAAAA,IAACG,GAAA,EAAW,SAAQ,MAAM,UAAAX,GAAY,IACpCD,IACFS,gBAAAA,EAAAA,IAACI,KAAU,OAAM,WAAU,IAAIL,EAAA,CAAQ,0BAEtCM,GAAA,EAAU,OAAM,SAAQ,IAAIN,EAAA,CAAQ;AAAA,IAAA;AAAA,EAAA,GAG3C;AAEJ;"}

package/dist/ValueBoolean/index.d.ts

@@ -0,0 +1,2 @@
+export type { ValueBooleanProps } from './ValueBoolean';
+export { default, default as ValueBoolean } from './ValueBoolean';

package/dist/ValueCard/ValueCard.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Props for the ValueCard component
+ */
+export interface ValueCardProps {
+    /**
+     * Content to display in the card
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Container to show a labeled value
+ */
+export declare function ValueCard({ children }: ValueCardProps): import("react/jsx-runtime").JSX.Element;
+export default ValueCard;

package/dist/ValueCard/ValueCard.mjs

@@ -0,0 +1,10 @@
+import { j as t } from "../_virtual/jsx-runtime.mjs";
+import o from "../node_modules/@mui/material/esm/Paper/Paper.mjs";
+function p({ children: r }) {
+  return /* @__PURE__ */ t.jsx(o, { sx: { p: 2 }, children: r });
+}
+export {
+  p as ValueCard,
+  p as default
+};
+//# sourceMappingURL=ValueCard.mjs.map

package/dist/ValueCard/ValueCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueCard.mjs","sources":["../../src/ValueCard/ValueCard.tsx"],"sourcesContent":["import Paper from \"@mui/material/Paper\";\n\n/**\n * Props for the ValueCard component\n */\nexport interface ValueCardProps {\n  /**\n   * Content to display in the card\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Container to show a labeled value\n */\nexport function ValueCard({ children }: ValueCardProps) {\n  return <Paper sx={{ p: 2 }}>{children}</Paper>;\n}\n\nexport default ValueCard;\n"],"names":["ValueCard","children","Paper"],"mappings":";;AAeO,SAASA,EAAU,EAAE,UAAAC,KAA4B;AACtD,+BAAQC,GAAA,EAAM,IAAI,EAAE,GAAG,EAAA,GAAM,UAAAD,GAAS;AACxC;"}

package/dist/ValueCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ValueCard';
+export { default, default as ValueCard } from './ValueCard';

package/dist/ValueContent/ValueContent.d.ts

@@ -0,0 +1,37 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export declare const getValueContentLabelId: (label: string) => string;
+/**
+ * Props for the ValueContent component
+ */
+export interface ValueContentProps {
+    /**
+     * Name of the displayed value
+     */
+    label: string;
+    /**
+     * If defined, a tooltip is going to be added arround the children;
+     */
+    tooltip?: string;
+    /**
+     * Timeout before the tooltip appears when the user hovers the value
+     */
+    tooltipEnterDelay?: number;
+    /**
+     * Component that's going to be renderd under the label
+     */
+    children: React.ReactElement<any, any>;
+    /**
+     * The value has to be displayed as compact or not.
+     * False by default
+     */
+    dense?: boolean;
+    /**
+     * Custom styles for the root component
+     */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Displays a string value with a label
+ */
+export declare function ValueContent({ label, tooltip, tooltipEnterDelay, children, dense, sx, }: ValueContentProps): import("react/jsx-runtime").JSX.Element;
+export default ValueContent;

package/dist/ValueContent/ValueContent.mjs

@@ -0,0 +1,35 @@
+import { j as e } from "../_virtual/jsx-runtime.mjs";
+import m from "../node_modules/@mui/material/esm/styles/useTheme.mjs";
+import s from "../node_modules/@mui/material/esm/Box/Box.mjs";
+import c from "../node_modules/@mui/material/esm/Typography/Typography.mjs";
+import x from "../node_modules/@mui/material/esm/Tooltip/Tooltip.mjs";
+const h = (t) => `label-${t.replace(/ /g, "-")}`;
+function y({
+  label: t,
+  tooltip: r,
+  tooltipEnterDelay: n = 2e3,
+  children: i,
+  dense: o,
+  sx: p
+}) {
+  const { typography: a } = m(), l = h(t);
+  return /* @__PURE__ */ e.jsxs(s, { width: 1, lineHeight: o ? 0 : void 0, sx: p, children: [
+    /* @__PURE__ */ e.jsx(
+      c,
+      {
+        variant: o ? "caption" : "subtitle2",
+        role: "label",
+        id: l,
+        lineHeight: o ? a.pxToRem(15) : void 0,
+        children: t
+      }
+    ),
+    r ? /* @__PURE__ */ e.jsx(x, { title: r, placement: "top", enterDelay: n, children: /* @__PURE__ */ e.jsx("span", { children: i }) }) : i
+  ] });
+}
+export {
+  y as ValueContent,
+  y as default,
+  h as getValueContentLabelId
+};
+//# sourceMappingURL=ValueContent.mjs.map

package/dist/ValueContent/ValueContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueContent.mjs","sources":["../../src/ValueContent/ValueContent.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport { type SxProps, type Theme, useTheme } from \"@mui/material/styles\";\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\n/**\n * Props for the ValueContent component\n */\nexport interface ValueContentProps {\n  /**\n   * Name of the displayed value\n   */\n  label: string;\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 function ValueContent({\n  label,\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      <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      {tooltip ? (\n        <Tooltip title={tooltip} placement=\"top\" enterDelay={tooltipEnterDelay}>\n          <span>{children}</span>\n        </Tooltip>\n      ) : (\n        children\n      )}\n    </Box>\n  );\n}\n\nexport default ValueContent;\n"],"names":["getValueContentLabelId","label","ValueContent","tooltip","tooltipEnterDelay","children","dense","sx","typography","useTheme","id","jsxs","Box","jsx","Typography","Tooltip"],"mappings":";;;;;AAKO,MAAMA,IAAyB,CAACC,MACrC,SAASA,EAAM,QAAQ,MAAM,GAAG,CAAC;AAyC5B,SAASC,EAAa;AAAA,EAC3B,OAAAD;AAAA,EACA,SAAAE;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAAC;AACF,GAAsB;AACpB,QAAM,EAAE,YAAAC,EAAA,IAAeC,EAAA,GACjBC,IAAKV,EAAuBC,CAAK;AAEvC,SACEU,gBAAAA,OAACC,KAAI,OAAO,GAAG,YAAYN,IAAQ,IAAI,QAAW,IAAAC,GAChD,UAAA;AAAA,IAAAM,gBAAAA,EAAAA;AAAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAASR,IAAQ,YAAY;AAAA,QAC7B,MAAK;AAAA,QACL,IAAAI;AAAA,QACA,YAAYJ,IAAQE,EAAW,QAAQ,EAAE,IAAI;AAAA,QAE5C,UAAAP;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFE,IACCU,gBAAAA,EAAAA,IAACE,GAAA,EAAQ,OAAOZ,GAAS,WAAU,OAAM,YAAYC,GACnD,UAAAS,gBAAAA,MAAC,QAAA,EAAM,UAAAR,EAAA,CAAS,GAClB,IAEAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/ValueContent/index.d.ts

@@ -0,0 +1,2 @@
+export type { ValueContentProps } from './ValueContent';
+export { default, default as ValueContent, getValueContentLabelId, } from './ValueContent';

package/dist/ValueDatetime/ValueDatetime.d.ts

@@ -0,0 +1,15 @@
+import { BaseValueProps } from '../ValueBase';
+/**
+ * Props for the ValueDatetime component
+ */
+export interface ValueDatetimeProps extends BaseValueProps<Date> {
+    /**
+     * Datetime format
+     */
+    format: string;
+}
+/**
+ * Displays a formated datetime with a label
+ */
+export declare function ValueDatetime({ label, value: valueProp, format: fmt, placeholder, dense, }: ValueDatetimeProps): import("react/jsx-runtime").JSX.Element;
+export default ValueDatetime;

package/dist/ValueDatetime/ValueDatetime.mjs

@@ -0,0 +1,30 @@
+import { j as t } from "../_virtual/jsx-runtime.mjs";
+import { format as n } from "date-fns";
+import { DefaultPlaceholder as f } from "../ValueBase/ValueDisplays.types.mjs";
+import { getValueContentLabelId as p, ValueContent as s } from "../ValueContent/ValueContent.mjs";
+import u from "../node_modules/@mui/material/esm/Box/Box.mjs";
+import x from "../node_modules/@mui/material/esm/Typography/Typography.mjs";
+function g({
+  label: o,
+  value: r,
+  format: i,
+  placeholder: l = f,
+  dense: e
+}) {
+  const m = p(o), a = r && n(r, i) || l;
+  return /* @__PURE__ */ t.jsx(
+    s,
+    {
+      label: o,
+      tooltip: a,
+      dense: e,
+      sx: { display: "flex", flexDirection: "column" },
+      children: /* @__PURE__ */ t.jsx(u, { display: "flex", alignItems: "center", "aria-labelledby": m, children: /* @__PURE__ */ t.jsx(x, { variant: e ? "body1" : "h5", noWrap: !0, children: a }) })
+    }
+  );
+}
+export {
+  g as ValueDatetime,
+  g as default
+};
+//# sourceMappingURL=ValueDatetime.mjs.map

package/dist/ValueDatetime/ValueDatetime.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueDatetime.mjs","sources":["../../src/ValueDatetime/ValueDatetime.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport { format } from \"date-fns\";\nimport { type BaseValueProps, DefaultPlaceholder } from \"../ValueBase\";\nimport ValueContent, { getValueContentLabelId } from \"../ValueContent\";\n\n/**\n * Props for the ValueDatetime component\n */\nexport interface ValueDatetimeProps extends BaseValueProps<Date> {\n  /**\n   * Datetime format\n   */\n  format: string;\n}\n\n/**\n * Displays a formated datetime with a label\n */\nexport function ValueDatetime({\n  label,\n  value: valueProp,\n  format: fmt,\n  placeholder = DefaultPlaceholder,\n  dense,\n}: ValueDatetimeProps) {\n  const id = getValueContentLabelId(label);\n  const value = (valueProp && format(valueProp, fmt)) || placeholder;\n\n  return (\n    <ValueContent\n      label={label}\n      tooltip={value}\n      dense={dense}\n      sx={{ display: \"flex\", flexDirection: \"column\" }}\n    >\n      <Box display=\"flex\" alignItems=\"center\" aria-labelledby={id}>\n        <Typography variant={dense ? \"body1\" : \"h5\"} noWrap>\n          {value}\n        </Typography>\n      </Box>\n    </ValueContent>\n  );\n}\n\nexport default ValueDatetime;\n"],"names":["ValueDatetime","label","valueProp","fmt","placeholder","DefaultPlaceholder","dense","id","getValueContentLabelId","value","format","jsx","ValueContent","Box","Typography"],"mappings":";;;;;;AAmBO,SAASA,EAAc;AAAA,EAC5B,OAAAC;AAAA,EACA,OAAOC;AAAA,EACP,QAAQC;AAAA,EACR,aAAAC,IAAcC;AAAA,EACd,OAAAC;AACF,GAAuB;AACrB,QAAMC,IAAKC,EAAuBP,CAAK,GACjCQ,IAASP,KAAaQ,EAAOR,GAAWC,CAAG,KAAMC;AAEvD,SACEO,gBAAAA,EAAAA;AAAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAX;AAAA,MACA,SAASQ;AAAA,MACT,OAAAH;AAAA,MACA,IAAI,EAAE,SAAS,QAAQ,eAAe,SAAA;AAAA,MAEtC,gCAACO,GAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,mBAAiBN,GACvD,UAAAI,gBAAAA,MAACG,GAAA,EAAW,SAASR,IAAQ,UAAU,MAAM,QAAM,IAChD,aACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/ValueDatetime/index.d.ts

@@ -0,0 +1,2 @@
+export type { ValueDatetimeProps } from './ValueDatetime';
+export { default, default as ValueDatetime } from './ValueDatetime';

package/dist/ValueImage/ValueImage.d.ts

@@ -0,0 +1,15 @@
+import { BaseValueProps } from '../ValueBase';
+/**
+ * Props for the ValueImage component
+ */
+export interface ValueImageProps extends BaseValueProps<string> {
+    /**
+     * Image size
+     */
+    size?: number;
+}
+/**
+ * Displays a image value with a label
+ */
+export declare function ValueImage({ label, value, size: sizeArg, dense, }: ValueImageProps): import("react/jsx-runtime").JSX.Element;
+export default ValueImage;

package/dist/ValueImage/ValueImage.mjs

@@ -0,0 +1,26 @@
+import { j as i } from "../_virtual/jsx-runtime.mjs";
+import { ValueContent as r } from "../ValueContent/ValueContent.mjs";
+import m from "../node_modules/@mui/material/esm/Box/Box.mjs";
+const a = 100, u = 50;
+function p({
+  label: t,
+  value: s,
+  size: n,
+  dense: e
+}) {
+  const o = n || (e ? u : a);
+  return /* @__PURE__ */ i.jsx(r, { label: t, dense: e, children: /* @__PURE__ */ i.jsx(
+    m,
+    {
+      component: "img",
+      src: s,
+      alt: t,
+      sx: { width: o, height: o }
+    }
+  ) });
+}
+export {
+  p as ValueImage,
+  p as default
+};
+//# sourceMappingURL=ValueImage.mjs.map

package/dist/ValueImage/ValueImage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValueImage.mjs","sources":["../../src/ValueImage/ValueImage.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport type { BaseValueProps } from \"../ValueBase\";\nimport ValueContent from \"../ValueContent\";\n\n/**\n * Props for the ValueImage component\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 function ValueImage({\n  label,\n  value,\n  size: sizeArg,\n  dense,\n}: ValueImageProps) {\n  const size = sizeArg || (dense ? DefaultDenseSize : DefaultSize);\n  return (\n    <ValueContent label={label} dense={dense}>\n      <Box\n        component=\"img\"\n        src={value}\n        alt={label}\n        sx={{ width: size, height: size }}\n      />\n    </ValueContent>\n  );\n}\n\nexport default ValueImage;\n"],"names":["DefaultSize","DefaultDenseSize","ValueImage","label","value","sizeArg","dense","size","jsx","ValueContent","Box"],"mappings":";;;AAcA,MAAMA,IAAc,KACdC,IAAmB;AAKlB,SAASC,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAMC;AAAA,EACN,OAAAC;AACF,GAAoB;AAClB,QAAMC,IAAOF,MAAYC,IAAQL,IAAmBD;AACpD,SACEQ,gBAAAA,EAAAA,IAACC,GAAA,EAAa,OAAAN,GAAc,OAAAG,GAC1B,UAAAE,gBAAAA,EAAAA;AAAAA,IAACE;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAKN;AAAA,MACL,KAAKD;AAAA,MACL,IAAI,EAAE,OAAOI,GAAM,QAAQA,EAAA;AAAA,IAAK;AAAA,EAAA,GAEpC;AAEJ;"}

package/dist/ValueImage/index.d.ts

@@ -0,0 +1,2 @@
+export type { ValueImageProps } from './ValueImage';
+export { default, default as ValueImage } from './ValueImage';

package/dist/ValueItem/ValueItem.d.ts

@@ -0,0 +1,33 @@
+import { GridProps } from '@mui/material/Grid';
+import { ResponsiveStyleValue } from '@mui/system';
+import { FunctionComponent, ReactElement } from 'react';
+/**
+ * Props for the ValueItem component
+ */
+export interface ValueItemProps extends Omit<GridProps, "item" | "container"> {
+    /**
+     * Whether to display a border
+     */
+    bordered?: ResponsiveStyleValue<boolean>;
+    /**
+     * Content to display
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ValueItem component type
+ */
+export type ValueItemComponent = FunctionComponent<ValueItemProps>;
+/**
+ * ValueItem element type
+ */
+export type ValueItemElement = ReactElement<ValueItemProps, ValueItemComponent>;
+export declare const valueItemClasses: {
+    root: string;
+    content: string;
+};
+/**
+ * `ValueItem` is a component to wrap your value components
+ */
+declare const ValueItem: ValueItemComponent;
+export default ValueItem;