sh-ui-cli 0.48.0 → 0.50.0

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

@@ -0,0 +1,430 @@
+"use client";
+
+import * as React from "react";
+import { byKey, carousel, carousel__content, carousel__item, carousel__nav, carouselNavPrev, carouselNavNext, carousel__indicators, carousel__indicator } from "./styles.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+type Orientation = "horizontal" | "vertical";
+
+interface CarouselContextValue {
+  orientation: Orientation;
+  loop: boolean;
+  index: number;
+  count: number;
+  goTo: (i: number) => void;
+  goPrev: () => void;
+  goNext: () => void;
+  registerItem: () => () => void;
+  setContentEl: (el: HTMLDivElement | null) => void;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+}
+
+const CarouselContext = React.createContext<CarouselContextValue | null>(null);
+
+function useCarousel() {
+  const ctx = React.useContext(CarouselContext);
+  if (!ctx) {
+    throw new Error("Carousel parts must be used within <Carousel>");
+  }
+  return ctx;
+}
+
+/** 현재 캐러셀 상태를 읽을 수 있는 hook. 커스텀 컨트롤을 만들 때 사용. */
+export function useCarouselState(): Pick<
+  CarouselContextValue,
+  "orientation" | "loop" | "index" | "count" | "goTo" | "goPrev" | "goNext"
+> {
+  const { orientation, loop, index, count, goTo, goPrev, goNext } =
+    useCarousel();
+  return { orientation, loop, index, count, goTo, goPrev, goNext };
+}
+
+export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** 스크롤 방향. 기본 `horizontal`. */
+  orientation?: Orientation;
+  /** 끝에서 다시 처음으로 이어지는 무한 루프. */
+  loop?: boolean;
+  /** 자동 재생 간격(ms). `true`면 4000ms. */
+  autoPlay?: boolean | number;
+  /** 초기 인덱스. */
+  defaultIndex?: number;
+  /** 제어 모드 인덱스. */
+  index?: number;
+  /** 인덱스 변경 콜백. */
+  onIndexChange?: (index: number) => void;
+}
+
+/**
+ * 순수 CSS scroll-snap 기반 캐러셀. 터치 드래그·키보드 화살표·자동 재생을
+ * 지원하며, prefers-reduced-motion 환경에서는 스냅 전환이 즉시 이동한다.
+ *
+ * 구성 요소: Carousel / CarouselContent / CarouselItem /
+ * CarouselPrevious / CarouselNext / CarouselIndicators.
+ */
+export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
+  (
+    {
+      className,
+      orientation = "horizontal",
+      loop = false,
+      autoPlay,
+      defaultIndex = 0,
+      index: controlledIndex,
+      onIndexChange,
+      children,
+      onKeyDown: userOnKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const isControlled = controlledIndex !== undefined;
+    const [uncontrolled, setUncontrolled] = React.useState(defaultIndex);
+    const index = isControlled ? controlledIndex : uncontrolled;
+
+    const [count, setCount] = React.useState(0);
+    const contentRef = React.useRef<HTMLDivElement | null>(null);
+    const scrollTargetRef = React.useRef<number | null>(null);
+
+    const setContentEl = React.useCallback((el: HTMLDivElement | null) => {
+      contentRef.current = el;
+    }, []);
+
+    const registerItem = React.useCallback(() => {
+      setCount((c) => c + 1);
+      return () => setCount((c) => Math.max(0, c - 1));
+    }, []);
+
+    const setIndex = React.useCallback(
+      (next: number) => {
+        if (!isControlled) setUncontrolled(next);
+        onIndexChange?.(next);
+      },
+      [isControlled, onIndexChange],
+    );
+
+    const clamp = React.useCallback(
+      (i: number) => {
+        if (count <= 0) return 0;
+        if (loop) {
+          return ((i % count) + count) % count;
+        }
+        return Math.max(0, Math.min(count - 1, i));
+      },
+      [count, loop],
+    );
+
+    const goTo = React.useCallback(
+      (i: number) => setIndex(clamp(i)),
+      [clamp, setIndex],
+    );
+    const goPrev = React.useCallback(
+      () => setIndex(clamp(index - 1)),
+      [clamp, index, setIndex],
+    );
+    const goNext = React.useCallback(
+      () => setIndex(clamp(index + 1)),
+      [clamp, index, setIndex],
+    );
+
+    // 인덱스 변경 시 프로그래매틱 스크롤
+    React.useEffect(() => {
+      const el = contentRef.current;
+      if (!el) return;
+      const child = el.children[index] as HTMLElement | undefined;
+      if (!child) return;
+      scrollTargetRef.current = index;
+      if (orientation === "horizontal") {
+        el.scrollTo({ left: child.offsetLeft, behavior: "smooth" });
+      } else {
+        el.scrollTo({ top: child.offsetTop, behavior: "smooth" });
+      }
+    }, [index, orientation, count]);
+
+    // 사용자 스와이프/스크롤 → 인덱스 동기화
+    React.useEffect(() => {
+      const el = contentRef.current;
+      if (!el) return;
+      let raf = 0;
+      const onScroll = () => {
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(() => {
+          const children = Array.from(el.children) as HTMLElement[];
+          if (children.length === 0) return;
+          const axis = orientation === "horizontal" ? "offsetLeft" : "offsetTop";
+          const scroll =
+            orientation === "horizontal" ? el.scrollLeft : el.scrollTop;
+          let nearest = 0;
+          let minDelta = Infinity;
+          children.forEach((c, i) => {
+            const d = Math.abs(c[axis] - scroll);
+            if (d < minDelta) {
+              minDelta = d;
+              nearest = i;
+            }
+          });
+          if (nearest !== index) {
+            // 프로그래매틱 이동 중이면 target 도착까지 무시
+            if (
+              scrollTargetRef.current !== null &&
+              nearest !== scrollTargetRef.current
+            ) {
+              return;
+            }
+            scrollTargetRef.current = null;
+            setIndex(nearest);
+          } else {
+            scrollTargetRef.current = null;
+          }
+        });
+      };
+      el.addEventListener("scroll", onScroll, { passive: true });
+      return () => {
+        cancelAnimationFrame(raf);
+        el.removeEventListener("scroll", onScroll);
+      };
+    }, [orientation, index, setIndex]);
+
+    // 자동 재생 — 호버·키보드 포커스 시 일시정지(WCAG 2.2.2).
+    React.useEffect(() => {
+      if (!autoPlay || count <= 1) return;
+      const delay = autoPlay === true ? 4000 : autoPlay;
+      const el = contentRef.current;
+      let paused = false;
+      const pause = () => (paused = true);
+      const resume = () => (paused = false);
+      el?.addEventListener("mouseenter", pause);
+      el?.addEventListener("mouseleave", resume);
+      el?.addEventListener("focusin", pause);
+      el?.addEventListener("focusout", resume);
+      const id = window.setInterval(() => {
+        if (paused) return;
+        setIndex(clamp(index + 1));
+      }, delay);
+      return () => {
+        window.clearInterval(id);
+        el?.removeEventListener("mouseenter", pause);
+        el?.removeEventListener("mouseleave", resume);
+        el?.removeEventListener("focusin", pause);
+        el?.removeEventListener("focusout", resume);
+      };
+    }, [autoPlay, count, index, clamp, setIndex]);
+
+    const onKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        userOnKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+        const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+        if (event.key === prevKey) {
+          event.preventDefault();
+          goPrev();
+        } else if (event.key === nextKey) {
+          event.preventDefault();
+          goNext();
+        }
+      },
+      [orientation, goPrev, goNext, userOnKeyDown],
+    );
+
+    const value = React.useMemo<CarouselContextValue>(
+      () => ({
+        orientation,
+        loop,
+        index,
+        count,
+        goTo,
+        goPrev,
+        goNext,
+        registerItem,
+        setContentEl,
+        contentRef,
+      }),
+      [
+        orientation,
+        loop,
+        index,
+        count,
+        goTo,
+        goPrev,
+        goNext,
+        registerItem,
+        setContentEl,
+      ],
+    );
+
+    return (
+      <CarouselContext.Provider value={value}>
+        <div
+          ref={ref}
+          className={cn(carousel, className)}
+          data-orientation={orientation}
+          role="region"
+          aria-roledescription="carousel"
+          onKeyDown={onKeyDown}
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+export const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation, setContentEl } = useCarousel();
+
+  const mergedRef = React.useCallback(
+    (el: HTMLDivElement | null) => {
+      setContentEl(el);
+      if (typeof ref === "function") ref(el);
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+    },
+    [ref, setContentEl],
+  );
+
+  return (
+    <div
+      ref={mergedRef}
+      className={cn(carousel__content, className)}
+      data-orientation={orientation}
+      {...props}
+    />
+  );
+});
+CarouselContent.displayName = "CarouselContent";
+
+export const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation, registerItem } = useCarousel();
+
+  React.useEffect(() => registerItem(), [registerItem]);
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(carousel__item, className)}
+      data-orientation={orientation}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+
+export const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, onClick, disabled, children, ...props }, ref) => {
+  const { goPrev, orientation, index, count, loop } = useCarousel();
+  const atStart = !loop && index <= 0;
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-label="이전"
+      className={cn(carousel__nav, carouselNavPrev, className)}
+      data-orientation={orientation}
+      disabled={disabled || atStart || count === 0}
+      onClick={(e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) goPrev();
+      }}
+      {...props}
+    >
+      {children ?? (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path
+            d={orientation === "horizontal" ? "M10 4l-4 4 4 4" : "M4 10l4-4 4 4"}
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </button>
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+export const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, onClick, disabled, children, ...props }, ref) => {
+  const { goNext, orientation, index, count, loop } = useCarousel();
+  const atEnd = !loop && index >= count - 1;
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-label="다음"
+      className={cn(carousel__nav, carouselNavNext, className)}
+      data-orientation={orientation}
+      disabled={disabled || atEnd || count === 0}
+      onClick={(e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) goNext();
+      }}
+      {...props}
+    >
+      {children ?? (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path
+            d={orientation === "horizontal" ? "M6 4l4 4-4 4" : "M4 6l4 4 4-4"}
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </button>
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+
+export interface CarouselIndicatorsProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** 각 도트 버튼에 전달할 aria-label 빌더. */
+  labelFor?: (index: number) => string;
+}
+
+export const CarouselIndicators = React.forwardRef<
+  HTMLDivElement,
+  CarouselIndicatorsProps
+>(({ className, labelFor, ...props }, ref) => {
+  const { count, index, goTo, orientation } = useCarousel();
+  if (count <= 0) return null;
+  return (
+    <div
+      ref={ref}
+      role="tablist"
+      aria-label="슬라이드 선택"
+      className={cn(carousel__indicators, className)}
+      data-orientation={orientation}
+      {...props}
+    >
+      {Array.from({ length: count }).map((_, i) => (
+        <button
+          key={i}
+          type="button"
+          role="tab"
+          aria-selected={i === index}
+          aria-label={labelFor ? labelFor(i) : `${i + 1}번 슬라이드`}
+          className={carousel__indicator}
+          data-active={i === index || undefined}
+          onClick={() => goTo(i)}
+        />
+      ))}
+    </div>
+  );
+});
+CarouselIndicators.displayName = "CarouselIndicators";

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

@@ -0,0 +1,169 @@
+import { style } from "@vanilla-extract/css";
+
+export const carousel = style({
+  position: "relative",
+  width: "100%",
+});
+
+export const carousel__content = style({
+  display: "flex",
+  gap: "var(--space-4)",
+  overflowX: "auto",
+  overflowY: "hidden",
+  scrollSnapType: "x mandatory",
+  scrollBehavior: "smooth",
+  scrollbarWidth: "none",
+  MsOverflowStyle: "none",
+  WebkitOverflowScrolling: "touch",
+  overscrollBehaviorInline: "contain",
+  selectors: {
+    "&::-webkit-scrollbar": {
+      display: "none",
+    },
+    "&[data-orientation="vertical"]": {
+      flexDirection: "column",
+      overflowX: "hidden",
+      overflowY: "auto",
+      scrollSnapType: "y mandatory",
+      height: "20rem",
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      scrollBehavior: "auto",
+    },
+  },
+});
+
+export const carousel__item = style({
+  flex: "0 0 100%",
+  minWidth: 0,
+  scrollSnapAlign: "start",
+  scrollSnapStop: "always",
+  selectors: {
+    "&[data-orientation="vertical"]": {
+      flexBasis: "auto",
+    },
+  },
+});
+
+export const carousel__nav = style({
+  position: "absolute",
+  top: "50%",
+  width: "2rem",
+  height: "2rem",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "var(--background)",
+  color: "var(--foreground)",
+  border: "1px solid var(--border)",
+  borderRadius: "999px",
+  cursor: "pointer",
+  transform: "translateY(-50%)",
+  zIndex: 1,
+  transition: "opacity var(--duration-fast) ease,\n    background var(--duration-fast) ease",
+  selectors: {
+    "&:hover:not(:disabled)": {
+      background: "var(--background-muted)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&:disabled": {
+      opacity: 0.4,
+      cursor: "not-allowed",
+    },
+    "&[data-orientation="vertical"]": {
+      top: "auto",
+      left: "50%",
+      transform: "translateX(-50%)",
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+export const carouselNavPrev = style({
+  left: "-1rem",
+  selectors: {
+    "&[data-orientation="vertical"]": {
+      top: "-1rem",
+      left: "50%",
+    },
+  },
+});
+
+export const carouselNavNext = style({
+  right: "-1rem",
+  selectors: {
+    "&[data-orientation="vertical"]": {
+      bottom: "-1rem",
+      top: "auto",
+      left: "50%",
+    },
+  },
+});
+
+export const carousel__indicators = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "var(--space-2)",
+  marginTop: "var(--space-3)",
+  selectors: {
+    "&[data-orientation="vertical"]": {
+      position: "absolute",
+      top: "50%",
+      right: "0.5rem",
+      marginTop: 0,
+      flexDirection: "column",
+      transform: "translateY(-50%)",
+    },
+  },
+});
+
+export const carousel__indicator = style({
+  width: "0.5rem",
+  height: "0.5rem",
+  padding: 0,
+  background: "var(--border)",
+  border: "none",
+  borderRadius: "999px",
+  cursor: "pointer",
+  transition: "background var(--duration-fast) ease,\n    transform var(--duration-fast) ease",
+  selectors: {
+    "&:hover": {
+      background: "var(--border-strong)",
+    },
+    "&[data-active]": {
+      background: "var(--foreground)",
+      transform: "scale(1.2)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+  },
+  "@media": {
+    "(prefers-reduced-motion: reduce)": {
+      transition: "none",
+    },
+  },
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "carousel": carousel,
+  "carousel__content": carousel__content,
+  "carousel__item": carousel__item,
+  "carousel__nav": carousel__nav,
+  "carousel__nav--prev": carouselNavPrev,
+  "carousel__nav--next": carouselNavNext,
+  "carousel__indicators": carousel__indicators,
+  "carousel__indicator": carousel__indicator,
+};

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

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import { byKey, checkbox, checkbox__indicator, checkboxGroup } from "./styles.css";
+
+
+import { cn } from "@SH_UI_UTILS@";
+/* ───────────── Checkbox ───────────── */
+
+export type CheckboxProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>,
+  "className"
+> & {
+  className?: string;
+};
+
+/**
+ * 폼 제출 시 함께 적용되는 다중 선택. `indeterminate`로 부분 선택 상태를
+ * 표현할 수 있고, 여러 개를 묶을 때는 `CheckboxGroup`으로 감싸 그룹 단위 상태를 관리한다.
+ */
+export const Checkbox = React.forwardRef<HTMLElement, CheckboxProps>(
+  ({ className, ...props }, ref) => (
+    <BaseCheckbox.Root
+      ref={ref}
+      className={cn(checkbox, className)}
+      {...props}
+    >
+      <BaseCheckbox.Indicator className={checkbox__indicator}>
+        {props.indeterminate ? <MinusIcon /> : <CheckIcon />}
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  ),
+);
+Checkbox.displayName = "Checkbox";
+
+/* ───────────── CheckboxGroup ───────────── */
+
+export type CheckboxGroupProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseCheckboxGroup>,
+  "className"
+> & {
+  className?: string;
+  /**
+   * 그룹 내 체크박스 배치 방향.
+   * - `vertical` — 세로 나열 (기본)
+   * - `horizontal` — 가로 나열. 짧은 라벨 2~3개에만 권장
+   *
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+/**
+ * 여러 Checkbox를 묶는 컨테이너. `value`/`onValueChange`로 선택된 값 배열을 관리하고,
+ * `orientation`으로 가로/세로 배치를 정한다. 그룹 라벨은 외부 `<Label>`로 제공할 것.
+ */
+export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <BaseCheckboxGroup
+      ref={ref}
+      className={cn(checkboxGroup, className)}
+      data-orientation={orientation}
+      {...props}
+    />
+  ),
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+
+/* ───────────── Icons ───────────── */
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden>
+      <path
+        d="M3.5 8.5l3 3 6-7"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MinusIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden>
+      <path
+        d="M4 8h8"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}