convex-feedback-ui 0.1.1

package/dist/shared/types/theme.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Semantic colors used by the feedback UI on both React DOM and React Native.
+ */
+export interface FeedbackColors {
+    /** Primary interaction and accent color. */
+    primary: string;
+    /** Main screen or board background color. */
+    background: string;
+    /** Default card and control surface color. */
+    surface: string;
+    /** Secondary or muted surface color. */
+    surfaceMuted: string;
+    /** Primary text color. */
+    text: string;
+    /** Secondary, metadata, and helper text color. */
+    mutedText: string;
+    /** Border and separator color. */
+    border: string;
+    /** Destructive and error-state color. */
+    danger: string;
+    /** Positive and success-state color. */
+    success: string;
+}
+/**
+ * Fully resolved visual theme consumed by feedback UI primitives.
+ */
+export interface FeedbackTheme {
+    /** Semantic feedback color palette. */
+    colors: FeedbackColors;
+    /** Base corner radius in logical pixels. */
+    radius: number;
+    /** Base spacing unit in logical pixels. */
+    spacing: number;
+}
+/**
+ * Partial theme accepted by feedback providers and prebuilt screens.
+ *
+ * Missing values fall back to the package's default feedback theme.
+ */
+export interface FeedbackThemeOverride {
+    /** Partial semantic color overrides. */
+    colors?: Partial<FeedbackColors> | undefined;
+    /** Base corner-radius override. */
+    radius?: number | undefined;
+    /** Base spacing-unit override. */
+    spacing?: number | undefined;
+}
+//# sourceMappingURL=theme.d.ts.map

package/dist/shared/types/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/shared/types/theme.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAEhB,6CAA6C;IAC7C,UAAU,EAAE,MAAM,CAAC;IAEnB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,CAAC;IAEhB,wCAAwC;IACxC,YAAY,EAAE,MAAM,CAAC;IAErB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IAEb,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IAEf,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uCAAuC;IACvC,MAAM,EAAE,cAAc,CAAC;IAEvB,4CAA4C;IAC5C,MAAM,EAAE,MAAM,CAAC;IAEf,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC;IAE7C,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE5B,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B"}

package/dist/shared/types/theme.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=theme.js.map

package/dist/shared/types/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/shared/types/theme.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "convex-feedback-ui",
+  "version": "0.1.1",
+  "description": "Customizable React and React Native UI primitives for convex-feedback.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "sideEffects": [
+    "./dist/react/styles.css"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./native": {
+      "types": "./dist/native/index.d.ts",
+      "default": "./dist/native/index.js"
+    },
+    "./styles.css": "./dist/react/styles.css"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node ./scripts/copy-css.mjs",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "lint": "eslint src test",
+    "test": "vitest run",
+    "test:all": "npm run typecheck && npm run lint && npm run test",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "convex-feedback": "^0.1.0",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-native": "^0.83.0",
+    "react-native-safe-area-context": "^4.5.3"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "convex-feedback": "0.1.0",
+    "react": "^19.2.0",
+    "react-native": "^0.83.10",
+    "react-native-safe-area-context": "^4.5.3"
+  },
+  "types": "./dist/react/index.d.ts",
+  "module": "./dist/react/index.js"
+}

package/src/native/README.md

@@ -0,0 +1,17 @@
+# Native layer
+
+Import this layer only from `convex-feedback-ui/native`.
+
+The native layer uses React Native core primitives and the shared `FeedbackMessages` / `FeedbackTheme` contracts. It intentionally does not depend on NativeWind or Expo UI.
+
+To replace a control with Expo UI, use render-function children on an interactive leaf:
+
+```tsx
+<Comment.Like onToggle={setLiked}>
+  {({ active, count, toggle }) => (
+    <YourExpoUiControl active={active} count={count} onPress={toggle} />
+  )}
+</Comment.Like>
+```
+
+Containers such as `FeedbackEntry.Content`, `FeedbackForm.Root`, and `Comment.Children` accept arbitrary children, so custom Expo UI fields/buttons can also be placed directly inside the compound layout.

package/src/native/context.tsx

@@ -0,0 +1,74 @@
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+
+import { mergeFeedbackMessages } from "../shared/messages.js";
+
+import { mergeFeedbackTheme } from "../shared/theme.js";
+import type {
+  FeedbackProviderProps,
+  FeedbackTheme,
+  FeedbackUiContextValue,
+} from "../shared/types";
+
+const FeedbackNativeContext = createContext<FeedbackUiContextValue | null>(
+  null,
+);
+
+export function FeedbackProvider({
+  children,
+  messages,
+  theme,
+  unstyled = false,
+}: FeedbackProviderProps) {
+  const value = useMemo<FeedbackUiContextValue>(
+    () => ({
+      messages: mergeFeedbackMessages(messages),
+      theme: mergeFeedbackTheme(theme),
+      unstyled,
+    }),
+    [messages, theme, unstyled],
+  );
+  return (
+    <FeedbackNativeContext.Provider value={value}>
+      {children}
+    </FeedbackNativeContext.Provider>
+  );
+}
+
+export function useFeedbackUi(): FeedbackUiContextValue {
+  const value = useContext(FeedbackNativeContext);
+  return (
+    value ?? {
+      messages: mergeFeedbackMessages(),
+      theme: mergeFeedbackTheme(),
+      unstyled: false,
+    }
+  );
+}
+
+export interface FeedbackNativeThemeScopeProps {
+  children: ReactNode;
+  colors: Partial<FeedbackTheme["colors"]>;
+}
+
+export function FeedbackNativeThemeScope({
+  children,
+  colors,
+}: FeedbackNativeThemeScopeProps) {
+  const parent = useFeedbackUi();
+  const value = useMemo<FeedbackUiContextValue>(
+    () => ({
+      ...parent,
+      theme: {
+        ...parent.theme,
+        colors: { ...parent.theme.colors, ...colors },
+      },
+    }),
+    [colors, parent],
+  );
+
+  return (
+    <FeedbackNativeContext.Provider value={value}>
+      {children}
+    </FeedbackNativeContext.Provider>
+  );
+}

package/src/native/index.ts

@@ -0,0 +1,39 @@
+export {
+  englishFeedbackMessages,
+  mergeFeedbackMessages,
+} from "../shared/messages.js";
+export { defaultFeedbackTheme, mergeFeedbackTheme } from "../shared/theme.js";
+export type {
+  BoardSearchState,
+  CommentActionState,
+  CommentLikeState,
+  EntryUpvoteState,
+  FeedbackColors,
+  FeedbackMessageOverrides,
+  FeedbackMessages,
+  FeedbackTheme,
+  FeedbackThemeOverride,
+  FormSubmitState,
+  RenderChildren,
+  RepliesButtonState,
+  FeedbackScreenBaseProps,
+  FeedbackScreenRootProps,
+  FeedbackScreenBodyProps,
+} from "../shared/types";
+export { FeedbackProvider, useFeedbackUi } from "./context.js";
+export {
+  Comment,
+  FeedbackBoard,
+  FeedbackEntry,
+  FeedbackForm,
+  type BoardRootProps,
+  type BoardSearchProps,
+  type CommentActionProps,
+  type CommentLikeProps,
+  type CommentRootProps,
+  type EntryRootProps,
+  type EntryUpvoteProps,
+  type FormSubmitProps,
+  type RepliesButtonProps,
+} from "./primitives.js";
+export { FeedbackScreen } from "./screen.js";