@azmr/ui 0.1.0 → 0.2.0

package/dist/display.js

@@ -0,0 +1,237 @@
+import {
+  motionPresets
+} from "./chunk-GLB75NT3.js";
+import {
+  Icon
+} from "./chunk-Q4PPM2SU.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/display/alert.tsx
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import { forwardRef } from "react";
+
+// src/components/display/status.ts
+var STATUS = {
+  info: {
+    token: "info",
+    textToken: "info",
+    alert: "border-info/30 bg-info/10",
+    badge: "border-transparent bg-info/15 text-info",
+    icon: "text-info"
+  },
+  success: {
+    token: "success",
+    textToken: "success",
+    alert: "border-success/30 bg-success/10",
+    badge: "border-transparent bg-success/15 text-success",
+    icon: "text-success"
+  },
+  warning: {
+    token: "warning",
+    textToken: "warning-text",
+    alert: "border-warning/40 bg-warning/10",
+    badge: "border-transparent bg-warning/15 text-warning-text",
+    icon: "text-warning-text"
+  },
+  destructive: {
+    token: "destructive",
+    textToken: "destructive",
+    alert: "border-destructive/30 bg-destructive/10",
+    badge: "border-transparent bg-destructive/10 text-destructive",
+    icon: "text-destructive"
+  }
+};
+
+// src/components/display/alert.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_ICONS = {
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  destructive: CircleAlert
+};
+var Alert = forwardRef(function Alert2({ variant = "info", icon, onDismiss, dismissLabel = "Dismiss", className, children, ...props }, ref) {
+  const status = STATUS[variant];
+  const role = variant === "warning" || variant === "destructive" ? "alert" : "status";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role,
+      className: cn(
+        "relative flex w-full items-start gap-3 rounded-lg border p-4 text-sm text-foreground",
+        status.alert,
+        onDismiss && "pr-11",
+        className
+      ),
+      ...props,
+      children: [
+        icon === void 0 ? /* @__PURE__ */ jsx(Icon, { icon: DEFAULT_ICONS[variant], className: cn("mt-0.5", status.icon) }) : icon,
+        /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-1", children }),
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": dismissLabel,
+            onClick: onDismiss,
+            className: "absolute top-3 right-3 rounded-sm p-1 opacity-70 outline-none transition-opacity duration-(--motion-duration-fast) hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring",
+            children: /* @__PURE__ */ jsx(Icon, { icon: X, size: "sm" })
+          }
+        )
+      ]
+    }
+  );
+});
+var AlertTitle = forwardRef(
+  function AlertTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("font-medium leading-none", className), ...props });
+  }
+);
+var AlertDescription = forwardRef(
+  function AlertDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm leading-relaxed", className), ...props });
+  }
+);
+
+// src/components/display/badge.tsx
+import { cva } from "class-variance-authority";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "inline-flex shrink-0 items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "border-border text-foreground",
+        destructive: STATUS.destructive.badge,
+        success: STATUS.success.badge,
+        warning: STATUS.warning.badge,
+        info: STATUS.info.badge
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var Badge = forwardRef2(function Badge2({ variant, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx2("span", { ref, className: cn(badgeVariants({ variant }), className), ...props });
+});
+
+// src/components/display/card.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Card = forwardRef3(function Card2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-xl border border-border bg-card text-card-foreground shadow-elevation-1",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var CardHeader = forwardRef3(function CardHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3("div", { ref, className: cn("flex flex-col gap-1.5 p-6", className), ...props });
+});
+var CardTitle = forwardRef3(function CardTitle2({ as: Component = "h3", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(
+    Component,
+    {
+      ref,
+      className: cn("text-lg font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  );
+});
+var CardDescription = forwardRef3(function CardDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props });
+});
+var CardContent = forwardRef3(function CardContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3("div", { ref, className: cn("px-6 pb-6", className), ...props });
+});
+var CardFooter = forwardRef3(function CardFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3("div", { ref, className: cn("flex items-center px-6 pb-6", className), ...props });
+});
+
+// src/components/display/chip.tsx
+import { X as X2 } from "lucide-react";
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Chip = forwardRef4(function Chip2({ onRemove, removeLabel, className, children, ...props }, ref) {
+  const label = removeLabel ?? (typeof children === "string" ? `Remove ${children}` : "Remove");
+  return /* @__PURE__ */ jsxs2(Badge, { ref, className: cn(onRemove && "pr-1", className), ...props, children: [
+    children,
+    onRemove && /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        onClick: onRemove,
+        className: "rounded-sm p-0.5 outline-none transition-colors duration-(--motion-duration-fast) hover:bg-foreground/10 focus-visible:ring-2 focus-visible:ring-ring",
+        children: /* @__PURE__ */ jsx4(Icon, { icon: X2, size: "xs" })
+      }
+    )
+  ] });
+});
+
+// src/components/display/empty-state.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var EmptyState = forwardRef5(function EmptyState2({ title, description, icon, action, headingLevel = 3, className, ...props }, ref) {
+  const Title = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-center gap-2 px-6 py-10 text-center", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx5("div", { className: "text-muted-foreground", children: icon }),
+        /* @__PURE__ */ jsx5(Title, { className: "text-lg font-semibold tracking-tight text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx5("p", { className: "max-w-sm text-sm text-muted-foreground", children: description }),
+        action && /* @__PURE__ */ jsx5("div", { className: "mt-2", children: action })
+      ]
+    }
+  );
+});
+
+// src/components/display/skeleton.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Skeleton = forwardRef6(function Skeleton2({ animate = true, shimmer = false, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: cn(
+        "rounded-md bg-muted",
+        animate && (shimmer ? motionPresets.shimmer : "animate-pulse"),
+        className
+      ),
+      ...props
+    }
+  );
+});
+export {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Chip,
+  EmptyState,
+  Skeleton,
+  badgeVariants
+};

