shadcn-ui-react 0.4.0 → 0.4.2

package/README.md

@@ -176,12 +176,14 @@ import {
 import * as z from "zod";
 
 const formSchema = z.object({
-  email: z
-    .string({ error: "Email is required" })
-    .email({ message: "Enter a valid email address" }),
+  email: z.email({
+    pattern:  z.regexes.email,
+    error: 'Email is required'
+  }),
   password: z
     .string()
     .min(8, { message: "Password must be at least 8 characters" }),
+  gender: z.enum(['male', 'female']).optional().nullable(),
 });
 
 type UserFormValue = z.infer<typeof formSchema>;
@@ -208,6 +210,15 @@ export default function UserAuthForm() {
         variant="outline" //outline | soft | ghost | filled | flushed | unstyled | link
         className="" //your style
       />
+      <FormField
+          control={form.control}
+          name="password"
+          type="password"
+          placeholder="Enter password"
+          label="Password"
+          variant="outline" //outline | soft | ghost | filled | flushed | unstyled | link
+          className="" //your style
+        />
       <FormSelect
         control={form.control}
         name="gender"

package/dist/index.cjs

@@ -2725,7 +2725,7 @@ function endOfBroadcastWeek(date, dateLib) {
 }
 
 // node_modules/react-day-picker/dist/esm/classes/DateLib.js
-var DateLib = class {
+var DateLib = class _DateLib {
   /**
    * Creates an instance of `DateLib`.
    *
@@ -2932,7 +2932,62 @@ var DateLib = class {
   formatNumber(value) {
     return this.replaceDigits(value.toString());
   }
+  /**
+   * Returns the preferred ordering for month and year labels for the current
+   * locale.
+   */
+  getMonthYearOrder() {
+    var _a;
+    const code = (_a = this.options.locale) == null ? void 0 : _a.code;
+    if (!code) {
+      return "month-first";
+    }
+    return _DateLib.yearFirstLocales.has(code) ? "year-first" : "month-first";
+  }
+  /**
+   * Formats the month/year pair respecting locale conventions.
+   *
+   * @since 9.11.0
+   */
+  formatMonthYear(date) {
+    const { locale, timeZone, numerals } = this.options;
+    const localeCode = locale == null ? void 0 : locale.code;
+    if (localeCode && _DateLib.yearFirstLocales.has(localeCode)) {
+      try {
+        const intl = new Intl.DateTimeFormat(localeCode, {
+          month: "long",
+          year: "numeric",
+          timeZone,
+          numberingSystem: numerals
+        });
+        const formatted = intl.format(date);
+        return formatted;
+      } catch (e) {
+      }
+    }
+    const pattern = this.getMonthYearOrder() === "year-first" ? "y LLLL" : "LLLL y";
+    return this.format(date, pattern);
+  }
 };
+DateLib.yearFirstLocales = /* @__PURE__ */ new Set([
+  "eu",
+  "hu",
+  "ja",
+  "ja-Hira",
+  "ja-JP",
+  "ko",
+  "ko-KR",
+  "lt",
+  "lt-LT",
+  "lv",
+  "lv-LV",
+  "mn",
+  "mn-MN",
+  "zh",
+  "zh-CN",
+  "zh-HK",
+  "zh-TW"
+]);
 var defaultDateLib = new DateLib();
 
 // node_modules/react-day-picker/dist/esm/classes/CalendarDay.js
@@ -3528,7 +3583,8 @@ __export(formatters_exports, {
 
 // node_modules/react-day-picker/dist/esm/formatters/formatCaption.js
 function formatCaption(month, options, dateLib) {
-  return (dateLib != null ? dateLib : new DateLib(options)).format(month, "LLLL y");
+  const lib = dateLib != null ? dateLib : new DateLib(options);
+  return lib.formatMonthYear(month);
 }
 var formatMonthCaption = formatCaption;
 
@@ -3672,7 +3728,8 @@ var labelDay = labelDayButton;
 
 // node_modules/react-day-picker/dist/esm/labels/labelGrid.js
 function labelGrid(date, options, dateLib) {
-  return (dateLib != null ? dateLib : new DateLib(options)).format(date, "LLLL y");
+  const lib = dateLib != null ? dateLib : new DateLib(options);
+  return lib.formatMonthYear(date);
 }
 var labelCaption = labelGrid;
 
@@ -4649,7 +4706,7 @@ function DayPicker(initialProps) {
     { value: contextValue },
     import_react32.default.createElement(
       components.Root,
-      __spreadValues({ rootRef: props.animate ? rootElRef : void 0, className, style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"] }, dataAttributes),
+      __spreadValues({ rootRef: props.animate ? rootElRef : void 0, className, style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"] }, dataAttributes),
       import_react32.default.createElement(
         components.Months,
         { className: classNames[UI.Months], style: styles == null ? void 0 : styles[UI.Months] },
@@ -4674,8 +4731,12 @@ function DayPicker(initialProps) {
             import_react32.default.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : void 0, className: classNames[UI.MonthCaption], style: styles == null ? void 0 : styles[UI.MonthCaption], calendarMonth, displayIndex }, (captionLayout == null ? void 0 : captionLayout.startsWith("dropdown")) ? import_react32.default.createElement(
               components.DropdownNav,
               { className: classNames[UI.Dropdowns], style: styles == null ? void 0 : styles[UI.Dropdowns] },
-              captionLayout === "dropdown" || captionLayout === "dropdown-months" ? import_react32.default.createElement(components.MonthsDropdown, { className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), classNames, components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters2, dateLib), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : import_react32.default.createElement("span", null, formatMonthDropdown2(calendarMonth.date, dateLib)),
-              captionLayout === "dropdown" || captionLayout === "dropdown-years" ? import_react32.default.createElement(components.YearsDropdown, { className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), classNames, components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters2, dateLib, Boolean(props.reverseYears)), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : import_react32.default.createElement("span", null, formatYearDropdown2(calendarMonth.date, dateLib)),
+              (() => {
+                const monthControl = captionLayout === "dropdown" || captionLayout === "dropdown-months" ? import_react32.default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), classNames, components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters2, dateLib), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : import_react32.default.createElement("span", { key: "month" }, formatMonthDropdown2(calendarMonth.date, dateLib));
+                const yearControl = captionLayout === "dropdown" || captionLayout === "dropdown-years" ? import_react32.default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), classNames, components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters2, dateLib, Boolean(props.reverseYears)), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : import_react32.default.createElement("span", { key: "year" }, formatYearDropdown2(calendarMonth.date, dateLib));
+                const controls = dateLib.getMonthYearOrder() === "year-first" ? [yearControl, monthControl] : [monthControl, yearControl];
+                return controls;
+              })(),
               import_react32.default.createElement("span", { role: "status", "aria-live": "polite", style: {
                 border: 0,
                 clip: "rect(0 0 0 0)",
@@ -5762,11 +5823,10 @@ var Form = ({
 var import_react33 = __toESM(require("react"), 1);
 var import_react_hook_form2 = require("react-hook-form");
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react2 = require("lucide-react");
 
 // src/components/input.tsx
 var React41 = __toESM(require("react"), 1);
-var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Input = React41.forwardRef(
   (_a, ref) => {
@@ -5776,6 +5836,7 @@ var Input = React41.forwardRef(
       size = "md",
       leading,
       trailing,
+      classNameDefault = true,
       invalid = false,
       disabled
     } = _b, props = __objRest(_b, [
@@ -5784,6 +5845,7 @@ var Input = React41.forwardRef(
       "size",
       "leading",
       "trailing",
+      "classNameDefault",
       "invalid",
       "disabled"
     ]);
@@ -5819,7 +5881,6 @@ var Input = React41.forwardRef(
           className: cn(
             "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 opacity-60",
             size === "lg" ? "text-[1.15rem]" : "text-[1rem]",
-            // no desplazamos visualmente en variantes sin padding
             variant === "flushed" || variant === "link" ? "hidden" : ""
           ),
           children: leading
@@ -5831,7 +5892,7 @@ var Input = React41.forwardRef(
           ref,
           "aria-invalid": invalid || void 0,
           disabled,
-          className: cn(
+          className: classNameDefault ? cn(
             base,
             variants2[variant],
             variant === "flushed" ? specialSizeForFlushed : variant === "link" ? specialSizeForLink : sizeCls,
@@ -5839,7 +5900,7 @@ var Input = React41.forwardRef(
             iconPadLeft,
             iconPadRight,
             className
-          )
+          ) : className
         }, props)
       ),
       trailing ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -5857,7 +5918,6 @@ var Input = React41.forwardRef(
   }
 );
 Input.displayName = "Input";
-Input.displayName = "Input";
 
 // src/components/Form/form-field.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -5937,7 +5997,7 @@ var FormField = (_a) => {
             children: [
               label,
               requiredLabel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                import_lucide_react3.Asterisk,
+                import_lucide_react2.Asterisk,
                 {
                   className: cn(
                     "ml-[1px] h-3 w-3 text-red-500",
@@ -5957,7 +6017,7 @@ var FormField = (_a) => {
             },
             placeholder,
             className: cn("bg-input px-[0.9rem] py-5", className),
-            classNameDefault: classNameDefault != null ? classNameDefault : true
+            classNameDefault
           })
         ) }),
         fieldError && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FormMessage, { className: messageClassName, children: fieldError })
@@ -6141,7 +6201,7 @@ var FormSelect = ({
               children: [
                 label,
                 requiredLabel && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                  import_lucide_react3.Asterisk,
+                  import_lucide_react2.Asterisk,
                   {
                     className: cn(
                       "ml-[4px] h-3 w-3 text-red-500",
@@ -6253,35 +6313,35 @@ var HoverCardContent = React43.forwardRef((_a, ref) => {
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 // src/components/icons.tsx
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 var IconsApp = {
-  dashboard: import_lucide_react4.LayoutDashboardIcon,
-  logo: import_lucide_react4.Command,
-  login: import_lucide_react4.LogIn,
-  close: import_lucide_react4.X,
-  profile: import_lucide_react4.User2Icon,
-  spinner: import_lucide_react4.Loader2,
-  kanban: import_lucide_react4.CircuitBoardIcon,
-  chevronLeft: import_lucide_react4.ChevronLeft,
-  chevronRight: import_lucide_react4.ChevronRight,
-  trash: import_lucide_react4.Trash,
-  employee: import_lucide_react4.UserX2Icon,
-  post: import_lucide_react4.FileText,
-  page: import_lucide_react4.File,
-  media: import_lucide_react4.Image,
-  settings: import_lucide_react4.Settings,
-  billing: import_lucide_react4.CreditCard,
-  ellipsis: import_lucide_react4.MoreVertical,
-  add: import_lucide_react4.Plus,
-  warning: import_lucide_react4.AlertTriangle,
-  user: import_lucide_react4.User,
-  arrowRight: import_lucide_react4.ArrowRight,
-  help: import_lucide_react4.HelpCircle,
-  pizza: import_lucide_react4.Pizza,
-  sun: import_lucide_react4.SunMedium,
-  moon: import_lucide_react4.Moon,
-  laptop: import_lucide_react4.Laptop,
-  check: import_lucide_react4.Check
+  dashboard: import_lucide_react3.LayoutDashboardIcon,
+  logo: import_lucide_react3.Command,
+  login: import_lucide_react3.LogIn,
+  close: import_lucide_react3.X,
+  profile: import_lucide_react3.User2Icon,
+  spinner: import_lucide_react3.Loader2,
+  kanban: import_lucide_react3.CircuitBoardIcon,
+  chevronLeft: import_lucide_react3.ChevronLeft,
+  chevronRight: import_lucide_react3.ChevronRight,
+  trash: import_lucide_react3.Trash,
+  employee: import_lucide_react3.UserX2Icon,
+  post: import_lucide_react3.FileText,
+  page: import_lucide_react3.File,
+  media: import_lucide_react3.Image,
+  settings: import_lucide_react3.Settings,
+  billing: import_lucide_react3.CreditCard,
+  ellipsis: import_lucide_react3.MoreVertical,
+  add: import_lucide_react3.Plus,
+  warning: import_lucide_react3.AlertTriangle,
+  user: import_lucide_react3.User,
+  arrowRight: import_lucide_react3.ArrowRight,
+  help: import_lucide_react3.HelpCircle,
+  pizza: import_lucide_react3.Pizza,
+  sun: import_lucide_react3.SunMedium,
+  moon: import_lucide_react3.Moon,
+  laptop: import_lucide_react3.Laptop,
+  check: import_lucide_react3.Check
 };
 var Icons = IconsApp;
 
@@ -6686,7 +6746,7 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
 // src/components/pagination.tsx
 var import_react_icons12 = require("@radix-ui/react-icons");
 var React48 = __toESM(require("react"), 1);
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var Pagination = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
@@ -6755,7 +6815,7 @@ var PaginationPreviousLast = (_a) => {
       className: cn("gap-1 pl-2.5", className)
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react5.ChevronLeft, { className: "h-4 w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react4.ChevronLeft, { className: "h-4 w-4" }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Previous Last" })
       ]
     })
@@ -6819,7 +6879,7 @@ var PaginationNextLast = (_a) => {
     }, props), {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Next Last" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react5.ChevronRight, { className: "h-4 w-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react4.ChevronRight, { className: "h-4 w-4" })
       ]
     })
   );
@@ -7044,7 +7104,7 @@ function SearchInput({
       value: searchTerm,
       onChange: (event) => setSearchTerm(event.target.value),
       className: cn("w-full md:max-w-sm", className),
-      classNameDefault: classNameDefault != null ? classNameDefault : true
+      classNameDefault
     }
   );
 }
@@ -7937,13 +7997,13 @@ var AlertModal = ({
 };
 
 // src/shared/breadcrumbs.tsx
-var import_lucide_react6 = require("lucide-react");
+var import_lucide_react5 = require("lucide-react");
 var import_react35 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function Breadcrumbs({ items, className, classNameList }) {
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Breadcrumb, { className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbList, { className: classNameList, children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react35.Fragment, { children: [
     index !== items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbItem, { className: item.className, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbLink, { href: item.link, children: item.title }) }),
-    index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react6.Slash, {}) }),
+    index < items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react5.Slash, {}) }),
     index === items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(BreadcrumbPage, { children: item.title })
   ] }, item.title)) }) });
 }
