analytica-frontend-lib 1.0.8 → 1.0.9

package/dist/index.css

@@ -22,6 +22,7 @@
       "Courier New",
       monospace;
     --spacing: 0.25rem;
+    --container-2xs: 18rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -47,6 +48,7 @@
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
     --font-weight-black: 900;
+    --radius-xl: 0.75rem;
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-primary-400: #525252;
@@ -61,7 +63,9 @@
     --color-text-950: #171717;
     --color-background: #ffffff;
     --color-background-50: #f6f6f6;
+    --color-background-100: #f2f1f1;
     --color-background-200: #dcdbdb;
+    --color-border-50: #f3f3f3;
     --color-success-300: #66b584;
     --color-success-400: #489766;
     --color-success-500: #348352;
@@ -307,12 +311,21 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .w-2xs {
+    width: var(--container-2xs);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
@@ -337,9 +350,15 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -349,6 +368,9 @@
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -356,6 +378,9 @@
   .border-background-200 {
     border-color: var(--color-background-200);
   }
+  .border-border-50 {
+    border-color: var(--color-border-50);
+  }
   .border-error-300 {
     border-color: var(--color-error-300);
   }
@@ -516,6 +541,15 @@
   .text-text-950 {
     color: var(--color-text-950);
   }
+  .shadow-soft-shadow-1 {
+    --tw-shadow: 0px 0px 10px var(--tw-shadow-color, rgba(38, 38, 38, 0.1));
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -569,6 +603,13 @@
       }
     }
   }
+  .hover\:bg-background-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background-100);
+      }
+    }
+  }
   .hover\:bg-error-600 {
     &:hover {
       @media (hover: hover) {
@@ -671,6 +712,17 @@
         var(--tw-shadow);
     }
   }
+  .focus-visible\:shadow-none {
+    &:focus-visible {
+      --tw-shadow: 0 0 #0000;
+      box-shadow:
+        var(--tw-inset-shadow),
+        var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow),
+        var(--tw-shadow);
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -744,6 +796,39 @@
       color: var(--color-success-700);
     }
   }
