@neoptocom/neopto-ui 0.2.1

package/dist/index.js

@@ -0,0 +1,805 @@
+import * as React2 from 'react';
+import { useState, useMemo, useId, useRef, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import { tv } from 'tailwind-variants';
+
+// src/components/Input.tsx
+var Input = React2.forwardRef(
+  ({ className, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        disabled,
+        className: [
+          "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
+          "text-sm placeholder:text-[var(--muted-fg)]",
+          disabled ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed" : [
+            "text-[var(--muted-fg)]",
+            "border-[var(--muted-fg)]",
+            "hover:border-[var(--border)]",
+            "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
+          ].join(" "),
+          className
+        ].join(" "),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+function useIsomorphicLayoutEffect(effect, deps) {
+  const useEffectHook = typeof window !== "undefined" ? React2.useLayoutEffect : React2.useEffect;
+  useEffectHook(effect, deps);
+}
+function Modal({
+  open,
+  onClose,
+  title,
+  closeOnOverlay = true,
+  children
+}) {
+  const [mounted, setMounted] = React2.useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setMounted(true);
+    if (!open) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [open]);
+  React2.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!mounted) return null;
+  if (!open) return null;
+  const overlay = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center",
+      "aria-labelledby": "modal-title",
+      role: "dialog",
+      "aria-modal": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 bg-black/50",
+            onClick: () => closeOnOverlay && onClose?.()
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-lg rounded-[var(--radius-lg)] bg-[var(--surface)] text-[var(--fg)] p-6 shadow-xl", children: [
+          title ? /* @__PURE__ */ jsx("h2", { id: "modal-title", className: "mb-2 text-lg font-semibold", children: title }) : null,
+          /* @__PURE__ */ jsx("div", { children }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end gap-2", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClose,
+              className: "btn btn-outline",
+              type: "button",
+              children: "Close"
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+  const container = document.body;
+  return createPortal(overlay, container);
+}
+var styles = tv({
+  base: "text-[var(--fg)] -webkit-font-smoothing antialiased -moz-osx-font-smoothing grayscale",
+  variants: {
+    variant: {
+      "display-lg": "text-5xl leading-tight",
+      "display-md": "text-4xl leading-tight",
+      "display-sm": "text-4xl leading-tight",
+      "headline-lg": "text-3xl leading-tight",
+      "headline-md": "text-3xl leading-tight",
+      "headline-sm": "text-3xl leading-tight",
+      "title-lg": "text-xl leading-tight",
+      "title-md": "text-lg leading-tight",
+      "title-sm": "text-base leading-tight",
+      "label-lg": "text-sm leading-tight",
+      "label-md": "text-xs leading-tight",
+      "label-sm": "text-xs leading-tight",
+      "body-lg": "text-base leading-relaxed",
+      "body-md": "text-sm leading-relaxed",
+      "body-sm": "text-xs leading-relaxed",
+      "button": "text-base leading-normal"
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    },
+    muted: {
+      true: "text-[var(--muted-fg)]"
+    }
+  },
+  defaultVariants: {
+    weight: "normal"
+  }
+});
+function Typo({
+  variant,
+  bold,
+  muted,
+  as,
+  className,
+  children,
+  ...props
+}) {
+  const Component = as ?? "span";
+  const getFontFamily = (variant2) => {
+    if (variant2.startsWith("body")) {
+      return "var(--font-body)";
+    }
+    return "var(--font-display)";
+  };
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: styles({ variant, weight: bold, muted, className }),
+      style: { fontFamily: getFontFamily(variant) },
+      ...props,
+      children
+    }
+  );
+}
+var avatarStyles = tv({
+  base: "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none",
+  variants: {
+    size: {
+      sm: "w-[28px] h-[28px]",
+      md: "w-[60px] h-[60px]"
+    }
+  },
+  defaultVariants: { size: "sm" }
+});
+function getInitials(name) {
+  if (!name) return "\u2026";
+  const words = name.trim().split(/\s+/);
+  if (words.length === 1) return (words[0][0] ?? "").toUpperCase();
+  return ((words[0][0] ?? "") + (words[words.length - 1][0] ?? "")).toUpperCase();
+}
+function Avatar({
+  name,
+  src,
+  color,
+  size,
+  alt,
+  className,
+  style,
+  ...props
+}) {
+  const [imgError, setImgError] = useState(false);
+  const initials = useMemo(() => getInitials(name), [name]);
+  const computedStyle = useMemo(() => {
+    const s = { ...style };
+    if (color) s.backgroundColor = color;
+    return s;
+  }, [color, style]);
+  const textVariant = size === "sm" ? "label-md" : "headline-md";
+  const showImage = !!src && !imgError;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: avatarStyles({ size, className }),
+      "aria-label": alt ?? name,
+      role: "img",
+      ...props,
+      style: computedStyle,
+      children: showImage ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt ?? name,
+          className: "absolute inset-0 h-full w-full object-cover rounded-full",
+          onError: () => setImgError(true),
+          draggable: false
+        }
+      ) : /* @__PURE__ */ jsx(Typo, { variant: textVariant, bold: "medium", className: "pointer-events-none", children: initials })
+    }
+  );
+}
+function AvatarGroup({
+  children,
+  className = "",
+  max = 5,
+  overlapPx = 8,
+  withRings = true
+}) {
+  const avatars = React2.Children.toArray(children);
+  const displayAvatars = typeof max === "number" ? avatars.slice(0, max) : avatars;
+  const extraCount = typeof max === "number" && avatars.length > max ? avatars.length - max : 0;
+  return /* @__PURE__ */ jsxs("div", { className: ["flex items-center", className].filter(Boolean).join(" "), children: [
+    displayAvatars.map((child, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [
+          "relative",
+          i > 0 ? "" : "ml-0"
+        ].join(" "),
+        style: {
+          marginLeft: i === 0 ? 0 : -overlapPx,
+          zIndex: 100 + i
+        },
+        children: /* @__PURE__ */ jsx("div", { className: withRings ? "ring-2 ring-[var(--surface)] rounded-full" : "", children: child })
+      },
+      i
+    )),
+    extraCount > 0 && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: "ml-2 inline-flex h-7 w-7 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] text-xs",
+        "aria-label": `${extraCount} more`,
+        title: `${extraCount} more`,
+        children: [
+          "+",
+          extraCount
+        ]
+      }
+    )
+  ] });
+}
+var roundMap = {
+  none: "rounded-none",
+  sm: "rounded-[var(--radius-sm)]",
+  md: "rounded-[var(--radius-md)]",
+  lg: "rounded-[var(--radius-lg)]",
+  xl: "rounded-[var(--radius-xl)]",
+  full: "rounded-full"
+};
+function Skeleton({ className = "", rounded = "md", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: [
+        "animate-pulse bg-[var(--muted)]",
+        roundMap[rounded],
+        className
+      ].join(" "),
+      ...props
+    }
+  );
+}
+var sizeMap = {
+  sm: 16,
+  md: 24,
+  lg: 36
+};
+function Icon({
+  name,
+  className = "",
+  title,
+  size = "md",
+  fill = 0
+}) {
+  const fontSize = sizeMap[size] ?? sizeMap.md;
+  const hasColorClass = /\b(?:text-|fill-|stroke-)\S+/.test(className);
+  const style = {
+    fontVariationSettings: `'FILL' ${fill}, 'wght' 300, 'GRAD' 0, 'opsz' ${fontSize}`,
+    fontSize,
+    lineHeight: 1,
+    display: "inline-block",
+    verticalAlign: "middle",
+    ...hasColorClass ? {} : { color: "inherit" }
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `material-symbols-rounded rounded ${className}`,
+      style,
+      "aria-hidden": title ? void 0 : true,
+      title,
+      children: name
+    }
+  );
+}
+function Autocomplete({
+  className = "",
+  title,
+  options,
+  selectedOption,
+  onSelect,
+  placeholder = "",
+  disabled = false,
+  maxHeight = 152,
+  id,
+  ...props
+}) {
+  const inputId = id ?? useId();
+  const listboxId = `${inputId}-listbox`;
+  const [searchQuery, setSearchQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const rootRef = useRef(null);
+  const listRef = useRef(null);
+  const normalizedOptions = useMemo(() => {
+    if (Array.isArray(options) && typeof options[0] === "string") {
+      return options.map((str) => ({ label: str, value: str }));
+    }
+    return options;
+  }, [options]);
+  const filtered = useMemo(() => {
+    const q = searchQuery.trim().toLowerCase();
+    if (!q) return normalizedOptions;
+    return normalizedOptions.filter((o) => o.label.toLowerCase().includes(q));
+  }, [normalizedOptions, searchQuery]);
+  const anyOptionHasImage = useMemo(
+    () => normalizedOptions.some((o) => !!o.image),
+    [normalizedOptions]
+  );
+  const displayValue = selectedOption != null ? typeof selectedOption === "string" ? selectedOption : selectedOption.label : searchQuery;
+  function openList() {
+    if (disabled) return;
+    setOpen(true);
+  }
+  function closeList() {
+    setOpen(false);
+    setActiveIndex(-1);
+  }
+  function handleSelect(option) {
+    onSelect(option);
+    setSearchQuery("");
+    closeList();
+  }
+  function handleClear() {
+    onSelect(null);
+    setSearchQuery("");
+    closeList();
+  }
+  function onKeyDown(e) {
+    if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      setOpen(true);
+      setActiveIndex(0);
+      e.preventDefault();
+      return;
+    }
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+      scrollActiveIntoView();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+      scrollActiveIntoView();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const item = filtered[activeIndex];
+      if (item) handleSelect(item);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      closeList();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActiveIndex(0);
+      scrollActiveIntoView();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActiveIndex(filtered.length - 1);
+      scrollActiveIntoView();
+    }
+  }
+  function scrollActiveIntoView() {
+    const list = listRef.current;
+    const idx = activeIndex;
+    if (!list || idx < 0) return;
+    const el = list.children[idx];
+    el?.scrollIntoView({ block: "nearest" });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: ["relative w-full", className].join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "fieldset",
+          {
+            className: [
+              "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-16",
+              "border-[var(--border)] focus-within:border-[var(--color-brand)]",
+              disabled ? "opacity-60 cursor-not-allowed" : ""
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsx("legend", { className: "ml-4 px-1 text-sm leading-none relative", children: /* @__PURE__ */ jsx(
+                Typo,
+                {
+                  variant: "label-lg",
+                  className: [
+                    "font-normal select-none",
+                    open ? "text-[var(--color-brand)]" : "text-[var(--muted-fg)]",
+                    disabled ? "text-[var(--muted-fg)]" : ""
+                  ].join(" "),
+                  children: title
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    id: inputId,
+                    role: "combobox",
+                    "aria-expanded": open,
+                    "aria-controls": listboxId,
+                    "aria-autocomplete": "list",
+                    "aria-disabled": disabled || void 0,
+                    type: "text",
+                    value: displayValue,
+                    onChange: (e) => {
+                      setSearchQuery(e.target.value);
+                      if (!open) setOpen(true);
+                      setActiveIndex(0);
+                    },
+                    onFocus: openList,
+                    onKeyDown,
+                    onBlur: () => setTimeout(closeList, 150),
+                    disabled,
+                    className: [
+                      "w-full rounded-full border-0 outline-none bg-transparent",
+                      "text-sm text-[var(--fg)] placeholder:text-[var(--muted-fg)]",
+                      "pr-2"
+                    ].join(" "),
+                    placeholder,
+                    onClick: () => !disabled && setOpen(true)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: selectedOption && !open ? handleClear : () => setOpen((s) => !s),
+                    disabled,
+                    "aria-label": selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand",
+                    className: [
+                      "flex items-center justify-center rounded-full bg-transparent w-10 h-10",
+                      disabled ? "cursor-not-allowed" : "hover:bg-[var(--muted)]"
+                    ].join(" "),
+                    children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: selectedOption && !open ? "close" : "expand_more",
+                        size: "md",
+                        className: [
+                          "transition-transform duration-300 text-[var(--muted-fg)]",
+                          open ? "rotate-180 text-[var(--color-brand)]" : ""
+                        ].join(" ")
+                      }
+                    )
+                  }
+                )
+              ] }) })
+            ]
+          }
+        ),
+        open && !disabled && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              "absolute z-20 mt-2 w-full overflow-y-auto rounded-3xl border border-[var(--border)]",
+              "bg-[var(--surface)] text-[var(--fg)] shadow-md"
+            ].join(" "),
+            style: { maxHeight },
+            children: filtered.length > 0 ? /* @__PURE__ */ jsx("ul", { id: listboxId, role: "listbox", ref: listRef, children: filtered.map((option, index) => {
+              const active = index === activeIndex;
+              const selected = selectedOption != null && (typeof selectedOption === "string" ? selectedOption === option.label : selectedOption.label === option.label);
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  role: "option",
+                  "aria-selected": selected,
+                  className: [
+                    "flex items-center justify-between px-4 py-2 text-sm cursor-pointer transition-colors",
+                    active ? "bg-[var(--muted)]" : "",
+                    index !== filtered.length - 1 ? "border-b border-[var(--border)]" : ""
+                  ].join(" "),
+                  onMouseEnter: () => setActiveIndex(index),
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => handleSelect(option),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      anyOptionHasImage && /* @__PURE__ */ jsx(Avatar, { name: option.label, src: option.image || void 0 }),
+                      /* @__PURE__ */ jsx(Typo, { variant: "label-lg", className: "font-normal text-[var(--fg)]", children: option.label })
+                    ] }),
+                    Array.isArray(option.group) && option.group.length > 0 && /* @__PURE__ */ jsx(AvatarGroup, { children: option.group.map((member, i) => /* @__PURE__ */ jsx(Avatar, { name: member.name, src: member.image || void 0 }, i)) })
+                  ]
+                },
+                `${option.label}-${index}`
+              );
+            }) }) : /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(Typo, { variant: "body-sm", className: "text-[var(--muted-fg)]", children: "No results found" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function Search({
+  className = "",
+  options,
+  onSearch,
+  selectedOption,
+  onSelect,
+  searchDelay = 300,
+  disabled = false,
+  maxHeight = 152,
+  id,
+  ...props
+}) {
+  const inputId = id ?? useId();
+  const listboxId = `${inputId}-listbox`;
+  const [searchQuery, setSearchQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const rootRef = useRef(null);
+  const listRef = useRef(null);
+  const searchTimeoutRef = useRef(null);
+  const normalizedOptions = useMemo(() => {
+    if (Array.isArray(options) && typeof options[0] === "string") {
+      return options.map((str) => ({ label: str, value: str }));
+    }
+    return options;
+  }, [options]);
+  const anyOptionHasImage = useMemo(
+    () => normalizedOptions.some((o) => !!o.image),
+    [normalizedOptions]
+  );
+  const displayValue = selectedOption != null ? typeof selectedOption === "string" ? selectedOption : selectedOption.label : searchQuery;
+  const debouncedSearch = useCallback(
+    (query) => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+      searchTimeoutRef.current = window.setTimeout(() => {
+        onSearch(query);
+      }, searchDelay);
+    },
+    [onSearch, searchDelay]
+  );
+  function openList() {
+    if (disabled) return;
+    setOpen(true);
+  }
+  function closeList() {
+    setOpen(false);
+    setActiveIndex(-1);
+  }
+  function handleSelect(option) {
+    onSelect(option);
+    setSearchQuery("");
+    closeList();
+  }
+  function handleClear() {
+    onSelect(null);
+    setSearchQuery("");
+    closeList();
+  }
+  function onKeyDown(e) {
+    if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      setOpen(true);
+      setActiveIndex(0);
+      e.preventDefault();
+      return;
+    }
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, normalizedOptions.length - 1));
+      scrollActiveIntoView();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+      scrollActiveIntoView();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const item = normalizedOptions[activeIndex];
+      if (item) handleSelect(item);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      closeList();
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActiveIndex(0);
+      scrollActiveIntoView();
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActiveIndex(normalizedOptions.length - 1);
+      scrollActiveIntoView();
+    }
+  }
+  function scrollActiveIntoView() {
+    const list = listRef.current;
+    const idx = activeIndex;
+    if (!list || idx < 0) return;
+    const el = list.children[idx];
+    el?.scrollIntoView({ block: "nearest" });
+  }
+  React2.useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: ["relative w-full", className].join(" "),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-12",
+              "border-[var(--border)] focus-within:border-[var(--color-brand)]",
+              disabled ? "opacity-60 cursor-not-allowed" : ""
+            ].join(" "),
+            children: /* @__PURE__ */ jsx("div", { className: "relative flex pl-5 pr-3 h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: inputId,
+                  role: "combobox",
+                  "aria-expanded": open,
+                  "aria-controls": listboxId,
+                  "aria-autocomplete": "list",
+                  "aria-disabled": disabled || void 0,
+                  type: "text",
+                  value: displayValue,
+                  onChange: (e) => {
+                    const query = e.target.value;
+                    setSearchQuery(query);
+                    debouncedSearch(query);
+                    if (!open) setOpen(true);
+                    setActiveIndex(0);
+                  },
+                  onFocus: openList,
+                  onKeyDown,
+                  onBlur: () => setTimeout(closeList, 150),
+                  disabled,
+                  className: [
+                    "w-full rounded-full border-0 outline-none bg-transparent",
+                    "text-sm text-[var(--fg)] placeholder:text-[var(--muted-fg)]",
+                    "pr-2"
+                  ].join(" "),
+                  placeholder: "Pesquisar",
+                  onClick: () => !disabled && setOpen(true)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: selectedOption && !open ? handleClear : () => setOpen((s) => !s),
+                  disabled,
+                  "aria-label": selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand",
+                  className: [
+                    "flex items-center justify-center rounded-full bg-transparent w-10 h-10",
+                    disabled ? "cursor-not-allowed" : "hover:bg-[var(--muted)]"
+                  ].join(" "),
+                  children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: "search",
+                      size: "md",
+                      className: "text-[var(--muted-fg)]"
+                    }
+                  )
+                }
+              )
+            ] }) })
+          }
+        ),
+        open && !disabled && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              "absolute z-20 mt-2 w-full overflow-y-auto rounded-lg border border-[var(--border)]",
+              "bg-[var(--surface)] text-[var(--fg)] shadow-md backdrop-blur-sm px-3 py-1.5"
+            ].join(" "),
+            style: { maxHeight },
+            children: normalizedOptions.length > 0 ? /* @__PURE__ */ jsx("ul", { id: listboxId, role: "listbox", ref: listRef, children: normalizedOptions.map((option, index) => {
+              const active = index === activeIndex;
+              const selected = selectedOption != null && (typeof selectedOption === "string" ? selectedOption === option.label : selectedOption.label === option.label);
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  role: "option",
+                  "aria-selected": selected,
+                  className: [
+                    "flex items-center justify-between px-4 py-2 text-sm cursor-pointer transition-colors",
+                    active ? "bg-[var(--muted)]" : "",
+                    index !== normalizedOptions.length - 1 ? "border-b border-[var(--border)]" : ""
+                  ].join(" "),
+                  onMouseEnter: () => setActiveIndex(index),
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => handleSelect(option),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      anyOptionHasImage && /* @__PURE__ */ jsx(Avatar, { name: option.label, src: option.image || void 0 }),
+                      /* @__PURE__ */ jsx(Typo, { variant: "label-lg", className: "font-normal text-[var(--fg)]", children: option.label })
+                    ] }),
+                    Array.isArray(option.group) && option.group.length > 0 && /* @__PURE__ */ jsx(AvatarGroup, { children: option.group.map((member, i) => /* @__PURE__ */ jsx(Avatar, { name: member.name, src: member.image || void 0 }, i)) })
+                  ]
+                },
+                `${option.label}-${index}`
+              );
+            }) }) : /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(Typo, { variant: "body-sm", className: "text-[var(--muted-fg)]", children: "No results found" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+var buttonStyles = tv({
+  base: "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[var(--radius-2xl)] px-[18px] h-12 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    variant: {
+      primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
+      secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
+      ghost: "bg-transparent text-cyan-500 hover:bg-cyan-50 active:bg-cyan-100 disabled:text-neutral-400"
+    },
+    size: {
+      sm: "h-9 px-3 text-sm",
+      md: "h-12 px-[18px] text-sm",
+      lg: "h-14 px-6 text-base"
+    },
+    fullWidth: {
+      true: "w-full"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+var Button = React2.forwardRef(
+  ({ variant, size, fullWidth, className, children, icon, ...props }, ref) => {
+    const content = icon ? /* @__PURE__ */ jsx(Typo, { variant: "body-lg", bold: "semibold", className: "text-base font-semibold", children: icon }) : children;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: buttonStyles({ variant, size, fullWidth, className }),
+        ...props,
+        children: content
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+function Chip({
+  variant = "success",
+  icon,
+  className = "",
+  label,
+  ...props
+}) {
+  const base = "inline-flex w-fit items-center justify-center gap-1 whitespace-nowrap overflow-hidden rounded-full h-6 px-2 text-xs font-semibold border";
+  const variantCls = {
+    warning: "bg-[var(--warning)] text-white",
+    success: "bg-[var(--success)] text-white",
+    error: "bg-[var(--destructive)] text-white",
+    light: "bg-[var(--muted)] text-[var(--fg)]",
+    dark: "bg-[var(--surface)] text-[var(--fg)]"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: [base, variantCls[variant], className].join(" "), ...props, children: [
+    icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
+    /* @__PURE__ */ jsx("span", { children: label })
+  ] });
+}
+
+export { Autocomplete, Avatar, AvatarGroup, Button, Chip, Icon, Input, Modal, Search, Skeleton, Typo };