@lotics/ui 3.5.0 → 3.6.0

package/package.json

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

package/src/callout.tsx

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { View, StyleSheet } from "react-native";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
@@ -8,12 +9,12 @@ 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;
+  /** Compose the body with `CalloutTitle`, `CalloutText`, and `CalloutActions`. */
+  children: ReactNode;
+  /** Test id on the container. */
+  testID?: string;
 }
 
 interface ToneStyle {
@@ -23,11 +24,16 @@ interface ToneStyle {
   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[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" },
+  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" },
 };
 
@@ -38,28 +44,54 @@ const TONES: Record<CalloutTone, ToneStyle> = {
  * 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", title, message, icon }: CalloutProps) {
+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}>
-        {title ? (
-          <Text size="sm" weight="semibold">
-            {title}
-          </Text>
-        ) : null}
-        <Text size="sm">{message}</Text>
-      </View>
+      <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({
@@ -72,4 +104,5 @@ const styles = StyleSheet.create({
     borderWidth: 1,
   },
   body: { flex: 1, gap: 2, paddingTop: 1 },
+  actions: { flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 6 },
 });