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

package/src/textarea/styles.ts

@@ -1,37 +1,37 @@
-import { tv } from 'tailwind-variants';
-
-export const textareaStyle = tv({
-  base: 'text-typography-900 web:outline-none',
-  variants: {
-    variant: {
-      outline: 'border border-outline-300 rounded-md',
-      filled: 'border border-transparent rounded-md bg-background-50',
-      underlined: 'border-b border-outline-300 rounded-none',
-    },
-    size: {
-      sm: 'min-h-[80px] text-sm p-2',
-      md: 'min-h-[100px] text-base p-3',
-      lg: 'min-h-[120px] text-lg p-3',
-    },
-    isFocused: {
-      true: 'border-primary-500',
-    },
-    isInvalid: {
-      true: 'border-error-500',
-    },
-    isDisabled: {
-      true: 'opacity-40',
-    },
-  },
-  compoundVariants: [
-    {
-      isFocused: true,
-      isInvalid: true,
-      class: 'border-error-500',
-    },
-  ],
-  defaultVariants: {
-    variant: 'outline',
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const textareaStyle = tv({
+  base: 'text-typography-900 web:outline-none',
+  variants: {
+    variant: {
+      outline: 'border border-outline-300 rounded-md',
+      filled: 'border border-transparent rounded-md bg-background-50',
+      underlined: 'border-b border-outline-300 rounded-none',
+    },
+    size: {
+      sm: 'min-h-[80px] text-sm p-2',
+      md: 'min-h-[100px] text-base p-3',
+      lg: 'min-h-[120px] text-lg p-3',
+    },
+    isFocused: {
+      true: 'border-primary-500',
+    },
+    isInvalid: {
+      true: 'border-error-500',
+    },
+    isDisabled: {
+      true: 'opacity-40',
+    },
+  },
+  compoundVariants: [
+    {
+      isFocused: true,
+      isInvalid: true,
+      class: 'border-error-500',
+    },
+  ],
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+});

package/src/textarea/textarea.tsx

@@ -1,68 +1,68 @@
-import React, { useState } from 'react';
-import { TextInput } from 'react-native';
-import { useFormControlContext } from '../form-control/form-control';
-import type { TextareaProps } from './types';
-import { textareaStyle } from './styles';
-
-export const Textarea = React.forwardRef<
-  React.ElementRef<typeof TextInput>,
-  TextareaProps
->(
-  (
-    {
-      className,
-      variant = 'outline',
-      size = 'md',
-      isDisabled: isDisabledProp,
-      isInvalid: isInvalidProp,
-      isReadOnly: isReadOnlyProp,
-      onFocus: onFocusProp,
-      onBlur: onBlurProp,
-      ...props
-    },
-    ref,
-  ) => {
-    const [isFocused, setIsFocused] = useState(false);
-    const formControl = useFormControlContext();
-
-    const isDisabled = isDisabledProp ?? formControl?.isDisabled ?? false;
-    const isInvalid = isInvalidProp ?? formControl?.isInvalid ?? false;
-    const isReadOnly = isReadOnlyProp ?? formControl?.isReadOnly ?? false;
-
-    const handleFocus = (
-      e: Parameters<NonNullable<TextareaProps['onFocus']>>[0],
-    ) => {
-      setIsFocused(true);
-      onFocusProp?.(e);
-    };
-
-    const handleBlur = (
-      e: Parameters<NonNullable<TextareaProps['onBlur']>>[0],
-    ) => {
-      setIsFocused(false);
-      onBlurProp?.(e);
-    };
-
-    return (
-      <TextInput
-        ref={ref}
-        multiline
-        textAlignVertical="top"
-        editable={!isDisabled && !isReadOnly}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        className={textareaStyle({
-          variant,
-          size,
-          isFocused,
-          isInvalid,
-          isDisabled,
-          class: className,
-        })}
-        {...props}
-      />
-    );
-  },
-);
-
-Textarea.displayName = 'Textarea';
+import React, { useState } from 'react';
+import { TextInput } from 'react-native';
+import { useFormControlContext } from '../form-control/form-control';
+import type { TextareaProps } from './types';
+import { textareaStyle } from './styles';
+
+export const Textarea = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  TextareaProps
+>(
+  (
+    {
+      className,
+      variant = 'outline',
+      size = 'md',
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      onFocus: onFocusProp,
+      onBlur: onBlurProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const formControl = useFormControlContext();
+
+    const isDisabled = isDisabledProp ?? formControl?.isDisabled ?? false;
+    const isInvalid = isInvalidProp ?? formControl?.isInvalid ?? false;
+    const isReadOnly = isReadOnlyProp ?? formControl?.isReadOnly ?? false;
+
+    const handleFocus = (
+      e: Parameters<NonNullable<TextareaProps['onFocus']>>[0],
+    ) => {
+      setIsFocused(true);
+      onFocusProp?.(e);
+    };
+
+    const handleBlur = (
+      e: Parameters<NonNullable<TextareaProps['onBlur']>>[0],
+    ) => {
+      setIsFocused(false);
+      onBlurProp?.(e);
+    };
+
+    return (
+      <TextInput
+        ref={ref}
+        multiline
+        textAlignVertical="top"
+        editable={!isDisabled && !isReadOnly}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        className={textareaStyle({
+          variant,
+          size,
+          isFocused,
+          isInvalid,
+          isDisabled,
+          class: className,
+        })}
+        {...props}
+      />
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';

package/src/textarea/types.ts

@@ -1,14 +1,14 @@
-import type { TextInput } from 'react-native';
-
-export type TextareaVariant = 'outline' | 'filled' | 'underlined';
-export type TextareaSize = 'sm' | 'md' | 'lg';
-
-export interface TextareaProps
-  extends React.ComponentPropsWithoutRef<typeof TextInput> {
-  className?: string;
-  variant?: TextareaVariant;
-  size?: TextareaSize;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  isReadOnly?: boolean;
-}
+import type { TextInput } from 'react-native';
+
+export type TextareaVariant = 'outline' | 'filled' | 'underlined';
+export type TextareaSize = 'sm' | 'md' | 'lg';
+
+export interface TextareaProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+  variant?: TextareaVariant;
+  size?: TextareaSize;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+}

package/src/timeline/index.ts

@@ -1,2 +1,2 @@
-export { Timeline, TimelineItem, TimelineDot, TimelineSeparator, TimelineConnector, TimelineContent } from './timeline';
-export type { TimelineProps, TimelineItemProps, TimelineDotProps, TimelineSeparatorProps, TimelineConnectorProps, TimelineContentProps, TimelineVariant } from './types';
+export { Timeline, TimelineItem, TimelineDot, TimelineSeparator, TimelineConnector, TimelineContent } from './timeline';
+export type { TimelineProps, TimelineItemProps, TimelineDotProps, TimelineSeparatorProps, TimelineConnectorProps, TimelineContentProps, TimelineVariant } from './types';

package/src/timeline/styles.ts

@@ -1,57 +1,57 @@
-import { tv } from 'tailwind-variants';
-
-export const timelineStyle = tv({
-  base: 'gap-0',
-  variants: {},
-});
-
-export const timelineItemStyle = tv({
-  base: 'flex-row gap-3 items-stretch',
-  variants: {},
-});
-
-export const timelineSeparatorStyle = tv({
-  base: 'items-center',
-  variants: {},
-});
-
-export const timelineDotStyle = tv({
-  base: 'h-3 w-3 rounded-full',
-  variants: {
-    variant: {
-      solid: '',
-      outline: 'bg-transparent border-2',
-    },
-    color: {
-      primary: '', success: '', error: '', warning: '', info: '', muted: '',
-    },
-  },
-  compoundVariants: [
-    { color: 'primary', variant: 'solid', class: 'bg-primary-500' },
-    { color: 'primary', variant: 'outline', class: 'border-primary-500' },
-    { color: 'success', variant: 'solid', class: 'bg-success-500' },
-    { color: 'success', variant: 'outline', class: 'border-success-500' },
-    { color: 'error', variant: 'solid', class: 'bg-error-500' },
-    { color: 'error', variant: 'outline', class: 'border-error-500' },
-    { color: 'warning', variant: 'solid', class: 'bg-warning-500' },
-    { color: 'warning', variant: 'outline', class: 'border-warning-500' },
-    { color: 'info', variant: 'solid', class: 'bg-info-500' },
-    { color: 'info', variant: 'outline', class: 'border-info-500' },
-    { color: 'muted', variant: 'solid', class: 'bg-background-400' },
-    { color: 'muted', variant: 'outline', class: 'border-background-400' },
-  ],
-  defaultVariants: {
-    variant: 'solid',
-    color: 'primary',
-  },
-});
-
-export const timelineConnectorStyle = tv({
-  base: 'w-0.5 flex-1 bg-outline-200 my-1',
-  variants: {},
-});
-
-export const timelineContentStyle = tv({
-  base: 'flex-1 pb-6',
-  variants: {},
-});
+import { tv } from 'tailwind-variants';
+
+export const timelineStyle = tv({
+  base: 'gap-0',
+  variants: {},
+});
+
+export const timelineItemStyle = tv({
+  base: 'flex-row gap-3 items-stretch',
+  variants: {},
+});
+
+export const timelineSeparatorStyle = tv({
+  base: 'items-center',
+  variants: {},
+});
+
+export const timelineDotStyle = tv({
+  base: 'h-3 w-3 rounded-full',
+  variants: {
+    variant: {
+      solid: '',
+      outline: 'bg-transparent border-2',
+    },
+    color: {
+      primary: '', success: '', error: '', warning: '', info: '', muted: '',
+    },
+  },
+  compoundVariants: [
+    { color: 'primary', variant: 'solid', class: 'bg-primary-500' },
+    { color: 'primary', variant: 'outline', class: 'border-primary-500' },
+    { color: 'success', variant: 'solid', class: 'bg-success-500' },
+    { color: 'success', variant: 'outline', class: 'border-success-500' },
+    { color: 'error', variant: 'solid', class: 'bg-error-500' },
+    { color: 'error', variant: 'outline', class: 'border-error-500' },
+    { color: 'warning', variant: 'solid', class: 'bg-warning-500' },
+    { color: 'warning', variant: 'outline', class: 'border-warning-500' },
+    { color: 'info', variant: 'solid', class: 'bg-info-500' },
+    { color: 'info', variant: 'outline', class: 'border-info-500' },
+    { color: 'muted', variant: 'solid', class: 'bg-background-400' },
+    { color: 'muted', variant: 'outline', class: 'border-background-400' },
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    color: 'primary',
+  },
+});
+
+export const timelineConnectorStyle = tv({
+  base: 'w-0.5 flex-1 bg-outline-200 my-1',
+  variants: {},
+});
+
+export const timelineContentStyle = tv({
+  base: 'flex-1 pb-6',
+  variants: {},
+});

package/src/timeline/timeline.tsx

@@ -1,52 +1,52 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { TimelineProps, TimelineItemProps, TimelineDotProps, TimelineSeparatorProps, TimelineConnectorProps, TimelineContentProps } from './types';
-import { timelineStyle, timelineItemStyle, timelineDotStyle, timelineSeparatorStyle, timelineConnectorStyle, timelineContentStyle } from './styles';
-
-export const Timeline = React.forwardRef<
-  React.ElementRef<typeof View>,
-  TimelineProps
->(({ className, ...props }, ref) => {
-  return <View ref={ref} className={timelineStyle({ class: className })} {...props} />;
-});
-Timeline.displayName = 'Timeline';
-
-export const TimelineItem = React.forwardRef<
-  React.ElementRef<typeof View>,
-  TimelineItemProps
->(({ className, ...props }, ref) => {
-  return <View ref={ref} className={timelineItemStyle({ class: className })} {...props} />;
-});
-TimelineItem.displayName = 'TimelineItem';
-
-export const TimelineDot = React.forwardRef<
-  React.ElementRef<typeof View>,
-  TimelineDotProps
->(({ className, variant, color, ...props }, ref) => {
-  return <View ref={ref} className={timelineDotStyle({ variant, color, class: className })} {...props} />;
-});
-TimelineDot.displayName = 'TimelineDot';
-
-export const TimelineSeparator = React.forwardRef<
-  React.ElementRef<typeof View>,
-  TimelineSeparatorProps
->(({ className, ...props }, ref) => {
-  return <View ref={ref} className={timelineSeparatorStyle({ class: className })} {...props} />;
-});
-TimelineSeparator.displayName = 'TimelineSeparator';
-
-export const TimelineConnector = React.forwardRef<
-  React.ElementRef<typeof View>,
-  TimelineConnectorProps
->(({ className, ...props }, ref) => {
-  return <View ref={ref} className={timelineConnectorStyle({ class: className })} {...props} />;
-});
-TimelineConnector.displayName = 'TimelineConnector';
-
-export const TimelineContent = React.forwardRef<
-  React.ElementRef<typeof View>,
-  TimelineContentProps
->(({ className, ...props }, ref) => {
-  return <View ref={ref} className={timelineContentStyle({ class: className })} {...props} />;
-});
-TimelineContent.displayName = 'TimelineContent';
+import React from 'react';
+import { View } from 'react-native';
+import type { TimelineProps, TimelineItemProps, TimelineDotProps, TimelineSeparatorProps, TimelineConnectorProps, TimelineContentProps } from './types';
+import { timelineStyle, timelineItemStyle, timelineDotStyle, timelineSeparatorStyle, timelineConnectorStyle, timelineContentStyle } from './styles';
+
+export const Timeline = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={timelineStyle({ class: className })} {...props} />;
+});
+Timeline.displayName = 'Timeline';
+
+export const TimelineItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineItemProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={timelineItemStyle({ class: className })} {...props} />;
+});
+TimelineItem.displayName = 'TimelineItem';
+
+export const TimelineDot = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineDotProps
+>(({ className, variant, color, ...props }, ref) => {
+  return <View ref={ref} className={timelineDotStyle({ variant, color, class: className })} {...props} />;
+});
+TimelineDot.displayName = 'TimelineDot';
+
+export const TimelineSeparator = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineSeparatorProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={timelineSeparatorStyle({ class: className })} {...props} />;
+});
+TimelineSeparator.displayName = 'TimelineSeparator';
+
+export const TimelineConnector = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineConnectorProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={timelineConnectorStyle({ class: className })} {...props} />;
+});
+TimelineConnector.displayName = 'TimelineConnector';
+
+export const TimelineContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TimelineContentProps
+>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={timelineContentStyle({ class: className })} {...props} />;
+});
+TimelineContent.displayName = 'TimelineContent';

