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

package/src/table/styles.ts

@@ -1,12 +1,12 @@
-import { tv } from 'tailwind-variants';
-
-export const tableStyle = tv({ base: 'w-full flex-col', variants: {} });
-export const tableHeadStyle = tv({ base: 'flex-col bg-background-50', variants: {} });
-export const tableBodyStyle = tv({ base: 'flex-col', variants: {} });
-export const tableFooterStyle = tv({ base: 'bg-background-50', variants: {} });
-export const tableRowStyle = tv({ base: 'flex-row border-b border-outline-100', variants: {} });
-export const tableCellStyle = tv({ base: 'flex-1 px-4 py-3 justify-center', variants: {} });
-export const tableHeaderCellStyle = tv({ base: 'flex-1 px-4 py-3 justify-center', variants: {} });
-export const tableHeaderCellTextStyle = tv({ base: 'text-xs font-semibold text-typography-500 uppercase', variants: {} });
-export const tableCellTextStyle = tv({ base: 'text-sm text-typography-700', variants: {} });
-export const tableCaptionStyle = tv({ base: 'text-sm text-typography-400 py-3 text-center', variants: {} });
+import { tv } from 'tailwind-variants';
+
+export const tableStyle = tv({ base: 'w-full flex-col', variants: {} });
+export const tableHeadStyle = tv({ base: 'flex-col bg-background-50', variants: {} });
+export const tableBodyStyle = tv({ base: 'flex-col', variants: {} });
+export const tableFooterStyle = tv({ base: 'bg-background-50', variants: {} });
+export const tableRowStyle = tv({ base: 'flex-row border-b border-outline-100', variants: {} });
+export const tableCellStyle = tv({ base: 'flex-1 px-4 py-3 justify-center', variants: {} });
+export const tableHeaderCellStyle = tv({ base: 'flex-1 px-4 py-3 justify-center', variants: {} });
+export const tableHeaderCellTextStyle = tv({ base: 'text-xs font-semibold text-typography-500 uppercase', variants: {} });
+export const tableCellTextStyle = tv({ base: 'text-sm text-typography-700', variants: {} });
+export const tableCaptionStyle = tv({ base: 'text-sm text-typography-400 py-3 text-center', variants: {} });

package/src/table/table.tsx

