panelui-native 0.28.1 → 0.30.0

package/src/components/tooltip/index.tsx

@@ -3,9 +3,15 @@
  *
  * A popover is a panel you open and deal with; a tooltip is a whisper. It
  * carries a word or two about what a control does, appears without taking the
- * screen, and goes away on its own. That is why it is inverted rather than
- * surface-coloured, why it is not dismissible with a scrim, and why it closes
- * after a beat instead of waiting to be told.
+ * screen, and goes away on its own. That is why it is inverted by default, why
+ * it is not dismissible with a scrim, and why it closes after a beat instead of
+ * waiting to be told.
+ *
+ * The inversion is a default rather than a rule, because the whisper has a
+ * larger sibling: a tooltip that carries a heading and a sentence stops reading
+ * as a different layer and starts reading as a panel with the wrong colours.
+ * `variant="surface"` makes it one, and the sizing props — `width`,
+ * `minWidth`, `maxHeight`, `scrollable` — are what let it hold that much.
  *
  * On touch there is no hover to open it, so the gesture is a long press by
  * default — the platform's own "tell me more" gesture — with `openOn="press"`
@@ -44,6 +50,7 @@ import {
 } from 'react';
 import {
   Pressable,
+  ScrollView,
   useWindowDimensions,
   View,
   type LayoutChangeEvent,
@@ -58,6 +65,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { tv } from 'tailwind-variants';
 import { Portal } from '../../primitives/portal';
 import { Text, type TextProps } from '../../primitives/text';
 import { cn } from '../../utils/cn';
@@ -73,6 +81,57 @@ const DEFAULT_DURATION = 1500;
 
 export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 export type TooltipAlign = 'start' | 'center' | 'end';
+export type TooltipVariant = 'inverted' | 'surface';
+
+/**
+ * Every colour the tooltip has, in one place.
+ *
+ * They were three literals at three call sites — the panel, the arrow and the
+ * default text — which meant retheming a tooltip took three `className`
+ * overrides that each had to be kept in step with the others. As a variant it
+ * is one prop, and the arrow and the text read it off the context rather than
+ * being told again.
+ */
+const tooltipVariants = tv({
+  slots: {
+    content: 'rounded-lg px-2.5 py-1.5 shadow-md',
+    text: 'text-sm font-medium',
+    title: 'text-sm font-semibold',
+    description: 'text-sm',
+    arrow: 'rounded-[1px]',
+  },
+  variants: {
+    variant: {
+      /*
+       * The default, and deliberately not a surface colour: a whisper over the
+       * page should read as a different layer rather than as another panel of
+       * it. It is the treatment a one-line label wants.
+       */
+      inverted: {
+        content: 'bg-foreground',
+        text: 'text-background',
+        title: 'text-background',
+        description: 'text-background/70',
+        arrow: 'bg-foreground',
+      },
+      /*
+       * For a tooltip carrying more than a label — a heading, a sentence, a row
+       * of controls. At that size the inversion stops reading as a whisper and
+       * starts reading as a panel with the wrong colours, so it becomes one.
+       */
+      surface: {
+        content: 'border border-border bg-popover',
+        text: 'text-popover-foreground',
+        title: 'text-popover-foreground',
+        description: 'text-muted-foreground',
+        arrow: 'border-border bg-popover',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'inverted',
+  },
+});
 
 interface TriggerRect {
   x: number;
@@ -97,6 +156,9 @@ interface TooltipContextValue {
   openOn: TooltipOpenOn;
   /** Accessibility label carried onto the trigger. */
   label?: string;
+  /** Which set of colours the panel, arrow and text draw from. */
+  variant: TooltipVariant;
+  setVariant: (variant: TooltipVariant) => void;
 }
 
 export type TooltipOpenOn = 'longPress' | 'press';
@@ -149,6 +211,12 @@ function TooltipRoot({
   const [trigger, setTrigger] = useState<TriggerRect | null>(null);
   const [placement, setPlacement] = useState<TooltipPlacement>('top');
   const [arrowOffset, setArrowOffset] = useState(0);
+  /*
+   * Published by Content rather than passed to it, because the arrow and the
+   * text sit beside the panel in the tree and would otherwise each have to be
+   * told which colours to use.
+   */
+  const [variant, setVariant] = useState<TooltipVariant>('inverted');
 
   const isControlled = open !== undefined;
   const resolvedOpen = isControlled ? open : internalOpen;
@@ -186,8 +254,10 @@ function TooltipRoot({
       setArrowOffset,
       openOn,
       label,
+      variant,
+      setVariant,
     }),
-    [resolvedOpen, show, hide, trigger, placement, arrowOffset, openOn, label]
+    [resolvedOpen, show, hide, trigger, placement, arrowOffset, openOn, label, variant]
   );
 
   return <TooltipContext.Provider value={context}>{children}</TooltipContext.Provider>;
@@ -282,6 +352,34 @@ export interface TooltipContentProps extends ViewProps {
   offset?: number;
   /** Nudge along the alignment axis, in pixels. */
   alignOffset?: number;
+  /**
+   * Which set of colours the panel, its arrow and its text draw from.
+   *
+   * `inverted` is the default and right for a label: a whisper over the page
+   * should read as a different layer rather than as another panel of it.
+   * `surface` matches the popover — reach for it once the tooltip carries a
+   * heading and a sentence, where the inversion stops reading as a whisper.
+   */
+  variant?: TooltipVariant;
+  /**
+   * `content-fit` sizes to the content, `trigger` matches the trigger's width,
+   * `full` spans the safe area, and a number is that many pixels. Worth setting
+   * for anything longer than a label, which would otherwise run to whatever
+   * width the sentence happens to want.
+   */
+  width?: number | 'trigger' | 'full' | 'content-fit';
+  /** Floor for the panel's width, in pixels. */
+  minWidth?: number;
+  /**
+   * Ceiling for the panel's height, in pixels. Always clamped to the room
+   * inside the safe area, which is also the default.
+   */
+  maxHeight?: number;
+  /**
+   * Scroll the body when it is taller than `maxHeight`. Off by default — a
+   * label has nothing to scroll, and a scroller around one only adds a bounce.
+   */
+  scrollable?: boolean;
   children?: ReactNode;
 }
 
@@ -291,13 +389,25 @@ function TooltipContent({
   align = 'center',
   offset = DEFAULT_OFFSET,
   alignOffset = 0,
+  variant = 'inverted',
+  width = 'content-fit',
+  minWidth,
+  maxHeight,
+  scrollable = false,
   children,
   onLayout: onLayoutProp,
   style,
   ...props
 }: TooltipContentProps) {
   const context = useTooltip('Tooltip.Content');
-  const { open, hide, trigger, setPlacement, setArrowOffset } = context;
+  const { open, hide, trigger, setPlacement, setArrowOffset, setVariant } = context;
+  const slots = tooltipVariants({ variant });
+
+  // The arrow and the text sit beside this panel in the tree, so the chosen
+  // colours are published rather than passed down.
+  useEffect(() => {
+    setVariant(variant);
+  }, [variant, setVariant]);
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
@@ -332,6 +442,28 @@ function TooltipContent({
     bottom: screenHeight - insets.bottom - SCREEN_MARGIN,
   };
 
+  const available = bounds.right - bounds.left;
+  const requestedWidth =
+    width === 'content-fit'
+      ? undefined
+      : width === 'trigger'
+        ? trigger?.width
+        : width === 'full'
+          ? available
+          : width;
+
+  // The floor never wins past the space there actually is — a panel wider than
+  // the screen is worse than a cramped one.
+  const resolvedWidth =
+    requestedWidth === undefined
+      ? minWidth === undefined
+        ? undefined
+        : Math.min(minWidth, available)
+      : Math.min(Math.max(requestedWidth, minWidth ?? 0), available);
+
+  const room = bounds.bottom - bounds.top;
+  const resolvedMaxHeight = Math.min(maxHeight ?? room, room);
+
   const position =
     trigger && size
       ? place({ trigger, size, placement, align, offset, alignOffset, bounds })
@@ -418,14 +550,20 @@ function TooltipContent({
               // so it is laid out off-screen rather than at the origin.
               top: position?.top ?? -9999,
               left: position?.left ?? -9999,
-              maxWidth: bounds.right - bounds.left,
+              maxWidth: available,
+              maxHeight: resolvedMaxHeight,
+              width: resolvedWidth,
             }}
           >
             <Animated.View
-              accessibilityRole="text"
+              // A panel with a heading and a paragraph is a group, not a run of
+              // text — the flat role would have a screen reader read it as one
+              // string with no structure.
+              accessibilityRole={scrollable || width !== 'content-fit' ? undefined : 'text'}
               style={[labelStyle, style]}
               className={cn(
-                'rounded-lg bg-foreground px-2.5 py-1.5 shadow-md',
+                slots.content(),
+                scrollable ? 'overflow-hidden' : undefined,
                 className
               )}
               {...props}
@@ -438,12 +576,12 @@ function TooltipContent({
                 view bare. Only the text nodes need the treatment; an element
                 is already responsible for itself.
               */}
-              {Children.map(children, (child) =>
-                typeof child === 'string' || typeof child === 'number' ? (
-                  <TooltipText>{child}</TooltipText>
-                ) : (
-                  child
-                )
+              {scrollable ? (
+                <ScrollView bounces={false} showsVerticalScrollIndicator={false}>
+                  {wrapTooltipText(children)}
+                </ScrollView>
+              ) : (
+                wrapTooltipText(children)
               )}
             </Animated.View>
           </Animated.View>
@@ -453,11 +591,53 @@ function TooltipContent({
   );
 }
 
-/** The label's default text: small and inverted against the dark surface. */
-const TooltipText = ({ className, ...props }: TextProps) => (
-  <Text size="sm" weight="medium" className={cn('text-background', className)} {...props} />
-);
+/** Bare strings become the label's default text; elements speak for themselves. */
+function wrapTooltipText(children: ReactNode) {
+  return Children.map(children, (child) =>
+    typeof child === 'string' || typeof child === 'number' ? (
+      <TooltipText>{child}</TooltipText>
+    ) : (
+      child
+    )
+  );
+}
+
+/** The label's default text, coloured to whatever the panel is made of. */
+function TooltipText({ className, ...props }: TextProps) {
+  const { variant } = useTooltip('Tooltip.Text');
+  const { text } = tooltipVariants({ variant });
+
+  return <Text className={cn(text(), className)} {...props} />;
+}
 TooltipText.displayName = 'Tooltip.Text';
+TooltipTitle.displayName = 'Tooltip.Title';
+TooltipDescription.displayName = 'Tooltip.Description';
+
+export interface TooltipTitleProps extends TextProps {
+  className?: string;
+}
+
+/** A heading, for a tooltip carrying more than a label. */
+function TooltipTitle({ className, ...props }: TooltipTitleProps) {
+  const { variant } = useTooltip('Tooltip.Title');
+  const { title } = tooltipVariants({ variant });
+
+  return (
+    <Text accessibilityRole="header" className={cn(title(), className)} {...props} />
+  );
+}
+
+export interface TooltipDescriptionProps extends TextProps {
+  className?: string;
+}
+
+/** The sentence under a `Tooltip.Title`, in the panel's secondary colour. */
+function TooltipDescription({ className, ...props }: TooltipDescriptionProps) {
+  const { variant } = useTooltip('Tooltip.Description');
+  const { description } = tooltipVariants({ variant });
+
+  return <Text className={cn(description(), className)} {...props} />;
+}
 
 export interface TooltipArrowProps extends ViewProps {
   className?: string;
@@ -471,7 +651,8 @@ export interface TooltipArrowProps extends ViewProps {
  * the trigger rather than over the label's middle.
  */
 function TooltipArrow({ className, style, ...props }: TooltipArrowProps) {
-  const { trigger, placement, arrowOffset } = useTooltip('Tooltip.Arrow');
+  const { trigger, placement, arrowOffset, variant } = useTooltip('Tooltip.Arrow');
+  const { arrow } = tooltipVariants({ variant });
   if (!trigger) return null;
 
   const vertical = placement === 'top' || placement === 'bottom';
@@ -499,7 +680,7 @@ function TooltipArrow({ className, style, ...props }: TooltipArrowProps) {
         },
         style,
       ]}
-      className={cn('rounded-[1px] bg-foreground', className)}
+      className={cn(arrow(), className)}
       {...props}
     />
   );
@@ -606,5 +787,7 @@ export const Tooltip = Object.assign(TooltipRoot, {
   Trigger: TooltipTrigger,
   Content: TooltipContent,
   Arrow: TooltipArrow,
+  Title: TooltipTitle,
+  Description: TooltipDescription,
   Text: TooltipText,
 });

package/src/icons/index.tsx

@@ -872,3 +872,105 @@ export function UnlockIcon({ size = 16, color, ...props }: IconProps) {
     </Svg>
   );
 }
+
+/**
+ * Four-pointed sparkles. The mark for a model doing something on your behalf —
+ * a reasoning step, a generated plan — where a gear or a brain reads as
+ * machinery rather than as assistance.
+ */
+export function SparklesIcon({ 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="M11 3 12.6 8.4 18 10l-5.4 1.6L11 17l-1.6-5.4L4 10l5.4-1.6z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M18 15.5 18.7 18l2.3.7-2.3.7-.7 2.3-.7-2.3-2.3-.7 2.3-.7z"
+        stroke={resolved}
+        strokeWidth={1.6}
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Two stacked sheets — the copy action, paired with CheckIcon once it has run. */
+export function CopyIcon({ 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="M9 9h10v12H9z"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M15 5H5v12h2"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** Two links of a chain, for a row that opens somewhere outside the app. */
+export function LinkIcon({ 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="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+/** A list with its items ticked off — a plan, or a run of steps. */
+export function ListChecksIcon({ 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="m3 6 1.8 1.8L8 4.5M3 16l1.8 1.8L8 14.5"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M12 6.5h9M12 17.5h9"
+        stroke={resolved}
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
+    </Svg>
+  );
+}
+
+/** A hollow ring, for a step that has not started. */
+export function CircleIcon({ 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={8} stroke={resolved} strokeWidth={2} />
+    </Svg>
+  );
+}

package/src/index.ts

@@ -21,6 +21,7 @@ export { Portal, PortalHost, PortalProvider } from './primitives/portal';
 // graceful fall back from blur to dim — as the built-in ones.
 export { Scrim, hasBlur, type ScrimProps } from './primitives/scrim';
 export { Text, type TextProps } from './primitives/text';
+export { Collapse, type CollapseProps } from './primitives/collapse';
 export {
   KeyboardAvoider,
   type KeyboardAvoiderProps,
@@ -271,6 +272,8 @@ export {
 export {
   Calendar,
   type CalendarProps,
+  type CalendarHeaderProps,
+  type CalendarNavProps,
   type CalendarMode,
   type CalendarCaptionLayout,
   type CalendarDisabled,
@@ -332,6 +335,7 @@ export {
   type NumberInputProps,
 } from './components/number-input';
 export { OtpInput, type OtpInputProps } from './components/otp-input';
+export { Textarea, type TextareaProps } from './components/textarea';
 export {
   Item,
   type ItemProps,
@@ -375,6 +379,24 @@ export {
   type MarkerIconProps,
   type MarkerContentProps,
 } from './components/marker';
+export {
+  Menu,
+  type MenuProps,
+  type MenuTriggerProps,
+  type MenuContentProps,
+  type MenuBackgroundProps,
+  type MenuLabelProps,
+  type MenuItemProps,
+  type MenuCheckboxItemProps,
+  type MenuRadioGroupProps,
+  type MenuRadioItemProps,
+  type MenuSeparatorProps,
+  type MenuSubProps,
+  type MenuSubTriggerProps,
+  type MenuSubContentProps,
+  type MenuItemVariant,
+  type MenuRadioIndicator,
+} from './components/menu';
 export {
   MessageScroller,
   useMessageScroller,
@@ -448,6 +470,52 @@ export {
   type SignatureButtonProps,
 } from './components/signature';
 export { Shimmer, type ShimmerProps } from './components/shimmer';
+export {
+  Reasoning,
+  type ReasoningProps,
+  type ReasoningTriggerProps,
+  type ReasoningContentProps,
+} from './components/reasoning';
+export {
+  Sources,
+  type SourcesProps,
+  type SourcesTriggerProps,
+  type SourcesContentProps,
+  type SourcesSourceProps,
+} from './components/sources';
+export {
+  Task,
+  type TaskProps,
+  type TaskTriggerProps,
+  type TaskContentProps,
+  type TaskItemProps,
+  type TaskFileProps,
+  type TaskStatus,
+} from './components/task';
+export {
+  CodeBlock,
+  resolveLanguage,
+  type CodeBlockProps,
+  type CodeBlockHeaderProps,
+  type CodeBlockFilenameProps,
+  type CodeBlockLanguageProps,
+  type CodeBlockActionsProps,
+  type CodeBlockCopyButtonProps,
+  type CodeLanguage,
+  type Token,
+  type TokenKind,
+} from './components/code-block';
+export {
+  Plan,
+  type PlanProps,
+  type PlanHeaderProps,
+  type PlanTitleProps,
+  type PlanDescriptionProps,
+  type PlanActionProps,
+  type PlanTriggerProps,
+  type PlanContentProps,
+  type PlanFooterProps,
+} from './components/plan';
 export {
   ScrollText,
   type ScrollTextProps,
@@ -508,9 +576,12 @@ export {
   type TooltipTriggerProps,
   type TooltipContentProps,
   type TooltipArrowProps,
+  type TooltipTitleProps,
+  type TooltipDescriptionProps,
   type TooltipPlacement,
   type TooltipAlign,
   type TooltipOpenOn,
+  type TooltipVariant,
 } from './components/tooltip';
 export {
   Typography,

package/src/primitives/collapse.tsx

@@ -0,0 +1,128 @@
+/**
+ * Collapse — a body that opens and closes by animating its own height.
+ *
+ * Height cannot be animated from `auto`, so the content is measured first and
+ * the measurement is what gets animated to. While that is happening the content
+ * is taken out of the flow, because a child of a view whose height is
+ * mid-animation reports that animated height back and the panel then settles on
+ * whatever it happened to measure.
+ *
+ * The moment the animation finishes, both go away and the content lays out
+ * normally again. That is what lets a Collapse hold another Collapse — or hold
+ * content that is still streaming in — without either of them being clipped to
+ * a number that was true a frame ago.
+ *
+ * ```tsx
+ * <Collapse open={open}>
+ *   <Text>Anything, of any height.</Text>
+ * </Collapse>
+ * ```
+ *
+ * The alternative — unmounting the body and letting a layout transition on the
+ * parent carry the change — is what `Accordion` does, and it is right when the
+ * closed state should cost nothing. This is for a body that opens and closes
+ * repeatedly and often while its content is still arriving, where remounting
+ * would throw away scroll position and restart every animation inside it.
+ */
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { View, type LayoutChangeEvent, type ViewProps } from 'react-native';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { cn } from '../utils/cn';
+
+/** Long enough to read as the panel opening, short enough not to be waited on. */
+export const COLLAPSE_DURATION = 200;
+
+export interface CollapseProps extends Omit<ViewProps, 'children'> {
+  open: boolean;
+  /** Classes on the measured content, not on the clipping frame. */
+  className?: string;
+  duration?: number;
+  children?: ReactNode;
+}
+
+export function Collapse({
+  open,
+  className,
+  duration = COLLAPSE_DURATION,
+  children,
+  ...props
+}: CollapseProps) {
+  const reducedMotion = useReducedMotion();
+  const [height, setHeight] = useState(0);
+  const [animating, setAnimating] = useState(false);
+  const progress = useSharedValue(open ? 1 : 0);
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    // The first pass is not a transition — a body that starts open should be
+    // open, not play its own entrance at nobody.
+    if (!mounted.current) {
+      mounted.current = true;
+      progress.value = open ? 1 : 0;
+      return;
+    }
+    if (reducedMotion) {
+      progress.value = open ? 1 : 0;
+      setAnimating(false);
+      return;
+    }
+    setAnimating(true);
+    progress.value = withTiming(open ? 1 : 0, { duration }, (finished) => {
+      if (finished) runOnJS(setAnimating)(false);
+    });
+  }, [open, reducedMotion, duration, progress]);
+
+  const style = useAnimatedStyle(() => ({
+    height: progress.value * height,
+    opacity: progress.value,
+  }));
+
+  // Re-measured rather than measured once: a body whose content is still
+  // streaming in grows, and a height captured on the first frame would crop it.
+  const onLayout = (event: LayoutChangeEvent) => {
+    const next = event.nativeEvent.layout.height;
+    setHeight((current) => (Math.abs(current - next) < 1 ? current : next));
+  };
+
+  /*
+   * Once it has finished opening, the measured height and the absolute
+   * positioning are both dropped and the content lays out normally.
+   *
+   * They are only needed *while* the height is being animated to a number, and
+   * keeping them costs real bugs: a Collapse whose content is itself a Collapse
+   * measures a child that has not settled yet, and settles on that wrong
+   * number, so the inner body ends up clipped to nothing. Content that is still
+   * streaming in has the same problem against itself. In natural flow both are
+   * simply laid out, and the measurement carries on in the background against
+   * the next time it closes.
+   */
+  const natural = open && !animating;
+
+  return (
+    <Animated.View
+      style={natural ? undefined : style}
+      className={natural ? undefined : 'overflow-hidden'}
+    >
+      {/*
+        The same two elements in both modes, so switching between them is a
+        style change rather than a remount — a remount would throw away the
+        state of everything inside.
+      */}
+      <View
+        onLayout={onLayout}
+        style={natural ? undefined : { position: 'absolute', left: 0, right: 0, top: 0 }}
+        className={cn(className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </Animated.View>
+  );
+}
+Collapse.displayName = 'Collapse';