sh-ui-cli 0.15.0 → 0.21.0

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

@@ -0,0 +1,362 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+enum ShUiToastVariant { defaultVariant, success, danger, warning }
+
+enum ShUiToastPosition {
+  topLeft,
+  topRight,
+  topCenter,
+  bottomLeft,
+  bottomRight,
+  bottomCenter,
+}
+
+/// 토스트 데이터.
+class _ToastItem {
+  final String id;
+  final String? title;
+  final String? description;
+  final ShUiToastVariant variant;
+  final Duration duration;
+  final Widget? action;
+
+  const _ToastItem({
+    required this.id,
+    this.title,
+    this.description,
+    required this.variant,
+    required this.duration,
+    this.action,
+  });
+}
+
+/// 토스트 입력.
+class ShUiToastInput {
+  final String? title;
+  final String? description;
+  final ShUiToastVariant variant;
+  final Duration duration;
+  final Widget? action;
+
+  const ShUiToastInput({
+    this.title,
+    this.description,
+    this.variant = ShUiToastVariant.defaultVariant,
+    this.duration = const Duration(seconds: 4),
+    this.action,
+  });
+}
+
+/// sh-ui Toast — 전역 토스트 알림 시스템.
+///
+/// 사용법:
+///   1) 앱 최상위에 ShUiToaster를 배치.
+///      MaterialApp(builder: (_, child) => ShUiToaster(child: child!))
+///
+///   2) 어디서든 호출.
+///      ShUiToast.show(context, description: '저장됨');
+///      ShUiToast.success(context, description: '완료!');
+///      ShUiToast.danger(context, description: '오류 발생');
+///      ShUiToast.warning(context, description: '주의');
+class ShUiToast {
+  ShUiToast._();
+
+  static String show(
+    BuildContext context, {
+    String? title,
+    String? description,
+    ShUiToastVariant variant = ShUiToastVariant.defaultVariant,
+    Duration duration = const Duration(seconds: 4),
+    Widget? action,
+  }) {
+    final state = _ShUiToasterState._of(context);
+    return state._add(ShUiToastInput(
+      title: title,
+      description: description,
+      variant: variant,
+      duration: duration,
+      action: action,
+    ));
+  }
+
+  static String success(BuildContext context, {String? title, String? description}) =>
+      show(context, title: title, description: description, variant: ShUiToastVariant.success);
+
+  static String danger(BuildContext context, {String? title, String? description}) =>
+      show(context, title: title, description: description, variant: ShUiToastVariant.danger);
+
+  static String warning(BuildContext context, {String? title, String? description}) =>
+      show(context, title: title, description: description, variant: ShUiToastVariant.warning);
+
+  static void dismiss(BuildContext context, String id) {
+    final state = _ShUiToasterState._of(context);
+    state._remove(id);
+  }
+}
+
+/// 토스트를 렌더링하는 Toaster 위젯. 앱 최상위에 배치.
+class ShUiToaster extends StatefulWidget {
+  final Widget child;
+  final ShUiToastPosition position;
+
+  const ShUiToaster({
+    super.key,
+    required this.child,
+    this.position = ShUiToastPosition.bottomRight,
+  });
+
+  @override
+  State<ShUiToaster> createState() => _ShUiToasterState();
+}
+
+class _ShUiToasterState extends State<ShUiToaster> {
+  final List<_ToastItem> _toasts = [];
+  int _counter = 0;
+
+  static _ShUiToasterState _of(BuildContext context) {
+    final state = context.findAncestorStateOfType<_ShUiToasterState>();
+    if (state == null) {
+      throw FlutterError('ShUiToaster가 위젯 트리에 없습니다. 앱 최상위에 ShUiToaster를 배치하세요.');
+    }
+    return state;
+  }
+
+  String _add(ShUiToastInput input) {
+    final id = 'sh-toast-${++_counter}';
+    setState(() {
+      _toasts.add(_ToastItem(
+        id: id,
+        title: input.title,
+        description: input.description,
+        variant: input.variant,
+        duration: input.duration,
+        action: input.action,
+      ));
+    });
+    return id;
+  }
+
+  void _remove(String id) {
+    setState(() {
+      _toasts.removeWhere((t) => t.id == id);
+    });
+  }
+
+  Alignment _positionAlignment() {
+    switch (widget.position) {
+      case ShUiToastPosition.topLeft:
+        return Alignment.topLeft;
+      case ShUiToastPosition.topRight:
+        return Alignment.topRight;
+      case ShUiToastPosition.topCenter:
+        return Alignment.topCenter;
+      case ShUiToastPosition.bottomLeft:
+        return Alignment.bottomLeft;
+      case ShUiToastPosition.bottomRight:
+        return Alignment.bottomRight;
+      case ShUiToastPosition.bottomCenter:
+        return Alignment.bottomCenter;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    return Stack(
+      children: [
+        widget.child,
+        if (_toasts.isNotEmpty)
+          Positioned.fill(
+            child: IgnorePointer(
+              ignoring: false,
+              child: Align(
+                alignment: _positionAlignment(),
+                child: Padding(
+                  padding: EdgeInsets.all(shUi.spacing.s4),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.end,
+                    children: _toasts.map((item) {
+                      return Padding(
+                        padding: EdgeInsets.only(bottom: shUi.spacing.s2),
+                        child: _ShUiToastCard(
+                          item: item,
+                          onDismiss: () => _remove(item.id),
+                        ),
+                      );
+                    }).toList(),
+                  ),
+                ),
+              ),
+            ),
+          ),
+      ],
+    );
+  }
+}
+
+class _ShUiToastCard extends StatefulWidget {
+  final _ToastItem item;
+  final VoidCallback onDismiss;
+
+  const _ShUiToastCard({required this.item, required this.onDismiss});
+
+  @override
+  State<_ShUiToastCard> createState() => _ShUiToastCardState();
+}
+
+class _ShUiToastCardState extends State<_ShUiToastCard>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+  late final Animation<double> _opacity;
+  late final Animation<Offset> _slide;
+  Timer? _timer;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: ShUiTheme.light.duration.slow,
+    );
+    _opacity = Tween<double>(begin: 0, end: 1).animate(
+      CurvedAnimation(parent: _controller, curve: Curves.easeOut),
+    );
+    _slide = Tween<Offset>(
+      begin: const Offset(0, 0.3),
+      end: Offset.zero,
+    ).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
+
+    _controller.forward();
+
+    if (widget.item.duration.inMilliseconds > 0) {
+      _timer = Timer(widget.item.duration, _exit);
+    }
+  }
+
+  void _exit() {
+    _controller.reverse().then((_) {
+      if (mounted) widget.onDismiss();
+    });
+  }
+
+  @override
+  void dispose() {
+    _timer?.cancel();
+    _controller.dispose();
+    super.dispose();
+  }
+
+  Color _variantColor(ShUiColorTokens colors) {
+    switch (widget.item.variant) {
+      case ShUiToastVariant.defaultVariant:
+        return colors.foreground;
+      case ShUiToastVariant.success:
+        return const Color(0xFF22C55E);
+      case ShUiToastVariant.danger:
+        return colors.danger;
+      case ShUiToastVariant.warning:
+        return const Color(0xFFF59E0B);
+    }
+  }
+
+  IconData? _variantIcon() {
+    switch (widget.item.variant) {
+      case ShUiToastVariant.defaultVariant:
+        return null;
+      case ShUiToastVariant.success:
+        return Icons.check_circle_outline;
+      case ShUiToastVariant.danger:
+        return Icons.cancel_outlined;
+      case ShUiToastVariant.warning:
+        return Icons.warning_amber_rounded;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+    final variantColor = _variantColor(colors);
+    final icon = _variantIcon();
+
+    return SlideTransition(
+      position: _slide,
+      child: FadeTransition(
+        opacity: _opacity,
+        child: Container(
+          constraints: const BoxConstraints(maxWidth: 360, minWidth: 280),
+          padding: EdgeInsets.symmetric(horizontal: shUi.spacing.s4, vertical: shUi.spacing.s3),
+          decoration: BoxDecoration(
+            color: colors.background,
+            border: Border.all(color: colors.border),
+            borderRadius: BorderRadius.circular(shUi.radius.defaultRadius),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withValues(alpha: 0.1),
+                blurRadius: 12,
+                offset: const Offset(0, 4),
+              ),
+            ],
+          ),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              if (icon != null) ...[
+                Icon(icon, size: 18, color: variantColor),
+                const SizedBox(width: 10),
+              ],
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    if (widget.item.title != null)
+                      Text(
+                        widget.item.title!,
+                        style: TextStyle(
+                          color: colors.foreground,
+                          fontSize: shUi.text.sm,
+                          fontWeight: shUi.weight.semibold,
+                          height: 1.3,
+                        ),
+                      ),
+                    if (widget.item.description != null) ...[
+                      if (widget.item.title != null) const SizedBox(height: 2),
+                      Text(
+                        widget.item.description!,
+                        style: TextStyle(
+                          color: colors.foregroundMuted,
+                          fontSize: 13,
+                          height: 1.4,
+                        ),
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+              if (widget.item.action != null) ...[
+                SizedBox(width: shUi.spacing.s2),
+                widget.item.action!,
+              ],
+              SizedBox(width: shUi.spacing.s1),
+              GestureDetector(
+                onTap: _exit,
+                child: Text(
+                  '×',
+                  style: TextStyle(
+                    color: colors.foregroundMuted,
+                    fontSize: shUi.text.base,
+                    height: 1,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,229 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+enum ShUiToggleVariant { outline, ghost }
+
+enum ShUiToggleSize { sm, md, lg }
+
+enum ShUiToggleOrientation { horizontal, vertical }
+
+/// sh-ui Toggle — 눌러서 on/off 전환하는 토글 버튼.
+class ShUiToggle extends StatefulWidget {
+  final bool pressed;
+  final ValueChanged<bool>? onPressedChange;
+  final ShUiToggleVariant variant;
+  final ShUiToggleSize size;
+  final Widget child;
+
+  const ShUiToggle({
+    super.key,
+    this.pressed = false,
+    this.onPressedChange,
+    this.variant = ShUiToggleVariant.ghost,
+    this.size = ShUiToggleSize.md,
+    required this.child,
+  });
+
+  @override
+  State<ShUiToggle> createState() => _ShUiToggleState();
+}
+
+class _ShUiToggleState extends State<ShUiToggle> {
+  bool _hover = false;
+
+  EdgeInsets _paddingOf(ShUiTheme shUi) => switch (widget.size) {
+        ShUiToggleSize.sm => EdgeInsets.symmetric(horizontal: shUi.spacing.s2),
+        ShUiToggleSize.md => EdgeInsets.symmetric(horizontal: shUi.spacing.s3),
+        ShUiToggleSize.lg => EdgeInsets.symmetric(horizontal: shUi.spacing.s4),
+      };
+
+  double _heightOf(ShUiTheme shUi) => switch (widget.size) {
+        ShUiToggleSize.sm => shUi.control.sm,
+        ShUiToggleSize.md => shUi.control.md,
+        ShUiToggleSize.lg => shUi.control.lg,
+      };
+
+  double _fontSizeOf(ShUiTheme shUi) => switch (widget.size) {
+        ShUiToggleSize.sm => shUi.text.sm,
+        ShUiToggleSize.md => shUi.text.sm,
+        ShUiToggleSize.lg => shUi.text.base,
+      };
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+    final disabled = widget.onPressedChange == null;
+
+    Color bg;
+    Color borderColor;
+
+    if (widget.pressed) {
+      bg = colors.backgroundMuted;
+      borderColor = widget.variant == ShUiToggleVariant.outline
+          ? colors.border
+          : Colors.transparent;
+    } else if (_hover && !disabled) {
+      bg = colors.backgroundSubtle;
+      borderColor = widget.variant == ShUiToggleVariant.outline
+          ? colors.border
+          : Colors.transparent;
+    } else {
+      bg = Colors.transparent;
+      borderColor = widget.variant == ShUiToggleVariant.outline
+          ? colors.border
+          : Colors.transparent;
+    }
+
+    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.onPressedChange!(!widget.pressed),
+          child: AnimatedContainer(
+            duration: shUi.duration.fast,
+            height: _heightOf(shUi),
+            padding: _paddingOf(shUi),
+            decoration: BoxDecoration(
+              color: bg,
+              border: Border.all(color: borderColor),
+              borderRadius: BorderRadius.circular(shUi.radius.defaultRadius),
+            ),
+            alignment: Alignment.center,
+            child: DefaultTextStyle(
+              style: TextStyle(
+                color: widget.pressed ? colors.foreground : colors.foregroundMuted,
+                fontSize: _fontSizeOf(shUi),
+                fontWeight: shUi.weight.medium,
+                height: 1,
+              ),
+              child: IconTheme(
+                data: IconThemeData(
+                  color: widget.pressed ? colors.foreground : colors.foregroundMuted,
+                  size: _fontSizeOf(shUi) + 2,
+                ),
+                child: widget.child,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// 토글 그룹 — 여러 토글을 묶어 하나만 또는 복수 선택 가능.
+class ShUiToggleGroup<T> extends StatelessWidget {
+  final Set<T> value;
+  final ValueChanged<Set<T>>? onValueChange;
+  final bool multiple;
+  final ShUiToggleVariant variant;
+  final ShUiToggleSize size;
+  final ShUiToggleOrientation orientation;
+  final List<ShUiToggleGroupItem<T>> children;
+
+  const ShUiToggleGroup({
+    super.key,
+    required this.value,
+    this.onValueChange,
+    this.multiple = false,
+    this.variant = ShUiToggleVariant.ghost,
+    this.size = ShUiToggleSize.md,
+    this.orientation = ShUiToggleOrientation.horizontal,
+    required this.children,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final layout = orientation == ShUiToggleOrientation.vertical
+        ? Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            mainAxisSize: MainAxisSize.min,
+            children: children,
+          )
+        : Row(
+            mainAxisSize: MainAxisSize.min,
+            children: children,
+          );
+
+    return _ShUiToggleGroupScope(
+      value: value,
+      onValueChange: onValueChange,
+      multiple: multiple,
+      variant: variant,
+      size: size,
+      child: layout,
+    );
+  }
+}
+
+class ShUiToggleGroupItem<T> extends StatelessWidget {
+  final T value;
+  final Widget child;
+
+  const ShUiToggleGroupItem({
+    super.key,
+    required this.value,
+    required this.child,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final scope = _ShUiToggleGroupScope.of<T>(context);
+    if (scope == null) return child;
+
+    final pressed = scope.value.contains(value);
+
+    return ShUiToggle(
+      pressed: pressed,
+      variant: scope.variant,
+      size: scope.size,
+      onPressedChange: scope.onValueChange == null
+          ? null
+          : (_) {
+              final next = Set<T>.from(scope.value);
+              if (pressed) {
+                next.remove(value);
+              } else {
+                if (!scope.multiple) next.clear();
+                next.add(value);
+              }
+              scope.onValueChange!(next);
+            },
+      child: child,
+    );
+  }
+}
+
+class _ShUiToggleGroupScope<T> extends InheritedWidget {
+  final Set<T> value;
+  final ValueChanged<Set<T>>? onValueChange;
+  final bool multiple;
+  final ShUiToggleVariant variant;
+  final ShUiToggleSize size;
+
+  const _ShUiToggleGroupScope({
+    required this.value,
+    this.onValueChange,
+    required this.multiple,
+    required this.variant,
+    required this.size,
+    required super.child,
+  });
+
+  static _ShUiToggleGroupScope<T>? of<T>(BuildContext context) {
+    return context.dependOnInheritedWidgetOfExactType<_ShUiToggleGroupScope<T>>();
+  }
+
+  @override
+  bool updateShouldNotify(covariant _ShUiToggleGroupScope<T> old) =>
+      value != old.value ||
+      multiple != old.multiple ||
+      variant != old.variant ||
+      size != old.size;
+}

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

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+/// sh-ui Tooltip — hover/포커스/long-press 시 짧은 설명을 표시.
+///
+/// Flutter의 [Tooltip]을 sh-ui 토큰으로 스타일링한 래퍼. 터치 기기에서는
+/// long-press로, 데스크탑에서는 hover로 표시된다.
+///
+/// ShUiTooltip(
+///   message: '변경 사항을 저장합니다',
+///   child: ShUiButton(onPressed: () {}, child: Text('저장')),
+/// )
+class ShUiTooltip extends StatelessWidget {
+  final String message;
+  final Widget child;
+
+  /// 트리거 위에 표시할지 아래에 표시할지.
+  final bool preferBelow;
+
+  /// 표시까지 지연(ms).
+  final Duration waitDuration;
+
+  const ShUiTooltip({
+    super.key,
+    required this.message,
+    required this.child,
+    this.preferBelow = true,
+    this.waitDuration = const Duration(milliseconds: 300),
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+
+    return Tooltip(
+      message: message,
+      preferBelow: preferBelow,
+      waitDuration: waitDuration,
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+      margin: const EdgeInsets.all(4),
+      verticalOffset: 16,
+      textStyle: TextStyle(
+        color: colors.background,
+        fontSize: shUi.text.xs,
+        height: 1.4,
+      ),
+      decoration: BoxDecoration(
+        color: colors.foreground,
+        borderRadius: BorderRadius.circular(shUi.radius.defaultRadius - 2),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.12),
+            blurRadius: 12,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: child,
+    );
+  }
+}