@lotics/ui 11.8.10 → 12.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/AGENTS.md +13 -0
  2. package/docs/catalog.md +37 -19
  3. package/docs/composition.md +60 -3
  4. package/docs/data_entry.md +26 -7
  5. package/docs/templates.md +148 -50
  6. package/examples/tpl_documents.tsx +29 -18
  7. package/examples/tpl_item_list.tsx +27 -8
  8. package/examples/tpl_record.tsx +2214 -555
  9. package/package.json +1 -1
  10. package/src/back_button.tsx +26 -33
  11. package/src/checklist.tsx +30 -15
  12. package/src/comments_thread.tsx +3 -62
  13. package/src/detail_row.tsx +86 -40
  14. package/src/inline_edit.tsx +5 -0
  15. package/src/inline_select.tsx +5 -5
  16. package/src/radio_picker.tsx +11 -2
  17. package/src/section_heading.tsx +3 -3
  18. package/src/section_stack.tsx +6 -4
  19. package/src/text_input_field.tsx +6 -0
  20. package/src/timeline.tsx +9 -9
package/src/timeline.tsx CHANGED
@@ -76,9 +76,9 @@ export function Timeline(props: TimelineProps) {
76
76
  {/* Tinted disc: a low-alpha wash of the accent behind a full-color icon. */}
77
77
  <View style={[styles.node, { backgroundColor: withAlpha(item.iconColor, 0.1) }]}>
78
78
  {item.isLoading ? (
79
- <ActivityIndicator size={13} color={item.iconColor} />
79
+ <ActivityIndicator size={16} color={item.iconColor} />
80
80
  ) : (
81
- <Icon name={item.icon} size={13} color={item.iconColor} />
81
+ <Icon name={item.icon} size={16} color={item.iconColor} />
82
82
  )}
83
83
  </View>
84
84
  </AnimationFadeIn>
@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
122
122
  // Stretches to the label row's height; the disc centers on it, half-spines
123
123
  // fill the remainder so the line never breaks on a tall row.
124
124
  discColumn: {
125
- width: 24,
125
+ width: 32,
126
126
  alignSelf: "stretch",
127
127
  alignItems: "center",
128
128
  },
@@ -138,9 +138,9 @@ const styles = StyleSheet.create({
138
138
  backgroundColor: colors.zinc[200],
139
139
  },
140
140
  node: {
141
- width: 24,
142
- height: 24,
143
- borderRadius: 12,
141
+ width: 32,
142
+ height: 32,
143
+ borderRadius: 16,
144
144
  justifyContent: "center",
145
145
  alignItems: "center",
146
146
  marginVertical: 3,
@@ -153,7 +153,7 @@ const styles = StyleSheet.create({
153
153
  gap: 12,
154
154
  },
155
155
  spineColumn: {
156
- width: 24,
156
+ width: 32,
157
157
  alignItems: "center",
158
158
  alignSelf: "stretch",
159
159
  },
@@ -178,13 +178,13 @@ const styles = StyleSheet.create({
178
178
  paddingHorizontal: 8,
179
179
  paddingVertical: 4,
180
180
  marginHorizontal: -8,
181
- minHeight: 28,
181
+ minHeight: 40,
182
182
  flexDirection: "row",
183
183
  alignItems: "center",
184
184
  },
185
185
  plainRow: {
186
186
  paddingVertical: 4,
187
- minHeight: 28,
187
+ minHeight: 40,
188
188
  flexDirection: "row",
189
189
  alignItems: "center",
190
190
  },