@teamblind-chorus/ui 1.0.1 → 1.1.0

package/agents/patterns/layout.md

@@ -4,6 +4,8 @@ image: ./layout.png
 status: canonical
 ---
 
+> 🇰🇷 한국어: [`i18n/ko/patterns/layout.md`](../i18n/ko/patterns/layout.md)
+
 ## Intent
 
 Page-level scaffolding and navigation chrome across the five main tab destinations — **Home, Company, Explore, Jobs, Notifications** — plus a channel profile. This board is the reference for *frame*, not content: how a screen seats its top bar, in-page tabs, filter rail, scrolling body, and bottom tab bar so every destination reads as one geometry. When composing any full screen, match the scaffold here before filling slots.

package/agents/patterns/modals.md

@@ -4,6 +4,8 @@ image: ./modals.png
 status: canonical
 ---
 
+> 🇰🇷 한국어: [`i18n/ko/patterns/modals.md`](../i18n/ko/patterns/modals.md)
+
 ## Intent
 
 Overlay surfaces that interrupt the flow for a commit or disclosure — confirmation Dialogs, info Dialogs, a full-screen disclosure panel, bottom-anchored confirmation CTAs, and BottomSheet purchase flows. These are the interaction-contract primitives: `dialog` and `bottom-sheet` are `visualReuse: "locked"` — chosen for behavior (scrim, focus trap, ARIA), never borrowed for shape. Reach here for "block the screen until the user decides".

package/agents/patterns/visual.md

@@ -4,6 +4,8 @@ image: ./visual.png
 status: canonical
 ---
 
+> 🇰🇷 한국어: [`i18n/ko/patterns/visual.md`](../i18n/ko/patterns/visual.md)
+
 ## Intent
 
 Image-bearing and expressive surfaces — empty-state illustrations, photo grids, media-rich cover cards, colorful category tiles, illustration banners, and gated-channel covers. This board is the reference for the **image-area contract**: every `assetType: "image"` slot fills with the universal `/placeholder.png` and swaps to a context image by changing only the `src`, never the slot's footprint. Reach here for "this surface carries pictures, not just text".

package/agents/usage.json

