@entro314labs/react-arc-tabs 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 entro314-labs
+
+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,43 +1,32 @@
-# react-arc-tabs
+# @entro314labs/react-arc-tabs
 
-Production-ready, reusable arc-style tabs for React and Next.js.
+Reusable arc-style tabs component for React and Next.js, including a Tailwind CSS v4+ variant.
 
-This component is based on the shared visual mechanics from the demos in this workspace:
+## Highlights
 
-- active tab merges into the panel
-- inverse curved bottom corners on the active tab seam
-- layered z-index and pseudo-element geometry for seamless arc transitions
-- keyboard and ARIA-compliant tab interactions
+- Accessible tabs: ARIA roles + keyboard interactions
+- Controlled and uncontrolled state models
+- CSS-based and Tailwind v4+ variants
+- Switch animations (including sliding active backdrop and animated panel entry)
+- TypeScript-first API
 
-## Features
+## Compatibility
 
-- Controlled and uncontrolled usage
-- Full keyboard navigation (`ArrowLeft`, `ArrowRight`, `Home`, `End`, `Enter`, `Space`)
-- Disabled tabs support
-- Manual or automatic activation mode
-- Keep mounted or render-only-active panel strategies
-- Themeable with CSS variables and props
-- Two styling engines:
-  - `ArcTabs` (CSS file based)
-  - `ArcTabsTailwind` (Tailwind CSS v4+ utility based)
-- Built-in tab switch animations adapted from the demos:
-  - sliding active backdrop (`rounded-tab` inspired)
-  - smooth seam/corner transitions (`inverse rounded corners` inspired)
-  - animated panel entry with directional motion
-- Works in React and Next.js (`"use client"` included)
+- React `18.2+` and `19+`
+- Next.js (App Router and Pages Router)
+- Tailwind CSS `4+` for `ArcTabsTailwind`
 
-## Install (local package / workspace package)
+## Install
 
 ```bash
-npm install
-npm run build
+npm install @entro314labs/react-arc-tabs
 ```
 
-## Usage in React
+## Basic usage (CSS variant)
 
 ```tsx
-import { ArcTabs, type ArcTabItem } from "react-arc-tabs";
-import "react-arc-tabs/styles.css";
+import { ArcTabs, type ArcTabItem } from "@entro314labs/react-arc-tabs";
+import "@entro314labs/react-arc-tabs/styles.css";
 
 const items: ArcTabItem[] = [
   { id: "overview", label: "Overview", content: <div>Overview content</div> },
@@ -50,24 +39,20 @@ export function Example() {
     <ArcTabs
       items={items}
       defaultValue="overview"
-      size="md"
-      fit="content"
       motionPreset="expressive"
       motionDuration={320}
-      activationMode="automatic"
       ariaLabel="Project sections"
-      accentColor="#5b4ff1"
     />
   );
 }
 ```
 
-## Usage with Tailwind CSS 4+
+## Tailwind CSS v4+ usage
 
-`ArcTabsTailwind` renders with Tailwind utility classes (including pseudo-element arc geometry), so you don't need to import `styles.css`.
+`ArcTabsTailwind` ships with utility-class styling, so you do not import `styles.css`.
 
 ```tsx
-import { ArcTabsTailwind, type ArcTabItem } from "react-arc-tabs";
+import { ArcTabsTailwind, type ArcTabItem } from "@entro314labs/react-arc-tabs";
 
 const items: ArcTabItem[] = [
   { id: "overview", label: "Overview", content: <div>Overview content</div> },
@@ -82,10 +67,6 @@ export function ExampleTailwind() {
       defaultValue="overview"
       fit="equal"
       motionPreset="expressive"
-      motionDuration={320}
-      activationMode="automatic"
-      ariaLabel="Project sections"
-      accentColor="#4f46e5"
       classNames={{
         root: "max-w-3xl",
         panel: "prose prose-sm max-w-none"
@@ -95,27 +76,22 @@ export function ExampleTailwind() {
 }
 ```
 
-### Tailwind v4 source scanning (important)
+### Tailwind source scanning
 
-If Tailwind doesn't generate the component classes from node modules in your setup, add an explicit source path in your global stylesheet:
+If your setup does not automatically scan classes from installed dependencies, add:
 
 ```css
 @import "tailwindcss";
-
-/* npm/yarn/pnpm install use-case */
-@source "../node_modules/react-arc-tabs/dist/**/*.{js,cjs}";
-
-/* monorepo/local workspace use-case (adjust path) */
-/* @source "../../packages/react-arc-tabs/src/**/*.{ts,tsx}"; */
+@source "../node_modules/@entro314labs/react-arc-tabs/dist/**/*.{js,cjs}";
 ```
 
