@mdigital_ui/ui 0.2.6 → 0.2.7

package/dist/chunk-UUP7YGOS.js

@@ -0,0 +1,299 @@
+import { cn } from './chunk-NGYLRX6F.js';
+import { cva } from 'class-variance-authority';
+import React, { useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var avatarVariants = cva(
+  "relative inline-flex items-center justify-center font-medium select-none shrink-0",
+  {
+    variants: {
+      size: {
+        xs: "size-6 text-xs",
+        sm: "size-8 text-sm",
+        md: "size-10 text-base",
+        lg: "size-12 text-lg"
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-lg"
+      },
+      color: {
+        default: "bg-surface text-text-primary",
+        primary: "bg-primary/10 text-primary",
+        secondary: "bg-secondary/10 text-secondary",
+        accent: "bg-accent/10 text-accent",
+        success: "bg-success/10 text-success",
+        error: "bg-error/10 text-error",
+        warning: "bg-warning/10 text-warning",
+        info: "bg-info/10 text-info"
+      },
+      bordered: {
+        true: "ring-2 ring-background",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "circle",
+      color: "default",
+      bordered: false,
+      disabled: false
+    }
+  }
+);
+var statusSizeClasses = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3"
+};
+var statusColorClasses = {
+  online: "bg-success",
+  offline: "bg-border",
+  away: "bg-warning",
+  busy: "bg-error"
+};
+var badgeSizeClasses = {
+  xs: "min-w-3 h-3 text-[8px]",
+  sm: "min-w-4 h-4 text-[10px]",
+  md: "min-w-5 h-5 text-xs",
+  lg: "min-w-6 h-6 text-xs"
+};
+var overlapClasses = {
+  xs: "-space-x-1",
+  sm: "-space-x-1.5",
+  md: "-space-x-2",
+  lg: "-space-x-2.5"
+};
+function getInitialsFromName(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "";
+  const firstWord = words[0];
+  if (words.length === 1 && firstWord) {
+    return firstWord.slice(0, 2).toUpperCase();
+  }
+  const lastWord = words[words.length - 1];
+  const firstInitial = firstWord?.[0] ?? "";
+  const lastInitial = lastWord?.[0] ?? "";
+  return (firstInitial + lastInitial).toUpperCase();
+}
+var DefaultUserIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "size-[60%] text-text-secondary",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    role: "img",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+  }
+);
+var Avatar = React.memo(
+  ({
+    src,
+    alt = "",
+    fallback,
+    name,
+    size = "md",
+    shape = "circle",
+    status,
+    color = "default",
+    bordered = false,
+    icon,
+    badge,
+    disabled = false,
+    className,
+    classNames,
+    onError,
+    ref,
+    ...props
+  }) => {
+    const [imageError, setImageError] = useState(false);
+    useEffect(() => {
+      setImageError(false);
+    }, [src]);
+    const handleImageError = (e) => {
+      setImageError(true);
+      onError?.(e);
+    };
+    const getInitials = () => {
+      if (fallback) return fallback.slice(0, 2).toUpperCase();
+      if (name) return getInitialsFromName(name);
+      return "";
+    };
+    const showImage = src && !imageError;
+    const initials = getInitials();
+    const showFallback = !showImage && (initials || icon);
+    const showDefaultIcon = !showImage && !showFallback;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "avatar_root",
+          avatarVariants({
+            size,
+            shape,
+            color: showImage ? "default" : color,
+            bordered,
+            disabled
+          }),
+          // Apply overflow-hidden only when no badge/status to prevent clipping
+          !badge && !status && "overflow-hidden",
+          classNames?.root,
+          className
+        ),
+        "aria-disabled": disabled || void 0,
+        "data-slot": "root",
+        ...props,
+        children: [
+          showImage && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt: alt || name || "User avatar",
+              onError: handleImageError,
+              className: cn(
+                "avatar_image",
+                "size-full object-cover",
+                shape === "circle" ? "rounded-full" : "rounded-lg",
+                classNames?.image
+              ),
+              loading: "lazy",
+              "data-slot": "image"
+            }
+          ),
+          showFallback && (icon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "avatar_fallback",
+                "flex items-center justify-center size-[60%]",
+                classNames?.fallback
+              ),
+              "data-slot": "fallback",
+              children: icon
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("avatar_fallback", classNames?.fallback),
+              "aria-label": `Avatar for ${name || initials}`,
+              "data-slot": "fallback",
+              children: initials
+            }
+          )),
+          showDefaultIcon && /* @__PURE__ */ jsx(DefaultUserIcon, {}),
+          status && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "avatar_status",
+                "absolute bottom-0 right-0 rounded-full ring-2 ring-background",
+                statusSizeClasses[size],
+                statusColorClasses[status],
+                classNames?.status
+              ),
+              "aria-label": `Status: ${status}`,
+              "data-slot": "status"
+            }
+          ),
+          badge && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute -top-1 -right-1 flex items-center justify-center rounded-full bg-error text-white font-medium px-1",
+                badgeSizeClasses[size]
+              ),
+              "aria-label": typeof badge === "number" ? `${badge} notifications` : void 0,
+              role: typeof badge === "number" ? "status" : void 0,
+              children: badge
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarGroup = React.memo(
+  ({
+    children,
+    max,
+    size = "md",
+    shape = "circle",
+    showTotal = false,
+    renderSurplus,
+    bordered = false,
+    className,
+    classNames,
+    ref,
+    ...props
+  }) => {
+    const childrenArray = React.Children.toArray(children);
+    const total = childrenArray.length;
+    const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;
+    const remainingCount = max && total > max ? total - max : 0;
+    const surplusDisplay = showTotal ? total : remainingCount;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "avatarGroup_root",
+          "flex items-center",
+          overlapClasses[size],
+          classNames?.root,
+          className
+        ),
+        role: "group",
+        "aria-label": `Avatar group with ${total} members`,
+        "data-slot": "root",
+        ...props,
+        children: [
+          visibleChildren.map((child, index) => {
+            if (React.isValidElement(child)) {
+              return React.cloneElement(child, {
+                key: index,
+                size: child.props.size ?? size,
+                shape: child.props.shape ?? shape,
+                bordered: child.props.bordered ?? bordered ?? true,
+                className: cn(child.props.className)
+              });
+            }
+            return child;
+          }),
+          remainingCount > 0 && (renderSurplus ? renderSurplus(surplusDisplay) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "avatarGroup_overflow",
+                avatarVariants({
+                  size,
+                  shape,
+                  color: "default",
+                  bordered: true
+                }),
+                "bg-surface/80 backdrop-blur-sm overflow-hidden",
+                classNames?.overflow
+              ),
+              "aria-label": showTotal ? `${total} total members` : `${remainingCount} more members`,
+              "data-slot": "overflow",
+              children: /* @__PURE__ */ jsx("span", { className: "text-text-secondary font-medium", children: showTotal ? total : `+${remainingCount}` })
+            }
+          ))
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+var avatar_default = Avatar;
+
+export { Avatar, AvatarGroup, avatar_default };
+//# sourceMappingURL=chunk-UUP7YGOS.js.map
+//# sourceMappingURL=chunk-UUP7YGOS.js.map

