react-native-magic-tab-bar 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present 650 Industries, Inc. (aka Expo)
+
+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

@@ -0,0 +1,121 @@
+# react-native-magic-tab-bar
+
+A customizable, animated floating tab bar for **Expo Router** (SDK 56+). You bring
+your own icons and labels — the package handles the layout, the active-pill
+animation, and the navigation wiring.
+
+> Built on Expo Router's headless tabs (`expo-router/ui`). It works in any
+> Expo Router project on iOS and Android. (Bare React Native / React Navigation
+> is not supported yet — see [Roadmap](#roadmap).)
+
+## Installation
+
+```bash
+npm install react-native-magic-tab-bar
+```
+
+### Peer dependencies
+
+These are normally already present in an Expo Router app:
+
+```bash
+npx expo install expo-router react-native-reanimated react-native-safe-area-context react-native-worklets
+```
+
+Make sure the Reanimated/Worklets Babel plugin is enabled (Expo SDK 56's
+`babel-preset-expo` configures this automatically).
+
+## Usage
+
+Use `MagicTabs` as your tab navigator in an `app/_layout.tsx`. Each entry in
+`tabs` maps a route to an icon and label:
+
+```tsx
+// app/_layout.tsx
+import { MagicTabs, type MagicTabIconProps } from "react-native-magic-tab-bar";
+import { Home, Search, User } from "./icons"; // any icon components you like
+
+export default function Layout() {
+  return (
+    <MagicTabs
+      tabs={[
+        { name: "index",   href: "/",        label: "Home",    icon: ({ color, size }) => <Home color={color} size={size} /> },
+        { name: "search",  href: "/search",  label: "Search",  icon: ({ color, size }) => <Search color={color} size={size} /> },
+        { name: "profile", href: "/profile", label: "Profile", icon: ({ color, size }) => <User color={color} size={size} /> },
+      ]}
+    />
+  );
+}
+```
+
+The `name` must match the route file in your `app/` directory (e.g. `index`,
+`search`, `profile`), and `href` is where the tab navigates.
+
+### The glass / blur look
+
+Pass `renderBackground` to render any view behind the bar — e.g. a blur:
+
+```tsx
+import { GlassView } from "expo-glass-effect"; // or @react-native-community/blur on bare RN
+
+<MagicTabs
+  tabs={tabs}
+  renderBackground={() => <GlassView style={{ flex: 1 }} />}
+/>;
+```
+
+When `renderBackground` is omitted, a solid `barColor` is used.
+
+## API
+
+### `<MagicTabs />`
+
+| Prop               | Type                              | Default      | Description                                       |
+| ------------------ | --------------------------------- | ------------ | ------------------------------------------------- |
+| `tabs`             | `MagicTabConfig[]`                | —            | The tabs, in order.                               |
+| `theme`            | `Partial<MagicTabBarTheme>`       | `defaultTheme` | Override any visual token.                       |
+| `variant`          | `'floating' \| 'docked'`          | `'floating'` | Float over content, or dock in flow.              |
+| `renderBackground` | `() => ReactNode`                 | —            | Custom background (blur/glass) behind the bar.    |
+
+### `MagicTabConfig`
+
+| Field   | Type                                       | Description                                   |
+| ------- | ------------------------------------------ | --------------------------------------------- |
+| `name`  | `string`                                   | Route name (matches the file in `app/`).      |
+| `href`  | `Href`                                     | Destination, e.g. `/` or `/search`.           |
+| `label` | `string?`                                  | Shown next to the icon while active.          |
+| `icon`  | `(p: MagicTabIconProps) => ReactNode`      | Renders the icon. Gets `{ focused, color, size }`. |
+
+### Theming (`MagicTabBarTheme`)
+
+`barColor`, `activePillColor`, `activeColor`, `inactiveColor`, `iconSize`,
+`height`, `radius`, `horizontalMargin`, `bottomInset`. See `defaultTheme`.
+
+## Development
+
+This repo is a monorepo: the library lives at the root (`src/`) and `example/`
+is a runnable Expo app that imports the library straight from source.
+
+```bash
+# from the repo root
+npm install            # installs example deps + build tooling, links the library
+cd example && npx expo start
+```
+
+Editing files in `src/` hot-reloads in the example app.
+
+### Building / publishing
+
+```bash
+npm run build     # react-native-builder-bob -> lib/ (ESM + d.ts)
+npm publish
+```
+
+## Roadmap
+
+- Sliding active-pill that animates between tabs (currently per-tab pill).
+- A React Navigation (`@react-navigation/bottom-tabs`) adapter for bare RN.
+
+## License
+
+MIT

package/lib/module/MagicTabBar.js

@@ -0,0 +1,130 @@
+"use strict";
+
+import { forwardRef } from "react";
+import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `expo-glass-effect` is an optional peer dependency. We load it through a
+ * guarded `require` so the library still installs and runs for consumers who
+ * don't need (or install) it — when it's absent, `glass` mode silently falls
+ * back to the translucent `barColor`. The try/catch lets Metro treat it as an
+ * optional dependency instead of failing the bundle.
+ */
+const glassEffect = (() => {
+  try {
+    return require("expo-glass-effect");
+  } catch {
+    return null;
+  }
+})();
+
+/** Lowest bar opacity we allow, so a transparent bar never becomes invisible. */
+export const MIN_BAR_OPACITY = 0.1;
+/**
+ * The visual container of the tab bar. Designed to be used as the `asChild`
+ * target of an Expo Router `<TabList>`.
+ */
+export const MagicTabBar = /*#__PURE__*/forwardRef(function MagicTabBar({
+  theme,
+  variant = "floating",
+  isTransparent = false,
+  transparency = 0.6,
+  glass = false,
+  renderBackground,
+  children,
+  style,
+  ...rest
+}, ref) {
+  const insets = useSafeAreaInsets();
+  const floating = variant !== "docked";
+  // Native Liquid Glass needs the optional `expo-glass-effect` dep and iOS
+  // 26+; everywhere else we fall back to the translucent color background.
+  const useGlass = glass && !!glassEffect?.isLiquidGlassAvailable();
+  // Only a transparent bar fades; otherwise it stays fully opaque. The level
+  // is clamped so it never drops below MIN_BAR_OPACITY or above 1.
+  const barOpacity = isTransparent ? Math.min(Math.max(transparency, MIN_BAR_OPACITY), 1) : 1;
+  // A see-through bar shouldn't cast a hard drop shadow — it reads as an odd
+  // halo around the translucent fill. Keep the shadow only for a solid bar.
+  const seeThrough = useGlass || isTransparent;
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    pointerEvents: "box-none",
+    style: [floating ? styles.floatingWrapper : styles.dockedWrapper, {
+      paddingHorizontal: theme.horizontalMargin,
+      paddingBottom: (floating ? insets.bottom : 0) + theme.bottomInset
+    }],
+    children: /*#__PURE__*/_jsxs(View, {
+      style: [styles.bar, !seeThrough && styles.barShadow, {
+        height: theme.height,
+        borderRadius: theme.radius
+      }],
+      children: [renderBackground ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: [StyleSheet.absoluteFill, {
+          borderRadius: theme.radius,
+          overflow: "hidden"
+        }],
+        children: renderBackground()
+      }) : useGlass && glassEffect ?
+      /*#__PURE__*/
+      // Native iOS Liquid Glass. We tint it with the bar color so themes
+      // still carry through, and clip it to the bar's rounded corners.
+      _jsx(glassEffect.GlassView, {
+        pointerEvents: "none",
+        glassEffectStyle: "regular",
+        tintColor: theme.barColor,
+        style: [StyleSheet.absoluteFill, {
+          borderRadius: theme.radius
+        }]
+      }) :
+      /*#__PURE__*/
+      // Background color lives in its own layer so `transparency` fades
+      // only the bar's fill, never the icons or labels on top of it.
+      _jsx(View, {
+        pointerEvents: "none",
+        style: [StyleSheet.absoluteFill, {
+          backgroundColor: theme.barColor,
+          borderRadius: theme.radius,
+          opacity: barOpacity
+        }]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.row, style],
+        ...rest,
+        children: children
+      })]
+    })
+  });
+});
+const styles = StyleSheet.create({
+  floatingWrapper: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  dockedWrapper: {
+    width: "100%"
+  },
+  bar: {
+    flexDirection: "row"
+  },
+  barShadow: {
+    shadowColor: "#000",
+    shadowOpacity: 0.25,
+    shadowRadius: 16,
+    shadowOffset: {
+      width: 0,
+      height: 8
+    },
+    elevation: 12
+  },
+  row: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingHorizontal: 6
+  }
+});
+//# sourceMappingURL=MagicTabBar.js.map

