@oxy.so/bloom 2.12.2 → 2.12.3

package/lib/typescript/module/social-button/use-svg-id.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A DOM-safe id prefix, per component instance. Two marks of one brand on a
+ * page must not resolve each other's `url(#…)`, and React's `useId` carries
+ * characters an SVG id cannot.
+ */
+export declare function useSvgIdPrefix(prefix: string): string;
+//# sourceMappingURL=use-svg-id.d.ts.map

package/lib/typescript/module/social-button/use-svg-id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-svg-id.d.ts","sourceRoot":"","sources":["../../../../src/social-button/use-svg-id.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAErD"}

package/lib/typescript/module/theme-toggle/ThemeToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../../../src/theme-toggle/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAgC7E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAqCvE,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACjE,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAOD,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,KAAK,GAAG,aAAa,CAuCrE;AAkcD,eAAO,MAAM,WAAW,8CAA6B,CAAC"}
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../../../src/theme-toggle/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwD,MAAM,OAAO,CAAC;AA0B7E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAqCvE,UAAU,aAAa;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACjE,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAOD,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,KAAK,GAAG,aAAa,CAuCrE;AAkcD,eAAO,MAAM,WAAW,8CAA6B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "2.12.2",
+  "version": "2.12.3",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",

package/src/button/shared.ts

