npm - sh-ui-cli - Versions diffs - 0.82.3 → 0.84.0 - Mend

sh-ui-cli 0.82.3 → 0.84.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/data/changelog/versions.json CHANGED Viewed

@@ -2,6 +2,31 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.84.0",
+      "date": "2026-05-13",
+      "title": "Sidebar — Brand 컴파운드 primitive (브랜드 카드 · 워크스페이스 스위처 · 유저 프로필)",
+      "type": "minor",
+      "highlights": [
+        "**`SidebarBrand` 컴파운드 primitive 신설 — 브랜드 카드 / 워크스페이스 스위처 / 유저 프로필 의 90% 를 커버** — `<SidebarHeader>` / `<SidebarFooter>` 안에서 매번 박던 패턴 (icon + title + subtitle + trailing chevron) 을 단일 합성으로. Card/Dialog 와 동일한 separate-exports 컨벤션.",
+        "**Exports (6개)**: `SidebarBrand` (행 wrapper, 내부 `data-when-collapsed=\"center\"` 자동 적용) · `SidebarBrandIcon` (항상 visible, collapsed 시 sole 요소) · `SidebarBrandText` (`data-when-collapsed=\"hide\"`) · `SidebarBrandTitle` (단일 줄 본문, truncate 내장) · `SidebarBrandSubtitle` (보조 줄, foreground-muted) · `SidebarBrandAction` (`data-when-collapsed=\"hide\"`, ml-auto trailing icon).",
+        "**v0.83.0 의 `data-when-collapsed` 컨벤션 내장** — 사용자가 attribute 박지 않아도 collapsible=\"icon\" 모드 전환 시 자동 적응. 인터랙티브 케이스는 `<DropdownMenuTrigger render={<button data-when-collapsed=\"strip-chrome\" />}>` 로 wrap.",
+        "**3 변종 모두 지원** — plain `styles.css` / module `styles.module.css` 에 룰 직접, tailwind 변종은 utility 클래스로 동등 스타일. 듀얼카피 (apps/docs) 동기화."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.84.0"
+    },
+    {
+      "version": "0.83.0",
+      "date": "2026-05-13",
+      "title": "Sidebar — data-when-collapsed 컨벤션 (custom JSX 의 collapsed/icon 자동 적응)",
+      "type": "minor",
+      "highlights": [
+        "**`<SidebarHeader>` / `<SidebarFooter>` 안 사용자 custom JSX 가 `collapsible=\"icon\"` 모드 전환 시 `useSidebar()` 훅 + 조건부 렌더 ceremony 없이 attribute 한 줄로 자동 적응** — 새 export 0개, 발견성 좋은 plain CSS 컨벤션. 값 (공백 구분 다중 토큰, `~=` 매처): `hide` (display:none) · `center` (가운데 정렬 + 좌우 padding 제거) · `strip-chrome` (border / background 투명). 워크스페이스 스위처 · 브랜드 카드 · 유저 프로필 등 admin/dashboard sidebar 의 흔한 패턴에 매번 박던 수동 처리 일소.",
+        "예시 — `<button data-when-collapsed=\"center strip-chrome\">  <Avatar />  <div data-when-collapsed=\"hide\">{name}</div>  <ChevronsUpDown data-when-collapsed=\"hide\" /></button>` — collapsed 모드에선 Avatar 만 가운데 정렬돼 보이고 카드 chrome 사라짐.",
+        "**3 변종 모두 지원** — plain `styles.css` / module `styles.module.css` 에 직접 룰. tailwind 변종은 CSS import 없어 `SidebarProvider` mount 시 1회 head 에 `<style id=\"sh-ui-sidebar-helpers\">` inject (모듈 레벨 dedup). 사용자 코드는 변종 무관 동일 attribute 만 박으면 됨."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.83.0"
+    },
     {
       "version": "0.82.3",
       "date": "2026-05-13",

package/data/registry/react/components/sidebar/index.module.tsx CHANGED Viewed

@@ -511,6 +511,66 @@ export function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTML
   );
 }
