sh-ui-cli 0.52.1 → 0.52.2

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

@@ -1,298 +0,0 @@
-"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

@@ -1,75 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,91 +0,0 @@
-"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;