CoUI Flutter Quick Reference (kobic Co<X> standard)

// ✅ CORRECT: single barrel import
import 'package:core/core.dart';

// ❌ WRONG: never import coui_flutter directly in feature/app code
import 'package:coui_flutter/coui_flutter.dart';

class CoButton extends StatefulWidget {
  const CoButton({
    required this.child,
    super.key,
    this.variant = CoreButtonVariant.primary,
    this.size = CoreComponentSize.md,
    this.shape = CoreButtonShape.rectangle,
    this.leading,
    this.trailing,
    this.onPressed,
    this.enabled,
    this.buttonStyle,
    this.expanded = false,
    // ... interaction callbacks
  });
}

// Primary action — uses defaults (variant: primary, size: md)
CoButton(
  expanded: true,
  enabled: state.isValid,
  onPressed: () => context.read<MyBloc>().add(const MyEvent.submitted()),
  child: const Text('저장'),
)

// Secondary / cancel — dot-shorthand on the enum
CoButton(
  variant: .ghost,
  onPressed: () => context.pop(),
  child: const Text('취소'),
)

// Destructive
CoButton(
  variant: .destructive,
  onPressed: onDelete,
  child: const Text('삭제'),
)

// Sized + leading icon
CoButton(
  variant: .outline,
  size: .sm,
  leading: const CoIcon(CoLucideIcons.pencil),
  onPressed: onEdit,
  child: const Text('편집'),
)

// Icon-only via shape
CoButton(
  variant: .ghost,
  shape: .square,
  onPressed: onMore,
  child: const CoIcon(CoLucideIcons.ellipsisVertical),
)

class CoBadge extends StatefulWidget {
  const CoBadge({
    this.variant = CoreBadgeVariant.defaultVariant, // primary
    required this.child,
    super.key,
    this.size = CoreComponentSize.sm,
    this.leading,
    this.trailing,
    this.onPressed,
    this.badgeStyle,
  });
}

// Positive / active status
const CoBadge(child: Text('판매중'))               // variant defaults to primary

// Negative status
const CoBadge(variant: .destructive, child: Text('판매중지'))

// With a leading icon
CoBadge(
  variant: .secondary,
  leading: const CoIcon(CoLucideIcons.eye),
  child: const Text('미리보기'),
)

// Conditional
book.isActive
    ? const CoBadge(child: Text('판매중'))
    : const CoBadge(variant: .destructive, child: Text('판매중지'))

class CoIcon extends StatefulWidget {
  const CoIcon(this.icon, {super.key, this.iconStyle});
}

const CoIcon(CoLucideIcons.trash)
const CoIcon(CoRadixIcons.chevronDown)

// Size / color override
CoIcon(
  CoLucideIcons.circleAlert,
  iconStyle: CoreIconStyle(size: 16, color: context.appColors.error.toValue()),
)

// CoInput — bare text-entry primitive
CoInput(
  type: CoreInputType.email,
  placeholder: '이메일을 입력하세요',
  value: state.email,
  onChanged: (value) =>
      context.read<MyBloc>().add(MyEvent.emailChanged(value)),
)

// Error variant
CoInput(
  type: CoreInputType.email,
  placeholder: '이메일',
  variant: CoreInputVariant.error,
  onChanged: (value) => ...,
)

// CoTextField — labelled field with label / placeholder / prefix slots
CoTextField(
  label: '이메일',
  placeholder: '이메일을 입력하세요',
  controller: controller,
  keyboardType: TextInputType.emailAddress,
  prefix: const CoIcon(CoLucideIcons.mail),
  errorText: state.emailError,
  onChanged: (value) => ...,
)

// ✅ Project standard
style: context.textStyles.lgSemibold
style: context.textStyles.smSemibold
style: context.textStyles.baseMedium

// ✅ copyWith composition
style: context.textStyles.lgSemibold.copyWith(
  color: context.appColors.neutral5,
)

Text('제목', style: context.textStyles.lgSemibold)
Text('본문', style: context.textStyles.baseNormal)
Text('캡션', style: context.textStyles.smNormal)

class CoGap extends StatelessWidget {
  const CoGap({this.gapStyle, super.key});
  // plus const CoGap.spaceN() per CoreSpace.spaceN, and CoGap.expand(...)
}

// ✅ kobic standard — token constructors
const CoGap.space4()    // 4px
const CoGap.space8()    // 8px
const CoGap.space16()   // 16px
const CoGap.space24()   // 24px

// ✅ Non-token size / cross extent / fill color via gapStyle
const CoGap(gapStyle: CoreGapStyle(size: 18))

// EdgeInsets / padding also use CoreSpace tokens
Padding(
  padding: const EdgeInsets.symmetric(horizontal: CoreSpace.space16),
  child: child,
)

// Skeleton loading (entire widget)
widget.skeletonizer(enabled: state.isLoading)

// Conditional loading (spinner)
widget.loadingOr(
  isLoading: state.isLoading,
  loadingWidget: const CircularProgressIndicator(),
)

// Empty state handling
listWidget.emptyOrWhen(
  condition: () => list.isEmpty,
  emptyWidget: const EmptyStateWidget(),
)

import 'package:core/core.dart';
import 'package:dependencies/dependencies.dart';

class MyPage extends HookWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    final appColors = context.appColors;

    return BlocProvider(
      create: (_) => MyBloc(),
      child: BlocBuilder<MyBloc, MyState>(
        builder: (context, state) {
          return Scaffold(
            headers: [
              AppBar(
                title: Text(
                  '페이지 제목',
                  style: context.textStyles.lgSemibold.copyWith(
                    color: appColors.neutral5,
                  ),
                ),
              ),
            ],
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: CoreSpace.space16,
              ),
              child: Column(
                crossAxisAlignment: .start,
                children: [
                  const CoGap.space16(),
                  CoInput(
                    type: CoreInputType.text,
                    placeholder: '이름을 입력하세요',
                    onChanged: (value) => context.read<MyBloc>().add(
                      MyEvent.nameChanged(value),
                    ),
                  ),
                  const CoGap.space16(),
                  CoButton(
                    expanded: true,
                    enabled: state.isValid,
                    onPressed: () => context.read<MyBloc>().add(
                      const MyEvent.submitted(),
                    ),
                    child: const Text('저장'),
                  ),
                ],
              ),
            ).skeletonizer(enabled: state.isLoading),
          );
        },
      ),
    );
  }
}

// Header background (distinct from body)
color: context.appColors.neutral95,

// Dark border (clear separation)
border: Border(right: BorderSide(color: context.appColors.neutral70)),

// Default border
border: Border.all(color: context.appColors.neutral80),

OutlinedContainer(
  backgroundColor: theme.colorScheme.base100,
  borderColor: theme.colorScheme.base300,  // 진한 테두리
)