@cdx-ui/components 0.0.1-beta.71 → 0.0.1-beta.73

package/lib/typescript/components/Button/styles.d.ts

@@ -1,19 +1,19 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const buttonRootVariants: (props?: ({
     variant?: "solid" | "outline" | "ghost" | null | undefined;
-    color?: "action" | "danger" | "warning" | "success" | "info" | null | undefined;
+    color?: "danger" | "warning" | "success" | "info" | "action" | null | undefined;
     size?: "small" | "default" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const buttonTextVariants: (props?: ({
     variant?: "solid" | "outline" | "ghost" | null | undefined;
-    color?: "action" | "danger" | "warning" | "success" | "info" | null | undefined;
+    color?: "danger" | "warning" | "success" | "info" | "action" | null | undefined;
     size?: "small" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const buttonSpinnerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const buttonSpinnerColorVariants: (props?: ({
     variant?: "solid" | "outline" | "ghost" | null | undefined;
-    color?: "action" | "danger" | "warning" | "success" | "info" | null | undefined;
+    color?: "danger" | "warning" | "success" | "info" | "action" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const buttonGroupVariants: (props?: ({
     flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
@@ -21,7 +21,7 @@ export declare const buttonGroupVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const buttonIconVariants: (props?: ({
     variant?: "solid" | "outline" | "ghost" | null | undefined;
-    color?: "action" | "danger" | "warning" | "success" | "info" | null | undefined;
+    color?: "danger" | "warning" | "success" | "info" | "action" | null | undefined;
     size?: "small" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonVariantProps = VariantProps<typeof buttonRootVariants>;

package/lib/typescript/components/Chip/styles.d.ts

@@ -1,17 +1,17 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const chipRootVariants: (props?: ({
     variant?: "outline" | "tint" | null | undefined;
-    color?: "action" | "danger" | "warning" | "success" | "info" | "default" | null | undefined;
+    color?: "danger" | "warning" | "success" | "info" | "default" | "action" | null | undefined;
     size?: "small" | "default" | "xsmall" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const chipLabelVariants: (props?: ({
     variant?: "outline" | "tint" | null | undefined;
-    color?: "action" | "danger" | "warning" | "success" | "info" | "default" | null | undefined;
+    color?: "danger" | "warning" | "success" | "info" | "default" | "action" | null | undefined;
     size?: "small" | "default" | "xsmall" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const chipIconVariants: (props?: ({
     size?: "small" | "default" | "xsmall" | null | undefined;
-    color?: "action" | "danger" | "warning" | "success" | "info" | "default" | null | undefined;
+    color?: "danger" | "warning" | "success" | "info" | "default" | "action" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const chipAvatarVariants: (props?: ({
     size?: "small" | "default" | "xsmall" | null | undefined;

package/lib/typescript/components/IconButton/styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const iconButtonRootVariants: (props?: ({
     variant?: "solid" | "ghost" | "tint" | null | undefined;
-    color?: "action" | "danger" | "neutral" | null | undefined;
+    color?: "danger" | "action" | "neutral" | null | undefined;
     size?: "small" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const iconButtonGlyphVariants: (props?: ({
@@ -9,7 +9,7 @@ export declare const iconButtonGlyphVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const iconButtonIconColorVariants: (props?: ({
     variant?: "solid" | "ghost" | "tint" | null | undefined;
-    color?: "action" | "danger" | "neutral" | null | undefined;
+    color?: "danger" | "action" | "neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Tile/styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const tileGroupVariants: (props?: ({
     direction?: "row" | "column" | null | undefined;
-    spacing?: "default" | "none" | null | undefined;
+    spacing?: "none" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type TileGroupVariantProps = VariantProps<typeof tileGroupVariants>;
 export declare const tileRootVariants: (props?: ({

package/lib/typescript/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Alert';
 export * from './AlertDialog';
 export * from './Avatar';
 export * from './BottomSheet';

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/lib/typescript/figma/Alert.Button.figma.d.ts

@@ -0,0 +1,11 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    metadata: {
+        nestable: boolean;
+    };
+    example: figma.ResultSection[] | figma.TemplateStringResult | null;
+};
+export default _default;
+//# sourceMappingURL=Alert.Button.figma.d.ts.map

package/lib/typescript/figma/Alert.Button.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.Button.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Alert.Button.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AAa1B,wBAYE"}

package/lib/typescript/figma/Alert.Close.figma.d.ts

@@ -0,0 +1,11 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    metadata: {
+        nestable: boolean;
+    };
+    example: figma.ResultSection[] | figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Alert.Close.figma.d.ts.map

package/lib/typescript/figma/Alert.Close.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.Close.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Alert.Close.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AAQ1B,wBAUE"}

package/lib/typescript/figma/Alert.Description.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Alert.Description.figma.d.ts.map

package/lib/typescript/figma/Alert.Description.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.Description.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Alert.Description.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAM1B,wBAIE"}

package/lib/typescript/figma/Alert.Title.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Alert.Title.figma.d.ts.map

package/lib/typescript/figma/Alert.Title.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.Title.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Alert.Title.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAM1B,wBAIE"}

package/lib/typescript/figma/Alert.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Alert.figma.d.ts.map

package/lib/typescript/figma/Alert.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Alert.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA4B1B,wBAiBE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.71",
+  "version": "0.0.1-beta.73",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -67,9 +67,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.6.1",
-    "@cdx-ui/primitives": "0.0.1-beta.71",
-    "@cdx-ui/utils": "0.0.1-beta.71",
-    "@cdx-ui/icons": "0.0.1-beta.71"
+    "@cdx-ui/primitives": "0.0.1-beta.73",
+    "@cdx-ui/utils": "0.0.1-beta.73",
+    "@cdx-ui/icons": "0.0.1-beta.73"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/Alert/index.tsx

@@ -0,0 +1,318 @@
+import React, { forwardRef, useMemo, type ReactNode } from 'react';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import type { ForgeIcon } from '@cdx-ui/icons';
+import { CheckCircle, EmergencyHome, Info, Warning } from '@cdx-ui/icons';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import {
+  alertActionsVariants,
+  alertBodyVariants,
+  alertDescriptionVariants,
+  alertIconVariants,
+  alertRootVariants,
+  alertTextVariants,
+  alertTitleVariants,
+  type AlertSeverity,
+  type AlertVariantProps,
+} from './styles';
+
+// =============================================================================
+// CONTEXT
+// =============================================================================
+
+const SCOPE = 'ALERT';
+
+interface AlertContextValue {
+  severity: AlertSeverity;
+}
+
+const useAlertStyleContext = (): AlertContextValue => {
+  const ctx = useStyleContext(SCOPE) as { severity?: AlertSeverity };
+  return { severity: ctx?.severity ?? 'info' };
+};
+
+// Severity → default icon mapping
+const SEVERITY_ICONS: Record<AlertSeverity, ForgeIcon> = {
+  danger: EmergencyHome,
+  warning: Warning,
+  success: CheckCircle,
+  info: Info,
+};
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+export interface AlertProps extends ViewProps, AlertVariantProps {
+  /**
+   * Replace the root element with the consumer's child element via `Slot`.
+   * When `true`, children are rendered as-is (no automatic icon/text/actions
+   * layout splitting). Severity context is still provided so sub-components
+   * receive the correct styles.
+   */
+  asChild?: boolean;
+  /** Severity level that controls background colour, icon, and live-region urgency. */
+  severity?: AlertSeverity;
+  className?: string;
+  /**
+   * Sub-components (`Alert.Icon`, `Alert.Title`, `Alert.Description`,
+   * `Alert.Actions`) must be rendered as **direct** children — wrapping them
+   * in HOCs or `memo()` will break the automatic layout splitting.
+   */
+  children?: ReactNode;
+}
+
+const AlertRoot = forwardRef<View, AlertProps>(
+  ({ asChild, severity = 'info', className, style, children, ...props }, ref) => {
+    const isAssertive = severity === 'danger' || severity === 'warning';
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { severity } }), [parent, severity]);
+
+    const rootClassName = cn(alertRootVariants({ severity }), className);
+    const role = isAssertive ? 'alert' : 'status';
+    const liveRegion = isAssertive ? 'assertive' : 'polite';
+    const dataProps = mergeDataAttributes(props, dataAttributes({ slot: 'alert' }));
+
+    if (asChild) {
+      return (
+        <ParentContext.Provider value={ctx}>
+          <Slot
+            ref={ref}
+            className={rootClassName}
+            style={style}
+            role={role}
+            accessibilityLiveRegion={liveRegion}
+            {...props}
+            {...dataProps}
+          >
+            {children}
+          </Slot>
+        </ParentContext.Provider>
+      );
+    }
+
+    // Split children into three regions:
+    //   1. Alert.Icon    — rendered at inline-start (left)
+    //   2. Alert.Actions — rendered at inline-end (right), beside the text
+    //   3. Everything else (Title, Description) — text column, flex-1
+    //
+    // Layout: [Icon]  [flex-1 flex-row: [text flex-1]  [Actions]]
+    const childArray = React.Children.toArray(children);
+    const iconChild = childArray.find(
+      (child) =>
+        React.isValidElement(child) && (child as React.ReactElement).type === AlertIconComponent,
+    );
+    const actionsChild = childArray.find(
+      (child) => React.isValidElement(child) && (child as React.ReactElement).type === AlertActions,
+    );
+    const textChildren = childArray.filter(
+      (child) =>
+        !React.isValidElement(child) ||
+        ((child as React.ReactElement).type !== AlertIconComponent &&
+          (child as React.ReactElement).type !== AlertActions),
+    );
+    const hasBody = textChildren.length > 0 || !!actionsChild;
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <View
+          ref={ref}
+          className={rootClassName}
+          style={style}
+          role={role}
+          accessibilityLiveRegion={liveRegion}
+          {...props}
+          {...dataProps}
+        >
+          {iconChild}
+          {hasBody ? (
+            <View className={alertBodyVariants()}>
+              {textChildren.length > 0 ? (
+                <View className={alertTextVariants()}>{textChildren}</View>
+              ) : null}
+              {actionsChild}
+            </View>
+          ) : null}
+        </View>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+AlertRoot.displayName = 'Alert';
+
+// =============================================================================
+// ICON
+// =============================================================================
+
+export interface AlertIconProps extends Omit<IconProps, 'as'> {
+  asChild?: boolean;
+  /**
+   * Override the auto-rendered severity icon. Omit to use the default icon for
+   * the current severity (EmergencyHome, Warning, CheckCircle, or Info).
+   * Not required when `asChild` is set.
+   */
+  as?: ForgeIcon;
+}
+
+const AlertIconComponent = forwardRef<View, AlertIconProps>(
+  ({ asChild, as: asOverride, className, style, ...props }, ref) => {
+    const { severity } = useAlertStyleContext();
+    const computedClassName = cn(alertIconVariants({ severity }), className);
+
+    if (asChild) {
+      return (
+        <Slot
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'alert-icon' }))}
+        />
+      );
+    }
+
+    return (
+      <Icon
+        as={asOverride ?? SEVERITY_ICONS[severity]}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'alert-icon' }))}
+      />
+    );
+  },
+);
+
+AlertIconComponent.displayName = 'Alert.Icon';
+
+// =============================================================================
+// TITLE
+// =============================================================================
+
+export interface AlertTitleProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const AlertTitle = forwardRef<Text, AlertTitleProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { severity } = useAlertStyleContext();
+    const computedClassName = cn(alertTitleVariants({ severity }), className);
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'alert-title' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+AlertTitle.displayName = 'Alert.Title';
+
+// =============================================================================
+// DESCRIPTION
+// =============================================================================
+
+export interface AlertDescriptionProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const AlertDescription = forwardRef<Text, AlertDescriptionProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { severity } = useAlertStyleContext();
+    const computedClassName = cn(alertDescriptionVariants({ severity }), className);
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'alert-description' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+AlertDescription.displayName = 'Alert.Description';
+
+// =============================================================================
+// ACTIONS
+// =============================================================================
+
+export interface AlertActionsProps extends ViewProps {
+  /**
+   * Replace the wrapper element with the consumer's child via `Slot`.
+   * **Note:** when `true`, automatic `color={severity}` injection on
+   * direct `Button`/`IconButton` children is bypassed — the consumer
+   * must set `color` explicitly.
+   */
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const AlertActions = forwardRef<View, AlertActionsProps>(
+  ({ asChild, className, style, children, ...props }, ref) => {
+    const { severity } = useAlertStyleContext();
+    const computedClassName = cn(alertActionsVariants(), className);
+    const Comp = asChild ? Slot : View;
+
+    // Auto-inject color={severity} on direct Button / IconButton children unless
+    // the consumer already provides a color prop.
+    const injectedChildren = React.Children.map(children, (child) => {
+      if (!React.isValidElement<{ color?: unknown }>(child)) return child;
+      if ('color' in child.props) return child;
+      return React.cloneElement(child, { color: severity });
+    });
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'alert-actions' }))}
+      >
+        {asChild ? children : injectedChildren}
+      </Comp>
+    );
+  },
+);
+
+AlertActions.displayName = 'Alert.Actions';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type AlertCompoundComponent = typeof AlertRoot & {
+  Icon: typeof AlertIconComponent;
+  Title: typeof AlertTitle;
+  Description: typeof AlertDescription;
+  Actions: typeof AlertActions;
+};
+
+export const Alert = Object.assign(AlertRoot, {
+  Icon: AlertIconComponent,
+  Title: AlertTitle,
+  Description: AlertDescription,
+  Actions: AlertActions,
+}) as AlertCompoundComponent;
+
+export type { AlertVariantProps, AlertSeverity };

package/src/components/Alert/styles.ts

@@ -0,0 +1,88 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+// ── Severity type ────────────────────────────────────────────────────────────
+
+export type AlertSeverity = 'danger' | 'warning' | 'success' | 'info';
+
+// ── Root ─────────────────────────────────────────────────────────────────────
+
+export const alertRootVariants = cva(
+  ['flex-row items-start', 'gap-2 px-3', 'rounded-[var(--border-radius-default)]'],
+  {
+    variants: {
+      severity: {
+        danger: 'bg-surface-danger-subtle',
+        warning: 'bg-surface-warning-subtle',
+        success: 'bg-surface-success-subtle',
+        info: 'bg-surface-info-subtle',
+      },
+    },
+    defaultVariants: {
+      severity: 'info',
+    },
+  },
+);
+
+// ── Icon ─────────────────────────────────────────────────────────────────────
+
+export const alertIconVariants = cva(['size-5 shrink-0 mt-3'], {
+  variants: {
+    severity: {
+      danger: 'text-content-danger-on-subtle',
+      warning: 'text-content-warning-on-subtle',
+      success: 'text-content-success-on-subtle',
+      info: 'text-content-info-on-subtle',
+    },
+  },
+  defaultVariants: {
+    severity: 'info',
+  },
+});
+
+// ── Body (internal row: text area + trailing actions) ────────────────────────
+
+export const alertBodyVariants = cva(['flex-1 flex-row items-start gap-2 min-w-0']);
+
+// ── Text (internal flex-col for title + description) ─────────────────────────
+
+export const alertTextVariants = cva(['flex-1 flex-col gap-1 min-w-0 mt-3 mb-3']);
+
+// ── Title ────────────────────────────────────────────────────────────────────
+
+export const alertTitleVariants = cva(['body-md font-semibold'], {
+  variants: {
+    severity: {
+      danger: 'text-content-danger-on-subtle',
+      warning: 'text-content-warning-on-subtle',
+      success: 'text-content-success-on-subtle',
+      info: 'text-content-info-on-subtle',
+    },
+  },
+  defaultVariants: {
+    severity: 'info',
+  },
+});
+
+// ── Description ──────────────────────────────────────────────────────────────
+
+export const alertDescriptionVariants = cva(['body-md'], {
+  variants: {
+    severity: {
+      danger: 'text-content-danger-on-subtle',
+      warning: 'text-content-warning-on-subtle',
+      success: 'text-content-success-on-subtle',
+      info: 'text-content-info-on-subtle',
+    },
+  },
+  defaultVariants: {
+    severity: 'info',
+  },
+});
+
+// ── Actions ──────────────────────────────────────────────────────────────────
+
+export const alertActionsVariants = cva(['shrink-0 flex-row items-center gap-1.5 mt-1.5 mb-1.5']);
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export type AlertVariantProps = VariantProps<typeof alertRootVariants>;

package/src/components/CLAUDE.md

@@ -113,7 +113,7 @@ Where: **styled layer.** Pure styling hint with no behavior or a11y semantics
 - `asChild` re-uses `Slot` from `@cdx-ui/primitives` — no new primitive needed for sub-slots
 - `buttonIconVariants` / `buttonSpinnerVariants` carry `data-[icon=inline-start]:me-1.5 data-[icon=inline-end]:ms-1.5` so leading/trailing padding works without per-call overrides
 
-`packages/components/src/components/IconButton/index.tsx` shows the second axis of Standard 1: a styled-layer slot (the glyph) is the place that opts into `useButtonContext()` when its styling reacts to interaction state. The pattern is the same as the primitive Root — call `useButtonContext()`, spread `dataAttributes({ ... })` — only it lives in the styled layer.
+`packages/components/src/components/QuickActionButton/index.tsx` shows the second axis of Standard 1: a styled-layer sub-slot (the Indicator) opts into `useButtonContext()` when its styling reacts to interaction state. The pattern is the same as the primitive Root — call `useButtonContext()`, spread `mergeDataAttributes(props, dataAttributes({ ... }))` — only it lives in the styled layer.
 
 ### Pattern summary
 

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Alert';
 export * from './AlertDialog';
 export * from './Avatar';
 export * from './BottomSheet';