sh-ui-cli 0.15.0 → 0.21.1

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

@@ -0,0 +1,145 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+/// sh-ui Label — 폼 필드 레이블. title, subtitle, description, caption 하위 구성.
+///
+/// ShUiLabel(
+///   isRequired: true,
+///   child: Column(children: [
+///     ShUiLabelTitle('이름'),
+///     ShUiLabelDescription('성과 이름을 입력해주세요'),
+///   ]),
+/// )
+class ShUiLabel extends StatelessWidget {
+  final Widget child;
+  final bool isRequired;
+
+  const ShUiLabel({
+    super.key,
+    required this.child,
+    this.isRequired = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return _ShUiLabelScope(
+      isRequired: isRequired,
+      child: child,
+    );
+  }
+}
+
+class ShUiLabelTitle extends StatelessWidget {
+  final String text;
+
+  const ShUiLabelTitle(this.text, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final scope = _ShUiLabelScope.of(context);
+    final isRequired = scope?.isRequired ?? false;
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Text(
+          text,
+          style: TextStyle(
+            color: shUi.colors.foreground,
+            fontSize: shUi.text.sm,
+            fontWeight: shUi.weight.medium,
+            height: 1.4,
+          ),
+        ),
+        if (isRequired) ...[
+          const SizedBox(width: 2),
+          Text(
+            '*',
+            style: TextStyle(
+              color: shUi.colors.danger,
+              fontSize: shUi.text.sm,
+              fontWeight: shUi.weight.medium,
+            ),
+          ),
+        ],
+      ],
+    );
+  }
+}
+
+class ShUiLabelSubtitle extends StatelessWidget {
+  final String text;
+
+  const ShUiLabelSubtitle(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: 13,
+        fontWeight: shUi.weight.regular,
+        height: 1.4,
+      ),
+    );
+  }
+}
+
+class ShUiLabelDescription extends StatelessWidget {
+  final String text;
+
+  const ShUiLabelDescription(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: 13,
+        height: 1.5,
+      ),
+    );
+  }
+}
+
+class ShUiLabelCaption extends StatelessWidget {
+  final String text;
+  final bool isError;
+
+  const ShUiLabelCaption(this.text, {super.key, this.isError = false});
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    return Text(
+      text,
+      style: TextStyle(
+        color: isError ? shUi.colors.danger : shUi.colors.foregroundMuted,
+        fontSize: shUi.text.xs,
+        height: 1.5,
+      ),
+    );
+  }
+}
+
+class _ShUiLabelScope extends InheritedWidget {
+  final bool isRequired;
+
+  const _ShUiLabelScope({
+    required this.isRequired,
+    required super.child,
+  });
+
+  static _ShUiLabelScope? of(BuildContext context) {
+    return context.dependOnInheritedWidgetOfExactType<_ShUiLabelScope>();
+  }
+
+  @override
+  bool updateShouldNotify(covariant _ShUiLabelScope old) =>
+      isRequired != old.isRequired;
+}

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

