@wireservers-ui/react-natives 0.1.0

package/assets/logos/react-natives-logo.svg

@@ -0,0 +1,45 @@
+<svg width="1980" height="600" viewBox="0 60 1980 500" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+  <title id="title">React-Natives logo</title>
+  <desc id="desc">High-resolution React-Natives horizontal logo with plus signs, italic wordmark, and tilted mobile-device icon.</desc>
+  <defs>
+    <linearGradient id="orbGradient" x1="84" y1="108" x2="434" y2="458" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#61DBFB"/>
+      <stop offset="1" stop-color="#2BA8CC"/>
+    </linearGradient>
+    <linearGradient id="phoneBody" x1="156" y1="154" x2="344" y2="408" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F8FBFF"/>
+      <stop offset="1" stop-color="#D9E8F5"/>
+    </linearGradient>
+    <linearGradient id="phoneScreen" x1="174" y1="184" x2="302" y2="362" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F9FCFF"/>
+      <stop offset="1" stop-color="#E4EDF6"/>
+    </linearGradient>
+  </defs>
+
+  <circle cx="250" cy="304" r="224" fill="url(#orbGradient)"/>
+  <circle cx="250" cy="304" r="224" stroke="#2BA8CC" stroke-width="10"/>
+  <circle cx="250" cy="304" r="160" fill="none" stroke="#E8F9FE" stroke-width="10"/>
+
+  <path d="M162 120H194" stroke="#E8F9FE" stroke-width="10" stroke-linecap="round"/>
+  <path d="M178 104V136" stroke="#E8F9FE" stroke-width="10" stroke-linecap="round"/>
+  <path d="M204 96H230" stroke="#E8F9FE" stroke-width="8" stroke-linecap="round"/>
+  <path d="M217 83V109" stroke="#E8F9FE" stroke-width="8" stroke-linecap="round"/>
+  <path d="M130 146H150" stroke="#61DBFB" stroke-width="6" stroke-linecap="round"/>
+  <path d="M140 136V156" stroke="#61DBFB" stroke-width="6" stroke-linecap="round"/>
+
+  <g transform="rotate(-16 246 324)">
+    <rect x="154" y="152" width="188" height="282" rx="34" fill="url(#phoneBody)" stroke="#8FA7BA" stroke-width="10"/>
+    <rect x="176" y="182" width="144" height="206" rx="20" fill="url(#phoneScreen)"/>
+    <rect x="194" y="208" width="108" height="8" rx="4" fill="#C8D4E0"/>
+    <rect x="194" y="234" width="96" height="8" rx="4" fill="#C8D4E0"/>
+    <rect x="194" y="260" width="102" height="8" rx="4" fill="#C8D4E0"/>
+    <rect x="220" y="166" width="56" height="6" rx="3" fill="#C0D2E1"/>
+    <circle cx="248" cy="408" r="8" fill="#C0D2E1"/>
+    <path d="M188 222L304 350" stroke="#ECF3FA" stroke-width="7" stroke-linecap="round"/>
+  </g>
+
+  <g transform="skewX(-9)">
+    <text x="620" y="266" fill="#2BA8CC" font-size="132" font-family="Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif" font-style="italic" font-weight="800" letter-spacing="16">REACT-NATIVES</text>
+    <text x="620" y="376" fill="#61DBFB" font-size="58" font-family="Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif" font-style="italic" font-weight="600" letter-spacing="14">WIRED FOR SPEED</text>
+  </g>
+</svg>

package/assets/logos/react-natives-mark.svg

