sh-ui-cli 0.117.0 → 0.119.0

package/data/changelog/versions.json

@@ -2,6 +2,30 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.119.0",
+      "date": "2026-06-19",
+      "title": "Command 컴포넌트 — Cmd+K 명령 팔레트",
+      "type": "minor",
+      "highlights": [
+        "신규 Command — cmdk 위 sh-ui 명령 팔레트(9 컴포넌트). CommandDialog 로 Cmd+K 팝업(sh-ui Dialog 기반)",
+        "검색 필터·키보드 네비·접근성은 cmdk 에 위임, sh-ui 토큰 스타일. CommandItem value/keywords/onSelect 로 액션 실행",
+        "shadcn command 모델. docs dogfooding·액션 자동화는 후속 phase. Flutter 별도"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.119.0"
+    },
+    {
+      "version": "0.118.0",
+      "date": "2026-06-18",
+      "title": "Table 컴포넌트 — TanStack 데이터 테이블 (정렬·선택·페이지)",
+      "type": "minor",
+      "highlights": [
+        "신규 Table — presentational 프리미티브(Table/TableHeader/TableBody/TableRow/TableHead/TableCell/TableFooter/TableCaption). 네이티브 <table> + sh-ui 토큰, 의존성 0",
+        "TanStack Table v8 통합 예제 — 정렬·행 선택·페이지네이션이 동작하는 데이터 테이블(docs). 컬럼/셀 렌더는 100% 자유",
+        "shadcn 모델(headless 엔진 + presentational 레이어). 풀 기능(필터·고정·그룹화·DnD)은 후속 phase"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.118.0"
+    },
     {
       "version": "0.117.0",
       "date": "2026-06-18",

package/data/registry/react/components/command/command.test.tsx

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import * as React from "react";
+import {
+  Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut,
+} from "./index";
+
+function Sample({ onSelect }: { onSelect?: (v: string) => void }) {
+  return (
+    <Command>
+      <CommandInput placeholder="검색" />
+      <CommandList>
+        <CommandEmpty>결과 없음</CommandEmpty>
+        <CommandGroup heading="페이지">
+          <CommandItem value="components" keywords={["컴포넌트"]} onSelect={() => onSelect?.("components")}>
+            컴포넌트 <CommandShortcut>⌘C</CommandShortcut>
+          </CommandItem>
+          <CommandItem value="tokens" keywords={["토큰"]} onSelect={() => onSelect?.("tokens")}>토큰</CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="액션">
+          <CommandItem value="theme" keywords={["테마 전환"]} onSelect={() => onSelect?.("theme")}>테마 전환</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}
+
+describe("Command", () => {
+  it("그룹/아이템을 렌더", () => {
+    render(<Sample />);
+    expect(screen.getByText("컴포넌트")).toBeTruthy();
+    expect(screen.getByText("페이지")).toBeTruthy();
+    expect(screen.getByRole("option", { name: /토큰/ })).toBeTruthy();
+  });
+
+  it("입력으로 아이템을 필터", () => {
+    render(<Sample />);
+    fireEvent.change(screen.getByPlaceholderText("검색"), { target: { value: "테마" } });
+    expect(screen.getByText("테마 전환")).toBeTruthy();
+    expect(screen.queryByText("토큰")).toBeNull();
+  });
+
+  it("매칭 없으면 CommandEmpty 표시", () => {
+    render(<Sample />);
+    fireEvent.change(screen.getByPlaceholderText("검색"), { target: { value: "zzzzz" } });
+    expect(screen.getByText("결과 없음")).toBeTruthy();
+  });
+
+  it("아이템 클릭이 onSelect 호출", () => {
+    const onSelect = vi.fn();
+    render(<Sample onSelect={onSelect} />);
+    fireEvent.click(screen.getByText("토큰"));
+    expect(onSelect).toHaveBeenCalledWith("tokens");
+  });
+});

package/data/registry/react/components/command/index.module.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import styles from "./styles.module.css";
+import { cn } from "@SH_UI_UTILS@";
+import { Dialog, DialogContent, DialogTitle } from "../dialog";
+
+export const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive ref={ref} className={cn(styles.command, className)} {...props} />
+));
+Command.displayName = "Command";
+
+export interface CommandDialogProps
+  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+}
+
+export function CommandDialog({ open, onOpenChange, title = "명령 팔레트", children, ...props }: CommandDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={styles["command__dialog"]}>
+        <DialogTitle className={styles["command__sr-only"]}>{title}</DialogTitle>
+        <Command {...props}>{children}</Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className={styles["command__input-wrapper"]}>
+    <CommandPrimitive.Input ref={ref} className={cn(styles.command__input, className)} {...props} />
+  </div>
+));
+CommandInput.displayName = "CommandInput";
+
+export const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List ref={ref} className={cn(styles.command__list, className)} {...props} />
+));
+CommandList.displayName = "CommandList";
+
+export const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty ref={ref} className={cn(styles.command__empty, className)} {...props} />
+));
+CommandEmpty.displayName = "CommandEmpty";
+
+export const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group ref={ref} className={cn(styles.command__group, className)} {...props} />
+));
+CommandGroup.displayName = "CommandGroup";
+
+export const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn(styles.command__separator, className)} {...props} />
+));
+CommandSeparator.displayName = "CommandSeparator";
+
+export const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item ref={ref} className={cn(styles.command__item, className)} {...props} />
+));
+CommandItem.displayName = "CommandItem";
+
+export function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn(styles.command__shortcut, className)} {...props} />;
+}
+CommandShortcut.displayName = "CommandShortcut";

