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

package/src/toast/toast.tsx

@@ -1,43 +1,43 @@
-import React from 'react';
-import { View } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { ToastProps, ToastStatus, ToastVariant } from './types';
-import { toastStyle } from './styles';
-
-export interface ToastItemContextValue {
-  status: ToastStatus;
-  variant: ToastVariant;
-}
-
-export const [ToastItemProvider, useToastItemContext] =
-  createComponentContext<ToastItemContextValue>('ToastItem');
-
-export const Toast = React.forwardRef<
-  React.ElementRef<typeof View>,
-  ToastProps
->(
-  (
-    {
-      className,
-      status = 'info',
-      variant = 'subtle',
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <ToastItemProvider value={{ status, variant }}>
-        <View
-          ref={ref}
-          className={toastStyle({ status, variant, class: className })}
-          {...props}
-        >
-          {children}
-        </View>
-      </ToastItemProvider>
-    );
-  },
-);
-
-Toast.displayName = 'Toast';
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { ToastProps, ToastStatus, ToastVariant } from './types';
+import { toastStyle } from './styles';
+
+export interface ToastItemContextValue {
+  status: ToastStatus;
+  variant: ToastVariant;
+}
+
+export const [ToastItemProvider, useToastItemContext] =
+  createComponentContext<ToastItemContextValue>('ToastItem');
+
+export const Toast = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ToastProps
+>(
+  (
+    {
+      className,
+      status = 'info',
+      variant = 'subtle',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <ToastItemProvider value={{ status, variant }}>
+        <View
+          ref={ref}
+          className={toastStyle({ status, variant, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </ToastItemProvider>
+    );
+  },
+);
+
+Toast.displayName = 'Toast';

package/src/toast/types.ts

@@ -1,50 +1,50 @@
-import type { View, Text as RNText } from 'react-native';
-
-export type ToastPlacement =
-  | 'top'
-  | 'top-right'
-  | 'top-left'
-  | 'bottom'
-  | 'bottom-right'
-  | 'bottom-left';
-
-export type ToastStatus = 'info' | 'success' | 'warning' | 'error';
-
-export type ToastVariant = 'solid' | 'subtle' | 'outline';
-
-export interface ToastConfig {
-  id: string;
-  title?: string;
-  description?: string;
-  status?: ToastStatus;
-  variant?: ToastVariant;
-  duration?: number;
-  placement?: ToastPlacement;
-  isClosable?: boolean;
-  render?: () => React.ReactNode;
-}
-
-export interface UseToastReturn {
-  show(config: Omit<ToastConfig, 'id'>): string;
-  close(id: string): void;
-  closeAll(): void;
-}
-
-export type ToastContextValue = UseToastReturn;
-
-export interface ToastProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  status?: ToastStatus;
-  variant?: ToastVariant;
-}
-
-export interface ToastTitleProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface ToastDescriptionProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
+import type { View, Text as RNText } from 'react-native';
+
+export type ToastPlacement =
+  | 'top'
+  | 'top-right'
+  | 'top-left'
+  | 'bottom'
+  | 'bottom-right'
+  | 'bottom-left';
+
+export type ToastStatus = 'info' | 'success' | 'warning' | 'error';
+
+export type ToastVariant = 'solid' | 'subtle' | 'outline';
+
+export interface ToastConfig {
+  id: string;
+  title?: string;
+  description?: string;
+  status?: ToastStatus;
+  variant?: ToastVariant;
+  duration?: number;
+  placement?: ToastPlacement;
+  isClosable?: boolean;
+  render?: () => React.ReactNode;
+}
+
+export interface UseToastReturn {
+  show(config: Omit<ToastConfig, 'id'>): string;
+  close(id: string): void;
+  closeAll(): void;
+}
+
+export type ToastContextValue = UseToastReturn;
+
+export interface ToastProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  status?: ToastStatus;
+  variant?: ToastVariant;
+}
+
+export interface ToastTitleProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface ToastDescriptionProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}

package/src/toast/use-toast.ts

@@ -1,7 +1,7 @@
-import { useToastContext } from './toast-provider';
-import type { UseToastReturn } from './types';
-
-export function useToast(): UseToastReturn {
-  const { show, close, closeAll } = useToastContext();
-  return { show, close, closeAll };
-}
+import { useToastContext } from './toast-provider';
+import type { UseToastReturn } from './types';
+
+export function useToast(): UseToastReturn {
+  const { show, close, closeAll } = useToastContext();
+  return { show, close, closeAll };
+}

package/src/toggle/index.ts

