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

package/src/components/QuickActionButton/styles.ts

@@ -0,0 +1,42 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+
+export const quickActionButtonRootVariants = cva([
+  'flex flex-col items-center gap-2',
+  'min-w-[60px] max-w-20',
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  DISABLED_CURSOR,
+]);
+
+export const quickActionButtonIndicatorVariants = cva([
+  'flex items-center justify-center shrink-0',
+  'h-[60px] w-[60px] min-h-[60px] min-w-[60px] p-2',
+  'rounded-[var(--border-radius-round)]',
+  'border border-stroke-secondary',
+  'bg-surface-primary',
+  'overflow-hidden',
+  TRANSITION_COLORS,
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+  Platform.select({
+    default: 'data-[active=true]:bg-surface-primary-active',
+    web: [
+      'data-[hover=true]:bg-surface-primary-hover',
+      'data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
+      'web:data-[focus-visible=true]:ring-2',
+      'web:data-[focus-visible=true]:ring-[var(--color-stroke-ring)]',
+      'web:data-[focus-visible=true]:ring-offset-2',
+    ].join(' '),
+  }),
+]);
+
+export const quickActionButtonGlyphVariants = cva(['size-6', 'text-content-action']);
+
+export const quickActionButtonLabelVariants = cva([
+  'body-sm font-medium',
+  'text-content-primary text-center',
+  'w-full min-w-0 max-w-20 self-center',
+  'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+]);
+
+export type QuickActionButtonVariantProps = VariantProps<typeof quickActionButtonRootVariants>;

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './Alert';
 export * from './AlertDialog';
 export * from './Avatar';
 export * from './BottomSheet';
@@ -28,3 +29,4 @@ export * from './Heading';
 export * from './Text';
 export * from './Icon';
 export * from './IconButton';
+export * from './QuickActionButton';