@astacinco/rn-primitives 0.1.0 → 0.3.0

package/src/Badge/Badge.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import { Text } from '../Text';
+import type { BadgeProps, BadgeVariant, BadgePosition, BadgeSize } from './types';
+
+const sizeConfig: Record<BadgeSize, { minWidth: number; height: number; fontSize: number; dotSize: number; padding: number }> = {
+  sm: { minWidth: 16, height: 16, fontSize: 10, dotSize: 8, padding: 4 },
+  md: { minWidth: 20, height: 20, fontSize: 12, dotSize: 10, padding: 6 },
+  lg: { minWidth: 24, height: 24, fontSize: 14, dotSize: 12, padding: 8 },
+};
+
+const getPositionStyle = (
+  position: BadgePosition,
+  offset: [number, number]
+): { top?: number; bottom?: number; left?: number; right?: number } => {
+  const [offsetX, offsetY] = offset;
+
+  switch (position) {
+    case 'top-right':
+      return { top: offsetY, right: offsetX };
+    case 'top-left':
+      return { top: offsetY, left: offsetX };
+    case 'bottom-right':
+      return { bottom: offsetY, right: offsetX };
+    case 'bottom-left':
+      return { bottom: offsetY, left: offsetX };
+  }
+};
+
+export function Badge({
+  children,
+  count,
+  maxCount = 99,
+  dot = false,
+  variant = 'error',
+  position = 'top-right',
+  size = 'md',
+  showZero = false,
+  label,
+  offset = [0, 0],
+  hidden = false,
+  standalone = false,
+  style,
+  badgeStyle,
+  testID,
+}: BadgeProps) {
+  const { colors } = useTheme();
+  const config = sizeConfig[size];
+
+  const getVariantColor = (v: BadgeVariant): string => {
+    switch (v) {
+      case 'primary':
+        return colors.primary;
+      case 'error':
+        return colors.error;
+      case 'success':
+        return colors.success;
+      case 'warning':
+        return colors.warning;
+      case 'default':
+      default:
+        return colors.textSecondary;
+    }
+  };
+
+  // Determine if badge should be visible
+  const shouldShow = !hidden && (
+    dot ||
+    label ||
+    (count !== undefined && (count > 0 || showZero))
+  );
+
+  // Format count text
+  const getCountText = (): string => {
+    if (label) return label;
+    if (count === undefined) return '';
+    if (count > maxCount) return `${maxCount}+`;
+    return count.toString();
+  };
+
+  const badgeColor = getVariantColor(variant);
+  const countText = getCountText();
+
+  const badgeElement = shouldShow ? (
+    <View
+      testID={testID}
+      style={[
+        styles.badge,
+        dot ? {
+          width: config.dotSize,
+          height: config.dotSize,
+          borderRadius: config.dotSize / 2,
+          backgroundColor: badgeColor,
+        } : {
+          minWidth: config.minWidth,
+          height: config.height,
+          borderRadius: config.height / 2,
+          backgroundColor: badgeColor,
+          paddingHorizontal: config.padding,
+        },
+        !standalone && getPositionStyle(position, offset),
+        !standalone && styles.positioned,
+        badgeStyle,
+      ]}
+    >
+      {!dot && (
+        <Text
+          variant="caption"
+          style={{
+            color: '#FFFFFF',
+            fontSize: config.fontSize,
+            fontWeight: '600',
+            textAlign: 'center',
+          }}
+        >
+          {countText}
+        </Text>
+      )}
+    </View>
+  ) : null;
+
+  // Standalone badge (no wrapper)
+  if (standalone || !children) {
+    return badgeElement;
+  }
+
+  // Wrapper badge
+  return (
+    <View style={[styles.container, style]}>
+      {children}
+      {badgeElement}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    alignSelf: 'flex-start',
+  },
+  badge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  positioned: {
+    position: 'absolute',
+    zIndex: 1,
+  },
+});

package/src/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgePosition, BadgeSize } from './types';

package/src/Badge/types.ts

