@neoptocom/neopto-ui 1.6.0 → 1.6.3

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",
@@ -1745,6 +1733,8 @@ var DateInput = React11__namespace.forwardRef(
     maxDate,
     placeholder = "00/00/0000",
     className = "",
+    lightBackgroundImage,
+    darkBackgroundImage,
     ...props
   }, ref) => {
     const [inputValue, setInputValue] = React11__namespace.useState(
@@ -1834,7 +1824,7 @@ var DateInput = React11__namespace.forwardRef(
           ...props
         }
       ),
-      showCalendar && !disabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-20 mt-2 w-full max-w-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", showDecorations: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+      showCalendar && !disabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-20 mt-2 w-full max-w-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "p-4", showDecorations: false, lightImage: lightBackgroundImage, darkImage: darkBackgroundImage, children: /* @__PURE__ */ jsxRuntime.jsx(
         Calendar,
         {
           selectedDate: inputValue !== placeholder && parseDate(inputValue) && isValidDate(parseDate(inputValue)) ? parseDate(inputValue) : /* @__PURE__ */ new Date(),

package/dist/index.d.cts

@@ -407,6 +407,10 @@ type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"
     maxDate?: Date;
     /** Placeholder text (default: "00/00/0000") */
     placeholder?: string;
+    /** Background image URL for light mode */
+    lightBackgroundImage?: string;
+    /** Background image URL for dark mode */
+    darkBackgroundImage?: string;
 };
 declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
     /** Label text displayed above the input */
@@ -423,6 +427,10 @@ declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
     maxDate?: Date;
     /** Placeholder text (default: "00/00/0000") */
     placeholder?: string;
+    /** Background image URL for light mode */
+    lightBackgroundImage?: string;
+    /** Background image URL for dark mode */
+    darkBackgroundImage?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 
 type CalendarProps = {

package/dist/index.d.ts

@@ -407,6 +407,10 @@ type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"
     maxDate?: Date;
     /** Placeholder text (default: "00/00/0000") */
     placeholder?: string;
+    /** Background image URL for light mode */
+    lightBackgroundImage?: string;
+    /** Background image URL for dark mode */
+    darkBackgroundImage?: string;
 };
 declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
     /** Label text displayed above the input */
@@ -423,6 +427,10 @@ declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
     maxDate?: Date;
     /** Placeholder text (default: "00/00/0000") */
     placeholder?: string;
+    /** Background image URL for light mode */
+    lightBackgroundImage?: string;
+    /** Background image URL for dark mode */
+    darkBackgroundImage?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 
 type CalendarProps = {

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",
@@ -1724,6 +1712,8 @@ var DateInput = React11.forwardRef(
     maxDate,
     placeholder = "00/00/0000",
     className = "",
+    lightBackgroundImage,
+    darkBackgroundImage,
     ...props
   }, ref) => {
     const [inputValue, setInputValue] = React11.useState(
@@ -1813,7 +1803,7 @@ var DateInput = React11.forwardRef(
           ...props
         }
       ),
-      showCalendar && !disabled && /* @__PURE__ */ jsx("div", { className: "absolute z-20 mt-2 w-full max-w-sm", children: /* @__PURE__ */ jsx(Card, { className: "p-4", showDecorations: false, children: /* @__PURE__ */ jsx(
+      showCalendar && !disabled && /* @__PURE__ */ jsx("div", { className: "absolute z-20 mt-2 w-full max-w-sm", children: /* @__PURE__ */ jsx(Card, { className: "p-4", showDecorations: false, lightImage: lightBackgroundImage, darkImage: darkBackgroundImage, children: /* @__PURE__ */ jsx(
         Calendar,
         {
           selectedDate: inputValue !== placeholder && parseDate(inputValue) && isValidDate(parseDate(inputValue)) ? parseDate(inputValue) : /* @__PURE__ */ new Date(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.6.0",
+  "version": "1.6.3",
   "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 */}

package/src/components/DateInput.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { Input } from "./Input";
 import Calendar from "./Calendar";
 import { Card } from "./Card";
+import { assets } from "..";
 
 export type DateInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
@@ -21,6 +22,10 @@ export type DateInputProps = Omit<
   maxDate?: Date;
   /** Placeholder text (default: "00/00/0000") */
   placeholder?: string;
+  /** Background image URL for light mode */
+  lightBackgroundImage?: string;
+  /** Background image URL for dark mode */
+  darkBackgroundImage?: string;
 };
 
 function formatDate(date: Date): string {
@@ -75,6 +80,8 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
       maxDate,
       placeholder = "00/00/0000",
       className = "",
+      lightBackgroundImage,
+      darkBackgroundImage,
       ...props
     },
     ref
@@ -199,7 +206,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
 
         {showCalendar && !disabled && (
           <div className="absolute z-20 mt-2 w-full max-w-sm">
-            <Card className="p-4" showDecorations={false}>
+            <Card className="p-4" showDecorations={false} lightImage={lightBackgroundImage} darkImage={darkBackgroundImage}>
               <Calendar
                 selectedDate={
                   inputValue !== placeholder &&

package/src/stories/DateInput.stories.tsx

@@ -1,6 +1,6 @@
+import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { DateInput } from "../components/DateInput";
-import { useState } from "react";
 
 const meta: Meta<typeof DateInput> = {
   title: "Components/DateInput",
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof DateInput>;
 
 export const Default: Story = {
   render: () => {
-    const [date, setDate] = useState<Date | null>(null);
+    const [date, setDate] = React.useState<Date | null>(null);
     return (
       <div className="flex flex-col gap-4 w-96">
         <DateInput
@@ -26,7 +26,7 @@ export const Default: Story = {
 
 export const WithInitialValue: Story = {
   render: () => {
-    const [date, setDate] = useState<Date | null>(new Date());
+    const [date, setDate] = React.useState<Date | null>(new Date());
     return (
       <div className="flex flex-col gap-4 w-96">
         <DateInput
@@ -41,7 +41,7 @@ export const WithInitialValue: Story = {
 
 export const WithoutLabel: Story = {
   render: () => {
-    const [date, setDate] = useState<Date | null>(null);
+    const [date, setDate] = React.useState<Date | null>(null);
     return (
       <div className="flex flex-col gap-4 w-96">
         <DateInput
@@ -55,7 +55,7 @@ export const WithoutLabel: Story = {
 
 export const Disabled: Story = {
   render: () => {
-    const [date, setDate] = useState<Date | null>(new Date());
+    const [date, setDate] = React.useState<Date | null>(new Date());
     return (
       <div className="flex flex-col gap-4 w-96">
         <DateInput
@@ -71,7 +71,7 @@ export const Disabled: Story = {
 
 export const WithError: Story = {
   render: () => {
-    const [date, setDate] = useState<Date | null>(null);
+    const [date, setDate] = React.useState<Date | null>(null);
     return (
       <div className="flex flex-col gap-4 w-96">
         <DateInput
@@ -87,7 +87,7 @@ export const WithError: Story = {
 
 export const WithMinMax: Story = {
   render: () => {
-    const [date, setDate] = useState<Date | null>(null);
+    const [date, setDate] = React.useState<Date | null>(null);
     const today = new Date();
     const minDate = new Date(today);
     minDate.setDate(today.getDate() - 7); // 7 days ago
@@ -113,8 +113,8 @@ export const WithMinMax: Story = {
 
 export const Multiple: Story = {
   render: () => {
-    const [startDate, setStartDate] = useState<Date | null>(null);
-    const [endDate, setEndDate] = useState<Date | null>(null);
+    const [startDate, setStartDate] = React.useState<Date | null>(null);
+    const [endDate, setEndDate] = React.useState<Date | null>(null);
 
     return (
       <div className="flex flex-col gap-4 w-96">