@@ -7952,7 +8012,7 @@ function Breadcrumbs({ items, className, classNameList }) {
 var import_react36 = __toESM(require("react"), 1);
 var import_react_icons18 = require("@radix-ui/react-icons");
 var import_react_table = require("@tanstack/react-table");
-var import_lucide_react7 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function DataTable({
   columns,
@@ -8103,7 +8163,7 @@ function DataTable({
                 pageIndex: pagination.pageIndex - 1
               })),
               disabled: pagination.pageIndex === 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react7.ChevronLeftIcon, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronLeftIcon, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -8116,7 +8176,7 @@ function DataTable({
                 pageIndex: pagination.pageIndex + 1
               })),
               disabled: pagination.pageIndex + 1 >= pageCount,
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react7.ChevronRightIcon, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.ChevronRightIcon, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
@@ -8178,7 +8238,7 @@ function DataTableSkeleton({
 
 // src/shared/fileupload.tsx
 var import_react_icons19 = require("@radix-ui/react-icons");
-var import_lucide_react8 = require("lucide-react");
+var import_lucide_react7 = require("lucide-react");
 var import_react37 = require("react");
 var import_react_dropzone = require("react-dropzone");
 var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -8209,7 +8269,7 @@ function FileUpload({
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("input", __spreadValues({}, getInputProps())),
         value && !!value.length ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ImagePreview, { file: value[0] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_icons19.AvatarIcon, { className: "h-36 w-36 text-gray-100" }),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: "absolute -bottom-5 left-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 transform flex-col items-center justify-center bg-gray-300 bg-opacity-50 py-1 text-xs font-normal text-muted-foreground ", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react8.CameraIcon, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_lucide_react7.CameraIcon, { className: "h-4 w-4 text-muted-foreground" }),
           label
         ] })
       ] }))

