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

package/src/components/Chip/styles.ts

@@ -1,52 +1,254 @@
+import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+
+const chipInteractiveRoot = [
+  TRANSITION_COLORS,
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  DISABLED_CURSOR,
+  Platform.select({
+    web: [
+      'outline-none',
+      'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+    ].join(' '),
+    default: '',
+  }),
+];
 
 export const chipRootVariants = cva(
-  ['flex-row items-center justify-center rounded-full px-2 py-1 gap-1.5 self-start'],
+  ['flex-row items-center justify-center self-start overflow-hidden', ...chipInteractiveRoot],
   {
     variants: {
+      variant: {
+        tint: [],
+        outline: ['bg-transparent', 'border'],
+      },
       color: {
-        default: 'bg-surface-neutral-tint',
-        error: 'bg-surface-danger-tint',
-        info: 'bg-surface-info-tint',
-        success: 'bg-surface-success-tint',
-        warning: 'bg-surface-warning-tint',
+        default: [],
+        action: [],
+        danger: [],
+        warning: [],
+        success: [],
+        info: [],
+      },
+      size: {
+        default: 'h-8 max-h-8 min-h-8 gap-1.5 px-3 rounded-lg',
+        small: 'h-6 max-h-6 min-h-6 gap-1 px-1.5 rounded-md',
+        xsmall: 'h-4 max-h-4 min-h-4 gap-0.5 px-1 rounded-sm',
       },
     },
+    compoundVariants: [
+      // ── tint × color ────────────────────────────────────────────────────
+      {
+        variant: 'tint',
+        color: 'default',
+        className: [
+          'bg-surface-neutral-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-neutral-tint-active',
+            web: 'data-[hover=true]:bg-surface-neutral-tint-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'action',
+        className: [
+          'bg-surface-action-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-tint-active',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'danger',
+        className: [
+          'bg-surface-danger-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-tint-active',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'warning',
+        className: [
+          'bg-surface-warning-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-warning-tint-active',
+            web: 'data-[hover=true]:bg-surface-warning-tint-hover data-[active=true]:data-[hover=true]:bg-surface-warning-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'success',
+        className: [
+          'bg-surface-success-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-success-tint-active',
+            web: 'data-[hover=true]:bg-surface-success-tint-hover data-[active=true]:data-[hover=true]:bg-surface-success-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'tint',
+        color: 'info',
+        className: [
+          'bg-surface-info-tint',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-info-tint-active',
+            web: 'data-[hover=true]:bg-surface-info-tint-hover data-[active=true]:data-[hover=true]:bg-surface-info-tint-active',
+          }),
+        ],
+      },
+
+      // ── outline × color ───────────────────────────────────────────────────
+      {
+        variant: 'outline',
+        color: 'default',
+        className: [
+          'border-stroke-primary',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-neutral-tint',
+            web: 'data-[hover=true]:bg-surface-neutral-tint-hover data-[active=true]:data-[hover=true]:bg-surface-neutral-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'action',
+        className: [
+          'border-stroke-action',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-action-tint',
+            web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'danger',
+        className: [
+          'border-stroke-danger',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-danger-tint',
+            web: 'data-[hover=true]:bg-surface-danger-tint-hover data-[active=true]:data-[hover=true]:bg-surface-danger-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'warning',
+        className: [
+          'border-stroke-warning',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-warning-tint',
+            web: 'data-[hover=true]:bg-surface-warning-tint-hover data-[active=true]:data-[hover=true]:bg-surface-warning-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'success',
+        className: [
+          'border-stroke-success',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-success-tint',
+            web: 'data-[hover=true]:bg-surface-success-tint-hover data-[active=true]:data-[hover=true]:bg-surface-success-tint-active',
+          }),
+        ],
+      },
+      {
+        variant: 'outline',
+        color: 'info',
+        className: [
+          'border-stroke-info',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-info-tint',
+            web: 'data-[hover=true]:bg-surface-info-tint-hover data-[active=true]:data-[hover=true]:bg-surface-info-tint-active',
+          }),
+        ],
+      },
+    ],
     defaultVariants: {
+      variant: 'tint',
       color: 'default',
+      size: 'default',
     },
   },
 );
 
-// TODO: letter-spacing values (tracking-wider) are not working on web, but the font-mono-medium is.
-export const chipLabelVariants = cva(['label-sm font-mono-medium'], {
+export const chipLabelVariants = cva(['font-sans-medium'], {
   variants: {
+    variant: {
+      tint: 'text-content-primary',
+      outline: 'text-content-primary',
+    },
     color: {
-      default: 'text-content-primary',
-      error: 'text-content-primary',
-      info: 'text-content-primary',
-      success: 'text-content-primary',
-      warning: 'text-content-primary',
+      default: [],
+      action: [],
+      danger: [],
+      warning: [],
+      success: [],
+      info: [],
+    },
+    size: {
+      default: 'body-md',
+      small: 'body-sm',
+      xsmall: 'body-xs',
     },
   },
+  compoundVariants: [
+    { variant: 'outline', color: 'action', className: 'text-content-action' },
+    { variant: 'outline', color: 'danger', className: 'text-content-danger' },
+    { variant: 'outline', color: 'warning', className: 'text-content-warning' },
+    { variant: 'outline', color: 'success', className: 'text-content-success' },
+    { variant: 'outline', color: 'info', className: 'text-content-info' },
+  ],
   defaultVariants: {
+    variant: 'tint',
     color: 'default',
+    size: 'default',
   },
 });
 
-export const chipIconVariants = cva(['size-4'], {
+export const chipIconVariants = cva(['shrink-0'], {
   variants: {
+    size: {
+      default: 'size-5 data-[icon=inline-start]:-ms-1.5 data-[icon=inline-end]:-me-1.5',
+      small: 'size-4 data-[icon=inline-start]:-ms-0.5 data-[icon=inline-end]:-me-0.5',
+      xsmall: 'size-2.5 data-[icon=inline-start]:-ms-px data-[icon=inline-end]:-me-px',
+    },
     color: {
       default: 'text-content-primary',
-      error: 'text-content-danger',
-      info: 'text-content-info',
-      success: 'text-content-success',
+      action: 'text-content-action',
+      danger: 'text-content-danger',
       warning: 'text-content-warning',
+      success: 'text-content-success',
+      info: 'text-content-info',
     },
   },
   defaultVariants: {
+    size: 'default',
     color: 'default',
   },
 });
 
-export type ChipVariants = VariantProps<typeof chipRootVariants>;
+export const chipAvatarVariants = cva(['shrink-0 rounded-full overflow-hidden'], {
+  variants: {
+    size: {
+      default: 'size-5 -ms-1.5',
+      small: 'size-4 -ms-0.5',
+      xsmall: 'size-2.5 -ms-px',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export type ChipVariantProps = VariantProps<typeof chipRootVariants>;