@wireservers-ui/react-natives 0.1.0

package/src/badge/types.ts

@@ -0,0 +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;
+}

package/src/blockquote/blockquote.tsx

@@ -0,0 +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';

package/src/blockquote/index.ts

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

package/src/blockquote/styles.ts

@@ -0,0 +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: {},
+});

package/src/blockquote/types.ts

@@ -0,0 +1,6 @@
+import type { View } from 'react-native';
+
+export interface BlockquoteProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}

package/src/box/box.tsx

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

package/src/box/index.ts

@@ -0,0 +1,2 @@
+export { Box } from './box';
+export type { BoxProps } from './types';

package/src/box/styles.ts

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants';
+
+export const boxStyle = tv({
+  base: '',
+  variants: {},
+});

package/src/box/types.ts

@@ -0,0 +1,6 @@
+import type { View } from 'react-native';
+
+export interface BoxProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}

package/src/breadcrumb/breadcrumb-item.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { BreadcrumbItemProps } from './types';
+import { breadcrumbItemStyle } from './styles';
+
+export const BreadcrumbItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  BreadcrumbItemProps
+>(({ className, isCurrent, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      aria-current={isCurrent ? 'page' : undefined}
+      className={breadcrumbItemStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';

package/src/breadcrumb/breadcrumb-link.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import type { BreadcrumbLinkProps } from './types';
+import { breadcrumbLinkStyle } from './styles';
+
+export const BreadcrumbLink = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  BreadcrumbLinkProps
+>(({ className, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      role="link"
+      className={breadcrumbLinkStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+BreadcrumbLink.displayName = 'BreadcrumbLink';

package/src/breadcrumb/breadcrumb-text.tsx

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

package/src/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { BreadcrumbProps, BreadcrumbContextValue } from './types';
+import { breadcrumbStyle, breadcrumbSeparatorStyle } from './styles';
+
+export const [BreadcrumbProvider, useBreadcrumbContext] =
+  createComponentContext<BreadcrumbContextValue>('Breadcrumb');
+
+export const Breadcrumb = React.forwardRef<
+  React.ElementRef<typeof View>,
+  BreadcrumbProps
+>(({ className, separator = '/', children, ...props }, ref) => {
+  const childArray = React.Children.toArray(children);
+
+  return (
+    <BreadcrumbProvider value={{ separator }}>
+      <View
+        ref={ref}
+        role="navigation"
+        aria-label="Breadcrumb"
+        className={breadcrumbStyle({ class: className })}
+        {...props}
+      >
+        {childArray.map((child, index) => (
+          <React.Fragment key={index}>
+            {child}
+            {index < childArray.length - 1 &&
+              (typeof separator === 'string' ? (
+                <Text className={breadcrumbSeparatorStyle({})}>
+                  {separator}
+                </Text>
+              ) : (
+                separator
+              ))}
+          </React.Fragment>
+        ))}
+      </View>
+    </BreadcrumbProvider>
+  );
+});
+
+Breadcrumb.displayName = 'Breadcrumb';

package/src/breadcrumb/index.ts

@@ -0,0 +1,12 @@
+export { Breadcrumb } from './breadcrumb';
+export { BreadcrumbItem } from './breadcrumb-item';
+export { BreadcrumbLink } from './breadcrumb-link';
+export { BreadcrumbText } from './breadcrumb-text';
+
+export type {
+  BreadcrumbProps,
+  BreadcrumbItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbTextProps,
+  BreadcrumbSeparatorProps,
+} from './types';

package/src/breadcrumb/styles.ts

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+
+export const breadcrumbStyle = tv({
+  base: 'flex-row items-center flex-wrap',
+});
+
+export const breadcrumbItemStyle = tv({
+  base: 'flex-row items-center',
+});
+
+export const breadcrumbLinkStyle = tv({
+  base: 'active:opacity-70',
+  variants: {
+    isCurrent: {
+      true: '',
+      false: '',
+    },
+  },
+});
+
+export const breadcrumbTextStyle = tv({
+  base: 'text-sm',
+  variants: {
+    isCurrent: {
+      true: 'text-typography-900 font-semibold',
+      false: 'text-primary-600',
+    },
+  },
+  defaultVariants: {
+    isCurrent: false,
+  },
+});
+
+export const breadcrumbSeparatorStyle = tv({
+  base: 'text-typography-400 text-sm mx-2',
+});

package/src/breadcrumb/types.ts

@@ -0,0 +1,33 @@
+import type { View, Text as RNText, Pressable } from 'react-native';
+
+export interface BreadcrumbProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  separator?: string | React.ReactNode;
+}
+
+export interface BreadcrumbItemProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  isCurrent?: boolean;
+}
+
+export interface BreadcrumbLinkProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable> {
+  className?: string;
+  href?: string;
+}
+
+export interface BreadcrumbTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface BreadcrumbSeparatorProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface BreadcrumbContextValue {
+  separator: string | React.ReactNode;
+}

package/src/button/button-group.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { ButtonGroupProps } from './types';
+import { buttonGroupStyle } from './styles';
+
+export const ButtonGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ButtonGroupProps
+>(
+  (
+    {
+      className,
+      space = 'md',
+      isAttached = false,
+      flexDirection = 'column',
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <View
+        ref={ref}
+        className={buttonGroupStyle({
+          class: className,
+          space,
+          isAttached,
+          flexDirection,
+        })}
+        {...props}
+      />
+    );
+  },
+);
+
+ButtonGroup.displayName = 'ButtonGroup';

package/src/button/button-icon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useButtonContext } from './button';
+import type { ButtonIconProps } from './types';
+import { buttonIconStyle } from './styles';
+
+export const ButtonIcon = React.forwardRef<any, ButtonIconProps>(
+  ({ className, as: AsComp, size, height, width, ...props }, ref) => {
+    const parent = useButtonContext();
+
+    const sizeClass =
+      typeof size === 'number' ? undefined : (size ?? parent.size);
+
+    const computedClassName = buttonIconStyle({
+      size: sizeClass,
+      variant: parent.variant,
+      action: parent.action,
+      class: className,
+    });
+
+    if (AsComp) {
+      return (
+        <AsComp
+          ref={ref}
+          className={computedClassName}
+          size={typeof size === 'number' ? size : undefined}
+          height={height}
+          width={width}
+          {...props}
+        />
+      );
+    }
+
+    return null;
+  },
+);
+
+ButtonIcon.displayName = 'ButtonIcon';

package/src/button/button-spinner.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ActivityIndicator } from 'react-native';
+import type { ButtonSpinnerProps } from './types';
+
+export const ButtonSpinner = React.forwardRef<
+  React.ElementRef<typeof ActivityIndicator>,
+  ButtonSpinnerProps
+>((props, ref) => {
+  return <ActivityIndicator ref={ref} aria-label="loading" {...props} />;
+});
+
+ButtonSpinner.displayName = 'ButtonSpinner';

package/src/button/button-text.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useButtonContext } from './button';
+import type { ButtonTextProps } from './types';
+import { buttonTextStyle } from './styles';
+
+export const ButtonText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  ButtonTextProps
+>(({ className, variant, size, action, ...props }, ref) => {
+  const parent = useButtonContext();
+
+  return (
+    <Text
+      ref={ref}
+      {...props}
+      className={buttonTextStyle({
+        action: action ?? parent.action,
+        variant: variant ?? parent.variant,
+        size: size ?? parent.size,
+        class: className,
+      })}
+    />
+  );
+});
+
+ButtonText.displayName = 'ButtonText';

package/src/button/button.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { ButtonProps, ButtonContextValue } from './types';
+import { buttonStyle } from './styles';
+
+export const [ButtonProvider, useButtonContext] =
+  createComponentContext<ButtonContextValue>('Button');
+
+export const Button = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ButtonProps
+>(
+  (
+    {
+      className,
+      variant = 'solid',
+      size = 'md',
+      action = 'primary',
+      isDisabled,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <ButtonProvider value={{ variant, size, action }}>
+        <Pressable
+          ref={ref}
+          role="button"
+          disabled={isDisabled}
+          className={buttonStyle({ variant, size, action, class: className })}
+          {...props}
+        >
+          {children}
+        </Pressable>
+      </ButtonProvider>
+    );
+  },
+);
+
+Button.displayName = 'Button';

package/src/button/index.ts

@@ -0,0 +1,19 @@
+export { Button, ButtonProvider, useButtonContext } from './button';
+export { ButtonText } from './button-text';
+export { ButtonSpinner } from './button-spinner';
+export { ButtonIcon } from './button-icon';
+export { ButtonGroup } from './button-group';
+
+export type {
+  ButtonProps,
+  ButtonTextProps,
+  ButtonSpinnerProps,
+  ButtonIconProps,
+  ButtonGroupProps,
+  ButtonAction,
+  ButtonVariant,
+  ButtonSize,
+  ButtonContextValue,
+  ButtonGroupSpace,
+  ButtonGroupDirection,
+} from './types';