@wireservers-ui/react-natives 1.0.0 → 1.0.1-rc1

package/src/stat/types.ts

@@ -1,24 +1,24 @@
-import type { View, Text as RNText } from 'react-native';
-
-export interface StatProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface StatLabelProps extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface StatNumberProps extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface StatHelpTextProps extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export type StatArrowType = 'increase' | 'decrease';
-
-export interface StatArrowProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  type?: StatArrowType;
-}
+import type { View, Text as RNText } from 'react-native';
+
+export interface StatProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface StatLabelProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface StatNumberProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface StatHelpTextProps extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export type StatArrowType = 'increase' | 'decrease';
+
+export interface StatArrowProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  type?: StatArrowType;
+}

package/src/stepper/index.ts

@@ -1,2 +1,2 @@
-export { Stepper, StepperProvider, useStepperContext, Step, StepProvider, useStepContext, StepIndicator, StepSeparator, StepTitle, StepDescription } from './stepper';
-export type { StepperProps, StepProps, StepIndicatorProps, StepSeparatorProps, StepTitleProps, StepDescriptionProps, StepperOrientation, StepperContextValue, StepContextValue } from './types';
+export { Stepper, StepperProvider, useStepperContext, Step, StepProvider, useStepContext, StepIndicator, StepSeparator, StepTitle, StepDescription } from './stepper';
+export type { StepperProps, StepProps, StepIndicatorProps, StepSeparatorProps, StepTitleProps, StepDescriptionProps, StepperOrientation, StepperContextValue, StepContextValue } from './types';

package/src/stepper/stepper.tsx