package/data/registry/react/components/command/index.tailwind.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn } from "@SH_UI_UTILS@";
+import { Dialog, DialogContent, DialogTitle } from "../dialog";
+
+export const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex flex-col w-full bg-[var(--popover,var(--background))] text-foreground rounded-[var(--radius)] overflow-hidden",
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = "Command";
+
+export interface CommandDialogProps
+  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+}
+
+export function CommandDialog({ open, onOpenChange, title = "명령 팔레트", children, ...props }: CommandDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="p-0 max-w-2xl">
+        <DialogTitle className="sr-only">{title}</DialogTitle>
+        <Command {...props}>{children}</Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="border-b border-border px-[var(--space-3)]">
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "w-full h-[var(--control-md)] bg-transparent border-none outline-none text-foreground text-[length:var(--text-sm)] placeholder:text-foreground-muted",
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+CommandInput.displayName = "CommandInput";
+
+export const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-80 overflow-y-auto p-[var(--space-1)]", className)}
+    {...props}
+  />
+));
+CommandList.displayName = "CommandList";
+
+export const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className={cn("p-[var(--space-4)] text-center text-foreground-muted text-[length:var(--text-sm)]", className)}
+    {...props}
+  />
+));
+CommandEmpty.displayName = "CommandEmpty";
+
+export const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "[&_[cmdk-group-heading]]:px-[var(--space-2)] [&_[cmdk-group-heading]]:py-[var(--space-1)] [&_[cmdk-group-heading]]:text-[length:var(--text-xs)] [&_[cmdk-group-heading]]:text-foreground-muted",
+      className
+    )}
+    {...props}
+  />
+));
+CommandGroup.displayName = "CommandGroup";
+
+export const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("h-px bg-border my-[var(--space-1)]", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = "CommandSeparator";
+
+export const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "flex items-center gap-[var(--space-2)] px-[var(--space-2)] py-[var(--space-2)] rounded-[calc(var(--radius)-2px)] text-[length:var(--text-sm)] cursor-pointer select-none data-[selected=true]:bg-background-muted aria-selected:bg-background-muted data-[disabled=true]:text-foreground-muted",
+      className
+    )}
+    {...props}
+  />
+));
+CommandItem.displayName = "CommandItem";
+
+export function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={cn("ms-auto text-[length:var(--text-xs)] text-foreground-muted tracking-wider", className)}
+      {...props}
+    />
+  );
+}
+CommandShortcut.displayName = "CommandShortcut";

