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

package/src/alert/alert-body.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { AlertBodyProps } from './types';
-import { alertBodyStyle } from './styles';
-
-export const AlertBody = React.forwardRef<
-  React.ElementRef<typeof View>,
-  AlertBodyProps
->(({ className, ...props }, ref) => {
-  return (
-    <View
-      ref={ref}
-      className={alertBodyStyle({ class: className })}
-      {...props}
-    />
-  );
-});
-
-AlertBody.displayName = 'AlertBody';
+import React from 'react';
+import { View } from 'react-native';
+import type { AlertBodyProps } from './types';
+import { alertBodyStyle } from './styles';
+
+export const AlertBody = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AlertBodyProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={alertBodyStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+AlertBody.displayName = 'AlertBody';

package/src/alert/alert-close-button.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Pressable, Text } from 'react-native';
-import type { AlertCloseButtonProps } from './types';
-import { alertCloseButtonStyle } from './styles';
-
-export const AlertCloseButton = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  AlertCloseButtonProps
->(({ className, children, ...props }, ref) => {
-  return (
-    <Pressable
-      ref={ref}
-      accessibilityRole="button"
-      accessibilityLabel="Close alert"
-      className={alertCloseButtonStyle({ class: className })}
-      {...props}
-    >
-      {children ?? <Text className="text-current text-sm">✕</Text>}
-    </Pressable>
-  );
-});
-
-AlertCloseButton.displayName = 'AlertCloseButton';
+import React from 'react';
+import { Pressable, Text } from 'react-native';
+import type { AlertCloseButtonProps } from './types';
+import { alertCloseButtonStyle } from './styles';
+
+export const AlertCloseButton = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  AlertCloseButtonProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="button"
+      accessibilityLabel="Close alert"
+      className={alertCloseButtonStyle({ class: className })}
+      {...props}
+    >
+      {children ?? <Text className="text-current text-sm">✕</Text>}
+    </Pressable>
+  );
+});
+
+AlertCloseButton.displayName = 'AlertCloseButton';

package/src/alert/alert-icon.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useAlertContext } from './alert';
-import type { AlertIconProps } from './types';
-import { alertIconStyle } from './styles';
-
-const defaultIcons: Record<string, string> = {
-  info: 'ℹ',
-  success: '✓',
-  warning: '⚠',
-  error: '✕',
-};
-
-export const AlertIcon = React.forwardRef<any, AlertIconProps>(
-  ({ as: AsComp, className, ...props }, ref) => {
-    const { status, variant } = useAlertContext();
-
-    if (AsComp) {
-      return (
-        <AsComp
-          ref={ref}
-          className={alertIconStyle({ status, variant, class: className })}
-          {...props}
-        />
-      );
-    }
-
-    return (
-      <Text
-        ref={ref}
-        className={alertIconStyle({ status, variant, class: className })}
-        {...props}
-      >
-        {defaultIcons[status]}
-      </Text>
-    );
-  },
-);
-
-AlertIcon.displayName = 'AlertIcon';
+import React from 'react';
+import { Text } from 'react-native';
+import { useAlertContext } from './alert';
+import type { AlertIconProps } from './types';
+import { alertIconStyle } from './styles';
+
+const defaultIcons: Record<string, string> = {
+  info: 'ℹ',
+  success: '✓',
+  warning: '⚠',
+  error: '✕',
+};
+
+export const AlertIcon = React.forwardRef<any, AlertIconProps>(
+  ({ as: AsComp, className, ...props }, ref) => {
+    const { status, variant } = useAlertContext();
+
+    if (AsComp) {
+      return (
+        <AsComp
+          ref={ref}
+          className={alertIconStyle({ status, variant, class: className })}
+          {...props}
+        />
+      );
+    }
+
+    return (
+      <Text
+        ref={ref}
+        className={alertIconStyle({ status, variant, class: className })}
+        {...props}
+      >
+        {defaultIcons[status]}
+      </Text>
+    );
+  },
+);
+
+AlertIcon.displayName = 'AlertIcon';

package/src/alert/alert-text.tsx