package/lib/module/MagicTabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","StyleSheet","View","useSafeAreaInsets","jsx","_jsx","jsxs","_jsxs","glassEffect","require","MIN_BAR_OPACITY","MagicTabBar","theme","variant","isTransparent","transparency","glass","renderBackground","children","style","rest","ref","insets","floating","useGlass","isLiquidGlassAvailable","barOpacity","Math","min","max","seeThrough","pointerEvents","styles","floatingWrapper","dockedWrapper","paddingHorizontal","horizontalMargin","paddingBottom","bottom","bottomInset","bar","barShadow","height","borderRadius","radius","absoluteFill","overflow","GlassView","glassEffectStyle","tintColor","barColor","backgroundColor","opacity","row","create","position","left","right","width","flexDirection","shadowColor","shadowOpacity","shadowRadius","shadowOffset","elevation","flex","alignItems","justifyContent"],"sourceRoot":"../../src","sources":["MagicTabBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/MagicTabItem.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import { forwardRef, useEffect } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import Animated, { FadeIn, LinearTransition, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const SPRING = {
+  mass: 0.6,
+  damping: 18,
+  stiffness: 180
+};
+const transition = LinearTransition.springify().mass(SPRING.mass).damping(SPRING.damping).stiffness(SPRING.stiffness);
+/**
+ * A single tab. Designed to be used as the `asChild` target of an
+ * Expo Router `<TabTrigger>`, which injects the focus state and press handlers.
+ *
+ * Each tab sizes to its content — just the icon when inactive, icon + label
+ * when active — so the active label is never clipped, on any screen width.
+ */
+export const MagicTabItem = /*#__PURE__*/forwardRef(function MagicTabItem({
+  icon,
+  label,
+  theme,
+  isFocused,
+  onPress,
+  onLongPress
+}, ref) {
+  const focused = Boolean(isFocused);
+  const progress = useSharedValue(focused ? 1 : 0);
+  useEffect(() => {
+    progress.value = withSpring(focused ? 1 : 0, SPRING);
+  }, [focused, progress]);
+  const pillStyle = useAnimatedStyle(() => ({
+    opacity: progress.value,
+    transform: [{
+      scale: 0.8 + progress.value * 0.2
+    }]
+  }));
+  const color = focused ? theme.activeColor : theme.inactiveColor;
+  const showLabel = focused && !!label;
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    ref: ref,
+    onPress: onPress,
+    onLongPress: onLongPress,
+    accessibilityRole: "tab",
+    accessibilityState: {
+      selected: focused
+    },
+    layout: transition,
+    style: [styles.pressable, focused && styles.pressableActive],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: theme.activePillColor,
+        borderRadius: theme.radius
+      }, pillStyle]
+    }), icon({
+      focused,
+      color,
+      size: theme.iconSize
+    }), showLabel ? /*#__PURE__*/_jsx(Animated.Text, {
+      entering: FadeIn.duration(150),
+      numberOfLines: 1,
+      style: [styles.label, {
+        color,
+        fontSize: theme.fontSize
+      }],
+      children: label
+    }) : null]
+  });
+});
+const styles = StyleSheet.create({
+  pressable: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 12
+  },
+  // The active tab gets extra padding so its pill is a touch larger than the
+  // inactive icons, making the current tab easy to spot. flexShrink lets it
+  // truncate its label only as a last resort on very narrow screens.
+  pressableActive: {
+    flexShrink: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 18
+  },
+  label: {
+    fontWeight: '600',
+    flexShrink: 1
+  }
+});
+//# sourceMappingURL=MagicTabItem.js.map