@@ -50,7 +50,7 @@
     "button": {
       "import": "Button",
       "from": "@teamblind-chorus/ui",
-      "note": "All button roles are the single `Button` export selected by the `variant` prop — there is NO `<Fab>`, `<IconButton>`, `<ToggleButton>`, or `<Toolbar>` export. An `import { Fab }` failure does NOT mean the family is missing; reach for `<Button variant=\"fab\">`.",
+      "note": "All button ROLES are the single `Button` export selected by the `variant` prop — there is NO `<Fab>`, `<IconButton>`, `<ToggleButton>`, or `<Toolbar>` export. An `import { Fab }` failure does NOT mean the family is missing; reach for `<Button variant=\"fab\">`. The one separate named export is `ButtonGroup` (the `group` sub) — a layout wrapper for two or more Buttons, NOT a Button variant.",
       "subs": {
         "standard": {
           "access": "variant",
@@ -58,6 +58,12 @@
           "variant": "standard",
           "example": "<Button variant=\"standard\" … />"
         },
+        "group": {
+          "access": "named",
+          "import": "ButtonGroup",
+          "example": "<ButtonGroup variant=\"docked\" label={<>선택한 직군: <strong>SW개발</strong></>}><Button appearance=\"outlined\" size=\"large\">연봉 정보</Button><Button appearance=\"primary\" size=\"large\">추천 채용공고</Button></ButtonGroup>",
+          "note": "Named export — NOT a Button variant (there is no `<Button variant=\"group\">`). Lays out adjacent Buttons; `variant=\"docked\"` is the bottom-pinned action bar (surface + 16px inset + 8px gap + upward `sys.elevation.sheet` shadow + optional `label`). Renders in flow — PageShell owns the pinning."
+        },
         "fab": {
           "access": "variant",
           "on": "Button",
@@ -243,7 +249,7 @@
     "metadata": {
       "import": "Metadata",
       "from": "@teamblind-chorus/ui",
-      "note": "Both shapes are the single `Metadata` export — the one-line comment shape is `variant=\"compact\"`, NOT a separate `<MetadataCompact>`. Leading thumbnail is the `avatar` prop (NOT `thumbnail`); the secondary line is either a `subtitle` string or a `meta` string array — not children.",
+      "note": "Both shapes are the single `Metadata` export — the one-line channel-detail shape is `variant=\"compact\"`, NOT a separate `<MetadataCompact>`. Leading thumbnail is the `avatar` prop (NOT `thumbnail`) on both shapes; the secondary line is either a `subtitle` string or a `meta` string array — not children.",
       "subs": {
         "standard": {
           "access": "named",
@@ -254,7 +260,7 @@
           "access": "variant",
           "on": "Metadata",
           "variant": "compact",
-          "example": "<Metadata variant=\"compact\" meta={[\"Maple Mill Bakery\", \"ryestarter\"]} timestamp=\"35m\" />"
+          "example": "<Metadata variant=\"compact\" avatar={{ src, alt }} meta={[\"Maple Mill Bakery\", \"ryestarter\"]} timestamp=\"35m\" />"
         }
       }
     },
@@ -304,6 +310,12 @@
       "note": "Compose the bars INTO the shell — do NOT hand-roll a flex column, and do NOT add position:sticky/fixed to the bars (that double-applies their safe-area insets). The dev-only usePinnedBarGuard warns when a bar is rendered inside a scrolling region instead.",
       "example": "<PageShell nav={<NavigationBar variant=\"home\" … />} tabBar={<TabBar … />}>… scrolling screen content …</PageShell>"
     },
+    "pagination": {
+      "import": "Pagination",
+      "from": "@teamblind-chorus/ui",
+      "note": "Decorative only — the root is `aria-hidden` and dots are not buttons. An inline element with intrinsic width: the host owns horizontal placement (e.g. centering under its pager) as well as the active index (e.g. via IntersectionObserver on its snap targets), and MUST keep later pages keyboard-reachable on its own. Renders nothing when `count` < 2.",
+      "example": "<Pagination count={5} activeIndex={2} />"
+    },
     "profile-header": {
       "import": "ProfileHeader",
       "from": "@teamblind-chorus/ui",

package/dist/index.cjs

@@ -237,9 +237,12 @@ function useFullBleedGuard(ref, name) {
 }
 function Banner({
   appearance = "default",
+  outlined = false,
+  title,
   icon,
   thumbnail,
   action,
+  trailingIcon,
   children,
   className,
   ...rest
@@ -250,13 +253,19 @@ function Banner({
     "div",
     {
       ref,
-      className: joinClasses("chorus-banner", `chorus-banner--${appearance}`, className),
+      className: joinClasses(
+        "chorus-banner",
+        `chorus-banner--${appearance}`,
+        outlined && "chorus-banner--outlined",
+        className
+      ),
       role: "note",
       ...rest,
       children: [
         thumbnail ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chorus-banner__thumbnail", "aria-hidden": "true", children: thumbnail }) : null,
         !thumbnail && icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chorus-banner__icon", "aria-hidden": "true", children: icon }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chorus-banner__content", children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "chorus-banner__title", children: title }) : null,
           children ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "chorus-banner__body", children }) : null,
           action ? /* @__PURE__ */ jsxRuntime.jsx(
             "a",
@@ -267,7 +276,8 @@ function Banner({
               children: action.label
             }
           ) : null
-        ] })
+        ] }),
+        trailingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chorus-banner__trailing-icon", "aria-hidden": "true", children: trailingIcon }) : null
       ]
     }
   );