@@ -1,95 +1,95 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { StepperProps, StepProps, StepIndicatorProps, StepSeparatorProps, StepTitleProps, StepDescriptionProps, StepperContextValue, StepContextValue } from './types';
-import { stepperStyle, stepStyle, stepIndicatorStyle, stepIndicatorTextStyle, stepSeparatorStyle, stepTitleStyle, stepDescriptionStyle } from './styles';
-
-export const [StepperProvider, useStepperContext] = createComponentContext<StepperContextValue>('Stepper');
-export const [StepProvider, useStepContext] = createComponentContext<StepContextValue>('Step');
-
-export const Stepper = React.forwardRef<React.ElementRef<typeof View>, StepperProps>(
-  ({ className, activeStep = 0, orientation = 'horizontal', children, ...props }, ref) => {
-    return (
-      <StepperProvider value={{ activeStep, orientation }}>
-        <View ref={ref} className={stepperStyle({ orientation, class: className })} {...props}>{children}</View>
-      </StepperProvider>
-    );
-  },
-);
-Stepper.displayName = 'Stepper';
-
-export const Step = React.forwardRef<React.ElementRef<typeof View>, StepProps>(
-  ({ className, index, children, ...props }, ref) => {
-    const { activeStep, orientation } = useStepperContext();
-    const isActive = index === activeStep;
-    const isCompleted = index < activeStep;
-
-    if (orientation === 'vertical') {
-      const childArray = React.Children.toArray(children);
-      const isSep = (c: React.ReactNode) =>
-        React.isValidElement(c) && (c.type as any).displayName === 'StepSeparator';
-      const separatorChild = childArray.find(isSep);
-      const otherChildren = childArray.filter(c => !isSep(c));
-      return (
-        <StepProvider value={{ index, isActive, isCompleted }}>
-          <View ref={ref} className={stepStyle({ orientation, class: className })} {...props}>
-            <View className="items-center">
-              {otherChildren[0]}
-              {separatorChild}
-            </View>
-            <View className="pt-1.5 gap-0.5">
-              {otherChildren.slice(1)}
-            </View>
-          </View>
-        </StepProvider>
-      );
-    }
-
-    return (
-      <StepProvider value={{ index, isActive, isCompleted }}>
-        <View ref={ref} className={stepStyle({ orientation, class: className })} {...props}>{children}</View>
-      </StepProvider>
-    );
-  },
-);
-Step.displayName = 'Step';
-
-export const StepIndicator = React.forwardRef<React.ElementRef<typeof View>, StepIndicatorProps>(
-  ({ className, children, ...props }, ref) => {
-    const { index, isActive, isCompleted } = useStepContext();
-    return (
-      <View ref={ref} className={stepIndicatorStyle({ isActive, isCompleted: !isActive && isCompleted, class: className })} {...props}>
-        {children ?? (
-          <Text className={stepIndicatorTextStyle({ isActive: isActive || isCompleted })}>
-            {isCompleted ? '✓' : index + 1}
-          </Text>
-        )}
-      </View>
-    );
-  },
-);
-StepIndicator.displayName = 'StepIndicator';
-
-export const StepSeparator = React.forwardRef<React.ElementRef<typeof View>, StepSeparatorProps>(
-  ({ className, ...props }, ref) => {
-    const { orientation } = useStepperContext();
-    const { isCompleted } = useStepContext();
-    return <View ref={ref} className={stepSeparatorStyle({ orientation, isCompleted, class: className })} {...props} />;
-  },
-);
-StepSeparator.displayName = 'StepSeparator';
-
-export const StepTitle = React.forwardRef<React.ElementRef<typeof Text>, StepTitleProps>(
-  ({ className, ...props }, ref) => {
-    const { isActive, isCompleted } = useStepContext();
-    return <Text ref={ref} className={stepTitleStyle({ isActive, isCompleted: !isActive && isCompleted, class: className })} {...props} />;
-  },
-);
-StepTitle.displayName = 'StepTitle';
-
-export const StepDescription = React.forwardRef<React.ElementRef<typeof Text>, StepDescriptionProps>(
-  ({ className, ...props }, ref) => {
-    return <Text ref={ref} className={stepDescriptionStyle({ class: className })} {...props} />;
-  },
-);
-StepDescription.displayName = 'StepDescription';
+import React from 'react';
+import { View, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { StepperProps, StepProps, StepIndicatorProps, StepSeparatorProps, StepTitleProps, StepDescriptionProps, StepperContextValue, StepContextValue } from './types';
+import { stepperStyle, stepStyle, stepIndicatorStyle, stepIndicatorTextStyle, stepSeparatorStyle, stepTitleStyle, stepDescriptionStyle } from './styles';
+
+export const [StepperProvider, useStepperContext] = createComponentContext<StepperContextValue>('Stepper');
+export const [StepProvider, useStepContext] = createComponentContext<StepContextValue>('Step');
+
+export const Stepper = React.forwardRef<React.ElementRef<typeof View>, StepperProps>(
+  ({ className, activeStep = 0, orientation = 'horizontal', children, ...props }, ref) => {
+    return (
+      <StepperProvider value={{ activeStep, orientation }}>
+        <View ref={ref} className={stepperStyle({ orientation, class: className })} {...props}>{children}</View>
+      </StepperProvider>
+    );
+  },
+);
+Stepper.displayName = 'Stepper';
+
+export const Step = React.forwardRef<React.ElementRef<typeof View>, StepProps>(
+  ({ className, index, children, ...props }, ref) => {
+    const { activeStep, orientation } = useStepperContext();
+    const isActive = index === activeStep;
+    const isCompleted = index < activeStep;
+
+    if (orientation === 'vertical') {
+      const childArray = React.Children.toArray(children);
+      const isSep = (c: React.ReactNode) =>
+        React.isValidElement(c) && (c.type as any).displayName === 'StepSeparator';
+      const separatorChild = childArray.find(isSep);
+      const otherChildren = childArray.filter(c => !isSep(c));
+      return (
+        <StepProvider value={{ index, isActive, isCompleted }}>
+          <View ref={ref} className={stepStyle({ orientation, class: className })} {...props}>
+            <View className="items-center">
+              {otherChildren[0]}
+              {separatorChild}
+            </View>
+            <View className="pt-1.5 gap-0.5">
+              {otherChildren.slice(1)}
+            </View>
+          </View>
+        </StepProvider>
+      );
+    }
+
+    return (
+      <StepProvider value={{ index, isActive, isCompleted }}>
+        <View ref={ref} className={stepStyle({ orientation, class: className })} {...props}>{children}</View>
+      </StepProvider>
+    );
+  },
+);
+Step.displayName = 'Step';
+
+export const StepIndicator = React.forwardRef<React.ElementRef<typeof View>, StepIndicatorProps>(
+  ({ className, children, ...props }, ref) => {
+    const { index, isActive, isCompleted } = useStepContext();
+    return (
+      <View ref={ref} className={stepIndicatorStyle({ isActive, isCompleted: !isActive && isCompleted, class: className })} {...props}>
+        {children ?? (
+          <Text className={stepIndicatorTextStyle({ isActive: isActive || isCompleted })}>
+            {isCompleted ? '✓' : index + 1}
+          </Text>
+        )}
+      </View>
+    );
+  },
+);
+StepIndicator.displayName = 'StepIndicator';
+
+export const StepSeparator = React.forwardRef<React.ElementRef<typeof View>, StepSeparatorProps>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useStepperContext();
+    const { isCompleted } = useStepContext();
+    return <View ref={ref} className={stepSeparatorStyle({ orientation, isCompleted, class: className })} {...props} />;
+  },
+);
+StepSeparator.displayName = 'StepSeparator';
+
+export const StepTitle = React.forwardRef<React.ElementRef<typeof Text>, StepTitleProps>(
+  ({ className, ...props }, ref) => {
+    const { isActive, isCompleted } = useStepContext();
+    return <Text ref={ref} className={stepTitleStyle({ isActive, isCompleted: !isActive && isCompleted, class: className })} {...props} />;
+  },
+);
+StepTitle.displayName = 'StepTitle';
+
+export const StepDescription = React.forwardRef<React.ElementRef<typeof Text>, StepDescriptionProps>(
+  ({ className, ...props }, ref) => {
+    return <Text ref={ref} className={stepDescriptionStyle({ class: className })} {...props} />;
+  },
+);
+StepDescription.displayName = 'StepDescription';

