@lotics/ui 3.4.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "3.4.0",
+  "version": "3.6.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,108 @@
+import { type ReactNode } from "react";
+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;
+  /** Override the per-tone default icon (any kit icon), or `null` to drop it. */
+  icon?: IconName | null;
+  /** Compose the body with `CalloutTitle`, `CalloutText`, and `CalloutActions`. */
+  children: ReactNode;
+  /** Test id on the container. */
+  testID?: string;
+}
+
+interface ToneStyle {
+  bg: string;
+  border: string;
+  icon: string;
+  glyph: IconName;
+}
+
+// Tint surface + SOFT hairline border + deep icon — matches the kit's toned-surface
+// convention (Badge: bg-50 / border-100 / deep accent). A heavier 200 border + 600
+// icon reads as a generic "library alert"; the soft 100 border lets the tint settle
+// into a calm panel with the deep-700 icon carrying the tone. (Neutral keeps a 200
+// border — zinc-100 is invisible on zinc-50.)
+const TONES: Record<CalloutTone, ToneStyle> = {
+  info: { bg: colors.blue[50], border: colors.blue[100], icon: colors.blue[700], glyph: "info" },
+  success: { bg: colors.emerald[50], border: colors.emerald[100], icon: colors.emerald[700], glyph: "circle-check" },
+  warning: { bg: colors.amber[50], border: colors.amber[100], icon: colors.amber[700], glyph: "triangle-alert" },
+  error: { bg: colors.red[50], border: colors.red[100], icon: colors.red[700], 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.
+ *
+ * COMPOUND — compose the body from the sub-components (like `Card`); this lets a
+ * callout carry rich content and inline actions, not just a string message:
+ *
+ * ```tsx
+ * <Callout tone="warning">
+ *   <CalloutTitle>Phí chưa nhập</CalloutTitle>
+ *   <CalloutText>Nhập trước khi xuất chứng từ, hoặc đặt = 0.</CalloutText>
+ *   <CalloutActions>
+ *     <Button title="Đặt = 0" onPress={fill} />
+ *   </CalloutActions>
+ * </Callout>
+ * ```
+ */
+export function Callout({ tone = "info", icon, children, testID }: 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 }]}
+      testID={testID}
+    >
+      {glyph ? <Icon name={glyph} size={18} color={t.icon} /> : null}
+      <View style={styles.body}>{children}</View>
+    </View>
+  );
+}
+
+/** Bold heading at the top of a `Callout`. */
+export function CalloutTitle({ children }: { children: ReactNode }) {
+  return (
+    <Text size="sm" weight="semibold">
+      {children}
+    </Text>
+  );
+}
+
+/** Message body of a `Callout` — default text color for legibility on the tint. */
+export function CalloutText({ children }: { children: ReactNode }) {
+  return <Text size="sm">{children}</Text>;
+}
+
+/** A row of actions (e.g. buttons) at the foot of a `Callout`. */
+export function CalloutActions({ children }: { children: ReactNode }) {
+  return <View style={styles.actions}>{children}</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 },
+  actions: { flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 6 },
+});

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,