@herca/r-kit 0.0.34 → 0.0.36

package/dist/components/date-picker/index.js

@@ -1,14 +1,12 @@
-import * as React283 from 'react';
-import React283__default, { createContext, forwardRef, useRef, useState, useImperativeHandle, useEffect, useMemo, useContext } from 'react';
-import clsx9, { clsx } from 'clsx';
+import * as React282 from 'react';
+import React282__default, { createContext, useState, useRef, useEffect, useMemo, useContext } from 'react';
+import clsx4, { 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/date-picker/date-picker.tsx
 function cn(...inputs) {
@@ -5562,589 +5560,228 @@ 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"
   }
 });
-var FormDescription = ({
-  className,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-gray-600", className), children });
-};
-var FormErrorMessages = ({
-  messages,
-  size = "md",
+function Text({
+  as: TextComponent = "p",
+  align,
+  color,
+  numberOfLines,
+  variant,
+  weight,
+  value,
+  children,
   className
-}) => {
-  if (messages === void 0) return null;
-  const errorList = Array.isArray(messages) ? messages : [messages];
-  if (errorList.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-0.5", className), children: errorList.map((msg, i) => /* @__PURE__ */ jsx(FormErrorMessage, { size, children: msg }, i)) });
-};
-var FormErrorMessage = ({
-  className,
-  children
-}) => {
-  return /* @__PURE__ */ jsx("p", { className: cn("text-danger-500 text-xs", className), children });
-};
-var FormLabel = ({
-  htmlFor,
-  required = false,
-  size = "md",
-  className,
-  children
-}) => {
-  const sizeClasses = {
-    sm: "text-xs",
-    md: "text-xs",
-    lg: "text-sm"
-  };
-  return /* @__PURE__ */ jsxs(
-    "label",
+}) {
+  const content = value ?? children;
+  return /* @__PURE__ */ jsx(
+    TextComponent,
     {
-      htmlFor,
       className: cn(
-        sizeClasses[size || "md"],
-        "font-metropolis block font-semibold text-gray-900",
+        TextVariants({
+          variant,
+          weight,
+          color,
+          align,
+          numberOfLines
+        }),
         className
       ),
-      children: [
-        children,
-        required && /* @__PURE__ */ jsx("span", { className: "text-danger-500 ml-1", children: "*" })
-      ]
+      children: content
     }
   );
-};
-var FormHint = ({ className, children }) => {
-  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-gray-700", className), children });
-};
-var FormField = React283__default.forwardRef(
-  function FormField2({
-    label,
-    description,
-    hint,
-    errorMessages,
-    required = false,
-    size = "md",
-    htmlFor,
-    className,
-    children
-  }, ref) {
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), children: [
-      label !== void 0 && /* @__PURE__ */ jsx(FormLabel, { htmlFor, required, size, children: label }),
-      description !== void 0 && /* @__PURE__ */ jsx(FormDescription, { size, children: description }),
-      children,
-      hint !== void 0 && /* @__PURE__ */ jsx(FormHint, { size, children: hint }),
-      errorMessages !== void 0 && /* @__PURE__ */ jsx(FormErrorMessages, { messages: errorMessages, size })
-    ] });
-  }
-);
-createContext(void 0);
-var chipVariants = 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
-    }
-  }
-);
-var ChipContext = createContext(null);
-var Chip = ({
-  value,
-  selected: selectedProp,
-  disabled = false,
-  onClick,
-  children,
-  color: colorProp,
-  size: sizeProp,
-  block: blockProp,
-  className
-}) => {
-  const context = useContext(ChipContext);
-  const color = colorProp ?? context?.color ?? "primary";
-  const size = sizeProp ?? context?.size ?? "md";
-  const block = blockProp ?? context?.block ?? false;
-  const isSelected = context ? value !== void 0 && context.selectedValues.includes(value) : selectedProp ?? false;
-  const state = disabled ? "disabled" : isSelected === true ? "selected" : "default";
-  const handleClick = () => {
-    if (disabled) return;
-    if (context && value !== void 0) {
-      context.toggleSelection(value);
-    }
-    onClick?.(value);
-  };
+}
+function ButtonMore({ count, onClick }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      onClick: handleClick,
-      disabled,
-      className: cn(chipVariants({ size, color, state, block }), className),
-      children
+      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 ChipGroup = ({
-  options,
-  selected = [],
-  onSelect,
-  direction = "horizontal",
-  color = "primary",
-  multiple = false,
-  scrollable = true,
-  block = false,
-  size = "md",
-  footer,
-  header,
-  children,
-  className
-}) => {
-  const isHorizontal = direction === "horizontal";
-  const normalizeSelected = (val) => Array.isArray(val) ? val : val !== null || val !== void 0 ? [val] : [];
-  const [internalSelected, setInternalSelected] = useState(
-    normalizeSelected(selected)
-  );
-  useEffect(() => {
-    const newSelected = normalizeSelected(selected);
-    if (JSON.stringify(newSelected) !== JSON.stringify(internalSelected)) {
-      setInternalSelected(newSelected);
-    }
-  }, [selected, internalSelected]);
-  const toggleSelection = (value) => {
-    let newSelected;
-    if (multiple || !multiple && internalSelected.length === 0) {
-      newSelected = internalSelected.includes(value) ? internalSelected.filter((v) => v !== value) : [...internalSelected, value];
-    } else {
-      newSelected = [value];
+}
+
+// src/components/calendar/helpers/create-date-style-helpers.ts
+function createDateStyleHelpers({
+  isSelected,
+  isDisabled,
+  isCurrentMonth,
+  styleConfig,
+  day
+}) {
+  const getSelectedStyle = (styleConfig2) => {
+    return {
+      backgroundColor: styleConfig2?.selected?.background,
+      color: styleConfig2?.selected?.text
+    };
+  };
+  const getDisabledStyle = (styleConfig2) => {
+    return {
+      backgroundColor: styleConfig2?.disabled?.background,
+      color: styleConfig2?.disabled?.text
+    };
+  };
+  const getDayStyle = () => {
+    if (isSelected) {
+      return getSelectedStyle(styleConfig);
+    } else if (isDisabled && day.month === "current") {
+      return getDisabledStyle(styleConfig);
     }
-    setInternalSelected(newSelected);
-    onSelect?.(newSelected);
+    return {};
   };
-  const containerClasses = `
-    flex gap-2
-    ${isHorizontal ? "flex-row flex-wrap" : "flex-col"}
-    ${block ? "items-stretch" : "items-start"}
-    ${scrollable && isHorizontal ? "overflow-x-auto" : ""}
-    ${scrollable && !isHorizontal ? "overflow-y-auto" : ""}
-    ${className ?? ""}
-  `;
-  const contextValue = {
-    selectedValues: internalSelected,
-    toggleSelection,
-    color,
-    size,
-    block
+  const getCursorClass = () => {
+    if (isDisabled && isCurrentMonth) {
+      return "cursor-not-allowed";
+    }
+    return "cursor-pointer";
   };
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    header !== void 0 && /* @__PURE__ */ jsx("div", { className: "mb-2", children: header }),
-    /* @__PURE__ */ jsx(ChipContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, children: options !== void 0 ? options.map((option) => /* @__PURE__ */ jsxs(
-      Chip,
-      {
-        value: option.value,
-        disabled: option.disabled,
-        children: [
-          option.icon !== void 0 && /* @__PURE__ */ jsx("span", { className: "mr-2", children: option.icon }),
-          /* @__PURE__ */ jsx("span", { children: option.label })
-        ]
-      },
-      String(option.value)
-    )) : children }) }),
-    footer !== void 0 && /* @__PURE__ */ jsx("div", { className: "mt-2", children: footer })
-  ] });
-};
-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"
+  const getTextColorClass = () => {
+    if (!isCurrentMonth) {
+      return "[&>h5]:text-gray-500";
     }
-  }
-);
-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,
-      {
-        ref: fieldRef,
-        label,
-        hint,
-        description,
-        errorMessages,
-        className,
-        required: props.required,
-        size,
-        htmlFor: props?.id ?? generatedId,
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex w-full items-stretch overflow-hidden rounded-lg border bg-white",
-              hasError ? "border-danger-500 focus-within:border-danger-500" : "focus-within:border-primary-300 border-gray-200"
-            ),
-            children: [
-              Boolean(leftAddon) && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    leftAddonClassName,
-                    "flex items-center justify-center border-r border-gray-200 px-3",
-                    Boolean(mergedAddon) && "border-r-0",
-                    hasError ? "text-danger-500 border-danger-500" : "border-gray-200 text-gray-600"
-                  ),
-                  children: leftAddon
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref,
-                  type,
-                  size: inputSize,
-                  id: props?.id ?? generatedId,
-                  className: cn(
-                    inputVariants({ size }),
-                    "font-metropolis w-full rounded-none border-none focus-visible:outline-none",
-                    Boolean(leftAddon) && "pl-2",
-                    Boolean(rightAddon) && "pr-2",
-                    Boolean(mergedAddon) && "shadow-none",
-                    Boolean(props.disabled) && "cursor-not-allowed bg-gray-100",
-                    className
-                  ),
-                  ...props,
-                  required: false
-                }
-              ),
-              Boolean(rightAddon) && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    rightAddonClassName,
-                    "flex items-center justify-center border-l border-gray-200 px-3",
-                    hasError ? "text-danger-500" : "text-gray-600",
-                    Boolean(mergedAddon) && "border-l-0"
-                  ),
-                  children: rightAddon
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-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;
+    if (isSelected && styleConfig?.selected?.text != null) {
+      return "";
+    }
+    if (isSelected) {
+      return "[&>h5]:text-white!";
+    }
+    if (isDisabled && styleConfig?.disabled?.text != null) {
+      return "";
+    }
+    if (isDisabled) {
+      return "*:text-red-500!";
+    }
+    if (isToday(day)) {
+      return "*:text-info-500!";
+    }
+    return "*:text-gray-700!";
+  };
+  const getBackgroundClass = () => {
+    if (isSelected && styleConfig?.selected?.background != null) {
+      return "";
+    }
+    if (isSelected) {
+      return "bg-primary-1000";
+    }
+    if (isDisabled && isCurrentMonth && styleConfig?.disabled?.background != null) {
+      return "";
+    }
+    if (isDisabled && isCurrentMonth) {
+      return "bg-red-500/30";
+    }
+    if (!isDisabled) {
+      return "hover:bg-gray-100 group-hover:bg-gray-100";
+    }
+    return "";
+  };
+  return { getBackgroundClass, getTextColorClass, getCursorClass, getDayStyle };
 }
-React283__default.createContext(
-  null
-);
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -6198,2214 +5835,1551 @@ function TooltipContent({
     }
   ) });
 }