@@ -1,22 +1,22 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useAlertContext } from './alert';
-import type { AlertTextProps } from './types';
-import { alertTextStyle } from './styles';
-
-export const AlertText = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  AlertTextProps
->(({ className, ...props }, ref) => {
-  const { status, variant } = useAlertContext();
-
-  return (
-    <Text
-      ref={ref}
-      className={alertTextStyle({ status, variant, class: className })}
-      {...props}
-    />
-  );
-});
-
-AlertText.displayName = 'AlertText';
+import React from 'react';
+import { Text } from 'react-native';
+import { useAlertContext } from './alert';
+import type { AlertTextProps } from './types';
+import { alertTextStyle } from './styles';
+
+export const AlertText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  AlertTextProps
+>(({ className, ...props }, ref) => {
+  const { status, variant } = useAlertContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={alertTextStyle({ status, variant, class: className })}
+      {...props}
+    />
+  );
+});
+
+AlertText.displayName = 'AlertText';

package/src/alert/alert.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
-import { View } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { AlertProps, AlertContextValue } from './types';
-import { alertStyle } from './styles';
-
-export const [AlertProvider, useAlertContext] =
-  createComponentContext<AlertContextValue>('Alert');
-
-export const Alert = React.forwardRef<
-  React.ElementRef<typeof View>,
-  AlertProps
->(
-  (
-    { className, status = 'info', variant = 'subtle', children, ...props },
-    ref,
-  ) => {
-    return (
-      <AlertProvider value={{ status, variant }}>
-        <View
-          ref={ref}
-          role="alert"
-          className={alertStyle({ status, variant, class: className })}
-          {...props}
-        >
-          {children}
-        </View>
-      </AlertProvider>
-    );
-  },
-);
-
-Alert.displayName = 'Alert';
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { AlertProps, AlertContextValue } from './types';
+import { alertStyle } from './styles';
+
+export const [AlertProvider, useAlertContext] =
+  createComponentContext<AlertContextValue>('Alert');
+
+export const Alert = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AlertProps
+>(
+  (
+    { className, status = 'info', variant = 'subtle', children, ...props },
+    ref,
+  ) => {
+    return (
+      <AlertProvider value={{ status, variant }}>
+        <View
+          ref={ref}
+          role="alert"
+          className={alertStyle({ status, variant, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </AlertProvider>
+    );
+  },
+);
+
+Alert.displayName = 'Alert';

package/src/alert/index.ts

@@ -1,15 +1,15 @@
-export { Alert } from './alert';
-export { AlertIcon } from './alert-icon';
-export { AlertBody } from './alert-body';
-export { AlertText } from './alert-text';
-export { AlertCloseButton } from './alert-close-button';
-
-export type {
-  AlertProps,
-  AlertIconProps,
-  AlertBodyProps,
-  AlertTextProps,
-  AlertCloseButtonProps,
-  AlertStatus,
-  AlertVariant,
-} from './types';
+export { Alert } from './alert';
+export { AlertIcon } from './alert-icon';
+export { AlertBody } from './alert-body';
+export { AlertText } from './alert-text';
+export { AlertCloseButton } from './alert-close-button';
+
+export type {
+  AlertProps,
+  AlertIconProps,
+  AlertBodyProps,
+  AlertTextProps,
+  AlertCloseButtonProps,
+  AlertStatus,
+  AlertVariant,
+} from './types';

package/src/alert/styles.ts

@@ -1,112 +1,112 @@
-import { tv } from 'tailwind-variants';
-
-export const alertStyle = tv({
-  base: 'flex-row items-start rounded-lg px-4 py-3 gap-3',
-  variants: {
-    status: {
-      info: '',
-      success: '',
-      warning: '',
-      error: '',
-    },
-    variant: {
-      solid: '',
-      subtle: '',
-      outline: 'bg-transparent border',
-    },
-  },
-  compoundVariants: [
-    // solid
-    { status: 'info', variant: 'solid', class: 'bg-info-500' },
-    { status: 'success', variant: 'solid', class: 'bg-success-500' },
-    { status: 'warning', variant: 'solid', class: 'bg-warning-500' },
-    { status: 'error', variant: 'solid', class: 'bg-error-500' },
-    // subtle
-    { status: 'info', variant: 'subtle', class: 'bg-info-50' },
-    { status: 'success', variant: 'subtle', class: 'bg-success-50' },
-    { status: 'warning', variant: 'subtle', class: 'bg-warning-50' },
-    { status: 'error', variant: 'subtle', class: 'bg-error-50' },
-    // outline
-    { status: 'info', variant: 'outline', class: 'border-info-500' },
-    { status: 'success', variant: 'outline', class: 'border-success-500' },
-    { status: 'warning', variant: 'outline', class: 'border-warning-500' },
-    { status: 'error', variant: 'outline', class: 'border-error-500' },
-  ],
-  defaultVariants: {
-    status: 'info',
-    variant: 'subtle',
-  },
-});
-
-export const alertIconStyle = tv({
-  base: 'h-5 w-5 mt-0.5',
-  variants: {
-    status: {
-      info: '',
-      success: '',
-      warning: '',
-      error: '',
-    },
-    variant: {
-      solid: 'text-typography-0',
-      subtle: '',
-      outline: '',
-    },
-  },
-  compoundVariants: [
-    { status: 'info', variant: 'subtle', class: 'text-info-600' },
-    { status: 'success', variant: 'subtle', class: 'text-success-600' },
-    { status: 'warning', variant: 'subtle', class: 'text-warning-600' },
-    { status: 'error', variant: 'subtle', class: 'text-error-600' },
-    { status: 'info', variant: 'outline', class: 'text-info-600' },
-    { status: 'success', variant: 'outline', class: 'text-success-600' },
-    { status: 'warning', variant: 'outline', class: 'text-warning-600' },
-    { status: 'error', variant: 'outline', class: 'text-error-600' },
-  ],
-  defaultVariants: {
-    status: 'info',
-    variant: 'subtle',
-  },
-});
-
-export const alertBodyStyle = tv({
-  base: 'flex-1 gap-1',
-});
-
-export const alertTextStyle = tv({
-  base: 'text-sm',
-  variants: {
-    status: {
-      info: '',
-      success: '',
-      warning: '',
-      error: '',
-    },
-    variant: {
-      solid: 'text-typography-0',
-      subtle: '',
-      outline: '',
-    },
-    isBold: {
-      true: 'font-semibold',
-    },
-  },
-  compoundVariants: [
-    { status: 'info', variant: 'subtle', class: 'text-info-900' },
-    { status: 'success', variant: 'subtle', class: 'text-success-900' },
-    { status: 'warning', variant: 'subtle', class: 'text-warning-900' },
-    { status: 'error', variant: 'subtle', class: 'text-error-900' },
-    { status: 'info', variant: 'outline', class: 'text-info-900' },
-    { status: 'success', variant: 'outline', class: 'text-success-900' },
-    { status: 'warning', variant: 'outline', class: 'text-warning-900' },
-    { status: 'error', variant: 'outline', class: 'text-error-900' },
-  ],
-  defaultVariants: {
-    status: 'info',
-    variant: 'subtle',
-  },
-});
-
-export const alertCloseButtonStyle = tv({
-  base: 'p-1 rounded active:opacity-70',
-});
+import { tv } from 'tailwind-variants';
+
+export const alertStyle = tv({
+  base: 'flex-row items-start rounded-lg px-4 py-3 gap-3',
+  variants: {
+    status: {
+      info: '',
+      success: '',
+      warning: '',
+      error: '',
+    },
+    variant: {
+      solid: '',
+      subtle: '',
+      outline: 'bg-transparent border',
+    },
+  },
+  compoundVariants: [
+    // solid
+    { status: 'info', variant: 'solid', class: 'bg-info-500' },
+    { status: 'success', variant: 'solid', class: 'bg-success-500' },
+    { status: 'warning', variant: 'solid', class: 'bg-warning-500' },
+    { status: 'error', variant: 'solid', class: 'bg-error-500' },
+    // subtle
+    { status: 'info', variant: 'subtle', class: 'bg-info-50' },
+    { status: 'success', variant: 'subtle', class: 'bg-success-50' },
+    { status: 'warning', variant: 'subtle', class: 'bg-warning-50' },
+    { status: 'error', variant: 'subtle', class: 'bg-error-50' },
+    // outline
+    { status: 'info', variant: 'outline', class: 'border-info-500' },
+    { status: 'success', variant: 'outline', class: 'border-success-500' },
+    { status: 'warning', variant: 'outline', class: 'border-warning-500' },
+    { status: 'error', variant: 'outline', class: 'border-error-500' },
+  ],
+  defaultVariants: {
+    status: 'info',
+    variant: 'subtle',
+  },
+});
+
+export const alertIconStyle = tv({
+  base: 'h-5 w-5 mt-0.5',
+  variants: {
+    status: {
+      info: '',
+      success: '',
+      warning: '',
+      error: '',
+    },
+    variant: {
+      solid: 'text-typography-0',
+      subtle: '',
+      outline: '',
+    },
+  },
+  compoundVariants: [
+    { status: 'info', variant: 'subtle', class: 'text-info-600' },
+    { status: 'success', variant: 'subtle', class: 'text-success-600' },
+    { status: 'warning', variant: 'subtle', class: 'text-warning-600' },
+    { status: 'error', variant: 'subtle', class: 'text-error-600' },
+    { status: 'info', variant: 'outline', class: 'text-info-600' },
+    { status: 'success', variant: 'outline', class: 'text-success-600' },
+    { status: 'warning', variant: 'outline', class: 'text-warning-600' },
+    { status: 'error', variant: 'outline', class: 'text-error-600' },
+  ],
+  defaultVariants: {
+    status: 'info',
+    variant: 'subtle',
+  },
+});
+
+export const alertBodyStyle = tv({
+  base: 'flex-1 gap-1',
+});
+
+export const alertTextStyle = tv({
+  base: 'text-sm',
+  variants: {
+    status: {
+      info: '',
+      success: '',
+      warning: '',
+      error: '',
+    },
+    variant: {
+      solid: 'text-typography-0',
+      subtle: '',
+      outline: '',
+    },
+    isBold: {
+      true: 'font-semibold',
+    },
+  },
+  compoundVariants: [
+    { status: 'info', variant: 'subtle', class: 'text-info-900' },
+    { status: 'success', variant: 'subtle', class: 'text-success-900' },
+    { status: 'warning', variant: 'subtle', class: 'text-warning-900' },
+    { status: 'error', variant: 'subtle', class: 'text-error-900' },
+    { status: 'info', variant: 'outline', class: 'text-info-900' },
+    { status: 'success', variant: 'outline', class: 'text-success-900' },
+    { status: 'warning', variant: 'outline', class: 'text-warning-900' },
+    { status: 'error', variant: 'outline', class: 'text-error-900' },
+  ],
+  defaultVariants: {
+    status: 'info',
+    variant: 'subtle',
+  },
+});
+
+export const alertCloseButtonStyle = tv({
+  base: 'p-1 rounded active:opacity-70',
+});

package/src/alert/types.ts

@@ -1,36 +1,36 @@
-import type { View, Text as RNText, Pressable } from 'react-native';
-
-export type AlertStatus = 'info' | 'success' | 'warning' | 'error';
-export type AlertVariant = 'solid' | 'subtle' | 'outline';
-
-export interface AlertContextValue {
-  status: AlertStatus;
-  variant: AlertVariant;
-}
-
-export interface AlertProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  status?: AlertStatus;
-  variant?: AlertVariant;
-}
-
-export interface AlertIconProps {
-  as?: React.ElementType;
-  className?: string;
-}
-
-export interface AlertBodyProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-}
-
-export interface AlertTextProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface AlertCloseButtonProps
-  extends React.ComponentPropsWithoutRef<typeof Pressable> {
-  className?: string;
-}
+import type { View, Text as RNText, Pressable } from 'react-native';
+
+export type AlertStatus = 'info' | 'success' | 'warning' | 'error';
+export type AlertVariant = 'solid' | 'subtle' | 'outline';
+
+export interface AlertContextValue {
+  status: AlertStatus;
+  variant: AlertVariant;
+}
+
+export interface AlertProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  status?: AlertStatus;
+  variant?: AlertVariant;
+}
+
+export interface AlertIconProps {
+  as?: React.ElementType;
+  className?: string;
+}
+
+export interface AlertBodyProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface AlertTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface AlertCloseButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+}