panelui-native 0.2.0 → 0.5.1

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,39 +9,68 @@ 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' },
       outline: { root: 'border-border bg-transparent', label: 'text-foreground' },
       destructive: { root: 'bg-destructive', label: 'text-white' },
-      success: { root: 'bg-success/8 dark:bg-success/16', label: 'text-success-foreground' },
-      warning: { root: 'bg-warning/8 dark:bg-warning/16', label: 'text-warning-foreground' },
-      info: { root: 'bg-info/8 dark:bg-info/16', label: 'text-info-foreground' },
+      success: { root: 'bg-success-subtle', label: 'text-success-foreground' },
+      warning: { root: 'bg-warning-subtle', label: 'text-warning-foreground' },
+      info: { root: 'bg-info-subtle', label: 'text-info-foreground' },
     },
   },
   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,38 +1,53 @@
-import { forwardRef, isValidElement, type ReactNode } from 'react';
+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({
   slots: {
     root: 'flex-row items-center justify-center gap-2 rounded-lg border border-transparent',
     label: 'font-medium',
+    spinner: '',
   },
   variants: {
     variant: {
       primary: {
         root: 'border-primary bg-primary shadow-sm',
         label: 'text-primary-foreground',
+        spinner: 'border-primary-foreground/32 border-t-primary-foreground',
       },
       secondary: {
         root: 'bg-secondary',
         label: 'text-secondary-foreground',
+        spinner: 'border-secondary-foreground/24 border-t-secondary-foreground',
       },
       outline: {
         root: 'border-input bg-popover shadow-sm',
         label: 'text-foreground',
+        spinner: 'border-muted border-t-foreground',
       },
       ghost: {
         root: 'bg-transparent',
         label: 'text-foreground',
+        spinner: 'border-muted border-t-foreground',
       },
       destructive: {
         root: 'border-destructive bg-destructive shadow-sm',
         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: {
@@ -41,6 +56,9 @@ const buttonVariants = tv({
       lg: { root: 'h-12 px-6', label: 'text-lg' },
       icon: { root: 'h-11 w-11 px-0' },
     },
+    fullWidth: {
+      true: { root: 'w-full' },
+    },
     disabled: {
       true: { root: 'opacity-[0.64]' },
     },
@@ -53,39 +71,104 @@ const buttonVariants = tv({
 
 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'> {
   children?: ReactNode;
   disabled?: boolean;
+  /** Show a spinner and block presses while an action is in flight. */
+  loading?: boolean;
+  /** Content rendered before the label (replaced by the spinner while loading). */
+  startContent?: ReactNode;
+  /** Content rendered after the label. */
+  endContent?: ReactNode;
   /** Extra classes for the label when children is a string. */
   labelClassName?: string;
 }
 
 export const Button = forwardRef<View, ButtonProps>(
   (
-    { children, className, labelClassName, variant, size, disabled, ...props },
+    {
+      children,
+      className,
+      labelClassName,
+      variant,
+      size,
+      fullWidth,
+      disabled,
+      loading = false,
+      startContent,
+      endContent,
+      ...props
+    },
     ref
   ) => {
-    const { root, label } = buttonVariants({ variant, size, disabled: !!disabled });
+    const isDisabled = disabled || loading;
+    const { root, label, spinner } = buttonVariants({
+      variant,
+      size,
+      fullWidth,
+      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: !!disabled }}
-        disabled={disabled}
-        className={root({ className })}
-        {...props}
-      >
-        {typeof children === 'string' ? (
-          <Text className={label({ className: labelClassName })}>{children}</Text>
-        ) : isValidElement(children) ? (
-          children
-        ) : (
-          children
-        )}
-      </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>
     );
   }
 );

package/src/components/checkbox/index.tsx

@@ -16,13 +16,39 @@ const checkboxVariants = tv({
     row: 'flex-row items-center gap-2.5',
     box: 'h-5 w-5 items-center justify-center rounded-md border border-input bg-background',
     fill: 'absolute inset-0 items-center justify-center rounded-md bg-primary',
+    content: 'flex-1 gap-0.5',
     label: 'text-sm text-foreground',
+    description: 'text-sm text-muted-foreground',
   },
   variants: {
+    variant: {
+      default: {},
+      /**
+       * The whole surface is the target — for pickable options where the
+       * checkbox is a confirmation rather than the affordance itself.
+       */
+      card: {
+        row: 'w-full items-start gap-3 rounded-xl border border-border bg-card p-4',
+        label: 'text-base font-medium',
+      },
+    },
+    checked: {
+      true: {},
+    },
     disabled: {
       true: { row: 'opacity-50' },
     },
   },
+  compoundVariants: [
+    {
+      variant: 'card',
+      checked: true,
+      class: { row: 'border-primary bg-accent' },
+    },
+  ],
+  defaultVariants: {
+    variant: 'default',
+  },
 });
 
 export interface CheckboxProps extends VariantProps<typeof checkboxVariants> {
@@ -32,12 +58,17 @@ export interface CheckboxProps extends VariantProps<typeof checkboxVariants> {
   disabled?: boolean;
   /** Optional label rendered next to the box; pressing it also toggles. */
   label?: string;
+  /** Secondary line under the label, for extra context. */
+  description?: string;
 }
 
 export const Checkbox = forwardRef<View, CheckboxProps>(
-  ({ className, checked, onCheckedChange, disabled, label }, ref) => {
+  (
+    { className, checked, onCheckedChange, disabled, label, description, variant },
+    ref
+  ) => {
     const progress = useSharedValue(checked ? 1 : 0);
-    const slots = checkboxVariants({ disabled: !!disabled });
+    const slots = checkboxVariants({ variant, checked, disabled: !!disabled });
     const checkColor = useCSSVariable('--color-primary-foreground');
 
     useEffect(() => {
@@ -51,26 +82,47 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
       transform: [{ scale: 0.6 + progress.value * 0.4 }],
     }));
 
+    const box = (
+      <View className={slots.box()}>
+        <Animated.View style={fillStyle} className={slots.fill()}>
+          <CheckIcon
+            size={12}
+            color={typeof checkColor === 'string' ? checkColor : '#fff'}
+          />
+        </Animated.View>
+      </View>
+    );
+
     return (
       <Pressable
         ref={ref}
         accessibilityRole="checkbox"
         accessibilityState={{ checked, disabled: !!disabled }}
         accessibilityLabel={label}
+        accessibilityHint={description}
         disabled={disabled}
         onPress={() => onCheckedChange?.(!checked)}
         hitSlop={8}
-        className={slots.row({ className })}
+        // A description makes the row two lines tall — align the box to the
+        // label rather than centring it against the whole block.
+        className={slots.row({
+          className:
+            description && variant !== 'card'
+              ? `items-start ${className ?? ''}`
+              : className,
+        })}
       >
-        <View className={slots.box()}>
-          <Animated.View style={fillStyle} className={slots.fill()}>
-            <CheckIcon
-              size={12}
-              color={typeof checkColor === 'string' ? checkColor : '#fff'}
-            />
-          </Animated.View>
-        </View>
-        {label ? <Text className={slots.label()}>{label}</Text> : null}
+        {/* The card lays out content first so the box sits top-right. */}
+        {variant === 'card' ? null : box}
+        {label || description ? (
+          <View className={slots.content()}>
+            {label ? <Text className={slots.label()}>{label}</Text> : null}
+            {description ? (
+              <Text className={slots.description()}>{description}</Text>
+            ) : null}
+          </View>
+        ) : null}
+        {variant === 'card' ? box : null}
       </Pressable>
     );
   }

package/src/components/empty-state/index.tsx

@@ -0,0 +1,136 @@
+/**
+ * EmptyState — the placeholder shown when a list or view has no content.
+ *
+ * Adapted from: cosscom/coss packages/ui/src/components/empty.tsx
+ * (centered Header / Media / Title / Description / Content anatomy, and the
+ * `icon` media variant that stacks two rotated ghost cards behind the icon).
+ * Coss does that with CSS pseudo-elements; on native it is two absolutely
+ * positioned siblings with static rotate transforms.
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { View, type Text as RNText, type ViewProps } from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
+import { Text, type TextProps } from '../../primitives/text';
+
+const emptyStateVariants = tv({
+  slots: {
+    root: 'w-full flex-1 items-center justify-center gap-6 px-6 py-12',
+    header: 'w-full max-w-sm items-center gap-1',
+    title: 'text-center text-xl font-semibold text-foreground',
+    description: 'text-center text-sm text-muted-foreground',
+    content: 'w-full max-w-sm items-center gap-3',
+  },
+});
+
+const mediaVariants = tv({
+  slots: {
+    wrapper: 'items-center justify-center',
+    card: 'h-9 w-9 shrink-0 items-center justify-center',
+    ghost: 'absolute h-9 w-9 rounded-md border border-border bg-card',
+  },
+  variants: {
+    variant: {
+      default: {
+        card: 'bg-transparent',
+        ghost: 'hidden',
+      },
+      icon: {
+        card: 'rounded-md border border-border bg-card',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export interface EmptyStateProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const EmptyStateRoot = forwardRef<View, EmptyStateProps>(
+  ({ className, ...props }, ref) => {
+    const { root } = emptyStateVariants();
+    return <View ref={ref} className={root({ className })} {...props} />;
+  }
+);
+EmptyStateRoot.displayName = 'EmptyState';
+
+/** Groups Media, Title and Description into one centered column. */
+const EmptyStateHeader = forwardRef<View, EmptyStateProps>(
+  ({ className, ...props }, ref) => {
+    const { header } = emptyStateVariants();
+    return <View ref={ref} className={header({ className })} {...props} />;
+  }
+);
+EmptyStateHeader.displayName = 'EmptyState.Header';
+
+export interface EmptyStateMediaProps
+  extends ViewProps,
+    VariantProps<typeof mediaVariants> {
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Visual anchor above the title. `variant="icon"` frames the child in a small
+ * card with two rotated ghost cards fanned out behind it.
+ */
+const EmptyStateMedia = forwardRef<View, EmptyStateMediaProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    const { wrapper, card, ghost } = mediaVariants({ variant });
+
+    return (
+      <View ref={ref} className={wrapper({ className: `mb-4 ${className ?? ''}` })} {...props}>
+        {variant === 'icon' ? (
+          <>
+            <View
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              className={`${ghost()} -translate-x-2 -rotate-[10deg] scale-90`}
+            />
+            <View
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              className={`${ghost()} translate-x-2 rotate-[10deg] scale-90`}
+            />
+          </>
+        ) : null}
+        <View className={card()}>{children}</View>
+      </View>
+    );
+  }
+);
+EmptyStateMedia.displayName = 'EmptyState.Media';
+
+const EmptyStateTitle = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
+  const { title } = emptyStateVariants();
+  return <Text ref={ref} className={title({ className })} {...props} />;
+});
+EmptyStateTitle.displayName = 'EmptyState.Title';
+
+const EmptyStateDescription = forwardRef<RNText, TextProps>(
+  ({ className, ...props }, ref) => {
+    const { description } = emptyStateVariants();
+    return <Text ref={ref} className={description({ className })} {...props} />;
+  }
+);
+EmptyStateDescription.displayName = 'EmptyState.Description';
+
+/** Slot below the header, for actions such as a primary button. */
+const EmptyStateContent = forwardRef<View, EmptyStateProps>(
+  ({ className, ...props }, ref) => {
+    const { content } = emptyStateVariants();
+    return <View ref={ref} className={content({ className })} {...props} />;
+  }
+);
+EmptyStateContent.displayName = 'EmptyState.Content';
+
+export const EmptyState = Object.assign(EmptyStateRoot, {
+  Header: EmptyStateHeader,
+  Media: EmptyStateMedia,
+  Title: EmptyStateTitle,
+  Description: EmptyStateDescription,
+  Content: EmptyStateContent,
+});