@@ -1847,7 +1857,7 @@ var FORCEABLE_STATES3 = /* @__PURE__ */ new Set(["hovered", "pressed", "focused"
 var SPECS = {
   filter: filter_spec_default,
   tag: tag_spec_default,
-  "toggle": toggle_spec_default
+  toggle: toggle_spec_default
 };
 function pickAppearance(spec, appearance) {
   const appearances = spec.appearances || {};
@@ -1989,11 +1999,11 @@ function ButtonToggle({ active = false, ...rest }) {
 }
 var VARIANTS = {
   fab: ButtonFab,
-  "icon": ButtonIcon,
-  "text": ButtonText,
-  "check": ButtonCheck,
-  "toolbar": ButtonToolbar,
-  "toggle": ButtonToggle
+  icon: ButtonIcon,
+  text: ButtonText,
+  check: ButtonCheck,
+  toolbar: ButtonToolbar,
+  toggle: ButtonToggle
 };
 var Button = react.forwardRef(function Button2({ variant, ...rest }, ref) {
   const Impl = variant && VARIANTS[variant] || ButtonStandard;
@@ -2155,6 +2165,35 @@ function Bubble({
     }
   );
 }
+function ButtonGroup({
+  variant = "inline",
+  orientation = "horizontal",
+  label,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const docked = variant === "docked";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: joinClasses(
+        "chorus-button-group",
+        docked && "chorus-button-group--docked",
+        orientation === "vertical" && "chorus-button-group--vertical",
+        className
+      ),
+      role: "group",
+      "aria-label": ariaLabel,
+      ...rest,
+      children: [
+        label != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chorus-button-group__label", children: label }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chorus-button-group__row", children })
+      ]
+    }
+  );
+}
 
 // ../../schema/components/header/main.spec.json
 var main_spec_default = {
@@ -2315,6 +2354,7 @@ function EntryRow({
       "span",
       {
         className: "chorus-entry-row__trailing",
+        "data-nested-action": "",
         onClick: (e) => e.stopPropagation(),
         onKeyDown: (e) => e.stopPropagation(),
         children: trailing
@@ -2436,6 +2476,7 @@ function List({
                 "span",
                 {
                   className: "chorus-list__trailing",
+                  "data-nested-action": "",
                   onClick: (e) => e.stopPropagation(),
                   onKeyDown: (e) => e.stopPropagation(),
                   children: item.trailingIcon
@@ -3189,13 +3230,13 @@ function Metadata({
   const hasMeta = Array.isArray(meta) && meta.length > 0;
   const hasSubtitle = !hasMeta && subtitle != null && subtitle !== "";
   if (variant === "compact") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: joinClasses("chorus-metadata", "chorus-metadata--compact", className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chorus-metadata__meta", children: [
-      hasMeta ? metaParts(meta) : null,
-      timestamp ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chorus-metadata__dot", "aria-hidden": "true", children: "\xB7" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chorus-metadata__timestamp", children: timestamp })
-      ] }) : null
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: joinClasses("chorus-metadata", "chorus-metadata--compact", className), ...rest, children: [
+      avatar ? /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { size: 32, ...avatar }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chorus-metadata__meta", children: [
+        hasMeta ? metaParts(meta) : null,
+        timestamp ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chorus-metadata__timestamp", children: timestamp }) : null
+      ] })
+    ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: joinClasses("chorus-metadata", className), ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { size: 32, ...avatar ?? { alt: typeof name === "string" ? name : "" } }),
@@ -3486,6 +3527,33 @@ function FeedAd({
     ) : null
   ] });
 }
+function Pagination({
+  count = 0,
+  activeIndex = 0,
+  className,
+  ...rest
+}) {
+  if (count < 2) return null;
+  const active = Math.max(0, Math.min(count - 1, activeIndex));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: joinClasses("chorus-pagination", className),
+      "aria-hidden": "true",
+      ...rest,
+      children: Array.from({ length: count }, (_, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: joinClasses(
+            "chorus-pagination__dot",
+            idx === active && "chorus-pagination__dot--active"
+          )
+        },
+        idx
+      ))
+    }
+  );
+}
 var MAX_CARDS = 5;
 function PostCarousel({
   items = [],
@@ -3546,16 +3614,7 @@ function PostCarousel({
             ))
           }
         ),
