@proulr/sdui-components 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
   "exports": {
@@ -17,7 +17,9 @@
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run typecheck"
+    "prepublishOnly": "npm run typecheck",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "publishConfig": {
     "access": "public"
@@ -52,6 +54,8 @@
   "devDependencies": {
     "@types/node": "^22.20.0",
     "@types/react": "~19.2.2",
+    "eslint": "^9.0.0",
+    "eslint-config-expo": "~56.0.4",
     "expo-linear-gradient": "~56.0.4",
     "react": "19.2.3",
     "react-native": "0.85.3",

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -188,7 +188,7 @@ function DiscoverGridCell({
   );
 }
 
-export function SduiDiscoverGridBlock({ block, data, onAction }: SduiBlockRenderProps) {
+function SduiDiscoverGridBlockFallback({ block, data, onAction }: SduiBlockRenderProps) {
   const itemsRef = readStringProp(block, 'items_ref') ?? 'grid_items';
   const columns = readNumberProp(block, 'columns', GRID_COLUMNS);
   const profileActionId = readStringProp(block, 'profile_action_id');
@@ -239,6 +239,23 @@ export function SduiDiscoverGridBlock({ block, data, onAction }: SduiBlockRender
   );
 }
 
+export function SduiDiscoverGridBlock({ block, data, onAction }: SduiBlockRenderProps) {
+  const hybrid = useSduiHybridRenderer();
+  if (hybrid.renderDiscoverGrid) {
+    return (
+      <>
+        {hybrid.renderDiscoverGrid({
+          block,
+          data,
+          onAction,
+        })}
+      </>
+    );
+  }
+
+  return <SduiDiscoverGridBlockFallback block={block} data={data} onAction={onAction} />;
+}
+
 export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
   const label = readStringProp(block, 'label') ?? '';
   const actionId = readStringProp(block, 'action_id');

package/src/renderer/blocks/SduiPrimitiveBlocks.tsx

@@ -98,6 +98,8 @@ export function SduiScrollBlock({ block, children }: SduiBlockRenderProps) {
             : blockContentStyle
         }
         {...(chromeScroll?.scrollInsetProps ?? {})}
+        onScroll={chromeScroll?.onScroll}
+        scrollEventThrottle={chromeScroll?.onScroll ? 16 : undefined}
         showsVerticalScrollIndicator={false}
       >
         {children}

package/src/renderer/index.ts

@@ -32,8 +32,15 @@ export {
   formatDistanceLabel,
   getPresenceStatus,
   profileAgeFromBirthDate,
+  readDiscoverGridItems,
+  isDiscoverGridItem,
+} from './lib/discover-profile-formatters';
+export type {
+  DiscoverNearbyProfileWire,
+  DiscoverGridItemWire,
+  DiscoverGridProfileItemWire,
+  DiscoverGridAdItemWire,
 } from './lib/discover-profile-formatters';
-export type { DiscoverNearbyProfileWire } from './lib/discover-profile-formatters';
 export {
   configureNativeAdCatalog,
   getNativeAdCatalog,

package/src/renderer/sdui-chrome-scroll-context.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, type ReactNode } from 'react';
-import type { ViewStyle } from 'react-native';
+import type { NativeScrollEvent, NativeSyntheticEvent, ViewStyle } from 'react-native';
 
 export type SduiChromeScrollInsetProps = {
   contentInset?: { top: number; bottom: number };
@@ -19,6 +19,7 @@ export type SduiChromeScrollConfig = {
   scrollInsetProps: SduiChromeScrollInsetProps;
   contentContainerStyle: ViewStyle;
   chromeInsets: SduiChromeScrollInsets;
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
 
 const SduiChromeScrollContext = createContext<SduiChromeScrollConfig | null>(null);

package/src/renderer/sdui-hybrid-renderer-context.tsx

@@ -45,6 +45,7 @@ export type SduiHybridRenderers = {
   renderProfileCompletionBanner?: (props: SduiHybridProfileCompletionBannerProps) => ReactNode;
   renderDiscoverMap?: (props: SduiHybridDiscoverMapProps) => ReactNode;
   renderDiscoverProfileCard?: (props: SduiHybridDiscoverProfileCardProps) => ReactNode;
+  renderDiscoverGrid?: (props: SduiNativeBlockRenderProps) => ReactNode;
   renderTextField?: (props: {
     dataRef: string;
     placeholder: string;

package/src/renderer/ui/app-glyphs.tsx

@@ -1234,6 +1234,79 @@ export function AppChromeSignOutGlyph({ color = m3Colors.primary, size = 24 }: A
   );
 }
 
+/** Olho aberto — mostrar senha. */
+export function AppChromeVisibilityGlyph({ color = m3Colors.onSurfaceVariant, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const eyeW = size * 0.82;
+  const eyeH = size * 0.46;
+  const pupil = size * 0.18;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: eyeW,
+          height: eyeH,
+          borderRadius: eyeH / 2,
+          borderWidth: stroke,
+          borderColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: pupil,
+          height: pupil,
+          borderRadius: pupil / 2,
+          backgroundColor: color,
+        }}
+      />
+    </View>
+  );
+}
+
+/** Olho riscado — ocultar senha. */
+export function AppChromeVisibilityOffGlyph({ color = m3Colors.onSurfaceVariant, size = 24 }: AppChromeGlyphProps) {
+  const stroke = strokeFor(size);
+  const eyeW = size * 0.82;
+  const eyeH = size * 0.46;
+  const pupil = size * 0.18;
+  const slash = size * 0.88;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          width: eyeW,
+          height: eyeH,
+          borderRadius: eyeH / 2,
+          borderWidth: stroke,
+          borderColor: color,
+          opacity: 0.72,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: pupil,
+          height: pupil,
+          borderRadius: pupil / 2,
+          backgroundColor: color,
+          opacity: 0.72,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: slash,
+          height: stroke,
+          backgroundColor: color,
+          borderRadius: 1,
+          transform: [{ rotate: '-35deg' }],
+        }}
+      />
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
   crosshair: {
     position: 'absolute',

package/src/renderer/ui/app-icon.tsx

@@ -46,6 +46,8 @@ import {
   AppChromeTabDiscoverGlyph,
   AppChromeTabFlashGlyph,
   AppChromeTabVibesGlyph,
+  AppChromeVisibilityGlyph,
+  AppChromeVisibilityOffGlyph,
   type AppChromeGlyphProps,
 } from './app-glyphs';
 import {
@@ -110,7 +112,9 @@ export type AppIconName =
   | 'pause'
   | 'plus'
   | 'followers'
-  | 'mention';
+  | 'mention'
+  | 'visibility'
+  | 'visibility-off';
 
 const ICON_REGISTRY: Record<AppIconName, ComponentType<AppChromeGlyphProps>> = {
   search: AppChromeSearchGlyph,
@@ -165,6 +169,8 @@ const ICON_REGISTRY: Record<AppIconName, ComponentType<AppChromeGlyphProps>> = {
   plus: AppChromePlusGlyph,
   followers: ComposeFollowersGlyph,
   mention: ComposeMentionGlyph,
+  visibility: AppChromeVisibilityGlyph,
+  'visibility-off': AppChromeVisibilityOffGlyph,
 };
 
 export type AppIconProps = {

package/src/renderer/ui/compose-glyphs.tsx

@@ -7,7 +7,6 @@ type GlyphProps = {
 };
 
 export function ComposeCloseGlyph({ color = m3Colors.onSurface, size = 18 }: GlyphProps) {
-  const stroke = Math.max(1.5, size * 0.1);
   return (
     <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
       <View style={[styles.diag, { width: size, backgroundColor: color, transform: [{ rotate: '45deg' }] }]} />

package/src/renderer/ui/floating-create-menu.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
-import { fonts, m3Colors, m3Elevation, m3Shape, spacing } from '../theme/proulr-theme';
+import { fonts, m3Colors, m3Elevation, spacing } from '../theme/proulr-theme';
 
 export type FloatingCreateMenuAction = {
   id: string;