sh-ui-cli 0.52.1 → 0.52.2

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

@@ -1,113 +0,0 @@
-import * as React from "react";
-import { Popover as BasePopover } from "@base-ui/react/popover";
-import { byKey, popover__positioner, popover__content, popover__arrow, popover__title, popover__description } from "./styles.css";
-
-import { cn } from "@SH_UI_UTILS@";
-type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
-
-
-/**
- * 트리거 요소에 떠다니는 가벼운 패널을 띄우는 비모달 컨테이너. 포커스를 가두지 않으므로
- * 짧은 폼·정보 표시에 적합하고, 강제 응답이 필요하면 Dialog를 사용할 것.
- */
-export const Popover = BasePopover.Root;
-
-/** Popover를 여는 트리거. */
-export const PopoverTrigger = BasePopover.Trigger;
-
-/** Popover를 닫는 요소. */
-export const PopoverClose = BasePopover.Close;
-
-export interface PopoverContentProps
-  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BasePopover.Popup>> {
-  /**
-   * Trigger 기준 배치 방향. 공간 부족 시 자동으로 반대편으로 뒤집힌다.
-   * @default "bottom"
-   */
-  side?: "top" | "right" | "bottom" | "left";
-  /**
-   * 트리거 축에서의 정렬.
-   * - `start` — 트리거 시작 가장자리 정렬
-   * - `center` — 가운데 (기본)
-   * - `end` — 트리거 끝 가장자리 정렬
-   *
-   * @default "center"
-   */
-  align?: "start" | "center" | "end";
-  /**
-   * Trigger와 Popup 사이 간격(px).
-   * @default 8
-   */
-  sideOffset?: number;
-  /**
-   * Portal이 마운트될 DOM 노드.
-   * @default document.body
-   */
-  container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>["container"];
-  /**
-   * Trigger를 가리키는 화살표 표시 여부.
-   * @default false
-   */
-  showArrow?: boolean;
-}
-
-/**
- * Popover의 콘텐츠. 트리거에 자동 위치 조정되어 portal로 마운트된다.
- * `side`/`align`/`sideOffset`로 배치를 미세조정하고, `showArrow`로 화살표를 노출한다.
- */
-export const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
-  function PopoverContent(
-    { className, children, side, align, sideOffset = 8, container, showArrow, ...props },
-    ref,
-  ) {
-    return (
-      <BasePopover.Portal container={container}>
-        <BasePopover.Positioner
-          className={popover__positioner}
-          side={side}
-          align={align}
-          sideOffset={sideOffset}
-        >
-          <BasePopover.Popup
-            ref={ref}
-            className={cn(popover__content, className)}
-            {...props}
-          >
-            {showArrow && (
-              <BasePopover.Arrow className={popover__arrow} />
-            )}
-            {children}
-          </BasePopover.Popup>
-        </BasePopover.Positioner>
-      </BasePopover.Portal>
-    );
-  },
-);
-
-/** Popover 콘텐츠의 제목. 접근성을 위해 짧은 제목이라도 함께 두는 것을 권장. */
-export const PopoverTitle = React.forwardRef<
-  HTMLHeadingElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BasePopover.Title>>
->(function PopoverTitle({ className, ...props }, ref) {
-  return (
-    <BasePopover.Title
-      ref={ref}
-      className={cn(popover__title, className)}
-      {...props}
-    />
-  );
-});
-
-/** Popover 콘텐츠의 보조 설명. */
-export const PopoverDescription = React.forwardRef<
-  HTMLParagraphElement,
-  WithStringClassName<React.ComponentPropsWithoutRef<typeof BasePopover.Description>>
->(function PopoverDescription({ className, ...props }, ref) {
-  return (
-    <BasePopover.Description
-      ref={ref}
-      className={cn(popover__description, className)}
-      {...props}
-    />
-  );
-});

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

