@optigrit/optigrit-ui 0.0.1

package/bin/cli.js

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/** Published package name (scoped). Keep in sync with package.json "name". */
+const PKG = '@optigrit/optigrit-ui';
+const PKG_NODE_MODULES = `./node_modules/${PKG}`;
+
+async function init() {
+  const args = process.argv.slice(2);
+  if (args[0] !== 'init') {
+    console.log(`Usage: npx optigrit-ui init   or   npx ${PKG} init`);
+    return;
+  }
+
+  const configNames = ['tailwind.config.js', 'tailwind.config.cjs', 'tailwind.config.mjs', 'tailwind.config.ts'];
+  const configPath = configNames.map(name => path.resolve(process.cwd(), name)).find(fs.existsSync);
+
+  if (!configPath) {
+    console.error('❌ Could not find tailwind.config file in the root directory.');
+    process.exit(1);
+  }
+
+  try {
+    let content = fs.readFileSync(configPath, 'utf8');
+
+    const legacyPresetPaths =
+      content.includes('./node_modules/optigrit-ui/tailwind.preset') ||
+      content.includes('optigrit-ui/tailwind.preset');
+    const scopedPresetPaths =
+      content.includes(`${PKG_NODE_MODULES}/tailwind.preset`) ||
+      content.includes(`${PKG}/tailwind.preset`);
+
+    // Update or add import statement
+    if (legacyPresetPaths || scopedPresetPaths) {
+      content = content.replace(/\.\/node_modules\/optigrit-ui\/tailwind\.preset/g, `${PKG}/preset`);
+      content = content.replace(/optigrit-ui\/tailwind\.preset/g, `${PKG}/preset`);
+      content = content.replace(
+        new RegExp(`\\.\\/node_modules\\/${PKG.replace(/\//g, '\\/')}\\/tailwind\\.preset`, 'g'),
+        `${PKG}/preset`,
+      );
+      content = content.replace(new RegExp(`${PKG.replace(/\//g, '\\/')}\\/tailwind\\.preset`, 'g'), `${PKG}/preset`);
+    } else if (!content.includes(`${PKG}/preset`)) {
+      content = `import preset from '${PKG}/preset'\n` + content;
+    }
+
+    const legacyContentGlob = './node_modules/optigrit-ui/**/*.{js,jsx,ts,tsx}';
+    const scopedContentGlob = `${PKG_NODE_MODULES}/**/*.{js,jsx,ts,tsx}`;
+
+    // Modify content array
+    if (!content.includes(legacyContentGlob) && !content.includes(scopedContentGlob)) {
+      content = content.replace(/content:\s*\[([\s\S]*?)\]/, (match, p1) => {
+        return `content: [\n    "${scopedContentGlob}",\n    ${p1.trim().replace(/\n\s*/g, '\n    ')}\n  ]`;
+      });
+    }
+
+    // Modify presets array
+    if (!content.includes('presets:')) {
+      // If module.exports exists, inject presets array inside
+      if (content.includes('module.exports = {')) {
+        content = content.replace(/module\.exports\s*=\s*\{/, "module.exports = {\n  presets: [preset],");
+      } else if (content.includes('export default {')) {
+        content = content.replace(/export\s+default\s*\{/, "export default {\n  presets: [preset],");
+      }
+    } else if (!content.includes('preset')) {
+      // If presets array already exists but preset is missing
+      content = content.replace(/presets:\s*\[([\s\S]*?)\]/, (match, p1) => {
+        return `presets: [preset${p1.trim() ? ', ' + p1.trim() : ''}]`;
+      });
+    }
+
+    fs.writeFileSync(configPath, content, 'utf8');
+    
+    // Copy index.css to src/ folder
+    const srcPath = path.resolve(process.cwd(), 'src');
+    if (!fs.existsSync(srcPath)) {
+      fs.mkdirSync(srcPath, { recursive: true });
+    }
+    const sourceCssPath = path.resolve(__dirname, '../index.css');
+    const targetCssPath = path.resolve(srcPath, 'index.css');
+    
+    if (fs.existsSync(sourceCssPath)) {
+      fs.copyFileSync(sourceCssPath, targetCssPath);
+      console.log('✅ Copied index.css to src/index.css');
+    } else {
+      console.warn(`⚠️ Could not find index.css in ${PKG} package.`);
+    }
+
+    console.log(`✅ ${PKG} initialized successfully!`);
+  } catch (error) {
+    console.error('❌ Error modifying tailwind.config file or copying index.css:', error);
+  }
+}
+
+init();

package/dist/Input-CL3wQvR_.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { HTMLAttributes, RefObject, ReactNode, InputHTMLAttributes } from 'react';
+
+type PopoverPosition = `${'top' | 'bottom' | 'left' | 'right'}-${'start' | 'center' | 'end'}`;
+type PopoverProps = HTMLAttributes<HTMLDivElement> & {
+    targetRef: RefObject<HTMLElement | null>;
+    position?: PopoverPosition;
+    open?: boolean;
+    onClose?: () => void;
+    onOpen?: (node: HTMLDivElement) => void;
+};
+
+type InputProps = {
+    label?: string;
+    labelShrink?: boolean;
+    required?: boolean;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    bgColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    primaryColor?: string;
+    fullWidth?: boolean;
+    inputContainerProps?: HTMLAttributes<HTMLDivElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'required'>;
+declare const Input: react.ForwardRefExoticComponent<{
+    label?: string;
+    labelShrink?: boolean;
+    required?: boolean;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    bgColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    primaryColor?: string;
+    fullWidth?: boolean;
+    inputContainerProps?: HTMLAttributes<HTMLDivElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "required"> & react.RefAttributes<HTMLInputElement>>;
+
+export { Input as I, type PopoverProps as P, type InputProps as a };

package/dist/ThemeProvider-D_1vZWeu.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import react__default from 'react';
+
+type Theme = "dark" | "light" | "system";
+type ThemeProviderProps = {
+    children: react__default.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+};
+type ThemeProviderState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+declare function ThemeProvider({ children, defaultTheme, storageKey, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare const useTheme: () => ThemeProviderState;
+
+export { type Theme as T, ThemeProvider as a, type ThemeProviderProps as b, type ThemeProviderState as c, useTheme as u };

package/dist/chunk-2LJSVQ6B.js

@@ -0,0 +1,465 @@
+import {
+  colorMix
+} from "./chunk-MCQS3QNN.js";
+
+// src/core/Popover/Popover.tsx
+import { Fragment, useEffect, useLayoutEffect, useRef } from "react";
+
+// src/core/Popover/Popover.utils.ts
+function calculatePopoverStyle(container, defaultPosition) {
+  const rect = container.getBoundingClientRect();
+  const { top, left, bottom, right, width, height } = rect;
+  const [position, align = "center"] = defaultPosition.split("-");
+  const style = {};
+  let transform = "";
+  const round = (v) => Math.round(v);
+  if (["top", "bottom"].includes(position ?? "")) {
+    if (position === "top") style.bottom = `${round(window.innerHeight - top)}px`;
+    if (position === "bottom") style.top = `${round(bottom)}px`;
+    if (align === "start") style.left = `${round(left)}px`;
+    if (align === "end") style.right = `${round(window.innerWidth - right)}px`;
+    if (align === "center") {
+      style.left = `${round(left + width / 2)}px`;
+      transform += " translateX(-50%)";
+      style.transformOrigin = "0";
+    }
+  }
+  if (["left", "right"].includes(position ?? "")) {
+    if (position === "left") style.right = `${round(window.innerWidth - left)}px`;
+    if (position === "right") style.left = `${round(right)}px`;
+    if (align === "start") style.top = `${round(top)}px`;
+    if (align === "end") style.bottom = `${round(window.innerHeight - bottom)}px`;
+    if (align === "center") {
+      style.top = `${round(top + height / 2)}px`;
+      transform += " translateY(-50%)";
+      style.transformOrigin = "50% 0";
+    }
+  }
+  style.transform = transform.trim();
+  return style;
+}
+
+// src/core/Popover/Popover.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Popover(props) {
+  const {
+    targetRef,
+    children,
+    open,
+    onClose,
+    position: _position = "bottom-center",
+    onOpen,
+    ...popoverProps
+  } = props;
+  const popoverRef = useRef(null);
+  const popoverPosition = useRef(_position);
+  function handlePopoverIntersect() {
+    if (!popoverRef.current) return;
+    const popoverRect = popoverRef.current.getBoundingClientRect();
+    if (popoverRect.top < 0) {
+      popoverPosition.current = popoverPosition.current.replace("top", "bottom");
+    } else if (popoverRect.bottom > window.innerHeight) {
+      popoverPosition.current = popoverPosition.current.replace("bottom", "top");
+    }
+    if (popoverRect.left < 0) {
+      popoverPosition.current = popoverPosition.current.replace("left", "right");
+    } else if (popoverRect.right > window.innerWidth) {
+      popoverPosition.current = popoverPosition.current.replace("right", "left");
+    }
+    handleResize();
+  }
+  function showPopover() {
+    if (!popoverRef.current) return;
+    popoverPosition.current = _position;
+    popoverRef.current.style.display = "flex";
+    setTimeout(() => {
+      if (!popoverRef.current) return;
+      popoverRef.current.style.opacity = "1";
+      popoverRef.current.style.scale = "1";
+      handlePopoverIntersect();
+      onOpen?.(popoverRef.current);
+    }, 10);
+  }
+  function hidePopover() {
+    if (!popoverRef.current) return;
+    popoverRef.current.style.opacity = "0";
+    popoverRef.current.style.scale = "0.8";
+    setTimeout(() => {
+      if (!popoverRef.current) return;
+      popoverRef.current.style.display = "none";
+    }, 200);
+  }
+  function handleClickOutside(event) {
+    if (event.target !== event.currentTarget) return;
+    onClose?.();
+  }
+  function handleResize() {
+    if (!popoverRef.current || !targetRef.current) return;
+    Object.assign(
+      popoverRef.current.style,
+      calculatePopoverStyle(targetRef.current, popoverPosition.current)
+    );
+  }
+  useLayoutEffect(() => {
+    if (!popoverRef.current || !targetRef.current) return;
+    handleResize();
+    const resizeObserver = new ResizeObserver(handlePopoverIntersect);
+    resizeObserver.observe(popoverRef.current);
+    resizeObserver.observe(window.document.body);
+    window.addEventListener("scroll", handlePopoverIntersect, true);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", handlePopoverIntersect, true);
+    };
+  }, [targetRef?.current]);
+  useLayoutEffect(() => {
+    if (_position) popoverPosition.current = _position;
+    handleResize();
+  }, [_position]);
+  useEffect(() => {
+    if (open) showPopover();
+    else hidePopover();
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed w-[100dvw] h-[100dvh] left-0 top-0",
+        style: { display: open ? "block" : "none" },
+        onClick: handleClickOutside
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...popoverProps,
+        ref: popoverRef,
+        style: {
+          display: "flex",
+          position: "fixed",
+          transition: "all 200ms",
+          opacity: 0,
+          scale: 0.8,
+          ...popoverProps.style
+        },
+        children
+      }
+    )
+  ] });
+}
+
+// src/shared/utils/helper.ts
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/core/Input/Input.tsx
+import { forwardRef, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Input = forwardRef((props, ref) => {
+  const {
+    label,
+    startIcon,
+    endIcon,
+    required,
+    fullWidth = false,
+    labelShrink = false,
+    bgColor = "white",
+    textColor = "black",
+    borderColor = "black",
+    primaryColor = "royalblue",
+    inputContainerProps = {},
+    ...inputProps
+  } = props;
+  const container = useRef2(null);
+  const [isFocus, setIsFocus] = useState(false);
+  function handleOnFocus(e) {
+    handleResize();
+    setIsFocus(true);
+    props.onFocus?.(e);
+  }
+  function handleOnBlur(e) {
+    handleResize();
+    setIsFocus(false);
+    props.onBlur?.(e);
+  }
+  function handleResize() {
+    if (!container.current) return;
+    const { offsetWidth: startIconWidth = 0 } = container.current.querySelector("#start-icon");
+    const { offsetWidth: endIconWidth = 0 } = container.current.querySelector("#end-icon");
+    const label2 = container.current.querySelector("#label");
+    const input = container.current.querySelector("input");
+    Object.assign(label2.style, document.activeElement === input || input.value || labelShrink === void 0 || labelShrink ? {
+      left: "2px",
+      backgroundColor: bgColor,
+      transform: "translateY(-22px) scale(0.75)"
+    } : {
+      left: `${startIconWidth + 8}px`,
+      backgroundColor: "transparent",
+      transform: "translateY(0) scale(1)"
+    });
+    Object.assign(input.style, {
+      paddingLeft: startIcon ? `${startIconWidth + 8}px` : "8px",
+      paddingRight: endIcon ? `${endIconWidth + 8}px` : "8px"
+    });
+  }
+  useLayoutEffect2(() => {
+    if (!container.current) return;
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(container.current);
+    handleResize();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [container.current]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...inputContainerProps,
+      ref: container,
+      style: {
+        "--bg-color": bgColor,
+        "--text-color": textColor,
+        "--placeholder-color": colorMix(textColor, 80),
+        "--border-color": colorMix(borderColor, 50),
+        "--border-color-hover": colorMix(borderColor, 100),
+        "--light-primary-color": colorMix(primaryColor, 50),
+        "--primary-color": colorMix(primaryColor, 100),
+        width: fullWidth === void 0 || fullWidth ? "100%" : "auto",
+        ...inputContainerProps?.style
+      },
+      className: cn(
+        "flex items-center gap-1 border rounded-md h-[44px] p-1 transition-all duration-200 relative bg-[var(--bg-color)]",
+        isFocus ? "ring-2 ring-[var(--light-primary-color)] border-[var(--primary-color)]" : "border-[var(--border-color)] hover:border-[var(--border-color-hover)]",
+        inputContainerProps?.className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            id: "label",
+            className: "absolute bg-[var(--bg-color)] text-[var(--text-color)] px-1 rounded-sm transition-all duration-200 select-none cursor-text",
+            onClick: () => container.current?.querySelector("input")?.focus(),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { id: "start-icon", className: "absolute left-0 h-full flex items-center justify-center", children: startIcon }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ...inputProps,
+            value: inputProps.value,
+            ref,
+            required: required === void 0 || required,
+            className: cn(
+              "w-full h-full border-none outline-none rounded-sm transition-all duration-200 placeholder-[var(--placeholder-color)] text-[var(--text-color)] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--text-color)] bg-[var(--bg-color)]",
+              isFocus || !label || labelShrink === void 0 || labelShrink ? "" : "placeholder:opacity-0",
+              inputProps.className
+            ),
+            onFocus: handleOnFocus,
+            onBlur: handleOnBlur
+          }
+        ),
+        /* @__PURE__ */ jsx2("div", { id: "end-icon", className: "absolute right-0 h-full flex items-center justify-center", children: endIcon })
+      ]
+    }
+  );
+});
+
+// src/core/ShowWithAnimation/index.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState2 } from "react";
+
+// src/core/ShowWithAnimation/const.ts
+var defaultAnimationStyle = {
+  fade: {
+    children: {
+      from: {
+        opacity: "0",
+        scale: "0.95"
+      },
+      active: {
+        opacity: "1",
+        scale: "1"
+      },
+      to: {
+        opacity: "0",
+        scale: "1.05"
+      }
+    }
+  },
+  slide: {
+    children: {
+      from: {
+        opacity: "0",
+        scale: "0.95",
+        transform: "translateY(20px)"
+      },
+      active: {
+        opacity: "1",
+        scale: "1",
+        transform: "translateY(0px)"
+      }
+    }
+  }
+};
+
+// src/core/ShowWithAnimation/index.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ShowWithAnimation(props) {
+  const {
+    when,
+    children,
+    containerProps,
+    animationStyle,
+    otherwise = null,
+    removeOnHide = false,
+    animationType = "fade",
+    animationDuration = 300,
+    ...wrapperProps
+  } = props;
+  if (animationStyle) {
+    if (!animationStyle.children.to) {
+      animationStyle.children.to = animationStyle.children.from;
+    }
+    if (!animationStyle.otherwise) {
+      animationStyle.otherwise = animationStyle.children;
+    }
+    if (!animationStyle.otherwise.to) {
+      animationStyle.otherwise.to = animationStyle.otherwise.from;
+    }
+  }
+  const defaultAnimationStyle2 = (() => {
+    const animationStyle2 = defaultAnimationStyle[animationType];
+    if (!animationStyle2.children.to) {
+      animationStyle2.children.to = animationStyle2.children.from;
+    }
+    if (!animationStyle2.otherwise) {
+      animationStyle2.otherwise = animationStyle2.children;
+    }
+    if (!animationStyle2.otherwise.to) {
+      animationStyle2.otherwise.to = animationStyle2.otherwise.from;
+    }
+    return animationStyle2;
+  })();
+  const childrenContainer = useRef3(null);
+  const otherwiseContainer = useRef3(null);
+  const [isChildrenVisible, setIsChildrenVisible] = useState2(when);
+  const [isOtherwiseVisible, setIsOtherwiseVisible] = useState2(!when);
+  function handleShow() {
+    setIsChildrenVisible(true);
+    setTimeout(() => {
+      if (!childrenContainer.current) return;
+      Object.assign(childrenContainer.current.style, {
+        visibility: "visible",
+        ...defaultAnimationStyle2?.children.active,
+        ...animationStyle?.children.active,
+        transitionDuration: `${animationDuration}ms`
+      });
+    }, 10);
+    if (!otherwiseContainer.current) return;
+    Object.assign(otherwiseContainer.current.style, {
+      visibility: "hidden",
+      ...defaultAnimationStyle2?.otherwise?.to,
+      ...animationStyle?.otherwise?.to,
+      transitionDuration: `${animationDuration}ms`
+    });
+    otherwiseContainer.current.addEventListener("transitionend", handleOtherwiseTransitionEnd, { once: true });
+  }
+  function handleHide() {
+    setIsOtherwiseVisible(true);
+    setTimeout(() => {
+      if (!otherwiseContainer.current) return;
+      Object.assign(otherwiseContainer.current.style, {
+        visibility: "visible",
+        ...defaultAnimationStyle2?.otherwise?.active,
+        ...animationStyle?.otherwise?.active,
+        transitionDuration: `${animationDuration}ms`
+      });
+    }, 10);
+    if (!childrenContainer.current) return;
+    Object.assign(childrenContainer.current.style, {
+      visibility: "hidden",
+      ...defaultAnimationStyle2?.children.to,
+      ...animationStyle?.children.to,
+      transitionDuration: `${animationDuration}ms`
+    });
+    childrenContainer.current.addEventListener("transitionend", handleChildrenTransitionEnd, { once: true });
+  }
+  function handleChildrenTransitionEnd() {
+    if (!childrenContainer.current) return;
+    if (childrenContainer.current?.style.visibility === "visible") return;
+    if (removeOnHide) return setIsChildrenVisible(false);
+    Object.assign(childrenContainer.current.style, {
+      ...defaultAnimationStyle2?.children.from,
+      ...animationStyle?.children.from,
+      transitionDuration: "0ms"
+    });
+  }
+  function handleOtherwiseTransitionEnd() {
+    if (!otherwiseContainer.current) return;
+    if (otherwiseContainer.current?.style.visibility === "visible") return;
+    if (removeOnHide) return setIsOtherwiseVisible(false);
+    Object.assign(otherwiseContainer.current.style, {
+      ...defaultAnimationStyle2?.otherwise?.from,
+      ...animationStyle?.otherwise?.from,
+      transitionDuration: "0ms"
+    });
+  }
+  useLayoutEffect3(() => {
+    when ? handleShow() : handleHide();
+  }, [when]);
+  return removeOnHide && !isChildrenVisible && otherwise === null ? null : /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ...containerProps,
+      className: cn("relative flex items-center justify-center", containerProps?.className),
+      style: { ...containerProps?.style, position: "relative" },
+      children: [
+        isChildrenVisible ? /* @__PURE__ */ jsx3(
+          "div",
+          {
+            ...wrapperProps,
+            ref: childrenContainer,
+            id: "children-container",
+            style: {
+              ...defaultAnimationStyle2?.children.from,
+              ...animationStyle?.children.from,
+              ...wrapperProps.style,
+              position: when ? "relative" : otherwise ? "absolute" : "relative"
+            },
+            children
+          }
+        ) : null,
+        otherwise && isOtherwiseVisible ? /* @__PURE__ */ jsx3(
+          "div",
+          {
+            ...wrapperProps,
+            ref: otherwiseContainer,
+            id: "otherwise-container",
+            style: {
+              ...defaultAnimationStyle2?.otherwise?.from,
+              ...animationStyle?.otherwise?.from,
+              transitionDuration: `all ${animationDuration}ms`,
+              ...wrapperProps.style,
+              position: when ? "absolute" : "relative"
+            },
+            children: otherwise
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/core/Show/index.tsx
+function Show({ when, children, otherwise = null }) {
+  return when ? children : otherwise;
+}
+
+export {
+  Popover,
+  cn,
+  Input,
+  ShowWithAnimation,
+  Show
+};

package/dist/chunk-KBOYMK4Y.js

@@ -0,0 +1,76 @@
+// src/hooks/useKeyboardShortcuts.ts
+import { useEffect } from "react";
+function useKeyboardShortcuts(shortcuts) {
+  function handleKeyDown(event) {
+    for (const shortcut of shortcuts) {
+      const { key, callback, options = {} } = shortcut;
+      if ([
+        event.key.toLowerCase() === key.toLowerCase(),
+        !!options.ctrl === event.ctrlKey,
+        !!options.shift === event.shiftKey,
+        !!options.alt === event.altKey,
+        !!options.meta === event.metaKey,
+        options.customKeyCheck ? options.customKeyCheck(event) : true
+      ].some((con) => con === false)) continue;
+      if (options.preventDefault) {
+        event.preventDefault();
+      }
+      callback(event);
+    }
+  }
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [shortcuts]);
+}
+
+// src/hooks/useTabNavigation.ts
+import { useLayoutEffect, useSyncExternalStore } from "react";
+function useTabNavigation(options = {}) {
+  const {
+    defaultTab: _defaultTab,
+    tabs = [],
+    urlKey = "tab",
+    replaceTab = false
+  } = options;
+  const defaultTab = _defaultTab ?? tabs[0];
+  const tab = useSyncExternalStore(subscribeToTabChange, getCurrentTab);
+  function subscribeToTabChange(callback) {
+    window.addEventListener("popstate", callback);
+    return () => {
+      window.removeEventListener("popstate", callback);
+    };
+  }
+  function getCurrentTab() {
+    const params = new URLSearchParams(window.location.search);
+    if (!params.has(urlKey)) return defaultTab;
+    return params.get(urlKey);
+  }
+  function setTab(newTab, replace = replaceTab) {
+    if (tab.length && !tabs.includes(newTab)) {
+      console.warn(`Invalid tab: ${newTab}. Valid tabs are: ${tabs.join(", ")}`);
+      return;
+    }
+    const params = new URLSearchParams(window.location.search);
+    params.set(urlKey, newTab);
+    const newUrl = `${window.location.pathname}?${params.toString()}`;
+    if (replace) {
+      window.history.replaceState({}, "", newUrl);
+      window.dispatchEvent(new PopStateEvent("popstate"));
+    } else {
+      window.history.pushState({}, "", newUrl);
+      window.dispatchEvent(new PopStateEvent("popstate"));
+    }
+  }
+  useLayoutEffect(() => {
+    setTab(tab, true);
+  }, []);
+  return { tab, setTab };
+}
+
+export {
+  useKeyboardShortcuts,
+  useTabNavigation
+};