panelui-native 0.7.0 → 0.12.0

package/src/index.ts

@@ -28,6 +28,7 @@ export {
 
 // Native UI bridge
 export { hasNativeUI } from './native';
+export { hasHaptics, selectionTick } from './utils/haptics';
 
 // Components
 export {
@@ -50,6 +51,18 @@ export {
   type AvatarProps,
   type AvatarBadgeProps,
 } from './components/avatar';
+export {
+  Attachment,
+  type AttachmentProps,
+  type AttachmentGroupProps,
+  type AttachmentMediaProps,
+  type AttachmentContentProps,
+  type AttachmentTitleProps,
+  type AttachmentDescriptionProps,
+  type AttachmentActionsProps,
+  type AttachmentActionProps,
+  type AttachmentState,
+} from './components/attachment';
 export { Badge, type BadgeProps } from './components/badge';
 export {
   BottomSheet,
@@ -57,18 +70,47 @@ export {
   type BottomSheetContentProps,
 } from './components/bottom-sheet';
 export { Button, type ButtonProps } from './components/button';
+export {
+  ToggleButton,
+  ToggleButtonGroup,
+  useToggleButton,
+  type ToggleButtonProps,
+  type ToggleButtonGroupProps,
+  type ToggleButtonLabelProps,
+  type ToggleButtonSize,
+  type ToggleButtonVariant,
+  type ToggleSelectionMode,
+} from './components/toggle-button';
 export {
   Dialog,
   type DialogProps,
   type DialogContentProps,
 } from './components/dialog';
-export { Frame, type FrameProps } from './components/frame';
 export {
-  InlineSelect,
-  type InlineSelectProps,
-  type InlineSelectItemProps,
-} from './components/inline-select';
-export { Select, type SelectProps, type SelectItemProps } from './components/select';
+  Frame,
+  type FrameProps,
+  type FrameRootProps,
+  type FramePanelProps,
+  type FrameRowProps,
+  type FrameSectionProps,
+  type FrameVariant,
+} from './components/frame';
+export {
+  Select,
+  type SelectProps,
+  type SelectItemProps,
+  type SelectPresentation,
+} from './components/select';
+export {
+  SectionRail,
+  type SectionRailProps,
+  type SectionRailTriggerProps,
+  type SectionRailBarProps,
+  type SectionRailContentProps,
+  type SectionRailItemProps,
+  type SectionRailPlacement,
+  type SectionRailAlign,
+} from './components/section-rail';
 export {
   Tabs,
   type TabsProps,
@@ -104,6 +146,39 @@ export {
   type ItemFooterProps,
 } from './components/item';
 export { Label, type LabelProps, type LabelTextProps } from './components/label';
+export {
+  LineChart,
+  useLineChart,
+  type LineChartProps,
+  type LineChartHandle,
+  type LineChartGridProps,
+  type LineChartLineProps,
+  type LineChartAreaProps,
+  type LineChartSkeletonProps,
+  type LineChartXAxisProps,
+  type LineChartTooltipProps,
+  type LineChartLegendProps,
+  type LineChartDatum,
+  type LineChartStatus,
+  type LineChartCurve,
+} from './components/line-chart';
+export {
+  Marker,
+  type MarkerProps,
+  type MarkerIconProps,
+  type MarkerContentProps,
+} from './components/marker';
+export {
+  MessageScroller,
+  useMessageScroller,
+  useMessageScrollerVisibility,
+  type MessageScrollerProps,
+  type MessageScrollerViewportProps,
+  type MessageScrollerContentProps,
+  type MessageScrollerItemProps,
+  type MessageScrollerButtonProps,
+  type MessageScrollerPosition,
+} from './components/message-scroller';
 export {
   Message,
   type MessageProps,
@@ -116,6 +191,17 @@ export {
   type MessageFooterProps,
   type MessageActionsProps,
 } from './components/message';
+export {
+  Popover,
+  type PopoverProps,
+  type PopoverTriggerProps,
+  type PopoverContentProps,
+  type PopoverArrowProps,
+  type PopoverCloseProps,
+  type PopoverPlacement,
+  type PopoverAlign,
+  type PopoverPresentation,
+} from './components/popover';
 export { Progress, type ProgressProps } from './components/progress';
 export {
   RadioGroup,
@@ -126,8 +212,10 @@ export {
   ScrollFade,
   type ScrollFadeProps,
 } from './components/scroll-fade';
+export { Separator, type SeparatorProps } from './components/separator';
 export { Shimmer, type ShimmerProps } from './components/shimmer';
 export { Skeleton, type SkeletonProps } from './components/skeleton';
+export { Slider, type SliderProps } from './components/slider';
 export { Spinner, type SpinnerProps } from './components/spinner';
 export {
   Steps,
@@ -186,11 +274,14 @@ export {
   ChevronLeftIcon,
   ChevronRightIcon,
   FacebookIcon,
+  FileIcon,
   GoogleIcon,
   IconColorProvider,
   InfoIcon,
+  ImageIcon,
   MoonIcon,
   PackageIcon,
+  PaperclipIcon,
   PlusSquareIcon,
   ReceiptIcon,
   SearchIcon,

package/src/native/index.ts

@@ -25,7 +25,18 @@ import type { ComponentType, ReactNode } from 'react';
 interface NativeUIModule {
   Host: ComponentType<{
     children?: ReactNode;
-    matchContents?: boolean;
+    /**
+     * Whether the host resizes itself to the platform content.
+     *
+     * Every control here gives the host an explicit height instead, and takes
+     * its width from ordinary layout. The measurement arrives a frame late and
+     * again whenever the platform's content changes, so a host left to work
+     * its own size out renders at nothing and then jumps — on first paint, and
+     * again on first press. The per-axis form does not help; the answer is not
+     * to ask. Only the natively-presented sheet still uses it, where the host
+     * is a zero-size anchor rather than the control itself.
+     */
+    matchContents?: boolean | { vertical?: boolean; horizontal?: boolean };
     style?: unknown;
     [key: string]: unknown;
   }>;
@@ -41,6 +52,7 @@ interface NativeUIModule {
   }>;
   Button: ComponentType<Record<string, unknown>>;
   Switch: ComponentType<Record<string, unknown>>;
+  Slider: ComponentType<Record<string, unknown>>;
   Picker: ComponentType<Record<string, unknown>> & {
     Item: ComponentType<Record<string, unknown>>;
   };

package/src/primitives/keyboard-avoider.tsx

@@ -14,6 +14,13 @@ export interface KeyboardAvoiderProps extends ViewProps {
   className?: string;
   /** Set false to leave the content where it is. */
   enabled?: boolean;
+  /**
+   * Whether this is the element that should get out of the keyboard's way.
+   * Defaults to true, which is right for a composer or a toolbar. Pass a
+   * field's focus state when wrapping a single field, so the others on the
+   * screen stay put.
+   */
+  active?: boolean;
   /** Gap to keep between the content's bottom edge and the keyboard. */
   offset?: number;
   children?: ReactNode;
@@ -22,13 +29,14 @@ export interface KeyboardAvoiderProps extends ViewProps {
 export function KeyboardAvoider({
   className,
   enabled = true,
+  active = true,
   offset = 16,
   children,
   style,
   onLayout,
   ...props
 }: KeyboardAvoiderProps) {
-  const avoidance = useKeyboardAvoidance({ enabled, offset });
+  const avoidance = useKeyboardAvoidance({ enabled, active, offset });
 
   return (
     <Animated.View

package/src/primitives/scrim.tsx

@@ -0,0 +1,95 @@
+/**
+ * Scrim — the layer behind an overlay.
+ *
+ * An overlay needs the screen behind it to recede. There are two honest ways to
+ * do that: dim it, or blur it. Dimming is free and always works; blurring reads
+ * as more physical — the content behind stays legible as shape and colour while
+ * losing its detail — but it needs a native view to do it.
+ *
+ * `expo-blur` is resolved lazily and only when `blur` is asked for, so a project
+ * that never blurs anything installs nothing. When it is asked for and the
+ * package is missing, this falls back to a dim rather than failing: a blur you
+ * cannot draw is better shown as a darkened screen than as a crash.
+ *
+ * It fills its parent and does not intercept touches itself — the overlay layers
+ * its own dismiss `Pressable` over it — so it is purely the visual backdrop.
+ */
+import { type ComponentType } from 'react';
+import { StyleSheet, View, type ViewProps } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+interface BlurViewProps {
+  intensity?: number;
+  tint?: 'light' | 'dark' | 'default' | 'systemMaterial';
+  style?: unknown;
+  children?: React.ReactNode;
+}
+
+/**
+ * `expo-blur`'s BlurView, or null when it is not installed. Resolved once at
+ * module load — the require is cheap and caching it avoids a try/catch on every
+ * render.
+ */
+const BlurView: ComponentType<BlurViewProps> | null = (() => {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('expo-blur');
+    return (mod?.BlurView as ComponentType<BlurViewProps>) ?? null;
+  } catch {
+    return null;
+  }
+})();
+
+/** True when a real blur can be drawn — for a caller that wants to know. */
+export const hasBlur = BlurView !== null;
+
+export interface ScrimProps extends Omit<ViewProps, 'children'> {
+  /** Frost the backdrop instead of dimming it. Falls back to a dim if it can't. */
+  blur?: boolean;
+  /** Blur strength, 0–100. */
+  intensity?: number;
+  /** Which way the blur tints. */
+  tint?: 'light' | 'dark' | 'default' | 'systemMaterial';
+  /**
+   * The dim used when not blurring — and when blurring is asked for but
+   * unavailable. A popover passes a lighter one than a dialog.
+   */
+  dimClassName?: string;
+}
+
+export function Scrim({
+  blur = false,
+  intensity = 24,
+  tint = 'default',
+  dimClassName = 'bg-black/50',
+  style,
+  ...props
+}: ScrimProps) {
+  if (blur && BlurView) {
+    return (
+      <Animated.View
+        entering={FadeIn.duration(180)}
+        exiting={FadeOut.duration(150)}
+        style={[StyleSheet.absoluteFill, style]}
+        {...props}
+      >
+        {/* A faint dim under the blur so the frost has something to sit on —
+            a pure blur over a dark scene is nearly invisible. */}
+        <BlurView intensity={intensity} tint={tint} style={StyleSheet.absoluteFill} />
+        <View className="absolute inset-0 bg-black/10" />
+      </Animated.View>
+    );
+  }
+
+  return (
+    <Animated.View
+      entering={FadeIn.duration(150)}
+      exiting={FadeOut.duration(150)}
+      style={[StyleSheet.absoluteFill, style]}
+      className={dimClassName}
+      {...props}
+    />
+  );
+}
+
+Scrim.displayName = 'Scrim';

package/src/utils/haptics.ts

@@ -0,0 +1,63 @@
+/**
+ * Optional bridge to the platform's haptic engine.
+ *
+ * A tick under the finger is the difference between a control that responds
+ * and one that merely updates — but it is also the kind of thing that has to
+ * be free to ignore. `expo-haptics` is resolved lazily and every caller falls
+ * back to doing nothing, so a component with `haptics` set is silent rather
+ * than broken when the package is absent.
+ *
+ * ```sh
+ * npx expo install expo-haptics
+ * ```
+ */
+import { Platform } from 'react-native';
+
+interface HapticsModule {
+  selectionAsync: () => Promise<void>;
+  impactAsync: (style?: unknown) => Promise<void>;
+  ImpactFeedbackStyle?: Record<string, unknown>;
+}
+
+let resolved = false;
+let module: HapticsModule | null = null;
+
+/**
+ * The haptics module, or null when it is not installed or the platform has no
+ * engine behind it. Resolved once and cached — a failed require is not retried
+ * on every keystroke.
+ */
+function getHaptics(): HapticsModule | null {
+  if (resolved) return module;
+  resolved = true;
+
+  // Web has no haptic engine; the Vibration API is a different thing and a
+  // worse one — a buzz where a tick was meant.
+  if (Platform.OS === 'web') return null;
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    module = require('expo-haptics') as HapticsModule;
+  } catch {
+    module = null;
+  }
+
+  return module;
+}
+
+/** Whether a haptic will actually be felt. */
+export function hasHaptics(): boolean {
+  return getHaptics() !== null;
+}
+
+/**
+ * The light tick for moving between options — a segmented control, a picker,
+ * a section marker. Deliberately not an impact: selection is the lightest of
+ * the feedbacks, and anything heavier gets tiring when it fires on scroll.
+ *
+ * Fire-and-forget. A rejected haptic is not worth an unhandled rejection, and
+ * there is nothing useful to do about one.
+ */
+export function selectionTick(): void {
+  void getHaptics()?.selectionAsync().catch(() => {});
+}

package/theme.css

@@ -67,6 +67,22 @@
   --color-destructive-soft: unset;
   --color-destructive-subtle: unset;
 
+  /*
+   * Chart series. A separate ramp from the status colours because they answer
+   * a different question: a status colour means something (this failed, this
+   * is fine), a series colour only has to be told apart from the other four.
+   * Ordered by prominence — chart-1 is the series the chart is about, and each
+   * theme starts it on that family's own accent.
+   *
+   * These are the tokens to override in your app's global.css, after the
+   * `panelui-native/theme.css` import, to put a chart on brand.
+   */
+  --color-chart-1: unset;
+  --color-chart-2: unset;
+  --color-chart-3: unset;
+  --color-chart-4: unset;
+  --color-chart-5: unset;
+
   /*
    * Radius scale. Themed rather than static: a theme is a shape as well as a
    * palette, so each family sets its own corner rounding. --radius-3xl is
@@ -143,6 +159,13 @@
       --color-warning-subtle: rgba(245, 158, 11, 0.08);
       --color-destructive-soft: rgba(239, 68, 68, 0.1);
       --color-destructive-subtle: rgba(239, 68, 68, 0.08);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #262626;
+      --color-chart-2: #3b82f6;
+      --color-chart-3: #10b981;
+      --color-chart-4: #f59e0b;
+      --color-chart-5: #8b5cf6;
     
       /* Panel shape scale */
       --radius-xs: 4px;
@@ -176,8 +199,12 @@
       --color-secondary-foreground: #f5f5f5;
 
       --color-muted: rgba(255, 255, 255, 0.08);
-      /* color-mix(neutral-500 90%, white) */
-      --color-muted-foreground: #818181;
+      /*
+       * color-mix(neutral-500 86%, white). Was 90% (#818181), which came out
+       * at 4.42:1 on the popover surface — under the 4.5:1 floor for body
+       * text. Every other theme's muted foreground already clears it.
+       */
+      --color-muted-foreground: #878787;
 
       --color-accent: rgba(255, 255, 255, 0.08);
       --color-accent-foreground: #f5f5f5;
@@ -216,6 +243,13 @@
       --color-warning-subtle: rgba(245, 158, 11, 0.16);
       --color-destructive-soft: rgba(241, 87, 87, 0.06);
       --color-destructive-subtle: rgba(241, 87, 87, 0.16);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #fafafa;
+      --color-chart-2: #60a5fa;
+      --color-chart-3: #34d399;
+      --color-chart-4: #fbbf24;
+      --color-chart-5: #a78bfa;
     
       /* Panel shape scale */
       --radius-xs: 4px;
@@ -298,6 +332,13 @@
       --color-warning-subtle: rgba(245, 166, 35, 0.08);
       --color-destructive-soft: rgba(229, 72, 77, 0.1);
       --color-destructive-subtle: rgba(229, 72, 77, 0.08);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #0070f3;
+      --color-chart-2: #171717;
+      --color-chart-3: #7928ca;
+      --color-chart-4: #f5a623;
+      --color-chart-5: #0a9396;
     
       /* Moon shape scale */
       --radius-xs: 2px;
@@ -360,6 +401,13 @@
       --color-warning-subtle: rgba(245, 166, 35, 0.16);
       --color-destructive-soft: rgba(229, 72, 77, 0.1);
       --color-destructive-subtle: rgba(229, 72, 77, 0.16);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #3291ff;
+      --color-chart-2: #ededed;
+      --color-chart-3: #a855f7;
+      --color-chart-4: #fbbf24;
+      --color-chart-5: #2dd4bf;
     
       /* Moon shape scale */
       --radius-xs: 2px;
@@ -425,6 +473,13 @@
       --color-warning-subtle: rgba(245, 158, 11, 0.08);
       --color-destructive-soft: rgba(239, 68, 68, 0.1);
       --color-destructive-subtle: rgba(239, 68, 68, 0.08);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #24b47e;
+      --color-chart-2: #1f2937;
+      --color-chart-3: #2563eb;
+      --color-chart-4: #f59e0b;
+      --color-chart-5: #db2777;
     
       /* Grass shape scale */
       --radius-xs: 6px;
@@ -487,6 +542,13 @@
       --color-warning-subtle: rgba(245, 158, 11, 0.16);
       --color-destructive-soft: rgba(241, 87, 87, 0.08);
       --color-destructive-subtle: rgba(241, 87, 87, 0.16);
+
+      /* chart series, in order of prominence */
+      --color-chart-1: #3ecf8e;
+      --color-chart-2: #ededed;
+      --color-chart-3: #60a5fa;
+      --color-chart-4: #fbbf24;
+      --color-chart-5: #f472b6;
     
       /* Grass shape scale */
       --radius-xs: 6px;