@@ -178,6 +178,15 @@ export const BUTTON_SIZE_ALIAS: Record<ButtonSize, ButtonResolvedSize> = {
 /** The button's transition duration. */
 export const BUTTON_TRANSITION_MS = 150;
 
+/**
+ * The sliding thumb of a segmented control — the sidebar theme toggle and the
+ * sidebar's mode switcher — so the two move at one speed on one curve.
+ */
+export const SEGMENTED_THUMB_MS = 200;
+/** Control points for `Easing.bezier(...)` — the constant itself stays out of
+ * this module, which every family imports and which must not pull Reanimated in. */
+export const SEGMENTED_THUMB_EASE_BEZIER = [0.25, 0.1, 0.25, 1] as const;
+
 /** Tailwind v4 `shadow-xs`, and its dark-mode override. */
 export const BUTTON_SHADOW = {
   light: '0 1px 2px 0 rgb(0 0 0 / 0.05)',

package/src/sidebar/Sidebar.tsx

@@ -480,12 +480,16 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     shownItems.length === 0 && shownSecondary.length === 0 && shownFolders.length === 0 && !collapsed;
   const hasTree = !!tree;
 
+  // A fresh closure here would re-render the memoised switcher on every
+  // keystroke in the quick-search field.
+  const handleModeChange = useCallback((key: string) => onModeChange?.(key), [onModeChange]);
+
   const modeSwitcher =
     modes && modes.length > 0 ? (
       <SidebarModeSwitcher
         modes={modes}
         value={mode ?? modes[0]!.key}
-        onValueChange={(key) => onModeChange?.(key)}
+        onValueChange={handleModeChange}
         collapsed={collapsed}
         accessibilityLabel={modesLabel}
         testID={testID ? `${testID}-modes` : 'sidebar-modes'}

package/src/sidebar/SidebarModeSwitcher.tsx

@@ -8,14 +8,13 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { BUTTON_SHADOW, resolveButtonRamps } from '../button/shared';
+import { SEGMENTED_THUMB_EASE_BEZIER, SEGMENTED_THUMB_MS } from '../button/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
-import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { useSidebarPalette } from './palette';
-import { Collapsible, IS_WEB, useSidebarWebCss } from './parts';
+import { Collapsible, IS_WEB, useSidebarWebCss, webHook } from './parts';
 import type { SidebarMode, SidebarModeSwitcherProps } from './types';
 
 /**
@@ -37,8 +36,7 @@ import type { SidebarMode, SidebarModeSwitcherProps } from './types';
 const ROW_HEIGHT = 32;
 const ROW_GAP = 4;
 const PADDING = 4;
-const THUMB_MS = 200;
-const EASE = Easing.bezier(0.25, 0.1, 0.25, 1);
+const EASE = Easing.bezier(...SEGMENTED_THUMB_EASE_BEZIER);
 
 function ModeRow({
   mode,
@@ -69,7 +67,8 @@ function ModeRow({
 
   return (
     <Pressable
-      {...(IS_WEB ? { dataSet: { bloomSidebar: 'ring' }, ...(collapsed ? { title: mode.label } : null) } : {})}
+      {...webHook('ring')}
+      {...(IS_WEB && collapsed ? { title: mode.label } : null)}
       role="radio"
       aria-checked={selected}
       accessibilityState={{ checked: selected }}
@@ -112,22 +111,22 @@ const SidebarModeSwitcherComponent: React.FC<SidebarModeSwitcherProps> = ({
   style,
   testID,
 }) => {
-  const theme = useTheme();
   const palette = useSidebarPalette();
   useSidebarWebCss();
   const reducedMotion = useReducedMotion();
-  const { neutral: n } = resolveButtonRamps(theme);
 
-  const index = Math.max(0, modes.findIndex((mode) => mode.key === value));
+  // One scan answers both questions: which row the thumb sits on, and whether
+  // there is a selected row at all.
+  const selectedIndex = modes.findIndex((mode) => mode.key === value);
+  const selectedKnown = selectedIndex !== -1;
+  const index = Math.max(0, selectedIndex);
   const offset = useSharedValue(index * (ROW_HEIGHT + ROW_GAP));
   useEffect(() => {
     const target = index * (ROW_HEIGHT + ROW_GAP);
-    offset.value = reducedMotion ? target : withTiming(target, { duration: THUMB_MS, easing: EASE });
+    offset.value = reducedMotion ? target : withTiming(target, { duration: SEGMENTED_THUMB_MS, easing: EASE });
   }, [index, reducedMotion, offset]);
   const thumbStyle = useAnimatedStyle(() => ({ transform: [{ translateY: offset.value }] }), [offset]);
 
-  const selectedKnown = modes.some((mode) => mode.key === value);
-
   return (
     <View
       role="radiogroup"
@@ -158,8 +157,8 @@ const SidebarModeSwitcherComponent: React.FC<SidebarModeSwitcherProps> = ({
               right: PADDING,
               height: ROW_HEIGHT,
               borderRadius: borderRadius.full,
-              backgroundColor: theme.isDark ? n[700] : theme.colors.card,
-              boxShadow: theme.isDark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
+              backgroundColor: palette.segmentedThumb,
+              boxShadow: palette.segmentedThumbShadow,
             },
             thumbStyle,
           ]}

package/src/sidebar/palette.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { ACCENT_TABLE, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
+import { ACCENT_TABLE, BUTTON_SHADOW, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
 import { MENU_SHADOW } from '../floating/menu-palette';
 import { PANEL_SHADOW, resolvePanelChrome } from '../styles/panel-chrome';
 import { hairlineOn } from '../styles/surface-levels';
@@ -49,6 +49,9 @@ export interface SidebarPalette {
   flat: string;
   rowHover: string;
   tertiary: string;
+  /** Fill and shadow of a segmented control's sliding thumb (the mode switcher). */
+  segmentedThumb: string;
+  segmentedThumbShadow: string;
   tertiaryHover: string;
   searchHover: string;
   searchRing: string;
@@ -113,6 +116,8 @@ export function resolveSidebarPalette(theme: Theme): SidebarPalette {
     flat: dark ? mixColor(n[900], n[950], 0.4) : card,
     rowHover: dark ? n[800] : n[200],
     tertiary: dark ? n[800] : n[200],
+    segmentedThumb: dark ? n[700] : card,
+    segmentedThumbShadow: dark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
     tertiaryHover: dark ? n[700] : n[300],
     // `hover:bg-background-tertiary-hover/55` over the panel.
     searchHover: mixColor(panel, dark ? n[700] : n[300], 0.55),

package/src/social-button/OxyMark.tsx

@@ -1,6 +1,8 @@
-import React, { useId } from 'react';
+import React from 'react';
 import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg';
 
+import { useSvgIdPrefix } from './use-svg-id';
+
 /**
  * The Oxy mark for `SocialButton` — the same drawing the Oxy SDK ships.
  *
@@ -29,7 +31,7 @@ export interface OxyMarkProps {
 
 export function OxyMark({ size, color, letterColor }: OxyMarkProps) {
   // Two marks on one page must not resolve each other's clip path.
-  const clipId = `bloom-oxy-mark-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+  const clipId = useSvgIdPrefix('bloom-oxy-mark');
   return (
     <Svg width={size} height={size} viewBox={OXY_MARK_VIEW_BOX} aria-hidden>
       <Defs>

package/src/social-button/SocialButton.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useId, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { Linking, Platform, View, type TextStyle, type ViewStyle } from 'react-native';
 import Svg, { Circle, Defs, LinearGradient, Path, Stop } from 'react-native-svg';
 
@@ -20,6 +20,7 @@ import { StyledPressable } from '../styles/styled-primitives';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { SOCIAL_COLOR_LOGOS } from './color-logos';
 import { OxyMark } from './OxyMark';
+import { useSvgIdPrefix } from './use-svg-id';
 import { SOCIAL_PROVIDERS, type SocialColorLogo, type SocialProvider } from './providers';
 import type {
   SocialBrand,
@@ -343,7 +344,7 @@ function ColorLogo({
 }) {
   // Gradient ids are per logo upstream; two buttons of one brand on a page must
   // not resolve each other's `url(#…)`, so every id is prefixed per instance.
-  const prefix = `bloom-social-${useId().replace(/[^a-zA-Z0-9]/g, '')}-`;
+  const prefix = useSvgIdPrefix('bloom-social');
   const resolveFill = (fill: string) =>
     fill.startsWith('url(#') ? `url(#${prefix}${fill.slice(5)}` : fill;
 

package/src/social-button/use-svg-id.ts

@@ -0,0 +1,10 @@
+import { useId } from 'react';
+
+/**
+ * A DOM-safe id prefix, per component instance. Two marks of one brand on a
+ * page must not resolve each other's `url(#…)`, and React's `useId` carries
+ * characters an SVG id cannot.
+ */
+export function useSvgIdPrefix(prefix: string): string {
+  return `${prefix}-${useId().replace(/[^a-zA-Z0-9]/g, '')}-`;
+}

package/src/theme-toggle/ThemeToggle.tsx

@@ -17,13 +17,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
-import {
-  ACCENT_TABLE,
-  BUTTON_SHADOW,
-  colorRamp,
-  mixColor,
-  resolveButtonRamps,
-} from '../button/shared';
+import { ACCENT_TABLE, BUTTON_SHADOW, SEGMENTED_THUMB_EASE_BEZIER, SEGMENTED_THUMB_MS, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiMoonLine, RiSunLine } from '../icons/remix';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
@@ -66,8 +60,8 @@ import { revealTheme, THEME_TRANSITION_DURATION, type RevealOrigin } from './vie
  */
 
 const IS_WEB = Platform.OS === 'web';
-const EASE = Easing.bezier(0.25, 0.1, 0.25, 1);
-const THUMB_MS = 200;
+const EASE = Easing.bezier(...SEGMENTED_THUMB_EASE_BEZIER);
+const THUMB_MS = SEGMENTED_THUMB_MS;
 const HOVER_MS = 150;
 
 interface TogglePalette {