analytica-frontend-lib 1.0.4 → 1.0.5

package/dist/index.css

@@ -26,8 +26,6 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
-    --text-base: 1rem;
-    --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
@@ -49,21 +47,31 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --font-weight-black: 900;
-    --default-transition-duration: 150ms;
-    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-primary-400: #525252;
+    --color-primary-500: #333333;
     --color-primary-600: #292929;
     --color-primary-700: #1f1f1f;
+    --color-primary-800: #0d0d0d;
     --color-primary-950: #080808;
-    --color-secondary: #fdfdfd;
-    --color-secondary-200: #f2f2f2;
-    --color-secondary-300: #ededed;
     --color-text: #fefeff;
+    --color-text-700: #525252;
+    --color-text-900: #262627;
     --color-text-950: #171717;
     --color-background: #ffffff;
+    --color-background-50: #f6f6f6;
+    --color-success-300: #66b584;
+    --color-success-400: #489766;
+    --color-success-500: #348352;
+    --color-success-600: #2a7948;
+    --color-success-700: #206f3e;
+    --color-error-300: #f87171;
+    --color-error-400: #ef4444;
+    --color-error-500: #e63535;
     --color-error-600: #dc2626;
     --color-error-700: #b91c1c;
+    --color-indicator-info: #5399ec;
     --font-weight-hairline: 100;
     --text-2xs: 0.625rem;
     --text-2xs--line-height: calc(1 / 0.625);
@@ -271,21 +279,48 @@
   }
 }
 @layer utilities {
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .flex {
     display: flex;
   }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .table {
+    display: table;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .flex-col {
     flex-direction: column;
   }
+  .flex-row {
+    flex-direction: row;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
   .items-center {
     align-items: center;
   }
+  .justify-center {
+    justify-content: center;
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -298,17 +333,43 @@
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-error-300 {
+    border-color: var(--color-error-300);
+  }
+  .border-error-500 {
+    border-color: var(--color-error-500);
+  }
+  .border-primary-950 {
+    border-color: var(--color-primary-950);
+  }
+  .border-success-300 {
+    border-color: var(--color-success-300);
+  }
+  .border-success-500 {
+    border-color: var(--color-success-500);
+  }
   .bg-background {
     background-color: var(--color-background);
   }
-  .bg-error-600 {
-    background-color: var(--color-error-600);
+  .bg-error-500 {
+    background-color: var(--color-error-500);
   }
-  .bg-primary-600 {
-    background-color: var(--color-primary-600);
+  .bg-primary-950 {
+    background-color: var(--color-primary-950);
   }
-  .bg-secondary-200 {
-    background-color: var(--color-secondary-200);
+  .bg-success-500 {
+    background-color: var(--color-success-500);
+  }
+  .bg-transparent {
+    background-color: transparent;
   }
   .p-4 {
     padding: calc(var(--spacing) * 4);
@@ -316,8 +377,8 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
   }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
@@ -325,15 +386,24 @@
   .px-5 {
     padding-inline: calc(var(--spacing) * 5);
   }
-  .py-1\.5 {
-    padding-block: calc(var(--spacing) * 1.5);
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .px-7 {
+    padding-inline: calc(var(--spacing) * 7);
   }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
+  .py-3\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -358,10 +428,6 @@
     font-size: var(--text-6xl);
     line-height: var(--tw-leading, var(--text-6xl--line-height));
   }
-  .text-base {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -414,83 +480,246 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .text-error-500 {
+    color: var(--color-error-500);
+  }
   .text-primary-950 {
     color: var(--color-primary-950);
   }
-  .text-secondary {
-    color: var(--color-secondary);
+  .text-success-500 {
+    color: var(--color-success-500);
   }
   .text-text {
     color: var(--color-text);
   }
+  .text-text-700 {
+    color: var(--color-text-700);
+  }
+  .text-text-900 {
+    color: var(--color-text-900);
+  }
   .text-text-950 {
     color: var(--color-text-950);
   }
-  .transition {
-    transition-property:
-      color,
-      background-color,
-      border-color,
-      outline-color,
-      text-decoration-color,
-      fill,
-      stroke,
-      --tw-gradient-from,
-      --tw-gradient-via,
-      --tw-gradient-to,
-      opacity,
-      box-shadow,
-      transform,
-      translate,
-      scale,
-      rotate,
-      filter,
-      -webkit-backdrop-filter,
-      backdrop-filter,
-      display,
-      visibility,
-      content-visibility,
-      overlay,
-      pointer-events;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .hover\:bg-error-700 {
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .hover\:border-error-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-error-400);
+      }
+    }
+  }
+  .hover\:border-error-600 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-error-600);
+      }
+    }
+  }
+  .hover\:border-primary-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-primary-400);
+      }
+    }
+  }
+  .hover\:border-primary-800 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-primary-800);
+      }
+    }
+  }
+  .hover\:border-success-400 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-success-400);
+      }
+    }
+  }
+  .hover\:border-success-600 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-success-600);
+      }
+    }
+  }
+  .hover\:bg-background-50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-error-700);
+        background-color: var(--color-background-50);
       }
     }
   }
