fluentglass 0.2.6

package/lib/module/components/FluentGlassSidebar.js

@@ -0,0 +1,351 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View, Text, TouchableOpacity, ScrollView, Platform, Pressable } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring, interpolate } from 'react-native-reanimated';
+import useTheme from '../theme/useTheme';
+import useBreakpoint from '../hooks/useBreakpoint';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const NAV_ITEM_HEIGHT = 48;
+const NAV_ITEM_GAP = 4;
+
+/** Defaults exported for consumers to calculate marginLeft etc. */
+export const SIDEBAR_DEFAULTS = {
+  width: 260,
+  margin: 16,
+  navItemHeight: NAV_ITEM_HEIGHT,
+  navItemGap: NAV_ITEM_GAP
+};
+
+/**
+ * FluentGlassSidebar
+ *
+ * Floating glass sidebar with animated slide, vertical nav indicator,
+ * and hamburger toggle. Responsive: floating on desktop, overlay on mobile.
+ *
+ * Usage:
+ *   <FluentGlassSidebar
+ *     routes={[{ id: 'home', label: 'Home', icon: '🏠' }]}
+ *     activeRoute="home"
+ *     onNavigate={setRoute}
+ *     open={open}
+ *     onToggle={toggle}
+ *   />
+ */
+
+export default function FluentGlassSidebar({
+  routes = [],
+  activeRoute,
+  onNavigate,
+  open = true,
+  onToggle,
+  header,
+  navHeader,
+  width = SIDEBAR_DEFAULTS.width,
+  margin = SIDEBAR_DEFAULTS.margin,
+  colorScheme = 'default',
+  blur = 'medium',
+  radius = 'lg',
+  style
+}) {
+  // Optional background and borders mapping
+  // We want the modal surface to feel like 'deep' glass by default, 
+  // but users can specify 'light' or other schemas via the `colorScheme`
+  const theme = useTheme();
+  const {
+    colors,
+    typography
+  } = theme;
+  const {
+    isMobile
+  } = useBreakpoint();
+
+  // Spring configs from theme
+  const sidebarSpring = theme.animations?.springs?.default || {
+    mass: 0.6,
+    damping: 16,
+    stiffness: 140
+  };
+  const navSpring = theme.animations?.springs?.bouncy || {
+    mass: 0.5,
+    damping: 15,
+    stiffness: 160
+  };
+
+  // Slide animation
+  const progress = useSharedValue(open ? 1 : 0);
+  React.useEffect(() => {
+    progress.value = withSpring(open ? 1 : 0, sidebarSpring);
+  }, [open]);
+
+  // Nav indicator
+  const activeIndex = routes.findIndex(r => r.id === activeRoute);
+  const navIndicatorY = useSharedValue(Math.max(0, activeIndex) * (NAV_ITEM_HEIGHT + NAV_ITEM_GAP));
+  React.useEffect(() => {
+    if (activeIndex >= 0) {
+      navIndicatorY.value = withSpring(activeIndex * (NAV_ITEM_HEIGHT + NAV_ITEM_GAP), navSpring);
+    }
+  }, [activeIndex]);
+
+  // Animated styles
+  const sidebarAnimStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: interpolate(progress.value, [0, 1], [-(width + margin * 2), 0])
+    }],
+    opacity: interpolate(progress.value, [0, 0.3, 1], [0, 1, 1])
+  }));
+  const navIndicatorStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: navIndicatorY.value
+    }]
+  }));
+  const backdropAnimStyle = useAnimatedStyle(() => ({
+    opacity: progress.value
+  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!isMobile && !open && /*#__PURE__*/_jsx(Pressable, {
+      onPress: onToggle,
+      style: [styles.floatingHamburger, {
+        top: margin,
+        left: margin,
+        backgroundColor: `${colors.background}99`,
+        borderColor: colors.border,
+        shadowColor: colors.shadow
+      }],
+      accessibilityRole: "button",
+      accessibilityLabel: "Open navigation menu",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.floatingHamburgerText, {
+          color: colors.textPrimary
+        }],
+        children: "\u2630"
+      })
+    }), isMobile && /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        position: 'absolute',
+        top: -margin,
+        bottom: -margin,
+        left: -margin,
+        right: -margin,
+        backgroundColor: colors.overlay,
+        zIndex: 5
+      }, backdropAnimStyle],
+      pointerEvents: open ? 'auto' : 'none',
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFill,
+        onPress: onToggle,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close navigation menu"
+      })
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.sidebarOuter, {
+        top: margin,
+        left: margin,
+        bottom: margin,
+        width
+      }, isMobile && styles.sidebarOuterMobile, sidebarAnimStyle, style],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.sidebarGlass, {
+          backgroundColor: `${colors.background}8C`,
+          borderColor: colors.border,
+          shadowColor: colors.shadow
+        }],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: [styles.sidebarHeader, {
+            borderBottomColor: `${colors.textPrimary}1A`
+          }],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: {
+              flex: 1
+            },
+            children: header
+          }), !isMobile && /*#__PURE__*/_jsx(Pressable, {
+            onPress: onToggle,
+            style: [styles.hamburgerBtn, {
+              backgroundColor: `${colors.textPrimary}1A`,
+              borderColor: colors.border
+            }],
+            accessibilityRole: "button",
+            accessibilityLabel: "Close navigation menu",
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.hamburgerBtnText, {
+                color: colors.textSecondary
+              }],
+              children: "\u2715"
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(ScrollView, {
+          style: styles.navContainer,
+          showsVerticalScrollIndicator: false,
+          children: [navHeader && /*#__PURE__*/_jsx(Text, {
+            style: [styles.navHeaderText, {
+              color: colors.textSecondary,
+              fontFamily: typography.bold
+            }],
+            children: navHeader
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.navList,
+            children: [/*#__PURE__*/_jsx(Animated.View, {
+              style: [styles.navIndicator, navIndicatorStyle, {
+                backgroundColor: colors.accent + '12',
+                borderColor: colors.accent + '30'
+              }]
+            }), routes.map(route => {
+              const isActive = activeRoute === route.id;
+              return /*#__PURE__*/_jsxs(TouchableOpacity, {
+                style: styles.navItem,
+                onPress: () => onNavigate?.(route.id),
+                activeOpacity: 0.7,
+                accessibilityRole: "menuitem",
+                accessibilityLabel: route.label,
+                accessibilityState: {
+                  selected: isActive
+                },
+                children: [route.icon && /*#__PURE__*/_jsx(Text, {
+                  style: [styles.navIcon, isActive && {
+                    color: colors.textPrimary,
+                    opacity: 1
+                  }],
+                  children: route.icon
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: [styles.navText, {
+                    color: colors.textSecondary,
+                    fontFamily: typography.medium
+                  }, isActive && {
+                    color: colors.textPrimary,
+                    fontFamily: typography.semiBold
+                  }],
+                  children: route.label
+                })]
+              }, route.id);
+            })]
+          })]
+        })]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  // Floating outer (positioning)
+  sidebarOuter: {
+    position: 'absolute',
+    zIndex: 50
+  },
+  sidebarOuterMobile: {
+    zIndex: 10
+  },
+  // Glass container
+  sidebarGlass: {
+    flex: 1,
+    borderRadius: 20,
+    borderWidth: 1,
+    overflow: 'hidden',
+    ...Platform.select({
+      web: {
+        backdropFilter: 'blur(24px)',
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05)'
+      },
+      default: {
+        shadowOffset: {
+          width: 0,
+          height: 8
+        },
+        shadowOpacity: 0.4,
+        shadowRadius: 32,
+        elevation: 24
+      }
+    })
+  },
+  // Header
+  sidebarHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingTop: Platform.OS === 'web' ? 24 : 44,
+    paddingBottom: 20,
+    borderBottomWidth: 1
+  },
+  // Hamburger inside sidebar
+  hamburgerBtn: {
+    width: 36,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+    borderWidth: 1
+  },
+  hamburgerBtnText: {
+    fontSize: 16,
+    lineHeight: 18
+  },
+  // Floating hamburger (when closed)
+  floatingHamburger: {
+    position: 'absolute',
+    zIndex: 60,
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...Platform.select({
+      web: {
+        backdropFilter: 'blur(16px)',
+        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.3)'
+      },
+      default: {
+        shadowOffset: {
+          width: 0,
+          height: 4
+        },
+        shadowOpacity: 0.3,
+        shadowRadius: 16,
+        elevation: 16
+      }
+    })
+  },
+  floatingHamburgerText: {
+    fontSize: 20
+  },
+  // Nav
+  navContainer: {
+    flex: 1,
+    paddingTop: 16
+  },
+  navHeaderText: {
+    fontSize: 11,
+    letterSpacing: 1.5,
+    paddingHorizontal: 20,
+    marginBottom: 12
+  },
+  navList: {
+    position: 'relative'
+  },
+  navIndicator: {
+    position: 'absolute',
+    top: 0,
+    left: 10,
+    right: 10,
+    height: NAV_ITEM_HEIGHT,
+    borderRadius: 12,
+    borderWidth: 1
+  },
+  navItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: NAV_ITEM_HEIGHT,
+    paddingHorizontal: 20,
+    marginHorizontal: 10,
+    marginBottom: NAV_ITEM_GAP,
+    borderRadius: 12
+  },
+  navIcon: {
+    fontSize: 16,
+    marginRight: 12,
+    opacity: 0.7
+  },
+  navText: {
+    fontSize: 15
+  }
+});
+//# sourceMappingURL=FluentGlassSidebar.js.map

