@orangesix/react 1.0.3 → 1.0.6

package/api/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.cjs.js.map

package/api/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/api/index.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties } from 'react';
+
+/**
+ * Define as tipagens `default` de todos os componentes do pacote
+ */
+interface ApiComponentProps {
+
+    /**
+     * Adiciona no atributo `class` do componente o valor atribuido nessa propriedade
+     */
+    className?: string
+
+    /**
+     * Define o tamanho da box do componente de acordo com o valores abaixo
+     */
+    size?: "5" | "10" | "12-5" | "15" | "17-5" | "20" | "22-5" | "25" | "30" | "33" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "100"
+
+    /**
+     * Define as propriedades css do component `style`
+     */
+    css?: CSSProperties
+}
+
+type IAPIComponentProps = ApiComponentProps;
+
+export type { IAPIComponentProps };

package/api/index.esm.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.esm.js.map

package/api/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/api/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.cjs.js",
+  "module": "./index.esm.js",
+  "types": "./index.d.ts"
+}

package/api/theme.css

@@ -0,0 +1 @@
+:root{--box-size-5: 5%;--box-size-10: 10%;--box-size-12-5: 12.5%;--box-size-15: 15%;--box-size-17-5: 17.5%;--box-size-20: 20%;--box-size-22-5: 25.5%;--box-size-25: 25%;--box-size-30: 30%;--box-size-33: 33.3333%;--box-size-35: 35%;--box-size-40: 40%;--box-size-45: 45%;--box-size-50: 50%;--box-size-55: 55%;--box-size-60: 60%;--box-size-65: 65%;--box-size-70: 70%;--box-size-75: 75%;--box-size-80: 80%;--box-size-85: 85%;--box-size-90: 90%;--box-size-95: 95%;--box-size-100: 100%}.box{display:flex;flex-wrap:wrap;position:relative}.box.box-size-5{width:calc(var(--box-size-5, 5%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-5{width:calc(100% - .5rem)}}.box.box-size-10{width:calc(var(--box-size-10, 10%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-10{width:calc(100% - .5rem)}}.box.box-size-12-5{width:calc(var(--box-size-12-5, 12.5%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-12-5{width:calc(100% - .5rem)}}.box.box-size-15{width:calc(var(--box-size-15, 15%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-15{width:calc(100% - .5rem)}}.box.box-size-17-5{width:calc(var(--box-size-17-5, 17.5%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-17-5{width:calc(100% - .5rem)}}.box.box-size-20{width:calc(var(--box-size-20, 20%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-20{width:calc(100% - .5rem)}}.box.box-size-22-5{width:calc(var(--box-size-22-5, 25.5%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-22-5{width:calc(100% - .5rem)}}.box.box-size-25{width:calc(var(--box-size-25, 25%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-25{width:calc(100% - .5rem)}}.box.box-size-30{width:calc(var(--box-size-30, 30%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-30{width:calc(100% - .5rem)}}.box.box-size-33{width:calc(var(--box-size-33, 33%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-33{width:calc(100% - .5rem)}}.box.box-size-35{width:calc(var(--box-size-35, 35%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-35{width:calc(100% - .5rem)}}.box.box-size-40{width:calc(var(--box-size-40, 40%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-40{width:calc(100% - .5rem)}}.box.box-size-45{width:calc(var(--box-size-45, 45%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-45{width:calc(100% - .5rem)}}.box.box-size-50{width:calc(var(--box-size-50, 50%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-50{width:calc(100% - .5rem)}}.box.box-size-55{width:calc(var(--box-size-55, 55%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-55{width:calc(100% - .5rem)}}.box.box-size-60{width:calc(var(--box-size-60, 60%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-60{width:calc(100% - .5rem)}}.box.box-size-65{width:calc(var(--box-size-65, 65%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-65{width:calc(100% - .5rem)}}.box.box-size-70{width:calc(var(--box-size-70, 70%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-70{width:calc(100% - .5rem)}}.box.box-size-75{width:calc(var(--box-size-75, 75%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-75{width:calc(100% - .5rem)}}.box.box-size-80{width:calc(var(--box-size-80, 80%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-80{width:calc(100% - .5rem)}}.box.box-size-85{width:calc(var(--box-size-85, 85%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-85{width:calc(100% - .5rem)}}.box.box-size-90{width:calc(var(--box-size-90, 90%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-90{width:calc(100% - .5rem)}}.box.box-size-95{width:calc(var(--box-size-95, 95%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-95{width:calc(100% - .5rem)}}.box.box-size-100{width:calc(var(--box-size-100, 100%) - .5rem);margin:.5rem calc(.5rem / 2);padding:.5rem}@media (max-width: 576px){.box.box-size-100{width:calc(100% - .5rem)}}.box.box-direction-row{flex-direction:row}.box.box-direction-column{flex-direction:column}:root{--table-frozen: #fff;--table-sort-size: 12px;--table-sort-active: #0D6EFD;--table-checkbox-size: 17px;--table-scrollbar: #e1e1e1;--table-select: var(--bs-light, #e1e1e1);--table-header: var(--bs-light, #f5f5f5);--table-footer: var(--bs-light, #f5f5f5);--table-paginator-color: var(--bs-secondary-300, #b9b9b9);--table-paginator-active: var(--bs-primary, #0D6EFD)}.table-responsive{width:100%}.table{width:100%;margin-bottom:0}.table-footer,.table-header{width:100%;display:flex;padding:0;margin:0;background:var(--table-header, #f5f5f5);border-bottom:1px solid #dee2e6}.table-footer{border-top:1px solid #dee2e6;background:var(--table-footer, #f5f5f5)}.table-sort{cursor:pointer;color:var(--bs-secondary, rgba(85,85,85,0.333333))}.table-sort svg{width:var(--table-sort-size, 12px);height:var(--table-sort-size, 12px)}.table-sort-active span[data-pc-section='sort'] svg{color:var(--bs-primary, #0D6EFD)}.table-resizable{text-overflow:ellipsis}.p-datatable .p-datatable-wrapper::-webkit-scrollbar{height:8px}.p-datatable .p-datatable-wrapper::-webkit-scrollbar-thumb{background:var(--table-scrollbar, #e1e1e1);border-radius:10px}.p-datatable .p-datatable-tbody .p-highlight{background:var(--table-select, #e1e1e1)}.p-datatable .p-datatable-tbody .p-highlight td{font-weight:bolder}.p-datatable .p-datatable-tbody .p-highlight td.p-frozen-column{background:var(--table-select, #e1e1e1)}.p-datatable .p-datatable-tbody .p-row-toggler{width:14px;height:14px;margin-left:5px}.p-datatable .p-frozen-column{position:sticky}.p-datatable .p-frozen-column[data-pc-section="bodycell"]{background:var(--table-frozen, #fff)}.p-datatable .p-checkbox-box{width:var(--table-checkbox-size, 17px);height:var(--table-checkbox-size, 17px)}.p-datatable .p-checkbox.p-highlight .p-checkbox-box{background:var(--bs-primary, #0D6EFD);border-color:var(--bs-primary, #0D6EFD)}.p-datatable .p-checkbox:has(.p-checkbox-input:hover) .p-highlight .p-checkbox-box{border-color:var(--bs-primary, #0D6EFD)}.p-datatable .p-paginator .p-paginator-first,.p-datatable .p-paginator .p-paginator-page,.p-datatable .p-paginator .p-paginator-last{font-size:.9em;min-width:28px;height:28px;color:var(--table-paginator-color, #b9b9b9)}.p-datatable .p-paginator .p-paginator-page.p-highlight{color:#fff;border:none;background:var(--table-paginator-active, #0D6EFD)}:root{--editor-border-color: #dee2e6;--editor-background: #fff;--editor-color: #555;--editor-active: var(--bs-primary, #0D6EFD);--editor-toolbar: var(--bs-light, #F6F6F6);--editor-toolbar-color: #6c757d}.p-editor-container .p-editor-toolbar{background:var(--editor-toolbar) !important}.p-editor-container .ql-snow{border-color:var(--editor-border-color, #dee2e6) !important}.p-editor-container .ql-editor{color:var(--editor-color) !important;background:var(--editor-background) !important}.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke{color:var(--editor-active) !important;stroke:var(--editor-active) !important}.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill{fill:var(--editor-active) !important}.p-editor-container .ql-fill{fill:var(--editor-toolbar-color) !important}.p-editor-container .ql-stroke{stroke:var(--editor-toolbar-color) !important}.p-editor-container .ql-picker-label{color:var(--editor-toolbar-color) !important}

package/box/_box.scss

@@ -0,0 +1,83 @@
+:root {
+  --box-size-5: 5%;
+  --box-size-10: 10%;
+  --box-size-12-5: 12.5%;
+  --box-size-15: 15%;
+  --box-size-17-5: 17.5%;
+  --box-size-20: 20%;
+  --box-size-22-5: 25.5%;
+  --box-size-25: 25%;
+  --box-size-30: 30%;
+  --box-size-33: 33.3333%;
+  --box-size-35: 35%;
+  --box-size-40: 40%;
+  --box-size-45: 45%;
+  --box-size-50: 50%;
+  --box-size-55: 55%;
+  --box-size-60: 60%;
+  --box-size-65: 65%;
+  --box-size-70: 70%;
+  --box-size-75: 75%;
+  --box-size-80: 80%;
+  --box-size-85: 85%;
+  --box-size-90: 90%;
+  --box-size-95: 95%;
+  --box-size-100: 100%;
+}
+
+$box-sizes: (
+        '5': 5%,
+        '10': 10%,
+        '12-5':12.5%,
+        '15': 15%,
+        '17-5':17.5%,
+        '20': 20%,
+        '22-5':25.5%,
+        '25': 25%,
+        '30': 30%,
+        '33': 33%,
+        '35': 35%,
+        '40': 40%,
+        '45': 45%,
+        '50': 50%,
+        '55': 55%,
+        '60': 60%,
+        '65': 65%,
+        '70': 70%,
+        '75': 75%,
+        '80': 80%,
+        '85': 85%,
+        '90': 90%,
+        '95': 95%,
+        '100': 100%
+) !default;
+
+$box-space-margin: .5rem !default;
+$box-space-padding: .5rem !default;
+
+.box {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+
+  @each $key, $value in $box-sizes {
+    &.box-size-#{$key} {
+      width: calc(var(--box-size-#{$key}, #{$value}) - #{$box-space-margin});
+      margin: #{$box-space-margin} calc(#{$box-space-margin} / 2);
+      padding: #{$box-space-padding};
+
+      @media (max-width: 576px) {
+        width: calc(100% - #{$box-space-margin});
+      }
+    }
+  }
+
+  &.box-direction-row {
+    flex-direction: row;
+  }
+
+  &.box-direction-column {
+    flex-direction: column;
+  }
+}
+

package/box/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var i=require("react"),e=require("primereact/utils");exports.Box=({children:r,...s})=>{const t={size:`box-size-${s.size??"100"}`,direction:`box-direction-${s.direction??"row"}`,justify:void 0===s.justify?"":Array.isArray(s.justify)?s.justify?.join(" "):s.justify,align:void 0===s.align?"":Array.isArray(s.align)?s.align?.join(" "):s.align},a={className:e.classNames(["box",s.className??"",t.size,t.direction,t.justify,t.align]),style:s.css};return i.createElement("div",{...a},r)};
+//# sourceMappingURL=index.cjs.js.map

package/box/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../src/box/box.tsx"],"sourcesContent":["import { BoxProps } from \"./types\";\r\nimport React, { HTMLAttributes } from \"react\";\r\nimport { classNames } from \"primereact/utils\";\r\n\r\n/**\r\n * Componente - `Box`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar seções ou caixas em uma página.\r\n * Permite personalizar o estilo e o conteúdo através de propriedades.\r\n *\r\n * Exemplo de uso:\r\n * ```tsx\r\n * <Box align=\"align-items-center\"\r\n *      justify=\"justify-content-end\"\r\n *      size=\"25\">\r\n *   ...conteúdo HTML\r\n * </Box>\r\n * ```\r\n */\r\nexport const Box = ({ children, ...props }: BoxProps) => {\r\n    const css = {\r\n        size: `box-size-${(props.size ?? \"100\")}`,\r\n        direction: `box-direction-${props.direction ?? \"row\"}`,\r\n        justify: props.justify === undefined ? \"\" : Array.isArray(props.justify) ? props.justify?.join(\" \") : props.justify,\r\n        align: props.align === undefined ? \"\" : Array.isArray(props.align) ? props.align?.join(\" \") : props.align\r\n    };\r\n\r\n    const attr: HTMLAttributes<\"div\"> & Omit<BoxProps, \"children\"> = {\r\n        className: classNames([\r\n            \"box\",\r\n            props.className ?? \"\",\r\n            css.size,\r\n            css.direction,\r\n            css.justify,\r\n            css.align\r\n        ]),\r\n        style: props.css\r\n    };\r\n\r\n    return (\r\n        <div {...attr as any}>{children}</div>\r\n    );\r\n};"],"names":["children","props","css","size","direction","justify","undefined","Array","isArray","join","align","attr","className","classNames","style","React","createElement"],"mappings":"8EAmBmB,EAAGA,cAAaC,MAC/B,MAAMC,EAAM,CACRC,KAAM,YAAaF,EAAME,MAAQ,QACjCC,UAAW,iBAAiBH,EAAMG,WAAa,QAC/CC,aAA2BC,IAAlBL,EAAMI,QAAwB,GAAKE,MAAMC,QAAQP,EAAMI,SAAWJ,EAAMI,SAASI,KAAK,KAAOR,EAAMI,QAC5GK,WAAuBJ,IAAhBL,EAAMS,MAAsB,GAAKH,MAAMC,QAAQP,EAAMS,OAAST,EAAMS,OAAOD,KAAK,KAAOR,EAAMS,OAGlGC,EAA2D,CAC7DC,UAAWC,EAAAA,WAAW,CAClB,MACAZ,EAAMW,WAAa,GACnBV,EAAIC,KACJD,EAAIE,UACJF,EAAIG,QACJH,EAAIQ,QAERI,MAAOb,EAAMC,KAGjB,OACIa,EAASC,cAAA,MAAA,IAAAL,GAAcX,EACzB"}

package/box/index.d.ts

@@ -0,0 +1,147 @@
+import React, { CSSProperties } from 'react';
+
+/**
+ * Realiza o mapeamento dos valores da propriedades css `align-items`
+ */
+type AlignItemsProps =
+    | "align-items-start"
+    | "align-items-end"
+    | "align-items-center"
+    | "align-items-baseline"
+    | "align-items-stretch"
+    | "align-items-sm-start"
+    | "align-items-sm-end"
+    | "align-items-sm-center"
+    | "align-items-sm-baseline"
+    | "align-items-sm-stretch"
+    | "align-items-md-start"
+    | "align-items-md-end"
+    | "align-items-md-center"
+    | "align-items-md-baseline"
+    | "align-items-md-stretch"
+    | "align-items-lg-start"
+    | "align-items-lg-end"
+    | "align-items-lg-center"
+    | "align-items-lg-baseline"
+    | "align-items-lg-stretch"
+    | "align-items-xl-start"
+    | "align-items-xl-end"
+    | "align-items-xl-center"
+    | "align-items-xl-baseline"
+    | "align-items-xl-stretch"
+    | "align-items-xxl-start"
+    | "align-items-xxl-end"
+    | "align-items-xxl-center"
+    | "align-items-xxl-baseline"
+    | "align-items-xxl-stretch"
+
+/**
+ * Realiza o mapeamento dos valores da propriedades css `justify-content`
+ */
+type JustifyContentProps =
+    | "justify-content-start"
+    | "justify-content-end"
+    | "justify-content-center"
+    | "justify-content-between"
+    | "justify-content-around"
+    | "justify-content-evenly"
+    | "justify-content-sm-start"
+    | "justify-content-sm-end"
+    | "justify-content-sm-center"
+    | "justify-content-sm-between"
+    | "justify-content-sm-around"
+    | "justify-content-sm-evenly"
+    | "justify-content-md-start"
+    | "justify-content-md-end"
+    | "justify-content-md-center"
+    | "justify-content-md-between"
+    | "justify-content-md-around"
+    | "justify-content-md-evenly"
+    | "justify-content-lg-start"
+    | "justify-content-lg-end"
+    | "justify-content-lg-center"
+    | "justify-content-lg-between"
+    | "justify-content-lg-around"
+    | "justify-content-lg-evenly"
+    | "justify-content-xl-start"
+    | "justify-content-xl-end"
+    | "justify-content-xl-center"
+    | "justify-content-xl-between"
+    | "justify-content-xl-around"
+    | "justify-content-xl-evenly"
+    | "justify-content-xxl-start"
+    | "justify-content-xxl-end"
+    | "justify-content-xxl-center"
+    | "justify-content-xxl-between"
+    | "justify-content-xxl-around"
+    | "justify-content-xxl-evenly"
+
+/**
+ * Define as tipagens `default` de todos os componentes do pacote
+ */
+interface ApiComponentProps {
+
+    /**
+     * Adiciona no atributo `class` do componente o valor atribuido nessa propriedade
+     */
+    className?: string
+
+    /**
+     * Define o tamanho da box do componente de acordo com o valores abaixo
+     */
+    size?: "5" | "10" | "12-5" | "15" | "17-5" | "20" | "22-5" | "25" | "30" | "33" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "100"
+
+    /**
+     * Define as propriedades css do component `style`
+     */
+    css?: CSSProperties
+}
+
+interface BoxProps extends ApiComponentProps {
+
+    /**
+     * A propriedade `direction` determina o valor do estilo CSS `flex-direction`,
+     * definindo a direção em que os itens flexíveis são dispostos dentro de um contêiner flexível.
+     */
+    direction?: "row" | "column"
+
+    /**
+     * A propriedade `align` determina o alinhamento do conteúdo base na propriedade `direction`.
+     * Essa propriedade ajusta os estilos CSS `align-items`, permitindo um controle preciso do layout.
+     */
+    align?: AlignItemsProps | AlignItemsProps[]
+
+    /**
+     * A propriedade `justify` determina o alinhamento do conteúdo base na propriedade `direction`.
+     * Essa propriedade ajusta os estilos CSS `justify-content`, permitindo um controle preciso do layout.
+     */
+    justify?: JustifyContentProps | JustifyContentProps[]
+
+    /**
+     *  A propriedade `children` representa o conteúdo ou elementos filho que serão
+     *  renderizados dentro deste componente. Pode incluir texto, elementos React,
+     *  ou até mesmo outros componentes.
+     */
+    children: React.ReactNode
+}
+
+/**
+ * Componente - `Box`
+ *
+ * Um componente versátil que pode ser utilizado para criar seções ou caixas em uma página.
+ * Permite personalizar o estilo e o conteúdo através de propriedades.
+ *
+ * Exemplo de uso:
+ * ```tsx
+ * <Box align="align-items-center"
+ *      justify="justify-content-end"
+ *      size="25">
+ *   ...conteúdo HTML
+ * </Box>
+ * ```
+ */
+declare const Box: ({ children, ...props }: BoxProps) => React.JSX.Element;
+
+type IBoxProps = BoxProps;
+
+export { Box, type IBoxProps };

package/box/index.esm.js

@@ -0,0 +1,2 @@
+import i from"react";import{classNames as r}from"primereact/utils";const s=({children:s,...t})=>{const e={size:`box-size-${t.size??"100"}`,direction:`box-direction-${t.direction??"row"}`,justify:void 0===t.justify?"":Array.isArray(t.justify)?t.justify?.join(" "):t.justify,align:void 0===t.align?"":Array.isArray(t.align)?t.align?.join(" "):t.align},o={className:r(["box",t.className??"",e.size,e.direction,e.justify,e.align]),style:t.css};return i.createElement("div",{...o},s)};export{s as Box};
+//# sourceMappingURL=index.esm.js.map

package/box/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../src/box/box.tsx"],"sourcesContent":["import { BoxProps } from \"./types\";\r\nimport React, { HTMLAttributes } from \"react\";\r\nimport { classNames } from \"primereact/utils\";\r\n\r\n/**\r\n * Componente - `Box`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar seções ou caixas em uma página.\r\n * Permite personalizar o estilo e o conteúdo através de propriedades.\r\n *\r\n * Exemplo de uso:\r\n * ```tsx\r\n * <Box align=\"align-items-center\"\r\n *      justify=\"justify-content-end\"\r\n *      size=\"25\">\r\n *   ...conteúdo HTML\r\n * </Box>\r\n * ```\r\n */\r\nexport const Box = ({ children, ...props }: BoxProps) => {\r\n    const css = {\r\n        size: `box-size-${(props.size ?? \"100\")}`,\r\n        direction: `box-direction-${props.direction ?? \"row\"}`,\r\n        justify: props.justify === undefined ? \"\" : Array.isArray(props.justify) ? props.justify?.join(\" \") : props.justify,\r\n        align: props.align === undefined ? \"\" : Array.isArray(props.align) ? props.align?.join(\" \") : props.align\r\n    };\r\n\r\n    const attr: HTMLAttributes<\"div\"> & Omit<BoxProps, \"children\"> = {\r\n        className: classNames([\r\n            \"box\",\r\n            props.className ?? \"\",\r\n            css.size,\r\n            css.direction,\r\n            css.justify,\r\n            css.align\r\n        ]),\r\n        style: props.css\r\n    };\r\n\r\n    return (\r\n        <div {...attr as any}>{children}</div>\r\n    );\r\n};"],"names":["Box","children","props","css","size","direction","justify","undefined","Array","isArray","join","align","attr","className","classNames","style","React","createElement"],"mappings":"mEAmBO,MAAMA,EAAM,EAAGC,cAAaC,MAC/B,MAAMC,EAAM,CACRC,KAAM,YAAaF,EAAME,MAAQ,QACjCC,UAAW,iBAAiBH,EAAMG,WAAa,QAC/CC,aAA2BC,IAAlBL,EAAMI,QAAwB,GAAKE,MAAMC,QAAQP,EAAMI,SAAWJ,EAAMI,SAASI,KAAK,KAAOR,EAAMI,QAC5GK,WAAuBJ,IAAhBL,EAAMS,MAAsB,GAAKH,MAAMC,QAAQP,EAAMS,OAAST,EAAMS,OAAOD,KAAK,KAAOR,EAAMS,OAGlGC,EAA2D,CAC7DC,UAAWC,EAAW,CAClB,MACAZ,EAAMW,WAAa,GACnBV,EAAIC,KACJD,EAAIE,UACJF,EAAIG,QACJH,EAAIQ,QAERI,MAAOb,EAAMC,KAGjB,OACIa,EAASC,cAAA,MAAA,IAAAL,GAAcX,EACzB"}

package/box/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.cjs.js",
+  "module": "./index.esm.js",
+  "types": "./index.d.ts"
+}

package/editor/_editor.scss

@@ -0,0 +1,53 @@
+$input-bg: #fff !default;
+$input-color: #555 !default;
+$input-border-color: #dee2e6 !default;
+
+:root {
+  --editor-border-color: #{$input-border-color};
+  --editor-background: #{$input-bg};
+  --editor-color: #{$input-color};
+  --editor-active: var(--bs-primary, #0D6EFD);
+  --editor-toolbar: var(--bs-light, #F6F6F6);
+  --editor-toolbar-color: #6c757d;
+}
+
+.p-editor-container {
+
+  .p-editor-toolbar {
+    background: var(--editor-toolbar) !important;
+  }
+
+  .ql-snow {
+    border-color: var(--editor-border-color, #{$input-border-color}) !important;
+  }
+
+  //Altera a cor de fundo do palco e cor da fonte
+  .ql-editor {
+    color: var(--editor-color) !important;
+    background: var(--editor-background) !important;
+  }
+
+  //Modifica a cor das opções ativas
+  .ql-snow.ql-toolbar button.ql-active {
+    .ql-stroke {
+      color: var(--editor-active) !important;
+      stroke: var(--editor-active) !important;
+    }
+
+    .ql-fill {
+      fill: var(--editor-active) !important;
+    }
+  }
+
+  .ql-fill {
+    fill: var(--editor-toolbar-color) !important;
+  }
+
+  .ql-stroke {
+    stroke: var(--editor-toolbar-color) !important;
+  }
+
+  .ql-picker-label {
+    color: var(--editor-toolbar-color) !important;
+  }
+}

package/editor/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),a=require("primereact/utils"),i=require("primereact/editor");const t=({children:i,...t})=>{const l={size:`box-size-${t.size??"100"}`,direction:`box-direction-${t.direction??"row"}`,justify:void 0===t.justify?"":Array.isArray(t.justify)?t.justify?.join(" "):t.justify,align:void 0===t.align?"":Array.isArray(t.align)?t.align?.join(" "):t.align},r={className:a.classNames(["box",t.className??"",l.size,l.direction,l.justify,l.align]),style:t.css};return e.createElement("div",{...r},i)};exports.Editor=({iconPrefix:a="bi bi-",module:l="complete",...r})=>e.createElement(t,{className:"p-0",size:r.size??"100"},r.label&&e.createElement("label",{className:"form-label"},r.icon&&e.createElement("i",{className:a+r.icon+" me-1"}),r.label,r.required&&e.createElement("span",{className:"text-danger"},"*")),e.createElement(i.Editor,{className:"w-100 "+(r.className??""),headerTemplate:"basic"===l?e.createElement("span",{className:"ql-formats"},e.createElement("button",{className:"ql-bold"}),e.createElement("button",{className:"ql-italic"}),e.createElement("button",{className:"ql-underline"})):void 0,name:r.name,placeholder:r.placeholder??"Digite o texto...",readOnly:r.disabled??!1,required:r.required,style:r.css,value:r.value,onTextChange:e=>r.onChange(e.htmlValue)}));
+//# sourceMappingURL=index.cjs.js.map

package/editor/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../src/box/box.tsx","../../src/editor/editor.tsx"],"sourcesContent":["import { BoxProps } from \"./types\";\r\nimport React, { HTMLAttributes } from \"react\";\r\nimport { classNames } from \"primereact/utils\";\r\n\r\n/**\r\n * Componente - `Box`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar seções ou caixas em uma página.\r\n * Permite personalizar o estilo e o conteúdo através de propriedades.\r\n *\r\n * Exemplo de uso:\r\n * ```tsx\r\n * <Box align=\"align-items-center\"\r\n *      justify=\"justify-content-end\"\r\n *      size=\"25\">\r\n *   ...conteúdo HTML\r\n * </Box>\r\n * ```\r\n */\r\nexport const Box = ({ children, ...props }: BoxProps) => {\r\n    const css = {\r\n        size: `box-size-${(props.size ?? \"100\")}`,\r\n        direction: `box-direction-${props.direction ?? \"row\"}`,\r\n        justify: props.justify === undefined ? \"\" : Array.isArray(props.justify) ? props.justify?.join(\" \") : props.justify,\r\n        align: props.align === undefined ? \"\" : Array.isArray(props.align) ? props.align?.join(\" \") : props.align\r\n    };\r\n\r\n    const attr: HTMLAttributes<\"div\"> & Omit<BoxProps, \"children\"> = {\r\n        className: classNames([\r\n            \"box\",\r\n            props.className ?? \"\",\r\n            css.size,\r\n            css.direction,\r\n            css.justify,\r\n            css.align\r\n        ]),\r\n        style: props.css\r\n    };\r\n\r\n    return (\r\n        <div {...attr as any}>{children}</div>\r\n    );\r\n};","import React from \"react\";\r\nimport { Box } from \"../box\";\r\nimport { EditorProps } from \"./types\";\r\nimport { Editor as PrimeEditor } from \"primereact/editor\";\r\n\r\n/**\r\n * Componente - `Editor`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar um palco de edição de texto.\r\n */\r\nexport const Editor = ({ iconPrefix = \"bi bi-\", module = \"complete\", ...props }: EditorProps) => {\r\n\r\n    //Realiza a configuração do módulo básico do editor\r\n    const moduleBasic = () => {\r\n        return (\r\n            <span className=\"ql-formats\">\r\n                <button className=\"ql-bold\"></button>\r\n                <button className=\"ql-italic\"></button>\r\n                <button className=\"ql-underline\"></button>\r\n            </span>\r\n        );\r\n    };\r\n\r\n    /*\r\n    |------------------------------------------\r\n    | render() - Renderização do componente\r\n    |------------------------------------------\r\n    */\r\n    return (\r\n        <Box className=\"p-0\"\r\n             size={props.size ?? \"100\"}>\r\n            {props.label\r\n                && <label className=\"form-label\">\r\n                    {props.icon && <i className={(iconPrefix + props.icon) + \" me-1\"}/>}\r\n                    {props.label}\r\n                    {props.required && <span className=\"text-danger\">*</span>}\r\n                </label>}\r\n            <PrimeEditor className={\"w-100 \" + (props.className ?? \"\")}\r\n                         headerTemplate={module === \"basic\" ? moduleBasic() : undefined}\r\n                         name={props.name}\r\n                         placeholder={props.placeholder ?? \"Digite o texto...\"}\r\n                         readOnly={props.disabled ?? false}\r\n                         required={props.required}\r\n                         style={props.css}\r\n                         value={props.value}\r\n                         onTextChange={(e: any) => props.onChange(e.htmlValue)}/>\r\n        </Box>\r\n    );\r\n};"],"names":["Box","children","props","css","size","direction","justify","undefined","Array","isArray","join","align","attr","className","classNames","style","React","createElement","iconPrefix","module","label","icon","required","PrimeEditor","Editor","headerTemplate","name","placeholder","readOnly","disabled","value","onTextChange","e","onChange","htmlValue"],"mappings":"iGAmBO,MAAMA,EAAM,EAAGC,cAAaC,MAC/B,MAAMC,EAAM,CACRC,KAAM,YAAaF,EAAME,MAAQ,QACjCC,UAAW,iBAAiBH,EAAMG,WAAa,QAC/CC,aAA2BC,IAAlBL,EAAMI,QAAwB,GAAKE,MAAMC,QAAQP,EAAMI,SAAWJ,EAAMI,SAASI,KAAK,KAAOR,EAAMI,QAC5GK,WAAuBJ,IAAhBL,EAAMS,MAAsB,GAAKH,MAAMC,QAAQP,EAAMS,OAAST,EAAMS,OAAOD,KAAK,KAAOR,EAAMS,OAGlGC,EAA2D,CAC7DC,UAAWC,EAAAA,WAAW,CAClB,MACAZ,EAAMW,WAAa,GACnBV,EAAIC,KACJD,EAAIE,UACJF,EAAIG,QACJH,EAAIQ,QAERI,MAAOb,EAAMC,KAGjB,OACIa,EAASC,cAAA,MAAA,IAAAL,GAAcX,EACzB,iBC/BgB,EAAGiB,aAAa,SAAUC,SAAS,cAAejB,KAmBhEc,EAAAC,cAACjB,EAAG,CAACa,UAAU,MACVT,KAAMF,EAAME,MAAQ,OACpBF,EAAMkB,OACAJ,EAAOC,cAAA,QAAA,CAAAJ,UAAU,cACfX,EAAMmB,MAAQL,EAAAC,cAAA,IAAA,CAAGJ,UAAYK,EAAahB,EAAMmB,KAAQ,UACxDnB,EAAMkB,MACNlB,EAAMoB,UAAYN,EAAAC,cAAA,OAAA,CAAMJ,UAAU,qBAE3CG,EAAAC,cAACM,EAAWC,OAAC,CAAAX,UAAW,UAAYX,EAAMW,WAAa,IAC1CY,eAA2B,UAAXN,EAvB7BH,EAAAC,cAAA,OAAA,CAAMJ,UAAU,cACZG,EAAQC,cAAA,SAAA,CAAAJ,UAAU,YAClBG,EAAQC,cAAA,SAAA,CAAAJ,UAAU,cAClBG,EAAAC,cAAA,SAAA,CAAQJ,UAAU,uBAoB4CN,EACrDmB,KAAMxB,EAAMwB,KACZC,YAAazB,EAAMyB,aAAe,oBAClCC,SAAU1B,EAAM2B,WAAY,EAC5BP,SAAUpB,EAAMoB,SAChBP,MAAOb,EAAMC,IACb2B,MAAO5B,EAAM4B,MACbC,aAAeC,GAAW9B,EAAM+B,SAASD,EAAEE"}

package/editor/index.d.ts

@@ -0,0 +1,92 @@
+import React, { CSSProperties } from 'react';
+
+/**
+ * Define as tipagens `default` de todos os componentes do pacote
+ */
+interface ApiComponentProps {
+
+    /**
+     * Adiciona no atributo `class` do componente o valor atribuido nessa propriedade
+     */
+    className?: string
+
+    /**
+     * Define o tamanho da box do componente de acordo com o valores abaixo
+     */
+    size?: "5" | "10" | "12-5" | "15" | "17-5" | "20" | "22-5" | "25" | "30" | "33" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "100"
+
+    /**
+     * Define as propriedades css do component `style`
+     */
+    css?: CSSProperties
+}
+
+/**
+ * Define as tipagens ´default´ de tidos os componente de entrada de dados do pacote
+ */
+interface ApiFieldComponentProps {
+
+    /**
+     * Define o nome do campo
+     */
+    name?: string
+
+    /**
+     * Define o rótulo do campo
+     */
+    label?: string
+
+    /**
+     * Define o espaço reservador do campo
+     */
+    placeholder?: string
+
+    /**
+     * Define o icone do campo
+     */
+    icon?: string
+
+    /**
+     * Define o prefixo dos icones do pacote
+     */
+    iconPrefix?: "bi bi-" | "pi pi-"
+
+    /**
+     * Define se campo é obrigatório
+     */
+    required?: boolean
+
+    /**
+     * Desabilita a entrada de dados no campo
+     */
+    disabled?: boolean
+}
+
+interface EditorProps extends ApiComponentProps, ApiFieldComponentProps {
+
+    /**
+     * Define o valor de entrada do campo
+     */
+    value: any
+
+    /**
+     * Atualiza state com valor digitado no campo
+     */
+    onChange(value: any): void
+
+    /**
+     * Define o tipo de editor de texto que será renderizado
+     */
+    module?: "basic" | "complete"
+}
+
+/**
+ * Componente - `Editor`
+ *
+ * Um componente versátil que pode ser utilizado para criar um palco de edição de texto.
+ */
+declare const Editor: ({ iconPrefix, module, ...props }: EditorProps) => React.JSX.Element;
+
+type IEditorProps = EditorProps;
+
+export { Editor, type IEditorProps };

package/editor/index.esm.js

@@ -0,0 +1,2 @@
+import e from"react";import{classNames as a}from"primereact/utils";import{Editor as t}from"primereact/editor";const i=({children:t,...i})=>{const l={size:`box-size-${i.size??"100"}`,direction:`box-direction-${i.direction??"row"}`,justify:void 0===i.justify?"":Array.isArray(i.justify)?i.justify?.join(" "):i.justify,align:void 0===i.align?"":Array.isArray(i.align)?i.align?.join(" "):i.align},r={className:a(["box",i.className??"",l.size,l.direction,l.justify,l.align]),style:i.css};return e.createElement("div",{...r},t)},l=({iconPrefix:a="bi bi-",module:l="complete",...r})=>e.createElement(i,{className:"p-0",size:r.size??"100"},r.label&&e.createElement("label",{className:"form-label"},r.icon&&e.createElement("i",{className:a+r.icon+" me-1"}),r.label,r.required&&e.createElement("span",{className:"text-danger"},"*")),e.createElement(t,{className:"w-100 "+(r.className??""),headerTemplate:"basic"===l?e.createElement("span",{className:"ql-formats"},e.createElement("button",{className:"ql-bold"}),e.createElement("button",{className:"ql-italic"}),e.createElement("button",{className:"ql-underline"})):void 0,name:r.name,placeholder:r.placeholder??"Digite o texto...",readOnly:r.disabled??!1,required:r.required,style:r.css,value:r.value,onTextChange:e=>r.onChange(e.htmlValue)}));export{l as Editor};
+//# sourceMappingURL=index.esm.js.map

package/editor/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../src/box/box.tsx","../../src/editor/editor.tsx"],"sourcesContent":["import { BoxProps } from \"./types\";\r\nimport React, { HTMLAttributes } from \"react\";\r\nimport { classNames } from \"primereact/utils\";\r\n\r\n/**\r\n * Componente - `Box`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar seções ou caixas em uma página.\r\n * Permite personalizar o estilo e o conteúdo através de propriedades.\r\n *\r\n * Exemplo de uso:\r\n * ```tsx\r\n * <Box align=\"align-items-center\"\r\n *      justify=\"justify-content-end\"\r\n *      size=\"25\">\r\n *   ...conteúdo HTML\r\n * </Box>\r\n * ```\r\n */\r\nexport const Box = ({ children, ...props }: BoxProps) => {\r\n    const css = {\r\n        size: `box-size-${(props.size ?? \"100\")}`,\r\n        direction: `box-direction-${props.direction ?? \"row\"}`,\r\n        justify: props.justify === undefined ? \"\" : Array.isArray(props.justify) ? props.justify?.join(\" \") : props.justify,\r\n        align: props.align === undefined ? \"\" : Array.isArray(props.align) ? props.align?.join(\" \") : props.align\r\n    };\r\n\r\n    const attr: HTMLAttributes<\"div\"> & Omit<BoxProps, \"children\"> = {\r\n        className: classNames([\r\n            \"box\",\r\n            props.className ?? \"\",\r\n            css.size,\r\n            css.direction,\r\n            css.justify,\r\n            css.align\r\n        ]),\r\n        style: props.css\r\n    };\r\n\r\n    return (\r\n        <div {...attr as any}>{children}</div>\r\n    );\r\n};","import React from \"react\";\r\nimport { Box } from \"../box\";\r\nimport { EditorProps } from \"./types\";\r\nimport { Editor as PrimeEditor } from \"primereact/editor\";\r\n\r\n/**\r\n * Componente - `Editor`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar um palco de edição de texto.\r\n */\r\nexport const Editor = ({ iconPrefix = \"bi bi-\", module = \"complete\", ...props }: EditorProps) => {\r\n\r\n    //Realiza a configuração do módulo básico do editor\r\n    const moduleBasic = () => {\r\n        return (\r\n            <span className=\"ql-formats\">\r\n                <button className=\"ql-bold\"></button>\r\n                <button className=\"ql-italic\"></button>\r\n                <button className=\"ql-underline\"></button>\r\n            </span>\r\n        );\r\n    };\r\n\r\n    /*\r\n    |------------------------------------------\r\n    | render() - Renderização do componente\r\n    |------------------------------------------\r\n    */\r\n    return (\r\n        <Box className=\"p-0\"\r\n             size={props.size ?? \"100\"}>\r\n            {props.label\r\n                && <label className=\"form-label\">\r\n                    {props.icon && <i className={(iconPrefix + props.icon) + \" me-1\"}/>}\r\n                    {props.label}\r\n                    {props.required && <span className=\"text-danger\">*</span>}\r\n                </label>}\r\n            <PrimeEditor className={\"w-100 \" + (props.className ?? \"\")}\r\n                         headerTemplate={module === \"basic\" ? moduleBasic() : undefined}\r\n                         name={props.name}\r\n                         placeholder={props.placeholder ?? \"Digite o texto...\"}\r\n                         readOnly={props.disabled ?? false}\r\n                         required={props.required}\r\n                         style={props.css}\r\n                         value={props.value}\r\n                         onTextChange={(e: any) => props.onChange(e.htmlValue)}/>\r\n        </Box>\r\n    );\r\n};"],"names":["Box","children","props","css","size","direction","justify","undefined","Array","isArray","join","align","attr","className","classNames","style","React","createElement","Editor","iconPrefix","module","label","icon","required","PrimeEditor","headerTemplate","name","placeholder","readOnly","disabled","value","onTextChange","e","onChange","htmlValue"],"mappings":"8GAmBO,MAAMA,EAAM,EAAGC,cAAaC,MAC/B,MAAMC,EAAM,CACRC,KAAM,YAAaF,EAAME,MAAQ,QACjCC,UAAW,iBAAiBH,EAAMG,WAAa,QAC/CC,aAA2BC,IAAlBL,EAAMI,QAAwB,GAAKE,MAAMC,QAAQP,EAAMI,SAAWJ,EAAMI,SAASI,KAAK,KAAOR,EAAMI,QAC5GK,WAAuBJ,IAAhBL,EAAMS,MAAsB,GAAKH,MAAMC,QAAQP,EAAMS,OAAST,EAAMS,OAAOD,KAAK,KAAOR,EAAMS,OAGlGC,EAA2D,CAC7DC,UAAWC,EAAW,CAClB,MACAZ,EAAMW,WAAa,GACnBV,EAAIC,KACJD,EAAIE,UACJF,EAAIG,QACJH,EAAIQ,QAERI,MAAOb,EAAMC,KAGjB,OACIa,EAASC,cAAA,MAAA,IAAAL,GAAcX,EACzB,EC/BOiB,EAAS,EAAGC,aAAa,SAAUC,SAAS,cAAelB,KAmBhEc,EAAAC,cAACjB,EAAG,CAACa,UAAU,MACVT,KAAMF,EAAME,MAAQ,OACpBF,EAAMmB,OACAL,EAAOC,cAAA,QAAA,CAAAJ,UAAU,cACfX,EAAMoB,MAAQN,EAAAC,cAAA,IAAA,CAAGJ,UAAYM,EAAajB,EAAMoB,KAAQ,UACxDpB,EAAMmB,MACNnB,EAAMqB,UAAYP,EAAAC,cAAA,OAAA,CAAMJ,UAAU,qBAE3CG,EAAAC,cAACO,EAAY,CAAAX,UAAW,UAAYX,EAAMW,WAAa,IAC1CY,eAA2B,UAAXL,EAvB7BJ,EAAAC,cAAA,OAAA,CAAMJ,UAAU,cACZG,EAAQC,cAAA,SAAA,CAAAJ,UAAU,YAClBG,EAAQC,cAAA,SAAA,CAAAJ,UAAU,cAClBG,EAAAC,cAAA,SAAA,CAAQJ,UAAU,uBAoB4CN,EACrDmB,KAAMxB,EAAMwB,KACZC,YAAazB,EAAMyB,aAAe,oBAClCC,SAAU1B,EAAM2B,WAAY,EAC5BN,SAAUrB,EAAMqB,SAChBR,MAAOb,EAAMC,IACb2B,MAAO5B,EAAM4B,MACbC,aAAeC,GAAW9B,EAAM+B,SAASD,EAAEE"}

package/editor/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.cjs.js",
+  "module": "./index.esm.js",
+  "types": "./index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
         "name": "@orangesix/react",
-        "version": "1.0.3",
+        "version": "1.0.6",
         "private": false,
         "author": "Luiz Fernando Bernardes de Paula",
         "description": "Set of components and functions available to be used in a React project.",
@@ -13,19 +13,23 @@
             "url": "https://github.com/Nandovga/orangesix-react/issues"
         },
         "keywords": [
-            "react",
-            "primereact",
-            "ui-kit",
-            "ui library",
-            "component library"
-        ],
+  "react",
+  "ui-kit",
+  "ui library",
+  "primereact",
+  "component library"
+],
         "dependencies": {
-            "axios": "^1.7.2",
-            "jquery": "^3.7.1",
-            "node-snackbar": "^0.1.16",
-            "primereact": "^10.6.6",
-            "react": "^18.0.0",
-            "react-dom": "^18.0.0",
-            "sweetalert2": "^11.11.0"
-        }
+  "axios": "^1.7.2",
+  "bootstrap": "^5.3.3",
+  "bootstrap-icons": "^1.11.3",
+  "jquery": "^3.7.1",
+  "node-snackbar": "^0.1.16",
+  "primeicons": "^7.0.0",
+  "primereact": "^10.8.2",
+  "quill": "^2.0.2",
+  "react": "^18.3.1",
+  "react-dom": "^18.3.1",
+  "sweetalert2": "^11.12.3"
+}
     }