@oxy.so/bloom 6.3.0 → 7.0.0

package/src/segmented-control/SegmentedControl.tsx

@@ -31,6 +31,7 @@ import { NOT_DISABLED, interactiveWebCss, useInteractiveWebCss } from '../styles
 import type { WebCssStyle } from '../styles/web-view-style';
 
 import { useFieldMembership } from '../field/membership';
+import { StyledView, StyledPressable } from '../styles/styled-primitives';
 import { handleRovingKeyDown, useRovingTabIndex } from '../hooks/roving-focus';
 import { webDataSet } from '../styles/web-data';
 
@@ -182,6 +183,7 @@ export function SegmentedControl<T extends string>({
   onChange,
   children,
   style,
+  className,
   disabled = false,
   accessibilityHint,
   nativeID,
@@ -202,6 +204,7 @@ export function SegmentedControl<T extends string>({
   onValueChange?: (value: T) => void;
   onChange?: (value: T) => void;
   children: React.ReactNode;
+  className?: string;
   style?: StyleProp<ViewStyle>;
   /**
    * Disables every segment.
@@ -354,7 +357,8 @@ export function SegmentedControl<T extends string>({
 
   return (
     <GestureDetector gesture={gesture} touchAction="pan-y">
-    <View
+    <StyledView
+      className={className}
       ref={groupRef}
       {...webDataSet({ bloomSegmentedGroup: '' })}
       testID={testID}
@@ -391,7 +395,7 @@ export function SegmentedControl<T extends string>({
       <InternalContext.Provider value={contextValue}>
         {children}
       </InternalContext.Provider>
-    </View>
+    </StyledView>
     </GestureDetector>
   );
 }
@@ -404,6 +408,7 @@ const InternalItemContext = createContext<{
 export function SegmentedControlItem({
   value,
   style,
+  className,
   children,
   onPress: onPressProp,
   accessibilityLabel,
@@ -413,6 +418,7 @@ export function SegmentedControlItem({
 }: {
   value: string;
   children: React.ReactNode;
+  className?: string;
   style?: StyleProp<ViewStyle>;
   onPress?: () => void;
   accessibilityLabel?: string;
@@ -518,8 +524,8 @@ export function SegmentedControlItem({
   );
 
   return (
-    <View
-      style={{ flexGrow: 1, flexDirection: 'row', alignItems: 'stretch' }}
+    <StyledPressable
+      className={className}
       onLayout={evt => {
         const measuredPosition = {
           x: evt.nativeEvent.layout.x,
@@ -529,8 +535,7 @@ export function SegmentedControlItem({
           ctx.updatePosition(measuredPosition);
         }
         setPosition(measuredPosition);
-      }}>
-      <Pressable
+      }}
         {...(IS_WEB ? ({ dataSet: { bloomSegmentedItem: '' }, onKeyDown } as Record<string, unknown>) : {})}
         onPress={onPress}
         onHoverIn={onHoverIn}
@@ -552,8 +557,7 @@ export function SegmentedControlItem({
         <InternalItemContext.Provider value={itemContext}>
           {children}
         </InternalItemContext.Provider>
-      </Pressable>
-    </View>
+    </StyledPressable>
   );
 }
 

package/src/settings-modal/SettingsModal.tsx

@@ -350,6 +350,9 @@ export function SettingsModal({
 
   const pageConfig = currentPage ? pages[currentPage] : undefined;
   const closeLabel = labels?.close ?? messages.close;
+  const pageContent = typeof pageConfig?.content === 'function'
+    ? pageConfig.content({ onBack: isCompact ? requestNavigation : undefined, backLabel: labels?.back ?? common.back, onClose: requestClose, closeLabel })
+    : pageConfig?.content;
 
   return (
     <ModalPortal>
@@ -422,7 +425,7 @@ export function SettingsModal({
                   {layout === 'compact' ? (
                     compactPageOpen && pageConfig ? (
                       <View style={styles.content}>
-                        <PageScroller
+                        {pageConfig.fullBleed ? typeof pageConfig.content === 'function' ? pageContent : <><PageHeader title={pageConfig.title} onBack={requestNavigation} backLabel={labels?.back ?? common.back} safeArea={false} placement="inline" />{pageContent}</> : <PageScroller
                           header={{
                             title: pageConfig.title,
                             onBack: requestNavigation,
@@ -436,8 +439,8 @@ export function SettingsModal({
                           insetTop={CONTENT_INSET.compact}
                           testID={testID}
                         >
-                          {pageConfig.content}
-                        </PageScroller>
+                          {pageContent}
+                        </PageScroller>}
                       </View>
                     ) : (
                       <View style={styles.content}>
@@ -469,7 +472,7 @@ export function SettingsModal({
                         testID={testID}
                       />
                       <View style={styles.content}>
-                        <PageScroller
+                        {pageConfig?.fullBleed ? pageContent : <PageScroller
                           header={{
                             title: pageConfig?.title ?? '',
                             closeLabel,
@@ -481,8 +484,8 @@ export function SettingsModal({
                           insetTop={pageConfig?.compactTitle ? 6 : 12}
                           testID={testID}
                         >
-                          {pageConfig?.content}
-                        </PageScroller>
+                          {pageContent}
+                        </PageScroller>}
                       </View>
                     </>
                   )}

package/src/settings-modal/SettingsRows.tsx

@@ -1,6 +1,7 @@
 import React, { Children, Fragment, isValidElement, useContext, type ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { StyledView } from '../styles/styled-primitives';
 import { Text } from '../typography';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { SettingsRowPositionContext, useSettingsLayout, useSettingsPalette } from './context';
@@ -49,12 +50,12 @@ function flatChildren(children: ReactNode): ReactNode[] {
 }
 
 /** Grouped card. Its rows separate themselves; the last carries no hairline. */
-export function SettingsCard({ children, style, testID }: SettingsCardProps) {
+export function SettingsCard({ children, className, style, testID }: SettingsCardProps) {
   useSettingsWebCss();
   const palette = useSettingsPalette();
   const items = flatChildren(children);
   return (
-    <View
+    <StyledView className={className}
       testID={testID}
       style={[styles.card, { backgroundColor: palette.secondary }, settingsRingVars(palette), style]}
     >
@@ -67,7 +68,7 @@ export function SettingsCard({ children, style, testID }: SettingsCardProps) {
           {child}
         </SettingsRowPositionContext.Provider>
       ))}
-    </View>
+    </StyledView>
   );
 }
 

package/src/settings-modal/index.ts

@@ -23,6 +23,7 @@ export type {
   SettingsMenuAction,
   SettingsModalLabels,
   SettingsModalPage,
+  SettingsModalPageNavigation,
   SettingsModalProps,
   SettingsNavGroup,
   SettingsNavItem,

package/src/settings-modal/types.ts

@@ -31,11 +31,22 @@ export interface SettingsNavGroup {
   items: SettingsNavItem[];
 }
 
+/** Navigation supplied to a page that renders its own header. */
+export interface SettingsModalPageNavigation {
+  /** Returns to the section list on compact screens; absent when the rail is visible. */
+  onBack?: () => void;
+  backLabel: string;
+  onClose: () => void;
+  closeLabel: string;
+}
+
 /** One page of the content pane. */
 export interface SettingsModalPage {
+  /** Page owns its header and scrolling (for a searchable catalog, for example). */
+  fullBleed?: boolean;
   /** Heading of the shared PageHeader. */
   title: string;
-  content: ReactNode;
+  content: ReactNode | ((navigation: SettingsModalPageNavigation) => ReactNode);
   /**
    * Used on the Storage page: a 6px gap below PageHeader instead of 12px, because the page
    * already carries 10px of headroom for the dropzone's progress badge.
@@ -87,6 +98,7 @@ export interface SettingsModalProps {
 // ---------------------------------------------------------------------------
 
 export interface SettingsCardProps {
+  className?: string;
   children?: ReactNode;
   style?: StyleProp<ViewStyle>;
   testID?: string;

package/src/sidebar/Sidebar.tsx

@@ -32,6 +32,7 @@ import { RiSearchLine } from '../icons/remix/RiSearchLine';
 import { RiSideBarFill } from '../icons/remix/RiSideBarFill';
 import { Kbd } from '../kbd';
 import { borderRadius } from '../styles/tokens';
+import { StyledView } from '../styles/styled-primitives';
 import { Z_INDEX } from '../styles/z-index';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { ThemeToggle } from '../theme-toggle';
@@ -83,6 +84,7 @@ import { SIDEBAR_MESSAGES } from './messages';
  */
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const AnimatedStyledView = Animated.createAnimatedComponent(StyledView);
 
 const EASE_IN_OUT = Easing.bezier(0.4, 0, 0.2, 1);
 
@@ -152,6 +154,9 @@ function SearchField({
 }
 
 const SidebarPanel: React.FC<SidebarProps> = ({
+  className,
+  header,
+  contentPadding,
   items = [],
   primaryAction,
   contentAlignment = 'start',
@@ -272,7 +277,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     },
     [fluid, collapsed, expandedWidth, progress],
   );
-  const expandedPadding = metrics.padding;
+  const expandedPadding = contentPadding ?? metrics.padding;
   const collapsedPadding = metrics.collapsedPaddingX;
   const panelStyle = useAnimatedStyle(() => {
     const p = progress.value;
@@ -287,12 +292,14 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   // app's rows, elements and data — a `Date` among them crashes native on the
   // copy. The mapper reads only whether there is one (`worklet-captures.test.ts`).
   const treeShown = Boolean(tree);
+  const hasHeader = header != null;
   const contentMorph = useAnimatedStyle(() => ({
     height: contentHeight > 0 ? contentHeight * (1 - progress.value) : collapsed ? 0 : undefined,
     opacity: 1 - progress.value,
-    marginTop: treeShown ? 0 : 24 * (1 - progress.value),
-  }), [contentHeight, collapsed, progress, treeShown]);
-  const contentWidth = useAnimatedStyle(() => ({ width: expandedWidth.value - expandedPadding * 2 }), [expandedWidth, expandedPadding]);
+    marginTop: treeShown || hasHeader ? 0 : 24 * (1 - progress.value),
+  }), [contentHeight, collapsed, progress, treeShown, hasHeader]);
+  const contentBorder = contentPadding == null ? 0 : surface === 'card' ? 2 : surface === 'docked' ? 1 : 0;
+  const contentWidth = useAnimatedStyle(() => ({ width: expandedWidth.value - expandedPadding * 2 - contentBorder }), [expandedWidth, expandedPadding, contentBorder]);
   const navInset = useAnimatedStyle(() => {
     const inset = expandedInset * (1 - progress.value);
     return { paddingLeft: inset, paddingRight: inset };
@@ -398,6 +405,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         key={item.key}
         icon={item.icon}
         label={item.label}
+        className={item.className}
+        style={collapsed ? undefined : item.style}
         href={item.href}
         selected={isSelected}
         collapsed={collapsed}
@@ -676,8 +685,9 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     <SidebarSizeProvider value={size}>
     <SidebarGeometryProvider value={geometry}>
     <CollapseProvider value={progress}>
-      <Animated.View
+      <AnimatedStyledView
         {...dirProps}
+        className={className}
         role="complementary"
         accessibilityLabel={accessibilityLabel}
         onLayout={onPanelLayout}
@@ -689,8 +699,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             flexDirection: 'column',
             justifyContent: 'space-between',
             overflow: surface === 'plain' ? 'hidden' : 'visible',
-            paddingTop: metrics.padding,
-            paddingBottom: metrics.padding,
+            paddingTop: expandedPadding,
+            paddingBottom: expandedPadding,
           },
           chrome,
           panelStyle,
@@ -711,7 +721,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             onLayout={(event) => setHeaderOverlap(Math.min(20, event.nativeEvent.layout.height / 2))}
             style={{ width: '100%', flexShrink: 0, gap: 12, zIndex: Z_INDEX.floating }}
           >
-            {headerRow}
+            {header != null ? typeof header === 'function' ? header({ collapsed }) : header : headerRow}
             {modeSwitcher}
             {showSearch && !flatMobile ? searchButton : null}
           </View>
@@ -805,7 +815,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             {typeof footer === 'function' ? footer({ collapsed }) : footer}
           </View> : null}
         </View>
-      </Animated.View>
+      </AnimatedStyledView>
     </CollapseProvider>
     </SidebarGeometryProvider>
     </SidebarSizeProvider>

package/src/sidebar/SidebarItem.tsx

@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
-import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import { View, type GestureResponderEvent } from 'react-native';
+import { StyledPressable } from '../styles/styled-primitives';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { useInteractionState } from '../hooks/use-interaction-state';
@@ -28,11 +29,24 @@ import type { SidebarItemProps } from './types';
  * square's top-end corner instead, so the count survives the collapse. With
  * `href` the row is a link (a real anchor on web).
  */
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const AnimatedPressable = Animated.createAnimatedComponent(StyledPressable);
 
 const SidebarItemComponent: React.FC<SidebarItemProps> = ({
   icon: Icon,
+  leading,
   label,
+  description,
+  selectedAppearance = 'accent',
+  className,
+  labelClassName,
+  descriptionClassName,
+  ref,
+  disabled,
+  nativeID,
+  accessibilityLabel,
+  'aria-expanded': ariaExpanded,
+  'aria-haspopup': ariaHaspopup,
+  'aria-describedby': ariaDescribedby,
   size,
   href,
   badge,
@@ -55,10 +69,11 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
     const margin = (lane - metrics.row.square) / 2 * progress.value;
     return { marginLeft: margin, marginRight: margin };
   }, [progress, lane, metrics.row.square]);
-  const itemGap = metrics.row.gap;
+  const itemGap = description != null ? 10 : metrics.row.gap;
   const contentStyle = useAnimatedStyle(() => ({ gap: itemGap * (1 - progress.value) }), [progress, itemGap]);
   const collapsedBadgeStyle = useAnimatedStyle(() => ({ opacity: progress.value }), [progress]);
-  const foreground = selected ? palette.selectedForeground : palette.textSecondary;
+  const neutral = selectedAppearance === 'neutral';
+  const foreground = selected ? neutral ? palette.text : palette.selectedForeground : palette.textSecondary;
 
   const rowStyle: WebCssStyle = {
     flexDirection: 'row',
@@ -82,7 +97,7 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
     // collapsed is the size's own square.
     alignSelf: collapsed && !inSidebar ? 'flex-start' : 'stretch',
     width: collapsed && !inSidebar ? metrics.row.square : undefined,
-    backgroundColor: selected ? palette.selected : hovered ? palette.rowHover : 'transparent',
+    backgroundColor: selected ? neutral ? palette.tertiary : palette.selected : hovered ? palette.rowHover : 'transparent',
     '--bloom-sidebar-ring': palette.ring,
   };
 
@@ -98,8 +113,15 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
   return (
     <AnimatedPressable
       {...webProps}
+      ref={ref}
+      className={className}
+      disabled={disabled}
+      nativeID={nativeID}
+      aria-expanded={ariaExpanded}
+      aria-haspopup={ariaHaspopup}
+      aria-describedby={ariaDescribedby}
       role={href ? 'link' : 'button'}
-      accessibilityLabel={label}
+      accessibilityLabel={accessibilityLabel ?? label}
       accessibilityState={{ selected }}
       onHoverIn={onIn}
       onHoverOut={onOut}
@@ -108,19 +130,22 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
         if (!onPress) return;
         // The host navigates (a router, or an action like opening Settings).
         if (IS_WEB && href) event.preventDefault();
-        onPress();
+        onPress(event);
       }}
       style={[rowStyle, horizontalInset, style]}
       testID={testID}
     >
-      <Animated.View style={[{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flexShrink: 1, overflow: 'hidden' }, contentStyle]}>
+      <Animated.View style={[{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flexShrink: 1, overflow: 'hidden', ...(description != null ? { flex: 1 } : {}) }, contentStyle]}>
         <View style={{ flexShrink: 0 }}>
-          <Icon width={metrics.row.icon} height={metrics.row.icon} fill={foreground} />
+          {leading ?? (Icon ? <Icon width={metrics.row.icon} height={metrics.row.icon} fill={foreground} /> : null)}
         </View>
-        <Collapsible collapsed={collapsed}>
-          <Text variant={metrics.row.label} numberOfLines={1} style={{ color: foreground }}>
+        <Collapsible collapsed={collapsed} stretch={description != null}>
+          <View style={{ minWidth: 0, ...(description != null ? { flex: 1 } : {}), gap: description != null ? 2 : 0 }}>
+          <Text variant={metrics.row.label} className={labelClassName} numberOfLines={1} style={labelClassName ? undefined : { color: foreground }}>
             {label}
           </Text>
+          {description != null ? <Text variant="body-regular" className={descriptionClassName} numberOfLines={1} style={descriptionClassName ? undefined : { color: palette.textTertiary }}>{description}</Text> : null}
+          </View>
         </Collapsible>
       </Animated.View>
       {badge != null ? <Collapsible collapsed={collapsed}>{badge}</Collapsible> : null}

package/src/sidebar/SidebarScrollArea.tsx

@@ -48,7 +48,7 @@ export const SidebarScrollArea = forwardRef<ScrollView, SidebarScrollAreaProps>(
       {children}
     </ScrollView>
     {edges.top && <Animated.View testID={`${prefix}-fade-top`} pointerEvents="none" aria-hidden accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={[{ position: 'absolute', left: 0, right: 0, top: 0, height: fadeHeight }, topStyle]}><EdgeScrim color={color} /></Animated.View>}
-    {edges.bottom && <Animated.View testID={`${prefix}-fade-bottom`} pointerEvents="none" aria-hidden accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={[{ position: 'absolute', left: 0, right: 0, bottom: 0, height: fadeHeight, transform: [{ rotate: '180deg' }] }, bottomStyle]}><EdgeScrim color={color} /></Animated.View>}
+    {edges.bottom && <Animated.View testID={`${prefix}-fade-bottom`} pointerEvents="none" aria-hidden accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={[{ position: 'absolute', left: 0, right: 0, bottom: 0, height: fadeHeight }, bottomStyle]}><EdgeScrim color={color} edge="bottom" /></Animated.View>}
   </View>;
 });
 SidebarScrollArea.displayName = 'SidebarScrollArea';

package/src/sidebar/SidebarTeamMenu.tsx

@@ -138,6 +138,7 @@ function Group({
           {group.items.map((item) => (
             <TeamMenuRow key={item.key} item={item} palette={palette} onSelect={onSelect} />
           ))}
+          {group.content}
         </View>
       </View>
     </>

package/src/sidebar/SidebarToolbar.tsx

@@ -0,0 +1,176 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type { TextInput } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { Button, CloseButton } from '../button';
+import { RiSearchLine } from '../icons/remix/RiSearchLine';
+import { useCommonMessages } from '../locale/common-messages';
+import { StyledView } from '../styles/styled-primitives';
+import { TextField, TextFieldInput } from '../text-field';
+import { useSidebarPalette } from './palette';
+import { IS_WEB } from './parts';
+import type { SidebarToolbarProps } from './types';
+
+const AnimatedView = Animated.createAnimatedComponent(StyledView);
+
+/** Search and fixed action slots share one row; the sidebar owns its viewport. */
+export function SidebarToolbar({
+  actions = [],
+  search,
+  style,
+  testID,
+}: SidebarToolbarProps) {
+  const common = useCommonMessages();
+  const palette = useSidebarPalette();
+  const input = useRef<TextInput>(null);
+  const trigger = useRef<React.ComponentRef<typeof Button>>(null);
+  const [width, setWidth] = useState(0);
+  const reduced = useReducedMotion();
+  const progress = useSharedValue(Number(search.open));
+  useEffect(() => {
+    progress.value = reduced
+      ? Number(search.open)
+      : withTiming(Number(search.open), {
+          duration: 300,
+          easing: Easing.bezier(0.42, 0, 0.58, 1),
+        });
+    if (search.open) {
+      const frame = requestAnimationFrame(() => input.current?.focus());
+      return () => cancelAnimationFrame(frame);
+    }
+    return undefined;
+  }, [search.open, reduced, progress]);
+  const slots = actions.length + 1;
+  const collapsedWidth = width > 0 ? (width - 8 * (slots - 1)) / slots : 76;
+  const searchWidth = useAnimatedStyle(
+    () => ({
+      width:
+        width > 0
+          ? collapsedWidth + (width - collapsedWidth) * progress.value
+          : progress.value > 0
+            ? '100%'
+            : collapsedWidth,
+    }),
+    [width, collapsedWidth, progress],
+  );
+  const actionsStyle = useAnimatedStyle(() => {
+    const hidden = Math.min(1, progress.value * 1.5);
+    return {
+      opacity: 1 - hidden,
+      transform: [{ translateX: 8 * hidden }, { scale: 1 - 0.05 * hidden }],
+    };
+  }, [progress]);
+  const close = () => {
+    search.onValueChange('');
+    search.onOpenChange(false);
+    requestAnimationFrame(() => trigger.current?.focus?.());
+  };
+  const label = search.accessibilityLabel ?? common.search;
+  return (
+    <StyledView
+      testID={testID}
+      className="relative h-9 shrink-0"
+      style={[{ height: 36 }, style]}
+      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
+    >
+      <StyledView
+        className="grid h-full grid-cols-3 gap-2"
+        style={{ flexDirection: 'row', gap: 8 }}
+      >
+        <StyledView aria-hidden style={{ flex: 1 }} />
+        {actions.map((action, index) => (
+          <AnimatedView
+            key={index}
+            className={`flex transition-[opacity,transform] duration-200 motion-reduce:transition-none ${search.open ? 'pointer-events-none translate-x-2 scale-95 opacity-0' : 'translate-x-0 scale-100 opacity-100'}`}
+            style={[{ flex: 1 }, actionsStyle]}
+            pointerEvents={search.open ? 'none' : 'auto'}
+            aria-hidden={search.open}
+            accessibilityElementsHidden={search.open}
+            importantForAccessibility={
+              search.open ? 'no-hide-descendants' : 'auto'
+            }
+            {...(IS_WEB && search.open ? { inert: true } : {})}
+          >
+            {action}
+          </AnimatedView>
+        ))}
+      </StyledView>
+      <AnimatedView
+        className="absolute inset-y-0 start-0 z-10 overflow-hidden rounded-full bg-background-tertiary-default transition-[width] duration-300 ease-in-out motion-reduce:transition-none"
+        style={[
+          {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            insetInlineStart: 0,
+            borderRadius: 999,
+            backgroundColor: palette.tertiary,
+          },
+          searchWidth,
+        ]}
+      >
+        {!search.open ? (
+          <Button
+            ref={trigger}
+            appearance="subtle"
+            tone="neutral"
+            iconOnly
+            leadingIcon={RiSearchLine}
+            accessibilityLabel={label}
+            aria-expanded={false}
+            className="absolute inset-0 w-full min-w-0 rounded-full border-0 bg-background-tertiary-default text-foreground-icon-secondary shadow-none transition-opacity duration-150 hover:bg-background-tertiary-hover active:bg-background-tertiary-hover motion-reduce:transition-none"
+            style={{
+              borderWidth: 0,
+              borderRadius: 999,
+              width: '100%',
+              height: 36,
+            }}
+            onPress={() => search.onOpenChange(true)}
+          />
+        ) : (
+          <StyledView
+            className="relative transition-opacity duration-150 motion-reduce:transition-none"
+            style={{ flex: 1 }}
+          >
+            <TextField
+              radius={999}
+              style={{
+                height: 36,
+                borderWidth: 0,
+                backgroundColor: palette.tertiary,
+                paddingLeft: 12,
+                paddingRight: 36,
+              }}
+            >
+              <TextFieldInput
+                inputRef={input}
+                label={label}
+                placeholder={search.placeholder ?? label}
+                value={search.value}
+                onChangeText={search.onValueChange}
+                onKeyPress={(event) => {
+                  if (event.nativeEvent.key === 'Escape') close();
+                }}
+              />
+            </TextField>
+            <StyledView
+              className="absolute end-2 top-2"
+              style={{ position: 'absolute', insetInlineEnd: 8, top: 8 }}
+            >
+              <CloseButton
+                accessibilityLabel={search.closeLabel ?? common.close}
+                size="xs"
+                onPress={close}
+              />
+            </StyledView>
+          </StyledView>
+        )}
+      </AnimatedView>
+    </StyledView>
+  );
+}

package/src/sidebar/index.ts

@@ -1,6 +1,7 @@
 export { Sidebar } from './Sidebar';
 export { SidebarFolder } from './SidebarFolder';
 export { SidebarItem } from './SidebarItem';
+export { SidebarToolbar } from './SidebarToolbar';
 export { SIDEBAR_METRICS } from './metrics';
 export { SidebarModeSwitcher } from './SidebarModeSwitcher';
 export { SidebarPlanCard } from './SidebarPlanCard';
@@ -33,6 +34,7 @@ export type {
   SidebarSurface,
   SidebarTeam,
   SidebarTeamMenuProps,
+  SidebarToolbarProps,
   SidebarTree,
   SidebarTreeFolder,
   SidebarTreeItem,

package/src/sidebar/parts.tsx

@@ -53,10 +53,12 @@ export function Collapsible({
   collapsed,
   children,
   style,
+  stretch = false,
 }: {
   collapsed: boolean;
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  stretch?: boolean;
 }) {
   const progress = useSidebarCollapseProgress(collapsed);
   const natural = useSharedValue(0);
@@ -72,10 +74,10 @@ export function Collapsible({
 
   return (
     <Animated.View
-      style={[{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flexShrink: 1, overflow: 'hidden' }, style, animated]}
+      style={[{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flexShrink: 1, overflow: 'hidden', ...(stretch ? { flex: 1 } : {}) }, style, animated]}
     >
       <View
-        style={{ flexDirection: 'row', alignItems: 'center', flexShrink: 0 }}
+        style={{ flexDirection: 'row', alignItems: 'center', flexShrink: stretch ? 1 : 0, ...(stretch ? { flex: 1, minWidth: 0 } : {}) }}
         onLayout={(event: LayoutChangeEvent) => {
           natural.value = event.nativeEvent.layout.width;
         }}