package/data/registry/react/components/command/index.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import "./styles.css";
+import { cn } from "@SH_UI_UTILS@";
+import { Dialog, DialogContent, DialogTitle } from "../dialog";
+
+export const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive ref={ref} className={cn("sh-ui-command", className)} {...props} />
+));
+Command.displayName = "Command";
+
+export interface CommandDialogProps
+  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+}
+
+export function CommandDialog({ open, onOpenChange, title = "명령 팔레트", children, ...props }: CommandDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sh-ui-command__dialog">
+        <DialogTitle className="sh-ui-command__sr-only">{title}</DialogTitle>
+        <Command {...props}>{children}</Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="sh-ui-command__input-wrapper">
+    <CommandPrimitive.Input ref={ref} className={cn("sh-ui-command__input", className)} {...props} />
+  </div>
+));
+CommandInput.displayName = "CommandInput";
+
+export const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List ref={ref} className={cn("sh-ui-command__list", className)} {...props} />
+));
+CommandList.displayName = "CommandList";
+
+export const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty ref={ref} className={cn("sh-ui-command__empty", className)} {...props} />
+));
+CommandEmpty.displayName = "CommandEmpty";
+
+export const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group ref={ref} className={cn("sh-ui-command__group", className)} {...props} />
+));
+CommandGroup.displayName = "CommandGroup";
+
+export const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn("sh-ui-command__separator", className)} {...props} />
+));
+CommandSeparator.displayName = "CommandSeparator";
+
+export const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item ref={ref} className={cn("sh-ui-command__item", className)} {...props} />
+));
+CommandItem.displayName = "CommandItem";
+
+export function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn("sh-ui-command__shortcut", className)} {...props} />;
+}
+CommandShortcut.displayName = "CommandShortcut";

package/data/registry/react/components/command/styles.css

@@ -0,0 +1,33 @@
+.sh-ui-command {
+  display: flex; flex-direction: column; width: 100%;
+  background: var(--popover, var(--background)); color: var(--foreground);
+  border-radius: var(--radius); overflow: hidden;
+}
+.sh-ui-command__dialog { padding: 0; max-width: 40rem; }
+.sh-ui-command__sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.sh-ui-command__input-wrapper { border-bottom: 1px solid var(--border); padding: 0 var(--space-3); }
+.sh-ui-command__input {
+  width: 100%; height: var(--control-md); background: transparent; border: none; outline: none;
+  color: var(--foreground); font-size: var(--text-sm);
+}
+.sh-ui-command__input::placeholder { color: var(--foreground-muted); }
+.sh-ui-command__list { max-height: 20rem; overflow-y: auto; padding: var(--space-1); }
+.sh-ui-command__empty { padding: var(--space-4); text-align: center; color: var(--foreground-muted); font-size: var(--text-sm); }
+.sh-ui-command__group [cmdk-group-heading] {
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-size: var(--text-xs); color: var(--foreground-muted);
+}
+.sh-ui-command__item {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-2); border-radius: calc(var(--radius) - 2px);
+  font-size: var(--text-sm); cursor: pointer; user-select: none;
+}
+.sh-ui-command__item[data-selected="true"],
+.sh-ui-command__item[aria-selected="true"] { background: var(--background-muted); }
+.sh-ui-command__item[data-disabled="true"],
+.sh-ui-command__item[aria-disabled="true"] { color: var(--foreground-muted); cursor: not-allowed; }
+.sh-ui-command__separator { height: 1px; background: var(--border); margin: var(--space-1) 0; }
+.sh-ui-command__shortcut { margin-inline-start: auto; font-size: var(--text-xs); color: var(--foreground-muted); letter-spacing: 0.05em; }

package/data/registry/react/components/command/styles.module.css

