sh-ui-cli 0.48.0 → 0.50.0

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

@@ -0,0 +1,298 @@
+"use client";
+
+import * as React from "react";
+import { byKey, slider, sliderDisabled, slider__track, slider__range, slider__thumb } 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));
+}
+
+function snap(value: number, step: number, min: number) {
+  if (step <= 0) return value;
+  return min + Math.round((value - min) / step) * step;
+}
+
+interface SliderContextValue {
+  value: number;
+  setValue: (next: number) => void;
+  min: number;
+  max: number;
+  step: number;
+  disabled: boolean;
+  ariaLabel?: string;
+  trackRef: React.RefObject<HTMLDivElement | null>;
+  setTrackEl: (el: HTMLDivElement | null) => void;
+  percent: string;
+}
+
+const SliderContext = React.createContext<SliderContextValue | null>(null);
+
+function useSliderContext(): SliderContextValue {
+  const ctx = React.useContext(SliderContext);
+  if (!ctx) {
+    throw new Error("Slider 하위 컴포넌트는 <Slider> 안에서만 사용할 수 있습니다.");
+  }
+  return ctx;
+}
+
+/** 현재 Slider 상태를 읽을 수 있는 hook. 외부 라벨·커스텀 컨트롤에 사용. */
+export function useSliderState(): Pick<
+  SliderContextValue,
+  "value" | "min" | "max" | "step" | "disabled"
+> {
+  const { value, min, max, step, disabled } = useSliderContext();
+  return { value, min, max, step, disabled };
+}
+
+export interface SliderProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  /** 접근성: aria-label. Thumb으로 전달됨. */
+  "aria-label"?: string;
+}
+
+/**
+ * 값 범위 안에서 단일 값을 선택. 마우스/터치 드래그 + 키보드(화살표/Home/End/PageUp·Down) 지원.
+ *
+ * 기본 렌더(자식 생략 시) — `<SliderTrack><SliderRange /><SliderThumb /></SliderTrack>`.
+ * 커스텀 레이아웃이 필요하면 하위 컴포넌트를 직접 조합한다.
+ */
+export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+  function Slider(
+    {
+      value: valueProp,
+      defaultValue = 0,
+      onValueChange,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      className,
+      children,
+      "aria-label": ariaLabel,
+      ...rest
+    },
+    ref,
+  ) {
+    const isControlled = valueProp !== undefined;
+    const [internal, setInternal] = React.useState(defaultValue);
+    const rawValue = isControlled ? (valueProp as number) : internal;
+    const value = clamp(rawValue, min, max);
+
+    const trackRef = React.useRef<HTMLDivElement | null>(null);
+    const setTrackEl = React.useCallback((el: HTMLDivElement | null) => {
+      trackRef.current = el;
+    }, []);
+
+    const setValue = React.useCallback(
+      (next: number) => {
+        const snapped = clamp(snap(next, step, min), min, max);
+        if (snapped === value) return;
+        if (!isControlled) setInternal(snapped);
+        onValueChange?.(snapped);
+      },
+      [isControlled, max, min, onValueChange, step, value],
+    );
+
+    const ratio = max === min ? 0 : (value - min) / (max - min);
+    const percent = `${ratio * 100}%`;
+
+    const ctxValue = React.useMemo<SliderContextValue>(
+      () => ({
+        value,
+        setValue,
+        min,
+        max,
+        step,
+        disabled,
+        ariaLabel,
+        trackRef,
+        setTrackEl,
+        percent,
+      }),
+      [ariaLabel, disabled, max, min, percent, setTrackEl, setValue, step, value],
+    );
+
+    return (
+      <SliderContext.Provider value={ctxValue}>
+        <div
+          ref={ref}
+          {...rest}
+          className={cn(
+            slider,
+            disabled && sliderDisabled,
+            className,
+          )}
+          data-disabled={disabled || undefined}
+        >
+          {children ?? (
+            <SliderTrack>
+              <SliderRange />
+              <SliderThumb />
+            </SliderTrack>
+          )}
+        </div>
+      </SliderContext.Provider>
+    );
+  },
+);
+Slider.displayName = "Slider";
+
+/* ───────── SliderTrack ─────────
+ * 클릭/드래그 수신을 담당. 내부에 SliderRange + SliderThumb을 자식으로 조합.
+ */
+export const SliderTrack = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function SliderTrack(
+  { className, onPointerDown: userOnPointerDown, children, ...props },
+  ref,
+) {
+  const { disabled, setValue, min, max, setTrackEl, trackRef } = useSliderContext();
+
+  const mergedRef = React.useCallback(
+    (el: HTMLDivElement | null) => {
+      setTrackEl(el);
+      if (typeof ref === "function") ref(el);
+      else if (ref)
+        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+    },
+    [ref, setTrackEl],
+  );
+
+  const moveToClient = (clientX: number) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const ratio = clamp((clientX - r.left) / r.width, 0, 1);
+    setValue(min + ratio * (max - min));
+  };
+
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    userOnPointerDown?.(e);
+    if (e.defaultPrevented || disabled) return;
+    const el = trackRef.current;
+    if (!el) return;
+    el.setPointerCapture(e.pointerId);
+    moveToClient(e.clientX);
+
+    const onMove = (ev: PointerEvent) => moveToClient(ev.clientX);
+    const onUp = (ev: PointerEvent) => {
+      el.releasePointerCapture(ev.pointerId);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerup", onUp);
+    };
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerup", onUp);
+  };
+
+  return (
+    <div
+      ref={mergedRef}
+      className={cn(slider__track, className)}
+      onPointerDown={onPointerDown}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <SliderRange />
+          <SliderThumb />
+        </>
+      )}
+    </div>
+  );
+});
+SliderTrack.displayName = "SliderTrack";
+
+/* ───────── SliderRange ─────────
+ * 선택된 값까지의 진행 바. 넓이는 Context의 percent로 계산.
+ */
+export const SliderRange = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(function SliderRange({ className, style, ...props }, ref) {
+  const { percent } = useSliderContext();
+  return (
+    <div
+      ref={ref}
+      className={cn(slider__range, className)}
+      style={{ width: percent, ...style }}
+      {...props}
+    />
+  );
+});
+SliderRange.displayName = "SliderRange";
+
+/* ───────── SliderThumb ─────────
+ * 키보드 포커스 및 조작 수신. aria-valuenow 등 접근성 속성을 담는다.
+ */
+export const SliderThumb = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "tabIndex">
+>(function SliderThumb(
+  { className, style, onKeyDown: userOnKeyDown, ...props },
+  ref,
+) {
+  const { value, setValue, min, max, step, disabled, ariaLabel, percent } =
+    useSliderContext();
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    userOnKeyDown?.(e);
+    if (e.defaultPrevented || disabled) return;
+    const big = e.shiftKey ? step * 10 : step;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        e.preventDefault();
+        setValue(value + big);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        e.preventDefault();
+        setValue(value - big);
+        break;
+      case "Home":
+        e.preventDefault();
+        setValue(min);
+        break;
+      case "End":
+        e.preventDefault();
+        setValue(max);
+        break;
+      case "PageUp":
+        e.preventDefault();
+        setValue(value + step * 10);
+        break;
+      case "PageDown":
+        e.preventDefault();
+        setValue(value - step * 10);
+        break;
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      role="slider"
+      tabIndex={disabled ? -1 : 0}
+      aria-label={ariaLabel}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-disabled={disabled || undefined}
+      onKeyDown={onKeyDown}
+      className={cn(slider__thumb, className)}
+      style={{ left: percent, ...style }}
+      {...props}
+    />
+  );
+});
+SliderThumb.displayName = "SliderThumb";

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

