@cdx-ui/components 0.0.1-beta.92 → 0.0.1-beta.94

package/src/components/Badge/index.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import type { ForgeIcon } from '@cdx-ui/icons';
+import { Icon } from '../Icon';
+import {
+  badgeIconVariants,
+  badgeIndicatorVariants,
+  badgeLabelVariants,
+  badgeRootVariants,
+  type BadgeVariantProps,
+} from './styles';
+
+const INDICATOR_STYLE = { pointerEvents: 'none' as const };
+
+export interface BadgeProps extends ViewProps, BadgeVariantProps {
+  children?: ReactNode;
+  label?: ReactNode;
+  icon?: ForgeIcon;
+  className?: string;
+}
+
+const Badge = forwardRef<View, BadgeProps>(
+  (
+    {
+      children,
+      variant = 'default',
+      color = 'action',
+      placement = 'top-end',
+      overlap = 'rectangular',
+      label,
+      icon: IconComponent,
+      accessibilityLabel,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const isDecorative = variant === 'dot' || !accessibilityLabel;
+
+    const renderContent = () => {
+      if (variant === 'dot') return null;
+      if (IconComponent) {
+        return <Icon as={IconComponent} className={badgeIconVariants({ color })} />;
+      }
+      if (typeof label === 'string' || typeof label === 'number') {
+        return (
+          <Text
+            className={badgeLabelVariants({ color })}
+            {...dataAttributes({ slot: 'badge-label' })}
+          >
+            {label}
+          </Text>
+        );
+      }
+      return label ?? null;
+    };
+
+    const hasChildren = children != null;
+
+    return (
+      <View
+        ref={ref}
+        className={cn(badgeRootVariants({ standalone: !hasChildren }), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'badge' }))}
+      >
+        {children}
+        <View
+          className={cn(badgeIndicatorVariants({ variant, color, placement, overlap }))}
+          style={INDICATOR_STYLE}
+          accessible={!isDecorative}
+          accessibilityLabel={accessibilityLabel}
+          aria-hidden={isDecorative}
+          accessibilityElementsHidden={isDecorative}
+          importantForAccessibility={isDecorative ? 'no-hide-descendants' : 'auto'}
+          {...dataAttributes({ slot: 'badge-indicator' })}
+        >
+          {renderContent()}
+        </View>
+      </View>
+    );
+  },
+);
+Badge.displayName = 'Badge';
+
+export { Badge };
+export type { BadgeVariantProps } from './styles';

package/src/components/Badge/styles.ts

