@exem-ui/react 0.3.4-next.20260824050435 → 0.3.4-next.20260902003121

package/dist/index.js

@@ -571,24 +571,20 @@ var Button = React.forwardRef(
   }, ref) => {
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       icon && React.cloneElement(icon, {
-        className: utils.cn(
-          "shrink-0 [&>path]:fill-current",
-          colorStyles[color][variant].icon,
-          icon.props.className
-        ),
+        className: utils.cn("shrink-0", colorStyles[color][variant].icon, icon.props.className),
         size: icon.props.size ?? IconSizeMap[size]
       }),
-      typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+      children != null && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: utils.cn(
-            "truncate",
+            "min-w-0 truncate",
             size === "xlarge" ? "px-1" : "px-0.5",
             colorStyles[color][variant].text
           ),
           children
         }
-      ) : children
+      )
     ] });
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -960,6 +956,16 @@ var Switch = React.forwardRef(
   }
 );
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
+function mergeClassNames(base, user) {
+  if (!user) {
+    return base;
+  }
+  const merged = { ...base };
+  for (const key in user) {
+    merged[key] = utils.cn(base[key], user[key]);
+  }
+  return merged;
+}
 function DatePickerChevron({ orientation }) {
   if (orientation === "left") {
     return /* @__PURE__ */ jsxRuntime.jsx(chunk6MFMQCL5_js.ChevronLeft, { type: "regular", className: "size-5" });
@@ -988,7 +994,6 @@ function DatePickerDayButton({
 }
 function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
   const dayPickerProps = { ...rest, mode: type };
-  const defaultClassNames = reactDayPicker.getDefaultClassNames();
   const [month, setMonth] = React.useState(
     dayPickerProps.month ?? dayPickerProps.defaultMonth ?? /* @__PURE__ */ new Date()
   );
@@ -1004,6 +1009,41 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
     }
     dayPickerProps.onDayClick?.(day, modifiers, e);
   };
+  const dayPickerClassNames = {
+    root: "rounded-medium",
+    months: "relative",
+    month: "flex flex-col gap-2",
+    month_caption: "flex h-7 items-center px-0.5",
+    caption_label: "text-body-2 font-semibold text-text-primary",
+    nav: "absolute right-0 top-0 flex h-7 items-center gap-2",
+    button_previous: "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2",
+    button_next: "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2",
+    weekday: "size-8 text-body-3 font-regular text-text-tertiary",
+    month_grid: "border-separate border-spacing-x-0 border-spacing-y-1",
+    week: "overflow-hidden rounded-medium",
+    day: "size-8 text-body-2 font-medium text-text-secondary",
+    day_button: "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused",
+    outside: "!text-text-disabled",
+    selected: utils.cn(
+      "[&>button]:bg-solid-primary-default",
+      "[&>button]:text-text-inverse",
+      "[&>button]:border-0",
+      "[&>button]:hover:border-0"
+    ),
+    range_start: utils.cn(
+      "rounded-none",
+      isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+    ),
+    range_end: utils.cn(
+      "rounded-none",
+      isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+    ),
+    range_middle: utils.cn(
+      "bg-elevation-elevation-2 rounded-none",
+      "[&>button]:!bg-transparent",
+      "[&>button]:!text-text-secondary"
+    )
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactDayPicker.DayPicker,
     {
@@ -1026,64 +1066,11 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
         DayButton: DatePickerDayButton,
         ...dayPickerProps.components
       },
-      classNames: {
-        root: utils.cn(
-          defaultClassNames.root,
-          "rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium"
-        ),
-        months: utils.cn(defaultClassNames.months, "relative"),
-        month: utils.cn(defaultClassNames.month, "flex flex-col gap-2"),
-        month_caption: utils.cn(defaultClassNames.month_caption, "flex h-7 items-center px-0.5"),
-        caption_label: "text-body-2 font-semibold text-text-primary",
-        nav: utils.cn(defaultClassNames.nav, "absolute right-0 top-0 flex h-7 items-center gap-2"),
-        button_previous: utils.cn(
-          defaultClassNames.button_previous,
-          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
-        ),
-        button_next: utils.cn(
-          defaultClassNames.button_next,
-          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
-        ),
-        weekday: utils.cn(
-          defaultClassNames.weekday,
-          "size-8 text-body-3 font-regular text-text-tertiary"
-        ),
-        month_grid: utils.cn(
-          defaultClassNames.month_grid,
-          "border-separate border-spacing-x-0 border-spacing-y-1"
-        ),
-        week: utils.cn(defaultClassNames.week, "overflow-hidden rounded-medium"),
-        day: utils.cn(defaultClassNames.day, "size-8 text-body-2 font-medium text-text-secondary"),
-        day_button: utils.cn(
-          defaultClassNames.day_button,
-          "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused"
-        ),
-        outside: "!text-text-disabled",
-        selected: utils.cn(
-          "[&>button]:bg-solid-primary-default",
-          "[&>button]:text-text-inverse",
-          "[&>button]:border-0",
-          "[&>button]:hover:border-0"
-        ),
-        range_start: utils.cn(
-          "rounded-none",
-          isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
-        ),
-        range_end: utils.cn(
-          "rounded-none",
-          isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
-        ),
-        range_middle: utils.cn(
-          "bg-elevation-elevation-2 rounded-none",
-          "[&>button]:!bg-transparent",
-          "[&>button]:!text-text-secondary"
-        ),
-        ...dayPickerProps.classNames
-      },
-      modifiersClassNames: {
-        today: "rdp-calendar-today",
-        ...dayPickerProps.modifiersClassNames
-      }
+      classNames: mergeClassNames(dayPickerClassNames, dayPickerProps.classNames),
+      modifiersClassNames: mergeClassNames(
+        { today: "rdp-calendar-today" },
+        dayPickerProps.modifiersClassNames
+      )
     }
   );
 }

