@cdx-ui/components 0.0.1-alpha.26 → 0.0.1-alpha.27

package/src/components/IconButton/styles.ts

@@ -0,0 +1,131 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BORDER_DEFAULT,
+  DISABLED_CURSOR,
+  DISABLED_OPACITY,
+  RADIUS_FULL,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
+import {
+  type SharedButtonSemanticColor,
+  sharedGhostSurfaceCompounds,
+  sharedOutlineGhostForegroundTextCompounds,
+} from '../Button/buttonSharedVariants';
+
+function actionOnlyCompounds<T extends { color: SharedButtonSemanticColor }>(
+  compounds: T[],
+): Omit<T, 'color'>[] {
+  return compounds
+    .filter((c) => c.color === 'action')
+    .map((c) => {
+      const { color, ...rest } = c;
+      void color;
+      return rest;
+    });
+}
+
+/** Dark-mode hover/active surface for ghost (solid uses a separate compound with border). */
+const iconButtonDarkGhostSurfaceCompounds = actionOnlyCompounds(sharedGhostSurfaceCompounds).map(
+  (c) => ({
+    variant: 'ghost' as const,
+    ...c,
+  }),
+);
+
+const iconButtonForegroundTextCompounds = actionOnlyCompounds(
+  sharedOutlineGhostForegroundTextCompounds,
+).map((c) => ({
+  variant: ['solid', 'ghost'] as ('solid' | 'ghost')[],
+  ...c,
+}));
+
+export const iconButtonRootVariants = cva(
+  [
+    'flex items-center justify-center',
+    RADIUS_FULL,
+    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+    TRANSITION_COLORS,
+    DISABLED_OPACITY,
+    DISABLED_CURSOR,
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-slate-400/50 web:data-[focus-visible=true]:ring-offset-2',
+  ],
+  {
+    variants: {
+      variant: {
+        /** Same surface as ghost, with a light gray border (aligned with Button `outline`). */
+        solid: [
+          'bg-transparent',
+          `border ${COLOR_BORDER_DEFAULT}`,
+          'data-[hover=true]:bg-slate-50',
+          'data-[active=true]:bg-slate-100',
+        ],
+        ghost: [
+          'bg-transparent',
+          'data-[hover=true]:bg-slate-50',
+          'data-[active=true]:bg-slate-100',
+        ],
+      },
+      size: {
+        default: 'h-10 w-10 min-w-10 shrink-0 p-0',
+        small: 'h-8 w-8 min-w-8 shrink-0 p-0',
+      },
+      mode: {
+        light: [],
+        dark: [],
+      },
+    },
+    compoundVariants: [
+      ...iconButtonDarkGhostSurfaceCompounds,
+      {
+        variant: 'solid',
+        mode: 'dark',
+        className: [
+          'border-slate-700',
+          Platform.select({
+            default: 'data-[active=true]:bg-slate-700',
+            web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
+          }),
+        ],
+      },
+    ],
+    defaultVariants: {
+      variant: 'solid',
+      size: 'default',
+      mode: 'light',
+    },
+  },
+);
+
+export const iconButtonGlyphVariants = cva([], {
+  variants: {
+    size: {
+      default: 'size-5',
+      small: 'size-4',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+/** Icon fill aligned with Button outline/ghost action label colors (solid matches ghost). */
+export const iconButtonIconColorVariants = cva([], {
+  variants: {
+    variant: {
+      solid: [],
+      ghost: [],
+    },
+    mode: {
+      light: [],
+      dark: [],
+    },
+  },
+  compoundVariants: [...iconButtonForegroundTextCompounds],
+  defaultVariants: {
+    variant: 'solid',
+    mode: 'light',
+  },
+});
+
+export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;

package/src/components/index.ts

@@ -17,3 +17,4 @@ export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';
 export * from './Icon';
+export * from './IconButton';