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

package/src/checkbox/checkbox.tsx

@@ -1,86 +1,86 @@
-import React, { useState } from 'react';
-import { Pressable } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import { useFormControlContext } from '../form-control/form-control';
-import { useCheckboxGroupContext } from './checkbox-group';
-import type { CheckboxProps, CheckboxContextValue } from './types';
-import { checkboxStyle } from './styles';
-
-export const [CheckboxProvider, useCheckboxContext] =
-  createComponentContext<CheckboxContextValue>('Checkbox');
-
-export const Checkbox = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  CheckboxProps
->(
-  (
-    {
-      className,
-      value,
-      isChecked: isCheckedProp,
-      defaultIsChecked = false,
-      onChange,
-      isDisabled: isDisabledProp,
-      isInvalid: isInvalidProp,
-      size: sizeProp,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [internalChecked, setInternalChecked] = useState(defaultIsChecked);
-    const groupContext = useCheckboxGroupContext();
-    const formControl = useFormControlContext();
-
-    const size = sizeProp ?? groupContext?.size ?? formControl?.size ?? 'md';
-    const isDisabled =
-      isDisabledProp ??
-      groupContext?.isDisabled ??
-      formControl?.isDisabled ??
-      false;
-    const isInvalid =
-      isInvalidProp ??
-      groupContext?.isInvalid ??
-      formControl?.isInvalid ??
-      false;
-
-    // Determine checked state
-    let isChecked: boolean;
-    if (groupContext) {
-      isChecked = groupContext.values.includes(value);
-    } else if (isCheckedProp !== undefined) {
-      isChecked = isCheckedProp;
-    } else {
-      isChecked = internalChecked;
-    }
-
-    const handlePress = () => {
-      if (isDisabled) return;
-
-      if (groupContext) {
-        groupContext.onChange(value);
-      } else if (isCheckedProp === undefined) {
-        setInternalChecked(!isChecked);
-      }
-      onChange?.(!isChecked);
-    };
-
-    return (
-      <CheckboxProvider value={{ isChecked, isDisabled, isInvalid, size }}>
-        <Pressable
-          ref={ref}
-          role="checkbox"
-          aria-checked={isChecked}
-          disabled={isDisabled}
-          onPress={handlePress}
-          className={checkboxStyle({ class: className })}
-          {...props}
-        >
-          {children}
-        </Pressable>
-      </CheckboxProvider>
-    );
-  },
-);
-
-Checkbox.displayName = 'Checkbox';
+import React, { useState } from 'react';
+import { Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import { useFormControlContext } from '../form-control/form-control';
+import { useCheckboxGroupContext } from './checkbox-group';
+import type { CheckboxProps, CheckboxContextValue } from './types';
+import { checkboxStyle } from './styles';
+
+export const [CheckboxProvider, useCheckboxContext] =
+  createComponentContext<CheckboxContextValue>('Checkbox');
+
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  CheckboxProps
+>(
+  (
+    {
+      className,
+      value,
+      isChecked: isCheckedProp,
+      defaultIsChecked = false,
+      onChange,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      size: sizeProp,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalChecked, setInternalChecked] = useState(defaultIsChecked);
+    const groupContext = useCheckboxGroupContext();
+    const formControl = useFormControlContext();
+
+    const size = sizeProp ?? groupContext?.size ?? formControl?.size ?? 'md';
+    const isDisabled =
+      isDisabledProp ??
+      groupContext?.isDisabled ??
+      formControl?.isDisabled ??
+      false;
+    const isInvalid =
+      isInvalidProp ??
+      groupContext?.isInvalid ??
+      formControl?.isInvalid ??
+      false;
+
+    // Determine checked state
+    let isChecked: boolean;
+    if (groupContext) {
+      isChecked = groupContext.values.includes(value);
+    } else if (isCheckedProp !== undefined) {
+      isChecked = isCheckedProp;
+    } else {
+      isChecked = internalChecked;
+    }
+
+    const handlePress = () => {
+      if (isDisabled) return;
+
+      if (groupContext) {
+        groupContext.onChange(value);
+      } else if (isCheckedProp === undefined) {
+        setInternalChecked(!isChecked);
+      }
+      onChange?.(!isChecked);
+    };
+
+    return (
+      <CheckboxProvider value={{ isChecked, isDisabled, isInvalid, size }}>
+        <Pressable
+          ref={ref}
+          role="checkbox"
+          aria-checked={isChecked}
+          disabled={isDisabled}
+          onPress={handlePress}
+          className={checkboxStyle({ class: className })}
+          {...props}
+        >
+          {children}
+        </Pressable>
+      </CheckboxProvider>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/checkbox/index.ts

@@ -1,14 +1,14 @@
-export { CheckboxGroup } from './checkbox-group';
-export { Checkbox } from './checkbox';
-export { CheckboxIndicator } from './checkbox-indicator';
-export { CheckboxIcon } from './checkbox-icon';
-export { CheckboxLabel } from './checkbox-label';
-export type {
-  CheckboxGroupProps,
-  CheckboxGroupContextValue,
-  CheckboxProps,
-  CheckboxContextValue,
-  CheckboxIndicatorProps,
-  CheckboxIconProps,
-  CheckboxLabelProps,
-} from './types';
+export { CheckboxGroup } from './checkbox-group';
+export { Checkbox } from './checkbox';
+export { CheckboxIndicator } from './checkbox-indicator';
+export { CheckboxIcon } from './checkbox-icon';
+export { CheckboxLabel } from './checkbox-label';
+export type {
+  CheckboxGroupProps,
+  CheckboxGroupContextValue,
+  CheckboxProps,
+  CheckboxContextValue,
+  CheckboxIndicatorProps,
+  CheckboxIconProps,
+  CheckboxLabelProps,
+} from './types';

package/src/checkbox/styles.ts

@@ -1,69 +1,69 @@
-import { tv } from 'tailwind-variants';
-
-export const checkboxGroupStyle = tv({
-  base: 'gap-2',
-});
-
-export const checkboxStyle = tv({
-  base: 'flex-row items-center gap-2',
-});
-
-export const checkboxIndicatorStyle = tv({
-  base: 'border-2 border-outline-400 rounded items-center justify-center',
-  variants: {
-    size: {
-      xs: 'h-4 w-4',
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-6 w-6',
-      xl: 'h-6 w-6',
-    },
-    isChecked: {
-      true: 'bg-primary-500 border-primary-500',
-    },
-    isInvalid: {
-      true: 'border-error-500',
-    },
-    isDisabled: {
-      true: 'opacity-40',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const checkboxIconStyle = tv({
-  base: 'text-typography-0',
-  variants: {
-    size: {
-      xs: 'h-3 w-3',
-      sm: 'h-3 w-3',
-      md: 'h-3.5 w-3.5',
-      lg: 'h-4 w-4',
-      xl: 'h-4 w-4',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const checkboxLabelStyle = tv({
-  base: 'text-typography-900',
-  variants: {
-    size: {
-      xs: 'text-xs',
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
-      xl: 'text-xl',
-    },
-    isDisabled: {
-      true: 'opacity-40',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const checkboxGroupStyle = tv({
+  base: 'gap-2',
+});
+
+export const checkboxStyle = tv({
+  base: 'flex-row items-center gap-2',
+});
+
+export const checkboxIndicatorStyle = tv({
+  base: 'border-2 border-outline-400 rounded items-center justify-center',
+  variants: {
+    size: {
+      xs: 'h-4 w-4',
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-6 w-6',
+      xl: 'h-6 w-6',
+    },
+    isChecked: {
+      true: 'bg-primary-500 border-primary-500',
+    },
+    isInvalid: {
+      true: 'border-error-500',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const checkboxIconStyle = tv({
+  base: 'text-typography-0',
+  variants: {
+    size: {
+      xs: 'h-3 w-3',
+      sm: 'h-3 w-3',
+      md: 'h-3.5 w-3.5',
+      lg: 'h-4 w-4',
+      xl: 'h-4 w-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const checkboxLabelStyle = tv({
+  base: 'text-typography-900',
+  variants: {
+    size: {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/checkbox/types.ts

@@ -1,55 +1,55 @@
-import type { View, Text as RNText, Pressable } from 'react-native';
-import type { Size } from '../utils/types';
-
-export interface CheckboxGroupContextValue {
-  values: string[];
-  onChange: (value: string) => void;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  size?: Size;
-}
-
-export interface CheckboxContextValue {
-  isChecked: boolean;
-  isDisabled: boolean;
-  isInvalid: boolean;
-  size: Size;
-}
-
-export interface CheckboxGroupProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  value?: string[];
-  defaultValue?: string[];
-  onChange?: (values: string[]) => void;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  size?: Size;
-}
-
-export interface CheckboxProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-  value: string;
-  isChecked?: boolean;
-  defaultIsChecked?: boolean;
-  onChange?: (isChecked: boolean) => void;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  size?: Size;
-}
-
-export interface CheckboxIndicatorProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface CheckboxIconProps {
-  as?: React.ElementType;
-  className?: string;
-}
-
-export interface CheckboxLabelProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
+import type { View, Text as RNText, Pressable } from 'react-native';
+import type { Size } from '../utils/types';
+
+export interface CheckboxGroupContextValue {
+  values: string[];
+  onChange: (value: string) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  size?: Size;
+}
+
+export interface CheckboxContextValue {
+  isChecked: boolean;
+  isDisabled: boolean;
+  isInvalid: boolean;
+  size: Size;
+}
+
+export interface CheckboxGroupProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (values: string[]) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  size?: Size;
+}
+
+export interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  value: string;
+  isChecked?: boolean;
+  defaultIsChecked?: boolean;
+  onChange?: (isChecked: boolean) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  size?: Size;
+}
+
+export interface CheckboxIndicatorProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface CheckboxIconProps {
+  as?: React.ElementType;
+  className?: string;
+}
+
+export interface CheckboxLabelProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}

package/src/circular-progress/circular-progress.tsx

@@ -1,82 +1,82 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { CircularProgressProps, CircularProgressLabelProps, CircularProgressContextValue } from './types';
-import { circularProgressStyle, circularProgressLabelStyle } from './styles';
-import { BRAND_COLOR } from '../utils/brand';
-
-export const [CircularProgressProvider, useCircularProgressContext] =
-  createComponentContext<CircularProgressContextValue>('CircularProgress');
-
-const sizeMap = { sm: 32, md: 48, lg: 64, xl: 96 };
-const strokeMap = { sm: 3, md: 4, lg: 5, xl: 6 };
-
-export const CircularProgress = React.forwardRef<
-  React.ElementRef<typeof View>,
-  CircularProgressProps
->(({ className, value = 0, size = 'md', children, ...props }, ref) => {
-  const clampedValue = Math.min(100, Math.max(0, value));
-  const dim = sizeMap[size];
-  const stroke = strokeMap[size];
-
-
-  return (
-    <CircularProgressProvider value={{ value: clampedValue, size }}>
-      <View
-        ref={ref}
-        className={circularProgressStyle({ size, class: className })}
-        accessibilityRole="progressbar"
-        accessibilityValue={{ min: 0, max: 100, now: clampedValue }}
-        {...props}
-      >
-        <View style={{ width: dim, height: dim, transform: [{ rotate: '-90deg' }] }}>
-          <View
-            style={{
-              width: dim,
-              height: dim,
-              borderRadius: dim / 2,
-              borderWidth: stroke,
-              borderColor: '#E5E7EB',
-            }}
-          />
-          <View
-            style={{
-              position: 'absolute',
-              width: dim,
-              height: dim,
-              borderRadius: dim / 2,
-              borderWidth: stroke,
-              borderColor: 'transparent',
-              borderTopColor: BRAND_COLOR,
-              borderRightColor: clampedValue > 25 ? BRAND_COLOR : 'transparent',
-              borderBottomColor: clampedValue > 50 ? BRAND_COLOR : 'transparent',
-              borderLeftColor: clampedValue > 75 ? BRAND_COLOR : 'transparent',
-            }}
-          />
-        </View>
-        {children}
-      </View>
-    </CircularProgressProvider>
-  );
-});
-
-CircularProgress.displayName = 'CircularProgress';
-
-export const CircularProgressLabel = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  CircularProgressLabelProps
->(({ className, children, ...props }, ref) => {
-  const { value, size } = useCircularProgressContext();
-
-  return (
-    <Text
-      ref={ref}
-      className={circularProgressLabelStyle({ size, class: className })}
-      {...props}
-    >
-      {children ?? `${value}%`}
-    </Text>
-  );
-});
-
-CircularProgressLabel.displayName = 'CircularProgressLabel';
+import React from 'react';
+import { View, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { CircularProgressProps, CircularProgressLabelProps, CircularProgressContextValue } from './types';
+import { circularProgressStyle, circularProgressLabelStyle } from './styles';
+import { BRAND_COLOR } from '../utils/brand';
+
+export const [CircularProgressProvider, useCircularProgressContext] =
+  createComponentContext<CircularProgressContextValue>('CircularProgress');
+
+const sizeMap = { sm: 32, md: 48, lg: 64, xl: 96 };
+const strokeMap = { sm: 3, md: 4, lg: 5, xl: 6 };
+
+export const CircularProgress = React.forwardRef<
+  React.ElementRef<typeof View>,
+  CircularProgressProps
+>(({ className, value = 0, size = 'md', children, ...props }, ref) => {
+  const clampedValue = Math.min(100, Math.max(0, value));
+  const dim = sizeMap[size];
+  const stroke = strokeMap[size];
+
+
+  return (
+    <CircularProgressProvider value={{ value: clampedValue, size }}>
+      <View
+        ref={ref}
+        className={circularProgressStyle({ size, class: className })}
+        accessibilityRole="progressbar"
+        accessibilityValue={{ min: 0, max: 100, now: clampedValue }}
+        {...props}
+      >
+        <View style={{ width: dim, height: dim, transform: [{ rotate: '-90deg' }] }}>
+          <View
+            style={{
+              width: dim,
+              height: dim,
+              borderRadius: dim / 2,
+              borderWidth: stroke,
+              borderColor: '#E5E7EB',
+            }}
+          />
+          <View
+            style={{
+              position: 'absolute',
+              width: dim,
+              height: dim,
+              borderRadius: dim / 2,
+              borderWidth: stroke,
+              borderColor: 'transparent',
+              borderTopColor: BRAND_COLOR,
+              borderRightColor: clampedValue > 25 ? BRAND_COLOR : 'transparent',
+              borderBottomColor: clampedValue > 50 ? BRAND_COLOR : 'transparent',
+              borderLeftColor: clampedValue > 75 ? BRAND_COLOR : 'transparent',
+            }}
+          />
+        </View>
+        {children}
+      </View>
+    </CircularProgressProvider>
+  );
+});
+
+CircularProgress.displayName = 'CircularProgress';
+
+export const CircularProgressLabel = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  CircularProgressLabelProps
+>(({ className, children, ...props }, ref) => {
+  const { value, size } = useCircularProgressContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={circularProgressLabelStyle({ size, class: className })}
+      {...props}
+    >
+      {children ?? `${value}%`}
+    </Text>
+  );
+});
+
+CircularProgressLabel.displayName = 'CircularProgressLabel';

package/src/circular-progress/index.ts

@@ -1,2 +1,2 @@
-export { CircularProgress, CircularProgressProvider, useCircularProgressContext, CircularProgressLabel } from './circular-progress';
-export type { CircularProgressProps, CircularProgressLabelProps, CircularProgressSize, CircularProgressContextValue } from './types';
+export { CircularProgress, CircularProgressProvider, useCircularProgressContext, CircularProgressLabel } from './circular-progress';
+export type { CircularProgressProps, CircularProgressLabelProps, CircularProgressSize, CircularProgressContextValue } from './types';