@wireservers-ui/react-natives 0.1.0

package/src/stepper/stepper.tsx

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

package/src/stepper/styles.ts

@@ -0,0 +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: {} });

package/src/stepper/types.ts

@@ -0,0 +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; }

package/src/switch/index.ts

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

package/src/switch/styles.ts

@@ -0,0 +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',
+  },
+});

package/src/switch/switch.tsx

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

package/src/switch/types.ts

@@ -0,0 +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;
+}

package/src/table/index.ts

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

package/src/table/styles.ts

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+export const tableStyle = tv({ base: 'w-full flex-col', variants: {} });
+export const tableHeadStyle = tv({ base: 'flex-col bg-background-50', variants: {} });
+export const tableBodyStyle = tv({ base: 'flex-col', variants: {} });
+export const tableFooterStyle = tv({ base: 'bg-background-50', variants: {} });
+export const tableRowStyle = tv({ base: 'flex-row border-b border-outline-100', variants: {} });
+export const tableCellStyle = tv({ base: 'flex-1 px-4 py-3 justify-center', variants: {} });
+export const tableHeaderCellStyle = tv({ base: 'flex-1 px-4 py-3 justify-center', variants: {} });
+export const tableHeaderCellTextStyle = tv({ base: 'text-xs font-semibold text-typography-500 uppercase', variants: {} });
+export const tableCellTextStyle = tv({ base: 'text-sm text-typography-700', variants: {} });
+export const tableCaptionStyle = tv({ base: 'text-sm text-typography-400 py-3 text-center', variants: {} });

package/src/table/table.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { TableProps, TableHeadProps, TableBodyProps, TableFooterProps, TableRowProps, TableCellProps, TableHeaderCellProps, TableCaptionProps } from './types';
+import { tableStyle, tableHeadStyle, tableBodyStyle, tableFooterStyle, tableRowStyle, tableCellStyle, tableHeaderCellStyle, tableHeaderCellTextStyle, tableCellTextStyle, tableCaptionStyle } from './styles';
+
+export const Table = React.forwardRef<React.ElementRef<typeof View>, TableProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={tableStyle({ class: className })} {...props} />;
+});
+Table.displayName = 'Table';
+
+export const TableHead = React.forwardRef<React.ElementRef<typeof View>, TableHeadProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={tableHeadStyle({ class: className })} {...props} />;
+});
+TableHead.displayName = 'TableHead';
+
+export const TableBody = React.forwardRef<React.ElementRef<typeof View>, TableBodyProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={tableBodyStyle({ class: className })} {...props} />;
+});
+TableBody.displayName = 'TableBody';
+
+export const TableFooter = React.forwardRef<React.ElementRef<typeof View>, TableFooterProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={tableFooterStyle({ class: className })} {...props} />;
+});
+TableFooter.displayName = 'TableFooter';
+
+export const TableRow = React.forwardRef<React.ElementRef<typeof View>, TableRowProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={tableRowStyle({ class: className })} {...props} />;
+});
+TableRow.displayName = 'TableRow';
+
+export const TableCell = React.forwardRef<React.ElementRef<typeof View>, TableCellProps>(({ className, children, ...props }, ref) => {
+  return (
+    <View ref={ref} className={tableCellStyle({ class: className })} {...props}>
+      {typeof children === 'string' ? <Text className={tableCellTextStyle({})}>{children}</Text> : children}
+    </View>
+  );
+});
+TableCell.displayName = 'TableCell';
+
+export const TableHeaderCell = React.forwardRef<React.ElementRef<typeof View>, TableHeaderCellProps>(({ className, children, ...props }, ref) => {
+  return (
+    <View ref={ref} className={tableHeaderCellStyle({ class: className })} {...props}>
+      {typeof children === 'string' ? <Text className={tableHeaderCellTextStyle({})}>{children}</Text> : children}
+    </View>
+  );
+});
+TableHeaderCell.displayName = 'TableHeaderCell';
+
+export const TableCaption = React.forwardRef<React.ElementRef<typeof Text>, TableCaptionProps>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={tableCaptionStyle({ class: className })} {...props} />;
+});
+TableCaption.displayName = 'TableCaption';

package/src/table/types.ts

@@ -0,0 +1,10 @@
+import type { View, Text as RNText } from 'react-native';
+
+export interface TableProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableHeadProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableBodyProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableFooterProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableRowProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableCellProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableHeaderCellProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableCaptionProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }

package/src/tabs/index.ts

@@ -0,0 +1,18 @@
+export { Tabs, TabsProvider, useTabsContext } from './tabs';
+export { TabList } from './tab-list';
+export { Tab, TabProvider, useTabContext } from './tab';
+export { TabText } from './tab-text';
+export { TabPanels } from './tab-panels';
+export { TabPanel } from './tab-panel';
+
+export type {
+  TabsProps,
+  TabListProps,
+  TabProps,
+  TabTextProps,
+  TabPanelsProps,
+  TabPanelProps,
+  TabsVariant,
+  TabsSize,
+  TabsContextValue,
+} from './types';

package/src/tabs/styles.ts