package/dist/index.js

@@ -2464,7 +2464,7 @@ function endOfBroadcastWeek(date, dateLib) {
 }
 
 // node_modules/react-day-picker/dist/esm/classes/DateLib.js
-var DateLib = class {
+var DateLib = class _DateLib {
   /**
    * Creates an instance of `DateLib`.
    *
@@ -2671,7 +2671,62 @@ var DateLib = class {
   formatNumber(value) {
     return this.replaceDigits(value.toString());
   }
+  /**
+   * Returns the preferred ordering for month and year labels for the current
+   * locale.
+   */
+  getMonthYearOrder() {
+    var _a;
+    const code = (_a = this.options.locale) == null ? void 0 : _a.code;
+    if (!code) {
+      return "month-first";
+    }
+    return _DateLib.yearFirstLocales.has(code) ? "year-first" : "month-first";
+  }
+  /**
+   * Formats the month/year pair respecting locale conventions.
+   *
+   * @since 9.11.0
+   */
+  formatMonthYear(date) {
+    const { locale, timeZone, numerals } = this.options;
+    const localeCode = locale == null ? void 0 : locale.code;
+    if (localeCode && _DateLib.yearFirstLocales.has(localeCode)) {
+      try {
+        const intl = new Intl.DateTimeFormat(localeCode, {
+          month: "long",
+          year: "numeric",
+          timeZone,
+          numberingSystem: numerals
+        });
+        const formatted = intl.format(date);
+        return formatted;
+      } catch (e) {
+      }
+    }
+    const pattern = this.getMonthYearOrder() === "year-first" ? "y LLLL" : "LLLL y";
+    return this.format(date, pattern);
+  }
 };
+DateLib.yearFirstLocales = /* @__PURE__ */ new Set([
+  "eu",
+  "hu",
+  "ja",
+  "ja-Hira",
+  "ja-JP",
+  "ko",
+  "ko-KR",
+  "lt",
+  "lt-LT",
+  "lv",
+  "lv-LV",
+  "mn",
+  "mn-MN",
+  "zh",
+  "zh-CN",
+  "zh-HK",
+  "zh-TW"
+]);
 var defaultDateLib = new DateLib();
 
 // node_modules/react-day-picker/dist/esm/classes/CalendarDay.js
@@ -3267,7 +3322,8 @@ __export(formatters_exports, {
 
 // node_modules/react-day-picker/dist/esm/formatters/formatCaption.js
 function formatCaption(month, options, dateLib) {
-  return (dateLib != null ? dateLib : new DateLib(options)).format(month, "LLLL y");
+  const lib = dateLib != null ? dateLib : new DateLib(options);
+  return lib.formatMonthYear(month);
 }
 var formatMonthCaption = formatCaption;
 
@@ -3411,7 +3467,8 @@ var labelDay = labelDayButton;
 
 // node_modules/react-day-picker/dist/esm/labels/labelGrid.js
 function labelGrid(date, options, dateLib) {
-  return (dateLib != null ? dateLib : new DateLib(options)).format(date, "LLLL y");
+  const lib = dateLib != null ? dateLib : new DateLib(options);
+  return lib.formatMonthYear(date);
 }
 var labelCaption = labelGrid;
 
@@ -4388,7 +4445,7 @@ function DayPicker(initialProps) {
     { value: contextValue },
     React32.createElement(
       components.Root,
-      __spreadValues({ rootRef: props.animate ? rootElRef : void 0, className, style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"] }, dataAttributes),
+      __spreadValues({ rootRef: props.animate ? rootElRef : void 0, className, style, dir: props.dir, id: props.id, lang: props.lang, nonce: props.nonce, title: props.title, role: props.role, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"] }, dataAttributes),
       React32.createElement(
         components.Months,
         { className: classNames[UI.Months], style: styles == null ? void 0 : styles[UI.Months] },
@@ -4413,8 +4470,12 @@ function DayPicker(initialProps) {
             React32.createElement(components.MonthCaption, { "data-animated-caption": props.animate ? "true" : void 0, className: classNames[UI.MonthCaption], style: styles == null ? void 0 : styles[UI.MonthCaption], calendarMonth, displayIndex }, (captionLayout == null ? void 0 : captionLayout.startsWith("dropdown")) ? React32.createElement(
               components.DropdownNav,
               { className: classNames[UI.Dropdowns], style: styles == null ? void 0 : styles[UI.Dropdowns] },
-              captionLayout === "dropdown" || captionLayout === "dropdown-months" ? React32.createElement(components.MonthsDropdown, { className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), classNames, components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters2, dateLib), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : React32.createElement("span", null, formatMonthDropdown2(calendarMonth.date, dateLib)),
-              captionLayout === "dropdown" || captionLayout === "dropdown-years" ? React32.createElement(components.YearsDropdown, { className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), classNames, components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters2, dateLib, Boolean(props.reverseYears)), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : React32.createElement("span", null, formatYearDropdown2(calendarMonth.date, dateLib)),
+              (() => {
+                const monthControl = captionLayout === "dropdown" || captionLayout === "dropdown-months" ? React32.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), classNames, components, disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters2, dateLib), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : React32.createElement("span", { key: "month" }, formatMonthDropdown2(calendarMonth.date, dateLib));
+                const yearControl = captionLayout === "dropdown" || captionLayout === "dropdown-years" ? React32.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), classNames, components, disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date), options: getYearOptions(navStart, navEnd, formatters2, dateLib, Boolean(props.reverseYears)), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : React32.createElement("span", { key: "year" }, formatYearDropdown2(calendarMonth.date, dateLib));
+                const controls = dateLib.getMonthYearOrder() === "year-first" ? [yearControl, monthControl] : [monthControl, yearControl];
+                return controls;
+              })(),
               React32.createElement("span", { role: "status", "aria-live": "polite", style: {
                 border: 0,
                 clip: "rect(0 0 0 0)",
@@ -5518,7 +5579,6 @@ import { Asterisk } from "lucide-react";
 
 // src/components/input.tsx
 import * as React41 from "react";
-import { Mail, Search, Eye, EyeOff } from "lucide-react";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var Input = React41.forwardRef(
   (_a, ref) => {
@@ -5528,6 +5588,7 @@ var Input = React41.forwardRef(
       size = "md",
       leading,
       trailing,
+      classNameDefault = true,
       invalid = false,
       disabled
     } = _b, props = __objRest(_b, [
@@ -5536,6 +5597,7 @@ var Input = React41.forwardRef(
       "size",
       "leading",
       "trailing",
+      "classNameDefault",
       "invalid",
       "disabled"
     ]);
@@ -5571,7 +5633,6 @@ var Input = React41.forwardRef(
           className: cn(
             "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 opacity-60",
             size === "lg" ? "text-[1.15rem]" : "text-[1rem]",
-            // no desplazamos visualmente en variantes sin padding
             variant === "flushed" || variant === "link" ? "hidden" : ""
           ),
           children: leading
@@ -5583,7 +5644,7 @@ var Input = React41.forwardRef(
           ref,
           "aria-invalid": invalid || void 0,
           disabled,
-          className: cn(
+          className: classNameDefault ? cn(
             base,
             variants2[variant],
             variant === "flushed" ? specialSizeForFlushed : variant === "link" ? specialSizeForLink : sizeCls,
@@ -5591,7 +5652,7 @@ var Input = React41.forwardRef(
             iconPadLeft,
             iconPadRight,
             className
-          )
+          ) : className
         }, props)
       ),
       trailing ? /* @__PURE__ */ jsx17(
@@ -5609,7 +5670,6 @@ var Input = React41.forwardRef(
   }
 );
 Input.displayName = "Input";
-Input.displayName = "Input";
 
 // src/components/Form/form-field.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -5709,7 +5769,7 @@ var FormField = (_a) => {
             },
             placeholder,
             className: cn("bg-input px-[0.9rem] py-5", className),
-            classNameDefault: classNameDefault != null ? classNameDefault : true
+            classNameDefault
           })
         ) }),
         fieldError && /* @__PURE__ */ jsx18(FormMessage, { className: messageClassName, children: fieldError })
@@ -6832,7 +6892,7 @@ function SearchInput({
       value: searchTerm,
       onChange: (event) => setSearchTerm(event.target.value),
       className: cn("w-full md:max-w-sm", className),
-      classNameDefault: classNameDefault != null ? classNameDefault : true
+      classNameDefault
     }
   );
 }
@@ -7981,7 +8041,7 @@ function DataTableSkeleton({
 // src/shared/fileupload.tsx
 import { AvatarIcon } from "@radix-ui/react-icons";
 import { CameraIcon } from "lucide-react";
-import { useEffect as useEffect5, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 import { useDropzone } from "react-dropzone";
 import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 function FileUpload({
@@ -8019,7 +8079,7 @@ function FileUpload({
   ) });
 }
 function ImagePreview({ file }) {
-  const [objectUrl, setObjectUrl] = useState6(null);
+  const [objectUrl, setObjectUrl] = useState5(null);
   useEffect5(() => {
     const url = URL.createObjectURL(file);
     setObjectUrl(url);

package/dist/style.css

@@ -773,9 +773,6 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
-  .gap-3 {
-    gap: calc(var(--spacing) * 3);
-  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -814,13 +811,6 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-8 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -2653,11 +2643,6 @@
       max-width: var(--container-sm);
     }
   }
-  .sm\:grid-cols-2 {
-    @media (width >= 40rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
   .sm\:flex-col {
     @media (width >= 40rem) {
       flex-direction: column;
@@ -2783,11 +2768,6 @@
       width: 250px;
     }
   }
-  .lg\:grid-cols-3 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
   .lg\:gap-8 {
     @media (width >= 64rem) {
       gap: calc(var(--spacing) * 8);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "private": false,
   "author": "Bleker Cordova <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",
@@ -63,19 +63,19 @@
     "@types/node": "^24.5.2",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
-    "@typescript-eslint/eslint-plugin": "^8.44.0",
-    "@typescript-eslint/parser": "^8.44.0",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
     "autoprefixer": "^10.4.21",
     "babel-jest": "^30.1.2",
     "cross-env": "^10.0.0",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-react-refresh": "^0.4.21",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.1.3",
     "jest-environment-jsdom": "^30.1.2",
     "react": "^19.1.1",
-    "react-day-picker": "^9.10.0",
+    "react-day-picker": "^9.11.0",
     "react-dom": "^19.1.1",
     "react-test-renderer": "^19.1.1",
     "rimraf": "^6.0.1",
@@ -84,14 +84,14 @@
     "tsup": "^8.5.0",
     "typescript": "^5.9.2",
     "vaul": "^1.1.2",
-    "vite": "^7.1.6",
+    "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-ts-alias": "^0.1.1",
-    "zod": "^4.1.9"
+    "zod": "^4.1.11"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.3.1 || ^19.1.0 || ^20.0.0",
-    "react-dom": "^17.0.0 || ^18.3.1 || ^19.1.0 || ^20.0.0"
+    "react": "^17.0.0 || ^18.3.1 || ^19.1.1 || ^20.0.0",
+    "react-dom": "^17.0.0 || ^18.3.1 || ^19.1.1 || ^20.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -132,12 +132,12 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.23.16",
+    "framer-motion": "^12.23.22",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.544.0",
     "next-themes": "^0.4.6",
     "react-dropzone": "^14.3.8",
-    "react-helmet-next": "^0.0.1",
+    "react-helmet-next": "^0.0.2",
     "react-hook-form": "^7.63.0",
     "react-resizable-panels": "^3.0.6",
     "sonner": "^2.0.7",