@@ -1,78 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const popover__positioner = style({
-  zIndex: "var(--z-popover)",
-  outline: "none",
-});
-
-export const popover__content = style({
-  minWidth: "12rem",
-  padding: "var(--space-2)",
-  background: "var(--background)",
-  color: "var(--foreground)",
-  border: "1px solid var(--border)",
-  borderRadius: "var(--radius)",
-  boxShadow: "0 8px 24px rgba(0, 0, 0, 0.12)",
-  outline: "none",
-  fontSize: "var(--text-sm)",
-  lineHeight: 1.4,
-  transformOrigin: "var(--transform-origin)",
-  transition: "opacity 140ms ease,\n    transform 140ms ease",
-  selectors: {
-    "&[data-starting-style]": {
-      opacity: 0,
-      transform: "scale(0.96)",
-    },
-    "&[data-ending-style]": {
-      opacity: 0,
-      transform: "scale(0.96)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-      selectors: {
-        "&[data-starting-style]": {
-          transform: "none",
-        },
-        "&[data-ending-style]": {
-          transform: "none",
-        },
-      },
-    },
-  },
-});
-
-export const popover__arrow = style({
-  color: "var(--background)",
-  selectors: {
-    "& svg": {
-      display: "block",
-    },
-  },
-});
-
-export const popover__title = style({
-  margin: "0 0 var(--space-1)",
-  fontWeight: "var(--weight-semibold)",
-  fontSize: "0.9375rem",
-});
-
-export const popover__description = style({
-  margin: 0,
-  color: "var(--foreground-muted)",
-  fontSize: "0.8125rem",
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "popover__positioner": popover__positioner,
-  "popover__content": popover__content,
-  "popover__arrow": popover__arrow,
-  "popover__title": popover__title,
-  "popover__description": popover__description,
-};

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

@@ -1,54 +0,0 @@
-import * as React from "react";
-import { byKey, progress, progress__indicator } from "./styles.css";
-
-
-import { cn } from "@SH_UI_UTILS@";
-function clamp(n: number, min: number, max: number) {
-  return Math.min(max, Math.max(min, n));
-}
-
-export interface ProgressProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
-  /** 0~100 사이의 현재 값. 생략 시 indeterminate 모드. */
-  value?: number;
-  /** 최댓값. 기본 100. */
-  max?: number;
-  /** 접근성: aria-label (시각적 라벨이 없으면 권장). */
-  "aria-label"?: string;
-}
-
-/**
- * 작업 진행도를 가로 바로 표시. value가 없으면 무한 루프 indeterminate.
- *
- * - determinate: `<Progress value={40} />`
- * - indeterminate: `<Progress aria-label="로딩 중" />`
- */
-export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
-  function Progress(
-    { value, max = 100, className, "aria-label": ariaLabel, ...props },
-    ref,
-  ) {
-    const isDeterminate = value !== undefined;
-    const normalized = isDeterminate ? clamp((value / max) * 100, 0, 100) : 0;
-
-    return (
-      <div
-        ref={ref}
-        role="progressbar"
-        aria-label={ariaLabel}
-        aria-valuemin={isDeterminate ? 0 : undefined}
-        aria-valuemax={isDeterminate ? max : undefined}
-        aria-valuenow={isDeterminate ? value : undefined}
-        data-state={isDeterminate ? "determinate" : "indeterminate"}
-        className={cn(progress, className)}
-        {...props}
-      >
-        <div
-          className={progress__indicator}
-          style={isDeterminate ? { width: `${normalized}%` } : undefined}
-        />
-      </div>
-    );
-  },
-);
-Progress.displayName = "Progress";

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