@@ -0,0 +1,75 @@
+import { style } from "@vanilla-extract/css";
+
+export const slider = style({
+  position: "relative",
+  width: "100%",
+  padding: "var(--space-2) 0",
+  userSelect: "none",
+  WebkitUserSelect: "none",
+});
+
+export const sliderDisabled = style({
+  opacity: "var(--opacity-disabled)",
+  pointerEvents: "none",
+});
+
+export const slider__track = style({
+  position: "relative",
+  width: "100%",
+  height: "0.375rem",
+  background: "var(--background-muted)",
+  borderRadius: "999px",
+  cursor: "pointer",
+  touchAction: "none",
+});
+
+export const slider__range = style({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  height: "100%",
+  background: "var(--primary)",
+  borderRadius: "999px",
+  pointerEvents: "none",
+});
+
+export const slider__thumb = style({
+  position: "absolute",
+  top: "50%",
+  width: "1rem",
+  height: "1rem",
+  marginLeft: "-0.5rem",
+  transform: "translateY(-50%)",
+  background: "var(--background)",
+  border: "2px solid var(--primary)",
+  borderRadius: "50%",
+  boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+  cursor: "grab",
+  transition: "transform 80ms",
+  selectors: {
+    "&:active": {
+      cursor: "grabbing",
+      transform: "translateY(-50%) scale(1.1)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+  },
+  "@media": {
+    "(hover: none) and (pointer: coarse)": {
+      width: "1.25rem",
+      height: "1.25rem",
+      marginLeft: "-0.625rem",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "slider": slider,
+  "slider--disabled": sliderDisabled,
+  "slider__track": slider__track,
+  "slider__range": slider__range,
+  "slider__thumb": slider__thumb,
+};

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { byKey, spinner, spinnerSm, spinnerMd, spinnerLg, spinner__ring } from "./styles.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+export type SpinnerSize = "sm" | "md" | "lg";
+
+export interface SpinnerProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "role"> {
+  size?: SpinnerSize;
+  /** 접근성: 로딩 중임을 알리는 라벨. 기본 "로딩 중". */
+  "aria-label"?: string;
+}
+
+/**
+ * 짧은 비동기 작업의 로딩 표시. 200ms 이상 걸리는 요청에는 즉시 피드백을 준다는
+ * 원칙(ui-states.md)에 맞춰 버튼·입력 등에 인라인으로 사용.
+ */
+export const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
+  function Spinner(
+    { size = "md", className, "aria-label": ariaLabel = "로딩 중", ...props },
+    ref,
+  ) {
+    return (
+      <span
+        ref={ref}
+        role="status"
+        aria-live="polite"
+        aria-label={ariaLabel}
+        className={cn(spinner, byKey[`spinner--${size}`], className)}
+        {...props}
+      >
+        <span className={spinner__ring} aria-hidden />
+      </span>
+    );
+  },
+);
+Spinner.displayName = "Spinner";

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

@@ -0,0 +1,60 @@
+import { style, keyframes } from "@vanilla-extract/css";
+
+export const shUiSpinnerRotate = keyframes({
+  "to": {
+    transform: "rotate(360deg)",
+  },
+});
+
+export const spinner = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  verticalAlign: "middle",
+  color: "currentColor",
+});
+
+export const spinnerSm = style({
+  width: "0.875rem",
+  height: "0.875rem",
+  selectors: {
+    [`& ${spinner__ring}`]: {
+      borderWidth: "1.5px",
+    },
+  },
+});
+
+export const spinnerMd = style({
+  width: "1.125rem",
+  height: "1.125rem",
+});
+
+export const spinnerLg = style({
+  width: "1.5rem",
+  height: "1.5rem",
+});
+
+export const spinner__ring = style({
+  display: "inline-block",
+  width: "100%",
+  height: "100%",
+  border: "2px solid currentColor",
+  borderRadius: "999px",
+  borderTopColor: "transparent",
+  opacity: 0.8,
+  animation: "sh-ui-spinner-rotate 0.8s linear infinite",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      animationDuration: "3s",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "spinner": spinner,
+  "spinner--sm": spinnerSm,
+  "spinner--md": spinnerMd,
+  "spinner--lg": spinnerLg,
+  "spinner__ring": spinner__ring,
+};

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { byKey, switch_, switchSm, switchMd, switch__thumb } from "./styles.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+/* ───────────── Switch ───────────── */
+
+export type SwitchProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseSwitch.Root>,
+  "className"
+> & {
+  className?: string;
+  /**
+   * 크기.
+   * - `sm` — 조밀한 폼이나 툴바
+   * - `md` — 일반 (기본)
+   *
+   * @default "md"
+   */
+  size?: "sm" | "md";
+};
+
+/**
+ * 즉시 반영되는 on/off 토글. 변경이 즉시 적용되는 설정에 사용하고, 폼 제출과
+ * 함께 적용되는 선택에는 Checkbox를 권장. label과 연결해 접근성 텍스트를 함께 제공할 것.
+ */
+export const Switch = React.forwardRef<HTMLElement, SwitchProps>(
+  ({ className, size = "md", ...props }, ref) => (
+    <BaseSwitch.Root
+      ref={ref}
+      className={cn(switch_, byKey[`switch--${size}`], className)}
+      {...props}
+    >
+      <BaseSwitch.Thumb className={switch__thumb} />
+    </BaseSwitch.Root>
+  ),
+);
+Switch.displayName = "Switch";

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

@@ -0,0 +1,87 @@
+import { style } from "@vanilla-extract/css";
+
+export const switch_ = style({
+  display: "inline-flex",
+  alignItems: "center",
+  border: "none",
+  borderRadius: "999px",
+  background: "var(--background-muted)",
+  cursor: "pointer",
+  flexShrink: 0,
+  padding: "0.125rem",
+  transition: "background-color 150ms",
+  WebkitTapHighlightColor: "transparent",
+  selectors: {
+    "&:hover:not([data-disabled])": {
+      background: "var(--border-strong)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&[data-checked]": {
+      background: "var(--primary)",
+    },
+    "&[data-checked]:hover:not([data-disabled])": {
+      background: "var(--primary-hover)",
+    },
+    "&[data-disabled]": {
+      opacity: "var(--opacity-disabled)",
+      cursor: "not-allowed",
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms !important",
+    },
+  },
+});
+
+export const switchSm = style({
+  width: "2rem",
+  height: "1.125rem",
+  selectors: {
+    [`& ${switch__thumb}`]: {
+      width: "0.875rem",
+      height: "0.875rem",
+    },
+    [`&[data-checked] ${switch__thumb}`]: {
+      transform: "translateX(0.875rem)",
+    },
+  },
+});
+
+export const switchMd = style({
+  width: "2.5rem",
+  height: "1.375rem",
+  selectors: {
+    [`& ${switch__thumb}`]: {
+      width: "1.125rem",
+      height: "1.125rem",
+    },
+    [`&[data-checked] ${switch__thumb}`]: {
+      transform: "translateX(1.125rem)",
+    },
+  },
+});
+
+export const switch__thumb = style({
+  display: "block",
+  borderRadius: "999px",
+  background: "white",
+  boxShadow: "0 1px 2px rgba(0, 0, 0, 0.12)",
+  transition: "transform 150ms ease-out",
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms !important",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "switch": switch_,
+  "switch--sm": switchSm,
+  "switch--md": switchMd,
+  "switch__thumb": switch__thumb,
+};

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

@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { byKey, tabs, tabs__list, tabs__trigger, tabs__indicator, tabs__content } from "./styles.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+export type TabsVariant = "underline" | "pill" | "plain";
+
+interface TabsContextValue {
+  variant: TabsVariant;
+}
+const TabsContext = React.createContext<TabsContextValue>({ variant: "underline" });
+
+export type TabsProps = WithStringClassName<
+  React.ComponentPropsWithoutRef<typeof BaseTabs.Root>
+> & {
+  /**
+   * 외형 변형.
+   * - `underline` — 활성 탭 하단 underline (기본). 일반 탭 UI
+   * - `pill` — 활성 탭 둥근 배경. 세그먼트 컨트롤 스타일
+   * - `plain` — 시각 강조 없음. 직접 스타일링용
+   *
+   * @default "underline"
+   */
+  variant?: TabsVariant;
+};
+
+/**
+ * 한 영역에 여러 패널을 배치하고 탭으로 전환하는 컴파운드 컴포넌트. 같은 페이지의 동일 평면
+ * 정보를 분류할 때 사용한다(라우트 분기는 라우팅으로). 자식 구조: TabsList > TabsTrigger × n, TabsContent × n.
+ */
+export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+  ({ className, variant = "underline", ...props }, ref) => (
+    <TabsContext.Provider value={{ variant }}>
+      <BaseTabs.Root
+        ref={ref}
+        data-variant={variant}
+        className={cn(tabs, className)}
+        {...props}
+      />
+    </TabsContext.Provider>
+  ),
+);
+Tabs.displayName = "Tabs";
+
+/** 탭 트리거들을 묶는 컨테이너. 키보드 화살표·Home·End로 트리거 간 이동이 가능하다. */
+export const TabsList = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.List>>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.List ref={ref} className={cn(tabs__list, className)} {...props} />
+));
+TabsList.displayName = "TabsList";
+
+/** 한 탭의 트리거 버튼. `value` prop으로 매칭되는 TabsContent와 연결된다. */
+export const TabsTrigger = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.Tab ref={ref} className={cn(tabs__trigger, className)} {...props} />
+));
+TabsTrigger.displayName = "TabsTrigger";
+
+/** 활성 탭 위치를 시각적으로 강조하는 인디케이터(보통 underline). TabsList 안에 둔다. */
+export const TabsIndicator = React.forwardRef<
+  HTMLSpanElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Indicator>>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.Indicator
+    ref={ref}
+    className={cn(tabs__indicator, className)}
+    {...props}
+  />
+));
+TabsIndicator.displayName = "TabsIndicator";
+
+/** 한 탭의 패널. 같은 `value`의 TabsTrigger가 활성일 때 노출된다. */
+export const TabsContent = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.Panel ref={ref} className={cn(tabs__content, className)} {...props} />
+));
+TabsContent.displayName = "TabsContent";
+
+/** 현재 Tabs의 variant를 자식에서 읽기 위한 훅. 커스텀 트리거를 만들 때 유용. */
+export const useTabsVariant = () => React.useContext(TabsContext).variant;