@drakkar.software/octospaces-ui 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -0,0 +1,34 @@
+# Changelog — @drakkar.software/octospaces-ui
+
+## 0.4.2
+
+### `SpaceSwitcher` — `onTriggerPress` override
+
+Added an optional `onTriggerPress?: () => void` prop to `SpaceSwitcher`.
+
+When provided:
+- The trigger button's `onPress` calls `onTriggerPress` instead of opening the
+  built-in dropdown.
+- The chevron icon is hidden (the button no longer implies a picker).
+- The `renderContainer` callback is never invoked.
+
+Use this on surfaces where a dropdown is redundant (e.g. a desktop sidebar that
+already has a rail for space switching) and a single tap to navigate to the
+space-details page is the right UX.
+
+Fully backward-compatible — existing consumers that do not pass `onTriggerPress`
+retain identical behaviour.
+
+---
+
+## 0.4.1
+
+- `Lightbox` component added (headless fullscreen media viewer + zoom).
+
+## 0.4.0
+
+- `Sidebar`, `SidebarHeader`, `SidebarActionButton`, `SidebarItem` — shared
+  desktop sidebar panel shell and primitives.
+- `SpaceSwitcher` — headless space picker trigger with `renderContainer` delegation.
+- `sidebarPanel` added to `Palette` type (panel background distinct from rail
+  background `sidebar`).

package/dist/index.d.ts

@@ -645,6 +645,133 @@ interface SidebarItemProps {
 }
 declare function SidebarItem({ label, icon, active, badge, onPress, onLongPress, trailing, indent, }: SidebarItemProps): React.JSX.Element;
 
