@herca/r-kit 0.0.35 → 0.0.36

package/dist/components/calendar/index.js

@@ -1,14 +1,12 @@
-import * as React283 from 'react';
-import React283__default, { createContext, forwardRef, useRef, useState, useImperativeHandle, useEffect, useMemo } from 'react';
-import clsx10, { clsx } from 'clsx';
+import * as React280 from 'react';
+import React280__default, { createContext, useState, useEffect, useMemo } from 'react';
+import clsx5, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { Slot } from '@radix-ui/react-slot';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import '@radix-ui/react-collapsible';
-import '@radix-ui/react-dialog';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 // src/components/calendar/calendar.tsx
 function cn(...inputs) {
@@ -5566,109 +5564,167 @@ var ButtonNavigator = ({
     }
   );
 };
-cva(
-  "flex items-center justify-center rounded border transition-all focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-none",
-  {
-    variants: {
-      size: {
-        sm: "h-4 w-4",
-        md: "h-5 w-5",
-        lg: "h-6 w-6"
-      },
-      color: {
-        primary: "border-primary-1000 focus-visible:ring-primary-900",
-        secondary: "border-gray-600 focus-visible:ring-gray-500",
-        success: "border-success-500 focus-visible:ring-success-400",
-        danger: "border-danger-500 focus-visible:ring-danger-400",
-        warning: "border-warning-500 focus-visible:ring-warning-400",
-        info: "border-info-500 focus-visible:ring-info-400",
-        orange: "border-orange-500 focus-visible:ring-orange-400",
-        purple: "border-purple-500 focus-visible:ring-purple-400",
-        gray: "border-gray-600 focus-visible:ring-gray-500"
-      },
-      checked: {
-        true: "",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Checked state - background sesuai color
-      {
-        checked: true,
-        color: "primary",
-        class: "bg-primary-1000 border-primary-1000"
-      },
-      {
-        checked: true,
-        color: "secondary",
-        class: "border-gray-600 bg-gray-600"
-      },
-      {
-        checked: true,
-        color: "success",
-        class: "bg-success-500 border-success-500"
-      },
-      {
-        checked: true,
-        color: "danger",
-        class: "bg-danger-500 border-danger-500"
-      },
-      {
-        checked: true,
-        color: "warning",
-        class: "bg-warning-500 border-warning-500"
-      },
-      { checked: true, color: "info", class: "bg-info-500 border-info-500" },
-      {
-        checked: true,
-        color: "orange",
-        class: "border-orange-500 bg-orange-500"
-      },
-      {
-        checked: true,
-        color: "purple",
-        class: "border-purple-500 bg-purple-500"
-      },
-      { checked: true, color: "gray", class: "border-gray-600 bg-gray-600" },
-      // Unchecked state - background white
-      { checked: false, class: "bg-white" }
-    ],
-    defaultVariants: {
-      size: "md",
-      color: "primary",
-      checked: false
+function Dropdown({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu.Root, { ...props, children });
+}
+function DropdownTrigger({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { ...props, children });
+}
+function DropdownContent({
+  children,
+  className,
+  portalProps,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
+    DropdownMenu.Content,
+    {
+      sideOffset: props.sideOffset ?? 15,
+      className: cn(
+        "shadow-dropdown flex flex-col gap-1 rounded-xl border border-gray-200 bg-white p-3",
+        className
+      ),
+      ...props,
+      children
     }
-  }
-);
-cva("transition-all", {
+  ) });
+}
+function DropdownItem({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu.Item,
+    {
+      className: cn(
+        "hover:bg-primary-50 hover:border-primary-300 flex cursor-pointer flex-row items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 outline-0 transition-all",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var TextVariants = cva("font-metropolis", {
   variants: {
-    size: {
-      sm: "h-3 w-3",
-      md: "h-4 w-4",
-      lg: "h-5 w-5"
+    variant: {
+      h1: "text-[36px] leading-[46px]",
+      h2: "text-[32px] leading-[42px]",
+      h3: "text-[28px] leading-[38px]",
+      h4: "text-[24px] leading-[34px]",
+      p1: "text-[20px] leading-[30px]",
+      p2: "text-[18px] leading-[28px]",
+      p3: "text-[16px] leading-[26px]",
+      t1: "text-[14px] leading-[24px]",
+      t2: "text-[12px] leading-[20px]",
+      t3: "text-[10px] leading-[14px]",
+      t4: "text-[8px] leading-[10px]"
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
     },
     color: {
-      primary: "text-white",
-      secondary: "text-white",
-      success: "text-white",
-      danger: "text-white",
-      warning: "text-white",
-      info: "text-white",
-      orange: "text-white",
-      purple: "text-white",
-      gray: "text-white"
+      default: "",
+      muted: "text-gray-400",
+      primary: "text-primary-500",
+      success: "text-success-500",
+      warning: "text-warning-500",
+      orange: "text-orange-500",
+      danger: "text-danger-500",
+      info: "text-info-500",
+      purple: "text-purple-500",
+      gray: "text-gray-500"
+    },
+    align: {
+      start: "text-left",
+      center: "text-center",
+      end: "text-right",
+      justify: "text-justify"
     },
-    icon: {
-      check: "",
-      minus: ""
+    numberOfLines: {
+      1: "line-clamp-1",
+      2: "line-clamp-2",
+      3: "line-clamp-3",
+      4: "line-clamp-4"
     }
   },
   defaultVariants: {
-    size: "md",
-    color: "primary",
-    icon: "check"
+    variant: "t2",
+    weight: "regular",
+    color: "default",
+    align: "start"
   }
 });
+function Text({
+  as: TextComponent = "p",
+  align,
+  color,
+  numberOfLines,
+  variant,
+  weight,
+  value,
+  children,
+  className
+}) {
+  const content = value ?? children;
+  return /* @__PURE__ */ jsx(
+    TextComponent,
+    {
+      className: cn(
+        TextVariants({
+          variant,
+          weight,
+          color,
+          align,
+          numberOfLines
+        }),
+        className
+      ),
+      children: content
+    }
+  );
+}
+function ButtonMore({ count, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "h-full w-full cursor-pointer px-1 transition-colors hover:bg-gray-50",
+      title: `+${count} more`,
+      children: /* @__PURE__ */ jsxs(Text, { weight: "medium", className: "line-clamp-1 text-gray-700", children: [
+        "+",
+        count,
+        " more"
+      ] })
+    }
+  );
+}
+var inputVariants = cva(
+  "w-full min-w-0 rounded-lg border bg-transparent px-3 py-2 text-base font-medium text-gray-800 shadow-xs transition outline-none placeholder:text-gray-500",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-9 text-sm",
+        lg: "h-10 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
 var FormDescription = ({
   className,
   children
@@ -5722,7 +5778,7 @@ var FormLabel = ({
 var FormHint = ({ className, children }) => {
   return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-gray-700", className), children });
 };
-var FormField = React283__default.forwardRef(
+var FormField = React280__default.forwardRef(
   function FormField2({
     label,
     description,
@@ -5743,222 +5799,38 @@ var FormField = React283__default.forwardRef(
     ] });
   }
 );
-createContext(void 0);
-cva(
-  "inline-flex cursor-pointer items-center justify-center rounded-lg border transition-all duration-200",
-  {
-    variants: {
-      size: {
-        sm: "p-1.5 text-xs",
-        md: "p-2 text-sm",
-        lg: "px-3 py-2 text-base"
-      },
-      color: {
-        primary: "",
-        success: "",
-        danger: "",
-        warning: "",
-        info: "",
-        purple: "",
-        orange: "",
-        gray: ""
-      },
-      state: {
-        default: "",
-        selected: "",
-        disabled: ""
-      },
-      block: {
-        true: "w-full",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Default color variants
-      {
-        color: "gray",
-        state: "default",
-        className: "border-gray-00 bg-white text-gray-700 hover:bg-gray-100"
-      },
-      {
-        color: "gray",
-        state: "selected",
-        className: "border-gray-400 bg-gray-200 text-gray-800"
-      },
-      {
-        color: "gray",
-        state: "disabled",
-        className: "cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400"
-      },
-      // Primary color variants
-      {
-        color: "primary",
-        state: "default",
-        className: "border-primary-200 text-primary-1000 hover:bg-primary-50 bg-white"
-      },
-      {
-        color: "primary",
-        state: "selected",
-        className: "bg-primary-50 border-primary-200 text-primary-1000"
-      },
-      {
-        color: "primary",
-        state: "disabled",
-        className: "bg-primary-100 border-primary-200 text-primary-300 cursor-not-allowed"
-      },
-      // Success color variants
-      {
-        color: "success",
-        state: "default",
-        className: "border-success-300 text-success-500 hover:bg-success-50 bg-white"
-      },
-      {
-        color: "success",
-        state: "selected",
-        className: "bg-success-100 border-success-200 text-success-500"
-      },
-      {
-        color: "success",
-        state: "disabled",
-        className: "bg-success-100 border-success-200 text-success-300 cursor-not-allowed"
-      },
-      // Danger color variants
-      {
-        color: "danger",
-        state: "default",
-        className: "border-danger-200 text-danger-500 hover:bg-danger-50 bg-white"
-      },
-      {
-        color: "danger",
-        state: "selected",
-        className: "bg-danger-100 border-danger-200 text-danger-500"
-      },
-      {
-        color: "danger",
-        state: "disabled",
-        className: "bg-danger-100 border-danger-200 text-danger-300 cursor-not-allowed"
-      },
-      // Warning color variants
-      {
-        color: "warning",
-        state: "default",
-        className: "border-warning-300 text-warning-400 hover:bg-warning-50 bg-white"
-      },
-      {
-        color: "warning",
-        state: "selected",
-        className: "bg-warning-100 border-warning-300 text-warning-500"
-      },
-      {
-        color: "warning",
-        state: "disabled",
-        className: "bg-warning-100 border-warning-200 text-warning-300 cursor-not-allowed"
-      },
-      // Info color variants
-      {
-        color: "info",
-        state: "default",
-        className: "border-info-200 text-info-500 hover:bg-info-50 bg-white"
-      },
-      {
-        color: "info",
-        state: "selected",
-        className: "bg-info-100 border-info-200 text-info-500"
-      },
-      {
-        color: "info",
-        state: "disabled",
-        className: "bg-info-100 border-info-200 text-info-300 cursor-not-allowed"
-      },
-      // Purple color variants
-      {
-        color: "purple",
-        state: "default",
-        className: "border-purple-200 bg-white text-purple-500 hover:bg-purple-50"
-      },
-      {
-        color: "purple",
-        state: "selected",
-        className: "border-purple-200 bg-purple-100 text-purple-500"
-      },
-      {
-        color: "purple",
-        state: "disabled",
-        className: "cursor-not-allowed border-purple-200 bg-purple-100 text-purple-300"
-      },
-      // Orange color variants
-      {
-        color: "orange",
-        state: "default",
-        className: "border-orange-200 bg-white text-orange-500 hover:bg-orange-50"
-      },
-      {
-        color: "orange",
-        state: "selected",
-        className: "border-orange-200 bg-orange-100 text-orange-500"
-      },
-      {
-        color: "orange",
-        state: "disabled",
-        className: "cursor-not-allowed border-orange-200 bg-orange-100 text-orange-300"
-      }
-    ],
-    defaultVariants: {
-      size: "md",
-      color: "primary",
-      state: "default",
-      block: false
-    }
-  }
-);
-createContext(null);
-var inputVariants = cva(
-  "w-full min-w-0 rounded-lg border bg-transparent px-3 py-2 text-base font-medium text-gray-800 shadow-xs transition outline-none placeholder:text-gray-500",
-  {
-    variants: {
-      size: {
-        sm: "h-8 text-xs",
-        md: "h-9 text-sm",
-        lg: "h-10 text-base"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var Input = React283.forwardRef(
-  ({
-    className,
-    leftAddon,
-    rightAddon,
-    type = "text",
-    label,
-    hint,
-    errorMessages,
-    size,
-    inputSize,
-    description,
-    leftAddonClassName,
-    rightAddonClassName,
-    mergedAddon,
-    isError,
-    onContainerResize,
-    ...props
-  }, ref) => {
-    const hasError = fieldHasError(errorMessages) ?? isError;
-    const generatedId = React283.useId();
-    const fieldRef = React283.useRef(null);
-    React283.useEffect(() => {
-      if (!fieldRef.current || !onContainerResize) return;
-      const ro = new ResizeObserver(([entry]) => {
-        onContainerResize(entry.contentRect.width);
-      });
-      ro.observe(fieldRef.current);
-      return () => ro.disconnect();
-    }, [onContainerResize]);
-    return /* @__PURE__ */ jsx(
-      FormField,
+var Input = React280.forwardRef(
+  ({
+    className,
+    leftAddon,
+    rightAddon,
+    type = "text",
+    label,
+    hint,
+    errorMessages,
+    size,
+    inputSize,
+    description,
+    leftAddonClassName,
+    rightAddonClassName,
+    mergedAddon,
+    isError,
+    onContainerResize,
+    ...props
+  }, ref) => {
+    const hasError = fieldHasError(errorMessages) ?? isError;
+    const generatedId = React280.useId();
+    const fieldRef = React280.useRef(null);
+    React280.useEffect(() => {
+      if (!fieldRef.current || !onContainerResize) return;
+      const ro = new ResizeObserver(([entry]) => {
+        onContainerResize(entry.contentRect.width);
+      });
+      ro.observe(fieldRef.current);
+      return () => ro.disconnect();
+    }, [onContainerResize]);
+    return /* @__PURE__ */ jsx(
+      FormField,
       {
         ref: fieldRef,
         label,
@@ -6029,1147 +5901,182 @@ var Input = React283.forwardRef(
   }
 );
 Input.displayName = "Input";
-var MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React283.useState(false);
-  React283.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-  return !!isMobile;
-}
-React283__default.createContext(
-  null
-);
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TooltipPrimitive.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
-}
-function TooltipTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    TooltipPrimitive.Trigger,
-    {
-      "data-slot": "tooltip-trigger",
-      type: "button",
-      ...props
-    }
-  );
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-    TooltipPrimitive.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-gray-900 px-3 py-1.5 text-xs text-balance text-white",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 -translate-y-1 rounded-xs bg-transparent fill-gray-900" })
-      ]
-    }
-  ) });
-}
-cva(
-  "relative z-50 w-full rounded-2xl bg-white shadow-xl focus:outline-none",
-  {
-    variants: {
-      size: {
-        xs: "max-w-[327px]",
-        sm: "max-w-[480px]",
-        md: "max-w-[700px]",
-        lg: "max-w-[1000px]",
-        full: "mx-4 max-w-full"
-      },
-      state: {
-        open: "animate-modal-scale-in",
-        closed: "animate-modal-scale-out"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-cva("fixed inset-0 z-[999] m-0 flex p-4", {
-  variants: {
-    position: {
-      center: "items-center justify-center",
-      top: "items-start justify-center",
-      bottom: "items-end justify-center"
-    },
-    state: {
-      open: "animate-modal-fade-in",
-      closed: "animate-modal-fade-out"
-    }
-  },
-  defaultVariants: {
-    position: "center"
-  }
-});
-var TextVariants = cva("font-metropolis", {
-  variants: {
-    variant: {
-      h1: "text-[36px] leading-[46px]",
-      h2: "text-[32px] leading-[42px]",
-      h3: "text-[28px] leading-[38px]",
-      h4: "text-[24px] leading-[34px]",
-      p1: "text-[20px] leading-[30px]",
-      p2: "text-[18px] leading-[28px]",
-      p3: "text-[16px] leading-[26px]",
-      t1: "text-[14px] leading-[24px]",
-      t2: "text-[12px] leading-[20px]",
-      t3: "text-[10px] leading-[14px]",
-      t4: "text-[8px] leading-[10px]"
-    },
-    weight: {
-      regular: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
-    },
-    color: {
-      default: "",
-      muted: "text-gray-400",
-      primary: "text-primary-500",
-      success: "text-success-500",
-      warning: "text-warning-500",
-      orange: "text-orange-500",
-      danger: "text-danger-500",
-      info: "text-info-500",
-      purple: "text-purple-500",
-      gray: "text-gray-500"
-    },
-    align: {
-      start: "text-left",
-      center: "text-center",
-      end: "text-right",
-      justify: "text-justify"
-    },
-    numberOfLines: {
-      1: "line-clamp-1",
-      2: "line-clamp-2",
-      3: "line-clamp-3",
-      4: "line-clamp-4"
-    }
-  },
-  defaultVariants: {
-    variant: "t2",
-    weight: "regular",
-    color: "default",
-    align: "start"
-  }
-});
-function Text({
-  as: TextComponent = "p",
-  align,
-  color,
-  numberOfLines,
-  variant,
-  weight,
-  value,
-  children,
-  className
-}) {
-  const content = value ?? children;
-  return /* @__PURE__ */ jsx(
-    TextComponent,
-    {
-      className: cn(
-        TextVariants({
-          variant,
-          weight,
-          color,
-          align,
-          numberOfLines
-        }),
-        className
-      ),
-      children: content
-    }
-  );
-}
-var inputFileVariants = cva("", {
-  variants: {
-    variant: {
-      primary: "bg-primary-1000 *:*:text-white border-primary-1000 focus-within:outline-primary-900 hover:bg-primary-1000",
-      //prettier-ignore
-      secondary: "bg-transparent *:*:text-primary-1000 border-primary-1000 focus-within:outline-primary-900 hover:bg-primary-50",
-      //prettier-ignore
-      gray: "bg-gray-700 *:*:text-white border-gray-700 focus-within:outline-gray-700 hover:bg-gray-700",
-      //prettier-ignore
-      medium: "",
-      large: ""
-    }
-  }
-});
-
-// src/components/input-file/helpers.ts
-var getIconName = ({
-  file,
-  fileType
-}) => {
-  const type = file?.type ?? fileType;
-  const ext = file?.name.split(".").pop()?.toLowerCase();
-  if (type !== void 0 && type?.startsWith("image/")) {
-    return null;
-  }
-  if (type !== void 0 && type?.includes("spreadsheet") || ext === "xls" || ext === "xlsx") {
-    return "xls";
-  }
-  if (type !== void 0 && type?.includes("word") || ext === "doc" || ext === "docx") {
-    return "doc";
-  }
-  if (type !== void 0 && type?.startsWith("video/") || ext === "mkv" || ext === "mp4") {
-    return "mp4";
-  }
-  if (type !== void 0 && type?.startsWith("audio/") || ext === "mp3") {
-    return "mp3";
-  }
-  if (type !== void 0 && type?.includes("pdf") || ext === "pdf") {
-    return "pdf";
-  }
-  return "doc";
-};
-var ModalPreviewAttachment = ({
-  onClose,
-  open,
-  src,
-  name,
-  type,
-  iframeProps,
-  audioProps,
-  videoProps
-}) => {
-  const [zoom, setZoom] = useState(1);
-  const [isDragging, setIsDragging] = useState(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-  const isImage = type.startsWith("image/");
-  const isMp3 = type.startsWith("audio/");
-  const isVideo = type.startsWith("video/");
-  const isPdf = type === "application/pdf";
-  const iconName = getIconName({ fileType: type });
-  const MIN_ZOOM = 0.5;
-  const MAX_ZOOM = 5;
-  const ZOOM_STEP = 0.5;
-  const handleZoomIn = () => {
-    setZoom((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM));
-  };
-  const handleZoomOut = () => {
-    setZoom((prev) => {
-      const newZoom = Math.max(prev - ZOOM_STEP, MIN_ZOOM);
-      if (newZoom <= 1) {
-        setPosition({ x: 0, y: 0 });
-      }
-      return newZoom;
-    });
-  };
-  const handleMouseDown = (e) => {
-    if (zoom > 1) {
-      setIsDragging(true);
-      setDragStart({
-        x: e.clientX - position.x,
-        y: e.clientY - position.y
-      });
-    }
-  };
-  const handleMouseMove = (e) => {
-    if (isDragging && zoom > 1) {
-      setPosition({
-        x: e.clientX - dragStart.x,
-        y: e.clientY - dragStart.y
-      });
-    }
-  };
-  const handleMouseUp = () => {
-    setIsDragging(false);
-  };
-  const handleDownload = () => {
-    const link = document.createElement("a");
-    link.href = src;
-    link.download = name;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-  useEffect(() => {
-    if (!open.isOpen) {
-      setZoom(1);
-      setPosition({ x: 0, y: 0 });
-      setIsDragging(false);
-    }
-  }, [open.isOpen]);
-  useEffect(() => {
-    document.body.style.overflow = open.isOpen ? "hidden" : "unset";
-  }, [open.isOpen]);
-  if (!open.isOpen) return null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("fixed inset-0 z-20"), children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          `fixed inset-0 z-10 size-full bg-black/40 transition-all`,
-          open.isVisible ? "opacity-100" : "opacity-0"
-        ),
-        onClick: onClose
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "relative z-20 container mx-auto flex h-full flex-col items-center gap-6 py-10 transition-all",
-          open.isVisible ? "translate-y-0 opacity-100" : "-translate-y-10 opacity-0"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx("button", { onClick: onClose, className: "cursor-pointer", type: "button", children: /* @__PURE__ */ jsx(Icon, { name: "times", color: "white" }) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                iconName && /* @__PURE__ */ jsx(Icon, { name: iconName, size: 48 }),
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    value: name,
-                    variant: "p3",
-                    weight: "semibold",
-                    className: "text-white!"
-                  }
-                )
-              ] })
-            ] }),
-            isImage && /* @__PURE__ */ jsx(
-              ZoomController,
-              {
-                onDownload: handleDownload,
-                onZoomIn: handleZoomIn,
-                onZoomOut: handleZoomOut,
-                maxZoom: MAX_ZOOM,
-                minZoom: MIN_ZOOM,
-                zoom
-              }
-            )
-          ] }),
-          isImage && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "scrollbar-hide relative flex size-full justify-center overflow-auto rounded-xl",
-                onMouseDown: handleMouseDown,
-                onMouseMove: handleMouseMove,
-                onMouseUp: handleMouseUp,
-                onMouseLeave: handleMouseUp,
-                style: {
-                  cursor: zoom > 1 ? isDragging ? "grabbing" : "grab" : "default"
-                },
-                children: /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src,
-                    alt: name,
-                    draggable: false,
-                    className: "h-full rounded-xl object-contain select-none",
-                    style: {
-                      transform: `scale(${zoom}) translate(${position.x / zoom}px, ${position.y / zoom}px)`,
-                      transformOrigin: "top left",
-                      transition: isDragging ? "none" : "transform 0.2s ease-out"
-                    }
-                  }
-                )
-              }
-            ),
-            zoom > 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-14 left-1/2 -translate-x-1/2 rounded-lg bg-black/60 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
-              Text,
-              {
-                value: "Click and drag to pan \u2022 Scroll to zoom",
-                variant: "t3",
-                className: "text-white/80!"
-              }
-            ) })
-          ] }),
-          isVideo && /* @__PURE__ */ jsx("div", { className: "flex size-full overflow-auto", children: /* @__PURE__ */ jsx(
-            "video",
-            {
-              src,
-              controls: true,
-              className: cn(
-                "h-full w-full rounded-xl object-contain",
-                videoProps?.className
-              ),
-              ...videoProps
-            }
-          ) }),
-          isPdf && /* @__PURE__ */ jsx("div", { className: "flex size-full overflow-auto", children: /* @__PURE__ */ jsx(
-            "iframe",
-            {
-              src,
-              className: cn("h-full w-full", iframeProps?.className),
-              ...iframeProps
-            }
-          ) }),
-          isMp3 && /* @__PURE__ */ jsx("div", { className: "flex size-full items-center justify-center overflow-auto", children: /* @__PURE__ */ jsx(
-            "audio",
-            {
-              src,
-              controls: true,
-              className: cn("h-full w-full", audioProps?.className),
-              ...audioProps
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-};
-var ZoomController = ({
-  zoom,
-  onZoomIn,
-  onZoomOut,
-  onDownload,
-  maxZoom,
-  minZoom
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "icon",
-        onClick: onZoomIn,
-        disabled: zoom >= maxZoom,
-        type: "button",
-        children: /* @__PURE__ */ jsx(Icon, { name: "search-plus-fill" })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "icon",
-        onClick: onZoomOut,
-        disabled: zoom <= minZoom,
-        type: "button",
-        children: /* @__PURE__ */ jsx(Icon, { name: "search-minus-fill" })
-      }
-    ),
-    /* @__PURE__ */ jsxs(Button, { color: "secondary", onClick: onDownload, children: [
-      /* @__PURE__ */ jsx(Icon, { name: "download" }),
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          as: "span",
-          value: "Download",
-          weight: "medium",
-          className: "text-primary-1000!"
-        }
-      )
-    ] })
-  ] });
-};
-var PreviewItem = ({
-  data,
-  onRemove,
-  onReplace,
-  disabled = false,
-  labelCustomName = "Attachment File",
-  onCustomNameChange,
-  customNamePlaceholder = "Name Attachment",
-  customName,
-  audioPlayerProps,
-  pdfViewerProps,
-  videoPlayerProps
-}) => {
-  const [previewShow, setPreviewShow] = useState({
-    isOpen: false,
-    isVisible: false
-  });
-  const isImage = data?.file?.type.startsWith("image/");
-  const isMp3 = data?.file?.type.startsWith("audio/");
-  const isVideo = data?.file?.type.startsWith("video/");
-  const isPdf = data?.file?.type === "application/pdf";
-  const isNotViewable = !isImage && !isMp3 && !isVideo && !isPdf;
-  const iconName = getIconName({ file: data.file });
-  const handleOpenPreview = () => {
-    setPreviewShow({
-      isOpen: true,
-      isVisible: false
-    });
-    requestAnimationFrame(() => {
-      setPreviewShow({
-        isOpen: true,
-        isVisible: true
-      });
-    });
-  };
-  const handleClosePreview = () => {
-    setPreviewShow((s) => ({ ...s, isVisible: false }));
-    setTimeout(() => {
-      setPreviewShow({ isOpen: false, isVisible: false });
-    }, 200);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-    !!onCustomNameChange && /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2", children: [
-      /* @__PURE__ */ jsx(FormLabel, { children: labelCustomName }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          type: "text",
-          onChange: onCustomNameChange,
-          placeholder: customNamePlaceholder,
-          value: customName,
-          className: "truncate"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex w-full items-center justify-between rounded-lg border border-gray-200 p-2"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 overflow-hidden", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "cursor-pointer disabled:cursor-not-allowed",
-                onClick: handleOpenPreview,
-                disabled: isNotViewable,
-                children: data.file.type.startsWith("image/") ? /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: data.preview,
-                    alt: data.file.name,
-                    className: "size-11 rounded-md object-cover"
-                  }
-                ) : /* @__PURE__ */ jsx(Icon, { name: iconName ?? "doc", className: "size-11" })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  as: "h3",
-                  value: data.file.name,
-                  variant: "t1",
-                  weight: "semibold",
-                  className: "truncate"
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    value: `${(data.file.size / 1024 / 1024).toFixed(2)} MB`,
-                    className: "truncate text-gray-700!"
-                  }
-                ),
-                (Boolean(data?.hint) || Boolean(data?.errorMessage)) && /* @__PURE__ */ jsx(Text, { value: "\u2022", className: "truncate text-gray-700!" }),
-                Boolean(data?.hint) && /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    value: data?.hint ?? "",
-                    className: "truncate text-gray-700!"
-                  }
-                ),
-                Boolean(data?.hint) && Boolean(data?.errorMessage) && /* @__PURE__ */ jsx(Text, { value: "\u2022", className: "truncate text-gray-700!" }),
-                Boolean(data?.errorMessage) && /* @__PURE__ */ jsx(Text, { value: data?.errorMessage ?? "", color: "danger" })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            Boolean(data?.errorMessage) && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onReplace,
-                  disabled,
-                  className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
-                  title: "Replace file",
-                  children: /* @__PURE__ */ jsx(Icon, { name: "rotate-right", className: "size-4 text-gray-700" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  name: "exclamation-triangle",
-                  className: "text-danger-500 size-4"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: onRemove,
-                disabled,
-                className: "cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
-                children: /* @__PURE__ */ jsx(Icon, { name: "times", className: "size-4 text-gray-700" })
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ModalPreviewAttachment,
-      {
-        type: data?.file?.type,
-        name: data?.customName ?? data?.file?.name,
-        src: data?.preview,
-        open: previewShow,
-        onClose: () => handleClosePreview(),
-        audioProps: audioPlayerProps,
-        videoProps: videoPlayerProps,
-        iframeProps: pdfViewerProps
-      }
-    )
-  ] });
-};
-var InputFile = forwardRef(
-  ({
-    value,
-    onChange,
-    multiple = false,
-    accept,
-    maxSize,
-    maxFiles,
-    disabled = false,
-    variant = "primary",
-    buttonLabel = "Choose File",
-    label = "Choose File",
-    hint = "JPG, PNG, dan PDF (Max. 5MB)",
-    errorMessage,
-    maxSizeErrorMessage,
-    maxFilesErrorMessage,
-    customNamePlaceholder,
-    useCustomName,
-    pdfViewerProps,
-    audioPlayerProps,
-    videoPlayerProps
-  }, ref) => {
-    const inputRef = useRef(null);
-    const replaceInputRef = useRef(null);
-    const [internalFiles, setInternalFiles] = useState([]);
-    const [replaceIndex, setReplaceIndex] = useState(null);
-    const [customNames, setCustomNames] = useState({});
-    const [isDragging, setIsDragging] = useState(false);
-    const files = value ?? internalFiles;
-    const setFiles = onChange ?? setInternalFiles;
-    const processFiles = (selectedFiles) => {
-      if (maxFiles !== void 0 && files.length + selectedFiles.length > maxFiles) {
-        alert(maxFilesErrorMessage ?? `Maksimal ${maxFiles} file`);
-        return;
-      }
-      if (maxSize !== void 0) {
-        const oversized = selectedFiles.filter((file) => file.size > maxSize);
-        if (oversized.length > 0) {
-          alert(
-            maxSizeErrorMessage ?? `File ${oversized.map((f) => f.name).join(", ")} melebihi ukuran maksimal ${(maxSize / 1024 / 1024).toFixed(2)} MB`
-          );
-          return;
-        }
-      }
-      const mapped = selectedFiles.map((file) => ({
-        id: crypto.randomUUID(),
-        file,
-        customName: file.name,
-        preview: URL.createObjectURL(file)
-      }));
-      setFiles([...files, ...mapped]);
-    };
-    const handleChange = (e) => {
-      const selected = Array.from(e.target.files ?? []);
-      processFiles(selected);
-      if (inputRef.current) {
-        inputRef.current.value = "";
-      }
-    };
-    const handleChangeCustomName = ({
-      e,
-      i
-    }) => {
-      if (replaceIndex !== null) return;
-      const val = e.target.value;
-      setCustomNames((prev) => ({
-        ...prev,
-        [i]: val
-      }));
-    };
-    const handleReplace = (e) => {
-      if (replaceIndex === null) return;
-      const selected = e.target.files?.[0];
-      if (!selected) return;
-      if (maxSize !== void 0 && selected.size > maxSize) {
-        alert(
-          maxSizeErrorMessage ?? `File ${selected.name} melebihi ukuran maksimal ${(maxSize / 1024 / 1024).toFixed(2)} MB`
-        );
-        return;
-      }
-      URL.revokeObjectURL(files[replaceIndex].preview);
-      const newFileItem = {
-        file: selected,
-        preview: URL.createObjectURL(selected)
-      };
-      const newFiles = [...files];
-      newFiles[replaceIndex] = newFileItem;
-      setFiles(newFiles);
-      setReplaceIndex(null);
-      if (replaceInputRef.current) {
-        replaceInputRef.current.value = "";
-      }
-    };
-    const removeFile = (index) => {
-      const newFiles = files.filter((_, i) => i !== index);
-      URL.revokeObjectURL(files[index].preview);
-      setFiles(newFiles);
-    };
-    const clearAll = () => {
-      files.forEach((f) => URL.revokeObjectURL(f.preview));
-      setFiles([]);
-      if (inputRef.current) {
-        inputRef.current.value = "";
-      }
-    };
-    const triggerReplace = (index) => {
-      setReplaceIndex(index);
-      replaceInputRef.current?.click();
-    };
-    const openFilePicker = () => {
-      inputRef.current?.click();
-    };
-    const handleDragEnter = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (disabled) return;
-      setIsDragging(true);
-    };
-    const handleDragLeave = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (disabled) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      const x = e.clientX;
-      const y = e.clientY;
-      if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
-        setIsDragging(false);
-      }
-    };
-    const handleDragOver = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    };
-    const handleDrop = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (disabled) return;
-      setIsDragging(false);
-      const droppedFiles = Array.from(e.dataTransfer.files);
-      let filteredFiles = droppedFiles;
-      if (accept !== void 0) {
-        const acceptedTypes = accept.split(",").map((type) => type.trim());
-        filteredFiles = droppedFiles.filter((file) => {
-          return acceptedTypes.some((acceptedType) => {
-            if (acceptedType.startsWith(".")) {
-              return file.name.endsWith(acceptedType);
-            }
-            if (acceptedType.endsWith("/*")) {
-              const baseType = acceptedType.split("/")[0];
-              return file.type.startsWith(baseType + "/");
-            }
-            return file.type === acceptedType;
-          });
-        });
-        if (filteredFiles.length !== droppedFiles.length) {
-          alert(
-            `Beberapa file tidak sesuai dengan tipe yang diizinkan: ${accept}`
-          );
-        }
-      }
-      if (filteredFiles.length > 0) {
-        processFiles(filteredFiles);
-      }
-    };
-    useImperativeHandle(ref, () => ({
-      clearAll,
-      openFilePicker,
-      getFiles: () => files.map((f, i) => {
-        const base = { ...f };
-        if (useCustomName !== void 0) {
-          base.customName = customNames[i] ?? f.customName ?? f.file.name;
-        }
-        return base;
-      })
-    }));
-    useEffect(() => {
-      return () => files.forEach((f) => URL.revokeObjectURL(f.preview));
-    }, [files]);
-    const isDefault = variant === "primary" || variant === "secondary" || variant === "gray";
-    const isSized = variant === "medium" || variant === "large";
-    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: cn(
-              inputFileVariants({ variant }),
-              "group relative flex items-center gap-2 rounded-lg border px-3 py-2 transition-all",
-              isDefault && "w-fit outline-2 outline-offset-1 outline-transparent",
-              //prettier-ignore
-              isSized && "w-full border-dashed border-gray-400 bg-gray-50",
-              //prettier-ignore
-              variant === "large" && errorMessage !== void 0 && "border-danger-500",
-              variant === "large" && "flex-col items-center p-5!",
-              variant === "large" && isDragging && "border-primary-500 bg-primary-50",
-              //prettier-ignore
-              disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-            ),
-            onDragEnter: variant === "large" ? handleDragEnter : void 0,
-            onDragLeave: variant === "large" ? handleDragLeave : void 0,
-            onDragOver: variant === "large" ? handleDragOver : void 0,
-            onDrop: variant === "large" ? handleDrop : void 0,
-            children: [
-              isDefault && /* @__PURE__ */ jsx(Icon, { name: "upload" }),
-              isSized && /* @__PURE__ */ jsx(Icon, { name: "cloud-upload", size: variant === "large" ? 125 : 40 }),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-1 flex-col",
-                    variant === "large" && "*:text-center"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        as: "h3",
-                        value: label,
-                        weight: "semibold",
-                        className: cn(isSized && "text-gray-800!")
-                      }
-                    ),
-                    isSized && /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        as: "p",
-                        value: variant === "large" && !isDragging && !hint ? `Klik atau drag & drop file disini` : hint,
-                        className: "text-gray-600!"
-                      }
-                    )
-                  ]
-                }
-              ),
-              errorMessage !== void 0 && variant === "large" && /* @__PURE__ */ jsx(
-                Text,
-                {
-                  value: errorMessage,
-                  variant: "t3",
-                  className: "text-left",
-                  color: "danger"
-                }
-              ),
-              isSized && /* @__PURE__ */ jsx(Button, { onClick: () => inputRef.current?.click(), type: "button", children: /* @__PURE__ */ jsx(
-                Text,
-                {
-                  as: "span",
-                  value: buttonLabel,
-                  weight: "semibold",
-                  className: "text-white!"
-                }
-              ) }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: inputRef,
-                  type: "file",
-                  multiple,
-                  accept,
-                  onChange: handleChange,
-                  disabled,
-                  className: "absolute inset-0 -z-10 cursor-pointer opacity-0"
-                }
-              )
-            ]
-          }
-        ),
-        errorMessage !== void 0 && variant === "medium" && /* @__PURE__ */ jsx(
-          Text,
-          {
-            value: errorMessage,
-            variant: "t3",
-            className: "text-left",
-            color: "danger"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: replaceInputRef,
-          type: "file",
-          accept,
-          onChange: handleReplace,
-          className: "hidden"
-        }
-      ),
-      files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              value: "Selected Files",
-              variant: "t1",
-              weight: "semibold",
-              as: "h1"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: clearAll,
-              disabled,
-              className: "cursor-pointer disabled:opacity-50",
-              children: /* @__PURE__ */ jsx(Text, { value: "Clear", weight: "semibold", color: "danger" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: files.map((item, i) => /* @__PURE__ */ jsx(
-          PreviewItem,
-          {
-            data: item,
-            audioPlayerProps,
-            pdfViewerProps,
-            videoPlayerProps,
-            onRemove: () => removeFile(i),
-            onReplace: () => triggerReplace(i),
-            labelCustomName: item?.label,
-            customNamePlaceholder,
-            onCustomNameChange: useCustomName !== void 0 ? (e) => handleChangeCustomName?.({ e, i }) : void 0,
-            customName: customNames[i] ?? item.customName ?? item.file.name,
-            disabled
-          },
-          item?.id
-        )) })
-      ] })
-    ] });
-  }
-);
-InputFile.displayName = "InputFile";
-cva("", {
-  variants: {
-    size: {
-      sm: "px-0 text-xs",
-      md: "text-md",
-      lg: "text-lg"
-    },
-    controlIconSize: {
-      sm: "size-[10px]",
-      md: "size-[14px]",
-      lg: "size-[16px]"
-    },
-    height: {
-      sm: "h-[22px]",
-      md: "h-[30px]",
-      lg: "h-[40px]"
-    },
-    variant: {
-      primary: "border-0",
-      secondary: "border border-gray-500"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-function Dropdown({
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenu.Root, { ...props, children });
-}
-function DropdownTrigger({
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { ...props, children });
-}
-function DropdownContent({
-  children,
-  className,
-  portalProps,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(DropdownMenu.Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
-    DropdownMenu.Content,
-    {
-      sideOffset: props.sideOffset ?? 15,
-      className: cn(
-        "shadow-dropdown flex flex-col gap-1 rounded-xl border border-gray-200 bg-white p-3",
-        className
-      ),
-      ...props,
-      children
-    }
-  ) });
-}
-function DropdownItem({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    DropdownMenu.Item,
-    {
-      className: cn(
-        "hover:bg-primary-50 hover:border-primary-300 flex cursor-pointer flex-row items-center gap-2 rounded-lg border border-gray-200 px-3 py-2 outline-0 transition-all",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
-cva("", {
-  variants: {
-    tableRow: {
-      "basic": "",
-      "bordered": "",
-      "stripped": "",
-      "hovered": "",
-      "row-bordered": "border-y border-gray-300",
-      "wrapped-row-bordered": "border-y border-gray-300",
-      "headed": ""
-    }
-  }
-});
-createContext({});
-createContext({});
 
 // src/components/date-picker/helpers.ts
-function formatDateLocal(date) {
-  const y = date.getFullYear();
-  const m = String(date.getMonth() + 1).padStart(2, "0");
-  const d = String(date.getDate()).padStart(2, "0");
-  return `${y}-${m}-${d}`;
-}
-cva(
-  "relative inline-flex shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
-  {
-    variants: {
-      size: {
-        sm: "h-5 w-9",
-        md: "h-6 w-11",
-        lg: "h-7 w-14"
-      },
-      color: {
-        primary: "data-[state=checked]:bg-primary-1000 focus-visible:ring-primary-900",
-        secondary: "focus-visible:ring-gray-500 data-[state=checked]:bg-gray-600",
-        success: "data-[state=checked]:bg-success-500 focus-visible:ring-success-400",
-        danger: "data-[state=checked]:bg-danger-500 focus-visible:ring-danger-400",
-        warning: "data-[state=checked]:bg-warning-500 focus-visible:ring-warning-400",
-        info: "data-[state=checked]:bg-info-500 focus-visible:ring-info-400",
-        orange: "focus-visible:ring-orange-400 data-[state=checked]:bg-orange-500",
-        purple: "focus-visible:ring-purple-400 data-[state=checked]:bg-purple-500",
-        gray: "focus-visible:ring-gray-600 data-[state=checked]:bg-gray-700"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      color: "primary"
-    }
-  }
-);
+function formatDateLocal(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
 cva(
-  "pointer-events-none absolute top-0.5 inline-block rounded-full bg-white shadow-lg ring-0 transition-transform",
+  "inline-flex cursor-pointer items-center justify-center rounded-lg border transition-all duration-200",
   {
     variants: {
       size: {
-        sm: "h-4 w-4 data-[state=checked]:translate-x-4.5 data-[state=unchecked]:translate-x-0.5",
-        md: "h-5 w-5 data-[state=checked]:translate-x-5.5 data-[state=unchecked]:translate-x-0.5",
-        lg: "h-6 w-6 data-[state=checked]:translate-x-7.5 data-[state=unchecked]:translate-x-0.5"
+        sm: "p-1.5 text-xs",
+        md: "p-2 text-sm",
+        lg: "px-3 py-2 text-base"
+      },
+      color: {
+        primary: "",
+        success: "",
+        danger: "",
+        warning: "",
+        info: "",
+        purple: "",
+        orange: "",
+        gray: ""
+      },
+      state: {
+        default: "",
+        selected: "",
+        disabled: ""
+      },
+      block: {
+        true: "w-full",
+        false: ""
       }
     },
+    compoundVariants: [
+      // Default color variants
+      {
+        color: "gray",
+        state: "default",
+        className: "border-gray-00 bg-white text-gray-700 hover:bg-gray-100"
+      },
+      {
+        color: "gray",
+        state: "selected",
+        className: "border-gray-400 bg-gray-200 text-gray-800"
+      },
+      {
+        color: "gray",
+        state: "disabled",
+        className: "cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400"
+      },
+      // Primary color variants
+      {
+        color: "primary",
+        state: "default",
+        className: "border-primary-200 text-primary-1000 hover:bg-primary-50 bg-white"
+      },
+      {
+        color: "primary",
+        state: "selected",
+        className: "bg-primary-50 border-primary-200 text-primary-1000"
+      },
+      {
+        color: "primary",
+        state: "disabled",
+        className: "bg-primary-100 border-primary-200 text-primary-300 cursor-not-allowed"
+      },
+      // Success color variants
+      {
+        color: "success",
+        state: "default",
+        className: "border-success-300 text-success-500 hover:bg-success-50 bg-white"
+      },
+      {
+        color: "success",
+        state: "selected",
+        className: "bg-success-100 border-success-200 text-success-500"
+      },
+      {
+        color: "success",
+        state: "disabled",
+        className: "bg-success-100 border-success-200 text-success-300 cursor-not-allowed"
+      },
+      // Danger color variants
+      {
+        color: "danger",
+        state: "default",
+        className: "border-danger-200 text-danger-500 hover:bg-danger-50 bg-white"
+      },
+      {
+        color: "danger",
+        state: "selected",
+        className: "bg-danger-100 border-danger-200 text-danger-500"
+      },
+      {
+        color: "danger",
+        state: "disabled",
+        className: "bg-danger-100 border-danger-200 text-danger-300 cursor-not-allowed"
+      },
+      // Warning color variants
+      {
+        color: "warning",
+        state: "default",
+        className: "border-warning-300 text-warning-400 hover:bg-warning-50 bg-white"
+      },
+      {
+        color: "warning",
+        state: "selected",
+        className: "bg-warning-100 border-warning-300 text-warning-500"
+      },
+      {
+        color: "warning",
+        state: "disabled",
+        className: "bg-warning-100 border-warning-200 text-warning-300 cursor-not-allowed"
+      },
+      // Info color variants
+      {
+        color: "info",
+        state: "default",
+        className: "border-info-200 text-info-500 hover:bg-info-50 bg-white"
+      },
+      {
+        color: "info",
+        state: "selected",
+        className: "bg-info-100 border-info-200 text-info-500"
+      },
+      {
+        color: "info",
+        state: "disabled",
+        className: "bg-info-100 border-info-200 text-info-300 cursor-not-allowed"
+      },
+      // Purple color variants
+      {
+        color: "purple",
+        state: "default",
+        className: "border-purple-200 bg-white text-purple-500 hover:bg-purple-50"
+      },
+      {
+        color: "purple",
+        state: "selected",
+        className: "border-purple-200 bg-purple-100 text-purple-500"
+      },
+      {
+        color: "purple",
+        state: "disabled",
+        className: "cursor-not-allowed border-purple-200 bg-purple-100 text-purple-300"
+      },
+      // Orange color variants
+      {
+        color: "orange",
+        state: "default",
+        className: "border-orange-200 bg-white text-orange-500 hover:bg-orange-50"
+      },
+      {
+        color: "orange",
+        state: "selected",
+        className: "border-orange-200 bg-orange-100 text-orange-500"
+      },
+      {
+        color: "orange",
+        state: "disabled",
+        className: "cursor-not-allowed border-orange-200 bg-orange-100 text-orange-300"
+      }
+    ],
     defaultVariants: {
-      size: "md"
+      size: "md",
+      color: "primary",
+      state: "default",
+      block: false
     }
   }
 );
-cva("", {
-  variants: {
-    bg: {
-      danger: "bg-danger-50",
-      gray: "bg-gray-400",
-      info: "bg-info-50",
-      orange: "bg-orange-50",
-      primary: "bg-primary-1000",
-      success: "bg-success-50",
-      purple: "bg-purple-50",
-      secondary: "bg-white",
-      warning: "bg-warning-50"
-    },
-    text: {
-      danger: "text-danger-500",
-      gray: "text-gray-700",
-      info: "text-info-500",
-      orange: "text-orange-500",
-      primary: "text-white",
-      success: "text-success-500",
-      purple: "text-purple-500",
-      secondary: "text-primary-1000",
-      warning: "text-warning-500"
-    }
-  }
-});
 createContext(null);
-createContext(void 0);
-createContext(null);
-function ButtonMore({ count, onClick }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: "h-full w-full cursor-pointer px-1 transition-colors hover:bg-gray-50",
-      title: `+${count} more`,
-      children: /* @__PURE__ */ jsxs(Text, { weight: "medium", className: "line-clamp-1 text-gray-700", children: [
-        "+",
-        count,
-        " more"
-      ] })
-    }
-  );
-}
 
 // src/components/calendar/helpers/create-date-style-helpers.ts
 function createDateStyleHelpers({
@@ -7246,6 +6153,59 @@ function createDateStyleHelpers({
   };
   return { getBackgroundClass, getTextColorClass, getCursorClass, getDayStyle };
 }
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      type: "button",
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md bg-gray-900 px-3 py-1.5 text-xs text-balance text-white",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 -translate-y-1 rounded-xs bg-transparent fill-gray-900" })
+      ]
+    }
+  ) });
+}
 var date_size_map = {
   md: "size-7.5",
   sm: "size-6",
@@ -7288,7 +6248,7 @@ function CalendarDayItem({
       style: styleHelpers.getDayStyle(),
       onClick: () => onClick(day),
       disabled: isDisabled && isCurrentMonth,
-      className: clsx10(
+      className: clsx5(
         date_size_map[size ?? "md"],
         styleHelpers.getCursorClass(),
         styleHelpers.getTextColorClass(),
@@ -7310,7 +6270,7 @@ function CalendarDayItem({
         /* @__PURE__ */ jsx(
           "h5",
           {
-            className: clsx10(
+            className: clsx5(
               "font-metropolis text-xs transition-colors",
               variant === "default" && "grid size-8 place-items-center justify-center rounded-full",
               //prettier-ignore
@@ -7385,7 +6345,7 @@ function EventBar({
         onMouseEnter: () => setHovered(true),
         onMouseLeave: () => setHovered(false),
         onMouseMove: handleMouseMove,
-        className: clsx10(
+        className: clsx5(
           "relative mx-0.5 mt-1 flex items-center justify-between gap-3 overflow-hidden rounded p-1 text-[11px] leading-5 font-medium md:p-1.5",
           onClick && "cursor-pointer"
         ),
@@ -7432,13 +6392,27 @@ function EventBar({
                 }
               }
             ),
-            /* @__PURE__ */ jsx(Text, { variant: "t3", className: clsx10("text-gray-800"), children: segment.event.label })
+            /* @__PURE__ */ jsx(Text, { variant: "t3", className: clsx5("text-gray-800"), children: segment.event.label })
           ] })
         ] })
       }
     )
   ] });
 }
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React280.useState(false);
+  React280.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
 function CalendarGrid({
   days: days2,
   helpers,
@@ -7461,7 +6435,7 @@ function CalendarGrid({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx10(
+      className: clsx5(
         "relative",
         variant === "compact" && size === "sm" && "space-y-1"
       ),
@@ -7552,7 +6526,7 @@ function CalendarGrid({
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx10(
+            className: clsx5(
               "relative",
               variant === "default" && "border-b border-gray-300 last:border-b-0!",
               //prettier-ignore
@@ -7562,7 +6536,7 @@ function CalendarGrid({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: clsx10(
+                  className: clsx5(
                     "grid w-full grid-cols-7",
                     variant === "default" && "*:border-r *:border-gray-300 [&>*:nth-last-child(1)]:border-r-0",
                     //prettier-ignore
@@ -7831,7 +6805,7 @@ function DaysOfWeek({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: clsx10(
+      className: clsx5(
         "grid justify-items-center",
         variant === "compact" && "calendar-cols mb-3 gap-x-1 *:text-center!",
         variant === "default" && "w-full bg-gray-100 *:p-3 *:w-full *:text-start! *:border-r *:border-gray-300 *:last:border-r-0",
@@ -7852,7 +6826,7 @@ function DaysOfWeek({
             as: "h5",
             weight: variant === "compact" ? "medium" : "semibold",
             value: day,
-            className: clsx10(
+            className: clsx5(
               variant === "compact" && "text-gray-600!",
               variant === "default" && "text-gray-900! uppercase"
             ),
@@ -8043,7 +7017,7 @@ var Calendar2 = ({
       setSelectedType(type);
     }
   }, [type]);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: clsx10(variant === "default" && "flex flex-col gap-2"), children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: clsx5(variant === "default" && "flex flex-col gap-2"), children: [
     variant === "default" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
         /* @__PURE__ */ jsxs("div", { className: "*:cursor-pointer", children: [
@@ -8116,7 +7090,7 @@ var Calendar2 = ({
                     setSelectedType(option.value);
                     onTypeChange?.(option.value);
                   },
-                  className: clsx10(
+                  className: clsx5(
                     (selectedType === option.value || index === selectedTypeIndex) && "bg-primary-50!"
                   ),
                   children: /* @__PURE__ */ jsx(Text, { className: "text-gray-900", children: option.label })