@cdx-ui/components 0.0.1-beta.70 → 0.0.1-beta.72

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/lib/typescript/figma/QuickActionButton.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=QuickActionButton.figma.d.ts.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.70",
+  "version": "0.0.1-beta.72",
   "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/utils": "0.0.1-beta.70",
-    "@cdx-ui/primitives": "0.0.1-beta.70",
-    "@cdx-ui/icons": "0.0.1-beta.70"
+    "@cdx-ui/utils": "0.0.1-beta.72",
+    "@cdx-ui/icons": "0.0.1-beta.72",
+    "@cdx-ui/primitives": "0.0.1-beta.72"
   },
   "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/QuickActionButton/index.tsx

@@ -0,0 +1,161 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type PressableProps, type TextProps, type ViewProps } from 'react-native';
+import {
+  ButtonRoot,
+  dataAttributes,
+  mergeDataAttributes,
+  type IButtonProps,
+  useButtonContext,
+} from '@cdx-ui/primitives';
+import type { ForgeIcon } from '@cdx-ui/icons';
+import { cn } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import {
+  quickActionButtonGlyphVariants,
+  quickActionButtonIndicatorVariants,
+  quickActionButtonLabelVariants,
+  quickActionButtonRootVariants,
+  type QuickActionButtonVariantProps,
+} from './styles';
+
+// =============================================================================
+// ROOT
+// =============================================================================
+
+export interface QuickActionButtonProps extends PressableProps, IButtonProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const QuickActionButtonRoot = forwardRef<View, QuickActionButtonProps>(
+  ({ className, style, children, accessibilityRole = 'button', ...props }, ref) => (
+    <ButtonRoot
+      ref={ref}
+      accessibilityRole={accessibilityRole}
+      className={cn(quickActionButtonRootVariants(), className)}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'quick-action-button' }))}
+    >
+      {children}
+    </ButtonRoot>
+  ),
+);
+QuickActionButtonRoot.displayName = 'QuickActionButton';
+
+// =============================================================================
+// INDICATOR
+// Circular container. Auto-rendered by `QuickActionButton.Icon` in standard usage.
+// Exposed as a compound member for Code Connect parity and custom compositions.
+// =============================================================================
+
+export interface QuickActionButtonIndicatorProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const QuickActionButtonIndicator = forwardRef<View, QuickActionButtonIndicatorProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { hover, focus, active, disabled, focusVisible } = useButtonContext();
+    return (
+      <View
+        ref={ref}
+        className={cn(quickActionButtonIndicatorVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'quick-action-button-indicator',
+            hover,
+            focus,
+            active,
+            disabled,
+            focusVisible,
+          }),
+        )}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+QuickActionButtonIndicator.displayName = 'QuickActionButton.Indicator';
+
+// =============================================================================
+// ICON
+// Renders the Indicator circle + icon glyph as one convenient sub-component.
+// This is the primary way consumers add the icon to a QuickActionButton.
+// =============================================================================
+
+export interface QuickActionButtonIconProps {
+  /** Forge icon component to render inside the circular indicator. */
+  as: ForgeIcon;
+  /** Applied to the icon glyph, not the indicator circle. */
+  className?: IconProps['className'];
+  /** Applied to the indicator circle wrapper. */
+  indicatorClassName?: string;
+}
+
+function QuickActionButtonIcon({
+  as: IconComponent,
+  className,
+  indicatorClassName,
+}: QuickActionButtonIconProps) {
+  return (
+    <QuickActionButtonIndicator className={indicatorClassName}>
+      <Icon as={IconComponent} className={cn(quickActionButtonGlyphVariants(), className)} />
+    </QuickActionButtonIndicator>
+  );
+}
+QuickActionButtonIcon.displayName = 'QuickActionButton.Icon';
+
+// =============================================================================
+// LABEL
+// =============================================================================
+
+export interface QuickActionButtonLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const QuickActionButtonLabel = forwardRef<Text, QuickActionButtonLabelProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { disabled } = useButtonContext();
+    return (
+      <Text
+        ref={ref}
+        numberOfLines={2}
+        ellipsizeMode="tail"
+        className={cn(quickActionButtonLabelVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'quick-action-button-label', disabled }),
+        )}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
+QuickActionButtonLabel.displayName = 'QuickActionButton.Label';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type QuickActionButtonCompoundComponent = typeof QuickActionButtonRoot & {
+  Indicator: typeof QuickActionButtonIndicator;
+  Icon: typeof QuickActionButtonIcon;
+  Label: typeof QuickActionButtonLabel;
+};
+
+export const QuickActionButton = Object.assign(QuickActionButtonRoot, {
+  Indicator: QuickActionButtonIndicator,
+  Icon: QuickActionButtonIcon,
+  Label: QuickActionButtonLabel,
+}) as QuickActionButtonCompoundComponent;
+
+export type { QuickActionButtonVariantProps };