@cdx-ui/components 0.0.1-alpha.4 → 0.0.1-alpha.40

package/src/components/Card/index.tsx

@@ -0,0 +1,115 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  cardContentVariants,
+  cardFooterVariants,
+  cardHeaderVariants,
+  cardRootVariants,
+} from './styles';
+
+// =============================================================================
+// STYLED ROOT COMPONENT
+// =============================================================================
+
+export interface CardProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardRoot = forwardRef<View, CardProps>(({ className, children, style, ...props }, ref) => {
+  const computedClassName = cn(cardRootVariants(), className);
+
+  return (
+    <View ref={ref} className={computedClassName} style={style} {...props}>
+      {children}
+    </View>
+  );
+});
+
+CardRoot.displayName = 'Card';
+
+// =============================================================================
+// STYLED HEADER COMPONENT
+// =============================================================================
+
+export interface CardHeaderProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardHeader = forwardRef<View, CardHeaderProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(cardHeaderVariants(), className);
+
+    return (
+      <View ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+CardHeader.displayName = 'Card.Header';
+
+// =============================================================================
+// STYLED CONTENT COMPONENT
+// =============================================================================
+
+export interface CardContentProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardContent = forwardRef<View, CardContentProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(cardContentVariants(), className);
+
+    return (
+      <View ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+CardContent.displayName = 'Card.Content';
+
+// =============================================================================
+// STYLED FOOTER COMPONENT
+// =============================================================================
+
+export interface CardFooterProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CardFooter = forwardRef<View, CardFooterProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(cardFooterVariants(), className);
+
+    return (
+      <View ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </View>
+    );
+  },
+);
+
+CardFooter.displayName = 'Card.Footer';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type CardCompoundComponent = typeof CardRoot & {
+  Header: typeof CardHeader;
+  Content: typeof CardContent;
+  Footer: typeof CardFooter;
+};
+
+export const Card = CardRoot as CardCompoundComponent;
+
+Card.Header = CardHeader;
+Card.Content = CardContent;
+Card.Footer = CardFooter;

package/src/components/Card/styles.ts

