sh-ui-cli 0.15.0 → 0.21.0

package/data/registry/react/components/slider/index.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import * as React from "react";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+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={cx(
+            "sh-ui-slider",
+            disabled && "sh-ui-slider--disabled",
+            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={cx("sh-ui-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={cx("sh-ui-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={cx("sh-ui-slider__thumb", className)}
+      style={{ left: percent, ...style }}
+      {...props}
+    />
+  );
+});
+SliderThumb.displayName = "SliderThumb";

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

@@ -0,0 +1,64 @@
+.sh-ui-slider {
+  position: relative;
+  width: 100%;
+  padding: var(--space-2) 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.sh-ui-slider--disabled {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.sh-ui-slider__track {
+  position: relative;
+  width: 100%;
+  height: 0.375rem;
+  background: var(--background-muted);
+  border-radius: 999px;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.sh-ui-slider__range {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: var(--primary);
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+.sh-ui-slider__thumb {
+  position: absolute;
+  top: 50%;
+  width: 1rem;
+  height: 1rem;
+  margin-left: -0.5rem;
+  transform: translateY(-50%);
+  background: var(--background);
+  border: 2px solid var(--primary);
+  border-radius: 50%;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  cursor: grab;
+  transition: transform 80ms;
+}
+.sh-ui-slider__thumb:active {
+  cursor: grabbing;
+  transform: translateY(-50%) scale(1.1);
+}
+.sh-ui-slider__thumb:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* 모바일/터치: thumb 확대 */
+@media (hover: none) and (pointer: coarse) {
+  .sh-ui-slider__thumb {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-left: -0.625rem;
+  }
+}

package/data/registry/react/components/spinner/index.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+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={cx("sh-ui-spinner", `sh-ui-spinner--${size}`, className)}
+        {...props}
+      >
+        <span className="sh-ui-spinner__ring" aria-hidden />
+      </span>
+    );
+  },
+);
+Spinner.displayName = "Spinner";

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

@@ -0,0 +1,37 @@
+.sh-ui-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  color: currentColor;
+}
+
+.sh-ui-spinner--sm { width: 0.875rem; height: 0.875rem; }
+.sh-ui-spinner--md { width: 1.125rem; height: 1.125rem; }
+.sh-ui-spinner--lg { width: 1.5rem;   height: 1.5rem;   }
+
+.sh-ui-spinner__ring {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  border: 2px solid currentColor;
+  border-radius: 999px;
+  border-top-color: transparent;
+  opacity: 0.8;
+  animation: sh-ui-spinner-rotate 0.8s linear infinite;
+}
+
+.sh-ui-spinner--sm .sh-ui-spinner__ring {
+  border-width: 1.5px;
+}
+
+@keyframes sh-ui-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* 움직임을 거의 없애되 "현재 진행 중"은 알아볼 수 있게 점선 느낌으로 유지 */
+  .sh-ui-spinner__ring {
+    animation-duration: 3s;
+  }
+}

package/data/registry/react/components/switch/index.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Switch as BaseSwitch } from "@base-ui-components/react/switch";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/* ───────────── 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={cx("sh-ui-switch", `sh-ui-switch--${size}`, className)}
+      {...props}
+    >
+      <BaseSwitch.Thumb className="sh-ui-switch__thumb" />
+    </BaseSwitch.Root>
+  ),
+);
+Switch.displayName = "Switch";

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

@@ -0,0 +1,83 @@
+/* ───────────── Switch ───────────── */
+
+.sh-ui-switch {
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  border-radius: 999px;
+  background: var(--background-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  padding: 0.125rem;
+  transition: background-color 150ms;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* sizes */
+.sh-ui-switch--sm {
+  width: 2rem;
+  height: 1.125rem;
+}
+
+.sh-ui-switch--md {
+  width: 2.5rem;
+  height: 1.375rem;
+}
+
+.sh-ui-switch:hover:not([data-disabled]) {
+  background: var(--border-strong);
+}
+
+.sh-ui-switch:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.sh-ui-switch[data-checked] {
+  background: var(--primary);
+}
+
+.sh-ui-switch[data-checked]:hover:not([data-disabled]) {
+  background: var(--primary-hover);
+}
+
+.sh-ui-switch[data-disabled] {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ───────────── Thumb ───────────── */
+
+.sh-ui-switch__thumb {
+  display: block;
+  border-radius: 999px;
+  background: white;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+  transition: transform 150ms ease-out;
+}
+
+.sh-ui-switch--sm .sh-ui-switch__thumb {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.sh-ui-switch--md .sh-ui-switch__thumb {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.sh-ui-switch--sm[data-checked] .sh-ui-switch__thumb {
+  transform: translateX(0.875rem);
+}
+
+.sh-ui-switch--md[data-checked] .sh-ui-switch__thumb {
+  transform: translateX(1.125rem);
+}
+
+/* reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-switch,
+  .sh-ui-switch__thumb {
+    transition-duration: 0.01ms !important;
+  }
+}

package/data/registry/react/components/tabs/index.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import * as React from "react";
+import { Tabs as BaseTabs } from "@base-ui-components/react/tabs";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+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={cx("sh-ui-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={cx("sh-ui-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={cx("sh-ui-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={cx("sh-ui-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={cx("sh-ui-tabs__content", className)} {...props} />
+));
+TabsContent.displayName = "TabsContent";
+
+/** 현재 Tabs의 variant를 자식에서 읽기 위한 훅. 커스텀 트리거를 만들 때 유용. */
+export const useTabsVariant = () => React.useContext(TabsContext).variant;