-  .hover\:bg-primary-700 {
+  .hover\:bg-error-600 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-primary-700);
+        background-color: var(--color-error-600);
       }
     }
   }
-  .hover\:bg-secondary-300 {
+  .hover\:bg-primary-800 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-secondary-300);
+        background-color: var(--color-primary-800);
       }
     }
   }
-  .focus\:ring {
+  .hover\:bg-success-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-success-600);
+      }
+    }
+  }
+  .hover\:text-error-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-error-400);
+      }
+    }
+  }
+  .hover\:text-primary-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-primary-400);
+      }
+    }
+  }
+  .hover\:text-success-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-success-400);
+      }
+    }
+  }
+  .focus\:border-2 {
+    &:focus {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+  }
+  .focus\:border-indicator-info {
+    &:focus {
+      border-color: var(--color-indicator-info);
+    }
+  }
+  .focus\:bg-error-500 {
+    &:focus {
+      background-color: var(--color-error-500);
+    }
+  }
+  .focus\:bg-primary-950 {
+    &:focus {
+      background-color: var(--color-primary-950);
+    }
+  }
+  .focus\:bg-success-500 {
+    &:focus {
+      background-color: var(--color-success-500);
+    }
+  }
+  .focus\:text-error-600 {
+    &:focus {
+      color: var(--color-error-600);
+    }
+  }
+  .focus\:text-primary-600 {
     &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow:
-        var(--tw-inset-shadow),
-        var(--tw-inset-ring-shadow),
-        var(--tw-ring-offset-shadow),
-        var(--tw-ring-shadow),
-        var(--tw-shadow);
+      color: var(--color-primary-600);
     }
   }
-  .focus\:outline-none {
+  .focus\:text-success-600 {
     &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
+      color: var(--color-success-600);
+    }
+  }
+  .active\:border-error-700 {
+    &:active {
+      border-color: var(--color-error-700);
+    }
+  }
+  .active\:border-primary-700 {
+    &:active {
+      border-color: var(--color-primary-700);
+    }
+  }
+  .active\:border-success-700 {
+    &:active {
+      border-color: var(--color-success-700);
+    }
+  }
+  .active\:bg-error-700 {
+    &:active {
+      background-color: var(--color-error-700);
+    }
+  }
+  .active\:bg-primary-700 {
+    &:active {
+      background-color: var(--color-primary-700);
+    }
+  }
+  .active\:bg-success-700 {
+    &:active {
+      background-color: var(--color-success-700);
+    }
+  }
+  .active\:text-error-700 {
+    &:active {
+      color: var(--color-error-700);
+    }
+  }
+  .active\:text-primary-700 {
+    &:active {
+      color: var(--color-primary-700);
+    }
+  }
+  .active\:text-success-700 {
+    &:active {
+      color: var(--color-success-700);
+    }
+  }
+  .disabled\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\:border-error-500 {
+    &:disabled {
+      border-color: var(--color-error-500);
+    }
+  }
+  .disabled\:border-primary-500 {
+    &:disabled {
+      border-color: var(--color-primary-500);
+    }
+  }
+  .disabled\:border-success-500 {
+    &:disabled {
+      border-color: var(--color-success-500);
+    }
+  }
+  .disabled\:bg-error-500 {
+    &:disabled {
+      background-color: var(--color-error-500);
+    }
+  }
+  .disabled\:bg-primary-500 {
+    &:disabled {
+      background-color: var(--color-primary-500);
+    }
+  }
+  .disabled\:bg-success-500 {
+    &:disabled {
+      background-color: var(--color-success-500);
+    }
+  }
+  .disabled\:opacity-40 {
+    &:disabled {
+      opacity: 40%;
     }
   }
 }
@@ -819,21 +1048,9 @@
 @property --tw-rotate-z { syntax: "*"; inherits: false; }
 @property --tw-skew-x { syntax: "*"; inherits: false; }
 @property --tw-skew-y { syntax: "*"; inherits: false; }
