@mr.dj2u/library-registry 0.0.0

package/assets/create-expo-stack/2.21.3/base/components/Button.tsx

@@ -0,0 +1,42 @@
+import { forwardRef } from 'react';
+import { StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+
+type ButtonProps = {
+  title?: string;
+} & TouchableOpacityProps;
+
+export const Button = forwardRef<View, ButtonProps>(({ title, ...touchableProps }, ref) => {
+  return (
+    <TouchableOpacity ref={ref} {...touchableProps} style={[styles.button, touchableProps.style]}>
+      <Text style={styles.buttonText}>{title}</Text>
+    </TouchableOpacity>
+  );
+});
+
+Button.displayName = 'Button';
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    backgroundColor: '#6366F1',
+    borderRadius: 24,
+    elevation: 5,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginHorizontal: 16,
+    padding: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      height: 2,
+      width: 0,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});

package/assets/create-expo-stack/2.21.3/base/components/Container.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet, SafeAreaView } from 'react-native';
+
+export const Container = ({ children }: { children: React.ReactNode }) => {
+  return <SafeAreaView style={styles.container}>{children}</SafeAreaView>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 24,
+    backgroundColor: 'white',
+  },
+});
+

package/assets/create-expo-stack/2.21.3/base/components/EditScreenInfo.tsx

@@ -0,0 +1,36 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function EditScreenInfo({ path }: { path: string }) {
+  const title = 'Open up the code for this screen:';
+  const description =
+    'Change any of the text, save the file, and your app will automatically update.';
+
+  return (
+    <View style={styles.getStartedContainer}>
+      <Text style={styles.getStartedText}>{title}</Text>
+      <View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
+        <Text>{path}</Text>
+      </View>
+      <Text style={styles.getStartedText}>{description}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  codeHighlightContainer: {
+    borderRadius: 3,
+    paddingHorizontal: 4,
+  },
+  getStartedContainer: {
+    alignItems: 'center',
+    marginHorizontal: 50,
+  },
+  getStartedText: {
+    fontSize: 17,
+    lineHeight: 24,
+    textAlign: 'center',
+  },
+  homeScreenFilename: {
+    marginVertical: 7,
+  },
+});

package/assets/create-expo-stack/2.21.3/base/components/HeaderButton.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { Pressable, StyleSheet } from 'react-native';
+
+export const HeaderButton = forwardRef<typeof Pressable, { onPress?: () => void; }>(({ onPress }, ref) => {
+  return (
+    <Pressable onPress={onPress}>
+      {({ pressed }) => (
+        <FontAwesome
+          name="info-circle"
+          size={25}
+          color="gray"
+          style={[
+            styles.headerRight,
+            {
+              opacity: pressed ? 0.5 : 1,
+            },
+          ]}
+        />
+      )}
+    </Pressable>
+  );
+});
+
+HeaderButton.displayName = 'HeaderButton';
+
+export const styles = StyleSheet.create({
+  headerRight: {
+    marginRight: 15,
+  },
+});

package/assets/create-expo-stack/2.21.3/base/components/ScreenContent.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import EditScreenInfo from './EditScreenInfo';
+
+type ScreenContentProps = {
+  title: string;
+  path: string;
+  children?: React.ReactNode;
+};
+
+export const ScreenContent = ({ title, path, children }: ScreenContentProps) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
+      <View style={styles.separator} />
+      <EditScreenInfo path={path} />
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: 'white',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  separator: {
+    backgroundColor: '#d1d5db',
+    height: 1,
+    marginVertical: 30,
+    width: '80%',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});

package/assets/create-expo-stack/2.21.3/base/components/TabBarIcon.tsx

@@ -0,0 +1,15 @@
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { StyleSheet } from 'react-native';
+
+export const TabBarIcon = (props: {
+  name: React.ComponentProps<typeof FontAwesome>['name'];
+  color: string;
+}) => {
+  return <FontAwesome size={28} style={styles.tabBarIcon} {...props} />;
+};
+
+export const styles = StyleSheet.create({
+  tabBarIcon: {
+    marginBottom: -3,
+  },
+});

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/ActivityIndicator.tsx

