shadcn-ui-react 0.7.13 → 0.7.15

package/dist/index.cjs

@@ -3495,10 +3495,10 @@ function CaptionLabel(props) {
 // node_modules/react-day-picker/dist/esm/components/Chevron.js
 var import_react2 = __toESM(require("react"), 1);
 function Chevron(props) {
-  const { size = 24, orientation = "left", className } = props;
+  const { size = 24, orientation = "left", className, style } = props;
   return import_react2.default.createElement(
     "svg",
-    { className, width: size, height: size, viewBox: "0 0 24 24" },
+    { className, style, width: size, height: size, viewBox: "0 0 24 24" },
     orientation === "up" && import_react2.default.createElement("polygon", { points: "6.77 17 12.5 11.43 18.24 17 20 15.28 12.5 8 5 15.28" }),
     orientation === "down" && import_react2.default.createElement("polygon", { points: "6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72" }),
     orientation === "left" && import_react2.default.createElement("polygon", { points: "16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20" }),
@@ -3598,18 +3598,18 @@ function useDayPicker() {
 // node_modules/react-day-picker/dist/esm/components/Dropdown.js
 function Dropdown(props) {
   const _a = props, { options, className } = _a, selectProps = __objRest(_a, ["options", "className"]);
-  const { classNames, components } = useDayPicker();
+  const { classNames, components, styles } = useDayPicker();
   const cssClassSelect = [classNames[UI.Dropdown], className].join(" ");
   const selectedOption = options == null ? void 0 : options.find(({ value }) => value === selectProps.value);
   return import_react6.default.createElement(
     "span",
-    { "data-disabled": selectProps.disabled, className: classNames[UI.DropdownRoot] },
+    { "data-disabled": selectProps.disabled, className: classNames[UI.DropdownRoot], style: styles == null ? void 0 : styles[UI.DropdownRoot] },
     import_react6.default.createElement(components.Select, __spreadValues({ className: cssClassSelect }, selectProps), options == null ? void 0 : options.map(({ value, label, disabled }) => import_react6.default.createElement(components.Option, { key: value, value, disabled }, label))),
     import_react6.default.createElement(
       "span",
-      { className: classNames[UI.CaptionLabel], "aria-hidden": true },
+      { className: classNames[UI.CaptionLabel], style: styles == null ? void 0 : styles[UI.CaptionLabel], "aria-hidden": true },
       selectedOption == null ? void 0 : selectedOption.label,
-      import_react6.default.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI.Chevron] })
+      import_react6.default.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI.Chevron], style: styles == null ? void 0 : styles[UI.Chevron] })
     )
   );
 }
@@ -3663,7 +3663,7 @@ function MonthsDropdown(props) {
 var import_react14 = __toESM(require("react"), 1);
 function Nav(props) {
   const _a = props, { onPreviousClick, onNextClick, previousMonth, nextMonth } = _a, navProps = __objRest(_a, ["onPreviousClick", "onNextClick", "previousMonth", "nextMonth"]);
-  const { components, classNames, labels: { labelPrevious: labelPrevious2, labelNext: labelNext2 } } = useDayPicker();
+  const { components, classNames, styles, labels: { labelPrevious: labelPrevious2, labelNext: labelNext2 } } = useDayPicker();
   const handleNextClick = (0, import_react14.useCallback)((e) => {
     if (nextMonth) {
       onNextClick == null ? void 0 : onNextClick(e);
@@ -3679,13 +3679,13 @@ function Nav(props) {
     __spreadValues({}, navProps),
     import_react14.default.createElement(
       components.PreviousMonthButton,
-      { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick },
-      import_react14.default.createElement(components.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames[UI.Chevron], orientation: "left" })
+      { type: "button", className: classNames[UI.PreviousMonthButton], style: styles == null ? void 0 : styles[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick },
+      import_react14.default.createElement(components.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames[UI.Chevron], style: styles == null ? void 0 : styles[UI.Chevron], orientation: "left" })
     ),
     import_react14.default.createElement(
       components.NextMonthButton,
-      { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick },
-      import_react14.default.createElement(components.Chevron, { disabled: nextMonth ? void 0 : true, orientation: "right", className: classNames[UI.Chevron] })
+      { type: "button", className: classNames[UI.NextMonthButton], style: styles == null ? void 0 : styles[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick },
+      import_react14.default.createElement(components.Chevron, { disabled: nextMonth ? void 0 : true, orientation: "right", className: classNames[UI.Chevron], style: styles == null ? void 0 : styles[UI.Chevron] })
     )
   );
 }
@@ -5372,6 +5372,14 @@ function DayPicker(initialProps) {
     style: __spreadValues(__spreadValues({}, styles == null ? void 0 : styles[UI.Root]), props.style)
   }), [classNames, props.className, props.style, styles]);
   const dataAttributes = getDataAttributes(props);
+  const getDropdownStyle = (dropdown) => {
+    const dropdownStyle = styles == null ? void 0 : styles[UI.Dropdown];
+    const specificDropdownStyle = styles == null ? void 0 : styles[dropdown];
+    if (!dropdownStyle && !specificDropdownStyle) {
+      return void 0;
+    }
+    return __spreadValues(__spreadValues({}, dropdownStyle), specificDropdownStyle);
+  };
   const rootElRef = (0, import_react31.useRef)(null);
   useAnimation(rootElRef, Boolean(props.animate), {
     classNames,
@@ -5420,15 +5428,15 @@ function DayPicker(initialProps) {
             },
             navLayout === "around" && !props.hideNavigation && displayIndex === 0 && import_react31.default.createElement(
               components.PreviousMonthButton,
-              { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : void 0 },
-              import_react31.default.createElement(components.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" })
+              { type: "button", className: classNames[UI.PreviousMonthButton], style: styles == null ? void 0 : styles[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : void 0 },
+              import_react31.default.createElement(components.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames[UI.Chevron], style: styles == null ? void 0 : styles[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" })
             ),
             import_react31.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_react31.default.createElement(
               components.DropdownNav,
               { className: classNames[UI.Dropdowns], style: styles == null ? void 0 : styles[UI.Dropdowns] },
               (() => {
-                const monthControl = captionLayout === "dropdown" || captionLayout === "dropdown-months" ? import_react31.default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date, monthOffset), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters2, dateLib), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : import_react31.default.createElement("span", { key: "month" }, formatMonthDropdown2(calendarMonth.date, dateLib));
-                const yearControl = captionLayout === "dropdown" || captionLayout === "dropdown-years" ? import_react31.default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date, monthOffset), options: getYearOptions(navStart, navEnd, formatters2, dateLib, Boolean(props.reverseYears)), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : import_react31.default.createElement("span", { key: "year" }, formatYearDropdown2(calendarMonth.date, dateLib));
+                const monthControl = captionLayout === "dropdown" || captionLayout === "dropdown-months" ? import_react31.default.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date, monthOffset), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters2, dateLib), style: getDropdownStyle(UI.MonthsDropdown), value: dateLib.getMonth(calendarMonth.date) }) : import_react31.default.createElement("span", { key: "month" }, formatMonthDropdown2(calendarMonth.date, dateLib));
+                const yearControl = captionLayout === "dropdown" || captionLayout === "dropdown-years" ? import_react31.default.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date, monthOffset), options: getYearOptions(navStart, navEnd, formatters2, dateLib, Boolean(props.reverseYears)), style: getDropdownStyle(UI.YearsDropdown), value: dateLib.getYear(calendarMonth.date) }) : import_react31.default.createElement("span", { key: "year" }, formatYearDropdown2(calendarMonth.date, dateLib));
                 const controls = dateLib.getMonthYearOrder() === "year-first" ? [yearControl, monthControl] : [monthControl, yearControl];
                 return controls;
               })(),
