@wireservers-ui/react-natives 2.0.1 → 2.0.2-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wireservers-ui/react-natives",
-  "version": "2.0.1",
+  "version": "2.0.2-rc.0",
   "description": "A comprehensive React Native component library built with NativeWind and Tailwind Variants",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/accordion/accordion-content.tsx

@@ -1,30 +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';
+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

@@ -1,54 +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>
-  );
-}
+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

@@ -1,37 +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';
+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

@@ -1,24 +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';
+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

@@ -1,38 +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';
+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

@@ -1,91 +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';
+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

@@ -1,24 +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';
+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';