panelui-native 0.2.0 → 0.5.1

package/lib/typescript/src/providers/panel-ui-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-ui-provider.d.ts","sourceRoot":"","sources":["../../../../src/providers/panel-ui-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,UAAiB,GAClB,EAAE,oBAAoB,+BAWtB"}
+{"version":3,"file":"panel-ui-provider.d.ts","sourceRoot":"","sources":["../../../../src/providers/panel-ui-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,UAAiB,GAClB,EAAE,oBAAoB,+BAatB"}

package/lib/typescript/src/theme/use-theme.d.ts

@@ -1,12 +1,72 @@
-export type ThemeName = 'light' | 'dark' | 'system';
+/** Themes shipped in `panelui-native/theme.css`. */
+export type PanelTheme = 'light' | 'dark' | 'moon' | 'moon-dark' | 'grass' | 'grass-dark';
+export type ThemeName = PanelTheme | 'system';
+/** Light/dark mode within a theme family. */
+export type ThemeMode = 'light' | 'dark';
+/** A theme family — one look, in its light and dark form. */
+export interface PanelThemeFamily {
+    /** Stable id, e.g. `'moon'`. */
+    id: string;
+    /** Short display name, for a theme picker. */
+    name: string;
+    light: PanelTheme;
+    dark: PanelTheme;
+    /** Representative colour for a swatch, as `[light, dark]`. */
+    swatch: [string, string];
+}
+/**
+ * The theme families PanelUI ships. Each sets its own palette *and* its own
+ * radius scale, so switching family changes the shape of the UI as well as
+ * its colour — Panel is the Coss default, Moon is sharp and monochrome,
+ * Grass is soft and green.
+ *
+ * Everything beyond `panel` must be registered in your metro config, or
+ * `setTheme` throws "it was not registered":
+ *
+ * ```js
+ * withUniwindConfig(config, {
+ *   cssEntryFile: './global.css',
+ *   extraThemes: ['moon', 'moon-dark', 'grass', 'grass-dark'],
+ * });
+ * ```
+ */
+export declare const PANEL_THEMES: readonly PanelThemeFamily[];
+/** Every concrete theme name, in registration order. */
+export declare const PANEL_THEME_NAMES: readonly PanelTheme[];
+/** The names to pass as `extraThemes` in your metro config. */
+export declare const PANEL_EXTRA_THEMES: readonly string[];
 /**
  * Reactive access to the current Uniwind theme plus a setter.
  * Theme changes are applied natively by Uniwind without re-rendering the tree.
  */
 export declare function useTheme(): {
-    /** Currently resolved theme ('light' or 'dark'). */
-    theme: string;
-    /** Switch theme: 'light', 'dark', or 'system' (follows device). */
+    /** The active theme name, e.g. `'dark'` or `'moon-dark'`. */
+    theme: PanelTheme;
+    /** Switch theme by name, or `'system'` to follow the device. */
     setTheme: (name: ThemeName) => void;
 };
+/**
+ * Theme family and light/dark mode as two separate axes — what a picker like
+ * "choose a brand, then toggle the sun" actually needs.
+ *
+ * Named themes are not adaptive in Uniwind, so each brand ships as a
+ * light/dark pair. Toggling the mode keeps the current family, so a user in
+ * Moon dark lands in Moon light rather than the default theme.
+ *
+ * ```tsx
+ * const { family, mode, setFamily, toggleMode } = useThemeMode();
+ * ```
+ */
+export declare function useThemeMode(): {
+    /** The active theme family. */
+    family: PanelThemeFamily;
+    /** `'light'` or `'dark'` within that family. */
+    mode: ThemeMode;
+    /** Switch brand, staying in the current light/dark mode. */
+    setFamily: (id: string) => void;
+    /** Set the mode, staying in the current family. */
+    setMode: (next: ThemeMode) => void;
+    /** Flip light ↔ dark within the current family. */
+    toggleMode: () => void;
+};
 //# sourceMappingURL=use-theme.d.ts.map

package/lib/typescript/src/theme/use-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/use-theme.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD;;;GAGG;AACH,wBAAgB,QAAQ;IAIpB,oDAAoD;;IAEpD,mEAAmE;qBAClD,SAAS;EAE7B"}
+{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../../../src/theme/use-theme.ts"],"names":[],"mappings":"AAEA,oDAAoD;AACpD,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,MAAM,GACN,MAAM,GACN,WAAW,GACX,OAAO,GACP,YAAY,CAAC;AAEjB,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAE9C,6CAA6C;AAC7C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,6DAA6D;AAC7D,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,8DAA8D;IAC9D,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,gBAAgB,EAsBnD,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,iBAAiB,EAAE,SAAS,UAAU,EAElD,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,kBAAkB,EAAE,SAAS,MAAM,EAE/C,CAAC;AASF;;;GAGG;AACH,wBAAgB,QAAQ;IAIpB,6DAA6D;WAC7C,UAAU;IAC1B,gEAAgE;qBAC/C,SAAS;EAE7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY;IAMxB,+BAA+B;;IAE/B,gDAAgD;;IAEhD,4DAA4D;oBAC5C,MAAM;IAItB,mDAAmD;oBACnC,SAAS;IACzB,mDAAmD;;EAGtD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-native",
-  "version": "0.2.0",
+  "version": "0.5.1",
   "description": "High-performance React Native UI components for Expo. Coss UI design language, powered by Uniwind (Tailwind v4) and Reanimated.",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",
@@ -19,6 +19,7 @@
     "src",
     "lib",
     "theme.css",
+    "README.md",
     "!**/__tests__",
     "!**/*.tsbuildinfo"
   ],
@@ -32,19 +33,36 @@
     "react-native",
     "expo",
     "ui",
+    "ui-library",
+    "ui-components",
     "components",
+    "component-library",
     "tailwind",
+    "tailwindcss",
     "uniwind",
+    "nativewind",
+    "reanimated",
     "design-system",
-    "shadcn"
+    "shadcn",
+    "dark-mode",
+    "theming",
+    "accessibility",
+    "typescript",
+    "ios",
+    "android",
+    "mobile"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Khalidabdi1/PanelUI.git"
+    "url": "git+https://github.com/panel-ui/PanelUI.git",
+    "directory": "packages/panelui"
+  },
+  "bugs": {
+    "url": "https://github.com/panel-ui/PanelUI/issues"
   },
   "author": "Khalid Abdi",
   "license": "MIT",
