@space-uy/pulsar-ui 0.2.0

package/src/components/Checkbox.tsx

@@ -0,0 +1,160 @@
+import { useEffect } from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type ViewStyle,
+  type StyleProp,
+} from 'react-native';
+import { Check } from 'lucide-react-native';
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import Text from './Text';
+
+import useTheme from '../hooks/useTheme';
+
+import { convertHexToRgba } from '../utils/uiUtils';
+
+export type CheckboxProps = {
+  style?: StyleProp<ViewStyle>;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  label: string;
+  disabled?: boolean;
+  description?: string;
+};
+
+export default function Checkbox({
+  style,
+  checked,
+  onCheckedChange,
+  label,
+  disabled = false,
+  description,
+}: CheckboxProps) {
+  const { colors, theme } = useTheme();
+  const checkedValue = useSharedValue(checked ? 1 : 0);
+  const pressedValue = useSharedValue(0);
+
+  useEffect(() => {
+    checkedValue.value = withTiming(checked ? 1 : 0, {
+      duration: 200,
+    });
+  }, [checked, checkedValue]);
+
+  const checkboxAnimStyle = useAnimatedStyle(() => {
+    return {
+      borderColor: interpolateColor(
+        checkedValue.value,
+        [0, 1],
+        [colors.border, colors.foreground]
+      ),
+      backgroundColor: interpolateColor(
+        checkedValue.value,
+        [0, 1],
+        [colors.background, colors.foreground]
+      ),
+    };
+  });
+
+  const checkIconAnimStyle = useAnimatedStyle(() => {
+    return {
+      opacity: checkedValue.value,
+    };
+  });
+
+  const pressedColor = convertHexToRgba(colors.foreground, 0.05);
+
+  const pressableAnimStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(
+        pressedValue.value,
+        [0, 1],
+        ['transparent', pressedColor]
+      ),
+    };
+  });
+
+  const updatePressAnimation = (value: number) => {
+    pressedValue.value = withTiming(value, { duration: 200 });
+  };
+
+  const handlePressIn = () => Platform.OS !== 'web' && updatePressAnimation(1);
+
+  const handlePressOut = () => Platform.OS !== 'web' && updatePressAnimation(0);
+
+  const handlePress = () => onCheckedChange(!checked);
+
+  return (
+    <Pressable
+      style={[style, disabled && styles.disabled]}
+      onPress={handlePress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onHoverIn={() => updatePressAnimation(1)}
+      onHoverOut={() => updatePressAnimation(0)}
+      disabled={disabled}
+    >
+      <Animated.View
+        style={[
+          styles.container,
+          !description && styles.centered,
+          { borderRadius: theme.roundness },
+          pressableAnimStyle,
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.box,
+            { borderRadius: theme.roundness },
+            checkboxAnimStyle,
+          ]}
+        >
+          <Animated.View style={checkIconAnimStyle}>
+            <Check
+              size={14}
+              color={checked ? colors.background : colors.foreground}
+              strokeWidth={3}
+            />
+          </Animated.View>
+        </Animated.View>
+        {(label || description) && (
+          <View style={styles.textContainer}>
+            <Text variant="h5">{label}</Text>
+            {description && (
+              <Text variant="ps" style={styles.description}>
+                {description}
+              </Text>
+            )}
+          </View>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  disabled: { opacity: 0.5 },
+  centered: { alignItems: 'center' },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    padding: 8,
+    margin: -8,
+  },
+  box: {
+    width: 24,
+    height: 24,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textContainer: { marginLeft: 8, flex: 1 },
+  description: { marginTop: 2, opacity: 0.5 },
+});

package/src/components/Chip.tsx

@@ -0,0 +1,58 @@
+import { Pressable, StyleSheet, View, type PressableProps } from 'react-native';
+
+import Text from './Text';
+
+import useTheme from '../hooks/useTheme';
+
+import { convertHexToRgba } from '../utils/uiUtils';
+
+type Props = PressableProps & {
+  text: string;
+  size?: 'normal' | 'small';
+  disabled?: boolean;
+};
+
+export default function Chip({
+  text,
+  size = 'normal',
+  disabled = false,
+  ...rest
+}: Props) {
+  const { theme, colors } = useTheme();
+
+  const height = size === 'small' ? 24 : 32;
+  const textVariant = size === 'small' ? 'ps' : 'pm';
+
+  return (
+    <Pressable disabled={disabled} {...rest}>
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: convertHexToRgba(colors.foreground, 0.08),
+            borderRadius: theme.roundness,
+            height,
+          },
+          disabled && styles.disabled,
+        ]}
+      >
+        <Text
+          variant={textVariant}
+          style={{ color: colors.foreground }}
+          numberOfLines={1}
+        >
+          {text}
+        </Text>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+  },
+  disabled: { opacity: 0.3 },
+});