-        cards.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chorus-post-carousel__pagination", "aria-hidden": "true", children: cards.map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: joinClasses(
-              "chorus-post-carousel__dot",
-              idx === activeIndex && "chorus-post-carousel__dot--active"
-            )
-          },
-          idx
-        )) }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(Pagination, { count: cards.length, activeIndex })
       ]
     }
   );
@@ -3706,16 +3765,7 @@ function ProfileCarousel({
             ))
           }
         ),
-        cards.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chorus-profile-carousel__pagination", "aria-hidden": "true", children: cards.map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: joinClasses(
-              "chorus-profile-carousel__dot",
-              idx === activeIndex && "chorus-profile-carousel__dot--active"
-            )
-          },
-          idx
-        )) }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(Pagination, { count: cards.length, activeIndex })
       ]
     }
   );
@@ -4319,7 +4369,8 @@ var input_spec_default = {
       overlay: {
         color: "text",
         opacity: "sys.state.pressed"
-      }
+      },
+      nestedActionScope: "The pressed overlay (and hover stroke) is suppressed while the pointer presses / hovers the trailing clear button \u2014 that '\xD7' is an independent nested action, so the small control owns the state and the large field does not also read as pressed. The visual-state boundary matches the action boundary."
     },
     active: {
       overlay: null,
@@ -4505,7 +4556,8 @@ var textarea_spec_default = {
     hovered: { overlay: null, border: "borderHover" },
     pressed: {
       border: "borderHover",
-      overlay: { color: "text", opacity: "sys.state.pressed" }
+      overlay: { color: "text", opacity: "sys.state.pressed" },
+      nestedActionScope: "The pressed overlay (and hover stroke) is suppressed while the pointer presses / hovers the trailing clear button \u2014 that '\xD7' is an independent nested action, so the small control owns the state and the large field does not also read as pressed. The visual-state boundary matches the action boundary."
     },
     active: {
       overlay: null,
@@ -4642,7 +4694,8 @@ var search_spec_default = {
       overlay: {
         color: "text",
         opacity: "sys.state.pressed"
-      }
+      },
+      nestedActionScope: "The pressed overlay (and hover stroke) is suppressed while the pointer presses / hovers the trailing clear button \u2014 that '\xD7' is an independent nested action, so the small control owns the state and the large field does not also read as pressed. The visual-state boundary matches the action boundary."
     },
     active: {
       overlay: null,
@@ -5013,6 +5066,7 @@ function FormFieldBox({
           {
             type: "button",
             className: "chorus-field__clear",
+            "data-nested-action": "",
             "aria-label": "Clear",
             onClick: handleClear,
             children: /* @__PURE__ */ jsxRuntime.jsx(XCircleFillIcon, {})
@@ -5107,7 +5161,7 @@ var FormFieldSelect = Select;
 var VARIANTS3 = {
   input: FormFieldInput,
   textarea: FormFieldTextarea,
-  "search": FormFieldSearchBar,
+  search: FormFieldSearchBar,
   select: FormFieldSelect
 };
 function FormField({ variant = "input", ...rest }) {
@@ -5855,6 +5909,7 @@ exports.BottomNav = TabBar;
 exports.BottomSheet = BottomSheet;
 exports.Bubble = Bubble;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.Carousel = Carousel;
 exports.ChannelList = SuggestionList;
 exports.ChannelRail = AvatarRail;
@@ -5877,6 +5932,7 @@ exports.NavCardGroup = NavCardGroup;
 exports.NavList = NavList;
 exports.NavigationBar = NavigationBar;
 exports.PageShell = PageShell;
+exports.Pagination = Pagination;
 exports.PostCarousel = PostCarousel;
 exports.ProfileCarousel = ProfileCarousel;
 exports.ProfileHeader = ProfileHeader;