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

package/src/accordion/accordion-item.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import { View } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import { useAccordionContext } from './accordion';
-import type { AccordionItemProps, AccordionItemContextValue } from './types';
-import { accordionItemStyle } from './styles';
-
-export const [AccordionItemProvider, useAccordionItemContext] =
-  createComponentContext<AccordionItemContextValue>('AccordionItem');
-
-export const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof View>,
-  AccordionItemProps
->(({ className, value, children, ...props }, ref) => {
-  const { expandedItems, variant } = useAccordionContext();
-
-  const isExpanded = expandedItems.includes(value);
-
-  const contextValue = React.useMemo<AccordionItemContextValue>(
-    () => ({ value, isExpanded }),
-    [value, isExpanded],
-  );
-
-  return (
-    <AccordionItemProvider value={contextValue}>
-      <View
-        ref={ref}
-        className={accordionItemStyle({ variant, class: className })}
-        {...props}
-      >
-        {children}
-      </View>
-    </AccordionItemProvider>
-  );
-});
-
-AccordionItem.displayName = 'AccordionItem';
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import { useAccordionContext } from './accordion';
+import type { AccordionItemProps, AccordionItemContextValue } from './types';
+import { accordionItemStyle } from './styles';
+
+export const [AccordionItemProvider, useAccordionItemContext] =
+  createComponentContext<AccordionItemContextValue>('AccordionItem');
+
+export const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AccordionItemProps
+>(({ className, value, children, ...props }, ref) => {
+  const { expandedItems, variant } = useAccordionContext();
+
+  const isExpanded = expandedItems.includes(value);
+
+  const contextValue = React.useMemo<AccordionItemContextValue>(
+    () => ({ value, isExpanded }),
+    [value, isExpanded],
+  );
+
+  return (
+    <AccordionItemProvider value={contextValue}>
+      <View
+        ref={ref}
+        className={accordionItemStyle({ variant, class: className })}
+        {...props}
+      >
+        {children}
+      </View>
+    </AccordionItemProvider>
+  );
+});
+
+AccordionItem.displayName = 'AccordionItem';

package/src/accordion/accordion-title-text.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { useAccordionContext } from './accordion';
-import type { AccordionTitleTextProps } from './types';
-import { accordionTitleTextStyle } from './styles';
-
-export const AccordionTitleText = React.forwardRef<
-  React.ElementRef<typeof Text>,
-  AccordionTitleTextProps
->(({ className, children, ...props }, ref) => {
-  const { size } = useAccordionContext();
-
-  return (
-    <Text
-      ref={ref}
-      className={accordionTitleTextStyle({ size, class: className })}
-      {...props}
-    >
-      {children}
-    </Text>
-  );
-});
-
-AccordionTitleText.displayName = 'AccordionTitleText';
+import React from 'react';
+import { Text } from 'react-native';
+import { useAccordionContext } from './accordion';
+import type { AccordionTitleTextProps } from './types';
+import { accordionTitleTextStyle } from './styles';
+
+export const AccordionTitleText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  AccordionTitleTextProps
+>(({ className, children, ...props }, ref) => {
+  const { size } = useAccordionContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={accordionTitleTextStyle({ size, class: className })}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+});
+
+AccordionTitleText.displayName = 'AccordionTitleText';

package/src/accordion/accordion-trigger.tsx

@@ -1,38 +1,38 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import { useAccordionContext } from './accordion';
-import { useAccordionItemContext } from './accordion-item';
-import type { AccordionTriggerProps } from './types';
-import { accordionTriggerStyle } from './styles';
-
-export const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  AccordionTriggerProps
->(({ className, children, onPress, ...props }, ref) => {
-  const { toggleItem, size } = useAccordionContext();
-  const { value } = useAccordionItemContext();
-
-  const handlePress = React.useCallback(
-    (e: any) => {
-      toggleItem(value);
-      onPress?.(e);
-    },
-    [toggleItem, value, onPress],
-  );
-
-  return (
-    <Pressable
-      ref={ref}
-      className={accordionTriggerStyle({ size, class: className })}
-      onPress={handlePress}
-      accessibilityRole="button"
-      {...props}
-    >
-      {typeof children === 'function'
-        ? children({ pressed: false } as any)
-        : children}
-    </Pressable>
-  );
-});
-
-AccordionTrigger.displayName = 'AccordionTrigger';
+import React from 'react';
+import { Pressable } from 'react-native';
+import { useAccordionContext } from './accordion';
+import { useAccordionItemContext } from './accordion-item';
+import type { AccordionTriggerProps } from './types';
+import { accordionTriggerStyle } from './styles';
+
+export const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  AccordionTriggerProps
+>(({ className, children, onPress, ...props }, ref) => {
+  const { toggleItem, size } = useAccordionContext();
+  const { value } = useAccordionItemContext();
+
+  const handlePress = React.useCallback(
+    (e: any) => {
+      toggleItem(value);
+      onPress?.(e);
+    },
+    [toggleItem, value, onPress],
+  );
+
+  return (
+    <Pressable
+      ref={ref}
+      className={accordionTriggerStyle({ size, class: className })}
+      onPress={handlePress}
+      accessibilityRole="button"
+      {...props}
+    >
+      {typeof children === 'function'
+        ? children({ pressed: false } as any)
+        : children}
+    </Pressable>
+  );
+});
+
+AccordionTrigger.displayName = 'AccordionTrigger';