+/* ───────────── Brand (compound primitive, v0.84.0+) ─────────────
+ * data-when-collapsed 컨벤션 내장. plain 변종 주석 참고. */
+export function SidebarBrand({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="center"
+      className={cn(styles.sidebar__brand, className)}
+      {...props}
+    />
+  );
+}
+export function SidebarBrandIcon({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(styles.sidebar__brand_icon, className)}
+      {...props}
+    />
+  );
+}
+export function SidebarBrandText({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn(styles.sidebar__brand_text, className)}
+      {...props}
+    />
+  );
+}
+export function SidebarBrandTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(styles.sidebar__brand_title, className)}
+      {...props}
+    />
+  );
+}
+export function SidebarBrandSubtitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(styles.sidebar__brand_subtitle, className)}
+      {...props}
+    />
+  );
+}
+export function SidebarBrandAction({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn(styles.sidebar__brand_action, className)}
+      {...props}
+    />
+  );
+}
 /** Sidebar의 스크롤 영역. 메뉴/그룹 목록을 둔다. */
 export function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (

package/data/registry/react/components/sidebar/index.tailwind.tsx CHANGED Viewed

@@ -10,6 +10,29 @@ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const MOBILE_BREAKPOINT = 768;
+/**
+ * v0.83.0+ — `data-when-collapsed` 컨벤션을 위한 CSS 룰 inject.
+ *
+ * plain/module 변종은 styles.css/.module.css 가 import 되며 자동으로 룰이 깔리는데,
+ * tailwind 변종은 별도 CSS import 가 없으므로 SidebarProvider mount 시 한 번만 head
+ * 에 <style> 박는다. id="sh-ui-sidebar-helpers" 로 중복 inject 방지.
+ *
+ * 토큰: hide(display:none) · center(가운데 정렬 + 좌우 padding 0) · strip-chrome
+ * (border/bg 투명). `~=` 매처로 공백 구분 다중 토큰 지원.
+ */
+const SIDEBAR_HELPER_STYLE_ID = "sh-ui-sidebar-helpers";
+const SIDEBAR_HELPER_CSS = `[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="hide"]{display:none}[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="center"]{justify-content:center;padding-left:0;padding-right:0}[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="strip-chrome"]{border-color:transparent;background-color:transparent}`;
+function useSidebarHelperStyles() {
+  React.useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(SIDEBAR_HELPER_STYLE_ID)) return;
+    const style = document.createElement("style");
+    style.id = SIDEBAR_HELPER_STYLE_ID;
+    style.textContent = SIDEBAR_HELPER_CSS;
+    document.head.appendChild(style);
+  }, []);
+}
 const FOCUSABLE_SELECTOR =
   'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -77,6 +100,7 @@ export interface SidebarProviderProps extends React.HTMLAttributes<HTMLDivElemen
 export function SidebarProvider({
   defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, embedded, ...props
 }: SidebarProviderProps) {
+  useSidebarHelperStyles();
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
   const [_open, _setOpen] = React.useState(defaultOpen);
@@ -328,6 +352,66 @@ export function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTML
   return <div className={cn("flex flex-col gap-[var(--space-2)] p-[var(--space-2)] overflow-hidden", className)} {...props} />;
 }
+/* ───────────── Brand (compound primitive, v0.84.0+) ─────────────
+ * data-when-collapsed 컨벤션 내장. plain 변종 주석 참고. */
+export function SidebarBrand({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="center"
+      className={cn("flex flex-row items-center gap-[var(--space-2)] px-[var(--space-2)] py-[var(--space-2)] rounded-[var(--radius)] min-w-0", className)}
+      {...props}
+    />
+  );
+}
+export function SidebarBrandIcon({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex items-center justify-center shrink-0 size-8 rounded-[calc(var(--radius)-2px)]", className)}
+      {...props}
+    />
+  );
+}
+export function SidebarBrandText({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn("flex flex-col flex-1 min-w-0 gap-0", className)}
+      {...props}
+    />
+  );
+}
+export function SidebarBrandTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("text-[length:var(--text-sm)] font-[var(--weight-medium)] leading-tight truncate text-[color:var(--sidebar-fg)]", className)}
+      {...props}
+    />
+  );
+}
+export function SidebarBrandSubtitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("text-[length:var(--text-xs)] leading-tight truncate text-[color:var(--foreground-muted)]", className)}
+      {...props}
+    />
+  );
+}
+export function SidebarBrandAction({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn("ml-auto shrink-0 flex items-center justify-center", className)}
+      {...props}
+    />
+  );
+}
 export function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("flex flex-col flex-1 min-h-0 overflow-y-auto gap-0", className)} {...props} />;
 }