-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,
+var date_size_map = {
+  md: "size-7.5",
+  sm: "size-6",
+  lg: "size-9"
+};
+function CalendarDayItem({
+  day,
+  helpers,
+  size,
+  mode,
+  styleConfig,
+  onClick,
+  variant,
+  events,
+  backdropOnClick
+}) {
+  const dayConfig = helpers.getDayConfig(day);
+  const isSelected = helpers.isDateSelected(day);
+  const dots = dayConfig?.dots || [];
+  const isCurrentMonth = day.month === "current";
+  const isDisabled = (dayConfig?.disabled ?? false) || helpers.isDateDisabled(day);
+  const rangeStart = helpers.isRangeStart(day);
+  const rangeEnd = helpers.isRangeEnd(day);
+  const currentDate = formatDateLocal(day.fullDate);
+  const hasEvent = events?.find((event) => {
+    const start = new Date(event.startDate);
+    const end = new Date(event.endDate);
+    return new Date(currentDate) >= start && new Date(currentDate) <= end;
+  })?.title;
+  const styleHelpers = createDateStyleHelpers({
+    day,
+    isSelected: isSelected || rangeStart || rangeEnd,
+    isCurrentMonth,
+    isDisabled,
+    styleConfig
+  });
+  return /* @__PURE__ */ jsxs(
+    "button",
     {
-      className: cn(
-        TextVariants({
-          variant,
-          weight,
-          color,
-          align,
-          numberOfLines
-        }),
-        className
+      style: styleHelpers.getDayStyle(),
+      onClick: () => onClick(day),
+      disabled: isDisabled && isCurrentMonth,
+      className: clsx4(
+        date_size_map[size ?? "md"],
+        styleHelpers.getCursorClass(),
+        styleHelpers.getTextColorClass(),
+        "group relative flex flex-col items-center justify-center rounded-full text-sm font-medium transition-all duration-200",
+        mode === "single" && variant === "compact" && styleHelpers.getBackgroundClass(),
+        //prettier-ignore
+        mode === "range" && !isDisabled && helpers.getRangeBackgroundClass(day),
+        variant === "default" && "h-28 md:h-36 w-full rounded-none flex items-start justify-start group p-1 md:p-3 border-r border-gray-300"
+        //prettier-ignore
       ),
-      children: content
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 size-full cursor-pointer",
+            onClick: () => backdropOnClick?.(day)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h5",
+          {
+            className: clsx4(
+              "font-metropolis text-xs transition-colors",
+              variant === "default" && "grid size-8 place-items-center justify-center rounded-full",
+              //prettier-ignore
+              mode === "single" && variant === "default" && styleHelpers.getBackgroundClass()
+              //prettier-ignore
+            ),
+            children: day.date
+          }
+        ),
+        variant === "default" && Boolean(hasEvent) === false && backdropOnClick && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { className: "cursor-pointer", children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: "plus",
+              className: "text-gray-700! opacity-0 transition-opacity group-hover:opacity-100",
+              size: 20
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Add Schedule" })
+        ] }) }),
+        variant === "compact" && dots.length > 0 && /* @__PURE__ */ jsx("div", { className: "-mb-1 flex gap-0.5", children: dots.map((dot, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "size-1 rounded-full",
+            style: {
+              backgroundColor: dot.color ?? "#d1d5db"
+            }
+          },
+          i
+        )) })
+      ]
     }
   );
 }
-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
-      });
-    }
-  };
+function EventBar({
+  segment,
+  showTooltip = true,
+  onClick
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
   const handleMouseMove = (e) => {
-    if (isDragging && zoom > 1) {
-      setPosition({
-        x: e.clientX - dragStart.x,
-        y: e.clientY - dragStart.y
-      });
-    }
+    setPos({
+      x: e.clientX,
+      y: e.clientY
+    });
   };
-  const handleMouseUp = () => {
-    setIsDragging(false);
+  const bg_color_map = {
+    info: "#F1FDFF",
+    purple: "#EEEBFF",
+    orange: "#FFFBED",
+    success: "#EAFFEC",
+    danger: "#FEF3F2",
+    warning: "#FFFAEB",
+    primary: "#F1F2FF"
   };
-  const handleDownload = () => {
-    const link = document.createElement("a");
-    link.href = src;
-    link.download = name;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
+  const ribbon_color_map = {
+    info: "#6CD8FF",
+    purple: "#A6A6FB",
+    orange: "#FFDA71",
+    success: "#6BE995",
+    danger: "#FDA29B",
+    warning: "#FEC84B",
+    primary: "#ABB1FF"
   };
-  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
-      }
-    ),
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      "div",
+      "button",
       {
-        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"
+        type: "button",
+        onClick: () => onClick?.(segment),
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        onMouseMove: handleMouseMove,
+        className: clsx4(
+          "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"
         ),
+        style: {
+          gridColumn: `${segment.startCol + 1} / span ${segment.span}`,
+          backgroundColor: bg_color_map[segment?.event?.color ?? "info"] ?? "#F1FDFF"
+        },
         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
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute left-0 h-full w-1",
+              style: {
+                backgroundColor: ribbon_color_map[segment?.event?.color ?? "info"] ?? "#6CD8FF"
               }
-            )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-px pl-2 *:line-clamp-1", children: [
+            /* @__PURE__ */ jsx(Text, { variant: "t3", weight: "semibold", className: "text-gray-800", children: segment.event.title }),
+            /* @__PURE__ */ jsx(Text, { variant: "t3", className: "text-gray-700", children: segment.event.subtitle })
           ] }),
-          isImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { variant: "t3", className: "line-clamp-1 text-gray-800", children: segment.event.label })
+        ]
+      }
+    ),
+    hovered && showTooltip === true && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none fixed z-50",
+        style: {
+          top: pos.y + 12,
+          left: pos.x + 12
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col rounded-lg bg-white p-3 shadow", children: [
+          /* @__PURE__ */ jsx(Text, { variant: "t3", weight: "semibold", className: "text-gray-800", children: segment.event.title }),
+          Boolean(segment.event.subtitle) && /* @__PURE__ */ jsx(Text, { variant: "t3", className: "text-gray-700", children: segment.event.subtitle }),
+          Boolean(segment.event.label) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1", 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,
+                className: "size-1 rounded-full",
                 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"
-                    }
-                  }
-                )
+                  backgroundColor: ribbon_color_map[segment.event.color ?? "info"] ?? "#6CD8FF"
+                }
               }
             ),
-            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
-            }
-          ) })
-        ]
+            /* @__PURE__ */ jsx(Text, { variant: "t3", className: clsx4("text-gray-800"), children: segment.event.label })
+          ] })
+        ] })
       }
     )
   ] });
