sh-ui-cli 0.52.0 → 0.52.2

package/data/registry/react/components/date-picker/styles.css.ts

@@ -1,111 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const datePickerTrigger = style({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: "100%",
-  height: "var(--control-md)",
-  padding: "0 var(--space-3)",
-  background: "var(--background)",
-  color: "var(--foreground)",
-  border: "1px solid var(--border)",
-  borderRadius: "var(--radius)",
-  fontFamily: "inherit",
-  fontSize: "var(--text-sm)",
-  lineHeight: 1,
-  cursor: "pointer",
-  transition: "border-color var(--duration-fast), box-shadow var(--duration-fast)",
-  WebkitTapHighlightColor: "transparent",
-  selectors: {
-    "&:hover:not(:disabled)": {
-      borderColor: "var(--border-strong)",
-    },
-    "&:focus-visible": {
-      outline: "none",
-      borderColor: "var(--foreground)",
-      boxShadow: "0 0 0 1px var(--foreground)",
-    },
-    "&:disabled": {
-      opacity: "var(--opacity-disabled)",
-      cursor: "not-allowed",
-      background: "var(--background-subtle)",
-    },
-    "&[aria-invalid="true"]": {
-      borderColor: "var(--danger)",
-    },
-    "&[aria-invalid="true"]:focus-visible": {
-      boxShadow: "0 0 0 1px var(--danger)",
-    },
-  },
-  "@media": {
-    "(hover: none) and (pointer: coarse)": {
-      height: "2.75rem",
-      fontSize: "var(--text-base)",
-    },
-  },
-});
-
-export const datePickerValue = style({
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-export const datePickerPlaceholder = style({
-  color: "var(--foreground-subtle)",
-});
-
-export const datePickerIcon = style({
-  flexShrink: 0,
-  display: "inline-flex",
-  color: "var(--foreground-muted)",
-  marginLeft: "var(--space-2)",
-});
-
-export const datePickerPositioner = style({
-  zIndex: "var(--z-popover)",
-  outline: "none",
-});
-
-export const datePickerPopup = style({
-  background: "var(--background)",
-  border: "1px solid var(--border)",
-  borderRadius: "var(--radius)",
-  boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)",
-  outline: "none",
-  padding: "var(--space-3)",
-  transformOrigin: "var(--transform-origin)",
-  transition: "opacity 140ms ease, transform 140ms ease",
-  selectors: {
-    "&[data-starting-style]": {
-      opacity: 0,
-      transform: "scale(0.96)",
-    },
-    "&[data-ending-style]": {
-      opacity: 0,
-      transform: "scale(0.96)",
-    },
-  },
-});
-
-export const datePickerFooter = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  gap: "var(--space-2)",
-  marginTop: "var(--space-2)",
-  paddingTop: "var(--space-2)",
-  borderTop: "1px solid var(--border)",
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "date-picker__trigger": datePickerTrigger,
-  "date-picker__value": datePickerValue,
-  "date-picker__placeholder": datePickerPlaceholder,
-  "date-picker__icon": datePickerIcon,
-  "date-picker__positioner": datePickerPositioner,
-  "date-picker__popup": datePickerPopup,
-  "date-picker__footer": datePickerFooter,
-};

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