@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+import 'sh_ui_dropdown_menu.dart';
+
+/// sh-ui Menubar — 상단 앱 메뉴바(파일/편집/보기 등).
+///
+/// 여러 개의 "메뉴"를 가로로 나열한다. 각 메뉴는 trigger 라벨 + 항목 리스트.
+///
+///   ShUiMenubar(
+///     menus: [
+///       ShUiMenubarMenu(
+///         label: '파일',
+///         items: const [
+///           ShUiDropdownMenuItem(value: 'new', label: '새로 만들기'),
+///           ShUiDropdownMenuItem(value: 'open', label: '열기…'),
+///         ],
+///         onSelected: (v) => ...,
+///       ),
+///       ShUiMenubarMenu(label: '편집', items: [...], onSelected: ...),
+///     ],
+///   )
+class ShUiMenubar extends StatelessWidget {
+  final List<ShUiMenubarMenu> menus;
+
+  const ShUiMenubar({
+    super.key,
+    required this.menus,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+
+    return Container(
+      padding: const EdgeInsets.all(4),
+      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.04),
+            blurRadius: 2,
+            offset: const Offset(0, 1),
+          ),
+        ],
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: menus
+            .map((m) => _MenubarItem(menu: m))
+            .toList(),
+      ),
+    );
+  }
+}
+
+/// Menubar 한 항목 — 라벨 + 드롭다운 항목 리스트.
+class ShUiMenubarMenu {
+  final String label;
+  final List<ShUiDropdownMenuEntry<dynamic>> items;
+  final ValueChanged<dynamic>? onSelected;
+
+  const ShUiMenubarMenu({
+    required this.label,
+    required this.items,
+    this.onSelected,
+  });
+}
+
+class _MenubarItem extends StatelessWidget {
+  final ShUiMenubarMenu menu;
+
+  const _MenubarItem({required this.menu});
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+
+    return ShUiDropdownMenu<dynamic>(
+      items: menu.items,
+      onSelected: menu.onSelected,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+        child: Text(
+          menu.label,
+          style: TextStyle(
+            color: colors.foreground,
+            fontSize: shUi.text.sm,
+            height: 1,
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,276 @@
+import 'package:flutter/material.dart';
+import '../foundation/sh_ui_tokens.dart';
+
+/// sh-ui Pagination — 페이지 단위 내비게이션.
+///
+/// ShUiPagination(
+///   page: 3,
+///   pageCount: 10,
+///   siblingCount: 1,
+///   onPageChanged: (p) => ...,
+/// )
+///
+/// - [page] / [pageCount]는 1-based.
+/// - [siblingCount] 만큼 현재 페이지 양옆을 펼치고, 그 바깥은 "..."로 접는다.
+/// - 첫/마지막 페이지 번호는 항상 보인다.
+class ShUiPagination extends StatelessWidget {
+  final int page;
+  final int pageCount;
+  final int siblingCount;
+  final ValueChanged<int>? onPageChanged;
+  final bool showPrevNext;
+
+  const ShUiPagination({
+    super.key,
+    required this.page,
+    required this.pageCount,
+    this.siblingCount = 1,
+    this.onPageChanged,
+    this.showPrevNext = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final shUi = Theme.of(context).extension<ShUiTheme>() ?? ShUiTheme.light;
+    final colors = shUi.colors;
+
+    if (pageCount <= 0) return const SizedBox.shrink();
+
+    final tokens = _buildRange();
+
+    final children = <Widget>[];
+
+    if (showPrevNext) {
+      children.add(
+        _NavButton(
+          label: '이전',
+          icon: Icons.chevron_left,
+          iconLeading: true,
+          enabled: page > 1 && onPageChanged != null,
+          onTap: () => onPageChanged?.call(page - 1),
+          shUi: shUi,
+          colors: colors,
+        ),
+      );
+    }
+
+    for (final token in tokens) {
+      if (token is int) {
+        final isActive = token == page;
+        children.add(
+          _PageButton(
+            label: '$token',
+            isActive: isActive,
+            enabled: !isActive && onPageChanged != null,
+            onTap: () => onPageChanged?.call(token),
+            shUi: shUi,
+            colors: colors,
+          ),
+        );
+      } else {
+        children.add(_Ellipsis(colors: colors, shUi: shUi));
+      }
+    }
+
+    if (showPrevNext) {
+      children.add(
+        _NavButton(
+          label: '다음',
+          icon: Icons.chevron_right,
+          iconLeading: false,
+          enabled: page < pageCount && onPageChanged != null,
+          onTap: () => onPageChanged?.call(page + 1),
+          shUi: shUi,
+          colors: colors,
+        ),
+      );
+    }
+
+    return Semantics(
+      label: 'Pagination',
+      container: true,
+      child: Wrap(
+        alignment: WrapAlignment.center,
+        crossAxisAlignment: WrapCrossAlignment.center,
+        spacing: 4,
+        runSpacing: 4,
+        children: children,
+      ),
+    );
+  }
+
+  /// 현재 페이지 주변 ±siblingCount + 양 끝 + dots 토큰.
+  List<Object> _buildRange() {
+    final totalSlots = siblingCount * 2 + 5;
+    if (pageCount <= totalSlots) {
+      return [for (var i = 1; i <= pageCount; i++) i];
+    }
+
+    final leftSibling = (page - siblingCount).clamp(1, pageCount);
+    final rightSibling = (page + siblingCount).clamp(1, pageCount);
+
+    final showLeftDots = leftSibling > 2;
+    final showRightDots = rightSibling < pageCount - 1;
+
+    if (!showLeftDots && showRightDots) {
+      final leftCount = 3 + 2 * siblingCount;
+      return [
+        for (var i = 1; i <= leftCount; i++) i,
+        _Dots.instance,
+        pageCount,
+      ];
+    }
+
+    if (showLeftDots && !showRightDots) {
+      final rightCount = 3 + 2 * siblingCount;
+      return [
+        1,
+        _Dots.instance,
+        for (var i = pageCount - rightCount + 1; i <= pageCount; i++) i,
+      ];
+    }
+
+    return [
+      1,
+      _Dots.instance,
+      for (var i = leftSibling; i <= rightSibling; i++) i,
+      _Dots.instance,
+      pageCount,
+    ];
+  }
+}
+
+class _Dots {
+  static const _Dots instance = _Dots._();
+  const _Dots._();
+}
+
+class _PageButton extends StatelessWidget {
+  final String label;
+  final bool isActive;
+  final bool enabled;
+  final VoidCallback onTap;
+  final ShUiTheme shUi;
+  final ShUiColorTokens colors;
+
+  const _PageButton({
+    required this.label,
+    required this.isActive,
+    required this.enabled,
+    required this.onTap,
+    required this.shUi,
+    required this.colors,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final bg = isActive ? colors.foreground : Colors.transparent;
+    final fg = isActive ? colors.background : colors.foreground;
+    final radius = BorderRadius.circular(shUi.radius.defaultRadius);
+
+    return Semantics(
+      selected: isActive,
+      button: !isActive,
+      label: isActive ? '현재 페이지 $label' : '페이지 $label',
+      child: Material(
+        color: bg,
+        borderRadius: radius,
+        child: InkWell(
+          onTap: enabled ? onTap : null,
+          borderRadius: radius,
+          child: Container(
+            constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
+            padding: const EdgeInsets.symmetric(horizontal: 10),
+            alignment: Alignment.center,
+            child: Text(
+              label,
+              style: TextStyle(
+                color: fg,
+                fontSize: shUi.text.sm,
+                fontWeight:
+                    isActive ? shUi.weight.medium : FontWeight.normal,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _NavButton extends StatelessWidget {
+  final String label;
+  final IconData icon;
+  final bool iconLeading;
+  final bool enabled;
+  final VoidCallback onTap;
+  final ShUiTheme shUi;
+  final ShUiColorTokens colors;
+
+  const _NavButton({
+    required this.label,
+    required this.icon,
+    required this.iconLeading,
+    required this.enabled,
+    required this.onTap,
+    required this.shUi,
+    required this.colors,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final radius = BorderRadius.circular(shUi.radius.defaultRadius);
+    final iconWidget = Icon(icon, size: 16, color: colors.foreground);
+    final textWidget = Text(
+      label,
+      style: TextStyle(color: colors.foreground, fontSize: shUi.text.sm),
+    );
+
+    return Opacity(
+      opacity: enabled ? 1 : shUi.opacity.disabled,
+      child: Material(
+        color: Colors.transparent,
+        borderRadius: radius,
+        child: InkWell(
+          onTap: enabled ? onTap : null,
+          borderRadius: radius,
+          child: Container(
+            constraints: const BoxConstraints(minHeight: 36),
+            padding: const EdgeInsets.symmetric(horizontal: 10),
+            alignment: Alignment.center,
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: iconLeading
+                  ? [iconWidget, const SizedBox(width: 6), textWidget]
+                  : [textWidget, const SizedBox(width: 6), iconWidget],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _Ellipsis extends StatelessWidget {
+  final ShUiColorTokens colors;
+  final ShUiTheme shUi;
+
+  const _Ellipsis({required this.colors, required this.shUi});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 36,
+      height: 36,
+      child: Center(
+        child: Text(
+          '…',
+          style: TextStyle(
+            color: colors.foregroundMuted,
+            fontSize: shUi.text.base,
+          ),
+        ),
+      ),
+    );
+  }
+}