@lotics/ui 3.4.0 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -81,6 +81,7 @@
     "./action_menu": "./src/action_menu.tsx",
     "./card_select_item": "./src/card_select_item.tsx",
     "./badge": "./src/badge.tsx",
+    "./callout": "./src/callout.tsx",
     "./divider": "./src/divider.tsx",
     "./spacer": "./src/spacer.tsx",
     "./index.css": "./src/index.css",

package/src/callout.tsx

@@ -0,0 +1,75 @@
+import { View, StyleSheet } from "react-native";
+import { Text } from "./text";
+import { Icon, type IconName } from "./icon";
+import { colors } from "./colors";
+
+export type CalloutTone = "info" | "success" | "warning" | "error" | "neutral";
+
+interface CalloutProps {
+  /** Sets the accent (icon + tint + border) and the default icon. Default "info". */
+  tone?: CalloutTone;
+  /** Optional bold heading above the message. */
+  title?: string;
+  /** The message body — kept in the default text color for legibility on the tint. */
+  message: string;
+  /** Override the per-tone default icon (any kit icon), or `null` to drop it. */
+  icon?: IconName | null;
+}
+
+interface ToneStyle {
+  bg: string;
+  border: string;
+  icon: string;
+  glyph: IconName;
+}
+
+const TONES: Record<CalloutTone, ToneStyle> = {
+  info: { bg: colors.blue[50], border: colors.blue[200], icon: colors.blue[600], glyph: "info" },
+  success: { bg: colors.emerald[50], border: colors.emerald[200], icon: colors.emerald[600], glyph: "circle-check" },
+  warning: { bg: colors.amber[50], border: colors.amber[200], icon: colors.amber[600], glyph: "triangle-alert" },
+  error: { bg: colors.red[50], border: colors.red[200], icon: colors.red[600], glyph: "circle-alert" },
+  neutral: { bg: colors.zinc[50], border: colors.zinc[200], icon: colors.zinc[500], glyph: "info" },
+};
+
+/**
+ * An inline callout — a tinted, bordered box carrying a short status message
+ * (info / success / warning / error / neutral). Use it inline in a flow: form
+ * feedback, a heads-up, an actionable empty state. For a blocking, dismissible
+ * prompt use `Alert`; for a one-word status use `Badge`. The tone is carried by
+ * the icon + tint + border (never color alone — the icon and text stay legible),
+ * so it reads on a glance and meets contrast on the light tint.
+ */
+export function Callout({ tone = "info", title, message, icon }: CalloutProps) {
+  const t = TONES[tone];
+  const glyph = icon === null ? null : (icon ?? t.glyph);
+  return (
+    <View
+      accessibilityRole={tone === "error" || tone === "warning" ? "alert" : undefined}
+      style={[styles.container, { backgroundColor: t.bg, borderColor: t.border }]}
+    >
+      {glyph ? <Icon name={glyph} size={18} color={t.icon} /> : null}
+      <View style={styles.body}>
+        {title ? (
+          <Text size="sm" weight="semibold">
+            {title}
+          </Text>
+        ) : null}
+        <Text size="sm">{message}</Text>
+      </View>
+    </View>
+  );
+}
+
+export type { CalloutProps };
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 10,
+    padding: 12,
+    borderRadius: 10,
+    borderWidth: 1,
+  },
+  body: { flex: 1, gap: 2, paddingTop: 1 },
+});

package/src/filter_pill.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ReactNode, useState } from "react";
 import { StyleSheet } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
@@ -23,8 +23,11 @@ export interface FilterPillProps {
   clearLabel?: string;
   /** The editor revealed on press — a premium primitive (`RangeSlider`,
    *  `Counter`, `PickerMenu` multi) or any composed control. `FilterPill` owns
-   *  the pill + popover chrome; the consumer owns the value and applies it. */
-  children: ReactNode;
+   *  the pill + popover chrome; the consumer owns the value and applies it.
+   *  Pass a render function to receive `close` — the one editor that closes on
+   *  action is single-select (`<PickerMenu>` → close on pick); range/counter/
+   *  multi stay open and dismiss on outside-press, so they pass a plain node. */
+  children: ReactNode | ((api: { close: () => void }) => ReactNode);
   side?: PopoverSide;
   align?: PopoverAlign;
   /** Optional controlled popover state — for an editor that closes on Save. */
@@ -71,8 +74,18 @@ export function FilterPill(props: FilterPillProps) {
   // custom footer — a valued, non-clearable pill ("Target: 20") keeps its chevron.
   const showClear = active && !!onClear && !footer;
 
+  // Own the open state so the editor can close itself via the render-prop
+  // `close`, while still honoring a controlled `open`/`onOpenChange` from the
+  // parent (the Save-footer VALUE-pill case).
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = open ?? internalOpen;
+  const setOpen = (next: boolean) => {
+    if (open === undefined) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
   return (
-    <Popover side={side} align={align} open={open} onOpenChange={onOpenChange}>
+    <Popover side={side} align={align} open={isOpen} onOpenChange={setOpen}>
       <PopoverTrigger>
         <PillButton onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
           <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-700"} numberOfLines={1}>
@@ -82,7 +95,7 @@ export function FilterPill(props: FilterPillProps) {
         </PillButton>
       </PopoverTrigger>
       <PopoverContent style={styles.body} disableBodyScroll>
-        {children}
+        {typeof children === "function" ? children({ close: () => setOpen(false) }) : children}
         {footer ? (
           <PopoverFooter>{footer}</PopoverFooter>
         ) : showClear ? (

package/src/icon.tsx

@@ -51,6 +51,7 @@ import ChevronsDownUp from "lucide-react-native/dist/esm/icons/chevrons-down-up"
 import ChevronsUpDown from "lucide-react-native/dist/esm/icons/chevrons-up-down";
 import CircleAlert from "lucide-react-native/dist/esm/icons/circle-alert";
 import CircleCheck from "lucide-react-native/dist/esm/icons/circle-check";
+import TriangleAlert from "lucide-react-native/dist/esm/icons/triangle-alert";
 import Clock from "lucide-react-native/dist/esm/icons/clock";
 import Code from "lucide-react-native/dist/esm/icons/code";
 import CodeXml from "lucide-react-native/dist/esm/icons/code-xml";
@@ -242,6 +243,7 @@ const iconComponents = {
   "chevrons-up-down": ChevronsUpDown,
   "circle-alert": CircleAlert,
   "circle-check": CircleCheck,
+  "triangle-alert": TriangleAlert,
   clock: Clock,
   code: Code,
   "code-xml": CodeXml,