@@ -0,0 +1,33 @@
+.command {
+  display: flex; flex-direction: column; width: 100%;
+  background: var(--popover, var(--background)); color: var(--foreground);
+  border-radius: var(--radius); overflow: hidden;
+}
+.command__dialog { padding: 0; max-width: 40rem; }
+.command__sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.command__input-wrapper { border-bottom: 1px solid var(--border); padding: 0 var(--space-3); }
+.command__input {
+  width: 100%; height: var(--control-md); background: transparent; border: none; outline: none;
+  color: var(--foreground); font-size: var(--text-sm);
+}
+.command__input::placeholder { color: var(--foreground-muted); }
+.command__list { max-height: 20rem; overflow-y: auto; padding: var(--space-1); }
+.command__empty { padding: var(--space-4); text-align: center; color: var(--foreground-muted); font-size: var(--text-sm); }
+.command__group [cmdk-group-heading] {
+  padding: var(--space-2) var(--space-2) var(--space-1);
+  font-size: var(--text-xs); color: var(--foreground-muted);
+}
+.command__item {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-2); border-radius: calc(var(--radius) - 2px);
+  font-size: var(--text-sm); cursor: pointer; user-select: none;
+}
+.command__item[data-selected="true"],
+.command__item[aria-selected="true"] { background: var(--background-muted); }
+.command__item[data-disabled="true"],
+.command__item[aria-disabled="true"] { color: var(--foreground-muted); cursor: not-allowed; }
+.command__separator { height: 1px; background: var(--border); margin: var(--space-1) 0; }
+.command__shortcut { margin-inline-start: auto; font-size: var(--text-xs); color: var(--foreground-muted); letter-spacing: 0.05em; }