-  "homepage": "https://github.com/Khalidabdi1/PanelUI#readme",
+  "homepage": "https://github.com/panel-ui/PanelUI#readme",
   "peerDependencies": {
     "react": "*",
     "react-native": "*",

package/src/components/accordion/index.tsx

@@ -0,0 +1,344 @@
+/**
+ * Accordion — collapsible sections.
+ *
+ * Adapted from: heroui-inc/heroui-native src/components/accordion/
+ * (the Item / Trigger / Indicator / Content anatomy, single vs multiple
+ * selection, the rotating chevron indicator, and layout-transition expand).
+ *
+ * Upstream ships `default` and `surface`; the extra variants here follow the
+ * same slot structure.
+ */
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { Pressable, View, type Text as RNText, type ViewProps } from 'react-native';
+import Animated, {
+  LinearTransition,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { ChevronDownIcon } from '../../icons';
+import { Text, type TextProps } from '../../primitives/text';
+
+export type AccordionVariant =
+  | 'default'
+  | 'surface'
+  | 'separated'
+  | 'bordered'
+  | 'ghost';
+
+export type AccordionSelectionMode = 'single' | 'multiple';
+
+const accordionVariants = tv({
+  slots: {
+    root: 'w-full flex-col overflow-hidden',
+    separator: 'h-px bg-border',
+    item: 'flex-col overflow-hidden',
+    trigger: 'flex-row items-center justify-between gap-4 py-4',
+    title: 'flex-1 text-base font-medium text-foreground',
+    indicator: 'items-center justify-center',
+    content: 'pb-4',
+    contentText: 'text-sm text-muted-foreground',
+  },
+  variants: {
+    variant: {
+      default: { trigger: 'px-1', content: 'px-1' },
+      surface: {
+        root: 'rounded-2xl border border-border bg-surface',
+        separator: 'mx-4',
+        trigger: 'px-4',
+        content: 'px-4',
+      },
+      separated: {
+        root: 'gap-2.5 overflow-visible',
+        separator: 'hidden',
+        item: 'rounded-xl border border-border bg-card',
+        trigger: 'px-4',
+        content: 'px-4',
+      },
+      bordered: {
+        separator: 'hidden',
+        item: 'mb-2 rounded-xl border border-border',
+        trigger: 'px-4',
+        content: 'px-4',
+      },
+      ghost: {
+        separator: 'hidden',
+        trigger: 'px-0',
+        content: 'px-0',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+interface AccordionContextValue {
+  expanded: string[];
+  toggle: (value: string) => void;
+  variant: AccordionVariant;
+}
+
+interface AccordionItemContextValue {
+  value: string;
+  isExpanded: boolean;
+  isDisabled: boolean;
+}
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+const AccordionItemContext = createContext<AccordionItemContextValue | null>(null);
+
+function useAccordion(component: string): AccordionContextValue {
+  const context = useContext(AccordionContext);
+  if (!context) throw new Error(`${component} must be used within an <Accordion>`);
+  return context;
+}
+
+function useAccordionItem(component: string): AccordionItemContextValue {
+  const context = useContext(AccordionItemContext);
+  if (!context) throw new Error(`${component} must be used within an <Accordion.Item>`);
+  return context;
+}
+
+export interface AccordionProps extends ViewProps {
+  className?: string;
+  variant?: AccordionVariant;
+  /** `single` collapses the open item when another opens. */
+  selectionMode?: AccordionSelectionMode;
+  /** Expanded item value(s), controlled. */
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  /** Hide the hairlines drawn between items. */
+  hideSeparator?: boolean;
+  children?: ReactNode;
+}
+
+const toArray = (value: string | string[] | undefined): string[] =>
+  value === undefined ? [] : Array.isArray(value) ? value : [value];
+
+const AccordionRoot = forwardRef<View, AccordionProps>(
+  (
+    {
+      className,
+      variant = 'default',
+      selectionMode = 'single',
+      value,
+      defaultValue,
+      onValueChange,
+      hideSeparator = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [internal, setInternal] = useState<string[]>(() => toArray(defaultValue));
+    const isControlled = value !== undefined;
+    const expanded = isControlled ? toArray(value) : internal;
+
+    const toggle = useCallback(
+      (itemValue: string) => {
+        const isOpen = expanded.includes(itemValue);
+        const next =
+          selectionMode === 'single'
+            ? isOpen
+              ? []
+              : [itemValue]
+            : isOpen
+              ? expanded.filter((entry) => entry !== itemValue)
+              : [...expanded, itemValue];
+
+        if (!isControlled) setInternal(next);
+        // Hand back the shape the caller gave us.
+        onValueChange?.(selectionMode === 'single' ? (next[0] ?? '') : next);
+      },
+      [expanded, selectionMode, isControlled, onValueChange]
+    );
+
+    const context = useMemo(
+      () => ({ expanded, toggle, variant }),
+      [expanded, toggle, variant]
+    );
+
+    const { root, separator } = accordionVariants({ variant });
+    const items = Children.toArray(children).filter(isValidElement);
+
+    return (
+      <AccordionContext.Provider value={context}>
+        <Animated.View
+          ref={ref}
+          layout={LinearTransition.duration(200)}
+          className={root({ className })}
+          {...props}
+        >
+          {items.map((child, index) => (
+            <View key={child.key ?? index}>
+              {child}
+              {!hideSeparator && index < items.length - 1 ? (
+                <View className={separator()} />
+              ) : null}
+            </View>
+          ))}
+        </Animated.View>
+      </AccordionContext.Provider>
+    );
+  }
+);
+AccordionRoot.displayName = 'Accordion';
+
+export interface AccordionItemProps extends ViewProps {
+  className?: string;
+  /** Identifies this item in the accordion's value. */
+  value: string;
+  isDisabled?: boolean;
+  children?: ReactNode;
+}
+
+const AccordionItem = forwardRef<View, AccordionItemProps>(
+  ({ className, value, isDisabled = false, children, ...props }, ref) => {
+    const { expanded, variant } = useAccordion('Accordion.Item');
+    const isExpanded = expanded.includes(value);
+    const { item } = accordionVariants({ variant });
+
+    const context = useMemo(
+      () => ({ value, isExpanded, isDisabled }),
+      [value, isExpanded, isDisabled]
+    );
+
+    return (
+      <AccordionItemContext.Provider value={context}>
+        <Animated.View
+          ref={ref}
+          layout={LinearTransition.duration(200)}
+          className={item({ className })}
+          {...props}
+        >
+          {children}
+        </Animated.View>
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+AccordionItem.displayName = 'Accordion.Item';
+
+export interface AccordionTriggerProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/** The pressable header row. Bare strings are wrapped in the title style. */
+const AccordionTrigger = forwardRef<View, AccordionTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    const { toggle, variant } = useAccordion('Accordion.Trigger');
+    const { value, isExpanded, isDisabled } = useAccordionItem('Accordion.Trigger');
+    const { trigger, title } = accordionVariants({ variant });
+
+    return (
+      <Pressable
+        ref={ref}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: isExpanded, disabled: isDisabled }}
+        disabled={isDisabled}
+        onPress={() => toggle(value)}
+        className={trigger({ className })}
+        {...props}
+      >
+        {typeof children === 'string' ? (
+          <Text className={title()}>{children}</Text>
+        ) : (
+          children
+        )}
+      </Pressable>
+    );
+  }
+);
+AccordionTrigger.displayName = 'Accordion.Trigger';
+
+export interface AccordionIndicatorProps extends ViewProps {
+  className?: string;
+  /** Replaces the default chevron. */
+  children?: ReactNode;
+}
+
+/** Chevron that rotates 180° while the item is open. */
+const AccordionIndicator = forwardRef<View, AccordionIndicatorProps>(
+  ({ className, children, ...props }, ref) => {
+    const { variant } = useAccordion('Accordion.Indicator');
+    const { isExpanded } = useAccordionItem('Accordion.Indicator');
+    const { indicator } = accordionVariants({ variant });
+
+    const rotation = useDerivedValue(
+      () => withTiming(isExpanded ? 180 : 0, { duration: 200 }),
+      [isExpanded]
+    );
+    const style = useAnimatedStyle(() => ({
+      transform: [{ rotate: `${rotation.value}deg` }],
+    }));
+
+    return (
+      <Animated.View style={style}>
+        <View ref={ref} className={indicator({ className })} {...props}>
+          {children ?? <ChevronDownIcon size={18} />}
+        </View>
+      </Animated.View>
+    );
+  }
+);
+AccordionIndicator.displayName = 'Accordion.Indicator';
+
+export interface AccordionContentProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * The collapsible body. Unmounts when closed, per the repo's convention for
+ * conditionally shown content — the layout transition on the item animates
+ * the height change.
+ */
+const AccordionContent = forwardRef<View, AccordionContentProps>(
+  ({ className, children, ...props }, ref) => {
+    const { variant } = useAccordion('Accordion.Content');
+    const { isExpanded } = useAccordionItem('Accordion.Content');
+    const { content, contentText } = accordionVariants({ variant });
+
+    if (!isExpanded) return null;
+
+    return (
+      <View ref={ref} className={content({ className })} {...props}>
+        {typeof children === 'string' ? (
+          <Text className={contentText()}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  }
+);
+AccordionContent.displayName = 'Accordion.Content';
+
+const AccordionTitle = forwardRef<RNText, TextProps>(({ className, ...props }, ref) => {
+  const { variant } = useAccordion('Accordion.Title');
+  const { title } = accordionVariants({ variant });
+  return <Text ref={ref} className={title({ className })} {...props} />;
+});
+AccordionTitle.displayName = 'Accordion.Title';
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Title: AccordionTitle,
+  Indicator: AccordionIndicator,
+  Content: AccordionContent,
+});

package/src/components/alert/index.tsx

@@ -1,31 +1,50 @@
+/**
+ * Alert — a status message with an optional leading status icon.
+ *
+ * Adapted from: heroui-inc/heroui-native src/components/alert/alert.tsx
+ * (Indicator / Content / Title / Description anatomy, status-driven icon and
+ * title colour), restyled with Coss UI tokens.
+ *
+ * The `variant` prop name is kept from PanelUI v0.2 rather than renamed to
+ * HeroUI's `status`, so existing code keeps working.
+ */
 import { createContext, forwardRef, useContext, type ReactNode } from 'react';
-import { View, type ViewProps } from 'react-native';
+import { View, type Text as RNText, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
 import { cn } from '../../utils/cn';
 import { Text, type TextProps } from '../../primitives/text';
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon } from '../../icons';
 
 const alertVariants = tv({
   slots: {
-    root: 'w-full gap-0.5 rounded-xl border px-3.5 py-3',
-    title: 'text-sm font-medium text-card-foreground',
+    root: 'w-full flex-row gap-3 rounded-xl border px-3.5 py-3',
+    indicator: 'pt-px',
+    content: 'flex-1 gap-0.5',
+    title: 'text-sm font-medium',
     description: 'text-sm text-muted-foreground',
   },
   variants: {
     variant: {
       default: {
         root: 'border-border bg-surface',
+        title: 'text-card-foreground',
       },
       info: {
-        root: 'border-info/32 bg-info/10 dark:bg-info/[0.06]',
+        root: 'border-info/32 bg-info-soft',
+        title: 'text-info-foreground',
       },
       success: {
-        root: 'border-success/32 bg-success/10 dark:bg-success/[0.06]',
+        root: 'border-success/32 bg-success-soft',
+        title: 'text-success-foreground',
       },
       warning: {
-        root: 'border-warning/32 bg-warning/10 dark:bg-warning/[0.06]',
+        root: 'border-warning/32 bg-warning-soft',
+        title: 'text-warning-foreground',
       },
       destructive: {
-        root: 'border-destructive/32 bg-destructive/10 dark:bg-destructive/[0.06]',
+        root: 'border-destructive/32 bg-destructive-soft',
+        title: 'text-destructive-foreground',
       },
     },
   },
@@ -34,20 +53,42 @@ const alertVariants = tv({
   },
 });
 
-type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
 
 const AlertContext = createContext<AlertVariant>('default');
 
+/** CSS variable each variant's indicator icon takes its colour from. */
+const INDICATOR_COLOR_VAR: Record<AlertVariant, string> = {
+  default: '--color-muted-foreground',
+  info: '--color-info-foreground',
+  success: '--color-success-foreground',
+  warning: '--color-warning-foreground',
+  destructive: '--color-destructive-foreground',
+};
+
+const INDICATOR_ICON: Record<AlertVariant, typeof InfoIcon> = {
+  default: InfoIcon,
+  info: InfoIcon,
+  success: CheckCircleIcon,
+  warning: AlertTriangleIcon,
+  destructive: AlertTriangleIcon,
+};
+
 export interface AlertProps extends ViewProps, VariantProps<typeof alertVariants> {
   className?: string;
-  /** Optional leading icon rendered before the content. */
+  /**
+   * Leading element rendered before the content.
+   *
+   * @deprecated Prefer `<Alert.Indicator>`, which picks a status icon for you.
+   * Still honoured so v0.2 call sites keep rendering.
+   */
   icon?: ReactNode;
   children?: ReactNode;
 }
 
 const AlertRoot = forwardRef<View, AlertProps>(
   ({ className, variant = 'default', icon, children, ...props }, ref) => {
-    const { root } = alertVariants({ variant });
+    const { root, indicator, content } = alertVariants({ variant });
 
     return (
       <AlertContext.Provider value={variant}>
@@ -58,10 +99,10 @@ const AlertRoot = forwardRef<View, AlertProps>(
           {...props}
         >
           {icon ? (
-            <View className="flex-row items-start gap-3">
-              <View className="mt-0.5">{icon}</View>
-              <View className="flex-1 gap-1">{children}</View>
-            </View>
+            <>
+              <View className={indicator()}>{icon}</View>
+              <View className={content()}>{children}</View>
+            </>
           ) : (
             children
           )}
@@ -72,7 +113,48 @@ const AlertRoot = forwardRef<View, AlertProps>(
 );
 AlertRoot.displayName = 'Alert';
 
-const AlertTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+export interface AlertIndicatorProps extends ViewProps {
+  className?: string;
+  /** Overrides the size/colour of the default status icon. */
+  iconProps?: { size?: number; color?: string };
+  /** Replaces the default status icon entirely. */
+  children?: ReactNode;
+}
+
+/**
+ * Leading status icon. Resolves both the icon and its colour from the parent
+ * Alert's variant, so it follows the active theme.
+ */
+const AlertIndicator = forwardRef<View, AlertIndicatorProps>(
+  ({ className, iconProps, children, ...props }, ref) => {
+    const variant = useContext(AlertContext);
+    const { indicator } = alertVariants({ variant });
+    const themeColor = useCSSVariable(INDICATOR_COLOR_VAR[variant]);
+    const Icon = INDICATOR_ICON[variant];
+
+    const color =
+      iconProps?.color ?? (typeof themeColor === 'string' ? themeColor : undefined);
+
+    return (
+      <View ref={ref} className={indicator({ className })} {...props}>
+        {children ?? <Icon size={iconProps?.size ?? 18} color={color} />}
+      </View>
+    );
+  }
+);
+AlertIndicator.displayName = 'Alert.Indicator';
+
+/** Flex-1 wrapper for Alert.Title and Alert.Description. */
+const AlertContent = forwardRef<View, ViewProps & { className?: string }>(
+  ({ className, ...props }, ref) => {
+    const variant = useContext(AlertContext);
+    const { content } = alertVariants({ variant });
+    return <View ref={ref} className={content({ className })} {...props} />;
+  }
+);
+AlertContent.displayName = 'Alert.Content';
+
+const AlertTitle = forwardRef<RNText, TextProps>(
   ({ className, ...props }, ref) => {
     const variant = useContext(AlertContext);
     const { title } = alertVariants({ variant });
@@ -81,7 +163,7 @@ const AlertTitle = forwardRef<React.ElementRef<typeof Text>, TextProps>(
 );
 AlertTitle.displayName = 'Alert.Title';
 
-const AlertDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
+const AlertDescription = forwardRef<RNText, TextProps>(
   ({ className, ...props }, ref) => {
     const variant = useContext(AlertContext);
     const { description } = alertVariants({ variant });
@@ -91,6 +173,10 @@ const AlertDescription = forwardRef<React.ElementRef<typeof Text>, TextProps>(
 AlertDescription.displayName = 'Alert.Description';
 
 export const Alert = Object.assign(AlertRoot, {
+  /** @optional Status icon rendered as the leading visual element. */
+  Indicator: AlertIndicator,
+  /** @optional Wrapper for title and description. */
+  Content: AlertContent,
   Title: AlertTitle,
   Description: AlertDescription,
 });