-};
-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
-      }));
+}
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React282.useState(false);
+  React282.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
-    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`
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+function CalendarGrid({
+  days: days2,
+  helpers,
+  size,
+  mode,
+  styleConfig,
+  onClick,
+  className,
+  variant,
+  events = [],
+  showCalendarTooltip = true,
+  backdropOnClick,
+  onEventClick
+}) {
+  const isMobile = useIsMobile();
+  const weeks = Array.from(
+    { length: Math.ceil(days2.length / 7) },
+    (_, i) => days2.slice(i * 7, i * 7 + 7)
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx4(
+        "relative",
+        variant === "compact" && size === "sm" && "space-y-1"
+      ),
+      children: weeks.map((week, weekIndex) => {
+        const segments = getWeekEventSegments({ week, events });
+        const threshold = isMobile ? 1 : 2;
+        const displayLimit = 1;
+        const segmentLevels = /* @__PURE__ */ new Map();
+        segments.forEach((seg) => {
+          let placed = false;
+          for (let level = 0; level < threshold; level++) {
+            const conflict = segments.some((other) => {
+              if (other === seg) return false;
+              const otherLevel = segmentLevels.get(other);
+              if (otherLevel !== level) return false;
+              const segStart = seg.startCol;
+              const segEnd = seg.startCol + seg.span - 1;
+              const otherStart = other.startCol;
+              const otherEnd = other.startCol + other.span - 1;
+              return !(segEnd < otherStart || segStart > otherEnd);
+            });
+            if (!conflict) {
+              segmentLevels.set(seg, level);
+              placed = true;
+              break;
+            }
+          }
+          if (!placed) {
+            segmentLevels.set(seg, threshold);
+          }
+        });
+        const columnHiddenCount = Array(7).fill(0);
+        segments.forEach((seg) => {
+          const level = segmentLevels.get(seg) ?? 0;
+          if (level >= threshold) {
+            for (let i = 0; i < seg.span; i++) {
+              const col = seg.startCol + i;
+              if (col >= 0 && col < 7) {
+                columnHiddenCount[col]++;
+              }
+            }
+          }
+        });
+        const hasOverflow = segments.length > threshold;
+        const visibleSegments = segments.filter((seg) => {
+          const level = segmentLevels.get(seg) ?? 0;
+          if (!hasOverflow) {
+            return level < threshold;
+          }
+          return level < displayLimit;
+        });
+        const columnHiddenSegments = Array.from(
+          { length: 7 },
+          () => []
         );
-        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);
+        segments.forEach((seg) => {
+          const isVisible = visibleSegments.includes(seg);
+          if (!isVisible) {
+            for (let i = 0; i < seg.span; i++) {
+              const col = seg.startCol + i;
+              if (col >= 0 && col < 7) {
+                columnHiddenSegments[col].push(seg);
+              }
             }
-            if (acceptedType.endsWith("/*")) {
-              const baseType = acceptedType.split("/")[0];
-              return file.type.startsWith(baseType + "/");
+          }
+        });
+        const columnTotalCount = Array(7).fill(0);
+        segments.forEach((seg) => {
+          for (let i = 0; i < seg.span; i++) {
+            const col = seg.startCol + i;
+            if (col >= 0 && col < 7) {
+              columnTotalCount[col]++;
             }
-            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",
+        const columnVisibleCount = Array(7).fill(0);
+        visibleSegments.forEach((seg) => {
+          for (let i = 0; i < seg.span; i++) {
+            const col = seg.startCol + i;
+            if (col >= 0 && col < 7) {
+              columnVisibleCount[col]++;
+            }
+          }
+        });
+        const columnMoreCount = columnTotalCount.map(
+          (total, i) => Math.max(0, total - columnVisibleCount[i])
+        );
+        return /* @__PURE__ */ jsxs(
+          "div",
           {
-            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",
+            className: clsx4(
+              "relative",
+              variant === "default" && "border-b border-gray-300 last:border-b-0!",
               //prettier-ignore
-              disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+              className
             ),
-            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(
+              /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: cn(
-                    "flex flex-1 flex-col",
-                    variant === "large" && "*:text-center"
+                  className: clsx4(
+                    "grid w-full grid-cols-7",
+                    variant === "default" && "*:border-r *:border-gray-300 [&>*:nth-last-child(1)]:border-r-0",
+                    //prettier-ignore
+                    variant === "compact" && "place-items-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"
+                  children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(
+                    CalendarDayItem,
+                    {
+                      day,
+                      helpers,
+                      size,
+                      mode,
+                      styleConfig,
+                      onClick,
+                      variant,
+                      events,
+                      backdropOnClick: variant === "default" && backdropOnClick ? (day2) => backdropOnClick?.(day2) : void 0
+                    },
+                    dayIndex
+                  ))
                 }
               ),
-              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
+              segments.length > 0 && /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-2 grid grid-cols-7 gap-0.5", children: [
+                visibleSegments.map((seg, index) => /* @__PURE__ */ jsx(
+                  EventBar,
+                  {
+                    segment: seg,
+                    showTooltip: showCalendarTooltip,
+                    onClick: () => onEventClick?.(seg.event)
+                  },
+                  index
+                )),
+                columnMoreCount.map(
+                  (count, colIndex) => count > 0 ? /* @__PURE__ */ jsxs(Dropdown, { children: [
+                    /* @__PURE__ */ jsx(DropdownTrigger, { className: "w-full", asChild: true, children: /* @__PURE__ */ jsx("div", { style: { gridColumnStart: colIndex + 1 }, children: /* @__PURE__ */ jsx(ButtonMore, { count }, colIndex) }) }),
+                    /* @__PURE__ */ jsxs(DropdownContent, { sideOffset: -130, className: "min-w-45", children: [
+                      /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          variant: "t2",
+                          weight: "semibold",
+                          className: "text-gray-800",
+                          children: week[colIndex] && new Intl.DateTimeFormat("id-ID", {
+                            day: "numeric",
+                            month: "long",
+                            year: "numeric"
+                          }).format(week[colIndex].fullDate)
+                        }
+                      ),
+                      columnHiddenSegments[colIndex].map((seg, index) => /* @__PURE__ */ jsx(
+                        EventBar,
+                        {
+                          segment: seg,
+                          showTooltip: false,
+                          onClick: () => onEventClick?.(seg.event)
+                        },
+                        index
+                      ))
+                    ] })
+                  ] }, colIndex) : null
+                )
+              ] })
+            ]
           },
-          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
+          weekIndex
+        );
+      })
     }
-  ) });
+  );
 }
-function DropdownItem({
-  children,
-  className,
-  ...props
-}) {
+var ButtonDropdown = ({
+  onClick,
+  active,
+  size = "md"
+}) => {
+  const size_map = {
+    sm: 11,
+    md: 12,
+    lg: 18
+  };
   return /* @__PURE__ */ jsx(
-    DropdownMenu.Item,
+    Button,
     {
+      size: "icon",
+      onClick,
+      color: "gray",
       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
+        "bg-transparent transition-colors outline-none *:duration-300 hover:bg-gray-50 focus:outline-none"
       ),
-      ...props,
-      children
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "arrow-down",
+          size: size_map[size],
+          className: cn(
+            "text-primary-1000",
+            active == true ? "rotate-180" : "rotate-0"
+          )
+        }
+      )
     }
   );
-}
-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({});
-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"
-    }
-  }
-);
-cva(
-  "pointer-events-none absolute top-0.5 inline-block rounded-full bg-white shadow-lg ring-0 transition-transform",
-  {
-    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"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-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 }) {
+};
+var ItemDropdown = ({
+  active,
+  value,
+  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"
-      ] })
+      className: cn(
+        "w-full min-w-23.5 cursor-pointer rounded-md border px-1.5 py-1 text-sm transition-colors outline-none",
+        active ? "bg-primary-50 border-primary-300" : "border-transparent hover:bg-gray-50"
+      ),
+      children: /* @__PURE__ */ jsx(Text, { value, weight: "medium" })
     }
   );
-}
-
-// src/components/calendar/helpers/create-date-style-helpers.ts
-function createDateStyleHelpers({
-  isSelected,
-  isDisabled,
-  isCurrentMonth,
-  styleConfig,
-  day
+};
+var DropdownWrapper = ({
+  children,
+  onClose
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "relative", onClick: () => onClose(false), children: /* @__PURE__ */ jsx("div", { className: "absolute top-5 left-1/2 z-20 max-h-48 -translate-x-1/2 space-y-1 overflow-y-auto rounded-lg bg-white px-2 py-1 shadow-md", children }) });
+};
+var header_size_map = {
+  sm: "t2",
+  md: "t1",
+  lg: "p3"
+};
+function CalendarHeader({
+  size = "md",
+  showNavigator,
+  calendar,
+  dropdown,
+  months,
+  handleNextMonth,
+  handlePrevMonth,
+  showNextNavigator,
+  showPrevNavigator
 }) {
-  const getSelectedStyle = (styleConfig2) => {
-    return {
-      backgroundColor: styleConfig2?.selected?.background,
-      color: styleConfig2?.selected?.text
-    };
-  };
-  const getDisabledStyle = (styleConfig2) => {
-    return {
-      backgroundColor: styleConfig2?.disabled?.background,
-      color: styleConfig2?.disabled?.text
-    };
-  };
-  const getDayStyle = () => {
-    if (isSelected) {
-      return getSelectedStyle(styleConfig);
-    } else if (isDisabled && day.month === "current") {
-      return getDisabledStyle(styleConfig);
+  const { currentMonth, currentYear } = calendar;
+  const years = useMemo(() => {
+    const yearRange = [];
+    for (let i = currentYear - 100; i <= currentYear + 100; i++) {
+      yearRange.push(i);
     }
-    return {};
-  };
-  const getCursorClass = () => {
-    if (isDisabled && isCurrentMonth) {
-      return "cursor-not-allowed";
-    }
-    return "cursor-pointer";
-  };
-  const getTextColorClass = () => {
-    if (!isCurrentMonth) {
-      return "[&>h5]:text-gray-500";
-    }
-    if (isSelected && styleConfig?.selected?.text != null) {
-      return "";
-    }
-    if (isSelected) {
-      return "[&>h5]:text-white!";
-    }
-    if (isDisabled && styleConfig?.disabled?.text != null) {
-      return "";
-    }
-    if (isDisabled) {
-      return "*:text-red-500!";
-    }
-    if (isToday(day)) {
-      return "*:text-info-500!";
-    }
-    return "*:text-gray-700!";
-  };
-  const getBackgroundClass = () => {
-    if (isSelected && styleConfig?.selected?.background != null) {
-      return "";
-    }
-    if (isSelected) {
-      return "bg-primary-1000";
-    }
-    if (isDisabled && isCurrentMonth && styleConfig?.disabled?.background != null) {
-      return "";
-    }
-    if (isDisabled && isCurrentMonth) {
-      return "bg-red-500/30";
-    }
-    if (!isDisabled) {
-      return "hover:bg-gray-100 group-hover:bg-gray-100";
-    }
-    return "";
-  };
-  return { getBackgroundClass, getTextColorClass, getCursorClass, getDayStyle };
+    return yearRange;
+  }, [currentYear]);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
+    showNavigator && /* @__PURE__ */ jsx(
+      NavigatorButton,
+      {
+        size,
+        direction: "prev",
+        onClick: handlePrevMonth,
+        visible: showPrevNavigator
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      showNavigator && /* @__PURE__ */ jsx(
+        MonthDropdown,
+        {
+          months,
+          calendar,
+          dropdown
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          variant: header_size_map[size],
+          weight: "semibold",
+          value: `${months[currentMonth]} - ${currentYear}`
+        }
+      ),
+      showNavigator && /* @__PURE__ */ jsx(YearDropdown, { years, calendar, dropdown })
+    ] }),
+    showNavigator && /* @__PURE__ */ jsx(
+      NavigatorButton,
+      {
+        direction: "next",
+        size,
+        onClick: handleNextMonth,
+        visible: showNextNavigator
+      }
+    )
+  ] });
 }
-var date_size_map = {
-  md: "size-7.5",
-  sm: "size-6",
-  lg: "size-9"
-};
-function CalendarDayItem({
-  day,
-  helpers,
+function MonthDropdown({ months, calendar, dropdown }) {
+  const { currentMonth, setCurrentMonth } = calendar;
+  const { isMonthOpen, setMonthOpen } = dropdown;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      ButtonDropdown,
+      {
+        onClick: () => setMonthOpen(!isMonthOpen),
+        active: isMonthOpen
+      }
+    ),
+    isMonthOpen && /* @__PURE__ */ jsx(DropdownWrapper, { onClose: setMonthOpen, children: months.map((month2, index) => /* @__PURE__ */ jsx(
+      ItemDropdown,
+      {
+        onClick: () => setCurrentMonth(index),
+        active: currentMonth === index,
+        value: month2
+      },
+      index
+    )) })
+  ] });
+}
+function YearDropdown({ calendar, dropdown, years }) {
+  const { currentYear, setCurrentYear } = calendar;
+  const { isYearOpen, setYearOpen } = dropdown;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      ButtonDropdown,
+      {
+        onClick: () => setYearOpen(!isYearOpen),
+        active: isYearOpen
+      }
+    ),
+    isYearOpen && /* @__PURE__ */ jsx(DropdownWrapper, { onClose: setYearOpen, children: years.map((year) => /* @__PURE__ */ jsx(
+      ItemDropdown,
+      {
+        onClick: () => setCurrentYear(year),
+        active: currentYear === year,
+        value: year.toString()
+      },
+      year
+    )) })
+  ] });
+}
+function NavigatorButton({
+  direction,
   size,
-  mode,
-  styleConfig,
   onClick,
-  variant,
-  events,
-  backdropOnClick
+  visible = true
+}) {
+  const icon = direction === "prev" ? "angle-left-small" : "angle-right-small";
+  return /* @__PURE__ */ jsx(
+    ButtonNavigator,
+    {
+      size,
+      onClick,
+      icon,
+      className: visible ? "" : "pointer-events-none opacity-0"
+    }
+  );
+}
+var day_of_week_size = {
+  sm: "t2",
+  md: "t2",
+  lg: "t1"
+};
+function DaysOfWeek({
+  daysOfWeek,
+  size = "md",
+  wrapperClassName,
+  variant = "default",
+  type = "month",
+  renderItem
 }) {
-  const dayConfig = helpers.getDayConfig(day);
-  const isSelected = helpers.isDateSelected(day);
-  const dots = dayConfig?.dots || [];
-  const isCurrentMonth = day.month === "current";
-  const isDisabled = (dayConfig?.disabled ?? false) || helpers.isDateDisabled(day);
-  const rangeStart = helpers.isRangeStart(day);
-  const rangeEnd = helpers.isRangeEnd(day);
-  const currentDate = formatDateLocal(day.fullDate);
-  const hasEvent = events?.find((event) => {
-    const start = new Date(event.startDate);
-    const end = new Date(event.endDate);
-    return new Date(currentDate) >= start && new Date(currentDate) <= end;
-  })?.title;
-  const styleHelpers = createDateStyleHelpers({
-    day,
-    isSelected: isSelected || rangeStart || rangeEnd,
-    isCurrentMonth,
-    isDisabled,
-    styleConfig
-  });
   return /* @__PURE__ */ jsxs(
-    "button",
+    "div",
     {
-      style: styleHelpers.getDayStyle(),
-      onClick: () => onClick(day),
-      disabled: isDisabled && isCurrentMonth,
-      className: clsx9(
-        date_size_map[size ?? "md"],
-        styleHelpers.getCursorClass(),
-        styleHelpers.getTextColorClass(),
-        "group relative flex flex-col items-center justify-center rounded-full text-sm font-medium transition-all duration-200",
-        mode === "single" && variant === "compact" && styleHelpers.getBackgroundClass(),
+      className: clsx4(
+        "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",
         //prettier-ignore
-        mode === "range" && !isDisabled && helpers.getRangeBackgroundClass(day),
-        variant === "default" && "h-28 md:h-36 w-full rounded-none flex items-start justify-start group p-1 md:p-3 border-r border-gray-300"
+        variant === "default" && type === "month" && "grid-cols-7",
+        variant === "default" && type === "week" && "grid-cols-[60px_1fr_1fr_1fr_1fr_1fr_1fr_1fr]",
         //prettier-ignore
+        wrapperClassName
       ),
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute inset-0 size-full cursor-pointer",
-            onClick: () => backdropOnClick?.(day)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "h5",
+        type === "week" && variant === "default" && renderItem === void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", {}),
+          daysOfWeek.map((day) => /* @__PURE__ */ jsx(Text, { as: "h5", value: day, variant: "t1" }, day))
+        ] }),
+        type === "month" && renderItem === void 0 && daysOfWeek.map((day) => /* @__PURE__ */ jsx(
+          Text,
           {
-            className: clsx9(
-              "font-metropolis text-xs transition-colors",
-              variant === "default" && "grid size-8 place-items-center justify-center rounded-full",
-              //prettier-ignore
-              mode === "single" && variant === "default" && styleHelpers.getBackgroundClass()
-              //prettier-ignore
+            as: "h5",
+            weight: variant === "compact" ? "medium" : "semibold",
+            value: day,
+            className: clsx4(
+              variant === "compact" && "text-gray-600!",
+              variant === "default" && "text-gray-900! uppercase"
             ),
-            children: day.date
-          }
-        ),
-        variant === "default" && Boolean(hasEvent) === false && backdropOnClick && /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { className: "cursor-pointer", children: /* @__PURE__ */ jsx(
-            Icon,
-            {
-              name: "plus",
-              className: "text-gray-700! opacity-0 transition-opacity group-hover:opacity-100",
-              size: 20
-            }
-          ) }),
-          /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Add Schedule" })
-        ] }) }),
-        variant === "compact" && dots.length > 0 && /* @__PURE__ */ jsx("div", { className: "-mb-1 flex gap-0.5", children: dots.map((dot, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "size-1 rounded-full",
-            style: {
-              backgroundColor: dot.color ?? "#d1d5db"
-            }
+            variant: variant === "compact" ? day_of_week_size[size] : "t1"
           },
-          i
-        )) })
+          day
+        ))
       ]
     }
   );
 }
-function EventBar({
-  segment,
-  showTooltip = true,
-  onClick
-}) {
-  const [hovered, setHovered] = useState(false);
-  const [pos, setPos] = useState({ x: 0, y: 0 });
-  const handleMouseMove = (e) => {
-    setPos({
-      x: e.clientX,
-      y: e.clientY
+
+// src/components/calendar/constants.tsx
+var typeOptions = [
+  // {
+  //   label: 'Year',
+  //   value: 'year',
+  // },
+  {
+    label: "Month",
+    value: "month"
+  },
+  {
+    label: "Week",
+    value: "week"
+  }
+  // {
+  //   label: 'Day',
+  //   value: 'day',
+  // },
+  // {
+  //   label: 'Agenda',
+  //   value: 'agenda',
+  // },
+];
+var days = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
+var month = [
+  "Januari",
+  "Februari",
+  "Maret",
+  "April",
+  "Mei",
+  "Juni",
+  "Juli",
+  "Agustus",
+  "September",
+  "Oktober",
+  "November",
+  "Desember"
+];
+var Calendar2 = ({
+  showNavigator = true,
+  showHeader = true,
+  value,
+  onChange,
+  disabledDates = [],
+  dayConfigs = [],
+  defaultMonth,
+  defaultYear,
+  styleConfig,
+  wrapperClassname,
+  weekWrapperClassname,
+  dayWrapperClassname,
+  daysOfWeek = days,
+  months = month,
+  showNextNavigator = true,
+  showPrevNavigator = true,
+  mode = "single",
+  rangeValue,
+  size = "md",
+  variant = "default",
+  events,
+  showCalendarTooltip = true,
+  type = "month",
+  onTypeChange,
+  onEventClick,
+  backdropOnClick,
+  onMonthChange,
+  onYearChange,
+  showDefaultController = false
+}) => {
+  const currentDate = /* @__PURE__ */ new Date();
+  const [currentMonth, setCurrentMonth] = useState(defaultMonth ?? currentDate.getMonth());
+  const [currentYear, setCurrentYear] = useState(defaultYear ?? currentDate.getFullYear());
+  const [isDropdownYearShow, setIsDropdownYearShow] = useState(false);
+  const [isDropdownMonthShow, setIsDropdownMonthShow] = useState(false);
+  const [selectedType, setSelectedType] = useState(type);
+  const [selectedTypeIndex, setSelectedTypeIndex] = useState(
+    null
+  );
+  const [currentWeekStart, setCurrentWeekStart] = useState(() => {
+    const today = /* @__PURE__ */ new Date();
+    const day = today.getDay();
+    const start = new Date(today);
+    start.setDate(today.getDate() - day);
+    start.setHours(0, 0, 0, 0);
+    return start;
+  });
+  const calendarDays = getCalendarDays({ currentMonth, currentYear });
+  const calendarHelpers = createCalendarHelpers({
+    disabledDates,
+    dayConfigs,
+    rangeValue,
+    mode,
+    value
+  });
+  const calendarState = {
+    currentMonth,
+    currentYear,
+    setCurrentMonth,
+    setCurrentYear
+  };
+  const dropdownState = {
+    isMonthOpen: isDropdownMonthShow,
+    setMonthOpen: setIsDropdownMonthShow,
+    isYearOpen: isDropdownYearShow,
+    setYearOpen: setIsDropdownYearShow
+  };
+  const handleDateClick = (day) => {
+    const dayConfig = calendarHelpers.getDayConfig(day);
+    const disabled = (dayConfig?.disabled ?? false) || calendarHelpers.isDateDisabled(day);
+    if (disabled) {
+      return;
+    }
+    onChange?.(day.fullDate);
+  };
+  const getWeekDaysLabel = (weekStart) => {
+    return Array.from({ length: 7 }, (_, i) => {
+      const d = new Date(weekStart);
+      d.setDate(weekStart.getDate() + i);
+      const dayName = daysOfWeek[d.getDay()];
+      const date = d.getDate();
+      return `${dayName} ${date}`;
     });
   };
-  const bg_color_map = {
-    info: "#F1FDFF",
-    purple: "#EEEBFF",
-    orange: "#FFFBED",
-    success: "#EAFFEC",
-    danger: "#FEF3F2",
-    warning: "#FFFAEB",
-    primary: "#F1F2FF"
+  const changeWeek = (delta) => {
+    setCurrentWeekStart((prev) => {
+      const next = new Date(prev);
+      next.setDate(prev.getDate() + delta * 7);
+      setCurrentMonth(next.getMonth());
+      setCurrentYear(next.getFullYear());
+      return next;
+    });
   };
-  const ribbon_color_map = {
-    info: "#6CD8FF",
-    purple: "#A6A6FB",
-    orange: "#FFDA71",
-    success: "#6BE995",
-    danger: "#FDA29B",
-    warning: "#FEC84B",
-    primary: "#ABB1FF"
+  const changeMonth = (delta) => {
+    let newMonth = currentMonth + delta;
+    let newYear = currentYear;
+    if (newMonth < 0) {
+      newMonth = 11;
+      newYear -= 1;
+    } else if (newMonth > 11) {
+      newMonth = 0;
+      newYear += 1;
+    }
+    onMonthChange?.(newMonth);
+    onYearChange?.(newYear);
+    setCurrentMonth(newMonth);
+    setCurrentYear(newYear);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onClick?.(segment),
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
-        onMouseMove: handleMouseMove,
-        className: clsx9(
-          "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"
-        ),
-        style: {
-          gridColumn: `${segment.startCol + 1} / span ${segment.span}`,
-          backgroundColor: bg_color_map[segment?.event?.color ?? "info"] ?? "#F1FDFF"
-        },
-        children: [
+  const handleNavigationDefault = (type2, action) => {
+    if (type2 === "month") {
+      if (action === "prev") {
+        return changeMonth(-1);
+      } else {
+        return changeMonth(1);
+      }
+    }
+    if (type2 === "week") {
+      if (action === "prev") {
+        return changeWeek(1);
+      } else {
+        return changeWeek(-1);
+      }
+    }
+  };
+  useEffect(() => {
+    if (value !== void 0) {
+      setCurrentMonth(
+        value?.getMonth() ?? defaultMonth ?? currentDate?.getMonth()
+      );
+      setCurrentYear(
+        value?.getFullYear() ?? defaultYear ?? currentDate?.getFullYear()
+      );
+    }
+  }, [value]);
+  useEffect(() => {
+    if (type !== void 0) {
+      setSelectedType(type);
+    }
+  }, [type]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: clsx4(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: [
           /* @__PURE__ */ jsx(
-            "span",
+            ButtonNavigation,
             {
-              className: "absolute left-0 h-full w-1",
-              style: {
-                backgroundColor: ribbon_color_map[segment?.event?.color ?? "info"] ?? "#6CD8FF"
-              }
+              onClick: () => handleNavigationDefault(selectedType, "prev"),
+              type: "prev"
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-px pl-2 *:line-clamp-1", children: [
-            /* @__PURE__ */ jsx(Text, { variant: "t3", weight: "semibold", className: "text-gray-800", children: segment.event.title }),
-            /* @__PURE__ */ jsx(Text, { variant: "t3", className: "text-gray-700", children: segment.event.subtitle })
-          ] }),
-          /* @__PURE__ */ jsx(Text, { variant: "t3", className: "line-clamp-1 text-gray-800", children: segment.event.label })
-        ]
-      }
-    ),
-    hovered && showTooltip === true && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "pointer-events-none fixed z-50",
-        style: {
-          top: pos.y + 12,
-          left: pos.x + 12
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col rounded-lg bg-white p-3 shadow", children: [
-          /* @__PURE__ */ jsx(Text, { variant: "t3", weight: "semibold", className: "text-gray-800", children: segment.event.title }),
-          Boolean(segment.event.subtitle) && /* @__PURE__ */ jsx(Text, { variant: "t3", className: "text-gray-700", children: segment.event.subtitle }),
-          Boolean(segment.event.label) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "size-1 rounded-full",
-                style: {
-                  backgroundColor: ribbon_color_map[segment.event.color ?? "info"] ?? "#6CD8FF"
-                }
+          /* @__PURE__ */ jsx(
+            ButtonNavigation,
+            {
+              onClick: () => handleNavigationDefault(selectedType, "next"),
+              type: "next"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            variant: "h4",
+            weight: "semibold",
+            className: "-translate-y-0.5 text-gray-900",
+            children: [
+              months[currentMonth],
+              " ",
+              currentYear
+            ]
+          }
+        )
+      ] }),
+      showDefaultController && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            color: "gray",
+            variant: "outline",
+            className: "capitalize",
+            onClick: () => setCurrentMonth((/* @__PURE__ */ new Date()).getMonth()),
+            children: "Today"
+          }
+        ),
+        /* @__PURE__ */ jsxs(Dropdown, { children: [
+          /* @__PURE__ */ jsx(DropdownTrigger, { children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              color: "gray",
+              variant: "outline",
+              className: "flex items-center capitalize",
+              children: [
+                selectedType,
+                " ",
+                /* @__PURE__ */ jsx(Icon, { name: "angle-down-small", size: 20 })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            DropdownContent,
+            {
+              align: "end",
+              className: "w-36 *:rounded-md *:border-0",
+              children: typeOptions.map((option, index) => /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  onFocus: () => setSelectedTypeIndex(index),
+                  onClick: () => {
+                    setSelectedType(option.value);
+                    onTypeChange?.(option.value);
+                  },
+                  className: clsx4(
+                    (selectedType === option.value || index === selectedTypeIndex) && "bg-primary-50!"
+                  ),
+                  children: /* @__PURE__ */ jsx(Text, { className: "text-gray-900", children: option.label })
+                },
+                option.value
+              ))
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "border bg-white",
+          variant === "compact" && "mx-auto w-fit rounded-2xl border-gray-200 p-6 ",
+          //prettier-ignore
+          variant === "default" && "overflow-hidden rounded-xl border-gray-300",
+          //prettier-ignore
+          wrapperClassname
+        ),
+        children: [
+          selectedType === "week" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            DaysOfWeek,
+            {
+              type: "week",
+              size,
+              variant,
+              daysOfWeek: getWeekDaysLabel(currentWeekStart),
+              wrapperClassName: weekWrapperClassname
+            }
+          ) }),
+          selectedType === "month" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            showHeader && variant === "compact" && /* @__PURE__ */ jsx(
+              CalendarHeader,
+              {
+                size,
+                calendar: calendarState,
+                dropdown: dropdownState,
+                handleNextMonth: () => changeMonth(1),
+                handlePrevMonth: () => changeMonth(-1),
+                showNavigator,
+                months,
+                showNextNavigator,
+                showPrevNavigator
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DaysOfWeek,
+              {
+                size,
+                variant,
+                daysOfWeek,
+                wrapperClassName: weekWrapperClassname
               }
             ),
-            /* @__PURE__ */ jsx(Text, { variant: "t3", className: clsx9("text-gray-800"), children: segment.event.label })
+            /* @__PURE__ */ jsx(
+              CalendarGrid,
+              {
+                className: dayWrapperClassname,
+                days: calendarDays,
+                helpers: calendarHelpers,
+                size,
+                mode,
+                styleConfig,
+                onClick: handleDateClick,
+                variant,
+                events,
+                showCalendarTooltip,
+                onEventClick,
+                backdropOnClick
+              }
+            )
           ] })
-        ] })
+        ]
       }
     )
-  ] });
-}
-function CalendarGrid({
-  days: days2,
-  helpers,
-  size,
-  mode,
-  styleConfig,
+  ] }) });
+};
+var ButtonNavigation = ({
   onClick,
+  type
+}) => {
+  return /* @__PURE__ */ jsx("button", { onClick, children: /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: type === "next" ? "angle-right-small" : "angle-left-small",
+      size: 30,
+      className: "text-gray-900"
+    }
+  ) });
+};
+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,
-  variant,
-  events = [],
-  showCalendarTooltip = true,
-  backdropOnClick,
-  onEventClick
-}) {
-  const isMobile = useIsMobile();
-  const weeks = Array.from(
-    { length: Math.ceil(days2.length / 7) },
-    (_, i) => days2.slice(i * 7, i * 7 + 7)
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
+  children
+}) => {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-gray-600", className), children });
+};
+var FormErrorMessages = ({
+  messages,
+  size = "md",
+  className
+}) => {
+  if (messages === void 0) return null;
+  const errorList = Array.isArray(messages) ? messages : [messages];
+  if (errorList.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-0.5", className), children: errorList.map((msg, i) => /* @__PURE__ */ jsx(FormErrorMessage, { size, children: msg }, i)) });
+};
+var FormErrorMessage = ({
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-danger-500 text-xs", className), children });
+};
+var FormLabel = ({
+  htmlFor,
+  required = false,
+  size = "md",
+  className,
+  children
+}) => {
+  const sizeClasses = {
+    sm: "text-xs",
+    md: "text-xs",
+    lg: "text-sm"
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
     {
-      className: clsx9(
-        "relative",
-        variant === "compact" && size === "sm" && "space-y-1"
+      htmlFor,
+      className: cn(
+        sizeClasses[size || "md"],
+        "font-metropolis block font-semibold text-gray-900",
+        className
       ),
-      children: weeks.map((week, weekIndex) => {
-        const segments = getWeekEventSegments({ week, events });
-        const threshold = isMobile ? 1 : 2;
-        const displayLimit = 1;
-        const segmentLevels = /* @__PURE__ */ new Map();
-        segments.forEach((seg) => {
-          let placed = false;
-          for (let level = 0; level < threshold; level++) {
-            const conflict = segments.some((other) => {
-              if (other === seg) return false;
-              const otherLevel = segmentLevels.get(other);
-              if (otherLevel !== level) return false;
-              const segStart = seg.startCol;
-              const segEnd = seg.startCol + seg.span - 1;
-              const otherStart = other.startCol;
-              const otherEnd = other.startCol + other.span - 1;
-              return !(segEnd < otherStart || segStart > otherEnd);
-            });
-            if (!conflict) {
-              segmentLevels.set(seg, level);
-              placed = true;
-              break;
-            }
-          }
-          if (!placed) {
-            segmentLevels.set(seg, threshold);
-          }
-        });
-        const columnHiddenCount = Array(7).fill(0);
-        segments.forEach((seg) => {
-          const level = segmentLevels.get(seg) ?? 0;
-          if (level >= threshold) {
-            for (let i = 0; i < seg.span; i++) {
-              const col = seg.startCol + i;
-              if (col >= 0 && col < 7) {
-                columnHiddenCount[col]++;
-              }
-            }
-          }
-        });
-        const hasOverflow = segments.length > threshold;
-        const visibleSegments = segments.filter((seg) => {
-          const level = segmentLevels.get(seg) ?? 0;
-          if (!hasOverflow) {
-            return level < threshold;
-          }
-          return level < displayLimit;
-        });
-        const columnHiddenSegments = Array.from(
-          { length: 7 },
-          () => []
-        );
-        segments.forEach((seg) => {
-          const isVisible = visibleSegments.includes(seg);
-          if (!isVisible) {
-            for (let i = 0; i < seg.span; i++) {
-              const col = seg.startCol + i;
-              if (col >= 0 && col < 7) {
-                columnHiddenSegments[col].push(seg);
-              }
-            }
-          }
-        });
-        const columnTotalCount = Array(7).fill(0);
-        segments.forEach((seg) => {
-          for (let i = 0; i < seg.span; i++) {
-            const col = seg.startCol + i;
-            if (col >= 0 && col < 7) {
-              columnTotalCount[col]++;
-            }
-          }
-        });
-        const columnVisibleCount = Array(7).fill(0);
-        visibleSegments.forEach((seg) => {
-          for (let i = 0; i < seg.span; i++) {
-            const col = seg.startCol + i;
-            if (col >= 0 && col < 7) {
-              columnVisibleCount[col]++;
-            }
-          }
-        });
-        const columnMoreCount = columnTotalCount.map(
-          (total, i) => Math.max(0, total - columnVisibleCount[i])
-        );
-        return /* @__PURE__ */ jsxs(
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx("span", { className: "text-danger-500 ml-1", children: "*" })
+      ]
+    }
+  );
+};
+var FormHint = ({ className, children }) => {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-gray-700", className), children });
+};
+var FormField = React282__default.forwardRef(
+  function FormField2({
+    label,
+    description,
+    hint,
+    errorMessages,
+    required = false,
+    size = "md",
+    htmlFor,
+    className,
+    children
+  }, ref) {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-1", className), children: [
+      label !== void 0 && /* @__PURE__ */ jsx(FormLabel, { htmlFor, required, size, children: label }),
+      description !== void 0 && /* @__PURE__ */ jsx(FormDescription, { size, children: description }),
+      children,
+      hint !== void 0 && /* @__PURE__ */ jsx(FormHint, { size, children: hint }),
+      errorMessages !== void 0 && /* @__PURE__ */ jsx(FormErrorMessages, { messages: errorMessages, size })
+    ] });
+  }
+);
+var Input = React282.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 = React282.useId();
+    const fieldRef = React282.useRef(null);
+    React282.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,
+        hint,
+        description,
+        errorMessages,
+        className,
+        required: props.required,
+        size,
+        htmlFor: props?.id ?? generatedId,
+        children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: clsx9(
-              "relative",
-              variant === "default" && "border-b border-gray-300 last:border-b-0!",
-              //prettier-ignore
-              className
+            className: cn(
+              "flex w-full items-stretch overflow-hidden rounded-lg border bg-white",
+              hasError ? "border-danger-500 focus-within:border-danger-500" : "focus-within:border-primary-300 border-gray-200"
             ),
             children: [
-              /* @__PURE__ */ jsx(
+              Boolean(leftAddon) && /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: clsx9(
-                    "grid w-full grid-cols-7",
-                    variant === "default" && "*:border-r *:border-gray-300 [&>*:nth-last-child(1)]:border-r-0",
-                    //prettier-ignore
-                    variant === "compact" && "place-items-center"
+                  className: cn(
+                    leftAddonClassName,
+                    "flex items-center justify-center border-r border-gray-200 px-3",
+                    Boolean(mergedAddon) && "border-r-0",
+                    hasError ? "text-danger-500 border-danger-500" : "border-gray-200 text-gray-600"
                   ),
-                  children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(
-                    CalendarDayItem,
-                    {
-                      day,
-                      helpers,
-                      size,
-                      mode,
-                      styleConfig,
-                      onClick,
-                      variant,
-                      events,
-                      backdropOnClick: variant === "default" && backdropOnClick ? (day2) => backdropOnClick?.(day2) : void 0
-                    },
-                    dayIndex
-                  ))
+                  children: leftAddon
                 }
               ),
-              segments.length > 0 && /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-2 grid grid-cols-7 gap-0.5", children: [
-                visibleSegments.map((seg, index) => /* @__PURE__ */ jsx(
-                  EventBar,
-                  {
-                    segment: seg,
-                    showTooltip: showCalendarTooltip,
-                    onClick: () => onEventClick?.(seg.event)
-                  },
-                  index
-                )),
-                columnMoreCount.map(
-                  (count, colIndex) => count > 0 ? /* @__PURE__ */ jsxs(Dropdown, { children: [
-                    /* @__PURE__ */ jsx(DropdownTrigger, { className: "w-full", asChild: true, children: /* @__PURE__ */ jsx("div", { style: { gridColumnStart: colIndex + 1 }, children: /* @__PURE__ */ jsx(ButtonMore, { count }, colIndex) }) }),
-                    /* @__PURE__ */ jsxs(DropdownContent, { sideOffset: -130, className: "min-w-45", children: [
-                      /* @__PURE__ */ jsx(
-                        Text,
-                        {
-                          variant: "t2",
-                          weight: "semibold",
-                          className: "text-gray-800",
-                          children: week[colIndex] && new Intl.DateTimeFormat("id-ID", {
-                            day: "numeric",
-                            month: "long",
-                            year: "numeric"
-                          }).format(week[colIndex].fullDate)
-                        }
-                      ),
-                      columnHiddenSegments[colIndex].map((seg, index) => /* @__PURE__ */ jsx(
-                        EventBar,
-                        {
-                          segment: seg,
-                          showTooltip: false,
-                          onClick: () => onEventClick?.(seg.event)
-                        },
-                        index
-                      ))
-                    ] })
-                  ] }, colIndex) : null
-                )
-              ] })
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref,
+                  type,
+                  size: inputSize,
+                  id: props?.id ?? generatedId,
+                  className: cn(
+                    inputVariants({ size }),
+                    "font-metropolis w-full rounded-none border-none focus-visible:outline-none",
+                    Boolean(leftAddon) && "pl-2",
+                    Boolean(rightAddon) && "pr-2",
+                    Boolean(mergedAddon) && "shadow-none",
+                    Boolean(props.disabled) && "cursor-not-allowed bg-gray-100",
+                    className
+                  ),
+                  ...props,
+                  required: false
+                }
+              ),
+              Boolean(rightAddon) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    rightAddonClassName,
+                    "flex items-center justify-center border-l border-gray-200 px-3",
+                    hasError ? "text-danger-500" : "text-gray-600",
+                    Boolean(mergedAddon) && "border-l-0"
+                  ),
+                  children: rightAddon
+                }
+              )
             ]
-          },
-          weekIndex
-        );
-      })
-    }
-  );
-}
-var ButtonDropdown = ({
-  onClick,
-  active,
-  size = "md"
-}) => {
-  const size_map = {
-    sm: 11,
-    md: 12,
-    lg: 18
-  };
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      size: "icon",
-      onClick,
-      color: "gray",
-      className: cn(
-        "bg-transparent transition-colors outline-none *:duration-300 hover:bg-gray-50 focus:outline-none"
-      ),
-      children: /* @__PURE__ */ jsx(
-        Icon,
-        {
-          name: "arrow-down",
-          size: size_map[size],
-          className: cn(
-            "text-primary-1000",
-            active == true ? "rotate-180" : "rotate-0"
-          )
-        }
-      )
-    }
-  );
-};
-var ItemDropdown = ({
-  active,
-  value,
-  onClick
-}) => {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick,
-      className: cn(
-        "w-full min-w-23.5 cursor-pointer rounded-md border px-1.5 py-1 text-sm transition-colors outline-none",
-        active ? "bg-primary-50 border-primary-300" : "border-transparent hover:bg-gray-50"
-      ),
-      children: /* @__PURE__ */ jsx(Text, { value, weight: "medium" })
-    }
-  );
+          }
+        )
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/date-picker/helpers.ts
+var monthsShort = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "Mei",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var monthsFull = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var getFormatConfig = (format) => {
+  switch (format) {
+    case "DD-MM-YYYY":
+      return { separator: "-", placeholder: "DD-MM-YYYY", maxLength: 10 };
+    case "DD/MM/YYYY":
+      return { separator: "/", placeholder: "DD/MM/YYYY", maxLength: 10 };
+    case "DD MMM YYYY":
+      return { separator: " ", placeholder: "DD MMM YYYY", maxLength: 11 };
+    case "DD MMMM YYYY":
+      return { separator: " ", placeholder: "DD MMMM YYYY", maxLength: 18 };
+    case "YYYY-MM-DD":
+      return { separator: "-", placeholder: "YYYY-MM-DD", maxLength: 10 };
+    case "MM/DD/YYYY":
+      return { separator: "/", placeholder: "MM/DD/YYYY", maxLength: 10 };
+    default:
+      return { separator: "-", placeholder: "DD-MM-YYYY", maxLength: 10 };
+  }
 };
-var DropdownWrapper = ({
-  children,
-  onClose
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: "relative", onClick: () => onClose(false), children: /* @__PURE__ */ jsx("div", { className: "absolute top-5 left-1/2 z-20 max-h-48 -translate-x-1/2 space-y-1 overflow-y-auto rounded-lg bg-white px-2 py-1 shadow-md", children }) });
+var formatDateToString = (date, format) => {
+  if (!date) return "";
+  const day = String(date.getDate()).padStart(2, "0");
+  const month2 = String(date.getMonth() + 1).padStart(2, "0");
+  const monthShort = monthsShort[date.getMonth()];
+  const monthFull = monthsFull[date.getMonth()];
+  const year = date.getFullYear();
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+  const time = `${hours}:${minutes}:${seconds}`;
+  switch (format) {
+    case "DD-MM-YYYY":
+      return `${day}-${month2}-${year}`;
+    case "DD/MM/YYYY":
+      return `${day}/${month2}/${year}`;
+    case "DD MMM YYYY":
+      return `${day} ${monthShort} ${year}`;
+    case "DD MMMM YYYY":
+      return `${day} ${monthFull} ${year}`;
+    case "YYYY-MM-DD":
+      return `${year}-${month2}-${day}`;
+    case "MM/DD/YYYY":
+      return `${month2}/${day}/${year}`;
+    case "DD-MM-YYYY HH:mm:ss":
+      return `${day}-${month2}-${year} ${time}`;
+    case "DD/MM/YYYY HH:mm:ss":
+      return `${day}/${month2}/${year} ${time}`;
+    case "DD MMM YYYY HH:mm:ss":
+      return `${day} ${monthShort} ${year} ${time}`;
+    case "DD MMM YYYY - HH:mm:ss":
+      return `${day} ${monthShort} ${year} - ${time}`;
+    case "DD MMMM YYYY HH:mm:ss":
+      return `${day} ${monthFull} ${year} ${time}`;
+    case "DD MMMM YYYY - HH:mm:ss":
+      return `${day} ${monthFull} ${year} - ${time}`;
+    case "YYYY-MM-DD HH:mm:ss":
+      return `${year}-${month2}-${day} ${time}`;
+    default:
+      return `${day}-${month2}-${year}`;
+  }
 };
-var header_size_map = {
-  sm: "t2",
-  md: "t1",
-  lg: "p3"
+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}`;
+}
+var parseMonthName = (monthStr) => {
+  const monthLower = monthStr.toLowerCase();
+  const shortIndex = monthsShort.findIndex(
+    (m) => m.toLowerCase() === monthLower
+  );
+  if (shortIndex !== -1) return shortIndex + 1;
+  const fullIndex = monthsFull.findIndex((m) => m.toLowerCase() === monthLower);
+  if (fullIndex !== -1) return fullIndex + 1;
+  return null;
 };