@@ -0,0 +1,113 @@
+import { tv } from 'tailwind-variants';
+
+export const tabsStyle = tv({
+  base: 'w-full',
+});
+
+export const tabListStyle = tv({
+  base: 'flex-row',
+  variants: {
+    orientation: {
+      horizontal: 'flex-row',
+      vertical: 'flex-col',
+    },
+    variant: {
+      underlined: 'border-b border-outline-200',
+      outline: 'gap-1',
+      rounded: 'bg-background-100 rounded-lg p-0.5 gap-0.5',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'underlined',
+  },
+});
+
+export const tabStyle = tv({
+  base: 'items-center justify-center',
+  variants: {
+    size: {
+      sm: 'px-3 py-1.5',
+      md: 'px-4 py-2',
+      lg: 'px-5 py-2.5',
+    },
+    variant: {
+      underlined: '',
+      outline: '',
+      rounded: '',
+    },
+    active: {
+      true: '',
+      false: '',
+    },
+    isFitted: {
+      true: 'flex-1',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'underlined',
+      active: true,
+      class: 'border-b-2 border-primary-500',
+    },
+    {
+      variant: 'underlined',
+      active: false,
+      class: 'border-b-2 border-transparent',
+    },
+    {
+      variant: 'outline',
+      active: true,
+      class: 'border border-outline-300 rounded-md bg-background-0',
+    },
+    {
+      variant: 'outline',
+      active: false,
+      class: 'bg-transparent',
+    },
+    {
+      variant: 'rounded',
+      active: true,
+      class: 'bg-background-0 rounded-md shadow-hard-5',
+    },
+    {
+      variant: 'rounded',
+      active: false,
+      class: 'bg-transparent',
+    },
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'underlined',
+    active: false,
+    isFitted: false,
+  },
+});
+
+export const tabTextStyle = tv({
+  base: 'font-medium',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+    active: {
+      true: 'text-typography-900',
+      false: 'text-typography-500',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    active: false,
+  },
+});
+
+export const tabPanelsStyle = tv({
+  base: 'mt-3',
+});
+
+export const tabPanelStyle = tv({
+  base: '',
+});

package/src/tabs/tab-list.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useTabsContext } from './tabs';
+import type { TabListProps } from './types';
+import { tabListStyle } from './styles';
+
+export const TabList = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TabListProps
+>(({ className, children, ...props }, ref) => {
+  const { orientation, variant } = useTabsContext();
+
+  return (
+    <View
+      ref={ref}
+      className={tabListStyle({ orientation, variant, class: className })}
+      {...props}
+    >
+      {React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { _index: index } as any);
+        }
+        return child;
+      })}
+    </View>
+  );
+});
+
+TabList.displayName = 'TabList';

package/src/tabs/tab-panel.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useTabsContext } from './tabs';
+import type { TabPanelProps } from './types';
+import { tabPanelStyle } from './styles';
+
+export const TabPanel = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TabPanelProps
+>(({ className, index, children, ...props }, ref) => {
+  const { selectedIndex } = useTabsContext();
+
+  if (index !== selectedIndex) {
+    return null;
+  }
+
+  return (
+    <View
+      ref={ref}
+      className={tabPanelStyle({ class: className })}
+      accessibilityRole="summary"
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+
+TabPanel.displayName = 'TabPanel';

package/src/tabs/tab-panels.tsx

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

package/src/tabs/tab-text.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useTabsContext } from './tabs';
+import { useTabContext } from './tab';
+import type { TabTextProps } from './types';
+import { tabTextStyle } from './styles';
+
+export const TabText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  TabTextProps
+>(({ className, children, ...props }, ref) => {
+  const { size } = useTabsContext();
+  const { isActive } = useTabContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={tabTextStyle({ size, active: isActive, class: className })}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
+
+TabText.displayName = 'TabText';

package/src/tabs/tab.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import { useTabsContext } from './tabs';
+import type { TabProps } from './types';
+import { tabStyle } from './styles';
+
+export interface TabContextValue {
+  isActive: boolean;
+}
+
+export const [TabProvider, useTabContext] =
+  createComponentContext<TabContextValue>('Tab');
+
+export const Tab = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  TabProps
+>(({ className, _index = 0, children, onPress, ...props }, ref) => {
+  const { selectedIndex, onChange, variant, size, isFitted } =
+    useTabsContext();
+
+  const isActive = _index === selectedIndex;
+
+  const handlePress = React.useCallback(
+    (e: any) => {
+      onChange(_index);
+      onPress?.(e);
+    },
+    [_index, onChange, onPress],
+  );
+
+  return (
+    <TabProvider value={{ isActive }}>
+      <Pressable
+        ref={ref}
+        className={tabStyle({
+          variant,
+          size,
+          active: isActive,
+          isFitted,
+          class: className,
+        })}
+        onPress={handlePress}
+        accessibilityRole="tab"
+        accessibilityState={{ selected: isActive }}
+        {...props}
+      >
+        {typeof children === 'function'
+          ? children({ pressed: false } as any)
+          : children}
+      </Pressable>
+    </TabProvider>
+  );
+});
+
+Tab.displayName = 'Tab';