package/src/components/CopyToClipboard.tsx

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, Alert, Clipboard, View } from 'react-native';
+import Icon from './Icon';
+import Text from './Text';
+import useTheme from '../hooks/useTheme';
+
+interface CopyToClipboardProps {
+  text: string;
+  children?: React.ReactNode;
+  onCopy?: () => void;
+  showFeedback?: boolean;
+  style?: any;
+  iconColor?: string; // Color personalizado para el ícono
+}
+
+export const CopyToClipboard: React.FC<CopyToClipboardProps> = ({
+  text,
+  children,
+  onCopy,
+  showFeedback = true,
+  style,
+  iconColor,
+}) => {
+  const [copied, setCopied] = useState(false);
+  const { colors } = useTheme();
+
+  const handleCopy = () => {
+    try {
+      Clipboard.setString(text);
+      setCopied(true);
+
+      if (showFeedback) {
+        Alert.alert('Copied!', `"${text}" has been copied to clipboard`);
+      }
+
+      onCopy?.();
+
+      // Use setTimeout with reference for better control
+      setTimeout(() => {
+        setCopied(false);
+      }, 2500);
+    } catch (error) {
+      Alert.alert('Error', 'Failed to copy to clipboard');
+    }
+  };
+
+  return (
+    <Pressable
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.altBackground,
+          borderColor: colors.border,
+        },
+        style,
+      ]}
+      onPress={handleCopy}
+    >
+      <View style={styles.content}>
+        {children || (
+          <Text
+            variant="pm"
+            style={[styles.text, { color: colors.foreground }]}
+          >
+            {text}
+          </Text>
+        )}
+      </View>
+      <View style={styles.iconContainer}>
+        <Icon
+          name={copied ? 'Check' : 'Copy'}
+          size={16}
+          color={iconColor || (copied ? colors.primary : colors.foreground)}
+        />
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    padding: 16,
+    borderRadius: 6,
+    borderWidth: 1,
+    minHeight: 48,
+    maxWidth: '100%', // Asegura que no se extienda más allá del contenedor padre
+  },
+  content: {
+    flex: 1,
+    marginRight: 12, // Aumenté para dar más espacio al ícono
+    minWidth: 0, // Permite que el contenido se comprima si es necesario
+    overflow: 'hidden', // Evita que el contenido se desborde
+  },
+  text: {
+    // Estilo para el texto por defecto cuando no hay children
+  },
+  iconContainer: {
+    flexShrink: 0, // Evita que el ícono se comprima
+    flexBasis: 16, // Base fija para el ícono
+    width: 16, // Ancho fijo del ícono
+    height: 16, // Alto fijo del ícono
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 2, // Alineación con la primera línea del texto
+  },
+});

package/src/components/Dialog.tsx