package/lib/module/MagicTabItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useEffect","Pressable","StyleSheet","Animated","FadeIn","LinearTransition","useAnimatedStyle","useSharedValue","withSpring","jsx","_jsx","jsxs","_jsxs","AnimatedPressable","createAnimatedComponent","SPRING","mass","damping","stiffness","transition","springify","MagicTabItem","icon","label","theme","isFocused","onPress","onLongPress","ref","focused","Boolean","progress","value","pillStyle","opacity","transform","scale","color","activeColor","inactiveColor","showLabel","accessibilityRole","accessibilityState","selected","layout","style","styles","pressable","pressableActive","children","View","pointerEvents","absoluteFill","backgroundColor","activePillColor","borderRadius","radius","size","iconSize","Text","entering","duration","numberOfLines","fontSize","create","alignSelf","flexDirection","alignItems","justifyContent","gap","paddingVertical","paddingHorizontal","flexShrink","fontWeight"],"sourceRoot":"../../src","sources":["MagicTabItem.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/MagicTabs.js

@@ -0,0 +1,60 @@
+"use strict";
+
+import { Tabs, TabList, TabSlot, TabTrigger } from 'expo-router/ui';
+import { MagicTabBar } from "./MagicTabBar.js";
+import { MagicTabItem } from "./MagicTabItem.js";
+import { defaultTabs } from "./defaultTabs.js";
+import { defaultTheme } from "./theme.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A drop-in custom tab bar for Expo Router.
+ *
+ * Use it in an `app/_layout.tsx` and pass your routes, icons and labels as props:
+ *
+ * ```tsx
+ * <MagicTabs
+ *   tabs={[
+ *     { name: 'index',  href: '/',        label: 'Home',   icon: ({ color }) => <Home color={color} /> },
+ *     { name: 'search', href: '/search',  label: 'Search', icon: ({ color }) => <Search color={color} /> },
+ *   ]}
+ * />
+ * ```
+ */
+export function MagicTabs({
+  tabs = defaultTabs,
+  theme: themeOverride,
+  variant,
+  isTransparent,
+  transparency,
+  glass,
+  renderBackground
+}) {
+  const theme = {
+    ...defaultTheme,
+    ...themeOverride
+  };
+  return /*#__PURE__*/_jsxs(Tabs, {
+    children: [/*#__PURE__*/_jsx(TabSlot, {}), /*#__PURE__*/_jsx(TabList, {
+      asChild: true,
+      children: /*#__PURE__*/_jsx(MagicTabBar, {
+        theme: theme,
+        variant: variant,
+        isTransparent: isTransparent,
+        transparency: transparency,
+        glass: glass,
+        renderBackground: renderBackground,
+        children: tabs.map(tab => /*#__PURE__*/_jsx(TabTrigger, {
+          name: tab.name,
+          href: tab.href,
+          asChild: true,
+          children: /*#__PURE__*/_jsx(MagicTabItem, {
+            icon: tab.icon,
+            label: tab.label,
+            theme: theme
+          })
+        }, tab.name))
+      })
+    })]
+  });
+}
+//# sourceMappingURL=MagicTabs.js.map

