shadcn-ui-react 0.7.14 → 0.7.16

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(
@@ -6778,12 +6786,12 @@ var FormCheckbox = (_a) => {
         const checked = Boolean(field.value);
         const fieldError = (_a3 = fieldState.error) == null ? void 0 : _a3.message;
         const hasError = Boolean(fieldError);
-        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FormItem, { className: cn("space-y-1.5", itemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FormItem, { className: cn("min-w-0", itemClassName), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
           "div",
           {
             className: cn(
-              "flex items-start gap-3 rounded-lg border border-transparent p-1 transition-colors",
-              hasError && "border-destructive/20 bg-destructive/5",
+              "flex min-w-0 items-start gap-2.5 transition-colors",
+              hasError && "rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5",
               className
             ),
             children: [
@@ -6799,7 +6807,7 @@ var FormCheckbox = (_a) => {
                     description ? descriptionId : void 0,
                     hasError ? messageId : void 0
                   ].filter(Boolean).join(" ") || void 0,
-                  className: cn("mt-0.5", checkboxClassName),
+                  className: cn("mt-0.5 shrink-0", checkboxClassName),
                   onBlur: field.onBlur,
                   onCheckedChange: (value) => {
                     const nextValue = value === true;
@@ -6814,13 +6822,13 @@ var FormCheckbox = (_a) => {
                   {
                     htmlFor: checkboxId,
                     className: cn(
-                      "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-none text-foreground",
+                      "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-5 text-foreground",
                       checkboxProps.disabled && "cursor-not-allowed text-muted-foreground",
                       hasError && "text-destructive",
                       labelClassName
                     ),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "min-w-0", children: label }),
                       requiredLabel ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         import_lucide_react3.Asterisk,
                         {
@@ -6839,7 +6847,7 @@ var FormCheckbox = (_a) => {
                   {
                     id: descriptionId,
                     className: cn(
-                      "mt-1 text-sm leading-relaxed text-muted-foreground",
+                      "mt-0.5 text-sm leading-5 text-muted-foreground",
                       descriptionClassName
                     ),
                     children: description
@@ -6850,7 +6858,7 @@ var FormCheckbox = (_a) => {
                   {
                     id: messageId,
                     className: cn(
-                      "mt-1 text-sm font-medium text-destructive",
+                      "mt-0.5 text-sm font-medium leading-5 text-destructive",
                       messageClassName
                     ),
                     children: fieldError
@@ -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;
@@ -7825,7 +7859,7 @@ var SelectContent = React46.forwardRef(
           "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: __spreadProps(__spreadValues(__spreadValues({}, contentStyle != null ? contentStyle : {
@@ -7839,16 +7873,12 @@ var SelectContent = React46.forwardRef(
             {
               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 == null ? void 0 : contentStyle.maxHeight,
                 overflowX: "hidden",
                 overflowY: "auto",
                 overscrollBehavior: "contain",
-                scrollbarGutter: "stable",
                 WebkitOverflowScrolling: "touch"
               },
               onWheel: (event) => {
@@ -7975,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",
@@ -8000,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 })
         ]
       })
     );
@@ -8142,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) {
@@ -8273,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) => {
@@ -10401,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,
             {
@@ -10451,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 })
             }
           ),
@@ -10459,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
@@ -10532,12 +10574,12 @@ var UiCheckbox = React73.forwardRef(
       "className"
     ]);
     const hasError = Boolean(errorMessage || invalid);
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cn("w-full", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cn("w-full min-w-0", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "div",
       {
         className: cn(
-          "flex items-start gap-3 rounded-lg border border-transparent p-1 transition-colors",
-          hasError && "border-destructive/20 bg-destructive/5",
+          "flex min-w-0 items-start gap-2.5 transition-colors",
+          hasError && "rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5",
           contentClassName
         ),
         children: [
@@ -10547,7 +10589,7 @@ var UiCheckbox = React73.forwardRef(
               ref,
               id: htmlFormItemId,
               invalid: hasError,
-              className: cn("mt-0.5", className)
+              className: cn("mt-0.5 shrink-0", className)
             }, checkboxProps)
           ),
           /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "min-w-0 flex-1", children: [
@@ -10556,13 +10598,13 @@ var UiCheckbox = React73.forwardRef(
               {
                 htmlFor: htmlFormItemId,
                 className: cn(
-                  "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-none text-foreground",
+                  "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-5 text-foreground",
                   checkboxProps.disabled && "cursor-not-allowed text-muted-foreground",
                   hasError && "text-destructive",
                   labelClassName
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children: label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "min-w-0", children: label }),
                   requiredLabel ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                     import_lucide_react10.Asterisk,
                     {
@@ -10580,7 +10622,7 @@ var UiCheckbox = React73.forwardRef(
               "p",
               {
                 className: cn(
-                  "mt-1 text-sm leading-relaxed text-muted-foreground",
+                  "mt-0.5 text-sm leading-5 text-muted-foreground",
                   descriptionClassName
                 ),
                 children: description
@@ -10590,7 +10632,7 @@ var UiCheckbox = React73.forwardRef(
               "p",
               {
                 className: cn(
-                  "mt-1 text-sm font-medium text-destructive",
+                  "mt-0.5 text-sm font-medium leading-5 text-destructive",
                   errorClassName
                 ),
                 children: errorMessage

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(
@@ -6496,12 +6504,12 @@ var FormCheckbox = (_a) => {
         const checked = Boolean(field.value);
         const fieldError = (_a3 = fieldState.error) == null ? void 0 : _a3.message;
         const hasError = Boolean(fieldError);
-        return /* @__PURE__ */ jsx21(FormItem, { className: cn("space-y-1.5", itemClassName), children: /* @__PURE__ */ jsxs11(
+        return /* @__PURE__ */ jsx21(FormItem, { className: cn("min-w-0", itemClassName), children: /* @__PURE__ */ jsxs11(
           "div",
           {
             className: cn(
-              "flex items-start gap-3 rounded-lg border border-transparent p-1 transition-colors",
-              hasError && "border-destructive/20 bg-destructive/5",
+              "flex min-w-0 items-start gap-2.5 transition-colors",
+              hasError && "rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5",
               className
             ),
             children: [
@@ -6517,7 +6525,7 @@ var FormCheckbox = (_a) => {
                     description ? descriptionId : void 0,
                     hasError ? messageId : void 0
                   ].filter(Boolean).join(" ") || void 0,
-                  className: cn("mt-0.5", checkboxClassName),
+                  className: cn("mt-0.5 shrink-0", checkboxClassName),
                   onBlur: field.onBlur,
                   onCheckedChange: (value) => {
                     const nextValue = value === true;
@@ -6532,13 +6540,13 @@ var FormCheckbox = (_a) => {
                   {
                     htmlFor: checkboxId,
                     className: cn(
-                      "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-none text-foreground",
+                      "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-5 text-foreground",
                       checkboxProps.disabled && "cursor-not-allowed text-muted-foreground",
                       hasError && "text-destructive",
                       labelClassName
                     ),
                     children: [
-                      /* @__PURE__ */ jsx21("span", { children: label }),
+                      /* @__PURE__ */ jsx21("span", { className: "min-w-0", children: label }),
                       requiredLabel ? /* @__PURE__ */ jsx21(
                         Asterisk,
                         {
@@ -6557,7 +6565,7 @@ var FormCheckbox = (_a) => {
                   {
                     id: descriptionId,
                     className: cn(
-                      "mt-1 text-sm leading-relaxed text-muted-foreground",
+                      "mt-0.5 text-sm leading-5 text-muted-foreground",
                       descriptionClassName
                     ),
                     children: description
@@ -6568,7 +6576,7 @@ var FormCheckbox = (_a) => {
                   {
                     id: messageId,
                     className: cn(
-                      "mt-1 text-sm font-medium text-destructive",
+                      "mt-0.5 text-sm font-medium leading-5 text-destructive",
                       messageClassName
                     ),
                     children: fieldError
@@ -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;
@@ -7549,7 +7583,7 @@ var SelectContent = React46.forwardRef(
           "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: __spreadProps(__spreadValues(__spreadValues({}, contentStyle != null ? contentStyle : {
@@ -7563,16 +7597,12 @@ var SelectContent = React46.forwardRef(
             {
               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 == null ? void 0 : contentStyle.maxHeight,
                 overflowX: "hidden",
                 overflowY: "auto",
                 overscrollBehavior: "contain",
-                scrollbarGutter: "stable",
                 WebkitOverflowScrolling: "touch"
               },
               onWheel: (event) => {
@@ -7699,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",
@@ -7724,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 })
         ]
       })
     );
@@ -7866,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) {
@@ -7997,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) => {
@@ -10161,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,
             {
@@ -10211,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 })
             }
           ),
@@ -10219,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
@@ -10292,12 +10334,12 @@ var UiCheckbox = React73.forwardRef(
       "className"
     ]);
     const hasError = Boolean(errorMessage || invalid);
-    return /* @__PURE__ */ jsx55("div", { className: cn("w-full", containerClassName), children: /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsx55("div", { className: cn("w-full min-w-0", containerClassName), children: /* @__PURE__ */ jsxs28(
       "div",
       {
         className: cn(
-          "flex items-start gap-3 rounded-lg border border-transparent p-1 transition-colors",
-          hasError && "border-destructive/20 bg-destructive/5",
+          "flex min-w-0 items-start gap-2.5 transition-colors",
+          hasError && "rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5",
           contentClassName
         ),
         children: [
@@ -10307,7 +10349,7 @@ var UiCheckbox = React73.forwardRef(
               ref,
               id: htmlFormItemId,
               invalid: hasError,
-              className: cn("mt-0.5", className)
+              className: cn("mt-0.5 shrink-0", className)
             }, checkboxProps)
           ),
           /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex-1", children: [
@@ -10316,13 +10358,13 @@ var UiCheckbox = React73.forwardRef(
               {
                 htmlFor: htmlFormItemId,
                 className: cn(
-                  "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-none text-foreground",
+                  "inline-flex cursor-pointer items-start gap-1 text-sm font-medium leading-5 text-foreground",
                   checkboxProps.disabled && "cursor-not-allowed text-muted-foreground",
                   hasError && "text-destructive",
                   labelClassName
                 ),
                 children: [
-                  /* @__PURE__ */ jsx55("span", { children: label }),
+                  /* @__PURE__ */ jsx55("span", { className: "min-w-0", children: label }),
                   requiredLabel ? /* @__PURE__ */ jsx55(
                     Asterisk6,
                     {
@@ -10340,7 +10382,7 @@ var UiCheckbox = React73.forwardRef(
               "p",
               {
                 className: cn(
-                  "mt-1 text-sm leading-relaxed text-muted-foreground",
+                  "mt-0.5 text-sm leading-5 text-muted-foreground",
                   descriptionClassName
                 ),
                 children: description
@@ -10350,7 +10392,7 @@ var UiCheckbox = React73.forwardRef(
               "p",
               {
                 className: cn(
-                  "mt-1 text-sm font-medium text-destructive",
+                  "mt-0.5 text-sm font-medium leading-5 text-destructive",
                   errorClassName
                 ),
                 children: errorMessage

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;
   }
@@ -909,6 +909,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -1613,14 +1616,14 @@
   .text-\[11px\] {
     font-size: 11px;
   }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
   }
-  .leading-relaxed {
-    --tw-leading: var(--leading-relaxed);
-    line-height: var(--leading-relaxed);
-  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.7.14",
+  "version": "0.7.16",
   "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"