@lotics/ui 2.0.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/accordion.tsx

@@ -22,6 +22,12 @@ export interface AccordionProps {
   style?: StyleProp<ViewStyle>;
   /** Merged onto the container while open — e.g. an accent border. */
   expandedStyle?: StyleProp<ViewStyle>;
+  /** Merged onto the clickable trigger (after the comfortable-tap-target
+   *  defaults). Use to bleed the hover highlight full-width while keeping the
+   *  header label aligned with surrounding content — e.g.
+   *  `{ marginHorizontal: -12, paddingHorizontal: 12 }` inside a 12px-padded
+   *  container — or to widen the tap target. */
+  triggerStyle?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
 }
 
@@ -42,6 +48,7 @@ export function Accordion(props: AccordionProps) {
     onToggle,
     style,
     expandedStyle,
+    triggerStyle,
     accessibilityLabel,
   } = props;
   const [internal, setInternal] = useState(defaultExpanded);
@@ -61,7 +68,7 @@ export function Accordion(props: AccordionProps) {
           accessibilityRole="button"
           accessibilityState={{ expanded }}
           accessibilityLabel={accessibilityLabel}
-          style={styles.trigger}
+          style={[styles.trigger, triggerStyle]}
         >
           <View style={styles.headerContent}>{header}</View>
           <Icon name={expanded ? "chevron-up" : "chevron-down"} size={18} color={colors.zinc[400]} />
@@ -87,11 +94,17 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
+    // A bare row is a too-small tap target and gives PressableHighlight's
+    // hover/press tint no room to read as a button. Pad vertically for a
+    // comfortable target and round the corners so the tint is a pill.
+    paddingVertical: 8,
+    borderRadius: 8,
   },
   headerContent: {
     flex: 1,
   },
   body: {
-    marginTop: 12,
+    // The trigger's own bottom padding contributes ~8 of the header→body gap.
+    marginTop: 4,
   },
 });

package/src/combobox.tsx

@@ -63,6 +63,14 @@ export interface ComboboxProps<T extends string = string, D = unknown> {
   emptyText?: string;
   accessibilityLabel?: string;
   disabled?: boolean;
+  /** Single-select only: show an in-input clear ✕ whenever the input has text
+   *  (a reflected selection or a typed query). Pressing it empties the input,
+   *  resets the search, and fires `onClear` so the consumer can deselect. */
+  clearable?: boolean;
+  /** Fired when the clear ✕ is pressed (the input + search are reset first). */
+  onClear?: () => void;
+  /** Accessible label for the clear ✕ (default "Clear"). */
+  clearLabel?: string;
   autoFocus?: boolean;
   testID?: string;
   style?: StyleProp<ViewStyle>;
@@ -106,6 +114,9 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     emptyText = "No results",
     accessibilityLabel = "Results",
     disabled = false,
+    clearable = false,
+    onClear,
+    clearLabel,
     autoFocus = false,
     testID,
     style,
@@ -262,6 +273,9 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
           testID={testID}
           icon={multi ? undefined : "search"}
           value={query}
+          clearable={!multi && clearable}
+          clearLabel={clearLabel}
+          onClear={onClear}
           onChangeText={handleChangeText}
           onFocus={() => {
             if (!disabled) setOpen(true);