sh-ui-cli 0.15.0 → 0.21.0

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

@@ -0,0 +1,432 @@
+"use client";
+
+import * as React from "react";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+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={cx("sh-ui-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={cx("sh-ui-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={cx("sh-ui-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={cx("sh-ui-carousel__nav", "sh-ui-carousel__nav--prev", 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={cx("sh-ui-carousel__nav", "sh-ui-carousel__nav--next", 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={cx("sh-ui-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="sh-ui-carousel__indicator"
+          data-active={i === index || undefined}
+          onClick={() => goTo(i)}
+        />
+      ))}
+    </div>
+  );
+});
+CarouselIndicators.displayName = "CarouselIndicators";

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

@@ -0,0 +1,155 @@
+.sh-ui-carousel {
+  position: relative;
+  width: 100%;
+}
+
+.sh-ui-carousel__content {
+  display: flex;
+  gap: var(--space-4);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-inline: contain;
+}
+
+.sh-ui-carousel__content::-webkit-scrollbar {
+  display: none;
+}
+
+.sh-ui-carousel__content[data-orientation="vertical"] {
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+  height: 20rem;
+}
+
+.sh-ui-carousel__item {
+  flex: 0 0 100%;
+  min-width: 0;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+}
+
+.sh-ui-carousel__item[data-orientation="vertical"] {
+  flex-basis: auto;
+}
+
+/* 네비게이션 버튼 — 기본은 플로팅 원형. 원하면 className으로 덮어쓰기. */
+.sh-ui-carousel__nav {
+  position: absolute;
+  top: 50%;
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  cursor: pointer;
+  transform: translateY(-50%);
+  z-index: 1;
+  transition:
+    opacity var(--duration-fast) ease,
+    background var(--duration-fast) ease;
+}
+
+.sh-ui-carousel__nav:hover:not(:disabled) {
+  background: var(--background-muted);
+}
+
+.sh-ui-carousel__nav:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.sh-ui-carousel__nav:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.sh-ui-carousel__nav--prev {
+  left: -1rem;
+}
+
+.sh-ui-carousel__nav--next {
+  right: -1rem;
+}
+
+.sh-ui-carousel__nav[data-orientation="vertical"] {
+  top: auto;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.sh-ui-carousel__nav--prev[data-orientation="vertical"] {
+  top: -1rem;
+  left: 50%;
+}
+
+.sh-ui-carousel__nav--next[data-orientation="vertical"] {
+  bottom: -1rem;
+  top: auto;
+  left: 50%;
+}
+
+/* 인디케이터 */
+.sh-ui-carousel__indicators {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+}
+
+.sh-ui-carousel__indicators[data-orientation="vertical"] {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  margin-top: 0;
+  flex-direction: column;
+  transform: translateY(-50%);
+}
+
+.sh-ui-carousel__indicator {
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  background: var(--border);
+  border: none;
+  border-radius: 999px;
+  cursor: pointer;
+  transition:
+    background var(--duration-fast) ease,
+    transform var(--duration-fast) ease;
+}
+
+.sh-ui-carousel__indicator:hover {
+  background: var(--border-strong);
+}
+
+.sh-ui-carousel__indicator[data-active] {
+  background: var(--foreground);
+  transform: scale(1.2);
+}
+
+.sh-ui-carousel__indicator:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-carousel__content {
+    scroll-behavior: auto;
+  }
+  .sh-ui-carousel__nav,
+  .sh-ui-carousel__indicator {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui-components/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui-components/react/checkbox-group";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/* ───────────── 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={cx("sh-ui-checkbox", className)}
+      {...props}
+    >
+      <BaseCheckbox.Indicator className="sh-ui-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={cx("sh-ui-checkbox-group", 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>
+  );
+}