package/data/registry/react/components/sidebar/index.tsx CHANGED Viewed

@@ -521,6 +521,92 @@ export function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTML
   );
 }
+/* ───────────── Brand (compound primitive, v0.84.0+) ─────────────
+ * SidebarHeader / SidebarFooter 의 흔한 패턴 (브랜드 카드 · 워크스페이스 스위처 ·
+ * 유저 프로필) 의 90% 를 커버. data-when-collapsed 컨벤션을 내장해 사용자가
+ * attribute 박지 않아도 collapsed/icon 모드 자동 적응.
+ *
+ * 정적 예시:
+ *   <SidebarBrand>
+ *     <SidebarBrandIcon><Logo /></SidebarBrandIcon>
+ *     <SidebarBrandText>
+ *       <SidebarBrandTitle>Atlas</SidebarBrandTitle>
+ *       <SidebarBrandSubtitle>workspace</SidebarBrandSubtitle>
+ *     </SidebarBrandText>
+ *   </SidebarBrand>
+ *
+ * 인터랙티브 (워크스페이스 스위처):
+ *   <DropdownMenu>
+ *     <DropdownMenuTrigger render={<button data-when-collapsed='strip-chrome' />}>
+ *       <SidebarBrand>...</SidebarBrand>
+ *     </DropdownMenuTrigger>
+ *     ...
+ *   </DropdownMenu>
+ */
+/** 브랜드 행 wrapper. collapsed 일 땐 가운데 정렬 + 좌우 padding 0 (data-when-collapsed=center 내장). */
+export function SidebarBrand({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="center"
+      className={cn("sh-ui-sidebar__brand", className)}
+      {...props}
+    />
+  );
+}
+/** 항상 visible 한 아이콘 슬롯. collapsed 일 땐 SidebarBrand 의 유일한 요소. */
+export function SidebarBrandIcon({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("sh-ui-sidebar__brand-icon", className)}
+      {...props}
+    />
+  );
+}
+/** 텍스트 컨테이너. collapsed 일 땐 hidden (data-when-collapsed=hide 내장). */
+export function SidebarBrandText({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn("sh-ui-sidebar__brand-text", className)}
+      {...props}
+    />
+  );
+}
+/** 단일 줄 본문 (편의) — sh-ui-sidebar__brand-title 클래스만 박는다. */
+export function SidebarBrandTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("sh-ui-sidebar__brand-title", className)}
+      {...props}
+    />
+  );
+}
+/** 보조 줄 — sh-ui-sidebar__brand-subtitle. text-foreground-muted + text-xs. */
+export function SidebarBrandSubtitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("sh-ui-sidebar__brand-subtitle", className)}
+      {...props}
+    />
+  );
+}
+/** Trailing icon (드롭다운 chevron 등). collapsed 일 땐 hidden. */
+export function SidebarBrandAction({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-when-collapsed="hide"
+      className={cn("sh-ui-sidebar__brand-action", className)}
+      {...props}
+    />
+  );
+}
 /** Sidebar의 스크롤 영역. 메뉴/그룹 목록을 둔다. */
 export function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (

package/data/registry/react/components/sidebar/styles.css CHANGED Viewed

@@ -288,6 +288,87 @@
   border-bottom: 1px solid var(--sidebar-border);
 }