+/**
+ * Headless themed space-switcher component.
+ *
+ * Renders a trigger button (active-space avatar + name + chevron) that opens a
+ * dropdown listing all spaces with per-row selection, a "join or create" action,
+ * optional space settings, and an app-provided footer slot (account section, etc.).
+ *
+ * The popup container (Popover on desktop, Sheet on mobile) is fully delegated to
+ * the host via `renderContainer` so this package stays free of modal dependencies.
+ * Avatars and icons are delegated via render-props for the same reason.
+ *
+ * @example
+ * ```tsx
+ * // OctoVault — sidebar variant with Popover container
+ * <SpaceSwitcher
+ *   spaces={spaces}
+ *   activeId={activeId}
+ *   onSelect={switchSpace}
+ *   onAdd={() => router.push('/join')}
+ *   onSettings={() => router.push(`/space/${activeId}`)}
+ *   variant="sidebar"
+ *   renderTriggerAvatar={(space, size) => (
+ *     <Avatar label={space?.short ?? ''} image={space?.image} size={size} />
+ *   )}
+ *   renderSpaceAvatar={(space, size) => (
+ *     <Avatar label={space.short ?? ''} image={space.image} size={size} />
+ *   )}
+ *   renderIcon={(name, size, color) => <Icon name={SWITCHER_ICON[name]} size={size} color={color} />}
+ *   renderContainer={({ isOpen, onClose, anchorRef, children }) => (
+ *     <>
+ *       <Popover visible={isOpen} onClose={onClose} anchorRef={anchorRef} placement="bottom-start" width={240}>
+ *         {children}
+ *       </Popover>
+ *     </>
+ *   )}
+ *   footerSlot={<AccountSwitcher onRequestClose={...} onViewProfile={...} />}
+ * />
+ * ```
+ */
+
+/** Structural space item — no SDK dependency. */
+interface SwitcherSpace {
+    id: string;
+    name: string;
+    /** 2-letter monogram used as avatar fallback. */
+    short?: string;
+    /** Uploaded space image URI; absent → host renders monogram. */
+    image?: string;
+}
+/** Icon name union for the switcher's built-in glyphs. */
+type SwitcherIconName = 'chevron-down' | 'check' | 'plus' | 'gear';
+interface SpaceSwitcherProps {
+    spaces: SwitcherSpace[];
+    activeId?: string | null;
+    /** Called when the user taps a space row. */
+    onSelect: (id: string) => void;
+    /** "Join or create a space" action. Omit to hide the row. */
+    onAdd?: () => void;
+    /** Override the add-row label. @default "Join or create a space" */
+    addLabel?: string;
+    /**
+     * "Space settings" action. Only shown when both `onSettings` and `activeId`
+     * are provided. Omit to hide.
+     */
+    onSettings?: () => void;
+    /** Override the settings-row label. @default "Space settings" */
+    settingsLabel?: string;
+    /**
+     * Visual variant:
+     * - `'sidebar'` — compact left-aligned trigger for the desktop sidebar header.
+     * - `'appbar'` — centered trigger for a phone app-bar title area.
+     */
+    variant: 'sidebar' | 'appbar';
+    /**
+     * Wraps the dropdown content in the host app's container (Popover / Sheet).
+     * Called with `{ isOpen, onClose, anchorRef, children }` — must render
+     * children inside an appropriate modal surface.
+     */
+    renderContainer: (props: {
+        isOpen: boolean;
+        onClose: () => void;
+        anchorRef: React.RefObject<View>;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * Render the active-space avatar inside the trigger button.
+     * Receives the active `SwitcherSpace` (or `null` when none) and a pixel size.
+     * Omit to render nothing in the avatar slot.
+     */
+    renderTriggerAvatar?: (space: SwitcherSpace | null, size: number) => React.ReactNode;
+    /**
+     * Render a space row's leading avatar.
+     * Receives the `SwitcherSpace` and a pixel size.
+     * Omit to render nothing in the leading slot.
+     */
+    renderSpaceAvatar?: (space: SwitcherSpace, size: number) => React.ReactNode;
+    /**
+     * Render an icon glyph. Name is one of `'chevron-down' | 'check' | 'plus' | 'gear'`.
+     * Omit to hide chevron, check, and action icons (spaces remain selectable).
+     */
+    renderIcon?: (name: SwitcherIconName, size: number, color: string) => React.ReactNode;
+    /**
+     * Footer rendered below the space list + action rows — use for account-switcher
+     * sections (with separator if needed). Fully app-owned.
+     */
+    footerSlot?: React.ReactNode;
+    /**
+     * When provided, replaces the default "open dropdown" behaviour on trigger press.
+     * The chevron is also hidden. Use this to navigate directly to a space-details
+     * page instead of opening a picker — e.g. on desktop where a rail handles
+     * switching and a dropdown is redundant.
+     *
+     * @example
+     * ```tsx
+     * // Navigate to space details instead of opening the picker (desktop sidebar)
+     * <SpaceSwitcher
+     *   onTriggerPress={() => router.push(`/space/${activeId}`)}
+     *   // renderContainer still required but never called when onTriggerPress is set
+     *   renderContainer={() => null}
+     *   ...
+     * />
+     * ```
+     */
+    onTriggerPress?: () => void;
+}
+declare function SpaceSwitcher({ spaces, activeId, onSelect, onAdd, addLabel, onSettings, settingsLabel, variant, renderContainer, renderTriggerAvatar, renderSpaceAvatar, renderIcon, footerSlot, onTriggerPress, }: SpaceSwitcherProps): React.JSX.Element;
+
 /**
  * Full-screen scrim overlay that centers its content. Tapping the backdrop, the
  * close button, the Escape key (web) or the hardware back (Android) dismisses it.
@@ -700,4 +827,4 @@ interface LightboxProps {
  */
 declare function Lightbox({ visible, onClose, children, closeLabel, renderCloseButton, renderActions, }: LightboxProps): React.JSX.Element;
 
-export { type ColorScheme, type DiscoverEntry, DiscoverList, type DiscoverListProps, DiscoverRow, type DiscoverRowProps, DiscoverScreen, type DiscoverScreenProps, type Easing, type Fonts, type LabelTracking, type Layers, type Layout, Lightbox, type LightboxProps, type Motion, type MotionToken, OctoSpacesThemeProvider, type OctoSpacesThemeProviderProps, type Opacity, type Palette, type Radii, type RailIconName, type RailSpace, type ShadowToken, type Shadows, Sidebar, SidebarActionButton, type SidebarActionButtonProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SpacesRail, type SpacesRailProps, type Spacing, type Swatches, type Theme, type TypeScale, type Typography, avatarTint, filterDiscoverEntries, focusRingStyle, glowShadow, paperBorder, presenceColor, sortDiscoverEntries, statusColor, swatch, useOctoSpacesTheme, verificationColor };
+export { type ColorScheme, type DiscoverEntry, DiscoverList, type DiscoverListProps, DiscoverRow, type DiscoverRowProps, DiscoverScreen, type DiscoverScreenProps, type Easing, type Fonts, type LabelTracking, type Layers, type Layout, Lightbox, type LightboxProps, type Motion, type MotionToken, OctoSpacesThemeProvider, type OctoSpacesThemeProviderProps, type Opacity, type Palette, type Radii, type RailIconName, type RailSpace, type ShadowToken, type Shadows, Sidebar, SidebarActionButton, type SidebarActionButtonProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SpaceSwitcher, type SpaceSwitcherProps, SpacesRail, type SpacesRailProps, type Spacing, type Swatches, type SwitcherIconName, type SwitcherSpace, type Theme, type TypeScale, type Typography, avatarTint, filterDiscoverEntries, focusRingStyle, glowShadow, paperBorder, presenceColor, sortDiscoverEntries, statusColor, swatch, useOctoSpacesTheme, verificationColor };

package/dist/index.js

@@ -1049,9 +1049,313 @@ var styles2 = StyleSheet2.create({
   iconSlot: { width: 18, alignItems: "center", justifyContent: "center" }
 });
 
+// src/sidebar/SpaceSwitcher.tsx
+import React10, { useRef as useRef2, useState as useState5 } from "react";
+import { Pressable as RNPressable4, StyleSheet as StyleSheet3, Text as Text6, View as View8 } from "react-native";
+var Pressable6 = RNPressable4;
+function SpaceSwitcher({
+  spaces,
+  activeId,
+  onSelect,
+  onAdd,
+  addLabel = "Join or create a space",
+  onSettings,
+  settingsLabel = "Space settings",
+  variant,
+  renderContainer,
+  renderTriggerAvatar,
+  renderSpaceAvatar,
+  renderIcon,
+  footerSlot,
+  onTriggerPress
+}) {
+  const theme = useOctoSpacesTheme();
+  const { colors, type: typeScale, fonts, spacing: sp, radii } = theme;
+  const [open, setOpen] = useState5(false);
+  const [triggerHovered, setTriggerHovered] = useState5(false);
+  const anchorRef = useRef2(null);
+  const active = spaces.find((s) => s.id === activeId) ?? spaces[0] ?? null;
+  const close = () => setOpen(false);
+  const handleSelect = (id) => {
+    close();
+    onSelect(id);
+  };
+  const handleAdd = () => {
+    close();
+    onAdd?.();
+  };
+  const handleSettings = () => {
+    close();
+    onSettings?.();
+  };
+  const sp1 = sp["1"] ?? 4;
+  const sp2 = sp["2"] ?? 8;
+  const sp3 = sp["3"] ?? 12;
+  const sp4 = sp["4"] ?? 16;
+  const radMd = radii["md"] ?? 6;
+  const bodyFont = fonts["body"] ?? void 0;
+  const bodySize = typeScale["callout"]?.size ?? 13;
+  const bodyLine = typeScale["callout"]?.lineHeight ?? 18;
+  const labelSize = typeScale["caption"]?.size ?? 11;
+  const labelLine = typeScale["caption"]?.lineHeight ?? 16;
+  const triggerStyle = variant === "sidebar" ? {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: sp2,
+    paddingHorizontal: sp2,
+    paddingVertical: sp1 + 2,
+    borderRadius: radMd,
+    minWidth: 0,
+    backgroundColor: triggerHovered ? colors.primarySubtle ?? "rgba(0,0,0,0.05)" : "transparent"
+  } : {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: sp2,
+    paddingHorizontal: sp2,
+    paddingVertical: sp1,
+    borderRadius: radMd,
+    backgroundColor: triggerHovered ? colors.primarySubtle ?? "rgba(0,0,0,0.05)" : "transparent"
+  };
+  const dropdownContent = /* @__PURE__ */ React10.createElement(View8, { style: { paddingVertical: sp1 } }, spaces.length > 0 ? /* @__PURE__ */ React10.createElement(
+    SectionLabel,
+    {
+      label: "Spaces",
+      color: colors.textTertiary,
+      size: labelSize,
+      lineHeight: labelLine,
+      font: bodyFont,
+      paddingH: sp4,
+      paddingV: sp1
+    }
+  ) : null, spaces.map((s) => /* @__PURE__ */ React10.createElement(
+    SpaceRow,
+    {
+      key: s.id,
+      space: s,
+      active: s.id === (active?.id ?? null),
+      onPress: () => handleSelect(s.id),
+      renderAvatar: renderSpaceAvatar,
+      renderIcon,
+      colors,
+      bodyFont,
+      bodySize,
+      bodyLine,
+      sp2,
+      sp3,
+      sp4,
+      radMd
+    }
+  )), onAdd ? /* @__PURE__ */ React10.createElement(
+    ActionRow,
+    {
+      label: spaces.length > 0 ? addLabel : "Create your first space",
+      iconName: "plus",
+      onPress: handleAdd,
+      renderIcon,
+      colors,
+      bodyFont,
+      bodySize,
+      bodyLine,
+      sp2,
+      sp3,
+      sp4,
+      radMd
+    }
+  ) : null, onSettings && active ? /* @__PURE__ */ React10.createElement(
+    ActionRow,
+    {
+      label: settingsLabel,
+      iconName: "gear",
+      onPress: handleSettings,
+      renderIcon,
+      colors,
+      bodyFont,
+      bodySize,
+      bodyLine,
+      sp2,
+      sp3,
+      sp4,
+      radMd
+    }
+  ) : null, footerSlot != null ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+    View8,
+    {
+      style: {
+        height: StyleSheet3.hairlineWidth,
+        backgroundColor: colors.borderSubtle,
+        marginVertical: sp1,
+        marginHorizontal: sp2
+      }
+    }
+  ), footerSlot) : null);
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+    Pressable6,
+    {
+      ref: anchorRef,
+      accessibilityRole: "button",
+      accessibilityLabel: active ? `${active.name} \u2014 switch space` : "Switch space",
+      accessibilityState: { expanded: open },
+      hitSlop: 6,
+      onPress: onTriggerPress ?? (() => setOpen(true)),
+      onMouseEnter: () => setTriggerHovered(true),
+      onMouseLeave: () => setTriggerHovered(false),
+      style: triggerStyle
+    },
+    renderTriggerAvatar ? renderTriggerAvatar(active, 22) : null,
+    /* @__PURE__ */ React10.createElement(
+      Text6,
+      {
+        numberOfLines: 1,
+        style: {
+          flex: variant === "sidebar" ? 1 : void 0,
+          minWidth: 0,
+          flexShrink: 1,
+          fontSize: typeScale["heading"]?.size ?? 15,
+          lineHeight: typeScale["heading"]?.lineHeight ?? 20,
+          fontWeight: "600",
+          color: colors.text,
+          fontFamily: bodyFont
+        }
+      },
+      active?.name ?? "Spaces"
+    ),
+    !onTriggerPress && renderIcon ? renderIcon("chevron-down", 14, colors.textTertiary) : null
+  ), onTriggerPress ? null : renderContainer({ isOpen: open, onClose: close, anchorRef, children: dropdownContent }));
+}
+function SectionLabel({ label, color, size, lineHeight, font, paddingH, paddingV }) {
+  return /* @__PURE__ */ React10.createElement(
+    Text6,
+    {
+      style: {
+        fontSize: size,
+        lineHeight,
+        fontWeight: "600",
+        color,
+        fontFamily: font,
+        textTransform: "uppercase",
+        letterSpacing: 0.5,
+        paddingHorizontal: paddingH,
+        paddingVertical: paddingV
+      }
+    },
+    label
+  );
+}
+function SpaceRow({
+  space,
+  active,
+  onPress,
+  renderAvatar,
+  renderIcon,
+  colors,
+  bodyFont,
+  bodySize,
+  bodyLine,
+  sp2,
+  sp3,
+  sp4,
+  radMd
+}) {
+  const [hovered, setHovered] = useState5(false);
+  const bg = hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent";
+  return /* @__PURE__ */ React10.createElement(
+    Pressable6,
+    {
+      accessibilityRole: "menuitem",
+      accessibilityLabel: active ? `${space.name} (current)` : `Switch to ${space.name}`,
+      accessibilityState: { selected: active },
+      onPress,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: sp3,
+        paddingHorizontal: sp4,
+        paddingVertical: sp2,
+        borderRadius: radMd,
+        backgroundColor: bg
+      }
+    },
+    renderAvatar ? renderAvatar(space, 24) : null,
+    /* @__PURE__ */ React10.createElement(
+      Text6,
+      {
+        numberOfLines: 1,
+        style: {
+          flex: 1,
+          minWidth: 0,
+          fontSize: bodySize,
+          lineHeight: bodyLine,
+          fontWeight: active ? "600" : "400",
+          color: active ? colors.primary : colors.text,
+          fontFamily: bodyFont
+        }
+      },
+      space.name
+    ),
+    active && renderIcon ? renderIcon("check", 15, colors.primary) : null
+  );
+}
+function ActionRow({
+  label,
+  iconName,
+  onPress,
+  renderIcon,
+  colors,
+  bodyFont,
+  bodySize,
+  bodyLine,
+  sp2,
+  sp3,
+  sp4,
+  radMd
+}) {
+  const [hovered, setHovered] = useState5(false);
+  const bg = hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent";
+  return /* @__PURE__ */ React10.createElement(
+    Pressable6,
+    {
+      accessibilityRole: "menuitem",
+      accessibilityLabel: label,
+      onPress,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: sp3,
+        paddingHorizontal: sp4,
+        paddingVertical: sp2,
+        borderRadius: radMd,
+        backgroundColor: bg
+      }
+    },
+    renderIcon ? /* @__PURE__ */ React10.createElement(View8, { style: { width: 24, alignItems: "center", justifyContent: "center" } }, renderIcon(iconName, 15, colors.textSecondary)) : null,
+    /* @__PURE__ */ React10.createElement(
+      Text6,
+      {
+        numberOfLines: 1,
+        style: {
+          flex: 1,
+          minWidth: 0,
+          fontSize: bodySize,
+          lineHeight: bodyLine,
+          fontWeight: "400",
+          color: colors.text,
+          fontFamily: bodyFont
+        }
+      },
+      label
+    )
+  );
+}
+
 // src/lightbox/Lightbox.tsx