package/lib/module/MagicTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tabs","TabList","TabSlot","TabTrigger","MagicTabBar","MagicTabItem","defaultTabs","defaultTheme","jsx","_jsx","jsxs","_jsxs","MagicTabs","tabs","theme","themeOverride","variant","isTransparent","transparency","glass","renderBackground","children","asChild","map","tab","name","href","icon","label"],"sourceRoot":"../../src","sources":["MagicTabs.tsx"],"mappings":";;AACA,SAASA,IAAI,EAAEC,OAAO,EAAEC,OAAO,EAAEC,UAAU,QAAQ,gBAAgB;AACnE,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,YAAY,QAAQ,mBAAgB;AAC7C,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,YAAY,QAAQ,YAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAmCvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAAC;EACxBC,IAAI,GAAGP,WAAW;EAClBQ,KAAK,EAAEC,aAAa;EACpBC,OAAO;EACPC,aAAa;EACbC,YAAY;EACZC,KAAK;EACLC;AACc,CAAC,EAAE;EACjB,MAAMN,KAAuB,GAAG;IAAE,GAAGP,YAAY;IAAE,GAAGQ;EAAc,CAAC;EAErE,oBACEJ,KAAA,CAACX,IAAI;IAAAqB,QAAA,gBACHZ,IAAA,CAACP,OAAO,IAAE,CAAC,eACXO,IAAA,CAACR,OAAO;MAACqB,OAAO;MAAAD,QAAA,eACdZ,IAAA,CAACL,WAAW;QACVU,KAAK,EAAEA,KAAM;QACbE,OAAO,EAAEA,OAAQ;QACjBC,aAAa,EAAEA,aAAc;QAC7BC,YAAY,EAAEA,YAAa;QAC3BC,KAAK,EAAEA,KAAM;QACbC,gBAAgB,EAAEA,gBAAiB;QAAAC,QAAA,EAElCR,IAAI,CAACU,GAAG,CAAEC,GAAG,iBACZf,IAAA,CAACN,UAAU;UAAgBsB,IAAI,EAAED,GAAG,CAACC,IAAK;UAACC,IAAI,EAAEF,GAAG,CAACE,IAAK;UAACJ,OAAO;UAAAD,QAAA,eAChEZ,IAAA,CAACJ,YAAY;YAACsB,IAAI,EAAEH,GAAG,CAACG,IAAK;YAACC,KAAK,EAAEJ,GAAG,CAACI,KAAM;YAACd,KAAK,EAAEA;UAAM,CAAE;QAAC,GADjDU,GAAG,CAACC,IAET,CACb;MAAC,CACS;IAAC,CACP,CAAC;EAAA,CACN,CAAC;AAEX","ignoreList":[]}

