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

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/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';