panelui-native 0.22.6 → 0.28.1

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;
@@ -102,6 +103,51 @@ export function MinusIcon({ size = 14, color, strokeWidth = 3, ...props }: IconP
   );
 }
 
+export function ChevronUpIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m18 15-6-6-6 6"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function CalendarIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export function BookmarkIcon({ size = 16, color, ...props }: IconProps) {
+  const resolved = useResolvedColor(color, '#737373');
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m19 21-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
 export function ChevronDownIcon({ size = 16, color, ...props }: IconProps) {
   const resolved = useResolvedColor(color, '#737373');
   return (
@@ -117,8 +163,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 +191,7 @@ export function ChevronLeftIcon({ size = 16, color, ...props }: IconProps) {
         strokeWidth={2}
         strokeLinecap="round"
         strokeLinejoin="round"
+        {...flip}
       />
     </Svg>
   );
@@ -134,6 +199,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 +208,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 +798,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,56 @@ export {
   type AttachmentActionProps,
   type AttachmentState,
 } from './components/attachment';
+export {
+  AreaChart,
+  useAreaChart,
+  type AreaChartProps,
+  type AreaChartHandle,
+  type AreaChartGridProps,
+  type AreaChartHeaderProps,
+  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 BarChartHeaderProps,
+  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,
@@ -91,6 +135,11 @@ export {
   type ToggleButtonVariant,
   type ToggleSelectionMode,
 } from './components/toggle-button';
+export {
+  DatePicker,
+  type DatePickerProps,
+  type DatePickerMode,
+} from './components/date-picker';
 export {
   Dialog,
   type DialogProps,
@@ -105,6 +154,7 @@ export {
 export {
   Direction,
   useDirection,
+  useDirectionSign,
   type DirectionProps,
   type DirectionValue,
 } from './components/direction';
@@ -156,6 +206,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,
@@ -179,6 +253,30 @@ export {
   type TabsTriggerProps,
   type TabsContentProps,
 } from './components/tabs';
+export {
+  Carousel,
+  useCarouselState,
+  type CarouselProps,
+  type CarouselHandle,
+  type CarouselContentProps,
+  type CarouselItemProps,
+  type CarouselCaptionProps,
+  type CarouselDotsProps,
+  type CarouselArrowProps,
+  type CarouselControlsProps,
+  type CarouselVariant,
+  type CarouselOrientation,
+  type CarouselAlign,
+} from './components/carousel';
+export {
+  Calendar,
+  type CalendarProps,
+  type CalendarMode,
+  type CalendarCaptionLayout,
+  type CalendarDisabled,
+  type CalendarSelection,
+  type DateRange,
+} from './components/calendar';
 export { Card, type CardProps } from './components/card';
 export { Checkbox, type CheckboxProps } from './components/checkbox';
 export {
@@ -253,6 +351,7 @@ export {
   useLineChart,
   type LineChartProps,
   type LineChartHandle,
+  type LineChartHeaderProps,
   type LineChartGridProps,
   type LineChartLineProps,
   type LineChartAreaProps,
@@ -264,6 +363,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 +421,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,
@@ -387,6 +502,16 @@ export {
   type ToastIndicatorProps,
   type ToastCloseProps,
 } from './components/toast';
+export {
+  Tooltip,
+  type TooltipProps,
+  type TooltipTriggerProps,
+  type TooltipContentProps,
+  type TooltipArrowProps,
+  type TooltipPlacement,
+  type TooltipAlign,
+  type TooltipOpenOn,
+} from './components/tooltip';
 export {
   Typography,
   type TypographyProps,
@@ -402,13 +527,17 @@ export {
   AppleIcon,
   ArrowUpRightIcon,
   BellIcon,
+  BookmarkIcon,
+  CalendarIcon,
   CardIcon,
   CheckCircleIcon,
   CheckIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronUpIcon,
   DownloadIcon,
+  EllipsisIcon,
   FacebookIcon,
   FileIcon,
   GoogleIcon,

package/src/primitives/keyboard-avoider.tsx

@@ -27,6 +27,7 @@ import {
   useKeyboardAvoidance,
   type KeyboardAvoidanceMode,
 } from '../hooks/use-keyboard-avoidance';
+import { textChildren } from './text';
 
 export interface KeyboardAvoiderProps extends ViewProps {
   className?: string;
@@ -86,7 +87,7 @@ export function KeyboardAvoider({
       className={className}
       style={[style, avoidance.animatedStyle]}
     >
-      {children}
+      {textChildren(children)}
     </Animated.View>
   );
 }

package/src/primitives/text.tsx

@@ -1,6 +1,7 @@
-import { forwardRef } from 'react';
+import { Children, forwardRef, type ReactElement, type ReactNode } 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,57 @@ 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';
+
+/**
+ * Wraps the bare text among `children` so it can live in a plain view.
+ *
+ * React Native will not render a string outside a `<Text>`, and a component
+ * that takes `children` has no say in whether it is handed one — so anything
+ * putting `children` into a `View`, a `Pressable` or a scroller has to allow
+ * for it. Every part in the library that does runs its children through here.
+ *
+ * Per child, and not all-or-nothing. A part is nearly always given an element
+ * and some text together — an icon and a label, an arrow and a line of text —
+ * which makes `children` an *array*, so a `typeof children === 'string'` check
+ * never matches and the text underneath reaches the view bare. That is the
+ * shape this exists to make impossible.
+ *
+ * `render` is there because the wrapper is rarely the plain default: a button
+ * wants its own label variant, a sheet header wants a heading. Pass one, and
+ * the text arrives dressed the way the part would have dressed it anyway.
+ */
+export function textChildren(
+  children: ReactNode,
+  render: (text: string | number) => ReactElement = (text) => <Text>{text}</Text>
+): ReactNode {
+  return Children.map(children, (child) =>
+    typeof child === 'string' || typeof child === 'number' ? render(child) : child
+  );
+}