+  .active\:shadow-none {
+    &:active {
+      --tw-shadow: 0 0 #0000;
+      box-shadow:
+        var(--tw-inset-shadow),
+        var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow),
+        var(--tw-shadow);
+    }
+  }
+  .active\:ring-2 {
+    &:active {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
+    }
+  }
+  .active\:ring-primary-950 {
+    &:active {
+      --tw-ring-color: var(--color-primary-950);
+    }
+  }
+  .active\:ring-offset-0 {
+    &:active {
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -1117,7 +1202,6 @@
 @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-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
 @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%; }
@@ -1132,6 +1216,7 @@
 @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)))) {
     *,
@@ -1145,7 +1230,6 @@
       --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-font-weight: initial;
-      --tw-outline-style: solid;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -1160,6 +1244,7 @@
       --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

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
 
 /**
@@ -43,6 +44,86 @@ type ButtonProps = {
  */
 declare const Button: ({ children, iconLeft, iconRight, size, variant, action, className, disabled, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * IconRoundedButton component props interface
+ */
+type IconRoundedButtonProps = {
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * IconRoundedButton component for Analytica Ensino platforms
+ *
+ * Um botão redondo simples que exibe apenas um ícone.
+ * Ideal para ações como navegação, fechar, editar, etc.
+ * Compatível com Next.js 15 e React 19.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button estilizado e redondo
+ *
+ * @example
+ * ```tsx
+ * <IconRoundedButton
+ *   icon={<ChevronRightIcon />}
+ *   onClick={() => console.log('clicked')}
+ * />
+ * ```
+ */
+declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconRoundedButtonProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * SelectionButton component for Analytica Ensino platforms
+ *
+ * Um botão com ícone e texto para ações e navegação.
+ * Ideal para filtros, tags, categorias, etc.
+ * Compatível com Next.js 15 e React 19.
+ * Suporta forwardRef para acesso programático ao elemento DOM.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param label - O texto/label a ser exibido
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button estilizado
+ *
+ * @example
+ * ```tsx
+ * <SelectionButton
+ *   icon={<TagIcon />}
+ *   label="Categoria"
+ *   onClick={() => handleAction()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usando ref para foco programático
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ *
+ * const handleFocus = () => {
+ *   buttonRef.current?.focus();
+ * };
+ *
+ * <SelectionButton
+ *   ref={buttonRef}
+ *   icon={<TagIcon />}
+ *   label="Categoria"
+ *   onClick={() => handleAction()}
+ * />
+ * ```
+ */
+declare const SelectionButton: react.ForwardRefExoticComponent<{
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Texto/label a ser exibido ao lado do ícone */
+    label: string;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
 /**
  * Base text component props
  */
@@ -98,4 +179,4 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
-export { Button, Text };
+export { Button, IconRoundedButton, SelectionButton, Text };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
 
 /**
@@ -43,6 +44,86 @@ type ButtonProps = {
  */
 declare const Button: ({ children, iconLeft, iconRight, size, variant, action, className, disabled, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * IconRoundedButton component props interface
+ */
+type IconRoundedButtonProps = {
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * IconRoundedButton component for Analytica Ensino platforms
+ *
+ * Um botão redondo simples que exibe apenas um ícone.
+ * Ideal para ações como navegação, fechar, editar, etc.
+ * Compatível com Next.js 15 e React 19.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button estilizado e redondo
+ *
+ * @example
+ * ```tsx
+ * <IconRoundedButton
+ *   icon={<ChevronRightIcon />}
+ *   onClick={() => console.log('clicked')}
+ * />
+ * ```
+ */
+declare const IconRoundedButton: ({ icon, className, disabled, ...props }: IconRoundedButtonProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * SelectionButton component for Analytica Ensino platforms
+ *
+ * Um botão com ícone e texto para ações e navegação.
+ * Ideal para filtros, tags, categorias, etc.
+ * Compatível com Next.js 15 e React 19.
+ * Suporta forwardRef para acesso programático ao elemento DOM.
+ *
+ * @param icon - O ícone a ser exibido no botão
+ * @param label - O texto/label a ser exibido
+ * @param className - Classes CSS adicionais
+ * @param props - Todos os outros atributos HTML padrão de button
+ * @returns Um elemento button estilizado
+ *
+ * @example
+ * ```tsx
+ * <SelectionButton
+ *   icon={<TagIcon />}
+ *   label="Categoria"
+ *   onClick={() => handleAction()}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Usando ref para foco programático
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ *
+ * const handleFocus = () => {
+ *   buttonRef.current?.focus();
+ * };
+ *
+ * <SelectionButton
+ *   ref={buttonRef}
+ *   icon={<TagIcon />}
+ *   label="Categoria"
+ *   onClick={() => handleAction()}
+ * />
+ * ```
+ */
+declare const SelectionButton: react.ForwardRefExoticComponent<{
+    /** Ícone a ser exibido no botão */
+    icon: ReactNode;
+    /** Texto/label a ser exibido ao lado do ícone */
+    label: string;
+    /** Additional CSS classes to apply */
+    className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
 /**
  * Base text component props
  */
@@ -98,4 +179,4 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
  */
 declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
 
-export { Button, Text };
+export { Button, IconRoundedButton, SelectionButton, Text };

package/dist/index.js

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  IconRoundedButton: () => IconRoundedButton,
+  SelectionButton: () => SelectionButton,
   Text: () => Text
 });
 module.exports = __toCommonJS(index_exports);
@@ -82,8 +84,98 @@ var Button = ({
   );
 };
 
-// src/components/Text/Text.tsx
+// src/components/IconRoundedButton/IconRoundedButton.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var IconRoundedButton = ({
+  icon,
+  className = "",
+  disabled,
+  ...props
+}) => {
+  const baseClasses = [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "w-8",
+    "h-8",
+    "rounded-full",
+    "cursor-pointer",
+    "border",
+    "border-background-200",
+    "bg-background",
+    "text-text-950",
+    "hover:shadow-hard-shadow-1",
+    "focus-visible:outline-none",
+    "focus-visible:shadow-hard-shadow-1",
+    "focus-visible:ring-2",
+    "focus-visible:ring-indicator-info",
+    "focus-visible:ring-offset-0",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed"
+  ].join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      type: "button",
+      className: `${baseClasses} ${className}`,
+      disabled,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
+    }
+  );
+};
+
+// src/components/SelectionButton/SelectionButton.tsx
+var import_react = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SelectionButton = (0, import_react.forwardRef)(({ icon, label, className = "", disabled, ...props }, ref) => {
+  const baseClasses = [
+    "inline-flex",
+    "items-center",
+    "justify-start",
+    "gap-2",
+    "p-4",
+    "rounded-xl",
+    "cursor-pointer",
+    "border",
+    "border-border-50",
+    "bg-background",
+    "text-sm",
+    "text-text-700",
+    "font-bold",
+    "shadow-soft-shadow-1",
+    "hover:bg-background-100",
+    "focus-visible:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-indicator-info",
+    "focus-visible:ring-offset-0",
+    "focus-visible:shadow-none",
+    "active:ring-2",
+    "active:ring-primary-950",
+    "active:ring-offset-0",
+    "active:shadow-none",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed"
+  ].join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: `${baseClasses} ${className}`,
+      disabled,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: label })
+      ]
+    }
+  );
+});
+SelectionButton.displayName = "SelectionButton";
+
+// src/components/Text/Text.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var Text = ({
   children,
   size = "md",