@@ -1,53 +0,0 @@
-import { style, keyframes } from "@vanilla-extract/css";
-
-export const shUiProgressSlide = keyframes({
-  "0%": {
-    transform: "translateX(-100%)",
-  },
-  "100%": {
-    transform: "translateX(250%)",
-  },
-});
-
-export const progress = style({
-  position: "relative",
-  width: "100%",
-  height: "0.5rem",
-  overflow: "hidden",
-  background: "var(--background-muted)",
-  borderRadius: "999px",
-  selectors: {
-    [`&[data-state="indeterminate"] ${progress__indicator}`]: {
-      width: "40%",
-      animation: "sh-ui-progress-slide 1.2s ease-in-out infinite",
-    },
-  },
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      selectors: {
-        [`&[data-state="indeterminate"] ${progress__indicator}`]: {
-          animation: "none",
-          transform: "translateX(75%)",
-        },
-      },
-    },
-  },
-});
-
-export const progress__indicator = style({
-  height: "100%",
-  background: "var(--primary)",
-  borderRadius: "999px",
-  transition: "width var(--duration-base) ease",
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "progress": progress,
-  "progress__indicator": progress__indicator,
-};

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

@@ -1,65 +0,0 @@
-import * as React from "react";
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-import { byKey, radio, radio__indicator, radioGroup } from "./styles.css";
-
-
-import { cn } from "@SH_UI_UTILS@";
-/* ───────────── Radio ───────────── */
-
-export type RadioProps = Omit<
-  React.ComponentPropsWithoutRef<typeof BaseRadio.Root>,
-  "className"
-> & {
-  className?: string;
-};
-
-/**
- * 단일 선택지. 단독으로 쓰지 않고 반드시 `RadioGroup` 안에 두 개 이상을 묶어 사용한다.
- * 단일 선택이지만 즉시 적용되는 설정에는 Switch를, 다중 선택에는 Checkbox를 권장.
- */
-export const Radio = React.forwardRef<HTMLElement, RadioProps>(
-  ({ className, ...props }, ref) => (
-    <BaseRadio.Root
-      ref={ref}
-      className={cn(radio, className)}
-      {...props}
-    >
-      <BaseRadio.Indicator className={radio__indicator} />
-    </BaseRadio.Root>
-  ),
-);
-Radio.displayName = "Radio";
-
-/* ───────────── RadioGroup ───────────── */
-
-export type RadioGroupProps = Omit<
-  React.ComponentPropsWithoutRef<typeof BaseRadioGroup>,
-  "className"
-> & {
-  className?: string;
-  /**
-   * 그룹 내 항목 배치 방향.
-   * - `vertical` — 세로 나열 (기본)
-   * - `horizontal` — 가로 나열. 짧은 라벨 2~3개에만 권장
-   *
-   * @default "vertical"
-   */
-  orientation?: "horizontal" | "vertical";
-};
-
-/**
- * 여러 Radio를 묶는 컨테이너. 같은 `name` 아래 단일 선택을 보장하고,
- * 키보드 화살표로 항목 간 이동이 가능하다. 그룹 라벨은 외부 `<Label>`로 제공할 것.
- */
-export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
-  ({ className, orientation = "vertical", ...props }, ref) => (
-    <BaseRadioGroup
-      ref={ref}
-      className={cn(radioGroup, className)}
-      data-orientation={orientation}
-      {...props}
-    />
-  ),
-);
-RadioGroup.displayName = "RadioGroup";

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

@@ -1,79 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const radio = style({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "1.125rem",
-  height: "1.125rem",
-  border: "1px solid var(--border-strong)",
-  borderRadius: "999px",
-  background: "var(--background)",
-  cursor: "pointer",
-  flexShrink: 0,
-  transition: "border-color var(--duration-fast)",
-  WebkitTapHighlightColor: "transparent",
-  selectors: {
-    "&:hover:not([data-disabled])": {
-      borderColor: "var(--foreground)",
-    },
-    "&:focus-visible": {
-      outline: "var(--border-width-strong) solid var(--foreground)",
-      outlineOffset: "2px",
-    },
-    "&[data-checked]": {
-      borderColor: "var(--primary)",
-    },
-    "&[data-disabled]": {
-      opacity: "var(--opacity-disabled)",
-      cursor: "not-allowed",
-    },
-    [`&[data-checked] ${radio__indicator}`]: {
-      transform: "scale(1)",
-    },
-  },
-  "@media": {
-    "(hover: none) and (pointer: coarse)": {
-      width: "1.25rem",
-      height: "1.25rem",
-    },
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-export const radio__indicator = style({
-  width: "0.5rem",
-  height: "0.5rem",
-  borderRadius: "999px",
-  background: "var(--primary)",
-  transform: "scale(0)",
-  transition: "transform var(--duration-fast) ease-out",
-  "@media": {
-    "(prefers-reduced-motion: reduce)": {
-      transition: "none",
-    },
-  },
-});
-
-export const radioGroup = style({
-  display: "flex",
-  gap: "0.625rem",
-  selectors: {
-    "&[data-orientation="vertical"]": {
-      flexDirection: "column",
-    },
-    "&[data-orientation="horizontal"]": {
-      flexDirection: "row",
-      flexWrap: "wrap",
-    },
-  },
-});
-
-/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
-export const byKey: Record<string, string> = {
-  "radio": radio,
-  "radio__indicator": radio__indicator,
-  "radio-group": radioGroup,
-};