sh-ui-cli 0.15.0 → 0.21.0

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

@@ -0,0 +1,129 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+/// shUi Skeleton — 데이터 로딩 중 자리를 대신 차지하는 플레이스홀더.
+///
+/// 기본은 풀너비 직사각형이며, 은은한 shimmer 애니메이션이 적용된다.
+/// 편의 생성자:
+/// - [ShUiSkeleton.text]  : 한 줄 텍스트 자리 (기본 높이 14px).
+/// - [ShUiSkeleton.avatar]: 원형 아바타 자리.
+/// - [ShUiSkeleton.block] : 블록 영역 자리 (카드 본문 등).
+class ShUiSkeleton extends StatefulWidget {
+  /// 너비. `null`이면 가로를 가득 채운다.
+  final double? width;
+
+  /// 높이. `null`이면 부모가 주는 높이에 따른다 (기본 16px).
+  final double? height;
+
+  /// 모서리 둥글기. `null`이면 토큰의 기본값을 사용한다.
+  final double? borderRadius;
+
+  const ShUiSkeleton({
+    super.key,
+    this.width,
+    this.height,
+    this.borderRadius,
+  });
+
+  /// 한 줄 텍스트 자리. [width]/[height] 기본값을 살짝 낮춰 둔다.
+  factory ShUiSkeleton.text({
+    Key? key,
+    double? width,
+    double height = 14,
+    double? borderRadius,
+  }) {
+    return ShUiSkeleton(
+      key: key,
+      width: width,
+      height: height,
+      borderRadius: borderRadius,
+    );
+  }
+
+  /// 원형 아바타 자리. [size] × [size] 정사각형에 완전 원형.
+  factory ShUiSkeleton.avatar({
+    Key? key,
+    double size = 40,
+  }) {
+    return ShUiSkeleton(
+      key: key,
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+    );
+  }
+
+  /// 풀너비 블록 자리. 카드 본문·이미지 자리 등.
+  factory ShUiSkeleton.block({
+    Key? key,
+    double height = 96,
+    double? borderRadius,
+  }) {
+    return ShUiSkeleton(
+      key: key,
+      height: height,
+      borderRadius: borderRadius,
+    );
+  }
+
+  @override
+  State<ShUiSkeleton> createState() => _ShUiSkeletonState();
+}
+
+class _ShUiSkeletonState extends State<ShUiSkeleton>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      // 토큰 duration.slow (200ms) 기반 6배 — shimmer 사이클은 여유있게.
+      duration: const Duration(milliseconds: 1200),
+    )..repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final base = shUi.colors.backgroundMuted;
+    final highlight = Color.lerp(base, shUi.colors.background, 0.6) ?? base;
+    final radius = widget.borderRadius ?? shUi.radius.defaultRadius;
+
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(radius),
+      child: SizedBox(
+        width: widget.width,
+        height: widget.height ?? 16,
+        child: AnimatedBuilder(
+          animation: _controller,
+          builder: (context, _) {
+            final t = _controller.value;
+            return DecoratedBox(
+              decoration: BoxDecoration(
+                color: base,
+                gradient: LinearGradient(
+                  begin: Alignment(-1 + (2 * t) - 0.6, 0),
+                  end: Alignment(-1 + (2 * t) + 0.6, 0),
+                  colors: [
+                    base,
+                    highlight,
+                    base,
+                  ],
+                  stops: const [0.0, 0.5, 1.0],
+                ),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,147 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+/// sh-ui Slider — 범위 슬라이더.
+class ShUiSlider extends StatefulWidget {
+  final double value;
+  final ValueChanged<double>? onChanged;
+  final double min;
+  final double max;
+  final double step;
+  final bool enabled;
+
+  const ShUiSlider({
+    super.key,
+    required this.value,
+    this.onChanged,
+    this.min = 0,
+    this.max = 100,
+    this.step = 1,
+    this.enabled = true,
+  });
+
+  @override
+  State<ShUiSlider> createState() => _ShUiSliderState();
+}
+
+class _ShUiSliderState extends State<ShUiSlider> {
+  bool _hover = false;
+  bool _dragging = false;
+
+  double _clamp(double v) => v.clamp(widget.min, widget.max);
+
+  double _snap(double v) {
+    if (widget.step <= 0) return v;
+    return widget.min +
+        ((v - widget.min) / widget.step).round() * widget.step;
+  }
+
+  void _setValue(double next) {
+    final snapped = _clamp(_snap(next));
+    if (snapped == widget.value) return;
+    widget.onChanged?.call(snapped);
+  }
+
+  void _handleDrag(Offset localPosition, double trackWidth) {
+    final ratio = (localPosition.dx / trackWidth).clamp(0.0, 1.0);
+    _setValue(widget.min + ratio * (widget.max - widget.min));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+    final disabled = !widget.enabled || widget.onChanged == null;
+    final ratio = widget.max == widget.min
+        ? 0.0
+        : (widget.value - widget.min) / (widget.max - widget.min);
+
+    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: LayoutBuilder(
+          builder: (context, constraints) {
+            final trackWidth = constraints.maxWidth;
+            const trackHeight = 6.0;
+            const thumbSize = 18.0;
+            const totalHeight = thumbSize + 4;
+
+            return GestureDetector(
+              onHorizontalDragStart: disabled
+                  ? null
+                  : (d) {
+                      setState(() => _dragging = true);
+                      _handleDrag(d.localPosition, trackWidth);
+                    },
+              onHorizontalDragUpdate: disabled
+                  ? null
+                  : (d) => _handleDrag(d.localPosition, trackWidth),
+              onHorizontalDragEnd: disabled
+                  ? null
+                  : (_) => setState(() => _dragging = false),
+              onTapDown: disabled
+                  ? null
+                  : (d) => _handleDrag(d.localPosition, trackWidth),
+              child: SizedBox(
+                width: trackWidth,
+                height: totalHeight,
+                child: Stack(
+                  alignment: Alignment.centerLeft,
+                  clipBehavior: Clip.none,
+                  children: [
+                    // Track
+                    Container(
+                      width: trackWidth,
+                      height: trackHeight,
+                      decoration: BoxDecoration(
+                        color: colors.backgroundMuted,
+                        borderRadius: BorderRadius.circular(trackHeight / 2),
+                      ),
+                    ),
+                    // Range (filled portion)
+                    Container(
+                      width: ratio * trackWidth,
+                      height: trackHeight,
+                      decoration: BoxDecoration(
+                        color: colors.primary,
+                        borderRadius: BorderRadius.circular(trackHeight / 2),
+                      ),
+                    ),
+                    // Thumb
+                    Positioned(
+                      left: ratio * trackWidth - thumbSize / 2,
+                      child: AnimatedContainer(
+                        duration: const Duration(milliseconds: 80),
+                        width: thumbSize,
+                        height: thumbSize,
+                        decoration: BoxDecoration(
+                          color: colors.background,
+                          shape: BoxShape.circle,
+                          border: Border.all(
+                            color: colors.primary,
+                            width: shUi.borderWidth.strong,
+                          ),
+                          boxShadow: (_hover || _dragging)
+                              ? [
+                                  BoxShadow(
+                                    color: colors.primary.withValues(alpha: 0.2),
+                                    blurRadius: 8,
+                                  ),
+                                ]
+                              : [],
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+enum ShUiSpinnerSize { sm, md, lg }
+
+/// sh-ui Spinner — 짧은 비동기 작업의 로딩 표시.
+///
+/// 버튼·입력 등에 인라인으로 사용. 200ms 이상 걸리는 작업에 즉시 피드백을
+/// 주는 원칙에 맞춘다.
+class ShUiSpinner extends StatelessWidget {
+  final ShUiSpinnerSize size;
+
+  /// 색상. 생략 시 현재 텍스트 색 따라감(foreground).
+  final Color? color;
+
+  final String? semanticLabel;
+
+  const ShUiSpinner({
+    super.key,
+    this.size = ShUiSpinnerSize.md,
+    this.color,
+    this.semanticLabel,
+  });
+
+  double _diameter() => switch (size) {
+        ShUiSpinnerSize.sm => 14.0,
+        ShUiSpinnerSize.md => 18.0,
+        ShUiSpinnerSize.lg => 24.0,
+      };
+
+  double _strokeWidth() => switch (size) {
+        ShUiSpinnerSize.sm => 1.5,
+        ShUiSpinnerSize.md => 2.0,
+        ShUiSpinnerSize.lg => 2.5,
+      };
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final effective = color ?? DefaultTextStyle.of(context).style.color ?? shUi.colors.foreground;
+    final diameter = _diameter();
+
+    return Semantics(
+      label: semanticLabel ?? '로딩 중',
+      liveRegion: true,
+      child: SizedBox(
+        width: diameter,
+        height: diameter,
+        child: CircularProgressIndicator(
+          strokeWidth: _strokeWidth(),
+          valueColor: AlwaysStoppedAnimation<Color>(effective),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,109 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+enum ShUiSwitchSize { sm, md }
+
+/// sh-ui Switch — 토글 스위치. sm/md 사이즈.
+class ShUiSwitch extends StatefulWidget {
+  final bool checked;
+  final ValueChanged<bool>? onChanged;
+  final ShUiSwitchSize size;
+  final bool enabled;
+
+  const ShUiSwitch({
+    super.key,
+    this.checked = false,
+    this.onChanged,
+    this.size = ShUiSwitchSize.md,
+    this.enabled = true,
+  });
+
+  @override
+  State<ShUiSwitch> createState() => _ShUiSwitchState();
+}
+
+class _ShUiSwitchState extends State<ShUiSwitch> {
+  bool _hover = false;
+
+  double get _trackWidth => switch (widget.size) {
+        ShUiSwitchSize.sm => 36,
+        ShUiSwitchSize.md => 44,
+      };
+
+  double get _trackHeight => switch (widget.size) {
+        ShUiSwitchSize.sm => 20,
+        ShUiSwitchSize.md => 24,
+      };
+
+  double get _thumbSize => switch (widget.size) {
+        ShUiSwitchSize.sm => 14,
+        ShUiSwitchSize.md => 18,
+      };
+
+  double get _thumbPadding => 3;
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+    final disabled = !widget.enabled || widget.onChanged == null;
+
+    final trackColor = widget.checked ? colors.primary : colors.backgroundMuted;
+    final thumbColor = widget.checked ? colors.primaryForeground : colors.foregroundMuted;
+    final thumbOffset = widget.checked
+        ? _trackWidth - _thumbSize - _thumbPadding * 2
+        : 0.0;
+
+    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.onChanged!(!widget.checked),
+          child: AnimatedContainer(
+            duration: const Duration(milliseconds: 150),
+            curve: Curves.easeOut,
+            width: _trackWidth,
+            height: _trackHeight,
+            decoration: BoxDecoration(
+              color: _hover && !disabled
+                  ? Color.lerp(trackColor, colors.foreground, 0.08)!
+                  : trackColor,
+              borderRadius: BorderRadius.circular(_trackHeight / 2),
+              border: Border.all(
+                color: widget.checked ? Colors.transparent : colors.border,
+              ),
+            ),
+            child: Stack(
+              children: [
+                AnimatedPositioned(
+                  duration: const Duration(milliseconds: 150),
+                  curve: Curves.easeOut,
+                  left: _thumbPadding + thumbOffset,
+                  top: _thumbPadding,
+                  child: Container(
+                    width: _thumbSize,
+                    height: _thumbSize,
+                    decoration: BoxDecoration(
+                      color: widget.checked ? thumbColor : colors.background,
+                      shape: BoxShape.circle,
+                      boxShadow: [
+                        BoxShadow(
+                          color: Colors.black.withValues(alpha: 0.1),
+                          blurRadius: 2,
+                          offset: const Offset(0, 1),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}