package/lib/module/defaultTabs.js

@@ -0,0 +1,52 @@
+"use strict";
+
+import { Ionicons } from "@expo/vector-icons";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Builds an icon renderer from a pair of Ionicons glyphs. The filled variant
+ * is shown for the active tab and the outline variant for inactive tabs.
+ */
+const ionicon = (active, inactive) => ({
+  focused,
+  color,
+  size
+}) => /*#__PURE__*/_jsx(Ionicons, {
+  name: focused ? active : inactive,
+  color: color,
+  size: size
+});
+
+/**
+ * The tabs used when `<MagicTabs />` is rendered without a `tabs` prop:
+ * Home, Explore, Notifications, Inbox and Profile, each with a matching Ionicon.
+ *
+ * Assumes the app has routes named `index` (`/`), `explore`, `notifications`,
+ * `inbox` and `profile`. Pass your own `tabs` to `<MagicTabs />` to override.
+ */
+export const defaultTabs = [{
+  name: "index",
+  href: "/",
+  label: "Home",
+  icon: ionicon("home", "home-outline")
+}, {
+  name: "explore",
+  href: "/explore",
+  label: "Explore",
+  icon: ionicon("compass", "compass-outline")
+}, {
+  name: "notifications",
+  href: "/notifications",
+  label: "Notifications",
+  icon: ionicon("notifications", "notifications-outline")
+}, {
+  name: "inbox",
+  href: "/inbox",
+  label: "Inbox",
+  icon: ionicon("chatbubble-sharp", "chatbubble-outline")
+}, {
+  name: "profile",
+  href: "/profile",
+  label: "Profile",
+  icon: ionicon("person", "person-outline")
+}];
+//# sourceMappingURL=defaultTabs.js.map