package/dist/chunk-UUP7YGOS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/avatar/index.tsx"],"names":[],"mappings":"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","file":"chunk-UUP7YGOS.js","sourcesContent":["'use client'\n\nimport { cva } from \"class-variance-authority\";\nimport React, { useState, useEffect } from \"react\";\n\nimport { cn } from \"../utils\";\nimport type { AvatarGroupProps, AvatarProps, AvatarSize } from \"./types\";\n\n/**\n * Avatar size variants\n */\nconst avatarVariants = cva(\n  \"relative inline-flex items-center justify-center font-medium select-none shrink-0\",\n  {\n    variants: {\n      size: {\n        xs: \"size-6 text-xs\",\n        sm: \"size-8 text-sm\",\n        md: \"size-10 text-base\",\n        lg: \"size-12 text-lg\",\n      },\n      shape: {\n        circle: \"rounded-full\",\n        square: \"rounded-lg\",\n      },\n      color: {\n        default: \"bg-surface text-text-primary\",\n        primary: \"bg-primary/10 text-primary\",\n        secondary: \"bg-secondary/10 text-secondary\",\n        accent: \"bg-accent/10 text-accent\",\n        success: \"bg-success/10 text-success\",\n        error: \"bg-error/10 text-error\",\n        warning: \"bg-warning/10 text-warning\",\n        info: \"bg-info/10 text-info\",\n      },\n      bordered: {\n        true: \"ring-2 ring-background\",\n        false: \"\",\n      },\n      disabled: {\n        true: \"opacity-50 cursor-not-allowed\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      shape: \"circle\",\n      color: \"default\",\n      bordered: false,\n      disabled: false,\n    },\n  },\n);\n\n/**\n * Status indicator size classes\n */\nconst statusSizeClasses: Record<AvatarSize, string> = {\n  xs: \"size-1.5\",\n  sm: \"size-2\",\n  md: \"size-2.5\",\n  lg: \"size-3\",\n};\n\n/**\n * Status indicator color classes\n */\nconst statusColorClasses = {\n  online: \"bg-success\",\n  offline: \"bg-border\",\n  away: \"bg-warning\",\n  busy: \"bg-error\",\n};\n\n/**\n * Badge size classes\n */\nconst badgeSizeClasses: Record<AvatarSize, string> = {\n  xs: \"min-w-3 h-3 text-[8px]\",\n  sm: \"min-w-4 h-4 text-[10px]\",\n  md: \"min-w-5 h-5 text-xs\",\n  lg: \"min-w-6 h-6 text-xs\",\n};\n\n/**\n * Overlap spacing classes for AvatarGroup\n */\nconst overlapClasses: Record<AvatarSize, string> = {\n  xs: \"-space-x-1\",\n  sm: \"-space-x-1.5\",\n  md: \"-space-x-2\",\n  lg: \"-space-x-2.5\",\n};\n\n/**\n * Generate initials from a name\n */\nfunction getInitialsFromName(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  if (words.length === 0) return \"\";\n\n  const firstWord = words[0];\n  if (words.length === 1 && firstWord) {\n    return firstWord.slice(0, 2).toUpperCase();\n  }\n\n  const lastWord = words[words.length - 1];\n  const firstInitial = firstWord?.[0] ?? \"\";\n  const lastInitial = lastWord?.[0] ?? \"\";\n  return (firstInitial + lastInitial).toUpperCase();\n}\n\n/**\n * Default user icon SVG\n */\nconst DefaultUserIcon = () => (\n  <svg\n    className=\"size-[60%] text-text-secondary\"\n    fill=\"currentColor\"\n    viewBox=\"0 0 24 24\"\n    role=\"img\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n  </svg>\n);\n\n/**\n * Avatar Component\n */\nconst Avatar = React.memo<AvatarProps>(\n  ({\n    src,\n    alt = \"\",\n    fallback,\n    name,\n    size = \"md\",\n    shape = \"circle\",\n    status,\n    color = \"default\",\n    bordered = false,\n    icon,\n    badge,\n    disabled = false,\n    className,\n    classNames,\n    onError,\n    ref,\n    ...props\n  }) => {\n    const [imageError, setImageError] = useState(false);\n\n    // Reset image error state when src changes\n    useEffect(() => {\n      setImageError(false);\n    }, [src]);\n\n    const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageError(true);\n      onError?.(e);\n    };\n\n    // Get initials from fallback or name\n    const getInitials = () => {\n      if (fallback) return fallback.slice(0, 2).toUpperCase();\n      if (name) return getInitialsFromName(name);\n      return \"\";\n    };\n\n    const showImage = src && !imageError;\n    const initials = getInitials();\n    const showFallback = !showImage && (initials || icon);\n    const showDefaultIcon = !showImage && !showFallback;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"avatar_root\",\n          avatarVariants({\n            size,\n            shape,\n            color: showImage ? \"default\" : color,\n            bordered,\n            disabled,\n          }),\n          // Apply overflow-hidden only when no badge/status to prevent clipping\n          !badge && !status && \"overflow-hidden\",\n          classNames?.root,\n          className,\n        )}\n        aria-disabled={disabled || undefined}\n        data-slot=\"root\"\n        {...props}\n      >\n        {/* Image */}\n        {showImage && (\n          <img\n            src={src}\n            alt={alt || name || \"User avatar\"}\n            onError={handleImageError}\n            className={cn(\n              \"avatar_image\",\n              \"size-full object-cover\",\n              shape === \"circle\" ? \"rounded-full\" : \"rounded-lg\",\n              classNames?.image,\n            )}\n            loading=\"lazy\"\n            data-slot=\"image\"\n          />\n        )}\n\n        {/* Fallback: Icon or Initials */}\n        {showFallback &&\n          (icon ? (\n            <span\n              className={cn(\n                \"avatar_fallback\",\n                \"flex items-center justify-center size-[60%]\",\n                classNames?.fallback,\n              )}\n              data-slot=\"fallback\"\n            >\n              {icon}\n            </span>\n          ) : (\n            <span\n              className={cn(\"avatar_fallback\", classNames?.fallback)}\n              aria-label={`Avatar for ${name || initials}`}\n              data-slot=\"fallback\"\n            >\n              {initials}\n            </span>\n          ))}\n\n        {/* Default user icon */}\n        {showDefaultIcon && <DefaultUserIcon />}\n\n        {/* Status indicator */}\n        {status && (\n          <span\n            className={cn(\n              \"avatar_status\",\n              \"absolute bottom-0 right-0 rounded-full ring-2 ring-background\",\n              statusSizeClasses[size],\n              statusColorClasses[status],\n              classNames?.status,\n            )}\n            aria-label={`Status: ${status}`}\n            data-slot=\"status\"\n          />\n        )}\n\n        {/* Badge */}\n        {badge && (\n          <span\n            className={cn(\n              \"absolute -top-1 -right-1 flex items-center justify-center rounded-full bg-error text-white font-medium px-1\",\n              badgeSizeClasses[size],\n            )}\n            aria-label={typeof badge === \"number\" ? `${badge} notifications` : undefined}\n            role={typeof badge === \"number\" ? \"status\" : undefined}\n          >\n            {badge}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nAvatar.displayName = \"Avatar\";\n\n/**\n * AvatarGroup Component\n */\nconst AvatarGroup = React.memo<AvatarGroupProps>(\n  ({\n    children,\n    max,\n    size = \"md\",\n    shape = \"circle\",\n    showTotal = false,\n    renderSurplus,\n    bordered = false,\n    className,\n    classNames,\n    ref,\n    ...props\n  }) => {\n    const childrenArray = React.Children.toArray(children);\n    const total = childrenArray.length;\n    const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;\n    const remainingCount = max && total > max ? total - max : 0;\n    const surplusDisplay = showTotal ? total : remainingCount;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"avatarGroup_root\",\n          \"flex items-center\",\n          overlapClasses[size],\n          classNames?.root,\n          className,\n        )}\n        role=\"group\"\n        aria-label={`Avatar group with ${total} members`}\n        data-slot=\"root\"\n        {...props}\n      >\n        {visibleChildren.map((child, index) => {\n          if (React.isValidElement<AvatarProps>(child)) {\n            return React.cloneElement(child, {\n              key: index,\n              size: child.props.size ?? size,\n              shape: child.props.shape ?? shape,\n              bordered: child.props.bordered ?? bordered ?? true,\n              className: cn(child.props.className),\n            });\n          }\n          return child;\n        })}\n\n        {remainingCount > 0 &&\n          (renderSurplus ? (\n            renderSurplus(surplusDisplay)\n          ) : (\n            <div\n              className={cn(\n                \"avatarGroup_overflow\",\n                avatarVariants({\n                  size,\n                  shape,\n                  color: \"default\",\n                  bordered: true,\n                }),\n                \"bg-surface/80 backdrop-blur-sm overflow-hidden\",\n                classNames?.overflow,\n              )}\n              aria-label={\n                showTotal\n                  ? `${total} total members`\n                  : `${remainingCount} more members`\n              }\n              data-slot=\"overflow\"\n            >\n              <span className=\"text-text-secondary font-medium\">\n                {showTotal ? total : `+${remainingCount}`}\n              </span>\n            </div>\n          ))}\n      </div>\n    );\n  },\n);\n\nAvatarGroup.displayName = \"AvatarGroup\";\n\nexport type * from \"./types\";\nexport { Avatar, AvatarGroup };\nexport default Avatar;\n"]}