package/src/accordion/accordion.tsx

@@ -1,91 +1,91 @@
-import React from 'react';
-import { View } from 'react-native';
-import { createComponentContext } from '../utils/create-context';
-import type { AccordionProps, AccordionContextValue } from './types';
-import { accordionStyle } from './styles';
-
-export const [AccordionProvider, useAccordionContext] =
-  createComponentContext<AccordionContextValue>('Accordion');
-
-export const Accordion = React.forwardRef<
-  React.ElementRef<typeof View>,
-  AccordionProps
->(
-  (
-    {
-      className,
-      type = 'single',
-      defaultValue = [],
-      value: controlledValue,
-      onValueChange,
-      isCollapsible = true,
-      variant = 'unfilled',
-      size = 'md',
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [uncontrolledValue, setUncontrolledValue] =
-      React.useState<string[]>(defaultValue);
-
-    const isControlled = controlledValue !== undefined;
-    const expandedItems = isControlled ? controlledValue : uncontrolledValue;
-
-    const toggleItem = React.useCallback(
-      (itemValue: string) => {
-        let nextValue: string[];
-
-        if (type === 'single') {
-          if (expandedItems.includes(itemValue)) {
-            // Trying to collapse the currently expanded item
-            nextValue = isCollapsible ? [] : expandedItems;
-          } else {
-            nextValue = [itemValue];
-          }
-        } else {
-          // multiple
-          if (expandedItems.includes(itemValue)) {
-            nextValue = isCollapsible
-              ? expandedItems.filter((v) => v !== itemValue)
-              : expandedItems;
-          } else {
-            nextValue = [...expandedItems, itemValue];
-          }
-        }
-
-        if (!isControlled) {
-          setUncontrolledValue(nextValue);
-        }
-        onValueChange?.(nextValue);
-      },
-      [type, expandedItems, isCollapsible, isControlled, onValueChange],
-    );
-
-    const contextValue = React.useMemo<AccordionContextValue>(
-      () => ({
-        expandedItems,
-        toggleItem,
-        type,
-        isCollapsible,
-        variant,
-        size,
-      }),
-      [expandedItems, toggleItem, type, isCollapsible, variant, size],
-    );
-
-    return (
-      <AccordionProvider value={contextValue}>
-        <View
-          ref={ref}
-          className={accordionStyle({ class: className })}
-          {...props}
-        >
-          {children}
-        </View>
-      </AccordionProvider>
-    );
-  },
-);
-
-Accordion.displayName = 'Accordion';
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { AccordionProps, AccordionContextValue } from './types';
+import { accordionStyle } from './styles';
+
+export const [AccordionProvider, useAccordionContext] =
+  createComponentContext<AccordionContextValue>('Accordion');
+
+export const Accordion = React.forwardRef<
+  React.ElementRef<typeof View>,
+  AccordionProps
+>(
+  (
+    {
+      className,
+      type = 'single',
+      defaultValue = [],
+      value: controlledValue,
+      onValueChange,
+      isCollapsible = true,
+      variant = 'unfilled',
+      size = 'md',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [uncontrolledValue, setUncontrolledValue] =
+      React.useState<string[]>(defaultValue);
+
+    const isControlled = controlledValue !== undefined;
+    const expandedItems = isControlled ? controlledValue : uncontrolledValue;
+
+    const toggleItem = React.useCallback(
+      (itemValue: string) => {
+        let nextValue: string[];
+
+        if (type === 'single') {
+          if (expandedItems.includes(itemValue)) {
+            // Trying to collapse the currently expanded item
+            nextValue = isCollapsible ? [] : expandedItems;
+          } else {
+            nextValue = [itemValue];
+          }
+        } else {
+          // multiple
+          if (expandedItems.includes(itemValue)) {
+            nextValue = isCollapsible
+              ? expandedItems.filter((v) => v !== itemValue)
+              : expandedItems;
+          } else {
+            nextValue = [...expandedItems, itemValue];
+          }
+        }
+
+        if (!isControlled) {
+          setUncontrolledValue(nextValue);
+        }
+        onValueChange?.(nextValue);
+      },
+      [type, expandedItems, isCollapsible, isControlled, onValueChange],
+    );
+
+    const contextValue = React.useMemo<AccordionContextValue>(
+      () => ({
+        expandedItems,
+        toggleItem,
+        type,
+        isCollapsible,
+        variant,
+        size,
+      }),
+      [expandedItems, toggleItem, type, isCollapsible, variant, size],
+    );
+
+    return (
+      <AccordionProvider value={contextValue}>
+        <View
+          ref={ref}
+          className={accordionStyle({ class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </AccordionProvider>
+    );
+  },
+);
+
+Accordion.displayName = 'Accordion';

package/src/accordion/index.ts

@@ -1,24 +1,24 @@
-export { Accordion, AccordionProvider, useAccordionContext } from './accordion';
-export {
-  AccordionItem,
-  AccordionItemProvider,
-  useAccordionItemContext,
-} from './accordion-item';
-export { AccordionTrigger } from './accordion-trigger';
-export { AccordionContent } from './accordion-content';
-export { AccordionIcon } from './accordion-icon';
-export { AccordionTitleText } from './accordion-title-text';
-
-export type {
-  AccordionProps,
-  AccordionItemProps,
-  AccordionTriggerProps,
-  AccordionContentProps,
-  AccordionIconProps,
-  AccordionTitleTextProps,
-  AccordionType,
-  AccordionVariant,
-  AccordionSize,
-  AccordionContextValue,
-  AccordionItemContextValue,
-} from './types';
+export { Accordion, AccordionProvider, useAccordionContext } from './accordion';
+export {
+  AccordionItem,
+  AccordionItemProvider,
+  useAccordionItemContext,
+} from './accordion-item';
+export { AccordionTrigger } from './accordion-trigger';
+export { AccordionContent } from './accordion-content';
+export { AccordionIcon } from './accordion-icon';
+export { AccordionTitleText } from './accordion-title-text';
+
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+  AccordionIconProps,
+  AccordionTitleTextProps,
+  AccordionType,
+  AccordionVariant,
+  AccordionSize,
+  AccordionContextValue,
+  AccordionItemContextValue,
+} from './types';

package/src/accordion/styles.ts

@@ -1,74 +1,74 @@
-import { tv } from 'tailwind-variants';
-
-export const accordionStyle = tv({
-  base: 'w-full',
-});
-
-export const accordionItemStyle = tv({
-  base: 'border-b border-outline-200',
-  variants: {
-    variant: {
-      filled: 'bg-background-50 rounded-lg mb-2 border-0 overflow-hidden',
-      unfilled: '',
-    },
-  },
-  defaultVariants: {
-    variant: 'unfilled',
-  },
-});
-
-export const accordionTriggerStyle = tv({
-  base: 'flex-row items-center justify-between w-full active:bg-background-100',
-  variants: {
-    size: {
-      sm: 'px-3 py-2',
-      md: 'px-4 py-3',
-      lg: 'px-5 py-4',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const accordionTitleTextStyle = tv({
-  base: 'text-typography-900 font-medium flex-1',
-  variants: {
-    size: {
-      sm: 'text-sm',
-      md: 'text-base',
-      lg: 'text-lg',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const accordionIconStyle = tv({
-  base: 'text-typography-500',
-  variants: {
-    size: {
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-5 w-5',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
-
-export const accordionContentStyle = tv({
-  base: 'overflow-hidden',
-  variants: {
-    size: {
-      sm: 'px-3 pb-2',
-      md: 'px-4 pb-3',
-      lg: 'px-5 pb-4',
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-});
+import { tv } from 'tailwind-variants';
+
+export const accordionStyle = tv({
+  base: 'w-full',
+});
+
+export const accordionItemStyle = tv({
+  base: 'border-b border-outline-200',
+  variants: {
+    variant: {
+      filled: 'bg-background-50 rounded-lg mb-2 border-0 overflow-hidden',
+      unfilled: '',
+    },
+  },
+  defaultVariants: {
+    variant: 'unfilled',
+  },
+});
+
+export const accordionTriggerStyle = tv({
+  base: 'flex-row items-center justify-between w-full active:bg-background-100',
+  variants: {
+    size: {
+      sm: 'px-3 py-2',
+      md: 'px-4 py-3',
+      lg: 'px-5 py-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const accordionTitleTextStyle = tv({
+  base: 'text-typography-900 font-medium flex-1',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const accordionIconStyle = tv({
+  base: 'text-typography-500',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const accordionContentStyle = tv({
+  base: 'overflow-hidden',
+  variants: {
+    size: {
+      sm: 'px-3 pb-2',
+      md: 'px-4 pb-3',
+      lg: 'px-5 pb-4',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});