@@ -0,0 +1,42 @@
+<svg width="1024" height="1024" viewBox="100 100 560 560" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+  <title id="title">React-Natives icon</title>
+  <desc id="desc">High-resolution React-Natives icon with plus signs and tilted mobile-device symbol.</desc>
+  <defs>
+    <linearGradient id="orb" x1="120" y1="120" x2="590" y2="610" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#61DBFB"/>
+      <stop offset="1" stop-color="#2BA8CC"/>
+    </linearGradient>
+    <linearGradient id="phoneBody" x1="226" y1="208" x2="500" y2="564" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F8FBFF"/>
+      <stop offset="1" stop-color="#D9E8F5"/>
+    </linearGradient>
+    <linearGradient id="phoneScreen" x1="254" y1="254" x2="430" y2="500" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F9FCFF"/>
+      <stop offset="1" stop-color="#E4EDF6"/>
+    </linearGradient>
+  </defs>
+
+  <g transform="translate(50 0)">
+  <circle cx="330" cy="378" r="268" fill="url(#orb)"/>
+  <circle cx="330" cy="378" r="268" stroke="#2BA8CC" stroke-width="12"/>
+  <circle cx="330" cy="378" r="194" fill="none" stroke="#E8F9FE" stroke-width="10"/>
+
+  <path d="M208 154H248" stroke="#E8F9FE" stroke-width="12" stroke-linecap="round"/>
+  <path d="M228 134V174" stroke="#E8F9FE" stroke-width="12" stroke-linecap="round"/>
+  <path d="M262 124H292" stroke="#E8F9FE" stroke-width="10" stroke-linecap="round"/>
+  <path d="M277 109V139" stroke="#E8F9FE" stroke-width="10" stroke-linecap="round"/>
+  <path d="M170 186H194" stroke="#61DBFB" stroke-width="8" stroke-linecap="round"/>
+  <path d="M182 174V198" stroke="#61DBFB" stroke-width="8" stroke-linecap="round"/>
+
+  <g transform="rotate(-17 332 412)">
+    <rect x="222" y="216" width="232" height="360" rx="42" fill="url(#phoneBody)" stroke="#8FA7BA" stroke-width="12"/>
+    <rect x="250" y="252" width="176" height="262" rx="26" fill="url(#phoneScreen)"/>
+    <rect x="272" y="286" width="132" height="10" rx="5" fill="#C8D4E0"/>
+    <rect x="272" y="320" width="118" height="10" rx="5" fill="#C8D4E0"/>
+    <rect x="272" y="354" width="126" height="10" rx="5" fill="#C8D4E0"/>
+    <rect x="306" y="232" width="64" height="8" rx="4" fill="#C0D2E1"/>
+    <circle cx="338" cy="542" r="10" fill="#C0D2E1"/>
+    <path d="M266 302L410 464" stroke="#ECF3FA" stroke-width="8" stroke-linecap="round"/>
+  </g>
+  </g>
+</svg>

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@wireservers-ui/react-natives",
+  "version": "0.1.0",
+  "description": "70+ production-ready React Native components — TypeScript-first, themeable, accessible. Created by WireServers-UI.",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wireservers/wireservers-ui.git",
+    "directory": "packages/react-natives"
+  },
+  "keywords": [
+    "react-native",
+    "components",
+    "ui-library",
+    "nativewind",
+    "tailwind",
+    "typescript",
+    "expo",
+    "accessible",
+    "cross-platform"
+  ],
+  "author": "WireServers-UI",
+  "license": "MIT",
+  "homepage": "https://github.com/wireservers/wireservers-ui",
+  "bugs": {
+    "url": "https://github.com/wireservers/wireservers-ui/issues"
+  },
+  "files": [
+    "src",
+    "assets",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.74",
+    "nativewind": ">=4",
+    "tailwind-variants": ">=0.1",
+    "react-native-reanimated": ">=3",
+    "react-native-gesture-handler": ">=2",
+    "react-native-svg": ">=13"
+  },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    }
+  }
+}