@@ -0,0 +1,263 @@
+import {
+  useEffect,
+  useState,
+  useCallback,
+  type PropsWithChildren,
+  type ReactNode,
+} from 'react';
+import {
+  Modal,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  useSharedValue,
+  withTiming,
+  useAnimatedStyle,
+  runOnJS,
+} from 'react-native-reanimated';
+
+import useTheme from '../hooks/useTheme';
+import { convertHexToRgba } from '../utils/uiUtils';
+import Text from './Text';
+import Button from './Button';
+
+// Componente principal Dialog
+interface DialogProps extends PropsWithChildren {
+  visible: boolean;
+  onDismiss: () => void;
+}
+
+const Dialog = ({ children, visible, onDismiss }: DialogProps) => {
+  const { colors, theme } = useTheme();
+  const [internalVisible, setInternalVisible] = useState(false);
+
+  const scale = useSharedValue(0);
+  const opacity = useSharedValue(0);
+
+  const runCloseAnimation = useCallback(() => {
+    scale.value = withTiming(0.7, { duration: 300 });
+    opacity.value = withTiming(0, { duration: 300 }, () => {
+      runOnJS(setInternalVisible)(false);
+    });
+  }, [scale, opacity]);
+
+  // Sync external visible prop with internal state
+  useEffect(() => {
+    if (visible) {
+      setInternalVisible(true);
+    } else if (internalVisible) {
+      // Only start close animation if dialog is currently visible
+      runCloseAnimation();
+    }
+  }, [visible, internalVisible, runCloseAnimation]);
+
+  // Start open animation when internal state becomes true
+  useEffect(() => {
+    if (internalVisible && visible) {
+      scale.value = withTiming(1, { duration: 300 });
+      opacity.value = withTiming(1, { duration: 300 });
+    }
+  }, [internalVisible, visible, scale, opacity]);
+
+  const animatedOverlayStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  const animatedContentStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+    opacity: opacity.value,
+  }));
+
+  const handleBackdropPress = () => {
+    onDismiss();
+  };
+
+  return (
+    <Modal transparent visible={internalVisible} statusBarTranslucent>
+      <TouchableWithoutFeedback onPress={handleBackdropPress}>
+        <Animated.View style={[styles.overlay, animatedOverlayStyle]}>
+          <TouchableWithoutFeedback>
+            <Animated.View
+              style={[
+                styles.content,
+                {
+                  backgroundColor: colors.background,
+                  borderRadius: theme.roundness,
+                  borderColor: colors.border,
+                },
+                animatedContentStyle,
+              ]}
+            >
+              {children}
+            </Animated.View>
+          </TouchableWithoutFeedback>
+        </Animated.View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+// Dialog Header
+interface DialogHeaderProps extends PropsWithChildren {
+  style?: StyleProp<ViewStyle>;
+}
+
+const DialogHeader = ({ children, style }: DialogHeaderProps) => {
+  return <View style={[styles.header, style]}>{children}</View>;
+};
+
+// Dialog Title
+interface DialogTitleProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DialogTitle = ({ children, style }: DialogTitleProps) => {
+  return (
+    <Text variant="h3" style={[styles.title, style]}>
+      {children}
+    </Text>
+  );
+};
+
+// Dialog Description
+interface DialogDescriptionProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DialogDescription = ({ children, style }: DialogDescriptionProps) => {
+  const { colors } = useTheme();
+
+  return (
+    <Text
+      variant="pm"
+      style={[
+        styles.description,
+        { color: convertHexToRgba(colors.foreground, 0.7) },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+};
+
+// Dialog Footer
+interface DialogFooterProps extends PropsWithChildren {
+  style?: StyleProp<ViewStyle>;
+}
+
+const DialogFooter = ({ children, style }: DialogFooterProps) => {
+  return <View style={[styles.footer, style]}>{children}</View>;
+};
+
+// Dialog Action (botón de acción)
+interface DialogActionProps {
+  onPress: () => void;
+  children: ReactNode;
+  variant?: 'flat' | 'outline';
+  destructive?: boolean;
+}
+
+const DialogAction = ({
+  onPress,
+  children,
+  variant = 'flat',
+  destructive = false,
+}: DialogActionProps) => {
+  const { colors } = useTheme();
+
+  return (
+    <Button
+      text={children as string}
+      variant={destructive ? 'destructive' : variant}
+      size="large"
+      onPress={onPress}
+      style={[
+        styles.actionButton,
+        destructive && { borderColor: colors.destructive },
+      ]}
+    />
+  );
+};
+
+// Dialog Cancel (botón de cancelar)
+interface DialogCancelProps {
+  onPress: () => void;
+  children: ReactNode;
+}
+
+const DialogCancel = ({ onPress, children }: DialogCancelProps) => {
+  return (
+    <Button
+      text={children as string}
+      variant="outline"
+      size="large"
+      onPress={onPress}
+      style={styles.cancelButton}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  content: {
+    width: '100%',
+    maxWidth: 400,
+    borderWidth: 1,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  header: {
+    padding: 20,
+    paddingBottom: 12,
+  },
+  title: {
+    marginBottom: 8,
+  },
+  description: {
+    lineHeight: 20,
+  },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 12,
+    padding: 20,
+    paddingTop: 12,
+  },
+  actionButton: {
+    flex: 1,
+    minWidth: 80,
+  },
+  cancelButton: {
+    flex: 1,
+    minWidth: 80,
+  },
+});
+
+export default Dialog;
+export {
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogAction,
+  DialogCancel,
+};

package/src/components/Header.tsx

@@ -0,0 +1,100 @@
+import { type PropsWithChildren } from 'react';
+import { StyleSheet, View, type ViewStyle, type StyleProp } from 'react-native';
+
+import Text from './Text';
+import IconButton from './IconButton';
+import { type IconName } from './Icon';
+
+import useTheme from '../hooks/useTheme';
+
+import meassures from '../theme/meassures';
+
+type HeaderButtonProps = {
+  iconName: IconName;
+  onPress?: () => void;
+  disabled?: boolean;
+};
+
+type Props = PropsWithChildren & {
+  title: string;
+  leftButton?: HeaderButtonProps;
+  rightButton?: HeaderButtonProps;
+  style?: StyleProp<ViewStyle>;
+  useInsets?: boolean;
+};
+
+const HEADER_BASE_HEIGHT = 52;
+
+export default function Header({
+  title,
+  leftButton,
+  rightButton,
+  style,
+  useInsets = true,
+  children,
+}: Props) {
+  const { colors, theme } = useTheme();
+  const topInset = useInsets ? theme.insets?.top || 0 : 0;
+
+  const renderButton = (button: HeaderButtonProps) => {
+    return (
+      <IconButton
+        iconName={button.iconName}
+        variant="transparent"
+        size="medium"
+        onPress={button.onPress}
+        disabled={button.disabled}
+      />
+    );
+  };
+
+  return (
+    <View
+      style={[
+        styles.header,
+        {
+          backgroundColor: colors.background,
+          borderBottomColor: colors.border,
+          paddingTop: topInset,
+        },
+        !!children && styles.paddingBottom,
+        style,
+      ]}
+    >
+      <View style={styles.headerContent}>
+        <View style={[styles.slot, styles.leftSlot]}>
+          {leftButton && renderButton(leftButton)}
+        </View>
+        <View style={styles.titleContainer}>
+          <Text
+            variant="h3"
+            style={[styles.title, { color: colors.foreground }]}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {title}
+          </Text>
+        </View>
+        <View style={[styles.slot, styles.rightSlot]}>
+          {rightButton && renderButton(rightButton)}
+        </View>
+      </View>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: { borderBottomWidth: 1, paddingHorizontal: 16 },
+  headerContent: {
+    height: HEADER_BASE_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  slot: { width: meassures.button.medium, justifyContent: 'center' },
+  leftSlot: { alignItems: 'flex-start' },
+  titleContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  title: { textAlign: 'center', marginHorizontal: 8 },
+  rightSlot: { alignItems: 'flex-end' },
+  paddingBottom: { paddingBottom: 16 },
+});

package/src/components/Icon.tsx

@@ -0,0 +1,27 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { icons } from 'lucide-react-native';
+
+import useTheme from '../hooks/useTheme';
+
+export type IconName = keyof typeof icons;
+
+type Props = {
+  style?: StyleProp<ViewStyle>;
+  name: IconName;
+  size?: number;
+  color?: string;
+};
+
+export default function Icon({ name, size = 24, color, style }: Props) {
+  const { colors } = useTheme();
+
+  const IconComponent = icons[name];
+
+  return (
+    <IconComponent
+      size={size}
+      color={color ?? colors.foreground}
+      style={style}
+    />
+  );
+}