sh-ui-cli 0.52.0 → 0.52.2

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

@@ -1,307 +0,0 @@
-import { style, keyframes } from "@vanilla-extract/css";
-
-export const shUiToastEnterRight = keyframes({
-  "from": {
-    opacity: 0,
-    transform: "translateX(100%)",
-  },
-  "to": {
-    opacity: 1,
-    transform: "translateX(0)",
-  },
-});
-
-export const shUiToastExitRight = keyframes({
-  "from": {
-    opacity: 1,
-    transform: "translateX(0)",
-  },
-  "to": {
-    opacity: 0,
-    transform: "translateX(100%)",
-  },
-});
-
-export const shUiToastEnterLeft = keyframes({
-  "from": {
-    opacity: 0,
-    transform: "translateX(-100%)",
-  },
-  "to": {
-    opacity: 1,
-    transform: "translateX(0)",
-  },
-});
-
-export const shUiToastExitLeft = keyframes({
-  "from": {
-    opacity: 1,
-    transform: "translateX(0)",
-  },
-  "to": {
-    opacity: 0,
-    transform: "translateX(-100%)",
-  },
-});
-
-export const shUiToastEnterBottom = keyframes({
-  "from": {
-    opacity: 0,
-    transform: "translateY(100%)",
-  },
-  "to": {
-    opacity: 1,
-    transform: "translateY(0)",
-  },
-});
-
-export const shUiToastExitBottom = keyframes({
-  "from": {
-    opacity: 1,
-    transform: "translateY(0)",
-  },
-  "to": {
-    opacity: 0,
-    transform: "translateY(100%)",
-  },
-});
-
-export const shUiToastEnterTop = keyframes({
-  "from": {
-    opacity: 0,
-    transform: "translateY(-100%)",
-  },
-  "to": {
-    opacity: 1,
-    transform: "translateY(0)",
-  },
-});
-
-export const shUiToastExitTop = keyframes({
-  "from": {
-    opacity: 1,
-    transform: "translateY(0)",
-  },
-  "to": {
-    opacity: 0,
-    transform: "translateY(-100%)",
-  },
-});
-
-export const toastViewport = style({
-  position: "fixed",
-  zIndex: "var(--z-toast)",
-  display: "flex",
-  flexDirection: "column",
-  gap: "var(--space-2)",
-  maxWidth: "24rem",
-  width: "100%",
-  pointerEvents: "none",
-  selectors: {
-    "&[data-position="bottom-right"]": {
-      bottom: "var(--space-4)",
-      right: "var(--space-4)",
-      flexDirection: "column-reverse",
-    },
-    "&[data-position="bottom-left"]": {
-      bottom: "var(--space-4)",
-      left: "var(--space-4)",
-      flexDirection: "column-reverse",
-    },
-    "&[data-position="bottom-center"]": {
-      bottom: "var(--space-4)",
-      left: "50%",
-      transform: "translateX(-50%)",
-      flexDirection: "column-reverse",
-    },
-    "&[data-position="top-right"]": {
-      top: "var(--space-4)",
-      right: "var(--space-4)",
-    },
-    "&[data-position="top-left"]": {
-      top: "var(--space-4)",
-      left: "var(--space-4)",
-    },
-    "&[data-position="top-center"]": {
-      top: "var(--space-4)",
-      left: "50%",
-      transform: "translateX(-50%)",
-    },
-  },
-  "@media": {
-    "(max-width: 40rem)": {
-      maxWidth: "100%",
-      padding: "var(--space-4)",
-      selectors: {
-        "&[data-position="bottom-right"]": {
-          right: 0,
-          left: 0,
-          bottom: 0,
-          transform: "none",
-        },
-        "&[data-position="bottom-left"]": {
-          right: 0,
-          left: 0,
-          bottom: 0,
-          transform: "none",
-        },
-        "&[data-position="bottom-center"]": {
-          right: 0,
-          left: 0,
-          bottom: 0,
-          transform: "none",
-        },
-        "&[data-position="top-right"]": {
-          right: 0,
-          left: 0,
-          top: 0,
-          transform: "none",
-        },
-        "&[data-position="top-left"]": {
-          right: 0,
-          left: 0,
-          top: 0,
-          transform: "none",
-        },
-        "&[data-position="top-center"]": {
-          right: 0,
-          left: 0,
-          top: 0,
-          transform: "none",
-        },
-      },
-    },
-  },
-});
-
-export const toast = style({
-  position: "relative",
-  display: "flex",
-  alignItems: "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)",
-  borderRadius: "var(--radius)",
-  boxShadow: "0 4px 16px rgba(0, 0, 0, 0.12)",
-  pointerEvents: "auto",
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      animation: "none !important",
-    },
-  },
-});
-
-export const toast__icon = style({
-  flexShrink: 0,
-  display: "inline-flex",
-  alignItems: "center",
-  marginTop: "0.125rem",
-});
-
-export const toastSuccess = style({
-  selectors: {
-    [`& ${toast__icon}`]: {
-      color: "var(--success, #16a34a)",
-    },
-  },
-});
-
-export const toastDanger = style({
-  selectors: {
-    [`& ${toast__icon}`]: {
-      color: "var(--danger)",
-    },
-  },
-});
-
-export const toastWarning = style({
-  selectors: {
-    [`& ${toast__icon}`]: {
-      color: "var(--warning, #d97706)",
-    },
-  },
-});
-
-export const toast__body = style({
-  flex: 1,
-  minWidth: 0,
-});
-
-export const toast__title = style({
-  margin: 0,
-  fontSize: "var(--text-sm)",
-  fontWeight: "var(--weight-semibold)",
-  lineHeight: 1.4,
-  selectors: {
-    [`& + ${toast__description}`]: {
-      marginTop: "0.125rem",
-    },
-  },
-});
-
-export const toast__description = style({
-  margin: 0,
-  fontSize: "0.8125rem",
-  lineHeight: 1.4,
-  color: "var(--foreground-muted)",
-});
-
-export const toast__action = style({
-  flexShrink: 0,
-  display: "inline-flex",
-  alignItems: "center",
-  marginLeft: "auto",
-});
-
-export const toast__close = style({
-  position: "absolute",
-  top: "0.375rem",
-  right: "0.375rem",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "1.5rem",
-  height: "1.5rem",
-  padding: 0,
-  border: "none",
-  borderRadius: "calc(var(--radius) - 2px)",
-  background: "transparent",
-  color: "var(--foreground-muted)",
-  fontSize: "var(--text-sm)",
-  lineHeight: 1,
-  cursor: "pointer",
-  transition: "background-color var(--duration-fast), color var(--duration-fast)",
-  selectors: {
-    "&:hover": {
-      background: "var(--background-muted)",
-      color: "var(--foreground)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "toast-viewport": toastViewport,
-  "toast": toast,
-  "toast__icon": toast__icon,
-  "toast--success": toastSuccess,
-  "toast--danger": toastDanger,
-  "toast--warning": toastWarning,
-  "toast__body": toast__body,
-  "toast__title": toast__title,
-  "toast__description": toast__description,
-  "toast__action": toast__action,
-  "toast__close": toast__close,
-};

package/data/registry/react/components/toggle/index.vanilla-extract.tsx

@@ -1,131 +0,0 @@
-"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 { byKey, toggle, toggleSm, toggleMd, toggleLg, toggleOutline, toggleGhost, toggleGroup } from "./styles.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(
-        toggle,
-        byKey[`toggle--${variant}`],
-        byKey[`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(toggleGroup, 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(
-          toggle,
-          byKey[`toggle--${variant}`],
-          byKey[`toggle--${size}`],
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-ToggleGroupItem.displayName = "ToggleGroupItem";

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

@@ -1,109 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const toggle = style({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: "0.375rem",
-  border: "1px solid transparent",
-  borderRadius: "var(--radius)",
-  fontWeight: "var(--weight-medium)",
-  lineHeight: 1,
-  cursor: "pointer",
-  color: "var(--foreground-muted)",
-  background: "transparent",
-  transition: "background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast)",
-  userSelect: "none",
-  WebkitTapHighlightColor: "transparent",
-  selectors: {
-    "&[data-pressed]": {
-      background: "var(--background-muted)",
-      color: "var(--foreground)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-    "&:disabled": {
-      opacity: "var(--opacity-disabled)",
-      pointerEvents: "none",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-export const toggleSm = style({
-  height: "var(--control-sm)",
-  padding: "0 0.625rem",
-  fontSize: "var(--text-sm)",
-  "@media": {
-    "(hover: none) and (pointer: coarse)": {
-      height: "2.25rem",
-    },
-  },
-});
-
-export const toggleMd = style({
-  height: "var(--control-md)",
-  padding: "0 var(--space-3)",
-  fontSize: "var(--text-sm)",
-  "@media": {
-    "(hover: none) and (pointer: coarse)": {
-      height: "2.75rem",
-    },
-  },
-});
-
-export const toggleLg = style({
-  height: "var(--control-lg)",
-  padding: "0 var(--space-4)",
-  fontSize: "var(--text-base)",
-});
-
-export const toggleOutline = style({
-  borderColor: "var(--border)",
-  selectors: {
-    "&:hover:not(:disabled):not([data-pressed])": {
-      background: "var(--background-muted)",
-      color: "var(--foreground)",
-    },
-    "&[data-pressed]": {
-      borderColor: "var(--border-strong)",
-    },
-  },
-});
-
-export const toggleGhost = style({
-  selectors: {
-    "&:hover:not(:disabled):not([data-pressed])": {
-      background: "var(--background-muted)",
-      color: "var(--foreground)",
-    },
-  },
-});
-
-export const toggleGroup = style({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--space-1)",
-  selectors: {
-    "&[data-orientation="vertical"]": {
-      flexDirection: "column",
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "toggle": toggle,
-  "toggle--sm": toggleSm,
-  "toggle--md": toggleMd,
-  "toggle--lg": toggleLg,
-  "toggle--outline": toggleOutline,
-  "toggle--ghost": toggleGhost,
-  "toggle-group": toggleGroup,
-};

package/data/registry/react/components/tooltip/index.vanilla-extract.tsx

@@ -1,83 +0,0 @@
-import * as React from "react";
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-import { byKey, tooltip__positioner, tooltip__content, tooltip__arrow } from "./styles.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={tooltip__positioner}
-        side={side}
-        align={align}
-        sideOffset={sideOffset}
-      >
-        <BaseTooltip.Popup
-          ref={ref}
-          className={cn(tooltip__content, className)}
-          {...props}
-        >
-          {showArrow && (
-            <BaseTooltip.Arrow className={tooltip__arrow} />
-          )}
-          {children}
-        </BaseTooltip.Popup>
-      </BaseTooltip.Positioner>
-    </BaseTooltip.Portal>
-  );
-});

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

@@ -1,59 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const tooltip__positioner = style({
-  zIndex: "var(--z-tooltip, var(--z-popover))",
-  outline: "none",
-});
-
-export const tooltip__content = style({
-  padding: "0.375rem 0.625rem",
-  background: "var(--foreground)",
-  color: "var(--background)",
-  borderRadius: "calc(var(--radius) - 2px)",
-  fontSize: "var(--text-xs)",
-  lineHeight: 1.4,
-  maxWidth: "20rem",
-  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.12)",
-  transformOrigin: "var(--transform-origin)",
-  outline: "none",
-  transition: "opacity 120ms ease,\n    transform 120ms ease",
-  selectors: {
-    "&[data-starting-style]": {
-      opacity: 0,
-      transform: "scale(0.96)",
-    },
-    "&[data-ending-style]": {
-      opacity: 0,
-      transform: "scale(0.96)",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-      selectors: {
-        "&[data-starting-style]": {
-          transform: "none",
-        },
-        "&[data-ending-style]": {
-          transform: "none",
-        },
-      },
-    },
-  },
-});
-
-export const tooltip__arrow = style({
-  color: "var(--foreground)",
-  selectors: {
-    "& svg": {
-      display: "block",
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "tooltip__positioner": tooltip__positioner,
-  "tooltip__content": tooltip__content,
-  "tooltip__arrow": tooltip__arrow,
-};