shadcn-ui-react 0.7.18 → 0.7.20

package/dist/index.cjs

@@ -10609,7 +10609,7 @@ var Textarea = React49.forwardRef(
       "disabled"
     ]);
     const sizeClasses = getFormSizeClasses(size, customSize);
-    const base = "block w-full bg-transparent text-foreground placeholder:text-muted-foreground outline-none transition resize-y disabled:cursor-not-allowed disabled:opacity-50";
+    const base = "block w-full py-2 bg-transparent text-foreground placeholder:text-muted-foreground outline-none transition resize-y disabled:cursor-not-allowed disabled:opacity-50";
     const textareaSizeClass = variant === "flushed" ? sizeClasses.flushedControl : variant === "link" ? sizeClasses.linkControl : sizeClasses.control;
     const errorClass = invalid ? "border-destructive focus:border-destructive focus:ring-destructive/20" : "";
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -11860,6 +11860,7 @@ function UiDate({
   valueFormatPattern,
   locale,
   className,
+  classNameDefault = true,
   dateClassName,
   labelClassName,
   contentClassName,
@@ -11908,6 +11909,8 @@ function UiDate({
   const maxDateTime = maxDate == null ? void 0 : maxDate.getTime();
   const hasError = Boolean(invalid || errorMessage);
   const sizeClasses = getFormSizeClasses(size, customSize);
+  const inputSizeClass = variant === "flushed" ? sizeClasses.flushedControl : variant === "link" ? sizeClasses.linkControl : sizeClasses.control;
+  const errorClass = hasError ? "border-destructive focus:border-destructive focus:ring-destructive/20" : "";
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const fromYear = (_a = minDate == null ? void 0 : minDate.getFullYear()) != null ? _a : currentYear - 100;
   const toYear = (_b = maxDate == null ? void 0 : maxDate.getFullYear()) != null ? _b : currentYear + 50;
@@ -12021,6 +12024,7 @@ function UiDate({
   const dateHeaderSelectTriggerClassName = "!h-8 !rounded-lg !border-transparent !bg-muted/60 !px-2 !text-xs !font-medium !shadow-none hover:!bg-muted focus-visible:!ring-1 focus-visible:!ring-ring";
   const dateHeaderSelectContentClassName = "rounded-xl border-border/70 bg-popover shadow-lg";
   const dateHeaderSelectItemClassName = "h-8 rounded-lg px-2 text-xs";
+  const base = "block w-full bg-transparent text-foreground placeholder:text-muted-foreground outline-none transition disabled:cursor-not-allowed disabled:opacity-50";
   const handleSelect = (date) => {
     if (date && isDateOutsideRange(date, minDate, maxDate)) {
       return;
@@ -12094,17 +12098,15 @@ function UiDate({
               "data-empty": !selectedDate,
               "aria-invalid": hasError || void 0,
               "aria-describedby": errorMessage ? messageId : void 0,
-              className: cn(
-                buttonVariants({
-                  variant,
-                  size,
-                  rounded: "default"
-                }),
-                "h-10 w-full min-w-0 max-w-full shrink justify-between gap-2 rounded-xl text-left font-normal shadow-sm transition-colors hover:bg-accent/40",
+              className: classNameDefault ? cn(
+                base,
+                formInputVariants[variant],
+                inputSizeClass,
+                "inline-flex w-full min-w-0 max-w-full shrink items-center justify-between gap-2 text-left font-normal",
                 "data-[empty=true]:text-muted-foreground",
-                hasError && "border-destructive text-destructive focus-visible:ring-destructive/30",
+                errorClass,
                 className
-              ),
+              ) : className,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react8.CalendarIcon, { className: "h-4 w-4 shrink-0 opacity-70" }),
@@ -12922,6 +12924,7 @@ function UiTime({
   options,
   hourCycle = "12",
   className,
+  classNameDefault = true,
   timeClassName,
   labelClassName,
   contentClassName,
@@ -12942,6 +12945,7 @@ function UiTime({
   const triggerId = htmlFormItemId != null ? htmlFormItemId : generatedId;
   const messageId = `${triggerId}-message`;
   const displayPattern = formatPattern != null ? formatPattern : resolveTimeFormat(timeFormat, "time12");
+  const base = "block w-full bg-transparent text-foreground placeholder:text-muted-foreground outline-none transition disabled:cursor-not-allowed disabled:opacity-50";
   const selectedTime = React53.useMemo(
     () => parseTimeValue(value, valueFormat, valueFormatPattern, locale),
     [value, valueFormat, valueFormatPattern, locale]
@@ -12968,6 +12972,8 @@ function UiTime({
   const selectedMinutes = getTimeMinutes(selectedTime);
   const hasError = Boolean(invalid || errorMessage);
   const sizeClasses = getFormSizeClasses(size, customSize);
+  const inputSizeClass = variant === "flushed" ? sizeClasses.flushedControl : variant === "link" ? sizeClasses.linkControl : sizeClasses.control;
+  const errorClass = hasError ? "border-destructive focus:border-destructive focus:ring-destructive/20" : "";
   const listOptions = React53.useMemo(
     () => (options == null ? void 0 : options.length) ? options : buildListOptions({
       minuteStep,
@@ -13066,17 +13072,15 @@ function UiTime({
               "data-empty": !selectedTime,
               "aria-invalid": hasError || void 0,
               "aria-describedby": errorMessage ? messageId : void 0,
-              className: cn(
-                buttonVariants({
-                  variant,
-                  size,
-                  rounded: "default"
-                }),
-                "w-full min-w-0 max-w-full shrink justify-between gap-2 text-left font-normal",
+              className: classNameDefault ? cn(
+                base,
+                formInputVariants[variant],
+                inputSizeClass,
+                "inline-flex w-full min-w-0 max-w-full shrink items-center justify-between gap-2 text-left font-normal",
                 "data-[empty=true]:text-muted-foreground",
-                hasError && "border-destructive text-destructive focus-visible:ring-destructive/30",
+                errorClass,
                 className
-              ),
+              ) : className,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react10.ClockIcon, { className: "h-4 w-4 shrink-0 opacity-70" }),

package/dist/index.d.cts

@@ -1033,7 +1033,7 @@ type CustomFormDateProps<TFieldValues extends FieldValues, TName extends FieldPa
     onChangeValue?: (value: Date | string | null) => void;
     size?: SizeProps;
     customSize?: CustomSize;
-    variant?: ButtonVariant;
+    variant?: VariantProps;
     className?: string;
     itemClassName?: string;
     contentClassName?: string;
@@ -1231,6 +1231,7 @@ interface UiTimeProps {
     options?: UiTimeOption[];
     hourCycle?: HourCycle$1;
     className?: string;
+    classNameDefault?: boolean;
     timeClassName?: string;
     labelClassName?: string;
     contentClassName?: string;
@@ -1239,14 +1240,14 @@ interface UiTimeProps {
     requiredLabelClassName?: string;
     size?: SizeProps;
     customSize?: CustomSize;
-    variant?: ButtonVariant;
+    variant?: VariantProps;
     errorMessage?: string;
     invalid?: boolean;
     htmlFormItemId?: string;
     contentAlign?: "start" | "center" | "end";
     contentSideOffset?: number;
 }
-declare function UiTime({ label, placeholder, value, onChange, onBlur, disabled, requiredLabel, timeFormat, valueFormat, formatPattern, valueFormatPattern, locale, minuteStep, minTime, maxTime, options, hourCycle, className, timeClassName, labelClassName, contentClassName, optionClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, invalid, htmlFormItemId, contentAlign, contentSideOffset, }: UiTimeProps): react_jsx_runtime.JSX.Element;
+declare function UiTime({ label, placeholder, value, onChange, onBlur, disabled, requiredLabel, timeFormat, valueFormat, formatPattern, valueFormatPattern, locale, minuteStep, minTime, maxTime, options, hourCycle, className, classNameDefault, timeClassName, labelClassName, contentClassName, optionClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, invalid, htmlFormItemId, contentAlign, contentSideOffset, }: UiTimeProps): react_jsx_runtime.JSX.Element;
 declare namespace UiTime {
     var displayName: string;
 }
@@ -1287,7 +1288,7 @@ type CustomFormTimeProps<TFieldValues extends FieldValues, TName extends FieldPa
     onChangeValue?: (value: Date | string | null) => void;
     size?: SizeProps;
     customSize?: CustomSize;
-    variant?: ButtonVariant;
+    variant?: VariantProps;
     className?: string;
     itemClassName?: string;
     contentClassName?: string;
@@ -1793,6 +1794,7 @@ interface UiDateProps {
     valueFormatPattern?: string;
     locale?: Locale | null;
     className?: string;
+    classNameDefault?: boolean;
     dateClassName?: string;
     labelClassName?: string;
     contentClassName?: string;
@@ -1800,14 +1802,14 @@ interface UiDateProps {
     requiredLabelClassName?: string;
     size?: SizeProps;
     customSize?: CustomSize;
-    variant?: ButtonVariant;
+    variant?: VariantProps;
     errorMessage?: string;
     invalid?: boolean;
     htmlFormItemId?: string;
     contentAlign?: "start" | "center" | "end";
     contentSideOffset?: number;
 }
-declare function UiDate({ label, placeholder, value, defaultMonth, onChange, onBlur, disabled, requiredLabel, start_date, end_date, startDate, endDate, dateFormat, valueFormat, formatPattern, valueFormatPattern, locale, className, dateClassName, labelClassName, contentClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, invalid, htmlFormItemId, contentAlign, contentSideOffset, }: UiDateProps): react_jsx_runtime.JSX.Element;
+declare function UiDate({ label, placeholder, value, defaultMonth, onChange, onBlur, disabled, requiredLabel, start_date, end_date, startDate, endDate, dateFormat, valueFormat, formatPattern, valueFormatPattern, locale, className, classNameDefault, dateClassName, labelClassName, contentClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, invalid, htmlFormItemId, contentAlign, contentSideOffset, }: UiDateProps): react_jsx_runtime.JSX.Element;
 declare namespace UiDate {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -1033,7 +1033,7 @@ type CustomFormDateProps<TFieldValues extends FieldValues, TName extends FieldPa
     onChangeValue?: (value: Date | string | null) => void;
     size?: SizeProps;
     customSize?: CustomSize;
-    variant?: ButtonVariant;
+    variant?: VariantProps;
     className?: string;
     itemClassName?: string;
     contentClassName?: string;
@@ -1231,6 +1231,7 @@ interface UiTimeProps {
     options?: UiTimeOption[];
     hourCycle?: HourCycle$1;
     className?: string;
+    classNameDefault?: boolean;
     timeClassName?: string;
     labelClassName?: string;
     contentClassName?: string;
@@ -1239,14 +1240,14 @@ interface UiTimeProps {
     requiredLabelClassName?: string;
     size?: SizeProps;
     customSize?: CustomSize;
-    variant?: ButtonVariant;
+    variant?: VariantProps;
     errorMessage?: string;
     invalid?: boolean;
     htmlFormItemId?: string;
     contentAlign?: "start" | "center" | "end";
     contentSideOffset?: number;
 }
-declare function UiTime({ label, placeholder, value, onChange, onBlur, disabled, requiredLabel, timeFormat, valueFormat, formatPattern, valueFormatPattern, locale, minuteStep, minTime, maxTime, options, hourCycle, className, timeClassName, labelClassName, contentClassName, optionClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, invalid, htmlFormItemId, contentAlign, contentSideOffset, }: UiTimeProps): react_jsx_runtime.JSX.Element;
+declare function UiTime({ label, placeholder, value, onChange, onBlur, disabled, requiredLabel, timeFormat, valueFormat, formatPattern, valueFormatPattern, locale, minuteStep, minTime, maxTime, options, hourCycle, className, classNameDefault, timeClassName, labelClassName, contentClassName, optionClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, invalid, htmlFormItemId, contentAlign, contentSideOffset, }: UiTimeProps): react_jsx_runtime.JSX.Element;
 declare namespace UiTime {
     var displayName: string;
 }
@@ -1287,7 +1288,7 @@ type CustomFormTimeProps<TFieldValues extends FieldValues, TName extends FieldPa
     onChangeValue?: (value: Date | string | null) => void;
     size?: SizeProps;
     customSize?: CustomSize;
-    variant?: ButtonVariant;
+    variant?: VariantProps;
     className?: string;
     itemClassName?: string;
     contentClassName?: string;
@@ -1793,6 +1794,7 @@ interface UiDateProps {
     valueFormatPattern?: string;
     locale?: Locale | null;
     className?: string;
+    classNameDefault?: boolean;
     dateClassName?: string;
     labelClassName?: string;
     contentClassName?: string;
@@ -1800,14 +1802,14 @@ interface UiDateProps {
     requiredLabelClassName?: string;
     size?: SizeProps;
     customSize?: CustomSize;
-    variant?: ButtonVariant;
+    variant?: VariantProps;
     errorMessage?: string;
     invalid?: boolean;
     htmlFormItemId?: string;
     contentAlign?: "start" | "center" | "end";
     contentSideOffset?: number;
 }
-declare function UiDate({ label, placeholder, value, defaultMonth, onChange, onBlur, disabled, requiredLabel, start_date, end_date, startDate, endDate, dateFormat, valueFormat, formatPattern, valueFormatPattern, locale, className, dateClassName, labelClassName, contentClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, invalid, htmlFormItemId, contentAlign, contentSideOffset, }: UiDateProps): react_jsx_runtime.JSX.Element;
+declare function UiDate({ label, placeholder, value, defaultMonth, onChange, onBlur, disabled, requiredLabel, start_date, end_date, startDate, endDate, dateFormat, valueFormat, formatPattern, valueFormatPattern, locale, className, classNameDefault, dateClassName, labelClassName, contentClassName, messageClassName, requiredLabelClassName, size, customSize, variant, errorMessage, invalid, htmlFormItemId, contentAlign, contentSideOffset, }: UiDateProps): react_jsx_runtime.JSX.Element;
 declare namespace UiDate {
     var displayName: string;
 }

package/dist/index.js

@@ -10330,7 +10330,7 @@ var Textarea = React49.forwardRef(
       "disabled"
     ]);
     const sizeClasses = getFormSizeClasses(size, customSize);
-    const base = "block w-full bg-transparent text-foreground placeholder:text-muted-foreground outline-none transition resize-y disabled:cursor-not-allowed disabled:opacity-50";
+    const base = "block w-full py-2 bg-transparent text-foreground placeholder:text-muted-foreground outline-none transition resize-y disabled:cursor-not-allowed disabled:opacity-50";
     const textareaSizeClass = variant === "flushed" ? sizeClasses.flushedControl : variant === "link" ? sizeClasses.linkControl : sizeClasses.control;
     const errorClass = invalid ? "border-destructive focus:border-destructive focus:ring-destructive/20" : "";
     return /* @__PURE__ */ jsx27(
@@ -11590,6 +11590,7 @@ function UiDate({
   valueFormatPattern,
   locale,
   className,
+  classNameDefault = true,
   dateClassName,
   labelClassName,
   contentClassName,
@@ -11638,6 +11639,8 @@ function UiDate({
   const maxDateTime = maxDate == null ? void 0 : maxDate.getTime();
   const hasError = Boolean(invalid || errorMessage);
   const sizeClasses = getFormSizeClasses(size, customSize);
+  const inputSizeClass = variant === "flushed" ? sizeClasses.flushedControl : variant === "link" ? sizeClasses.linkControl : sizeClasses.control;
+  const errorClass = hasError ? "border-destructive focus:border-destructive focus:ring-destructive/20" : "";
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const fromYear = (_a = minDate == null ? void 0 : minDate.getFullYear()) != null ? _a : currentYear - 100;
   const toYear = (_b = maxDate == null ? void 0 : maxDate.getFullYear()) != null ? _b : currentYear + 50;
@@ -11751,6 +11754,7 @@ function UiDate({
   const dateHeaderSelectTriggerClassName = "!h-8 !rounded-lg !border-transparent !bg-muted/60 !px-2 !text-xs !font-medium !shadow-none hover:!bg-muted focus-visible:!ring-1 focus-visible:!ring-ring";
   const dateHeaderSelectContentClassName = "rounded-xl border-border/70 bg-popover shadow-lg";
   const dateHeaderSelectItemClassName = "h-8 rounded-lg px-2 text-xs";
+  const base = "block w-full bg-transparent text-foreground placeholder:text-muted-foreground outline-none transition disabled:cursor-not-allowed disabled:opacity-50";
   const handleSelect = (date) => {
     if (date && isDateOutsideRange(date, minDate, maxDate)) {
       return;
@@ -11824,17 +11828,15 @@ function UiDate({
               "data-empty": !selectedDate,
               "aria-invalid": hasError || void 0,
               "aria-describedby": errorMessage ? messageId : void 0,
-              className: cn(
-                buttonVariants({
-                  variant,
-                  size,
-                  rounded: "default"
-                }),
-                "h-10 w-full min-w-0 max-w-full shrink justify-between gap-2 rounded-xl text-left font-normal shadow-sm transition-colors hover:bg-accent/40",
+              className: classNameDefault ? cn(
+                base,
+                formInputVariants[variant],
+                inputSizeClass,
+                "inline-flex w-full min-w-0 max-w-full shrink items-center justify-between gap-2 text-left font-normal",
                 "data-[empty=true]:text-muted-foreground",
-                hasError && "border-destructive text-destructive focus-visible:ring-destructive/30",
+                errorClass,
                 className
-              ),
+              ) : className,
               children: [
                 /* @__PURE__ */ jsxs19("span", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [
                   /* @__PURE__ */ jsx31(CalendarIcon, { className: "h-4 w-4 shrink-0 opacity-70" }),
@@ -12660,6 +12662,7 @@ function UiTime({
   options,
   hourCycle = "12",
   className,
+  classNameDefault = true,
   timeClassName,
   labelClassName,
   contentClassName,
@@ -12680,6 +12683,7 @@ function UiTime({
   const triggerId = htmlFormItemId != null ? htmlFormItemId : generatedId;
   const messageId = `${triggerId}-message`;
   const displayPattern = formatPattern != null ? formatPattern : resolveTimeFormat(timeFormat, "time12");
+  const base = "block w-full bg-transparent text-foreground placeholder:text-muted-foreground outline-none transition disabled:cursor-not-allowed disabled:opacity-50";
   const selectedTime = React53.useMemo(
     () => parseTimeValue(value, valueFormat, valueFormatPattern, locale),
     [value, valueFormat, valueFormatPattern, locale]
@@ -12706,6 +12710,8 @@ function UiTime({
   const selectedMinutes = getTimeMinutes(selectedTime);
   const hasError = Boolean(invalid || errorMessage);
   const sizeClasses = getFormSizeClasses(size, customSize);
+  const inputSizeClass = variant === "flushed" ? sizeClasses.flushedControl : variant === "link" ? sizeClasses.linkControl : sizeClasses.control;
+  const errorClass = hasError ? "border-destructive focus:border-destructive focus:ring-destructive/20" : "";
   const listOptions = React53.useMemo(
     () => (options == null ? void 0 : options.length) ? options : buildListOptions({
       minuteStep,
@@ -12804,17 +12810,15 @@ function UiTime({
               "data-empty": !selectedTime,
               "aria-invalid": hasError || void 0,
               "aria-describedby": errorMessage ? messageId : void 0,
-              className: cn(
-                buttonVariants({
-                  variant,
-                  size,
-                  rounded: "default"
-                }),
-                "w-full min-w-0 max-w-full shrink justify-between gap-2 text-left font-normal",
+              className: classNameDefault ? cn(
+                base,
+                formInputVariants[variant],
+                inputSizeClass,
+                "inline-flex w-full min-w-0 max-w-full shrink items-center justify-between gap-2 text-left font-normal",
                 "data-[empty=true]:text-muted-foreground",
-                hasError && "border-destructive text-destructive focus-visible:ring-destructive/30",
+                errorClass,
                 className
-              ),
+              ) : className,
               children: [
                 /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-hidden", children: [
                   /* @__PURE__ */ jsx33(ClockIcon, { className: "h-4 w-4 shrink-0 opacity-70" }),

package/dist/style.css

@@ -2508,16 +2508,6 @@
       }
     }
   }
-  .hover\:bg-accent\/40 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--accent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent) 40%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-accent\/70 {
     &:hover {
       @media (hover: hover) {
@@ -3112,14 +3102,6 @@
       }
     }
   }
-  .focus-visible\:ring-destructive\/30 {
-    &:focus-visible {
-      --tw-ring-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 30%, transparent);
-      }
-    }
-  }
   .focus-visible\:ring-emerald-500\/40 {
     &:focus-visible {
       --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 40%, transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.7.18",
+  "version": "0.7.20",
   "private": false,
   "author": "Bleker <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",