@drakkar.software/octospaces-ui 0.3.0 → 0.4.1

package/dist/index.js

@@ -828,11 +828,599 @@ function SpacesRail({
     renderFoot ? renderFoot() : null
   );
 }
+
+// src/sidebar/Sidebar.tsx
+import React6 from "react";
+import { ScrollView as ScrollView2, View as View5 } from "react-native";
+function Sidebar({
+  header,
+  footer,
+  children,
+  width,
+  scrollable = true,
+  contentContainerStyle,
+  background
+}) {
+  const theme = useOctoSpacesTheme();
+  const { colors, layout } = theme;
+  const panelWidth = width ?? layout["sidebarWidth"] ?? 248;
+  const bg = background ?? colors.sidebarPanel;
+  return /* @__PURE__ */ React6.createElement(
+    View5,
+    {
+      style: {
+        width: panelWidth,
+        backgroundColor: bg,
+        borderRightWidth: 1,
+        borderRightColor: colors.border,
+        flexDirection: "column"
+      }
+    },
+    header ?? null,
+    scrollable ? /* @__PURE__ */ React6.createElement(
+      ScrollView2,
+      {
+        style: { flex: 1 },
+        contentContainerStyle: contentContainerStyle ?? void 0,
+        showsVerticalScrollIndicator: false
+      },
+      children
+    ) : /* @__PURE__ */ React6.createElement(View5, { style: [{ flex: 1 }, contentContainerStyle] }, children),
+    footer ?? null
+  );
+}
+
+// src/sidebar/SidebarHeader.tsx
+import React7 from "react";
+import { StyleSheet, View as View6 } from "react-native";
+function SidebarHeader({
+  leading,
+  actions,
+  extra,
+  divider = false,
+  style
+}) {
+  const theme = useOctoSpacesTheme();
+  const { colors } = theme;
+  return /* @__PURE__ */ React7.createElement(
+    View6,
+    {
+      style: [
+        styles.root,
+        style,
+        divider ? {
+          borderBottomWidth: StyleSheet.hairlineWidth,
+          borderBottomColor: colors.borderSubtle
+        } : void 0
+      ]
+    },
+    /* @__PURE__ */ React7.createElement(View6, { style: styles.row }, /* @__PURE__ */ React7.createElement(View6, { style: styles.leading }, leading), actions != null ? /* @__PURE__ */ React7.createElement(View6, { style: styles.actions }, actions) : null),
+    extra != null ? /* @__PURE__ */ React7.createElement(View6, null, extra) : null
+  );
+}
+var styles = StyleSheet.create({
+  root: {
+    flexDirection: "column"
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  leading: {
+    flex: 1,
+    minWidth: 0
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexShrink: 0
+  }
+});
+
+// src/sidebar/SidebarActionButton.tsx
+import React8, { useState as useState3 } from "react";
+import { Pressable as RNPressable2 } from "react-native";
+var Pressable4 = RNPressable2;
+function SidebarActionButton({
+  icon,
+  onPress,
+  accessibilityLabel,
+  size = 32
+}) {
+  const theme = useOctoSpacesTheme();
+  const { colors, radii } = theme;
+  const [hovered, setHovered] = useState3(false);
+  const [pressed, setPressed] = useState3(false);
+  const bg = pressed ? colors.primaryMuted ?? "rgba(0,0,0,0.10)" : hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.05)" : "transparent";
+  const radius = radii["sm"] ?? 4;
+  return /* @__PURE__ */ React8.createElement(
+    Pressable4,
+    {
+      onPress,
+      onPressIn: () => setPressed(true),
+      onPressOut: () => setPressed(false),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      accessibilityRole: "button",
+      accessibilityLabel,
+      style: {
+        width: size,
+        height: size,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: radius,
+        backgroundColor: bg
+      }
+    },
+    icon
+  );
+}
+
+// src/sidebar/SidebarItem.tsx
+import React9, { useState as useState4 } from "react";
+import { Pressable as RNPressable3, StyleSheet as StyleSheet2, Text as Text5, View as View7 } from "react-native";
+var Pressable5 = RNPressable3;
+function SidebarItem({
+  label,
+  icon,
+  active = false,
+  badge,
+  onPress,
+  onLongPress,
+  trailing,
+  indent = 0
+}) {
+  const theme = useOctoSpacesTheme();
+  const { colors, type: typeScale, fonts, spacing, radii } = theme;
+  const [hovered, setHovered] = useState4(false);
+  const sp1 = spacing["1"] ?? 4;
+  const sp2 = spacing["2"] ?? 8;
+  const sp3 = spacing["3"] ?? 12;
+  const radSm = radii["sm"] ?? 4;
+  const indentPx = indent * 16;
+  const bg = active ? colors.sidebarActive : hovered ? colors.primarySubtle ?? "rgba(0,0,0,0.04)" : "transparent";
+  const textColor = active ? colors.primary : colors.text;
+  return /* @__PURE__ */ React9.createElement(
+    Pressable5,
+    {
+      onPress,
+      onLongPress,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: sp2,
+        paddingVertical: sp1 + 2,
+        paddingLeft: sp3 + indentPx,
+        paddingRight: sp3,
+        borderRadius: radSm,
+        backgroundColor: bg
+      }
+    },
+    icon != null ? /* @__PURE__ */ React9.createElement(View7, { style: styles2.iconSlot }, icon) : null,
+    /* @__PURE__ */ React9.createElement(
+      Text5,
+      {
+        style: {
+          flex: 1,
+          fontSize: typeScale["callout"]?.size ?? 13,
+          lineHeight: typeScale["callout"]?.lineHeight ?? 18,
+          fontWeight: active ? "600" : "400",
+          color: textColor,
+          fontFamily: fonts["body"] ?? void 0
+        },
+        numberOfLines: 1
+      },
+      label
+    ),
+    badge != null ? /* @__PURE__ */ React9.createElement(
+      View7,
+      {
+        style: {
+          minWidth: 16,
+          height: 16,
+          borderRadius: 8,
+          backgroundColor: active ? colors.primary : colors.textTertiary,
+          alignItems: "center",
+          justifyContent: "center",
+          paddingHorizontal: sp1
+        }
+      },
+      /* @__PURE__ */ React9.createElement(
+        Text5,
+        {
+          style: {
+            fontSize: typeScale["micro"]?.size ?? 10,
+            lineHeight: typeScale["micro"]?.lineHeight ?? 14,
+            fontWeight: "700",
+            color: active ? colors.textOnPrimary : colors.textInverse
+          }
+        },
+        String(badge)
+      )
+    ) : null,
+    trailing != null ? trailing : null
+  );
+}
+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
+}) {
+  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: () => 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"
+    ),
+    renderIcon ? renderIcon("chevron-down", 14, colors.textTertiary) : 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 React11, { useEffect as useEffect2 } from "react";
+import { Modal, Platform, Pressable as Pressable7, View as View9 } from "react-native";
+function Lightbox({
+  visible,
+  onClose,
+  children,
+  closeLabel = "Close preview",
+  renderCloseButton,
+  renderActions
+}) {
+  const theme = useOctoSpacesTheme();
+  useEffect2(() => {
+    if (!visible || Platform.OS !== "web") return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [visible, onClose]);
+  const pad = theme.spacing["6"] ?? 24;
+  const insetV = theme.spacing["8"] ?? 32;
+  const insetH = theme.spacing["4"] ?? 16;
+  return /* @__PURE__ */ React11.createElement(
+    Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: onClose,
+      statusBarTranslucent: true
+    },
+    /* @__PURE__ */ React11.createElement(
+      Pressable7,
+      {
+        style: {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center",
+          padding: pad,
+          backgroundColor: theme.colors.overlay ?? "rgba(0,0,0,0.85)"
+        },
+        onPress: onClose,
+        accessibilityLabel: closeLabel
+      },
+      /* @__PURE__ */ React11.createElement(
+        View9,
+        {
+          style: { alignItems: "center", justifyContent: "center" },
+          pointerEvents: "box-none"
+        },
+        children
+      ),
+      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
+    )
+  );
+}
 export {
   DiscoverList,
   DiscoverRow,
   DiscoverScreen,
+  Lightbox,
   OctoSpacesThemeProvider,
+  Sidebar,
+  SidebarActionButton,
+  SidebarHeader,
+  SidebarItem,
+  SpaceSwitcher,
   SpacesRail,
   avatarTint,
   filterDiscoverEntries,