@lotics/ui 1.26.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.26.0",
+  "version": "1.27.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -48,6 +48,11 @@
     "./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",

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/dynamic_icon.tsx

@@ -0,0 +1,20 @@
+import { Icon, type IconName } from "./icon";
+
+interface DynamicIconProps {
+  /** Any Lucide icon name (kebab-case). */
+  name: string;
+  size?: number;
+  color?: string;
+  testID?: string;
+}
+
+/**
+ * Native variant of `DynamicIcon`. There's no lazy lucide loader on native, so
+ * names resolve against the curated `Icon` set (which falls back to a neutral
+ * glyph for names outside it). The web variant (`dynamic_icon.web.tsx`) renders
+ * the full Lucide library. The runtime name is a boundary value — `Icon` handles
+ * an unknown name gracefully.
+ */
+export function DynamicIcon({ name, size, color, testID }: DynamicIconProps) {
+  return <Icon name={name as IconName} size={size} color={color} testID={testID} />;
+}

package/src/dynamic_icon.web.tsx

@@ -0,0 +1,40 @@
+import { View } from "react-native";
+import { DynamicIcon as LucideDynamicIcon } from "lucide-react/dynamic";
+import { colors } from "./colors";
+
+type LucideIconName = React.ComponentProps<typeof LucideDynamicIcon>["name"];
+
+interface DynamicIconProps {
+  /** Any Lucide icon name (kebab-case). Unknown names render a blank placeholder. */
+  name: string;
+  size?: number;
+  color?: string;
+  testID?: string;
+}
+
+/**
+ * Renders any icon from the FULL Lucide library by runtime name. Web variant:
+ * lucide-react's lazy `DynamicIcon` code-splits per icon, so only icons actually
+ * shown are fetched — the full set costs ~nothing in the initial bundle. The
+ * native variant (`dynamic_icon.tsx`) resolves against the curated `Icon` set.
+ *
+ * Icons are decorative — the enclosing control carries the accessible name
+ * (matches `Icon`).
+ */
+export function DynamicIcon({ name, size = 24, color = colors.zinc["900"], testID }: DynamicIconProps) {
+  return (
+    <View
+      testID={testID}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      aria-hidden
+    >
+      <LucideDynamicIcon
+        name={name as LucideIconName}
+        size={size}
+        color={color}
+        fallback={() => <View style={{ width: size, height: size }} />}
+      />
+    </View>
+  );
+}