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

package/src/badge/badge-text.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useBadgeContext } from './badge';
-import type { BadgeTextProps } from './types';
-import { badgeTextStyle } from './styles';
-
-export const BadgeText = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  BadgeTextProps
->(({ className, children, ...props }, ref) => {
-  const { action, variant, size } = useBadgeContext();
-
-  return (
-    <Text
-      ref={ref}
-      className={badgeTextStyle({ action, variant, size, class: className })}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-});
-
-BadgeText.displayName = 'BadgeText';
+import React from 'react';
+import { Text } from 'react-native';
+import { useBadgeContext } from './badge';
+import type { BadgeTextProps } from './types';
+import { badgeTextStyle } from './styles';
+
+export const BadgeText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  BadgeTextProps
+>(({ className, children, ...props }, ref) => {
+  const { action, variant, size } = useBadgeContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={badgeTextStyle({ action, variant, size, class: className })}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
+
+BadgeText.displayName = 'BadgeText';

package/src/badge/badge.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import { View } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { BadgeProps, BadgeContextValue } from './types';
-import { badgeStyle } from './styles';
-
-export const [BadgeProvider, useBadgeContext] =
-  createComponentContext<BadgeContextValue>('Badge');
-
-export const Badge = React.forwardRef<
-  React.ElementRef<typeof View>,
-  BadgeProps
->(
-  (
-    {
-      action = 'info',
-      variant = 'subtle',
-      size = 'md',
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <BadgeProvider value={{ action, variant, size }}>
-        <View
-          ref={ref}
-          className={badgeStyle({ action, variant, size, class: className })}
-          {...props}
-        >
-          {children}
-        </View>
-      </BadgeProvider>
-    );
-  },
-);
-
-Badge.displayName = 'Badge';
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { BadgeProps, BadgeContextValue } from './types';
+import { badgeStyle } from './styles';
+
+export const [BadgeProvider, useBadgeContext] =
+  createComponentContext<BadgeContextValue>('Badge');
+
+export const Badge = React.forwardRef<
+  React.ElementRef<typeof View>,
+  BadgeProps
+>(
+  (
+    {
+      action = 'info',
+      variant = 'subtle',
+      size = 'md',
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <BadgeProvider value={{ action, variant, size }}>
+        <View
+          ref={ref}
+          className={badgeStyle({ action, variant, size, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </BadgeProvider>
+    );
+  },
+);
+
+Badge.displayName = 'Badge';

package/src/badge/index.ts

@@ -1,11 +1,11 @@
-export { Badge } from './badge';
-export { BadgeText } from './badge-text';
-export { BadgeIcon } from './badge-icon';
-export type {
-  BadgeProps,
-  BadgeTextProps,
-  BadgeIconProps,
-  BadgeAction,
-  BadgeVariant,
-  BadgeSize,
-} from './types';
+export { Badge } from './badge';
+export { BadgeText } from './badge-text';
+export { BadgeIcon } from './badge-icon';
+export type {
+  BadgeProps,
+  BadgeTextProps,
+  BadgeIconProps,
+  BadgeAction,
+  BadgeVariant,
+  BadgeSize,
+} from './types';

package/src/badge/styles.ts

@@ -1,175 +1,175 @@
-import { tv } from 'tailwind-variants';
-
-export const badgeStyle = tv({
-  base: 'flex-row items-center self-start rounded-full',
-  variants: {
-    action: {
-      primary: '',
-      secondary: '',
-      error: '',
-      success: '',
-      warning: '',
-      info: '',
-      muted: '',
-    },
-    variant: {
-      solid: '',
-      outline: 'bg-transparent border',
-      subtle: '',
-    },
-    size: {
-      sm: 'px-2 py-0.5',
-      md: 'px-2.5 py-0.5',
-      lg: 'px-3 py-1',
-    },
-  },
-  compoundVariants: [
-    // solid backgrounds
-    { action: 'primary', variant: 'solid', class: 'bg-primary-500' },
-    { action: 'secondary', variant: 'solid', class: 'bg-secondary-500' },
-    { action: 'error', variant: 'solid', class: 'bg-error-500' },
-    { action: 'success', variant: 'solid', class: 'bg-success-500' },
-    { action: 'warning', variant: 'solid', class: 'bg-warning-500' },
-    { action: 'info', variant: 'solid', class: 'bg-info-500' },
-    { action: 'muted', variant: 'solid', class: 'bg-background-300' },
-
-    // outline borders
-    { action: 'primary', variant: 'outline', class: 'border-primary-500' },
-    { action: 'secondary', variant: 'outline', class: 'border-secondary-500' },
-    { action: 'error', variant: 'outline', class: 'border-error-500' },
-    { action: 'success', variant: 'outline', class: 'border-success-500' },
-    { action: 'warning', variant: 'outline', class: 'border-warning-500' },
-    { action: 'info', variant: 'outline', class: 'border-info-500' },
-    { action: 'muted', variant: 'outline', class: 'border-outline-300' },
-
-    // subtle backgrounds
-    { action: 'primary', variant: 'subtle', class: 'bg-primary-100' },
-    { action: 'secondary', variant: 'subtle', class: 'bg-secondary-100' },
-    { action: 'error', variant: 'subtle', class: 'bg-error-100' },
-    { action: 'success', variant: 'subtle', class: 'bg-success-100' },
-    { action: 'warning', variant: 'subtle', class: 'bg-warning-100' },
-    { action: 'info', variant: 'subtle', class: 'bg-info-100' },
-    { action: 'muted', variant: 'subtle', class: 'bg-background-100' },
-  ],
-  defaultVariants: {
-    action: 'info',
-    variant: 'subtle',
-    size: 'md',
-  },
-});
-
-export const badgeTextStyle = tv({
-  base: 'font-medium',
-  variants: {
-    action: {
-      primary: '',
-      secondary: '',
-      error: '',
-      success: '',
-      warning: '',
-      info: '',
-      muted: '',
-    },
-    variant: {
-      solid: '',
-      outline: '',
-      subtle: '',
-    },
-    size: {
-      sm: 'text-2xs',
-      md: 'text-xs',
-      lg: 'text-sm',
-    },
-  },
-  compoundVariants: [
-    // solid text colors (white on colored bg)
-    { action: 'primary', variant: 'solid', class: 'text-typography-0' },
-    { action: 'secondary', variant: 'solid', class: 'text-typography-0' },
-    { action: 'error', variant: 'solid', class: 'text-typography-0' },
-    { action: 'success', variant: 'solid', class: 'text-typography-0' },
-    { action: 'warning', variant: 'solid', class: 'text-typography-0' },
-    { action: 'info', variant: 'solid', class: 'text-typography-0' },
-    { action: 'muted', variant: 'solid', class: 'text-typography-900' },
-
-    // outline text colors
-    { action: 'primary', variant: 'outline', class: 'text-primary-600' },
-    { action: 'secondary', variant: 'outline', class: 'text-secondary-600' },
-    { action: 'error', variant: 'outline', class: 'text-error-600' },
-    { action: 'success', variant: 'outline', class: 'text-success-600' },
-    { action: 'warning', variant: 'outline', class: 'text-warning-600' },
-    { action: 'info', variant: 'outline', class: 'text-info-600' },
-    { action: 'muted', variant: 'outline', class: 'text-typography-700' },
-
-    // subtle text colors
-    { action: 'primary', variant: 'subtle', class: 'text-primary-800' },
-    { action: 'secondary', variant: 'subtle', class: 'text-secondary-800' },
-    { action: 'error', variant: 'subtle', class: 'text-error-800' },
-    { action: 'success', variant: 'subtle', class: 'text-success-800' },
-    { action: 'warning', variant: 'subtle', class: 'text-warning-800' },
-    { action: 'info', variant: 'subtle', class: 'text-info-800' },
-    { action: 'muted', variant: 'subtle', class: 'text-typography-700' },
-  ],
-  defaultVariants: {
-    action: 'info',
-    variant: 'subtle',
-    size: 'md',
-  },
-});
-
-export const badgeIconStyle = tv({
-  base: 'mr-1',
-  variants: {
-    action: {
-      primary: '',
-      secondary: '',
-      error: '',
-      success: '',
-      warning: '',
-      info: '',
-      muted: '',
-    },
-    variant: {
-      solid: '',
-      outline: '',
-      subtle: '',
-    },
-    size: {
-      sm: 'h-3 w-3',
-      md: 'h-3.5 w-3.5',
-      lg: 'h-4 w-4',
-    },
-  },
-  compoundVariants: [
-    // solid icon colors (white on colored bg)
-    { action: 'primary', variant: 'solid', class: 'text-typography-0' },
-    { action: 'secondary', variant: 'solid', class: 'text-typography-0' },
-    { action: 'error', variant: 'solid', class: 'text-typography-0' },
-    { action: 'success', variant: 'solid', class: 'text-typography-0' },
-    { action: 'warning', variant: 'solid', class: 'text-typography-0' },
-    { action: 'info', variant: 'solid', class: 'text-typography-0' },
-    { action: 'muted', variant: 'solid', class: 'text-typography-900' },
-
-    // outline icon colors
-    { action: 'primary', variant: 'outline', class: 'text-primary-600' },
-    { action: 'secondary', variant: 'outline', class: 'text-secondary-600' },
-    { action: 'error', variant: 'outline', class: 'text-error-600' },
-    { action: 'success', variant: 'outline', class: 'text-success-600' },
-    { action: 'warning', variant: 'outline', class: 'text-warning-600' },
-    { action: 'info', variant: 'outline', class: 'text-info-600' },
-    { action: 'muted', variant: 'outline', class: 'text-typography-700' },
-
-    // subtle icon colors
-    { action: 'primary', variant: 'subtle', class: 'text-primary-800' },
-    { action: 'secondary', variant: 'subtle', class: 'text-secondary-800' },
-    { action: 'error', variant: 'subtle', class: 'text-error-800' },
-    { action: 'success', variant: 'subtle', class: 'text-success-800' },
-    { action: 'warning', variant: 'subtle', class: 'text-warning-800' },
-    { action: 'info', variant: 'subtle', class: 'text-info-800' },
-    { action: 'muted', variant: 'subtle', class: 'text-typography-700' },
-  ],
-  defaultVariants: {
-    action: 'info',
-    variant: 'subtle',
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const badgeStyle = tv({
+  base: 'flex-row items-center self-start rounded-full',
+  variants: {
+    action: {
+      primary: '',
+      secondary: '',
+      error: '',
+      success: '',
+      warning: '',
+      info: '',
+      muted: '',
+    },
+    variant: {
+      solid: '',
+      outline: 'bg-transparent border',
+      subtle: '',
+    },
+    size: {
+      sm: 'px-2 py-0.5',
+      md: 'px-2.5 py-0.5',
+      lg: 'px-3 py-1',
+    },
+  },
+  compoundVariants: [
+    // solid backgrounds
+    { action: 'primary', variant: 'solid', class: 'bg-primary-500' },
+    { action: 'secondary', variant: 'solid', class: 'bg-secondary-500' },
+    { action: 'error', variant: 'solid', class: 'bg-error-500' },
+    { action: 'success', variant: 'solid', class: 'bg-success-500' },
+    { action: 'warning', variant: 'solid', class: 'bg-warning-500' },
+    { action: 'info', variant: 'solid', class: 'bg-info-500' },
+    { action: 'muted', variant: 'solid', class: 'bg-background-300' },
+
+    // outline borders
+    { action: 'primary', variant: 'outline', class: 'border-primary-500' },
+    { action: 'secondary', variant: 'outline', class: 'border-secondary-500' },
+    { action: 'error', variant: 'outline', class: 'border-error-500' },
+    { action: 'success', variant: 'outline', class: 'border-success-500' },
+    { action: 'warning', variant: 'outline', class: 'border-warning-500' },
+    { action: 'info', variant: 'outline', class: 'border-info-500' },
+    { action: 'muted', variant: 'outline', class: 'border-outline-300' },
+
+    // subtle backgrounds
+    { action: 'primary', variant: 'subtle', class: 'bg-primary-100' },
+    { action: 'secondary', variant: 'subtle', class: 'bg-secondary-100' },
+    { action: 'error', variant: 'subtle', class: 'bg-error-100' },
+    { action: 'success', variant: 'subtle', class: 'bg-success-100' },
+    { action: 'warning', variant: 'subtle', class: 'bg-warning-100' },
+    { action: 'info', variant: 'subtle', class: 'bg-info-100' },
+    { action: 'muted', variant: 'subtle', class: 'bg-background-100' },
+  ],
+  defaultVariants: {
+    action: 'info',
+    variant: 'subtle',
+    size: 'md',
+  },
+});
+
+export const badgeTextStyle = tv({
+  base: 'font-medium',
+  variants: {
+    action: {
+      primary: '',
+      secondary: '',
+      error: '',
+      success: '',
+      warning: '',
+      info: '',
+      muted: '',
+    },
+    variant: {
+      solid: '',
+      outline: '',
+      subtle: '',
+    },
+    size: {
+      sm: 'text-2xs',
+      md: 'text-xs',
+      lg: 'text-sm',
+    },
+  },
+  compoundVariants: [
+    // solid text colors (white on colored bg)
+    { action: 'primary', variant: 'solid', class: 'text-typography-0' },
+    { action: 'secondary', variant: 'solid', class: 'text-typography-0' },
+    { action: 'error', variant: 'solid', class: 'text-typography-0' },
+    { action: 'success', variant: 'solid', class: 'text-typography-0' },
+    { action: 'warning', variant: 'solid', class: 'text-typography-0' },
+    { action: 'info', variant: 'solid', class: 'text-typography-0' },
+    { action: 'muted', variant: 'solid', class: 'text-typography-900' },
+
+    // outline text colors
+    { action: 'primary', variant: 'outline', class: 'text-primary-600' },
+    { action: 'secondary', variant: 'outline', class: 'text-secondary-600' },
+    { action: 'error', variant: 'outline', class: 'text-error-600' },
+    { action: 'success', variant: 'outline', class: 'text-success-600' },
+    { action: 'warning', variant: 'outline', class: 'text-warning-600' },
+    { action: 'info', variant: 'outline', class: 'text-info-600' },
+    { action: 'muted', variant: 'outline', class: 'text-typography-700' },
+
+    // subtle text colors
+    { action: 'primary', variant: 'subtle', class: 'text-primary-800' },
+    { action: 'secondary', variant: 'subtle', class: 'text-secondary-800' },
+    { action: 'error', variant: 'subtle', class: 'text-error-800' },
+    { action: 'success', variant: 'subtle', class: 'text-success-800' },
+    { action: 'warning', variant: 'subtle', class: 'text-warning-800' },
+    { action: 'info', variant: 'subtle', class: 'text-info-800' },
+    { action: 'muted', variant: 'subtle', class: 'text-typography-700' },
+  ],
+  defaultVariants: {
+    action: 'info',
+    variant: 'subtle',
+    size: 'md',
+  },
+});
+
+export const badgeIconStyle = tv({
+  base: 'mr-1',
+  variants: {
+    action: {
+      primary: '',
+      secondary: '',
+      error: '',
+      success: '',
+      warning: '',
+      info: '',
+      muted: '',
+    },
+    variant: {
+      solid: '',
+      outline: '',
+      subtle: '',
+    },
+    size: {
+      sm: 'h-3 w-3',
+      md: 'h-3.5 w-3.5',
+      lg: 'h-4 w-4',
+    },
+  },
+  compoundVariants: [
+    // solid icon colors (white on colored bg)
+    { action: 'primary', variant: 'solid', class: 'text-typography-0' },
+    { action: 'secondary', variant: 'solid', class: 'text-typography-0' },
+    { action: 'error', variant: 'solid', class: 'text-typography-0' },
+    { action: 'success', variant: 'solid', class: 'text-typography-0' },
+    { action: 'warning', variant: 'solid', class: 'text-typography-0' },
+    { action: 'info', variant: 'solid', class: 'text-typography-0' },
+    { action: 'muted', variant: 'solid', class: 'text-typography-900' },
+
+    // outline icon colors
+    { action: 'primary', variant: 'outline', class: 'text-primary-600' },
+    { action: 'secondary', variant: 'outline', class: 'text-secondary-600' },
+    { action: 'error', variant: 'outline', class: 'text-error-600' },
+    { action: 'success', variant: 'outline', class: 'text-success-600' },
+    { action: 'warning', variant: 'outline', class: 'text-warning-600' },
+    { action: 'info', variant: 'outline', class: 'text-info-600' },
+    { action: 'muted', variant: 'outline', class: 'text-typography-700' },
+
+    // subtle icon colors
+    { action: 'primary', variant: 'subtle', class: 'text-primary-800' },
+    { action: 'secondary', variant: 'subtle', class: 'text-secondary-800' },
+    { action: 'error', variant: 'subtle', class: 'text-error-800' },
+    { action: 'success', variant: 'subtle', class: 'text-success-800' },
+    { action: 'warning', variant: 'subtle', class: 'text-warning-800' },
+    { action: 'info', variant: 'subtle', class: 'text-info-800' },
+    { action: 'muted', variant: 'subtle', class: 'text-typography-700' },
+  ],
+  defaultVariants: {
+    action: 'info',
+    variant: 'subtle',
+    size: 'md',
+  },
+});

package/src/badge/types.ts

@@ -1,37 +1,37 @@
-import type { View, Text as RNText } from 'react-native';
-
-export type BadgeAction =
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | 'success'
-  | 'warning'
-  | 'info'
-  | 'muted';
-
-export type BadgeVariant = 'solid' | 'outline' | 'subtle';
-export type BadgeSize = 'sm' | 'md' | 'lg';
-
-export interface BadgeContextValue {
-  action: BadgeAction;
-  variant: BadgeVariant;
-  size: BadgeSize;
-}
-
-export interface BadgeProps
-  extends React.ComponentPropsWithoutRef<typeof View> {
-  className?: string;
-  action?: BadgeAction;
-  variant?: BadgeVariant;
-  size?: BadgeSize;
-}
-
-export interface BadgeTextProps
-  extends React.ComponentPropsWithoutRef<typeof RNText> {
-  className?: string;
-}
-
-export interface BadgeIconProps {
-  as: React.ElementType;
-  className?: string;
-}
+import type { View, Text as RNText } from 'react-native';
+
+export type BadgeAction =
+  | 'primary'
+  | 'secondary'
+  | 'error'
+  | 'success'
+  | 'warning'
+  | 'info'
+  | 'muted';
+
+export type BadgeVariant = 'solid' | 'outline' | 'subtle';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+
+export interface BadgeContextValue {
+  action: BadgeAction;
+  variant: BadgeVariant;
+  size: BadgeSize;
+}
+
+export interface BadgeProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  action?: BadgeAction;
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+}
+
+export interface BadgeTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface BadgeIconProps {
+  as: React.ElementType;
+  className?: string;
+}

package/src/blockquote/blockquote.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import type { BlockquoteProps } from './types';
-import { blockquoteStyle, blockquoteTextStyle } from './styles';
-
-export const Blockquote = React.forwardRef<
-  React.ElementRef<typeof View>,
-  BlockquoteProps
->(({ className, children, ...props }, ref) => {
-  return (
-    <View ref={ref} className={blockquoteStyle({ class: className })} {...props}>
-      {typeof children === 'string' ? (
-        <Text className={blockquoteTextStyle({})}>{children}</Text>
-      ) : (
-        children
-      )}
-    </View>
-  );
-});
-
-Blockquote.displayName = 'Blockquote';
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { BlockquoteProps } from './types';
+import { blockquoteStyle, blockquoteTextStyle } from './styles';
+
+export const Blockquote = React.forwardRef<
+  React.ElementRef<typeof View>,
+  BlockquoteProps
+>(({ className, children, ...props }, ref) => {
+  return (
+    <View ref={ref} className={blockquoteStyle({ class: className })} {...props}>
+      {typeof children === 'string' ? (
+        <Text className={blockquoteTextStyle({})}>{children}</Text>
+      ) : (
+        children
+      )}
+    </View>
+  );
+});
+
+Blockquote.displayName = 'Blockquote';

package/src/blockquote/index.ts

@@ -1,2 +1,2 @@
-export { Blockquote } from './blockquote';
-export type { BlockquoteProps } from './types';
+export { Blockquote } from './blockquote';
+export type { BlockquoteProps } from './types';

package/src/blockquote/styles.ts

@@ -1,11 +1,11 @@
-import { tv } from 'tailwind-variants';
-
-export const blockquoteStyle = tv({
-  base: 'border-l-4 border-primary-300 pl-4 py-2',
-  variants: {},
-});
-
-export const blockquoteTextStyle = tv({
-  base: 'text-base italic text-typography-600',
-  variants: {},
-});
+import { tv } from 'tailwind-variants';
+
+export const blockquoteStyle = tv({
+  base: 'border-l-4 border-primary-300 pl-4 py-2',
+  variants: {},
+});
+
+export const blockquoteTextStyle = tv({
+  base: 'text-base italic text-typography-600',
+  variants: {},
+});