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

package/src/carousel/index.ts

@@ -1,2 +1,2 @@
-export { Carousel, CarouselProvider, useCarouselContext, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots } from './carousel';
-export type { CarouselProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, CarouselDotsProps, CarouselContextValue } from './types';
+export { Carousel, CarouselProvider, useCarouselContext, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots } from './carousel';
+export type { CarouselProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, CarouselDotsProps, CarouselContextValue } from './types';

package/src/carousel/styles.ts

@@ -1,21 +1,21 @@
-import { tv } from 'tailwind-variants';
-
-export const carouselStyle = tv({ base: 'relative', variants: {} });
-export const carouselContentStyle = tv({ base: '', variants: {} });
-export const carouselItemStyle = tv({ base: 'w-full', variants: {} });
-export const carouselPreviousStyle = tv({
-  base: 'h-8 w-8 items-center justify-center rounded-full bg-background-100 border border-outline-200',
-  variants: {},
-});
-export const carouselNextStyle = tv({
-  base: 'h-8 w-8 items-center justify-center rounded-full bg-background-100 border border-outline-200',
-  variants: {},
-});
-export const carouselDotsStyle = tv({ base: 'flex-row items-center justify-center gap-1.5 mt-3', variants: {} });
-export const carouselDotStyle = tv({
-  base: 'h-2 w-2 rounded-full',
-  variants: {
-    isActive: { true: 'bg-primary-500', false: 'bg-background-300' },
-  },
-  defaultVariants: { isActive: false },
-});
+import { tv } from 'tailwind-variants';
+
+export const carouselStyle = tv({ base: 'relative', variants: {} });
+export const carouselContentStyle = tv({ base: '', variants: {} });
+export const carouselItemStyle = tv({ base: 'w-full', variants: {} });
+export const carouselPreviousStyle = tv({
+  base: 'h-8 w-8 items-center justify-center rounded-full bg-background-100 border border-outline-200',
+  variants: {},
+});
+export const carouselNextStyle = tv({
+  base: 'h-8 w-8 items-center justify-center rounded-full bg-background-100 border border-outline-200',
+  variants: {},
+});
+export const carouselDotsStyle = tv({ base: 'flex-row items-center justify-center gap-1.5 mt-3', variants: {} });
+export const carouselDotStyle = tv({
+  base: 'h-2 w-2 rounded-full',
+  variants: {
+    isActive: { true: 'bg-primary-500', false: 'bg-background-300' },
+  },
+  defaultVariants: { isActive: false },
+});

package/src/carousel/types.ts

@@ -1,41 +1,41 @@
-import type { View, Pressable, Animated } from 'react-native';
-
-export interface CarouselContextValue {
-  activeIndex: number;
-  setActiveIndex: (index: number) => void;
-  activeIndexRef: React.MutableRefObject<number>;
-  itemCount: number;
-  setItemCount: (count: number) => void;
-  itemCountRef: React.MutableRefObject<number>;
-  loop: boolean;
-  width: number;
-  setWidth: (width: number) => void;
-  widthRef: React.MutableRefObject<number>;
-  animX: Animated.Value;
-  animXValueRef: React.MutableRefObject<number>;
-  goTo: (index: number, animate?: boolean) => void;
-  next: () => void;
-  previous: () => void;
-  itemWidth: number;
-  gap: number;
-}
-
-export interface CarouselProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  defaultIndex?: number;
-  loop?: boolean;
-  onIndexChange?: (index: number) => void;
-  /** Fixed width for each item. When set, multiple items are visible. */
-  itemWidth?: number;
-  /** Gap between items in pixels. */
-  gap?: number;
-  /** Automatically advance slides. */
-  autoPlay?: boolean;
-  /** Interval in ms between auto-advances (default 3000). */
-  autoPlayInterval?: number;
-}
-export interface CarouselContentProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface CarouselItemProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; onPress?: () => void; }
-export interface CarouselPreviousProps extends React.ComponentPropsWithoutRef<typeof Pressable> { className?: string; }
-export interface CarouselNextProps extends React.ComponentPropsWithoutRef<typeof Pressable> { className?: string; }
-export interface CarouselDotsProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+import type { View, Pressable, Animated } from 'react-native';
+
+export interface CarouselContextValue {
+  activeIndex: number;
+  setActiveIndex: (index: number) => void;
+  activeIndexRef: React.MutableRefObject<number>;
+  itemCount: number;
+  setItemCount: (count: number) => void;
+  itemCountRef: React.MutableRefObject<number>;
+  loop: boolean;
+  width: number;
+  setWidth: (width: number) => void;
+  widthRef: React.MutableRefObject<number>;
+  animX: Animated.Value;
+  animXValueRef: React.MutableRefObject<number>;
+  goTo: (index: number, animate?: boolean) => void;
+  next: () => void;
+  previous: () => void;
+  itemWidth: number;
+  gap: number;
+}
+
+export interface CarouselProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  defaultIndex?: number;
+  loop?: boolean;
+  onIndexChange?: (index: number) => void;
+  /** Fixed width for each item. When set, multiple items are visible. */
+  itemWidth?: number;
+  /** Gap between items in pixels. */
+  gap?: number;
+  /** Automatically advance slides. */
+  autoPlay?: boolean;
+  /** Interval in ms between auto-advances (default 3000). */
+  autoPlayInterval?: number;
+}
+export interface CarouselContentProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface CarouselItemProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; onPress?: () => void; }
+export interface CarouselPreviousProps extends React.ComponentPropsWithoutRef<typeof Pressable> { className?: string; }
+export interface CarouselNextProps extends React.ComponentPropsWithoutRef<typeof Pressable> { className?: string; }
+export interface CarouselDotsProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }

package/src/center/center.tsx

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

package/src/center/index.ts

@@ -1,2 +1,2 @@
-export { Center } from './center';
-export type { CenterProps } from './types';
+export { Center } from './center';
+export type { CenterProps } from './types';

package/src/center/styles.ts

@@ -1,6 +1,6 @@
-import { tv } from 'tailwind-variants';
-
-export const centerStyle = tv({
-  base: 'items-center justify-center',
-  variants: {},
-});
+import { tv } from 'tailwind-variants';
+
+export const centerStyle = tv({
+  base: 'items-center justify-center',
+  variants: {},
+});

package/src/center/types.ts

@@ -1,6 +1,6 @@
-import type { View } from 'react-native';
-
-export interface CenterProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
+import type { View } from 'react-native';
+
+export interface CenterProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}

package/src/checkbox/checkbox-group.tsx

@@ -1,63 +1,63 @@
-import React, { createContext, useContext, useState } from 'react';
-import { View } from 'react-native';
-import type { CheckboxGroupProps, CheckboxGroupContextValue } from './types';
-import { checkboxGroupStyle } from './styles';
-
-export const CheckboxGroupContext =
-  createContext<CheckboxGroupContextValue | null>(null);
-
-export function useCheckboxGroupContext(): CheckboxGroupContextValue | null {
-  return useContext(CheckboxGroupContext);
-}
-
-export const CheckboxGroup = React.forwardRef<
-  React.ElementRef<typeof View>,
-  CheckboxGroupProps
->(
-  (
-    {
-      className,
-      value: valueProp,
-      defaultValue = [],
-      onChange,
-      isDisabled,
-      isInvalid,
-      size = 'md',
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [internalValues, setInternalValues] =
-      useState<string[]>(defaultValue);
-    const isControlled = valueProp !== undefined;
-    const values = isControlled ? valueProp : internalValues;
-
-    const handleChange = (checkboxValue: string) => {
-      const newValues = values.includes(checkboxValue)
-        ? values.filter((v) => v !== checkboxValue)
-        : [...values, checkboxValue];
-
-      if (!isControlled) {
-        setInternalValues(newValues);
-      }
-      onChange?.(newValues);
-    };
-
-    return (
-      <CheckboxGroupContext.Provider
-        value={{ values, onChange: handleChange, isDisabled, isInvalid, size }}
-      >
-        <View
-          ref={ref}
-          className={checkboxGroupStyle({ class: className })}
-          {...props}
-        >
-          {children}
-        </View>
-      </CheckboxGroupContext.Provider>
-    );
-  },
-);
-
-CheckboxGroup.displayName = 'CheckboxGroup';
+import React, { createContext, useContext, useState } from 'react';
+import { View } from 'react-native';
+import type { CheckboxGroupProps, CheckboxGroupContextValue } from './types';
+import { checkboxGroupStyle } from './styles';
+
+export const CheckboxGroupContext =
+  createContext<CheckboxGroupContextValue | null>(null);
+
+export function useCheckboxGroupContext(): CheckboxGroupContextValue | null {
+  return useContext(CheckboxGroupContext);
+}
+
+export const CheckboxGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CheckboxGroupProps
+>(
+  (
+    {
+      className,
+      value: valueProp,
+      defaultValue = [],
+      onChange,
+      isDisabled,
+      isInvalid,
+      size = 'md',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalValues, setInternalValues] =
+      useState<string[]>(defaultValue);
+    const isControlled = valueProp !== undefined;
+    const values = isControlled ? valueProp : internalValues;
+
+    const handleChange = (checkboxValue: string) => {
+      const newValues = values.includes(checkboxValue)
+        ? values.filter((v) => v !== checkboxValue)
+        : [...values, checkboxValue];
+
+      if (!isControlled) {
+        setInternalValues(newValues);
+      }
+      onChange?.(newValues);
+    };
+
+    return (
+      <CheckboxGroupContext.Provider
+        value={{ values, onChange: handleChange, isDisabled, isInvalid, size }}
+      >
+        <View
+          ref={ref}
+          className={checkboxGroupStyle({ class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </CheckboxGroupContext.Provider>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';

package/src/checkbox/checkbox-icon.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useCheckboxContext } from './checkbox';
-import type { CheckboxIconProps } from './types';
-import { checkboxIconStyle } from './styles';
-
-export const CheckboxIcon = React.forwardRef<any, CheckboxIconProps>(
-  ({ as: IconComponent, className, ...props }, ref) => {
-    const { isChecked, size } = useCheckboxContext();
-
-    if (!isChecked) return null;
-
-    if (IconComponent) {
-      return (
-        <IconComponent
-          ref={ref}
-          className={checkboxIconStyle({ size, class: className })}
-          {...props}
-        />
-      );
-    }
-
-    return (
-      <Text
-        ref={ref}
-        className={checkboxIconStyle({ size, class: className })}
-        {...props}
-      >
-        {'\u2713'}
-      </Text>
-    );
-  },
-);
-
-CheckboxIcon.displayName = 'CheckboxIcon';
+import React from 'react';
+import { Text } from 'react-native';
+import { useCheckboxContext } from './checkbox';
+import type { CheckboxIconProps } from './types';
+import { checkboxIconStyle } from './styles';
+
+export const CheckboxIcon = React.forwardRef<any, CheckboxIconProps>(
+  ({ as: IconComponent, className, ...props }, ref) => {
+    const { isChecked, size } = useCheckboxContext();
+
+    if (!isChecked) return null;
+
+    if (IconComponent) {
+      return (
+        <IconComponent
+          ref={ref}
+          className={checkboxIconStyle({ size, class: className })}
+          {...props}
+        />
+      );
+    }
+
+    return (
+      <Text
+        ref={ref}
+        className={checkboxIconStyle({ size, class: className })}
+        {...props}
+      >
+        {'\u2713'}
+      </Text>
+    );
+  },
+);
+
+CheckboxIcon.displayName = 'CheckboxIcon';

package/src/checkbox/checkbox-indicator.tsx

@@ -1,30 +1,30 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useCheckboxContext } from './checkbox';
-import type { CheckboxIndicatorProps } from './types';
-import { checkboxIndicatorStyle } from './styles';
-
-export const CheckboxIndicator = React.forwardRef<
-  React.ElementRef<typeof View>,
-  CheckboxIndicatorProps
->(({ className, children, ...props }, ref) => {
-  const { isChecked, isDisabled, isInvalid, size } = useCheckboxContext();
-
-  return (
-    <View
-      ref={ref}
-      className={checkboxIndicatorStyle({
-        size,
-        isChecked,
-        isInvalid,
-        isDisabled,
-        class: className,
-      })}
-      {...props}
-    >
-      {children}
-    </View>
-  );
-});
-
-CheckboxIndicator.displayName = 'CheckboxIndicator';
+import React from 'react';
+import { View } from 'react-native';
+import { useCheckboxContext } from './checkbox';
+import type { CheckboxIndicatorProps } from './types';
+import { checkboxIndicatorStyle } from './styles';
+
+export const CheckboxIndicator = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CheckboxIndicatorProps
+>(({ className, children, ...props }, ref) => {
+  const { isChecked, isDisabled, isInvalid, size } = useCheckboxContext();
+
+  return (
+    <View
+      ref={ref}
+      className={checkboxIndicatorStyle({
+        size,
+        isChecked,
+        isInvalid,
+        isDisabled,
+        class: className,
+      })}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+
+CheckboxIndicator.displayName = 'CheckboxIndicator';

package/src/checkbox/checkbox-label.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useCheckboxContext } from './checkbox';
-import type { CheckboxLabelProps } from './types';
-import { checkboxLabelStyle } from './styles';
-
-export const CheckboxLabel = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  CheckboxLabelProps
->(({ className, children, ...props }, ref) => {
-  const { isDisabled, size } = useCheckboxContext();
-
-  return (
-    <Text
-      ref={ref}
-      className={checkboxLabelStyle({ size, isDisabled, class: className })}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-});
-
-CheckboxLabel.displayName = 'CheckboxLabel';
+import React from 'react';
+import { Text } from 'react-native';
+import { useCheckboxContext } from './checkbox';
+import type { CheckboxLabelProps } from './types';
+import { checkboxLabelStyle } from './styles';
+
+export const CheckboxLabel = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  CheckboxLabelProps
+>(({ className, children, ...props }, ref) => {
+  const { isDisabled, size } = useCheckboxContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={checkboxLabelStyle({ size, isDisabled, class: className })}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
+
+CheckboxLabel.displayName = 'CheckboxLabel';