sh-ui-cli 0.52.1 → 0.52.2

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

@@ -1,165 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
-import { byKey, combobox__input, combobox__positioner, combobox__content, combobox__item, comboboxItemIndicator, comboboxItemText, combobox__empty, comboboxGroupLabel, combobox__chip, comboboxChipRemove } from "./styles.css";
-
-import { cn } from "@SH_UI_UTILS@";
-type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
-
-
-/**
- * Select + Input의 결합 — 타이핑으로 목록이 자동 필터링된다.
- * Base UI Combobox를 래핑해 `items` 배열을 받으면 기본 필터가 `input` 값 기준으로 동작.
- *
- *   <Combobox items={fruits}>
- *     <ComboboxInput placeholder="과일 검색" />
- *     <ComboboxContent>
- *       <ComboboxList>
- *         {(item) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
- *       </ComboboxList>
- *       <ComboboxEmpty>일치하는 항목 없음</ComboboxEmpty>
- *     </ComboboxContent>
- *   </Combobox>
- */
-export const Combobox = BaseCombobox.Root;
-
-export const ComboboxIcon = BaseCombobox.Icon;
-export const ComboboxTrigger = BaseCombobox.Trigger;
-export const ComboboxClear = BaseCombobox.Clear;
-export const ComboboxValue = BaseCombobox.Value;
-export const ComboboxGroup = BaseCombobox.Group;
-export const ComboboxChips = BaseCombobox.Chips;
-
-export const ComboboxInput = React.forwardRef<
-  HTMLInputElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Input>>
->(function ComboboxInput({ className, ...props }, ref) {
-  return (
-    <BaseCombobox.Input
-      ref={ref}
-      className={cn(combobox__input, className)}
-      {...props}
-    />
-  );
-});
-
-/** Portal + Positioner + Popup 래퍼. */
-export const ComboboxContent = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup>> & {
-    container?: React.ComponentPropsWithoutRef<typeof BaseCombobox.Portal>["container"];
-    sideOffset?: number;
-  }
->(function ComboboxContent(
-  { className, children, container, sideOffset = 4, ...props },
-  ref,
-) {
-  return (
-    <BaseCombobox.Portal container={container}>
-      <BaseCombobox.Positioner
-        className={combobox__positioner}
-        sideOffset={sideOffset}
-        align="start"
-      >
-        <BaseCombobox.Popup
-          ref={ref}
-          className={cn(combobox__content, className)}
-          {...props}
-        >
-          {children}
-        </BaseCombobox.Popup>
-      </BaseCombobox.Positioner>
-    </BaseCombobox.Portal>
-  );
-});
-
-export const ComboboxList = BaseCombobox.List;
-
-export const ComboboxItem = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Item>>
->(function ComboboxItem({ className, children, ...props }, ref) {
-  return (
-    <BaseCombobox.Item
-      ref={ref}
-      className={cn(combobox__item, className)}
-      {...props}
-    >
-      <BaseCombobox.ItemIndicator className={comboboxItemIndicator}>
-        <CheckIcon />
-      </BaseCombobox.ItemIndicator>
-      <span className={comboboxItemText}>{children}</span>
-    </BaseCombobox.Item>
-  );
-});
-
-export const ComboboxEmpty = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Empty>>
->(function ComboboxEmpty({ className, ...props }, ref) {
-  return (
-    <BaseCombobox.Empty
-      ref={ref}
-      className={cn(combobox__empty, className)}
-      {...props}
-    />
-  );
-});
-
-export const ComboboxGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.GroupLabel>>
->(function ComboboxGroupLabel({ className, ...props }, ref) {
-  return (
-    <BaseCombobox.GroupLabel
-      ref={ref}
-      className={cn(comboboxGroupLabel, className)}
-      {...props}
-    />
-  );
-});
-
-/** 다중 선택 칩. */
-export const ComboboxChip = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Chip>>
->(function ComboboxChip({ className, ...props }, ref) {
-  return (
-    <BaseCombobox.Chip
-      ref={ref}
-      className={cn(combobox__chip, className)}
-      {...props}
-    />
-  );
-});
-
-/** 칩 × 제거 버튼. */
-export const ComboboxChipRemove = React.forwardRef<
-  HTMLButtonElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.ChipRemove>>
->(function ComboboxChipRemove({ className, children, ...props }, ref) {
-  return (
-    <BaseCombobox.ChipRemove
-      ref={ref}
-      className={cn(comboboxChipRemove, className)}
-      {...props}
-    >
-      {children ?? "×"}
-    </BaseCombobox.ChipRemove>
-  );
-});
-
-function CheckIcon() {
-  return (
-    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden>
-      <path
-        d="M3 8.5l3 3 7-7"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}

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

@@ -1,174 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const combobox__input = style({
-  display: "inline-flex",
-  width: "100%",
-  minWidth: "10rem",
-  height: "var(--control-md)",
-  padding: "0 var(--space-3)",
-  background: "var(--background)",
-  color: "var(--foreground)",
-  border: "1px solid var(--border)",
-  borderRadius: "var(--radius)",
-  fontSize: "var(--text-sm)",
-  lineHeight: 1,
-  outline: "none",
-  transition: "border-color var(--duration-fast)",
-  selectors: {
-    "&::placeholder": {
-      color: "var(--foreground-subtle)",
-    },
-    "&:hover:not(:disabled)": {
-      borderColor: "var(--border-strong)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-    "&:disabled": {
-      opacity: "var(--opacity-disabled)",
-      pointerEvents: "none",
-    },
-  },
-});
-
-export const combobox__positioner = style({
-  zIndex: "var(--z-dropdown)",
-  outline: "none",
-  width: "var(--anchor-width)",
-});
-
-export const combobox__content = style({
-  maxHeight: "min(20rem, var(--available-height))",
-  overflowY: "auto",
-  padding: "var(--space-1)",
-  background: "var(--background)",
-  color: "var(--foreground)",
-  border: "1px solid var(--border)",
-  borderRadius: "var(--radius)",
-  boxShadow: "0 8px 24px rgba(0, 0, 0, 0.08)",
-  outline: "none",
-  transformOrigin: "var(--transform-origin)",
-  transition: "opacity 140ms ease, transform 140ms ease",
-  selectors: {
-    "&[data-starting-style]": {
-      opacity: 0,
-      transform: "scale(0.97)",
-    },
-    "&[data-ending-style]": {
-      opacity: 0,
-      transform: "scale(0.97)",
-    },
-  },
-});
-
-export const combobox__item = style({
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--space-2)",
-  padding: "0.375rem 0.75rem",
-  fontSize: "var(--text-sm)",
-  lineHeight: 1.4,
-  borderRadius: "calc(var(--radius) - 2px)",
-  cursor: "pointer",
-  userSelect: "none",
-  outline: "none",
-  selectors: {
-    "&[data-highlighted]": {
-      background: "var(--background-muted)",
-    },
-    "&:hover": {
-      background: "var(--background-muted)",
-    },
-    "&[data-selected]": {
-      color: "var(--foreground)",
-      fontWeight: "var(--weight-medium)",
-    },
-    "&[data-disabled]": {
-      opacity: "var(--opacity-disabled)",
-      pointerEvents: "none",
-    },
-  },
-});
-
-export const comboboxItemIndicator = style({
-  order: 1,
-  marginLeft: "auto",
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "var(--foreground)",
-});
-
-export const comboboxItemText = style({
-  flex: 1,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-export const combobox__empty = style({
-  padding: "var(--space-3) var(--space-2)",
-  textAlign: "center",
-  fontSize: "0.8125rem",
-  color: "var(--foreground-muted)",
-});
-
-export const comboboxGroupLabel = style({
-  padding: "0.375rem var(--space-2) var(--space-1)",
-  fontSize: "var(--text-xs)",
-  fontWeight: "var(--weight-semibold)",
-  color: "var(--foreground-muted)",
-  textTransform: "uppercase",
-  letterSpacing: "0.04em",
-});
-
-export const combobox__chip = style({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "var(--space-1)",
-  padding: "0.125rem 0.375rem 0.125rem var(--space-2)",
-  marginRight: "var(--space-1)",
-  fontSize: "var(--text-xs)",
-  lineHeight: "1.25rem",
-  background: "var(--background-muted)",
-  borderRadius: "calc(var(--radius) - 2px)",
-  whiteSpace: "nowrap",
-});
-
-export const comboboxChipRemove = style({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "1rem",
-  height: "1rem",
-  padding: 0,
-  border: 0,
-  borderRadius: "999px",
-  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)",
-      color: "var(--foreground)",
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "combobox__input": combobox__input,
-  "combobox__positioner": combobox__positioner,
-  "combobox__content": combobox__content,
-  "combobox__item": combobox__item,
-  "combobox__item-indicator": comboboxItemIndicator,
-  "combobox__item-text": comboboxItemText,
-  "combobox__empty": combobox__empty,
-  "combobox__group-label": comboboxGroupLabel,
-  "combobox__chip": combobox__chip,
-  "combobox__chip-remove": comboboxChipRemove,
-};

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

@@ -1,251 +0,0 @@
-import * as React from "react";
-import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-import { byKey, cm__trigger, cm__positioner, cm__content, cm__item, cmItemText, cmItemCheck, cmItemIndicator, cm__group, cm__label, cm__separator, cmSubArrow, cmSubTrigger } from "./styles.css";
-
-import { cn } from "@SH_UI_UTILS@";
-type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
-
-
-/* ───────── Root ───────── */
-
-/**
- * 우클릭(또는 long-press)으로 열리는 컨텍스트 메뉴 루트. 자식으로 Trigger와 Content를 둔다.
- * 사용 가능 액션이 명시적으로 보이는 게 유리한 경우엔 일반 버튼 + DropdownMenu를 권장.
- */
-export const ContextMenu = BaseContextMenu.Root;
-
-/* ───────── Trigger ─────────
- * 우클릭(또는 long-press)을 감지하는 wrapper. 기본은 투명, 사용자는
- * 자신의 영역(Card, 이미지 등)에 적용하여 감싼다.
- */
-
-/** 우클릭/long-press를 감지할 영역. Card나 이미지 등 임의 영역을 자식으로 감싼다. */
-export const ContextMenuTrigger = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Trigger>>
->(function ContextMenuTrigger({ className, ...props }, ref) {
-  return (
-    <BaseContextMenu.Trigger
-      ref={ref}
-      className={cn(cm__trigger, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── Content ───────── */
-
-export interface ContextMenuContentProps
-  extends WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>
-  > {
-  /**
-   * Portal이 마운트될 DOM 노드.
-   * @default document.body
-   */
-  container?: React.ComponentPropsWithoutRef<
-    typeof BaseContextMenu.Portal
-  >["container"];
-}
-
-/** 메뉴의 실제 콘텐츠. portal로 마운트되며 클릭 위치 기준으로 자동 배치된다. */
-export const ContextMenuContent = React.forwardRef<
-  HTMLDivElement,
-  ContextMenuContentProps
->(function ContextMenuContent({ className, children, container, ...props }, ref) {
-  return (
-    <BaseContextMenu.Portal container={container}>
-      <BaseContextMenu.Positioner className={cm__positioner}>
-        <BaseContextMenu.Popup
-          ref={ref}
-          className={cn(cm__content, className)}
-          {...props}
-        >
-          {children}
-        </BaseContextMenu.Popup>
-      </BaseContextMenu.Positioner>
-    </BaseContextMenu.Portal>
-  );
-});
-
-/* ───────── Item ───────── */
-
-/** 일반 메뉴 항목. 클릭 시 메뉴가 닫히고 onClick이 발생한다. */
-export const ContextMenuItem = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Item>>
->(function ContextMenuItem({ className, ...props }, ref) {
-  return (
-    <BaseContextMenu.Item
-      ref={ref}
-      className={cn(cm__item, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── CheckboxItem / RadioItem ───────── */
-
-/** 체크 표시를 토글하는 메뉴 항목. 메뉴는 닫지 않고 상태만 바꾸는 옵션 ON/OFF 용도. */
-export const ContextMenuCheckboxItem = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseContextMenu.CheckboxItem>
-  >
->(function ContextMenuCheckboxItem({ className, children, ...props }, ref) {
-  return (
-    <BaseContextMenu.CheckboxItem
-      ref={ref}
-      className={cn(cm__item, cmItemCheck, className)}
-      {...props}
-    >
-      <span className={cmItemIndicator} aria-hidden>
-        <BaseContextMenu.CheckboxItemIndicator>
-          <CheckIcon />
-        </BaseContextMenu.CheckboxItemIndicator>
-      </span>
-      <span className={cmItemText}>{children}</span>
-    </BaseContextMenu.CheckboxItem>
-  );
-});
-
-/** RadioItem들을 단일 선택 그룹으로 묶는 컨테이너. `value`로 선택값을 제어. */
-export const ContextMenuRadioGroup = BaseContextMenu.RadioGroup;
-
-/** ContextMenuRadioGroup 내부의 단일 선택 항목. */
-export const ContextMenuRadioItem = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseContextMenu.RadioItem>
-  >
->(function ContextMenuRadioItem({ className, children, ...props }, ref) {
-  return (
-    <BaseContextMenu.RadioItem
-      ref={ref}
-      className={cn(cm__item, cmItemCheck, className)}
-      {...props}
-    >
-      <span className={cmItemIndicator} aria-hidden>
-        <BaseContextMenu.RadioItemIndicator>
-          <DotIcon />
-        </BaseContextMenu.RadioItemIndicator>
-      </span>
-      <span className={cmItemText}>{children}</span>
-    </BaseContextMenu.RadioItem>
-  );
-});
-
-/* ───────── Group / Label / Separator ───────── */
-
-/** 의미적으로 묶이는 항목 그룹. ContextMenuLabel과 함께 사용해 카테고리 헤더를 붙인다. */
-export const ContextMenuGroup = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Group>>
->(function ContextMenuGroup({ className, ...props }, ref) {
-  return (
-    <BaseContextMenu.Group
-      ref={ref}
-      className={cn(cm__group, className)}
-      {...props}
-    />
-  );
-});
-
-/** 그룹의 카테고리 헤더 라벨. 클릭 불가, 시각·접근성 컨텍스트 제공용. */
-export const ContextMenuLabel = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>
-  >
->(function ContextMenuLabel({ className, ...props }, ref) {
-  return (
-    <BaseContextMenu.GroupLabel
-      ref={ref}
-      className={cn(cm__label, className)}
-      {...props}
-    />
-  );
-});
-
-/** 항목 사이의 시각적 구분선. */
-export const ContextMenuSeparator = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(function ContextMenuSeparator({ className, ...props }, ref) {
-  return (
-    <div
-      ref={ref}
-      role="separator"
-      aria-orientation="horizontal"
-      className={cn(cm__separator, className)}
-      {...props}
-    />
-  );
-});
-
-/* ───────── Submenu ───────── */
-
-/** 서브메뉴 루트. 호버/포커스 시 우측으로 자식 메뉴를 펼친다. */
-export const ContextMenuSub = BaseContextMenu.SubmenuRoot;
-
-/** 서브메뉴를 여는 항목. 우측 화살표 아이콘이 자동 부착된다. */
-export const ContextMenuSubTrigger = React.forwardRef<
-  HTMLDivElement,
-  WithStringClassName<
-    React.ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>
-  >
->(function ContextMenuSubTrigger({ className, children, ...props }, ref) {
-  return (
-    <BaseContextMenu.SubmenuTrigger
-      ref={ref}
-      className={cn(cm__item, cmSubTrigger, className)}
-      {...props}
-    >
-      <span className={cmItemText}>{children}</span>
-      <span className={cmSubArrow} aria-hidden>
-        <ChevronRightIcon />
-      </span>
-    </BaseContextMenu.SubmenuTrigger>
-  );
-});
-
-/** 서브메뉴의 콘텐츠. ContextMenuContent의 별칭이다. */
-export const ContextMenuSubContent = ContextMenuContent;
-
-/* ───────── 기본 아이콘 ───────── */
-
-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>
-  );
-}