@neoptocom/neopto-ui 1.6.0 → 1.6.1

package/dist/index.cjs

@@ -897,7 +897,7 @@ function Autocomplete({
                     onClick: selectedOption && !open ? handleClear : () => setOpen((s) => !s),
                     disabled,
                     "aria-label": selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand",
-                    className: "absolute right-0 top-[-30%]",
+                    className: "absolute right-1 top-[-20%]",
                     iconClassName: [
                       "transition-transform duration-300 text-[var(--muted-fg)]",
                       open ? "rotate-180 text-[var(--color-brand)]" : ""
@@ -1549,21 +1549,8 @@ var Breadcrumb = ({
     ] }, index);
   }) }) });
 };
-var DAYS_OF_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-var MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
+var DAYS_OF_WEEK = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "S\xE1b"];
+var MONTHS = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];
 function isSameDay(date1, date2) {
   return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
 }
@@ -1640,31 +1627,32 @@ function Calendar({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: prevMonth,
-          className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
-          "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_left" })
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-sm font-medium text-[var(--fg)]", children: [
-        MONTHS[currentMonth.getMonth()],
-        " ",
-        currentMonth.getFullYear()
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "title-md", bold: "medium", className: "text-[var(--fg)]", children: MONTHS[currentMonth.getMonth()] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "title-md", bold: "medium", className: "text-cyan-500", children: currentMonth.getFullYear() })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: nextMonth,
-          className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
-          "aria-label": "Next month",
-          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_right" })
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: prevMonth,
+            className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
+            "aria-label": "Previous month",
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_left" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: nextMonth,
+            className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
+            "aria-label": "Next month",
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_right" })
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS_OF_WEEK.map((day) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",

package/dist/index.js

@@ -876,7 +876,7 @@ function Autocomplete({
                     onClick: selectedOption && !open ? handleClear : () => setOpen((s) => !s),
                     disabled,
                     "aria-label": selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand",
-                    className: "absolute right-0 top-[-30%]",
+                    className: "absolute right-1 top-[-20%]",
                     iconClassName: [
                       "transition-transform duration-300 text-[var(--muted-fg)]",
                       open ? "rotate-180 text-[var(--color-brand)]" : ""
@@ -1528,21 +1528,8 @@ var Breadcrumb = ({
     ] }, index);
   }) }) });
 };
-var DAYS_OF_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-var MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
+var DAYS_OF_WEEK = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "S\xE1b"];
+var MONTHS = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];
 function isSameDay(date1, date2) {
   return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
 }
@@ -1619,31 +1606,32 @@ function Calendar({
   }
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: prevMonth,
-          className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
-          "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_left" })
-        }
-      ),
-      /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium text-[var(--fg)]", children: [
-        MONTHS[currentMonth.getMonth()],
-        " ",
-        currentMonth.getFullYear()
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Typo, { variant: "title-md", bold: "medium", className: "text-[var(--fg)]", children: MONTHS[currentMonth.getMonth()] }),
+        /* @__PURE__ */ jsx(Typo, { variant: "title-md", bold: "medium", className: "text-cyan-500", children: currentMonth.getFullYear() })
       ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: nextMonth,
-          className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
-          "aria-label": "Next month",
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_right" })
-        }
-      )
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: prevMonth,
+            className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
+            "aria-label": "Previous month",
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_left" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: nextMonth,
+            className: "p-2 rounded-full hover:bg-[var(--muted)] transition-colors",
+            "aria-label": "Next month",
+            children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded text-[var(--fg)]", children: "chevron_right" })
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS_OF_WEEK.map((day) => /* @__PURE__ */ jsx(
       "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "private": false,
   "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
   "keywords": [

package/src/components/Autocomplete.tsx

@@ -222,7 +222,7 @@ export default function Autocomplete({
               }
               disabled={disabled}
               aria-label={selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand"}
-              className="absolute right-0 top-[-30%]"
+              className="absolute right-1 top-[-20%]"
               iconClassName={[
                 "transition-transform duration-300 text-[var(--muted-fg)]",
                 open ? "rotate-180 text-[var(--color-brand)]" : ""

package/src/components/Calendar.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import Typo from "./Typo";
 
 export type CalendarProps = {
   /** Currently selected date */
@@ -13,21 +14,8 @@ export type CalendarProps = {
   maxDate?: Date;
 };
 
-const DAYS_OF_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-const MONTHS = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December",
-];
+const DAYS_OF_WEEK = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
+const MONTHS = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"];
 
 function isSameDay(date1: Date, date2: Date): boolean {
   return (
@@ -130,29 +118,36 @@ export default function Calendar({
     <div className="w-full">
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
-        <button
-          type="button"
-          onClick={prevMonth}
-          className="p-2 rounded-full hover:bg-[var(--muted)] transition-colors"
-          aria-label="Previous month"
-        >
-          <span className="material-symbols-rounded text-[var(--fg)]">
-            chevron_left
-          </span>
-        </button>
-        <h3 className="text-sm font-medium text-[var(--fg)]">
-          {MONTHS[currentMonth.getMonth()]} {currentMonth.getFullYear()}
-        </h3>
-        <button
-          type="button"
-          onClick={nextMonth}
-          className="p-2 rounded-full hover:bg-[var(--muted)] transition-colors"
-          aria-label="Next month"
-        >
-          <span className="material-symbols-rounded text-[var(--fg)]">
-            chevron_right
-          </span>
-        </button>
+        <div className="flex items-center gap-2">
+            <Typo variant="title-md" bold="medium" className="text-[var(--fg)]">
+            {MONTHS[currentMonth.getMonth()]}
+            </Typo> 
+            <Typo variant="title-md" bold="medium" className="text-cyan-500">
+            {currentMonth.getFullYear()}
+            </Typo>
+        </div>
+        <div>
+            <button
+            type="button"
+            onClick={prevMonth}
+            className="p-2 rounded-full hover:bg-[var(--muted)] transition-colors"
+            aria-label="Previous month"
+            >
+            <span className="material-symbols-rounded text-[var(--fg)]">
+                chevron_left
+            </span>
+            </button>
+            <button
+            type="button"
+            onClick={nextMonth}
+            className="p-2 rounded-full hover:bg-[var(--muted)] transition-colors"
+            aria-label="Next month"
+            >
+            <span className="material-symbols-rounded text-[var(--fg)]">
+                chevron_right
+            </span>
+            </button>
+        </div>
       </div>
 
       {/* Days of week header */}