package/lib/module/defaultTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Ionicons","jsx","_jsx","ionicon","active","inactive","focused","color","size","name","defaultTabs","href","label","icon"],"sourceRoot":"../../src","sources":["defaultTabs.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAM9C;AACA;AACA;AACA;AACA,MAAMC,OAAO,GACXA,CAACC,MAAmB,EAAEC,QAAqB,KAC3C,CAAC;EAAEC,OAAO;EAAEC,KAAK;EAAEC;AAAwB,CAAC,kBAC1CN,IAAA,CAACF,QAAQ;EAACS,IAAI,EAAEH,OAAO,GAAGF,MAAM,GAAGC,QAAS;EAACE,KAAK,EAAEA,KAAM;EAACC,IAAI,EAAEA;AAAK,CAAE,CACzE;;AAEH;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,WAA6B,GAAG,CAC3C;EACED,IAAI,EAAE,OAAO;EACbE,IAAI,EAAE,GAAG;EACTC,KAAK,EAAE,MAAM;EACbC,IAAI,EAAEV,OAAO,CAAC,MAAM,EAAE,cAAc;AACtC,CAAC,EACD;EACEM,IAAI,EAAE,SAAS;EACfE,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,SAAS;EAChBC,IAAI,EAAEV,OAAO,CAAC,SAAS,EAAE,iBAAiB;AAC5C,CAAC,EACD;EACEM,IAAI,EAAE,eAAe;EACrBE,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,eAAe;EACtBC,IAAI,EAAEV,OAAO,CAAC,eAAe,EAAE,uBAAuB;AACxD,CAAC,EACD;EACEM,IAAI,EAAE,OAAO;EACbE,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAEV,OAAO,CAAC,kBAAkB,EAAE,oBAAoB;AACxD,CAAC,EACD;EACEM,IAAI,EAAE,SAAS;EACfE,IAAI,EAAE,UAAU;EAChBC,KAAK,EAAE,SAAS;EAChBC,IAAI,EAAEV,OAAO,CAAC,QAAQ,EAAE,gBAAgB;AAC1C,CAAC,CACF","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+export { MagicTabs } from "./MagicTabs.js";
+export { MagicTabBar } from "./MagicTabBar.js";
+export { MagicTabItem } from "./MagicTabItem.js";
+export { defaultTabs } from "./defaultTabs.js";
+export { defaultTheme } from "./theme.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MagicTabs","MagicTabBar","MagicTabItem","defaultTabs","defaultTheme"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,SAAS,QAAQ,gBAAa;AACvC,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,YAAY,QAAQ,mBAAgB;AAC7C,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,YAAY,QAAQ,YAAS","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/theme.js

@@ -0,0 +1,16 @@
+"use strict";
+
+/** Default dark, floating-pill theme. */
+export const defaultTheme = {
+  barColor: 'rgba(38, 38, 40, 0.94)',
+  activePillColor: 'rgba(120, 120, 124, 0.55)',
+  activeColor: '#FFFFFF',
+  inactiveColor: '#FFFFFF',
+  iconSize: 22,
+  fontSize: 12,
+  height: 56,
+  radius: 28,
+  horizontalMargin: 14,
+  bottomInset: 10
+};
+//# sourceMappingURL=theme.js.map

package/lib/module/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["defaultTheme","barColor","activePillColor","activeColor","inactiveColor","iconSize","fontSize","height","radius","horizontalMargin","bottomInset"],"sourceRoot":"../../src","sources":["theme.ts"],"mappings":";;AAEA;AACA,OAAO,MAAMA,YAA8B,GAAG;EAC5CC,QAAQ,EAAE,wBAAwB;EAClCC,eAAe,EAAE,2BAA2B;EAC5CC,WAAW,EAAE,SAAS;EACtBC,aAAa,EAAE,SAAS;EACxBC,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,EAAE;EACZC,MAAM,EAAE,EAAE;EACVC,MAAM,EAAE,EAAE;EACVC,gBAAgB,EAAE,EAAE;EACpBC,WAAW,EAAE;AACf,CAAC","ignoreList":[]}

