@lotics/ui 1.27.0 → 2.0.0

package/README.md

@@ -0,0 +1,34 @@
+# @lotics/ui
+
+Cross-platform (react-native-web) UI primitives with no Lotics domain coupling —
+no i18n, analytics, or domain types. Consumed by `frontend`, `browser_extension`,
+and custom-code apps. Lotics-specific compositions live in `frontend` or
+`@lotics/ui-internal`, not here.
+
+The package ships `.tsx` source directly (no build step); consumers import
+subpaths, e.g. `import { Button } from "@lotics/ui/button"`.
+
+## Dev harness
+
+A standalone Vite app for developing the primitives in isolation — no Expo app,
+no backend.
+
+```bash
+npm run dev          # from packages/ui — serves http://localhost:5173
+```
+
+It lives in `dev/`: `main.tsx` mounts a hash-routed sidebar, `registry.ts` lists
+the showcase pages, and `dev/pages/*` are the per-primitive demos. `vite.config.ts`
+wires the react-native-web aliases (the same ones a consuming app's bundler sets up).
+
+To add a page: create `dev/pages/<name>.tsx` exporting a component (use the
+`Page`/`Section`/`Row` helpers from `dev/showcase.tsx`) and add one entry to the
+`pages` array in `dev/registry.ts`.
+
+## Checks
+
+```bash
+npm run typecheck    # tsgo (covers src + dev)
+npm run lint         # oxlint
+npm run test         # vitest
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.27.0",
+  "version": "2.0.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -35,8 +35,6 @@
     "./stacked_progress_bar": "./src/stacked_progress_bar.tsx",
     "./legend_item": "./src/legend_item.tsx",
     "./trend_footer": "./src/trend_footer.tsx",
-    "./chart_area": "./src/chart_area.tsx",
-    "./chart_bar": "./src/chart_bar.tsx",
     "./spacing": "./src/spacing.ts",
     "./theme": "./src/theme.tsx",
     "./progress_bar": "./src/progress_bar.tsx",
@@ -57,7 +55,6 @@
     "./button": "./src/button.tsx",
     "./checkbox": "./src/checkbox.tsx",
     "./combobox": "./src/combobox.tsx",
-    "./search_select": "./src/search_select.tsx",
     "./portal": "./src/portal.tsx",
     "./popover_nav": "./src/popover_nav.tsx",
     "./popover": "./src/popover.tsx",
@@ -68,7 +65,7 @@
     "./pressable_highlight": "./src/pressable_highlight.tsx",
     "./icon_button": "./src/icon_button.tsx",
     "./info_popover": "./src/info_popover.tsx",
-    "./select_item": "./src/select_item.tsx",
+    "./card_select_item": "./src/card_select_item.tsx",
     "./badge": "./src/badge.tsx",
     "./divider": "./src/divider.tsx",
     "./spacer": "./src/spacer.tsx",
@@ -184,8 +181,7 @@
     "react-dom": "^19.2.0",
     "react-native": ">=0.85.0",
     "react-native-svg": ">=15.0.0",
-    "react-native-web": ">=0.20.0",
-    "recharts": ">=3.0.0"
+    "react-native-web": ">=0.20.0"
   },
   "peerDependenciesMeta": {
     "@lotics/docx": {
@@ -205,12 +201,10 @@
     },
     "react-native-svg": {
       "optional": true
-    },
-    "recharts": {
-      "optional": true
     }
   },
   "scripts": {
+    "dev": "vite",
     "typecheck": "tsgo --noEmit",
     "lint": "oxlint",
     "test": "vitest run"
@@ -218,6 +212,11 @@
   "devDependencies": {
     "@lotics/docx": "^0.1.0",
     "@lotics/xlsx": "^0.1.0",
-    "recharts": "^3.8.1"
+    "@types/react-dom": "~19.2.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "lucide-react": "^0.562.0",
+    "react-dom": "^19.2.0",
+    "react-native-web": "^0.21.0",
+    "vite": "^7.2.4"
   }
 }

package/src/card.tsx

@@ -1,32 +1,19 @@
-import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
 
 interface CardProps {
   children: React.ReactNode;
   testID?: string;
-  onPress?: () => void;
   style?: StyleProp<ViewStyle>;
 }
 
+/**
+ * A bordered presentational surface — view only. It never handles interaction:
+ * for a pressable/selectable card use CardSelectItem (a real focusable button),
+ * or compose PressableHighlight for a bespoke action.
+ */
 export function Card(props: CardProps) {
-  const { children, testID, onPress, style } = props;
-
-  if (onPress) {
-    return (
-      <Pressable
-        testID={testID}
-        onPress={() => {
-          onPress();
-        }}
-        style={(state) => {
-          const hovered = (state as { hovered?: boolean }).hovered;
-          return [styles.container, hovered && styles.hovered, style];
-        }}
-      >
-        {children}
-      </Pressable>
-    );
-  }
+  const { children, testID, style } = props;
 
   return (
     <View testID={testID} style={[styles.container, style]}>
@@ -55,7 +42,4 @@ const styles = StyleSheet.create({
         "0 1px 2px 0 rgba(38,38,38,0.06), 0 4px 12px -2px rgba(38,38,38,0.06)",
     } as ViewStyle),
   },
-  hovered: {
-    borderColor: colors.zinc["900"],
-  },
 });

package/src/card_select_item.tsx

@@ -0,0 +1,52 @@
+import { PressableStateCallbackType, StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { colors } from "./colors";
+import { PressableHighlight } from "./pressable_highlight";
+
+interface CardSelectItemProps {
+  children: React.ReactNode;
+  onPress: () => void;
+  testID?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A bordered, card-shaped button — the selectable row used on auth screens
+ * (organization picker, login choices). Always interactive: a real focusable
+ * `button` that shows a 2px ring on hover/press, matching the global keyboard
+ * focus ring. For a static surface use Card instead.
+ */
+export function CardSelectItem(props: CardSelectItemProps) {
+  const { children, onPress, testID, style } = props;
+
+  return (
+    <PressableHighlight
+      testID={testID}
+      accessibilityRole="button"
+      onPress={onPress}
+      style={(state: PressableStateCallbackType) => {
+        const hovered = (state as { hovered?: boolean }).hovered;
+        const active = hovered || state.pressed;
+        return [styles.container, active && styles.ring, style];
+      }}
+    >
+      {children}
+    </PressableHighlight>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: colors.background,
+    borderColor: colors.border,
+    borderWidth: 1,
+  },
+  // A 2px ring flush against the border (spread 2, no offset/blur) — the same
+  // weight and color as the global `:focus-visible` outline, so hover, press,
+  // and keyboard focus all read as one consistent ring rather than a thin
+  // border-darken. boxShadow keeps it layout-neutral (no 1px→2px reflow).
+  ring: {
+    ...({ boxShadow: `0 0 0 2px ${colors.zinc["900"]}` } as ViewStyle),
+  },
+});

package/src/column_filter.tsx

@@ -155,7 +155,6 @@ export function ColumnFilter(props: ColumnFilterProps) {
         ) : (
           <PickerMenu
             multi
-            enableSearch
             options={column.options ?? []}
             value={value?.kind === "select" ? value.selected : []}
             onValueChange={(selected) => onChange({ kind: "select", selected })}