@bacon-pos/ui 0.2.1 → 0.3.0

package/src/components/Dialog/index.ts

@@ -0,0 +1,6 @@
+export {
+  Dialog,
+  type DialogProps,
+  type DialogAction,
+  type DialogCancelConfig,
+} from './Dialog';

package/src/components/_internal/ScrollArea.tsx

@@ -0,0 +1,95 @@
+import { useRef, useState, type ReactNode } from 'react';
+import {
+  Animated,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+export interface ScrollAreaProps {
+  children: ReactNode;
+  /** Thin indicator color (a design-system color). */
+  indicatorColor: string;
+  /** Indicator thickness. Defaults to 4. */
+  indicatorWidth?: number;
+  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
+  keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * ScrollView with an elegant custom vertical indicator: thin, rounded, colored,
+ * and only visible while scrolling (fades out when idle). The native indicator
+ * is hidden so it looks the same on iOS, Android and web.
+ */
+export function ScrollArea({
+  children,
+  indicatorColor,
+  indicatorWidth = 4,
+  keyboardShouldPersistTaps,
+  keyboardDismissMode,
+  style,
+  contentContainerStyle,
+}: ScrollAreaProps) {
+  const [viewportH, setViewportH] = useState(0);
+  const [contentH, setContentH] = useState(0);
+  const scrollY = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scrollable = contentH > viewportH + 1;
+  const thumbH = scrollable ? Math.max(24, (viewportH / contentH) * viewportH) : 0;
+  const maxScroll = Math.max(1, contentH - viewportH);
+  const translateY = scrollY.interpolate({
+    inputRange: [0, maxScroll],
+    outputRange: [0, viewportH - thumbH],
+    extrapolate: 'clamp',
+  });
+
+  const reveal = () => {
+    Animated.timing(opacity, { toValue: 1, duration: 120, useNativeDriver: true }).start();
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    hideTimer.current = setTimeout(() => {
+      Animated.timing(opacity, { toValue: 0, duration: 400, useNativeDriver: true }).start();
+    }, 900);
+  };
+
+  return (
+    <Animated.View style={[{ position: 'relative' }, style]}>
+      <Animated.ScrollView
+        style={{ flexShrink: 1 }}
+        contentContainerStyle={contentContainerStyle}
+        showsVerticalScrollIndicator={false}
+        scrollEventThrottle={16}
+        keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+        keyboardDismissMode={keyboardDismissMode}
+        onLayout={(e) => setViewportH(e.nativeEvent.layout.height)}
+        onContentSizeChange={(_w: number, h: number) => setContentH(h)}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+          useNativeDriver: true,
+          listener: (_e: NativeSyntheticEvent<NativeScrollEvent>) => reveal(),
+        })}
+      >
+        {children}
+      </Animated.ScrollView>
+      {scrollable ? (
+        <Animated.View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: 2,
+            width: indicatorWidth,
+            height: thumbH,
+            borderRadius: indicatorWidth / 2,
+            backgroundColor: indicatorColor,
+            opacity,
+            transform: [{ translateY }],
+          }}
+        />
+      ) : null}
+    </Animated.View>
+  );
+}

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './Checkbox';
 export * from './Chip';
 export * from './CodeField';
 export * from './CodeInput';
+export * from './Dialog';
 export * from './Icon';
 export * from './IconButton';
 export * from './Input';