package/lib/module/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/MagicTabBar.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+import type { MagicTabBarTheme, MagicTabBarVariant } from "./types";
+/** Lowest bar opacity we allow, so a transparent bar never becomes invisible. */
+export declare const MIN_BAR_OPACITY = 0.1;
+export interface MagicTabBarProps extends ViewProps {
+    /** Resolved theme. Provided automatically by `MagicTabs`. */
+    theme: MagicTabBarTheme;
+    /** Position the bar floating over content (default) or docked in-flow. */
+    variant?: MagicTabBarVariant;
+    /**
+     * Make the bar background see-through. Off by default — the bar is fully
+     * opaque. Set the strength of the effect with `transparency`.
+     */
+    isTransparent?: boolean;
+    /**
+     * Opacity of the bar background while `isTransparent` is true, from 0 to 1
+     * (e.g. `0.4` = 40% visible). Clamped to a minimum of {@link MIN_BAR_OPACITY}
+     * so the bar never disappears. Defaults to 0.6 when omitted.
+     */
+    transparency?: number;
+    /**
+     * Render the bar as native iOS Liquid Glass (via `expo-glass-effect`).
+     * Requires iOS 26+; on any other platform/version it automatically falls
+     * back to the translucent `barColor` (honoring `transparency`).
+     */
+    glass?: boolean;
+    /** Render a custom background (e.g. a blur/glass view) behind the bar. */
+    renderBackground?: () => ReactNode;
+    /** The tab items. Provided automatically by `MagicTabs`. */
+    children?: ReactNode;
+}
+/**
+ * The visual container of the tab bar. Designed to be used as the `asChild`
+ * target of an Expo Router `<TabList>`.
+ */
+export declare const MagicTabBar: import("react").ForwardRefExoticComponent<MagicTabBarProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=MagicTabBar.d.ts.map

package/lib/typescript/MagicTabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagicTabBar.d.ts","sourceRoot":"","sources":["../../src/MagicTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAEL,IAAI,EAEJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAmBpE,iFAAiF;AACjF,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,6DAA6D;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IACxB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,MAAM,SAAS,CAAC;IACnC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,mGAyFvB,CAAC"}

package/lib/typescript/MagicTabItem.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import { type GestureResponderEvent, type View as RNView } from 'react-native';
+import type { MagicTabBarTheme, MagicTabIconProps } from './types';
+export interface MagicTabItemProps {
+    /** Renders the icon. Provided automatically by `MagicTabs`. */
+    icon: (props: MagicTabIconProps) => ReactNode;
+    /** Optional label shown while the tab is active. */
+    label?: string;
+    /** Resolved theme. Provided automatically by `MagicTabs`. */
+    theme: MagicTabBarTheme;
+    /** @internal */
+    isFocused?: boolean;
+    /** @internal */
+    onPress?: (event: GestureResponderEvent) => void;
+    /** @internal */
+    onLongPress?: (event: GestureResponderEvent) => void;
+    /** @internal */
+    href?: string;
+}
+/**
+ * A single tab. Designed to be used as the `asChild` target of an
+ * Expo Router `<TabTrigger>`, which injects the focus state and press handlers.
+ *
+ * Each tab sizes to its content — just the icon when inactive, icon + label
+ * when active — so the active label is never clipped, on any screen width.
+ */
+export declare const MagicTabItem: import("react").ForwardRefExoticComponent<MagicTabItemProps & import("react").RefAttributes<RNView>>;
+//# sourceMappingURL=MagicTabItem.d.ts.map

package/lib/typescript/MagicTabItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagicTabItem.d.ts","sourceRoot":"","sources":["../../src/MagicTabItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAGL,KAAK,qBAAqB,EAC1B,KAAK,IAAI,IAAI,MAAM,EACpB,MAAM,cAAc,CAAC;AAQtB,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAUnE,MAAM,WAAW,iBAAiB;IAChC,+DAA+D;IAC/D,IAAI,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IAC9C,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,KAAK,EAAE,gBAAgB,CAAC;IAGxB,gBAAgB;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB;IAChB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,gBAAgB;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,sGAgDxB,CAAC"}