@@ -0,0 +1,10 @@
+import { ActivityIndicator as RNActivityIndicator } from 'react-native';
+
+import { useColorScheme } from '@/lib/useColorScheme';
+
+function ActivityIndicator(props: React.ComponentProps<typeof RNActivityIndicator>) {
+  const { colors } = useColorScheme();
+  return <RNActivityIndicator color={colors.primary} {...props} />;
+}
+
+export { ActivityIndicator };

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Avatar.tsx

@@ -0,0 +1,32 @@
+import * as AvatarPrimitive from '@rn-primitives/avatar';
+
+import { cn } from '@/lib/cn';
+
+function Avatar({ className, ...props }: AvatarPrimitive.RootProps) {
+  return (
+    <AvatarPrimitive.Root
+      className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.ImageProps) {
+  return (
+    <AvatarPrimitive.Image className={cn('aspect-square h-full w-full', className)} {...props} />
+  );
+}
+
+function AvatarFallback({ className, ...props }: AvatarPrimitive.FallbackProps) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        'flex h-full w-full items-center justify-center rounded-full bg-muted',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Button.tsx

@@ -0,0 +1,141 @@
+import * as Slot from '@rn-primitives/slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Platform, Pressable, PressableProps, View, ViewStyle } from 'react-native';
+
+import { TextClassContext } from '@/components/nativewindui/Text';
+import { cn } from '@/lib/cn';
+import { useColorScheme } from '@/lib/useColorScheme';
+import { COLORS } from '@/theme/colors';
+import { withOpacity } from '@/theme/with-opacity';
+
+const buttonVariants = cva('flex-row items-center justify-center gap-2', {
+  variants: {
+    variant: {
+      primary: 'ios:active:opacity-80 bg-primary',
+      secondary: 'ios:border-primary ios:active:bg-primary/5 border border-foreground/40',
+      tonal:
+        'ios:bg-primary/10 dark:ios:bg-primary/10 ios:active:bg-primary/15 bg-primary/15 dark:bg-primary/30',
+      plain: 'ios:active:opacity-70',
+    },
+    size: {
+      none: '',
+      sm: 'py-1 px-2.5 rounded-full',
+      md: 'ios:rounded-lg py-2 ios:py-1.5 ios:px-3.5 px-5 rounded-full',
+      lg: 'py-2.5 px-5 ios:py-2 rounded-xl gap-2',
+      icon: 'ios:rounded-lg h-10 w-10 rounded-full',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+  },
+});
+
+const androidRootVariants = cva('overflow-hidden', {
+  variants: {
+    size: {
+      none: '',
+      icon: 'rounded-full',
+      sm: 'rounded-full',
+      md: 'rounded-full',
+      lg: 'rounded-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+const buttonTextVariants = cva('font-medium', {
+  variants: {
+    variant: {
+      primary: 'text-white',
+      secondary: 'ios:text-primary text-foreground',
+      tonal: 'ios:text-primary text-foreground',
+      plain: 'text-foreground',
+    },
+    size: {
+      none: '',
+      icon: '',
+      sm: 'text-[15px] leading-5',
+      md: 'text-[17px] leading-7',
+      lg: 'text-[17px] leading-7',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'md',
+  },
+});
+
+const ANDROID_RIPPLE = {
+  dark: {
+    primary: { color: withOpacity(COLORS.dark.grey3, 0.4), borderless: false },
+    secondary: { color: withOpacity(COLORS.dark.grey5, 0.8), borderless: false },
+    plain: { color: withOpacity(COLORS.dark.grey5, 0.8), borderless: false },
+    tonal: { color: withOpacity(COLORS.dark.grey5, 0.8), borderless: false },
+  },
+  light: {
+    primary: { color: withOpacity(COLORS.light.grey4, 0.4), borderless: false },
+    secondary: { color: withOpacity(COLORS.light.grey5, 0.4), borderless: false },
+    plain: { color: withOpacity(COLORS.light.grey5, 0.4), borderless: false },
+    tonal: { color: withOpacity(COLORS.light.grey6, 0.4), borderless: false },
+  },
+};
+
+// Add as class when possible: https://github.com/marklawlor/nativewind/issues/522
+const BORDER_CURVE: ViewStyle = {
+  borderCurve: 'continuous',
+};
+
+type ButtonVariantProps = Omit<VariantProps<typeof buttonVariants>, 'variant'> & {
+  variant?: Exclude<VariantProps<typeof buttonVariants>['variant'], null>;
+};
+
+type AndroidOnlyButtonProps = {
+  /**
+   * ANDROID ONLY: The class name of root responsible for hidding the ripple overflow.
+   */
+  androidRootClassName?: string;
+};
+
+type ButtonProps = PressableProps & ButtonVariantProps & AndroidOnlyButtonProps;
+
+const Root = Platform.OS === 'android' ? View : Slot.Pressable;
+
+function Button({
+  className,
+  variant = 'primary',
+  size,
+  style = BORDER_CURVE,
+  androidRootClassName,
+  ...props
+}: ButtonProps) {
+  const { colorScheme } = useColorScheme();
+
+  return (
+    <TextClassContext.Provider value={buttonTextVariants({ variant, size })}>
+      <Root
+        className={Platform.select({
+          ios: undefined,
+          default: androidRootVariants({
+            size,
+            className: androidRootClassName,
+          }),
+        })}>
+        <Pressable
+          className={cn(
+            props.disabled && 'opacity-50',
+            buttonVariants({ variant, size, className })
+          )}
+          style={style}
+          android_ripple={ANDROID_RIPPLE[colorScheme][variant]}
+          {...props}
+        />
+      </Root>
+    </TextClassContext.Provider>
+  );
+}
+
+export { Button, buttonTextVariants, buttonVariants };
+export type { ButtonProps };

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/DatePicker/DatePicker.android.tsx

@@ -0,0 +1,77 @@
+import DateTimePicker, { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { Button } from '@/components/nativewindui/Button';
+import { Text } from '@/components/nativewindui/Text';
+import { cn } from '@/lib/cn';
+
+export function DatePicker(
+  props: React.ComponentProps<typeof DateTimePicker> & {
+    mode: 'date' | 'time' | 'datetime';
+  } & {
+    materialDateClassName?: string;
+    materialDateLabel?: string;
+    materialDateLabelClassName?: string;
+    materialTimeClassName?: string;
+    materialTimeLabel?: string;
+    materialTimeLabelClassName?: string;
+  }
+) {
+  const show = (currentMode: 'time' | 'date') => () => {
+    DateTimePickerAndroid.open({
+      value: props.value,
+      onChange: props.onChange,
+      mode: currentMode,
+      minimumDate: props.minimumDate,
+      maximumDate: props.maximumDate,
+    });
+  };
+
+  return (
+    <View className="flex-row gap-2.5">
+      {props.mode.includes('date') && (
+        <View className={cn('relative pt-1.5', props.materialDateClassName)}>
+          <Button
+            variant="plain"
+            androidRootClassName="rounded-none"
+            onPress={show('date')}
+            className="border-foreground/30 rounded border px-2.5 py-3 active:opacity-80">
+            <Text className="py-px text-sm">
+              {new Intl.DateTimeFormat('en-US', {
+                dateStyle: 'medium',
+              }).format(props.value)}
+            </Text>
+          </Button>
+          <View
+            className={cn('absolute left-2 top-0 bg-card px-1', props.materialDateLabelClassName)}>
+            <Text variant="caption2" className="text-[10px] opacity-60">
+              {props.materialDateLabel ?? 'Date'}
+            </Text>
+          </View>
+        </View>
+      )}
+      {props.mode.includes('time') && (
+        <View className={cn('relative pt-1.5', props.materialTimeClassName)}>
+          <Button
+            variant="plain"
+            androidRootClassName="rounded-none"
+            onPress={show('time')}
+            className="border-foreground/30 rounded border px-2.5 py-3 active:opacity-80">
+            <Text className="py-px text-sm">
+              {new Intl.DateTimeFormat('en-US', {
+                timeStyle: 'short',
+              }).format(props.value)}
+            </Text>
+          </Button>
+          <View
+            className={cn('absolute left-2 top-0 bg-card px-1', props.materialTimeLabelClassName)}>
+            <Text variant="caption2" className="text-[10px] opacity-60">
+              {props.materialTimeLabel ?? 'Time'}
+            </Text>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/DatePicker/DatePicker.tsx

@@ -0,0 +1,23 @@
+import DateTimePicker from '@react-native-community/datetimepicker';
+import * as React from 'react';
+
+export function DatePicker({
+  materialDateClassName: _materialDateClassName,
+  materialDateLabel: _materialDateLabel,
+  materialDateLabelClassName: _materialDateLabelClassName,
+  materialTimeClassName: _materialTimeClassName,
+  materialTimeLabel: _materialTimeLabel,
+  materialTimeLabelClassName: _materialTimeLabelClassName,
+  ...props
+}: React.ComponentProps<typeof DateTimePicker> & {
+  mode: 'date' | 'time' | 'datetime';
+} & {
+  materialDateClassName?: string;
+  materialDateLabel?: string;
+  materialDateLabelClassName?: string;
+  materialTimeClassName?: string;
+  materialTimeLabel?: string;
+  materialTimeLabelClassName?: string;
+}) {
+  return <DateTimePicker {...props} />;
+}

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/DatePicker/index.ts

@@ -0,0 +1 @@
+export * from './DatePicker';

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Icon/Icon.ios.tsx

@@ -0,0 +1,55 @@
+import { SymbolView } from 'expo-symbols';
+import type { ComponentProps } from 'react';
+
+import type { IconProps } from './types';
+
+import { useColorScheme } from '@/lib/useColorScheme';
+
+function Icon({
+  materialCommunityIcon: _materialCommunityIcon,
+  materialIcon: _materialIcon,
+  sfSymbol,
+  name,
+  color,
+  size = 24,
+  ...props
+}: IconProps) {
+  const { colors } = useColorScheme();
+  const symbolName = (name ?? 'questionmark') as ComponentProps<typeof SymbolView>['name'];
+
+  return (
+    <SymbolView
+      {...props}
+      {...sfSymbol}
+      name={symbolName}
+      tintColor={rgbaToHex(color ?? colors.foreground)}
+      size={size}
+      resizeMode="scaleAspectFit"
+    />
+  );
+}
+
+export { Icon };
+
+// TODO: seems like the need to convert rgba to hex color is a bug in expo-symbols, accordion to the docs, it should accept a hex color, but it doesn't.
+
+function rgbaToHex(color: string): string {
+  if (!color) return 'black';
+  const rgbaRegex =
+    /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d*\.?\d+))?\s*\)$/i;
+  const match = color.match(rgbaRegex);
+
+  if (!match) {
+    return color;
+  }
+
+  const [, rStr, gStr, bStr, aStr] = match;
+  const r = Math.min(255, parseInt(rStr));
+  const g = Math.min(255, parseInt(gStr));
+  const b = Math.min(255, parseInt(bStr));
+  const a = aStr !== undefined ? Math.round(parseFloat(aStr) * 255) : 255;
+
+  const toHex = (n: number) => n.toString(16).padStart(2, '0');
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}${a < 255 ? toHex(a) : ''}`;
+}

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Icon/Icon.tsx

@@ -0,0 +1,58 @@
+import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import {
+  SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS,
+  SF_SYMBOLS_TO_MATERIAL_ICONS,
+} from 'rn-icon-mapper';
+
+import type { IconProps } from './types';
+
+import { useColorScheme } from '@/lib/useColorScheme';
+
+function Icon({
+  name,
+  materialCommunityIcon,
+  materialIcon,
+  sfSymbol: _sfSymbol,
+  size = 24,
+  ...props
+}: IconProps) {
+  const { colors } = useColorScheme();
+  const defaultColor = colors.foreground;
+
+  if (materialCommunityIcon) {
+    return (
+      <MaterialCommunityIcons
+        size={size}
+        color={defaultColor}
+        {...props}
+        {...materialCommunityIcon}
+      />
+    );
+  }
+  if (materialIcon) {
+    return <MaterialIcons size={size} color={defaultColor} {...props} {...materialIcon} />;
+  }
+  const materialCommunityIconName =
+    SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS[
+      name as keyof typeof SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS
+    ];
+  if (materialCommunityIconName) {
+    return (
+      <MaterialCommunityIcons
+        name={materialCommunityIconName}
+        size={size}
+        color={defaultColor}
+        {...props}
+      />
+    );
+  }
+  const materialIconName =
+    SF_SYMBOLS_TO_MATERIAL_ICONS[name as keyof typeof SF_SYMBOLS_TO_MATERIAL_ICONS];
+  if (materialIconName) {
+    return <MaterialIcons name={materialIconName} size={size} color={defaultColor} {...props} />;
+  }
+  return <MaterialCommunityIcons name="help" size={size} color={defaultColor} {...props} />;
+}
+
+export { Icon };

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Icon/index.ts

@@ -0,0 +1,16 @@
+import { cssInterop } from 'nativewind';
+
+import { Icon } from './Icon';
+
+cssInterop(Icon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      color: 'color',
+      height: 'size',
+      width: 'size',
+    },
+  },
+});
+
+export { Icon };

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Icon/types.ts

@@ -0,0 +1,19 @@
+import type MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import type MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import type { SymbolViewProps } from 'expo-symbols';
+import type { IconMapper } from 'rn-icon-mapper';
+
+type MaterialCommunityIconsProps = React.ComponentProps<typeof MaterialCommunityIcons>;
+type MaterialIconsProps = React.ComponentProps<typeof MaterialIcons>;
+type SymbolIconProps = Omit<SymbolViewProps, 'name'> & { name: string };
+
+type Style = SymbolIconProps['style'] &
+  MaterialIconsProps['style'] &
+  MaterialCommunityIconsProps['style'];
+
+type IconProps = IconMapper<SymbolIconProps, MaterialIconsProps, MaterialCommunityIconsProps> & {
+  style?: Style;
+  className?: string;
+};
+
+export type { IconProps };

package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Picker.tsx

@@ -0,0 +1,42 @@
+import { Picker as RNPicker } from '@react-native-picker/picker';
+import { Platform, View } from 'react-native';
+
+import { cn } from '@/lib/cn';
+import { useColorScheme } from '@/lib/useColorScheme';
+
+export function Picker<T>({
+  mode = 'dropdown',
+  style,
+  dropdownIconColor,
+  dropdownIconRippleColor,
+  className,
+  ...props
+}: React.ComponentProps<typeof RNPicker<T>>) {
+  const { colors } = useColorScheme();
+  return (
+    <View
+      className={cn(
+        'ios:shadow-sm ios:shadow-black/5 rounded-md border border-background bg-background',
+        className
+      )}>
+      <RNPicker
+        mode={mode}
+        style={
+          style ?? {
+            backgroundColor: colors.root,
+            borderRadius: 8,
+          }
+        }
+        {...(Platform.OS === 'android'
+          ? {
+              dropdownIconColor: dropdownIconColor ?? colors.foreground,
+              dropdownIconRippleColor: dropdownIconRippleColor ?? colors.foreground,
+            }
+          : {})}
+        {...props}
+      />
+    </View>
+  );
+}
+
+export const PickerItem = RNPicker.Item;