-function CalendarHeader({
-  size = "md",
-  showNavigator,
-  calendar,
-  dropdown,
-  months,
-  handleNextMonth,
-  handlePrevMonth,
-  showNextNavigator,
-  showPrevNavigator
-}) {
-  const { currentMonth, currentYear } = calendar;
-  const years = useMemo(() => {
-    const yearRange = [];
-    for (let i = currentYear - 100; i <= currentYear + 100; i++) {
-      yearRange.push(i);
-    }
-    return yearRange;
-  }, [currentYear]);
-  return /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
-    showNavigator && /* @__PURE__ */ jsx(
-      NavigatorButton,
-      {
-        size,
-        direction: "prev",
-        onClick: handlePrevMonth,
-        visible: showPrevNavigator
+var chipVariants = 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: ""
       }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      showNavigator && /* @__PURE__ */ jsx(
-        MonthDropdown,
-        {
-          months,
-          calendar,
-          dropdown
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          as: "span",
-          variant: header_size_map[size],
-          weight: "semibold",
-          value: `${months[currentMonth]} - ${currentYear}`
-        }
-      ),
-      showNavigator && /* @__PURE__ */ jsx(YearDropdown, { years, calendar, dropdown })
-    ] }),
-    showNavigator && /* @__PURE__ */ jsx(
-      NavigatorButton,
+    },
+    compoundVariants: [
+      // Default color variants
       {
-        direction: "next",
-        size,
-        onClick: handleNextMonth,
-        visible: showNextNavigator
-      }
-    )
-  ] });
-}
-function MonthDropdown({ months, calendar, dropdown }) {
-  const { currentMonth, setCurrentMonth } = calendar;
-  const { isMonthOpen, setMonthOpen } = dropdown;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      ButtonDropdown,
+        color: "gray",
+        state: "default",
+        className: "border-gray-00 bg-white text-gray-700 hover:bg-gray-100"
+      },
       {
-        onClick: () => setMonthOpen(!isMonthOpen),
-        active: isMonthOpen
-      }
-    ),
-    isMonthOpen && /* @__PURE__ */ jsx(DropdownWrapper, { onClose: setMonthOpen, children: months.map((month2, index) => /* @__PURE__ */ jsx(
-      ItemDropdown,
+        color: "gray",
+        state: "selected",
+        className: "border-gray-400 bg-gray-200 text-gray-800"
+      },
       {
-        onClick: () => setCurrentMonth(index),
-        active: currentMonth === index,
-        value: month2
+        color: "gray",
+        state: "disabled",
+        className: "cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400"
       },
-      index
-    )) })
-  ] });
-}
-function YearDropdown({ calendar, dropdown, years }) {
-  const { currentYear, setCurrentYear } = calendar;
-  const { isYearOpen, setYearOpen } = dropdown;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      ButtonDropdown,
+      // Primary color variants
       {
-        onClick: () => setYearOpen(!isYearOpen),
-        active: isYearOpen
-      }
-    ),
-    isYearOpen && /* @__PURE__ */ jsx(DropdownWrapper, { onClose: setYearOpen, children: years.map((year) => /* @__PURE__ */ jsx(
-      ItemDropdown,
+        color: "primary",
+        state: "default",
+        className: "border-primary-200 text-primary-1000 hover:bg-primary-50 bg-white"
+      },
       {
-        onClick: () => setCurrentYear(year),
-        active: currentYear === year,
-        value: year.toString()
+        color: "primary",
+        state: "selected",
+        className: "bg-primary-50 border-primary-200 text-primary-1000"
       },
-      year
-    )) })
-  ] });
-}
-function NavigatorButton({
-  direction,
-  size,
-  onClick,
-  visible = true
-}) {
-  const icon = direction === "prev" ? "angle-left-small" : "angle-right-small";
-  return /* @__PURE__ */ jsx(
-    ButtonNavigator,
-    {
-      size,
-      onClick,
-      icon,
-      className: visible ? "" : "pointer-events-none opacity-0"
-    }
-  );
-}
-var day_of_week_size = {
-  sm: "t2",
-  md: "t2",
-  lg: "t1"
-};
-function DaysOfWeek({
-  daysOfWeek,
-  size = "md",
-  wrapperClassName,
-  variant = "default",
-  type = "month",
-  renderItem
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx9(
-        "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",
-        //prettier-ignore
-        variant === "default" && type === "month" && "grid-cols-7",
-        variant === "default" && type === "week" && "grid-cols-[60px_1fr_1fr_1fr_1fr_1fr_1fr_1fr]",
-        //prettier-ignore
-        wrapperClassName
-      ),
-      children: [
-        type === "week" && variant === "default" && renderItem === void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", {}),
-          daysOfWeek.map((day) => /* @__PURE__ */ jsx(Text, { as: "h5", value: day, variant: "t1" }, day))
-        ] }),
-        type === "month" && renderItem === void 0 && daysOfWeek.map((day) => /* @__PURE__ */ jsx(
-          Text,
-          {
-            as: "h5",
-            weight: variant === "compact" ? "medium" : "semibold",
-            value: day,
-            className: clsx9(
-              variant === "compact" && "text-gray-600!",
-              variant === "default" && "text-gray-900! uppercase"
-            ),
-            variant: variant === "compact" ? day_of_week_size[size] : "t1"
-          },
-          day
-        ))
-      ]
-    }
-  );
-}
-
-// src/components/calendar/constants.tsx
-var typeOptions = [
-  // {
-  //   label: 'Year',
-  //   value: 'year',
-  // },
-  {
-    label: "Month",
-    value: "month"
-  },
-  {
-    label: "Week",
-    value: "week"
-  }
-  // {
-  //   label: 'Day',
-  //   value: 'day',
-  // },
-  // {
-  //   label: 'Agenda',
-  //   value: 'agenda',
-  // },
-];
-var days = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
-var month = [
-  "Januari",
-  "Februari",
-  "Maret",
-  "April",
-  "Mei",
-  "Juni",
-  "Juli",
-  "Agustus",
-  "September",
-  "Oktober",
-  "November",
-  "Desember"
-];
-var Calendar2 = ({
-  showNavigator = true,
-  showHeader = true,
-  value,
-  onChange,
-  disabledDates = [],
-  dayConfigs = [],
-  defaultMonth,
-  defaultYear,
-  styleConfig,
-  wrapperClassname,
-  weekWrapperClassname,
-  dayWrapperClassname,
-  daysOfWeek = days,
-  months = month,
-  showNextNavigator = true,
-  showPrevNavigator = true,
-  mode = "single",
-  rangeValue,
-  size = "md",
-  variant = "default",
-  events,
-  showCalendarTooltip = true,
-  type = "month",
-  onTypeChange,
-  onEventClick,
-  backdropOnClick,
-  onMonthChange,
-  onYearChange,
-  showDefaultController = false
-}) => {
-  const currentDate = /* @__PURE__ */ new Date();
-  const [currentMonth, setCurrentMonth] = useState(defaultMonth ?? currentDate.getMonth());
-  const [currentYear, setCurrentYear] = useState(defaultYear ?? currentDate.getFullYear());
-  const [isDropdownYearShow, setIsDropdownYearShow] = useState(false);
-  const [isDropdownMonthShow, setIsDropdownMonthShow] = useState(false);
-  const [selectedType, setSelectedType] = useState(type);
-  const [selectedTypeIndex, setSelectedTypeIndex] = useState(
-    null
-  );
-  const [currentWeekStart, setCurrentWeekStart] = useState(() => {
-    const today = /* @__PURE__ */ new Date();
-    const day = today.getDay();
-    const start = new Date(today);
-    start.setDate(today.getDate() - day);
-    start.setHours(0, 0, 0, 0);
-    return start;
-  });
-  const calendarDays = getCalendarDays({ currentMonth, currentYear });
-  const calendarHelpers = createCalendarHelpers({
-    disabledDates,
-    dayConfigs,
-    rangeValue,
-    mode,
-    value
-  });
-  const calendarState = {
-    currentMonth,
-    currentYear,
-    setCurrentMonth,
-    setCurrentYear
-  };
-  const dropdownState = {
-    isMonthOpen: isDropdownMonthShow,
-    setMonthOpen: setIsDropdownMonthShow,
-    isYearOpen: isDropdownYearShow,
-    setYearOpen: setIsDropdownYearShow
-  };
-  const handleDateClick = (day) => {
-    const dayConfig = calendarHelpers.getDayConfig(day);
-    const disabled = (dayConfig?.disabled ?? false) || calendarHelpers.isDateDisabled(day);
-    if (disabled) {
-      return;
-    }
-    onChange?.(day.fullDate);
-  };
-  const getWeekDaysLabel = (weekStart) => {
-    return Array.from({ length: 7 }, (_, i) => {
-      const d = new Date(weekStart);
-      d.setDate(weekStart.getDate() + i);
-      const dayName = daysOfWeek[d.getDay()];
-      const date = d.getDate();
-      return `${dayName} ${date}`;
-    });
-  };
-  const changeWeek = (delta) => {
-    setCurrentWeekStart((prev) => {
-      const next = new Date(prev);
-      next.setDate(prev.getDate() + delta * 7);
-      setCurrentMonth(next.getMonth());
-      setCurrentYear(next.getFullYear());
-      return next;
-    });
-  };
-  const changeMonth = (delta) => {
-    let newMonth = currentMonth + delta;
-    let newYear = currentYear;
-    if (newMonth < 0) {
-      newMonth = 11;
-      newYear -= 1;
-    } else if (newMonth > 11) {
-      newMonth = 0;
-      newYear += 1;
-    }
-    onMonthChange?.(newMonth);
-    onYearChange?.(newYear);
-    setCurrentMonth(newMonth);
-    setCurrentYear(newYear);
-  };
-  const handleNavigationDefault = (type2, action) => {
-    if (type2 === "month") {
-      if (action === "prev") {
-        return changeMonth(-1);
-      } else {
-        return changeMonth(1);
-      }
-    }
-    if (type2 === "week") {
-      if (action === "prev") {
-        return changeWeek(1);
-      } else {
-        return changeWeek(-1);
-      }
-    }
-  };
-  useEffect(() => {
-    if (value !== void 0) {
-      setCurrentMonth(
-        value?.getMonth() ?? defaultMonth ?? currentDate?.getMonth()
-      );
-      setCurrentYear(
-        value?.getFullYear() ?? defaultYear ?? currentDate?.getFullYear()
-      );
-    }
-  }, [value]);
-  useEffect(() => {
-    if (type !== void 0) {
-      setSelectedType(type);
-    }
-  }, [type]);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: clsx9(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: [
-          /* @__PURE__ */ jsx(
-            ButtonNavigation,
-            {
-              onClick: () => handleNavigationDefault(selectedType, "prev"),
-              type: "prev"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ButtonNavigation,
-            {
-              onClick: () => handleNavigationDefault(selectedType, "next"),
-              type: "next"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs(
-          Text,
-          {
-            variant: "h4",
-            weight: "semibold",
-            className: "-translate-y-0.5 text-gray-900",
-            children: [
-              months[currentMonth],
-              " ",
-              currentYear
-            ]
-          }
-        )
-      ] }),
-      showDefaultController && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "sm",
-            color: "gray",
-            variant: "outline",
-            className: "capitalize",
-            onClick: () => setCurrentMonth((/* @__PURE__ */ new Date()).getMonth()),
-            children: "Today"
-          }
-        ),
-        /* @__PURE__ */ jsxs(Dropdown, { children: [
-          /* @__PURE__ */ jsx(DropdownTrigger, { children: /* @__PURE__ */ jsxs(
-            Button,
-            {
-              size: "sm",
-              color: "gray",
-              variant: "outline",
-              className: "flex items-center capitalize",
-              children: [
-                selectedType,
-                " ",
-                /* @__PURE__ */ jsx(Icon, { name: "angle-down-small", size: 20 })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            DropdownContent,
-            {
-              align: "end",
-              className: "w-36 *:rounded-md *:border-0",
-              children: typeOptions.map((option, index) => /* @__PURE__ */ jsx(
-                DropdownItem,
-                {
-                  onFocus: () => setSelectedTypeIndex(index),
-                  onClick: () => {
-                    setSelectedType(option.value);
-                    onTypeChange?.(option.value);
-                  },
-                  className: clsx9(
-                    (selectedType === option.value || index === selectedTypeIndex) && "bg-primary-50!"
-                  ),
-                  children: /* @__PURE__ */ jsx(Text, { className: "text-gray-900", children: option.label })
-                },
-                option.value
-              ))
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      "div",
       {
-        className: cn(
-          "border bg-white",
-          variant === "compact" && "mx-auto w-fit rounded-2xl border-gray-200 p-6 ",
-          //prettier-ignore
-          variant === "default" && "overflow-hidden rounded-xl border-gray-300",
-          //prettier-ignore
-          wrapperClassname
-        ),
-        children: [
-          selectedType === "week" && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-            DaysOfWeek,
-            {
-              type: "week",
-              size,
-              variant,
-              daysOfWeek: getWeekDaysLabel(currentWeekStart),
-              wrapperClassName: weekWrapperClassname
-            }
-          ) }),
-          selectedType === "month" && /* @__PURE__ */ jsxs(Fragment, { children: [
-            showHeader && variant === "compact" && /* @__PURE__ */ jsx(
-              CalendarHeader,
-              {
-                size,
-                calendar: calendarState,
-                dropdown: dropdownState,
-                handleNextMonth: () => changeMonth(1),
-                handlePrevMonth: () => changeMonth(-1),
-                showNavigator,
-                months,
-                showNextNavigator,
-                showPrevNavigator
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              DaysOfWeek,
-              {
-                size,
-                variant,
-                daysOfWeek,
-                wrapperClassName: weekWrapperClassname
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CalendarGrid,
-              {
-                className: dayWrapperClassname,
-                days: calendarDays,
-                helpers: calendarHelpers,
-                size,
-                mode,
-                styleConfig,
-                onClick: handleDateClick,
-                variant,
-                events,
-                showCalendarTooltip,
-                onEventClick,
-                backdropOnClick
-              }
-            )
-          ] })
-        ]
+        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"
       }
-    )
-  ] }) });
-};
-var ButtonNavigation = ({
+    ],
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+      state: "default",
+      block: false
+    }
+  }
+);
+var ChipContext = createContext(null);
+var Chip = ({
+  value,
+  selected: selectedProp,
+  disabled = false,
   onClick,
-  type
+  children,
+  color: colorProp,
+  size: sizeProp,
+  block: blockProp,
+  className
 }) => {
-  return /* @__PURE__ */ jsx("button", { onClick, children: /* @__PURE__ */ jsx(
-    Icon,
+  const context = useContext(ChipContext);
+  const color = colorProp ?? context?.color ?? "primary";
+  const size = sizeProp ?? context?.size ?? "md";
+  const block = blockProp ?? context?.block ?? false;
+  const isSelected = context ? value !== void 0 && context.selectedValues.includes(value) : selectedProp ?? false;
+  const state = disabled ? "disabled" : isSelected === true ? "selected" : "default";
+  const handleClick = () => {
+    if (disabled) return;
+    if (context && value !== void 0) {
+      context.toggleSelection(value);
+    }
+    onClick?.(value);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
     {
-      name: type === "next" ? "angle-right-small" : "angle-left-small",
-      size: 30,
-      className: "text-gray-900"
+      type: "button",
+      onClick: handleClick,
+      disabled,
+      className: cn(chipVariants({ size, color, state, block }), className),
+      children
     }
-  ) });
-};
-
-// src/components/date-picker/helpers.ts
-var monthsShort = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "Mei",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
-var monthsFull = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-var getFormatConfig = (format) => {
-  switch (format) {
-    case "DD-MM-YYYY":
-      return { separator: "-", placeholder: "DD-MM-YYYY", maxLength: 10 };
-    case "DD/MM/YYYY":
-      return { separator: "/", placeholder: "DD/MM/YYYY", maxLength: 10 };
-    case "DD MMM YYYY":
-      return { separator: " ", placeholder: "DD MMM YYYY", maxLength: 11 };
-    case "DD MMMM YYYY":
-      return { separator: " ", placeholder: "DD MMMM YYYY", maxLength: 18 };
-    case "YYYY-MM-DD":
-      return { separator: "-", placeholder: "YYYY-MM-DD", maxLength: 10 };
-    case "MM/DD/YYYY":
-      return { separator: "/", placeholder: "MM/DD/YYYY", maxLength: 10 };
-    default:
-      return { separator: "-", placeholder: "DD-MM-YYYY", maxLength: 10 };
-  }
-};
-var formatDateToString = (date, format) => {
-  if (!date) return "";
-  const day = String(date.getDate()).padStart(2, "0");
-  const month2 = String(date.getMonth() + 1).padStart(2, "0");
-  const monthShort = monthsShort[date.getMonth()];
-  const monthFull = monthsFull[date.getMonth()];
-  const year = date.getFullYear();
-  const hours = String(date.getHours()).padStart(2, "0");
-  const minutes = String(date.getMinutes()).padStart(2, "0");
-  const seconds = String(date.getSeconds()).padStart(2, "0");
-  const time = `${hours}:${minutes}:${seconds}`;
-  switch (format) {
-    case "DD-MM-YYYY":
-      return `${day}-${month2}-${year}`;
-    case "DD/MM/YYYY":
-      return `${day}/${month2}/${year}`;
-    case "DD MMM YYYY":
-      return `${day} ${monthShort} ${year}`;
-    case "DD MMMM YYYY":
-      return `${day} ${monthFull} ${year}`;
-    case "YYYY-MM-DD":
-      return `${year}-${month2}-${day}`;
-    case "MM/DD/YYYY":
-      return `${month2}/${day}/${year}`;
-    case "DD-MM-YYYY HH:mm:ss":
-      return `${day}-${month2}-${year} ${time}`;
-    case "DD/MM/YYYY HH:mm:ss":
-      return `${day}/${month2}/${year} ${time}`;
-    case "DD MMM YYYY HH:mm:ss":
-      return `${day} ${monthShort} ${year} ${time}`;
-    case "DD MMM YYYY - HH:mm:ss":
-      return `${day} ${monthShort} ${year} - ${time}`;
-    case "DD MMMM YYYY HH:mm:ss":
-      return `${day} ${monthFull} ${year} ${time}`;
-    case "DD MMMM YYYY - HH:mm:ss":
-      return `${day} ${monthFull} ${year} - ${time}`;
-    case "YYYY-MM-DD HH:mm:ss":
-      return `${year}-${month2}-${day} ${time}`;
-    default:
-      return `${day}-${month2}-${year}`;
-  }
+  );
 };
