panelui-native 0.22.5 → 0.25.0

package/src/components/shimmer/index.tsx

@@ -34,6 +34,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useCSSVariable } from 'uniwind';
+import { useDirectionSign } from '../../hooks/use-direction';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
@@ -97,6 +98,8 @@ export function Shimmer({
   const [width, setWidth] = useState(0);
   const progress = useSharedValue(0);
   const reducedMotion = useReducedMotion();
+  // The sweep follows the reading direction; `reverse` then flips it again.
+  const sign = useDirectionSign();
 
   const themeMuted = useCSSVariable('--color-muted-foreground');
   const themeForeground = useCSSVariable('--color-foreground');
@@ -134,7 +137,13 @@ export function Shimmer({
     // Travel from fully off one edge to fully off the other.
     const from = -bandWidth;
     const to = width;
-    const x = reverse
+    /*
+     * The sweep follows the reading direction. It is standing in for text
+     * arriving, and text arrives from the side you start reading on — a band
+     * travelling against the script reads as something leaving.
+     */
+    const backwards = reverse !== (sign === -1);
+    const x = backwards
       ? to - progress.value * (to - from)
       : from + progress.value * (to - from);
     return { transform: [{ translateX: x }] };

package/src/components/slider/index.tsx

@@ -34,6 +34,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { useDirectionSign } from '../../hooks/use-direction';
 import { getNativeUI } from '../../native';
 import { Text } from '../../primitives/text';
 import { selectionTick } from '../../utils/haptics';
@@ -60,8 +61,8 @@ const sliderVariants = tv({
     // The track is the full height of the control, so the thumb has somewhere
     // to sit rather than somewhere to stick out of.
     track: 'w-full justify-center rounded-full bg-muted',
-    fill: 'absolute bottom-0 left-0 top-0 rounded-full',
-    thumb: 'absolute left-0 rounded-full p-0.5',
+    fill: 'absolute bottom-0 start-0 top-0 rounded-full',
+    thumb: 'absolute start-0 rounded-full p-0.5',
     // `background`, not a per-colour on-token: the status foregrounds are the
     // darker text hues meant for soft fills, so a green-700 knob on a green-500
     // pill would barely show. The page background reads against every fill in
@@ -193,6 +194,9 @@ export const Slider = forwardRef<View, SliderProps>(
 
     // Measured on layout; the thumb travels across (trackWidth - thumbWidth) so
     // it stays inside the track at both ends.
+    // `1` left to right, `-1` right to left. Everything below that is a raw
+    // pixel offset rather than a laid-out box multiplies through it.
+    const sign = useDirectionSign();
     const trackWidth = useSharedValue(0);
     // Fraction 0..1 that drives the fill and the thumb, animated on the UI thread.
     const progress = useSharedValue(max > min ? (value - min) / (max - min) : 0);
@@ -253,7 +257,12 @@ export const Slider = forwardRef<View, SliderProps>(
       })
       .onUpdate((event) => {
         const travel = Math.max(trackWidth.value - thumbWidth, 1);
-        const delta = event.translationX / travel;
+        /*
+         * Yoga mirrors the track but not a translation: a finger moving right
+         * in a right-to-left subtree is moving *back* along the scale, and
+         * without the sign the thumb runs away from the finger.
+         */
+        const delta = (event.translationX * sign) / travel;
         const next = Math.min(Math.max(startProgress.value + delta, 0), 1);
         progress.value = next;
         runOnJS(commitFromProgress)(next, false);
@@ -268,7 +277,11 @@ export const Slider = forwardRef<View, SliderProps>(
       .maxDuration(250)
       .onEnd((event) => {
         const travel = Math.max(trackWidth.value - thumbWidth, 1);
-        const next = Math.min(Math.max((event.x - thumbWidth / 2) / travel, 0), 1);
+        // `event.x` is measured from the physical left edge either way, so
+        // right-to-left counts back from the far end of the track.
+        const along =
+          sign === 1 ? event.x : trackWidth.value - event.x;
+        const next = Math.min(Math.max((along - thumbWidth / 2) / travel, 0), 1);
         progress.value = withSpring(next, SPRING);
         runOnJS(commitFromProgress)(next, true);
       });
@@ -284,7 +297,9 @@ export const Slider = forwardRef<View, SliderProps>(
 
     const thumbStyle = useAnimatedStyle(() => {
       const travel = Math.max(trackWidth.value - thumbWidth, 0);
-      return { transform: [{ translateX: progress.value * travel }] };
+      // A transform is not laid out, so Yoga does not mirror it — the thumb
+      // has to travel the other way itself.
+      return { transform: [{ translateX: progress.value * travel * sign }] };
     });
 
     const knobStyle = useAnimatedStyle(() => ({

package/src/components/steps/index.tsx

@@ -53,7 +53,7 @@ const stepsVariants = tv({
       vertical: {
         root: 'flex-col',
         item: 'flex-col items-start',
-        separator: 'ml-3.5 h-8 w-0.5',
+        separator: 'ms-3.5 h-8 w-0.5',
       },
     },
     state: {

package/src/components/switch/index.tsx

@@ -7,6 +7,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { useDirectionSign } from '../../hooks/use-direction';
 import { getNativeUI } from '../../native';
 import { selectionTick } from '../../utils/haptics';
 
@@ -68,6 +69,10 @@ export const Switch = forwardRef<View, SwitchProps>(
     ref
   ) => {
     const progress = useSharedValue(value ? 1 : 0);
+    // The track is mirrored by Yoga, but a transform is not — so "on" would
+    // otherwise still be on the right in a right-to-left subtree, which reads
+    // as the toggle running backwards.
+    const sign = useDirectionSign();
     const nativeUI = native ? getNativeUI() : null;
     const slots = switchVariants({ size, disabled: !!disabled });
 
@@ -77,7 +82,7 @@ export const Switch = forwardRef<View, SwitchProps>(
 
     const thumbStyle = useAnimatedStyle(() => ({
       transform: [
-        { translateX: interpolate(progress.value, [0, 1], [0, TRAVEL[size]]) },
+        { translateX: interpolate(progress.value, [0, 1], [0, TRAVEL[size] * sign]) },
       ],
     }));
 

package/src/components/typography/index.tsx

@@ -57,6 +57,11 @@ const typographyVariants = tv({
       bold: 'font-bold',
     },
     align: {
+      // `start` and `end` follow the reading direction; `left` and `right`
+      // are the physical edges, for the rare line that has to stay put
+      // whichever way the script runs — a figure in a table, a code caption.
+      start: 'text-start',
+      end: 'text-end',
       left: 'text-left',
       center: 'text-center',
       right: 'text-right',

package/src/hooks/use-direction.ts

@@ -0,0 +1,45 @@
+/**
+ * The reading direction in force.
+ *
+ * The context lives here rather than beside the `Direction` component so that
+ * anything can read it cheaply. `Text` in particular has to: `direction` is a
+ * Yoga *layout* property, and React Native resolves a paragraph's alignment
+ * from the process-wide `I18nManager.isRTL` instead — so without this, an
+ * Arabic paragraph inside `<Direction dir="rtl">` mirrors the furniture around
+ * it and then sits left-aligned inside it.
+ *
+ * Keeping it in a hook also keeps the dependency the right way round: a
+ * component that only needs to know the direction pulls in a hook, not the
+ * whole provider.
+ */
+import { createContext, useContext } from 'react';
+import { I18nManager } from 'react-native';
+
+export type DirectionValue = 'ltr' | 'rtl';
+
+/** What the device is set to, for anything outside a provider. */
+export const deviceDirection = (): DirectionValue =>
+  I18nManager.isRTL ? 'rtl' : 'ltr';
+
+export const DirectionContext = createContext<DirectionValue | null>(null);
+
+/**
+ * The reading direction in force, for a component that has to flip maths Yoga
+ * cannot flip for it. Safe with no provider mounted: it falls back to the
+ * device's own setting.
+ */
+export function useDirection(): DirectionValue {
+  return useContext(DirectionContext) ?? deviceDirection();
+}
+
+/**
+ * `-1` in a right-to-left subtree, `1` otherwise.
+ *
+ * The form most of the pixel maths actually wants. A drag translation, an
+ * indicator offset and a sweep are all a number that has to change sign, and
+ * writing `dir === 'rtl' ? -x : x` at every one of them is where the sign
+ * errors live.
+ */
+export function useDirectionSign(): 1 | -1 {
+  return useDirection() === 'rtl' ? -1 : 1;
+}

package/src/icons/index.tsx

@@ -18,6 +18,7 @@
  */
 import { createContext, useContext, type ReactNode } from 'react';
 import Svg, { Circle, G, Path, type SvgProps } from 'react-native-svg';
+import { useDirection } from '../hooks/use-direction';
 
 export interface IconProps extends SvgProps {
   size?: number;
@@ -117,8 +118,26 @@ export function ChevronDownIcon({ size = 16, color, ...props }: IconProps) {
   );
 }
 
+/**
+ * Mirrors a directional glyph in a right-to-left subtree.
+ *
+ * Yoga moves a chevron to the other end of its row, but it cannot turn the
+ * glyph around — so an RTL list row ends up with a right-pointing chevron on
+ * its left edge, pointing back at the text. These arrows mean "onward" and
+ * "back", and which way that is depends on which way you read.
+ *
+ * Only for glyphs whose meaning *is* a direction. An icon that happens to be
+ * asymmetric — a pencil, a magnifier — means the same thing either way round,
+ * and flipping it is just a wrong drawing.
+ */
+function useFlip(): { transform?: string } {
+  const rtl = useDirection() === 'rtl';
+  return rtl ? { transform: 'scale(-1 1) translate(-24 0)' } : {};
+}
+
 export function ChevronLeftIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
+  const flip = useFlip();
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
       <Path
@@ -127,6 +146,7 @@ export function ChevronLeftIcon({ size = 16, color, ...props }: IconProps) {
         strokeWidth={2}
         strokeLinecap="round"
         strokeLinejoin="round"
+        {...flip}
       />
     </Svg>
   );
@@ -134,6 +154,7 @@ export function ChevronLeftIcon({ size = 16, color, ...props }: IconProps) {
 
 export function ChevronRightIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
+  const flip = useFlip();
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
       <Path
@@ -142,11 +163,23 @@ export function ChevronRightIcon({ size = 16, color, ...props }: IconProps) {
         strokeWidth={2}
         strokeLinecap="round"
         strokeLinejoin="round"
+        {...flip}
       />
     </Svg>
   );
 }
 
+export function EllipsisIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Circle cx={5} cy={12} r={1.6} fill={resolved} />
+      <Circle cx={12} cy={12} r={1.6} fill={resolved} />
+      <Circle cx={19} cy={12} r={1.6} fill={resolved} />
+    </Svg>
+  );
+}
+
 export function XIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (
@@ -720,6 +753,39 @@ export function MaximizeIcon({ size = 16, color, ...props }: IconProps) {
   );
 }
 
+/** Crosshairs on a centre dot — put me where I actually am. */
+export function CrosshairIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Circle cx={12} cy={12} r={7} stroke={resolved} strokeWidth={2} />
+      <Path
+        d="M12 2v3M12 19v3M2 12h3M19 12h3"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+      <Circle cx={12} cy={12} r={1.5} fill={resolved} />
+    </Svg>
+  );
+}
+
+/** A compass needle — which way is north. */
+export function CompassIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Circle cx={12} cy={12} r={9} stroke={resolved} strokeWidth={2} />
+      <Path
+        d="M15.5 8.5l-2 5-5 2 2-5 5-2z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 /** A closed padlock — the thing behind it cannot be moved. */
 export function LockIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');

package/src/index.ts

@@ -73,12 +73,54 @@ export {
   type AttachmentActionProps,
   type AttachmentState,
 } from './components/attachment';
+export {
+  AreaChart,
+  useAreaChart,
+  type AreaChartProps,
+  type AreaChartHandle,
+  type AreaChartGridProps,
+  type AreaChartAreaProps,
+  type AreaChartXAxisProps,
+  type AreaChartYAxisProps,
+  type AreaChartTooltipProps,
+  type AreaChartLegendProps,
+  type AreaChartDatum,
+  type AreaChartStatus,
+} from './components/area-chart';
 export { Badge, type BadgeProps } from './components/badge';
+export {
+  BarChart,
+  useBarChart,
+  type BarChartProps,
+  type BarChartHandle,
+  type BarChartGridProps,
+  type BarChartBarProps,
+  type BarChartXAxisProps,
+  type BarChartYAxisProps,
+  type BarChartTooltipProps,
+  type BarChartLegendProps,
+  type BarChartDatum,
+  type BarChartStatus,
+  type BarChartOrientation,
+} from './components/bar-chart';
 export {
   BottomSheet,
   type BottomSheetProps,
   type BottomSheetContentProps,
+  type BottomSheetHeaderProps,
+  type BottomSheetBodyProps,
+  type BottomSheetFooterProps,
 } from './components/bottom-sheet';
+export {
+  Breadcrumb,
+  type BreadcrumbProps,
+  type BreadcrumbListProps,
+  type BreadcrumbItemProps,
+  type BreadcrumbLinkProps,
+  type BreadcrumbPageProps,
+  type BreadcrumbSeparatorProps,
+  type BreadcrumbEllipsisProps,
+} from './components/breadcrumb';
 export { Button, type ButtonProps } from './components/button';
 export {
   ToggleButton,
@@ -105,6 +147,7 @@ export {
 export {
   Direction,
   useDirection,
+  useDirectionSign,
   type DirectionProps,
   type DirectionValue,
 } from './components/direction';
@@ -156,6 +199,30 @@ export {
   type HeatmapCell,
   type HeatmapLayout,
 } from './components/heatmap-chart';
+export {
+  Map,
+  useMap,
+  hasMapLibre,
+  CARTO_SOURCE,
+  type MapProps,
+  type MapHandle,
+  type MapMarkerProps,
+  type MapLabelProps,
+  type MapPopupProps,
+  type MapControlsProps,
+  type MapControlsPosition,
+  type MapRouteProps,
+  type MapArcProps,
+  type MapGeoJSONProps,
+  type MapClusterProps,
+  type MapHeatmapProps,
+  type MapUserLocationProps,
+  type BasemapSource,
+  type BasemapTokens,
+  type LngLat,
+  type LngLatBounds,
+  type ViewState,
+} from './components/map';
 export {
   Select,
   type SelectProps,
@@ -264,6 +331,12 @@ export {
   type LineChartStatus,
   type LineChartCurve,
 } from './components/line-chart';
+export {
+  Loader,
+  type LoaderProps,
+  type LoaderVariant,
+  type LoaderSize,
+} from './components/loader';
 export {
   Marker,
   type MarkerProps,
@@ -316,6 +389,16 @@ export {
   type RatingColor,
   type RatingSize,
 } from './components/rating';
+export {
+  RingChart,
+  useRingChart,
+  type RingChartProps,
+  type RingChartHandle,
+  type RingChartRingProps,
+  type RingChartCenterProps,
+  type RingChartLegendProps,
+  type RingDatum,
+} from './components/ring-chart';
 export {
   ScrollFade,
   type ScrollFadeProps,
@@ -409,6 +492,7 @@ export {
   ChevronLeftIcon,
   ChevronRightIcon,
   DownloadIcon,
+  EllipsisIcon,
   FacebookIcon,
   FileIcon,
   GoogleIcon,

package/src/primitives/text.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 import { Text as RNText, type Text as RNTextType, type TextProps as RNTextProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { useDirection } from '../hooks/use-direction';
 
 const textVariants = tv({
   base: 'text-foreground',
@@ -35,13 +36,30 @@ export interface TextProps extends RNTextProps, VariantProps<typeof textVariants
 }
 
 export const Text = forwardRef<RNTextType, TextProps>(
-  ({ className, size, weight, muted, ...props }, ref) => (
-    <RNText
-      ref={ref}
-      className={textVariants({ size, weight, muted, className })}
-      {...props}
-    />
-  )
+  ({ className, size, weight, muted, style, ...props }, ref) => {
+    /*
+     * `direction` is a Yoga *layout* property, and React Native resolves a
+     * paragraph's own alignment from the process-wide `I18nManager.isRTL`
+     * instead — so a `<Direction dir="rtl">` mirrors the furniture around this
+     * text and leaves the text itself left-aligned inside it. Setting
+     * `writingDirection` is what closes that gap, and it also puts bidi
+     * punctuation on the correct end of a mixed line.
+     *
+     * Only the direction, not the alignment: `textAlign` stays whatever the
+     * caller asked for, or unset. A component that centres its label means it
+     * in both directions.
+     */
+    const direction = useDirection();
+
+    return (
+      <RNText
+        ref={ref}
+        className={textVariants({ size, weight, muted, className })}
+        style={[{ writingDirection: direction }, style]}
+        {...props}
+      />
+    );
+  }
 );
 
 Text.displayName = 'Text';