@@ -1,95 +0,0 @@
-import * as React from "react";
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-import { byKey, dialog__backdrop, dialog__content, dialog__title, dialog__description, dialog__footer, dialog__close } from "./styles.css";
-
-import { cn } from "@SH_UI_UTILS@";
-type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
-
-
-/**
- * 모달 다이얼로그 루트. 열림 상태를 가지며 자식으로 Trigger·Content를 둔다.
- * 주의를 강제하는 흐름(확인/입력)에 사용하고, 단순 안내는 Popover나 Toast를 권장.
- */
-export const Dialog = BaseDialog.Root;
-
-/** Dialog를 여는 트리거. 보통 Button을 감싸 사용. */
-export const DialogTrigger = BaseDialog.Trigger;
-
-/** 클릭 시 Dialog를 닫는 요소. footer의 취소 버튼 등에 사용. */
-export const DialogClose = BaseDialog.Close;
-
-/** 우상단에 배치되는 X 닫기 버튼. `aria-label="닫기"`가 자동 부여된다. */
-export function DialogCloseX({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
-  return (
-    <BaseDialog.Close
-      className={cn(dialog__close, className)}
-      aria-label="닫기"
-      {...props}
-    >
-      {children ?? "×"}
-    </BaseDialog.Close>
-  );
-}
-
-/** Dialog 본문 하단의 액션 버튼 영역. 보통 [취소, 확인] 순서로 배치. */
-export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn(dialog__footer, className)} {...props} />;
-}
-
-export interface DialogContentProps
-  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>> {
-  /**
-   * Portal이 마운트될 DOM 노드. 모달이 다른 stacking context에 갇혀야 할 때 지정한다.
-   * @default document.body
-   */
-  container?: React.ComponentPropsWithoutRef<typeof BaseDialog.Portal>["container"];
-}
-
-/**
- * Dialog의 실제 콘텐츠. Portal로 body 끝에 마운트되며 backdrop·focus trap·ESC 닫힘 등이 자동 처리된다.
- * 접근성: 안에 반드시 `DialogTitle`을 두고, 추가 설명은 `DialogDescription`으로 연결할 것.
- */
-export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  function DialogContent({ className, children, container, ...props }, ref) {
-    return (
-      <BaseDialog.Portal container={container}>
-        <BaseDialog.Backdrop className={dialog__backdrop} />
-        <BaseDialog.Popup
-          ref={ref}
-          className={cn(dialog__content, className)}
-          {...props}
-        >
-          {children}
-        </BaseDialog.Popup>
-      </BaseDialog.Portal>
-    );
-  },
-);
-
-/** Dialog의 제목. 접근성을 위해 DialogContent 안에 항상 포함시킬 것. */
-export const DialogTitle = React.forwardRef<
-  HTMLHeadingElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Title>>
->(function DialogTitle({ className, ...props }, ref) {
-  return (
-    <BaseDialog.Title
-      ref={ref}
-      className={cn(dialog__title, className)}
-      {...props}
-    />
-  );
-});
-
-/** Dialog의 보조 설명. 제목만으로 맥락이 부족할 때 사용한다. */
-export const DialogDescription = React.forwardRef<
-  HTMLParagraphElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Description>>
->(function DialogDescription({ className, ...props }, ref) {
-  return (
-    <BaseDialog.Description
-      ref={ref}
-      className={cn(dialog__description, className)}
-      {...props}
-    />
-  );
-});

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

