panelui-native 0.66.1 → 0.71.0

package/src/components/candlestick-chart/index.tsx

@@ -70,6 +70,7 @@ import Animated, {
 import Svg, { G, Line as SvgLine, Path } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { bandOf, compactNumber, yOf, type Plot } from '../../utils/chart';
 import { cn } from '../../utils/cn';
 
@@ -234,7 +235,7 @@ function ohlcOf(
   return { open, high, low, close };
 }
 
-export interface CandlestickChartProps extends ViewProps {
+export interface CandlestickChartProps extends ViewProps, ChartAccessibilityProps<CandlestickChartDatum> {
   className?: string;
   /** The rows. Each one is a period along the x-axis. */
   data: CandlestickChartDatum[];
@@ -333,6 +334,11 @@ const CandlestickChartRoot = forwardRef<CandlestickChartHandle, CandlestickChart
       candleWidth,
       fadedOpacity = 0.3,
       onActiveIndexChange,
+      accessible,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityLabelForDatum,
+      onAccessibilityDatumPress,
       compact = false,
       children,
       ...props
@@ -532,7 +538,29 @@ const CandlestickChartRoot = forwardRef<CandlestickChartHandle, CandlestickChart
       <CandlestickChartContext.Provider value={context}>
         <View {...props} style={props.style} className={cn('w-full', className)}>
           {header}
-          <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+          <ChartAccessibilityData
+            chart="Candlestick chart"
+            data={data}
+            disabled={accessible === false || loading}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            accessibilityLabelForDatum={accessibilityLabelForDatum}
+            onAccessibilityDatumPress={onAccessibilityDatumPress}
+            valueOf={(datum) => [
+              [xDataKey, datum[xDataKey]],
+              [openDataKey, datum[openDataKey]],
+              [highDataKey, datum[highDataKey]],
+              [lowDataKey, datum[lowDataKey]],
+              [closeDataKey, datum[closeDataKey]],
+            ]}
+          />
+          <View
+            onLayout={onLayout}
+            style={{ aspectRatio }}
+            className="w-full"
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
             {plot.width > 0 ? (
               <>
                 <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>

package/src/components/collapsible/index.tsx

@@ -0,0 +1,278 @@
+/**
+ * Collapsible — one section of content that a header shows and hides.
+ *
+ * ```tsx
+ * <Collapsible variant="surface">
+ *   <Collapsible.Trigger>
+ *     Delivery options
+ *     <Collapsible.Indicator />
+ *   </Collapsible.Trigger>
+ *   <Collapsible.Content>
+ *     <Text>Anything, of any height.</Text>
+ *   </Collapsible.Content>
+ * </Collapsible>
+ * ```
+ *
+ * ## Why this and not a one-item Accordion
+ *
+ * The two look the same and differ in what happens to the body when it closes.
+ * An accordion unmounts it, which is right when a closed section should cost
+ * nothing and there is nothing inside worth keeping.
+ *
+ * This one keeps the body mounted and animates its height, so what is inside
+ * survives being closed — a part-filled form still has what was typed into it,
+ * a list is still scrolled to where it was, a video is still part-way through.
+ * That is the case this component exists for; reach for `Accordion` when
+ * sections are mutually exclusive or the body is expensive and rarely opened.
+ *
+ * ## The body is mounted whether or not it is open
+ *
+ * A height cannot be animated from `auto`, so the content has to be measured
+ * before it can be travelled to, and measuring it means rendering it. There is
+ * no lazy version of that: a body that has never been opened has still been
+ * rendered once. For a body heavy enough that this matters, an `Accordion` with
+ * a single item unmounts it instead.
+ *
+ * ## Reduced motion
+ *
+ * With the operating system set to reduce motion the panel snaps between its
+ * two states and the chevron turns without travelling. The disclosure still
+ * happens — it is the movement that is dropped, not the change.
+ */
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { Pressable, View, type Text as RNText, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { ChevronDownIcon } from '../../icons';
+import { Collapse } from '../../primitives/collapse';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
+
+export type CollapsibleVariant = 'default' | 'surface' | 'ghost';
+
+/** Matches the chevron in `Accordion`, so the two read as the same control. */
+const INDICATOR_DURATION = 200;
+
+const collapsibleVariants = tv({
+  slots: {
+    root: 'w-full flex-col',
+    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: 'overflow-hidden rounded-2xl border border-border bg-surface',
+        trigger: 'px-4',
+        content: 'px-4',
+      },
+      ghost: { trigger: 'px-0', content: 'px-0' },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+interface CollapsibleContextValue {
+  open: boolean;
+  toggle: () => void;
+  isDisabled: boolean;
+  variant: CollapsibleVariant;
+}
+
+const CollapsibleContext = createContext<CollapsibleContextValue | null>(null);
+
+function useCollapsible(component: string): CollapsibleContextValue {
+  const context = useContext(CollapsibleContext);
+  if (!context) throw new Error(`${component} must be used within a <Collapsible>`);
+  return context;
+}
+
+export interface CollapsibleProps extends ViewProps {
+  className?: string;
+  variant?: CollapsibleVariant;
+  /** Whether the body is showing, controlled. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Stops the trigger opening or closing it, and marks it disabled to a screen reader. */
+  isDisabled?: boolean;
+  children?: ReactNode;
+}
+
+const CollapsibleRoot = forwardRef<View, CollapsibleProps>(
+  (
+    {
+      className,
+      variant = 'default',
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      isDisabled = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internal, setInternal] = useState(defaultOpen);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : internal;
+
+    const toggle = useCallback(() => {
+      const next = !isOpen;
+      if (!isControlled) setInternal(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+
+    const context = useMemo(
+      () => ({ open: isOpen, toggle, isDisabled, variant }),
+      [isOpen, toggle, isDisabled, variant]
+    );
+
+    const { root } = collapsibleVariants({ variant });
+
+    return (
+      <CollapsibleContext.Provider value={context}>
+        <View ref={ref} className={root({ className })} {...props}>
+          {children}
+        </View>
+      </CollapsibleContext.Provider>
+    );
+  }
+);
+CollapsibleRoot.displayName = 'Collapsible';
+
+export interface CollapsibleTriggerProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/** The pressable header row. Bare strings are wrapped in the title style. */
+const CollapsibleTrigger = forwardRef<View, CollapsibleTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    const { open, toggle, isDisabled, variant } = useCollapsible('Collapsible.Trigger');
+    const { trigger, title } = collapsibleVariants({ variant });
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: open, disabled: isDisabled }}
+        disabled={isDisabled}
+        onPress={toggle}
+        className={trigger({ className })}
+        {...props}
+      >
+        {textChildren(children, (text) => (
+          <Text className={title()}>{text}</Text>
+        ))}
+      </Pressable>
+    );
+  }
+);
+CollapsibleTrigger.displayName = 'Collapsible.Trigger';
+
+const CollapsibleTitle = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
+  const { variant } = useCollapsible('Collapsible.Title');
+  const { title } = collapsibleVariants({ variant });
+  return <Text ref={ref} className={title({ className })} {...props} />;
+});
+CollapsibleTitle.displayName = 'Collapsible.Title';
+
+export interface CollapsibleIndicatorProps extends ViewProps {
+  className?: string;
+  /** Replaces the default chevron. */
+  children?: ReactNode;
+}
+
+/** Chevron that rotates 180° while the body is open. */
+const CollapsibleIndicator = forwardRef<View, CollapsibleIndicatorProps>(
+  ({ className, children, ...props }, ref) => {
+    const { open, variant } = useCollapsible('Collapsible.Indicator');
+    const { indicator } = collapsibleVariants({ variant });
+    const reducedMotion = useReducedMotion();
+    const progress = useSharedValue(open ? 1 : 0);
+
+    useEffect(() => {
+      progress.value = reducedMotion
+        ? open
+          ? 1
+          : 0
+        : withTiming(open ? 1 : 0, { duration: INDICATOR_DURATION });
+    }, [open, reducedMotion, progress]);
+
+    const style = useAnimatedStyle(() => ({
+      transform: [{ rotate: `${progress.value * 180}deg` }],
+    }));
+
+    return (
+      <Animated.View style={style}>
+        <View ref={ref} className={indicator({ className })} {...props}>
+          {children ?? <ChevronDownIcon size={18} />}
+        </View>
+      </Animated.View>
+    );
+  }
+);
+CollapsibleIndicator.displayName = 'Collapsible.Indicator';
+
+export interface CollapsibleContentProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * The body, opened and closed by animating its own height.
+ *
+ * It stays mounted while closed, which is the point of the component — see the
+ * note at the top of the file. A closed body is hidden from the accessibility
+ * tree as well as from the eye, because a screen reader reading out a section
+ * that is not on screen is worse than one that skips it.
+ */
+const CollapsibleContent = forwardRef<View, CollapsibleContentProps>(
+  ({ className, children, ...props }, ref) => {
+    const { open, variant } = useCollapsible('Collapsible.Content');
+    const { content, contentText } = collapsibleVariants({ variant });
+
+    return (
+      <Collapse open={open} className={content({ className })}>
+        <View
+          ref={ref}
+          accessibilityElementsHidden={!open}
+          importantForAccessibility={open ? 'auto' : 'no-hide-descendants'}
+          {...props}
+        >
+          {textChildren(children, (text) => (
+            <Text className={contentText()}>{text}</Text>
+          ))}
+        </View>
+      </Collapse>
+    );
+  }
+);
+CollapsibleContent.displayName = 'Collapsible.Content';
+
+export const Collapsible = Object.assign(CollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Title: CollapsibleTitle,
+  Indicator: CollapsibleIndicator,
+  Content: CollapsibleContent,
+});

package/src/components/flow/index.tsx

@@ -31,6 +31,10 @@
  * the edges are ordinary elements and cost a render per drag frame. That is a
  * real cost and it is the right trade.
  *
+ * An `animated` edge keeps that arrangement and animates the one property the
+ * geometry does not own: the dash offset. Its `d` still arrives by re-render,
+ * so a dragged node reshapes the edge while the dashes keep marching.
+ *
  * JavaScript is told a drag has finished through `onNodeDragEnd`. Positions
  * are otherwise yours to leave alone: pass `position` once and the canvas
  * takes it from there, or keep it in state and pass it back to drive nodes
@@ -65,10 +69,12 @@ import {
 import { useCSSVariable } from 'uniwind';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
+  cancelAnimation,
   runOnJS,
   useAnimatedProps,
   useAnimatedStyle,
   useDerivedValue,
+  useReducedMotion,
   useSharedValue,
   withRepeat,
   withTiming,
@@ -159,6 +165,15 @@ const CONNECT_RADIUS = 44;
  */
 const GROUP_EDGE_STANDOFF = 5;
 
+/** Dash and gap length for a broken edge, in graph points. */
+const EDGE_DASH = 6;
+
+/**
+ * How long an animated edge takes to travel one dash-and-gap. Slow enough to
+ * read as flow rather than flicker, fast enough to look live.
+ */
+const EDGE_MARCH_DURATION = 600;
+
 export type FlowEdgeVariant = 'bezier' | 'smoothstep' | 'step' | 'straight';
 
 export interface FlowViewport {
@@ -1496,7 +1511,9 @@ export interface FlowEdgeProps {
   variant?: FlowEdgeVariant;
   /**
    * Mark the edge as carrying something — a request, a build, a dependency
-   * that is live rather than declared. Draws it dashed.
+   * that is live rather than declared. Draws it dashed and marches the dashes
+   * from source to target. Falls back to a still dashed edge when the
+   * operating system is set to reduce motion.
    */
   animated?: boolean;
   /** Draw it broken rather than solid. */
@@ -1551,6 +1568,63 @@ function FlowEdge(props: FlowEdgeProps) {
   return null;
 }
 
+/**
+ * A dashed edge whose dashes travel from source to target.
+ *
+ * The dash offset is the only animated property here, and the geometry is
+ * deliberately not one: `d` arrives as an ordinary prop and changes by
+ * re-render when a node moves. A path in React Native draws reliably when one
+ * property animates and the rest are plain, so splitting them this way lets a
+ * dragged node reshape the edge without ever interrupting the march.
+ *
+ * One dash and one gap of travel per cycle, which is why the loop is seamless:
+ * the end state is the start state shifted by exactly one period.
+ */
+function FlowMarchingEdge({
+  d,
+  stroke,
+  width,
+}: {
+  d: string;
+  stroke: string;
+  width: number;
+}) {
+  const offset = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+
+  useEffect(() => {
+    if (reducedMotion) {
+      offset.value = 0;
+      return undefined;
+    }
+    // Negative, so the dashes run the way the path was drawn: source to target.
+    offset.value = withRepeat(
+      withTiming(-EDGE_DASH * 2, {
+        duration: EDGE_MARCH_DURATION,
+        easing: Easing.linear,
+      }),
+      -1,
+      false
+    );
+    return () => cancelAnimation(offset);
+  }, [offset, reducedMotion]);
+
+  const dashProps = useAnimatedProps(() => ({ strokeDashoffset: offset.value }));
+
+  return (
+    <AnimatedPath
+      animatedProps={dashProps}
+      d={d}
+      fill="none"
+      stroke={stroke}
+      strokeWidth={width}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeDasharray={`${EDGE_DASH} ${EDGE_DASH}`}
+    />
+  );
+}
+
 /** The part that actually draws an edge, inside the canvas's one `<Svg>`. */
 function FlowEdgePath({
   from,
@@ -1612,7 +1686,7 @@ function FlowEdgePath({
   const b = { x: outB.x + origin.x, y: outB.y + origin.y };
 
   const d = edgePath(variant, a, sideA, b, sideB, curvature, radius, gap);
-  const dash = dashed || animated ? 6 : 0;
+  const dash = dashed || animated ? EDGE_DASH : 0;
   const stroke = color ?? tint;
 
   const head = arrow
@@ -1624,15 +1698,19 @@ function FlowEdgePath({
 
   return (
     <>
-      <Path
-        d={d}
-        fill="none"
-        stroke={stroke}
-        strokeWidth={width}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeDasharray={dash ? `${dash} ${dash}` : undefined}
-      />
+      {animated ? (
+        <FlowMarchingEdge d={d} stroke={stroke} width={width} />
+      ) : (
+        <Path
+          d={d}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={width}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray={dash ? `${dash} ${dash}` : undefined}
+        />
+      )}
       {head ? <Path d={head} fill={stroke} /> : null}
     </>
   );
@@ -1703,9 +1781,10 @@ function FlowEdgeLayer() {
           origin={origin}
         />
       ))}
-      {/* The connection line is the one path that does animate, because it
-          follows a finger and has nothing else to follow. It animates `d` and
-          only `d`, which is the one thing that works. */}
+      {/* The connection line follows a finger, so it is the path that animates
+          `d` — and only `d`, which is the one thing that works while the
+          geometry is what moves. An animated edge inverts the split: static
+          `d`, animated dash offset. Either is fine; both at once is not. */}
       <AnimatedPath
         animatedProps={lineProps}
         fill="none"

package/src/components/form/index.tsx

@@ -7,11 +7,8 @@
  * take differently-shaped change props, and only the caller knows which one
  * a given field needs to wire up.
  *
- * `Form`/`Form.Field` trade some type precision for that JSX ergonomics — a
- * field's `name` isn't checked against `keyof YourValues` here, because a
- * value's shape can't flow through `useContext` generically. Reach for
- * `useField(form, name)` directly when a field's name should be checked
- * against the form's own value type.
+ * `createForm<Values>()` binds that value shape to the same runtime components
+ * when field names and render values should stay typed through JSX.
  *
  * ```tsx
  * const form = useForm({
@@ -37,6 +34,7 @@
 import { createContext, useContext, type ReactNode } from 'react';
 import { useField, type FormFieldRenderProps, type UseFieldOptions } from './use-field';
 import { useForm, type FormApi, type FieldErrors, type FieldTouched, type FieldState, type UseFormOptions, type Validator } from './use-form';
+import { bindFormRuntime } from './typed-form';
 
 export { useForm, useField };
 export type {
@@ -57,6 +55,11 @@ export interface FormProps {
   children?: ReactNode;
 }
 
+export interface TypedFormProps<T extends Record<string, any>> {
+  form: FormApi<T>;
+  children?: ReactNode;
+}
+
 function FormRoot({ form, children }: FormProps) {
   return <FormContext.Provider value={form}>{children}</FormContext.Provider>;
 }
@@ -70,6 +73,14 @@ export interface FormFieldProps {
   children: (field: FormFieldRenderProps<any>) => ReactNode;
 }
 
+export interface TypedFormFieldProps<
+  T extends Record<string, any>,
+  K extends keyof T,
+> extends UseFieldOptions<T, K> {
+  name: K;
+  children: (field: FormFieldRenderProps<T[K]>) => ReactNode;
+}
+
 function FormField({ name, validate, validateOn, children }: FormFieldProps) {
   const form = useContext(FormContext);
   if (!form) {
@@ -83,3 +94,19 @@ FormField.displayName = 'Form.Field';
 export const Form = Object.assign(FormRoot, {
   Field: FormField,
 });
+
+export interface TypedForm<T extends Record<string, any>> {
+  (props: TypedFormProps<T>): ReactNode;
+  Field: <K extends keyof T>(props: TypedFormFieldProps<T, K>) => ReactNode;
+  useForm: (options: UseFormOptions<T>) => FormApi<T>;
+  useField: <K extends keyof T>(
+    form: FormApi<T>,
+    name: K,
+    options?: UseFieldOptions<T, K>
+  ) => FormFieldRenderProps<T[K]>;
+}
+
+/** Bind a value shape to Form's existing runtime without creating new state. */
+export function createForm<T extends Record<string, any>>(): TypedForm<T> {
+  return bindFormRuntime(FormRoot, FormField, useForm, useField) as TypedForm<T>;
+}

package/src/components/form/typed-form.ts

@@ -0,0 +1,13 @@
+/** Attach bound helpers to the existing runtime components; no state is cloned. */
+export function bindFormRuntime<
+  Root,
+  Field,
+  UseForm,
+  UseField,
+>(root: Root, field: Field, useForm: UseForm, useField: UseField) {
+  return Object.assign(root as object, { Field: field, useForm, useField }) as Root & {
+    Field: Field;
+    useForm: UseForm;
+    useField: UseField;
+  };
+}

package/src/components/form/use-form.ts

@@ -67,6 +67,10 @@ export interface FormApi<T extends Record<string, any>> {
   setFieldValue: <K extends keyof T>(name: K, value: T[K]) => void;
   setFieldTouched: <K extends keyof T>(name: K, touched?: boolean) => void;
   setFieldError: <K extends keyof T>(name: K, error: string | undefined) => void;
+  /** Read the latest value, including a change made before React renders again. */
+  getValue: <K extends keyof T>(name: K) => T[K];
+  /** Read a field from this render so a component naturally follows its changes. */
+  watch: <K extends keyof T>(name: K) => T[K];
   getFieldState: <K extends keyof T>(name: K) => FieldState<T[K]>;
   /** Used by `useField`/`Form.Field` to attach a field's validation rule. */
   registerValidator: <K extends keyof T>(name: K, validator?: Validator<T, K>) => void;
@@ -249,6 +253,9 @@ export function useForm<T extends Record<string, any>>({
     [state.values, state.errors, state.touched]
   );
 
+  const getValue = useCallback(<K extends keyof T>(name: K): T[K] => valuesRef.current[name], []);
+  const watch = useCallback(<K extends keyof T>(name: K): T[K] => state.values[name], [state.values]);
+
   const validateField = useCallback(async <K extends keyof T>(name: K) => {
     const validator = validatorsRef.current[name];
     if (!validator) return true;
@@ -369,6 +376,8 @@ export function useForm<T extends Record<string, any>>({
     setFieldValue,
     setFieldTouched,
     setFieldError,
+    getValue,
+    watch,
     getFieldState,
     registerValidator,
     validateField,