fluentglass 0.2.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 grrdhdz
+
+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,169 @@
+# FluentGlass
+
+[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.png?v=101)](https://github.com/ellerbrock/typescript-badges/)
+
+> **Note for AI Assistants & LLMs:** Please refer to `CLAUDE.md` or `AGENTS.md` for architecture rules and system context. This file is intended for human developers consuming the library.
+
+**FluentGlass** is a beautiful, highly-customizable **glassmorphism** UI component library built for **React Native** and **Expo**.
+
+It provides **42 meticulously crafted** interface components featuring deep frosted glass aesthetics, smooth physics-based animations (Reanimated 4), a fully dynamic theming engine, bundled Inter typography, and is **100% strongly typed with TypeScript**.
+
+## Key Features
+
+- **Glassmorphism First:** Deep, layered translucent effects right out of the box using `expo-blur`.
+- **Dynamic Theming Engine:** Override colors, typography, and animation springs down to the token level via `useTheme()`.
+- **Universal Design:** Runs flawlessly on Web (Browser), iOS, and Android using the exact same code.
+- **Bootstrap-Inspired Props:** Intuitive standard props (`size`, `colorScheme`, `radius`, `blur`) for rapid prototyping.
+- **Integrated Typography:** Bundled with the **Inter** font family (6 weights), auto-loaded transparently by the Provider.
+- **Smooth Animations:** Built-in micro-interactions powered by `react-native-reanimated`.
+- **Full TypeScript:** Every component, hook, and utility is strictly typed with zero compilation errors.
+- **Accessible:** All 42 components include accessibility roles, labels, and states for VoiceOver and TalkBack support.
+
+---
+
+## Installation
+
+```bash
+# 1. Install FluentGlass
+npm install fluentglass
+
+# 2. Install peer dependencies required by Expo
+npx expo install expo-blur expo-linear-gradient expo-clipboard expo-font react-native-reanimated react-native-gesture-handler
+```
+
+> **Note:** Make sure you have configured `react-native-reanimated` correctly in your `babel.config.js`.
+
+---
+
+## Quick Start
+
+Wrap your application inside the `<FluentGlassProvider>` (which handles theme injection and font loading automatically), and start using the components!
+
+```jsx
+import React from 'react';
+import {
+  FluentGlassProvider,
+  FluentGlassLayout,
+  FluentGlassCard,
+  FluentGlassButton
+} from 'fluentglass';
+
+export default function App() {
+  return (
+    <FluentGlassProvider>
+      <FluentGlassLayout center>
+
+        <FluentGlassCard
+          title="Welcome to FluentGlass"
+          description="Build stunning futuristic interfaces."
+          colorScheme="info"
+          size="lg"
+          blur="strong"
+          radius="lg"
+        />
+
+        <FluentGlassButton
+          title="Launch App"
+          colorScheme="accent"
+          size="md"
+          marginTop={20}
+          onPress={() => console.log('Lift off!')}
+        />
+
+      </FluentGlassLayout>
+    </FluentGlassProvider>
+  );
+}
+```
+
+---
+
+## The Props System
+
+FluentGlass features a standardized props system. Instead of fighting with raw stylesheets, simply use these properties on nearly any component:
+
+| Category | Prop | Accepted Values |
+|----------|------|----------------|
+| **Sizing** | `size` | `'xs'`, `'sm'`, `'md'`, `'lg'`, `'xl'` |
+| **Color Scheme** | `colorScheme` | `'default'`, `'dark'`, `'deep'`, `'light'`, `'success'`, `'error'`, `'warning'`, `'info'`, `'accent'` |
+| **Glass Effect** | `blur` | `'none'`, `'subtle'`, `'medium'`, `'strong'`, `'max'` |
+| **Border Radius**| `radius` | `'none'`, `'sm'`, `'md'`, `'lg'`, `'pill'` |
+
+*Example:* `<FluentGlassBadge colorScheme="success" size="sm" radius="pill" />`
+
+---
+
+## Custom Theming
+
+FluentGlass uses a deep-merge strategy. You can easily inject your brand colors into the `FluentGlassProvider`.
+
+```jsx
+const customTheme = {
+  colors: {
+    background: '#0F172A',
+    accent: '#8B5CF6',         // Vibrant purple
+    textPrimary: '#F8FAFC',
+    success: '#10B981'
+  },
+  animations: {
+    spring: { default: { mass: 0.5, damping: 10, stiffness: 200 } }
+  }
+};
+
+export default function App() {
+  return (
+    <FluentGlassProvider theme={customTheme}>
+      <YourAppContents />
+    </FluentGlassProvider>
+  );
+}
+```
+
+---
+
+## Component Catalog
+
+FluentGlass provides **42 ready-to-use components** organized by category:
+
+### Forms (13)
+`FluentGlassTextInput`, `FluentGlassLabeledInput`, `FluentGlassPasswordInput`, `FluentGlassEmailInput`, `FluentGlassDateInput`, `FluentGlassInput`, `FluentGlassSelect`, `FluentGlassDropdown`, `FluentGlassSwitch`, `FluentGlassCheckbox`, `FluentGlassSlider`, `FluentGlassSegmentedControl`, `FluentGlassDatePicker`
+
+### Layout & Navigation (11)
+`FluentGlass`, `FluentGlassLayout`, `FluentGlassContainer`, `FluentGlassCard`, `FluentGlassSimpleCard`, `FluentGlassResponsiveRow`, `FluentGlassSidebar`, `FluentGlassDock`, `FluentGlassBreadcrumb`, `FluentGlassSeparator`, `FluentGlassScrollArea`
+
+### Data Display (11)
+`FluentGlassTable`, `FluentGlassBarChart`, `FluentGlassCodeBlock`, `FluentGlassTimeline`, `FluentGlassBadge`, `FluentGlassTag`, `FluentGlassStatusIndicator`, `FluentGlassStatWidget`, `FluentGlassCalendarWidget`, `FluentGlassClockWidget`, `FluentGlassWeatherWidget`
+
+### Feedback & Overlays (6)
+`FluentGlassAlert`, `FluentGlassDialog`, `FluentGlassPopover`, `FluentGlassSheet`, `FluentGlassSkeleton`, `FluentGlassCrossfade`
+
+### Actions (1)
+`FluentGlassButton`
+
+*For detailed API documentation on all components, see the `/docs` folder.*
+
+---
+
+## Running the Example App
+
+The repository includes a fully working documentation/demo app in the `/example` folder:
+
+```bash
+# Clone the repository
+git clone https://github.com/grrdhdz/FluentGlass.git
+
+# Enter the example directory
+cd FluentGlass/example
+npm install
+
+# Start the local development web server
+npx expo start --web
+```
+
+The example app showcases all 42 components across 5 sections: Home, Form Controls, Data Display, Layout & Nav, and Feedback.
+
+---
+
+## License
+
+Distributed under the **MIT License**. Copyright grrdhdz. See `LICENSE` for more information.

package/lib/commonjs/components/FluentGlass.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FluentGlass;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _expoBlur = require("expo-blur");
+var _useTheme = _interopRequireDefault(require("../theme/useTheme"));
+var _resolvers = require("../theme/resolvers");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * FluentGlass (Atom)
+ * The fundamental building block for the FluentGlass Core.
+ * Provides the "glass" material with configurable intensity and border.
+ *
+ * @param {string} colorScheme - 'default' | 'dark' | 'deep' | 'light' | 'success' | 'error' | 'warning' | 'info'
+ * @param {string} blur - 'none' | 'subtle' | 'medium' | 'strong' | 'max'
+ * @param {string} radius - 'none' | 'sm' | 'md' | 'lg' | 'pill'
+ * @param {number} borderOpacity - Border opacity (0-1)
+ *
+ * Legacy props (backward compat): tint, intensity, borderRadius
+ */
+
+function FluentGlass({
+  children,
+  style,
+  // New standardized props
+  colorScheme,
+  blur,
+  radius,
+  // Legacy props (backward compat)
+  intensity,
+  tint,
+  borderOpacity = 0.2,
+  borderRadius,
+  // Accessibility props
+  accessible,
+  accessibilityRole,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  accessibilityValue,
+  accessibilityViewIsModal
+}) {
+  const theme = (0, _useTheme.default)();
+
+  // Resolve backward compatibility
+  const compat = (0, _resolvers.resolveBackwardCompat)({
+    tint,
+    intensity,
+    colorScheme,
+    blur
+  });
+  const resolvedColorScheme = compat.colorScheme || theme.defaults.colorScheme;
+  const resolvedBlur = compat.blur || theme.defaults.blur;
+  const colorConfig = (0, _resolvers.resolveColorScheme)(theme, resolvedColorScheme);
+  const blurConfig = (0, _resolvers.resolveBlur)(theme, resolvedBlur);
+  const resolvedRadius = borderRadius ?? (0, _resolvers.resolveRadius)(theme, radius || 'lg');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    accessible: accessible,
+    accessibilityRole: accessibilityRole,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: accessibilityState,
+    accessibilityValue: accessibilityValue,
+    accessibilityViewIsModal: accessibilityViewIsModal,
+    style: [styles.container, {
+      borderRadius: resolvedRadius,
+      borderColor: colorConfig.border || theme.colors.border,
+      backgroundColor: colorConfig.bg
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoBlur.BlurView, {
+      intensity: blurConfig.intensity,
+      tint: colorConfig.tint,
+      style: styles.blur,
+      children: children
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    borderWidth: 1
+  },
+  blur: {
+    flex: 1,
+    width: '100%',
+    height: '100%'
+  }
+});
+//# sourceMappingURL=FluentGlass.js.map

package/lib/commonjs/components/FluentGlass.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_expoBlur","_useTheme","_resolvers","_jsxRuntime","e","__esModule","default","FluentGlass","children","style","colorScheme","blur","radius","intensity","tint","borderOpacity","borderRadius","accessible","accessibilityRole","accessibilityLabel","accessibilityHint","accessibilityState","accessibilityValue","accessibilityViewIsModal","theme","useTheme","compat","resolveBackwardCompat","resolvedColorScheme","defaults","resolvedBlur","colorConfig","resolveColorScheme","blurConfig","resolveBlur","resolvedRadius","resolveRadius","jsx","View","styles","container","borderColor","border","colors","backgroundColor","bg","BlurView","StyleSheet","create","overflow","borderWidth","flex","width","height"],"sourceRoot":"..\\..\\..\\src","sources":["components/FluentGlass.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AAA2G,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE3G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAae,SAASG,WAAWA,CAAC;EAChCC,QAAQ;EACRC,KAAK;EACL;EACAC,WAAW;EACXC,IAAI;EACJC,MAAM;EACN;EACAC,SAAS;EACTC,IAAI;EACJC,aAAa,GAAG,GAAG;EACnBC,YAAY;EACZ;EACAC,UAAU;EACVC,iBAAiB;EACjBC,kBAAkB;EAClBC,iBAAiB;EACjBC,kBAAkB;EAClBC,kBAAkB;EAClBC;AACc,CAAC,EAAE;EACjB,MAAMC,KAAK,GAAG,IAAAC,iBAAQ,EAAC,CAAC;;EAExB;EACA,MAAMC,MAAM,GAAG,IAAAC,gCAAqB,EAAC;IAAEb,IAAI;IAAED,SAAS;IAAEH,WAAW;IAAEC;EAAK,CAAC,CAAC;EAC5E,MAAMiB,mBAAmB,GAAGF,MAAM,CAAChB,WAAW,IAAIc,KAAK,CAACK,QAAQ,CAACnB,WAAW;EAC5E,MAAMoB,YAAY,GAAGJ,MAAM,CAACf,IAAI,IAAIa,KAAK,CAACK,QAAQ,CAAClB,IAAI;EAEvD,MAAMoB,WAAW,GAAG,IAAAC,6BAAkB,EAACR,KAAK,EAAEI,mBAAmB,CAAC;EAClE,MAAMK,UAAU,GAAG,IAAAC,sBAAW,EAACV,KAAK,EAAEM,YAAY,CAAC;EACnD,MAAMK,cAAc,GAAGnB,YAAY,IAAI,IAAAoB,wBAAa,EAACZ,KAAK,EAAEZ,MAAM,IAAI,IAAI,CAAC;EAE3E,oBACI,IAAAT,WAAA,CAAAkC,GAAA,EAACtC,YAAA,CAAAuC,IAAI;IACDrB,UAAU,EAAEA,UAAW;IACvBC,iBAAiB,EAAEA,iBAAkB;IACrCC,kBAAkB,EAAEA,kBAAmB;IACvCC,iBAAiB,EAAEA,iBAAkB;IACrCC,kBAAkB,EAAEA,kBAAmB;IACvCC,kBAAkB,EAAEA,kBAAmB;IACvCC,wBAAwB,EAAEA,wBAAyB;IACnDd,KAAK,EAAE,CACH8B,MAAM,CAACC,SAAS,EAChB;MACIxB,YAAY,EAAEmB,cAAc;MAC5BM,WAAW,EAAEV,WAAW,CAACW,MAAM,IAAIlB,KAAK,CAACmB,MAAM,CAACD,MAAM;MACtDE,eAAe,EAAEb,WAAW,CAACc;IACjC,CAAC,EACDpC,KAAK,CACP;IAAAD,QAAA,eAEF,IAAAL,WAAA,CAAAkC,GAAA,EAACrC,SAAA,CAAA8C,QAAQ;MACLjC,SAAS,EAAEoB,UAAU,CAACpB,SAAU;MAChCC,IAAI,EAAEiB,WAAW,CAACjB,IAAK;MACvBL,KAAK,EAAE8B,MAAM,CAAC5B,IAAK;MAAAH,QAAA,EAElBA;IAAQ,CACH;EAAC,CACT,CAAC;AAEf;AAEA,MAAM+B,MAAM,GAAGQ,uBAAU,CAACC,MAAM,CAAC;EAC7BR,SAAS,EAAE;IACPS,QAAQ,EAAE,QAAQ;IAClBC,WAAW,EAAE;EACjB,CAAC;EACDvC,IAAI,EAAE;IACFwC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACZ;AACJ,CAAC,CAAC","ignoreList":[]}

package/lib/commonjs/components/FluentGlassAlert.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FluentGlassAlert;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _FluentGlass = _interopRequireDefault(require("./FluentGlass"));
+var _useTheme = _interopRequireDefault(require("../theme/useTheme"));
+var _resolvers = require("../theme/resolvers");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ALERT_ICONS = {
+  success: '✓',
+  error: '✕',
+  warning: '⚠',
+  info: 'ℹ'
+};
+function FluentGlassAlert({
+  // New standardized props
+  colorScheme,
+  size,
+  blur,
+  radius,
+  // Legacy props
+  type = 'info',
+  title,
+  message,
+  style,
+  accessibilityLabel
+}) {
+  const theme = (0, _useTheme.default)();
+
+  // Resolve backward compat: type → colorScheme
+  const compat = (0, _resolvers.resolveBackwardCompat)({
+    type,
+    colorScheme,
+    blur
+  });
+  const resolvedScheme = compat.colorScheme || 'info';
+  const colorConfig = (0, _resolvers.resolveColorScheme)(theme, resolvedScheme);
+  const sizeConfig = (0, _resolvers.resolveSize)(theme, size || theme.defaults.size);
+  const resolvedRadius = (0, _resolvers.resolveRadius)(theme, radius || 'md');
+  const icon = ALERT_ICONS[resolvedScheme] || ALERT_ICONS.info;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FluentGlass.default, {
+    style: [styles.container, {
+      backgroundColor: colorConfig.bg,
+      borderColor: colorConfig.border
+    }, style],
+    colorScheme: "dark",
+    blur: compat.blur || 'subtle',
+    borderRadius: resolvedRadius,
+    borderOpacity: 0,
+    accessible: true,
+    accessibilityRole: "alert",
+    accessibilityLabel: accessibilityLabel ?? [title, message].filter(Boolean).join('. '),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.content, {
+        padding: sizeConfig.paddingHorizontal,
+        gap: (sizeConfig.gap ?? 0) + 4
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.iconCircle, {
+          backgroundColor: `${colorConfig.solid}22`,
+          borderColor: colorConfig.solid,
+          width: sizeConfig.minHeight * 0.75,
+          height: sizeConfig.minHeight * 0.75,
+          borderRadius: sizeConfig.minHeight * 0.375
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.icon, {
+            color: colorConfig.solid,
+            fontSize: sizeConfig.fontSize - 1,
+            fontFamily: theme.typography.extraBold
+          }],
+          children: icon
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.textArea,
+        children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.title, {
+            color: theme.colors.textPrimary,
+            fontSize: sizeConfig.fontSize,
+            fontFamily: theme.typography.bold
+          }],
+          children: title
+        }) : null, message ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.message, {
+            color: theme.colors.textSecondary,
+            fontSize: sizeConfig.fontSize - 2
+          }],
+          children: message
+        }) : null]
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    borderWidth: 1
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  iconCircle: {
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    fontWeight: '800'
+  },
+  textArea: {
+    flex: 1
+  },
+  title: {
+    fontWeight: '700'
+  },
+  message: {
+    marginTop: 2,
+    lineHeight: 18
+  }
+});
+//# sourceMappingURL=FluentGlassAlert.js.map

