@gogitcms/design-system 0.16.0-next.4 → 0.16.0-next.6

package/src/components/primitives.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
+import { View, Pressable, StyleProp, ViewStyle } from "react-native";
 import { useTheme } from "../ThemeProvider";
 import { Text } from "./Text";
+import { Icon } from "./Icon";
 
 /** Bordered surface card — defined by a hairline border, never a shadow. */
 export function Card({
@@ -141,3 +142,47 @@ export function SectionLabel({ children, style }: { children: React.ReactNode; s
     </View>
   );
 }
+
+/**
+ * A square check box: filled and ticked when on, an empty hairline box when
+ * off.
+ *
+ * Lives here rather than beside its first caller because two surfaces select
+ * things now — entry rows in the browser, and the fields of a past version in
+ * the history diff — and they have to look like the same control. The press
+ * stops propagating: every current caller puts this inside a larger Pressable
+ * (a list row, a field block), and a tick that also opened the row would be
+ * unusable.
+ */
+export function CheckBox({
+  value,
+  onToggle,
+  testID = "check-box",
+}: {
+  value: boolean;
+  onToggle: () => void;
+  testID?: string;
+}) {
+  const t = useTheme();
+  return (
+    <Pressable
+      onPress={(e?: { stopPropagation?: () => void }) => {
+        e?.stopPropagation?.();
+        onToggle();
+      }}
+      testID={testID}
+      style={{
+        width: 18,
+        height: 18,
+        borderRadius: t.radius.sm,
+        borderWidth: 1,
+        borderColor: value ? t.color.borderStrong : t.color.borderDefault,
+        backgroundColor: value ? t.color.surfaceInverted : t.color.surfaceRaised,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {value ? <Icon name="check" size={12} color={t.color.textInverted} /> : null}
+    </Pressable>
+  );
+}

package/src/icons.ts

@@ -28,6 +28,7 @@ export const icons = {
   chevronDown: ["m6 9 6 6 6-6"],
   chevronUp: ["m18 15-6-6-6 6"],
   folder: ["M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"],
+  user: ["M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", "M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"],
   building: ["M3 21h18", "M6 21V7l7-4v18", "M18 21V11l-5-3"],
   menu: ["M3 6h18", "M3 12h18", "M3 18h18"],
   plus: ["M5 12h14", "M12 5v14"],

package/src/index.ts

@@ -65,7 +65,7 @@ export type {
 } from "./components/ChangeRequestSummary";
 
 // Changes surface: one document's diff between a branch and its base
-export { ChangeDetail } from "./components/ChangeDetail";
+export { ChangeDetail, BODY_FIELD } from "./components/ChangeDetail";
 export { DocumentHistory } from "./components/DocumentHistory";
 export type { DocumentHistoryProps } from "./components/DocumentHistory";
 export { firstLine, relativeTime } from "./history";
@@ -115,9 +115,10 @@ export { Spinner } from "./components/Spinner";
 export type { SpinnerProps } from "./components/Spinner";
 
 // Notifications
-export { NotificationBell, NotificationList } from "./components/Notifications";
+export { NotificationBell, NotificationList, InlineCode, notificationKindIcon } from "./components/Notifications";
 export type {
   NotificationItem,
+  NotificationKind,
   NotificationBellProps,
   NotificationListProps,
 } from "./components/Notifications";