@mlw-packages/react-components 1.3.4 → 1.3.6

package/README.md

@@ -1,50 +1,53 @@
-# React + TypeScript + Vite
+# @malwee/react-components
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Uma biblioteca de componentes React reutilizáveis para acelerar o desenvolvimento de aplicações web com design consistente, acessível e moderno.
 
-Currently, two official plugins are available:
+## Instalação
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
+```bash
+npm install @malwee/react-components
+# ou
+yarn add @malwee/react-components
+```
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+## Uso Básico
 
-- Configure the top-level `parserOptions` property like this:
+```tsx
+import { ButtonBase, CardBase } from '@malwee/react-components';
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+function App() {
+  return (
+    <CardBase>
+      <ButtonBase>Meu botão</ButtonBase>
+    </CardBase>
+  );
+}
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+## Componentes Disponíveis
+
+- Botões (`ButtonBase`)
+- Cartões (`CardBase`)
+- Inputs, Selects, Combobox, Checkbox, Switch, Tabs, Table, Tooltip, Dialog, Drawer, Sidebar, Avatar, Calendar, Carousel, Progress, Skeleton, Sonner, e outros.
+
+Veja a lista completa na pasta `src/components/ui` ou exemplos em `src/pages`.
+
+## Estilos
+
+Os componentes utilizam Tailwind CSS. Certifique-se de que seu projeto está configurado para usar Tailwind. Importe o CSS global:
+
+```tsx
+import '@malwee/react-components/style/global.css';
 ```
+
+## Documentação
+
+Consulte exemplos de uso e documentação dos componentes na pasta `src/pages`.
+
+## Contribuição
+
+Contribuições são bem-vindas! Abra uma issue ou envie um pull request.
+
+## Licença
+
+MIT

package/dist/index.js

@@ -1047,7 +1047,6 @@ var import_phosphor_react6 = require("phosphor-react");
 var React10 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_phosphor_react5 = require("phosphor-react");
-var import_framer_motion = require("framer-motion");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var DropDownMenuBase = DropdownMenuPrimitive.Root;
 var DropDownMenuTriggerBase = DropdownMenuPrimitive.Trigger;
@@ -1084,30 +1083,19 @@ var DropDownMenuSubContentBase = React10.forwardRef(({ className, ...props }, re
   }
 ));
 DropDownMenuSubContentBase.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropDownMenuContentBase = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_framer_motion.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var DropDownMenuContentBase = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   DropdownMenuPrimitive.Content,
   {
-    asChild: true,
     sideOffset,
-    forceMount: true,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      className
+    ),
     ref,
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_framer_motion.motion.div,
-      {
-        initial: { opacity: 0, scale: 0.95, y: 5 },
-        animate: { opacity: 1, scale: 1, y: 0 },
-        exit: { opacity: 0, scale: 0.95, y: 5 },
-        transition: { duration: 0.2, ease: "easeOut" },
-        className: cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          className
-        ),
-        children: props.children
-      }
-    )
+    children: props.children
   }
-) }) }));
+) }));
 DropDownMenuContentBase.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropDownMenuItemBase = React10.forwardRef(({ className, inset, leftIcon, rightIcon, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
   DropdownMenuPrimitive.Item,
@@ -1304,7 +1292,7 @@ var import_react5 = require("react");
 var React11 = __toESM(require("react"));
 var import_cmdk = require("cmdk");
 var import_phosphor_react7 = require("phosphor-react");
-var import_framer_motion2 = require("framer-motion");
+var import_framer_motion = require("framer-motion");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var CommandBase = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   import_cmdk.Command,
@@ -1324,8 +1312,8 @@ var dialogVariants = {
   exit: { opacity: 0, scale: 0.95, y: -20 }
 };
 var CommandDialogBase = ({ children, open, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogBase, { open, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_framer_motion2.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogContentBase, { asChild: true, forceMount: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_framer_motion2.motion.div,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogBase, { open, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DialogContentBase, { asChild: true, forceMount: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_framer_motion.motion.div,
     {
       initial: "hidden",
       animate: "visible",
@@ -1596,7 +1584,7 @@ function MultiCombobox({
 var React13 = __toESM(require("react"));
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
 var import_phosphor_react10 = require("phosphor-react");
-var import_framer_motion3 = require("framer-motion");
+var import_framer_motion2 = require("framer-motion");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var SelectBase = SelectPrimitive.Root;
 var SelectGroupBase = SelectPrimitive.Group;
@@ -1613,7 +1601,7 @@ var SelectTriggerBase = React13.forwardRef(({ className, children, open, ...prop
     children: [
       children,
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_framer_motion3.motion.span,
+        import_framer_motion2.motion.span,
         {
           animate: { rotate: open ? 180 : 0 },
           transition: { duration: 0.3 },
@@ -1651,7 +1639,7 @@ var SelectScrollDownButtonBase = React13.forwardRef(({ className, ...props }, re
   }
 ));
 SelectScrollDownButtonBase.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContentBase = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_framer_motion3.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var SelectContentBase = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_framer_motion2.AnimatePresence, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   SelectPrimitive.Content,
   {
     ref,
@@ -1663,7 +1651,7 @@ var SelectContentBase = React13.forwardRef(({ className, children, position = "p
     ...props,
     asChild: true,
     children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_framer_motion3.motion.div,
+      import_framer_motion2.motion.div,
       {
         initial: { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
@@ -1901,7 +1889,7 @@ CardFooterBase.displayName = "CardFooter";
 var React16 = __toESM(require("react"));
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_phosphor_react12 = require("phosphor-react");
-var import_framer_motion4 = require("framer-motion");
+var import_framer_motion3 = require("framer-motion");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var CheckboxBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   CheckboxPrimitive.Root,
@@ -1913,7 +1901,7 @@ var CheckboxBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
     ),
     ...props,
     children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CheckboxPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      import_framer_motion4.motion.div,
+      import_framer_motion3.motion.div,
       {
         initial: { scale: 0, opacity: 0, rotate: -90 },
         animate: { scale: 1, opacity: 1, rotate: 0 },
@@ -2174,7 +2162,7 @@ var ProgressCirclesBase = ({
 // src/components/ui/SeparatorBase.tsx
 var React19 = __toESM(require("react"));
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
-var import_framer_motion5 = require("framer-motion");
+var import_framer_motion4 = require("framer-motion");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var SeparatorBase = React19.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
@@ -2188,7 +2176,7 @@ var SeparatorBase = React19.forwardRef(
         asChild: true,
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          import_framer_motion5.motion.div,
+          import_framer_motion4.motion.div,
           {
             className: cn(
               "shrink-0 bg-border",

package/dist/index.mjs

@@ -855,7 +855,6 @@ import { Check as Check2, Moon, Sun } from "phosphor-react";
 import * as React10 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, CaretRight as CaretRight2, Circle } from "phosphor-react";
-import { motion, AnimatePresence } from "framer-motion";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var DropDownMenuBase = DropdownMenuPrimitive.Root;
 var DropDownMenuTriggerBase = DropdownMenuPrimitive.Trigger;
@@ -892,30 +891,19 @@ var DropDownMenuSubContentBase = React10.forwardRef(({ className, ...props }, re
   }
 ));
 DropDownMenuSubContentBase.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropDownMenuContentBase = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(AnimatePresence, { children: /* @__PURE__ */ jsx11(
+var DropDownMenuContentBase = React10.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
   DropdownMenuPrimitive.Content,
   {
-    asChild: true,
     sideOffset,
-    forceMount: true,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+      className
+    ),
     ref,
     ...props,
-    children: /* @__PURE__ */ jsx11(
-      motion.div,
-      {
-        initial: { opacity: 0, scale: 0.95, y: 5 },
-        animate: { opacity: 1, scale: 1, y: 0 },
-        exit: { opacity: 0, scale: 0.95, y: 5 },
-        transition: { duration: 0.2, ease: "easeOut" },
-        className: cn(
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-          className
-        ),
-        children: props.children
-      }
-    )
+    children: props.children
   }
-) }) }));
+) }));
 DropDownMenuContentBase.displayName = DropdownMenuPrimitive.Content.displayName;
 var DropDownMenuItemBase = React10.forwardRef(({ className, inset, leftIcon, rightIcon, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
   DropdownMenuPrimitive.Item,
@@ -1112,7 +1100,7 @@ import { useCallback, useMemo } from "react";
 import * as React11 from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { MagnifyingGlass } from "phosphor-react";
-import { motion as motion2, AnimatePresence as AnimatePresence2 } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var CommandBase = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   CommandPrimitive,
@@ -1132,8 +1120,8 @@ var dialogVariants = {
   exit: { opacity: 0, scale: 0.95, y: -20 }
 };
 var CommandDialogBase = ({ children, open, ...props }) => {
-  return /* @__PURE__ */ jsx14(DialogBase, { open, ...props, children: /* @__PURE__ */ jsx14(AnimatePresence2, { children: open && /* @__PURE__ */ jsx14(DialogContentBase, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx14(
-    motion2.div,
+  return /* @__PURE__ */ jsx14(DialogBase, { open, ...props, children: /* @__PURE__ */ jsx14(AnimatePresence, { children: open && /* @__PURE__ */ jsx14(DialogContentBase, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx14(
+    motion.div,
     {
       initial: "hidden",
       animate: "visible",
@@ -1404,7 +1392,7 @@ function MultiCombobox({
 import * as React13 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check as Check4, CaretDown as CaretDown2, CaretUp } from "phosphor-react";
-import { motion as motion3, AnimatePresence as AnimatePresence3 } from "framer-motion";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "framer-motion";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var SelectBase = SelectPrimitive.Root;
 var SelectGroupBase = SelectPrimitive.Group;
@@ -1421,7 +1409,7 @@ var SelectTriggerBase = React13.forwardRef(({ className, children, open, ...prop
     children: [
       children,
       /* @__PURE__ */ jsx19(
-        motion3.span,
+        motion2.span,
         {
           animate: { rotate: open ? 180 : 0 },
           transition: { duration: 0.3 },
@@ -1459,7 +1447,7 @@ var SelectScrollDownButtonBase = React13.forwardRef(({ className, ...props }, re
   }
 ));
 SelectScrollDownButtonBase.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContentBase = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx19(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx19(AnimatePresence3, { children: /* @__PURE__ */ jsx19(
+var SelectContentBase = React13.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx19(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx19(AnimatePresence2, { children: /* @__PURE__ */ jsx19(
   SelectPrimitive.Content,
   {
     ref,
@@ -1471,7 +1459,7 @@ var SelectContentBase = React13.forwardRef(({ className, children, position = "p
     ...props,
     asChild: true,
     children: /* @__PURE__ */ jsx19(
-      motion3.div,
+      motion2.div,
       {
         initial: { opacity: 0, scale: 0.95 },
         animate: { opacity: 1, scale: 1 },
@@ -1709,7 +1697,7 @@ CardFooterBase.displayName = "CardFooter";
 import * as React16 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check as Check5 } from "phosphor-react";
-import { motion as motion4 } from "framer-motion";
+import { motion as motion3 } from "framer-motion";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var CheckboxBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   CheckboxPrimitive.Root,
@@ -1721,7 +1709,7 @@ var CheckboxBase = React16.forwardRef(({ className, ...props }, ref) => /* @__PU
     ),
     ...props,
     children: /* @__PURE__ */ jsx24(CheckboxPrimitive.Indicator, { asChild: true, children: /* @__PURE__ */ jsx24(
-      motion4.div,
+      motion3.div,
       {
         initial: { scale: 0, opacity: 0, rotate: -90 },
         animate: { scale: 1, opacity: 1, rotate: 0 },
@@ -1986,7 +1974,7 @@ var ProgressCirclesBase = ({
 // src/components/ui/SeparatorBase.tsx
 import * as React19 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { motion as motion5 } from "framer-motion";
+import { motion as motion4 } from "framer-motion";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var SeparatorBase = React19.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
@@ -2000,7 +1988,7 @@ var SeparatorBase = React19.forwardRef(
         asChild: true,
         ...props,
         children: /* @__PURE__ */ jsx27(
-          motion5.div,
+          motion4.div,
           {
             className: cn(
               "shrink-0 bg-border",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlw-packages/react-components",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",