@komensal/ui 0.1.0 → 0.2.1

package/dist/index.js

@@ -0,0 +1,1710 @@
+// src/components/alert.tsx
+import { AlertCircle, CheckCircle2, Info, TriangleAlert } from "lucide-react";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/utils/styles.ts
+var inputBase = cn(
+  "flex w-full !h-[50px] rounded-[10px] px-3 gap-[10px] text-base font-normal justify-between items-center",
+  "border border-border bg-surface text-foreground",
+  "transition-all duration-200 ease-in-out",
+  "placeholder:text-icon-muted placeholder:text-sm placeholder:font-normal placeholder:leading-none",
+  "disabled:cursor-not-allowed disabled:bg-inactive disabled:text-inactive-text disabled:border-inactive disabled:placeholder:text-inactive-text"
+);
+var inputPlaceholder = cn("text-icon-muted text-sm font-normal leading-none");
+var inputDisabled = cn("cursor-not-allowed opacity-50");
+var inputFocus = cn(
+  "focus:outline-none focus-visible:outline-none",
+  "focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-primary",
+  "data-[state=open]:ring-2 data-[state=open]:ring-ring data-[state=open]:border-primary"
+);
+
+// src/utils/toast-emitter.ts
+var emitToast = null;
+var toast = {
+  error(options) {
+    emit("error", options);
+  },
+  info(options) {
+    emit("info", options);
+  },
+  success(options) {
+    emit("success", options);
+  },
+  wait(options) {
+    emit("wait", options);
+  },
+  warning(options) {
+    emit("warning", options);
+  }
+};
+function registerToastEmitter(fn) {
+  emitToast = fn;
+}
+function emit(type, options) {
+  if (!emitToast) return;
+  if (typeof options === "string") {
+    emitToast(type, { title: options });
+  } else {
+    emitToast(type, options);
+  }
+}
+
+// src/components/alert.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantStyles = {
+  error: { container: "bg-destructive-subtle text-destructive", icon: "text-destructive" },
+  info: { container: "bg-info-subtle text-info", icon: "text-info" },
+  success: { container: "bg-success-subtle text-success", icon: "text-success" },
+  warning: { container: "bg-warning-subtle text-warning", icon: "text-warning" }
+};
+var variantIcons = {
+  error: AlertCircle,
+  info: Info,
+  success: CheckCircle2,
+  warning: TriangleAlert
+};
+var Alert = ({ children, className, variant = "error", ...props }) => {
+  const styles = variantStyles[variant];
+  const Icon2 = variantIcons[variant];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      className: cn(
+        "flex items-center justify-center gap-2 rounded-[10px] px-4 py-3 text-sm",
+        styles.container,
+        className
+      ),
+      role: "alert",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Icon2, { className: cn("h-5 w-5 shrink-0", styles.icon) }),
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+};
+
+// src/components/auth-header.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var AuthHeader = ({ children, logoAlt, mobileClassName }) => {
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2("div", { className: cn("flex min-h-0 shrink flex-col lg:hidden", mobileClassName), children: [
+      /* @__PURE__ */ jsx2("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx2("img", { alt: logoAlt, className: "h-11 md:h-12", src: "/logotipo_color.svg" }) }),
+      children
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "absolute hidden p-10 lg:flex", children: /* @__PURE__ */ jsx2("img", { alt: logoAlt, className: "h-12.5 w-12.5", src: "/logo_color.svg" }) })
+  ] });
+};
+
+// src/components/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React2 from "react";
+
+// src/components/spinner.tsx
+import clsx2 from "clsx";
+import { useTranslation } from "react-i18next";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var sizes = {
+  lg: "70",
+  md: "50",
+  sm: "20",
+  xl: "100",
+  xs: "5"
+};
+var variants = {
+  light: "var(--color-spinner-light)",
+  primary: "var(--color-spinner-primary)",
+  secondary: "var(--color-spinner-secondary)"
+};
+var Spinner = ({ className = "", size = "md", variant = "primary" }) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(
+      "svg",
+      {
+        fill: "currentColor",
+        height: sizes[size],
+        stroke: variants[variant],
+        viewBox: "0 0 100 100",
+        width: sizes[size],
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsxs3("g", { className: clsx2("spinner_V8m1", sizes[size], variants[variant], className), children: [
+          /* @__PURE__ */ jsx3("circle", { cx: "50", cy: "50", fill: "none", opacity: "0.25", r: "35", stroke: "currentColor", strokeWidth: "10" }),
+          /* @__PURE__ */ jsx3(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              fill: "none",
+              r: "35",
+              stroke: "currentColor",
+              strokeDasharray: "164.93361431346415 56.97787143782138",
+              strokeWidth: "10",
+              children: /* @__PURE__ */ jsx3(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  dur: "1s",
+                  keyTimes: "0;1",
+                  repeatCount: "indefinite",
+                  type: "rotate",
+                  values: "0 50 50;360 50 50"
+                }
+              )
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx3("span", { className: "sr-only", children: t("spinner.loading") })
+  ] });
+};
+
+// src/components/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var TooltipRoot = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx4(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
+  TooltipPrimitive.Content,
+  {
+    className: cn(
+      "bg-tooltip text-tooltip-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm font-semibold shadow-sm",
+      className
+    ),
+    ref,
+    sideOffset,
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var Tooltip = React.forwardRef(
+  ({ children, childrenClassName, className, message, sideTooltip = "top" }, ref) => {
+    return /* @__PURE__ */ jsx4(TooltipProvider, { children: /* @__PURE__ */ jsxs4(TooltipRoot, { children: [
+      /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx4("div", { className: cn("", childrenClassName), ref, children }) }),
+      /* @__PURE__ */ jsx4(TooltipContent, { className: cn("", className), side: sideTooltip, children: /* @__PURE__ */ jsx4("p", { children: message }) })
+    ] }) });
+  }
+);
+Tooltip.displayName = "Tooltip";
+
+// src/components/button.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "w-full inline-flex items-center justify-center gap-[10px] whitespace-nowrap rounded-[12px] border border-transparent text-base font-semibold transition-all duration-300 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:bg-inactive disabled:text-inactive-text disabled:border-transparent cursor-pointer",
+  {
+    defaultVariants: {
+      hoverStyle: "none",
+      size: "default",
+      variant: "primary"
+    },
+    variants: {
+      hoverStyle: {
+        highlight: `
+          hover:bg-brand-subtle hover:border-primary hover:text-primary
+        `,
+        none: "",
+        shine: `
+          relative overflow-hidden
+          hover:-translate-y-[1px] hover:shadow-lg
+          before:content-[''] before:absolute before:top-0 before:left-[-100%]
+          before:w-full before:h-full
+          before:bg-[linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent)]
+          before:transition-all before:duration-300
+          hover:before:left-[100%]
+        `
+      },
+      size: {
+        default: "h-14 px-4",
+        icon: "h-12 w-12 p-0",
+        lg: "h-14 px-12",
+        sm: "h-9 px-3 text-sm"
+      },
+      variant: {
+        destructive: "bg-destructive text-inverse hover:bg-destructive/90",
+        ghost: "bg-transparent border border-border text-foreground hover:bg-hover",
+        invisible: "bg-transparent rounded-none",
+        link: "text-muted underline-offset-4 hover:underline text-sm font-normal disabled:bg-transparent",
+        outline: "bg-surface border border-primary text-primary hover:bg-brand-subtle",
+        primary: "bg-primary text-inverse hover:bg-primary-hover active:bg-primary-dark",
+        tertiary: "bg-subtle border border-border text-foreground hover:bg-hover",
+        underline: "text-primary underline"
+      }
+    }
+  }
+);
+var Button = React2.forwardRef(
+  ({
+    asChild = false,
+    children,
+    childrenClassName,
+    className,
+    disabled,
+    hoverStyle,
+    icon,
+    iconLeft,
+    iconRight,
+    isLoading = false,
+    sideTooltip,
+    size,
+    tooltip,
+    variant,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const buttonNode = /* @__PURE__ */ jsxs5(
+      Comp,
+      {
+        className: cn(buttonVariants({ hoverStyle, size, variant }), isLoading && "relative opacity-40", className),
+        disabled: disabled === true || isLoading,
+        ref,
+        ...props,
+        children: [
+          iconLeft,
+          icon,
+          /* @__PURE__ */ jsx5("span", { className: cn("flex w-full items-center justify-center gap-2", childrenClassName), children }),
+          iconRight,
+          isLoading && /* @__PURE__ */ jsx5("div", { className: "absolute inset-0 flex items-center justify-center bg-black/10 backdrop-blur-sm", children: /* @__PURE__ */ jsx5(Spinner, { size: "sm" }) })
+        ]
+      }
+    );
+    return tooltip ? /* @__PURE__ */ jsx5(Tooltip, { childrenClassName: "flex items-center justify-center", message: tooltip, sideTooltip, children: buttonNode }) : buttonNode;
+  }
+);
+Button.displayName = "Button";
+
+// src/components/command.tsx
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Command as CommandPrimitive } from "cmdk";
+import * as React4 from "react";
+
+// src/components/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as React3 from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React3.forwardRef(({ className, isAbsolute = false, ...props }, ref) => /* @__PURE__ */ jsx6(
+  DialogPrimitive.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 bg-foreground/10 z-60 backdrop-blur-xs",
+      isAbsolute ? "absolute inset-0" : "fixed inset-0",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React3.forwardRef(
+  ({ children, className, container, isAbsolute = false, isCloseIcon = false, overlayClassName, ...props }, ref) => {
+    const { t } = useTranslation2("ui");
+    return /* @__PURE__ */ jsxs6(DialogPortal, { container, children: [
+      /* @__PURE__ */ jsx6(DialogOverlay, { className: overlayClassName, isAbsolute }),
+      /* @__PURE__ */ jsxs6(
+        DialogPrimitive.Content,
+        {
+          className: cn(
+            "bg-surface 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] z-70 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-0 rounded-2xl p-6 px-0 shadow-lg duration-200 outline-none lg:px-0",
+            isAbsolute ? "absolute top-[50%] left-[50%]" : "fixed top-[50%] left-[50%]",
+            className
+          ),
+          ref,
+          ...props,
+          children: [
+            children,
+            isCloseIcon && /* @__PURE__ */ jsxs6(DialogPrimitive.Close, { className: "data-[state=open]:text-muted ring-offset-surface focus:ring-ring data-[state=open]:bg-hover border-border bg-border absolute top-11 right-8 flex h-8 w-8 min-w-8 cursor-pointer items-center justify-center rounded-full opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [
+              /* @__PURE__ */ jsx6(Cross2Icon, { className: "text-body hover:text-primary-dark h-4 w-4" }),
+              /* @__PURE__ */ jsx6("span", { className: "sr-only", children: t("dialog.close") })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx6("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx6(
+  "div",
+  {
+    className: cn("flex flex-col-reverse justify-center rounded-2xl sm:flex-row sm:space-x-2", className),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  DialogPrimitive.Title,
+  {
+    className: cn("text-lg leading-none font-semibold tracking-tight", className),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx6("span", { children: props.children })
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(DialogPrimitive.Description, { className: cn("text-muted text-sm", className), ref, ...props, children: /* @__PURE__ */ jsx6("span", { children: props.children }) }));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/components/command.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var Command = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive,
+  {
+    className: cn("bg-surface text-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
+    ref,
+    ...props
+  }
+));
+Command.displayName = CommandPrimitive.displayName;
+var CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx7(Dialog, { ...props, children: /* @__PURE__ */ jsx7(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx7(Command, { className: "**:[[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3", children }) }) });
+};
+var CommandInput = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx7(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+  /* @__PURE__ */ jsx7(
+    CommandPrimitive.Input,
+    {
+      className: cn(
+        "placeholder:text-placeholder flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+var CommandList = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(CommandPrimitive.List, { className: cn("max-h-75 overflow-x-hidden overflow-y-auto", className), ref, ...props }));
+CommandList.displayName = CommandPrimitive.List.displayName;
+var CommandEmpty = React4.forwardRef((props, ref) => /* @__PURE__ */ jsx7(CommandPrimitive.Empty, { className: "py-6 text-center text-sm", ref, ...props }));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+var CommandGroup = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive.Group,
+  {
+    className: cn(
+      "text-foreground **:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+var CommandSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(CommandPrimitive.Separator, { className: cn("bg-border -mx-1 h-px", className), ref, ...props }));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+var CommandItem = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+  CommandPrimitive.Item,
+  {
+    className: cn(
+      "relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      className
+    ),
+    ref,
+    ...props
+  }
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+var CommandShortcut = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx7("span", { className: cn("text-muted ml-auto text-xs tracking-widest", className), ...props });
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+// src/components/form.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import * as React6 from "react";
+import { Controller, FormProvider, useFormContext } from "react-hook-form";
+
+// src/components/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva2 } from "class-variance-authority";
+import * as React5 from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var labelVariants = cva2("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(LabelPrimitive.Root, { className: cn(labelVariants(), className), ref, ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/form.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Form = FormProvider;
+var FormFieldContext = React6.createContext(null);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx9(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx9(Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React6.useContext(FormFieldContext);
+  const itemContext = React6.useContext(FormItemContext);
+  const { formState, getFieldState } = useFormContext();
+  if (!fieldContext) {
+    throw new Error("useFormField must be used within <FormField>");
+  }
+  if (!itemContext) {
+    throw new Error("useFormField must be used within <FormItem>");
+  }
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    formDescriptionId: `${id}-form-item-description`,
+    formItemId: `${id}-form-item`,
+    formMessageId: `${id}-form-item-message`,
+    id,
+    name: fieldContext.name,
+    ...fieldState
+  };
+};
+var FormItemContext = React6.createContext(null);
+var FormItem = React6.forwardRef(
+  ({ className, ...props }, ref) => {
+    const id = React6.useId();
+    return /* @__PURE__ */ jsx9(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx9("div", { className: cn("space-y-1", className), ref, ...props }) });
+  }
+);
+FormItem.displayName = "FormItem";
+var FormLabel = React6.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx9(Label, { className: cn(error && "text-destructive", className), htmlFor: formItemId, ref, ...props });
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React6.forwardRef(
+  ({ ...props }, ref) => {
+    const { error, formDescriptionId, formItemId, formMessageId } = useFormField();
+    return /* @__PURE__ */ jsx9(
+      Slot2,
+      {
+        "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+        "aria-invalid": !!error,
+        id: formItemId,
+        ref,
+        ...props
+      }
+    );
+  }
+);
+FormControl.displayName = "FormControl";
+var FormDescription = React6.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+    return /* @__PURE__ */ jsx9("p", { className: cn("text-muted text-[0.8rem]", className), id: formDescriptionId, ref, ...props });
+  }
+);
+FormDescription.displayName = "FormDescription";
+var FormMessage = React6.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error?.message ? String(error.message) : children;
+    if (!body) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx9(
+      "p",
+      {
+        className: cn("text-destructive text-[0.8rem] font-medium", className),
+        id: formMessageId,
+        ref,
+        ...props,
+        children: body
+      }
+    );
+  }
+);
+FormMessage.displayName = "FormMessage";
+
+// src/components/form-fields/input-field.tsx
+import { useState } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { FaRegEye, FaRegEyeSlash } from "react-icons/fa6";
+import { RxCross2 } from "react-icons/rx";
+
+// src/components/input.tsx
+import * as React7 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Input = React7.forwardRef(({ className, type, ...props }, ref) => {
+  return /* @__PURE__ */ jsx10(
+    "input",
+    {
+      className: cn(
+        inputBase,
+        inputFocus,
+        "file:border-0 file:bg-transparent file:text-base file:font-medium",
+        className
+      ),
+      onKeyDown: (e) => {
+        const key = e.key;
+        const allowedKeys = ["Backspace", "Tab", "Enter", "Escape", "ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"];
+        if (allowedKeys.includes(key)) {
+          return;
+        }
+        if (!(key >= "0" && key <= "9") && type === "number") {
+          e.preventDefault();
+        }
+        if (type === "onlyText") {
+          const regex = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ ]*$/;
+          if (!regex.test(key)) {
+            e.preventDefault();
+          }
+        }
+      },
+      ref,
+      type,
+      ...props
+    }
+  );
+});
+Input.displayName = "Input";
+
+// src/components/form-fields/label-field.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var LabelField = ({ label, labelClassName, name, visualRequired }) => {
+  return /* @__PURE__ */ jsxs8(
+    Label,
+    {
+      className: cn("text-body mb-2 text-start text-sm leading-none font-normal tracking-normal", labelClassName),
+      htmlFor: name,
+      children: [
+        /* @__PURE__ */ jsx11("span", { children: label }),
+        " ",
+        visualRequired && /* @__PURE__ */ jsx11("span", { className: "text-destructive", children: " *" })
+      ]
+    }
+  );
+};
+
+// src/components/form-fields/input-field.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var InputField = ({
+  control,
+  disabled,
+  inputClassName,
+  isClearable,
+  label,
+  labelClassName,
+  mainClassName,
+  name,
+  onClear,
+  placeholder,
+  type = "text",
+  visualRequired
+}) => {
+  const { t } = useTranslation3("ui");
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible((prev) => !prev);
+  };
+  const isPassword = type === "password";
+  const inputType = isPassword ? isPasswordVisible ? "text" : "password" : type === "plate" ? "text" : type;
+  const isPlate = type === "plate";
+  return /* @__PURE__ */ jsx12(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => {
+        const hasError = !!fieldState.error;
+        return /* @__PURE__ */ jsxs9(FormItem, { className: cn("flex flex-col", mainClassName), children: [
+          /* @__PURE__ */ jsx12(
+            LabelField,
+            {
+              label,
+              labelClassName: cn(labelClassName, hasError && "text-destructive"),
+              name,
+              visualRequired
+            }
+          ),
+          /* @__PURE__ */ jsx12(FormControl, { children: /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx12(
+              Input,
+              {
+                ...field,
+                autoComplete: isPassword ? "current-password" : void 0,
+                className: cn(
+                  inputClassName,
+                  isPlate && "uppercase",
+                  hasError && "border-destructive",
+                  isPassword && "pr-10 [&::-ms-reveal]:hidden"
+                ),
+                "data-no-password-toggle": true,
+                disabled,
+                maxLength: isPlate ? 6 : void 0,
+                min: type === "number" ? 0 : void 0,
+                onChange: (e) => {
+                  let value = e.target.value;
+                  if (isPlate) {
+                    value = value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 6);
+                  }
+                  field.onChange(value);
+                },
+                placeholder,
+                type: inputType,
+                value: field.value ?? ""
+              }
+            ),
+            /* @__PURE__ */ jsxs9("div", { className: "absolute inset-y-0 right-0 flex items-center space-x-2 pr-2", children: [
+              field.value && isClearable && /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  className: "focus:outline-none",
+                  onClick: onClear,
+                  title: t("inputField.clear"),
+                  type: "button",
+                  children: /* @__PURE__ */ jsx12(RxCross2, { size: 18 })
+                }
+              ),
+              type === "password" && /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  className: "focus:outline-none",
+                  onClick: togglePasswordVisibility,
+                  title: isPasswordVisible ? t("inputField.hidePassword") : t("inputField.showPassword"),
+                  type: "button",
+                  children: isPasswordVisible ? /* @__PURE__ */ jsx12(FaRegEye, { size: 18 }) : /* @__PURE__ */ jsx12(FaRegEyeSlash, { size: 20 })
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx12(FormMessage, {})
+        ] });
+      }
+    }
+  );
+};
+
+// src/components/google-map-picker.tsx
+import { AdvancedMarker, APIProvider, Map as Map2, useMap, useMapsLibrary } from "@vis.gl/react-google-maps";
+import { useCallback, useEffect, useMemo, useRef, useState as useState2 } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var DEFAULT_CENTER = { lat: 4.711, lng: -74.0721 };
+var PICKER_MAP_ID = "komensal-restaurant-map";
+var SELECTED_ZOOM = 15;
+var DEBOUNCE_MS = 300;
+var CITY_ZOOM = 12;
+var MapPickerContent = ({
+  centerOn,
+  disabled,
+  hasError,
+  locationQuery,
+  locationZoom,
+  onChange,
+  placeholder,
+  value
+}) => {
+  const placesLib = useMapsLibrary("places");
+  const geocodingLib = useMapsLibrary("geocoding");
+  const map = useMap(PICKER_MAP_ID);
+  const onChangeRef = useRef(onChange);
+  const geocoder = useMemo(
+    () => geocodingLib ? new geocodingLib.Geocoder() : null,
+    [geocodingLib]
+  );
+  const debounceRef = useRef(null);
+  const [inputValue, setInputValue] = useState2(value);
+  const [suggestions, setSuggestions] = useState2([]);
+  const [showDropdown, setShowDropdown] = useState2(false);
+  const [sessionToken, setSessionToken] = useState2();
+  const [position, setPosition] = useState2(null);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  });
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+  useEffect(() => {
+    if (map && centerOn) {
+      map.panTo(centerOn);
+      map.setZoom(CITY_ZOOM);
+    }
+  }, [map, centerOn]);
+  useEffect(() => {
+    if (map && position) {
+      map.panTo(position);
+      map.setZoom(SELECTED_ZOOM);
+    }
+  }, [map, position]);
+  useEffect(() => {
+    if (!placesLib) return;
+    setSessionToken(new placesLib.AutocompleteSessionToken());
+  }, [placesLib]);
+  useEffect(() => {
+    if (!geocoder || !locationQuery || !map) return;
+    const g = geocoder;
+    const ctrl = { cancelled: false };
+    void (async () => {
+      try {
+        const { results } = await g.geocode({ address: locationQuery });
+        if (ctrl.cancelled || results.length === 0) return;
+        const loc = results[0].geometry.location;
+        map.panTo({ lat: loc.lat(), lng: loc.lng() });
+        map.setZoom(locationZoom ?? CITY_ZOOM);
+      } catch {
+        return;
+      }
+    })();
+    return () => {
+      ctrl.cancelled = true;
+    };
+  }, [geocoder, locationQuery, locationZoom, map]);
+  const fetchSuggestions = useCallback(
+    async (input) => {
+      if (!placesLib || input.length < 2) {
+        setSuggestions([]);
+        return;
+      }
+      try {
+        const result = await placesLib.AutocompleteSuggestion.fetchAutocompleteSuggestions({
+          input,
+          sessionToken
+        });
+        setSuggestions(result.suggestions);
+        setShowDropdown(true);
+      } catch {
+        setSuggestions([]);
+      }
+    },
+    [placesLib, sessionToken]
+  );
+  const reverseGeocode = useCallback(
+    async (latLng) => {
+      if (!geocoder) return;
+      try {
+        const { results } = await geocoder.geocode({ location: latLng });
+        if (results.length > 0) {
+          const address = results[0].formatted_address;
+          setInputValue(address);
+          onChangeRef.current(address);
+        }
+      } catch {
+        return;
+      }
+    },
+    [geocoder]
+  );
+  const handleInputChange = (e) => {
+    const val = e.target.value;
+    setInputValue(val);
+    onChangeRef.current(val);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => void fetchSuggestions(val), DEBOUNCE_MS);
+  };
+  const handleSelect = async (suggestion) => {
+    const prediction = suggestion.placePrediction;
+    if (!prediction) return;
+    const place = prediction.toPlace();
+    await place.fetchFields({ fields: ["formattedAddress", "location"] });
+    const address = place.formattedAddress ?? prediction.text.text;
+    setInputValue(address);
+    onChangeRef.current(address);
+    setSuggestions([]);
+    setShowDropdown(false);
+    if (place.location) {
+      setPosition({ lat: place.location.lat(), lng: place.location.lng() });
+    }
+    if (placesLib) setSessionToken(new placesLib.AutocompleteSessionToken());
+  };
+  const handleBlur = () => {
+    setTimeout(() => setShowDropdown(false), 150);
+  };
+  const handleMapClick = useCallback(
+    (e) => {
+      if (disabled || !e.detail.latLng) return;
+      const latLng = e.detail.latLng;
+      setPosition(latLng);
+      void reverseGeocode(latLng);
+    },
+    [disabled, reverseGeocode]
+  );
+  const handleMarkerDragEnd = useCallback(
+    (e) => {
+      const latLng = e.latLng;
+      if (!latLng) return;
+      const pos = { lat: latLng.lat(), lng: latLng.lng() };
+      setPosition(pos);
+      void reverseGeocode(pos);
+    },
+    [reverseGeocode]
+  );
+  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx13(
+        "input",
+        {
+          className: cn(inputBase, inputFocus, hasError && "border-destructive"),
+          disabled,
+          onBlur: handleBlur,
+          onChange: handleInputChange,
+          onFocus: () => suggestions.length > 0 && setShowDropdown(true),
+          placeholder,
+          type: "text",
+          value: inputValue
+        }
+      ),
+      showDropdown && suggestions.length > 0 && /* @__PURE__ */ jsx13("ul", { className: "border-border bg-surface absolute z-50 mt-1 w-full overflow-hidden rounded-[10px] border shadow-md", children: suggestions.map((suggestion) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(
+        "button",
+        {
+          className: "text-foreground hover:bg-hover w-full px-4 py-3 text-left text-sm transition-colors",
+          onClick: () => void handleSelect(suggestion),
+          type: "button",
+          children: suggestion.placePrediction?.text.text ?? ""
+        }
+      ) }, suggestion.placePrediction?.placeId ?? suggestion.placePrediction?.text.text)) })
+    ] }),
+    /* @__PURE__ */ jsx13("div", { className: "border-border h-59 overflow-hidden rounded-[10px] border md:h-87.5", children: /* @__PURE__ */ jsx13(
+      Map2,
+      {
+        defaultCenter: DEFAULT_CENTER,
+        defaultZoom: 5,
+        disableDefaultUI: true,
+        gestureHandling: "cooperative",
+        id: PICKER_MAP_ID,
+        mapId: import.meta.env.VITE_GOOGLE_MAPS_MAP_ID ?? "DEMO_MAP_ID",
+        onClick: handleMapClick,
+        style: { height: "100%", width: "100%" },
+        children: position && /* @__PURE__ */ jsx13(AdvancedMarker, { draggable: !disabled, onDragEnd: handleMarkerDragEnd, position })
+      }
+    ) })
+  ] });
+};
+var GoogleMapPicker = (props) => /* @__PURE__ */ jsx13(APIProvider, { apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? "", language: "es", region: "CO", children: /* @__PURE__ */ jsx13(MapPickerContent, { ...props }) });
+
+// src/components/form-fields/map-picker-field.tsx
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var MapPickerField = ({
+  control,
+  label,
+  labelClassName,
+  mainClassName,
+  name,
+  visualRequired,
+  ...pickerProps
+}) => /* @__PURE__ */ jsx14(
+  FormField,
+  {
+    control,
+    name,
+    render: ({ field, fieldState }) => /* @__PURE__ */ jsxs11(FormItem, { className: cn("flex flex-col", mainClassName), children: [
+      /* @__PURE__ */ jsx14(
+        LabelField,
+        {
+          label,
+          labelClassName: cn(labelClassName, fieldState.error && "text-destructive"),
+          name,
+          visualRequired
+        }
+      ),
+      /* @__PURE__ */ jsx14(FormControl, { children: /* @__PURE__ */ jsx14(
+        GoogleMapPicker,
+        {
+          ...pickerProps,
+          hasError: !!fieldState.error,
+          onChange: field.onChange,
+          value: field.value ?? ""
+        }
+      ) }),
+      /* @__PURE__ */ jsx14(FormMessage, {})
+    ] })
+  }
+);
+
+// src/components/otp-input.tsx
+import { OTPInput, OTPInputContext } from "input-otp";
+import React8 from "react";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx15(
+    OTPInput,
+    {
+      className: cn("disabled:cursor-not-allowed", className),
+      containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
+      "data-slot": "input-otp",
+      ...props
+    }
+  );
+}
+function InputOTPGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx15("div", { className: cn("flex items-center gap-2", className), "data-slot": "input-otp-group", ...props });
+}
+function InputOTPSlot({
+  className,
+  index,
+  ...props
+}) {
+  const inputOTPContext = React8.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: cn(
+        "border-border text-foreground relative flex h-14 w-12 items-center justify-center rounded-[10px] border text-xl font-medium transition-all outline-none",
+        char ? "bg-brand-subtle" : "bg-transparent",
+        "data-[active=true]:border-primary data-[active=true]:ring-ring data-[active=true]:z-10 data-[active=true]:ring-2",
+        "aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/40",
+        className
+      ),
+      "data-active": isActive,
+      "data-slot": "input-otp-slot",
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx15("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx15("div", { className: "animate-caret-blink bg-foreground h-6 w-px duration-1000" }) })
+      ]
+    }
+  );
+}
+
+// src/components/form-fields/otp-field.tsx
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function OTPField({
+  autoFocus,
+  className,
+  containerClassName,
+  control,
+  disabled,
+  label,
+  labelClassName,
+  name,
+  otpLength = 6
+}) {
+  return /* @__PURE__ */ jsx16(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ jsxs13(FormItem, { className: cn("flex flex-col", className), children: [
+        label ? /* @__PURE__ */ jsx16(Label, { className: cn("text-start text-sm font-semibold", labelClassName), htmlFor: name, children: label }) : null,
+        /* @__PURE__ */ jsx16(FormControl, { children: /* @__PURE__ */ jsx16(
+          InputOTP,
+          {
+            "aria-invalid": fieldState.invalid || void 0,
+            autoComplete: "one-time-code",
+            autoFocus,
+            containerClassName: cn("justify-center", containerClassName),
+            disabled,
+            id: name,
+            inputMode: "numeric",
+            maxLength: otpLength,
+            onChange: (val) => field.onChange(val),
+            onPaste: (e) => field.onChange(e.clipboardData.getData("text")),
+            pattern: "[0-9]*",
+            value: field.value ?? "",
+            children: /* @__PURE__ */ jsx16(InputOTPGroup, { children: Array.from({ length: otpLength }).map((_, i) => /* @__PURE__ */ jsx16(InputOTPSlot, { "aria-invalid": fieldState.invalid || void 0, index: i }, i)) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx16(FormMessage, {})
+      ] })
+    }
+  );
+}
+
+// src/components/select-input.tsx
+import { ChevronDown, ChevronUp, Clock, XIcon } from "lucide-react";
+import { cloneElement, useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import { useTranslation as useTranslation4 } from "react-i18next";
+
+// src/components/popover.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React9 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React9.forwardRef(({ align = "center", className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+  PopoverPrimitive.Content,
+  {
+    align,
+    className: cn(
+      "text-foreground bg-surface 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+      className
+    ),
+    ref,
+    sideOffset,
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/select-input.tsx
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var SelectInput = (props) => {
+  const { t } = useTranslation4("ui");
+  const {
+    ableDeleteOption,
+    className,
+    disabled = false,
+    error,
+    items,
+    labelKey = "label",
+    leftIcon,
+    loading = false,
+    onBlur,
+    onChange,
+    onValueChangeCallBack = () => void 0,
+    placeholder,
+    placeholderClassName = "",
+    search = false,
+    timeField = false,
+    value = "",
+    valueKey = "value"
+  } = props;
+  const resolvedPlaceholder = placeholder ?? t("selectInput.placeholder");
+  const divRef = useRef2(null);
+  const [open, setOpen] = useState3(false);
+  const [width, setWidth] = useState3(0);
+  const [query, setQuery] = useState3("");
+  const [valueItem, setValueItem] = useState3(value);
+  const normalizeString = (str) => str.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+  const normalizedItems = useMemo2(() => {
+    if (!items) return [];
+    return items.map((it) => ({
+      ...it,
+      [labelKey]: String(it[labelKey]),
+      [valueKey]: String(it[valueKey])
+    }));
+  }, [items, labelKey, valueKey]);
+  const filteredOptions = useMemo2(() => {
+    if (!query) return normalizedItems;
+    return normalizedItems.filter(
+      (el) => normalizeString(el[labelKey]).includes(normalizeString(query))
+    );
+  }, [normalizedItems, labelKey, query]);
+  const onValueChange = useCallback2(
+    (val) => {
+      if (!normalizedItems.length) return;
+      const item = normalizedItems.find((i) => i[valueKey] === val);
+      if (item) {
+        onValueChangeCallBack({
+          label: item[labelKey],
+          value: item[valueKey]
+        });
+        setValueItem(val);
+      }
+    },
+    [normalizedItems, labelKey, valueKey, onValueChangeCallBack]
+  );
+  const buttonClassName = useMemo2(
+    () => cn(
+      inputBase,
+      inputFocus,
+      "hover:bg-surface",
+      disabled && inputDisabled,
+      error && "border-destructive",
+      className
+    ),
+    [disabled, error, className]
+  );
+  const updateWidth = () => {
+    if (divRef.current) {
+      const { width: width2 } = divRef.current.getBoundingClientRect();
+      setWidth(width2);
+    }
+  };
+  useEffect2(() => {
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+  useEffect2(() => {
+    setValueItem(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx18("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx18("div", { className: "relative flex flex-col justify-center", children: /* @__PURE__ */ jsxs14(Popover, { onOpenChange: setOpen, open, children: [
+    /* @__PURE__ */ jsx18(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(
+      Button,
+      {
+        "aria-expanded": open,
+        className: buttonClassName,
+        disabled,
+        isLoading: loading,
+        onBlur,
+        ref: divRef,
+        role: "combobox",
+        variant: "primary",
+        children: loading ? /* @__PURE__ */ jsxs14(Fragment3, { children: [
+          t("selectInput.loading"),
+          " ",
+          /* @__PURE__ */ jsx18(Spinner, {})
+        ] }) : /* @__PURE__ */ jsxs14("div", { className: "relative flex h-5 w-full items-center", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex w-full max-w-[90%] items-center truncate", children: [
+            leftIcon && /* @__PURE__ */ jsx18("span", { className: "mr-2 shrink-0", children: cloneElement(leftIcon, { size: 20, strokeWidth: 1 }) }),
+            valueItem ? filteredOptions.find((i) => i[valueKey] === valueItem)?.[labelKey] : /* @__PURE__ */ jsx18("span", { className: cn(inputPlaceholder, placeholderClassName), children: resolvedPlaceholder })
+          ] }),
+          timeField ? /* @__PURE__ */ jsx18("div", { className: "absolute top-0.5 right-0", children: /* @__PURE__ */ jsx18(Clock, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }) }) : /* @__PURE__ */ jsxs14("div", { className: "absolute top-0.5 right-0 flex gap-2", children: [
+            ableDeleteOption && /* @__PURE__ */ jsx18(
+              XIcon,
+              {
+                className: "z-100 h-4 w-4 shrink-0 opacity-50",
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onChange?.("");
+                  onValueChange("");
+                  setValueItem("");
+                  setQuery("");
+                  setOpen(false);
+                }
+              }
+            ),
+            !open ? /* @__PURE__ */ jsx18(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" }) : /* @__PURE__ */ jsx18(ChevronUp, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+          ] })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx18(
+      PopoverContent,
+      {
+        className: "bg-surface border-border z-100 rounded-sm p-1",
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        style: { maxWidth: "auto", minWidth: `${width}px`, width: `${width}px` },
+        children: /* @__PURE__ */ jsxs14(Command, { className: "flex w-full flex-col gap-2", children: [
+          search && /* @__PURE__ */ jsx18(
+            Input,
+            {
+              className: "mb-1 rounded-sm",
+              onChange: (e) => setQuery(e.target.value),
+              placeholder: t("selectInput.search"),
+              value: query
+            }
+          ),
+          /* @__PURE__ */ jsx18(CommandEmpty, { className: "text-center", children: t("selectInput.noResults") }),
+          /* @__PURE__ */ jsx18(CommandList, { children: /* @__PURE__ */ jsx18(CommandGroup, { className: "p-0", children: filteredOptions.map((item) => {
+            const labelValue = item[labelKey];
+            const valueValue = item[valueKey];
+            return /* @__PURE__ */ jsx18(
+              CommandItem,
+              {
+                className: cn(
+                  "hover:bg-hover mt-0.5 mb-0.5 flex cursor-pointer items-center gap-2 rounded-sm py-2 pl-3",
+                  valueValue === value && "bg-inactive"
+                ),
+                onSelect: (currentValue) => {
+                  onChange?.(currentValue);
+                  onValueChange(currentValue);
+                  setOpen(false);
+                  setTimeout(() => setQuery(""), 100);
+                },
+                value: valueValue,
+                children: labelValue.trim()
+              },
+              valueValue
+            );
+          }) }) })
+        ] })
+      }
+    )
+  ] }) }) });
+};
+
+// src/components/form-fields/select-field.tsx
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var SelectField = ({
+  ableDeleteOption,
+  className,
+  control,
+  disabled,
+  label,
+  labelClassName,
+  mainClassName,
+  name,
+  options,
+  placeholder,
+  search,
+  visualRequired
+}) => {
+  return /* @__PURE__ */ jsx19(
+    FormField,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => {
+        const hasError = !!fieldState.error;
+        return /* @__PURE__ */ jsxs15(FormItem, { className: cn("flex flex-col", mainClassName), children: [
+          /* @__PURE__ */ jsx19(
+            LabelField,
+            {
+              label,
+              labelClassName: cn(labelClassName, hasError && "text-destructive"),
+              name,
+              visualRequired
+            }
+          ),
+          /* @__PURE__ */ jsx19(FormControl, { children: /* @__PURE__ */ jsx19(
+            SelectInput,
+            {
+              ableDeleteOption,
+              className,
+              disabled,
+              error: fieldState.error,
+              items: options,
+              onChange: field.onChange,
+              placeholder,
+              search,
+              value: typeof field.value === "number" ? `${field.value}` : field.value
+            }
+          ) }),
+          /* @__PURE__ */ jsx19(FormMessage, {})
+        ] });
+      }
+    }
+  );
+};
+
+// src/components/loading.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function Loading({ className = "", isSpinner = true }) {
+  return /* @__PURE__ */ jsx20("div", { className: cn("relative flex min-h-screen items-center justify-center gap-6", className), children: isSpinner && /* @__PURE__ */ jsx20("div", { className: "absolute right-0 bottom-0 m-10", children: /* @__PURE__ */ jsx20(Spinner, {}) }) });
+}
+
+// src/components/password-checklist.tsx
+import { IoMdCheckmarkCircle, IoMdCloseCircle } from "react-icons/io";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var PasswordChecklist = ({ className, rules, value }) => {
+  if (rules.length === 0) return null;
+  return /* @__PURE__ */ jsx21("ul", { className: cn("flex flex-col gap-1", className), children: rules.map((rule) => {
+    const isMet = rule.test(value);
+    const Icon2 = isMet ? IoMdCheckmarkCircle : IoMdCloseCircle;
+    return /* @__PURE__ */ jsxs16(
+      "li",
+      {
+        className: cn(
+          "flex items-center gap-2 text-xs transition-colors",
+          isMet ? "text-success" : "text-inactive-text"
+        ),
+        children: [
+          /* @__PURE__ */ jsx21(Icon2, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx21("span", { children: rule.label })
+        ]
+      },
+      rule.key
+    );
+  }) });
+};
+
+// src/components/select.tsx
+import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React11 from "react";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs17(
+  SelectPrimitive.Trigger,
+  {
+    className: cn(
+      "placeholder:text-placeholder border-border ring-offset-surface focus:ring-ring flex h-9 w-full items-center justify-between rounded-xl border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm focus:ring-0 focus:outline-none disabled:cursor-not-allowed [&>span]:line-clamp-1",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx22(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx22(CaretSortIcon, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+  SelectPrimitive.ScrollUpButton,
+  {
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx22(ChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+  SelectPrimitive.ScrollDownButton,
+  {
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx22(ChevronDownIcon, {})
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React11.forwardRef(({ children, className, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx22(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs17(
+  SelectPrimitive.Content,
+  {
+    className: cn(
+      "border-border text-foreground bg-surface 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-lg border shadow-md",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx22(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx22(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx22(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(SelectPrimitive.Label, { className: cn("px-2 py-1.5 text-sm font-semibold", className), ref, ...props }));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React11.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs17(
+  SelectPrimitive.Item,
+  {
+    className: cn(
+      "focus:text-foreground focus:bg-hover relative flex w-full cursor-default items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx22("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx22(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx22(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx22(SelectPrimitive.ItemText, { children: /* @__PURE__ */ jsx22("span", { children }) })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(SelectPrimitive.Separator, { className: cn("bg-border -mx-1 my-1 h-px", className), ref, ...props }));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/components/step-header.tsx
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+var StepHeader = ({ subtitle, subtitleClassName, title }) => /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-1", children: [
+  /* @__PURE__ */ jsx23("h1", { className: "text-title text-2xl font-bold", children: title }),
+  subtitle !== void 0 && /* @__PURE__ */ jsx23("p", { className: cn("text-subtitle text-sm", subtitleClassName), children: subtitle })
+] });
+
+// src/components/stepper.tsx
+import { CheckIcon as CheckIcon2 } from "lucide-react";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+var Stepper = ({ activeIndex, className, intermediate = false, steps }) => {
+  return /* @__PURE__ */ jsx24("div", { className: cn("flex w-full items-start", className), children: steps.map((step, index) => {
+    const isCompleted = intermediate ? index <= activeIndex : index < activeIndex;
+    const isActive = !intermediate && index === activeIndex;
+    return /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 flex-col items-center", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "flex w-full items-center", children: [
+        /* @__PURE__ */ jsx24(
+          "div",
+          {
+            className: cn(
+              "h-0.75 flex-1 self-center",
+              isCompleted || isActive ? "bg-primary" : "bg-inactive",
+              index === 0 && "rounded-l-full"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx24(
+          "div",
+          {
+            "aria-current": isActive ? "step" : void 0,
+            className: cn(
+              "flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-full border text-xs font-semibold transition-colors md:h-6.5 md:w-6.5",
+              isCompleted && "bg-primary border-primary text-inverse",
+              isActive && "bg-primary border-primary text-inverse",
+              !isCompleted && !isActive && "bg-inactive border-inactive text-surface"
+            ),
+            children: isCompleted ? /* @__PURE__ */ jsx24(CheckIcon2, { className: "h-4 w-4" }) : index + 1
+          }
+        ),
+        /* @__PURE__ */ jsx24(
+          "div",
+          {
+            className: cn(
+              "relative h-0.75 flex-1 self-center",
+              isCompleted ? "bg-primary" : "bg-inactive",
+              index === steps.length - 1 && "rounded-r-full"
+            ),
+            children: index === 0 && /* @__PURE__ */ jsx24(
+              "div",
+              {
+                className: cn(
+                  "absolute top-1/2 right-0 h-2.25 w-2.25 translate-x-1/2 -translate-y-1/2 rounded-full transition-colors",
+                  isCompleted ? "bg-primary" : "bg-inactive"
+                )
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx24("span", { className: cn("mt-1 text-xs font-normal", isCompleted || isActive ? "text-primary" : "text-muted"), children: step.label })
+    ] }, step.label);
+  }) });
+};
+
+// src/components/toast/toast.tsx
+import { AlertTriangle, Check, X } from "lucide-react";
+import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
+import { IoDocumentLockOutline, IoInformationCircle } from "react-icons/io5";
+import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+var EXIT_ANIMATION_MS = 200;
+function Toast({ duration = 2500, id, onClose, subtitle, title, type }) {
+  const [leaving, setLeaving] = useState4(false);
+  const startedAtRef = useRef3(Date.now());
+  const timeoutRef = useRef3(null);
+  const exitRef = useRef3(null);
+  const Icon2 = useMemo3(() => {
+    if (type === "success") return Check;
+    if (type === "error") return X;
+    if (type === "warning") return AlertTriangle;
+    if (type === "info") return IoInformationCircle;
+    return IoDocumentLockOutline;
+  }, [type]);
+  const styles = useMemo3(() => {
+    if (type === "success") {
+      return { border: "border-success", icon: "text-success", iconBorder: "border-success" };
+    }
+    if (type === "error") {
+      return { border: "border-destructive", icon: "text-destructive", iconBorder: "border-destructive" };
+    }
+    if (type === "warning") {
+      return { border: "border-warning", icon: "text-warning", iconBorder: "border-warning" };
+    }
+    if (type === "info") {
+      return { border: "border-info", icon: "text-info", iconBorder: "border-info" };
+    }
+    return { border: "border-wait", icon: "text-wait", iconBorder: "border-wait" };
+  }, [type]);
+  useEffect3(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    if (exitRef.current) clearTimeout(exitRef.current);
+    const elapsed = Date.now() - startedAtRef.current;
+    const remaining = Math.max(0, duration - elapsed);
+    timeoutRef.current = setTimeout(() => {
+      setLeaving(true);
+      exitRef.current = setTimeout(() => onClose(id), EXIT_ANIMATION_MS);
+    }, remaining);
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (exitRef.current) clearTimeout(exitRef.current);
+    };
+  }, [id, duration, onClose]);
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      "aria-live": "polite",
+      className: [
+        "relative",
+        leaving ? "absolute top-0 right-0 left-0" : "",
+        "flex w-108.5 max-w-[calc(100vw-2rem)] items-center justify-between",
+        "min-h-16",
+        "bg-surface rounded-[10px] border-2",
+        "px-5 py-4.5",
+        "shadow-[0_4px_20px_rgba(0,0,0,0.05)]",
+        "transition-all duration-200 ease-out",
+        styles.border,
+        leaving ? "translate-y-2 opacity-0" : "translate-y-0 opacity-100"
+      ].join(" "),
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsx25("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ jsx25("h4", { className: ["text-[16px] leading-normal font-semibold", "text-foreground", "line-clamp-2"].join(" "), children: title }) }),
+        subtitle ? /* @__PURE__ */ jsx25("div", { className: "shrink-0 pr-4 text-left", children: /* @__PURE__ */ jsx25("div", { className: ["max-w-28 text-[14px] leading-[19.5px] font-normal", "text-body"].join(" "), children: subtitle }) }) : null,
+        /* @__PURE__ */ jsx25(
+          "div",
+          {
+            className: [
+              "shrink-0",
+              "flex h-8 w-8 min-w-8 items-center justify-center rounded-full border-2",
+              styles.iconBorder
+            ].join(" "),
+            children: /* @__PURE__ */ jsx25(Icon2, { className: ["h-5 w-5", styles.icon].join(" ") })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/toast/toast-provider.tsx
+import { useCallback as useCallback3, useEffect as useEffect4, useLayoutEffect, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx26 } from "react/jsx-runtime";
+function ToastProvider() {
+  const [toasts, setToasts] = useState5([]);
+  const itemRefs = useRef4(/* @__PURE__ */ new Map());
+  const prevRects = useRef4(/* @__PURE__ */ new Map());
+  const showToast = useCallback3((type, options) => {
+    setToasts((prev) => [
+      ...prev,
+      {
+        duration: 2500,
+        id: crypto.randomUUID(),
+        position: "top-right",
+        type,
+        ...options
+      }
+    ]);
+  }, []);
+  const removeToast = useCallback3((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  useEffect4(() => {
+    registerToastEmitter(showToast);
+    return () => registerToastEmitter(null);
+  }, [showToast]);
+  const grouped = useMemo4(() => {
+    return toasts.reduce((acc, toast2) => {
+      const pos = toast2.position ?? "top";
+      acc[pos] = [...acc[pos] ?? [], toast2];
+      return acc;
+    }, {});
+  }, [toasts]);
+  useLayoutEffect(() => {
+    const newRects = /* @__PURE__ */ new Map();
+    itemRefs.current.forEach((el, id) => {
+      newRects.set(id, el.getBoundingClientRect());
+    });
+    newRects.forEach((newRect, id) => {
+      const prevRect = prevRects.current.get(id);
+      const el = itemRefs.current.get(id);
+      if (!el || !prevRect) return;
+      const dy = prevRect.top - newRect.top;
+      if (dy === 0) return;
+      el.style.transform = `translateY(${dy}px)`;
+      el.style.transition = "transform 0s";
+      requestAnimationFrame(() => {
+        el.style.transition = "transform 200ms ease-out";
+        el.style.transform = "";
+      });
+    });
+    prevRects.current = newRects;
+  }, [toasts]);
+  const setItemRef = useCallback3((id) => {
+    return (el) => {
+      if (!el) {
+        itemRefs.current.delete(id);
+        prevRects.current.delete(id);
+        return;
+      }
+      itemRefs.current.set(id, el);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx26(Fragment4, { children: Object.entries(grouped).map(([position, list]) => /* @__PURE__ */ jsx26("div", { className: `fixed z-4000 ${getPositionClass(position)}`, children: /* @__PURE__ */ jsx26("div", { className: "relative flex flex-col gap-3", children: list.map((toast2) => /* @__PURE__ */ jsx26("div", { ref: setItemRef(toast2.id), children: /* @__PURE__ */ jsx26(
+    Toast,
+    {
+      duration: toast2.duration,
+      id: toast2.id,
+      onClose: removeToast,
+      subtitle: toast2.subtitle,
+      title: toast2.title,
+      type: toast2.type
+    }
+  ) }, toast2.id)) }) }, position)) });
+}
+function getPositionClass(position) {
+  const map = {
+    bottom: "bottom-6 left-1/2 -translate-x-1/2",
+    "bottom-left": "bottom-6 left-6",
+    "bottom-right": "bottom-6 right-6",
+    center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+    "middle-bottom": "bottom-20 left-1/2 -translate-x-1/2",
+    "middle-top": "top-20 left-1/2 -translate-x-1/2",
+    top: "top-6 left-1/2 -translate-x-1/2",
+    "top-left": "top-6 left-6",
+    "top-right": "top-6 right-6"
+  };
+  return map[position];
+}
+
+// src/components/wrapper.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var Wrapper = ({ children, className }) => {
+  return /* @__PURE__ */ jsx27("div", { className: cn("mx-auto h-full w-full", className), children });
+};
+export {
+  Alert,
+  AuthHeader,
+  Button,
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  GoogleMapPicker,
+  Input,
+  InputField,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  Label,
+  LabelField,
+  Loading,
+  MapPickerField,
+  OTPField,
+  PasswordChecklist,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  Select,
+  SelectContent,
+  SelectField,
+  SelectGroup,
+  SelectInput,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Spinner,
+  StepHeader,
+  Stepper,
+  Toast,
+  ToastProvider,
+  Tooltip,
+  Wrapper,
+  buttonVariants,
+  cn,
+  inputBase,
+  inputDisabled,
+  inputFocus,
+  inputPlaceholder,
+  registerToastEmitter,
+  toast,
+  useFormField
+};
+//# sourceMappingURL=index.js.map