@@ -0,0 +1,93 @@
+import type { ViewStyle, StyleProp } from 'react-native';
+import type { ReactNode } from 'react';
+
+export type BadgeVariant = 'default' | 'primary' | 'error' | 'success' | 'warning';
+export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+
+export interface BadgeProps {
+  /**
+   * Content to wrap with badge
+   */
+  children?: ReactNode;
+
+  /**
+   * Badge count (displays number)
+   * If > maxCount, shows "maxCount+"
+   */
+  count?: number;
+
+  /**
+   * Maximum count to display
+   * @default 99
+   */
+  maxCount?: number;
+
+  /**
+   * Show as dot instead of count
+   * @default false
+   */
+  dot?: boolean;
+
+  /**
+   * Badge variant (color scheme)
+   * @default 'error'
+   */
+  variant?: BadgeVariant;
+
+  /**
+   * Badge position relative to children
+   * @default 'top-right'
+   */
+  position?: BadgePosition;
+
+  /**
+   * Badge size
+   * @default 'md'
+   */
+  size?: BadgeSize;
+
+  /**
+   * Show badge even when count is 0
+   * @default false
+   */
+  showZero?: boolean;
+
+  /**
+   * Custom badge label (overrides count)
+   */
+  label?: string;
+
+  /**
+   * Offset from corner [x, y]
+   * @default [0, 0]
+   */
+  offset?: [number, number];
+
+  /**
+   * Hide the badge
+   * @default false
+   */
+  hidden?: boolean;
+
+  /**
+   * Standalone badge (no children)
+   * @default false
+   */
+  standalone?: boolean;
+
+  /**
+   * Custom container style
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Custom badge style
+   */
+  badgeStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}

package/src/Button/Button.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Pressable, Text, StyleSheet, ActivityIndicator, ViewStyle, StyleProp } from 'react-native';
+import { Pressable, StyleSheet, ActivityIndicator, ViewStyle, StyleProp } from 'react-native';
 import { useTheme } from '@astacinco/rn-theming';