package/lib/commonjs/components/FluentGlassAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_FluentGlass","_useTheme","_resolvers","_jsxRuntime","e","__esModule","default","ALERT_ICONS","success","error","warning","info","FluentGlassAlert","colorScheme","size","blur","radius","type","title","message","style","accessibilityLabel","theme","useTheme","compat","resolveBackwardCompat","resolvedScheme","colorConfig","resolveColorScheme","sizeConfig","resolveSize","defaults","resolvedRadius","resolveRadius","icon","jsx","styles","container","backgroundColor","bg","borderColor","border","borderRadius","borderOpacity","accessible","accessibilityRole","filter","Boolean","join","children","jsxs","View","content","padding","paddingHorizontal","gap","iconCircle","solid","width","minHeight","height","Text","color","fontSize","fontFamily","typography","extraBold","textArea","colors","textPrimary","bold","textSecondary","StyleSheet","create","borderWidth","flexDirection","alignItems","justifyContent","fontWeight","flex","marginTop","lineHeight"],"sourceRoot":"..\\..\\..\\src","sources":["components/FluentGlassAlert.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/FluentGlassBadge.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FluentGlassBadge;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _FluentGlass = _interopRequireDefault(require("./FluentGlass"));
+var _useTheme = _interopRequireDefault(require("../theme/useTheme"));
+var _resolvers = require("../theme/resolvers");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * FluentGlassBadge (Atom)
+ * Glassmorphism badge with variants: default, secondary, outline, destructive.
+ * Pill-shaped, compact label for status or categorization.
+ *
+ * @param {string} size - 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ * @param {string} colorScheme - 'default' | 'info' | 'success' | 'error' | 'warning'
+ * @param {string} radius - border radius
+ */
+
+function FluentGlassBadge({
+  label,
+  variant,
+  // mapped via backward compat
+  style,
+  textStyle,
+  icon,
+  // New standardized props
+  size,
+  colorScheme,
+  radius = 'pill'
+}) {
+  const theme = (0, _useTheme.default)();
+  const sizeConfig = (0, _resolvers.resolveSize)(theme, size || 'xs');
+  const compat = (0, _resolvers.resolveBackwardCompat)({
+    variant,
+    colorScheme
+  });
+  const resolvedScheme = compat.colorScheme || 'default';
+  const colorConfig = (0, _resolvers.resolveColorScheme)(theme, resolvedScheme);
+  const isOutline = variant === 'outline';
+  if (isOutline) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      accessible: true,
+      accessibilityLabel: String(label),
+      style: [styles.outlineContainer, {
+        height: sizeConfig.minHeight,
+        paddingHorizontal: sizeConfig.paddingHorizontal,
+        borderColor: colorConfig.border || theme.colors.border
+      }, style],
+      children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.iconContainer, {
+          marginRight: sizeConfig.gap
+        }],
+        children: icon
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.text, {
+          color: theme.colors.textSecondary,
+          fontSize: sizeConfig.fontSize,
+          fontFamily: theme.typography.medium
+        }, textStyle],
+        children: label
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FluentGlass.default, {
+    accessible: true,
+    accessibilityLabel: String(label),
+    style: [styles.container, {
+      height: sizeConfig.minHeight
+    }, style],
+    colorScheme: resolvedScheme,
+    blur: "none",
+    radius: radius,
+    borderOpacity: 0.25,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.content, {
+        paddingHorizontal: sizeConfig.paddingHorizontal,
+        gap: sizeConfig.gap
+      }],
+      children: [icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconContainer,
+        children: icon
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.text, {
+          color: colorConfig.text || theme.colors.textPrimary,
+          fontSize: sizeConfig.fontSize,
+          fontFamily: theme.typography.medium
+        }, textStyle],
+        children: label
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  outlineContainer: {
+    alignSelf: 'flex-start',
+    borderRadius: 20,
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  text: {
+    fontWeight: '500'
+  },
+  iconContainer: {
+    // margin normally handled by flex gap
+  }
+});
+//# sourceMappingURL=FluentGlassBadge.js.map

package/lib/commonjs/components/FluentGlassBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_FluentGlass","_useTheme","_resolvers","_jsxRuntime","e","__esModule","default","FluentGlassBadge","label","variant","style","textStyle","icon","size","colorScheme","radius","theme","useTheme","sizeConfig","resolveSize","compat","resolveBackwardCompat","resolvedScheme","colorConfig","resolveColorScheme","isOutline","jsxs","View","accessible","accessibilityLabel","String","styles","outlineContainer","height","minHeight","paddingHorizontal","borderColor","border","colors","children","jsx","iconContainer","marginRight","gap","Text","text","color","textSecondary","fontSize","fontFamily","typography","medium","container","blur","borderOpacity","content","textPrimary","StyleSheet","create","alignSelf","justifyContent","flex","flexDirection","alignItems","borderRadius","borderWidth","fontWeight"],"sourceRoot":"..\\..\\..\\src","sources":["components/FluentGlassBadge.tsx"],"mappings":"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","ignoreList":[]}