-## Usage in Next.js App Router
+## Next.js usage
 
 ```tsx
 "use client";
 
-import { ArcTabs, type ArcTabItem } from "react-arc-tabs";
-import "react-arc-tabs/styles.css";
+import { ArcTabs, type ArcTabItem } from "@entro314labs/react-arc-tabs";
+import "@entro314labs/react-arc-tabs/styles.css";
 
 const tabs: ArcTabItem[] = [
   { id: "summary", label: "Summary", content: <div>Summary panel</div> },
@@ -128,40 +104,19 @@ export default function Page() {
 }
 ```
 
-### Next.js + Tailwind variant
+## Motion presets
 
-```tsx
-"use client";
+- `none`: no animation
+- `subtle`: minimal transitions (default)
+- `expressive`: sliding active backdrop + stronger panel motion
 
-import { ArcTabsTailwind, type ArcTabItem } from "react-arc-tabs";
-
-const tabs: ArcTabItem[] = [
-  { id: "summary", label: "Summary", content: <div>Summary panel</div> },
-  { id: "billing", label: "Billing", content: <div>Billing panel</div> },
-  { id: "usage", label: "Usage", content: <div>Usage panel</div> }
-];
-
-export default function Page() {
-  return <ArcTabsTailwind items={tabs} defaultValue="summary" ariaLabel="Account tabs" />;
-}
+```tsx
+<ArcTabs motionPreset="expressive" motionDuration={320} />
 ```
 
-## Styling model
-
-You can theme via props or by overriding CSS variables on `.arc-tabs`:
-
-- `--arc-radius`
-- `--arc-gap`
-- `--arc-accent`
-- `--arc-tab-bg`
-- `--arc-tab-hover-bg`
-- `--arc-panel-bg`
-- `--arc-panel-border`
-- `--arc-panel-padding`
-
-## API
+## Main API
 
-`ArcTabs` props:
+### `ArcTabs` / `ArcTabsTailwind`
 
 - `items: ArcTabItem[]`
 - `value?: string`
@@ -173,39 +128,19 @@ You can theme via props or by overriding CSS variables on `.arc-tabs`:
 - `motionPreset?: "none" | "subtle" | "expressive"`
 - `motionDuration?: number`
 - `keepMounted?: boolean`
-- `radius?: number`
-- `gap?: number`
-- `panelPadding?: number | string`
-- `accentColor?: string`
-- `tabBackground?: string`
-- `tabHoverBackground?: string`
-- `panelBackground?: string`
-- `panelBorderColor?: string`
-- `renderTabLabel?: (item, state) => ReactNode`
-- `renderPanel?: (item, state) => ReactNode`
-
-`ArcTabsTailwind` props:
-
-- all `ArcTabs` props
-- `classNames?: ArcTabsTailwindClassNames`
-
-`ArcTabsTailwindClassNames` slots:
-
-- `root`
-- `list`
-- `indicator`
-- `item`
-- `tab`
-- `tabSelected`
-- `tabUnselected`
-- `tabDisabled`
-- `icon`
-- `text`
-- `badge`
-- `panels`
-- `panel`
-
-`ArcTabItem`:
+- `ariaLabel?: string`
+
+Additional styling/theming props are available for both variants.
+
+### Tailwind slot overrides
+
+`ArcTabsTailwind` supports `classNames` slots:
+
+- `root`, `list`, `indicator`, `item`, `tab`
+- `tabSelected`, `tabUnselected`, `tabDisabled`
+- `icon`, `text`, `badge`, `panels`, `panel`
+
+### `ArcTabItem`
 
 - `id: string`
 - `label: ReactNode`
@@ -213,3 +148,15 @@ You can theme via props or by overriding CSS variables on `.arc-tabs`:
 - `disabled?: boolean`
 - `icon?: ReactNode`
 - `badge?: ReactNode`
+
+## Development
+
+```bash
+pnpm install
+pnpm run typecheck
+pnpm run build
+```
+
+## License
+
+MIT

package/dist/ArcTabs.css

@@ -129,12 +129,12 @@
   font-size: 1rem;
 }
 
-.arc-tabs__tab:not([aria-selected="true"]):not(:disabled):hover {
+.arc-tabs__tab:not([aria-selected='true']):not(:disabled):hover {
   background: var(--arc-tab-hover-bg);
   transform: translateY(1px);
 }
 
-.arc-tabs__tab:not([aria-selected="true"]):not(:disabled):active {
+.arc-tabs__tab:not([aria-selected='true']):not(:disabled):active {
   transform: translateY(2px);
 }
 
@@ -150,7 +150,7 @@
 
 .arc-tabs__tab::before,
 .arc-tabs__tab::after {
-  content: "";
+  content: '';
   position: absolute;
   bottom: 0;
   width: calc(var(--arc-radius) + var(--arc-border-width));
@@ -165,8 +165,8 @@
     transform var(--arc-motion-duration) var(--arc-motion-easing);
 }
 
-.arc-tabs__tab[aria-selected="true"]::before,
-.arc-tabs__tab[aria-selected="true"]::after {
+.arc-tabs__tab[aria-selected='true']::before,
+.arc-tabs__tab[aria-selected='true']::after {
   opacity: 1;
 }
 
@@ -175,8 +175,7 @@
 }
 
 .arc-tabs__tab:not(:first-child)::before {
-  transform: translateX(-100%)
-    translateY(calc(var(--arc-gap) + var(--arc-border-width)));
+  transform: translateX(-100%) translateY(calc(var(--arc-gap) + var(--arc-border-width)));
   border-bottom-right-radius: var(--arc-radius);
   box-shadow: var(--arc-border-width) var(--arc-radius) 0 var(--arc-panel-bg);
 }
@@ -186,14 +185,12 @@
 }
 
 .arc-tabs__tab:not(:last-child)::after {
-  transform: translateX(100%)
-    translateY(calc(var(--arc-gap) + var(--arc-border-width)));
+  transform: translateX(100%) translateY(calc(var(--arc-gap) + var(--arc-border-width)));
   border-bottom-left-radius: var(--arc-radius);
-  box-shadow: calc(var(--arc-border-width) * -1) var(--arc-radius) 0
-    var(--arc-panel-bg);
+  box-shadow: calc(var(--arc-border-width) * -1) var(--arc-radius) 0 var(--arc-panel-bg);
 }
 
-.arc-tabs__tab[aria-selected="true"] {
+.arc-tabs__tab[aria-selected='true'] {
   z-index: 3;
   color: color-mix(in srgb, var(--arc-accent) 85%, black 15%);
   border-color: var(--arc-panel-bg);
@@ -203,7 +200,7 @@
   box-shadow: 0 calc(var(--arc-gap) + var(--arc-border-width)) 0 var(--arc-panel-bg);
 }
 
-.arc-tabs--motion-expressive .arc-tabs__tab[aria-selected="true"] {
+.arc-tabs--motion-expressive .arc-tabs__tab[aria-selected='true'] {
   background: transparent;
 }
 
@@ -234,7 +231,11 @@
   z-index: 2;
   margin-top: 0;
   border: var(--arc-border-width) solid var(--arc-panel-border);
-  border-radius: var(--arc-radius);
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: var(--arc-radius);
+  border-bottom-right-radius: var(--arc-radius);
   background: var(--arc-panel-bg);
   padding: var(--arc-panel-padding);
   box-shadow: 0 12px 32px color-mix(in srgb, var(--arc-accent) 12%, transparent);

package/dist/index.cjs

@@ -49,7 +49,7 @@ var getNextEnabledIndex = (enabledIndices, currentIndex, direction) => {
   if (!enabledIndices.length) return -1;
   const currentPosition = enabledIndices.indexOf(currentIndex);
   if (currentPosition === -1) {
-    return direction === 1 ? enabledIndices[0] ?? -1 : enabledIndices[enabledIndices.length - 1] ?? -1;
+    return direction === 1 ? enabledIndices[0] ?? -1 : enabledIndices.at(-1) ?? -1;
   }
   const nextPosition = (currentPosition + direction + enabledIndices.length) % enabledIndices.length;
   return enabledIndices[nextPosition] ?? -1;
@@ -90,15 +90,10 @@ function ArcTabs({
     [listId, reactId]
   );
   const isControlled = value !== void 0;
-  const firstEnabledIndex = React.useMemo(
-    () => findFirstEnabledIndex(items),
-    [items]
-  );
+  const firstEnabledIndex = React.useMemo(() => findFirstEnabledIndex(items), [items]);
   const [uncontrolledValue, setUncontrolledValue] = React.useState(() => {
     const requested = defaultValue;
-    const requestedMatch = items.find(
-      (item) => !item.disabled && item.id === requested
-    );
+    const requestedMatch = items.find((item) => !item.disabled && item.id === requested);
     if (requestedMatch) return requestedMatch.id;
     return firstEnabledIndex >= 0 ? items[firstEnabledIndex]?.id : void 0;
   });
@@ -136,7 +131,9 @@ function ArcTabs({
   const hasMountedRef = React.useRef(false);
   const previousSelectedIndexRef = React.useRef(selectedIndex);
   const [hasInteracted, setHasInteracted] = React.useState(false);
-  const [panelDirection, setPanelDirection] = React.useState("none");
+  const [panelDirection, setPanelDirection] = React.useState(
+    "none"
+  );
   const [indicator, setIndicator] = React.useState({
     x: 0,
     width: 0,
@@ -221,12 +218,18 @@ function ArcTabs({
     if (!showSlidingIndicator) return;
     const listElement = listRef.current;
     if (!listElement) return;
-    const onResize = () => syncIndicator();
-    const onScroll = () => syncIndicator();
+    const onResize = () => {
+      syncIndicator();
+    };
+    const onScroll = () => {
+      syncIndicator();
+    };
     const frame = requestAnimationFrame(syncIndicator);
     let observer = null;
     if (typeof ResizeObserver !== "undefined") {
-      observer = new ResizeObserver(() => syncIndicator());
+      observer = new ResizeObserver(() => {
+        syncIndicator();
+      });
       observer.observe(listElement);
       tabRefs.current.forEach((tabElement) => {
         if (tabElement) observer?.observe(tabElement);
@@ -249,7 +252,7 @@ function ArcTabs({
     if (!panelElement || typeof panelElement.animate !== "function") {
       return;
     }
-    if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    if (typeof globalThis.window !== "undefined" && globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
       return;
     }
     const offsetX = motionPreset === "expressive" ? panelDirection === "forward" ? 20 : panelDirection === "backward" ? -20 : 0 : 0;
@@ -277,13 +280,7 @@ function ArcTabs({
     return () => {
       animation.cancel();
     };
-  }, [
-    selectedIndex,
-    hasInteracted,
-    motionPreset,
-    panelDirection,
-    effectiveMotionDuration
-  ]);
+  }, [selectedIndex, hasInteracted, motionPreset, panelDirection, effectiveMotionDuration]);
   const handleTabKeyDown = React.useCallback(
     (event, index) => {
       if (!enabledIndices.length) return;
@@ -317,7 +314,7 @@ function ArcTabs({
         }
         case "End": {
           event.preventDefault();
-          const last = enabledIndices[enabledIndices.length - 1];
+          const last = enabledIndices.at(-1);
           if (last !== void 0) {
             focusTabIndex(last);
             if (activationMode === "automatic") selectTab(last);
@@ -417,10 +414,7 @@ function ArcTabs({
             {
               "aria-hidden": "true",
               role: "presentation",
-              className: joinClassNames(
-                "arc-tabs__active-indicator",
-                indicator.ready && "is-ready"
-              ),
+              className: joinClassNames("arc-tabs__active-indicator", indicator.ready && "is-ready"),
               style: indicatorStyle
             }
           ) : null,
@@ -445,9 +439,15 @@ function ArcTabs({
                 tabIndex: tabIndexValue,
                 disabled,
                 className: "arc-tabs__tab",
-                onFocus: () => setFocusedIndex(index),
-                onClick: () => selectTab(index),
-                onKeyDown: (event) => handleTabKeyDown(event, index),
+                onFocus: () => {
+                  setFocusedIndex(index);
+                },
+                onClick: () => {
+                  selectTab(index);
+                },
+                onKeyDown: (event) => {
+                  handleTabKeyDown(event, index);
+                },
                 children: renderTabLabel ? renderTabLabel(item, state) : renderDefaultLabel(item)
               }
             ) }, item.id);
@@ -519,7 +519,7 @@ var getNextEnabledIndex2 = (enabledIndices, currentIndex, direction) => {
   if (!enabledIndices.length) return -1;
   const currentPosition = enabledIndices.indexOf(currentIndex);
   if (currentPosition === -1) {
-    return direction === 1 ? enabledIndices[0] ?? -1 : enabledIndices[enabledIndices.length - 1] ?? -1;
+    return direction === 1 ? enabledIndices[0] ?? -1 : enabledIndices.at(-1) ?? -1;
   }
   const nextPosition = (currentPosition + direction + enabledIndices.length) % enabledIndices.length;
   return enabledIndices[nextPosition] ?? -1;
@@ -566,15 +566,10 @@ function ArcTabsTailwind({
     [listId, reactId]
   );
   const isControlled = value !== void 0;
-  const firstEnabledIndex = React2.useMemo(
-    () => findFirstEnabledIndex2(items),
-    [items]
-  );
+  const firstEnabledIndex = React2.useMemo(() => findFirstEnabledIndex2(items), [items]);
   const [uncontrolledValue, setUncontrolledValue] = React2.useState(() => {
     const requested = defaultValue;
-    const requestedMatch = items.find(
-      (item) => !item.disabled && item.id === requested
-    );
+    const requestedMatch = items.find((item) => !item.disabled && item.id === requested);
     if (requestedMatch) return requestedMatch.id;
     return firstEnabledIndex >= 0 ? items[firstEnabledIndex]?.id : void 0;
   });
@@ -612,7 +607,9 @@ function ArcTabsTailwind({
   const hasMountedRef = React2.useRef(false);
   const previousSelectedIndexRef = React2.useRef(selectedIndex);
   const [hasInteracted, setHasInteracted] = React2.useState(false);
-  const [panelDirection, setPanelDirection] = React2.useState("none");
+  const [panelDirection, setPanelDirection] = React2.useState(
+    "none"
+  );
   const [indicator, setIndicator] = React2.useState({
     x: 0,
     width: 0,
@@ -697,12 +694,18 @@ function ArcTabsTailwind({
     if (!showSlidingIndicator) return;
     const listElement = listRef.current;
     if (!listElement) return;
-    const onResize = () => syncIndicator();
-    const onScroll = () => syncIndicator();
+    const onResize = () => {
+      syncIndicator();
+    };
+    const onScroll = () => {
+      syncIndicator();
+    };
     const frame = requestAnimationFrame(syncIndicator);
     let observer = null;
     if (typeof ResizeObserver !== "undefined") {
-      observer = new ResizeObserver(() => syncIndicator());
+      observer = new ResizeObserver(() => {
+        syncIndicator();
+      });
       observer.observe(listElement);
       tabRefs.current.forEach((tabElement) => {
         if (tabElement) observer?.observe(tabElement);
@@ -725,7 +728,7 @@ function ArcTabsTailwind({
     if (!panelElement || typeof panelElement.animate !== "function") {
       return;
     }
-    if (typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    if (typeof globalThis.window !== "undefined" && globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
       return;
     }
     const offsetX = motionPreset === "expressive" ? panelDirection === "forward" ? 20 : panelDirection === "backward" ? -20 : 0 : 0;
@@ -753,13 +756,7 @@ function ArcTabsTailwind({
     return () => {
       animation.cancel();
     };
-  }, [
-    selectedIndex,
-    hasInteracted,
-    motionPreset,
-    panelDirection,
-    effectiveMotionDuration
-  ]);
+  }, [selectedIndex, hasInteracted, motionPreset, panelDirection, effectiveMotionDuration]);
   const handleTabKeyDown = React2.useCallback(
     (event, index) => {
       if (!enabledIndices.length) return;
@@ -793,7 +790,7 @@ function ArcTabsTailwind({
         }
         case "End": {
           event.preventDefault();
-          const last = enabledIndices[enabledIndices.length - 1];
+          const last = enabledIndices.at(-1);
           if (last !== void 0) {
             focusTabIndex(last);
             if (activationMode === "automatic") selectTab(last);
@@ -867,7 +864,7 @@ function ArcTabsTailwind({
     tabsClassName
   );
   const panelsClassName = joinClassNames2(
-    "relative z-[2] mt-0 rounded-[var(--arc-radius)] border border-[var(--arc-panel-border)] bg-[var(--arc-panel-bg)] p-[var(--arc-panel-padding)] shadow-[0_12px_32px_rgba(15,23,42,0.12)]",
+    "relative z-[2] mt-0 rounded-b-[var(--arc-radius)] rounded-t-none border border-t-0 border-[var(--arc-panel-border)] bg-[var(--arc-panel-bg)] p-[var(--arc-panel-padding)] shadow-[0_12px_32px_rgba(15,23,42,0.12)]",
     classNames?.panels,
     panelClassName
   );
@@ -958,9 +955,15 @@ function ArcTabsTailwind({
                 tabIndex: tabIndexValue,
                 disabled,
                 className: tabClassName,
-                onFocus: () => setFocusedIndex(index),
-                onClick: () => selectTab(index),
-                onKeyDown: (event) => handleTabKeyDown(event, index),
+                onFocus: () => {
+                  setFocusedIndex(index);
+                },
+                onClick: () => {
+                  selectTab(index);
+                },
+                onKeyDown: (event) => {
+                  handleTabKeyDown(event, index);
+                },
                 "data-slot": "tab",
                 children: renderTabLabel ? renderTabLabel(item, state) : renderDefaultLabel(item)
               }