package/dist/{chunk-MDY3HCRC.js → chunk-VUBU7Y4F.js}

@@ -1,5 +1,5 @@
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-EFMKUCGX.js';
-import { cn, iconSizes } from './chunk-2OGZENFC.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-DH7R6NBG.js';
+import { cn, iconSizes } from './chunk-NGYLRX6F.js';
 import React from 'react';
 import ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -42,6 +42,7 @@ var pickerInputVariants = cva(
   }
 );
 var datePickerStyles = `
+  datePicker_day
   [&_.react-datepicker]:!bg-background
   [&_.react-datepicker]:!border-border
   [&_.react-datepicker]:!text-text-primary
@@ -79,6 +80,7 @@ var datePickerStyles = `
   [&_.react-datepicker__day]:!m-0
   [&_.react-datepicker__day]:!cursor-pointer
   [&_.react-datepicker__day]:!transition-colors
+  [&_.react-datepicker__day--selected]:datePicker_daySelected
   [&_.react-datepicker__day--selected]:!bg-primary
   [&_.react-datepicker__day--selected]:!text-white
   [&_.react-datepicker__day--keyboard-selected]:!bg-primary/50
@@ -87,6 +89,7 @@ var datePickerStyles = `
   [&_.react-datepicker__day--disabled]:!opacity-40
   [&_.react-datepicker__day--disabled]:hover:!bg-transparent
   [&_.react-datepicker__day--outside-month]:!text-text-secondary
+  [&_.react-datepicker__day--today]:datePicker_dayToday
   [&_.react-datepicker__day--today]:!font-semibold
   [&_.react-datepicker__day--today]:!border
   [&_.react-datepicker__day--today]:!border-primary
@@ -104,6 +107,14 @@ var datePickerStyles = `
   [&_.react-datepicker__day--range-end]:!bg-primary
   [&_.react-datepicker__day--range-end]:!text-white
 `;
+var getDatePickerStyles = (classNames) => {
+  return cn(
+    datePickerStyles,
+    classNames?.day && `[&_.react-datepicker__day]:${classNames.day}`,
+    classNames?.daySelected && `[&_.react-datepicker__day--selected]:${classNames.daySelected}`,
+    classNames?.dayToday && `[&_.react-datepicker__day--today]:${classNames.dayToday}`
+  );
+};
 var YearSelector = ({
   date,
   onYearSelect,
@@ -236,12 +247,14 @@ var CustomCalendarHeader = ({
   nextYearButtonDisabled,
   showMonthSelector = false,
   onMonthClick,
-  onYearClick
+  onYearClick,
+  headerClassName,
+  navigationClassName
 }) => {
   const monthName = date.toLocaleDateString("en-US", { month: "long" });
   const year = date.getFullYear();
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 bg-surface border-b border-border", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("datePicker_header", "flex items-center justify-between px-4 py-3 bg-surface border-b border-border", headerClassName), "data-slot": "header", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("datePicker_navigation", "flex items-center gap-1", navigationClassName), "data-slot": "navigation", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -285,7 +298,7 @@ var CustomCalendarHeader = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("datePicker_navigation", "flex items-center gap-1", navigationClassName), "data-slot": "navigation", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -401,6 +414,7 @@ var DatePickerComponent = React.memo(
     clearable = false,
     fullWidth = true,
     className,
+    classNames,
     value,
     defaultValue,
     onChange,
@@ -487,7 +501,9 @@ var DatePickerComponent = React.memo(
         ...props,
         showMonthSelector,
         onMonthClick: () => setShowMonthSelector(!showMonthSelector),
-        onYearClick: () => setShowYearSelector(true)
+        onYearClick: () => setShowYearSelector(true),
+        headerClassName: classNames?.header,
+        navigationClassName: classNames?.navigation
       }
     );
     const triggerButton = /* @__PURE__ */ jsx(
@@ -497,11 +513,14 @@ var DatePickerComponent = React.memo(
         disabled,
         onClick: () => setIsOpen(!isOpen),
         className: cn(
+          "datePicker_trigger",
           pickerInputVariants({ variant, status, size, fullWidth }),
           "pl-10 flex items-center justify-start cursor-pointer",
           showClear && "pr-10",
-          className
+          className,
+          classNames?.trigger
         ),
+        "data-slot": "trigger",
         children: confirmed || preview ? /* @__PURE__ */ jsxs(Fragment, { children: [
           confirmed && /* @__PURE__ */ jsx("span", { children: confirmed }),
           preview && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: preview })
@@ -520,7 +539,7 @@ var DatePickerComponent = React.memo(
         messagePosition,
         required,
         fullWidth,
-        children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: cn("datePicker_root", "relative w-full", classNames?.root), "data-slot": "root", children: [
           /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-secondary pointer-events-none z-10", children: /* @__PURE__ */ jsx(Calendar, { className: iconSizes[size] }) }),
           /* @__PURE__ */ jsxs(
             Popover,
@@ -558,7 +577,7 @@ var DatePickerComponent = React.memo(
                         onYearClick: () => setShowYearSelector(true),
                         onYearChange: handleYearChange
                       }
-                    ) : /* @__PURE__ */ jsx("div", { className: datePickerStyles, children: /* @__PURE__ */ jsx(
+                    ) : /* @__PURE__ */ jsx("div", { className: cn("datePicker_calendar", getDatePickerStyles(classNames), classNames?.calendar), "data-slot": "calendar", children: /* @__PURE__ */ jsx(
                       ReactDatePicker,
                       {
                         ref: datePickerRef,
@@ -613,6 +632,7 @@ var RangePickerComponent = React.memo(
     clearable = false,
     fullWidth = true,
     className,
+    classNames,
     startDate,
     endDate,
     defaultStartDate,
@@ -723,7 +743,9 @@ var RangePickerComponent = React.memo(
         ...props,
         showMonthSelector,
         onMonthClick: () => setShowMonthSelector(!showMonthSelector),
-        onYearClick: () => setShowYearSelector(true)
+        onYearClick: () => setShowYearSelector(true),
+        headerClassName: classNames?.header,
+        navigationClassName: classNames?.navigation
       }
     );
     const rangeTriggerButton = /* @__PURE__ */ jsx(
@@ -733,11 +755,14 @@ var RangePickerComponent = React.memo(
         disabled,
         onClick: () => setIsOpen(!isOpen),
         className: cn(
+          "datePicker_trigger",
           pickerInputVariants({ variant, status, size, fullWidth }),
           "pl-10 flex items-center justify-start cursor-pointer",
           showClear && "pr-10",
-          className
+          className,
+          classNames?.trigger
         ),
+        "data-slot": "trigger",
         children: rangeConfirmed || rangePreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
           rangeConfirmed && /* @__PURE__ */ jsx("span", { children: rangeConfirmed }),
           rangePreview && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: rangePreview })
@@ -756,7 +781,7 @@ var RangePickerComponent = React.memo(
         messagePosition,
         required,
         fullWidth,
-        children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: cn("datePicker_root", "relative w-full", classNames?.root), "data-slot": "root", children: [
           /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-secondary pointer-events-none z-10", children: /* @__PURE__ */ jsx(Calendar, { className: iconSizes[size] }) }),
           /* @__PURE__ */ jsxs(
             Popover,
@@ -794,7 +819,7 @@ var RangePickerComponent = React.memo(
                         onYearClick: () => setShowYearSelector(true),
                         onYearChange: handleYearChange
                       }
-                    ) : /* @__PURE__ */ jsx("div", { className: datePickerStyles, children: /* @__PURE__ */ jsx(
+                    ) : /* @__PURE__ */ jsx("div", { className: cn("datePicker_calendar", getDatePickerStyles(classNames), classNames?.calendar), "data-slot": "calendar", children: /* @__PURE__ */ jsx(
                       ReactDatePicker,
                       {
                         ref: datePickerRef,
@@ -1000,6 +1025,7 @@ var TimePickerComponent = React.memo(
     clearable = false,
     fullWidth = true,
     className,
+    classNames,
     value,
     defaultValue,
     onChange,
@@ -1056,11 +1082,14 @@ var TimePickerComponent = React.memo(
         disabled,
         onClick: () => setIsOpen(!isOpen),
         className: cn(
+          "datePicker_trigger",
           pickerInputVariants({ variant, status, size, fullWidth }),
           "pl-10 flex items-center justify-start cursor-pointer",
           showClear && "pr-10",
-          className
+          className,
+          classNames?.trigger
         ),
+        "data-slot": "trigger",
         children: timeConfirmed || timePreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
           timeConfirmed && /* @__PURE__ */ jsx("span", { children: timeConfirmed }),
           timePreview && /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: timePreview })
@@ -1079,7 +1108,7 @@ var TimePickerComponent = React.memo(
         messagePosition,
         required,
         fullWidth,
-        children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: cn("datePicker_root", "relative w-full", classNames?.root), "data-slot": "root", children: [
           /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center h-full top-0 text-text-secondary pointer-events-none z-10", children: /* @__PURE__ */ jsx(Clock, { className: iconSizes[size] }) }),
           /* @__PURE__ */ jsxs(
             Popover,
@@ -1136,5 +1165,5 @@ var DatePicker = Object.assign(DatePickerComponent, {
 });
 
 export { DatePicker, RangePickerComponent, TimePickerComponent };
-//# sourceMappingURL=chunk-MDY3HCRC.js.map
-//# sourceMappingURL=chunk-MDY3HCRC.js.map
+//# sourceMappingURL=chunk-VUBU7Y4F.js.map
+//# sourceMappingURL=chunk-VUBU7Y4F.js.map