@proulr/sdui-components 0.1.23 → 0.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proulr/sdui-components",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "type": "module",
   "main": "./src/renderer/index.ts",
   "types": "./src/renderer/index.ts",
@@ -25,13 +25,14 @@
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run typecheck",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "version:sync": "node ../scripts/proulr-bump-and-sync-deps.mjs"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@proulr/sdui-contract": "^0.1.2"
+    "@proulr/sdui-contract": "^0.1.4"
   },
   "peerDependencies": {
     "expo-blur": ">=15",

package/src/renderer/blocks/SduiDiscoverBlocks.tsx

@@ -3,7 +3,6 @@ import {
   FlatList,
   Image,
   Pressable,
-  ScrollView,
   StyleSheet,
   Text,
   View,
@@ -12,6 +11,8 @@ import {
 import { LinearGradient } from 'expo-linear-gradient';
 import type { SduiBlock } from '@proulr/sdui-contract';
 import { TextField as UiTextField } from '../ui/TextField';
+import { Chip } from '../ui/Chip';
+import { ChipRow } from '../ui/ChipRow';
 import { AppIcon } from '../ui/app-icon';
 import { colors, fonts, gradients, m3Colors, m3Elevation, m3Shape, spacing } from '../theme/proulr-theme';
 import { resolveDataRef, resolveDataRefString } from '../lib/resolve-data-ref';
@@ -271,20 +272,16 @@ export function SduiChipBlock({ block, onAction }: SduiBlockRenderProps) {
   const active = readBooleanProp(block, 'active');
   const variant = readStringProp(block, 'variant') ?? 'default';
   const isHeader = variant === 'on_header';
+  const displayLabel = glyph ? `${glyph} ${label}` : label;
 
   return (
-    <Pressable
-      style={[styles.chip, isHeader ? styles.chipOnHeader : null, active && styles.chipActive]}
-      onPress={() => actionId && onAction(actionId, actionParams)}
+    <Chip
+      label={displayLabel}
+      active={active}
       disabled={!actionId}
-    >
-      {glyph ? (
-        <Text style={[styles.chipLabel, active && styles.chipLabelActive]} accessibilityElementsHidden>
-          {glyph}{' '}
-        </Text>
-      ) : null}
-      <Text style={[styles.chipLabel, active && styles.chipLabelActive]}>{label}</Text>
-    </Pressable>
+      variant={isHeader ? 'onHeader' : 'default'}
+      onPress={() => actionId && onAction(actionId, actionParams)}
+    />
   );
 }
 
@@ -292,21 +289,7 @@ export function SduiChipRowBlock({ block, children }: SduiBlockRenderProps) {
   const variant = readStringProp(block, 'variant') ?? 'default';
   const isHeader = variant === 'on_header';
 
-  if (children) {
-    return (
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        style={styles.chipRowScroll}
-        contentContainerStyle={[styles.chipRow, isHeader && styles.chipRowOnHeader]}
-        keyboardShouldPersistTaps="handled"
-      >
-        {children}
-      </ScrollView>
-    );
-  }
-
-  return <View style={[styles.chipRow, isHeader && styles.chipRowOnHeader]}>{children}</View>;
+  return <ChipRow variant={isHeader ? 'onHeader' : 'default'}>{children}</ChipRow>;
 }
 
 export function SduiTextFieldBlock({ block, data, onAction }: SduiBlockRenderProps) {
@@ -446,49 +429,6 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     fontFamily: fonts.semibold,
   },
-  chipRowScroll: {
-    flexGrow: 0,
-    flexShrink: 0,
-    alignSelf: 'stretch',
-  },
-  chipRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.xs,
-    paddingHorizontal: spacing.sm,
-    paddingVertical: 0,
-  },
-  chipRowOnHeader: {
-    paddingHorizontal: spacing.sm,
-  },
-  chip: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'center',
-    paddingHorizontal: spacing.sm + 2,
-    paddingVertical: spacing.xs,
-    borderRadius: m3Shape.cornerFull,
-    backgroundColor: m3Colors.surfaceContainerHigh,
-    borderWidth: 1,
-    borderColor: m3Colors.outline,
-  },
-  chipOnHeader: {
-    backgroundColor: 'rgba(255,255,255,0.06)',
-    borderColor: 'rgba(255,255,255,0.08)',
-  },
-  chipActive: {
-    backgroundColor: m3Colors.primaryContainer,
-    borderColor: m3Colors.primary,
-  },
-  chipLabel: {
-    color: m3Colors.onSurface,
-    fontSize: 12,
-    fontFamily: fonts.semibold,
-  },
-  chipLabelActive: {
-    color: m3Colors.onPrimaryContainer,
-    fontFamily: fonts.semibold,
-  },
   textField: {
     flex: 1,
     marginBottom: 0,

package/src/renderer/ui/Chip.tsx

@@ -6,11 +6,13 @@ export function Chip({
   active,
   onPress,
   variant = 'default',
+  disabled,
 }: {
   label: string;
   active?: boolean;
   onPress?: () => void;
   variant?: 'default' | 'onHeader';
+  disabled?: boolean;
 }) {
   const isHeader = variant === 'onHeader';
 
@@ -19,7 +21,7 @@ export function Chip({
       ? { backgroundColor: m3Colors.onPrimary, borderColor: m3Colors.onPrimary }
       : { backgroundColor: m3Colors.secondaryContainer, borderColor: m3Colors.outline }
     : isHeader
-      ? { backgroundColor: colors.surfaceGlass, borderColor: 'rgba(255,255,255,0.28)' }
+      ? { backgroundColor: colors.surfaceGlass, borderColor: colors.chromePillBorder }
       : { backgroundColor: m3Colors.surfaceContainerHigh, borderColor: m3Colors.outline };
 
   const textColor = active
@@ -31,7 +33,11 @@ export function Chip({
       : m3Colors.onSurfaceVariant;
 
   return (
-    <Pressable onPress={onPress} style={[styles.chip, isHeader && styles.chipOnHeader, containerStyle]}>
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      style={[styles.chip, isHeader && styles.chipOnHeader, containerStyle]}
+    >
       <Text
         style={{
           color: textColor,

package/src/renderer/ui/ChipRow.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { CHROME_HORIZONTAL_INSET } from '../theme/chrome-layout';
+import { spacing } from '../theme/proulr-theme';
+
+type ChipRowProps = {
+  children: React.ReactNode;
+  variant?: 'default' | 'onHeader';
+};
+
+/** Horizontal filter chip scroller — single chrome style for Discover, inbox, etc. */
+export function ChipRow({ children, variant = 'default' }: ChipRowProps) {
+  const isHeader = variant === 'onHeader';
+
+  if (!children) {
+    return <View style={[styles.content, isHeader && styles.contentOnHeader]} />;
+  }
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={styles.scroll}
+      contentContainerStyle={[styles.content, isHeader && styles.contentOnHeader]}
+      keyboardShouldPersistTaps="handled"
+      nestedScrollEnabled
+    >
+      {children}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    flexGrow: 0,
+    flexShrink: 0,
+    alignSelf: 'stretch',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingHorizontal: spacing.sm,
+    paddingVertical: 0,
+  },
+  contentOnHeader: {
+    paddingLeft: CHROME_HORIZONTAL_INSET,
+    paddingRight: CHROME_HORIZONTAL_INSET,
+  },
+});

package/src/renderer/ui/index.ts

@@ -4,6 +4,7 @@ export { AppLoadingSpinner } from './AppLoadingSpinner';
 export { AuthStepShell } from './AuthStepShell';
 export { Card } from './Card';
 export { Chip } from './Chip';
+export { ChipRow } from './ChipRow';
 export { ChromeGlassLayer, ChromeGlassShell } from './ChromeGlass';
 export { ComposeAudiencePill } from './compose-audience-pill';
 export {

package/src/renderer/ui/primitives.ts

@@ -3,6 +3,7 @@ export { AppButton } from './AppButton';
 export { AppLoadingSpinner } from './AppLoadingSpinner';
 export { Card } from './Card';
 export { Chip } from './Chip';
+export { ChipRow } from './ChipRow';
 export { DateField } from './DateField';
 export { HintText } from './HintText';
 export { InfoBanner } from './InfoBanner';