[];
+
+ return (
+
+ {buttons.map((button, index) => {
+ const isFirst = index === 0;
+ const isLast = index === buttons.length - 1;
+ const position = isFirst ? 'left' : isLast ? 'right' : 'standalone';
+ const isPaired = buttons.length > 1;
+
+ return React.cloneElement(button, {
+ key: index,
+ position,
+ isPaired,
+ pairedVariant: isFirst ? variant : getOppositeVariant(variant),
+ variant: isFirst ? variant : undefined, // Let the button determine its own variant if paired
+ } as any);
+ })}
+
+ );
+};
+
+function getOppositeVariant(variant: ButtonVariant): ButtonVariant {
+ switch (variant) {
+ case 'primary':
+ return 'secondary';
+ case 'secondary':
+ return 'primary';
+ case 'neutral':
+ return 'neutral';
+ default:
+ return 'primary';
+ }
+}
+
+export default ButtonGroup;
diff --git a/packages/components/src/react-web/Card.tsx b/packages/components/src/react-web/Card.tsx
new file mode 100644
index 000000000..12316cc29
--- /dev/null
+++ b/packages/components/src/react-web/Card.tsx
@@ -0,0 +1,102 @@
+/**
+ * ODE Card Component - React Web
+ *
+ * Modern minimalist card with subtle elevation and clean styling
+ */
+
+import React from 'react';
+import { CardProps } from '../shared/types';
+import tokensJson from '@ode/tokens/dist/json/tokens.json';
+
+const tokens = tokensJson as any;
+
+const getColor = (colorPath: string): string => {
+ const parts = colorPath.split('.');
+ let value: any = tokens;
+ for (const part of parts) {
+ value = value?.[part];
+ }
+ return value?.value || value || '#000000';
+};
+
+const Card: React.FC = ({
+ children,
+ title,
+ subtitle,
+ elevated = true,
+ className = '',
+ style,
+ onPress,
+ testID,
+}) => {
+ const borderRadius = getColor('border.radius.lg');
+ const shadow = elevated ? getColor('shadow.sm') : 'none';
+
+ const cardStyle: React.CSSProperties = {
+ backgroundColor: getColor('color.neutral.white'),
+ borderRadius,
+ padding: getColor('spacing.6'),
+ boxShadow: shadow,
+ border: `1px solid ${getColor('color.neutral.200')}`,
+ transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
+ cursor: onPress ? 'pointer' : 'default',
+ ...style,
+ };
+
+ const titleStyle: React.CSSProperties = {
+ fontSize: getColor('font.size.xl'),
+ fontWeight: getColor('font.weight.semibold'),
+ color: getColor('color.neutral.900'),
+ marginBottom: subtitle ? getColor('spacing.2') : getColor('spacing.4'),
+ fontFamily: getColor('font.family.sans'),
+ lineHeight: getColor('font.lineHeight.tight'),
+ };
+
+ const subtitleStyle: React.CSSProperties = {
+ fontSize: getColor('font.size.sm'),
+ fontWeight: getColor('font.weight.regular'),
+ color: getColor('color.neutral.600'),
+ marginBottom: getColor('spacing.4'),
+ fontFamily: getColor('font.family.sans'),
+ lineHeight: getColor('font.lineHeight.normal'),
+ };
+
+ const handleClick = () => {
+ if (onPress) {
+ onPress();
+ }
+ };
+
+ return (
+ <>
+
+ {
+ if (onPress && (e.key === 'Enter' || e.key === ' ')) {
+ e.preventDefault();
+ onPress();
+ }
+ }}
+ >
+ {title &&
{title}
}
+ {subtitle &&
{subtitle}
}
+ {children}
+
+ {label && (
+
+ )}
+
setIsFocused(true)}
+ onBlur={() => setIsFocused(false)}
+ placeholder={placeholder}
+ disabled={disabled}
+ required={required}
+ style={inputStyle}
+ aria-invalid={!!error}
+ aria-describedby={error ? `${testID}-error` : undefined}
+ />
+ {error && (
+
+ {error}
+
+ )}
+