package/src/stepper/styles.ts

@@ -1,49 +1,49 @@
-import { tv } from 'tailwind-variants';
-
-export const stepperStyle = tv({
-  base: '',
-  variants: {
-    orientation: { horizontal: 'flex-row items-center', vertical: 'flex-col' },
-  },
-  defaultVariants: { orientation: 'horizontal' },
-});
-export const stepStyle = tv({
-  base: 'items-center',
-  variants: {
-    orientation: { horizontal: 'flex-row gap-2 flex-1', vertical: 'flex-row gap-3 items-start' },
-  },
-  defaultVariants: { orientation: 'horizontal' },
-});
-export const stepIndicatorStyle = tv({
-  base: 'h-8 w-8 rounded-full items-center justify-center border-2',
-  variants: {
-    isActive: { true: 'bg-primary-500 border-primary-500' },
-    isCompleted: { true: 'bg-primary-500 border-primary-500' },
-  },
-  defaultVariants: { isActive: false, isCompleted: false },
-});
-export const stepIndicatorTextStyle = tv({
-  base: 'text-sm font-semibold',
-  variants: {
-    isActive: { true: 'text-typography-0', false: 'text-typography-500' },
-    isCompleted: { true: 'text-typography-0' },
-  },
-  defaultVariants: { isActive: false },
-});
-export const stepSeparatorStyle = tv({
-  base: 'bg-outline-200',
-  variants: {
-    orientation: { horizontal: 'h-0.5 flex-1', vertical: 'w-0.5 min-h-[24px]' },
-    isCompleted: { true: 'bg-primary-500' },
-  },
-  defaultVariants: { orientation: 'horizontal', isCompleted: false },
-});
-export const stepTitleStyle = tv({
-  base: 'text-sm font-medium',
-  variants: {
-    isActive: { true: 'text-typography-900', false: 'text-typography-500' },
-    isCompleted: { true: 'text-typography-900' },
-  },
-  defaultVariants: { isActive: false },
-});
-export const stepDescriptionStyle = tv({ base: 'text-xs text-typography-400', variants: {} });
+import { tv } from 'tailwind-variants';
+
+export const stepperStyle = tv({
+  base: '',
+  variants: {
+    orientation: { horizontal: 'flex-row items-center', vertical: 'flex-col' },
+  },
+  defaultVariants: { orientation: 'horizontal' },
+});
+export const stepStyle = tv({
+  base: 'items-center',
+  variants: {
+    orientation: { horizontal: 'flex-row gap-2 flex-1', vertical: 'flex-row gap-3 items-start' },
+  },
+  defaultVariants: { orientation: 'horizontal' },
+});
+export const stepIndicatorStyle = tv({
+  base: 'h-8 w-8 rounded-full items-center justify-center border-2',
+  variants: {
+    isActive: { true: 'bg-primary-500 border-primary-500' },
+    isCompleted: { true: 'bg-primary-500 border-primary-500' },
+  },
+  defaultVariants: { isActive: false, isCompleted: false },
+});
+export const stepIndicatorTextStyle = tv({
+  base: 'text-sm font-semibold',
+  variants: {
+    isActive: { true: 'text-typography-0', false: 'text-typography-500' },
+    isCompleted: { true: 'text-typography-0' },
+  },
+  defaultVariants: { isActive: false },
+});
+export const stepSeparatorStyle = tv({
+  base: 'bg-outline-200',
+  variants: {
+    orientation: { horizontal: 'h-0.5 flex-1', vertical: 'w-0.5 min-h-[24px]' },
+    isCompleted: { true: 'bg-primary-500' },
+  },
+  defaultVariants: { orientation: 'horizontal', isCompleted: false },
+});
+export const stepTitleStyle = tv({
+  base: 'text-sm font-medium',
+  variants: {
+    isActive: { true: 'text-typography-900', false: 'text-typography-500' },
+    isCompleted: { true: 'text-typography-900' },
+  },
+  defaultVariants: { isActive: false },
+});
+export const stepDescriptionStyle = tv({ base: 'text-xs text-typography-400', variants: {} });