package/src/accordion/accordion-content.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useAccordionContext } from './accordion';
+import { useAccordionItemContext } from './accordion-item';
+import type { AccordionContentProps } from './types';
+import { accordionContentStyle } from './styles';
+
+export const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AccordionContentProps
+>(({ className, children, ...props }, ref) => {
+  const { size } = useAccordionContext();
+  const { isExpanded } = useAccordionItemContext();
+
+  if (!isExpanded) {
+    return null;
+  }
+
+  return (
+    <View
+      ref={ref}
+      className={accordionContentStyle({ size, class: className })}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+
+AccordionContent.displayName = 'AccordionContent';

package/src/accordion/accordion-icon.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useAccordionContext } from './accordion';
+import { useAccordionItemContext } from './accordion-item';
+import type { AccordionIconProps } from './types';
+import { accordionIconStyle } from './styles';
+
+export const AccordionIcon = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AccordionIconProps
+>(({ className, ...props }, ref) => {
+  const { size } = useAccordionContext();
+  const { isExpanded } = useAccordionItemContext();
+
+  return (
+    <View
+      ref={ref}
+      className={accordionIconStyle({ size, class: className })}
+      style={{
+        transform: [{ rotate: isExpanded ? '180deg' : '0deg' }],
+      }}
+      {...props}
+    >
+      {/* Chevron down SVG path rendered as a simple text fallback */}
+      <ChevronDownIcon />
+    </View>
+  );
+});
+
+AccordionIcon.displayName = 'AccordionIcon';
+
+/**
+ * Simple chevron-down icon component.
+ * Uses a unicode character as a lightweight cross-platform solution.
+ * Can be replaced with a proper SVG icon library.
+ */
+function ChevronDownIcon() {
+  return (
+    <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+      {/* Using a View-based approach for the chevron */}
+      <View
+        style={{
+          width: 10,
+          height: 10,
+          borderRightWidth: 2,
+          borderBottomWidth: 2,
+          borderColor: '#737373',
+          transform: [{ rotate: '45deg' }],
+          marginTop: -3,
+        }}
+      />
+    </View>
+  );
+}

package/src/accordion/accordion-item.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import { useAccordionContext } from './accordion';
+import type { AccordionItemProps, AccordionItemContextValue } from './types';
+import { accordionItemStyle } from './styles';
+
+export const [AccordionItemProvider, useAccordionItemContext] =
+  createComponentContext<AccordionItemContextValue>('AccordionItem');
+
+export const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AccordionItemProps
+>(({ className, value, children, ...props }, ref) => {
+  const { expandedItems, variant } = useAccordionContext();
+
+  const isExpanded = expandedItems.includes(value);
+
+  const contextValue = React.useMemo<AccordionItemContextValue>(
+    () => ({ value, isExpanded }),
+    [value, isExpanded],
+  );
+
+  return (
+    <AccordionItemProvider value={contextValue}>
+      <View
+        ref={ref}
+        className={accordionItemStyle({ variant, class: className })}
+        {...props}
+      >
+        {children}
+      </View>
+    </AccordionItemProvider>
+  );
+});
+
+AccordionItem.displayName = 'AccordionItem';

package/src/accordion/accordion-title-text.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useAccordionContext } from './accordion';
+import type { AccordionTitleTextProps } from './types';
+import { accordionTitleTextStyle } from './styles';
+
+export const AccordionTitleText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  AccordionTitleTextProps
+>(({ className, children, ...props }, ref) => {
+  const { size } = useAccordionContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={accordionTitleTextStyle({ size, class: className })}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
+
+AccordionTitleText.displayName = 'AccordionTitleText';

package/src/accordion/accordion-trigger.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { useAccordionContext } from './accordion';
+import { useAccordionItemContext } from './accordion-item';
+import type { AccordionTriggerProps } from './types';
+import { accordionTriggerStyle } from './styles';
+
+export const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  AccordionTriggerProps
+>(({ className, children, onPress, ...props }, ref) => {
+  const { toggleItem, size } = useAccordionContext();
+  const { value } = useAccordionItemContext();
+
+  const handlePress = React.useCallback(
+    (e: any) => {
+      toggleItem(value);
+      onPress?.(e);
+    },
+    [toggleItem, value, onPress],
+  );
+
+  return (
+    <Pressable
+      ref={ref}
+      className={accordionTriggerStyle({ size, class: className })}
+      onPress={handlePress}
+      accessibilityRole="button"
+      {...props}
+    >
+      {typeof children === 'function'
+        ? children({ pressed: false } as any)
+        : children}
+    </Pressable>
+  );
+});
+
+AccordionTrigger.displayName = 'AccordionTrigger';

package/src/accordion/accordion.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { AccordionProps, AccordionContextValue } from './types';
+import { accordionStyle } from './styles';
+
+export const [AccordionProvider, useAccordionContext] =
+  createComponentContext<AccordionContextValue>('Accordion');
+
+export const Accordion = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AccordionProps
+>(
+  (
+    {
+      className,
+      type = 'single',
+      defaultValue = [],
+      value: controlledValue,
+      onValueChange,
+      isCollapsible = true,
+      variant = 'unfilled',
+      size = 'md',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [uncontrolledValue, setUncontrolledValue] =
+      React.useState<string[]>(defaultValue);
+
+    const isControlled = controlledValue !== undefined;
+    const expandedItems = isControlled ? controlledValue : uncontrolledValue;
+
+    const toggleItem = React.useCallback(
+      (itemValue: string) => {
+        let nextValue: string[];
+
+        if (type === 'single') {
+          if (expandedItems.includes(itemValue)) {
+            // Trying to collapse the currently expanded item
+            nextValue = isCollapsible ? [] : expandedItems;
+          } else {
+            nextValue = [itemValue];
+          }
+        } else {
+          // multiple
+          if (expandedItems.includes(itemValue)) {
+            nextValue = isCollapsible
+              ? expandedItems.filter((v) => v !== itemValue)
+              : expandedItems;
+          } else {
+            nextValue = [...expandedItems, itemValue];
+          }
+        }
+
+        if (!isControlled) {
+          setUncontrolledValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+      },
+      [type, expandedItems, isCollapsible, isControlled, onValueChange],
+    );
+
+    const contextValue = React.useMemo<AccordionContextValue>(
+      () => ({
+        expandedItems,
+        toggleItem,
+        type,
+        isCollapsible,
+        variant,
+        size,
+      }),
+      [expandedItems, toggleItem, type, isCollapsible, variant, size],
+    );
+
+    return (
+      <AccordionProvider value={contextValue}>
+        <View
+          ref={ref}
+          className={accordionStyle({ class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </AccordionProvider>
+    );
+  },
+);
+
+Accordion.displayName = 'Accordion';

package/src/accordion/index.ts

@@ -0,0 +1,24 @@
+export { Accordion, AccordionProvider, useAccordionContext } from './accordion';
+export {
+  AccordionItem,
+  AccordionItemProvider,
+  useAccordionItemContext,
+} from './accordion-item';
+export { AccordionTrigger } from './accordion-trigger';
+export { AccordionContent } from './accordion-content';
+export { AccordionIcon } from './accordion-icon';
+export { AccordionTitleText } from './accordion-title-text';
+
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+  AccordionIconProps,
+  AccordionTitleTextProps,
+  AccordionType,
+  AccordionVariant,
+  AccordionSize,
+  AccordionContextValue,
+  AccordionItemContextValue,
+} from './types';

package/src/accordion/styles.ts

@@ -0,0 +1,74 @@
+import { tv } from 'tailwind-variants';
+
+export const accordionStyle = tv({
+  base: 'w-full',
+});
+
+export const accordionItemStyle = tv({
+  base: 'border-b border-outline-200',
+  variants: {
+    variant: {
+      filled: 'bg-background-50 rounded-lg mb-2 border-0 overflow-hidden',
+      unfilled: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'unfilled',
+  },
+});
+
+export const accordionTriggerStyle = tv({
+  base: 'flex-row items-center justify-between w-full active:bg-background-100',
+  variants: {
+    size: {
+      sm: 'px-3 py-2',
+      md: 'px-4 py-3',
+      lg: 'px-5 py-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const accordionTitleTextStyle = tv({
+  base: 'text-typography-900 font-medium flex-1',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const accordionIconStyle = tv({
+  base: 'text-typography-500',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const accordionContentStyle = tv({
+  base: 'overflow-hidden',
+  variants: {
+    size: {
+      sm: 'px-3 pb-2',
+      md: 'px-4 pb-3',
+      lg: 'px-5 pb-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/accordion/types.ts

@@ -0,0 +1,56 @@
+import type { View, Pressable, Text as RNText } from 'react-native';
+
+export type AccordionType = 'single' | 'multiple';
+export type AccordionVariant = 'filled' | 'unfilled';
+export type AccordionSize = 'sm' | 'md' | 'lg';
+
+export interface AccordionContextValue {
+  expandedItems: string[];
+  toggleItem: (value: string) => void;
+  type: AccordionType;
+  isCollapsible: boolean;
+  variant: AccordionVariant;
+  size: AccordionSize;
+}
+
+export interface AccordionItemContextValue {
+  value: string;
+  isExpanded: boolean;
+}
+
+export interface AccordionProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  type?: AccordionType;
+  defaultValue?: string[];
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+  isCollapsible?: boolean;
+  variant?: AccordionVariant;
+  size?: AccordionSize;
+}
+
+export interface AccordionItemProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value: string;
+}
+
+export interface AccordionTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}
+
+export interface AccordionContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface AccordionIconProps {
+  className?: string;
+}
+
+export interface AccordionTitleTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}

package/src/actionsheet/actionsheet-backdrop.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { useActionSheetContext } from './actionsheet';
+import type { ActionSheetBackdropProps } from './types';
+import { actionsheetBackdropStyle } from './styles';
+
+export const ActionSheetBackdrop = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ActionSheetBackdropProps
+>(({ className, ...props }, ref) => {
+  const { onClose } = useActionSheetContext();
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onClose}
+      className={actionsheetBackdropStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+ActionSheetBackdrop.displayName = 'ActionSheetBackdrop';

package/src/actionsheet/actionsheet-content.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { ActionSheetContentProps } from './types';
+import { actionsheetContentStyle } from './styles';
+
+export const ActionSheetContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ActionSheetContentProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={actionsheetContentStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+ActionSheetContent.displayName = 'ActionSheetContent';