+/* ───────────── data-when-collapsed 컨벤션 (v0.83.0+) ─────────────
+ * SidebarHeader / SidebarFooter 안의 사용자 custom JSX (WorkspaceSwitcher,
+ * 브랜드 카드, 유저 프로필 등) 가 collapsible="icon" 모드 전환 시 자동
+ * 적응하도록 일반 attribute 컨벤션 제공. 사용자가 useSidebar() 훅 + 조건부
+ * 렌더 ceremony 없이 attribute 한 줄로 처리.
+ *
+ * 사용:
+ *   <button data-when-collapsed="center strip-chrome">
+ *     <Avatar />
+ *     <div data-when-collapsed="hide">{name}</div>
+ *     <ChevronsUpDown data-when-collapsed="hide" />
+ *   </button>
+ *
+ * 값(공백 구분 토큰 — `~=` 매처):
+ *   hide          — collapsed/icon 모드에서 display:none
+ *   center        — 가로 가운데 정렬 + 좌우 padding 제거
+ *   strip-chrome  — border / background 투명화 (카드 chrome 제거) */
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="hide"] {
+  display: none;
+}
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="center"] {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+.sh-ui-sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="strip-chrome"] {
+  border-color: transparent;
+  background-color: transparent;
+}
+/* ───────────── Brand (compound primitive, v0.84.0+) ───────────── */
+.sh-ui-sidebar__brand {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius);
+  min-width: 0;
+}
+.sh-ui-sidebar__brand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: calc(var(--radius) - 2px);
+}
+.sh-ui-sidebar__brand-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  min-width: 0;
+  gap: 0;
+}
+.sh-ui-sidebar__brand-title {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: 1.25;
+  color: var(--sidebar-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sh-ui-sidebar__brand-subtitle {
+  font-size: var(--text-xs);
+  line-height: 1.25;
+  color: var(--foreground-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sh-ui-sidebar__brand-action {
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .sh-ui-sidebar__content {
   display: flex;
   flex-direction: column;

package/data/registry/react/components/sidebar/styles.module.css CHANGED Viewed

@@ -285,6 +285,73 @@
   border-bottom: 1px solid var(--sidebar-border);
 }
+/* data-when-collapsed 컨벤션 (v0.83.0+) — 사용자 custom JSX (WorkspaceSwitcher 등) 가
+ * collapsible="icon" 모드 전환 시 자동 적응. 값: hide / center / strip-chrome.
+ * 자세한 설명은 plain 변종 styles.css 참고. */
+.sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="hide"] {
+  display: none;
+}
+.sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="center"] {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+.sidebar[data-state="collapsed"][data-collapsible="icon"] [data-when-collapsed~="strip-chrome"] {
+  border-color: transparent;
+  background-color: transparent;
+}
+/* ───────────── Brand (compound primitive, v0.84.0+) ───────────── */
+.sidebar__brand {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius);
+  min-width: 0;
+}
+.sidebar__brand_icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: calc(var(--radius) - 2px);
+}
+.sidebar__brand_text {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  min-width: 0;
+  gap: 0;
+}
+.sidebar__brand_title {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: 1.25;
+  color: var(--sidebar-fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sidebar__brand_subtitle {
+  font-size: var(--text-xs);
+  line-height: 1.25;
+  color: var(--foreground-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sidebar__brand_action {
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 .sidebar__content {
   display: flex;
   flex-direction: column;

package/data/registry/react/tokens-used.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "$description": "컴포넌트별 토큰 의존성 (var(--*) 추출). build-registry-tokens.mjs 가 자동 생성.",
-  "$generated": "2026-05-12T23:53:11.079Z",
+  "$generated": "2026-05-13T03:22:30.348Z",
   "components": {
     "button": {
       "plain": [
@@ -678,6 +678,7 @@
         "--duration-fast",
         "--duration-slow",
         "--foreground",
+        "--foreground-muted",
         "--opacity-disabled",
         "--radius",
         "--shadow-xl",
@@ -688,6 +689,7 @@
         "--text-lg",
         "--text-sm",
         "--text-xs",
+        "--weight-medium",
         "--z-modal",
         "--z-overlay"
       ],

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.82.3",
+  "version": "0.84.0",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {