sh-ui-cli 0.98.1 → 0.110.0

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

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+
+import { cn } from "@SH_UI_UTILS@";
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+export const Sheet = BaseDrawer.Root;
+export const SheetTrigger = BaseDrawer.Trigger;
+export const SheetClose = BaseDrawer.Close;
+
+export function SheetCloseX({
+  className,
+  children,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <BaseDrawer.Close
+      className={cn(
+        "absolute top-3 right-3 inline-flex items-center justify-center w-[var(--control-sm)] h-[var(--control-sm)] bg-transparent text-foreground-muted border-none rounded-[var(--radius)] cursor-pointer text-xl leading-none transition-colors duration-[var(--duration-fast)] hover:bg-background-subtle hover:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2",
+        className,
+      )}
+      aria-label="닫기"
+      {...props}
+    >
+      {children ?? "×"}
+    </BaseDrawer.Close>
+  );
+}
+
+export function SheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col gap-[var(--space-1)] mb-[var(--space-4)]", className)}
+      {...props}
+    />
+  );
+}
+
+export function SheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex justify-end gap-[var(--space-2)] mt-[var(--space-6)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export interface SheetContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDrawer.Popup>> {
+  side?: "right" | "left" | "top" | "bottom";
+  container?: React.ComponentPropsWithoutRef<typeof BaseDrawer.Portal>["container"];
+}
+
+const SIDE_CLASSES: Record<NonNullable<SheetContentProps["side"]>, string> = {
+  right:
+    "top-0 right-0 h-[100dvh] w-[calc(100%-2rem)] max-w-md border-l border-border data-[starting-style]:translate-x-full data-[ending-style]:translate-x-full",
+  left:
+    "top-0 left-0 h-[100dvh] w-[calc(100%-2rem)] max-w-md border-r border-border data-[starting-style]:-translate-x-full data-[ending-style]:-translate-x-full",
+  top:
+    "top-0 left-0 right-0 w-screen max-h-[calc(100dvh-4rem)] border-b border-border data-[starting-style]:-translate-y-full data-[ending-style]:-translate-y-full",
+  bottom:
+    "bottom-0 left-0 right-0 w-screen max-h-[calc(100dvh-4rem)] border-t border-border data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full",
+};
+
+export const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
+  function SheetContent({ className, children, side = "right", container, ...props }, ref) {
+    return (
+      <BaseDrawer.Portal container={container}>
+        <BaseDrawer.Backdrop className="fixed inset-0 z-[var(--z-overlay)] bg-black/25 backdrop-blur-md transition-opacity duration-[var(--duration-slow)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" />
+        <BaseDrawer.Popup
+          ref={ref}
+          data-side={side}
+          className={cn(
+            "fixed z-[var(--z-modal)] flex flex-col p-[var(--space-6)] bg-background text-foreground shadow-[var(--shadow-xl)] outline-none overflow-y-auto transition-[opacity,transform] duration-[var(--duration-slow)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:[outline-offset:-2px] motion-reduce:transition-none motion-reduce:data-[starting-style]:transform-none motion-reduce:data-[ending-style]:transform-none",
+            SIDE_CLASSES[side],
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </BaseDrawer.Popup>
+      </BaseDrawer.Portal>
+    );
+  },
+);
+
+export const SheetTitle = React.forwardRef<
+  HTMLHeadingElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDrawer.Title>>
+>(function SheetTitle({ className, ...props }, ref) {
+  return (
+    <BaseDrawer.Title
+      ref={ref}
+      className={cn(
+        "m-0 text-[length:var(--text-lg)] font-semibold text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const SheetDescription = React.forwardRef<
+  HTMLParagraphElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDrawer.Description>>
+>(function SheetDescription({ className, ...props }, ref) {
+  return (
+    <BaseDrawer.Description
+      ref={ref}
+      className={cn(
+        "m-0 text-foreground-muted text-[length:var(--text-sm)] leading-normal",
+        className,
+      )}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import "./styles.css";
+
+import { cn } from "@SH_UI_UTILS@";
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+/**
+ * 화면 가장자리에서 슬라이드 인 하는 side drawer 컨테이너. 글로벌 알림함 / 작업 큐 / 보조 패널
+ * 처럼 사이드바와 무관한 위치에서 떠올리는 모달 시트에 사용. 사이드바 인근 detail 패널은 Sidebar 의
+ * SidebarPanel 을, 강제 응답이 필요한 중앙 모달은 Dialog 를 권장.
+ *
+ * 위치는 `<SheetContent side>` 로 지정 — right(기본) / left / top / bottom.
+ */
+export const Sheet = BaseDrawer.Root;
+
+/**
+ * Sheet 를 여는 트리거. 자체로 `<button>` 을 렌더 — 자식 button 중첩 금지. 커스텀 Button 등으로
+ * 슬롯하려면 `render` prop:
+ *
+ *   <SheetTrigger render={<Button>열기</Button>} />
+ */
+export const SheetTrigger = BaseDrawer.Trigger;
+
+/**
+ * 클릭 시 Sheet 를 닫는 요소 (예: footer 취소 버튼). 자체로 `<button>` 을 렌더하므로 자식 button
+ * 중첩 금지. 커스텀 Button 슬롯은 `render` prop 사용.
+ */
+export const SheetClose = BaseDrawer.Close;
+
+/** 우상단에 배치되는 X 닫기 버튼. `aria-label="닫기"` 가 자동 부여된다. */
+export function SheetCloseX({
+  className,
+  children,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <BaseDrawer.Close
+      className={cn("sh-ui-sheet__close", className)}
+      aria-label="닫기"
+      {...props}
+    >
+      {children ?? "×"}
+    </BaseDrawer.Close>
+  );
+}
+
+/** Sheet 콘텐츠 상단의 제목 영역. */
+export function SheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("sh-ui-sheet__header", className)} {...props} />;
+}
+
+/** Sheet 콘텐츠 하단의 액션 버튼 영역. 보통 [취소, 확인] 순서. */
+export function SheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("sh-ui-sheet__footer", className)} {...props} />;
+}
+
+export interface SheetContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDrawer.Popup>> {
+  /**
+   * Sheet 가 슬라이드 인 하는 방향.
+   * @default "right"
+   */
+  side?: "right" | "left" | "top" | "bottom";
+  /**
+   * Portal 마운트 노드. 다른 stacking context 안에 갇혀야 할 때 지정.
+   * @default document.body
+   */
+  container?: React.ComponentPropsWithoutRef<typeof BaseDrawer.Portal>["container"];
+}
+
+/**
+ * Sheet 의 실제 콘텐츠. Portal 로 body 끝에 마운트되며 backdrop · focus trap · ESC 닫힘 등이
+ * 자동 처리된다. `side` 로 진입 방향을 지정 — right/left 는 사이드 패널, top/bottom 은 시트 형태.
+ * 접근성: 안에 반드시 `SheetTitle` 을 두고, 추가 설명은 `SheetDescription` 으로 연결할 것.
+ */
+export const SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(
+  function SheetContent({ className, children, side = "right", container, ...props }, ref) {
+    return (
+      <BaseDrawer.Portal container={container}>
+        <BaseDrawer.Backdrop className="sh-ui-sheet__backdrop" />
+        <BaseDrawer.Popup
+          ref={ref}
+          data-side={side}
+          className={cn("sh-ui-sheet__content", className)}
+          {...props}
+        >
+          {children}
+        </BaseDrawer.Popup>
+      </BaseDrawer.Portal>
+    );
+  },
+);
+
+/** Sheet 의 제목. 접근성을 위해 SheetContent 안에 항상 포함시킬 것. */
+export const SheetTitle = React.forwardRef<
+  HTMLHeadingElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDrawer.Title>>
+>(function SheetTitle({ className, ...props }, ref) {
+  return (
+    <BaseDrawer.Title
+      ref={ref}
+      className={cn("sh-ui-sheet__title", className)}
+      {...props}
+    />
+  );
+});
+
+/** Sheet 의 보조 설명. 제목만으로 맥락이 부족할 때 사용. */
+export const SheetDescription = React.forwardRef<
+  HTMLParagraphElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDrawer.Description>>
+>(function SheetDescription({ className, ...props }, ref) {
+  return (
+    <BaseDrawer.Description
+      ref={ref}
+      className={cn("sh-ui-sheet__description", className)}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,183 @@
+/* ── Backdrop ── */
+
+.sh-ui-sheet__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(8px);
+  transition: opacity var(--duration-slow) ease;
+}
+
+.sh-ui-sheet__backdrop[data-starting-style],
+.sh-ui-sheet__backdrop[data-ending-style] {
+  opacity: 0;
+}
+
+/* ── Content (Popup) ── */
+
+.sh-ui-sheet__content {
+  position: fixed;
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-6);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-xl);
+  outline: none;
+  overflow-y: auto;
+  transition:
+    opacity var(--duration-slow) ease,
+    transform var(--duration-slow) ease;
+}
+
+.sh-ui-sheet__content[data-side="right"] {
+  top: 0;
+  right: 0;
+  height: 100dvh;
+  width: calc(100% - 2rem);
+  max-width: 28rem;
+  border-left: 1px solid var(--border);
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+}
+
+.sh-ui-sheet__content[data-side="left"] {
+  top: 0;
+  left: 0;
+  height: 100dvh;
+  width: calc(100% - 2rem);
+  max-width: 28rem;
+  border-right: 1px solid var(--border);
+  border-top: none;
+  border-left: none;
+  border-bottom: none;
+}
+
+.sh-ui-sheet__content[data-side="top"] {
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  max-height: calc(100dvh - 4rem);
+  border-bottom: 1px solid var(--border);
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+
+.sh-ui-sheet__content[data-side="bottom"] {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  max-height: calc(100dvh - 4rem);
+  border-top: 1px solid var(--border);
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+}
+
+/* Enter/exit transforms — slide from the edge */
+
+.sh-ui-sheet__content[data-side="right"][data-starting-style],
+.sh-ui-sheet__content[data-side="right"][data-ending-style] {
+  transform: translateX(100%);
+}
+
+.sh-ui-sheet__content[data-side="left"][data-starting-style],
+.sh-ui-sheet__content[data-side="left"][data-ending-style] {
+  transform: translateX(-100%);
+}
+
+.sh-ui-sheet__content[data-side="top"][data-starting-style],
+.sh-ui-sheet__content[data-side="top"][data-ending-style] {
+  transform: translateY(-100%);
+}
+
+.sh-ui-sheet__content[data-side="bottom"][data-starting-style],
+.sh-ui-sheet__content[data-side="bottom"][data-ending-style] {
+  transform: translateY(100%);
+}
+
+.sh-ui-sheet__content:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+  outline-offset: -2px;
+}
+
+/* ── Close X ── */
+
+.sh-ui-sheet__close {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  width: var(--control-sm);
+  height: var(--control-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--foreground-muted);
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
+}
+
+.sh-ui-sheet__close:hover {
+  background: var(--background-subtle);
+  color: var(--foreground);
+}
+
+.sh-ui-sheet__close:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+  outline-offset: 2px;
+}
+
+/* ── Header / Footer ── */
+
+.sh-ui-sheet__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin-bottom: var(--space-4);
+}
+
+.sh-ui-sheet__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-6);
+}
+
+/* ── Title / Description ── */
+
+.sh-ui-sheet__title {
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--weight-semibold);
+  text-wrap: balance;
+}
+
+.sh-ui-sheet__description {
+  margin: 0;
+  color: var(--foreground-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-sheet__backdrop,
+  .sh-ui-sheet__content {
+    transition: opacity 0.01ms;
+  }
+  .sh-ui-sheet__content[data-starting-style],
+  .sh-ui-sheet__content[data-ending-style] {
+    transform: none;
+  }
+}

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

@@ -0,0 +1,171 @@
+.sheet__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(8px);
+  transition: opacity var(--duration-slow) ease;
+}
+
+.sheet__backdrop[data-starting-style],
+.sheet__backdrop[data-ending-style] {
+  opacity: 0;
+}
+
+.sheet__content {
+  position: fixed;
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-6);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-xl);
+  outline: none;
+  overflow-y: auto;
+  transition:
+    opacity var(--duration-slow) ease,
+    transform var(--duration-slow) ease;
+}
+
+.sheet__content[data-side="right"] {
+  top: 0;
+  right: 0;
+  height: 100dvh;
+  width: calc(100% - 2rem);
+  max-width: 28rem;
+  border-left: 1px solid var(--border);
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+}
+
+.sheet__content[data-side="left"] {
+  top: 0;
+  left: 0;
+  height: 100dvh;
+  width: calc(100% - 2rem);
+  max-width: 28rem;
+  border-right: 1px solid var(--border);
+  border-top: none;
+  border-left: none;
+  border-bottom: none;
+}
+
+.sheet__content[data-side="top"] {
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  max-height: calc(100dvh - 4rem);
+  border-bottom: 1px solid var(--border);
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+
+.sheet__content[data-side="bottom"] {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  max-height: calc(100dvh - 4rem);
+  border-top: 1px solid var(--border);
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+}
+
+.sheet__content[data-side="right"][data-starting-style],
+.sheet__content[data-side="right"][data-ending-style] {
+  transform: translateX(100%);
+}
+
+.sheet__content[data-side="left"][data-starting-style],
+.sheet__content[data-side="left"][data-ending-style] {
+  transform: translateX(-100%);
+}
+
+.sheet__content[data-side="top"][data-starting-style],
+.sheet__content[data-side="top"][data-ending-style] {
+  transform: translateY(-100%);
+}
+
+.sheet__content[data-side="bottom"][data-starting-style],
+.sheet__content[data-side="bottom"][data-ending-style] {
+  transform: translateY(100%);
+}
+
+.sheet__content:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+  outline-offset: -2px;
+}
+
+.sheet__close {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  width: var(--control-sm);
+  height: var(--control-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--foreground-muted);
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
+}
+
+.sheet__close:hover {
+  background: var(--background-subtle);
+  color: var(--foreground);
+}
+
+.sheet__close:focus-visible {
+  outline: var(--border-width-strong) solid var(--ring);
+  outline-offset: 2px;
+}
+
+.sheet__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin-bottom: var(--space-4);
+}
+
+.sheet__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-6);
+}
+
+.sheet__title {
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: var(--weight-semibold);
+  text-wrap: balance;
+}
+
+.sheet__description {
+  margin: 0;
+  color: var(--foreground-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sheet__backdrop,
+  .sheet__content {
+    transition: opacity 0.01ms;
+  }
+  .sheet__content[data-starting-style],
+  .sheet__content[data-ending-style] {
+    transform: none;
+  }
+}

package/data/registry/react/registry.json

@@ -2322,6 +2322,100 @@
         "form"
       ]
     },
+    "scroll-area": {
+      "name": "scroll-area",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/scroll-area/index.tsx",
+          "dest": "{components}/scroll-area/index.tsx",
+          "frameworks": [
+            "plain"
+          ]
+        },
+        {
+          "src": "components/scroll-area/styles.css",
+          "dest": "{components}/scroll-area/styles.css",
+          "frameworks": [
+            "plain"
+          ]
+        },
+        {
+          "src": "components/scroll-area/index.tailwind.tsx",
+          "dest": "{components}/scroll-area/index.tsx",
+          "frameworks": [
+            "tailwind"
+          ]
+        },
+        {
+          "src": "components/scroll-area/index.module.tsx",
+          "dest": "{components}/scroll-area/index.tsx",
+          "frameworks": [
+            "css-modules"
+          ]
+        },
+        {
+          "src": "components/scroll-area/styles.module.css",
+          "dest": "{components}/scroll-area/styles.module.css",
+          "frameworks": [
+            "css-modules"
+          ]
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "utils"
+      ]
+    },
+    "sheet": {
+      "name": "sheet",
+      "type": "component",
+      "files": [
+        {
+          "src": "components/sheet/index.tsx",
+          "dest": "{components}/sheet/index.tsx",
+          "frameworks": [
+            "plain"
+          ]
+        },
+        {
+          "src": "components/sheet/styles.css",
+          "dest": "{components}/sheet/styles.css",
+          "frameworks": [
+            "plain"
+          ]
+        },
+        {
+          "src": "components/sheet/index.tailwind.tsx",
+          "dest": "{components}/sheet/index.tsx",
+          "frameworks": [
+            "tailwind"
+          ]
+        },
+        {
+          "src": "components/sheet/index.module.tsx",
+          "dest": "{components}/sheet/index.tsx",
+          "frameworks": [
+            "css-modules"
+          ]
+        },
+        {
+          "src": "components/sheet/styles.module.css",
+          "dest": "{components}/sheet/styles.module.css",
+          "frameworks": [
+            "css-modules"
+          ]
+        }
+      ],
+      "dependencies": [
+        "@base-ui/react"
+      ],
+      "registryDependencies": [
+        "utils"
+      ]
+    },
     "utils": {
       "name": "utils",
       "type": "lib",