package/data/registry/react/components/table/index.module.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import styles from "./styles.module.css";
+import { cn } from "@SH_UI_UTILS@";
+
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.TableHTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className={styles["table__wrapper"]}>
+    <table ref={ref} className={cn(styles.table, className)} {...props} />
+  </div>
+));
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn(styles.table__header, className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn(styles.table__body, className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+export const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn(styles.table__footer, className)} {...props} />
+));
+TableFooter.displayName = "TableFooter";
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn(styles.table__row, className)} {...props} />
+));
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, scope = "col", ...props }, ref) => (
+  <th ref={ref} scope={scope} className={cn(styles.table__head, className)} {...props} />
+));
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn(styles.table__cell, className)} {...props} />
+));
+TableCell.displayName = "TableCell";
+
+export const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn(styles.table__caption, className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";

package/data/registry/react/components/table/index.tailwind.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.TableHTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-x-auto">
+    <table ref={ref} className={cn("w-full border-collapse text-[length:var(--text-sm)] text-foreground", className)} {...props} />
+  </div>
+));
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn(className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn(className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+export const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn("border-t border-border font-medium", className)} {...props} />
+));
+TableFooter.displayName = "TableFooter";
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn("border-b border-border transition-[background-color] duration-[var(--duration-fast)] hover:bg-background-muted data-[state=selected]:bg-background-muted motion-reduce:transition-none", className)} {...props} />
+));
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, scope = "col", ...props }, ref) => (
+  <th ref={ref} scope={scope} className={cn("h-[var(--control-md)] px-[var(--space-3)] text-start font-medium text-foreground-muted align-middle whitespace-nowrap", className)} {...props} />
+));
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn("p-[var(--space-3)] align-middle", className)} {...props} />
+));
+TableCell.displayName = "TableCell";
+
+export const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("mt-[var(--space-3)] text-foreground-muted text-[length:var(--text-xs)] text-start", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";

package/data/registry/react/components/table/index.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import "./styles.css";
+import { cn } from "@SH_UI_UTILS@";
+
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.TableHTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="sh-ui-table__wrapper">
+    <table ref={ref} className={cn("sh-ui-table", className)} {...props} />
+  </div>
+));
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("sh-ui-table__header", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("sh-ui-table__body", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+export const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot ref={ref} className={cn("sh-ui-table__footer", className)} {...props} />
+));
+TableFooter.displayName = "TableFooter";
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr ref={ref} className={cn("sh-ui-table__row", className)} {...props} />
+));
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, scope = "col", ...props }, ref) => (
+  <th ref={ref} scope={scope} className={cn("sh-ui-table__head", className)} {...props} />
+));
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td ref={ref} className={cn("sh-ui-table__cell", className)} {...props} />
+));
+TableCell.displayName = "TableCell";
+
+export const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("sh-ui-table__caption", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";

package/data/registry/react/components/table/styles.css

@@ -0,0 +1,57 @@
+.sh-ui-table__wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.sh-ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+.sh-ui-table__head {
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  text-align: start;
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.sh-ui-table__cell {
+  padding: var(--space-3);
+  vertical-align: middle;
+}
+
+.sh-ui-table__row {
+  border-bottom: 1px solid var(--border);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+
+.sh-ui-table__body .sh-ui-table__row:hover {
+  background: var(--background-muted);
+}
+
+.sh-ui-table__row[data-state="selected"] {
+  background: var(--background-muted);
+}
+
+.sh-ui-table__footer {
+  border-top: 1px solid var(--border);
+  font-weight: var(--weight-medium);
+}
+
+.sh-ui-table__caption {
+  margin-top: var(--space-3);
+  color: var(--foreground-muted);
+  font-size: var(--text-xs);
+  text-align: start;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-table__row {
+    transition: none;
+  }
+}

package/data/registry/react/components/table/styles.module.css

@@ -0,0 +1,57 @@
+.table__wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+.table__head {
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  text-align: start;
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.table__cell {
+  padding: var(--space-3);
+  vertical-align: middle;
+}
+
+.table__row {
+  border-bottom: 1px solid var(--border);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+
+.table__body .table__row:hover {
+  background: var(--background-muted);
+}
+
+.table__row[data-state="selected"] {
+  background: var(--background-muted);
+}
+
+.table__footer {
+  border-top: 1px solid var(--border);
+  font-weight: var(--weight-medium);
+}
+
+.table__caption {
+  margin-top: var(--space-3);
+  color: var(--foreground-muted);
+  font-size: var(--text-xs);
+  text-align: start;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .table__row {
+    transition: none;
+  }
+}

package/data/registry/react/components/table/table.test.tsx

@@ -0,0 +1,59 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import {
+  Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption,
+} from "./index";
+
+function Sample(props: { selected?: boolean }) {
+  return (
+    <Table>
+      <TableCaption>사용자 목록</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead>이름</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow data-state={props.selected ? "selected" : undefined}>
+          <TableCell>Kim</TableCell>
+        </TableRow>
+      </TableBody>
+      <TableFooter>
+        <TableRow><TableCell>합계 1</TableCell></TableRow>
+      </TableFooter>
+    </Table>
+  );
+}
+
+describe("Table primitives", () => {
+  it("네이티브 table 구조를 렌더", () => {
+    const { container } = render(<Sample />);
+    expect(container.querySelector("table")).toBeTruthy();
+    expect(container.querySelector("thead")).toBeTruthy();
+    expect(container.querySelector("tbody")).toBeTruthy();
+    expect(container.querySelector("tfoot")).toBeTruthy();
+    expect(container.querySelector("caption")).toBeTruthy();
+  });
+
+  it("TableHead 는 th[scope=col]", () => {
+    const { container } = render(<Sample />);
+    const th = container.querySelector("th");
+    expect(th?.getAttribute("scope")).toBe("col");
+  });
+
+  it("columnheader role 로 헤더 셀 접근", () => {
+    render(<Sample />);
+    expect(screen.getByRole("columnheader", { name: "이름" })).toBeTruthy();
+  });
+
+  it("data-state=selected 가 행에 반영", () => {
+    const { container } = render(<Sample selected />);
+    expect(container.querySelector('tbody tr[data-state="selected"]')).toBeTruthy();
+  });
+
+  it("className 이 병합된다", () => {
+    const { container } = render(<Table className="custom"><TableBody><TableRow><TableCell>x</TableCell></TableRow></TableBody></Table>);
+    expect(container.querySelector("table.custom")).toBeTruthy();
+  });
+});

package/data/registry/react/registry.json

@@ -874,6 +874,39 @@
       "dependencies": ["@base-ui/react"],
       "registryDependencies": ["utils"]
     },
+    "command": {
+      "name": "command",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/command/index.tsx",
+          "dest": "{components}/command/index.tsx",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/command/styles.css",
+          "dest": "{components}/command/styles.css",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/command/index.tailwind.tsx",
+          "dest": "{components}/command/index.tsx",
+          "frameworks": ["tailwind"]
+        },
+        {
+          "src": "components/command/index.module.tsx",
+          "dest": "{components}/command/index.tsx",
+          "frameworks": ["css-modules"]
+        },
+        {
+          "src": "components/command/styles.module.css",
+          "dest": "{components}/command/styles.module.css",
+          "frameworks": ["css-modules"]
+        }
+      ],
+      "dependencies": ["cmdk"],
+      "registryDependencies": ["utils", "dialog"]
+    },
     "popover": {
       "name": "popover",
       "type": "component",
@@ -1704,6 +1737,39 @@
       "dependencies": [],
       "registryDependencies": ["utils"]
     },
+    "table": {
+      "name": "table",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/table/index.tsx",
+          "dest": "{components}/table/index.tsx",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/table/styles.css",
+          "dest": "{components}/table/styles.css",
+          "frameworks": ["plain"]
+        },
+        {
+          "src": "components/table/index.tailwind.tsx",
+          "dest": "{components}/table/index.tsx",
+          "frameworks": ["tailwind"]
+        },
+        {
+          "src": "components/table/index.module.tsx",
+          "dest": "{components}/table/index.tsx",
+          "frameworks": ["css-modules"]
+        },
+        {
+          "src": "components/table/styles.module.css",
+          "dest": "{components}/table/styles.module.css",
+          "frameworks": ["css-modules"]
+        }
+      ],
+      "dependencies": [],
+      "registryDependencies": ["utils"]
+    },
     "carousel": {
       "name": "carousel",
       "type": "component",

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

@@ -1,6 +1,6 @@
 {
   "$description": "컴포넌트별 토큰 의존성 (var(--*) 추출). build-registry-tokens.mjs 가 자동 생성.",
-  "$generated": "2026-06-18T06:02:23.309Z",
+  "$generated": "2026-06-19T05:19:57.653Z",
   "components": {
     "button": {
       "plain": [
@@ -1081,6 +1081,50 @@
       ],
       "vanilla-extract": []
     },
+    "command": {
+      "plain": [
+        "--background",
+        "--background-muted",
+        "--border",
+        "--control-md",
+        "--foreground",
+        "--foreground-muted",
+        "--radius",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--text-sm",
+        "--text-xs"
+      ],
+      "tailwind": [
+        "--background",
+        "--control-md",
+        "--radius",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--text-sm",
+        "--text-xs"
+      ],
+      "css-modules": [
+        "--background",
+        "--background-muted",
+        "--border",
+        "--control-md",
+        "--foreground",
+        "--foreground-muted",
+        "--radius",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--text-sm",
+        "--text-xs"
+      ],
+      "vanilla-extract": []
+    },
     "popover": {
       "plain": [
         "--background",
@@ -1970,6 +2014,42 @@
       ],
       "vanilla-extract": []
     },
+    "table": {
+      "plain": [
+        "--background-muted",
+        "--border",
+        "--control-md",
+        "--duration-fast",
+        "--ease-standard",
+        "--foreground",
+        "--foreground-muted",
+        "--space-3",
+        "--text-sm",
+        "--text-xs",
+        "--weight-medium"
+      ],
+      "tailwind": [
+        "--control-md",
+        "--duration-fast",
+        "--space-3",
+        "--text-sm",
+        "--text-xs"
+      ],
+      "css-modules": [
+        "--background-muted",
+        "--border",
+        "--control-md",
+        "--duration-fast",
+        "--ease-standard",
+        "--foreground",
+        "--foreground-muted",
+        "--space-3",
+        "--text-sm",
+        "--text-xs",
+        "--weight-medium"
+      ],
+      "vanilla-extract": []
+    },
     "carousel": {
       "plain": [
         "--background",

package/data/summaries/flutter.json

@@ -37,6 +37,7 @@
     "progress": "ShUiProgress — 선형 진행률, indeterminate.",
     "spinner": "ShUiSpinner — 원형 로딩.",
     "separator": "ShUiSeparator — 구분선 (horizontal/vertical).",
-    "skeleton": "ShUiSkeleton — 로딩 플레이스홀더."
+    "skeleton": "ShUiSkeleton — 로딩 플레이스홀더.",
+    "tree": "ShUiTree — 계층 데이터 트리. 확장/축소 + 단일 선택(제어·비제어). ShUiTreeNode(id/label/children/icon/disabled) 재귀. 키보드(화살표·Home/End·Enter/Space)·Semantics. ShUiTreeSize sm/md."
   }
 }

package/data/summaries/react.json

@@ -1,6 +1,7 @@
 {
   "$description": "React 컴포넌트 summary — llms.txt 생성용. key는 registry.json의 name과 동일.",
   "summaries": {
+    "command": "Cmd+K 명령 팔레트 — cmdk 위 sh-ui. Command/CommandDialog/CommandInput/CommandList/CommandEmpty/CommandGroup/CommandItem/CommandSeparator/CommandShortcut. CommandDialog=sh-ui Dialog+Command(open/onOpenChange), 검색 필터·키보드 네비는 cmdk. CommandItem value/keywords/onSelect — 한국어 라벨엔 keywords 필요.",
     "button": "기본 버튼 — variant(primary/secondary/ghost/danger/link) + size(sm/md/lg).",
     "card": "카드 컨테이너 — separate exports: Card / CardHeader / CardTitle / CardDescription / CardAction / CardContent / CardFooter. dot syntax(`Card.Header`) 아님.",
     "input": "단일 행 텍스트 입력 — hasError 지원. 같은 모듈에 NumberInput / PhoneInput / BusinessNumberInput 변형 포함. 비밀번호 토글은 InputGroup + InputAdornment 레시피로 조립.",
@@ -58,6 +59,7 @@
     "calendar": "내부 캘린더 위젯 (DatePicker 가 사용). single / multiple / range 모드. CalendarMessages 로 a11y 텍스트 override. 일반적으로 직접 사용보다 DatePicker / DateRangePicker 권장.",
     "scroll-area": "커스텀 스크롤 컨테이너 — composite export ScrollArea (Base UI). 내부에서 viewport + scrollbar + thumb + corner 를 자동 구성하며 OS-native 스크롤바를 대체한다. orientation: \"vertical\" | \"horizontal\" | \"both\" (기본 vertical). 외부 height/width 가 정해진 컨테이너 안에서 사용. viewportClassName 으로 viewport 의 패딩/레이아웃 분리 적용. 스크롤바는 hover/scrolling 시 fade in, prefers-reduced-motion 존중.",
     "tree": "계층 데이터 트리 뷰 — Tree 단일 export + TreeNode 타입(`@/components/ui/tree/types`). nodes(TreeNode[]: id/label/children/icon/disabled) 를 평탄화해 role=tree 로 렌더. 확장: expandedIds/onExpandedChange(controlled) 또는 defaultExpandedIds(uncontrolled). 선택: selectedId/onSelect(controlled) 또는 defaultSelectedId(uncontrolled). 키보드 네비(화살표·Home/End·Enter·typeahead), renderLabel 커스텀 렌더러, size(sm/md). Base UI 비의존 자체 구현.",
+    "table": "데이터 테이블 프리미티브 — Table / TableHeader / TableBody / TableFooter / TableRow / TableHead / TableCell / TableCaption 8종 presentational (네이티브 <table> + sh-ui 토큰, 의존성 0). 정렬·행선택·페이지네이션은 TanStack Table v8 로 조립 — docs 의 data-table 예제 참고. shadcn 모델(headless 엔진 + presentational 레이어).",
     "sheet": "화면 가장자리에서 슬라이드 인 하는 side drawer — separate exports: Sheet / SheetTrigger / SheetClose / SheetContent / SheetTitle / SheetDescription / SheetHeader / SheetFooter / SheetCloseX (Base UI Drawer 래핑, 포커스 트랩). 글로벌 알림함 · 작업 큐 · 보조 패널 같은 사이드바 무관 모달 시트용. 사이드바 인근 detail 패널은 SidebarPanel, 중앙 강제 모달은 Dialog 권장. SheetContent 의 side: \"right\" | \"left\" | \"top\" | \"bottom\" (기본 right) 으로 진입 방향 지정. SheetTrigger·SheetClose 는 자체 button — 다른 엘리먼트 슬롯은 `render` prop. ESC/바깥 클릭/포커스 복귀 자동, prefers-reduced-motion 시 transform 트랜지션 제거."
   }
 }

package/package.json

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