panelui-native 0.4.0 → 0.5.1

package/src/components/accordion/index.tsx

@@ -0,0 +1,344 @@
+/**
+ * Accordion — collapsible sections.
+ *
+ * Adapted from: heroui-inc/heroui-native src/components/accordion/
+ * (the Item / Trigger / Indicator / Content anatomy, single vs multiple
+ * selection, the rotating chevron indicator, and layout-transition expand).
+ *
+ * Upstream ships `default` and `surface`; the extra variants here follow the
+ * same slot structure.
+ */
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { Pressable, View, type Text as RNText, type ViewProps } from 'react-native';
+import Animated, {
+  LinearTransition,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { ChevronDownIcon } from '../../icons';
+import { Text, type TextProps } from '../../primitives/text';
+
+export type AccordionVariant =
+  | 'default'
+  | 'surface'
+  | 'separated'
+  | 'bordered'
+  | 'ghost';
+
+export type AccordionSelectionMode = 'single' | 'multiple';
+
+const accordionVariants = tv({
+  slots: {
+    root: 'w-full flex-col overflow-hidden',
+    separator: 'h-px bg-border',
+    item: 'flex-col overflow-hidden',
+    trigger: 'flex-row items-center justify-between gap-4 py-4',
+    title: 'flex-1 text-base font-medium text-foreground',
+    indicator: 'items-center justify-center',
+    content: 'pb-4',
+    contentText: 'text-sm text-muted-foreground',
+  },
+  variants: {
+    variant: {
+      default: { trigger: 'px-1', content: 'px-1' },
+      surface: {
+        root: 'rounded-2xl border border-border bg-surface',
+        separator: 'mx-4',
+        trigger: 'px-4',
+        content: 'px-4',
+      },
+      separated: {
+        root: 'gap-2.5 overflow-visible',
+        separator: 'hidden',
+        item: 'rounded-xl border border-border bg-card',
+        trigger: 'px-4',
+        content: 'px-4',
+      },
+      bordered: {
+        separator: 'hidden',
+        item: 'mb-2 rounded-xl border border-border',
+        trigger: 'px-4',
+        content: 'px-4',
+      },
+      ghost: {
+        separator: 'hidden',
+        trigger: 'px-0',
+        content: 'px-0',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+interface AccordionContextValue {
+  expanded: string[];
+  toggle: (value: string) => void;
+  variant: AccordionVariant;
+}
+
+interface AccordionItemContextValue {
+  value: string;
+  isExpanded: boolean;
+  isDisabled: boolean;
+}
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+const AccordionItemContext = createContext<AccordionItemContextValue | null>(null);
+
+function useAccordion(component: string): AccordionContextValue {
+  const context = useContext(AccordionContext);
+  if (!context) throw new Error(`${component} must be used within an <Accordion>`);
+  return context;
+}
+
+function useAccordionItem(component: string): AccordionItemContextValue {
+  const context = useContext(AccordionItemContext);
+  if (!context) throw new Error(`${component} must be used within an <Accordion.Item>`);
+  return context;
+}
+
+export interface AccordionProps extends ViewProps {
+  className?: string;
+  variant?: AccordionVariant;
+  /** `single` collapses the open item when another opens. */
+  selectionMode?: AccordionSelectionMode;
+  /** Expanded item value(s), controlled. */
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  /** Hide the hairlines drawn between items. */
+  hideSeparator?: boolean;
+  children?: ReactNode;
+}
+
+const toArray = (value: string | string[] | undefined): string[] =>
+  value === undefined ? [] : Array.isArray(value) ? value : [value];
+
+const AccordionRoot = forwardRef<View, AccordionProps>(
+  (
+    {
+      className,
+      variant = 'default',
+      selectionMode = 'single',
+      value,
+      defaultValue,
+      onValueChange,
+      hideSeparator = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internal, setInternal] = useState<string[]>(() => toArray(defaultValue));
+    const isControlled = value !== undefined;
+    const expanded = isControlled ? toArray(value) : internal;
+
+    const toggle = useCallback(
+      (itemValue: string) => {
+        const isOpen = expanded.includes(itemValue);
+        const next =
+          selectionMode === 'single'
+            ? isOpen
+              ? []
+              : [itemValue]
+            : isOpen
+              ? expanded.filter((entry) => entry !== itemValue)
+              : [...expanded, itemValue];
+
+        if (!isControlled) setInternal(next);
+        // Hand back the shape the caller gave us.
+        onValueChange?.(selectionMode === 'single' ? (next[0] ?? '') : next);
+      },
+      [expanded, selectionMode, isControlled, onValueChange]
+    );
+
+    const context = useMemo(
+      () => ({ expanded, toggle, variant }),
+      [expanded, toggle, variant]
+    );
+
+    const { root, separator } = accordionVariants({ variant });
+    const items = Children.toArray(children).filter(isValidElement);
+
+    return (
+      <AccordionContext.Provider value={context}>
+        <Animated.View
+          ref={ref}
+          layout={LinearTransition.duration(200)}
+          className={root({ className })}
+          {...props}
+        >
+          {items.map((child, index) => (
+            <View key={child.key ?? index}>
+              {child}
+              {!hideSeparator && index < items.length - 1 ? (
+                <View className={separator()} />
+              ) : null}
+            </View>
+          ))}
+        </Animated.View>
+      </AccordionContext.Provider>
+    );
+  }
+);
+AccordionRoot.displayName = 'Accordion';
+
+export interface AccordionItemProps extends ViewProps {
+  className?: string;
+  /** Identifies this item in the accordion's value. */
+  value: string;
+  isDisabled?: boolean;
+  children?: ReactNode;
+}
+
+const AccordionItem = forwardRef<View, AccordionItemProps>(
+  ({ className, value, isDisabled = false, children, ...props }, ref) => {
+    const { expanded, variant } = useAccordion('Accordion.Item');
+    const isExpanded = expanded.includes(value);
+    const { item } = accordionVariants({ variant });
+
+    const context = useMemo(
+      () => ({ value, isExpanded, isDisabled }),
+      [value, isExpanded, isDisabled]
+    );
+
+    return (
+      <AccordionItemContext.Provider value={context}>
+        <Animated.View
+          ref={ref}
+          layout={LinearTransition.duration(200)}
+          className={item({ className })}
+          {...props}
+        >
+          {children}
+        </Animated.View>
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+AccordionItem.displayName = 'Accordion.Item';
+
+export interface AccordionTriggerProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/** The pressable header row. Bare strings are wrapped in the title style. */
+const AccordionTrigger = forwardRef<View, AccordionTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    const { toggle, variant } = useAccordion('Accordion.Trigger');
+    const { value, isExpanded, isDisabled } = useAccordionItem('Accordion.Trigger');
+    const { trigger, title } = accordionVariants({ variant });
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isExpanded, disabled: isDisabled }}
+        disabled={isDisabled}
+        onPress={() => toggle(value)}
+        className={trigger({ className })}
+        {...props}
+      >
+        {typeof children === 'string' ? (
+          <Text className={title()}>{children}</Text>
+        ) : (
+          children
+        )}
+      </Pressable>
+    );
+  }
+);
+AccordionTrigger.displayName = 'Accordion.Trigger';
+
+export interface AccordionIndicatorProps extends ViewProps {
+  className?: string;
+  /** Replaces the default chevron. */
+  children?: ReactNode;
+}
+
+/** Chevron that rotates 180° while the item is open. */
+const AccordionIndicator = forwardRef<View, AccordionIndicatorProps>(
+  ({ className, children, ...props }, ref) => {
+    const { variant } = useAccordion('Accordion.Indicator');
+    const { isExpanded } = useAccordionItem('Accordion.Indicator');
+    const { indicator } = accordionVariants({ variant });
+
+    const rotation = useDerivedValue(
+      () => withTiming(isExpanded ? 180 : 0, { duration: 200 }),
+      [isExpanded]
+    );
+    const style = useAnimatedStyle(() => ({
+      transform: [{ rotate: `${rotation.value}deg` }],
+    }));
+
+    return (
+      <Animated.View style={style}>
+        <View ref={ref} className={indicator({ className })} {...props}>
+          {children ?? <ChevronDownIcon size={18} />}
+        </View>
+      </Animated.View>
+    );
+  }
+);
+AccordionIndicator.displayName = 'Accordion.Indicator';
+
+export interface AccordionContentProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * The collapsible body. Unmounts when closed, per the repo's convention for
+ * conditionally shown content — the layout transition on the item animates
+ * the height change.
+ */
+const AccordionContent = forwardRef<View, AccordionContentProps>(
+  ({ className, children, ...props }, ref) => {
+    const { variant } = useAccordion('Accordion.Content');
+    const { isExpanded } = useAccordionItem('Accordion.Content');
+    const { content, contentText } = accordionVariants({ variant });
+
+    if (!isExpanded) return null;
+
+    return (
+      <View ref={ref} className={content({ className })} {...props}>
+        {typeof children === 'string' ? (
+          <Text className={contentText()}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  }
+);
+AccordionContent.displayName = 'Accordion.Content';
+
+const AccordionTitle = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
+  const { variant } = useAccordion('Accordion.Title');
+  const { title } = accordionVariants({ variant });
+  return <Text ref={ref} className={title({ className })} {...props} />;
+});
+AccordionTitle.displayName = 'Accordion.Title';
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Title: AccordionTitle,
+  Indicator: AccordionIndicator,
+  Content: AccordionContent,
+});

package/src/components/avatar/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, type ReactNode } from 'react';
 import {
   Image,
   View,
@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { Text } from '../../primitives/text';
+import { cn } from '../../utils/cn';
 
 const avatarVariants = tv({
   slots: {
@@ -37,32 +38,79 @@ export interface AvatarProps extends ViewProps, VariantProps<typeof avatarVarian
   imageProps?: Omit<ImageProps, 'source'>;
 }
 
-export const Avatar = forwardRef<View, AvatarProps>(
-  ({ className, size, source, fallback, imageProps, ...props }, ref) => {
+const AvatarRoot = forwardRef<View, AvatarProps>(
+  ({ className, size, source, fallback, imageProps, children, ...props }, ref) => {
     const [errored, setErrored] = useState(false);
     const { root, image, fallback: fallbackSlot } = avatarVariants({ size });
     const showImage = !!source && !errored;
 
+    const face = showImage ? (
+      <Image
+        source={source}
+        onError={() => setErrored(true)}
+        className={image()}
+        {...imageProps}
+      />
+    ) : (
+      <Text className={fallbackSlot()}>{fallback ?? '?'}</Text>
+    );
+
+    // The plain avatar is a single clipped node.
+    if (!children) {
+      return (
+        <View
+          ref={ref}
+          accessibilityRole="image"
+          className={root({ className })}
+          {...props}
+        >
+          {face}
+        </View>
+      );
+    }
+
+    // With an overlay it needs two: the face keeps overflow-hidden to round
+    // the image, which would otherwise cut a corner badge in half, so the
+    // overlay hangs off an unclipped wrapper around it.
     return (
-      <View
-        ref={ref}
-        accessibilityRole="image"
-        className={root({ className })}
-        {...props}
-      >
-        {showImage ? (
-          <Image
-            source={source}
-            onError={() => setErrored(true)}
-            className={image()}
-            {...imageProps}
-          />
-        ) : (
-          <Text className={fallbackSlot()}>{fallback ?? '?'}</Text>
-        )}
+      <View ref={ref} className={cn('self-start', className)} {...props}>
+        <View accessibilityRole="image" className={root()}>
+          {face}
+        </View>
+        {children}
       </View>
     );
   }
 );
+AvatarRoot.displayName = 'Avatar';
 
-Avatar.displayName = 'Avatar';
+export interface AvatarBadgeProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Overlay pinned to the avatar's top-right — an unread count, a presence dot.
+ *
+ * The ring is `border-background` so the badge separates from the image
+ * whatever surface the avatar sits on.
+ */
+const AvatarBadge = forwardRef<View, AvatarBadgeProps>(
+  ({ className, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        'absolute -right-1 -top-1 rounded-full border-2 border-background',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+);
+AvatarBadge.displayName = 'Avatar.Badge';
+
+export const Avatar = Object.assign(AvatarRoot, {
+  Badge: AvatarBadge,
+});

package/src/components/badge/index.tsx

@@ -9,6 +9,13 @@ const badgeVariants = tv({
     label: 'text-xs font-medium',
   },
   variants: {
+    shape: {
+      default: {},
+      /** A bare status dot, no label. */
+      dot: { root: 'h-2 w-2 rounded-full px-0 py-0' },
+      /** Circular, for a count sitting over an avatar or an icon. */
+      count: { root: 'h-5 min-w-5 rounded-full px-1.5 py-0' },
+    },
     variant: {
       default: { root: 'bg-primary', label: 'text-primary-foreground' },
       secondary: { root: 'bg-secondary', label: 'text-secondary-foreground' },
@@ -21,27 +28,49 @@ const badgeVariants = tv({
   },
   defaultVariants: {
     variant: 'default',
+    shape: 'default',
   },
 });
 
+/** Counts past this render as "99+" so the badge keeps its shape. */
+const MAX_COUNT = 99;
+
 export interface BadgeProps
   extends ViewProps,
     VariantProps<typeof badgeVariants> {
   children?: ReactNode;
   className?: string;
   labelClassName?: string;
+  /**
+   * Renders a number instead of children, clamped to "99+". Implies the
+   * `count` shape unless you set one.
+   */
+  count?: number;
 }
 
 export const Badge = forwardRef<View, BadgeProps>(
-  ({ children, className, labelClassName, variant, ...props }, ref) => {
-    const { root, label } = badgeVariants({ variant });
+  ({ children, className, labelClassName, variant, shape, count, ...props }, ref) => {
+    const resolvedShape = shape ?? (count !== undefined ? 'count' : 'default');
+    const { root, label } = badgeVariants({ variant, shape: resolvedShape });
+
+    const content =
+      count !== undefined
+        ? `${Math.min(count, MAX_COUNT)}${count > MAX_COUNT ? '+' : ''}`
+        : children;
 
     return (
-      <View ref={ref} className={root({ className })} {...props}>
-        {typeof children === 'string' ? (
-          <Text className={label({ className: labelClassName })}>{children}</Text>
+      <View
+        ref={ref}
+        accessibilityLabel={
+          count !== undefined ? `${count} unread` : undefined
+        }
+        className={root({ className })}
+        {...props}
+      >
+        {resolvedShape === 'dot' ? null : typeof content === 'string' ? (
+          <Text className={label({ className: labelClassName })}>{content}</Text>
         ) : (
-          children
+          content
         )}
       </View>
     );

package/src/components/button/index.tsx

@@ -1,11 +1,13 @@
 import { forwardRef, type ReactNode } from 'react';
 import type { View } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
 import {
   AnimatedPressable,
   type AnimatedPressableProps,
 } from '../../primitives/animated-pressable';
 import { Text } from '../../primitives/text';
+import { IconColorProvider } from '../../icons';
 import { Spinner } from '../spinner';
 
 const buttonVariants = tv({
@@ -41,6 +43,12 @@ const buttonVariants = tv({
         label: 'text-white',
         spinner: 'border-white/32 border-t-white',
       },
+      /** Neutral surface for third-party sign-in, sized for a full-width stack. */
+      social: {
+        root: 'border-input bg-card shadow-sm',
+        label: 'text-foreground',
+        spinner: 'border-muted border-t-foreground',
+      },
     },
     size: {
       sm: { root: 'h-9 gap-1.5 px-2.5', label: 'text-sm' },
@@ -65,6 +73,24 @@ type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 
 const SPINNER_SIZE = { sm: 'sm', md: 'sm', lg: 'md', icon: 'sm' } as const;
 
+/**
+ * The theme token each variant's content reads against. Icons in the content
+ * slots inherit the resolved value, so they follow the theme automatically.
+ *
+ * `destructive` is absent on purpose: its background is a saturated red in
+ * every theme, so its content is always white rather than a themed token.
+ */
+const CONTENT_COLOR_VAR: Record<
+  Exclude<NonNullable<ButtonVariantProps['variant']>, 'destructive'>,
+  string
+> = {
+  primary: '--color-primary-foreground',
+  secondary: '--color-secondary-foreground',
+  outline: '--color-foreground',
+  ghost: '--color-foreground',
+  social: '--color-foreground',
+};
+
 export interface ButtonProps
   extends Omit<AnimatedPressableProps, 'children' | 'disabled'>,
     Omit<ButtonVariantProps, 'disabled'> {
@@ -105,27 +131,44 @@ export const Button = forwardRef<View, ButtonProps>(
       disabled: isDisabled,
     });
 
+    // Icons in the content slots inherit this, so they stay legible when the
+    // theme inverts the button's background. Without it every caller has to
+    // hardcode a hex that is wrong in one theme or the other.
+    const themedColor = useCSSVariable(
+      CONTENT_COLOR_VAR[
+        variant === 'destructive' ? 'primary' : (variant ?? 'primary')
+      ]
+    );
+    const contentColor =
+      variant === 'destructive'
+        ? '#ffffff'
+        : typeof themedColor === 'string'
+          ? themedColor
+          : undefined;
+
     return (
-      <AnimatedPressable
-        ref={ref}
-        accessibilityRole="button"
-        accessibilityState={{ disabled: isDisabled, busy: loading }}
-        disabled={isDisabled}
-        className={root({ className })}
-        {...props}
-      >
-        {loading ? (
-          <Spinner size={SPINNER_SIZE[size ?? 'md']} className={spinner()} />
-        ) : (
-          startContent
-        )}
-        {typeof children === 'string' ? (
-          <Text className={label({ className: labelClassName })}>{children}</Text>
-        ) : (
-          children
-        )}
-        {endContent}
-      </AnimatedPressable>
+      <IconColorProvider color={contentColor}>
+        <AnimatedPressable
+          ref={ref}
+          accessibilityRole="button"
+          accessibilityState={{ disabled: isDisabled, busy: loading }}
+          disabled={isDisabled}
+          className={root({ className })}
+          {...props}
+        >
+          {loading ? (
+            <Spinner size={SPINNER_SIZE[size ?? 'md']} className={spinner()} />
+          ) : (
+            startContent
+          )}
+          {typeof children === 'string' ? (
+            <Text className={label({ className: labelClassName })}>{children}</Text>
+          ) : (
+            children
+          )}
+          {endContent}
+        </AnimatedPressable>
+      </IconColorProvider>
     );
   }
 );