@bacon-pos/ui 0.10.0 → 0.11.0

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,132 @@
+import { type ReactNode } from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme, type Theme } from '../../theme';
+import { palette } from '../../theme/palette';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Text } from '../Text/Text';
+
+export type AlertStatus = 'info' | 'warning' | 'success' | 'destructive';
+
+export interface AlertProps {
+  /** Color/status. Defaults to `info`. */
+  status?: AlertStatus;
+  /** Optional bold title line above the message. */
+  title?: string;
+  /** Message text. Alternatively pass `children`. */
+  message?: string;
+  /** Message content (overrides `message`). */
+  children?: ReactNode;
+  /** Leading icon. Defaults to `info` (as in the design). */
+  icon?: IconName;
+  /** Hide the leading icon. */
+  showIcon?: boolean;
+  /** Vertical alignment of the icon vs the text. Defaults to `center`. */
+  iconAlign?: 'top' | 'center';
+  /** Trailing content (e.g. a link/button). */
+  action?: ReactNode;
+  /** Show a close (×) button and call this on press. */
+  onClose?: () => void;
+  /** Background override (for a custom status). */
+  backgroundColor?: string;
+  /** Foreground (text/icon) override. */
+  color?: string;
+  /** Fixed width. Omit to fill the parent. */
+  width?: number;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+function statusColors(theme: Theme, status: AlertStatus): { bg: string; fg: string } {
+  switch (status) {
+    case 'warning':
+      return { bg: theme.colors.feedback.warningSubtle, fg: palette.warning[600] };
+    case 'success':
+      return { bg: theme.colors.feedback.successSubtle, fg: theme.colors.feedback.success };
+    case 'destructive':
+      return { bg: theme.colors.feedback.errorSubtle, fg: theme.colors.feedback.error };
+    case 'info':
+    default:
+      return { bg: theme.colors.background.subtle, fg: palette.neutral[500] };
+  }
+}
+
+/**
+ * Alert — an inline banner in four statuses (info / warning / success /
+ * destructive), each a subtle tinted surface with a matching icon and text
+ * (Figma "Alert"). Fills its parent by default (text wraps to any width) or takes
+ * a fixed `width`. Supports an optional title, a trailing action and a close
+ * button; colors are overridable for custom statuses.
+ */
+export function Alert({
+  status = 'info',
+  title,
+  message,
+  children,
+  icon = 'info',
+  showIcon = true,
+  iconAlign = 'center',
+  action,
+  onClose,
+  backgroundColor,
+  color,
+  width,
+  style,
+}: AlertProps) {
+  const theme = useTheme();
+  const { bg, fg } = statusColors(theme, status);
+  const foreground = color ?? fg;
+  const background = backgroundColor ?? bg;
+
+  return (
+    <View
+      accessibilityRole="alert"
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          gap: 16,
+          paddingVertical: 20,
+          paddingHorizontal: 16,
+          borderRadius: theme.radii.lg,
+          backgroundColor: background,
+          ...(width != null ? { width } : { alignSelf: 'stretch' }),
+        },
+        style,
+      ]}
+    >
+      {showIcon ? (
+        <View style={{ width: 24, height: 24, flexShrink: 0, alignSelf: iconAlign === 'center' ? 'center' : 'flex-start' }}>
+          <Icon name={icon} size={24} color={foreground} />
+        </View>
+      ) : null}
+
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        {title ? (
+          <Text variant="bodyLarge" weight="semibold" color={foreground}>
+            {title}
+          </Text>
+        ) : null}
+        {children ?? (message ? (
+          <Text variant="bodyLarge" color={foreground}>
+            {message}
+          </Text>
+        ) : null)}
+      </View>
+
+      {action ? <View style={{ flexShrink: 0 }}>{action}</View> : null}
+
+      {onClose ? (
+        <Pressable
+          onPress={onClose}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+          style={{ width: 24, height: 24, flexShrink: 0, alignItems: 'center', justifyContent: 'center' }}
+        >
+          <Icon name="close" size={20} color={foreground} />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertStatus } from './Alert';

package/src/components/StatTile/StatTile.tsx

@@ -0,0 +1,98 @@
+import { type ReactNode } from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Text } from '../Text/Text';
+
+export interface StatTileProps {
+  /** Small label above the value. */
+  label: string;
+  /** The value — a string/number, or a node for custom formatting/color. */
+  value: ReactNode;
+  /** Optional leading icon. */
+  icon?: IconName;
+  /** Fixed width. Omit to fill the parent (works in a flex/grid row of tiles). */
+  width?: number;
+  /** Make the tile pressable. */
+  onPress?: () => void;
+  /** Tile background. Defaults to `background.subtle`. */
+  backgroundColor?: string;
+  /** Label color. Defaults to `secondary`. */
+  labelColor?: string;
+  /** Value color (when `value` is text). Defaults to `primary`. */
+  valueColor?: string;
+  /** Override the container style. */
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}
+
+/**
+ * StatTile — a compact KPI card: a small label over a prominent value (Figma
+ * "info card"). Fills its parent by default (so a row/grid of tiles sizes evenly)
+ * or takes a fixed `width`. `value` accepts a node for custom color/formatting.
+ */
+export function StatTile({
+  label,
+  value,
+  icon,
+  width,
+  onPress,
+  backgroundColor,
+  labelColor,
+  valueColor,
+  style,
+  accessibilityLabel,
+}: StatTileProps) {
+  const theme = useTheme();
+
+  const content = (
+    <>
+      {icon ? (
+        <View style={{ width: 24, height: 24, flexShrink: 0 }}>
+          <Icon name={icon} size={24} color="secondary" />
+        </View>
+      ) : null}
+      <View style={{ flex: 1, minWidth: 0, gap: 4 }}>
+        <Text variant="bodySmall" color={labelColor ?? 'secondary'} numberOfLines={1}>
+          {label}
+        </Text>
+        {typeof value === 'string' || typeof value === 'number' ? (
+          <Text variant="bodyLarge" weight="semibold" color={valueColor ?? 'primary'} numberOfLines={1}>
+            {String(value)}
+          </Text>
+        ) : (
+          value
+        )}
+      </View>
+    </>
+  );
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    padding: 12,
+    borderRadius: theme.radii.lg,
+    backgroundColor: backgroundColor ?? theme.colors.background.subtle,
+    ...(width != null ? { width } : { alignSelf: 'stretch' }),
+  };
+
+  if (!onPress) {
+    return (
+      <View accessibilityLabel={accessibilityLabel} style={[containerStyle, style]}>
+        {content}
+      </View>
+    );
+  }
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={({ pressed }) => [containerStyle, { opacity: pressed ? 0.96 : 1 }, style]}
+    >
+      {content}
+    </Pressable>
+  );
+}

package/src/components/StatTile/index.ts

@@ -0,0 +1,2 @@
+export { StatTile } from './StatTile';
+export type { StatTileProps } from './StatTile';

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Alert';
 export * from './Avatar';
 export * from './Badge';
 export * from './brand';
@@ -23,6 +24,7 @@ export * from './Radio';
 export * from './Select';
 export * from './Sidebar';
 export * from './Spinner';
+export * from './StatTile';
 export * from './Surface';
 export * from './Switch';
 export * from './Table';