@pelatform/ui 2.0.0 → 2.1.0

package/dist/components.js

@@ -1,2320 +1,4 @@
 "use client";
-import {
-  useMetaColor
-} from "./chunk-UEVIEY7W.js";
-import {
-  Icons
-} from "./chunk-VZEE3GOC.js";
 
-// src/components/feedback/alert.tsx
-import {
-  CheckIcon,
-  CircleAlertIcon,
-  CircleCheckIcon,
-  CircleXIcon,
-  InfoIcon,
-  TriangleAlertIcon
-} from "@pelatform/ui.core";
-import { Alert, AlertIcon, AlertTitle } from "@pelatform/ui.default";
-import { toast } from "@pelatform/ui.default/dep";
-import { jsx, jsxs } from "react/jsx-runtime";
-var iconMap = {
-  primary: /* @__PURE__ */ jsx(CircleAlertIcon, {}),
-  success: /* @__PURE__ */ jsx(CircleCheckIcon, {}),
-  info: /* @__PURE__ */ jsx(InfoIcon, {}),
-  warning: /* @__PURE__ */ jsx(TriangleAlertIcon, {}),
-  destructive: /* @__PURE__ */ jsx(CircleXIcon, {})
-};
-function AlertToast({
-  message = "This is a toast",
-  icon = "success",
-  variant = "mono"
-}) {
-  toast.custom(
-    () => /* @__PURE__ */ jsxs(Alert, { variant, icon, children: [
-      /* @__PURE__ */ jsx(AlertIcon, { children: iconMap[icon ?? "success"] }),
-      /* @__PURE__ */ jsx(AlertTitle, { children: message })
-    ] }),
-    {
-      // Auto-dismiss after 4 seconds
-      duration: 4e3,
-      // Generate unique ID to prevent duplicate toasts
-      id: `alert-toast-${Date.now()}`
-    }
-  );
-}
-function AlertNotification({ message, variant = "info" }) {
-  if (!message) return null;
-  const getIcon = () => {
-    switch (variant) {
-      case "destructive":
-        return /* @__PURE__ */ jsx(CircleAlertIcon, {});
-      case "success":
-        return /* @__PURE__ */ jsx(CheckIcon, {});
-      case "info":
-        return /* @__PURE__ */ jsx(InfoIcon, {});
-      case "warning":
-        return /* @__PURE__ */ jsx(TriangleAlertIcon, {});
-      default:
-        return /* @__PURE__ */ jsx(InfoIcon, {});
-    }
-  };
-  return /* @__PURE__ */ jsxs(Alert, { variant, children: [
-    /* @__PURE__ */ jsx(AlertIcon, { children: getIcon() }),
-    /* @__PURE__ */ jsx(AlertTitle, { children: message })
-  ] });
-}
-var AlertComingsoon = ({
-  message = "This feature is coming soon.",
-  icon = "success",
-  variant = "mono"
-} = {}) => {
-  toast.custom(
-    () => /* @__PURE__ */ jsxs(Alert, { variant, icon, children: [
-      /* @__PURE__ */ jsx(AlertIcon, { children: /* @__PURE__ */ jsx(CircleAlertIcon, {}) }),
-      /* @__PURE__ */ jsx(AlertTitle, { children: message })
-    ] }),
-    {
-      // Toast configuration for better UX
-      position: "top-center",
-      duration: 3e3,
-      // Show for 3 seconds
-      id: `coming-soon-${Date.now()}`
-      // Prevent duplicate toasts
-    }
-  );
-};
-
-// src/components/feedback/dialog.tsx
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle
-} from "@pelatform/ui.default";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ConfirmDismissDialog = ({
-  open,
-  onOpenChange,
-  onConfirm,
-  onCancel,
-  title = "Discard changes?",
-  description = "You have unsaved changes. Are you sure you want to close this dialog?",
-  confirmText = "Discard changes",
-  cancelText = "Cancel",
-  maxWidth = "md:max-w-[375px]"
-}) => {
-  const handleCancel = () => {
-    if (onCancel) {
-      onCancel();
-    } else {
-      onOpenChange(false);
-    }
-  };
-  return /* @__PURE__ */ jsx2(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(AlertDialogContent, { className: maxWidth, children: [
-    /* @__PURE__ */ jsxs2(AlertDialogHeader, { children: [
-      /* @__PURE__ */ jsx2(AlertDialogTitle, { children: title }),
-      /* @__PURE__ */ jsx2(AlertDialogDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ jsxs2(AlertDialogFooter, { children: [
-      /* @__PURE__ */ jsx2(AlertDialogCancel, { onClick: handleCancel, children: cancelText }),
-      /* @__PURE__ */ jsx2(AlertDialogAction, { onClick: onConfirm, children: confirmText })
-    ] })
-  ] }) });
-};
-
-// src/components/feedback/screen-loader.tsx
-import { cn, LoaderIcon } from "@pelatform/ui.core";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function ScreenLoader({
-  loadingText = "Loading...",
-  className = "",
-  spinnerClassName = "size-6 animate-spin",
-  textClassName = "text-muted-foreground font-medium text-sm",
-  contentLoader = false
-} = {}) {
-  if (contentLoader) {
-    return /* @__PURE__ */ jsx3("div", { className: cn("flex w-full grow items-center justify-center", className), children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2.5", children: [
-      /* @__PURE__ */ jsx3(LoaderIcon, { className: spinnerClassName, "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx3("span", { className: textClassName, children: loadingText })
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: cn(
-        "fixed inset-0 z-500 flex flex-col items-center justify-center gap-2 bg-background transition-opacity duration-700 ease-in-out",
-        className
-      ),
-      role: "status",
-      "aria-live": "polite",
-      "aria-label": loadingText,
-      children: [
-        /* @__PURE__ */ jsx3(LoaderIcon, { className: spinnerClassName, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx3("div", { className: textClassName, children: loadingText })
-      ]
-    }
-  );
-}
-
-// src/components/layout/auth.tsx
-import { cn as cn2 } from "@pelatform/ui.core";
-import { Card, CardContent } from "@pelatform/ui.default";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function LayoutAuth({
-  children,
-  className,
-  logo
-}) {
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      className: cn2("flex min-h-screen grow flex-col items-center justify-center p-4", className),
-      children: [
-        logo && /* @__PURE__ */ jsx4("div", { className: "m-5", children: logo }),
-        /* @__PURE__ */ jsx4(Card, { className: "w-full max-w-md", children: /* @__PURE__ */ jsx4(CardContent, { className: "p-6", children }) })
-      ]
-    }
-  );
-}
-
-// src/components/layout/blank.tsx
-import { cn as cn4 } from "@pelatform/ui.core";
-
-// src/components/layout/grid.tsx
-import { useId } from "react";
-import { cn as cn3 } from "@pelatform/ui.core";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function Grid({
-  cellSize = 12,
-  strokeWidth = 1,
-  patternOffset = [0, 0],
-  className
-}) {
-  const id = useId();
-  return /* @__PURE__ */ jsxs5(
-    "svg",
-    {
-      className: cn3("pointer-events-none absolute inset-0 text-foreground/10", className),
-      width: "100%",
-      height: "100%",
-      children: [
-        /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5(
-          "pattern",
-          {
-            id: `grid-${id}`,
-            x: patternOffset[0] - 1,
-            y: patternOffset[1] - 1,
-            width: cellSize,
-            height: cellSize,
-            patternUnits: "userSpaceOnUse",
-            children: /* @__PURE__ */ jsx5(
-              "path",
-              {
-                d: `M ${cellSize} 0 L 0 0 0 ${cellSize}`,
-                fill: "transparent",
-                stroke: "currentColor",
-                strokeWidth
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx5("rect", { fill: `url(#grid-${id})`, width: "100%", height: "100%" })
-      ]
-    }
-  );
-}
-
-// src/components/layout/blank.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function LayoutBlank({ children, footer, className, logo, logoHref }) {
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 isolate overflow-hidden bg-background", children: /* @__PURE__ */ jsx6(
-      "div",
-      {
-        className: cn4(
-          "-translate-x-1/2 absolute inset-y-0 start-1/2 w-[1200px]",
-          "mask-intersect mask-[linear-gradient(black,transparent_320px),linear-gradient(90deg,transparent,black_5%,black_95%,transparent)]"
-        ),
-        children: /* @__PURE__ */ jsx6(Grid, { cellSize: 60, patternOffset: [0.75, 0], className: "text-foreground/15" })
-      }
-    ) }),
-    /* @__PURE__ */ jsxs6(
-      "div",
-      {
-        className: cn4(
-          "relative flex min-h-screen w-full flex-col items-center justify-between",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx6("div", { className: "grow basis-0", children: logo && /* @__PURE__ */ jsx6("div", { className: "pt-4", children: /* @__PURE__ */ jsx6("a", { href: logoHref ?? "#", target: "_blank", className: "block", children: logo }) }) }),
-          /* @__PURE__ */ jsx6("div", { className: "w-full max-w-4xl px-4 py-16", children }),
-          /* @__PURE__ */ jsx6("div", { className: "grow basis-0", children: footer })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/components/layout/body.tsx
-import { cn as cn5 } from "@pelatform/ui.core";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function useMode(slug) {
-  return Array.isArray(slug) && slug.length > 0 ? slug[0] : void 0;
-}
-function Body({ slug, children, className }) {
-  const mode = useMode(slug);
-  return /* @__PURE__ */ jsx7("body", { className: cn5(mode, className), children });
-}
-
-// src/components/layout/comingsoon.tsx
-import { HoverBackground } from "@pelatform/ui.animation";
-import { cn as cn6 } from "@pelatform/ui.core";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function ComingSoon({ className, title, description }) {
-  return /* @__PURE__ */ jsx8("div", { className: cn6("h-[calc(100vh-54px)] w-full overflow-hidden", className), children: /* @__PURE__ */ jsx8(
-    HoverBackground,
-    {
-      colors: {
-        background: "bg-gradient-to-br from-black via-gray-900 to-zinc-900",
-        objects: [
-          "bg-emerald-500/30",
-          "bg-teal-500/30",
-          "bg-green-500/30",
-          "bg-lime-500/30",
-          "bg-cyan-500/30",
-          "bg-blue-500/30"
-        ],
-        glow: "shadow-emerald-400/70"
-      },
-      objectCount: 8,
-      children: /* @__PURE__ */ jsxs7("div", { className: "flex h-full flex-col items-center justify-center space-y-4 text-center", children: [
-        title && /* @__PURE__ */ jsx8("h2", { className: "font-bold text-4xl text-white/90", children: title }),
-        description && /* @__PURE__ */ jsx8("p", { className: "max-w-md text-emerald-100/80 text-lg", children: description })
-      ] })
-    }
-  ) });
-}
-
-// src/components/layout/error.tsx
-import { cn as cn7, getAssetsUrl } from "@pelatform/ui.core";
-import { Badge } from "@pelatform/ui.default";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-function ErrorComponents({
-  className,
-  type = "default",
-  textTitle,
-  textSubtitle,
-  button
-}) {
-  if (type === "404") {
-    return /* @__PURE__ */ jsxs8("div", { className: cn7("flex h-[95%] grow flex-col items-center justify-center", className), children: [
-      /* @__PURE__ */ jsxs8("div", { className: "mb-10", children: [
-        /* @__PURE__ */ jsx9(
-          "img",
-          {
-            src: getAssetsUrl("media/illustrations/19.svg"),
-            className: "max-h-40 dark:hidden",
-            alt: "illustrations"
-          }
-        ),
-        /* @__PURE__ */ jsx9(
-          "img",
-          {
-            src: getAssetsUrl("media/illustrations/19-dark.svg"),
-            className: "hidden max-h-40 dark:block",
-            alt: "illustrations"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx9(Badge, { variant: "destructive", appearance: "outline", className: "mb-3", children: "404 Error" }),
-      /* @__PURE__ */ jsx9("h3", { className: "mb-2 text-center font-semibold text-2xl text-foreground", children: textTitle }),
-      /* @__PURE__ */ jsx9("div", { className: "mb-10 text-center text-base text-secondary-foreground", children: textSubtitle })
-    ] });
-  }
-  if (type === "500") {
-    return /* @__PURE__ */ jsxs8("div", { className: cn7("flex h-[95%] grow flex-col items-center justify-center", className), children: [
-      /* @__PURE__ */ jsxs8("div", { className: "mb-10", children: [
-        /* @__PURE__ */ jsx9(
-          "img",
-          {
-            src: getAssetsUrl("media/illustrations/20.svg"),
-            className: "max-h-40 dark:hidden",
-            alt: "illustrations"
-          }
-        ),
-        /* @__PURE__ */ jsx9(
-          "img",
-          {
-            src: getAssetsUrl("media/illustrations/20-dark.svg"),
-            className: "hidden max-h-40 dark:block",
-            alt: "illustrations"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx9(Badge, { variant: "destructive", appearance: "outline", className: "mb-3", children: "500 Error" }),
-      /* @__PURE__ */ jsx9("h3", { className: "mb-2 text-center font-semibold text-2xl text-foreground", children: textTitle }),
-      /* @__PURE__ */ jsx9("div", { className: "mb-10 text-center text-base text-secondary-foreground", children: textSubtitle }),
-      button
-    ] });
-  }
-  return /* @__PURE__ */ jsxs8("div", { className: cn7("flex h-[95%] grow flex-col items-center justify-center", className), children: [
-    /* @__PURE__ */ jsxs8("div", { className: "mb-10", children: [
-      /* @__PURE__ */ jsx9(
-        "img",
-        {
-          src: getAssetsUrl("media/illustrations/29.svg"),
-          className: "max-h-40 dark:hidden",
-          alt: "illustrations"
-        }
-      ),
-      /* @__PURE__ */ jsx9(
-        "img",
-        {
-          src: getAssetsUrl("media/illustrations/29-dark.svg"),
-          className: "hidden max-h-40 dark:block",
-          alt: "illustrations"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx9("h3", { className: "mb-2 text-center font-semibold text-2xl text-foreground", children: textTitle }),
-    /* @__PURE__ */ jsx9("div", { className: "mb-10 text-center text-base text-secondary-foreground", children: textSubtitle })
-  ] });
-}
-
-// src/components/layout/section.tsx
-import { cn as cn9, PlusIcon } from "@pelatform/ui.core";
-
-// src/components/ui/grid-background.tsx
-import { cn as cn8 } from "@pelatform/ui.core";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var GridBackground = ({
-  columns = 4,
-  className = "",
-  maxWidthClass = "grid-container"
-}) => {
-  const columnElements = Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx10(
-    "div",
-    {
-      className: "h-full w-px",
-      style: {
-        backgroundColor: i === 0 ? "var(--grid-base-color)" : "transparent",
-        backgroundImage: i === 0 ? "none" : `linear-gradient(180deg, var(--grid-dots-color) 50%, transparent 50%)`,
-        backgroundSize: i === 0 ? "auto" : "1px 8px"
-      }
-    },
-    i
-  ));
-  return /* @__PURE__ */ jsx10("div", { className: cn8("stripe-grid -z-50 absolute inset-0 h-full w-full", className), children: /* @__PURE__ */ jsx10("div", { className: "relative h-full w-full overflow-hidden", children: /* @__PURE__ */ jsx10("div", { className: "pointer-events-none absolute top-0 left-0 h-full w-full", "aria-hidden": "true", children: /* @__PURE__ */ jsxs9(
-    "div",
-    {
-      className: cn8("relative mx-auto grid h-full grid-cols-4 grid-rows-1", maxWidthClass),
-      children: [
-        columnElements,
-        /* @__PURE__ */ jsx10(
-          "div",
-          {
-            className: "absolute top-0 right-0 h-full w-px",
-            style: { backgroundColor: "var(--grid-base-color)" }
-          }
-        )
-      ]
-    }
-  ) }) }) });
-};
-
-// src/components/layout/section.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-var Cross = () => /* @__PURE__ */ jsxs10("div", { className: "relative h-6 w-6", children: [
-  /* @__PURE__ */ jsx11("div", { className: "absolute left-3 h-6 w-px bg-background" }),
-  /* @__PURE__ */ jsx11("div", { className: "absolute top-3 h-px w-6 bg-background" }),
-  /* @__PURE__ */ jsx11("div", { className: "-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2", children: /* @__PURE__ */ jsx11(PlusIcon, { size: 20, className: "text-border/70 dark:text-border" }) })
-] });
-var Section = ({ children, sectionClassName, className, ...props }) => /* @__PURE__ */ jsx11("section", { className: sectionClassName, ...props, children: /* @__PURE__ */ jsxs10("div", { className: "grid-container relative mx-auto", children: [
-  /* @__PURE__ */ jsx11(GridBackground, { maxWidthClass: "grid-container" }),
-  /* @__PURE__ */ jsx11("div", { className: cn9(className), children }),
-  /* @__PURE__ */ jsx11("div", { className: "-bottom-3 -left-3 absolute z-10 hidden h-6 sm:block", children: /* @__PURE__ */ jsx11(Cross, {}) }),
-  /* @__PURE__ */ jsx11("div", { className: "-bottom-3 -right-3 -translate-x-px absolute z-10 hidden h-6 sm:block", children: /* @__PURE__ */ jsx11(Cross, {}) })
-] }) });
-
-// src/components/layout/site-footer.tsx
-import { cn as cn10 } from "@pelatform/ui.core";
-import { jsx as jsx12 } from "react/jsx-runtime";
-function SiteFooter({ children, className }) {
-  return /* @__PURE__ */ jsx12("footer", { className: cn10("border-border border-t py-5 md:py-0", className), children: /* @__PURE__ */ jsx12("div", { className: "container flex flex-col items-center justify-between gap-4 py-4 md:h-16 md:flex-row", children }) });
-}
-
-// src/components/layout/site-header.tsx
-import { cn as cn11 } from "@pelatform/ui.core";
-import { jsx as jsx13 } from "react/jsx-runtime";
-function SiteHeader({ className, children }) {
-  return /* @__PURE__ */ jsx13(
-    "header",
-    {
-      className: cn11(
-        "sticky top-0 z-50 w-full border-border border-b bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/60",
-        className
-      ),
-      children: /* @__PURE__ */ jsx13("div", { className: "container flex h-16 items-center justify-between gap-4", children })
-    }
-  );
-}
-
-// src/components/layout/wrapper.tsx
-import { cn as cn12 } from "@pelatform/ui.core";
-import { jsx as jsx14 } from "react/jsx-runtime";
-function MaxWidthWrapper({ className, children }) {
-  return /* @__PURE__ */ jsx14("div", { className: cn12("mx-auto w-full max-w-7xl p-3 lg:px-10", className), children });
-}
-
-// src/components/mdx/code-display.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-function CodeDisplay({
-  children,
-  component
-}) {
-  return /* @__PURE__ */ jsxs11("div", { className: "my-6 grid grid-cols-1 gap-6 overflow-hidden md:grid-cols-2", children: [
-    /* @__PURE__ */ jsx15("div", { className: "w-full overflow-hidden", children }),
-    /* @__PURE__ */ jsx15("div", { className: "my-6 flex w-full items-center justify-center rounded-lg border bg-gray-50 dark:bg-gray-900", children: component })
-  ] });
-}
-
-// src/components/mdx/download.tsx
-import { cn as cn13, DownloadIcon } from "@pelatform/ui.core";
-import { Button } from "@pelatform/ui.default";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-function DownloadFile({ children, className, href }) {
-  return /* @__PURE__ */ jsx16("div", { className: "inline-flex pb-4", children: /* @__PURE__ */ jsx16(Button, { size: "lg", className: cn13("rounded-full", className), children: /* @__PURE__ */ jsxs12("a", { href, target: "_blank", rel: "noopener noreferrer", children: [
-    /* @__PURE__ */ jsx16(DownloadIcon, { className: "mr-2 size-5" }),
-    children
-  ] }) }) });
-}
-
-// src/components/mdx/link.tsx
-import { cn as cn14 } from "@pelatform/ui.core";
-
-// src/components/utils/shared.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var DefaultImage = ({ src, alt, className }) => /* @__PURE__ */ jsx17("img", { src, alt, className });
-var DefaultLink = ({ href, className, children }) => /* @__PURE__ */ jsx17("a", { href, className, children });
-var DefaultNavigate = (href) => {
-  window.location.href = href;
-};
-
-// src/components/mdx/link.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-function ExtraLink({
-  Link = DefaultLink,
-  href,
-  target,
-  className,
-  children
-}) {
-  return /* @__PURE__ */ jsx18(
-    Link,
-    {
-      href,
-      target,
-      className: cn14("font-medium underline underline-offset-4", className),
-      children
-    }
-  );
-}
-
-// src/components/mdx/video.tsx
-import { cn as cn15 } from "@pelatform/ui.core";
-import { jsx as jsx19 } from "react/jsx-runtime";
-function Video({ className, ...props }) {
-  return /* @__PURE__ */ jsx19("video", { className: cn15("w-full rounded-lg border", className), controls: true, loop: true, ...props });
-}
-
-// src/components/mdx/wrapper.tsx
-import { cn as cn16 } from "@pelatform/ui.core";
-import { jsx as jsx20 } from "react/jsx-runtime";
-function Wrapper({ children, className }) {
-  return /* @__PURE__ */ jsx20(
-    "div",
-    {
-      className: cn16(
-        "prose-no-margin rounded-lg border border-fd-primary/10 bg-radial-[at_bottom] from-blue-500/20 bg-origin-border p-4 dark:bg-black/20",
-        className
-      ),
-      children
-    }
-  );
-}
-
-// src/components/mdx/youtube.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-function Youtube({ id }) {
-  return /* @__PURE__ */ jsx21(
-    "iframe",
-    {
-      src: `https://www.youtube.com/embed/${id}`,
-      title: `YouTube video with ID ${id}`,
-      style: {
-        width: "100%",
-        height: "auto",
-        aspectRatio: "16/9",
-        border: "none",
-        borderRadius: ".75rem",
-        overflow: "hidden"
-      },
-      allowFullScreen: true
-    }
-  );
-}
-
-// src/components/navigation/back-link.tsx
-import { ChevronLeftIcon, cn as cn17 } from "@pelatform/ui.core";
-import { Button as Button2 } from "@pelatform/ui.default";
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
-function BackLink({ Link = DefaultLink, children, href, className }) {
-  return /* @__PURE__ */ jsxs13(
-    Link,
-    {
-      href,
-      className: cn17(
-        "group flex items-center gap-2 text-foreground transition-colors duration-100 hover:text-foreground/75",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx22(
-          Button2,
-          {
-            variant: "secondary",
-            mode: "icon",
-            className: "group-hover:-translate-x-0.5 size-7.5! transition-transform duration-100",
-            children: /* @__PURE__ */ jsx22(ChevronLeftIcon, {})
-          }
-        ),
-        /* @__PURE__ */ jsx22("span", { className: "font-semibold text-lg", children })
-      ]
-    }
-  );
-}
-
-// src/components/navigation/command-menu.tsx
-import * as React from "react";
-import { cn as cn18, googleTrackEvent, SearchIcon } from "@pelatform/ui.core";
-import { Button as Button3, CommandDialog, CommandInput, CommandList } from "@pelatform/ui.default";
-import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
-function CommandMenu({
-  children,
-  classButton,
-  classDialog,
-  searchButtonText = "Search ...",
-  commandInputPlaceholder = "Type a command or search...",
-  keyHint = "\u2318K",
-  ...props
-}) {
-  const [open, setOpen] = React.useState(false);
-  React.useEffect(() => {
-    const handleKeyDown = (e) => {
-      const isCommandShortcut = e.key === "k" && (e.metaKey || e.ctrlKey) || e.key === "/";
-      if (isCommandShortcut) {
-        const isTypingInField = e.target instanceof HTMLElement && e.target.isContentEditable || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement;
-        if (isTypingInField) {
-          return;
-        }
-        e.preventDefault();
-        setOpen((currentOpen) => {
-          const newState = !currentOpen;
-          if (newState) {
-            googleTrackEvent({
-              name: "site_header_search_trigger_shortcut",
-              properties: {
-                method: e.key === "/" ? "slash" : "cmd_k",
-                category: "search",
-                label: `Search Trigger - ${e.key === "/" ? "Slash" : "Cmd+K"}`,
-                timestamp: Date.now()
-              }
-            });
-          }
-          return newState;
-        });
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, []);
-  const handleButtonClick = React.useCallback(() => {
-    googleTrackEvent({
-      name: "site_header_search_trigger_click",
-      properties: {
-        method: "button_click",
-        category: "search",
-        label: "Search Trigger - Button Click",
-        timestamp: Date.now()
-      }
-    });
-  }, []);
-  const handleOpenMenu = React.useCallback(() => {
-    setOpen(true);
-    handleButtonClick();
-  }, [handleButtonClick]);
-  return /* @__PURE__ */ jsxs14(Fragment2, { children: [
-    /* @__PURE__ */ jsxs14(
-      Button3,
-      {
-        variant: "outline",
-        mode: "input",
-        size: "sm",
-        className: cn18("relative h-8 w-full py-0 pl-2 sm:w-40 sm:pr-12 lg:w-48", classButton),
-        onClick: handleOpenMenu,
-        "aria-label": `Open command menu (${keyHint})`,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx23(SearchIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx23("span", { className: "inline-flex text-muted-foreground", children: searchButtonText }),
-          /* @__PURE__ */ jsx23(
-            "kbd",
-            {
-              className: "-translate-y-1/2 pointer-events-none absolute top-1/2 right-[5px] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-medium font-mono text-[10px] opacity-100 sm:flex",
-              "aria-label": `Keyboard shortcut: ${keyHint}`,
-              children: keyHint
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs14(
-      CommandDialog,
-      {
-        open,
-        onOpenChange: setOpen,
-        className: cn18(
-          "**:data-dialog-close:end-[0.925rem] **:data-dialog-close:top-[0.925rem]",
-          classDialog
-        ),
-        children: [
-          /* @__PURE__ */ jsx23(CommandInput, { placeholder: commandInputPlaceholder, "aria-label": "Search commands" }),
-          /* @__PURE__ */ jsx23(CommandList, { children })
-        ]
-      }
-    )
-  ] });
-}
-
-// src/components/navigation/main-nav.tsx
-import { ArrowUpRightIcon, ChevronDownIcon, cn as cn19, googleTrackEvent as googleTrackEvent2 } from "@pelatform/ui.core";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger
-} from "@pelatform/ui.default";
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
-function MainNav({ Link = DefaultLink, pathname, items, className }) {
-  return /* @__PURE__ */ jsx24("div", { className: cn19("mr-4 hidden items-center justify-center md:flex", className), children: /* @__PURE__ */ jsx24("nav", { className: "flex items-center gap-4 font-medium text-sm xl:gap-6", children: items.map((item) => /* @__PURE__ */ jsx24(NavItemRenderer, { Link, item, pathname, level: 1 }, item.title)) }) });
-}
-function NavItemRenderer({ Link = DefaultLink, item, pathname, level }) {
-  const hasChildren = item.children && item.children.length > 0;
-  const isActive = hasChildren ? item.children?.some(
-    (child) => child.href === pathname || child.href !== "/" && child.href && pathname?.startsWith(child.href) || (child.children?.some(
-      (grandchild) => grandchild.href === pathname || grandchild.href !== "/" && grandchild.href && pathname?.startsWith(grandchild.href)
-    ) ?? false)
-  ) ?? false : item.href === pathname || item.href !== "/" && item.href && pathname?.startsWith(item.href);
-  if (hasChildren && level <= 3) {
-    return /* @__PURE__ */ jsxs15(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx24(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs15(
-        "button",
-        {
-          className: cn19(
-            "inline-flex cursor-pointer items-center gap-1 transition-colors hover:text-foreground/80 focus-visible:outline-0",
-            isActive ? "text-foreground" : "text-foreground/60"
-          ),
-          children: [
-            item.icon && /* @__PURE__ */ jsx24(item.icon, {}),
-            item.title,
-            /* @__PURE__ */ jsx24(ChevronDownIcon, { className: "size-3.5" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx24(
-        DropdownMenuContent,
-        {
-          className: "min-w-[150px] overflow-visible",
-          side: "bottom",
-          align: "start",
-          sideOffset: 15,
-          alignOffset: -10,
-          children: item.children?.map((child) => /* @__PURE__ */ jsx24(
-            ChildNavItemRenderer,
-            {
-              item: child,
-              pathname,
-              level: level + 1
-            },
-            child.title
-          ))
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs15(
-    Link,
-    {
-      href: item.href ?? "#",
-      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-      className: cn19(
-        "relative inline-flex items-center gap-1 transition-colors hover:text-foreground/80",
-        isActive ? "text-foreground" : "text-foreground/60"
-      ),
-      onClick: () => handleMenuClick(item),
-      children: [
-        item.icon && /* @__PURE__ */ jsx24(item.icon, {}),
-        item.title,
-        item.external && /* @__PURE__ */ jsx24(ArrowUpRightIcon, { className: "size-3.5 opacity-60" })
-      ]
-    }
-  );
-}
-function ChildNavItemRenderer({ Link = DefaultLink, item, pathname, level }) {
-  const hasChildren = item.children && item.children.length > 0;
-  const isChildActive = item.href === pathname || item.href !== "/" && item.href && pathname?.startsWith(item.href) || hasChildren && (item.children?.some(
-    (grandchild) => grandchild.href === pathname || grandchild.href !== "/" && grandchild.href && pathname?.startsWith(grandchild.href)
-  ) ?? false);
-  if (hasChildren && level <= 3) {
-    return /* @__PURE__ */ jsxs15(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsxs15(
-        DropdownMenuSubTrigger,
-        {
-          className: cn19(
-            "flex w-full items-center justify-between text-muted-foreground hover:text-foreground",
-            isChildActive && "font-medium text-foreground"
-          ),
-          children: [
-            item.icon && /* @__PURE__ */ jsx24(item.icon, {}),
-            item.title
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx24(DropdownMenuSubContent, { className: "min-w-[150px]", children: item.children?.map((child) => /* @__PURE__ */ jsx24(
-        ChildNavItemRenderer,
-        {
-          item: child,
-          pathname,
-          level: level + 1
-        },
-        child.title
-      )) })
-    ] });
-  }
-  return /* @__PURE__ */ jsx24(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs15(
-    Link,
-    {
-      href: item.href || "",
-      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-      className: cn19(
-        "block w-full cursor-pointer transition-colors",
-        isChildActive ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
-      ),
-      onClick: () => handleMenuClick(item),
-      children: [
-        item.icon && /* @__PURE__ */ jsx24(item.icon, {}),
-        item.title,
-        item.external && /* @__PURE__ */ jsx24(ArrowUpRightIcon, { className: "size-3.5 opacity-60" })
-      ]
-    }
-  ) });
-}
-function handleMenuClick(item) {
-  googleTrackEvent2({
-    name: `site_header_menu_${item.title.toLowerCase().replace(/\s+/g, "_")}_link_click`,
-    properties: {
-      menu_item: item.title,
-      menu_path: item.href || "#",
-      is_external: !!item.external,
-      category: "navigation",
-      label: `Header Menu ${item.title} Click`
-    }
-  });
-}
-
-// src/components/navigation/mobile-nav.tsx
-import { useCallback as useCallback2, useState as useState2 } from "react";
-import {
-  ArrowUpRightIcon as ArrowUpRightIcon2,
-  ChevronDownIcon as ChevronDownIcon2,
-  cn as cn20,
-  MenuIcon
-} from "@pelatform/ui.core";
-import {
-  Button as Button4,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerTitle,
-  DrawerTrigger
-} from "@pelatform/ui.default";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
-function MobileNav({ children, className }) {
-  const { setMetaColor, metaColor } = useMetaColor();
-  const [open, setOpen] = useState2(false);
-  const onOpenChange = useCallback2(
-    (open2) => {
-      setOpen(open2);
-      setMetaColor(open2 ? "#09090b" : metaColor);
-    },
-    [setMetaColor, metaColor]
-  );
-  return /* @__PURE__ */ jsx25("div", { className: cn20("flex items-center gap-2.5 md:hidden", className), children: /* @__PURE__ */ jsxs16(Drawer, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx25(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs16(Button4, { variant: "ghost", className: "group/toggle size-8 px-0 text-foreground", children: [
-      /* @__PURE__ */ jsx25(MenuIcon, {}),
-      /* @__PURE__ */ jsx25("span", { className: "sr-only", children: "Toggle Menu" })
-    ] }) }),
-    /* @__PURE__ */ jsxs16(DrawerContent, { className: "max-h-[60svh] p-0", children: [
-      /* @__PURE__ */ jsx25(DrawerTitle, { className: "sr-only", children: "Mobile menu" }),
-      /* @__PURE__ */ jsx25("div", { className: "overflow-auto p-6", children }),
-      /* @__PURE__ */ jsx25(DrawerDescription, { className: "sr-only", children: "Mobile menu" })
-    ] })
-  ] }) });
-}
-function MobileNavItemRenderer({
-  Link = DefaultLink,
-  navigate = DefaultNavigate,
-  item,
-  pathname,
-  level,
-  onOpenChange
-}) {
-  const router = navigate;
-  const [isOpen, setIsOpen] = useState2(false);
-  const hasChildren = item.children && item.children.length > 0;
-  const isActive = hasChildren ? item.children?.some(
-    (child) => child.href === pathname || child.href !== "/" && child.href && pathname?.startsWith(child.href) || (child.children?.some(
-      (grandchild) => grandchild.href === pathname || grandchild.href !== "/" && grandchild.href && pathname?.startsWith(grandchild.href)
-    ) ?? false)
-  ) ?? false : item.href === pathname || item.href !== "/" && item.href && pathname?.startsWith(item.href);
-  if (hasChildren && level <= 3) {
-    console.log(item);
-    return /* @__PURE__ */ jsxs16(Collapsible, { open: isOpen, onOpenChange: setIsOpen, children: [
-      /* @__PURE__ */ jsxs16(
-        CollapsibleTrigger,
-        {
-          className: cn20(
-            "flex w-full cursor-pointer items-center gap-1 text-sm transition-colors",
-            isOpen ? "text-foreground" : "text-foreground/60"
-          ),
-          children: [
-            item.icon && /* @__PURE__ */ jsx25(item.icon, {}),
-            item.title,
-            /* @__PURE__ */ jsx25(
-              ChevronDownIcon2,
-              {
-                className: cn20(
-                  "ml-auto size-3.5 opacity-60 transition-transform",
-                  isOpen && "rotate-180"
-                )
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx25(CollapsibleContent, { children: /* @__PURE__ */ jsx25("div", { className: cn20("flex flex-col space-y-2.5 pt-3", `ps-5`), children: item.children.map((child) => /* @__PURE__ */ jsx25(
-        MobileNavItemRenderer,
-        {
-          item: child,
-          pathname,
-          level: level + 1,
-          onOpenChange
-        },
-        child.title
-      )) }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs16(
-    Link,
-    {
-      href: item.href || "#",
-      ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-      onClick: () => {
-        if (!item.external && item.href) {
-          router(item.href.toString());
-        }
-        onOpenChange?.(false);
-        handleMenuClick(item);
-      },
-      className: cn20(
-        "inline-flex items-center gap-1 text-sm transition-colors",
-        isActive ? "text-foreground" : "text-foreground/60"
-      ),
-      children: [
-        item.icon && /* @__PURE__ */ jsx25(item.icon, {}),
-        item.title,
-        item.external && /* @__PURE__ */ jsx25(ArrowUpRightIcon2, { className: "ml-1 size-3.5 opacity-60" })
-      ]
-    }
-  );
-}
-
-// src/components/providers/query-provider.tsx
-import { useState as useState3 } from "react";
-import { QueryCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { CircleAlertIcon as CircleAlertIcon2 } from "@pelatform/ui.core";
-import { Alert as Alert2, AlertIcon as AlertIcon2, AlertTitle as AlertTitle2 } from "@pelatform/ui.default";
-import { toast as toast2 } from "@pelatform/ui.default/dep";
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
-var QueryProvider = ({
-  client: clientProps,
-  children
-}) => {
-  const [queryClient] = useState3(
-    () => new QueryClient({
-      /** Global query defaults for all queries */
-      defaultOptions: {
-        queries: {
-          /** Time before data is considered stale (5 minutes) */
-          staleTime: 5 * 60 * 1e3,
-          /** Time before inactive queries are garbage collected (10 minutes) */
-          gcTime: 10 * 60 * 1e3,
-          /** Number of retry attempts on failure */
-          retry: (failureCount, error) => {
-            if (error?.status && error.status >= 400 && error.status < 500) {
-              return false;
-            }
-            return failureCount < 3;
-          },
-          /** Delay between retries (exponential backoff) */
-          retryDelay: (attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4),
-          /** Refetch on window focus for fresh data */
-          refetchOnWindowFocus: true,
-          /** Refetch when network reconnects */
-          refetchOnReconnect: true
-        },
-        mutations: {
-          /** Number of retry attempts for mutations */
-          retry: 1,
-          /** Delay between mutation retries */
-          retryDelay: 1e3
-        }
-      },
-      /** Global query cache with error handling */
-      queryCache: new QueryCache({
-        onError: (error, query) => {
-          const message = error?.response?.data?.message || error?.message || "Something went wrong. Please try again.";
-          if (process.env.NODE_ENV === "development") {
-            console.error("Query Error:", {
-              error,
-              queryKey: query.queryKey,
-              message,
-              timestamp: (/* @__PURE__ */ new Date()).toISOString()
-            });
-          }
-          toast2.custom(
-            () => /* @__PURE__ */ jsxs17(Alert2, { variant: "mono", icon: "destructive", close: false, children: [
-              /* @__PURE__ */ jsx26(AlertIcon2, { children: /* @__PURE__ */ jsx26(CircleAlertIcon2, {}) }),
-              /* @__PURE__ */ jsx26(AlertTitle2, { children: message })
-            ] }),
-            {
-              position: "top-center",
-              duration: 5e3,
-              // Show for 5 seconds
-              id: `query-error-${query.queryHash}`
-              // Prevent duplicate toasts
-            }
-          );
-        }
-      })
-    })
-  );
-  return /* @__PURE__ */ jsx26(QueryClientProvider, { client: clientProps ?? queryClient, children });
-};
-
-// src/components/providers/theme-provider.tsx
-import { DEFAULT_THEME_MODE, THEME_MODES } from "@pelatform/ui.core";
-import { TooltipProvider } from "@pelatform/ui.default";
-import { ThemeProvider as NextThemesProvider } from "@pelatform/ui.default/dep";
-import { jsx as jsx27 } from "react/jsx-runtime";
-function ThemeProvider({ children, ...props }) {
-  return /* @__PURE__ */ jsx27(
-    NextThemesProvider,
-    {
-      attribute: "class",
-      defaultTheme: DEFAULT_THEME_MODE,
-      enableSystem: true,
-      disableTransitionOnChange: true,
-      enableColorScheme: true,
-      storageKey: "theme",
-      themes: [THEME_MODES.LIGHT, THEME_MODES.DARK, THEME_MODES.SYSTEM],
-      ...props,
-      children: /* @__PURE__ */ jsx27(TooltipProvider, { delayDuration: 0, children })
-    }
-  );
-}
-
-// src/components/ui/announcement.tsx
-import { cn as cn21 } from "@pelatform/ui.core";
-import { Badge as Badge2 } from "@pelatform/ui.default";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var Announcement = ({
-  variant = "outline",
-  themed = false,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx28(
-  Badge2,
-  {
-    variant,
-    className: cn21(
-      "group max-w-full gap-2 rounded-full bg-background px-3 py-0.5 font-medium shadow-sm transition-all",
-      "hover:shadow-md",
-      themed && "announcement-themed border-foreground/5",
-      className
-    ),
-    ...props
-  }
-);
-var AnnouncementTag = ({ className, ...props }) => /* @__PURE__ */ jsx28(
-  "div",
-  {
-    className: cn21(
-      "-ml-2.5 shrink-0 truncate rounded-full bg-foreground/5 px-2.5 py-1 text-xs",
-      "group-[.announcement-themed]:bg-background/60",
-      className
-    ),
-    ...props
-  }
-);
-var AnnouncementTitle = ({ className, ...props }) => /* @__PURE__ */ jsx28("div", { className: cn21("flex items-center gap-1 truncate py-1", className), ...props });
-
-// src/components/ui/background-paths.tsx
-import { motion } from "@pelatform/ui.animation";
-import { cn as cn22 } from "@pelatform/ui.core";
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
-function FloatingPaths({
-  position,
-  color = "text-slate-950 dark:text-white"
-}) {
-  const paths = Array.from({ length: 36 }, (_, i) => ({
-    id: i,
-    d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${380 - i * 5 * position} -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${152 - i * 5 * position} ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${684 - i * 5 * position} ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,
-    color: `rgba(15,23,42,${0.1 + i * 0.03})`,
-    width: 0.5 + i * 0.03
-  }));
-  return /* @__PURE__ */ jsx29("div", { className: "-z-50 pointer-events-none absolute inset-0", children: /* @__PURE__ */ jsx29("svg", { className: cn22("h-full w-full", color), viewBox: "0 0 696 316", fill: "none", children: paths.map((path) => /* @__PURE__ */ jsx29(
-    motion.path,
-    {
-      d: path.d,
-      stroke: "currentColor",
-      strokeWidth: path.width,
-      strokeOpacity: 0.1 + path.id * 0.03,
-      initial: { pathLength: 0.3, opacity: 0.6 },
-      animate: {
-        pathLength: 1,
-        opacity: [0.3, 0.6, 0.3],
-        pathOffset: [0, 1, 0]
-      },
-      transition: {
-        duration: 20 + Math.random() * 10,
-        repeat: Number.POSITIVE_INFINITY,
-        ease: "linear"
-      }
-    },
-    path.id
-  )) }) });
-}
-function BackgroundPaths({ color = "text-slate-950 dark:text-white" }) {
-  return /* @__PURE__ */ jsx29("div", { className: "relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-white dark:bg-neutral-950", children: /* @__PURE__ */ jsxs18("div", { className: "absolute inset-0", children: [
-    /* @__PURE__ */ jsx29(FloatingPaths, { position: 1, color }),
-    /* @__PURE__ */ jsx29(FloatingPaths, { position: -1, color })
-  ] }) });
-}
-
-// src/components/ui/book.tsx
-import { cn as cn23 } from "@pelatform/ui.core";
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
-function Book(props) {
-  const {
-    children,
-    color = "#f50537",
-    depth,
-    texture,
-    variant = "default",
-    textColor,
-    illustration,
-    width
-  } = props;
-  return /* @__PURE__ */ jsx30(
-    "div",
-    {
-      className: cn23("group perspective-[900px] inline-block w-fit"),
-      style: {
-        "--book-color": color,
-        "--text-color": textColor,
-        "--book-depth": `${depth || 4}cqw`,
-        "--book-width": `${width || 196}px`
-      },
-      children: /* @__PURE__ */ jsxs19("div", { className: "transform-3d group-hover:transform-[rotateY(-20deg)_scale(1.066)translateX(-8px)] relative aspect-49/60 w-fit min-w-[calc(var(--book-width))] rotate-0 transition-transform duration-500 ease-out contain-inline-size", children: [
-        /* @__PURE__ */ jsxs19(
-          Stack,
-          {
-            align: "stretch",
-            className: "absolute size-full overflow-hidden rounded-r rounded-l border border-border bg-stone-100 shadow-book dark:bg-stone-800",
-            children: [
-              variant !== "simple" && /* @__PURE__ */ jsxs19(
-                Stack,
-                {
-                  shrink: true,
-                  grow: true,
-                  direction: "row",
-                  className: cn23(
-                    "relative min-w-[calc(var(--book-width))] overflow-hidden bg-(--book-color)"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx30("div", { className: "absolute inset-y-0 min-w-[8.2%] bg-book-bind-bg opacity-100 mix-blend-overlay" }),
-                    illustration && /* @__PURE__ */ jsx30("div", { className: "object-cover", children: illustration })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs19(Stack, { grow: variant === "simple", direction: "row", className: "h-fit", children: [
-                /* @__PURE__ */ jsx30("div", { className: "h-full min-w-[8.2%] bg-book-bind-bg opacity-100 mix-blend-overlay" }),
-                /* @__PURE__ */ jsx30("div", { className: "w-full contain-inline-size", children })
-              ] }),
-              texture && /* @__PURE__ */ jsx30(
-                "div",
-                {
-                  "aria-hidden": true,
-                  className: "absolute inset-0 bg-ali bg-cover bg-no-repeat opacity-60 mix-blend-hard-light"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx30(
-          "div",
-          {
-            "aria-hidden": true,
-            className: "absolute top-[3px] h-[calc(100%-2*6px)] w-[calc(var(--book-depth)-2px)] bg-book-pages",
-            style: {
-              transform: "translateX(calc(var(--book-width) - var(--book-depth) / 2 - 3px)) rotateY(90deg) translateX(calc(var(--book-depth) / 2))"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx30(
-          "div",
-          {
-            "aria-hidden": true,
-            className: "book-bg absolute left-0 h-full w-full rounded-r rounded-l-md bg-(--book-color)",
-            style: {
-              transform: "translateZ(calc(-1 * var(--book-depth)))"
-            }
-          }
-        )
-      ] })
-    }
-  );
-}
-function Stack(props) {
-  const {
-    children,
-    shrink = false,
-    grow = false,
-    justify = "start",
-    align = "start",
-    wrap = false,
-    padding = 0,
-    gap = 0,
-    direction = "column",
-    className,
-    ...etc
-  } = props;
-  return /* @__PURE__ */ jsx30(
-    "div",
-    {
-      className,
-      style: {
-        display: "flex",
-        flex: "initial",
-        flexDirection: direction,
-        alignItems: align === "start" ? "flex-start" : align === "end" ? "flex-end" : align,
-        justifyContent: justify === "start" ? "flex-start" : justify === "end" ? "flex-end" : justify,
-        flexWrap: wrap ? "wrap" : "nowrap",
-        flexGrow: grow ? 1 : 0,
-        flexShrink: shrink ? 1 : 0,
-        padding: `${padding * 4}px`,
-        gap: `${gap * 4}px`
-      },
-      ...etc,
-      children
-    }
-  );
-}
-
-// src/components/ui/dots-pattern.tsx
-import { useId as useId2 } from "react";
-import { cn as cn24 } from "@pelatform/ui.core";
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
-function DotsPattern({
-  dotSize = 2,
-  gapSize = 10,
-  patternOffset = [0, 0],
-  className
-}) {
-  const id = useId2();
-  return /* @__PURE__ */ jsxs20(
-    "svg",
-    {
-      className: cn24("pointer-events-none absolute inset-0 text-foreground/10", className),
-      width: "100%",
-      height: "100%",
-      children: [
-        /* @__PURE__ */ jsx31("defs", { children: /* @__PURE__ */ jsx31(
-          "pattern",
-          {
-            id: `dots-${id}`,
-            x: patternOffset[0] - 1,
-            y: patternOffset[1] - 1,
-            width: dotSize + gapSize,
-            height: dotSize + gapSize,
-            patternUnits: "userSpaceOnUse",
-            children: /* @__PURE__ */ jsx31("rect", { x: 1, y: 1, width: dotSize, height: dotSize, fill: "currentColor" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx31("rect", { fill: `url(#dots-${id})`, width: "100%", height: "100%" })
-      ]
-    }
-  );
-}
-
-// src/components/ui/hexagon-badge.tsx
-import { cn as cn25 } from "@pelatform/ui.core";
-import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
-var HexagonBadge = ({ children, classNames }) => {
-  return /* @__PURE__ */ jsxs21("div", { className: cn25("relative shrink-0", classNames?.base), children: [
-    /* @__PURE__ */ jsxs21(
-      "svg",
-      {
-        className: cn25("h-full w-full", classNames?.svg),
-        width: "44",
-        height: "48",
-        viewBox: "0 0 44 48",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: [
-          /* @__PURE__ */ jsx32(
-            "path",
-            {
-              d: "M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 \n            18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 \n            39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z",
-              fill: ""
-            }
-          ),
-          /* @__PURE__ */ jsx32(
-            "path",
-            {
-              d: "M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 \n            18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 \n            39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z",
-              stroke: ""
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx32(
-      "div",
-      {
-        className: cn25(
-          "-translate-y-2/4 -translate-x-2/4 absolute start-2/4 top-2/4 leading-none rtl:translate-x-2/4",
-          classNames?.wraper
-        ),
-        children
-      }
-    )
-  ] });
-};
-
-// src/components/ui/image-input.tsx
-import {
-  useCallback as useCallback3,
-  useRef,
-  useState as useState4
-} from "react";
-import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
-var DEFAULT_NULL_INDEX = -1;
-var DEFAULT_DATA_URL_KEY = "dataURL";
-var openFileDialog = (inputRef) => {
-  if (!inputRef.current) {
-    return;
-  }
-  inputRef.current.click();
-};
-var getAcceptTypeString = (acceptType, allowNonImageType) => {
-  if (acceptType?.length) return acceptType.map((item) => `.${item}`).join(", ");
-  if (allowNonImageType) return "";
-  return "image/*";
-};
-var getBase64 = async (file) => {
-  const reader = new FileReader();
-  return await new Promise((resolve) => {
-    reader.addEventListener("load", () => {
-      resolve(String(reader.result));
-    });
-    reader.readAsDataURL(file);
-  });
-};
-var getImage = async (file) => {
-  const image = new Image();
-  return await new Promise((resolve) => {
-    image.addEventListener("load", () => {
-      resolve(image);
-    });
-    image.src = URL.createObjectURL(file);
-  });
-};
-var getListFiles = async (files, dataURLKey) => {
-  const promiseFiles = [];
-  for (let i = 0; i < files.length; i += 1) {
-    promiseFiles.push(getBase64(files[i]));
-  }
-  return await Promise.all(promiseFiles).then((fileListBase64) => {
-    const fileList = fileListBase64.map((base64, index) => ({
-      [dataURLKey]: base64,
-      file: files[index]
-    }));
-    return fileList;
-  });
-};
-var ImageInput = ({
-  value,
-  acceptType,
-  inputProps,
-  multiple,
-  children,
-  onChange
-}) => {
-  const inValue = value || [];
-  const inputRef = useRef(null);
-  const [keyUpdate, setKeyUpdate] = useState4(DEFAULT_NULL_INDEX);
-  const [isDragging, setIsDragging] = useState4(false);
-  const onImageRemoveAll = useCallback3(() => {
-    onChange?.([]);
-  }, [onChange]);
-  const handleClickInput = useCallback3(() => {
-    openFileDialog(inputRef);
-  }, []);
-  const onImageUpload = useCallback3(() => {
-    handleClickInput();
-  }, [handleClickInput]);
-  const onInputChange = async (e) => {
-    await handleChange(e.target.files);
-    if (inputRef.current) inputRef.current.value = "";
-  };
-  const handleChange = async (files) => {
-    if (!files) return;
-    const fileList = await getListFiles(files, DEFAULT_DATA_URL_KEY);
-    if (!fileList.length) return;
-    let updatedFileList;
-    const updatedIndexes = [];
-    if (keyUpdate > DEFAULT_NULL_INDEX) {
-      const [firstFile] = fileList;
-      updatedFileList = [...inValue];
-      updatedFileList[keyUpdate] = firstFile;
-      updatedIndexes.push(keyUpdate);
-    } else if (multiple) {
-      updatedFileList = [...inValue, ...fileList];
-      for (let i = inValue.length; i < updatedFileList.length; i += 1) {
-        updatedIndexes.push(i);
-      }
-    } else {
-      updatedFileList = [fileList[0]];
-      updatedIndexes.push(0);
-    }
-    onChange?.(updatedFileList, updatedIndexes);
-  };
-  const onImageRemove = (index) => {
-    const updatedList = [...inValue];
-    if (Array.isArray(index)) {
-      index.forEach((i) => {
-        updatedList.splice(i, 1);
-      });
-    } else {
-      updatedList.splice(index, 1);
-    }
-    onChange?.(updatedList);
-  };
-  const onImageUpdate = (index) => {
-    setKeyUpdate(index);
-    handleClickInput();
-  };
-  const handleDrag = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  const handleDragIn = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
-      setIsDragging(true);
-    }
-  };
-  const handleDragOut = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-  };
-  const handleDrop = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(false);
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      handleChange(e.dataTransfer.files);
-    }
-  };
-  const handleDragStart = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    e.dataTransfer.clearData();
-  };
-  return /* @__PURE__ */ jsxs22(Fragment3, { children: [
-    /* @__PURE__ */ jsx33(
-      "input",
-      {
-        ref: inputRef,
-        type: "file",
-        accept: getAcceptTypeString(acceptType),
-        multiple,
-        onChange: (e) => {
-          onInputChange(e);
-        },
-        style: { display: "none" },
-        ...inputProps
-      }
-    ),
-    children?.({
-      fileList: inValue,
-      onImageUpload,
-      onImageRemove,
-      onImageUpdate,
-      onImageRemoveAll,
-      dragProps: {
-        onDrop: handleDrop,
-        onDragEnter: handleDragIn,
-        onDragLeave: handleDragOut,
-        onDragOver: handleDrag,
-        onDragStart: handleDragStart
-      },
-      isDragging
-    })
-  ] });
-};
-
-// src/components/ui/language-switcher.tsx
-import { useTransition } from "react";
-import { cn as cn26, GlobeIcon, getFlagUrl, LanguagesIcon } from "@pelatform/ui.core";
-import {
-  Badge as Badge3,
-  Button as Button5,
-  DropdownMenu as DropdownMenu2,
-  DropdownMenuContent as DropdownMenuContent2,
-  DropdownMenuItem as DropdownMenuItem2,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSub as DropdownMenuSub2,
-  DropdownMenuSubContent as DropdownMenuSubContent2,
-  DropdownMenuSubTrigger as DropdownMenuSubTrigger2,
-  DropdownMenuTrigger as DropdownMenuTrigger2
-} from "@pelatform/ui.default";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
-function LanguageSwitcher({
-  className,
-  type = "dropdown",
-  variant = "ghost",
-  size = "md",
-  showNames = true,
-  showFlags = true,
-  label = "Language",
-  i18nEnabled = true,
-  currentLocale,
-  locales,
-  onLocaleChange,
-  customFlagUrl = false,
-  Image: Image2 = DefaultImage
-}) {
-  const [isPending, startTransition] = useTransition();
-  const languages = locales ?? [];
-  const currentLanguage = languages.find((l) => l.code === currentLocale);
-  function handleLanguageChange(newLocale) {
-    if (newLocale === currentLocale) return;
-    startTransition(() => {
-      const maybePromise = onLocaleChange?.(newLocale);
-      return maybePromise;
-    });
-  }
-  if (!i18nEnabled && (languages?.length ?? 0) <= 1) {
-    return null;
-  }
-  if (type === "dropdown") {
-    return /* @__PURE__ */ jsxs23(DropdownMenu2, { children: [
-      /* @__PURE__ */ jsx34(DropdownMenuTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs23(
-        Button5,
-        {
-          variant,
-          size,
-          className: cn26(
-            "group/toggle size-8 px-0 text-foreground ring-0! focus:outline-none! focus:ring-0! focus-visible:outline-none! focus-visible:ring-0! focus-visible:ring-offset-0!",
-            isPending && "cursor-not-allowed opacity-50",
-            className
-          ),
-          disabled: isPending,
-          children: [
-            /* @__PURE__ */ jsx34(LanguagesIcon, { className: "size-4" }),
-            /* @__PURE__ */ jsx34("span", { className: "sr-only", children: isPending ? "Changing language..." : "Language dropdown" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx34(
-        DropdownMenuContent2,
-        {
-          align: "end",
-          className: "min-w-[150px]",
-          onCloseAutoFocus: (e) => e.preventDefault(),
-          children: languages.map((lang) => /* @__PURE__ */ jsxs23(
-            DropdownMenuItem2,
-            {
-              onClick: () => handleLanguageChange(lang.code),
-              className: cn26("gap-2", currentLocale === lang.code && "bg-accent"),
-              children: [
-                showFlags && lang.flag ? /* @__PURE__ */ jsx34(
-                  Image2,
-                  {
-                    src: customFlagUrl ? lang.flag : getFlagUrl(lang.flag),
-                    alt: `${lang.name} flag`,
-                    className: "size-4 rounded-full object-cover",
-                    width: 24,
-                    height: 24
-                  }
-                ) : showFlags ? /* @__PURE__ */ jsx34(GlobeIcon, { className: "size-4" }) : null,
-                showNames && /* @__PURE__ */ jsx34("span", { className: "text-sm", children: lang.name }),
-                currentLocale === lang.code && /* @__PURE__ */ jsx34("span", { className: "ms-auto text-muted-foreground text-xs", children: "\u2713" })
-              ]
-            },
-            lang.code
-          ))
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs23(DropdownMenuSub2, { children: [
-    /* @__PURE__ */ jsxs23(
-      DropdownMenuSubTrigger2,
-      {
-        className: cn26(
-          "flex items-center gap-2 data-[state=open]:**:data-[slot=badge]:border-input **:data-[slot=dropdown-menu-sub-trigger-indicator]:hidden hover:**:data-[slot=badge]:border-input",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx34(GlobeIcon, { className: "size-4" }),
-          /* @__PURE__ */ jsxs23("span", { className: "relative flex grow items-center justify-between gap-2", children: [
-            label,
-            currentLanguage && /* @__PURE__ */ jsxs23(Badge3, { appearance: "outline", className: "-translate-y-1/2 absolute end-0 top-1/2", children: [
-              currentLanguage.name,
-              showFlags && currentLanguage.flag && /* @__PURE__ */ jsx34(
-                Image2,
-                {
-                  src: customFlagUrl ? currentLanguage.flag : getFlagUrl(currentLanguage.flag),
-                  alt: currentLanguage.name,
-                  className: "ms-1 size-3.5 rounded-full",
-                  width: 24,
-                  height: 24
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx34(DropdownMenuSubContent2, { className: "w-48", children: /* @__PURE__ */ jsx34(
-      DropdownMenuRadioGroup,
-      {
-        value: currentLocale,
-        onValueChange: (value) => handleLanguageChange(value),
-        children: languages.map((item) => /* @__PURE__ */ jsxs23(
-          DropdownMenuRadioItem,
-          {
-            value: item.code,
-            className: "flex items-center gap-2",
-            children: [
-              showFlags && item.flag ? /* @__PURE__ */ jsx34(
-                Image2,
-                {
-                  src: customFlagUrl ? item.flag : getFlagUrl(item.flag),
-                  alt: `${item.name} flag`,
-                  className: "size-4 rounded-full object-cover",
-                  width: 24,
-                  height: 24
-                }
-              ) : showFlags ? /* @__PURE__ */ jsx34(GlobeIcon, { className: "size-4" }) : null,
-              /* @__PURE__ */ jsx34("span", { children: item.name })
-            ]
-          },
-          item.code
-        ))
-      }
-    ) })
-  ] });
-}
-
-// src/components/ui/logo.tsx
-import { cn as cn27 } from "@pelatform/ui.core";
-import { jsx as jsx35 } from "react/jsx-runtime";
-function Logo({ className }) {
-  return /* @__PURE__ */ jsx35(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 300 300",
-      className: cn27("size-8 text-primary", className),
-      children: /* @__PURE__ */ jsx35(
-        "path",
-        {
-          fill: "currentColor",
-          d: "M128.522 1.522c-32.588 5.306-62.029 20.107-84.303 42.38C11.915 76.206-4.329 122.766 1.097 167.5c7.82 64.464 55.004 115.796 119.215 129.692 13.77 2.981 43.538 3.228 57.152.476 55.106-11.142 98.806-49.775 115.475-102.085 9.652-30.288 9.28-64.659-1.019-94.282-13.203-37.974-41.238-69.366-77.545-86.829-9.214-4.432-22.787-8.877-35.198-11.527-12.922-2.76-38.101-3.467-50.655-1.423m45.43 23.051c25.127 4.747 47.405 16.665 66.107 35.368 18.907 18.906 30.066 39.63 35.57 66.059 2.173 10.433 2.429 35.004.478 46-1.644 9.273-7.255 26.356-11.31 34.44-12.206 24.332-34.074 46.206-58.297 58.317-37.669 18.832-85.803 16.865-121.763-4.977-32.079-19.483-53.841-50.921-60.419-87.28-2.115-11.696-2.107-33.116.019-45 5.217-29.172 20.878-56.039 43.866-75.257C88.177 35.545 110.634 25.946 136.5 23.05c9.765-1.094 27.393-.377 37.452 1.523M132.5 32.582c-17.187 2.652-35.032 9.653-49.67 19.487-9.019 6.061-25.684 23.052-31.743 32.367-19.802 30.442-24.936 66.068-14.488 100.534 10.763 35.502 38.905 64.97 73.472 76.934 37.229 12.886 76.705 7.51 108.412-14.763 36.802-25.851 55.968-71.116 48.91-115.511-4.458-28.042-18.237-52.604-40.544-72.276-10.285-9.071-26.471-18.003-40.349-22.267-18.878-5.802-36.218-7.248-54-4.505m89.497 40.668c-.003 1.59-4.605 18.817-6.612 24.75-.837 2.475-2.503 5.57-3.703 6.879-4.588 5.002-5.729 5.121-49.15 5.121-22.293 0-40.532.218-40.532.484 0 .677-10.97 43.679-11.611 45.516-.541 1.551-1.105 1.021-12.792-12.019C86.59 131.698 78 118.349 78 113.527c0-3.566 7.168-32.105 8.856-35.259.622-1.162 2.32-3.048 3.773-4.19C93.24 72.023 93.983 72 157.635 72c50.827 0 64.364.263 64.362 1.25m-37.204 62.319c6.763 8.973 10.207 15.902 10.207 20.535 0 4.848-7.331 31.946-9.565 35.355-3.203 4.888-6.075 5.579-25.942 6.24l-18.441.613-.976 3.094c-.537 1.702-3.299 11.644-6.139 22.094s-5.486 19.351-5.879 19.779c-.394.429-4.574-3.222-9.288-8.112-14.649-15.196-22.751-27.719-22.75-35.167 0-1.925 1.971-10.681 4.38-19.457 3.804-13.856 4.792-16.325 7.506-18.75l3.126-2.793h19.505c19.297 0 19.515-.024 20.398-2.25.491-1.238 2.559-8.55 4.596-16.25s4.641-17.333 5.786-21.407l2.083-7.407 8.084 8.476c4.447 4.662 10.436 11.595 13.309 15.407"
-        }
-      )
-    }
-  );
-}
-
-// src/components/ui/mode-switcher.tsx
-import * as React2 from "react";
-import {
-  cn as cn28,
-  MonitorIcon,
-  MoonIcon,
-  SunIcon,
-  THEME_MODES as THEME_MODES2
-} from "@pelatform/ui.core";
-import {
-  Button as Button6,
-  DropdownMenu as DropdownMenu3,
-  DropdownMenuContent as DropdownMenuContent3,
-  DropdownMenuItem as DropdownMenuItem3,
-  DropdownMenuTrigger as DropdownMenuTrigger3
-} from "@pelatform/ui.default";
-import { useTheme } from "@pelatform/ui.default/dep";
-import { Fragment as Fragment4, jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
-function ModeSwitcher({
-  className,
-  variant = "ghost",
-  size = "md",
-  cycleOrder = [THEME_MODES2.SYSTEM, THEME_MODES2.LIGHT, THEME_MODES2.DARK],
-  type = "toogle",
-  label = {
-    system: "System",
-    dark: "Dark",
-    light: "Light"
-  }
-}) {
-  const { setTheme, theme } = useTheme();
-  const toggleTheme = React2.useCallback(() => {
-    const currentIndex = cycleOrder.indexOf(theme);
-    const nextIndex = (currentIndex + 1) % cycleOrder.length;
-    const nextTheme = cycleOrder[nextIndex];
-    setTheme(nextTheme);
-  }, [theme, setTheme, cycleOrder]);
-  const getCurrentIcon = (withLabel = false) => {
-    if (theme === THEME_MODES2.SYSTEM) {
-      return /* @__PURE__ */ jsxs24(Fragment4, { children: [
-        /* @__PURE__ */ jsx36(MonitorIcon, {}),
-        " ",
-        withLabel && /* @__PURE__ */ jsx36("span", { children: label.system })
-      ] });
-    }
-    if (theme === THEME_MODES2.DARK) {
-      return /* @__PURE__ */ jsxs24(Fragment4, { children: [
-        /* @__PURE__ */ jsx36(MoonIcon, {}),
-        " ",
-        withLabel && /* @__PURE__ */ jsx36("span", { children: label.dark })
-      ] });
-    }
-    return /* @__PURE__ */ jsxs24(Fragment4, { children: [
-      /* @__PURE__ */ jsx36(SunIcon, {}),
-      " ",
-      withLabel && /* @__PURE__ */ jsx36("span", { children: label.light })
-    ] });
-  };
-  const isActive = (val) => theme === val;
-  if (type === "toogle") {
-    return /* @__PURE__ */ jsxs24(
-      Button6,
-      {
-        variant,
-        size,
-        className: cn28("group/toggle size-8 px-0 text-foreground", className),
-        onClick: toggleTheme,
-        "aria-label": "Switch theme",
-        children: [
-          getCurrentIcon(),
-          /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "Toggle theme" })
-        ]
-      }
-    );
-  }
-  if (type === "dropdown") {
-    return /* @__PURE__ */ jsxs24(DropdownMenu3, { children: [
-      /* @__PURE__ */ jsx36(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsxs24(
-        Button6,
-        {
-          variant,
-          size,
-          className: cn28(
-            "group/toggle size-8 px-0 text-foreground ring-0! focus:outline-none! focus:ring-0! focus-visible:outline-none! focus-visible:ring-0! focus-visible:ring-offset-0!",
-            className
-          ),
-          children: [
-            getCurrentIcon(),
-            /* @__PURE__ */ jsx36("span", { className: "sr-only", children: "Toggle theme" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs24(DropdownMenuContent3, { align: "end", onCloseAutoFocus: (e) => e.preventDefault(), children: [
-        /* @__PURE__ */ jsxs24(
-          DropdownMenuItem3,
-          {
-            className: isActive("light") ? "bg-accent" : "",
-            onClick: () => setTheme("light"),
-            children: [
-              /* @__PURE__ */ jsx36(SunIcon, {}),
-              label.light
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs24(
-          DropdownMenuItem3,
-          {
-            className: isActive("dark") ? "bg-accent" : "",
-            onClick: () => setTheme("dark"),
-            children: [
-              /* @__PURE__ */ jsx36(MoonIcon, {}),
-              label.dark
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs24(
-          DropdownMenuItem3,
-          {
-            className: isActive("system") ? "bg-accent" : "",
-            onClick: () => setTheme("system"),
-            children: [
-              /* @__PURE__ */ jsx36(MonitorIcon, {}),
-              label.system
-            ]
-          }
-        )
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsx36(
-    DropdownMenuItem3,
-    {
-      className,
-      onSelect: (e) => {
-        e.preventDefault();
-        toggleTheme();
-      },
-      children: getCurrentIcon(true)
-    }
-  );
-}
-
-// src/components/ui/moving-border.tsx
-import { useRef as useRef2 } from "react";
-import {
-  motion as motion2,
-  useAnimationFrame,
-  useMotionTemplate,
-  useMotionValue,
-  useTransform
-} from "@pelatform/ui.animation";
-import { cn as cn29 } from "@pelatform/ui.core";
-import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
-function MovingLabel({
-  borderRadius = "1.75rem",
-  children,
-  as: Component = "button",
-  containerClassName,
-  borderClassName,
-  duration,
-  className,
-  ...otherProps
-}) {
-  return /* @__PURE__ */ jsxs25(
-    Component,
-    {
-      className: cn29("relative h-9 overflow-hidden bg-transparent p-px text-xl", containerClassName),
-      style: {
-        borderRadius
-      },
-      ...otherProps,
-      children: [
-        /* @__PURE__ */ jsx37("div", { className: "absolute inset-0", style: { borderRadius: `calc(${borderRadius} * 0.96)` }, children: /* @__PURE__ */ jsx37(MovingBorder, { duration, rx: "30%", ry: "30%", children: /* @__PURE__ */ jsx37(
-          "div",
-          {
-            className: cn29(
-              "h-12 w-20 bg-[radial-gradient(#24B47E_15%,transparent_60%)] opacity-[0.6]",
-              borderClassName
-            )
-          }
-        ) }) }),
-        /* @__PURE__ */ jsx37(
-          "div",
-          {
-            className: cn29(
-              "relative flex h-full w-full items-center justify-center border border-slate-800 bg-slate-900/50 text-sm text-white antialiased backdrop-blur-xl",
-              className
-            ),
-            style: {
-              borderRadius: `calc(${borderRadius} * 1)`
-            },
-            children
-          }
-        )
-      ]
-    }
-  );
-}
-var MovingBorder = ({
-  children,
-  duration = 2e3,
-  rx,
-  ry,
-  ...otherProps
-}) => {
-  const pathRef = useRef2(null);
-  const progress = useMotionValue(0);
-  useAnimationFrame((time) => {
-    const length = pathRef.current?.getTotalLength();
-    if (length) {
-      const pxPerMillisecond = length / duration;
-      progress.set(time * pxPerMillisecond % length);
-    }
-  });
-  const x = useTransform(progress, (val) => pathRef.current?.getPointAtLength(val).x);
-  const y = useTransform(progress, (val) => pathRef.current?.getPointAtLength(val).y);
-  const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`;
-  return /* @__PURE__ */ jsxs25(Fragment5, { children: [
-    /* @__PURE__ */ jsx37(
-      "svg",
-      {
-        preserveAspectRatio: "none",
-        className: "absolute h-full w-full",
-        width: "100%",
-        height: "100%",
-        ...otherProps,
-        children: /* @__PURE__ */ jsx37("rect", { fill: "none", width: "100%", height: "100%", rx, ry, ref: pathRef })
-      }
-    ),
-    /* @__PURE__ */ jsx37(
-      motion2.div,
-      {
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          display: "inline-block",
-          transform
-        },
-        children
-      }
-    )
-  ] });
-};
-
-// src/components/ui/subscribe.tsx
-import { useState as useState5 } from "react";
-import { CircleAlertIcon as CircleAlertIcon4, CircleCheckIcon as CircleCheckIcon2, googleTrackEvent as googleTrackEvent3 } from "@pelatform/ui.core";
-import { Alert as Alert4, AlertIcon as AlertIcon4, AlertTitle as AlertTitle4, Button as Button8, Input } from "@pelatform/ui.default";
-import { toast as toast4 } from "@pelatform/ui.default/dep";
-
-// src/components/utils/recaptcha-popover.tsx
-import { CircleAlertIcon as CircleAlertIcon3 } from "@pelatform/ui.core";
-import { Alert as Alert3, AlertIcon as AlertIcon3, AlertTitle as AlertTitle3, Button as Button7 } from "@pelatform/ui.default";
-import { Popover, toast as toast3 } from "@pelatform/ui.default/dep";
-import { useRecaptchaV2 } from "@pelatform/ui.hook";
-import { jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
-function RecaptchaPopover({
-  open,
-  onOpenChange,
-  onVerify,
-  trigger,
-  verifyButtonText = "Verify & Submit"
-}) {
-  const { containerRef, getToken, resetCaptcha, initializeRecaptcha } = useRecaptchaV2(
-    process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || ""
-  );
-  const handleOpenChange = (newOpen) => {
-    onOpenChange(newOpen);
-    if (newOpen) {
-      resetCaptcha();
-      setTimeout(() => {
-        initializeRecaptcha();
-      }, 100);
-    }
-  };
-  const handleVerify = () => {
-    try {
-      const token = getToken();
-      if (!token) {
-        toast3.custom(
-          () => /* @__PURE__ */ jsxs26(Alert3, { variant: "mono", icon: "destructive", children: [
-            /* @__PURE__ */ jsx38(AlertIcon3, { children: /* @__PURE__ */ jsx38(CircleAlertIcon3, {}) }),
-            /* @__PURE__ */ jsx38(AlertTitle3, { children: "Please complete the reCAPTCHA verification." })
-          ] }),
-          {
-            position: "top-center"
-          }
-        );
-        return;
-      }
-      onVerify(token);
-    } catch (error) {
-      console.error("Error getting reCAPTCHA token:", error);
-      toast3.custom(
-        () => /* @__PURE__ */ jsxs26(Alert3, { variant: "mono", icon: "destructive", children: [
-          /* @__PURE__ */ jsx38(AlertIcon3, { children: /* @__PURE__ */ jsx38(CircleAlertIcon3, {}) }),
-          /* @__PURE__ */ jsx38(AlertTitle3, { children: "Please complete the reCAPTCHA verification." })
-        ] }),
-        {
-          position: "top-center"
-        }
-      );
-      return;
-    }
-  };
-  return /* @__PURE__ */ jsxs26(Popover.Root, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx38(Popover.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx38(Popover.Portal, { children: /* @__PURE__ */ jsxs26(
-      Popover.Content,
-      {
-        className: "z-50 rounded-lg bg-white p-4 shadow-lg",
-        sideOffset: 5,
-        align: "end",
-        onInteractOutside: (e) => {
-          if (e.target.tagName === "IFRAME") {
-            e.preventDefault();
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsxs26("div", { className: "flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsx38("div", { ref: containerRef, className: "min-h-[78px]" }),
-            /* @__PURE__ */ jsx38(Button7, { type: "button", variant: "mono", onClick: handleVerify, className: "w-full", children: verifyButtonText })
-          ] }),
-          /* @__PURE__ */ jsx38(Popover.Arrow, { className: "fill-white" })
-        ]
-      }
-    ) })
-  ] });
-}
-
-// src/components/ui/subscribe.tsx
-import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
-function Subscribe({
-  heading = "Stay notified on every new release",
-  subheading = "Only the updates worth knowing",
-  buttonText = "Subscribe",
-  loadingButtonText = "Subscribing...",
-  inputPlaceholder = "Your email address",
-  successMessage = "Thank you for your subscription. Expect amazing stuff soon!",
-  invalidEmailMessage = "Invalid email address. Please check and try again.",
-  recaptchaMessage = "Please complete the reCAPTCHA verification.",
-  errorMessage = "Oops! Something unexpected happened. Please try again later.",
-  apiEndpoint = "/api/subscribe",
-  verifyButtonText = "Verify & Subscribe",
-  className
-} = {}) {
-  const [email, setEmail] = useState5("");
-  const [loading, setLoading] = useState5(false);
-  const [showRecaptcha, setShowRecaptcha] = useState5(false);
-  const validateEmail = () => {
-    if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
-      toast4.custom(
-        () => /* @__PURE__ */ jsxs27(Alert4, { variant: "mono", icon: "destructive", children: [
-          /* @__PURE__ */ jsx39(AlertIcon4, { children: /* @__PURE__ */ jsx39(CircleAlertIcon4, {}) }),
-          /* @__PURE__ */ jsx39(AlertTitle4, { children: invalidEmailMessage })
-        ] }),
-        {
-          position: "top-center"
-        }
-      );
-      return false;
-    }
-    return true;
-  };
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!validateEmail()) {
-      setShowRecaptcha(false);
-      return;
-    }
-    setShowRecaptcha(true);
-  };
-  const handleVerifiedSubmit = async (token) => {
-    if (!token) {
-      toast4.custom(
-        () => /* @__PURE__ */ jsxs27(Alert4, { variant: "mono", icon: "destructive", children: [
-          /* @__PURE__ */ jsx39(AlertIcon4, { children: /* @__PURE__ */ jsx39(CircleAlertIcon4, {}) }),
-          /* @__PURE__ */ jsx39(AlertTitle4, { children: recaptchaMessage })
-        ] }),
-        {
-          position: "top-center"
-        }
-      );
-      return;
-    }
-    setLoading(true);
-    setShowRecaptcha(false);
-    try {
-      googleTrackEvent3({
-        name: "site_newsletter_subscribe_submit",
-        properties: {
-          category: "conversion",
-          label: "Newsletter Subscribe Submit",
-          email
-        }
-      });
-      const res = await fetch(apiEndpoint, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "x-recaptcha-token": token
-        },
-        body: JSON.stringify({ email })
-      });
-      const data = await res.json();
-      if (res.ok) {
-        toast4.custom(
-          () => /* @__PURE__ */ jsxs27(Alert4, { variant: "mono", icon: "success", children: [
-            /* @__PURE__ */ jsx39(AlertIcon4, { children: /* @__PURE__ */ jsx39(CircleCheckIcon2, {}) }),
-            /* @__PURE__ */ jsx39(AlertTitle4, { children: successMessage })
-          ] }),
-          {
-            position: "top-center"
-          }
-        );
-        googleTrackEvent3({
-          name: "site_newsletter_subscribe_success",
-          properties: {
-            category: "conversion",
-            label: "Newsletter Subscribe Success",
-            email
-          }
-        });
-        setEmail("");
-      } else {
-        toast4.custom(
-          () => /* @__PURE__ */ jsxs27(Alert4, { variant: "mono", icon: "destructive", children: [
-            /* @__PURE__ */ jsx39(AlertIcon4, { children: /* @__PURE__ */ jsx39(CircleAlertIcon4, {}) }),
-            /* @__PURE__ */ jsx39(AlertTitle4, { children: data.message || errorMessage })
-          ] }),
-          {
-            position: "top-center"
-          }
-        );
-      }
-    } catch (err) {
-      console.error("Newsletter subscription error:", err);
-      toast4.custom(
-        () => /* @__PURE__ */ jsxs27(Alert4, { variant: "mono", icon: "destructive", children: [
-          /* @__PURE__ */ jsx39(AlertIcon4, { children: /* @__PURE__ */ jsx39(CircleAlertIcon4, {}) }),
-          /* @__PURE__ */ jsx39(AlertTitle4, { children: errorMessage })
-        ] }),
-        {
-          position: "top-center"
-        }
-      );
-    } finally {
-      setLoading(false);
-    }
-  };
-  const style = {
-    backgroundImage: `linear-gradient(0deg, transparent 0%, transparent 60%, rgba(183, 183, 183, 0.05) 60%, rgba(183, 183, 183, 0.05) 93%, transparent 93%, transparent 100%), linear-gradient(135deg, transparent 0%, transparent 55%, rgba(183, 183, 183, 0.05) 55%, rgba(183, 183, 183, 0.05) 84%, transparent 84%, transparent 100%), linear-gradient(0deg, transparent 0%, transparent 80%, rgba(183, 183, 183, 0.05) 80%, rgba(183, 183, 183, 0.05) 94%, transparent 94%, transparent 100%), linear-gradient(90deg, rgb(0,0,0), rgb(0,0,0))`
-  };
-  return /* @__PURE__ */ jsx39("footer", { children: /* @__PURE__ */ jsx39("div", { className: "container pt-10", children: /* @__PURE__ */ jsxs27(
-    "div",
-    {
-      className: `mt-10 mb-8 flex flex-wrap items-center justify-between gap-7 rounded-xl px-10 py-16 md:px-20 ${className || ""}`,
-      style,
-      children: [
-        /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsx39("h2", { className: "font-medium text-3xl text-white", children: heading }),
-          /* @__PURE__ */ jsx39("div", { className: "font-medium text-2xl text-white/50", children: subheading })
-        ] }),
-        /* @__PURE__ */ jsxs27("form", { onSubmit: handleSubmit, className: "flex gap-2.5", children: [
-          /* @__PURE__ */ jsx39(
-            Input,
-            {
-              type: "email",
-              value: email,
-              onChange: (e) => {
-                setEmail(e.target.value);
-                setShowRecaptcha(false);
-              },
-              placeholder: inputPlaceholder,
-              className: "h-auto rounded-lg border border-input/20 bg-white/5 px-5 py-3 text-white/80 placeholder:text-white/50 focus:outline-none focus:ring md:min-w-64",
-              required: true
-            }
-          ),
-          /* @__PURE__ */ jsx39(
-            RecaptchaPopover,
-            {
-              open: showRecaptcha,
-              onOpenChange: (open) => {
-                if (!open) {
-                  setShowRecaptcha(false);
-                }
-              },
-              onVerify: handleVerifiedSubmit,
-              verifyButtonText,
-              trigger: /* @__PURE__ */ jsx39(
-                Button8,
-                {
-                  type: "submit",
-                  className: "h-auto rounded-lg bg-white px-5 py-3 font-semibold text-black/80 hover:bg-white hover:text-black",
-                  disabled: loading,
-                  children: loading ? loadingButtonText : buttonText
-                }
-              )
-            }
-          )
-        ] })
-      ]
-    }
-  ) }) });
-}
-
-// src/components/ui/toolbar.tsx
-import { cn as cn30 } from "@pelatform/ui.core";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var Toolbar = ({ children }) => {
-  return /* @__PURE__ */ jsx40("div", { className: "flex grow items-center justify-between gap-2.5 pb-5", children });
-};
-var ToolbarHeading = ({ children, className }) => {
-  return /* @__PURE__ */ jsx40("div", { className: cn30("flex flex-col flex-wrap gap-px", className), children });
-};
-var ToolbarTitle = ({ className, children }) => {
-  return /* @__PURE__ */ jsx40("h1", { className: cn30("font-semibold text-foreground text-lg", className), children });
-};
-var ToolbarActions = ({ children }) => {
-  return /* @__PURE__ */ jsx40("div", { className: "flex flex-wrap items-center gap-1.5 lg:gap-3.5", children });
-};
-
-// src/components/ui/user-avatar.tsx
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  AvatarIndicator,
-  AvatarStatus
-} from "@pelatform/ui.default";
-import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
-function UserAvatar({ className, indicator = false, src, alt }) {
-  const name = alt ?? "User";
-  const initial = getInitials(name);
-  return /* @__PURE__ */ jsxs28(Avatar, { className, children: [
-    /* @__PURE__ */ jsx41(AvatarImage, { src: src ?? void 0, alt: name }),
-    /* @__PURE__ */ jsx41(AvatarFallback, { children: initial }),
-    indicator && /* @__PURE__ */ jsx41(AvatarIndicator, { className: "-end-2 -top-2", children: /* @__PURE__ */ jsx41(AvatarStatus, { variant: "online", className: "size-2.5" }) })
-  ] });
-}
-var getInitials = (name, count) => {
-  if (!name || typeof name !== "string") {
-    return "";
-  }
-  const initials = name.split(" ").filter(Boolean).map((part) => part[0].toUpperCase());
-  return count && count > 0 ? initials.slice(0, count).join("") : initials.join("");
-};
-
-// src/components/utils/fonts.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
-var satoshiFontUrl = "https://assets.pelatform.com/fonts/satoshi/Satoshi-Variable.woff2";
-var cssFontFace = `
-  @font-face {
-    font-family: 'Satoshi';
-    src: url('${satoshiFontUrl}') format('woff2');
-    font-weight: 300 900;
-    font-style: normal;
-    font-display: swap;
-  }
-`;
-function SatoshiFontCSS() {
-  return /* @__PURE__ */ jsx42("style", { dangerouslySetInnerHTML: { __html: cssFontFace } });
-}
-export {
-  AlertComingsoon,
-  AlertNotification,
-  AlertToast,
-  Announcement,
-  AnnouncementTag,
-  AnnouncementTitle,
-  BackLink,
-  BackgroundPaths,
-  Body,
-  Book,
-  CodeDisplay,
-  ComingSoon,
-  CommandMenu,
-  ConfirmDismissDialog,
-  DEFAULT_DATA_URL_KEY,
-  DEFAULT_NULL_INDEX,
-  DefaultImage,
-  DefaultLink,
-  DefaultNavigate,
-  DotsPattern,
-  DownloadFile,
-  ErrorComponents,
-  ExtraLink,
-  FloatingPaths,
-  Grid,
-  GridBackground,
-  HexagonBadge,
-  Icons,
-  ImageInput,
-  LanguageSwitcher,
-  LayoutAuth,
-  LayoutBlank,
-  Logo,
-  MainNav,
-  MaxWidthWrapper,
-  MobileNav,
-  MobileNavItemRenderer,
-  ModeSwitcher,
-  MovingBorder,
-  MovingLabel,
-  QueryProvider,
-  RecaptchaPopover,
-  SatoshiFontCSS,
-  ScreenLoader,
-  Section,
-  SiteFooter,
-  SiteHeader,
-  Stack,
-  Subscribe,
-  ThemeProvider,
-  Toolbar,
-  ToolbarActions,
-  ToolbarHeading,
-  ToolbarTitle,
-  UserAvatar,
-  Video,
-  Wrapper,
-  Youtube,
-  cssFontFace,
-  getAcceptTypeString,
-  getBase64,
-  getImage,
-  getInitials,
-  getListFiles,
-  handleMenuClick,
-  openFileDialog,
-  satoshiFontUrl
-};
+// src/components.ts
+export * from "pelatform-ui/components";