sh-ui-cli 0.46.0 → 0.48.0

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

@@ -0,0 +1,290 @@
+/* ── Viewport (고정 컨테이너) ── */
+
+.toast-viewport {
+  position: fixed;
+  z-index: var(--z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  max-width: 24rem;
+  width: 100%;
+  pointer-events: none;
+}
+
+/* ── Position variants ── */
+
+.toast-viewport[data-position="bottom-right"] {
+  bottom: var(--space-4);
+  right: var(--space-4);
+  flex-direction: column-reverse;
+}
+
+.toast-viewport[data-position="bottom-left"] {
+  bottom: var(--space-4);
+  left: var(--space-4);
+  flex-direction: column-reverse;
+}
+
+.toast-viewport[data-position="bottom-center"] {
+  bottom: var(--space-4);
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+}
+
+.toast-viewport[data-position="top-right"] {
+  top: var(--space-4);
+  right: var(--space-4);
+}
+
+.toast-viewport[data-position="top-left"] {
+  top: var(--space-4);
+  left: var(--space-4);
+}
+
+.toast-viewport[data-position="top-center"] {
+  top: var(--space-4);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@media (max-width: 40rem) {
+  .toast-viewport {
+    max-width: 100%;
+    padding: var(--space-4);
+  }
+
+  .toast-viewport[data-position="bottom-right"],
+  .toast-viewport[data-position="bottom-left"],
+  .toast-viewport[data-position="bottom-center"] {
+    right: 0;
+    left: 0;
+    bottom: 0;
+    transform: none;
+  }
+
+  .toast-viewport[data-position="top-right"],
+  .toast-viewport[data-position="top-left"],
+  .toast-viewport[data-position="top-center"] {
+    right: 0;
+    left: 0;
+    top: 0;
+    transform: none;
+  }
+}
+
+/* ── Single Toast ── */
+
+.toast {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  width: 100%;
+  padding: var(--space-3) 2.25rem var(--space-3) var(--space-3);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  pointer-events: auto;
+}
+
+/* ── Enter / Exit animations by position ── */
+
+/* Right positions: slide from right */
+[data-position="bottom-right"] .toast,
+[data-position="top-right"] .toast {
+  animation: sh-ui-toast-enter-right var(--duration-slow) cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+[data-position="bottom-right"] .toast[data-exiting],
+[data-position="top-right"] .toast[data-exiting] {
+  animation: sh-ui-toast-exit-right 150ms ease-in forwards;
+}
+
+/* Left positions: slide from left */
+[data-position="bottom-left"] .toast,
+[data-position="top-left"] .toast {
+  animation: sh-ui-toast-enter-left var(--duration-slow) cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+[data-position="bottom-left"] .toast[data-exiting],
+[data-position="top-left"] .toast[data-exiting] {
+  animation: sh-ui-toast-exit-left 150ms ease-in forwards;
+}
+
+/* Bottom center: slide from bottom */
+[data-position="bottom-center"] .toast {
+  animation: sh-ui-toast-enter-bottom var(--duration-slow) cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+[data-position="bottom-center"] .toast[data-exiting] {
+  animation: sh-ui-toast-exit-bottom 150ms ease-in forwards;
+}
+
+/* Top center: slide from top */
+[data-position="top-center"] .toast {
+  animation: sh-ui-toast-enter-top var(--duration-slow) cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+[data-position="top-center"] .toast[data-exiting] {
+  animation: sh-ui-toast-exit-top 150ms ease-in forwards;
+}
+
+/* ── Keyframes ── */
+
+@keyframes sh-ui-toast-enter-right {
+  from { opacity: 0; transform: translateX(100%); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes sh-ui-toast-exit-right {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(100%); }
+}
+
+@keyframes sh-ui-toast-enter-left {
+  from { opacity: 0; transform: translateX(-100%); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes sh-ui-toast-exit-left {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(-100%); }
+}
+
+@keyframes sh-ui-toast-enter-bottom {
+  from { opacity: 0; transform: translateY(100%); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes sh-ui-toast-exit-bottom {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(100%); }
+}
+
+@keyframes sh-ui-toast-enter-top {
+  from { opacity: 0; transform: translateY(-100%); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes sh-ui-toast-exit-top {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-100%); }
+}
+
+/* Mobile: always slide vertically based on top/bottom */
+@media (max-width: 40rem) {
+  [data-position="bottom-right"] .toast,
+  [data-position="bottom-left"] .toast,
+  [data-position="bottom-center"] .toast {
+    animation-name: sh-ui-toast-enter-bottom;
+  }
+
+  [data-position="bottom-right"] .toast[data-exiting],
+  [data-position="bottom-left"] .toast[data-exiting],
+  [data-position="bottom-center"] .toast[data-exiting] {
+    animation-name: sh-ui-toast-exit-bottom;
+  }
+
+  [data-position="top-right"] .toast,
+  [data-position="top-left"] .toast,
+  [data-position="top-center"] .toast {
+    animation-name: sh-ui-toast-enter-top;
+  }
+
+  [data-position="top-right"] .toast[data-exiting],
+  [data-position="top-left"] .toast[data-exiting],
+  [data-position="top-center"] .toast[data-exiting] {
+    animation-name: sh-ui-toast-exit-top;
+  }
+}
+
+/* ── Variant colors ── */
+
+.toast__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0.125rem;
+}
+
+.toast--success .toast__icon { color: var(--success, #16a34a); }
+.toast--danger .toast__icon { color: var(--danger); }
+.toast--warning .toast__icon { color: var(--warning, #d97706); }
+
+/* ── Body ── */
+
+.toast__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.toast__title {
+  margin: 0;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+  line-height: 1.4;
+}
+
+.toast__description {
+  margin: 0;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--foreground-muted);
+}
+
+.toast__title + .toast__description {
+  margin-top: 0.125rem;
+}
+
+/* ── Action slot ── */
+
+.toast__action {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+/* ── Close ── */
+
+.toast__close {
+  position: absolute;
+  top: 0.375rem;
+  right: 0.375rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground-muted);
+  font-size: var(--text-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast);
+}
+
+.toast__close:hover {
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+
+.toast__close:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast {
+    animation: none !important;
+  }
+  .toast__close {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,131 @@
+"use client";
+
+import * as React from "react";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import styles from "./styles.module.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+/* ───────────── Toggle ───────────── */
+
+export type ToggleVariant = "outline" | "ghost";
+export type ToggleSize = "sm" | "md" | "lg";
+
+export type ToggleProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseToggle>,
+  "className"
+> & {
+  className?: string;
+  /**
+   * 외형 변형.
+   * - `ghost` — 배경 없음, 눌림 시만 강조 (기본)
+   * - `outline` — 항상 border 표시
+   *
+   * @default "ghost"
+   */
+  variant?: ToggleVariant;
+  /**
+   * 크기. `sm` / `md` / `lg`.
+   *
+   * @default "md"
+   */
+  size?: ToggleSize;
+};
+
+/**
+ * 눌린 상태(pressed)를 가진 버튼. 툴바의 "굵게/기울임" 같은 즉시 토글 액션에 적합.
+ * 시각만으로 상태를 구분하지 말고 `aria-label`이나 아이콘 옆 텍스트로 의미를 명확히 할 것.
+ */
+export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ className, variant = "ghost", size = "md", ...props }, ref) => (
+    <BaseToggle
+      ref={ref}
+      className={cn(
+        styles.toggle,
+        styles[`toggle--${variant}`],
+        styles[`toggle--${size}`],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Toggle.displayName = "Toggle";
+
+/* ───────────── ToggleGroup ───────────── */
+
+export type ToggleGroupProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseToggleGroup>,
+  "className"
+> & {
+  className?: string;
+  /**
+   * 그룹 내 모든 항목에 적용될 외형. 자식 ToggleGroupItem이 자동 상속한다.
+   * @default "ghost"
+   */
+  variant?: ToggleVariant;
+  /**
+   * 그룹 내 모든 항목에 적용될 크기. 자식 ToggleGroupItem이 자동 상속한다.
+   * @default "md"
+   */
+  size?: ToggleSize;
+};
+
+interface ToggleGroupContextValue {
+  variant: ToggleVariant;
+  size: ToggleSize;
+}
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextValue>({
+  variant: "ghost",
+  size: "md",
+});
+
+export const useToggleGroupStyle = () => React.useContext(ToggleGroupContext);
+
+/**
+ * 여러 ToggleGroupItem을 묶는 컨테이너. `toggleMultiple` 옵션으로 단일/다중 선택을
+ * 결정하고, 그룹 단위로 variant·size를 적용한다. 항목들은 반드시 `ToggleGroupItem`을 사용할 것.
+ */
+export const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
+  ({ className, variant = "ghost", size = "md", ...props }, ref) => (
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      <BaseToggleGroup
+        ref={ref}
+        className={cn(styles["toggle-group"], className)}
+        {...props}
+      />
+    </ToggleGroupContext.Provider>
+  ),
+);
+ToggleGroup.displayName = "ToggleGroup";
+
+/* ───────────── ToggleGroupItem ───────────── */
+
+export type ToggleGroupItemProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseToggle>,
+  "className"
+> & {
+  className?: string;
+};
+
+/** ToggleGroup의 자식 항목. 부모 그룹의 variant·size를 자동으로 상속한다. */
+export const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+  ({ className, ...props }, ref) => {
+    const { variant, size } = useToggleGroupStyle();
+    return (
+      <BaseToggle
+        ref={ref}
+        className={cn(
+          styles.toggle,
+          styles[`toggle--${variant}`],
+          styles[`toggle--${size}`],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+ToggleGroupItem.displayName = "ToggleGroupItem";

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

@@ -0,0 +1,85 @@
+/* ───────────── Toggle ───────────── */
+
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  font-weight: var(--weight-medium);
+  line-height: 1;
+  cursor: pointer;
+  color: var(--foreground-muted);
+  background: transparent;
+  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* sizes */
+.toggle--sm { height: var(--control-sm);    padding: 0 0.625rem; font-size: var(--text-sm); }
+.toggle--md { height: var(--control-md);  padding: 0 var(--space-3);  font-size: var(--text-sm); }
+.toggle--lg { height: var(--control-lg);    padding: 0 var(--space-4);     font-size: var(--text-base); }
+
+/* 모바일/터치 */
+@media (hover: none) and (pointer: coarse) {
+  .toggle--sm { height: 2.25rem; }
+  .toggle--md { height: 2.75rem; }
+}
+
+/* variant: outline */
+.toggle--outline {
+  border-color: var(--border);
+}
+
+.toggle--outline:hover:not(:disabled):not([data-pressed]) {
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+
+/* variant: ghost */
+.toggle--ghost:hover:not(:disabled):not([data-pressed]) {
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+
+/* pressed */
+.toggle[data-pressed] {
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+
+.toggle--outline[data-pressed] {
+  border-color: var(--border-strong);
+}
+
+/* focus */
+.toggle:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* disabled */
+.toggle:disabled {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+/* ───────────── ToggleGroup ───────────── */
+
+.toggle-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+.toggle-group[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import styles from "./styles.module.css";
+
+import { cn } from "@SH_UI_UTILS@";
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+
+/** 여러 Tooltip이 공통 delay를 공유하도록 묶는다. 앱 루트에 한 번 두는 것을 권장. */
+export const TooltipProvider = BaseTooltip.Provider;
+
+/** Tooltip 루트. Trigger + Content를 자식으로 갖는다. */
+export const Tooltip = BaseTooltip.Root;
+
+/** 호버/포커스로 tooltip을 표시할 엘리먼트를 감싼다. render prop으로 Button 등과 결합. */
+export const TooltipTrigger = BaseTooltip.Trigger;
+
+export interface TooltipContentProps
+  extends WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseTooltip.Popup>
+  > {
+  /**
+   * Trigger 기준 배치 방향. 공간 부족 시 자동으로 반대편으로 뒤집힌다.
+   * @default "top"
+   */
+  side?: "top" | "right" | "bottom" | "left";
+  /**
+   * 트리거 축에서의 정렬.
+   * @default "center"
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Trigger와 Popup 사이 간격(px).
+   * @default 6
+   */
+  sideOffset?: number;
+  /**
+   * Trigger를 가리키는 화살표 표시 여부.
+   * @default false
+   */
+  showArrow?: boolean;
+  /**
+   * Portal이 마운트될 DOM 노드.
+   * @default document.body
+   */
+  container?: React.ComponentPropsWithoutRef<
+    typeof BaseTooltip.Portal
+  >["container"];
+}
+
+/**
+ * Tooltip의 본문. portal로 마운트되어 트리거 옆에 자동 위치 조정된다.
+ * 내용은 짧게 — 긴 설명이 필요하면 Popover를 사용할 것.
+ */
+export const TooltipContent = React.forwardRef<
+  HTMLDivElement,
+  TooltipContentProps
+>(function TooltipContent(
+  { className, children, side, align, sideOffset = 6, showArrow, container, ...props },
+  ref,
+) {
+  return (
+    <BaseTooltip.Portal container={container}>
+      <BaseTooltip.Positioner
+        className={styles.tooltip__positioner}
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+      >
+        <BaseTooltip.Popup
+          ref={ref}
+          className={cn(styles.tooltip__content, className)}
+          {...props}
+        >
+          {showArrow && (
+            <BaseTooltip.Arrow className={styles.tooltip__arrow} />
+          )}
+          {children}
+        </BaseTooltip.Popup>
+      </BaseTooltip.Positioner>
+    </BaseTooltip.Portal>
+  );
+});

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

@@ -0,0 +1,44 @@
+.tooltip__positioner {
+  z-index: var(--z-tooltip, var(--z-popover));
+  outline: none;
+}
+
+.tooltip__content {
+  padding: 0.375rem 0.625rem;
+  background: var(--foreground);
+  color: var(--background);
+  border-radius: calc(var(--radius) - 2px);
+  font-size: var(--text-xs);
+  line-height: 1.4;
+  max-width: 20rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  transform-origin: var(--transform-origin);
+  outline: none;
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.tooltip__content[data-starting-style],
+.tooltip__content[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
+.tooltip__arrow {
+  color: var(--foreground);
+}
+
+.tooltip__arrow svg {
+  display: block;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tooltip__content {
+    transition: none;
+  }
+  .tooltip__content[data-starting-style],
+  .tooltip__content[data-ending-style] {
+    transform: none;
+  }
+}