@@ -128,7 +220,7 @@ var Text = ({
   colorClasses = colorClassMap[color] ?? colorClassMap.black;
   const baseClasses = "font-primary";
   const Component = as ?? "p";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Component,
     {
       className: `${baseClasses} ${sizeClasses} ${weightClasses} ${colorClasses} ${className}`,
@@ -140,5 +232,7 @@ var Text = ({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  IconRoundedButton,
+  SelectionButton,
   Text
 });

package/dist/index.mjs

@@ -55,8 +55,98 @@ var Button = ({
   );
 };
 
-// src/components/Text/Text.tsx
+// src/components/IconRoundedButton/IconRoundedButton.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
+var IconRoundedButton = ({
+  icon,
+  className = "",
+  disabled,
+  ...props
+}) => {
+  const baseClasses = [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "w-8",
+    "h-8",
+    "rounded-full",
+    "cursor-pointer",
+    "border",
+    "border-background-200",
+    "bg-background",
+    "text-text-950",
+    "hover:shadow-hard-shadow-1",
+    "focus-visible:outline-none",
+    "focus-visible:shadow-hard-shadow-1",
+    "focus-visible:ring-2",
+    "focus-visible:ring-indicator-info",
+    "focus-visible:ring-offset-0",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed"
+  ].join(" ");
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      className: `${baseClasses} ${className}`,
+      disabled,
+      ...props,
+      children: /* @__PURE__ */ jsx2("span", { className: "flex items-center justify-center w-5 h-5", children: icon })
+    }
+  );
+};
+
+// src/components/SelectionButton/SelectionButton.tsx
+import { forwardRef } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SelectionButton = forwardRef(({ icon, label, className = "", disabled, ...props }, ref) => {
+  const baseClasses = [
+    "inline-flex",
+    "items-center",
+    "justify-start",
+    "gap-2",
+    "p-4",
+    "rounded-xl",
+    "cursor-pointer",
+    "border",
+    "border-border-50",
+    "bg-background",
+    "text-sm",
+    "text-text-700",
+    "font-bold",
+    "shadow-soft-shadow-1",
+    "hover:bg-background-100",
+    "focus-visible:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-indicator-info",
+    "focus-visible:ring-offset-0",
+    "focus-visible:shadow-none",
+    "active:ring-2",
+    "active:ring-primary-950",
+    "active:ring-offset-0",
+    "active:shadow-none",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed"
+  ].join(" ");
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: `${baseClasses} ${className}`,
+      disabled,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3("span", { className: "flex items-center justify-center w-6 h-6", children: icon }),
+        /* @__PURE__ */ jsx3("span", { children: label })
+      ]
+    }
+  );
+});
+SelectionButton.displayName = "SelectionButton";
+
+// src/components/Text/Text.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Text = ({
   children,
   size = "md",
@@ -101,7 +191,7 @@ var Text = ({
   colorClasses = colorClassMap[color] ?? colorClassMap.black;
   const baseClasses = "font-primary";
   const Component = as ?? "p";
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     Component,
     {
       className: `${baseClasses} ${sizeClasses} ${weightClasses} ${colorClasses} ${className}`,
@@ -112,5 +202,7 @@ var Text = ({
 };
 export {
   Button,
+  IconRoundedButton,
+  SelectionButton,
   Text
 };

package/package.json

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