package/lib/module/components/FluentGlassSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","Text","TouchableOpacity","ScrollView","Platform","Pressable","Animated","useSharedValue","useAnimatedStyle","withSpring","interpolate","useTheme","useBreakpoint","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","NAV_ITEM_HEIGHT","NAV_ITEM_GAP","SIDEBAR_DEFAULTS","width","margin","navItemHeight","navItemGap","FluentGlassSidebar","routes","activeRoute","onNavigate","open","onToggle","header","navHeader","colorScheme","blur","radius","style","theme","colors","typography","isMobile","sidebarSpring","animations","springs","default","mass","damping","stiffness","navSpring","bouncy","progress","useEffect","value","activeIndex","findIndex","r","id","navIndicatorY","Math","max","sidebarAnimStyle","transform","translateX","opacity","navIndicatorStyle","translateY","backdropAnimStyle","children","onPress","styles","floatingHamburger","top","left","backgroundColor","background","borderColor","border","shadowColor","shadow","accessibilityRole","accessibilityLabel","floatingHamburgerText","color","textPrimary","position","bottom","right","overlay","zIndex","pointerEvents","absoluteFill","sidebarOuter","sidebarOuterMobile","sidebarGlass","sidebarHeader","borderBottomColor","flex","hamburgerBtn","hamburgerBtnText","textSecondary","navContainer","showsVerticalScrollIndicator","navHeaderText","fontFamily","bold","navList","navIndicator","accent","map","route","isActive","navItem","activeOpacity","label","accessibilityState","selected","icon","navIcon","navText","medium","semiBold","create","borderRadius","borderWidth","overflow","select","web","backdropFilter","boxShadow","shadowOffset","height","shadowOpacity","shadowRadius","elevation","flexDirection","alignItems","paddingHorizontal","paddingTop","OS","paddingBottom","borderBottomWidth","justifyContent","fontSize","lineHeight","letterSpacing","marginBottom","marginHorizontal","marginRight"],"sourceRoot":"..\\..\\..\\src","sources":["components/FluentGlassSidebar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/FluentGlassSimpleCard.js