package/dist/floating.d.ts

@@ -0,0 +1,81 @@
+import * as _base_ui_react from '@base-ui/react';
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import { PreviewCard } from '@base-ui/react/preview-card';
+import { P as PositionProps } from './shared-Fkx-sjPt.js';
+export { A as Align, S as Side } from './shared-Fkx-sjPt.js';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+
+/**
+ * Shared tooltip timing. Hovering waits `TOOLTIP_DELAY_MS` before a tooltip shows, so sweeping
+ * the pointer across a toolbar does not flash every tip; once one is showing, its neighbours
+ * open at once (Base UI's provider handles that grouping). Closing is immediate.
+ */
+declare const TOOLTIP_DELAY_MS = 500;
+declare const TOOLTIP_CLOSE_DELAY_MS = 0;
+
+/**
+ * A preview of a link's target, shown on hover and keyboard focus of the link. The link works
+ * without the card, so the card must only ever be a convenience: it is not announced as a
+ * dialog, it does not open on touch, and nothing in it may be the only way to reach something.
+ */
+declare const HoverCard: <Payload>(props: PreviewCard.Root.Props<Payload>) => react.JSX.Element;
+/** The link the card previews. Renders an `<a>`: give it an `href`. */
+declare const HoverCardTrigger: PreviewCard.Trigger;
+type HoverCardContentProps = Omit<ComponentPropsWithoutRef<typeof PreviewCard.Popup>, "className"> & PositionProps & {
+    className?: string;
+};
+declare const HoverCardContent: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.PreviewCardPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & PositionProps & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * A panel anchored to a button, opened by click or Enter and Space. Focus moves into it, Tab
+ * moves through its content, and Escape or an outside click closes it and returns focus to the
+ * trigger. Use it for anything interactive; for a short label use `Tooltip`.
+ */
+declare const Popover: typeof Popover$1.Root;
+declare const PopoverTrigger: Popover$1.Trigger;
+/** Closes the popover. Put it inside `PopoverContent`. */
+declare const PopoverClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+type PopoverContentProps = Omit<ComponentPropsWithoutRef<typeof Popover$1.Popup>, "className"> & PositionProps & {
+    className?: string;
+};
+/**
+ * The panel. It is named by `PopoverTitle` (or `aria-label`) and described by
+ * `PopoverDescription`. Its size is capped to the space available, so it scrolls instead of
+ * running off the viewport.
+ */
+declare const PopoverContent: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.PopoverPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & PositionProps & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const PopoverTitle: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.PopoverTitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLHeadingElement>>;
+declare const PopoverDescription: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.PopoverDescriptionProps, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
+    className?: string;
+} & react.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Shares one delay across every tooltip inside it: the first waits `delay`, then its neighbours
+ * open at once while one is showing. Wrap a toolbar, or the app.
+ */
+declare function TooltipProvider({ delay, closeDelay, ...props }: ComponentPropsWithoutRef<typeof Tooltip$1.Provider>): react.JSX.Element;
+/**
+ * A short label for a control, shown on hover and keyboard focus. It describes the trigger
+ * (`aria-describedby` while open), is dismissed with Escape, and never takes the pointer.
+ *
+ * Touch: there is no hover, so it does not open on touch. Never put essential information in a
+ * tooltip; use a `Popover` when people on touch devices need the content.
+ */
+declare function Tooltip({ open, defaultOpen, onOpenChange, ...props }: ComponentPropsWithoutRef<typeof Tooltip$1.Root>): react.JSX.Element;
+declare const TooltipTrigger: react.ForwardRefExoticComponent<Omit<Tooltip$1.Trigger.Props<unknown> & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
+type TooltipContentProps = Omit<ComponentPropsWithoutRef<typeof Tooltip$1.Popup>, "className"> & PositionProps & {
+    className?: string;
+};
+declare const TooltipContent: react.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.TooltipPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref">, "className"> & PositionProps & {
+    className?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { HoverCard, HoverCardContent, type HoverCardContentProps, HoverCardTrigger, Popover, PopoverClose, PopoverContent, type PopoverContentProps, PopoverDescription, PopoverTitle, PopoverTrigger, PositionProps, TOOLTIP_CLOSE_DELAY_MS, TOOLTIP_DELAY_MS, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger };

package/dist/floating.js

@@ -0,0 +1,231 @@
+"use client";
+import {
+  FLOATING_MOTION,
+  POSITION_DEFAULTS
+} from "./chunk-LZMX27IZ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/floating/delays.ts
+var TOOLTIP_DELAY_MS = 500;
+var TOOLTIP_CLOSE_DELAY_MS = 0;
+
+// src/components/floating/hover-card.tsx
+import { forwardRef } from "react";
+
+// src/primitives/preview-card.ts
+import { PreviewCard } from "@base-ui/react/preview-card";
+
+// src/components/floating/hover-card.tsx
+import { jsx } from "react/jsx-runtime";
+var HoverCard = PreviewCard.Root;
+var HoverCardTrigger = PreviewCard.Trigger;
+var HoverCardContent = forwardRef(
+  function HoverCardContent2({
+    side,
+    align,
+    sideOffset = POSITION_DEFAULTS.sideOffset,
+    collisionPadding = POSITION_DEFAULTS.collisionPadding,
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(
+      PreviewCard.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        className: "z-(--z-popover)",
+        children: /* @__PURE__ */ jsx(
+          PreviewCard.Popup,
+          {
+            ref,
+            className: cn(
+              "max-h-(--available-height) w-64 max-w-(--available-width) overflow-auto rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-elevation-3 outline-none",
+              FLOATING_MOTION,
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
+);
+
+// src/components/floating/popover.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/primitives/popover.ts
+import { Popover } from "@base-ui/react/popover";
+
+// src/components/floating/popover.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Popover2 = Popover.Root;
+var PopoverTrigger = Popover.Trigger;
+var PopoverClose = Popover.Close;
+var PopoverContent = forwardRef2(
+  function PopoverContent2({
+    side,
+    align,
+    sideOffset = POSITION_DEFAULTS.sideOffset,
+    collisionPadding = POSITION_DEFAULTS.collisionPadding,
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsx2(Popover.Portal, { children: /* @__PURE__ */ jsx2(
+      Popover.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        className: "z-(--z-popover)",
+        children: /* @__PURE__ */ jsx2(
+          Popover.Popup,
+          {
+            ref,
+            className: cn(
+              "max-h-(--available-height) w-72 max-w-(--available-width) overflow-auto rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-elevation-3 outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              FLOATING_MOTION,
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
+);
+var PopoverTitle = forwardRef2(function PopoverTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(
+    Popover.Title,
+    {
+      ref,
+      className: cn("text-sm font-medium leading-none", className),
+      ...props
+    }
+  );
+});
+var PopoverDescription = forwardRef2(function PopoverDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx2(
+    Popover.Description,
+    {
+      ref,
+      className: cn("mt-1 text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+
+// src/components/floating/tooltip.tsx
+import {
+  createContext,
+  forwardRef as forwardRef3,
+  useContext,
+  useId,
+  useState
+} from "react";
+
+// src/primitives/tooltip.ts
+import { Tooltip } from "@base-ui/react/tooltip";
+
+// src/components/floating/tooltip.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TooltipProvider({
+  delay = TOOLTIP_DELAY_MS,
+  closeDelay = TOOLTIP_CLOSE_DELAY_MS,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(Tooltip.Provider, { delay, closeDelay, ...props });
+}
+var TooltipLink = createContext(null);
+function Tooltip2({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  ...props
+}) {
+  const id = useId();
+  const [internal, setInternal] = useState(defaultOpen);
+  const isOpen = open ?? internal;
+  return /* @__PURE__ */ jsx3(TooltipLink.Provider, { value: { id, open: isOpen }, children: /* @__PURE__ */ jsx3(
+    Tooltip.Root,
+    {
+      open: isOpen,
+      onOpenChange: (next, details) => {
+        setInternal(next);
+        onOpenChange?.(next, details);
+      },
+      ...props
+    }
+  ) });
+}
+var TooltipTrigger = forwardRef3(function TooltipTrigger2(props, ref) {
+  const link = useContext(TooltipLink);
+  return /* @__PURE__ */ jsx3(
+    Tooltip.Trigger,
+    {
+      ref,
+      "aria-describedby": link?.open ? link.id : void 0,
+      ...props
+    }
+  );
+});
+var TooltipContent = forwardRef3(
+  function TooltipContent2({
+    side,
+    align,
+    sideOffset = POSITION_DEFAULTS.sideOffset,
+    collisionPadding = POSITION_DEFAULTS.collisionPadding,
+    className,
+    ...props
+  }, ref) {
+    const link = useContext(TooltipLink);
+    return /* @__PURE__ */ jsx3(Tooltip.Portal, { children: /* @__PURE__ */ jsx3(
+      Tooltip.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        collisionPadding,
+        className: "z-(--z-tooltip)",
+        children: /* @__PURE__ */ jsx3(
+          Tooltip.Popup,
+          {
+            ref,
+            id: link?.id,
+            role: "tooltip",
+            className: cn(
+              "pointer-events-none max-w-xs rounded-md bg-foreground px-2 py-1 text-xs text-background shadow-elevation-2",
+              FLOATING_MOTION,
+              // Moving from one tooltip to the next must not replay the animation.
+              "data-[instant]:transition-none",
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
+);
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  Popover2 as Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverTrigger,
+  TOOLTIP_CLOSE_DELAY_MS,
+  TOOLTIP_DELAY_MS,
+  Tooltip2 as Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};

package/dist/hooks.d.ts

@@ -0,0 +1,33 @@
+export { u as useSignal } from './useSignal-C-3ZGURN.js';
+import '@azmr/core';
+
+/**
+ * Whether the person has asked their system for reduced motion. It follows the setting while the app
+ * is open. On the server, and during hydration, it is `false`, so there is no mismatch; the global CSS
+ * already collapses animations for these people, so this is for JavaScript-driven motion (a count-up, a
+ * view transition) that CSS cannot reach.
+ */
+declare function useReducedMotion(): boolean;
+
+interface UseUrlTabOptions<T extends string> {
+    /** The search parameter that holds the tab. Default `tab`. */
+    param?: string;
+    /** The tabs the URL may select. Anything else in the URL is ignored. */
+    values: readonly T[];
+    /** The tab when the URL says nothing (or something not in `values`). Its URL has no parameter. */
+    defaultValue: T;
+    /** `replace` (default) rewrites the current entry; `push` adds a history entry per change. */
+    history?: "replace" | "push";
+}
+/**
+ * Keeps the selected tab in the URL (`?tab=billing`), so a tab can be linked to, reloaded, and
+ * reached with the back button. Router-agnostic: it reads and writes `window.location` and the
+ * History API.
+ *
+ * The URL is untrusted input: a value that is not in `values` is ignored, never passed on. On the
+ * server, and during hydration, the value is `defaultValue`, so there is no mismatch; it then
+ * follows the URL. Use it with `Tabs`: `<Tabs value={tab} onValueChange={setTab}>`.
+ */
+declare function useUrlTab<T extends string>({ param, values, defaultValue, history, }: UseUrlTabOptions<T>): [T, (next: T) => void];
+
+export { type UseUrlTabOptions, useReducedMotion, useUrlTab };

package/dist/hooks.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  useReducedMotion
+} from "./chunk-WVE2E37B.js";
+import {
+  useSignal
+} from "./chunk-CAJLW6K2.js";
+
+// src/use-url-tab.ts
+import { useCallback, useSyncExternalStore } from "react";
+var URL_CHANGE = "azmr:urlchange";
+function useUrlTab({
+  param = "tab",
+  values,
+  defaultValue,
+  history = "replace"
+}) {
+  const valuesKey = values.join("\0");
+  const value = useSyncExternalStore(
+    useCallback((notify) => {
+      window.addEventListener("popstate", notify);
+      window.addEventListener(URL_CHANGE, notify);
+      return () => {
+        window.removeEventListener("popstate", notify);
+        window.removeEventListener(URL_CHANGE, notify);
+      };
+    }, []),
+    () => {
+      const raw = new URLSearchParams(window.location.search).get(param);
+      return raw !== null && values.includes(raw) ? raw : defaultValue;
+    },
+    () => defaultValue
+  );
+  const setValue = useCallback(
+    (next) => {
+      if (!valuesKey.split("\0").includes(next)) {
+        throw new TypeError(`useUrlTab: "${next}" is not one of the allowed tabs`);
+      }
+      const url = new URL(window.location.href);
+      if (next === defaultValue) url.searchParams.delete(param);
+      else url.searchParams.set(param, next);
+      const target = `${url.pathname}${url.search}${url.hash}`;
+      if (history === "push") window.history.pushState(window.history.state, "", target);
+      else window.history.replaceState(window.history.state, "", target);
+      window.dispatchEvent(new Event(URL_CHANGE));
+    },
+    [param, valuesKey, defaultValue, history]
+  );
+  return [value, setValue];
+}
+export {
+  useReducedMotion,
+  useSignal,
+  useUrlTab
+};