@@ -1,52 +1,52 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import type { TableProps, TableHeadProps, TableBodyProps, TableFooterProps, TableRowProps, TableCellProps, TableHeaderCellProps, TableCaptionProps } from './types';
-import { tableStyle, tableHeadStyle, tableBodyStyle, tableFooterStyle, tableRowStyle, tableCellStyle, tableHeaderCellStyle, tableHeaderCellTextStyle, tableCellTextStyle, tableCaptionStyle } from './styles';
-
-export const Table = React.forwardRef<React.ElementRef<typeof View>, TableProps>(({ className, ...props }, ref) => {
-  return <View ref={ref} className={tableStyle({ class: className })} {...props} />;
-});
-Table.displayName = 'Table';
-
-export const TableHead = React.forwardRef<React.ElementRef<typeof View>, TableHeadProps>(({ className, ...props }, ref) => {
-  return <View ref={ref} className={tableHeadStyle({ class: className })} {...props} />;
-});
-TableHead.displayName = 'TableHead';
-
-export const TableBody = React.forwardRef<React.ElementRef<typeof View>, TableBodyProps>(({ className, ...props }, ref) => {
-  return <View ref={ref} className={tableBodyStyle({ class: className })} {...props} />;
-});
-TableBody.displayName = 'TableBody';
-
-export const TableFooter = React.forwardRef<React.ElementRef<typeof View>, TableFooterProps>(({ className, ...props }, ref) => {
-  return <View ref={ref} className={tableFooterStyle({ class: className })} {...props} />;
-});
-TableFooter.displayName = 'TableFooter';
-
-export const TableRow = React.forwardRef<React.ElementRef<typeof View>, TableRowProps>(({ className, ...props }, ref) => {
-  return <View ref={ref} className={tableRowStyle({ class: className })} {...props} />;
-});
-TableRow.displayName = 'TableRow';
-
-export const TableCell = React.forwardRef<React.ElementRef<typeof View>, TableCellProps>(({ className, children, ...props }, ref) => {
-  return (
-    <View ref={ref} className={tableCellStyle({ class: className })} {...props}>
-      {typeof children === 'string' ? <Text className={tableCellTextStyle({})}>{children}</Text> : children}
-    </View>
-  );
-});
-TableCell.displayName = 'TableCell';
-
-export const TableHeaderCell = React.forwardRef<React.ElementRef<typeof View>, TableHeaderCellProps>(({ className, children, ...props }, ref) => {
-  return (
-    <View ref={ref} className={tableHeaderCellStyle({ class: className })} {...props}>
-      {typeof children === 'string' ? <Text className={tableHeaderCellTextStyle({})}>{children}</Text> : children}
-    </View>
-  );
-});
-TableHeaderCell.displayName = 'TableHeaderCell';
-
-export const TableCaption = React.forwardRef<React.ElementRef<typeof Text>, TableCaptionProps>(({ className, ...props }, ref) => {
-  return <Text ref={ref} className={tableCaptionStyle({ class: className })} {...props} />;
-});
-TableCaption.displayName = 'TableCaption';
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { TableProps, TableHeadProps, TableBodyProps, TableFooterProps, TableRowProps, TableCellProps, TableHeaderCellProps, TableCaptionProps } from './types';
+import { tableStyle, tableHeadStyle, tableBodyStyle, tableFooterStyle, tableRowStyle, tableCellStyle, tableHeaderCellStyle, tableHeaderCellTextStyle, tableCellTextStyle, tableCaptionStyle } from './styles';
+
+export const Table = React.forwardRef<React.ElementRef<typeof View>, TableProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={tableStyle({ class: className })} {...props} />;
+});
+Table.displayName = 'Table';
+
+export const TableHead = React.forwardRef<React.ElementRef<typeof View>, TableHeadProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={tableHeadStyle({ class: className })} {...props} />;
+});
+TableHead.displayName = 'TableHead';
+
+export const TableBody = React.forwardRef<React.ElementRef<typeof View>, TableBodyProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={tableBodyStyle({ class: className })} {...props} />;
+});
+TableBody.displayName = 'TableBody';
+
+export const TableFooter = React.forwardRef<React.ElementRef<typeof View>, TableFooterProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={tableFooterStyle({ class: className })} {...props} />;
+});
+TableFooter.displayName = 'TableFooter';
+
+export const TableRow = React.forwardRef<React.ElementRef<typeof View>, TableRowProps>(({ className, ...props }, ref) => {
+  return <View ref={ref} className={tableRowStyle({ class: className })} {...props} />;
+});
+TableRow.displayName = 'TableRow';
+
+export const TableCell = React.forwardRef<React.ElementRef<typeof View>, TableCellProps>(({ className, children, ...props }, ref) => {
+  return (
+    <View ref={ref} className={tableCellStyle({ class: className })} {...props}>
+      {typeof children === 'string' ? <Text className={tableCellTextStyle({})}>{children}</Text> : children}
+    </View>
+  );
+});
+TableCell.displayName = 'TableCell';
+
+export const TableHeaderCell = React.forwardRef<React.ElementRef<typeof View>, TableHeaderCellProps>(({ className, children, ...props }, ref) => {
+  return (
+    <View ref={ref} className={tableHeaderCellStyle({ class: className })} {...props}>
+      {typeof children === 'string' ? <Text className={tableHeaderCellTextStyle({})}>{children}</Text> : children}
+    </View>
+  );
+});
+TableHeaderCell.displayName = 'TableHeaderCell';
+
+export const TableCaption = React.forwardRef<React.ElementRef<typeof Text>, TableCaptionProps>(({ className, ...props }, ref) => {
+  return <Text ref={ref} className={tableCaptionStyle({ class: className })} {...props} />;
+});
+TableCaption.displayName = 'TableCaption';

package/src/table/types.ts

@@ -1,10 +1,10 @@
-import type { View, Text as RNText } from 'react-native';
-
-export interface TableProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface TableHeadProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface TableBodyProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface TableFooterProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface TableRowProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface TableCellProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface TableHeaderCellProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
-export interface TableCaptionProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }
+import type { View, Text as RNText } from 'react-native';
+
+export interface TableProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableHeadProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableBodyProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableFooterProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableRowProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableCellProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableHeaderCellProps extends React.ComponentPropsWithoutRef<typeof View> { className?: string; }
+export interface TableCaptionProps extends React.ComponentPropsWithoutRef<typeof RNText> { className?: string; }

package/src/tabs/index.ts