@@ -0,0 +1,51 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import FluentGlass from './FluentGlass';
+
+/**
+ * FluentGlassSimpleCard (Component)
+ * Standard container for content.
+ * Wraps FluentGlass with standard padding and structure.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function FluentGlassSimpleCard({
+  children,
+  style,
+  contentStyle,
+  size,
+  colorScheme,
+  blur,
+  radius,
+  intensity,
+  // legacy
+  tint,
+  // legacy
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(FluentGlass, {
+    style: [styles.container, style],
+    size: size,
+    colorScheme: colorScheme,
+    blur: blur,
+    radius: radius,
+    intensity: intensity,
+    tint: tint,
+    ...props,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.content, contentStyle],
+      children: children
+    })
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    marginVertical: 8
+  },
+  content: {
+    padding: 16
+  }
+});
+//# sourceMappingURL=FluentGlassSimpleCard.js.map

package/lib/module/components/FluentGlassSimpleCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","FluentGlass","jsx","_jsx","FluentGlassSimpleCard","children","style","contentStyle","size","colorScheme","blur","radius","intensity","tint","props","styles","container","content","create","width","marginVertical","padding"],"sourceRoot":"..\\..\\..\\src","sources":["components/FluentGlassSimpleCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,WAAW,MAAM,eAAe;;AAEvC;AACA;AACA;AACA;AACA;AAJA,SAAAC,GAAA,IAAAC,IAAA;AAgBA,eAAe,SAASC,qBAAqBA,CAAC;EAC1CC,QAAQ;EACRC,KAAK;EACLC,YAAY;EACZC,IAAI;EACJC,WAAW;EACXC,IAAI;EACJC,MAAM;EACNC,SAAS;EAAE;EACXC,IAAI;EAAO;EACX,GAAGC;AACqB,CAAC,EAAE;EAC3B,oBACIX,IAAA,CAACF,WAAW;IACRK,KAAK,EAAE,CAACS,MAAM,CAACC,SAAS,EAAEV,KAAK,CAAE;IACjCE,IAAI,EAAEA,IAAK;IACXC,WAAW,EAAEA,WAAY;IACzBC,IAAI,EAAEA,IAAK;IACXC,MAAM,EAAEA,MAAO;IACfC,SAAS,EAAEA,SAAU;IACrBC,IAAI,EAAEA,IAAK;IAAA,GACPC,KAAK;IAAAT,QAAA,eAETF,IAAA,CAACH,IAAI;MAACM,KAAK,EAAE,CAACS,MAAM,CAACE,OAAO,EAAEV,YAAY,CAAE;MAAAF,QAAA,EACvCA;IAAQ,CACP;EAAC,CACE,CAAC;AAEtB;AAEA,MAAMU,MAAM,GAAGhB,UAAU,CAACmB,MAAM,CAAC;EAC7BF,SAAS,EAAE;IACPG,KAAK,EAAE,MAAM;IACbC,cAAc,EAAE;EACpB,CAAC;EACDH,OAAO,EAAE;IACLI,OAAO,EAAE;EACb;AACJ,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/FluentGlassSkeleton.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import React, { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, withSequence } from 'react-native-reanimated';
+import useTheme from '../theme/useTheme';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * FluentGlassSkeleton (Component)
+ * Loading placeholder with a pulsing opacity animation.
+ */
+export default function FluentGlassSkeleton({
+  width,
+  height,
+  borderRadius = 8,
+  style
+}) {
+  const theme = useTheme();
+  const COLORS = theme.colors;
+  const opacity = useSharedValue(0.3);
+  useEffect(() => {
+    opacity.value = withRepeat(withSequence(withTiming(0.6, {
+      duration: 1000
+    }), withTiming(0.3, {
+      duration: 1000
+    })), -1, true);
+  }, []);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value
+  }));
+  return /*#__PURE__*/_jsx(Animated.View, {
+    accessible: false,
+    style: [styles.container, {
+      width: width,
+      height: height,
+      borderRadius,
+      backgroundColor: COLORS.border
+    }, animatedStyle, style]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    // backgroundColor applied inline from useTheme()
+  }
+});
+//# sourceMappingURL=FluentGlassSkeleton.js.map

