@beautinique/frontend-components 1.0.8 → 1.0.9

package/dist/layout/index.cjs

@@ -1,9 +1,700 @@
 'use strict';
 
-var react = require('react');
+var react = require('@iconify/react');
+var ui = require('@beautinique/frontend-components/ui');
+var jsxRuntime = require('react/jsx-runtime');
+var react$1 = require('react');
+var reactDom = require('react-dom');
+var linearGradient = require('@beautinique/frontend-components/linear-gradient');
+var inputs = require('@beautinique/frontend-components/inputs');
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/content.ts
+var hasContent = /* @__PURE__ */ __name((content) => content !== null && content !== void 0 && content !== false && content !== true && content !== "", "hasContent");
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) react.addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/layout/layout-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "danger-triangle-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M5.31171 10.7615C8.23007 5.58716 9.68925 3 12 3C14.3107 3 15.7699 5.58716 18.6883 10.7615L19.0519 11.4063C21.4771 15.7061 22.6897 17.856 21.5937 19.428C20.4978 21 17.7864 21 12.3637 21H11.6363C6.21356 21 3.50217 21 2.40626 19.428C1.31034 17.856 2.52291 15.7061 4.94805 11.4063L5.31171 10.7615Z"/><path d="M12 8V13"/><path stroke-linejoin="round" d="M12 16H12.0001"/></g>'
+      },
+      "check-circle-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path stroke-linejoin="round" d="M8.5 12.5L10.5 14.5L15.5 9.5"/></g>'
+      },
+      "folder-error-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M2 6.94975C2 6.06722 2 5.62595 2.06935 5.25839C2.37464 3.64031 3.64031 2.37464 5.25839 2.06935C5.62595 2 6.06722 2 6.94975 2C7.33642 2 7.52976 2 7.71557 2.01738C8.51665 2.09229 9.27652 2.40704 9.89594 2.92051C10.0396 3.03961 10.1763 3.17633 10.4497 3.44975L11 4C11.8158 4.81578 12.2237 5.22367 12.7121 5.49543C12.9804 5.64471 13.2651 5.7626 13.5604 5.84678C14.0979 6 14.6747 6 15.8284 6H16.2021C18.8345 6 20.1506 6 21.0062 6.76946C21.0849 6.84024 21.1598 6.91514 21.2305 6.99383C22 7.84935 22 9.16554 22 11.7979V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V6.94975Z"/><path d="M10.5 15L13.5 12M13.5 15L10.5 12"/></g>'
+      },
+      "info-circle-outline": {
+        body: '<g fill="currentColor"><path d="M12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75Z"/><path d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z"/><path fill-rule="evenodd" d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75Z" clip-rule="evenodd"/></g>'
+      },
+      "alt-arrow-down-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 9L12 15L5 9"/>'
+      }
+    }
+  },
+  {
+    prefix: "lucide",
+    width: 24,
+    height: 24,
+    icons: {
+      x: {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/>'
+      }
+    }
+  }
+];
+var { register: registerLayoutIcons, names: LAYOUT_ICON_NAMES } = createIconRegistry(ICON_SETS);
+var LoadingText = /* @__PURE__ */ __name(({ text = "Loading", className = "" }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "status", className: `w-fit ${className}`, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: text }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-text": text,
+      className: "loading-text after:text-primary/0 w-fit font-mono text-[3.5vmin] font-extrabold after:content-[attr(data-text)]",
+      style: {
+        "--loading-text-duration": `${String(Math.max(1, text.length * 0.08))}s`
+      }
+    }
+  )
+] }), "LoadingText");
+var RINGS = [
+  { side: "borderBottomWidth", color: "red", rx: 45, ry: -45, z: 0 },
+  { side: "borderRightWidth", color: "green", rx: 55, ry: 15, z: 90 },
+  { side: "borderTopWidth", color: "blue", rx: 40, ry: 65, z: 180 }
+];
+var LoadingRings = /* @__PURE__ */ __name(({ className = "", text = "Loading" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-full w-full items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "relative h-[20vmin] w-[20vmin]", children: RINGS.map((ring, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0 animate-[ring-spin_2s_linear_infinite] rounded-full border-solid shadow-[0_0_10px_rgb(var(--primary-rgb),0.15)] motion-reduce:animate-none",
+      style: {
+        "--rx": `${String(ring.rx)}deg`,
+        "--ry": `${String(ring.ry)}deg`,
+        "--z": `${String(ring.z)}deg`,
+        borderColor: ring.color,
+        [ring.side]: "0.6vmin",
+        animationDelay: `${String(index * -0.5)}s`
+      }
+    },
+    ring.side
+  )) }),
+  /* @__PURE__ */ jsxRuntime.jsx(LoadingText, { text, className: "mt-[2vmin]" })
+] }) }), "LoadingRings");
+var STATUS_ICON = {
+  error: "solar:danger-triangle-linear",
+  success: "solar:check-circle-linear",
+  empty: "solar:folder-error-linear"
+};
+var ApiStatus = /* @__PURE__ */ __name(({ className = "", ...props }) => {
+  registerLayoutIcons();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `m-auto flex h-full min-h-60 w-full flex-col items-center justify-center gap-2 p-4 ${className}`,
+      children: props.status === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(LoadingRings, { text: props.text ?? "Loading...." }) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          role: props.status === "error" ? "alert" : "status",
+          className: "flex flex-col items-center justify-center gap-2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-primary/5 grid size-8 place-items-center rounded-full p-2 md:size-10", children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: STATUS_ICON[props.status], className: "text-silver-jet size-full shrink-0" }) }),
+            hasContent(props.title) && /* @__PURE__ */ jsxRuntime.jsx(ui.GradientText, { type: "silver", className: "text-sm text-shadow-sm sm:text-base md:text-lg", children: props.title }),
+            hasContent(props.description) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-silver-jet text-center text-xs leading-6 font-normal sm:text-sm", children: props.description }),
+            props.divider === true && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "mt-1" })
+          ]
+        }
+      )
+    }
+  );
+}, "ApiStatus");
+var BorderGradient = /* @__PURE__ */ __name(({
+  children,
+  className = "",
+  containerClassName = "",
+  ...divProps
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `bg-border-gradient mx-auto w-full rounded-3xl p-px ${containerClassName}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ...divProps,
+    className: `shadow-light-dark-soft bg-platinum-black base:p-6 rounded-[23px] p-4 ${className}`,
+    children
+  }
+) }), "BorderGradient");
+var openStack = [];
+var useDismiss = /* @__PURE__ */ __name((onDismiss, { enabled = true, ignore, outside = true, escape = true } = {}) => {
+  const ref = react$1.useRef(null);
+  const onDismissRef = react$1.useRef(onDismiss);
+  const ignoreRef = react$1.useRef(ignore);
+  react$1.useLayoutEffect(() => {
+    onDismissRef.current = onDismiss;
+    ignoreRef.current = ignore;
+  });
+  react$1.useEffect(() => {
+    if (!enabled) return;
+    const token = /* @__PURE__ */ Symbol("dismissable");
+    if (escape) openStack.push(token);
+    const handlePress = /* @__PURE__ */ __name((event) => {
+      const element = ref.current;
+      if (!outside || !element) return;
+      const path = event.composedPath();
+      const isInside = path.includes(element) || (ignoreRef.current ?? []).some(({ current }) => current !== null && path.includes(current));
+      if (!isInside) onDismissRef.current("outside", event);
+    }, "handlePress");
+    const handleKey = /* @__PURE__ */ __name((event) => {
+      if (!escape || event.key !== "Escape" || event.defaultPrevented) return;
+      if (openStack.at(-1) !== token) return;
+      onDismissRef.current("escape", event);
+    }, "handleKey");
+    document.addEventListener("pointerdown", handlePress, true);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("pointerdown", handlePress, true);
+      document.removeEventListener("keydown", handleKey);
+      const index = openStack.indexOf(token);
+      if (index !== -1) openStack.splice(index, 1);
+    };
+  }, [enabled, outside, escape]);
+  return ref;
+}, "useDismiss");
+
+// src/lib/focus.ts
+var TABBABLE = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "summary",
+  "audio[controls]",
+  "video[controls]",
+  '[contenteditable]:not([contenteditable="false"])',
+  "[tabindex]"
+].join(",");
+var isTabbable = /* @__PURE__ */ __name((element) => {
+  if (element.tabIndex < 0) return false;
+  return !element.closest("[hidden], [inert]");
+}, "isTabbable");
+var getTabbable = /* @__PURE__ */ __name((root) => [...root.querySelectorAll(TABBABLE)].filter(isTabbable), "getTabbable");
+
+// src/lib/useFocusTrap.ts
+var activeTraps = [];
+var useFocusTrap = /* @__PURE__ */ __name(({
+  enabled,
+  initialFocus,
+  returnFocus = true
+}) => {
+  const ref = react$1.useRef(null);
+  const initialFocusRef = react$1.useRef(initialFocus);
+  react$1.useEffect(() => {
+    initialFocusRef.current = initialFocus;
+  });
+  react$1.useEffect(() => {
+    const dialog = ref.current;
+    if (!enabled || !dialog) return;
+    const token = /* @__PURE__ */ Symbol("trap");
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    activeTraps.push(token);
+    (initialFocusRef.current?.current ?? getTabbable(dialog).at(0) ?? dialog).focus();
+    const handleKey = /* @__PURE__ */ __name((event) => {
+      if (event.key !== "Tab" || activeTraps.at(-1) !== token) return;
+      const tabbable = getTabbable(dialog);
+      const first = tabbable.at(0);
+      const last = tabbable.at(-1);
+      const current = document.activeElement;
+      if (!first || !last) {
+        event.preventDefault();
+        dialog.focus();
+        return;
+      }
+      if (!(current instanceof Node) || !dialog.contains(current) || current === dialog) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+      } else if (event.shiftKey && current === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && current === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }, "handleKey");
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+      const index = activeTraps.indexOf(token);
+      if (index !== -1) activeTraps.splice(index, 1);
+      if (returnFocus && previous?.isConnected) previous.focus();
+    };
+  }, [enabled, returnFocus]);
+  return ref;
+}, "useFocusTrap");
+var subscribe = /* @__PURE__ */ __name(() => () => void 0, "subscribe");
+var useIsClient = /* @__PURE__ */ __name(() => react$1.useSyncExternalStore(
+  subscribe,
+  () => true,
+  () => false
+), "useIsClient");
+var holders = 0;
+var saved = null;
+var lock = /* @__PURE__ */ __name(() => {
+  holders += 1;
+  if (holders > 1) return;
+  const { body, documentElement } = document;
+  const scrollbar = window.innerWidth - documentElement.clientWidth;
+  saved = { overflow: body.style.overflow, paddingRight: body.style.paddingRight };
+  body.style.overflow = "hidden";
+  if (scrollbar > 0) {
+    body.style.paddingRight = `${String(parseFloat(getComputedStyle(body).paddingRight) + scrollbar)}px`;
+  }
+}, "lock");
+var unlock = /* @__PURE__ */ __name(() => {
+  holders = Math.max(0, holders - 1);
+  if (holders > 0 || !saved) return;
+  document.body.style.overflow = saved.overflow;
+  document.body.style.paddingRight = saved.paddingRight;
+  saved = null;
+}, "unlock");
+var useScrollLock = /* @__PURE__ */ __name((enabled) => {
+  react$1.useEffect(() => {
+    if (!enabled) return;
+    lock();
+    return unlock;
+  }, [enabled]);
+}, "useScrollLock");
+
+// src/lib/mergeRefs.ts
+var assign = /* @__PURE__ */ __name((ref, node) => {
+  if (typeof ref === "function") return ref(node);
+  if (ref) ref.current = node;
+  return void 0;
+}, "assign");
+var mergeRefs = /* @__PURE__ */ __name((...refs) => (node) => {
+  const cleanups = refs.map((ref) => assign(ref, node));
+  return () => {
+    refs.forEach((ref, index) => {
+      const cleanup = cleanups[index];
+      if (typeof cleanup === "function") cleanup();
+      else assign(ref, null);
+    });
+  };
+}, "mergeRefs");
+var SCROLL_EPSILON = 4;
+var useScrollable = /* @__PURE__ */ __name((direction) => {
+  const ref = react$1.useRef(null);
+  const [edges, setEdges] = react$1.useState({});
+  react$1.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const check = /* @__PURE__ */ __name(() => {
+      const isHorizontal = direction === "horizontal";
+      const size = isHorizontal ? element.clientWidth : element.clientHeight;
+      const total = isHorizontal ? element.scrollWidth : element.scrollHeight;
+      const position = isHorizontal ? element.scrollLeft : element.scrollTop;
+      const hasScroll = total - size > SCROLL_EPSILON;
+      const hasBefore = hasScroll && position > SCROLL_EPSILON;
+      const hasAfter = hasScroll && total - (position + size) > SCROLL_EPSILON;
+      const next = isHorizontal ? { ...hasBefore && { left: true }, ...hasAfter && { right: true } } : { ...hasBefore && { top: true }, ...hasAfter && { bottom: true } };
+      setEdges(
+        (current) => current.top === next.top && current.bottom === next.bottom && current.left === next.left && current.right === next.right ? current : next
+      );
+    }, "check");
+    check();
+    element.addEventListener("scroll", check, { passive: true });
+    const observer = new ResizeObserver(check);
+    observer.observe(element);
+    if (element.firstElementChild) observer.observe(element.firstElementChild);
+    return () => {
+      element.removeEventListener("scroll", check);
+      observer.disconnect();
+    };
+  }, [direction]);
+  return { ref, edges };
+}, "useScrollable");
+var EDGES = ["top", "bottom", "left", "right"];
+var NO_GRADIENT_CLASSES = {};
+var ScrollableGradientContainer = /* @__PURE__ */ __name(({
+  direction,
+  gradientClassNames = NO_GRADIENT_CLASSES,
+  className = "",
+  containerClassName = "",
+  label,
+  scrollerRef,
+  children
+}) => {
+  const { ref, edges } = useScrollable(direction);
+  const mergedRef = react$1.useMemo(() => mergeRefs(ref, scrollerRef), [ref, scrollerRef]);
+  const isVertical = direction === "vertical";
+  const isScrollable = EDGES.some((edge) => edges[edge]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `relative flex overflow-hidden ${isVertical ? "h-full w-full flex-col" : "h-fit w-full flex-row"} ${containerClassName}`,
+      children: [
+        EDGES.filter((edge) => edges[edge]).map((edge) => /* @__PURE__ */ jsxRuntime.jsx(linearGradient.LinearGradient, { position: edge, className: gradientClassNames[edge] }, edge)),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: mergedRef,
+            tabIndex: isScrollable ? 0 : void 0,
+            role: isScrollable && label ? "region" : void 0,
+            "aria-label": isScrollable ? label : void 0,
+            className: `relative scroll-smooth outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-crayola-c motion-reduce:scroll-auto ${isVertical ? "flex-1 overflow-y-auto" : "grow overflow-x-auto"} ${className}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `flex h-full w-full gap-2 ${isVertical ? "min-h-full flex-col" : "min-w-full flex-row"} ${isScrollable ? "items-start justify-start" : "items-center justify-center"}`,
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, "ScrollableGradientContainer");
+var ModalWrapper = /* @__PURE__ */ __name(({
+  isOpen,
+  onClose,
+  children,
+  containerProps,
+  className = "",
+  header,
+  closeOnOutsideClick = true,
+  style,
+  label,
+  labelledBy,
+  describedBy,
+  role = "dialog",
+  initialFocus,
+  closeLabel = "Close"
+}) => {
+  registerLayoutIcons();
+  const titleId = react$1.useId();
+  const isClient = useIsClient();
+  const isShown = isOpen && isClient;
+  const pressedBackdropRef = react$1.useRef(false);
+  const dialogRef = useFocusTrap({ enabled: isShown, initialFocus });
+  useScrollLock(isShown);
+  useDismiss(
+    () => {
+      onClose();
+    },
+    { enabled: isShown, outside: false }
+  );
+  if (!isShown) return null;
+  const hasTitle = !!header?.title;
+  const hasHeader = hasTitle || !!header?.showCloseIcon;
+  const closeButton = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": closeLabel,
+      className: "group cursor-pointer p-3 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-crayola-c",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        react.Icon,
+        {
+          icon: "lucide:x",
+          className: "text-tertiary group-hover:text-primary size-4 transition-all duration-300 group-hover:scale-110 motion-reduce:transition-none sm:size-5"
+        }
+      )
+    }
+  );
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...containerProps,
+        onPointerDown: (event) => {
+          pressedBackdropRef.current = event.target === event.currentTarget;
+          containerProps?.onPointerDown?.(event);
+        },
+        onClick: (event) => {
+          containerProps?.onClick?.(event);
+          if (closeOnOutsideClick && pressedBackdropRef.current && event.target === event.currentTarget) {
+            onClose();
+          }
+          pressedBackdropRef.current = false;
+        },
+        className: `bg-primary-invert/50 fixed inset-0 z-100 flex items-center justify-center p-8 backdrop-blur-xs ${containerProps?.className ?? ""}`,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: dialogRef,
+            role,
+            "aria-modal": "true",
+            "aria-label": labelledBy || hasTitle ? void 0 : label,
+            "aria-labelledby": labelledBy ?? (hasTitle ? titleId : void 0),
+            "aria-describedby": describedBy,
+            tabIndex: -1,
+            className: `bg-primary-invert border-primary/20 relative flex max-h-[90dvh] w-full max-w-md flex-col overflow-hidden rounded-xl border shadow-lg outline-none ${className}`,
+            style,
+            children: [
+              hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `bg-primary-invert z-20 flex max-h-16 items-center ${hasTitle ? "border-b-primary/50 sticky inset-x-0 top-0 justify-between border-b px-6 py-4" : "border-primary/20 shadow-primary/20 absolute top-0 right-0 justify-center rounded-bl-xl border-b border-l shadow-lg"}`,
+                  children: [
+                    hasTitle && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: "flex-1 text-center text-lg font-semibold", children: /* @__PURE__ */ jsxRuntime.jsx(ui.GradientText, { text: header.title ?? "", type: "silver" }) }),
+                    header.showCloseIcon && closeButton
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ScrollableGradientContainer,
+                {
+                  direction: "vertical",
+                  containerClassName: "flex-1",
+                  className: "overscroll-contain p-4",
+                  gradientClassNames: { top: "h-8!", bottom: "h-8!" },
+                  children
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}, "ModalWrapper");
+var TYPE_LOOK = {
+  success: { icon: "solar:check-circle-linear", rgb: "var(--primary-green-rgb)" },
+  error: { icon: "solar:danger-triangle-linear", rgb: "var(--primary-red-rgb)" },
+  warning: { icon: "solar:danger-triangle-linear", rgb: "var(--primary-yellow-rgb)" },
+  default: { icon: "solar:info-circle-outline", rgb: "var(--primary-rgb)" }
+};
+var ConfirmModal = /* @__PURE__ */ __name(({
+  type,
+  buttons,
+  children,
+  description,
+  modalProps,
+  title
+}) => {
+  registerLayoutIcons();
+  const baseId = react$1.useId();
+  const titleId = `${baseId}-title`;
+  const descriptionId = `${baseId}-description`;
+  const look = TYPE_LOOK[type === "custom" ? "default" : type];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ModalWrapper,
+    {
+      ...modalProps,
+      role: "alertdialog",
+      closeOnOutsideClick: false,
+      labelledBy: type === "custom" ? modalProps.labelledBy : titleId,
+      describedBy: type === "custom" || !description ? modalProps.describedBy : descriptionId,
+      className: `max-w-sm border-2 ${modalProps.className ?? ""}`,
+      containerProps: {
+        ...modalProps.containerProps,
+        className: `p-6! ${modalProps.containerProps?.className ?? ""}`
+      },
+      style: {
+        ...modalProps.style,
+        borderColor: `rgba(${look.rgb}, 0.4)`,
+        boxShadow: `0 10px 10px 0px rgba(${look.rgb}, 0.1)`
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full place-items-center gap-6", children: [
+        type === "custom" ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "grid size-10 shrink-0 place-items-center rounded-full border p-2 md:size-12 lg:size-14",
+              style: {
+                borderColor: `rgba(${look.rgb}, 0.8)`,
+                background: `radial-gradient(circle, rgba(${look.rgb}, 0.25) 25%, rgba(${look.rgb}, 0.5) 50%, rgba(${look.rgb}, 0.75) 75%, rgba(${look.rgb}, 1) 100%)`,
+                boxShadow: `0 0 0 1px rgba(${look.rgb}, 0.08), 0 0 12px rgba(${look.rgb}, 0.18), 0 8px 24px rgba(${look.rgb}, 0.22)`
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: look.icon, className: "size-full" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.GradientText,
+              {
+                text: title,
+                type: "silver",
+                className: "block font-semibold text-shadow-lg md:text-lg lg:text-xl"
+              }
+            ) }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: descriptionId, className: "text-tertiary text-xs font-light lg:text-sm", children: description })
+          ] })
+        ] }),
+        buttons && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-center gap-4", children: [
+          buttons.left && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              pattern: "secondary",
+              ...buttons.left,
+              className: `max-h-10 rounded-md! ${buttons.left.className ?? ""}`,
+              buttonProps: {
+                ...buttons.left.buttonProps,
+                onClick: /* @__PURE__ */ __name((event) => {
+                  buttons.left?.buttonProps?.onClick?.(event);
+                  modalProps.onClose();
+                }, "onClick")
+              }
+            }
+          ),
+          buttons.right && /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              pattern: "primary",
+              ...buttons.right,
+              className: `max-h-10 rounded-md! ${buttons.right.className ?? ""}`,
+              buttonProps: {
+                ...buttons.right.buttonProps,
+                onClick: /* @__PURE__ */ __name((event) => {
+                  if (buttons.right?.buttonProps?.onClick)
+                    buttons.right.buttonProps.onClick(event);
+                  else modalProps.onClose();
+                }, "onClick")
+              }
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}, "ConfirmModal");
+var Dropdown = /* @__PURE__ */ __name(({
+  title,
+  icons,
+  children,
+  className = "",
+  defaultOpen = false,
+  closeOnOutsideClick = false,
+  closeOnEscape = false,
+  isAbsolute = false,
+  showShadow = false,
+  isRounded = false
+}) => {
+  registerLayoutIcons();
+  const baseId = react$1.useId();
+  const panelId = `${baseId}-panel`;
+  const [isOpen, setIsOpen] = react$1.useState(defaultOpen);
+  const ref = useDismiss(
+    () => {
+      setIsOpen(false);
+    },
+    { enabled: isOpen, outside: closeOnOutsideClick, escape: closeOnEscape }
+  );
+  const close = /* @__PURE__ */ __name(() => {
+    setIsOpen(false);
+  }, "close");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: `flex w-full flex-col items-start ${isAbsolute ? "relative" : "static"} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
+            className: "bg-primary-invert group flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-2 text-left transition-colors duration-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-crayola-c xl:py-3",
+            onClick: () => {
+              setIsOpen((current) => !current);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(inputs.InputIcon, { icon: icons?.left }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary text-sm font-medium whitespace-nowrap", children: title }),
+                /* @__PURE__ */ jsxRuntime.jsx(inputs.InputIcon, { icon: icons?.right })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.Icon,
+                {
+                  icon: "solar:alt-arrow-down-linear",
+                  className: `text-primary size-4 transition-transform duration-300 ease-in-out motion-reduce:transition-none md:size-5 ${isOpen ? "rotate-180" : "rotate-0"}`
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            id: panelId,
+            inert: !isOpen,
+            className: `bg-primary-invert grid w-full transition-[grid-template-rows,opacity] duration-500 ease-in-out motion-reduce:transition-none ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"} ${isAbsolute ? "absolute inset-x-0 top-full z-10 mt-2" : ""} ${showShadow ? "shadow-[rgba(var(--primary-rgb),0.08)_0px_4px_16px,rgba(var(--primary-rgb),0.1)_0px_8px_32px]" : ""} ${isRounded ? "rounded-lg" : ""}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden *:px-3 *:py-2", children: typeof children === "function" ? children({ close }) : children })
+          }
+        )
+      ]
+    }
+  );
+}, "Dropdown");
+var LoadingPage = /* @__PURE__ */ __name(({ text, className = "" }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: `bg-primary-invert/50 fixed inset-0 z-100 flex h-full w-full items-center justify-center ${className}`,
+    children: /* @__PURE__ */ jsxRuntime.jsx(LoadingRings, { text })
+  }
+), "LoadingPage");
+var BACK_ONLINE_TOAST_MS = 3e3;
+var NetworkStatusToaster = /* @__PURE__ */ __name(({ status, toaster }) => {
+  const hadTroubleRef = react$1.useRef(false);
+  const toasterRef = react$1.useRef(toaster);
+  react$1.useEffect(() => {
+    toasterRef.current = toaster;
+  });
+  react$1.useEffect(() => {
+    const current = toasterRef.current;
+    if (status === "online") {
+      if (!hadTroubleRef.current) return;
+      const toastId2 = current.success({
+        title: "Back online",
+        description: "You're connected to the internet again.",
+        closeTimer: BACK_ONLINE_TOAST_MS
+      });
+      const timer = window.setTimeout(() => {
+        hadTroubleRef.current = false;
+      }, BACK_ONLINE_TOAST_MS);
+      return () => {
+        window.clearTimeout(timer);
+        current.remove(toastId2);
+      };
+    }
+    hadTroubleRef.current = true;
+    const toastId = status === "offline" ? current.warning({
+      title: "You're offline",
+      description: "Check your internet connection. We'll reconnect when it's back.",
+      autoClose: false,
+      isClosable: false
+    }) : current.loading({
+      title: "Connecting to internet...",
+      description: "Hang tight, we're getting you back online."
+    });
+    return () => {
+      current.remove(toastId);
+    };
+  }, [status]);
+  return null;
+}, "NetworkStatusToaster");
 var ScrollToTop = /* @__PURE__ */ __name(({
   pathname,
   id = "main",
@@ -12,8 +703,8 @@ var ScrollToTop = /* @__PURE__ */ __name(({
   inline = "nearest",
   skipInitial = false
 }) => {
-  const scrolledPath = react.useRef(skipInitial ? pathname : void 0);
-  react.useEffect(() => {
+  const scrolledPath = react$1.useRef(skipInitial ? pathname : void 0);
+  react$1.useEffect(() => {
     if (scrolledPath.current === pathname) return;
     scrolledPath.current = pathname;
     const element = document.getElementById(id);
@@ -27,7 +718,56 @@ var ScrollToTop = /* @__PURE__ */ __name(({
   }, [pathname, id, behavior, block, inline]);
   return null;
 }, "ScrollToTop");
+var Skeleton = /* @__PURE__ */ __name(({ className = "", ...divProps }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    "aria-hidden": "true",
+    ...divProps,
+    className: `bg-primary/50 size-full animate-pulse rounded-xs motion-reduce:animate-none ${className}`
+  }
+), "Skeleton");
+var Table = /* @__PURE__ */ __name(({ className = "", ...props }) => /* @__PURE__ */ jsxRuntime.jsx("table", { ...props, className: `w-full table-auto ${className}` }), "Table");
+var TableHead = /* @__PURE__ */ __name(({ className = "", ...props }) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ...props, className: `border-y-primary/10 bg-primary/2 border-y ${className}` }), "TableHead");
+var TableBody = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ...props }), "TableBody");
+var TableRow = /* @__PURE__ */ __name(({ className = "", ...props }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ...props, className: `transition-colors duration-100 ${className}` }), "TableRow");
+var TableHeadCell = /* @__PURE__ */ __name(({
+  className = "",
+  scope = "col",
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "th",
+  {
+    ...props,
+    scope,
+    className: `text-primary/55 w-auto px-4 py-3 text-center text-xs font-semibold whitespace-nowrap uppercase transition-colors duration-100 ${className}`
+  }
+), "TableHeadCell");
+var TableRowCell = /* @__PURE__ */ __name(({ className = "", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "td",
+  {
+    ...props,
+    className: `w-auto px-4 py-3 text-center align-middle text-sm whitespace-nowrap ${className}`
+  }
+), "TableRowCell");
 
+exports.ApiStatus = ApiStatus;
+exports.BACK_ONLINE_TOAST_MS = BACK_ONLINE_TOAST_MS;
+exports.BorderGradient = BorderGradient;
+exports.ConfirmModal = ConfirmModal;
+exports.Dropdown = Dropdown;
+exports.LoadingPage = LoadingPage;
+exports.LoadingRings = LoadingRings;
+exports.LoadingText = LoadingText;
+exports.ModalWrapper = ModalWrapper;
+exports.NetworkStatusToaster = NetworkStatusToaster;
 exports.ScrollToTop = ScrollToTop;
+exports.ScrollableGradientContainer = ScrollableGradientContainer;
+exports.Skeleton = Skeleton;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableHead = TableHead;
+exports.TableHeadCell = TableHeadCell;
+exports.TableRow = TableRow;
+exports.TableRowCell = TableRowCell;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map