package/src/timeline/types.ts

@@ -1,30 +1,30 @@
-import type { View, Text as RNText } from 'react-native';
-
-export type TimelineVariant = 'solid' | 'outline';
-
-export interface TimelineProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface TimelineItemProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  isLast?: boolean;
-}
-
-export interface TimelineDotProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  variant?: TimelineVariant;
-  color?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'muted';
-}
-
-export interface TimelineSeparatorProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface TimelineConnectorProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface TimelineContentProps extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
+import type { View, Text as RNText } from 'react-native';
+
+export type TimelineVariant = 'solid' | 'outline';
+
+export interface TimelineProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface TimelineItemProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  isLast?: boolean;
+}
+
+export interface TimelineDotProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  variant?: TimelineVariant;
+  color?: 'primary' | 'success' | 'error' | 'warning' | 'info' | 'muted';
+}
+
+export interface TimelineSeparatorProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface TimelineConnectorProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface TimelineContentProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}

package/src/toast/index.ts

@@ -1,17 +1,17 @@
-export { ToastProvider } from './toast-provider';
-export { useToast } from './use-toast';
-export { Toast } from './toast';
-export { ToastTitle } from './toast-title';
-export { ToastDescription } from './toast-description';
-
-export type {
-  ToastProps,
-  ToastTitleProps,
-  ToastDescriptionProps,
-  ToastConfig,
-  ToastContextValue,
-  ToastPlacement,
-  ToastStatus,
-  ToastVariant,
-  UseToastReturn,
-} from './types';
+export { ToastProvider } from './toast-provider';
+export { useToast } from './use-toast';
+export { Toast } from './toast';
+export { ToastTitle } from './toast-title';
+export { ToastDescription } from './toast-description';
+
+export type {
+  ToastProps,
+  ToastTitleProps,
+  ToastDescriptionProps,
+  ToastConfig,
+  ToastContextValue,
+  ToastPlacement,
+  ToastStatus,
+  ToastVariant,
+  UseToastReturn,
+} from './types';