@@ -1,18 +1,18 @@
-export { Tabs, TabsProvider, useTabsContext } from './tabs';
-export { TabList } from './tab-list';
-export { Tab, TabProvider, useTabContext } from './tab';
-export { TabText } from './tab-text';
-export { TabPanels } from './tab-panels';
-export { TabPanel } from './tab-panel';
-
-export type {
-  TabsProps,
-  TabListProps,
-  TabProps,
-  TabTextProps,
-  TabPanelsProps,
-  TabPanelProps,
-  TabsVariant,
-  TabsSize,
-  TabsContextValue,
-} from './types';
+export { Tabs, TabsProvider, useTabsContext } from './tabs';
+export { TabList } from './tab-list';
+export { Tab, TabProvider, useTabContext } from './tab';
+export { TabText } from './tab-text';
+export { TabPanels } from './tab-panels';
+export { TabPanel } from './tab-panel';
+
+export type {
+  TabsProps,
+  TabListProps,
+  TabProps,
+  TabTextProps,
+  TabPanelsProps,
+  TabPanelProps,
+  TabsVariant,
+  TabsSize,
+  TabsContextValue,
+} from './types';

package/src/tabs/styles.ts

@@ -1,113 +1,113 @@
-import { tv } from 'tailwind-variants';
-
-export const tabsStyle = tv({
-  base: 'w-full',
-});
-
-export const tabListStyle = tv({
-  base: 'flex-row',
-  variants: {
-    orientation: {
-      horizontal: 'flex-row',
-      vertical: 'flex-col',
-    },
-    variant: {
-      underlined: 'border-b border-outline-200',
-      outline: 'gap-1',
-      rounded: 'bg-background-100 rounded-lg p-0.5 gap-0.5',
-    },
-  },
-  defaultVariants: {
-    orientation: 'horizontal',
-    variant: 'underlined',
-  },
-});
-
-export const tabStyle = tv({
-  base: 'items-center justify-center',
-  variants: {
-    size: {
-      sm: 'px-3 py-1.5',
-      md: 'px-4 py-2',
-      lg: 'px-5 py-2.5',
-    },
-    variant: {
-      underlined: '',
-      outline: '',
-      rounded: '',
-    },
-    active: {
-      true: '',
-      false: '',
-    },
-    isFitted: {
-      true: 'flex-1',
-      false: '',
-    },
-  },
-  compoundVariants: [
-    {
-      variant: 'underlined',
-      active: true,
-      class: 'border-b-2 border-primary-500',
-    },
-    {
-      variant: 'underlined',
-      active: false,
-      class: 'border-b-2 border-transparent',
-    },
-    {
-      variant: 'outline',
-      active: true,
-      class: 'border border-outline-300 rounded-md bg-background-0',
-    },
-    {
-      variant: 'outline',
-      active: false,
-      class: 'bg-transparent',
-    },
-    {
-      variant: 'rounded',
-      active: true,
-      class: 'bg-background-0 rounded-md shadow-hard-5',
-    },
-    {
-      variant: 'rounded',
-      active: false,
-      class: 'bg-transparent',
-    },
-  ],
-  defaultVariants: {
-    size: 'md',
-    variant: 'underlined',
-    active: false,
-    isFitted: false,
-  },
-});
-
-export const tabTextStyle = tv({
-  base: 'font-medium',
-  variants: {
-    size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
-    },
-    active: {
-      true: 'text-typography-900',
-      false: 'text-typography-500',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-    active: false,
-  },
-});
-
-export const tabPanelsStyle = tv({
-  base: 'mt-3',
-});
-
-export const tabPanelStyle = tv({
-  base: '',
-});
+import { tv } from 'tailwind-variants';
+
+export const tabsStyle = tv({
+  base: 'w-full',
+});
+
+export const tabListStyle = tv({
+  base: 'flex-row',
+  variants: {
+    orientation: {
+      horizontal: 'flex-row',
+      vertical: 'flex-col',
+    },
+    variant: {
+      underlined: 'border-b border-outline-200',
+      outline: 'gap-1',
+      rounded: 'bg-background-100 rounded-lg p-0.5 gap-0.5',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'underlined',
+  },
+});
+
+export const tabStyle = tv({
+  base: 'items-center justify-center',
+  variants: {
+    size: {
+      sm: 'px-3 py-1.5',
+      md: 'px-4 py-2',
+      lg: 'px-5 py-2.5',
+    },
+    variant: {
+      underlined: '',
+      outline: '',
+      rounded: '',
+    },
+    active: {
+      true: '',
+      false: '',
+    },
+    isFitted: {
+      true: 'flex-1',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'underlined',
+      active: true,
+      class: 'border-b-2 border-primary-500',
+    },
+    {
+      variant: 'underlined',
+      active: false,
+      class: 'border-b-2 border-transparent',
+    },
+    {
+      variant: 'outline',
+      active: true,
+      class: 'border border-outline-300 rounded-md bg-background-0',
+    },
+    {
+      variant: 'outline',
+      active: false,
+      class: 'bg-transparent',
+    },
+    {
+      variant: 'rounded',
+      active: true,
+      class: 'bg-background-0 rounded-md shadow-hard-5',
+    },
+    {
+      variant: 'rounded',
+      active: false,
+      class: 'bg-transparent',
+    },
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'underlined',
+    active: false,
+    isFitted: false,
+  },
+});
+
+export const tabTextStyle = tv({
+  base: 'font-medium',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+    active: {
+      true: 'text-typography-900',
+      false: 'text-typography-500',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    active: false,
+  },
+});
+
+export const tabPanelsStyle = tv({
+  base: 'mt-3',
+});
+
+export const tabPanelStyle = tv({
+  base: '',
+});

package/src/tabs/tab-list.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useTabsContext } from './tabs';
-import type { TabListProps } from './types';
-import { tabListStyle } from './styles';
-
-export const TabList = React.forwardRef<
-  React.ElementRef<typeof View>,
-  TabListProps
->(({ className, children, ...props }, ref) => {
-  const { orientation, variant } = useTabsContext();
-
-  return (
-    <View
-      ref={ref}
-      className={tabListStyle({ orientation, variant, class: className })}
-      {...props}
-    >
-      {React.Children.map(children, (child, index) => {
-        if (React.isValidElement(child)) {
-          return React.cloneElement(child, { _index: index } as any);
-        }
-        return child;
-      })}
-    </View>
-  );
-});
-
-TabList.displayName = 'TabList';
+import React from 'react';
+import { View } from 'react-native';
+import { useTabsContext } from './tabs';
+import type { TabListProps } from './types';
+import { tabListStyle } from './styles';
+
+export const TabList = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TabListProps
+>(({ className, children, ...props }, ref) => {
+  const { orientation, variant } = useTabsContext();
+
+  return (
+    <View
+      ref={ref}
+      className={tabListStyle({ orientation, variant, class: className })}
+      {...props}
+    >
+      {React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { _index: index } as any);
+        }
+        return child;
+      })}
+    </View>
+  );
+});
+
+TabList.displayName = 'TabList';

