sh-ui-cli 0.14.0 → 0.21.0

package/data/registry/flutter/widgets/sh_ui_button.dart

@@ -0,0 +1,201 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+/// 버튼 시각 위계.
+/// - [primary]   : 페이지의 1차 액션. 한 화면에 하나만 권장.
+/// - [secondary] : 보조 액션. border + 약한 배경.
+/// - [ghost]     : 배경 없는 hover 강조 액션.
+/// - [danger]    : 파괴적 액션(삭제 등).
+/// - [link]      : 텍스트 링크처럼 보이는 인라인 버튼.
+enum ShUiButtonVariant { primary, secondary, ghost, danger, link }
+
+/// 버튼 크기.
+enum ShUiButtonSize { sm, md, lg }
+
+/// shUi Button — 사용자 액션을 트리거하는 기본 버튼.
+///
+/// [variant]로 시각 위계, [size]로 크기를 결정한다. [onPressed]가 null이면
+/// 비활성 상태로 표시된다. 페이지 이동 목적이면 [ShUiButtonVariant.link]를 사용한다.
+///
+/// ```dart
+/// ShUiButton(
+///   onPressed: () {},
+///   variant: ShUiButtonVariant.primary,
+///   child: const Text('저장'),
+/// )
+/// ```
+class ShUiButton extends StatefulWidget {
+  /// 버튼 안에 표시될 콘텐츠. 보통 [Text] 또는 [Icon]+[Text]를 [Row]로 묶어 사용.
+  final Widget child;
+
+  /// 탭 콜백. `null`이면 비활성 상태로 렌더되며 hover/press 효과도 제거된다.
+  final VoidCallback? onPressed;
+
+  /// 시각 위계.
+  /// - [ShUiButtonVariant.primary] — 페이지의 1차 액션 (기본)
+  /// - [ShUiButtonVariant.secondary] — 보조 액션
+  /// - [ShUiButtonVariant.ghost] — 배경 없는 hover 강조
+  /// - [ShUiButtonVariant.danger] — 파괴적 액션
+  /// - [ShUiButtonVariant.link] — 텍스트 링크 스타일
+  final ShUiButtonVariant variant;
+
+  /// 크기. [ShUiButtonSize.sm] / [ShUiButtonSize.md] (기본) / [ShUiButtonSize.lg].
+  final ShUiButtonSize size;
+
+  const ShUiButton({
+    super.key,
+    required this.child,
+    this.onPressed,
+    this.variant = ShUiButtonVariant.primary,
+    this.size = ShUiButtonSize.md,
+  });
+
+  @override
+  State<ShUiButton> createState() => _ShUiButtonState();
+}
+
+class _ShUiButtonState extends State<ShUiButton> {
+  bool _hover = false;
+  bool _pressed = false;
+
+  _Colors _resolveColors(ShUiColorTokens t) {
+    switch (widget.variant) {
+      case ShUiButtonVariant.primary:
+        return _Colors(
+          bg: _hover ? t.primaryHover : t.primary,
+          fg: t.primaryForeground,
+          border: Colors.transparent,
+        );
+      case ShUiButtonVariant.secondary:
+        return _Colors(
+          bg: _hover ? t.backgroundSubtle : t.backgroundMuted,
+          fg: t.foreground,
+          border: t.border,
+        );
+      case ShUiButtonVariant.ghost:
+        return _Colors(
+          bg: _hover ? t.backgroundMuted : Colors.transparent,
+          fg: t.foreground,
+          border: Colors.transparent,
+        );
+      case ShUiButtonVariant.danger:
+        return _Colors(
+          bg: t.danger,
+          fg: t.dangerForeground,
+          border: Colors.transparent,
+        );
+      case ShUiButtonVariant.link:
+        return _Colors(
+          bg: Colors.transparent,
+          fg: _pressed ? t.foregroundMuted : t.foreground,
+          border: Colors.transparent,
+        );
+    }
+  }
+
+  EdgeInsets _paddingOf(ShUiTheme shUi) => switch (widget.size) {
+        ShUiButtonSize.sm => EdgeInsets.symmetric(horizontal: shUi.spacing.s3),
+        ShUiButtonSize.md => EdgeInsets.symmetric(horizontal: shUi.spacing.s4),
+        ShUiButtonSize.lg => EdgeInsets.symmetric(horizontal: shUi.spacing.s5),
+      };
+
+  double _heightOf(ShUiTheme shUi) => switch (widget.size) {
+        ShUiButtonSize.sm => shUi.control.sm,
+        ShUiButtonSize.md => shUi.control.md,
+        ShUiButtonSize.lg => shUi.control.lg,
+      };
+
+  double _fontSizeOf(ShUiTheme shUi) => switch (widget.size) {
+        ShUiButtonSize.sm => shUi.text.sm,
+        ShUiButtonSize.md => shUi.text.sm,
+        ShUiButtonSize.lg => shUi.text.base,
+      };
+
+  Widget _buildLink(ShUiTheme shUi, _Colors colors, bool disabled) {
+    return MouseRegion(
+      cursor: disabled ? SystemMouseCursors.basic : SystemMouseCursors.click,
+      onEnter: (_) => setState(() => _hover = true),
+      onExit: (_) => setState(() => _hover = false),
+      child: GestureDetector(
+        onTap: disabled ? null : widget.onPressed,
+        onTapDown: disabled ? null : (_) => setState(() => _pressed = true),
+        onTapUp: disabled ? null : (_) => setState(() => _pressed = false),
+        onTapCancel: disabled ? null : () => setState(() => _pressed = false),
+        child: DefaultTextStyle(
+          style: TextStyle(
+            color: colors.fg,
+            fontSize: _fontSizeOf(shUi),
+            fontWeight: shUi.weight.medium,
+            height: 1.2,
+            decoration: _hover ? TextDecoration.underline : TextDecoration.none,
+            decorationColor: colors.fg,
+          ),
+          child: widget.child,
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = _resolveColors(shUi.colors);
+    final disabled = widget.onPressed == null;
+
+    if (widget.variant == ShUiButtonVariant.link) {
+      return Opacity(
+        opacity: disabled ? shUi.opacity.disabled : 1,
+        child: _buildLink(shUi, colors, disabled),
+      );
+    }
+
+    return Opacity(
+      opacity: disabled ? shUi.opacity.disabled : 1,
+      child: MouseRegion(
+        cursor: disabled ? SystemMouseCursors.basic : SystemMouseCursors.click,
+        onEnter: (_) => setState(() => _hover = true),
+        onExit: (_) => setState(() => _hover = false),
+        child: GestureDetector(
+          onTap: disabled ? null : widget.onPressed,
+          onTapDown: disabled ? null : (_) => setState(() => _pressed = true),
+          onTapUp: disabled ? null : (_) => setState(() => _pressed = false),
+          onTapCancel: disabled ? null : () => setState(() => _pressed = false),
+          child: AnimatedScale(
+            scale: _pressed ? 0.97 : 1.0,
+            duration: const Duration(milliseconds: 80),
+            curve: Curves.easeOut,
+            child: AnimatedContainer(
+              duration: shUi.duration.fast,
+              height: _heightOf(shUi),
+              padding: _paddingOf(shUi),
+              decoration: BoxDecoration(
+                color: _pressed
+                    ? Color.lerp(colors.bg, Colors.black, 0.08)!
+                    : colors.bg,
+                border: Border.all(color: colors.border),
+                borderRadius: BorderRadius.circular(shUi.radius.defaultRadius),
+              ),
+              alignment: Alignment.center,
+              child: DefaultTextStyle(
+                style: TextStyle(
+                  color: colors.fg,
+                  fontSize: _fontSizeOf(shUi),
+                  fontWeight: shUi.weight.medium,
+                  height: 1,
+                ),
+                child: widget.child,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _Colors {
+  final Color bg;
+  final Color fg;
+  final Color border;
+  const _Colors({required this.bg, required this.fg, required this.border});
+}

package/data/registry/flutter/widgets/sh_ui_card.dart

@@ -0,0 +1,159 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+/// shUi Card — 컴파운드 스타일.
+///
+/// React 쪽 compound children API와 달리 Flutter는 named params가 관용적이라
+/// 동일한 의미 구조를 다음과 같이 표현한다:
+///
+/// ShUiCard(children: [
+///   ShUiCardHeader(
+///     title: ShUiCardTitle('Card Title'),
+///     description: ShUiCardDescription('Card Description'),
+///     action: ShUiButton(
+///       variant: ShUiButtonVariant.link,
+///       onPressed: () {},
+///       child: Text('액션'),
+///     ),
+///   ),
+///   ShUiCardContent(child: Text('본문')),
+///   ShUiCardFooter(children: [Text('푸터')]),
+/// ])
+class ShUiCard extends StatelessWidget {
+  final List<Widget> children;
+
+  const ShUiCard({super.key, required this.children});
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    return Container(
+      decoration: BoxDecoration(
+        color: shUi.colors.background,
+        border: Border.all(color: shUi.colors.border),
+        borderRadius: BorderRadius.circular(shUi.radius.defaultRadius),
+      ),
+      padding: EdgeInsets.symmetric(vertical: shUi.spacing.s6),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        mainAxisSize: MainAxisSize.min,
+        children: _withGaps(children, shUi.spacing.s6),
+      ),
+    );
+  }
+}
+
+List<Widget> _withGaps(List<Widget> children, double gap) {
+  if (children.length <= 1) return children;
+  final out = <Widget>[];
+  for (var i = 0; i < children.length; i++) {
+    out.add(children[i]);
+    if (i != children.length - 1) out.add(SizedBox(height: gap));
+  }
+  return out;
+}
+
+class ShUiCardHeader extends StatelessWidget {
+  final Widget? title;
+  final Widget? description;
+  final Widget? action;
+
+  const ShUiCardHeader({super.key, this.title, this.description, this.action});
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final stack = Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (title != null) title!,
+        if (title != null && description != null) const SizedBox(height: 6),
+        if (description != null) description!,
+      ],
+    );
+
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: shUi.spacing.s6),
+      child: action == null
+          ? stack
+          : Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Expanded(child: stack),
+                SizedBox(width: shUi.spacing.s4),
+                action!,
+              ],
+            ),
+    );
+  }
+}
+
+class ShUiCardTitle extends StatelessWidget {
+  final String text;
+  const ShUiCardTitle(this.text, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    return Text(
+      text,
+      style: TextStyle(
+        color: shUi.colors.foreground,
+        fontSize: shUi.text.base,
+        fontWeight: shUi.weight.semibold,
+        height: 1.25,
+        letterSpacing: -0.16,
+      ),
+    );
+  }
+}
+
+class ShUiCardDescription extends StatelessWidget {
+  final String text;
+  const ShUiCardDescription(this.text, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    return Text(
+      text,
+      style: TextStyle(
+        color: shUi.colors.foregroundMuted,
+        fontSize: shUi.text.sm,
+        height: 1.5,
+      ),
+    );
+  }
+}
+
+class ShUiCardContent extends StatelessWidget {
+  final Widget child;
+  const ShUiCardContent({super.key, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: shUi.spacing.s6),
+      child: child,
+    );
+  }
+}
+
+class ShUiCardFooter extends StatelessWidget {
+  final List<Widget> children;
+  const ShUiCardFooter({super.key, required this.children});
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    return Padding(
+      padding: EdgeInsets.symmetric(horizontal: shUi.spacing.s6),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: _withGaps(children, shUi.spacing.s2),
+      ),
+    );
+  }
+}

