@thebasenet/ui 0.1.0

package/dist/components/index.js

@@ -0,0 +1,848 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Link from 'next/link';
+import Image from 'next/image';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { Calendar, Sun1, Moon, User } from 'iconsax-react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { ChevronDown, Search, Check, XIcon } from 'lucide-react';
+import { Drawer as Drawer$1 } from 'vaul';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { useTheme } from 'next-themes';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Loader = ({
+  size = 25,
+  color = "#4cbc13",
+  variant = "primary",
+  className
+}) => {
+  const borderColor = color ? `border-t-[#4cbc13]` : variant === "primary" ? "border-t-white border-green-700" : "border-t-green-500 border-neutral-300";
+  const style = {
+    width: typeof size === "number" ? `${size}px` : size,
+    height: typeof size === "number" ? `${size}px` : size
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "z-40 border-3 rounded-full animate-spin block",
+        borderColor,
+        className
+      ),
+      style
+    }
+  );
+};
+var BrandLogo = ({
+  width,
+  height,
+  link,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(Link, { className: `inline-block ${className ?? ""}`, href: link || "/", children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlSpace: "preserve",
+      width: width || "150",
+      height: height || "70",
+      style: {
+        shapeRendering: "geometricPrecision",
+        textRendering: "geometricPrecision",
+        fillRule: "evenodd",
+        clipRule: "evenodd"
+      },
+      viewBox: "0 0 4606.47 1711.22",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs(
+            "font",
+            {
+              id: "FontID0",
+              horizAdvX: 642,
+              fontVariant: "normal",
+              style: { fillRule: "nonzero" },
+              fontStyle: "normal",
+              fontWeight: 400,
+              children: [
+                /* @__PURE__ */ jsx("fontFace", { fontFamily: "Coolvetica Rg", children: /* @__PURE__ */ jsx("fontFaceSrc", { children: /* @__PURE__ */ jsx("fontFaceName", { name: "CoolveticaRg-Regular" }) }) }),
+                /* @__PURE__ */ jsx("missingGlyph", { children: /* @__PURE__ */ jsx("path", { d: "M0 0z" }) }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "C", horizAdvX: 612, d: "M469 228c-19.0006,-82.9999 -68.9996,-129.999 -150.999,-129.999 -108.001,0 -162.002,86.9997 -162.002,233.999 0,145 54.0005,234.001 169.001,234.001 66.0001,0 124.999,-45.0004 144,-120.001l138.999 0c-12.9999,134.001 -118,240.001 -284,240.001 -190.001,0 -308.999,-137 -308.999,-362.001 0,-228 132.999,-347 307,-347 153.999,0 258,99.9997 285.999,251l-138.999 0z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "N", horizAdvX: 590, d: "M563.999 0l0 664.001 -129.999 0 0 -427.001 -264 427.001 -146.999 0 0 -664.001 128.999 0 0 445.999 284.001 -445.999 127.999 0z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "T", horizAdvX: 554, d: "M342.999 0l0 548 201.003 0 0 115.999 -540 0 0 -115.999 199.998 0 0 -548 139 0z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "a", horizAdvX: 485, d: "M324 186.999c-1.00038,-57.9987 -50.9994,-106.999 -118,-106.999 -41.0006,0 -63.0006,18.0002 -63.0006,54.9992 0,42.001 24.0008,63.0006 98.0006,77.0009 47.9999,9.00009 71.0003,15.9994 84.0003,28.9994l-1.00038 -54.0005zm131 -186.999l0 311c0,124 -53.9988,194 -210,194 -158,0 -214,-71.0003 -216,-173.001l121.001 0c5.99894,44.0001 29.9997,73.0011 89.0005,73.0011 50.9994,0 82.9999,-19.0006 82.9999,-51.0011 0,-33.9996 -18.0002,-46.9995 -82.9999,-55.9996 -131.001,-18.0002 -226.001,-33.9996 -226.001,-176 0,-80.0004 51.9998,-135 164.001,-135 66.0001,0 118,23.0004 149,57 0.998709,-15.0007 3.99985,-32.0005 7.99971,-44.0001l120.999 0z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "c", horizAdvX: 480, d: "M338 177.999c-5.00023,-52.9985 -45.0004,-81.9995 -95.9998,-81.9995 -51.0011,0 -95.9998,51.9998 -95.9998,159 0,106.999 44.9988,141.999 99.9997,141.999 49.0003,0 85.9993,-29.9997 93.0003,-80.9991l131 0c-7.99971,116.001 -94.9994,189 -223,189 -138.001,0 -230.001,-77.0009 -230.001,-252.999 0,-176 92,-265.001 226.001,-265.001 118.999,0 211.999,76.9993 225.999,190.999l-131 0z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "e", horizAdvX: 502, d: "M149 294c5.00023,67.9992 47.9999,107.999 99.9997,107.999 51.0011,0 99.001,-35 101,-107.999l-201 0zm335.001 -81.9995c0,194.999 -80.0004,293 -231.001,293 -150.999,0 -237.999,-98.0006 -237.999,-250 0,-178.001 81.9995,-268 245.998,-268 105.002,0 186.001,57 216,158l-133.999 0c-9.00009,-33.9996 -46.0008,-55.0009 -88.0001,-55.0009 -64.001,0 -106,48.0016 -110,122.001l339 0z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "h", horizAdvX: 503, d: "M472 0l0 348.002c0,97.9983 -70.0022,156.998 -171.001,156.998 -66.0008,0 -126.001,-32.9987 -145,-77.0004l0 244 -129.999 0 0 -671.998 129.999 0 0 282.001c0,66.0008 35.9989,119.997 101.002,119.997 58.9992,0 83.9985,-22.9969 83.9985,-96.9971l0 -305.001 131 0z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "i", horizAdvX: 191, d: "M159 0l0 492 -130.001 0 0 -492 130.001 0zm0 550.999l0 121.001 -130.001 0 0 -121.001 130.001 0z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "l", horizAdvX: 185, d: "M155.999 0l0 672 -129.999 0 0 -672 129.999 0z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "r", horizAdvX: 321, d: "M155.999 0l0 256.001c0,79 39.0015,119 119,119 12.0012,0 24.0008,-1.00038 36.0003,-3.00114l0 133.001 -16.9998 0c-53.0001,0 -103.001,-6.00062 -146,-72.0007l0 59.0008 -122 0 0 -492 129.999 0z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "t", horizAdvX: 453, d: "M304.999 195.999c0,-60.9998 -23.9991,-95.9998 -75.9989,-95.9998 -53.0001,0 -75.0002,36.0003 -75.0002,98.0006l0 202 272 0 0 92 -272 0 0 133.001 -128 0 0 -440.001c0,-106 57,-198 201,-198 139.001,0 199.001,93.0003 199.001,197l0 140 -121.001 0 0 -128z" }),
+                /* @__PURE__ */ jsx("glyph", { unicode: "u", horizAdvX: 500, d: "M469 0l0 492 -129.001 0 0 -284c0,-65.0014 -35,-112.001 -100.998,-112.001 -55.0009,0 -83.0015,29.9997 -83.0015,92l0 304.001 -129.999 0 0 -324c0,-108.001 68.9996,-181 167,-181 67.9992,0 119,25.9999 153,81.9995l0 -68.9996 123 0z" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("style", { type: "text/css" })
+        ] }),
+        /* @__PURE__ */ jsx("style", { type: "text/css", children: `
+          @font-face { font-family:"Coolvetica";font-variant:normal;font-style:normal;font-weight:normal;src:url("#FontID0") format(svg)}
+          .fil1 {fill:#2F61C4}
+          .fil0 {fill:#3B3A3A}
+          .fil2 {fill:#4CBC13}
+          .fnt1 {font-weight:normal;font-size:431.52px;font-family:'Coolvetica'}
+          .fnt0 {font-weight:normal;font-size:872.5px;font-family:'Coolvetica'}
+        ` }),
+        /* @__PURE__ */ jsxs("g", { id: "Layer_x0020_1", children: [
+          /* @__PURE__ */ jsx("metadata", { id: "CorelCorpID_0Corel-Layer" }),
+          /* @__PURE__ */ jsxs("g", { id: "_2066693523904", children: [
+            /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx("text", { x: 1937.5, y: 1009.24, className: "fil0 fnt0 ", children: "Circular " }),
+              /* @__PURE__ */ jsx("text", { x: 1937.49, y: 1689.88, className: "fil0 fnt0", children: "Net" }),
+              /* @__PURE__ */ jsx("text", { x: 1937.49, y: 299.99, className: "fil0 fnt1", children: "The " })
+            ] }),
+            /* @__PURE__ */ jsx("path", { className: "fil1", d: "M126.14 0c69.68,0 126.15,56.47 126.15,126.15 0,69.67 -56.47,126.14 -126.15,126.14 -69.67,0 -126.14,-56.47 -126.14,-126.14 0,-69.68 56.47,-126.15 126.14,-126.15zm-64.12 764.65c-31.4,0 -56.86,-25.45 -56.86,-56.85l0 -235.52c0,-31.4 25.46,-56.86 56.86,-56.86 194.36,0 353.37,-159.02 353.37,-353.39l0 -0.03c0,-31.4 25.46,-56.85 56.86,-56.85l235.56 0c31.4,0 56.85,25.46 56.85,56.85 0,386.46 -316.19,702.64 -702.64,702.64z", fill: "#2F61C4" }),
+            /* @__PURE__ */ jsx("path", { className: "fil2", d: "M472.24 1706.08l235.58 0c31.4,0 56.84,-25.44 56.84,-56.84l0 -0.04c0,-386.45 -316.2,-702.66 -702.66,-702.66 -31.4,0 -56.84,25.46 -56.84,56.85l0 235.57c0,31.4 25.45,56.85 56.84,56.85l0.03 0c194.36,0 353.36,159.02 353.36,353.37l0 0.05c0,31.4 25.45,56.84 56.84,56.84zm-346.1 -247.14c69.68,0 126.15,56.47 126.15,126.15 0,69.67 -56.47,126.14 -126.15,126.14 -69.67,0 -126.14,-56.47 -126.14,-126.14 0,-69.68 56.47,-126.15 126.14,-126.15z", fill: "#2ABC13" }),
+            /* @__PURE__ */ jsx("path", { className: "fil1", d: "M1295.81 1649.2c0,-194.36 159.03,-353.39 353.39,-353.39 31.4,0 56.84,-25.45 56.84,-56.85l0 -235.57c0,-31.4 -25.44,-56.85 -56.84,-56.85l-0.03 0c-386.44,0 -702.62,316.19 -702.62,702.63l0 0.06c0,31.4 25.44,56.84 56.84,56.84l235.58 0c31.39,0 56.84,-25.44 56.84,-56.84l0 -0.04zm289.26 -190.27c69.68,0 126.15,56.47 126.15,126.15 0,69.67 -56.47,126.14 -126.15,126.14 -69.67,0 -126.14,-56.47 -126.14,-126.14 0,-69.68 56.47,-126.15 126.14,-126.15z", fill: "#2F61C4" }),
+            /* @__PURE__ */ jsx("path", { className: "fil2", d: "M1649.19 415.43c-194.37,0 -353.38,-159.02 -353.38,-353.37l0 -0.05c0,-31.4 -25.45,-56.85 -56.86,-56.85l-235.54 0c-31.4,0 -56.86,25.46 -56.86,56.85 0,386.46 316.19,702.64 702.64,702.64 31.39,0 56.85,-25.45 56.85,-56.85l0 -235.51c0,-31.4 -25.46,-56.86 -56.85,-56.86zm-64.12 -415.43c69.68,0 126.15,56.47 126.15,126.15 0,69.67 -56.47,126.14 -126.15,126.14 -69.67,0 -126.14,-56.47 -126.14,-126.14 0,-69.68 56.47,-126.15 126.14,-126.15z", fill: "#2ABC13" })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+};
+var BrandLogo_default = BrandLogo;
+function PageLoader({ message }) {
+  return /* @__PURE__ */ jsx("div", { className: "min-h-[100vh] w-full flex items-center justify-center bg-gray-100 dark:bg-gray-900", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-2.5", children: [
+    /* @__PURE__ */ jsx(BrandLogo_default, { width: 110 }),
+    /* @__PURE__ */ jsx(Loader, { size: 32 }),
+    message && /* @__PURE__ */ jsx("p", { className: "text-base max-w-lg text-gray-600 dark:text-gray-300", children: message })
+  ] }) });
+}
+var Heading1 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h1", { className: cn("text-3xl font-[700] font-onest text-black dark:text-white", className), ref, ...props, children })
+);
+Heading1.displayName = "Heading1";
+var Heading2 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h2", { className: cn("text-[26px] font-[600] font-onest text-black dark:text-neutral-100", className), ref, ...props, children })
+);
+Heading2.displayName = "Heading2";
+var Heading3 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h3", { className: cn("text-2xl font-semibold font-onest text-neutral-900 dark:text-neutral-200", className), ref, ...props, children })
+);
+Heading3.displayName = "Heading3";
+var Heading4 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h4", { className: cn("text-[22px] font-semibold text-neutral-800 dark:text-neutral-200", className), ref, ...props, children })
+);
+Heading4.displayName = "Heading4";
+var Heading5 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h5", { className: cn("text-lg font-semibold text-black dark:text-neutral-300", className), ref, ...props, children })
+);
+Heading5.displayName = "Heading5";
+var Heading6 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h6", { className: cn("text-base font-[500] text-black dark:text-neutral-300", className), ref, ...props, children })
+);
+Heading6.displayName = "Heading6";
+var Body1 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("p", { className: cn("text-[18px] text-neutral-700 dark:text-neutral-400 font-golos", className), ref, ...props, children })
+);
+Body1.displayName = "Body1";
+var Body2 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("p", { className: cn("text-base text-neutral-700 dark:text-neutral-400 font-golos", className), ref, ...props, children })
+);
+Body2.displayName = "Body2";
+var Body3 = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("p", { className: cn("text-sm lg:leading-[22px] text-neutral-600 dark:text-neutral-400 font-golos", className), ref, ...props, children })
+);
+Body3.displayName = "Body3";
+var EmptyState = ({
+  imageSrc,
+  size = 200,
+  title = "No Data Found!",
+  message = "Check back later to see more content.",
+  component,
+  className = "min-h-[60vh]",
+  icon
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "mb-4", children: icon }),
+    imageSrc && /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: imageSrc,
+        alt: "Empty State",
+        width: size,
+        height: size,
+        className: "mx-auto mb-4"
+      }
+    ),
+    /* @__PURE__ */ jsx("h1", { className: "text-[1.325rem] md:text-[1.45rem] text-black font-onest font-semibold", children: title }),
+    /* @__PURE__ */ jsx(Body2, { className: "max-w-xs text-[#646464]", children: message }),
+    component && /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: component })
+  ] }) });
+};
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("bg-accent animate-pulse rounded-md", className),
+      ...props
+    }
+  );
+}
+var LoadingState = ({
+  rows = 5,
+  showAvatar = false,
+  className,
+  rowClassName
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("min-h-[60vh] flex items-center justify-center", className),
+      children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-md space-y-3 px-4", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", rowClassName), children: [
+        showAvatar && /* @__PURE__ */ jsx(Skeleton, { className: "size-10 shrink-0 rounded-full" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4 rounded" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2 rounded" })
+        ] })
+      ] }, i)) })
+    }
+  );
+};
+var ErrorState = ({
+  title = "Error Fetching Data",
+  message = "An error occurred",
+  onRetry
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "min-h-[60vh] flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-[1.45rem] font-onest font-[600] text-primary-500", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "text-[#646464] font-golosText font-[500] text-[.9rem] line-clamp-3", children: message }),
+    onRetry && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onRetry,
+        className: "rounded-md h-[2.75rem] min-w-[7rem] px-6 bg-primary-500 text-white text-[.9rem] font-onest font-[600] mt-5",
+        children: "Refetch"
+      }
+    )
+  ] }) });
+};
+function Dialog({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-lg leading-none font-semibold", className), ...props });
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-muted-foreground text-sm", className), ...props });
+}
+function Drawer({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Drawer$1.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-muted mx-auto my-2.5 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Title, { "data-slot": "drawer-title", className: cn("text-foreground font-semibold", className), ...props });
+}
+function DrawerDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Description, { "data-slot": "drawer-description", className: cn("text-muted-foreground text-sm", className), ...props });
+}
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(void 0);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => setIsMobile(mql.matches);
+    mql.addEventListener("change", onChange);
+    setIsMobile(mql.matches);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+var CustomModal = ({
+  title,
+  children,
+  description,
+  trigger,
+  triggerAsChild = false,
+  open,
+  onOpenChange,
+  className,
+  contentClassName,
+  showModalHeader = true,
+  showModalDescription = false,
+  customIcon,
+  footer
+}) => {
+  const isMobile = useIsMobile();
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = open !== void 0;
+  const dialogOpen = isControlled ? open : internalOpen;
+  const closeModal = () => {
+    if (isControlled) {
+      onOpenChange?.(false);
+    } else {
+      setInternalOpen(false);
+    }
+  };
+  const handleOpenChange = (newOpen) => {
+    if (isControlled) {
+      onOpenChange?.(newOpen);
+    } else {
+      setInternalOpen(newOpen);
+    }
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Drawer, { open: dialogOpen, onOpenChange: handleOpenChange, children: [
+      trigger && /* @__PURE__ */ jsx(DrawerTrigger, { asChild: triggerAsChild, children: trigger }),
+      /* @__PURE__ */ jsxs(
+        DrawerContent,
+        {
+          className: cn(
+            "w-full max-h-[95vh] overflow-hidden rounded-t-xl px-0 pb-6 space-y-4",
+            className
+          ),
+          children: [
+            showModalHeader ? /* @__PURE__ */ jsxs(DrawerHeader, { className: "flex flex-row items-center justify-between px-4 py-0 md:px-8", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "size-11 shrink-0 rounded-full bg-primary-50 flex items-center justify-center", children: customIcon ? customIcon : /* @__PURE__ */ jsx(
+                  Calendar,
+                  {
+                    size: 20,
+                    color: "currentColor",
+                    className: "text-primary-600"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(DrawerTitle, { className: "text-[20px] font-semibold text-primary-600 font-onest line-clamp-1", children: title }),
+                  /* @__PURE__ */ jsx(
+                    DrawerDescription,
+                    {
+                      className: showModalDescription ? "-mt-0.5 text-left" : "hidden",
+                      children: description || "Modal description"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: "size-10 shrink-0 rounded-full text-neutral-400 hover:bg-primary-50 hover:text-primary-600 transition-colors cursor-pointer flex items-center justify-center outline-none", children: /* @__PURE__ */ jsx(
+                HugeiconsIcon,
+                {
+                  icon: Cancel01Icon,
+                  color: "currentColor",
+                  size: 20
+                }
+              ) }) })
+            ] }) : /* @__PURE__ */ jsx(DrawerTitle, { className: "hidden", children: title }),
+            typeof children === "function" ? children(closeModal) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "max-h-[70vh] overflow-y-auto px-4 md:px-8 pb-4 no-scrollbar",
+                  contentClassName
+                ),
+                children
+              }
+            ),
+            footer
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Dialog, { open: dialogOpen, onOpenChange: handleOpenChange, children: [
+    trigger && /* @__PURE__ */ jsx(DialogTrigger, { asChild: triggerAsChild, children: trigger }),
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        className: cn(
+          "w-full max-w-2xl min-h-64 max-h-[80vh] overflow-hidden rounded-xl px-0",
+          className
+        ),
+        showCloseButton: false,
+        children: [
+          showModalHeader ? /* @__PURE__ */ jsxs(DialogHeader, { className: "flex flex-row items-center justify-between px-4 md:px-8 h-14", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "size-12 rounded-full bg-primary-50 flex items-center justify-center", children: customIcon ? customIcon : /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  size: 26,
+                  color: "currentColor",
+                  className: "text-primary-600"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(DialogTitle, { className: "text-[22px] font-semibold text-primary-600 font-onest line-clamp-1", children: title }),
+                /* @__PURE__ */ jsx(
+                  DialogDescription,
+                  {
+                    className: showModalDescription ? "-mt-0.5 text-left" : "hidden",
+                    children: description || "Modal description"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: closeModal,
+                className: "size-10 rounded-full text-neutral-400 hover:bg-primary-50 hover:text-primary-600 transition-colors cursor-pointer flex items-center justify-center outline-none",
+                children: /* @__PURE__ */ jsx(
+                  HugeiconsIcon,
+                  {
+                    icon: Cancel01Icon,
+                    color: "currentColor",
+                    size: 20
+                  }
+                )
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(DialogTitle, { className: "hidden", children: title }),
+          typeof children === "function" ? children(closeModal) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "max-h-[70vh] overflow-y-auto px-4 md:px-8 pb-4 no-scrollbar",
+                contentClassName
+              ),
+              children
+            }
+          ),
+          footer
+        ]
+      }
+    )
+  ] });
+};
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-90 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-500 text-primary-foreground shadow-xs hover:bg-primary-700",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border border-primary-500 text-primary-500 bg-background shadow-xs hover:bg-primary-50/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-primary-50 text-primary-500 shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-primary-50/50 text-primary-500",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-12 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-12 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: { variant: "default", size: "default" }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props });
+}
+var BackButton = ({ onClick }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: onClick || (() => window.history.back()),
+      variant: "default",
+      className: "text-[15px] font-medium font-onest min-w-[9rem] h-12",
+      children: "Go Back"
+    }
+  );
+};
+var ThemeSwitcher = ({
+  variant = "ghost",
+  size = "lg",
+  className = ""
+}) => {
+  const { setTheme, resolvedTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(Button, { variant, size, className, children: /* @__PURE__ */ jsx(Sun1, { size: 18 }) });
+  }
+  const isDark = resolvedTheme === "dark";
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      size,
+      className: `${className} relative`,
+      onClick: toggleTheme,
+      children: [
+        isDark ? /* @__PURE__ */ jsx(Sun1, { size: 24, color: "#4cbc13" }) : /* @__PURE__ */ jsx(Moon, { size: 24, color: "#4cbc13" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle theme" })
+      ]
+    }
+  );
+};
+var ProfileImage = ({
+  asLink = false,
+  size = 40,
+  profilePicUrl,
+  isVerified = false,
+  isOnline = false,
+  isOverflowHidden = true,
+  className = "",
+  link,
+  userName = "User",
+  userId
+}) => {
+  const ImageComponent = profilePicUrl ? /* @__PURE__ */ jsx(
+    Image,
+    {
+      src: profilePicUrl,
+      alt: userName,
+      fill: true,
+      priority: true,
+      sizes: `${size}px`,
+      className: "rounded-full object-cover h-full w-full"
+    }
+  ) : /* @__PURE__ */ jsx(
+    User,
+    {
+      size: size ? size / 2 : 20,
+      color: "#4cbc13",
+      className: "text-gray-500"
+    }
+  );
+  const ProfileContent = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative w-full h-full flex items-center justify-center",
+      style: { width: size, height: size },
+      children: [
+        ImageComponent,
+        isVerified && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute -top-0.5 -right-0.5 bg-primary-500 border-2 border-white rounded-full",
+            style: { width: 14, height: 14 }
+          }
+        ),
+        isOnline && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute bottom-0 right-0 bg-green-500 border-2 border-white rounded-full",
+            style: {
+              width: size * 0.25,
+              height: size * 0.25,
+              minWidth: "10px",
+              minHeight: "10px"
+            }
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "relative rounded-full flex items-center justify-center",
+        profilePicUrl ? "bg-primary-50" : "bg-neutral-50",
+        isOverflowHidden && "overflow-hidden",
+        className
+      ),
+      style: { height: size, width: size },
+      children: asLink ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: link || (userId ? `/profile/${userId}` : "#"),
+          className: "block w-full h-full",
+          children: ProfileContent
+        }
+      ) : /* @__PURE__ */ jsx("div", { children: ProfileContent })
+    }
+  );
+};
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-neutral-200/70 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-neutral-100/60 flex h-12 w-full min-w-0 rounded-md border-[1px] bg-transparent px-3 py-1 text-base transition-[color,box-shadow] outline-none file:hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-base cursor-pointer font-golos",
+        "focus-visible:border-primary-600",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-[14px] leading-none font-normal font-onest text-neutral-400 pl-1 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var CountrySelector = ({
+  countries: rawCountries,
+  value,
+  onChange,
+  setValue,
+  fieldName = "",
+  placeholder = "Select a country",
+  error,
+  label = "Country",
+  required = false,
+  disabled = false,
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedCountry, setSelectedCountry] = useState(null);
+  const [searchTerm, setSearchTerm] = useState("");
+  const ref = useRef(null);
+  const countries = useMemo(() => {
+    const unique = rawCountries.filter(
+      (c, idx, self) => idx === self.findIndex((x) => x.countryCode === c.countryCode)
+    );
+    if (!searchTerm.trim()) return unique;
+    return unique.filter(
+      (c) => c.countryName.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [rawCountries, searchTerm]);
+  useEffect(() => {
+    if (value) {
+      const found = countries.find((c) => c.countryCode === value);
+      setSelectedCountry(found || null);
+    }
+  }, [value, countries]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    const timer = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const handleCountrySelect = (country) => {
+    setSelectedCountry(country);
+    if (setValue && fieldName) setValue(fieldName, country.countryCode);
+    onChange?.(country.countryCode);
+    setSearchTerm("");
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), ref, children: [
+    label && /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, className: "mb-2 block text-sm font-medium", children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": isOpen,
+          disabled,
+          className: "w-full justify-between h-11 font-normal",
+          onClick: () => {
+            if (disabled) return;
+            setIsOpen((prev) => !prev);
+            if (isOpen) setSearchTerm("");
+          },
+          children: [
+            selectedCountry ? /* @__PURE__ */ jsx("span", { className: "truncate text-black", children: selectedCountry.flag ? `${selectedCountry.flag} ${selectedCountry.countryName}` : selectedCountry.countryName }) : /* @__PURE__ */ jsx("span", { className: "text-neutral-200/70", children: placeholder }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg max-h-72 overflow-hidden", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative border-b", children: [
+          /* @__PURE__ */ jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              placeholder: "Search countries...",
+              value: searchTerm,
+              onChange: (e) => setSearchTerm(e.target.value),
+              className: "pl-10 h-11",
+              autoFocus: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-y-auto max-h-60", children: countries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-gray-500", children: "No countries found" }) : countries.map((country, index) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-100 transition-colors",
+            onMouseDown: (e) => {
+              e.preventDefault();
+              handleCountrySelect(country);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: country.flag ? `${country.flag} ${country.countryName}` : country.countryName }),
+              selectedCountry?.countryCode === country.countryCode && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-primary-500" })
+            ]
+          },
+          `${country.countryCode}-${index}`
+        )) })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-500", children: error })
+  ] });
+};
+
+export { BackButton, CountrySelector, CustomModal, EmptyState, ErrorState, Loader, LoadingState, PageLoader, ProfileImage, ThemeSwitcher, useIsMobile };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map