package/src/stepper/types.ts

@@ -1,20 +1,20 @@
-import type { View, Text as RNText } from 'react-native';
-
-export type StepperOrientation = 'horizontal' | 'vertical';
-
-export interface StepperContextValue { activeStep: number; orientation: StepperOrientation; }
-export interface StepContextValue { index: number; isActive: boolean; isCompleted: boolean; }
-
-export interface StepperProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  activeStep?: number;
-  orientation?: StepperOrientation;
-}
-export interface StepProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  index: number;
-}
-export interface StepIndicatorProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface StepSeparatorProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface StepTitleProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }
-export interface StepDescriptionProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }
+import type { View, Text as RNText } from 'react-native';
+
+export type StepperOrientation = 'horizontal' | 'vertical';
+
+export interface StepperContextValue { activeStep: number; orientation: StepperOrientation; }
+export interface StepContextValue { index: number; isActive: boolean; isCompleted: boolean; }
+
+export interface StepperProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  activeStep?: number;
+  orientation?: StepperOrientation;
+}
+export interface StepProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  index: number;
+}
+export interface StepIndicatorProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface StepSeparatorProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface StepTitleProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }
+export interface StepDescriptionProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }

package/src/switch/index.ts

@@ -1,2 +1,2 @@
-export { Switch } from './switch';
-export type { SwitchProps, SwitchLabelProps, SwitchSize } from './types';
+export { Switch } from './switch';
+export type { SwitchProps, SwitchLabelProps, SwitchSize } from './types';

package/src/switch/styles.ts