package/lib/module/components/FluentGlassSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","StyleSheet","Animated","useSharedValue","useAnimatedStyle","withRepeat","withTiming","withSequence","useTheme","jsx","_jsx","FluentGlassSkeleton","width","height","borderRadius","style","theme","COLORS","colors","opacity","value","duration","animatedStyle","View","accessible","styles","container","backgroundColor","border","create"],"sourceRoot":"..\\..\\..\\src","sources":["components/FluentGlassSkeleton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAAyBC,UAAU,QAAoC,cAAc;AACrF,OAAOC,QAAQ,IACXC,cAAc,EACdC,gBAAgB,EAChBC,UAAU,EACVC,UAAU,EACVC,YAAY,QACT,yBAAyB;AAChC,OAAOC,QAAQ,MAAM,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AASzC;AACA;AACA;AACA;AACA,eAAe,SAASC,mBAAmBA,CAAC;EAAEC,KAAK;EAC/CC,MAAM;EACNC,YAAY,GAAG,CAAC;EAChBC;AAAiC,CAAC,EAAE;EACpC,MAAMC,KAAK,GAAGR,QAAQ,CAAC,CAAC;EACxB,MAAMS,MAAM,GAAGD,KAAK,CAACE,MAAM;EAE3B,MAAMC,OAAO,GAAGhB,cAAc,CAAC,GAAG,CAAC;EAEnCH,SAAS,CAAC,MAAM;IACZmB,OAAO,CAACC,KAAK,GAAGf,UAAU,CACtBE,YAAY,CACRD,UAAU,CAAC,GAAG,EAAE;MAAEe,QAAQ,EAAE;IAAK,CAAC,CAAC,EACnCf,UAAU,CAAC,GAAG,EAAE;MAAEe,QAAQ,EAAE;IAAK,CAAC,CACtC,CAAC,EACD,CAAC,CAAC,EACF,IACJ,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,aAAa,GAAGlB,gBAAgB,CAAC,OAAO;IAC1Ce,OAAO,EAAEA,OAAO,CAACC;EACrB,CAAC,CAAC,CAAC;EAEH,oBACIV,IAAA,CAACR,QAAQ,CAACqB,IAAI;IACVC,UAAU,EAAE,KAAM;IAClBT,KAAK,EAAE,CACHU,MAAM,CAACC,SAAS,EAChB;MACId,KAAK,EAAEA,KAAuB;MAC9BC,MAAM,EAAEA,MAAwB;MAChCC,YAAY;MACZa,eAAe,EAAEV,MAAM,CAACW;IAC5B,CAAC,EACDN,aAAa,EACbP,KAAK;EACP,CACL,CAAC;AAEV;AAEA,MAAMU,MAAM,GAAGxB,UAAU,CAAC4B,MAAM,CAAC;EAC7BH,SAAS,EAAE;IACP;EAAA;AAER,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/FluentGlassSlider.js