package/data/registry/flutter/widgets/sh_ui_carousel.dart

@@ -0,0 +1,204 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+/// shUi Carousel — 가로 스와이프 캐러셀.
+///
+/// PageView 기반. 좌우 화살표 버튼([showControls])과 하단 도트 인디케이터
+/// ([showIndicators])를 옵션으로 제공한다. [onIndexChanged]로 현재 인덱스를
+/// 외부로 노출할 수 있다.
+class ShUiCarousel extends StatefulWidget {
+  /// 슬라이드로 보여줄 위젯 목록.
+  final List<Widget> items;
+
+  /// 슬라이드 높이. 지정하지 않으면 컨텐츠 높이에 따른다 (기본 220).
+  final double? itemHeight;
+
+  /// 도트 인디케이터 노출 여부.
+  final bool showIndicators;
+
+  /// 좌/우 화살표 버튼 노출 여부.
+  final bool showControls;
+
+  /// 초기 인덱스.
+  final int? initialIndex;
+
+  /// 인덱스 변경 콜백.
+  final ValueChanged<int>? onIndexChanged;
+
+  const ShUiCarousel({
+    super.key,
+    required this.items,
+    this.itemHeight,
+    this.showIndicators = true,
+    this.showControls = true,
+    this.initialIndex,
+    this.onIndexChanged,
+  });
+
+  @override
+  State<ShUiCarousel> createState() => _ShUiCarouselState();
+}
+
+class _ShUiCarouselState extends State<ShUiCarousel> {
+  late final PageController _controller;
+  late int _index;
+
+  @override
+  void initState() {
+    super.initState();
+    _index = widget.initialIndex ?? 0;
+    _controller = PageController(initialPage: _index);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _goTo(int i) {
+    if (i < 0 || i >= widget.items.length) return;
+    _controller.animateToPage(
+      i,
+      duration: const Duration(milliseconds: 280),
+      curve: Curves.easeOut,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+    final height = widget.itemHeight ?? 220;
+    // 좁은 폭(mobile 사이즈) 에서는 컨트롤을 숨긴다.
+    final width = MediaQuery.of(context).size.width;
+    final compact = width < shUi.breakpoint.sm;
+    final showControls = widget.showControls && !compact;
+
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        SizedBox(
+          height: height,
+          child: Stack(
+            alignment: Alignment.center,
+            children: [
+              PageView.builder(
+                controller: _controller,
+                itemCount: widget.items.length,
+                onPageChanged: (i) {
+                  setState(() => _index = i);
+                  widget.onIndexChanged?.call(i);
+                },
+                itemBuilder: (context, i) {
+                  return Padding(
+                    padding: EdgeInsets.symmetric(
+                      horizontal: shUi.spacing.s2,
+                    ),
+                    child: widget.items[i],
+                  );
+                },
+              ),
+              if (showControls) ...[
+                Positioned(
+                  left: shUi.spacing.s2,
+                  child: _NavButton(
+                    icon: Icons.chevron_left,
+                    onPressed: _index > 0 ? () => _goTo(_index - 1) : null,
+                  ),
+                ),
+                Positioned(
+                  right: shUi.spacing.s2,
+                  child: _NavButton(
+                    icon: Icons.chevron_right,
+                    onPressed: _index < widget.items.length - 1
+                        ? () => _goTo(_index + 1)
+                        : null,
+                  ),
+                ),
+              ],
+            ],
+          ),
+        ),
+        if (widget.showIndicators && widget.items.length > 1) ...[
+          SizedBox(height: shUi.spacing.s3),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              for (var i = 0; i < widget.items.length; i++)
+                GestureDetector(
+                  onTap: () => _goTo(i),
+                  behavior: HitTestBehavior.opaque,
+                  child: AnimatedContainer(
+                    duration: shUi.duration.base,
+                    curve: shUi.ease.standard,
+                    margin: EdgeInsets.symmetric(horizontal: shUi.spacing.s1),
+                    width: _index == i ? 18 : 6,
+                    height: 6,
+                    decoration: BoxDecoration(
+                      color: _index == i
+                          ? colors.foreground
+                          : colors.borderStrong,
+                      borderRadius: BorderRadius.circular(3),
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ],
+      ],
+    );
+  }
+}
+
+class _NavButton extends StatefulWidget {
+  final IconData icon;
+  final VoidCallback? onPressed;
+
+  const _NavButton({required this.icon, required this.onPressed});
+
+  @override
+  State<_NavButton> createState() => _NavButtonState();
+}
+
+class _NavButtonState extends State<_NavButton> {
+  bool _hover = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+    final disabled = widget.onPressed == null;
+
+    return Opacity(
+      opacity: disabled ? shUi.opacity.disabled : 1,
+      child: MouseRegion(
+        cursor: disabled ? SystemMouseCursors.basic : SystemMouseCursors.click,
+        onEnter: (_) => setState(() => _hover = true),
+        onExit: (_) => setState(() => _hover = false),
+        child: GestureDetector(
+          onTap: widget.onPressed,
+          child: AnimatedContainer(
+            duration: shUi.duration.fast,
+            width: 36,
+            height: 36,
+            decoration: BoxDecoration(
+              color: _hover && !disabled
+                  ? colors.backgroundSubtle
+                  : colors.background,
+              border: Border.all(color: colors.border),
+              borderRadius: BorderRadius.circular(999),
+              boxShadow: shUi.shadow.sm,
+            ),
+            alignment: Alignment.center,
+            child: Icon(
+              widget.icon,
+              size: 18,
+              color: colors.foreground,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}