Configurações de Cores de Componentes padrões & Refactor nos nomes das classes padrões

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@switchdreams/ui",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "description": "Biblioteca de Componentes da SwitchDreams",
   "repository": {
@@ -40,59 +40,59 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-designs": "^8.0.0",
-    "@storybook/addon-essentials": "^8.0.1",
-    "@storybook/addon-interactions": "^8.0.1",
-    "@storybook/addon-links": "^8.0.1",
-    "@storybook/blocks": "^8.0.1",
-    "@storybook/react": "^8.0.1",
-    "@storybook/react-vite": "^8.0.1",
-    "@storybook/test": "^8.0.1",
-    "@testing-library/jest-dom": "^6.4.2",
+    "@storybook/addon-designs": "^8.0.2",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
+    "@storybook/test": "^8.1.11",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.2.1",
-    "@types/react": "^18.2.67",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.2.22",
     "@types/react-input-mask": "^3.0.5",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
+    "@vitejs/plugin-react": "^4.3.1",
     "agadoo": "^3.0.0",
     "autoprefixer": "^10.4.18",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-tailwindcss": "^3.15.1",
+    "eslint-plugin-tailwindcss": "^3.17.4",
     "eslint-plugin-tree-shaking": "^1.12.1",
     "jsdom": "^24.0.0",
     "postcss": "^8.4.36",
-    "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.12",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hooks": "^1.0.1",
     "rollup-plugin-pure": "^0.2.1",
-    "storybook": "^8.0.1",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6",
+    "storybook": "^8.1.11",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.2",
     "vite-plugin-dts": "^3.7.3",
     "vite-plugin-linter": "^2.1.1",
-    "vite-plugin-static-copy": "^1.0.1",
+    "vite-plugin-static-copy": "^1.0.5",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.4.0"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.12",
-    "@floating-ui/react-dom": "^2.0.8",
-    "@headlessui/react": "^2.0.3",
-    "@headlessui/tailwindcss": "^0.2.0",
-    "@heroicons/react": "^2.1.1",
+    "@floating-ui/react": "^0.26.18",
+    "@floating-ui/react-dom": "^2.1.1",
+    "@headlessui/react": "^2.1.1",
+    "@headlessui/tailwindcss": "^0.2.1",
+    "@heroicons/react": "^2.1.4",
     "class-variance-authority": "^0.7.0",
     "react-input-mask": "^2.0.4",
     "react-select": "^5.8.0",

src/components/Avatar/__tests__/index.test.tsx

@@ -23,12 +23,12 @@ describe("Avatar", () => {
   describe("test the color props", () => {
     it("test the primary color", () => {
       const { container } = render(<Avatar color="primary" size="xl" name="marty mcfly" />);
-      expect(container.querySelector(".avatar-primary")).toHaveClass("avatar-primary");
+      expect(container.querySelector(".sw-ui-avatar-primary")).toBeInTheDocument();
     });
 
     it("test the gray color", () => {
       const { container } = render(<Avatar color="gray" size="xl" name="marty mcfly" />);
-      expect(container.querySelector(".avatar-gray")).toHaveClass("avatar-gray");
+      expect(container.querySelector(".sw-ui-avatar-gray")).toBeInTheDocument();
     });
   });
 

src/components/Avatar/index.tsx

@@ -18,8 +18,8 @@ export const avatarVariants = cva(
   {
     variants: {
       color: {
-        primary: "avatar-primary",
-        gray: "avatar-gray",
+        primary: "sw-ui-avatar-primary",
+        gray: "sw-ui-avatar-gray",
       },
       size: {
         xl: "h-16 w-16 text-2xl",

src/components/Badge/index.tsx

@@ -12,7 +12,7 @@ export interface IBadgeProps {
 }
 
 const badgeVariants = cva(
-  "text-align:center rounded-plug-full flex h-7 w-fit items-center justify-center gap-1 px-3 text-xs font-medium",
+  "text-align:center sw-ui-rounded-curvature-full flex h-7 w-fit items-center justify-center gap-1 px-3 text-xs font-medium",
   {
     variants: {
       color: {

src/components/Button/__tests__/index.test.tsx

@@ -41,19 +41,19 @@ describe("Button", () => {
     it("primary variant enable", () => {
       render(component("primary", "md", false));
       const buttonElement = screen.getByText("botão");
-      expect(buttonElement).toHaveClass("btn-primary");
+      expect(buttonElement).toHaveClass("sw-ui-btn-primary");
     });
 
     it("outline variant enable", () => {
       render(component("outline", "md", false));
       const buttonElement = screen.getByText("botão");
-      expect(buttonElement).toHaveClass("btn-outline");
+      expect(buttonElement).toHaveClass("sw-ui-btn-outline");
     });
 
     it("invisible variant enable", () => {
       render(component("invisible", "md", false));
       const buttonElement = screen.getByText("botão");
-      expect(buttonElement).toHaveClass("btn-invisible");
+      expect(buttonElement).toHaveClass("sw-ui-btn-invisible");
     });
 
     it("danger variant enable", () => {
@@ -70,21 +70,21 @@ describe("Button", () => {
     it("primary variant disabled", () => {
       render(component("primary", "md", true));
       const buttonElement = screen.getByText("botão");
-      expect(buttonElement).toHaveClass("btn-primary");
+      expect(buttonElement).toHaveClass("sw-ui-btn-primary");
       expect(buttonElement).toHaveClass("opacity-40");
     });
 
     it("outline variant disabled", () => {
       render(component("outline", "md", true));
       const buttonElement = screen.getByText("botão");
-      expect(buttonElement).toHaveClass("btn-outline");
+      expect(buttonElement).toHaveClass("sw-ui-btn-outline");
       expect(buttonElement).toHaveClass("opacity-40");
     });
 
     it("invisible variant disabled", () => {
       render(component("invisible", "md", true));
       const buttonElement = screen.getByText("botão");
-      expect(buttonElement).toHaveClass("btn-invisible");
+      expect(buttonElement).toHaveClass("sw-ui-btn-invisible");
       expect(buttonElement).toHaveClass("opacity-40");
     });
 

src/components/Button/index.tsx

@@ -16,27 +16,30 @@ interface ButtonType extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 
 export type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 
-export const buttonVariants = cva("rounded-plug-md flex items-center justify-center gap-2", {
-  variants: {
-    variant: {
-      primary: "btn-primary",
-      outline: "btn-outline border border-solid border-primary-50",
-      invisible: "btn-invisible",
-      danger: "bg-error-600 text-white hover:bg-error-700 focus:bg-error-600 active:bg-error-800",
-    },
-    size: {
-      xl: ["text-xl", "h-[56px] w-full"],
-      lg: ["text-sm", "h-[48px] w-full"],
-      md: ["text-sm", "h-[44px] w-full"],
-      sm: ["text-sm", "h-[40px] w-full"],
-      xs: ["text-xs", "h-[34px] w-full"],
-    },
-    disabled: {
-      true: ["opacity-40"],
-      false: ["opacity-100"],
+export const buttonVariants = cva(
+  "sw-ui-rounded-curvature-md flex items-center justify-center gap-2",
+  {
+    variants: {
+      variant: {
+        primary: "sw-ui-btn-primary",
+        outline: "sw-ui-btn-outline border border-solid border-primary-50",
+        invisible: "sw-ui-btn-invisible",
+        danger: "bg-error-600 text-white hover:bg-error-700 focus:bg-error-600 active:bg-error-800",
+      },
+      size: {
+        xl: ["text-xl", "h-[56px] w-full"],
+        lg: ["text-sm", "h-[48px] w-full"],
+        md: ["text-sm", "h-[44px] w-full"],
+        sm: ["text-sm", "h-[40px] w-full"],
+        xs: ["text-xs", "h-[34px] w-full"],
+      },
+      disabled: {
+        true: ["opacity-40"],
+        false: ["opacity-100"],
+      },
     },
   },
-});
+);
 
 export interface ButtonProps extends Omit<ButtonVariantProps, "disabled">, ButtonType {}
 

src/components/CheckBox/__tests__/CheckBox.test.tsx

@@ -27,7 +27,7 @@ describe("CheckBox", () => {
     expect(classes).toContain("h-4");
     expect(classes).toContain("w-4");
     expect(classes).toContain("rounded-full");
-    expect(classes).toContain("checkbox-primary");
+    expect(classes).toContain("sw-ui-checkbox-primary");
   });
 
   it("applies default Tailwind CSS classes when no variants are provided", () => {
@@ -37,6 +37,6 @@ describe("CheckBox", () => {
     expect(classes).toContain("h-5");
     expect(classes).toContain("w-5");
     expect(classes).toContain("rounded-sm");
-    expect(classes).toContain("checkbox-primary");
+    expect(classes).toContain("sw-ui-checkbox-primary");
   });
 });

src/components/CheckBox/index.tsx

@@ -28,7 +28,8 @@ const checkBoxVariants = cva(
         large: "h-6 w-6",
       },
       color: {
-        primary: "checkbox-primary checked:hover:bg-primary-200 focus:ring-4 focus:ring-primary-25",
+        primary:
+          "sw-ui-checkbox-primary checked:hover:bg-primary-200 focus:ring-4 focus:ring-primary-25",
         secondary:
           "border-error-600 checked:bg-error-700 hover:bg-error-100 checked:hover:bg-error-600 focus:ring-4 focus:ring-error-100",
       },

src/components/FloatingButton/index.tsx

@@ -11,7 +11,7 @@ interface FloatingButtonType extends React.ButtonHTMLAttributes<HTMLButtonElemen
 export type FloatingButtonVariantProps = VariantProps<typeof buttonVariants>;
 
 export const buttonVariants = cva(
-  "rounded-plug-full flex items-center justify-center gap-2 drop-shadow-lg",
+  "sw-ui-rounded-curvature-full flex items-center justify-center gap-2 drop-shadow-lg",
   {
     variants: {
       variant: {

src/components/Modal/index.tsx

@@ -95,12 +95,7 @@ const Modal = ({
   };
   return (
     <>
-      <div
-        className={` 
-          ${twMerge(BgVariants({ open }))}
-        `}
-        onClick={handleClose}
-      />
+      <div className={` ${twMerge(BgVariants({ open }))} `} onClick={handleClose} />
       <div className={`${twMerge(ModalVariants({ open }), className)}`}>
         <div className="relative z-50 h-full w-full gap-12 p-5">
           <XMarkIcon

src/components/SearchInput/SearchInput.tsx

@@ -49,7 +49,7 @@ interface SearchInputType {
 export type SearchInputVariantProps = VariantProps<typeof SearchInputButtonVariants>;
 
 export const SearchInputOptionsVariants = cva(
-  "rounded-plug-md m-1 flex cursor-pointer select-none items-center justify-between pl-2 text-coolGray-900",
+  "sw-ui-rounded-curvature-md m-1 flex cursor-pointer select-none items-center justify-between pl-2 text-coolGray-900",
   {
     variants: {
       size: {
@@ -70,7 +70,7 @@ export const SearchInputOptionsVariants = cva(
 );
 
 export const SearchInputButtonVariants = cva(
-  "rounded-plug-md input relative my-2 w-full cursor-default border border-coolGray-400 pl-3 pr-10 text-left text-coolGray-500 hover:bg-coolGray-50 focus:outline-none",
+  "sw-ui-rounded-curvature-md sw-ui-input relative my-2 w-full cursor-default border border-coolGray-400 pl-3 pr-10 text-left text-coolGray-500 hover:bg-coolGray-50 focus:outline-none",
   {
     variants: {
       disabled: {
@@ -233,7 +233,7 @@ function SearchInput({
                 leaveTo="opacity-0"
                 afterLeave={() => setQuery("")}
               >
-                <ComboboxOptions className="appearence-none rounded-plug-md z-30 mt-1 max-h-60 w-full overflow-auto bg-white py-1 shadow-md shadow-primary-25 ring-2 ring-primary-25">
+                <ComboboxOptions className="appearence-none sw-ui-rounded-curvature-md z-30 mt-1 max-h-60 w-full overflow-auto bg-white py-1 shadow-md shadow-primary-25 ring-2 ring-primary-25">
                   {filteredOptions.length === 0 && query !== "" ? (
                     <div className="relative cursor-default select-none px-3 py-2 text-coolGray-800">
                       Nothing found.
@@ -317,7 +317,7 @@ function SearchInput({
                 leaveTo="opacity-0"
                 afterLeave={() => setQuery("")}
               >
-                <ComboboxOptions className="appearence-none rounded-plug-md z-30 mt-1 max-h-60 w-full overflow-auto bg-white py-1 shadow shadow-primary-25 ring-1 ring-primary-25">
+                <ComboboxOptions className="appearence-none sw-ui-rounded-curvature-md z-30 mt-1 max-h-60 w-full overflow-auto bg-white py-1 shadow shadow-primary-25 ring-1 ring-primary-25">
                   {filteredOptions.length === 0 && query !== "" ? (
                     <div className="relative cursor-default select-none px-3 py-2 text-coolGray-800">
                       Nothing found.

src/components/Select/styles.tsx

@@ -6,7 +6,7 @@ import { components, DropdownIndicatorProps } from "react-select";
 import { twMerge } from "tailwind-merge";
 
 const selectVariants = cva(
-  "rounded-plug-md relative my-2 w-full cursor-default border text-left text-coolGray-900 hover:bg-coolGray-50",
+  "sw-ui-rounded-curvature-md relative my-2 w-full cursor-default border text-left text-coolGray-900 hover:bg-coolGray-50",
   {
     variants: {
       disabled: {

src/components/SelectBox/index.tsx

@@ -34,7 +34,7 @@ interface SelectBoxType extends ListboxProps<any, any, any> {
 export type SelectBoxVariantProps = VariantProps<typeof selectBoxVariants>;
 
 export const selectBoxVariants = cva(
-  "rounded-plug-md relative m-1 flex cursor-default select-none items-center pl-2 text-coolGray-900",
+  "sw-ui-rounded-curvature-md relative m-1 flex cursor-default select-none items-center pl-2 text-coolGray-900",
   {
     variants: {
       size: {
@@ -55,7 +55,7 @@ export const selectBoxVariants = cva(
 );
 
 export const selectBoxButtonVariants = cva(
-  "rounded-plug-md relative my-2 w-full cursor-default border pr-10 text-left text-coolGray-900 hover:bg-coolGray-50",
+  "sw-ui-rounded-curvature-md relative my-2 w-full cursor-default border pr-10 text-left text-coolGray-900 hover:bg-coolGray-50",
   {
     variants: {
       showPlaceholder: {

src/components/Sidebar/SidebarDrop.tsx

@@ -75,7 +75,7 @@ const SidebarDrop = ({ label, icon: Icon, as = "a", options = [] }: DropProps) =
                 <div
                   onClick={() => setIsOpen(false)}
                   key={index}
-                  className={`hover:${hoverColor} flex h-12 w-full items-center gap-2 whitespace-nowrap rounded-md px-11 text-md font-semibold last:mb-4 `}
+                  className={`hover:${hoverColor} flex h-12 w-full items-center gap-2 whitespace-nowrap rounded-md px-11 text-md font-semibold last:mb-4`}
                 >
                   <Element href={option.href}>
                     <Text>{option.label}</Text>
@@ -92,7 +92,7 @@ const SidebarDrop = ({ label, icon: Icon, as = "a", options = [] }: DropProps) =
             onClick={() => {
               handleDropdownToggle();
             }}
-            className={`hover:${hoverColor} flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-md px-2 text-md font-semibold text-gray-700  ${
+            className={`hover:${hoverColor} flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-md px-2 text-md font-semibold text-gray-700 ${
               isDropdownOpen ? "peer-focus:visible" : ""
             }`}
           >
@@ -129,7 +129,7 @@ const SidebarDrop = ({ label, icon: Icon, as = "a", options = [] }: DropProps) =
       )}
       {!isOpen && !Icon && (
         <div
-          className={`hover:${hoverColor} flex h-10 w-full items-center gap-2 rounded-md px-2 text-md font-semibold text-gray-700  max-md:hidden`}
+          className={`hover:${hoverColor} flex h-10 w-full items-center gap-2 rounded-md px-2 text-md font-semibold text-gray-700 max-md:hidden`}
         >
           <div className="h-7 w-7 text-center text-lg font-semibold">{label[0].toUpperCase()}</div>
         </div>

src/components/Slider/Slider.tsx

@@ -2,7 +2,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import React, { forwardRef, HTMLProps, useRef } from "react";
 import { twMerge } from "tailwind-merge";
 
-const sliderVariants = cva("slider relative w-full appearance-none rounded-lg border-0", {
+const sliderVariants = cva("sw-ui-slider relative w-full appearance-none rounded-lg border-0", {
   variants: {
     size: {
       small: "h-1",

src/components/Tab/index.tsx

@@ -20,7 +20,7 @@ export interface TabType extends HTMLAttributes<any> {
 export type TabVariantProps = VariantProps<typeof TabVariants>;
 
 export const TabVariants = cva(
-  "item-center text-align:center tab flex appearance-none justify-center border-b focus:outline-none ui-selected:font-medium",
+  "item-center text-align:center sw-ui-tab flex appearance-none justify-center border-b focus:outline-none ui-selected:font-medium",
   {
     variants: {
       size: {

src/components/TextField/TextFieldBase.tsx

@@ -27,7 +27,7 @@ export interface ITextFieldBase
 }
 
 const TextFieldBaseVariants = cva(
-  "rounded-plug-md input my-2 w-full text-ellipsis border border-coolGray-400 text-md text-coolGray-900 hover:bg-coolGray-50 focus:outline-none",
+  "sw-ui-rounded-curvature-md sw-ui-input my-2 w-full text-ellipsis border border-coolGray-400 text-md text-coolGray-900 hover:bg-coolGray-50 focus:outline-none",
   {
     variants: {
       size: {