@@ -0,0 +1,136 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { TRANSITION_COLORS } from '../../styles/primitives';
+
+export const badgeRootVariants = cva(['relative self-start'], {
+  variants: {
+    standalone: {
+      true: 'inline-flex',
+      false: '',
+    },
+  },
+  defaultVariants: { standalone: false },
+});
+
+export const badgeIndicatorVariants = cva(
+  [
+    'absolute items-center justify-center overflow-hidden',
+    'rounded-[var(--border-radius-round)]',
+    'border border-surface-primary',
+    TRANSITION_COLORS,
+  ],
+  {
+    variants: {
+      variant: {
+        default: 'h-5 min-w-5 px-1',
+        dot: 'h-2 w-2 min-w-0 px-0',
+      },
+      color: {
+        action: 'bg-surface-action-strong',
+        danger: 'bg-surface-danger-strong',
+        warning: 'bg-surface-warning-strong',
+        success: 'bg-surface-success-strong',
+        info: 'bg-surface-info-strong',
+      },
+      placement: {
+        'top-start': 'top-0 ltr:left-0 rtl:right-0',
+        'top-end': 'top-0 ltr:right-0 rtl:left-0',
+        'bottom-start': 'bottom-0 ltr:left-0 rtl:right-0',
+        'bottom-end': 'bottom-0 ltr:right-0 rtl:left-0',
+      },
+      overlap: { circular: '', rectangular: '' },
+    },
+    compoundVariants: [
+      // Positioning model (mirrors MUI Badge): the indicator is always centered on an
+      // anchor point via a 50% self-translate, so it straddles that point regardless of
+      // its own size (dot vs default). `overlap` only moves the anchor point.
+      //
+      // Translate uses arbitrary `[50%]` (not the `1/2` fraction utility) because the
+      // fraction sugar is web-only in Uniwind — Avatar's badge uses `[N%]` translate on
+      // native, Toast gates `-translate-x-1/2` behind `web:`.
+      //
+      // rectangular: anchor at the host's true bounding-box corner.
+      {
+        placement: 'top-end',
+        overlap: 'rectangular',
+        className: 'ltr:translate-x-[50%] rtl:-translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'top-start',
+        overlap: 'rectangular',
+        className: 'ltr:-translate-x-[50%] rtl:translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-end',
+        overlap: 'rectangular',
+        className: 'ltr:translate-x-[50%] rtl:-translate-x-[50%] translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-start',
+        overlap: 'rectangular',
+        className: 'ltr:-translate-x-[50%] rtl:translate-x-[50%] translate-y-[50%]',
+      },
+      // circular: anchor inset 14% from each edge — the ~45° point of the inscribed
+      // circle ((1 - √2/2)/2 ≈ 14.6%, rounded to 14% per MUI) — so the indicator sits
+      // on the host's visible arc. The inset is host-relative (percent of the wrapper,
+      // which hugs the host), keeping it independent of the indicator's own size.
+      {
+        placement: 'top-end',
+        overlap: 'circular',
+        className:
+          'top-[14%] ltr:right-[14%] rtl:left-[14%] ltr:translate-x-[50%] rtl:-translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'top-start',
+        overlap: 'circular',
+        className:
+          'top-[14%] ltr:left-[14%] rtl:right-[14%] ltr:-translate-x-[50%] rtl:translate-x-[50%] -translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-end',
+        overlap: 'circular',
+        className:
+          'bottom-[14%] ltr:right-[14%] rtl:left-[14%] ltr:translate-x-[50%] rtl:-translate-x-[50%] translate-y-[50%]',
+      },
+      {
+        placement: 'bottom-start',
+        overlap: 'circular',
+        className:
+          'bottom-[14%] ltr:left-[14%] rtl:right-[14%] ltr:-translate-x-[50%] rtl:translate-x-[50%] translate-y-[50%]',
+      },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      color: 'action',
+      placement: 'top-end',
+      overlap: 'rectangular',
+    },
+  },
+);
+
+export const badgeLabelVariants = cva(['body-sm font-medium text-center'], {
+  variants: {
+    color: {
+      action: 'text-content-action-on-strong',
+      danger: 'text-content-danger-on-strong',
+      warning: 'text-content-warning-on-strong',
+      success: 'text-content-success-on-strong',
+      info: 'text-content-info-on-strong',
+    },
+  },
+  defaultVariants: { color: 'action' },
+});
+
+export const badgeIconVariants = cva(['size-3'], {
+  variants: {
+    color: {
+      action: 'text-content-action-on-strong',
+      danger: 'text-content-danger-on-strong',
+      warning: 'text-content-warning-on-strong',
+      success: 'text-content-success-on-strong',
+      info: 'text-content-info-on-strong',
+    },
+  },
+  defaultVariants: { color: 'action' },
+});
+
+export type BadgeVariantProps = VariantProps<typeof badgeIndicatorVariants>;

package/src/components/Textarea/index.tsx

@@ -46,7 +46,8 @@ export interface TextareaProps
   numberOfLines?: number;
   /**
    * Grow the field height to fit its content. Defaults to `false`.
-   * Web uses `field-sizing: content`; native measures via `onContentSizeChange`.
+   * Web uses `field-sizing: content`; native grows intrinsically (`scrollEnabled`
+   * off), using `onContentSizeChange` only to enable scrolling past `maxRows`.
    */
   autoGrow?: boolean;
   /** Caps `autoGrow` at this many rows, after which the field scrolls. */

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './Alert';
 export * from './AlertDialog';
 export * from './Avatar';
+export * from './Badge';
 export * from './BottomSheet';
 export * from './Box';
 export * from './Button';