@m4l/components 0.0.10 → 0.0.11

package/dist/components/PaperForm/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PaperFormProps } from './types';
+export declare function PaperForm(props: PaperFormProps): JSX.Element;

package/dist/components/PaperForm/index.js

@@ -0,0 +1,122 @@
+import { styled, useTheme } from "@mui/material/styles";
+import { Skeleton } from "@mui/material";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { BoxIcon } from "@mui_extended/BoxIcon";
+const WrapperPaper = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  padding: theme.spacing(1),
+  [theme.breakpoints.up("sm")]: {
+    margin: `${theme.spacing(1.5)}  ${theme.spacing(1.5)}  ${theme.spacing(3)}  ${theme.spacing(1.5)}`,
+    borderRadius: theme.spacing(2),
+    boxShadow: theme.customShadows.z8,
+    padding: theme.spacing(3),
+    backgroundColor: theme.palette.background.paper
+  }
+}));
+const Header = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  paddingBottom: theme.spacing(3),
+  marginBottom: theme.spacing(2),
+  overflow: "hidden"
+}));
+const IconTitleContainer = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  alignItems: "center",
+  cursor: "move",
+  ...theme.typography.subtitle1,
+  color: theme.palette.text.primary
+}));
+const IconHeader = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: theme.spacing(1.5)
+}));
+const Content = styled("div")(() => ({
+  flexGrow: 1,
+  position: "relative"
+}));
+const SkPaperFormHeader = styled("div")(({
+  theme
+}) => ({
+  width: "auto",
+  display: "grid",
+  gridTemplateColumns: `${theme.spacing(2)} auto`,
+  gridGap: `${theme.spacing(1.5)}`,
+  paddingBottom: `${theme.spacing(3)}`,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  marginBottom: `${theme.spacing(3)}`
+}));
+const PaperFormBoddy = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: "1"
+}));
+function SKTPaperForm(prop) {
+  const {
+    children
+  } = prop;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(SkPaperFormHeader, {
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 16,
+        height: 16
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: 68,
+        height: 14
+      })]
+    }), /* @__PURE__ */ jsx(PaperFormBoddy, {
+      children
+    })]
+  });
+}
+function PaperForm(props) {
+  const {
+    urlIcon,
+    tittle,
+    children,
+    isSkeleton = false
+  } = props;
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(WrapperPaper, {
+    id: "ContainerPropertyValue",
+    children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(Header, {
+        id: "Header",
+        children: /* @__PURE__ */ jsxs(IconTitleContainer, {
+          className: "draggable-dialog-title",
+          children: [/* @__PURE__ */ jsx(IconHeader, {
+            children: /* @__PURE__ */ jsx(BoxIcon, {
+              src: urlIcon,
+              sx: {
+                color: theme.palette.action.active
+              }
+            })
+          }), tittle]
+        })
+      }), /* @__PURE__ */ jsx(Content, {
+        id: "Content",
+        children
+      })]
+    }) : /* @__PURE__ */ jsx(SKTPaperForm, {
+      children
+    })
+  });
+}
+export { PaperForm as P };

package/dist/components/PaperForm/skeleton.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+interface dafaultProps {
+    children: ReactNode;
+}
+export declare function SKTPaperForm(prop: dafaultProps): JSX.Element;
+export {};

package/dist/components/PaperForm/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const WrapperPaper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Header: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SkPaperFormHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PaperFormBoddy: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/PaperForm/types.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export interface PaperFormProps {
+    isSkeleton?: boolean;
+    urlIcon: string;
+    tittle: string;
+    children: ReactNode;
+}

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export * from '../components/NoItemSelected';
 export * from '../components/NoItemSelected/dictionary';
 export * from '../components/ObjectLogs';
 export * from '../components/ObjectLogs/dictionary';
+export * from '../components/PaperForm';
 export * from '../components/PropertyValue';
 export * from '../components/Resizeable';
 export * from '../components/ScrollBar';

package/dist/index.js

@@ -12,6 +12,7 @@ export { R as RHFRadioGroup } from "./components/hook-form/RHFRadioGroup.js";
 export { M as ModalDialog, d as defaultModalDialogDictionary, g as getModalDialogComponentsDictionary } from "./components/ModalDialog/index.js";
 export { N as NoItemSelected, d as defaultNoItemSelectedDictionary, g as getNoItemSelectedComponentsDictionary } from "./components/NoItemSelected/index.js";
 export { O as ObjectLogs, d as defaultObjectLogDictionary, g as getObjectLogsComponentsDictionary } from "./components/ObjectLogs/index.js";
+export { P as PaperForm } from "./components/PaperForm/index.js";
 export { P as PropertyValue } from "./components/PropertyValue/index.js";
 export { R as Resizeable } from "./components/Resizeable/index.js";
 export { S as ScrollBar } from "./components/ScrollBar/index.js";
@@ -48,6 +49,7 @@ import "@mui/x-date-pickers";
 import "@mui/lab/AdapterDateFns";
 import "./react-json-view.js";
 import "./commonjs.js";
+import "@mui_extended/BoxIcon";
 import "./react-splitter-layout.js";
 import "./node_modules.js";
 import "./react-resizable.js";

package/dist/vendor.js

@@ -29,6 +29,8 @@ import "@mui/x-date-pickers";
 import "@mui/lab/AdapterDateFns";
 import "./components/ObjectLogs/index.js";
 import "./react-json-view.js";
+import "./components/PaperForm/index.js";
+import "@mui_extended/BoxIcon";
 import "./components/PropertyValue/index.js";
 import "./components/ScrollBar/index.js";
 import "./react-splitter-layout.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.10",
+  "version": "0.0.11",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",