@@ -1,2 +1,2 @@
-export { Toggle } from './toggle';
-export type { ToggleProps, ToggleVariant, ToggleSize } from './types';
+export { Toggle } from './toggle';
+export type { ToggleProps, ToggleVariant, ToggleSize } from './types';

package/src/toggle/styles.ts

@@ -1,30 +1,30 @@
-import { tv } from 'tailwind-variants';
-
-export const toggleStyle = tv({
-  base: 'items-center justify-center rounded-lg',
-  variants: {
-    variant: {
-      outline: 'border border-outline-300 bg-transparent',
-      solid: 'bg-background-100',
-    },
-    size: {
-      sm: 'h-8 px-2.5',
-      md: 'h-10 px-3',
-      lg: 'h-12 px-4',
-    },
-    isPressed: {
-      true: '',
-    },
-    isDisabled: {
-      true: 'opacity-50',
-    },
-  },
-  compoundVariants: [
-    { variant: 'outline', isPressed: true, class: 'bg-primary-50 border-primary-500' },
-    { variant: 'solid', isPressed: true, class: 'bg-primary-500' },
-  ],
-  defaultVariants: {
-    variant: 'outline',
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const toggleStyle = tv({
+  base: 'items-center justify-center rounded-lg',
+  variants: {
+    variant: {
+      outline: 'border border-outline-300 bg-transparent',
+      solid: 'bg-background-100',
+    },
+    size: {
+      sm: 'h-8 px-2.5',
+      md: 'h-10 px-3',
+      lg: 'h-12 px-4',
+    },
+    isPressed: {
+      true: '',
+    },
+    isDisabled: {
+      true: 'opacity-50',
+    },
+  },
+  compoundVariants: [
+    { variant: 'outline', isPressed: true, class: 'bg-primary-50 border-primary-500' },
+    { variant: 'solid', isPressed: true, class: 'bg-primary-500' },
+  ],
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+});

package/src/toggle/toggle.tsx

@@ -1,25 +1,25 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import type { ToggleProps } from './types';
-import { toggleStyle } from './styles';
-
-export const Toggle = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  ToggleProps
->(({ className, variant, size, isPressed = false, onPressedChange, isDisabled, children, ...props }, ref) => {
-  return (
-    <Pressable
-      ref={ref}
-      disabled={isDisabled}
-      onPress={() => onPressedChange?.(!isPressed)}
-      className={toggleStyle({ variant, size, isPressed, isDisabled, class: className })}
-      accessibilityRole="button"
-      accessibilityState={{ selected: isPressed }}
-      {...props}
-    >
-      {children}
-    </Pressable>
-  );
-});
-
-Toggle.displayName = 'Toggle';
+import React from 'react';
+import { Pressable } from 'react-native';
+import type { ToggleProps } from './types';
+import { toggleStyle } from './styles';
+
+export const Toggle = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ToggleProps
+>(({ className, variant, size, isPressed = false, onPressedChange, isDisabled, children, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      disabled={isDisabled}
+      onPress={() => onPressedChange?.(!isPressed)}
+      className={toggleStyle({ variant, size, isPressed, isDisabled, class: className })}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isPressed }}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+Toggle.displayName = 'Toggle';

package/src/toggle/types.ts

@@ -1,15 +1,15 @@
-import type { Pressable } from 'react-native';
-
-export type ToggleVariant = 'outline' | 'solid';
-export type ToggleSize = 'sm' | 'md' | 'lg';
-
-export interface ToggleProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'children'> {
-  className?: string;
-  variant?: ToggleVariant;
-  size?: ToggleSize;
-  isPressed?: boolean;
-  onPressedChange?: (pressed: boolean) => void;
-  isDisabled?: boolean;
-  children: React.ReactNode;
-}
+import type { Pressable } from 'react-native';
+
+export type ToggleVariant = 'outline' | 'solid';
+export type ToggleSize = 'sm' | 'md' | 'lg';
+
+export interface ToggleProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'children'> {
+  className?: string;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+  isPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  isDisabled?: boolean;
+  children: React.ReactNode;
+}

package/src/toggle-group/index.ts

@@ -1,2 +1,2 @@
-export { ToggleGroup, ToggleGroupProvider, useToggleGroupContext, ToggleGroupItem } from './toggle-group';
-export type { ToggleGroupProps, ToggleGroupItemProps, ToggleGroupType, ToggleGroupVariant, ToggleGroupSize, ToggleGroupContextValue } from './types';
+export { ToggleGroup, ToggleGroupProvider, useToggleGroupContext, ToggleGroupItem } from './toggle-group';
+export type { ToggleGroupProps, ToggleGroupItemProps, ToggleGroupType, ToggleGroupVariant, ToggleGroupSize, ToggleGroupContextValue } from './types';

package/src/toggle-group/styles.ts

@@ -1,35 +1,35 @@
-import { tv } from 'tailwind-variants';
-
-export const toggleGroupStyle = tv({
-  base: 'flex-row items-center rounded-lg border border-outline-200 overflow-hidden',
-  variants: {},
-});
-
-export const toggleGroupItemStyle = tv({
-  base: 'items-center justify-center border-r border-outline-200 last:border-r-0',
-  variants: {
-    variant: {
-      outline: 'bg-transparent',
-      solid: 'bg-background-50',
-    },
-    size: {
-      sm: 'h-8 px-2.5',
-      md: 'h-10 px-3',
-      lg: 'h-12 px-4',
-    },
-    isSelected: {
-      true: '',
-    },
-    isDisabled: {
-      true: 'opacity-50',
-    },
-  },
-  compoundVariants: [
-    { variant: 'outline', isSelected: true, class: 'bg-primary-50' },
-    { variant: 'solid', isSelected: true, class: 'bg-primary-500' },
-  ],
-  defaultVariants: {
-    variant: 'outline',
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const toggleGroupStyle = tv({
+  base: 'flex-row items-center rounded-lg border border-outline-200 overflow-hidden',
+  variants: {},
+});
+
+export const toggleGroupItemStyle = tv({
+  base: 'items-center justify-center border-r border-outline-200 last:border-r-0',
+  variants: {
+    variant: {
+      outline: 'bg-transparent',
+      solid: 'bg-background-50',
+    },
+    size: {
+      sm: 'h-8 px-2.5',
+      md: 'h-10 px-3',
+      lg: 'h-12 px-4',
+    },
+    isSelected: {
+      true: '',
+    },
+    isDisabled: {
+      true: 'opacity-50',
+    },
+  },
+  compoundVariants: [
+    { variant: 'outline', isSelected: true, class: 'bg-primary-50' },
+    { variant: 'solid', isSelected: true, class: 'bg-primary-500' },
+  ],
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+});

package/src/toggle-group/toggle-group.tsx

@@ -1,60 +1,60 @@
-import React from 'react';
-import { View, Pressable } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { ToggleGroupProps, ToggleGroupItemProps, ToggleGroupContextValue } from './types';
-import { toggleGroupStyle, toggleGroupItemStyle } from './styles';
-
-export const [ToggleGroupProvider, useToggleGroupContext] =
-  createComponentContext<ToggleGroupContextValue>('ToggleGroup');
-
-export const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof View>,
-  ToggleGroupProps
->(({ className, type = 'single', value, onValueChange, variant = 'outline', size = 'md', children, ...props }, ref) => {
-  const normalizedValue = Array.isArray(value) ? value : value ? [value] : [];
-
-  const handleValueChange = (itemValue: string) => {
-    if (type === 'single') {
-      onValueChange?.(itemValue);
-    } else {
-      const newValue = normalizedValue.includes(itemValue)
-        ? normalizedValue.filter((v) => v !== itemValue)
-        : [...normalizedValue, itemValue];
-      onValueChange?.(newValue);
-    }
-  };
-
-  return (
-    <ToggleGroupProvider value={{ type, value: normalizedValue, onValueChange: handleValueChange, variant, size }}>
-      <View ref={ref} className={toggleGroupStyle({ class: className })} {...props}>
-        {children}
-      </View>
-    </ToggleGroupProvider>
-  );
-});
-
-ToggleGroup.displayName = 'ToggleGroup';
-
-export const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  ToggleGroupItemProps
->(({ className, value, isDisabled, children, ...props }, ref) => {
-  const { value: groupValue, onValueChange, variant, size } = useToggleGroupContext();
-  const isSelected = groupValue.includes(value);
-
-  return (
-    <Pressable
-      ref={ref}
-      disabled={isDisabled}
-      onPress={() => onValueChange(value)}
-      className={toggleGroupItemStyle({ variant, size, isSelected, isDisabled, class: className })}
-      accessibilityRole="button"
-      accessibilityState={{ selected: isSelected }}
-      {...props}
-    >
-      {children}
-    </Pressable>
-  );
-});
-
-ToggleGroupItem.displayName = 'ToggleGroupItem';
+import React from 'react';
+import { View, Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { ToggleGroupProps, ToggleGroupItemProps, ToggleGroupContextValue } from './types';
+import { toggleGroupStyle, toggleGroupItemStyle } from './styles';
+
+export const [ToggleGroupProvider, useToggleGroupContext] =
+  createComponentContext<ToggleGroupContextValue>('ToggleGroup');
+
+export const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ToggleGroupProps
+>(({ className, type = 'single', value, onValueChange, variant = 'outline', size = 'md', children, ...props }, ref) => {
+  const normalizedValue = Array.isArray(value) ? value : value ? [value] : [];
+
+  const handleValueChange = (itemValue: string) => {
+    if (type === 'single') {
+      onValueChange?.(itemValue);
+    } else {
+      const newValue = normalizedValue.includes(itemValue)
+        ? normalizedValue.filter((v) => v !== itemValue)
+        : [...normalizedValue, itemValue];
+      onValueChange?.(newValue);
+    }
+  };
+
+  return (
+    <ToggleGroupProvider value={{ type, value: normalizedValue, onValueChange: handleValueChange, variant, size }}>
+      <View ref={ref} className={toggleGroupStyle({ class: className })} {...props}>
+        {children}
+      </View>
+    </ToggleGroupProvider>
+  );
+});
+
+ToggleGroup.displayName = 'ToggleGroup';
+
+export const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ToggleGroupItemProps
+>(({ className, value, isDisabled, children, ...props }, ref) => {
+  const { value: groupValue, onValueChange, variant, size } = useToggleGroupContext();
+  const isSelected = groupValue.includes(value);
+
+  return (
+    <Pressable
+      ref={ref}
+      disabled={isDisabled}
+      onPress={() => onValueChange(value)}
+      className={toggleGroupItemStyle({ variant, size, isSelected, isDisabled, class: className })}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isSelected }}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+ToggleGroupItem.displayName = 'ToggleGroupItem';

package/src/toggle-group/types.ts

@@ -1,29 +1,29 @@
-import type { View, Pressable } from 'react-native';
-
-export type ToggleGroupType = 'single' | 'multiple';
-export type ToggleGroupVariant = 'outline' | 'solid';
-export type ToggleGroupSize = 'sm' | 'md' | 'lg';
-
-export interface ToggleGroupContextValue {
-  type: ToggleGroupType;
-  value: string[];
-  onValueChange: (value: string) => void;
-  variant: ToggleGroupVariant;
-  size: ToggleGroupSize;
-}
-
-export interface ToggleGroupProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  type?: ToggleGroupType;
-  value?: string | string[];
-  onValueChange?: (value: string | string[]) => void;
-  variant?: ToggleGroupVariant;
-  size?: ToggleGroupSize;
-}
-
-export interface ToggleGroupItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'children'> {
-  className?: string;
-  value: string;
-  isDisabled?: boolean;
-  children: React.ReactNode;
-}
+import type { View, Pressable } from 'react-native';
+
+export type ToggleGroupType = 'single' | 'multiple';
+export type ToggleGroupVariant = 'outline' | 'solid';
+export type ToggleGroupSize = 'sm' | 'md' | 'lg';
+
+export interface ToggleGroupContextValue {
+  type: ToggleGroupType;
+  value: string[];
+  onValueChange: (value: string) => void;
+  variant: ToggleGroupVariant;
+  size: ToggleGroupSize;
+}
+
+export interface ToggleGroupProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  type?: ToggleGroupType;
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  variant?: ToggleGroupVariant;
+  size?: ToggleGroupSize;
+}
+
+export interface ToggleGroupItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'children'> {
+  className?: string;
+  value: string;
+  isDisabled?: boolean;
+  children: React.ReactNode;
+}

package/src/tooltip/index.ts

@@ -1,11 +1,11 @@
-export { Tooltip } from './tooltip';
-export { TooltipContent } from './tooltip-content';
-export { TooltipText } from './tooltip-text';
-
-export type {
-  TooltipProps,
-  TooltipContentProps,
-  TooltipTextProps,
-  TooltipPlacement,
-  TooltipContextValue,
-} from './types';
+export { Tooltip } from './tooltip';
+export { TooltipContent } from './tooltip-content';
+export { TooltipText } from './tooltip-text';
+
+export type {
+  TooltipProps,
+  TooltipContentProps,
+  TooltipTextProps,
+  TooltipPlacement,
+  TooltipContextValue,
+} from './types';

package/src/tooltip/styles.ts

@@ -1,9 +1,9 @@
-import { tv } from 'tailwind-variants';
-
-export const tooltipContentStyle = tv({
-  base: 'bg-background-950 rounded-md px-3 py-1.5 shadow-hard-2 min-w-max',
-});
-
-export const tooltipTextStyle = tv({
-  base: 'text-typography-0 text-xs',
-});
+import { tv } from 'tailwind-variants';
+
+export const tooltipContentStyle = tv({
+  base: 'bg-background-950 rounded-md px-3 py-1.5 shadow-hard-2 min-w-max',
+});
+
+export const tooltipTextStyle = tv({
+  base: 'text-typography-0 text-xs',
+});