glasswind 0.1.0

package/dist/index.js

@@ -0,0 +1,1930 @@
+import { createContext, forwardRef, useCallback, useMemo, useId, useState, useEffect, useRef, useReducer, useContext, useLayoutEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+// src/components/Accordion/Accordion.tsx
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  const out = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (Array.isArray(input)) {
+      const nested = cn(...input);
+      if (nested) out.push(nested);
+    } else if (typeof input === "string" || typeof input === "number") {
+      out.push(String(input));
+    }
+  }
+  return out.join(" ");
+}
+function useDisclosure(defaultOpen = false) {
+  const [isOpen, setOpen] = useState(defaultOpen);
+  const open = useCallback(() => setOpen(true), []);
+  const close = useCallback(() => setOpen(false), []);
+  const toggle = useCallback(() => setOpen((v) => !v), []);
+  return { isOpen, open, close, toggle, setOpen };
+}
+function useClickOutside(ref, handler, enabled = true) {
+  useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      const el = ref.current;
+      if (!el || el.contains(event.target)) return;
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler, enabled]);
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+// src/hooks/useScrollLock.ts
+function useScrollLock(locked) {
+  useIsomorphicLayoutEffect(() => {
+    if (!locked || typeof document === "undefined") return;
+    const { body } = document;
+    const prevOverflow = body.style.overflow;
+    const prevPaddingRight = body.style.paddingRight;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    body.style.overflow = "hidden";
+    if (scrollbarWidth > 0) {
+      body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    return () => {
+      body.style.overflow = prevOverflow;
+      body.style.paddingRight = prevPaddingRight;
+    };
+  }, [locked]);
+}
+function useControllableState(params) {
+  const { value, defaultValue, onChange } = params;
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const current = isControlled ? value : internal;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onChangeRef.current?.(next);
+    },
+    [isControlled]
+  );
+  return [current, setValue];
+}
+var AccordionContext = createContext(null);
+function useAccordionContext() {
+  const ctx = useContext(AccordionContext);
+  if (ctx === null) {
+    throw new Error(
+      "Glasswind: <AccordionItem> must be rendered inside an <Accordion>."
+    );
+  }
+  return ctx;
+}
+function toOpenList(value) {
+  if (Array.isArray(value)) return value;
+  return value === "" ? [] : [value];
+}
+var NAV_KEYS = ["ArrowDown", "ArrowUp", "Home", "End"];
+var Accordion = forwardRef(
+  function Accordion2({
+    type = "single",
+    value: valueProp,
+    defaultValue,
+    onChange,
+    collapsible = true,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue: defaultValue ?? (type === "multiple" ? [] : ""),
+      onChange
+    });
+    const toggle = useCallback(
+      (itemValue) => {
+        if (type === "multiple") {
+          const open = toOpenList(value);
+          const next = open.includes(itemValue) ? open.filter((v) => v !== itemValue) : [...open, itemValue];
+          setValue(next);
+          return;
+        }
+        const current = toOpenList(value)[0] ?? "";
+        if (current === itemValue) {
+          if (collapsible) setValue("");
+        } else {
+          setValue(itemValue);
+        }
+      },
+      [type, collapsible, value, setValue]
+    );
+    const ctx = useMemo(
+      () => ({
+        type,
+        isOpen: (itemValue) => toOpenList(value).includes(itemValue),
+        toggle
+      }),
+      [type, value, toggle]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-gl-accordion": "",
+        className: cn("gl-accordion", className),
+        ...rest,
+        children: /* @__PURE__ */ jsx(AccordionContext.Provider, { value: ctx, children })
+      }
+    );
+  }
+);
+var AccordionItem = forwardRef(
+  function AccordionItem2({ value, title, disabled = false, className, children, ...rest }, ref) {
+    const { isOpen, toggle } = useAccordionContext();
+    const open = isOpen(value);
+    const baseId = useId();
+    const triggerId = `${baseId}-trigger`;
+    const panelId = `${baseId}-panel`;
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (!NAV_KEYS.includes(event.key)) return;
+        const trigger = event.currentTarget;
+        const root = trigger.closest("[data-gl-accordion]");
+        if (root === null) return;
+        const triggers = Array.from(
+          root.querySelectorAll(
+            ".gl-accordion__trigger:not([disabled])"
+          )
+        ).filter((el) => el.closest("[data-gl-accordion]") === root);
+        if (triggers.length === 0) return;
+        const currentIndex = triggers.indexOf(trigger);
+        let nextIndex = currentIndex;
+        switch (event.key) {
+          case "ArrowDown":
+            nextIndex = (currentIndex + 1) % triggers.length;
+            break;
+          case "ArrowUp":
+            nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+            break;
+          case "Home":
+            nextIndex = 0;
+            break;
+          case "End":
+            nextIndex = triggers.length - 1;
+            break;
+          default:
+            return;
+        }
+        event.preventDefault();
+        triggers[nextIndex]?.focus();
+      },
+      []
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-state": open ? "open" : "closed",
+        className: cn(
+          "gl-accordion__item",
+          disabled && "gl-accordion__item--disabled",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("h3", { className: "gl-accordion__header", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              id: triggerId,
+              className: "gl-accordion__trigger",
+              "aria-expanded": open,
+              "aria-controls": panelId,
+              disabled,
+              onClick: () => toggle(value),
+              onKeyDown: handleKeyDown,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "gl-accordion__title", children: title }),
+                /* @__PURE__ */ jsx("span", { className: "gl-accordion__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "1em",
+                    height: "1em",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+                  }
+                ) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "gl-accordion__panel", "data-state": open ? "open" : "closed", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: panelId,
+              role: "region",
+              "aria-labelledby": triggerId,
+              className: "gl-accordion__content",
+              children: /* @__PURE__ */ jsx("div", { className: "gl-accordion__body", children })
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+var STATUS_LABELS = {
+  online: "Online",
+  offline: "Offline",
+  busy: "Busy",
+  away: "Away"
+};
+function getInitials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "";
+  return words.slice(0, 2).map((word) => word.charAt(0)).join("").toUpperCase();
+}
+function FallbackIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "gl-avatar__icon",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12 12.5a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 1.75c-3.6 0-6.5 2-6.5 4.5 0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25 0-2.5-2.9-4.5-6.5-4.5Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+var Avatar = forwardRef(function Avatar2({
+  src,
+  alt,
+  name,
+  size = "md",
+  shape = "circle",
+  status,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const [imgFailed, setImgFailed] = useState(false);
+  useEffect(() => {
+    setImgFailed(false);
+  }, [src]);
+  const showImage = Boolean(src) && !imgFailed;
+  const initials = name ? getInitials(name) : "";
+  const a11yLabel = alt ?? name;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(
+        "gl-avatar",
+        `gl-avatar--${size}`,
+        `gl-avatar--${shape}`,
+        "gl-focusable",
+        className
+      ),
+      ...showImage ? {} : { role: "img", "aria-label": a11yLabel || "Avatar" },
+      ...rest,
+      children: [
+        showImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "gl-avatar__img",
+            src,
+            alt: alt ?? name ?? "",
+            draggable: false,
+            onError: () => setImgFailed(true)
+          }
+        ) : initials ? /* @__PURE__ */ jsx("span", { className: "gl-avatar__initials", "aria-hidden": "true", children: initials }) : /* @__PURE__ */ jsx(FallbackIcon, {}),
+        children,
+        status ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("gl-avatar__status", `gl-avatar__status--${status}`),
+            role: "img",
+            "aria-label": STATUS_LABELS[status]
+          }
+        ) : null
+      ]
+    }
+  );
+});
+var Badge = forwardRef(function Badge2({
+  variant = "glass",
+  size = "md",
+  dot = false,
+  pill = true,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(
+        "gl-badge",
+        `gl-badge--${variant}`,
+        `gl-badge--${size}`,
+        pill && "gl-badge--pill",
+        className
+      ),
+      ...rest,
+      children: [
+        dot ? /* @__PURE__ */ jsx("span", { className: "gl-badge__dot", "aria-hidden": "true" }) : null,
+        children != null ? /* @__PURE__ */ jsx("span", { className: "gl-badge__label", children }) : null
+      ]
+    }
+  );
+});
+var Button = forwardRef(function Button2({
+  variant = "glass",
+  size = "md",
+  loading = false,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  className,
+  children,
+  disabled,
+  type = "button",
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        "gl-btn",
+        `gl-btn--${variant}`,
+        `gl-btn--${size}`,
+        fullWidth && "gl-btn--block",
+        loading && "gl-btn--loading",
+        "gl-focusable",
+        className
+      ),
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...rest,
+      children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "gl-btn__spinner", "aria-hidden": "true" }),
+        !loading && leftIcon ? /* @__PURE__ */ jsx("span", { className: "gl-btn__icon", "aria-hidden": "true", children: leftIcon }) : null,
+        children != null ? /* @__PURE__ */ jsx("span", { className: "gl-btn__label", children }) : null,
+        !loading && rightIcon ? /* @__PURE__ */ jsx("span", { className: "gl-btn__icon", "aria-hidden": "true", children: rightIcon }) : null
+      ]
+    }
+  );
+});
+var Card = forwardRef(function Card2({
+  variant = "glass",
+  padding = "md",
+  hoverable = false,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "gl-card",
+        `gl-card--${variant}`,
+        `gl-card--pad-${padding}`,
+        hoverable && "gl-card--hoverable",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var CardHeader = forwardRef(
+  function CardHeader2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("gl-card__header", className), ...rest, children });
+  }
+);
+var CardBody = forwardRef(
+  function CardBody2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("gl-card__body", className), ...rest, children });
+  }
+);
+var CardFooter = forwardRef(
+  function CardFooter2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("gl-card__footer", className), ...rest, children });
+  }
+);
+var Checkbox = forwardRef(
+  function Checkbox2({
+    label,
+    indeterminate = false,
+    error = false,
+    boxSize = "md",
+    className,
+    disabled,
+    ...rest
+  }, ref) {
+    const innerRef = useRef(null);
+    const setRef = useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    useIsomorphicLayoutEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cn(
+          "gl-checkbox",
+          `gl-checkbox--${boxSize}`,
+          error && "gl-checkbox--error",
+          disabled && "gl-checkbox--disabled",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: setRef,
+              type: "checkbox",
+              className: "gl-sr-only gl-checkbox__input",
+              disabled,
+              "aria-invalid": error || void 0,
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "gl-checkbox__box", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "gl-checkbox__check",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M3.5 8.5L6.5 11.5L12.5 4.5",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "gl-checkbox__dash" })
+          ] }),
+          label != null ? /* @__PURE__ */ jsx("span", { className: "gl-checkbox__label", children: label }) : null
+        ]
+      }
+    );
+  }
+);
+function Portal({ children, container }) {
+  const [mounted, setMounted] = useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  if (!mounted || typeof document === "undefined") return null;
+  return createPortal(children, container ?? document.body);
+}
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+  } else if (ref) {
+    ref.current = node;
+  }
+}
+var Drawer = forwardRef(function Drawer2({
+  isOpen,
+  onClose,
+  children,
+  side = "right",
+  size = "340px",
+  title,
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  showClose = true,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const panelRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  const reactId = useId();
+  const titleId = `${reactId}-title`;
+  useScrollLock(isOpen);
+  const setPanelRef = useCallback(
+    (node) => {
+      panelRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref]
+  );
+  useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isOpen, closeOnEsc, onClose]);
+  useEffect(() => {
+    if (!isOpen) return;
+    previousFocusRef.current = document.activeElement;
+    panelRef.current?.focus();
+    return () => {
+      previousFocusRef.current?.focus?.();
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const isHorizontal = side === "left" || side === "right";
+  const sizeValue = typeof size === "number" ? `${size}px` : size;
+  const panelStyle = {
+    ...style,
+    ...isHorizontal ? { width: sizeValue } : { height: sizeValue }
+  };
+  const hasHeader = title != null || showClose;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "gl-drawer", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "gl-drawer__backdrop",
+        "aria-hidden": "true",
+        onClick: closeOnBackdrop ? onClose : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: setPanelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": title != null ? titleId : void 0,
+        tabIndex: -1,
+        style: panelStyle,
+        className: cn(
+          "gl-drawer__panel",
+          `gl-drawer__panel--${side}`,
+          "gl-focusable",
+          className
+        ),
+        ...rest,
+        children: [
+          hasHeader ? /* @__PURE__ */ jsxs("div", { className: "gl-drawer__header", children: [
+            title != null ? /* @__PURE__ */ jsx("h2", { id: titleId, className: "gl-drawer__title", children: title }) : null,
+            showClose ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "gl-drawer__close gl-focusable",
+                "aria-label": "Close",
+                onClick: onClose,
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    width: "18",
+                    height: "18",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" })
+                  }
+                )
+              }
+            ) : null
+          ] }) : null,
+          children
+        ]
+      }
+    )
+  ] }) });
+});
+var DrawerHeader = forwardRef(
+  function DrawerHeader2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("gl-drawer__header", className), ...rest, children });
+  }
+);
+var DrawerBody = forwardRef(
+  function DrawerBody2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("gl-drawer__body", className), ...rest, children });
+  }
+);
+var DrawerFooter = forwardRef(
+  function DrawerFooter2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("gl-drawer__footer", className), ...rest, children });
+  }
+);
+var DropdownContext = createContext(null);
+function useDropdownContext(part) {
+  const ctx = useContext(DropdownContext);
+  if (!ctx) {
+    throw new Error(`${part} must be rendered inside a <Dropdown>.`);
+  }
+  return ctx;
+}
+var ITEM_SELECTOR = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
+function getMenuItems(menu) {
+  if (!menu) return [];
+  return Array.from(menu.querySelectorAll(ITEM_SELECTOR));
+}
+function assignRef2(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+function Dropdown({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  placement = "bottom-start",
+  children
+}) {
+  const [open, setOpen] = useControllableState({
+    value: openProp,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const reactId = useId();
+  const triggerId = `${reactId}-trigger`;
+  const menuId = `${reactId}-menu`;
+  const close = useCallback(() => setOpen(false), [setOpen]);
+  const closeAndFocusTrigger = useCallback(() => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  }, [setOpen]);
+  useClickOutside(rootRef, close, open);
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, setOpen]);
+  const value = {
+    open,
+    setOpen,
+    placement,
+    triggerId,
+    menuId,
+    triggerRef,
+    menuRef,
+    closeAndFocusTrigger
+  };
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value, children: /* @__PURE__ */ jsx("span", { ref: rootRef, className: "gl-dropdown", children }) });
+}
+var DropdownTrigger = forwardRef(function DropdownTrigger2({ className, children, onClick, onKeyDown, type = "button", ...rest }, ref) {
+  const ctx = useDropdownContext("DropdownTrigger");
+  const setRef = useCallback(
+    (node) => {
+      ctx.triggerRef.current = node;
+      assignRef2(ref, node);
+    },
+    [ctx.triggerRef, ref]
+  );
+  const handleClick = useCallback(
+    (event) => {
+      ctx.setOpen(!ctx.open);
+      onClick?.(event);
+    },
+    [ctx, onClick]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!ctx.open) {
+          ctx.setOpen(true);
+        } else {
+          getMenuItems(ctx.menuRef.current)[0]?.focus();
+        }
+      }
+      onKeyDown?.(event);
+    },
+    [ctx, onKeyDown]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: setRef,
+      type,
+      id: ctx.triggerId,
+      className: cn("gl-dropdown__trigger", "gl-focusable", className),
+      "aria-haspopup": "menu",
+      "aria-expanded": ctx.open,
+      "aria-controls": ctx.open ? ctx.menuId : void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children
+    }
+  );
+});
+var DropdownMenu = forwardRef(
+  function DropdownMenu2({ className, children, onKeyDown, ...rest }, ref) {
+    const ctx = useDropdownContext("DropdownMenu");
+    const { open, menuRef } = ctx;
+    const setRef = useCallback(
+      (node) => {
+        menuRef.current = node;
+        assignRef2(ref, node);
+      },
+      [menuRef, ref]
+    );
+    useEffect(() => {
+      if (!open) return;
+      getMenuItems(menuRef.current)[0]?.focus();
+    }, [open, menuRef]);
+    const handleKeyDown = useCallback(
+      (event) => {
+        const items = getMenuItems(menuRef.current);
+        if (items.length > 0) {
+          const active = document.activeElement;
+          const currentIndex = active ? items.indexOf(active) : -1;
+          switch (event.key) {
+            case "ArrowDown": {
+              event.preventDefault();
+              const next = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length;
+              items[next]?.focus();
+              break;
+            }
+            case "ArrowUp": {
+              event.preventDefault();
+              const prev = currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+              items[prev]?.focus();
+              break;
+            }
+            case "Home": {
+              event.preventDefault();
+              items[0]?.focus();
+              break;
+            }
+            case "End": {
+              event.preventDefault();
+              items[items.length - 1]?.focus();
+              break;
+            }
+          }
+        }
+        onKeyDown?.(event);
+      },
+      [menuRef, onKeyDown]
+    );
+    if (!open) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setRef,
+        id: ctx.menuId,
+        role: "menu",
+        "aria-orientation": "vertical",
+        "aria-labelledby": ctx.triggerId,
+        tabIndex: -1,
+        className: cn(
+          "gl-dropdown__menu",
+          `gl-dropdown__menu--${ctx.placement}`,
+          className
+        ),
+        onKeyDown: handleKeyDown,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var DropdownItem = forwardRef(
+  function DropdownItem2({ className, children, onSelect, disabled = false, leftIcon, onClick, type = "button", ...rest }, ref) {
+    const ctx = useDropdownContext("DropdownItem");
+    const handleClick = useCallback(
+      (event) => {
+        if (disabled) return;
+        onClick?.(event);
+        onSelect?.();
+        ctx.closeAndFocusTrigger();
+      },
+      [ctx, disabled, onClick, onSelect]
+    );
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type,
+        role: "menuitem",
+        tabIndex: -1,
+        disabled,
+        className: cn("gl-dropdown__item", "gl-focusable", className),
+        onClick: handleClick,
+        ...rest,
+        children: [
+          leftIcon != null ? /* @__PURE__ */ jsx("span", { className: "gl-dropdown__item-icon", "aria-hidden": "true", children: leftIcon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "gl-dropdown__item-label", children })
+        ]
+      }
+    );
+  }
+);
+var DropdownSeparator = forwardRef(function DropdownSeparator2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": "horizontal",
+      className: cn("gl-dropdown__separator", className),
+      ...rest
+    }
+  );
+});
+var DropdownLabel = forwardRef(
+  function DropdownLabel2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "presentation",
+        className: cn("gl-dropdown__label", className),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var Input = forwardRef(function Input2({
+  variant = "subtle",
+  inputSize = "md",
+  error = false,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  className,
+  disabled,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "gl-input",
+        `gl-input--${variant}`,
+        `gl-input--${inputSize}`,
+        error && "gl-input--error",
+        fullWidth && "gl-input--block",
+        disabled && "gl-input--disabled",
+        className
+      ),
+      children: [
+        leftIcon != null ? /* @__PURE__ */ jsx("span", { className: "gl-input__icon gl-input__icon--left", "aria-hidden": "true", children: leftIcon }) : null,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            className: "gl-input__field",
+            disabled,
+            "aria-invalid": ariaInvalid ?? (error || void 0),
+            ...rest
+          }
+        ),
+        rightIcon != null ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "gl-input__icon gl-input__icon--right",
+            "aria-hidden": "true",
+            children: rightIcon
+          }
+        ) : null
+      ]
+    }
+  );
+});
+var Modal = forwardRef(function Modal2({
+  isOpen,
+  onClose,
+  children,
+  title,
+  size = "md",
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  showClose = true,
+  className,
+  ...rest
+}, ref) {
+  const titleId = useId();
+  const panelRef = useRef(null);
+  const setPanelRef = useCallback(
+    (node) => {
+      panelRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  useScrollLock(isOpen);
+  useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, closeOnEsc, onClose]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const previouslyFocused = typeof document !== "undefined" ? document.activeElement : null;
+    panelRef.current?.focus();
+    return () => {
+      previouslyFocused?.focus?.();
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const handleBackdropClick = (event) => {
+    if (closeOnBackdrop && event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  const hasHeader = title != null || showClose;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", { className: "gl-modal__backdrop", onClick: handleBackdropClick, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setPanelRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": title != null ? titleId : void 0,
+      tabIndex: -1,
+      className: cn(
+        "gl-modal__panel",
+        `gl-modal__panel--${size}`,
+        "gl-focusable",
+        className
+      ),
+      ...rest,
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxs("header", { className: "gl-modal__header", children: [
+          title != null ? /* @__PURE__ */ jsx("h2", { id: titleId, className: "gl-modal__title", children: title }) : null,
+          showClose ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "gl-modal__close gl-focusable",
+              "aria-label": "Close",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  width: "1em",
+                  height: "1em",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  strokeLinecap: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" })
+                }
+              )
+            }
+          ) : null
+        ] }) : null,
+        children
+      ]
+    }
+  ) }) });
+});
+var ModalHeader = forwardRef(
+  function ModalHeader2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("gl-modal__header", className), ...rest, children });
+  }
+);
+var ModalBody = forwardRef(
+  function ModalBody2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("gl-modal__body", className), ...rest, children });
+  }
+);
+var ModalFooter = forwardRef(
+  function ModalFooter2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("gl-modal__footer", className), ...rest, children });
+  }
+);
+var Progress = forwardRef(function Progress2({
+  value = 0,
+  max = 100,
+  indeterminate = false,
+  barSize = "md",
+  color = "primary",
+  showLabel = false,
+  className,
+  ...rest
+}, ref) {
+  const safeMax = max > 0 ? max : 100;
+  const clamped = Math.min(Math.max(value, 0), safeMax);
+  const ratio = clamped / safeMax;
+  const percent = Math.round(ratio * 100);
+  const barStyle = indeterminate ? void 0 : { "--gl-progress-value": ratio };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": safeMax,
+      "aria-valuenow": indeterminate ? void 0 : clamped,
+      "aria-valuetext": indeterminate ? void 0 : `${percent}%`,
+      className: cn(
+        "gl-progress",
+        `gl-progress--${barSize}`,
+        `gl-progress--${color}`,
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "gl-progress__track", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "gl-progress__bar",
+              indeterminate && "gl-progress__bar--indeterminate"
+            ),
+            style: barStyle
+          }
+        ) }),
+        showLabel && !indeterminate ? /* @__PURE__ */ jsxs("span", { className: "gl-progress__label", children: [
+          percent,
+          "%"
+        ] }) : null
+      ]
+    }
+  );
+});
+var RadioGroupContext = createContext(
+  null
+);
+function useRadioGroupContext(component) {
+  const ctx = useContext(RadioGroupContext);
+  if (ctx === null) {
+    throw new Error(
+      `Glasswind: <${component}> must be rendered inside a <RadioGroup>.`
+    );
+  }
+  return ctx;
+}
+var RadioGroup = forwardRef(
+  function RadioGroup2({
+    value,
+    defaultValue,
+    onChange,
+    name,
+    orientation = "vertical",
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const fallbackName = useId();
+    const [selected, setSelected] = useControllableState({
+      value,
+      defaultValue: defaultValue ?? "",
+      onChange
+    });
+    const ctx = useMemo(
+      () => ({
+        name: name ?? fallbackName,
+        value: selected,
+        setValue: setSelected
+      }),
+      [name, fallbackName, selected, setSelected]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-orientation": orientation,
+        className: cn(
+          "gl-radio-group",
+          `gl-radio-group--${orientation}`,
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctx, children })
+      }
+    );
+  }
+);
+var Radio = forwardRef(function Radio2({ value, label, disabled = false, className, ...rest }, ref) {
+  const ctx = useRadioGroupContext("Radio");
+  const checked = ctx.value === value;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "gl-radio",
+        checked && "gl-radio--checked",
+        disabled && "gl-radio--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "radio",
+            className: "gl-sr-only gl-radio__input",
+            name: ctx.name,
+            value,
+            checked,
+            disabled,
+            onChange: () => ctx.setValue(value),
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "gl-radio__dot", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "gl-radio__mark" }) }),
+        label != null ? /* @__PURE__ */ jsx("span", { className: "gl-radio__label", children: label }) : null
+      ]
+    }
+  );
+});
+var Select = forwardRef(function Select2({
+  options,
+  placeholder,
+  selectSize = "md",
+  error = false,
+  fullWidth = false,
+  className,
+  children,
+  disabled,
+  value,
+  defaultValue,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}, ref) {
+  const isControlled = value !== void 0;
+  const resolvedDefaultValue = !isControlled && defaultValue === void 0 && placeholder != null ? "" : defaultValue;
+  const selectionProps = isControlled ? { value } : { defaultValue: resolvedDefaultValue };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "gl-select",
+        `gl-select--${selectSize}`,
+        error && "gl-select--error",
+        fullWidth && "gl-select--block",
+        disabled && "gl-select--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ref,
+            className: "gl-select__field",
+            disabled,
+            "aria-invalid": ariaInvalid ?? (error || void 0),
+            ...selectionProps,
+            ...rest,
+            children: [
+              placeholder != null ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }) : null,
+              options ? options.map((opt) => /* @__PURE__ */ jsx(
+                "option",
+                {
+                  value: opt.value,
+                  disabled: opt.disabled,
+                  children: opt.label
+                },
+                String(opt.value)
+              )) : children
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "gl-select__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            width: "1em",
+            height: "1em",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+          }
+        ) })
+      ]
+    }
+  );
+});
+var Slider = forwardRef(function Slider2({
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue,
+  onChange,
+  showValue = false,
+  className,
+  style,
+  disabled,
+  ...rest
+}, ref) {
+  const [current, setValue] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? min,
+    onChange
+  });
+  const range = max - min;
+  const clamped = Math.min(max, Math.max(min, current));
+  const fillPct = range > 0 ? (clamped - min) / range * 100 : 0;
+  const handleChange = (event) => {
+    const next = event.target.valueAsNumber;
+    setValue(Number.isNaN(next) ? min : next);
+  };
+  const wrapperStyle = {
+    ...style,
+    "--gl-slider-fill": `${fillPct}%`
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "gl-slider",
+        showValue && "gl-slider--show-value",
+        disabled && "gl-slider--disabled",
+        className
+      ),
+      style: wrapperStyle,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "range",
+            className: "gl-slider__input",
+            min,
+            max,
+            step,
+            value: clamped,
+            disabled,
+            onChange: handleChange,
+            ...rest
+          }
+        ),
+        showValue ? /* @__PURE__ */ jsx("span", { className: "gl-slider__value", "aria-hidden": "true", children: current }) : null
+      ]
+    }
+  );
+});
+var Spinner = forwardRef(function Spinner2({ size = "md", label = "Loading", thickness, className, style, ...rest }, ref) {
+  const styleWithThickness = thickness != null ? { ...style, "--gl-spinner-bw": `${thickness}px` } : style;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      role: "status",
+      "aria-live": "polite",
+      className: cn("gl-spinner", `gl-spinner--${size}`, className),
+      style: styleWithThickness,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "gl-spinner__ring", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "gl-sr-only", children: label })
+      ]
+    }
+  );
+});
+var Switch = forwardRef(function Switch2({
+  checked,
+  defaultChecked = false,
+  onChange,
+  label,
+  switchSize = "md",
+  disabled = false,
+  className,
+  id,
+  ...rest
+}, ref) {
+  const reactId = useId();
+  const inputId = id ?? reactId;
+  const [isChecked, setChecked] = useControllableState({
+    value: checked,
+    defaultValue: defaultChecked,
+    onChange
+  });
+  const handleChange = (event) => {
+    setChecked(event.target.checked);
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "gl-switch",
+        `gl-switch--${switchSize}`,
+        isChecked && "gl-switch--checked",
+        disabled && "gl-switch--disabled",
+        className
+      ),
+      htmlFor: inputId,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            type: "checkbox",
+            role: "switch",
+            className: "gl-switch__input gl-sr-only",
+            checked: isChecked,
+            disabled,
+            onChange: handleChange,
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "gl-switch__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "gl-switch__thumb" }) }),
+        label != null ? /* @__PURE__ */ jsx("span", { className: "gl-switch__label", children: label }) : null
+      ]
+    }
+  );
+});
+var TabsContext = createContext(null);
+function useTabsContext(component) {
+  const ctx = useContext(TabsContext);
+  if (!ctx) {
+    throw new Error(`<${component}> must be rendered inside <Tabs>.`);
+  }
+  return ctx;
+}
+var idSafe = (value) => value.replace(/\s+/g, "-");
+var Tabs = forwardRef(function Tabs2({ value, defaultValue, onChange, className, children, ...rest }, ref) {
+  const baseId = useId();
+  const [activeValue, setControllableValue] = useControllableState({
+    value,
+    defaultValue,
+    onChange: onChange ? (next) => {
+      if (next !== void 0) onChange(next);
+    } : void 0
+  });
+  const orderRef = useRef([]);
+  const disabledRef = useRef(/* @__PURE__ */ new Map());
+  const [, bump] = useReducer((n) => n + 1, 0);
+  const registerTab = useCallback((v) => {
+    if (orderRef.current.includes(v)) return;
+    orderRef.current = [...orderRef.current, v];
+    if (!disabledRef.current.has(v)) disabledRef.current.set(v, false);
+    bump();
+  }, []);
+  const unregisterTab = useCallback((v) => {
+    if (!orderRef.current.includes(v)) return;
+    orderRef.current = orderRef.current.filter((x) => x !== v);
+    disabledRef.current.delete(v);
+    bump();
+  }, []);
+  const setTabDisabled = useCallback((v, disabled) => {
+    if (disabledRef.current.get(v) === disabled) return;
+    disabledRef.current.set(v, disabled);
+    bump();
+  }, []);
+  const activeValueRef = useRef(activeValue);
+  activeValueRef.current = activeValue;
+  const setActiveValue = useCallback(
+    (v) => {
+      if (activeValueRef.current === v) return;
+      setControllableValue(v);
+    },
+    [setControllableValue]
+  );
+  const getTabId = useCallback(
+    (v) => `${baseId}-tab-${idSafe(v)}`,
+    [baseId]
+  );
+  const getPanelId = useCallback(
+    (v) => `${baseId}-panel-${idSafe(v)}`,
+    [baseId]
+  );
+  const order = orderRef.current;
+  const disabledMap = disabledRef.current;
+  const activeIsFocusable = activeValue !== void 0 && order.includes(activeValue) && !disabledMap.get(activeValue);
+  const focusableValue = activeIsFocusable ? activeValue : order.find((v) => !disabledMap.get(v));
+  const ctx = useMemo(
+    () => ({
+      baseId,
+      activeValue,
+      setActiveValue,
+      focusableValue,
+      registerTab,
+      unregisterTab,
+      setTabDisabled,
+      getTabId,
+      getPanelId
+    }),
+    [
+      baseId,
+      activeValue,
+      setActiveValue,
+      focusableValue,
+      registerTab,
+      unregisterTab,
+      setTabDisabled,
+      getTabId,
+      getPanelId
+    ]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { ref, className: cn("gl-tabs", className), ...rest, children }) });
+});
+var TabList = forwardRef(function TabList2({ className, children, onKeyDown, ...rest }, ref) {
+  const { setActiveValue } = useTabsContext("TabList");
+  const listRef = useRef(null);
+  const setRefs = useCallback(
+    (node) => {
+      listRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const nav = ["ArrowRight", "ArrowLeft", "Home", "End"];
+    if (!nav.includes(event.key)) return;
+    const list = listRef.current;
+    if (!list) return;
+    const tabs = Array.from(
+      list.querySelectorAll('[role="tab"]:not([disabled])')
+    );
+    if (tabs.length === 0) return;
+    const currentIndex = tabs.findIndex((t) => t === document.activeElement);
+    let nextIndex;
+    switch (event.key) {
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = tabs.length - 1;
+        break;
+      case "ArrowRight":
+        nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % tabs.length;
+        break;
+      default:
+        nextIndex = currentIndex < 0 ? tabs.length - 1 : (currentIndex - 1 + tabs.length) % tabs.length;
+    }
+    const next = tabs[nextIndex];
+    event.preventDefault();
+    next.focus();
+    const nextValue = next.getAttribute("data-value");
+    if (nextValue !== null) setActiveValue(nextValue);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRefs,
+      role: "tablist",
+      "aria-orientation": "horizontal",
+      className: cn("gl-tabs__list", className),
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children
+    }
+  );
+});
+var Tab = forwardRef(function Tab2({ value, disabled = false, className, children, onClick, type = "button", ...rest }, ref) {
+  const ctx = useTabsContext("Tab");
+  const { registerTab, unregisterTab, setTabDisabled, setActiveValue } = ctx;
+  const selected = ctx.activeValue === value;
+  const focusable = ctx.focusableValue === value;
+  useIsomorphicLayoutEffect(() => {
+    registerTab(value);
+    return () => unregisterTab(value);
+  }, [registerTab, unregisterTab, value]);
+  useIsomorphicLayoutEffect(() => {
+    setTabDisabled(value, disabled);
+  }, [setTabDisabled, value, disabled]);
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    setActiveValue(value);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      role: "tab",
+      id: ctx.getTabId(value),
+      "data-value": value,
+      "aria-selected": selected,
+      "aria-controls": ctx.getPanelId(value),
+      tabIndex: focusable ? 0 : -1,
+      disabled,
+      className: cn(
+        "gl-tabs__tab",
+        selected && "gl-tabs__tab--active",
+        "gl-focusable",
+        className
+      ),
+      onClick: handleClick,
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { className: "gl-tabs__tab-label", children })
+    }
+  );
+});
+var TabPanel = forwardRef(function TabPanel2({ value, className, children, ...rest }, ref) {
+  const ctx = useTabsContext("TabPanel");
+  const selected = ctx.activeValue === value;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      id: ctx.getPanelId(value),
+      "aria-labelledby": ctx.getTabId(value),
+      hidden: !selected,
+      tabIndex: 0,
+      className: cn("gl-tabs__panel", className),
+      ...rest,
+      children
+    }
+  );
+});
+var Textarea = forwardRef(
+  function Textarea2({
+    variant = "subtle",
+    error = false,
+    fullWidth = false,
+    autoResize = false,
+    className,
+    onChange,
+    value,
+    defaultValue,
+    rows,
+    disabled,
+    ...rest
+  }, ref) {
+    const innerRef = useRef(null);
+    const setRef = useCallback(
+      (node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const resize = useCallback(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      if (!autoResize) {
+        el.style.height = "";
+        return;
+      }
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    }, [autoResize]);
+    useIsomorphicLayoutEffect(() => {
+      resize();
+    }, [resize, value, defaultValue, rows]);
+    const handleChange = useCallback(
+      (event) => {
+        if (autoResize) resize();
+        onChange?.(event);
+      },
+      [autoResize, resize, onChange]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "gl-textarea",
+          `gl-textarea--${variant}`,
+          fullWidth && "gl-textarea--full",
+          error && "gl-textarea--error",
+          autoResize && "gl-textarea--auto",
+          disabled && "gl-textarea--disabled",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: setRef,
+            className: "gl-textarea__field",
+            value,
+            defaultValue,
+            rows,
+            disabled,
+            "aria-invalid": error || void 0,
+            onChange: handleChange,
+            ...rest
+          }
+        )
+      }
+    );
+  }
+);
+var DEFAULT_DURATION = 4e3;
+var ToastContext = createContext(null);
+function ToastItem({ toast, onDismiss }) {
+  const { id, title, description, variant, duration } = toast;
+  const autoDismiss = duration > 0 && Number.isFinite(duration);
+  const timerRef = useRef(null);
+  const remainingRef = useRef(duration);
+  const startedRef = useRef(0);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current !== null) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const resumeTimer = useCallback(() => {
+    if (!autoDismiss || timerRef.current !== null) return;
+    startedRef.current = performance.now();
+    timerRef.current = window.setTimeout(() => {
+      timerRef.current = null;
+      onDismiss(id);
+    }, remainingRef.current);
+  }, [autoDismiss, id, onDismiss]);
+  const pauseTimer = useCallback(() => {
+    if (timerRef.current === null) return;
+    clearTimer();
+    remainingRef.current = Math.max(
+      0,
+      remainingRef.current - (performance.now() - startedRef.current)
+    );
+  }, [clearTimer]);
+  useEffect(() => {
+    remainingRef.current = duration;
+    resumeTimer();
+    return clearTimer;
+  }, [duration, resumeTimer, clearTimer]);
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      onDismiss(id);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("gl-toast", `gl-toast--${variant}`),
+      role: "status",
+      "aria-atomic": "true",
+      onMouseEnter: pauseTimer,
+      onMouseLeave: resumeTimer,
+      onFocus: pauseTimer,
+      onBlur: resumeTimer,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "gl-toast__accent", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "gl-toast__body", children: [
+          title != null ? /* @__PURE__ */ jsx("div", { className: "gl-toast__title", children: title }) : null,
+          description != null ? /* @__PURE__ */ jsx("div", { className: "gl-toast__description", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "gl-toast__close gl-focusable",
+            "aria-label": "Dismiss notification",
+            onClick: () => onDismiss(id),
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "gl-toast__close-icon",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M6 6l12 12M18 6L6 18",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastProvider({
+  children,
+  position = "bottom-right"
+}) {
+  const [toasts, setToasts] = useState([]);
+  const baseId = useId();
+  const counterRef = useRef(0);
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  const toast = useCallback(
+    (options) => {
+      const id = `${baseId}${counterRef.current++}`;
+      setToasts((prev) => [
+        ...prev,
+        {
+          id,
+          title: options.title,
+          description: options.description,
+          variant: options.variant ?? "glass",
+          duration: options.duration ?? DEFAULT_DURATION
+        }
+      ]);
+      return id;
+    },
+    [baseId]
+  );
+  const success = useCallback(
+    (title, options) => toast({ ...options, title, variant: "success" }),
+    [toast]
+  );
+  const error = useCallback(
+    (title, options) => toast({ ...options, title, variant: "danger" }),
+    [toast]
+  );
+  const info = useCallback(
+    (title, options) => toast({ ...options, title, variant: "info" }),
+    [toast]
+  );
+  const warning = useCallback(
+    (title, options) => toast({ ...options, title, variant: "warning" }),
+    [toast]
+  );
+  const value = useMemo(
+    () => ({ toast, dismiss, success, error, info, warning }),
+    [toast, dismiss, success, error, info, warning]
+  );
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("gl-toast-viewport", `gl-toast-viewport--${position}`),
+        role: "region",
+        "aria-label": "Notifications",
+        children: toasts.map((item) => /* @__PURE__ */ jsx(ToastItem, { toast: item, onDismiss: dismiss }, item.id))
+      }
+    ) })
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (ctx === null) {
+    throw new Error(
+      "useToast must be used within a <ToastProvider>. Wrap your app (or the subtree that shows toasts) in <ToastProvider>."
+    );
+  }
+  return ctx;
+}
+var Tooltip = forwardRef(function Tooltip2({
+  content,
+  children,
+  placement = "top",
+  delay = 200,
+  disabled = false,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  ...rest
+}, ref) {
+  const [visible, setVisible] = useState(false);
+  const timeoutRef = useRef(null);
+  const tooltipId = useId();
+  const clearTimer = useCallback(() => {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  const show = useCallback(() => {
+    if (disabled) return;
+    clearTimer();
+    timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = null;
+      setVisible(true);
+    }, delay);
+  }, [disabled, delay, clearTimer]);
+  const hide = useCallback(() => {
+    clearTimer();
+    setVisible(false);
+  }, [clearTimer]);
+  useEffect(() => {
+    if (disabled) {
+      clearTimer();
+      setVisible(false);
+    }
+  }, [disabled, clearTimer]);
+  useEffect(() => clearTimer, [clearTimer]);
+  const handleMouseEnter = (event) => {
+    show();
+    onMouseEnter?.(event);
+  };
+  const handleMouseLeave = (event) => {
+    hide();
+    onMouseLeave?.(event);
+  };
+  const handleFocus = (event) => {
+    show();
+    onFocus?.(event);
+  };
+  const handleBlur = (event) => {
+    hide();
+    onBlur?.(event);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      hide();
+    }
+    onKeyDown?.(event);
+  };
+  const open = visible && !disabled;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn("gl-tooltip-wrap", className),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      "aria-describedby": open ? tooltipId : void 0,
+      ...rest,
+      children: [
+        children,
+        open ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: tooltipId,
+            role: "tooltip",
+            className: cn("gl-tooltip", `gl-tooltip--${placement}`),
+            children: content
+          }
+        ) : null
+      ]
+    }
+  );
+});
+
+export { Accordion, AccordionItem, Avatar, Badge, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Drawer, DrawerBody, DrawerFooter, DrawerHeader, Dropdown, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, DropdownTrigger, Input, Modal, ModalBody, ModalFooter, ModalHeader, Portal, Progress, Radio, RadioGroup, RadioGroupContext, Select, Slider, Spinner, Switch, Tab, TabList, TabPanel, Tabs, Textarea, ToastProvider, Tooltip, cn, useClickOutside, useControllableState, useDisclosure, useIsomorphicLayoutEffect, useScrollLock, useToast };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map