panelui-native 0.75.0 → 0.76.0

package/src/index.ts

@@ -20,6 +20,9 @@ export { Portal, PortalHost, PortalProvider } from './primitives/portal';
 // recede. Public so a custom overlay gets the same backdrop — and the same
 // graceful fall back from blur to dim — as the built-in ones.
 export { Scrim, hasBlur, type ScrimProps } from './primitives/scrim';
+// The material iOS draws its floating controls in, with a solid fallback where
+// there is none. Public so a surface of your own gets the same treatment.
+export { Glass, hasGlass, type GlassProps, type GlassVariant, type GlassRadius } from './primitives/glass';
 export { Text, type TextProps } from './primitives/text';
 export { Collapse, type CollapseProps } from './primitives/collapse';
 export {
@@ -935,6 +938,25 @@ export {
   type SignatureToolbarProps,
   type SignatureButtonProps,
 } from './components/signature';
+export {
+  AIInput,
+  type AIInputProps,
+  type AIInputStatus,
+  type AIInputFieldProps,
+  type AIInputRowProps,
+  type AIInputToolbarProps,
+  type AIInputActionProps,
+  type AIInputPillProps,
+  type AIInputSubmitProps,
+  type AIInputRecordingProps,
+  type AIInputSheetProps,
+  type AIInputSheetScreenProps,
+  type AIInputSheetGroupProps,
+  type AIInputSheetRowProps,
+  type AIInputSheetToggleProps,
+  type AIInputSheetChoiceProps,
+  type AIInputVoiceModeProps,
+} from './components/ai-input';
 export { Shimmer, type ShimmerProps } from './components/shimmer';
 export {
   Reasoning,
@@ -1190,17 +1212,20 @@ export {
   ArrowDownIcon,
   ArrowUpIcon,
   ArrowUpRightIcon,
+  AudioLinesIcon,
   BadgeCheckIcon,
   BellIcon,
   BookmarkIcon,
   BoldIcon,
   CalendarIcon,
+  CameraIcon,
   CardIcon,
   CheckCircleIcon,
   CheckIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronsUpDownIcon,
   ChevronUpIcon,
   CircleIcon,
   CodeIcon,
@@ -1215,6 +1240,7 @@ export {
   FileIcon,
   FolderIcon,
   FolderOpenIcon,
+  GlobeIcon,
   GoogleIcon,
   HeartIcon,
   HeadingIcon,
@@ -1247,6 +1273,7 @@ export {
   RotateCcwIcon,
   RotateCwIcon,
   SearchIcon,
+  SendArrowIcon,
   SendIcon,
   ShareNodesIcon,
   ShieldAlertIcon,

package/src/primitives/controllable-state.ts

@@ -0,0 +1,112 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+
+const identity = <T,>(value: T): T => value;
+const objectIs = <T,>(left: T, right: T): boolean => Object.is(left, right);
+
+export interface ControllableStateOptions<T> {
+  /** Accepted owner state. `undefined` selects uncontrolled ownership. */
+  value: T | undefined;
+  /** Initial state used only while uncontrolled. */
+  defaultValue: T;
+  /** Reports a distinct requested value exactly once per setter invocation. */
+  onChange?: (value: T) => void;
+  /** Reports accepted state changes, whether requested or externally reset. */
+  onSettled?: (value: T) => void;
+  /** Normalize defaults, controlled values, and requests through one boundary. */
+  normalize?: (value: T) => T;
+  /** Equality used for no-op requests and accepted settlement. */
+  isEqual?: (left: T, right: T) => boolean;
+  /** Stable semantic identity for controlled objects recreated by their owner. */
+  getValueKey?: (value: T) => unknown;
+}
+
+export interface ControllableStateResult<T> {
+  /** State accepted by the current owner; controlled requests never render optimistically. */
+  value: T;
+  setValue: Dispatch<SetStateAction<T>>;
+  isControlled: boolean;
+}
+
+/**
+ * Owner-driven controlled/uncontrolled state with an explicit settlement edge.
+ *
+ * Switching from controlled to uncontrolled retains the last accepted owner
+ * value instead of resurrecting a stale default. Switching into controlled
+ * mode adopts the prop immediately. `undefined` is the ownership sentinel and
+ * therefore cannot itself be a controlled value; use `null` for empty state.
+ */
+export function useControllableState<T>({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  onSettled,
+  normalize = identity,
+  isEqual = objectIs,
+  getValueKey,
+}: ControllableStateOptions<T>): ControllableStateResult<T> {
+  const [internalValue, setInternalValue] = useState(() =>
+    normalize(defaultValue)
+  );
+  const isControlled = valueProp !== undefined;
+  const controlledKey = isControlled
+    ? getValueKey
+      ? getValueKey(valueProp as T)
+      : valueProp
+    : undefined;
+  const controlledValue = useMemo(
+    () => (isControlled ? normalize(valueProp as T) : undefined),
+    // The semantic key deliberately replaces object identity for equivalent owner values.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [controlledKey, isControlled, normalize]
+  );
+  const wasControlled = useRef(isControlled);
+  const lastControlledValue = useRef<T | undefined>(controlledValue);
+  if (isControlled) lastControlledValue.current = controlledValue;
+
+  const leavingControlled = wasControlled.current && !isControlled;
+  const value = isControlled
+    ? (controlledValue as T)
+    : leavingControlled
+      ? (lastControlledValue.current as T)
+      : internalValue;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  useLayoutEffect(() => {
+    if (wasControlled.current && !isControlled) {
+      setInternalValue(lastControlledValue.current as T);
+    }
+    wasControlled.current = isControlled;
+  }, [isControlled]);
+
+  const previousSettled = useRef(value);
+  useLayoutEffect(() => {
+    if (isEqual(previousSettled.current, value)) return;
+    previousSettled.current = value;
+    onSettled?.(value);
+  }, [isEqual, onSettled, value]);
+
+  const setValue = useCallback<Dispatch<SetStateAction<T>>>(
+    (next) => {
+      const requested = normalize(
+        typeof next === 'function'
+          ? (next as (current: T) => T)(valueRef.current)
+          : next
+      );
+      if (isEqual(valueRef.current, requested)) return;
+      if (!isControlled) setInternalValue(requested);
+      onChange?.(requested);
+    },
+    [isControlled, isEqual, normalize, onChange]
+  );
+
+  return { value, setValue, isControlled };
+}

package/src/primitives/finite-chart.ts

@@ -0,0 +1,14 @@
+/** Returns a number only when it is safe to use in chart arithmetic. */
+export function finiteChartNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+/** Accepts an explicit domain only when both ends are finite. */
+export function finiteChartDomain(
+  domain: readonly [number, number] | undefined
+): [number, number] | undefined {
+  if (!domain) return undefined;
+  const low = finiteChartNumber(domain[0]);
+  const high = finiteChartNumber(domain[1]);
+  return low === undefined || high === undefined ? undefined : [low, high];
+}

package/src/primitives/glass.tsx

@@ -0,0 +1,171 @@
+/**
+ * Glass — the material iOS draws its own floating controls in.
+ *
+ * A control that floats over content needs to read as *over* it, and a flat
+ * fill cannot say that: it either hides what is behind it or disappears into
+ * it. The system material does both jobs at once — it refracts what is behind,
+ * lifts its own edge, and stays legible over anything.
+ *
+ * ```tsx
+ * <Glass radius={28} className="px-4 py-3">
+ *   <Text>Over whatever is behind it.</Text>
+ * </Glass>
+ * ```
+ *
+ * ## Where it is real, and where it is not
+ *
+ * The material exists on iOS 26 and above. Below that, on Android, on web, and
+ * for anyone who has switched Reduce Transparency on, this draws
+ * `fallbackClassName` instead — a solid token surface. That is deliberate
+ * rather than a gap: a hand-drawn approximation of a system material is a
+ * near-miss on the one platform that has the real thing, and on Android it is
+ * an iOS look pasted onto a platform that never asked for it.
+ *
+ * So `Glass` is not a promise that the screen will be glass. It is a promise
+ * that the container will be drawn correctly either way, and callers should
+ * pick a `fallbackClassName` that stands on its own.
+ *
+ * ## The material is a layer, not the box
+ *
+ * The native view is rendered as a non-interactive layer filling this
+ * container, with the content above it, for the same reason `Scrim` layers a
+ * blur: it keeps every layout class, every token and every touch target on an
+ * ordinary `View` that behaves the way the rest of the library does.
+ *
+ * `radius` is a number rather than a class because the material has to round
+ * its own corners — clipping a square one to a rounded parent throws away the
+ * lit edge that makes it read as glass.
+ *
+ * ## Do not fade it
+ *
+ * Setting `opacity` to `0` on the material or on anything above it stops it
+ * rendering at all, and it does not come back when the opacity does. Move it,
+ * or unmount it; never animate it out.
+ */
+import type { ComponentType, ReactNode } from 'react';
+import { Platform, StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import { cn } from '../utils/cn';
+import { useReduceTransparency } from './scrim';
+
+/** How the material treats what is behind it. */
+export type GlassVariant = 'regular' | 'clear';
+
+/**
+ * Corner radius in points — one number for all four, or a top and a bottom.
+ *
+ * The two-sided form is for a surface with an edge that is not a real edge: a
+ * sheet docked to the bottom of the screen rounds its top and leaves its
+ * bottom square, because the screen edge is where it ends.
+ */
+export type GlassRadius = number | { top?: number; bottom?: number };
+
+function shapeOf(radius: GlassRadius | undefined) {
+  if (radius === undefined) return null;
+  if (typeof radius === 'number') return { borderRadius: radius };
+  return {
+    borderTopLeftRadius: radius.top ?? 0,
+    borderTopRightRadius: radius.top ?? 0,
+    borderBottomLeftRadius: radius.bottom ?? 0,
+    borderBottomRightRadius: radius.bottom ?? 0,
+  };
+}
+
+interface GlassViewProps {
+  glassEffectStyle?: GlassVariant | 'none';
+  tintColor?: string;
+  colorScheme?: 'auto' | 'light' | 'dark';
+  style?: StyleProp<ViewStyle>;
+  pointerEvents?: ViewProps['pointerEvents'];
+  children?: ReactNode;
+}
+
+/**
+ * `expo-glass-effect`'s GlassView, or null when the material cannot be drawn
+ * here.
+ *
+ * Resolved once at module load, behind three gates that all have to pass. The
+ * package is optional, so the require can fail; the API is missing from some
+ * iOS 26 builds, and reaching for it there crashes; and the design itself is
+ * only present when the app was compiled for it. Asking all three once is
+ * cheaper than a try/catch on every render, and there is no answer that can
+ * change while the process is alive.
+ */
+const GlassView: ComponentType<GlassViewProps> | null = (() => {
+  if (Platform.OS !== 'ios') return null;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('expo-glass-effect');
+    if (typeof mod?.isGlassEffectAPIAvailable === 'function' && !mod.isGlassEffectAPIAvailable()) {
+      return null;
+    }
+    if (typeof mod?.isLiquidGlassAvailable === 'function' && !mod.isLiquidGlassAvailable()) {
+      return null;
+    }
+    return (mod?.GlassView as ComponentType<GlassViewProps>) ?? null;
+  } catch {
+    return null;
+  }
+})();
+
+/**
+ * True when the real material can be drawn — for a caller that wants to know
+ * before it commits to a look. It says nothing about Reduce Transparency, which
+ * is a live preference and belongs to the hook.
+ */
+export const hasGlass = GlassView !== null;
+
+export interface GlassProps extends ViewProps {
+  /**
+   * How much of what is behind shows through. `regular` is the everyday
+   * material; `clear` is thinner, for something over its own artwork.
+   */
+  variant?: GlassVariant;
+  /** Tints the material. Takes a colour, not a token name. */
+  tint?: string;
+  /**
+   * Corner radius in points. The material rounds itself to this, so give it
+   * the same shape the container is drawn with — clipping a square material
+   * to a rounded parent throws away the lit edge that makes it read as glass.
+   */
+  radius?: GlassRadius;
+  /** Applied only when the material cannot be drawn. Give it a real surface. */
+  fallbackClassName?: string;
+  className?: string;
+}
+
+export function Glass({
+  variant = 'regular',
+  tint,
+  radius,
+  fallbackClassName = 'bg-card',
+  className,
+  children,
+  style,
+  ...props
+}: GlassProps) {
+  const reduceTransparency = useReduceTransparency();
+  // Not knowing yet counts as "do not draw it": the material arriving a frame
+  // late is invisible, and one flashing at somebody who opted out is not.
+  const material = GlassView !== null && reduceTransparency === false;
+  const shape = shapeOf(radius);
+
+  return (
+    <View
+      className={cn('overflow-hidden', material ? null : fallbackClassName, className)}
+      style={[shape, style]}
+      {...props}
+    >
+      {material && GlassView ? (
+        <GlassView
+          glassEffectStyle={variant}
+          tintColor={tint}
+          pointerEvents="none"
+          style={[StyleSheet.absoluteFill, shape]}
+        />
+      ) : null}
+      {children}
+    </View>
+  );
+}
+
+Glass.displayName = 'Glass';

package/src/primitives/scrim.tsx

@@ -113,7 +113,13 @@ function observeReduceTransparency(
  */
 let knownReduceTransparency: boolean | null = null;
 
-function useReduceTransparency() {
+/**
+ * Whether the device asks for Reduce Transparency: `true`, `false`, or `null`
+ * while the platform has not answered yet. Exported because every material in
+ * the library has to respect the same preference, and two copies of this would
+ * be two answers.
+ */
+export function useReduceTransparency() {
   // Not knowing is deliberately conservative: draw opaque until the platform
   // says blur is allowed, rather than flashing blur at someone who opted out.
   const [enabled, setEnabled] = useState<boolean | null>(knownReduceTransparency);