@@ -1,24 +1,24 @@
-import { tv } from 'tailwind-variants';
-
-export const switchContainerStyle = tv({
-  base: 'flex-row items-center gap-2',
-  variants: {
-    isDisabled: {
-      true: 'opacity-40',
-    },
-  },
-});
-
-export const switchLabelStyle = tv({
-  base: 'text-typography-900',
-  variants: {
-    size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const switchContainerStyle = tv({
+  base: 'flex-row items-center gap-2',
+  variants: {
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+});
+
+export const switchLabelStyle = tv({
+  base: 'text-typography-900',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/switch/switch.tsx

@@ -1,67 +1,67 @@
-import React, { useState } from 'react';
-import { View, Switch as RNSwitch } from 'react-native';
-import { useFormControlContext } from '../form-control/form-control';
-import type { SwitchProps } from './types';
-import { switchContainerStyle } from './styles';
-
-export const Switch = React.forwardRef<
-  React.ElementRef<typeof View>,
-  SwitchProps
->(
-  (
-    {
-      className,
-      size = 'md',
-      isDisabled: isDisabledProp,
-      value: valueProp,
-      defaultValue = false,
-      onToggle,
-      trackColor: trackColorProp,
-      thumbColor: thumbColorProp,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [internalValue, setInternalValue] = useState(defaultValue);
-    const formControl = useFormControlContext();
-
-    const isDisabled = isDisabledProp ?? formControl?.isDisabled ?? false;
-    const isControlled = valueProp !== undefined;
-    const isOn = isControlled ? valueProp : internalValue;
-
-    const handleToggle = (newValue: boolean) => {
-      if (isDisabled) return;
-      if (!isControlled) {
-        setInternalValue(newValue);
-      }
-      onToggle?.(newValue);
-    };
-
-    const defaultTrackColor = {
-      false: 'rgb(var(--color-background-300))',
-      true: 'rgb(var(--color-primary-500))',
-    };
-
-    const defaultThumbColor = 'rgb(var(--color-background-0))';
-
-    return (
-      <View
-        ref={ref}
-        className={switchContainerStyle({ isDisabled, class: className })}
-        {...props}
-      >
-        <RNSwitch
-          value={isOn}
-          onValueChange={handleToggle}
-          disabled={isDisabled}
-          trackColor={trackColorProp ?? defaultTrackColor}
-          thumbColor={thumbColorProp ?? defaultThumbColor}
-        />
-        {children}
-      </View>
-    );
-  },
-);
-
-Switch.displayName = 'Switch';
+import React, { useState } from 'react';
+import { View, Switch as RNSwitch } from 'react-native';
+import { useFormControlContext } from '../form-control/form-control';
+import type { SwitchProps } from './types';
+import { switchContainerStyle } from './styles';
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SwitchProps
+>(
+  (
+    {
+      className,
+      size = 'md',
+      isDisabled: isDisabledProp,
+      value: valueProp,
+      defaultValue = false,
+      onToggle,
+      trackColor: trackColorProp,
+      thumbColor: thumbColorProp,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const formControl = useFormControlContext();
+
+    const isDisabled = isDisabledProp ?? formControl?.isDisabled ?? false;
+    const isControlled = valueProp !== undefined;
+    const isOn = isControlled ? valueProp : internalValue;
+
+    const handleToggle = (newValue: boolean) => {
+      if (isDisabled) return;
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onToggle?.(newValue);
+    };
+
+    const defaultTrackColor = {
+      false: 'rgb(var(--color-background-300))',
+      true: 'rgb(var(--color-primary-500))',
+    };
+
+    const defaultThumbColor = 'rgb(var(--color-background-0))';
+
+    return (
+      <View
+        ref={ref}
+        className={switchContainerStyle({ isDisabled, class: className })}
+        {...props}
+      >
+        <RNSwitch
+          value={isOn}
+          onValueChange={handleToggle}
+          disabled={isDisabled}
+          trackColor={trackColorProp ?? defaultTrackColor}
+          thumbColor={thumbColorProp ?? defaultThumbColor}
+        />
+        {children}
+      </View>
+    );
+  },
+);
+
+Switch.displayName = 'Switch';

package/src/switch/types.ts

@@ -1,23 +1,23 @@
-import type { View, Switch as RNSwitch } from 'react-native';
-
-export type SwitchSize = 'sm' | 'md' | 'lg';
-
-export interface SwitchProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  size?: SwitchSize;
-  isDisabled?: boolean;
-  value?: boolean;
-  defaultValue?: boolean;
-  onToggle?: (value: boolean) => void;
-  trackColor?: {
-    false?: string;
-    true?: string;
-  };
-  thumbColor?: string;
-}
-
-export interface SwitchLabelProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
+import type { View, Switch as RNSwitch } from 'react-native';
+
+export type SwitchSize = 'sm' | 'md' | 'lg';
+
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  size?: SwitchSize;
+  isDisabled?: boolean;
+  value?: boolean;
+  defaultValue?: boolean;
+  onToggle?: (value: boolean) => void;
+  trackColor?: {
+    false?: string;
+    true?: string;
+  };
+  thumbColor?: string;
+}
+
+export interface SwitchLabelProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}

package/src/table/index.ts

@@ -1,2 +1,2 @@
-export { Table, TableHead, TableBody, TableFooter, TableRow, TableCell, TableHeaderCell, TableCaption } from './table';
-export type { TableProps, TableHeadProps, TableBodyProps, TableFooterProps, TableRowProps, TableCellProps, TableHeaderCellProps, TableCaptionProps } from './types';
+export { Table, TableHead, TableBody, TableFooter, TableRow, TableCell, TableHeaderCell, TableCaption } from './table';
+export type { TableProps, TableHeadProps, TableBodyProps, TableFooterProps, TableRowProps, TableCellProps, TableHeaderCellProps, TableCaptionProps } from './types';