@@ -1,140 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const dialog__backdrop = style({
-  position: "fixed",
-  inset: 0,
-  zIndex: "var(--z-overlay)",
-  background: "rgba(0, 0, 0, 0.25)",
-  backdropFilter: "blur(8px)",
-  transition: "opacity var(--duration-slow) ease",
-  selectors: {
-    "&[data-starting-style]": {
-      opacity: 0,
-    },
-    "&[data-ending-style]": {
-      opacity: 0,
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-export const dialog__content = style({
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  zIndex: "var(--z-modal)",
-  display: "flex",
-  flexDirection: "column",
-  width: "calc(100% - 2rem)",
-  maxWidth: "28rem",
-  maxHeight: "calc(100dvh - 4rem)",
-  padding: "var(--space-6)",
-  background: "var(--background)",
-  color: "var(--foreground)",
-  border: "1px solid var(--border)",
-  borderRadius: "var(--radius)",
-  boxShadow: "var(--shadow-xl)",
-  outline: "none",
-  overflowY: "auto",
-  transition: "opacity var(--duration-slow) ease,\n    transform var(--duration-slow) ease",
-  selectors: {
-    "&[data-starting-style]": {
-      opacity: 0,
-      transform: "translate(-50%, calc(-50% + 0.5rem)) scale(0.97)",
-    },
-    "&[data-ending-style]": {
-      opacity: 0,
-      transform: "translate(-50%, calc(-50% + 0.25rem)) scale(0.98)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-      selectors: {
-        "&[data-starting-style]": {
-          transform: "translate(-50%, -50%)",
-        },
-        "&[data-ending-style]": {
-          transform: "translate(-50%, -50%)",
-        },
-      },
-    },
-  },
-});
-
-export const dialog__title = style({
-  margin: "0 0 var(--space-1)",
-  fontWeight: "var(--weight-semibold)",
-  fontSize: "var(--text-lg)",
-  lineHeight: 1.4,
-});
-
-export const dialog__description = style({
-  margin: "0 0 var(--space-5)",
-  color: "var(--foreground-muted)",
-  fontSize: "var(--text-sm)",
-  lineHeight: 1.5,
-});
-
-export const dialog__footer = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  gap: "var(--space-2)",
-  paddingTop: "var(--space-4)",
-  borderTop: "1px solid var(--border)",
-  marginTop: "auto",
-});
-
-export const dialog__close = style({
-  position: "absolute",
-  top: "var(--space-3)",
-  right: "var(--space-3)",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "2rem",
-  height: "2rem",
-  border: 0,
-  borderRadius: "calc(var(--radius) - 2px)",
-  background: "transparent",
-  color: "var(--foreground-muted)",
-  fontSize: "var(--text-lg)",
-  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> = {
-  "dialog__backdrop": dialog__backdrop,
-  "dialog__content": dialog__content,
-  "dialog__title": dialog__title,
-  "dialog__description": dialog__description,
-  "dialog__footer": dialog__footer,
-  "dialog__close": dialog__close,
-};

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

@@ -1,255 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Menu as BaseMenu } from "@base-ui/react/menu";
-import { byKey, dm__trigger, dm__positioner, dm__content, dm__item, dmItemText, dmItemCheck, dmItemIndicator, dm__group, dm__label, dm__separator, dmSubArrow, dmSubTrigger } from "./styles.css";
-
-import { cn } from "@SH_UI_UTILS@";
-type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
-
-
-/* ───────── Root ───────── */
-
-export const DropdownMenu = BaseMenu.Root;
-
-/* ───────── Trigger ───────── */
-
-export const DropdownMenuTrigger = React.forwardRef<
-  HTMLButtonElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Trigger>>
->(function DropdownMenuTrigger({ className, ...props }, ref) {
-  return (
-    <BaseMenu.Trigger
-      ref={ref}
-      className={cn(dm__trigger, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── Content ─────────
- * Portal + Positioner + Popup을 한 컴포넌트로 묶는다. Popover와 동일한 관용.
- */
-
-export interface DropdownMenuContentProps
-  extends WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseMenu.Popup>
-  > {
-  side?: "top" | "right" | "bottom" | "left";
-  align?: "start" | "center" | "end";
-  /** Trigger-Popup 간격(px). 기본 6. */
-  sideOffset?: number;
-  container?: React.ComponentPropsWithoutRef<
-    typeof BaseMenu.Portal
-  >["container"];
-}
-
-export const DropdownMenuContent = React.forwardRef<
-  HTMLDivElement,
-  DropdownMenuContentProps
->(function DropdownMenuContent(
-  { className, children, side, align, sideOffset = 6, container, ...props },
-  ref,
-) {
-  return (
-    <BaseMenu.Portal container={container}>
-      <BaseMenu.Positioner
-        className={dm__positioner}
-        side={side}
-        align={align}
-        sideOffset={sideOffset}
-      >
-        <BaseMenu.Popup
-          ref={ref}
-          className={cn(dm__content, className)}
-          {...props}
-        >
-          {children}
-        </BaseMenu.Popup>
-      </BaseMenu.Positioner>
-    </BaseMenu.Portal>
-  );
-});
-
-/* ───────── Item ───────── */
-
-export const DropdownMenuItem = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Item>>
->(function DropdownMenuItem({ className, ...props }, ref) {
-  return (
-    <BaseMenu.Item
-      ref={ref}
-      className={cn(dm__item, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── CheckboxItem ───────── */
-
-export interface DropdownMenuCheckboxItemProps
-  extends WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseMenu.CheckboxItem>
-  > {}
-
-export const DropdownMenuCheckboxItem = React.forwardRef<
-  HTMLDivElement,
-  DropdownMenuCheckboxItemProps
->(function DropdownMenuCheckboxItem({ className, children, ...props }, ref) {
-  return (
-    <BaseMenu.CheckboxItem
-      ref={ref}
-      className={cn(dm__item, dmItemCheck, className)}
-      {...props}
-    >
-      <span className={dmItemIndicator} aria-hidden>
-        <BaseMenu.CheckboxItemIndicator>
-          <CheckIcon />
-        </BaseMenu.CheckboxItemIndicator>
-      </span>
-      <span className={dmItemText}>{children}</span>
-    </BaseMenu.CheckboxItem>
-  );
-});
-
-/* ───────── RadioGroup / RadioItem ───────── */
-
-export const DropdownMenuRadioGroup = BaseMenu.RadioGroup;
-
-export interface DropdownMenuRadioItemProps
-  extends WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseMenu.RadioItem>
-  > {}
-
-export const DropdownMenuRadioItem = React.forwardRef<
-  HTMLDivElement,
-  DropdownMenuRadioItemProps
->(function DropdownMenuRadioItem({ className, children, ...props }, ref) {
-  return (
-    <BaseMenu.RadioItem
-      ref={ref}
-      className={cn(dm__item, dmItemCheck, className)}
-      {...props}
-    >
-      <span className={dmItemIndicator} aria-hidden>
-        <BaseMenu.RadioItemIndicator>
-          <DotIcon />
-        </BaseMenu.RadioItemIndicator>
-      </span>
-      <span className={dmItemText}>{children}</span>
-    </BaseMenu.RadioItem>
-  );
-});
-
-/* ───────── Group / Label ───────── */
-
-export const DropdownMenuGroup = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.Group>>
->(function DropdownMenuGroup({ className, ...props }, ref) {
-  return (
-    <BaseMenu.Group
-      ref={ref}
-      className={cn(dm__group, className)}
-      {...props}
-    />
-  );
-});
-
-export const DropdownMenuLabel = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenu.GroupLabel>>
->(function DropdownMenuLabel({ className, ...props }, ref) {
-  return (
-    <BaseMenu.GroupLabel
-      ref={ref}
-      className={cn(dm__label, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── Separator ─────────
- * Base UI Menu에 전용 Separator가 없어 role="separator" div로 대체.
- */
-
-export const DropdownMenuSeparator = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(function DropdownMenuSeparator({ className, ...props }, ref) {
-  return (
-    <div
-      ref={ref}
-      role="separator"
-      aria-orientation="horizontal"
-      className={cn(dm__separator, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── Submenu ───────── */
-
-export const DropdownMenuSub = BaseMenu.SubmenuRoot;
-
-export const DropdownMenuSubTrigger = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseMenu.SubmenuTrigger>
-  >
->(function DropdownMenuSubTrigger({ className, children, ...props }, ref) {
-  return (
-    <BaseMenu.SubmenuTrigger
-      ref={ref}
-      className={cn(dm__item, dmSubTrigger, className)}
-      {...props}
-    >
-      <span className={dmItemText}>{children}</span>
-      <span className={dmSubArrow} aria-hidden>
-        <ChevronRightIcon />
-      </span>
-    </BaseMenu.SubmenuTrigger>
-  );
-});
-
-/** Submenu 내용물 — 최상위 Content와 동일한 포털 구조. */
-export const DropdownMenuSubContent = DropdownMenuContent;
-
-/* ───────── 기본 아이콘 ───────── */
-
-function CheckIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
-      <path
-        d="M3.5 8.5l3 3 6-7"
-        stroke="currentColor"
-        strokeWidth="1.75"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function DotIcon() {
-  return (
-    <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden>
-      <circle cx="4" cy="4" r="3" />
-    </svg>
-  );
-}
-
-function ChevronRightIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
-      <path
-        d="M6 4l4 4-4 4"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}