+@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-font-weight { syntax: "*"; inherits: false; }
-@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
-@property --tw-shadow-color { syntax: "*"; inherits: false; }
-@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
-@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
-@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
-@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
-@property --tw-ring-color { syntax: "*"; inherits: false; }
-@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
-@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
-@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
-@property --tw-ring-inset { syntax: "*"; inherits: false; }
-@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
-@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
-@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *,
@@ -845,21 +1062,9 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-border-style: solid;
       --tw-font-weight: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
     }
   }
 }

package/dist/index.d.mts

@@ -7,34 +7,41 @@ import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef
 type ButtonProps = {
     /** Content to be displayed inside the button */
     children: ReactNode;
+    /** Ícone à esquerda do texto */
+    iconLeft?: ReactNode;
+    /** Ícone à direita do texto */
+    iconRight?: ReactNode;
+    /** Size of the button */
+    size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
     /** Visual variant of the button */
-    variant?: 'primary' | 'secondary' | 'danger';
-    /** Size variant of the button */
-    size?: 'sm' | 'md' | 'lg';
+    variant?: 'solid' | 'outline' | 'link';
+    /** Action type of the button */
+    action?: 'primary' | 'positive' | 'negative';
     /** Additional CSS classes to apply */
     className?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * Button component for Analytica Ensino platforms
  *
- * A flexible button component with multiple variants and sizes.
+ * A flexible button component with multiple variants, sizes and actions.
  * Fully compatible with Next.js 15 and React 19.
  *
  * @param children - The content to display inside the button
- * @param variant - The visual style variant (primary, secondary, danger)
- * @param size - The size variant (sm, md, lg)
+ * @param size - The size variant (extra-small, small, medium, large, extra-large)
+ * @param variant - The visual style variant (solid, outline, link)
+ * @param action - The action type (primary, positive, negative)
  * @param className - Additional CSS classes
  * @param props - All other standard button HTML attributes
  * @returns A styled button element
  *
  * @example
  * ```tsx
- * <Button variant="primary" size="md" onClick={() => console.log('clicked')}>
+ * <Button variant="solid" action="primary" size="medium" onClick={() => console.log('clicked')}>
  *   Click me
  * </Button>
  * ```
  */
-declare const Button: ({ children, variant, size, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ children, iconLeft, iconRight, size, variant, action, className, disabled, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * Base text component props

package/dist/index.d.ts

@@ -7,34 +7,41 @@ import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef
 type ButtonProps = {
     /** Content to be displayed inside the button */
     children: ReactNode;
+    /** Ícone à esquerda do texto */
+    iconLeft?: ReactNode;
+    /** Ícone à direita do texto */
+    iconRight?: ReactNode;
+    /** Size of the button */
+    size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
     /** Visual variant of the button */
-    variant?: 'primary' | 'secondary' | 'danger';
-    /** Size variant of the button */
-    size?: 'sm' | 'md' | 'lg';
+    variant?: 'solid' | 'outline' | 'link';
+    /** Action type of the button */
+    action?: 'primary' | 'positive' | 'negative';
     /** Additional CSS classes to apply */
     className?: string;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * Button component for Analytica Ensino platforms
  *
- * A flexible button component with multiple variants and sizes.
+ * A flexible button component with multiple variants, sizes and actions.
  * Fully compatible with Next.js 15 and React 19.
  *
  * @param children - The content to display inside the button
- * @param variant - The visual style variant (primary, secondary, danger)
- * @param size - The size variant (sm, md, lg)
+ * @param size - The size variant (extra-small, small, medium, large, extra-large)
+ * @param variant - The visual style variant (solid, outline, link)
+ * @param action - The action type (primary, positive, negative)
  * @param className - Additional CSS classes
  * @param props - All other standard button HTML attributes
  * @returns A styled button element
  *
  * @example
  * ```tsx
- * <Button variant="primary" size="md" onClick={() => console.log('clicked')}>
+ * <Button variant="solid" action="primary" size="medium" onClick={() => console.log('clicked')}>
  *   Click me
  * </Button>
  * ```
  */
-declare const Button: ({ children, variant, size, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ children, iconLeft, iconRight, size, variant, action, className, disabled, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * Base text component props

package/dist/index.js

@@ -27,46 +27,57 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var VARIANT_ACTION_CLASSES = {
+  solid: {
+    primary: "bg-primary-950 text-text border-2 border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus:bg-primary-950 focus:border-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-success-500 text-text border-2 border-success-500 hover:bg-success-600 hover:border-success-600 focus:bg-success-500 focus:border-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-error-500 text-text border-2 border-error-500 hover:bg-error-600 hover:border-error-600 focus:bg-error-500 focus:border-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
+  },
+  outline: {
+    primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
+  },
+  link: {
+    primary: "bg-transparent text-primary-950 hover:text-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-transparent text-success-500 hover:text-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-transparent text-error-500 hover:text-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
+  }
+};
+var SIZE_CLASSES = {
+  "extra-small": "text-xs px-3.5 py-2",
+  small: "text-sm px-4 py-2.5",
+  medium: "text-md px-5 py-2.5",
+  large: "text-lg px-6 py-3",
+  "extra-large": "text-lg px-7 py-3.5"
+};
 var Button = ({
   children,
-  variant = "primary",
-  size = "md",
+  iconLeft,
+  iconRight,
+  size = "medium",
+  variant = "solid",
+  action = "primary",
   className = "",
+  disabled,
+  type = "button",
   ...props
 }) => {
-  let variantClasses = "";
-  let sizeClasses = "";
-  switch (variant) {
-    case "secondary":
-      variantClasses = "bg-secondary-200 hover:bg-secondary-300 text-primary-950";
-      break;
-    case "danger":
-      variantClasses = "bg-error-600 hover:bg-error-700 text-secondary";
-      break;
-    case "primary":
-    default:
-      variantClasses = "bg-primary-600 hover:bg-primary-700 text-secondary";
-      break;
-  }
-  switch (size) {
-    case "sm":
-      sizeClasses = "text-sm px-3 py-1.5";
-      break;
-    case "lg":
-      sizeClasses = "text-lg px-5 py-3";
-      break;
-    case "md":
-    default:
-      sizeClasses = "text-base px-4 py-2";
-      break;
-  }
-  const baseClasses = "rounded-full font-medium focus:outline-none focus:ring transition";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const sizeClasses = SIZE_CLASSES[size];
+  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
+  const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
       className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      disabled,
+      type,
       ...props,
-      children
+      children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
+      ]
     }
   );
 };

package/dist/index.mjs

@@ -1,45 +1,56 @@
 // src/components/Button/Button.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VARIANT_ACTION_CLASSES = {
+  solid: {
+    primary: "bg-primary-950 text-text border-2 border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus:bg-primary-950 focus:border-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-success-500 text-text border-2 border-success-500 hover:bg-success-600 hover:border-success-600 focus:bg-success-500 focus:border-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-error-500 text-text border-2 border-error-500 hover:bg-error-600 hover:border-error-600 focus:bg-error-500 focus:border-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
+  },
+  outline: {
+    primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
+  },
+  link: {
+    primary: "bg-transparent text-primary-950 hover:text-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    positive: "bg-transparent text-success-500 hover:text-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
+    negative: "bg-transparent text-error-500 hover:text-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
+  }
+};
+var SIZE_CLASSES = {
+  "extra-small": "text-xs px-3.5 py-2",
+  small: "text-sm px-4 py-2.5",
+  medium: "text-md px-5 py-2.5",
+  large: "text-lg px-6 py-3",
+  "extra-large": "text-lg px-7 py-3.5"
+};
 var Button = ({
   children,
-  variant = "primary",
-  size = "md",
+  iconLeft,
+  iconRight,
+  size = "medium",
+  variant = "solid",
+  action = "primary",
   className = "",
+  disabled,
+  type = "button",
   ...props
 }) => {
-  let variantClasses = "";
-  let sizeClasses = "";
-  switch (variant) {
-    case "secondary":
-      variantClasses = "bg-secondary-200 hover:bg-secondary-300 text-primary-950";
-      break;
-    case "danger":
-      variantClasses = "bg-error-600 hover:bg-error-700 text-secondary";
-      break;
-    case "primary":
-    default:
-      variantClasses = "bg-primary-600 hover:bg-primary-700 text-secondary";
-      break;
-  }
-  switch (size) {
-    case "sm":
-      sizeClasses = "text-sm px-3 py-1.5";
-      break;
-    case "lg":
-      sizeClasses = "text-lg px-5 py-3";
-      break;
-    case "md":
-    default:
-      sizeClasses = "text-base px-4 py-2";
-      break;
-  }
-  const baseClasses = "rounded-full font-medium focus:outline-none focus:ring transition";
-  return /* @__PURE__ */ jsx(
+  const sizeClasses = SIZE_CLASSES[size];
+  const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
+  const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
+      disabled,
+      type,
       ...props,
-      children
+      children: [
+        iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
+        children,
+        iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
+      ]
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytica-frontend-lib",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
   "main": "dist/index.cjs",
   "module": "./dist/index.js",