@lotics/ui 1.26.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.26.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",
@@ -48,11 +46,15 @@
     "./text": "./src/text.tsx",
     "./activity_indicator": "./src/activity_indicator.tsx",
     "./icon": "./src/icon.tsx",
+    "./dynamic_icon": {
+      "react-native": "./src/dynamic_icon.tsx",
+      "default": "./src/dynamic_icon.web.tsx"
+    },
+    "./app_icon": "./src/app_icon.tsx",
     "./tooltip": "./src/tooltip.tsx",
     "./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",
@@ -63,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",
@@ -179,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": {
@@ -200,12 +201,10 @@
     },
     "react-native-svg": {
       "optional": true
-    },
-    "recharts": {
-      "optional": true
     }
   },
   "scripts": {
+    "dev": "vite",
     "typecheck": "tsgo --noEmit",
     "lint": "oxlint",
     "test": "vitest run"
@@ -213,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/app_icon.tsx

@@ -0,0 +1,59 @@
+import { View, StyleSheet } from "react-native";
+import { DynamicIcon } from "./dynamic_icon";
+import { colors } from "./colors";
+
+interface AppIconProps {
+  /**
+   * The app's icon — a Lucide icon name (the full library, via `DynamicIcon`).
+   * Empty/absent renders the neutral default.
+   */
+  icon?: string | null;
+  /** Palette token name (e.g. "blue"); unknown/empty → neutral zinc. */
+  themeColor?: string | null;
+  size?: "sm" | "md";
+}
+
+const DEFAULT_ICON = "layout-grid";
+
+/**
+ * The app's launcher tile: a brand-tinted square holding the app's Lucide icon
+ * (full library) or its uploaded image. Shared by every surface that shows an app
+ * (launcher, list, picker) — frontend and extension alike.
+ */
+export function AppIcon({ icon, themeColor, size = "sm" }: AppIconProps) {
+  const gradientStart = shade(themeColor, "400") ?? colors.zinc["400"];
+  const gradientEnd = shade(themeColor, "500") ?? colors.zinc["500"];
+  const iconColor = themeColor ? colors.white : colors.zinc["900"];
+  const isMd = size === "md";
+  const iconSize = isMd ? 20 : 16;
+  const name = icon && icon.trim() !== "" ? icon : DEFAULT_ICON;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        isMd ? styles.md : styles.sm,
+        // Solid color is the cross-platform base; web layers the gradient on top.
+        { backgroundColor: gradientEnd, backgroundImage: `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)` },
+      ]}
+    >
+      <DynamicIcon name={name} size={iconSize} color={iconColor} />
+    </View>
+  );
+}
+
+/** Safe palette-token → shade lookup (mirrors the option-color resolver). */
+function shade(token: string | null | undefined, level: "400" | "500"): string | undefined {
+  if (!token) return undefined;
+  const palette = colors[token as keyof typeof colors];
+  if (palette && typeof palette === "object" && level in palette) {
+    return (palette as Record<string, string>)[level];
+  }
+  return undefined;
+}
+
+const styles = StyleSheet.create({
+  container: { borderRadius: 6, alignItems: "center", justifyContent: "center", overflow: "hidden" },
+  sm: { width: 32, height: 32 },
+  md: { width: 40, height: 40, borderRadius: 8, boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)" },
+});

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 })}