-import React10, { useEffect as useEffect2 } from "react";
-import { Modal, Platform, Pressable as Pressable6, View as View8 } from "react-native";
+import React11, { useEffect as useEffect2 } from "react";
+import { Modal, Platform, Pressable as Pressable7, View as View9 } from "react-native";
 function Lightbox({
   visible,
   onClose,
@@ -1072,7 +1376,7 @@ function Lightbox({
   const pad = theme.spacing["6"] ?? 24;
   const insetV = theme.spacing["8"] ?? 32;
   const insetH = theme.spacing["4"] ?? 16;
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     Modal,
     {
       visible,
@@ -1081,8 +1385,8 @@ function Lightbox({
       onRequestClose: onClose,
       statusBarTranslucent: true
     },
-    /* @__PURE__ */ React10.createElement(
-      Pressable6,
+    /* @__PURE__ */ React11.createElement(
+      Pressable7,
       {
         style: {
           flex: 1,
@@ -1094,16 +1398,16 @@ function Lightbox({
         onPress: onClose,
         accessibilityLabel: closeLabel
       },
-      /* @__PURE__ */ React10.createElement(
-        View8,
+      /* @__PURE__ */ React11.createElement(
+        View9,
         {
           style: { alignItems: "center", justifyContent: "center" },
           pointerEvents: "box-none"
         },
         children
       ),
-      renderCloseButton ? /* @__PURE__ */ React10.createElement(View8, { style: { position: "absolute", top: insetV, right: insetH } }, renderCloseButton(onClose)) : null,
-      renderActions ? /* @__PURE__ */ React10.createElement(View8, { style: { position: "absolute", bottom: insetV, right: insetH } }, renderActions()) : null
+      renderCloseButton ? /* @__PURE__ */ React11.createElement(View9, { style: { position: "absolute", top: insetV, right: insetH } }, renderCloseButton(onClose)) : null,
+      renderActions ? /* @__PURE__ */ React11.createElement(View9, { style: { position: "absolute", bottom: insetV, right: insetH } }, renderActions()) : null
     )
   );
 }
@@ -1117,6 +1421,7 @@ export {
   SidebarActionButton,
   SidebarHeader,
   SidebarItem,
+  SpaceSwitcher,
   SpacesRail,
   avatarTint,
   filterDiscoverEntries,