@@ -0,0 +1,41 @@
+import { cva } from 'class-variance-authority';
+import {
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+  COLOR_TEXT_PRIMARY,
+  RADIUS_SM,
+  SHADOW_SM,
+} from '../../styles/primitives';
+
+// ── Root ────────────────────────────────────────────────────
+
+export const cardRootVariants = cva([
+  COLOR_BG_PRIMARY,
+  `border ${COLOR_BORDER_DEFAULT}`,
+  RADIUS_SM,
+  SHADOW_SM,
+  'overflow-hidden',
+]);
+
+// ── Header ──────────────────────────────────────────────────
+
+export const cardHeaderVariants = cva([
+  'flex-row items-center justify-between p-4 border-b border-t-8',
+  COLOR_BORDER_DEFAULT,
+]);
+
+// ── Title ───────────────────────────────────────────────────
+
+export const cardTitleVariants = cva(['flex-1']);
+
+// ── Content ─────────────────────────────────────────────────
+
+export const cardContentVariants = cva([COLOR_TEXT_PRIMARY, 'p-4']);
+
+// ── Footer ──────────────────────────────────────────────────
+
+export const cardFooterVariants = cva([
+  'p-4 border-t',
+  COLOR_BORDER_DEFAULT,
+  'flex-row items-center gap-2',
+]);

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,207 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
+import { Check, CheckIndeterminateSmall } from '@cdx-ui/icons';
+import { createCheckbox, type ICheckboxProps } from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, IconProps } from '../Icon';
+import {
+  type CheckboxVariantProps,
+  checkboxGroupVariants,
+  checkboxIconVariants,
+  checkboxIndicatorVariants,
+  checkboxLabelVariants,
+  checkboxRootVariants,
+} from './styles';
+
+const SCOPE = 'CHECKBOX';
+
+const Root = withStyleContext(Pressable, SCOPE);
+
+const useCheckboxStyleContext = () => useStyleContext(SCOPE) as CheckboxVariantProps;
+
+const CheckboxPrimitive = createCheckbox({
+  Root,
+  Indicator: View,
+  Icon: View,
+  Label: Text,
+  Group: View,
+});
+
+// =============================================================================
+// CHECKBOX ROOT
+// =============================================================================
+
+export interface CheckboxProps extends ICheckboxProps, CheckboxVariantProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CheckboxRoot = forwardRef<View, CheckboxProps>(
+  ({ size = 'default', className, isIndeterminate, children, style, ...props }, ref) => {
+    const computedClassName = cn(checkboxRootVariants({ size }), className);
+
+    return (
+      <CheckboxPrimitive
+        ref={ref as any}
+        className={computedClassName}
+        isIndeterminate={isIndeterminate}
+        style={style}
+        context={{ size }}
+        {...props}
+      >
+        <CheckboxIndicator>
+          <CheckboxPrimitive.Icon>
+            <CheckboxIcon as={isIndeterminate ? CheckIndeterminateSmall : Check} />
+          </CheckboxPrimitive.Icon>
+        </CheckboxIndicator>
+        {children}
+      </CheckboxPrimitive>
+    );
+  },
+);
+
+CheckboxRoot.displayName = 'Checkbox';
+
+// =============================================================================
+// CHECKBOX INDICATOR
+// =============================================================================
+
+export interface CheckboxIndicatorProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CheckboxIndicator = forwardRef<View, CheckboxIndicatorProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useCheckboxStyleContext();
+    const computedClassName = cn(checkboxIndicatorVariants({ size }), className);
+
+    return (
+      <CheckboxPrimitive.Indicator
+        ref={ref as any}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {children}
+      </CheckboxPrimitive.Indicator>
+    );
+  },
+);
+
+CheckboxIndicator.displayName = 'Checkbox.Indicator';
+
+// =============================================================================
+// CHECKBOX ICON
+// =============================================================================
+
+export interface CheckboxIconProps extends Omit<IconProps, 'children'> {}
+
+const CheckboxIcon = ({ className, style, ...props }: CheckboxIconProps) => {
+  const { size } = useCheckboxStyleContext();
+  const computedClassName = cn(checkboxIconVariants({ size }), className);
+
+  return <Icon className={computedClassName} style={style} {...props} />;
+};
+
+CheckboxIcon.displayName = 'Checkbox.Icon';
+
+// =============================================================================
+// CHECKBOX LABEL
+// =============================================================================
+
+export interface CheckboxLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const CheckboxLabel = forwardRef<Text, CheckboxLabelProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useCheckboxStyleContext();
+    const computedClassName = cn(checkboxLabelVariants({ size }), className);
+
+    return (
+      <CheckboxPrimitive.Label
+        ref={ref as any}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {children}
+      </CheckboxPrimitive.Label>
+    );
+  },
+);
+
+CheckboxLabel.displayName = 'Checkbox.Label';
+
+// =============================================================================
+// CHECKBOX GROUP
+// =============================================================================
+
+export interface CheckboxGroupProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isReadOnly?: boolean;
+  direction?: 'column' | 'row';
+}
+
+const CheckboxGroup = forwardRef<View, CheckboxGroupProps>(
+  (
+    {
+      className,
+      children,
+      style,
+      direction = 'column',
+      value,
+      onChange,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      ...viewProps
+    },
+    ref,
+  ) => {
+    const computedClassName = cn(checkboxGroupVariants({ direction }), className);
+
+    return (
+      <CheckboxPrimitive.Group
+        ref={ref as any}
+        className={computedClassName}
+        style={style}
+        value={value ?? []}
+        onChange={onChange}
+        isDisabled={isDisabled}
+        isInvalid={isInvalid}
+        isReadOnly={isReadOnly}
+        {...viewProps}
+      >
+        {children}
+      </CheckboxPrimitive.Group>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'Checkbox.Group';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type CheckboxCompoundComponent = typeof CheckboxRoot & {
+  Indicator: typeof CheckboxIndicator;
+  Icon: typeof CheckboxIcon;
+  Label: typeof CheckboxLabel;
+  Group: typeof CheckboxGroup;
+};
+
+export const Checkbox = Object.assign(CheckboxRoot, {
+  Indicator: CheckboxIndicator,
+  Icon: CheckboxIcon,
+  Label: CheckboxLabel,
+  Group: CheckboxGroup,
+}) as CheckboxCompoundComponent;

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,103 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_STRONG,
+  COLOR_TEXT_PRIMARY,
+  DISABLED_CURSOR,
+  DISABLED_OPACITY,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
+
+export const checkboxRootVariants = cva(
+  ['flex-row items-center', DISABLED_OPACITY, DISABLED_CURSOR],
+  {
+    variants: {
+      size: {
+        small: 'gap-2',
+        default: 'gap-2.5',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const checkboxIndicatorVariants = cva(
+  [
+    'items-center justify-center',
+    'rounded',
+    'border-2',
+    COLOR_BORDER_STRONG,
+    COLOR_BG_PRIMARY,
+    'data-[checked=true]:bg-slate-900 data-[checked=true]:border-slate-900',
+    'data-[indeterminate=true]:bg-slate-900 data-[indeterminate=true]:border-slate-900',
+    'data-[disabled=true]:opacity-50',
+    'data-[invalid=true]:border-red-500',
+    'data-[checked=true]:data-[invalid=true]:bg-red-500 data-[checked=true]:data-[invalid=true]:border-red-500',
+    'data-[indeterminate=true]:data-[invalid=true]:bg-red-500 data-[indeterminate=true]:data-[invalid=true]:border-red-500',
+    Platform.select({
+      web: [
+        TRANSITION_COLORS,
+        'data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:border-slate-400 data-[hover=true]:data-[checked=false]:data-[indeterminate=false]:bg-slate-50',
+        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
+        'data-[invalid=true]:data-[hover=true]:border-red-400',
+        'data-[invalid=true]:data-[focus-visible=true]:ring-red-400/50',
+      ].join(' '),
+      default: '',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        small: 'h-4 w-4',
+        default: 'h-5 w-5',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const checkboxIconVariants = cva(['text-white'], {
+  variants: {
+    size: {
+      small: 'h-3 w-3',
+      default: 'h-3.5 w-3.5',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const checkboxLabelVariants = cva(
+  [COLOR_TEXT_PRIMARY, 'data-[disabled=true]:text-slate-400'],
+  {
+    variants: {
+      size: {
+        small: 'text-sm',
+        default: 'text-base',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const checkboxGroupVariants = cva([], {
+  variants: {
+    direction: {
+      column: 'gap-2',
+      row: 'flex-row gap-4',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+  },
+});
+
+export type CheckboxVariantProps = VariantProps<typeof checkboxRootVariants>;

package/src/components/Chip/index.tsx

@@ -0,0 +1,91 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, Text as RNText, type ViewProps, type TextProps } from 'react-native';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import { chipRootVariants, chipLabelVariants, chipIconVariants, ChipVariants } from './styles';
+
+const SCOPE = 'CHIP';
+
+const Root = withStyleContext(View, SCOPE);
+
+const useChipStyleContext = () => useStyleContext(SCOPE) as ChipVariants;
+
+// =============================================================================
+// STYLED ROOT COMPONENT
+// =============================================================================
+
+export interface ChipProps extends ViewProps, ChipVariants {
+  children?: ReactNode;
+  className?: string;
+}
+
+const ChipRoot = forwardRef<View, ChipProps>(
+  ({ children, color = 'default', className, style, ...props }, ref) => {
+    const computedClassName = cn(chipRootVariants({ color }), className);
+
+    return (
+      <Root ref={ref} className={computedClassName} style={style} context={{ color }} {...props}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+ChipRoot.displayName = 'Chip';
+
+// =============================================================================
+// STYLED LABEL COMPONENT
+// =============================================================================
+
+export interface ChipLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const ChipLabel = forwardRef<RNText, ChipLabelProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { color } = useChipStyleContext();
+
+    const computedClassName = cn(chipLabelVariants({ color }), className);
+
+    return (
+      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </RNText>
+    );
+  },
+);
+
+ChipLabel.displayName = 'Chip.Label';
+
+// =============================================================================
+// STYLED ICON COMPONENT
+// =============================================================================
+
+export interface ChipIconProps extends Omit<IconProps, 'children'> {}
+
+const ChipIcon = ({ className, style, as, ...props }: ChipIconProps) => {
+  const { color } = useChipStyleContext();
+
+  const computedClassName = cn(chipIconVariants({ color }), className);
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
+
+ChipIcon.displayName = 'Chip.Icon';
+
+// =============================================================================
+// COMPOUND COMPONENT EXPORT
+// =============================================================================
+
+type ChipCompoundComponent = typeof ChipRoot & {
+  Label: typeof ChipLabel;
+  Icon: typeof ChipIcon;
+};
+
+export const Chip = Object.assign(ChipRoot, {
+  Label: ChipLabel,
+  Icon: ChipIcon,
+}) as ChipCompoundComponent;
+
+export { type ChipVariants } from './styles';

package/src/components/Chip/styles.ts

@@ -0,0 +1,52 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const chipRootVariants = cva(
+  ['flex-row items-center justify-center rounded-full px-2 py-1 gap-1.5 self-start'],
+  {
+    variants: {
+      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',
+      },
+    },
+    defaultVariants: {
+      color: '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'], {
+  variants: {
+    color: {
+      default: 'text-content-primary',
+      error: 'text-content-primary',
+      info: 'text-content-primary',
+      success: 'text-content-primary',
+      warning: 'text-content-primary',
+    },
+  },
+  defaultVariants: {
+    color: 'default',
+  },
+});
+
+export const chipIconVariants = cva(['size-4'], {
+  variants: {
+    color: {
+      default: 'text-content-primary',
+      error: 'text-content-danger',
+      info: 'text-content-info',
+      success: 'text-content-success',
+      warning: 'text-content-warning',
+    },
+  },
+  defaultVariants: {
+    color: 'default',
+  },
+});
+
+export type ChipVariants = VariantProps<typeof chipRootVariants>;