+import { Text } from '../Text';
 import type { ButtonProps, ButtonVariant, ButtonSize } from './types';
 
 const sizeStyles: Record<ButtonSize, { paddingVertical: number; paddingHorizontal: number; fontSize: number }> = {
@@ -23,7 +24,7 @@ export function Button({
   const { colors } = useTheme();
   const sizeStyle = sizeStyles[size];
 
-  const getVariantStyles = (v: ButtonVariant, pressed: boolean) => {
+  const getVariantStyles = (v: ButtonVariant, pressed: boolean, hovered: boolean) => {
     const opacity = pressed ? 0.8 : 1;
 
     switch (v) {
@@ -33,6 +34,8 @@ export function Button({
           borderWidth: 0,
           textColor: colors.textInverse,
           opacity,
+          // Web hover: slight scale up
+          transform: hovered && !pressed ? [{ scale: 1.02 }] : undefined,
         };
       case 'secondary':
         return {
@@ -40,21 +43,32 @@ export function Button({
           borderWidth: 0,
           textColor: colors.textInverse,
           opacity,
+          transform: hovered && !pressed ? [{ scale: 1.02 }] : undefined,
         };
       case 'outline':
         return {
-          backgroundColor: 'transparent',
+          backgroundColor: hovered ? colors.primary + '10' : 'transparent',
           borderWidth: 1,
           borderColor: colors.primary,
           textColor: colors.primary,
           opacity,
+          transform: undefined,
         };
       case 'ghost':
         return {
-          backgroundColor: pressed ? colors.surface : 'transparent',
+          backgroundColor: pressed ? colors.surface : hovered ? colors.surface : 'transparent',
           borderWidth: 0,
           textColor: colors.primary,
           opacity: 1,
+          transform: undefined,
+        };
+      case 'danger':
+        return {
+          backgroundColor: colors.error,
+          borderWidth: 0,
+          textColor: colors.textInverse,
+          opacity,
+          transform: hovered && !pressed ? [{ scale: 1.02 }] : undefined,
         };
     }
   };
@@ -66,8 +80,9 @@ export function Button({
       testID={testID}
       onPress={onPress}
       disabled={isDisabled}
-      style={({ pressed }): StyleProp<ViewStyle> => {
-        const variantStyle = getVariantStyles(variant, pressed);
+      // @ts-expect-error - cursor is web-only, ignored on native
+      style={({ pressed, hovered }): StyleProp<ViewStyle> => {
+        const variantStyle = getVariantStyles(variant, pressed, hovered ?? false);
         return [
           styles.base,
           {
@@ -77,25 +92,28 @@ export function Button({
             paddingVertical: sizeStyle.paddingVertical,
             paddingHorizontal: sizeStyle.paddingHorizontal,
             opacity: isDisabled ? 0.5 : variantStyle.opacity,
-          },
+            transform: variantStyle.transform,
+            // Web-only: cursor style (ignored on native)
+            cursor: isDisabled ? 'not-allowed' : 'pointer',
+          } as ViewStyle,
           style as ViewStyle,
         ];
       }}
       {...props}
     >
-      {({ pressed }) => {
-        const variantStyle = getVariantStyles(variant, pressed);
+      {({ pressed, hovered }) => {
+        const variantStyle = getVariantStyles(variant, pressed, hovered ?? false);
         return loading ? (
           <ActivityIndicator color={variantStyle.textColor} size="small" />
         ) : (
           <Text
-            style={[
-              styles.label,
-              {
-                color: variantStyle.textColor,
-                fontSize: sizeStyle.fontSize,
-              },
-            ]}
+            variant="body"
+            style={{
+              color: variantStyle.textColor,
+              fontSize: sizeStyle.fontSize,
+              fontWeight: '600',
+              textAlign: 'center',
+            }}
           >
             {label}
           </Text>
@@ -112,8 +130,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  label: {
-    fontWeight: '600',
-    textAlign: 'center',
-  },
 });

package/src/Button/types.ts

@@ -1,6 +1,6 @@
 import type { PressableProps } from 'react-native';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 
 export interface ButtonProps extends Omit<PressableProps, 'children'> {

package/src/FloatingTierBadge/FloatingTierBadge.tsx

@@ -0,0 +1,100 @@
+/**
+ * FloatingTierBadge component
+ *
+ * A floating badge that appears in the corner of the screen
+ * to indicate pro tier status. Uses themed colors with a
+ * subtle glow effect inspired by the SparkLabs design.
+ */
+
+import React from 'react';
+import { StyleSheet, Pressable, View } from 'react-native';
+import { useTheme } from '@astacinco/rn-theming';
+import { Text } from '../Text';
+import type { FloatingTierBadgeProps, TierBadgePosition } from './types';
+
+const positionStyles: Record<TierBadgePosition, object> = {
+  'top-right': { top: 16, right: 16 },
+  'top-left': { top: 16, left: 16 },
+  'bottom-right': { bottom: 16, right: 16 },
+  'bottom-left': { bottom: 16, left: 16 },
+};
+
+export function FloatingTierBadge({
+  visible,
+  position = 'bottom-right',
+  label = 'PRO',
+  onPress,
+}: FloatingTierBadgeProps) {
+  const { colors, shadows } = useTheme();
+
+  if (!visible) {
+    return null;
+  }
+
+  const content = (
+    <View
+      style={[
+        styles.badge,
+        positionStyles[position],
+        {
+          backgroundColor: colors.proGlow,
+          borderColor: colors.pro,
+          // Apply shadow for glow effect
+          shadowColor: colors.pro,
+          shadowOffset: { width: 0, height: 0 },
+          shadowOpacity: 0.6,
+          shadowRadius: 8,
+        },
+      ]}
+    >
+      <Text
+        style={[
+          styles.text,
+          { color: colors.pro },
+        ]}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => [
+          styles.container,
+          positionStyles[position],
+          { opacity: pressed ? 0.8 : 1 },
+        ]}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View style={[styles.container, positionStyles[position]]}>
+      {content}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 1000,
+  },
+  badge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 4,
+    borderWidth: 1,
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 1.5,
+    textTransform: 'uppercase',
+  },
+});

package/src/FloatingTierBadge/index.ts

@@ -0,0 +1,2 @@
+export { FloatingTierBadge } from './FloatingTierBadge';
+export type { FloatingTierBadgeProps, TierBadgePosition } from './types';

package/src/FloatingTierBadge/types.ts

@@ -0,0 +1,29 @@
+/**
+ * FloatingTierBadge types
+ */
+
+export type TierBadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+export interface FloatingTierBadgeProps {
+  /**
+   * Whether to show the badge (typically only for pro users)
+   */
+  visible: boolean;
+
+  /**
+   * Position of the floating badge
+   * @default 'bottom-right'
+   */
+  position?: TierBadgePosition;
+
+  /**
+   * Label to display
+   * @default 'PRO'
+   */
+  label?: string;
+
+  /**
+   * Optional callback when badge is pressed
+   */
+  onPress?: () => void;
+}

package/src/Input/Input.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { View, TextInput, Text, StyleSheet, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
+import { View, TextInput, StyleSheet, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 import { useTheme } from '@astacinco/rn-theming';
+import { Text } from '../Text';
 import type { InputProps } from './types';
 
 export function Input({
@@ -36,14 +37,9 @@ export function Input({
     <View style={styles.container}>
       {label && (
         <Text
-          style={[
-            styles.label,
-            {
-              color: colors.textSecondary,
-              fontSize: typography.fontSize.sm,
-              marginBottom: spacing.xs,
-            },
-          ]}
+          variant="label"
+          color={colors.textSecondary}
+          style={{ marginBottom: spacing.xs }}
         >
           {label}
         </Text>
@@ -70,14 +66,9 @@ export function Input({
       />
       {error && (
         <Text
-          style={[
-            styles.error,
-            {
-              color: colors.error,
-              fontSize: typography.fontSize.sm,
-              marginTop: spacing.xs,
-            },
-          ]}
+          variant="caption"
+          color={colors.error}
+          style={{ marginTop: spacing.xs }}
         >
           {error}
         </Text>
@@ -90,14 +81,8 @@ const styles = StyleSheet.create({
   container: {
     width: '100%',
   },
-  label: {
-    fontWeight: '500',
-  },
   input: {
     borderWidth: 1,
     borderRadius: 8,
   },
-  error: {
-    // Error text styles
-  },
 });