package/src/tabs/tab-panel.tsx

@@ -1,29 +1,29 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useTabsContext } from './tabs';
-import type { TabPanelProps } from './types';
-import { tabPanelStyle } from './styles';
-
-export const TabPanel = React.forwardRef<
-  React.ElementRef<typeof View>,
-  TabPanelProps
->(({ className, index, children, ...props }, ref) => {
-  const { selectedIndex } = useTabsContext();
-
-  if (index !== selectedIndex) {
-    return null;
-  }
-
-  return (
-    <View
-      ref={ref}
-      className={tabPanelStyle({ class: className })}
-      accessibilityRole="summary"
-      {...props}
-    >
-      {children}
-    </View>
-  );
-});
-
-TabPanel.displayName = 'TabPanel';
+import React from 'react';
+import { View } from 'react-native';
+import { useTabsContext } from './tabs';
+import type { TabPanelProps } from './types';
+import { tabPanelStyle } from './styles';
+
+export const TabPanel = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TabPanelProps
+>(({ className, index, children, ...props }, ref) => {
+  const { selectedIndex } = useTabsContext();
+
+  if (index !== selectedIndex) {
+    return null;
+  }
+
+  return (
+    <View
+      ref={ref}
+      className={tabPanelStyle({ class: className })}
+      accessibilityRole="summary"
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+
+TabPanel.displayName = 'TabPanel';

package/src/tabs/tab-panels.tsx

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

package/src/tabs/tab-text.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useTabsContext } from './tabs';
-import { useTabContext } from './tab';
-import type { TabTextProps } from './types';
-import { tabTextStyle } from './styles';
-
-export const TabText = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  TabTextProps
->(({ className, children, ...props }, ref) => {
-  const { size } = useTabsContext();
-  const { isActive } = useTabContext();
-
-  return (
-    <Text
-      ref={ref}
-      className={tabTextStyle({ size, active: isActive, class: className })}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-});
-
-TabText.displayName = 'TabText';
+import React from 'react';
+import { Text } from 'react-native';
+import { useTabsContext } from './tabs';
+import { useTabContext } from './tab';
+import type { TabTextProps } from './types';
+import { tabTextStyle } from './styles';
+
+export const TabText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  TabTextProps
+>(({ className, children, ...props }, ref) => {
+  const { size } = useTabsContext();
+  const { isActive } = useTabContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={tabTextStyle({ size, active: isActive, class: className })}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
+
+TabText.displayName = 'TabText';