panelui-native 0.66.1 → 0.68.0

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

@@ -70,6 +70,7 @@ import Svg, {
 } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import {
   areaPath,
   columnValues,
@@ -157,7 +158,7 @@ export function useAreaChart() {
   };
 }
 
-export interface AreaChartProps extends ViewProps {
+export interface AreaChartProps extends ViewProps, ChartAccessibilityProps<AreaChartDatum> {
   className?: string;
   /** The rows. Each one is a point along the x-axis. */
   data: AreaChartDatum[];
@@ -233,6 +234,11 @@ const AreaChartRoot = forwardRef<AreaChartHandle, AreaChartProps>(function AreaC
     stacked = false,
     curve = 'monotone',
     onActiveIndexChange,
+    accessible,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelForDatum,
+    onAccessibilityDatumPress,
     compact = false,
     children,
     ...props
@@ -456,7 +462,26 @@ const AreaChartRoot = forwardRef<AreaChartHandle, AreaChartProps>(function AreaC
     <AreaChartContext.Provider value={context}>
       <View {...props} style={props.style} className={cn('w-full', className)}>
         {header}
-        <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+        <ChartAccessibilityData
+          chart="Area chart"
+          data={data}
+          disabled={accessible === false || loading}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityLabelForDatum={accessibilityLabelForDatum}
+          onAccessibilityDatumPress={onAccessibilityDatumPress}
+          valueOf={(datum) => [
+            [xDataKey, datum[xDataKey]],
+            ...series.map(([key]) => [key, datum[key]] as [string, unknown]),
+          ]}
+        />
+        <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/bar-chart/index.tsx

@@ -65,6 +65,7 @@ import Animated, {
 import Svg, { Defs, G, Line as SvgLine, LinearGradient, Path, Stop } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import {
   bandOf,
   barPath,
@@ -159,7 +160,7 @@ export function useBarChart() {
   };
 }
 
-export interface BarChartProps extends ViewProps {
+export interface BarChartProps extends ViewProps, ChartAccessibilityProps<BarChartDatum> {
   className?: string;
   /** The rows. Each one is a band along the category axis. */
   data: BarChartDatum[];
@@ -257,6 +258,11 @@ const BarChartRoot = forwardRef<BarChartHandle, BarChartProps>(function BarChart
     minBarLength = 0,
     fadedOpacity = 0.3,
     onActiveIndexChange,
+    accessible,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelForDatum,
+    onAccessibilityDatumPress,
     compact = false,
     children,
     ...props
@@ -484,7 +490,26 @@ const BarChartRoot = forwardRef<BarChartHandle, BarChartProps>(function BarChart
     <BarChartContext.Provider value={context}>
       <View {...props} style={props.style} className={cn('w-full', className)}>
         {header}
-        <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+        <ChartAccessibilityData
+          chart="Bar chart"
+          data={data}
+          disabled={accessible === false || loading}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityLabelForDatum={accessibilityLabelForDatum}
+          onAccessibilityDatumPress={onAccessibilityDatumPress}
+          valueOf={(datum) => [
+            [xDataKey, datum[xDataKey]],
+            ...series.map(([key]) => [key, datum[key]] as [string, unknown]),
+          ]}
+        />
+        <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/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/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,

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

@@ -61,6 +61,7 @@ import Animated, {
 import Svg, { ClipPath, Defs, G, Line as SvgLine, Rect } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { cn } from '../../utils/cn';
 import { normalizeWeekStart, startOfDay } from '../../utils/date';
 
@@ -309,7 +310,7 @@ function deriveLevels(data: HeatmapColumn[]): number[] {
 /* Root                                                                       */
 /* -------------------------------------------------------------------------- */
 
-export interface HeatmapChartProps extends ViewProps {
+export interface HeatmapChartProps extends ViewProps, ChartAccessibilityProps<HeatmapCell> {
   className?: string;
   /** One column per period, with its row bins inside. */
   data: HeatmapColumn[];
@@ -396,6 +397,11 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
     animationDuration = 900,
     inactiveOpacity = 1,
     onActiveCellChange,
+    accessible,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelForDatum,
+    onAccessibilityDatumPress,
     children,
     ...props
   },
@@ -491,6 +497,20 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
     [data, levelOf]
   );
 
+  const accessibilityCells = useMemo(
+    () =>
+      data.flatMap((column) =>
+        column.bins.map((bin) => ({
+          column: column.bin,
+          row: bin.bin,
+          count: bin.count,
+          level: levelOf(bin.count),
+          date: bin.date,
+        }))
+      ),
+    [data, levelOf]
+  );
+
   const setActiveCell = useMemo(
     () => (cell: HeatmapCell | null) => {
       setActiveCellState(cell);
@@ -570,11 +590,37 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
             whole chart, so it starts at the chart's edge, not the grid's. */}
         {parts.header}
 
+        <ChartAccessibilityData
+          chart="Heatmap chart"
+          data={accessibilityCells}
+          disabled={accessible === false}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityLabelForDatum={accessibilityLabelForDatum}
+          onAccessibilityDatumPress={onAccessibilityDatumPress}
+          valueOf={(cell) => [
+            ['date', cell.date],
+            ['column', cell.column],
+            ['row', cell.row],
+            ['count', cell.count],
+          ]}
+        />
+
         {parts.x ? (
-          <View style={{ paddingLeft: axisWidth }}>{parts.x}</View>
+          <View
+            style={{ paddingLeft: axisWidth }}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+          >
+            {parts.x}
+          </View>
         ) : null}
 
-        <View className="flex-row">
+        <View
+          className="flex-row"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
           {parts.y}
           <View style={{ width: grid.width, height: grid.height }}>
             {grid.width > 0 ? (

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

@@ -82,6 +82,7 @@ import Svg, {
 } from 'react-native-svg';
 import { useCSSVariable } from 'uniwind';
 import { Text } from '../../primitives/text';
+import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import {
   areaPath,
   columnValues,
@@ -172,7 +173,7 @@ export function useLineChart() {
   };
 }
 
-export interface LineChartProps extends ViewProps {
+export interface LineChartProps extends ViewProps, ChartAccessibilityProps<LineChartDatum> {
   className?: string;
   /** The rows. Each one is a point along the x-axis. */
   data: LineChartDatum[];
@@ -227,6 +228,11 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
     yDomain,
     curve = 'monotone',
     onActiveIndexChange,
+    accessible,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityLabelForDatum,
+    onAccessibilityDatumPress,
     compact = false,
     children,
     ...props
@@ -443,7 +449,26 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
     <LineChartContext.Provider value={context}>
       <View {...props} style={props.style} className={cn('w-full', className)}>
         {header}
-        <View onLayout={onLayout} style={{ aspectRatio }} className="w-full">
+        <ChartAccessibilityData
+          chart="Line chart"
+          data={data}
+          disabled={accessible === false || loading}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityHint={accessibilityHint}
+          accessibilityLabelForDatum={accessibilityLabelForDatum}
+          onAccessibilityDatumPress={onAccessibilityDatumPress}
+          valueOf={(datum) => [
+            [xDataKey, datum[xDataKey]],
+            ...series.map(([key]) => [key, datum[key]] as [string, unknown]),
+          ]}
+        />
+        <View
+          onLayout={onLayout}
+          style={{ aspectRatio }}
+          className="w-full"
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+        >
           {plot.width > 0 ? (
             <>
               <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>