-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}`;
-}
-var parseMonthName = (monthStr) => {
-  const monthLower = monthStr.toLowerCase();
-  const shortIndex = monthsShort.findIndex(
-    (m) => m.toLowerCase() === monthLower
+var ChipGroup = ({
+  options,
+  selected = [],
+  onSelect,
+  direction = "horizontal",
+  color = "primary",
+  multiple = false,
+  scrollable = true,
+  block = false,
+  size = "md",
+  footer,
+  header,
+  children,
+  className
+}) => {
+  const isHorizontal = direction === "horizontal";
+  const normalizeSelected = (val) => Array.isArray(val) ? val : val !== null || val !== void 0 ? [val] : [];
+  const [internalSelected, setInternalSelected] = useState(
+    normalizeSelected(selected)
   );
-  if (shortIndex !== -1) return shortIndex + 1;
-  const fullIndex = monthsFull.findIndex((m) => m.toLowerCase() === monthLower);
-  if (fullIndex !== -1) return fullIndex + 1;
-  return null;
+  useEffect(() => {
+    const newSelected = normalizeSelected(selected);
+    if (JSON.stringify(newSelected) !== JSON.stringify(internalSelected)) {
+      setInternalSelected(newSelected);
+    }
+  }, [selected, internalSelected]);
+  const toggleSelection = (value) => {
+    let newSelected;
+    if (multiple || !multiple && internalSelected.length === 0) {
+      newSelected = internalSelected.includes(value) ? internalSelected.filter((v) => v !== value) : [...internalSelected, value];
+    } else {
+      newSelected = [value];
+    }
+    setInternalSelected(newSelected);
+    onSelect?.(newSelected);
+  };
+  const containerClasses = `
+    flex gap-2
+    ${isHorizontal ? "flex-row flex-wrap" : "flex-col"}
+    ${block ? "items-stretch" : "items-start"}
+    ${scrollable && isHorizontal ? "overflow-x-auto" : ""}
+    ${scrollable && !isHorizontal ? "overflow-y-auto" : ""}
+    ${className ?? ""}
+  `;
+  const contextValue = {
+    selectedValues: internalSelected,
+    toggleSelection,
+    color,
+    size,
+    block
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    header !== void 0 && /* @__PURE__ */ jsx("div", { className: "mb-2", children: header }),
+    /* @__PURE__ */ jsx(ChipContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, children: options !== void 0 ? options.map((option) => /* @__PURE__ */ jsxs(
+      Chip,
+      {
+        value: option.value,
+        disabled: option.disabled,
+        children: [
+          option.icon !== void 0 && /* @__PURE__ */ jsx("span", { className: "mr-2", children: option.icon }),
+          /* @__PURE__ */ jsx("span", { children: option.label })
+        ]
+      },
+      String(option.value)
+    )) : children }) }),
+    footer !== void 0 && /* @__PURE__ */ jsx("div", { className: "mt-2", children: footer })
+  ] });
 };
 var DatePicker = ({
   format = "DD-MM-YYYY",
@@ -8564,7 +7538,7 @@ var DatePicker = ({
     }
     return formatted;
   };
-  const handleInputChange2 = (e) => {
+  const handleInputChange = (e) => {
     const value = e.target.value;
     const formatted = usesMonthName ? value : autoFormatInput(value);
     setInputValue(formatted);
@@ -8654,7 +7628,7 @@ var DatePicker = ({
     "div",
     {
       ref: containerRef,
-      className: clsx9("relative flex max-w-sm flex-col", containerClassName),
+      className: clsx4("relative flex max-w-sm flex-col", containerClassName),
       children: /* @__PURE__ */ jsxs(
         Dropdown,
         {
@@ -8676,7 +7650,7 @@ var DatePicker = ({
                 leftAddonClassName: "pr-1!",
                 leftAddon: /* @__PURE__ */ jsx(Icon, { name: "calendar", className: "text-gray-900" }),
                 placeholder: mode === "range" ? `${formatConfig.placeholder} - ${formatConfig.placeholder}` : formatConfig.placeholder,
-                onChange: handleInputChange2,
+                onChange: handleInputChange,
                 value: inputValue,
                 readOnly: mode === "range"
               }
@@ -8686,7 +7660,7 @@ var DatePicker = ({
               {
                 align,
                 sideOffset: 5,
-                className: clsx9("z-10 overflow-hidden p-0", wrapperClassName),
+                className: clsx4("z-10 overflow-hidden p-0", wrapperClassName),
                 children: /* @__PURE__ */ jsx("div", { className: "top-full z-10", children: mode === "single" ? /* @__PURE__ */ jsx(
                   Calendar2,
                   {