package/dist/index.mjs

@@ -9,7 +9,7 @@ import { Slot } from '@radix-ui/react-slot';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import { DayPicker } from 'react-day-picker';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Resizable } from 're-resizable';
@@ -546,24 +546,20 @@ var Button = forwardRef(
   }, ref) => {
     const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
       icon && cloneElement(icon, {
-        className: cn(
-          "shrink-0 [&>path]:fill-current",
-          colorStyles[color][variant].icon,
-          icon.props.className
-        ),
+        className: cn("shrink-0", colorStyles[color][variant].icon, icon.props.className),
         size: icon.props.size ?? IconSizeMap[size]
       }),
-      typeof children === "string" ? /* @__PURE__ */ jsx(
+      children != null && /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
-            "truncate",
+            "min-w-0 truncate",
             size === "xlarge" ? "px-1" : "px-0.5",
             colorStyles[color][variant].text
           ),
           children
         }
-      ) : children
+      )
     ] });
     return /* @__PURE__ */ jsx(
       "button",
@@ -935,6 +931,16 @@ var Switch = forwardRef(
   }
 );
 Switch.displayName = SwitchPrimitives.Root.displayName;
+function mergeClassNames(base, user) {
+  if (!user) {
+    return base;
+  }
+  const merged = { ...base };
+  for (const key in user) {
+    merged[key] = cn(base[key], user[key]);
+  }
+  return merged;
+}
 function DatePickerChevron({ orientation }) {
   if (orientation === "left") {
     return /* @__PURE__ */ jsx(ChevronLeft, { type: "regular", className: "size-5" });
@@ -963,7 +969,6 @@ function DatePickerDayButton({
 }
 function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
   const dayPickerProps = { ...rest, mode: type };
-  const defaultClassNames = getDefaultClassNames();
   const [month, setMonth] = useState(
     dayPickerProps.month ?? dayPickerProps.defaultMonth ?? /* @__PURE__ */ new Date()
   );
@@ -979,6 +984,41 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
     }
     dayPickerProps.onDayClick?.(day, modifiers, e);
   };
+  const dayPickerClassNames = {
+    root: "rounded-medium",
+    months: "relative",
+    month: "flex flex-col gap-2",
+    month_caption: "flex h-7 items-center px-0.5",
+    caption_label: "text-body-2 font-semibold text-text-primary",
+    nav: "absolute right-0 top-0 flex h-7 items-center gap-2",
+    button_previous: "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2",
+    button_next: "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2",
+    weekday: "size-8 text-body-3 font-regular text-text-tertiary",
+    month_grid: "border-separate border-spacing-x-0 border-spacing-y-1",
+    week: "overflow-hidden rounded-medium",
+    day: "size-8 text-body-2 font-medium text-text-secondary",
+    day_button: "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused",
+    outside: "!text-text-disabled",
+    selected: cn(
+      "[&>button]:bg-solid-primary-default",
+      "[&>button]:text-text-inverse",
+      "[&>button]:border-0",
+      "[&>button]:hover:border-0"
+    ),
+    range_start: cn(
+      "rounded-none",
+      isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+    ),
+    range_end: cn(
+      "rounded-none",
+      isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
+    ),
+    range_middle: cn(
+      "bg-elevation-elevation-2 rounded-none",
+      "[&>button]:!bg-transparent",
+      "[&>button]:!text-text-secondary"
+    )
+  };
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
@@ -1001,64 +1041,11 @@ function DatePicker({ type = "single", showOutsideDays = true, ...rest }) {
         DayButton: DatePickerDayButton,
         ...dayPickerProps.components
       },
-      classNames: {
-        root: cn(
-          defaultClassNames.root,
-          "rounded-medium border border-border-primary bg-background-overlay p-4 shadow-medium"
-        ),
-        months: cn(defaultClassNames.months, "relative"),
-        month: cn(defaultClassNames.month, "flex flex-col gap-2"),
-        month_caption: cn(defaultClassNames.month_caption, "flex h-7 items-center px-0.5"),
-        caption_label: "text-body-2 font-semibold text-text-primary",
-        nav: cn(defaultClassNames.nav, "absolute right-0 top-0 flex h-7 items-center gap-2"),
-        button_previous: cn(
-          defaultClassNames.button_previous,
-          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
-        ),
-        button_next: cn(
-          defaultClassNames.button_next,
-          "flex size-7 items-center justify-center rounded-medium hover:bg-elevation-elevation-2"
-        ),
-        weekday: cn(
-          defaultClassNames.weekday,
-          "size-8 text-body-3 font-regular text-text-tertiary"
-        ),
-        month_grid: cn(
-          defaultClassNames.month_grid,
-          "border-separate border-spacing-x-0 border-spacing-y-1"
-        ),
-        week: cn(defaultClassNames.week, "overflow-hidden rounded-medium"),
-        day: cn(defaultClassNames.day, "size-8 text-body-2 font-medium text-text-secondary"),
-        day_button: cn(
-          defaultClassNames.day_button,
-          "size-8 cursor-pointer rounded-full hover:border hover:border-border-focused"
-        ),
-        outside: "!text-text-disabled",
-        selected: cn(
-          "[&>button]:bg-solid-primary-default",
-          "[&>button]:text-text-inverse",
-          "[&>button]:border-0",
-          "[&>button]:hover:border-0"
-        ),
-        range_start: cn(
-          "rounded-none",
-          isRangeComplete && "[background:linear-gradient(to_right,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
-        ),
-        range_end: cn(
-          "rounded-none",
-          isRangeComplete && "[background:linear-gradient(to_left,transparent_50%,var(--color-elevation-elevation-2)_50%)]"
-        ),
-        range_middle: cn(
-          "bg-elevation-elevation-2 rounded-none",
-          "[&>button]:!bg-transparent",
-          "[&>button]:!text-text-secondary"
-        ),
-        ...dayPickerProps.classNames
-      },
-      modifiersClassNames: {
-        today: "rdp-calendar-today",
-        ...dayPickerProps.modifiersClassNames
-      }
+      classNames: mergeClassNames(dayPickerClassNames, dayPickerProps.classNames),
+      modifiersClassNames: mergeClassNames(
+        { today: "rdp-calendar-today" },
+        dayPickerProps.modifiersClassNames
+      )
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exem-ui/react",
-  "version": "0.3.4-next.20260824050435",
+  "version": "0.3.4-next.20260902003121",
   "description": "Exem Design System - React Components",
   "author": "Exem Design Team",
   "license": "Apache-2.0",
@@ -100,7 +100,7 @@
     "tailwind-merge": "^3.3.1",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tiny-invariant": "^1.3.3",
-    "@exem-ui/core": "0.3.3-next.20260824050435"
+    "@exem-ui/core": "0.3.3-next.20260902003121"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
@@ -136,7 +136,7 @@
     "tsup": "^8.5.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.16.0",
-    "@exem-ui/tailwindcss3": "0.3.2-next.20260824050435"
+    "@exem-ui/tailwindcss3": "0.3.2-next.20260902003121"
   },
   "scripts": {
     "generate": "node scripts/generate-icons.js",