panelui-native 0.16.0 → 0.19.0

package/src/components/bottom-sheet/index.tsx

@@ -24,15 +24,35 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { tv } from 'tailwind-variants';
 import { getNativeUI } from '../../native';
 import { XIcon } from '../../icons';
 import { Portal } from '../../primitives/portal';
+import { Scrim } from '../../primitives/scrim';
 import { cn } from '../../utils/cn';
 
 const SPRING = { damping: 22, stiffness: 280, mass: 0.7 } as const;
 const DISMISS_DISTANCE = 120;
 const DISMISS_VELOCITY = 800;
 
+const sheetVariants = tv({
+  base: 'border border-border bg-popover px-5 pt-2 shadow-lg',
+  variants: {
+    detached: {
+      // Docked: the sheet is continuous with the bottom of the screen, so the
+      // bottom edge is not a real edge and drawing a line along it would be a
+      // rule through the middle of nothing.
+      false: 'rounded-t-3xl border-b-0',
+      // Floating: all four edges are real, so all four are drawn and all four
+      // corners are rounded.
+      true: 'mx-4 mb-6 rounded-3xl',
+    },
+  },
+  defaultVariants: {
+    detached: false,
+  },
+});
+
 interface BottomSheetContextValue {
   open: boolean;
   setOpen: (open: boolean) => void;
@@ -178,6 +198,20 @@ export interface BottomSheetContentProps extends ViewProps {
    * sheet; ignored by the native sheet, which has its own dismiss affordances.
    */
   showClose?: boolean;
+  /**
+   * Float the sheet clear of the screen edges instead of docking it to the
+   * bottom, so it reads as a card laid over the app rather than a drawer
+   * pulled out of it. All four corners round and the bottom border comes back,
+   * since a floating sheet has four real edges where a docked one has three.
+   * Ignored by the native sheet, which the platform positions itself.
+   */
+  detached?: boolean;
+  /**
+   * Frost the screen behind the sheet instead of dimming it, so what is behind
+   * stays legible as shape and colour while losing its detail. Needs the
+   * optional `expo-blur`; without it this dims, rather than failing.
+   */
+  blur?: boolean;
   children?: ReactNode;
 }
 
@@ -185,6 +219,8 @@ function BottomSheetContent({
   className,
   dismissible = true,
   showClose = true,
+  detached = false,
+  blur = false,
   children,
   ...props
 }: BottomSheetContentProps) {
@@ -275,27 +311,29 @@ function BottomSheetContent({
           subtree — re-provide the context so nested consumers keep working. */}
       <BottomSheetContext.Provider value={context}>
         <View className="absolute inset-0 justify-end">
-        <Animated.View
-          entering={FadeIn.duration(180)}
-          exiting={FadeOut.duration(180)}
-          className="absolute inset-0"
-        >
+        <View className="absolute inset-0">
+          {/* Scrim draws the backdrop and its own fade; the Pressable over it
+              is what closes the sheet, since the scrim takes no touches. */}
+          <Scrim blur={blur} />
           <Pressable
             accessibilityLabel="Close sheet"
-            className="flex-1 bg-black/50"
+            className="flex-1"
             onPress={dismissible ? close : undefined}
           />
-        </Animated.View>
+        </View>
         <GestureDetector gesture={pan}>
           <Animated.View
             entering={SlideInDown.springify().damping(22).stiffness(240).mass(0.8)}
             exiting={SlideOutDown.duration(200)}
-            style={[sheetStyle, { paddingBottom: Math.max(insets.bottom, 16) }]}
+            style={[
+              sheetStyle,
+              // A detached sheet's own bottom margin already clears the home
+              // indicator, so it takes plain padding rather than stacking the
+              // inset on top of the gap.
+              { paddingBottom: detached ? 16 : Math.max(insets.bottom, 16) },
+            ]}
             accessibilityViewIsModal
-            className={cn(
-              'rounded-t-3xl border border-b-0 border-border bg-popover px-5 pt-2 shadow-lg',
-              className
-            )}
+            className={sheetVariants({ detached, className })}
             {...props}
           >
             <View className="mb-3 self-center">

package/src/components/checkbox/index.tsx

@@ -8,7 +8,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
-import { CheckIcon } from '../../icons';
+import { CheckIcon, MinusIcon } from '../../icons';
 import { Text } from '../../primitives/text';
 
 const checkboxVariants = tv({
@@ -55,6 +55,14 @@ export interface CheckboxProps extends VariantProps<typeof checkboxVariants> {
   className?: string;
   checked: boolean;
   onCheckedChange?: (checked: boolean) => void;
+  /**
+   * A third, in-between state for a box that governs a group of others — some
+   * on, some off. It fills like a checked box but shows a dash rather than a
+   * tick, and announces itself as `mixed` to a screen reader. Pressing it
+   * resolves the ambiguity by turning the whole group on, so the press reports
+   * `true`. `indeterminate` overrides `checked` for what is drawn.
+   */
+  indeterminate?: boolean;
   disabled?: boolean;
   /** Optional label rendered next to the box; pressing it also toggles. */
   label?: string;
@@ -64,31 +72,45 @@ export interface CheckboxProps extends VariantProps<typeof checkboxVariants> {
 
 export const Checkbox = forwardRef<View, CheckboxProps>(
   (
-    { className, checked, onCheckedChange, disabled, label, description, variant },
+    {
+      className,
+      checked,
+      onCheckedChange,
+      indeterminate,
+      disabled,
+      label,
+      description,
+      variant,
+    },
     ref
   ) => {
-    const progress = useSharedValue(checked ? 1 : 0);
-    const slots = checkboxVariants({ variant, checked, disabled: !!disabled });
+    // The dash and the tick share one fill, so the box is "on" for either —
+    // what changes is the glyph, not whether the fill is shown.
+    const on = checked || !!indeterminate;
+    const progress = useSharedValue(on ? 1 : 0);
+    const slots = checkboxVariants({ variant, checked: on, disabled: !!disabled });
     const checkColor = useCSSVariable('--color-primary-foreground');
 
     useEffect(() => {
-      progress.value = checked
+      progress.value = on
         ? withSpring(1, { damping: 15, stiffness: 300, mass: 0.5 })
         : withTiming(0, { duration: 120 });
-    }, [checked, progress]);
+    }, [on, progress]);
 
     const fillStyle = useAnimatedStyle(() => ({
       opacity: progress.value,
       transform: [{ scale: 0.6 + progress.value * 0.4 }],
     }));
 
+    const glyphColor = typeof checkColor === 'string' ? checkColor : '#fff';
     const box = (
       <View className={slots.box()}>
         <Animated.View style={fillStyle} className={slots.fill()}>
-          <CheckIcon
-            size={12}
-            color={typeof checkColor === 'string' ? checkColor : '#fff'}
-          />
+          {indeterminate ? (
+            <MinusIcon size={12} color={glyphColor} />
+          ) : (
+            <CheckIcon size={12} color={glyphColor} />
+          )}
         </Animated.View>
       </View>
     );
@@ -97,11 +119,17 @@ export const Checkbox = forwardRef<View, CheckboxProps>(
       <Pressable
         ref={ref}
         accessibilityRole="checkbox"
-        accessibilityState={{ checked, disabled: !!disabled }}
+        // `mixed` is the a11y state for a box that governs a partly-on group;
+        // a plain boolean would tell a screen reader the group is fully one way.
+        accessibilityState={{
+          checked: indeterminate ? 'mixed' : checked,
+          disabled: !!disabled,
+        }}
         accessibilityLabel={label}
         accessibilityHint={description}
         disabled={disabled}
-        onPress={() => onCheckedChange?.(!checked)}
+        // An indeterminate box resolves upward: the press turns the group on.
+        onPress={() => onCheckedChange?.(indeterminate ? true : !checked)}
         hitSlop={8}
         // A description makes the row two lines tall — align the box to the
         // label rather than centring it against the whole block.

package/src/components/field/index.tsx

@@ -0,0 +1,329 @@
+/**
+ * Field — the layout and validation-state kit a form control composes into.
+ *
+ * PanelUI's own controls (`Input`, `Checkbox`, `Switch`, `RadioGroup`) already
+ * carry their own label, description and error slot, so the common case needs
+ * no wrapper at all — pass those props straight through. `Field` exists for
+ * what doesn't fit that shape: a horizontal row pairing a control with a
+ * label off to the side (a `Switch` in a settings list), several controls
+ * grouped under one legend, or a rule breaking a long form into sections.
+ *
+ * `invalid` / `disabled` / `required` set on the root flow to `Field.Label`
+ * and `Field.Description` through context, so a multi-field row states its
+ * validity once instead of repeating the prop at every leaf.
+ *
+ * ```tsx
+ * <Field orientation="horizontal">
+ *   <Field.Content>
+ *     <Field.Title>Marketing emails</Field.Title>
+ *     <Field.Description>Product updates, at most weekly.</Field.Description>
+ *   </Field.Content>
+ *   <Switch value={subscribed} onValueChange={setSubscribed} />
+ * </Field>
+ * ```
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type ReactNode,
+} from 'react';
+import { View, type Text as RNText, type ViewProps } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { Text, type TextProps } from '../../primitives/text';
+import { Label, type LabelProps } from '../label';
+import { Separator } from '../separator';
+
+const fieldVariants = tv({
+  slots: {
+    root: 'gap-2',
+    content: 'flex-1 flex-col gap-0.5',
+    description: 'text-sm text-muted-foreground',
+    error: 'gap-1',
+    errorText: 'text-sm text-destructive',
+    bullet: 'flex-row gap-1.5',
+    bulletDot: 'text-sm text-destructive',
+    set: 'gap-4',
+    legend: 'text-foreground',
+    group: 'gap-6',
+    separator: 'flex-row items-center gap-3',
+    separatorLabel: 'text-xs text-muted-foreground',
+    title: 'text-base font-medium text-foreground',
+  },
+  variants: {
+    orientation: {
+      vertical: { root: 'flex-col' },
+      horizontal: { root: 'flex-row items-center justify-between gap-4' },
+    },
+    disabled: {
+      true: { root: 'opacity-[0.64]' },
+    },
+    legendVariant: {
+      legend: { legend: 'text-base font-semibold' },
+      label: { legend: 'text-sm font-medium' },
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+});
+
+interface FieldState {
+  invalid: boolean;
+  disabled: boolean;
+  required: boolean;
+}
+
+const FieldContext = createContext<FieldState>({
+  invalid: false,
+  disabled: false,
+  required: false,
+});
+
+export interface FieldProps extends ViewProps {
+  className?: string;
+  /** `horizontal` puts a label beside the control instead of above it. */
+  orientation?: 'vertical' | 'horizontal';
+  /** Marks every `Field.Label`/`Field.Description` below as invalid. */
+  invalid?: boolean;
+  disabled?: boolean;
+  /** Marks every `Field.Label` below as required, same as `Label`'s own prop. */
+  required?: boolean;
+  children?: ReactNode;
+}
+
+const FieldRoot = forwardRef<View, FieldProps>(
+  (
+    {
+      className,
+      orientation = 'vertical',
+      invalid = false,
+      disabled = false,
+      required = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { root } = fieldVariants({ orientation, disabled });
+    const state = useMemo(
+      () => ({ invalid, disabled, required }),
+      [invalid, disabled, required]
+    );
+
+    return (
+      <FieldContext.Provider value={state}>
+        <View
+          ref={ref}
+          role="group"
+          accessibilityState={{ disabled }}
+          className={root({ className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </FieldContext.Provider>
+    );
+  }
+);
+FieldRoot.displayName = 'Field';
+
+export interface FieldContentProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FieldContent = forwardRef<View, FieldContentProps>(
+  ({ className, ...props }, ref) => {
+    const { content } = fieldVariants();
+    return <View ref={ref} className={content({ className })} {...props} />;
+  }
+);
+FieldContent.displayName = 'Field.Content';
+
+export interface FieldLabelProps extends LabelProps {}
+
+const FieldLabel = forwardRef<View, FieldLabelProps>(
+  ({ isRequired, isInvalid, isDisabled, ...props }, ref) => {
+    const ctx = useContext(FieldContext);
+    return (
+      <Label
+        ref={ref}
+        isRequired={isRequired ?? ctx.required}
+        isInvalid={isInvalid ?? ctx.invalid}
+        isDisabled={isDisabled ?? ctx.disabled}
+        {...props}
+      />
+    );
+  }
+);
+FieldLabel.displayName = 'Field.Label';
+
+export interface FieldDescriptionProps extends TextProps {
+  className?: string;
+}
+
+const FieldDescription = forwardRef<RNText, FieldDescriptionProps>(
+  ({ className, ...props }, ref) => {
+    const { disabled } = useContext(FieldContext);
+    const { description } = fieldVariants({ disabled });
+    return <Text ref={ref} className={description({ className })} {...props} />;
+  }
+);
+FieldDescription.displayName = 'Field.Description';
+
+export interface FieldErrorProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  /**
+   * Error messages to render, deduplicated by message. A single entry renders
+   * as plain text; more than one renders as a bulleted list, since RN has no
+   * `<ul>`. Prefer this over `children` when the messages come from a form's
+   * validation state, which is naturally an array.
+   */
+  errors?: Array<string | { message?: string } | null | undefined>;
+  children?: ReactNode;
+}
+
+const FieldError = forwardRef<View, FieldErrorProps>(
+  ({ className, errors, children, ...props }, ref) => {
+    const messages = useMemo(() => {
+      if (!errors) return null;
+      const seen = new Set<string>();
+      const out: string[] = [];
+      for (const item of errors) {
+        const message = typeof item === 'string' ? item : item?.message;
+        if (message && !seen.has(message)) {
+          seen.add(message);
+          out.push(message);
+        }
+      }
+      return out;
+    }, [errors]);
+
+    const hasContent = messages ? messages.length > 0 : !!children;
+    if (!hasContent) return null;
+
+    const { error, errorText, bullet, bulletDot } = fieldVariants();
+
+    return (
+      <View
+        ref={ref}
+        // Web-aligned `role`, same as `Separator` already uses — RN's older
+        // accessibilityRole list has no alert, the ARIA-aligned one does.
+        role="alert"
+        accessibilityLiveRegion="polite"
+        className={error({ className })}
+        {...props}
+      >
+        {messages ? (
+          messages.length === 1 ? (
+            <Text className={errorText()}>{messages[0]}</Text>
+          ) : (
+            messages.map((message) => (
+              <View key={message} className={bullet()}>
+                <Text className={bulletDot()}>{'•'}</Text>
+                <Text className={errorText()}>{message}</Text>
+              </View>
+            ))
+          )
+        ) : typeof children === 'string' ? (
+          <Text className={errorText()}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  }
+);
+FieldError.displayName = 'Field.Error';
+
+export interface FieldSetProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FieldSet = forwardRef<View, FieldSetProps>(
+  ({ className, ...props }, ref) => {
+    const { set } = fieldVariants();
+    return <View ref={ref} role="group" className={set({ className })} {...props} />;
+  }
+);
+FieldSet.displayName = 'Field.Set';
+
+export interface FieldLegendProps extends TextProps {
+  className?: string;
+  /** `legend` reads as a section heading; `label` sits closer to a field label. */
+  variant?: 'legend' | 'label';
+}
+
+const FieldLegend = forwardRef<RNText, FieldLegendProps>(
+  ({ className, variant = 'legend', ...props }, ref) => {
+    const { legend } = fieldVariants({ legendVariant: variant });
+    return (
+      <Text ref={ref} role="heading" className={legend({ className })} {...props} />
+    );
+  }
+);
+FieldLegend.displayName = 'Field.Legend';
+
+export interface FieldGroupProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FieldGroup = forwardRef<View, FieldGroupProps>(
+  ({ className, ...props }, ref) => {
+    const { group } = fieldVariants();
+    return <View ref={ref} className={group({ className })} {...props} />;
+  }
+);
+FieldGroup.displayName = 'Field.Group';
+
+export interface FieldSeparatorProps extends ViewProps {
+  className?: string;
+  /** Centered text, e.g. "Or" — omit for a plain rule. */
+  children?: ReactNode;
+}
+
+const FieldSeparator = forwardRef<View, FieldSeparatorProps>(
+  ({ className, children, ...props }, ref) => {
+    const { separator, separatorLabel } = fieldVariants();
+    return (
+      <View ref={ref} className={separator({ className })} {...props}>
+        <Separator className="flex-1" />
+        {children ? (
+          <>
+            <Text className={separatorLabel()}>{children}</Text>
+            <Separator className="flex-1" />
+          </>
+        ) : null}
+      </View>
+    );
+  }
+);
+FieldSeparator.displayName = 'Field.Separator';
+
+export interface FieldTitleProps extends TextProps {
+  className?: string;
+}
+
+const FieldTitle = forwardRef<RNText, FieldTitleProps>(
+  ({ className, ...props }, ref) => {
+    const { title } = fieldVariants();
+    return <Text ref={ref} className={title({ className })} {...props} />;
+  }
+);
+FieldTitle.displayName = 'Field.Title';
+
+export const Field = Object.assign(FieldRoot, {
+  Content: FieldContent,
+  Label: FieldLabel,
+  Description: FieldDescription,
+  Error: FieldError,
+  Set: FieldSet,
+  Legend: FieldLegend,
+  Group: FieldGroup,
+  Separator: FieldSeparator,
+  Title: FieldTitle,
+});