react-floating-dock 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lemon Oluwatobi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,153 @@
-# Temporary Holding Version
+# react-floating-dock
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A floating, fully-rounded bottom navigation bar for React, in the style of WhatsApp's mobile tab
+bar: an animated pill slides behind the active tab, and an optional "More" button opens the rest
+of your destinations in a bottom sheet.
+
+Framework-agnostic — it doesn't assume Next.js, React Router, or Tailwind. Bring your own router's
+`Link` component and your own colors.
+
+![Example](./example/screenshot.png)
+
+## Install
+
+```bash
+npm install react-floating-dock framer-motion
+```
+
+`react`, `react-dom` and `framer-motion` are peer dependencies — install them if your project
+doesn't already have them.
+
+## Quick start
+
+```tsx
+import { FloatingDock, type DockItem } from "react-floating-dock";
+import "react-floating-dock/style.css";
+import { Home, Wallet, ArrowLeftRight, User, Settings } from "lucide-react";
+import Link from "next/link"; // or your router's Link
+import { usePathname } from "next/navigation";
+
+const items: DockItem[] = [
+  { key: "home", href: "/", label: "Home", icon: Home },
+  { key: "wallet", href: "/wallet", label: "Wallet", icon: Wallet },
+  { key: "activity", href: "/activity", label: "Activity", icon: ArrowLeftRight },
+];
+
+const moreItems: DockItem[] = [
+  { key: "profile", href: "/profile", label: "Profile", icon: User },
+  { key: "settings", href: "/settings", label: "Settings", icon: Settings },
+];
+
+export function AppNav() {
+  const pathname = usePathname();
+
+  return (
+    <FloatingDock
+      items={items}
+      moreItems={moreItems}
+      isActive={(href) => pathname === href}
+      LinkComponent={Link}
+    />
+  );
+}
+```
+
+That's it — four or five primary tabs, an overflow sheet for the rest, and a theme you can
+override with CSS custom properties.
+
+See [`example/`](./example) for a complete, runnable demo (`pnpm example`).
+
+## Why a `LinkComponent` prop instead of just using `<a>`?
+
+So client-side navigation works with whatever router you're on. Most router `Link` components
+accept `href`, `className` and `children` — the same shape this package expects — so passing
+`next/link`'s `Link`, React Router's `Link`, or TanStack Router's `Link` directly just works. If
+you don't pass one, it falls back to a plain `<a href>`.
+
+## API
+
+### `<FloatingDock />`
+
+| Prop             | Type                                  | Default        | Description                                                                 |
+| ----------------- | -------------------------------------- | -------------- | ----------------------------------------------------------------------------- |
+| `items`           | `DockItem[]`                           | —              | Destinations shown directly in the bar. Four or five is the sweet spot.       |
+| `moreItems`       | `DockItem[]`                           | `[]`           | Extra destinations shown in the overflow sheet. Omit to hide the "More" button entirely. |
+| `isActive`        | `(href: string) => boolean`            | —              | Tells the dock which item (if any) is the current page.                       |
+| `LinkComponent`   | `ComponentType<DockLinkProps>`         | plain `<a>`    | Your router's Link component.                                                 |
+| `moreLabel`       | `string`                               | `"More"`       | Label under the overflow button.                                              |
+| `moreSheetTitle`  | `string`                               | `"Menu"`       | Heading inside the overflow sheet.                                            |
+| `closeLabel`      | `string`                               | `"Close"`      | `aria-label` for the sheet's close button.                                    |
+| `extraContent`    | `ReactNode`                            | —              | Rendered below the overflow grid — a natural slot for a theme toggle, sign-out button, language switcher, etc. |
+| `ariaLabel`       | `string`                               | `"Main"`       | `aria-label` on the `<nav>` element.                                          |
+| `className`       | `string`                               | —              | Extra class on the `<nav>`, alongside the built-in one.                       |
+
+```ts
+interface DockItem {
+  key: string;       // React key, usually the same as href
+  href: string;
+  label: string;
+  icon: ComponentType<{ className?: string }>; // any icon component — lucide-react, heroicons, your own SVGs
+}
+```
+
+### `<DockDrawer />`
+
+The bottom sheet `FloatingDock` uses internally for its overflow menu. Exported separately because
+it's useful on its own for any mobile-style sheet (filters, a confirmation prompt, etc.).
+
+| Prop         | Type         | Default   | Description                        |
+| ------------ | ------------ | --------- | ----------------------------------- |
+| `open`       | `boolean`    | —         | Whether the sheet is visible.       |
+| `onClose`    | `() => void` | —         | Called on backdrop click, Escape, or the close button. |
+| `title`      | `string`     | —         | Heading shown in the sheet's header. |
+| `children`   | `ReactNode`  | —         | Sheet body.                          |
+| `closeLabel` | `string`     | `"Close"` | `aria-label` for the close button.   |
+
+## Styling
+
+Import `react-floating-dock/style.css` once, anywhere in your app. It's plain CSS driven entirely
+by custom properties, so no Tailwind (or any other build-time CSS tooling) is required.
+
+To theme it, redefine the variables wherever makes sense for your app — `:root` for a global
+theme, or a wrapper element for something scoped:
+
+```css
+:root {
+  --rfd-bg: rgba(255, 255, 255, 0.9);        /* bar + sheet background */
+  --rfd-bg-solid: #ffffff;                    /* sheet background (no backdrop-filter) */
+  --rfd-border: #e2e8f0;
+  --rfd-text: #0f172a;
+  --rfd-text-muted: #64748b;
+  --rfd-accent: #3b82f6;                      /* active tab color */
+  --rfd-accent-bg: rgba(59, 130, 246, 0.12);   /* active tab's pill background */
+  --rfd-accent-contrast: #ffffff;              /* text/icon color on top of --rfd-accent */
+  --rfd-hover: rgba(0, 0, 0, 0.05);
+  --rfd-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
+  --rfd-radius: 9999px;                        /* fully rounded by default — set a smaller value for softer corners */
+}
+```
+
+All of the dock's classes are prefixed `rfd-` to avoid collisions with the rest of your app's CSS.
+
+## Accessibility
+
+- The active tab gets `aria-current="page"`.
+- The overflow sheet is a `role="dialog"` with `aria-modal="true"`, traps body scroll while open,
+  and closes on Escape.
+- Every interactive element is a real `<button>` or your `LinkComponent`, so it's reachable and
+  operable by keyboard out of the box.
+
+## Development
+
+```bash
+pnpm install
+pnpm test        # vitest
+pnpm typecheck
+pnpm lint
+pnpm build        # outputs dist/ (ESM + CJS + types + style.css)
+pnpm example      # runs the example app against the live source, at localhost:5173
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,171 @@
+'use strict';
+
+var react = require('react');
+var framerMotion = require('framer-motion');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/FloatingDock.tsx
+function MoreHorizontalIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "24",
+      height: "24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5", cy: "12", r: "1" })
+      ]
+    }
+  );
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "24",
+      height: "24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function DockDrawer({ open, onClose, title, children, closeLabel = "Close" }) {
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => setMounted(true), []);
+  react.useEffect(() => {
+    if (!open) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open]);
+  react.useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!mounted) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rfd-overlay-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.motion.div,
+        {
+          className: "rfd-overlay",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          onClick: onClose
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title,
+          className: "rfd-sheet",
+          initial: { y: "100%" },
+          animate: { y: 0 },
+          exit: { y: "100%" },
+          transition: { type: "spring", damping: 28, stiffness: 300 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rfd-sheet-header", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "rfd-sheet-title", children: title }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, "aria-label": closeLabel, className: "rfd-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "rfd-close-icon" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rfd-sheet-body", children })
+          ]
+        }
+      )
+    ] }) }),
+    document.body
+  );
+}
+var DefaultLink = ({ href, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("a", { href, ...rest, children });
+function FloatingDock({
+  items,
+  moreItems = [],
+  isActive,
+  LinkComponent = DefaultLink,
+  moreLabel = "More",
+  moreSheetTitle = "Menu",
+  closeLabel = "Close",
+  extraContent,
+  ariaLabel = "Main",
+  className
+}) {
+  const [moreOpen, setMoreOpen] = react.useState(false);
+  const hasMore = moreItems.length > 0;
+  const moreActive = hasMore && moreItems.some((item) => isActive(item.href));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        "aria-label": ariaLabel,
+        className: ["rfd-bar", className].filter(Boolean).join(" "),
+        style: { bottom: "max(0.75rem, env(safe-area-inset-bottom))" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rfd-track", children: [
+          items.map(({ key, href, label, icon: Icon }) => {
+            const active = isActive(href);
+            return /* @__PURE__ */ jsxRuntime.jsxs(LinkComponent, { href, className: "rfd-tab", "aria-current": active ? "page" : void 0, children: [
+              active && /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.span,
+                {
+                  layoutId: "rfd-pill",
+                  transition: { type: "spring", stiffness: 260, damping: 26 },
+                  className: "rfd-pill"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: active ? "rfd-icon rfd-icon--active" : "rfd-icon" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: active ? "rfd-label rfd-label--active" : "rfd-label", children: label })
+            ] }, key);
+          }),
+          hasMore && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => setMoreOpen(true), "aria-label": moreLabel, className: "rfd-tab rfd-more-btn", children: [
+            moreActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rfd-pill" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MoreHorizontalIcon, { className: moreActive ? "rfd-icon rfd-icon--active" : "rfd-icon" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: moreActive ? "rfd-label rfd-label--active" : "rfd-label", children: moreLabel })
+          ] })
+        ] })
+      }
+    ),
+    hasMore && /* @__PURE__ */ jsxRuntime.jsxs(DockDrawer, { open: moreOpen, onClose: () => setMoreOpen(false), title: moreSheetTitle, closeLabel, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rfd-more-grid", children: moreItems.map(({ key, href, label, icon: Icon }) => {
+        const active = isActive(href);
+        return /* @__PURE__ */ jsxRuntime.jsxs(LinkComponent, { href, className: "rfd-more-item", onClick: () => setMoreOpen(false), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: active ? "rfd-more-icon-circle rfd-more-icon-circle--active" : "rfd-more-icon-circle", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "rfd-more-icon" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rfd-more-label", children: label })
+        ] }, key);
+      }) }),
+      extraContent
+    ] })
+  ] });
+}
+
+exports.DockDrawer = DockDrawer;
+exports.FloatingDock = FloatingDock;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons.tsx","../src/DockDrawer.tsx","../src/FloatingDock.tsx"],"names":["jsxs","jsx","useState","useEffect","createPortal","AnimatePresence","motion","Fragment"],"mappings":"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","file":"index.cjs","sourcesContent":["import type { SVGProps } from \"react\";\n\n/** Tiny built-in icons so the package has zero icon-library dependency. */\n\nexport function MoreHorizontalIcon(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"1\" />\n      <circle cx=\"19\" cy=\"12\" r=\"1\" />\n      <circle cx=\"5\" cy=\"12\" r=\"1\" />\n    </svg>\n  );\n}\n\nexport function CloseIcon(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n","\"use client\";\n\nimport { useEffect, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { CloseIcon } from \"./icons\";\n\nexport interface DockDrawerProps {\n  open: boolean;\n  onClose: () => void;\n  title: string;\n  children: ReactNode;\n  /** aria-label for the close button. @default \"Close\" */\n  closeLabel?: string;\n}\n\n/**\n * A bottom sheet on narrow viewports, a centered modal from `sm` up. Used by {@link FloatingDock}\n * for its overflow menu, but works standalone for any mobile-style sheet.\n */\nexport function DockDrawer({ open, onClose, title, children, closeLabel = \"Close\" }: DockDrawerProps) {\n  // Portals need a DOM node, which doesn't exist during SSR — render nothing until mounted client-side.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n\n  useEffect(() => {\n    if (!open) return;\n    const previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = previousOverflow;\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") onClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, onClose]);\n\n  if (!mounted) return null;\n\n  return createPortal(\n    <AnimatePresence>\n      {open && (\n        <div className=\"rfd-overlay-wrap\">\n          <motion.div\n            className=\"rfd-overlay\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={onClose}\n          />\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className=\"rfd-sheet\"\n            initial={{ y: \"100%\" }}\n            animate={{ y: 0 }}\n            exit={{ y: \"100%\" }}\n            transition={{ type: \"spring\", damping: 28, stiffness: 300 }}\n          >\n            <div className=\"rfd-sheet-header\">\n              <h2 className=\"rfd-sheet-title\">{title}</h2>\n              <button type=\"button\" onClick={onClose} aria-label={closeLabel} className=\"rfd-close-btn\">\n                <CloseIcon className=\"rfd-close-icon\" />\n              </button>\n            </div>\n            <div className=\"rfd-sheet-body\">{children}</div>\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>,\n    document.body,\n  );\n}\n","\"use client\";\n\nimport { useState, type ComponentType, type ReactNode } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { DockDrawer } from \"./DockDrawer\";\nimport { MoreHorizontalIcon } from \"./icons\";\n\nexport interface DockItem {\n  /** Unique React key. Usually the same as `href`. */\n  key: string;\n  href: string;\n  label: string;\n  icon: ComponentType<{ className?: string }>;\n}\n\nexport interface DockLinkProps {\n  href: string;\n  className?: string;\n  children?: ReactNode;\n  onClick?: () => void;\n  \"aria-current\"?: \"page\";\n}\n\nexport interface FloatingDockProps {\n  /** Destinations shown directly in the bar. Four or five is the sweet spot. */\n  items: DockItem[];\n  /** Extra destinations shown in the overflow sheet when the \"More\" button is pressed. */\n  moreItems?: DockItem[];\n  /** Tells the dock which item (if any) is the current page. */\n  isActive: (href: string) => boolean;\n  /**\n   * The component used to render each navigable item — swap in your router's Link\n   * (e.g. `next/link`, `react-router`'s `Link`) for client-side navigation.\n   * @default a plain anchor tag\n   */\n  LinkComponent?: ComponentType<DockLinkProps>;\n  /** @default \"More\" */\n  moreLabel?: string;\n  /** @default \"Menu\" */\n  moreSheetTitle?: string;\n  /** Passed through to the overflow sheet's close button. @default \"Close\" */\n  closeLabel?: string;\n  /** Rendered at the bottom of the overflow sheet — a natural slot for a theme toggle, sign-out, etc. */\n  extraContent?: ReactNode;\n  /** @default \"Main\" */\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst DefaultLink: ComponentType<DockLinkProps> = ({ href, children, ...rest }) => (\n  <a href={href} {...rest}>\n    {children}\n  </a>\n);\n\n/**\n * A floating, fully-rounded bottom navigation bar in the style of WhatsApp's mobile tab bar: an\n * animated pill highlights the active tab, and a \"More\" button opens the rest of your destinations\n * in a bottom sheet. Framework-agnostic — bring your own router via `LinkComponent`.\n */\nexport function FloatingDock({\n  items,\n  moreItems = [],\n  isActive,\n  LinkComponent = DefaultLink,\n  moreLabel = \"More\",\n  moreSheetTitle = \"Menu\",\n  closeLabel = \"Close\",\n  extraContent,\n  ariaLabel = \"Main\",\n  className,\n}: FloatingDockProps) {\n  const [moreOpen, setMoreOpen] = useState(false);\n  const hasMore = moreItems.length > 0;\n  const moreActive = hasMore && moreItems.some((item) => isActive(item.href));\n\n  return (\n    <>\n      <nav\n        aria-label={ariaLabel}\n        className={[\"rfd-bar\", className].filter(Boolean).join(\" \")}\n        style={{ bottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n      >\n        <div className=\"rfd-track\">\n          {items.map(({ key, href, label, icon: Icon }) => {\n            const active = isActive(href);\n            return (\n              <LinkComponent key={key} href={href} className=\"rfd-tab\" aria-current={active ? \"page\" : undefined}>\n                {active && (\n                  <motion.span\n                    layoutId=\"rfd-pill\"\n                    transition={{ type: \"spring\", stiffness: 260, damping: 26 }}\n                    className=\"rfd-pill\"\n                  />\n                )}\n                <Icon className={active ? \"rfd-icon rfd-icon--active\" : \"rfd-icon\"} />\n                <span className={active ? \"rfd-label rfd-label--active\" : \"rfd-label\"}>{label}</span>\n              </LinkComponent>\n            );\n          })}\n\n          {hasMore && (\n            <button type=\"button\" onClick={() => setMoreOpen(true)} aria-label={moreLabel} className=\"rfd-tab rfd-more-btn\">\n              {moreActive && <span className=\"rfd-pill\" />}\n              <MoreHorizontalIcon className={moreActive ? \"rfd-icon rfd-icon--active\" : \"rfd-icon\"} />\n              <span className={moreActive ? \"rfd-label rfd-label--active\" : \"rfd-label\"}>{moreLabel}</span>\n            </button>\n          )}\n        </div>\n      </nav>\n\n      {hasMore && (\n        <DockDrawer open={moreOpen} onClose={() => setMoreOpen(false)} title={moreSheetTitle} closeLabel={closeLabel}>\n          <div className=\"rfd-more-grid\">\n            {moreItems.map(({ key, href, label, icon: Icon }) => {\n              const active = isActive(href);\n              return (\n                <LinkComponent key={key} href={href} className=\"rfd-more-item\" onClick={() => setMoreOpen(false)}>\n                  <span className={active ? \"rfd-more-icon-circle rfd-more-icon-circle--active\" : \"rfd-more-icon-circle\"}>\n                    <Icon className=\"rfd-more-icon\" />\n                  </span>\n                  <span className=\"rfd-more-label\">{label}</span>\n                </LinkComponent>\n              );\n            })}\n          </div>\n          {extraContent}\n        </DockDrawer>\n      )}\n    </>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { ComponentType, ReactNode } from 'react';
+
+interface DockItem {
+    /** Unique React key. Usually the same as `href`. */
+    key: string;
+    href: string;
+    label: string;
+    icon: ComponentType<{
+        className?: string;
+    }>;
+}
+interface DockLinkProps {
+    href: string;
+    className?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+    "aria-current"?: "page";
+}
+interface FloatingDockProps {
+    /** Destinations shown directly in the bar. Four or five is the sweet spot. */
+    items: DockItem[];
+    /** Extra destinations shown in the overflow sheet when the "More" button is pressed. */
+    moreItems?: DockItem[];
+    /** Tells the dock which item (if any) is the current page. */
+    isActive: (href: string) => boolean;
+    /**
+     * The component used to render each navigable item — swap in your router's Link
+     * (e.g. `next/link`, `react-router`'s `Link`) for client-side navigation.
+     * @default a plain anchor tag
+     */
+    LinkComponent?: ComponentType<DockLinkProps>;
+    /** @default "More" */
+    moreLabel?: string;
+    /** @default "Menu" */
+    moreSheetTitle?: string;
+    /** Passed through to the overflow sheet's close button. @default "Close" */
+    closeLabel?: string;
+    /** Rendered at the bottom of the overflow sheet — a natural slot for a theme toggle, sign-out, etc. */
+    extraContent?: ReactNode;
+    /** @default "Main" */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * A floating, fully-rounded bottom navigation bar in the style of WhatsApp's mobile tab bar: an
+ * animated pill highlights the active tab, and a "More" button opens the rest of your destinations
+ * in a bottom sheet. Framework-agnostic — bring your own router via `LinkComponent`.
+ */
+declare function FloatingDock({ items, moreItems, isActive, LinkComponent, moreLabel, moreSheetTitle, closeLabel, extraContent, ariaLabel, className, }: FloatingDockProps): react.JSX.Element;
+
+interface DockDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    /** aria-label for the close button. @default "Close" */
+    closeLabel?: string;
+}
+/**
+ * A bottom sheet on narrow viewports, a centered modal from `sm` up. Used by {@link FloatingDock}
+ * for its overflow menu, but works standalone for any mobile-style sheet.
+ */
+declare function DockDrawer({ open, onClose, title, children, closeLabel }: DockDrawerProps): react.ReactPortal | null;
+
+export { DockDrawer, FloatingDock };
+export type { DockDrawerProps, DockItem, DockLinkProps, FloatingDockProps };

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { ComponentType, ReactNode } from 'react';
+
+interface DockItem {
+    /** Unique React key. Usually the same as `href`. */
+    key: string;
+    href: string;
+    label: string;
+    icon: ComponentType<{
+        className?: string;
+    }>;
+}
+interface DockLinkProps {
+    href: string;
+    className?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+    "aria-current"?: "page";
+}
+interface FloatingDockProps {
+    /** Destinations shown directly in the bar. Four or five is the sweet spot. */
+    items: DockItem[];
+    /** Extra destinations shown in the overflow sheet when the "More" button is pressed. */
+    moreItems?: DockItem[];
+    /** Tells the dock which item (if any) is the current page. */
+    isActive: (href: string) => boolean;
+    /**
+     * The component used to render each navigable item — swap in your router's Link
+     * (e.g. `next/link`, `react-router`'s `Link`) for client-side navigation.
+     * @default a plain anchor tag
+     */
+    LinkComponent?: ComponentType<DockLinkProps>;
+    /** @default "More" */
+    moreLabel?: string;
+    /** @default "Menu" */
+    moreSheetTitle?: string;
+    /** Passed through to the overflow sheet's close button. @default "Close" */
+    closeLabel?: string;
+    /** Rendered at the bottom of the overflow sheet — a natural slot for a theme toggle, sign-out, etc. */
+    extraContent?: ReactNode;
+    /** @default "Main" */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * A floating, fully-rounded bottom navigation bar in the style of WhatsApp's mobile tab bar: an
+ * animated pill highlights the active tab, and a "More" button opens the rest of your destinations
+ * in a bottom sheet. Framework-agnostic — bring your own router via `LinkComponent`.
+ */
+declare function FloatingDock({ items, moreItems, isActive, LinkComponent, moreLabel, moreSheetTitle, closeLabel, extraContent, ariaLabel, className, }: FloatingDockProps): react.JSX.Element;
+
+interface DockDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    /** aria-label for the close button. @default "Close" */
+    closeLabel?: string;
+}
+/**
+ * A bottom sheet on narrow viewports, a centered modal from `sm` up. Used by {@link FloatingDock}
+ * for its overflow menu, but works standalone for any mobile-style sheet.
+ */
+declare function DockDrawer({ open, onClose, title, children, closeLabel }: DockDrawerProps): react.ReactPortal | null;
+
+export { DockDrawer, FloatingDock };
+export type { DockDrawerProps, DockItem, DockLinkProps, FloatingDockProps };

package/dist/index.js

@@ -0,0 +1,168 @@
+import { useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/FloatingDock.tsx
+function MoreHorizontalIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "24",
+      height: "24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+      ]
+    }
+  );
+}
+function CloseIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "24",
+      height: "24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+function DockDrawer({ open, onClose, title, children, closeLabel = "Close" }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  useEffect(() => {
+    if (!open) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs("div", { className: "rfd-overlay-wrap", children: [
+      /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: "rfd-overlay",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          onClick: onClose
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title,
+          className: "rfd-sheet",
+          initial: { y: "100%" },
+          animate: { y: 0 },
+          exit: { y: "100%" },
+          transition: { type: "spring", damping: 28, stiffness: 300 },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "rfd-sheet-header", children: [
+              /* @__PURE__ */ jsx("h2", { className: "rfd-sheet-title", children: title }),
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, "aria-label": closeLabel, className: "rfd-close-btn", children: /* @__PURE__ */ jsx(CloseIcon, { className: "rfd-close-icon" }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "rfd-sheet-body", children })
+          ]
+        }
+      )
+    ] }) }),
+    document.body
+  );
+}
+var DefaultLink = ({ href, children, ...rest }) => /* @__PURE__ */ jsx("a", { href, ...rest, children });
+function FloatingDock({
+  items,
+  moreItems = [],
+  isActive,
+  LinkComponent = DefaultLink,
+  moreLabel = "More",
+  moreSheetTitle = "Menu",
+  closeLabel = "Close",
+  extraContent,
+  ariaLabel = "Main",
+  className
+}) {
+  const [moreOpen, setMoreOpen] = useState(false);
+  const hasMore = moreItems.length > 0;
+  const moreActive = hasMore && moreItems.some((item) => isActive(item.href));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        "aria-label": ariaLabel,
+        className: ["rfd-bar", className].filter(Boolean).join(" "),
+        style: { bottom: "max(0.75rem, env(safe-area-inset-bottom))" },
+        children: /* @__PURE__ */ jsxs("div", { className: "rfd-track", children: [
+          items.map(({ key, href, label, icon: Icon }) => {
+            const active = isActive(href);
+            return /* @__PURE__ */ jsxs(LinkComponent, { href, className: "rfd-tab", "aria-current": active ? "page" : void 0, children: [
+              active && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  layoutId: "rfd-pill",
+                  transition: { type: "spring", stiffness: 260, damping: 26 },
+                  className: "rfd-pill"
+                }
+              ),
+              /* @__PURE__ */ jsx(Icon, { className: active ? "rfd-icon rfd-icon--active" : "rfd-icon" }),
+              /* @__PURE__ */ jsx("span", { className: active ? "rfd-label rfd-label--active" : "rfd-label", children: label })
+            ] }, key);
+          }),
+          hasMore && /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => setMoreOpen(true), "aria-label": moreLabel, className: "rfd-tab rfd-more-btn", children: [
+            moreActive && /* @__PURE__ */ jsx("span", { className: "rfd-pill" }),
+            /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: moreActive ? "rfd-icon rfd-icon--active" : "rfd-icon" }),
+            /* @__PURE__ */ jsx("span", { className: moreActive ? "rfd-label rfd-label--active" : "rfd-label", children: moreLabel })
+          ] })
+        ] })
+      }
+    ),
+    hasMore && /* @__PURE__ */ jsxs(DockDrawer, { open: moreOpen, onClose: () => setMoreOpen(false), title: moreSheetTitle, closeLabel, children: [
+      /* @__PURE__ */ jsx("div", { className: "rfd-more-grid", children: moreItems.map(({ key, href, label, icon: Icon }) => {
+        const active = isActive(href);
+        return /* @__PURE__ */ jsxs(LinkComponent, { href, className: "rfd-more-item", onClick: () => setMoreOpen(false), children: [
+          /* @__PURE__ */ jsx("span", { className: active ? "rfd-more-icon-circle rfd-more-icon-circle--active" : "rfd-more-icon-circle", children: /* @__PURE__ */ jsx(Icon, { className: "rfd-more-icon" }) }),
+          /* @__PURE__ */ jsx("span", { className: "rfd-more-label", children: label })
+        ] }, key);
+      }) }),
+      extraContent
+    ] })
+  ] });
+}
+
+export { DockDrawer, FloatingDock };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons.tsx","../src/DockDrawer.tsx","../src/FloatingDock.tsx"],"names":["jsx","jsxs","useState","motion"],"mappings":"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","file":"index.js","sourcesContent":["import type { SVGProps } from \"react\";\n\n/** Tiny built-in icons so the package has zero icon-library dependency. */\n\nexport function MoreHorizontalIcon(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"1\" />\n      <circle cx=\"19\" cy=\"12\" r=\"1\" />\n      <circle cx=\"5\" cy=\"12\" r=\"1\" />\n    </svg>\n  );\n}\n\nexport function CloseIcon(props: SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path d=\"M18 6 6 18\" />\n      <path d=\"m6 6 12 12\" />\n    </svg>\n  );\n}\n","\"use client\";\n\nimport { useEffect, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { CloseIcon } from \"./icons\";\n\nexport interface DockDrawerProps {\n  open: boolean;\n  onClose: () => void;\n  title: string;\n  children: ReactNode;\n  /** aria-label for the close button. @default \"Close\" */\n  closeLabel?: string;\n}\n\n/**\n * A bottom sheet on narrow viewports, a centered modal from `sm` up. Used by {@link FloatingDock}\n * for its overflow menu, but works standalone for any mobile-style sheet.\n */\nexport function DockDrawer({ open, onClose, title, children, closeLabel = \"Close\" }: DockDrawerProps) {\n  // Portals need a DOM node, which doesn't exist during SSR — render nothing until mounted client-side.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n\n  useEffect(() => {\n    if (!open) return;\n    const previousOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = previousOverflow;\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") onClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, onClose]);\n\n  if (!mounted) return null;\n\n  return createPortal(\n    <AnimatePresence>\n      {open && (\n        <div className=\"rfd-overlay-wrap\">\n          <motion.div\n            className=\"rfd-overlay\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={onClose}\n          />\n          <motion.div\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={title}\n            className=\"rfd-sheet\"\n            initial={{ y: \"100%\" }}\n            animate={{ y: 0 }}\n            exit={{ y: \"100%\" }}\n            transition={{ type: \"spring\", damping: 28, stiffness: 300 }}\n          >\n            <div className=\"rfd-sheet-header\">\n              <h2 className=\"rfd-sheet-title\">{title}</h2>\n              <button type=\"button\" onClick={onClose} aria-label={closeLabel} className=\"rfd-close-btn\">\n                <CloseIcon className=\"rfd-close-icon\" />\n              </button>\n            </div>\n            <div className=\"rfd-sheet-body\">{children}</div>\n          </motion.div>\n        </div>\n      )}\n    </AnimatePresence>,\n    document.body,\n  );\n}\n","\"use client\";\n\nimport { useState, type ComponentType, type ReactNode } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { DockDrawer } from \"./DockDrawer\";\nimport { MoreHorizontalIcon } from \"./icons\";\n\nexport interface DockItem {\n  /** Unique React key. Usually the same as `href`. */\n  key: string;\n  href: string;\n  label: string;\n  icon: ComponentType<{ className?: string }>;\n}\n\nexport interface DockLinkProps {\n  href: string;\n  className?: string;\n  children?: ReactNode;\n  onClick?: () => void;\n  \"aria-current\"?: \"page\";\n}\n\nexport interface FloatingDockProps {\n  /** Destinations shown directly in the bar. Four or five is the sweet spot. */\n  items: DockItem[];\n  /** Extra destinations shown in the overflow sheet when the \"More\" button is pressed. */\n  moreItems?: DockItem[];\n  /** Tells the dock which item (if any) is the current page. */\n  isActive: (href: string) => boolean;\n  /**\n   * The component used to render each navigable item — swap in your router's Link\n   * (e.g. `next/link`, `react-router`'s `Link`) for client-side navigation.\n   * @default a plain anchor tag\n   */\n  LinkComponent?: ComponentType<DockLinkProps>;\n  /** @default \"More\" */\n  moreLabel?: string;\n  /** @default \"Menu\" */\n  moreSheetTitle?: string;\n  /** Passed through to the overflow sheet's close button. @default \"Close\" */\n  closeLabel?: string;\n  /** Rendered at the bottom of the overflow sheet — a natural slot for a theme toggle, sign-out, etc. */\n  extraContent?: ReactNode;\n  /** @default \"Main\" */\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst DefaultLink: ComponentType<DockLinkProps> = ({ href, children, ...rest }) => (\n  <a href={href} {...rest}>\n    {children}\n  </a>\n);\n\n/**\n * A floating, fully-rounded bottom navigation bar in the style of WhatsApp's mobile tab bar: an\n * animated pill highlights the active tab, and a \"More\" button opens the rest of your destinations\n * in a bottom sheet. Framework-agnostic — bring your own router via `LinkComponent`.\n */\nexport function FloatingDock({\n  items,\n  moreItems = [],\n  isActive,\n  LinkComponent = DefaultLink,\n  moreLabel = \"More\",\n  moreSheetTitle = \"Menu\",\n  closeLabel = \"Close\",\n  extraContent,\n  ariaLabel = \"Main\",\n  className,\n}: FloatingDockProps) {\n  const [moreOpen, setMoreOpen] = useState(false);\n  const hasMore = moreItems.length > 0;\n  const moreActive = hasMore && moreItems.some((item) => isActive(item.href));\n\n  return (\n    <>\n      <nav\n        aria-label={ariaLabel}\n        className={[\"rfd-bar\", className].filter(Boolean).join(\" \")}\n        style={{ bottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n      >\n        <div className=\"rfd-track\">\n          {items.map(({ key, href, label, icon: Icon }) => {\n            const active = isActive(href);\n            return (\n              <LinkComponent key={key} href={href} className=\"rfd-tab\" aria-current={active ? \"page\" : undefined}>\n                {active && (\n                  <motion.span\n                    layoutId=\"rfd-pill\"\n                    transition={{ type: \"spring\", stiffness: 260, damping: 26 }}\n                    className=\"rfd-pill\"\n                  />\n                )}\n                <Icon className={active ? \"rfd-icon rfd-icon--active\" : \"rfd-icon\"} />\n                <span className={active ? \"rfd-label rfd-label--active\" : \"rfd-label\"}>{label}</span>\n              </LinkComponent>\n            );\n          })}\n\n          {hasMore && (\n            <button type=\"button\" onClick={() => setMoreOpen(true)} aria-label={moreLabel} className=\"rfd-tab rfd-more-btn\">\n              {moreActive && <span className=\"rfd-pill\" />}\n              <MoreHorizontalIcon className={moreActive ? \"rfd-icon rfd-icon--active\" : \"rfd-icon\"} />\n              <span className={moreActive ? \"rfd-label rfd-label--active\" : \"rfd-label\"}>{moreLabel}</span>\n            </button>\n          )}\n        </div>\n      </nav>\n\n      {hasMore && (\n        <DockDrawer open={moreOpen} onClose={() => setMoreOpen(false)} title={moreSheetTitle} closeLabel={closeLabel}>\n          <div className=\"rfd-more-grid\">\n            {moreItems.map(({ key, href, label, icon: Icon }) => {\n              const active = isActive(href);\n              return (\n                <LinkComponent key={key} href={href} className=\"rfd-more-item\" onClick={() => setMoreOpen(false)}>\n                  <span className={active ? \"rfd-more-icon-circle rfd-more-icon-circle--active\" : \"rfd-more-icon-circle\"}>\n                    <Icon className=\"rfd-more-icon\" />\n                  </span>\n                  <span className=\"rfd-more-label\">{label}</span>\n                </LinkComponent>\n              );\n            })}\n          </div>\n          {extraContent}\n        </DockDrawer>\n      )}\n    </>\n  );\n}\n"]}

package/dist/style.css

@@ -0,0 +1,223 @@
+/**
+ * react-floating-dock default theme.
+ * Everything is driven by CSS custom properties — redefine any of these on `:root`
+ * (or scoped to a wrapper element) to theme the dock without touching these rules.
+ */
+:root {
+  --rfd-bg: rgba(15, 23, 42, 0.9);
+  --rfd-bg-solid: #0f172a;
+  --rfd-border: #1e293b;
+  --rfd-text: #e2e8f0;
+  --rfd-text-muted: #94a3b8;
+  --rfd-accent: #3b82f6;
+  --rfd-accent-bg: rgba(59, 130, 246, 0.15);
+  --rfd-accent-contrast: #ffffff;
+  --rfd-hover: rgba(255, 255, 255, 0.06);
+  --rfd-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35);
+  --rfd-radius: 9999px;
+  --rfd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.rfd-bar {
+  position: fixed;
+  left: 0.75rem;
+  right: 0.75rem;
+  z-index: 40;
+  font-family: var(--rfd-font);
+}
+
+.rfd-track {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem;
+  border-radius: var(--rfd-radius);
+  border: 1px solid var(--rfd-border);
+  background: var(--rfd-bg);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  padding: 0.375rem;
+  box-shadow: var(--rfd-shadow);
+}
+
+.rfd-tab {
+  position: relative;
+  display: flex;
+  flex: 1 1 0%;
+  height: 3.5rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  border-radius: var(--rfd-radius);
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  font: inherit;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.rfd-pill {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--rfd-radius);
+  background: var(--rfd-accent-bg);
+}
+
+.rfd-icon {
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--rfd-text-muted);
+  flex-shrink: 0;
+}
+.rfd-icon--active {
+  color: var(--rfd-accent);
+}
+
+.rfd-label {
+  position: relative;
+  font-size: 11px;
+  line-height: 1;
+  font-weight: 500;
+  color: var(--rfd-text-muted);
+  white-space: nowrap;
+}
+.rfd-label--active {
+  color: var(--rfd-accent);
+}
+
+/* --- Overflow sheet --- */
+
+.rfd-overlay-wrap {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-family: var(--rfd-font);
+}
+@media (min-width: 640px) {
+  .rfd-overlay-wrap {
+    align-items: center;
+  }
+}
+
+.rfd-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.rfd-sheet {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: 32rem;
+  border-radius: 1.5rem 1.5rem 0 0;
+  border: 1px solid var(--rfd-border);
+  background: var(--rfd-bg-solid);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+@media (min-width: 640px) {
+  .rfd-sheet {
+    border-radius: 1.5rem;
+  }
+}
+
+.rfd-sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--rfd-border);
+  padding: 1rem 1.25rem;
+}
+
+.rfd-sheet-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--rfd-text);
+  margin: 0;
+}
+
+.rfd-close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: var(--rfd-radius);
+  border: none;
+  background: transparent;
+  color: var(--rfd-text-muted);
+  cursor: pointer;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+.rfd-close-btn:hover {
+  background: var(--rfd-hover);
+  color: var(--rfd-text);
+}
+.rfd-close-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.rfd-sheet-body {
+  max-height: 75vh;
+  overflow-y: auto;
+  padding: 1.25rem;
+}
+
+.rfd-more-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.rfd-more-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: center;
+  text-decoration: none;
+  color: inherit;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.rfd-more-icon-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  border-radius: var(--rfd-radius);
+  background: var(--rfd-hover);
+  color: var(--rfd-text);
+}
+.rfd-more-icon-circle--active {
+  background: var(--rfd-accent);
+  color: var(--rfd-accent-contrast);
+}
+
+.rfd-more-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.rfd-more-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--rfd-text);
+}

package/package.json

@@ -1,6 +1,72 @@
 {
   "name": "react-floating-dock",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "A WhatsApp-style floating bottom navigation dock for React, with an animated active-tab pill and an overflow sheet for extra destinations. Framework-agnostic — bring your own router.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup && node scripts/copy-css.mjs",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "example": "vite --config example/vite.config.ts",
+    "prepublishOnly": "pnpm typecheck && pnpm lint && pnpm test && pnpm build"
+  },
+  "keywords": [
+    "react",
+    "navigation",
+    "mobile",
+    "bottom-nav",
+    "tab-bar",
+    "pwa",
+    "dock",
+    "bottom-sheet"
+  ],
+  "author": "Lemon Oluwatobi",
+  "license": "MIT",
+  "peerDependencies": {
+    "framer-motion": ">=11",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "eslint": "^10.13.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "framer-motion": "^14.3.0",
+    "globals": "^17.13.0",
+    "jsdom": "^30.1.3",
+    "lucide-react": "^1.59.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tsup": "^9.0.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.71.2",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.5"
+  }
+}