@@ -0,0 +1,191 @@
+"use strict";
+
+import React, { useCallback, useEffect } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, runOnJS, withTiming } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import useTheme from '../theme/useTheme';
+
+/**
+ * FluentGlassSlider (Molecule)
+ * Glassmorphism slider — fully driven by SharedValues for buttery drag.
+ *
+ * Variants:
+ * - basic: Just the track + thumb
+ * - labeled: Label on left, value display on right, track below
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TRACK_HEIGHT = 6;
+const THUMB_SIZE = 22;
+export default function FluentGlassSlider({
+  value = 50,
+  onValueChange,
+  min = 0,
+  max = 100,
+  label,
+  showValue,
+  formatValue,
+  style,
+  accessibilityLabel
+}) {
+  const theme = useTheme();
+  const COLORS = theme.colors;
+  const hasLabel = Boolean(label);
+  const shouldShowValue = showValue !== undefined ? showValue : hasLabel;
+
+  // SharedValues drive the UI on the native thread — no JS round-trips
+  const progress = useSharedValue((value - min) / (max - min));
+  const trackW = useSharedValue(0);
+  const startProgress = useSharedValue(0);
+
+  // Sync external value changes (e.g. programmatic updates)
+  useEffect(() => {
+    progress.value = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  }, [value, min, max, progress]);
+  const emitValue = useCallback(ratio => {
+    if (onValueChange) {
+      const clamped = Math.max(0, Math.min(1, ratio));
+      onValueChange(Math.round(min + clamped * (max - min)));
+    }
+  }, [onValueChange, min, max]);
+  const panGesture = Gesture.Pan().onBegin(() => {
+    startProgress.value = progress.value;
+  }).onUpdate(e => {
+    'worklet';
+
+    if (trackW.value > 0) {
+      const delta = e.translationX / trackW.value;
+      const next = Math.max(0, Math.min(1, startProgress.value + delta));
+      progress.value = next;
+    }
+  }).onEnd(() => {
+    'worklet';
+
+    runOnJS(emitValue)(progress.value);
+  });
+
+  // Tap on track to jump
+  const tapGesture = Gesture.Tap().onEnd(e => {
+    'worklet';
+
+    if (trackW.value > 0) {
+      const next = Math.max(0, Math.min(1, e.x / trackW.value));
+      progress.value = withTiming(next, {
+        duration: 150
+      });
+      runOnJS(emitValue)(next);
+    }
+  });
+  const composed = Gesture.Race(panGesture, tapGesture);
+
+  // Animated styles — run entirely on the UI thread
+  const thumbAnimStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: progress.value * trackW.value - THUMB_SIZE / 2
+    }]
+  }));
+  const filledAnimStyle = useAnimatedStyle(() => ({
+    width: progress.value * trackW.value
+  }));
+  const handleLayout = useCallback(e => {
+    trackW.value = e.nativeEvent.layout.width;
+  }, [trackW]);
+  const displayValue = formatValue ? formatValue(value) : `${Math.round(value)}%`;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.wrapper, style],
+    accessibilityRole: "adjustable",
+    accessibilityLabel: accessibilityLabel ?? label ?? 'Slider',
+    accessibilityValue: {
+      min,
+      max,
+      now: Math.round(value)
+    },
+    children: [hasLabel ? /*#__PURE__*/_jsxs(View, {
+      style: styles.labelRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.label, {
+          color: COLORS.textPrimary,
+          fontFamily: theme.typography.semiBold
+        }],
+        children: label
+      }), shouldShowValue ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.valueText, {
+          color: COLORS.textSecondary,
+          fontFamily: theme.typography.semiBold
+        }],
+        children: displayValue
+      }) : null]
+    }) : null, /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: composed,
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        style: styles.trackContainer,
+        onLayout: handleLayout,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.trackUnfilled, {
+            backgroundColor: COLORS.border
+          }]
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.trackFilled, filledAnimStyle, {
+            backgroundColor: COLORS.accent
+          }]
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.thumb, {
+            backgroundColor: COLORS.white,
+            shadowColor: COLORS.shadow
+          }, thumbAnimStyle]
+        })]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%'
+  },
+  labelRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 10
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  valueText: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  trackContainer: {
+    height: THUMB_SIZE + 8,
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  trackUnfilled: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2
+  },
+  trackFilled: {
+    position: 'absolute',
+    left: 0,
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2
+  },
+  thumb: {
+    position: 'absolute',
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 5
+  }
+});
+//# sourceMappingURL=FluentGlassSlider.js.map