@@ -5444,11 +5452,11 @@ function DayPicker(initialProps) {
                 whiteSpace: "nowrap",
                 wordWrap: "normal"
               } }, formatCaption2(calendarMonth.date, dateLib.options, dateLib))
-            ) : import_react31.default.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption2(calendarMonth.date, dateLib.options, dateLib))),
+            ) : import_react31.default.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], style: styles == null ? void 0 : styles[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption2(calendarMonth.date, dateLib.options, dateLib))),
             navLayout === "around" && !props.hideNavigation && displayIndex === numberOfMonths - 1 && import_react31.default.createElement(
               components.NextMonthButton,
-              { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : void 0 },
-              import_react31.default.createElement(components.Chevron, { disabled: nextMonth ? void 0 : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" })
+              { type: "button", className: classNames[UI.NextMonthButton], style: styles == null ? void 0 : styles[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : void 0 },
+              import_react31.default.createElement(components.Chevron, { disabled: nextMonth ? void 0 : true, className: classNames[UI.Chevron], style: styles == null ? void 0 : styles[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" })
             ),
             displayIndex === numberOfMonths - 1 && navLayout === "after" && !props.hideNavigation && import_react31.default.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames[UI.Nav], style: styles == null ? void 0 : styles[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth, nextMonth }),
             import_react31.default.createElement(
@@ -7704,11 +7712,15 @@ var SelectContent = React46.forwardRef(
         setContentStyle(void 0);
       }
     }, [context.open]);
+    function clampNumber(value, min2, max2) {
+      return Math.min(Math.max(value, min2), max2);
+    }
     const updatePosition = React46.useCallback(() => {
       const trigger = context.triggerRef.current;
       if (!trigger) return;
       const rect = trigger.getBoundingClientRect();
       const viewportPadding = 8;
+      const viewportWidth = window.innerWidth;
       const preferredMaxHeight = 288;
       const minUsefulHeight = 140;
       const availableBelow = window.innerHeight - rect.bottom - viewportPadding - sideOffset;
@@ -7726,25 +7738,47 @@ var SelectContent = React46.forwardRef(
       const baseStyle = {
         position: "fixed",
         zIndex: 9999,
-        width: rect.width,
+        width: "max-content",
         minWidth: rect.width,
-        maxWidth: "calc(100vw - 16px)",
         maxHeight: contentMaxHeight
       };
       if (align === "start") {
-        baseStyle.left = rect.left;
+        const left = clampNumber(
+          rect.left,
+          viewportPadding,
+          Math.max(
+            viewportPadding,
+            viewportWidth - viewportPadding - rect.width
+          )
+        );
+        baseStyle.left = left;
         baseStyle.right = void 0;
         baseStyle.transform = void 0;
+        baseStyle.maxWidth = Math.max(
+          rect.width,
+          viewportWidth - left - viewportPadding
+        );
       }
       if (align === "center") {
-        baseStyle.left = rect.left + rect.width / 2;
+        const center = clampNumber(
+          rect.left + rect.width / 2,
+          viewportPadding + rect.width / 2,
+          viewportWidth - viewportPadding - rect.width / 2
+        );
+        baseStyle.left = center;
         baseStyle.right = void 0;
         baseStyle.transform = "translateX(-50%)";
+        baseStyle.maxWidth = viewportWidth - viewportPadding * 2;
       }
       if (align === "end") {
-        baseStyle.left = rect.right;
-        baseStyle.right = void 0;
-        baseStyle.transform = "translateX(-100%)";
+        const right = Math.max(viewportPadding, viewportWidth - rect.right);
+        baseStyle.left = void 0;
+        baseStyle.right = right;
+        baseStyle.transform = void 0;
+        baseStyle.maxWidth = Math.max(
+          rect.width,
+          viewportWidth - right - viewportPadding
+        );
       }
       if (nextSide === "bottom") {
         baseStyle.top = rect.bottom + sideOffset;
@@ -7813,38 +7847,38 @@ var SelectContent = React46.forwardRef(
         cancelAnimationFrame(frame);
       };
     }, [context.activeValue, context.items, context.open]);
-    if (!context.open) {
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { hidden: true, "aria-hidden": "true", style: { display: "none" }, children });
-    }
-    if (!mounted || !contentStyle) return null;
+    if (!mounted) return null;
+    const isVisible = context.open && Boolean(contentStyle);
     return (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         __spreadProps(__spreadValues({}, props), {
           ref: composeRefs(ref, context.contentRef),
           role: "listbox",
+          "aria-hidden": !isVisible,
           "data-side": side,
           "data-select-content": true,
           className: cn(
-            "pointer-events-auto min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+            "pointer-events-auto overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
             className
           ),
-          style: __spreadValues(__spreadValues({}, contentStyle), style),
+          style: __spreadProps(__spreadValues(__spreadValues({}, contentStyle != null ? contentStyle : {
+            position: "fixed",
+            zIndex: 9999
+          }), style), {
+            display: isVisible ? void 0 : "none"
+          }),
           children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               ref: scrollRef,
               "data-select-scroll-content": true,
-              className: cn(
-                "max-h-full overflow-x-hidden overflow-y-auto overscroll-contain px-1 py-1",
-                "scrollbar-gutter-stable"
-              ),
+              className: "max-h-full overflow-x-hidden overflow-y-auto overscroll-contain px-1 py-1",
               style: {
-                maxHeight: contentStyle.maxHeight,
+                maxHeight: contentStyle == null ? void 0 : contentStyle.maxHeight,
                 overflowX: "hidden",
                 overflowY: "auto",
                 overscrollBehavior: "contain",
-                scrollbarGutter: "stable",
                 WebkitOverflowScrolling: "touch"
               },
               onWheel: (event) => {
@@ -7971,7 +8005,7 @@ var SelectItem = React46.forwardRef(
         "data-highlighted": isActive ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
         className: cn(
-          "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 outline-none transition-colors",
+          "relative flex w-full min-w-0 cursor-default select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-left outline-none transition-colors",
           sizeClasses.selectItem,
           !disabled && "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
           disabled && "pointer-events-none opacity-50",
@@ -7996,7 +8030,7 @@ var SelectItem = React46.forwardRef(
       }, props), {
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_icons9.CheckIcon, { className: "h-4 w-4" }) : null }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate", children })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "min-w-0 flex-1 truncate whitespace-nowrap", children })
         ]
       })
     );
@@ -8138,13 +8172,23 @@ function SearchableSelectBase({
       96,
       Math.min(preferredMaxHeight, availableHeight)
     );
+    const left = Math.min(
+      Math.max(viewportPadding, rect.left),
+      Math.max(
+        viewportPadding,
+        window.innerWidth - viewportPadding - rect.width
+      )
+    );
     const nextStyle = {
       position: "fixed",
       zIndex: 9999,
-      left: Math.max(viewportPadding, rect.left),
-      width: rect.width,
+      left,
+      width: "max-content",
       minWidth: rect.width,
-      maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+      maxWidth: Math.max(
+        rect.width,
+        window.innerWidth - left - viewportPadding
+      ),
       maxHeight: contentMaxHeight
     };
     if (shouldOpenBelow) {
@@ -8269,13 +8313,12 @@ function SearchableSelectBase({
           {
             id: listboxId,
             role: "listbox",
-            className: "max-h-full overflow-x-hidden overflow-y-auto overscroll-contain p-1 scrollbar-gutter-stable",
+            className: "max-h-full overflow-x-hidden overflow-y-auto overscroll-contain p-1",
             style: {
               maxHeight: contentStyle.maxHeight,
               overflowX: "hidden",
               overflowY: "auto",
               overscrollBehavior: "contain",
-              scrollbarGutter: "stable",
               WebkitOverflowScrolling: "touch"
             },
             onWheel: (event) => {
@@ -8518,7 +8561,6 @@ var FormSelect = ({
   const form = (0, import_react_hook_form5.useFormContext)();
   const controllerControl = control != null ? control : form == null ? void 0 : form.control;
   const sizeClasses = getFormSizeClasses(size, customSize);
-  const triggerSizeClass = getFormControlSizeClass(variant, sizeClasses);
   const normalizedOptions = React48.useMemo(() => {
     if (options) return options;
     return (items != null ? items : []).map((item) => {
@@ -8608,7 +8650,7 @@ var FormSelect = ({
                 field.onBlur();
               }
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             Select2,
             {
               value: (_b = field.value) != null ? _b : "",
@@ -8617,19 +8659,36 @@ var FormSelect = ({
                 if (!nextOpen) field.onBlur();
               },
               disabled,
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                SelectTrigger,
-                {
-                  className: classNameDefault ? cn(
-                    formControlBase,
-                    formInputVariants[variant],
-                    triggerSizeClass,
-                    hasError && formControlErrorClass,
-                    className
-                  ) : className,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, { placeholder })
-                }
-              ) })
+              size,
+              customSize,
+              variant,
+              invalid: hasError,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectTrigger, { className, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectValue, { placeholder }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  SelectContent,
+                  {
+                    position: "popper",
+                    sideOffset: 6,
+                    className: cn(
+                      "z-50 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none",
+                      contentClassName
+                    ),
+                    onWheelCapture: (event) => event.stopPropagation(),
+                    onTouchMoveCapture: (event) => event.stopPropagation(),
+                    children: normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                      SelectItem,
+                      {
+                        value: option.value,
+                        disabled: option.disabled,
+                        className: cn(sizeClasses.selectItem, itemClassName),
+                        children: option.label
+                      },
+                      option.value
+                    ))
+                  }
+                )
+              ]
             }
           ),
           fieldError ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -10381,25 +10440,27 @@ function UiSelect({
   variant = "outline",
   errorMessage,
   htmlFormItemId,
-  position
+  position = "popper",
+  contentAlign = "center",
+  contentSideOffset = 6
 }) {
   const generatedId = React72.useId();
   const triggerId = htmlFormItemId != null ? htmlFormItemId : generatedId;
   const messageId = `${triggerId}-message`;
   const hasError = Boolean(errorMessage);
   const sizeClasses = getFormSizeClasses(size, customSize);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("w-full space-y-0.5", selectClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cn("w-full min-w-0 space-y-0.5", selectClassName), children: [
     label ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       Label3,
       {
         htmlFor: triggerId,
         className: cn(
-          "flex items-center gap-0.5 text-sm font-medium -mt-0.75 -pt-1.5",
+          "flex items-center gap-0.5 text-sm font-medium",
           hasError && "text-destructive",
           labelClassName
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "min-w-0 truncate", children: label }),
           requiredLabel ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             import_lucide_react9.Asterisk,
             {
@@ -10431,7 +10492,7 @@ function UiSelect({
               id: triggerId,
               "aria-invalid": hasError || void 0,
               "aria-describedby": errorMessage ? messageId : void 0,
-              className,
+              className: cn("min-w-0", className),
               children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectValue, { placeholder })
             }
           ),
@@ -10439,7 +10500,8 @@ function UiSelect({
             SelectContent,
             {
               position,
-              sideOffset: 6,
+              align: contentAlign,
+              sideOffset: contentSideOffset,
               className: cn(
                 "z-50 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none",
                 contentClassName

package/dist/index.d.cts

@@ -1024,8 +1024,10 @@ interface UiSelectProps<TData = unknown> {
     errorMessage?: string;
     htmlFormItemId?: string;
     position?: "popper";
+    contentAlign?: "start" | "center" | "end";
+    contentSideOffset?: number;
 }
-declare function UiSelect<TData = unknown>({ label, placeholder, value, defaultValue, onChange, items, children, disabled, requiredLabel, className, selectClassName, labelClassName, contentClassName, itemClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, htmlFormItemId, position, }: UiSelectProps<TData>): react_jsx_runtime.JSX.Element;
+declare function UiSelect<TData = unknown>({ label, placeholder, value, defaultValue, onChange, items, children, disabled, requiredLabel, className, selectClassName, labelClassName, contentClassName, itemClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, htmlFormItemId, position, contentAlign, contentSideOffset, }: UiSelectProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface UiCheckboxProps extends CheckboxProps {
     label?: React$1.ReactNode;

package/dist/index.d.ts

@@ -1024,8 +1024,10 @@ interface UiSelectProps<TData = unknown> {
     errorMessage?: string;
     htmlFormItemId?: string;
     position?: "popper";
+    contentAlign?: "start" | "center" | "end";
+    contentSideOffset?: number;
 }
-declare function UiSelect<TData = unknown>({ label, placeholder, value, defaultValue, onChange, items, children, disabled, requiredLabel, className, selectClassName, labelClassName, contentClassName, itemClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, htmlFormItemId, position, }: UiSelectProps<TData>): react_jsx_runtime.JSX.Element;
+declare function UiSelect<TData = unknown>({ label, placeholder, value, defaultValue, onChange, items, children, disabled, requiredLabel, className, selectClassName, labelClassName, contentClassName, itemClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, htmlFormItemId, position, contentAlign, contentSideOffset, }: UiSelectProps<TData>): react_jsx_runtime.JSX.Element;
 
 interface UiCheckboxProps extends CheckboxProps {
     label?: React$1.ReactNode;

package/dist/index.js

@@ -3198,10 +3198,10 @@ function CaptionLabel(props) {
 // node_modules/react-day-picker/dist/esm/components/Chevron.js
 import React9 from "react";
 function Chevron(props) {
-  const { size = 24, orientation = "left", className } = props;
+  const { size = 24, orientation = "left", className, style } = props;
   return React9.createElement(
     "svg",
-    { className, width: size, height: size, viewBox: "0 0 24 24" },
+    { className, style, width: size, height: size, viewBox: "0 0 24 24" },
     orientation === "up" && React9.createElement("polygon", { points: "6.77 17 12.5 11.43 18.24 17 20 15.28 12.5 8 5 15.28" }),
     orientation === "down" && React9.createElement("polygon", { points: "6.77 8 12.5 13.57 18.24 8 20 9.72 12.5 17 5 9.72" }),
     orientation === "left" && React9.createElement("polygon", { points: "16 18.112 9.81111111 12 16 5.87733333 14.0888889 4 6 12 14.0888889 20" }),
@@ -3301,18 +3301,18 @@ function useDayPicker() {
 // node_modules/react-day-picker/dist/esm/components/Dropdown.js
 function Dropdown(props) {
   const _a = props, { options, className } = _a, selectProps = __objRest(_a, ["options", "className"]);
-  const { classNames, components } = useDayPicker();
+  const { classNames, components, styles } = useDayPicker();
   const cssClassSelect = [classNames[UI.Dropdown], className].join(" ");
   const selectedOption = options == null ? void 0 : options.find(({ value }) => value === selectProps.value);
   return React12.createElement(
     "span",
-    { "data-disabled": selectProps.disabled, className: classNames[UI.DropdownRoot] },
+    { "data-disabled": selectProps.disabled, className: classNames[UI.DropdownRoot], style: styles == null ? void 0 : styles[UI.DropdownRoot] },
     React12.createElement(components.Select, __spreadValues({ className: cssClassSelect }, selectProps), options == null ? void 0 : options.map(({ value, label, disabled }) => React12.createElement(components.Option, { key: value, value, disabled }, label))),
     React12.createElement(
       "span",
-      { className: classNames[UI.CaptionLabel], "aria-hidden": true },
+      { className: classNames[UI.CaptionLabel], style: styles == null ? void 0 : styles[UI.CaptionLabel], "aria-hidden": true },
       selectedOption == null ? void 0 : selectedOption.label,
-      React12.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI.Chevron] })
+      React12.createElement(components.Chevron, { orientation: "down", size: 18, className: classNames[UI.Chevron], style: styles == null ? void 0 : styles[UI.Chevron] })
     )
   );
 }
@@ -3366,7 +3366,7 @@ function MonthsDropdown(props) {
 import React20, { useCallback } from "react";
 function Nav(props) {
   const _a = props, { onPreviousClick, onNextClick, previousMonth, nextMonth } = _a, navProps = __objRest(_a, ["onPreviousClick", "onNextClick", "previousMonth", "nextMonth"]);
-  const { components, classNames, labels: { labelPrevious: labelPrevious2, labelNext: labelNext2 } } = useDayPicker();
+  const { components, classNames, styles, labels: { labelPrevious: labelPrevious2, labelNext: labelNext2 } } = useDayPicker();
   const handleNextClick = useCallback((e) => {
     if (nextMonth) {
       onNextClick == null ? void 0 : onNextClick(e);
@@ -3382,13 +3382,13 @@ function Nav(props) {
     __spreadValues({}, navProps),
     React20.createElement(
       components.PreviousMonthButton,
-      { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick },
-      React20.createElement(components.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames[UI.Chevron], orientation: "left" })
+      { type: "button", className: classNames[UI.PreviousMonthButton], style: styles == null ? void 0 : styles[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick },
+      React20.createElement(components.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames[UI.Chevron], style: styles == null ? void 0 : styles[UI.Chevron], orientation: "left" })
     ),
     React20.createElement(
       components.NextMonthButton,
-      { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick },
-      React20.createElement(components.Chevron, { disabled: nextMonth ? void 0 : true, orientation: "right", className: classNames[UI.Chevron] })
+      { type: "button", className: classNames[UI.NextMonthButton], style: styles == null ? void 0 : styles[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick },
+      React20.createElement(components.Chevron, { disabled: nextMonth ? void 0 : true, orientation: "right", className: classNames[UI.Chevron], style: styles == null ? void 0 : styles[UI.Chevron] })
     )
   );
 }
@@ -5075,6 +5075,14 @@ function DayPicker(initialProps) {
     style: __spreadValues(__spreadValues({}, styles == null ? void 0 : styles[UI.Root]), props.style)
   }), [classNames, props.className, props.style, styles]);
   const dataAttributes = getDataAttributes(props);
+  const getDropdownStyle = (dropdown) => {
+    const dropdownStyle = styles == null ? void 0 : styles[UI.Dropdown];
+    const specificDropdownStyle = styles == null ? void 0 : styles[dropdown];
+    if (!dropdownStyle && !specificDropdownStyle) {
+      return void 0;
+    }
+    return __spreadValues(__spreadValues({}, dropdownStyle), specificDropdownStyle);
+  };
   const rootElRef = useRef2(null);
   useAnimation(rootElRef, Boolean(props.animate), {
     classNames,
@@ -5123,15 +5131,15 @@ function DayPicker(initialProps) {
             },
             navLayout === "around" && !props.hideNavigation && displayIndex === 0 && React33.createElement(
               components.PreviousMonthButton,
-              { type: "button", className: classNames[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : void 0 },
-              React33.createElement(components.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" })
+              { type: "button", className: classNames[UI.PreviousMonthButton], style: styles == null ? void 0 : styles[UI.PreviousMonthButton], tabIndex: previousMonth ? void 0 : -1, "aria-disabled": previousMonth ? void 0 : true, "aria-label": labelPrevious2(previousMonth), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : void 0 },
+              React33.createElement(components.Chevron, { disabled: previousMonth ? void 0 : true, className: classNames[UI.Chevron], style: styles == null ? void 0 : styles[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" })
             ),
             React33.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")) ? React33.createElement(
               components.DropdownNav,
               { className: classNames[UI.Dropdowns], style: styles == null ? void 0 : styles[UI.Dropdowns] },
               (() => {
-                const monthControl = captionLayout === "dropdown" || captionLayout === "dropdown-months" ? React33.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date, monthOffset), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters2, dateLib), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getMonth(calendarMonth.date) }) : React33.createElement("span", { key: "month" }, formatMonthDropdown2(calendarMonth.date, dateLib));
-                const yearControl = captionLayout === "dropdown" || captionLayout === "dropdown-years" ? React33.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date, monthOffset), options: getYearOptions(navStart, navEnd, formatters2, dateLib, Boolean(props.reverseYears)), style: styles == null ? void 0 : styles[UI.Dropdown], value: dateLib.getYear(calendarMonth.date) }) : React33.createElement("span", { key: "year" }, formatYearDropdown2(calendarMonth.date, dateLib));
+                const monthControl = captionLayout === "dropdown" || captionLayout === "dropdown-months" ? React33.createElement(components.MonthsDropdown, { key: "month", className: classNames[UI.MonthsDropdown], "aria-label": labelMonthDropdown2(), disabled: Boolean(props.disableNavigation), onChange: handleMonthChange(calendarMonth.date, monthOffset), options: getMonthOptions(calendarMonth.date, navStart, navEnd, formatters2, dateLib), style: getDropdownStyle(UI.MonthsDropdown), value: dateLib.getMonth(calendarMonth.date) }) : React33.createElement("span", { key: "month" }, formatMonthDropdown2(calendarMonth.date, dateLib));
+                const yearControl = captionLayout === "dropdown" || captionLayout === "dropdown-years" ? React33.createElement(components.YearsDropdown, { key: "year", className: classNames[UI.YearsDropdown], "aria-label": labelYearDropdown2(dateLib.options), disabled: Boolean(props.disableNavigation), onChange: handleYearChange(calendarMonth.date, monthOffset), options: getYearOptions(navStart, navEnd, formatters2, dateLib, Boolean(props.reverseYears)), style: getDropdownStyle(UI.YearsDropdown), value: dateLib.getYear(calendarMonth.date) }) : React33.createElement("span", { key: "year" }, formatYearDropdown2(calendarMonth.date, dateLib));
                 const controls = dateLib.getMonthYearOrder() === "year-first" ? [yearControl, monthControl] : [monthControl, yearControl];
                 return controls;
               })(),
@@ -5147,11 +5155,11 @@ function DayPicker(initialProps) {
                 whiteSpace: "nowrap",
                 wordWrap: "normal"
               } }, formatCaption2(calendarMonth.date, dateLib.options, dateLib))
-            ) : React33.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption2(calendarMonth.date, dateLib.options, dateLib))),
+            ) : React33.createElement(components.CaptionLabel, { className: classNames[UI.CaptionLabel], style: styles == null ? void 0 : styles[UI.CaptionLabel], role: "status", "aria-live": "polite" }, formatCaption2(calendarMonth.date, dateLib.options, dateLib))),
             navLayout === "around" && !props.hideNavigation && displayIndex === numberOfMonths - 1 && React33.createElement(
               components.NextMonthButton,
-              { type: "button", className: classNames[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : void 0 },
-              React33.createElement(components.Chevron, { disabled: nextMonth ? void 0 : true, className: classNames[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" })
+              { type: "button", className: classNames[UI.NextMonthButton], style: styles == null ? void 0 : styles[UI.NextMonthButton], tabIndex: nextMonth ? void 0 : -1, "aria-disabled": nextMonth ? void 0 : true, "aria-label": labelNext2(nextMonth), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : void 0 },
+              React33.createElement(components.Chevron, { disabled: nextMonth ? void 0 : true, className: classNames[UI.Chevron], style: styles == null ? void 0 : styles[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" })
             ),
             displayIndex === numberOfMonths - 1 && navLayout === "after" && !props.hideNavigation && React33.createElement(components.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames[UI.Nav], style: styles == null ? void 0 : styles[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth, nextMonth }),
             React33.createElement(
@@ -7428,11 +7436,15 @@ var SelectContent = React46.forwardRef(
         setContentStyle(void 0);
       }
     }, [context.open]);
+    function clampNumber(value, min2, max2) {
+      return Math.min(Math.max(value, min2), max2);
+    }
     const updatePosition = React46.useCallback(() => {
       const trigger = context.triggerRef.current;
       if (!trigger) return;
       const rect = trigger.getBoundingClientRect();
       const viewportPadding = 8;
+      const viewportWidth = window.innerWidth;
       const preferredMaxHeight = 288;
       const minUsefulHeight = 140;
       const availableBelow = window.innerHeight - rect.bottom - viewportPadding - sideOffset;
@@ -7450,25 +7462,47 @@ var SelectContent = React46.forwardRef(
       const baseStyle = {
         position: "fixed",
         zIndex: 9999,
-        width: rect.width,
+        width: "max-content",
         minWidth: rect.width,
-        maxWidth: "calc(100vw - 16px)",
         maxHeight: contentMaxHeight
       };
       if (align === "start") {
-        baseStyle.left = rect.left;
+        const left = clampNumber(
+          rect.left,
+          viewportPadding,
+          Math.max(
+            viewportPadding,
+            viewportWidth - viewportPadding - rect.width
+          )
+        );
+        baseStyle.left = left;
         baseStyle.right = void 0;
         baseStyle.transform = void 0;
+        baseStyle.maxWidth = Math.max(
+          rect.width,
+          viewportWidth - left - viewportPadding
+        );
       }
       if (align === "center") {
-        baseStyle.left = rect.left + rect.width / 2;
+        const center = clampNumber(
+          rect.left + rect.width / 2,
+          viewportPadding + rect.width / 2,
+          viewportWidth - viewportPadding - rect.width / 2
+        );
+        baseStyle.left = center;
         baseStyle.right = void 0;
         baseStyle.transform = "translateX(-50%)";
+        baseStyle.maxWidth = viewportWidth - viewportPadding * 2;
       }
       if (align === "end") {
-        baseStyle.left = rect.right;
-        baseStyle.right = void 0;
-        baseStyle.transform = "translateX(-100%)";
+        const right = Math.max(viewportPadding, viewportWidth - rect.right);
+        baseStyle.left = void 0;
+        baseStyle.right = right;
+        baseStyle.transform = void 0;
+        baseStyle.maxWidth = Math.max(
+          rect.width,
+          viewportWidth - right - viewportPadding
+        );
       }
       if (nextSide === "bottom") {
         baseStyle.top = rect.bottom + sideOffset;
@@ -7537,38 +7571,38 @@ var SelectContent = React46.forwardRef(
         cancelAnimationFrame(frame);
       };
     }, [context.activeValue, context.items, context.open]);
-    if (!context.open) {
-      return /* @__PURE__ */ jsx24("div", { hidden: true, "aria-hidden": "true", style: { display: "none" }, children });
-    }
-    if (!mounted || !contentStyle) return null;
+    if (!mounted) return null;
+    const isVisible = context.open && Boolean(contentStyle);
     return createPortal(
       /* @__PURE__ */ jsx24(
         "div",
         __spreadProps(__spreadValues({}, props), {
           ref: composeRefs(ref, context.contentRef),
           role: "listbox",
+          "aria-hidden": !isVisible,
           "data-side": side,
           "data-select-content": true,
           className: cn(
-            "pointer-events-auto min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+            "pointer-events-auto overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl",
             className
           ),
-          style: __spreadValues(__spreadValues({}, contentStyle), style),
+          style: __spreadProps(__spreadValues(__spreadValues({}, contentStyle != null ? contentStyle : {
+            position: "fixed",
+            zIndex: 9999
+          }), style), {
+            display: isVisible ? void 0 : "none"
+          }),
           children: /* @__PURE__ */ jsx24(
             "div",
             {
               ref: scrollRef,
               "data-select-scroll-content": true,
-              className: cn(
-                "max-h-full overflow-x-hidden overflow-y-auto overscroll-contain px-1 py-1",
-                "scrollbar-gutter-stable"
-              ),
+              className: "max-h-full overflow-x-hidden overflow-y-auto overscroll-contain px-1 py-1",
               style: {
-                maxHeight: contentStyle.maxHeight,
+                maxHeight: contentStyle == null ? void 0 : contentStyle.maxHeight,
                 overflowX: "hidden",
                 overflowY: "auto",
                 overscrollBehavior: "contain",
-                scrollbarGutter: "stable",
                 WebkitOverflowScrolling: "touch"
               },
               onWheel: (event) => {
@@ -7695,7 +7729,7 @@ var SelectItem = React46.forwardRef(
         "data-highlighted": isActive ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
         className: cn(
-          "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 outline-none transition-colors",
+          "relative flex w-full min-w-0 cursor-default select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-left outline-none transition-colors",
           sizeClasses.selectItem,
           !disabled && "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
           disabled && "pointer-events-none opacity-50",
@@ -7720,7 +7754,7 @@ var SelectItem = React46.forwardRef(
       }, props), {
         children: [
           /* @__PURE__ */ jsx24("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: isSelected ? /* @__PURE__ */ jsx24(CheckIcon4, { className: "h-4 w-4" }) : null }),
-          /* @__PURE__ */ jsx24("span", { className: "truncate", children })
+          /* @__PURE__ */ jsx24("span", { className: "min-w-0 flex-1 truncate whitespace-nowrap", children })
         ]
       })
     );
@@ -7862,13 +7896,23 @@ function SearchableSelectBase({
       96,
       Math.min(preferredMaxHeight, availableHeight)
     );
+    const left = Math.min(
+      Math.max(viewportPadding, rect.left),
+      Math.max(
+        viewportPadding,
+        window.innerWidth - viewportPadding - rect.width
+      )
+    );
     const nextStyle = {
       position: "fixed",
       zIndex: 9999,
-      left: Math.max(viewportPadding, rect.left),
-      width: rect.width,
+      left,
+      width: "max-content",
       minWidth: rect.width,
-      maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+      maxWidth: Math.max(
+        rect.width,
+        window.innerWidth - left - viewportPadding
+      ),
       maxHeight: contentMaxHeight
     };
     if (shouldOpenBelow) {
@@ -7993,13 +8037,12 @@ function SearchableSelectBase({
           {
             id: listboxId,
             role: "listbox",
-            className: "max-h-full overflow-x-hidden overflow-y-auto overscroll-contain p-1 scrollbar-gutter-stable",
+            className: "max-h-full overflow-x-hidden overflow-y-auto overscroll-contain p-1",
             style: {
               maxHeight: contentStyle.maxHeight,
               overflowX: "hidden",
               overflowY: "auto",
               overscrollBehavior: "contain",
-              scrollbarGutter: "stable",
               WebkitOverflowScrolling: "touch"
             },
             onWheel: (event) => {
@@ -8242,7 +8285,6 @@ var FormSelect = ({
   const form = useFormContext4();
   const controllerControl = control != null ? control : form == null ? void 0 : form.control;
   const sizeClasses = getFormSizeClasses(size, customSize);
-  const triggerSizeClass = getFormControlSizeClass(variant, sizeClasses);
   const normalizedOptions = React48.useMemo(() => {
     if (options) return options;
     return (items != null ? items : []).map((item) => {
@@ -8332,7 +8374,7 @@ var FormSelect = ({
                 field.onBlur();
               }
             }
-          ) }) : /* @__PURE__ */ jsx26(
+          ) }) : /* @__PURE__ */ jsxs16(
             Select2,
             {
               value: (_b = field.value) != null ? _b : "",
@@ -8341,19 +8383,36 @@ var FormSelect = ({
                 if (!nextOpen) field.onBlur();
               },
               disabled,
-              children: /* @__PURE__ */ jsx26(FormControl, { children: /* @__PURE__ */ jsx26(
-                SelectTrigger,
-                {
-                  className: classNameDefault ? cn(
-                    formControlBase,
-                    formInputVariants[variant],
-                    triggerSizeClass,
-                    hasError && formControlErrorClass,
-                    className
-                  ) : className,
-                  children: /* @__PURE__ */ jsx26(SelectValue, { placeholder })
-                }
-              ) })
+              size,
+              customSize,
+              variant,
+              invalid: hasError,
+              children: [
+                /* @__PURE__ */ jsx26(FormControl, { children: /* @__PURE__ */ jsx26(SelectTrigger, { className, children: /* @__PURE__ */ jsx26(SelectValue, { placeholder }) }) }),
+                /* @__PURE__ */ jsx26(
+                  SelectContent,
+                  {
+                    position: "popper",
+                    sideOffset: 6,
+                    className: cn(
+                      "z-50 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none",
+                      contentClassName
+                    ),
+                    onWheelCapture: (event) => event.stopPropagation(),
+                    onTouchMoveCapture: (event) => event.stopPropagation(),
+                    children: normalizedOptions.map((option) => /* @__PURE__ */ jsx26(
+                      SelectItem,
+                      {
+                        value: option.value,
+                        disabled: option.disabled,
+                        className: cn(sizeClasses.selectItem, itemClassName),
+                        children: option.label
+                      },
+                      option.value
+                    ))
+                  }
+                )
+              ]
             }
           ),
           fieldError ? /* @__PURE__ */ jsx26(
@@ -10141,25 +10200,27 @@ function UiSelect({
   variant = "outline",
   errorMessage,
   htmlFormItemId,
-  position
+  position = "popper",
+  contentAlign = "center",
+  contentSideOffset = 6
 }) {
   const generatedId = React72.useId();
   const triggerId = htmlFormItemId != null ? htmlFormItemId : generatedId;
   const messageId = `${triggerId}-message`;
   const hasError = Boolean(errorMessage);
   const sizeClasses = getFormSizeClasses(size, customSize);
-  return /* @__PURE__ */ jsxs27("div", { className: cn("w-full space-y-0.5", selectClassName), children: [
+  return /* @__PURE__ */ jsxs27("div", { className: cn("w-full min-w-0 space-y-0.5", selectClassName), children: [
     label ? /* @__PURE__ */ jsxs27(
       Label3,
       {
         htmlFor: triggerId,
         className: cn(
-          "flex items-center gap-0.5 text-sm font-medium -mt-0.75 -pt-1.5",
+          "flex items-center gap-0.5 text-sm font-medium",
           hasError && "text-destructive",
           labelClassName
         ),
         children: [
-          /* @__PURE__ */ jsx54("span", { children: label }),
+          /* @__PURE__ */ jsx54("span", { className: "min-w-0 truncate", children: label }),
           requiredLabel ? /* @__PURE__ */ jsx54(
             Asterisk5,
             {
@@ -10191,7 +10252,7 @@ function UiSelect({
               id: triggerId,
               "aria-invalid": hasError || void 0,
               "aria-describedby": errorMessage ? messageId : void 0,
-              className,
+              className: cn("min-w-0", className),
               children: /* @__PURE__ */ jsx54(SelectValue, { placeholder })
             }
           ),
@@ -10199,7 +10260,8 @@ function UiSelect({
             SelectContent,
             {
               position,
-              sideOffset: 6,
+              align: contentAlign,
+              sideOffset: contentSideOffset,
               className: cn(
                 "z-50 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-xl outline-none",
                 contentClassName

package/dist/style.css

@@ -468,9 +468,6 @@
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
-  .-mt-0\.75 {
-    margin-top: calc(var(--spacing) * -0.75);
-  }
   .-mt-4 {
     margin-top: calc(var(--spacing) * -4);
   }
@@ -727,6 +724,9 @@
   .w-\[calc\(100vw-1rem\)\] {
     width: calc(100vw - 1rem);
   }
+  .w-auto {
+    width: auto;
+  }
   .w-full {
     width: 100%;
   }
@@ -753,8 +753,11 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
-  .min-w-32 {
-    min-width: calc(var(--spacing) * 32);
+  .min-w-5 {
+    min-width: calc(var(--spacing) * 5);
+  }
+  .min-w-14 {
+    min-width: calc(var(--spacing) * 14);
   }
   .min-w-\[8rem\] {
     min-width: 8rem;
@@ -854,9 +857,6 @@
   .resize {
     resize: both;
   }
-  .scrollbar-gutter-stable {
-    scrollbar-gutter: stable;
-  }
   .list-none {
     list-style-type: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.7.13",
+  "version": "0.7.15",
   "private": false,
   "author": "Bleker <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",
@@ -54,13 +54,13 @@
     "prepack": "npm run build"
   },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.5",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-env": "^7.29.7",
+    "@babel/preset-react": "^7.29.7",
+    "@babel/preset-typescript": "^7.29.7",
     "@eslint/config-array": "^0.23.5",
     "@eslint/object-schema": "^3.0.5",
-    "@hookform/resolvers": "^5.2.2",
+    "@hookform/resolvers": "^5.4.0",
     "@tailwindcss/postcss": "^4.3.0",
     "@tailwindcss/vite": "^4.3.0",
     "@testing-library/dom": "^10.4.1",
@@ -68,22 +68,22 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.6.2",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.59.2",
-    "@typescript-eslint/parser": "^8.59.2",
+    "@typescript-eslint/eslint-plugin": "^8.60.0",
+    "@typescript-eslint/parser": "^8.60.0",
     "autoprefixer": "^10.5.0",
     "babel-jest": "^30.4.1",
     "cross-env": "^10.1.0",
-    "eslint": "^10.3.0",
+    "eslint": "^10.4.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.4.2",
     "jest-environment-jsdom": "^30.4.1",
     "react": "^19.2.6",
-    "react-day-picker": "^10.0.0",
+    "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.6",
     "react-test-renderer": "^19.2.6",
     "rimraf": "^6.1.3",
@@ -92,12 +92,12 @@
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
     "vaul": "^1.1.2",
-    "vite": "^8.0.11",
-    "vite-plugin-dts": "^5.0.0",
+    "vite": "^8.0.14",
+    "vite-plugin-dts": "^5.0.1",
     "vite-plugin-ts-alias": "^0.1.1",
     "zod": "^4.4.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitejs/plugin-react-swc": "^4.3.0"
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react-swc": "^4.3.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <21.0.0",
@@ -140,16 +140,16 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.38.0",
+    "framer-motion": "^12.40.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^1.14.0",
+    "lucide-react": "^1.17.0",
     "next-themes": "^0.4.6",
     "react-dropzone": "^15.0.0",
     "react-helmet-next": "^0.0.2",
-    "react-hook-form": "^7.75.0",
-    "react-resizable-panels": "^4.11.0",
+    "react-hook-form": "^7.76.1",
+    "react-resizable-panels": "^4.11.2",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0",
+    "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2",
     "use-debounce": "^10.1.1",
     "vaul": "^1.1.2"