sh-ui-cli 0.49.0 → 0.50.0

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

@@ -0,0 +1,250 @@
+import { style } from "@vanilla-extract/css";
+
+export const calendar = style({
+  display: "inline-flex",
+  gap: "var(--space-4)",
+  userSelect: "none",
+});
+
+export const calendarMulti = style({
+  flexWrap: "wrap",
+});
+
+export const calendar__month = style({
+  width: "17.5rem",
+});
+
+export const calendar__header = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "var(--space-1)",
+  marginBottom: "var(--space-2)",
+});
+
+export const calendar__title = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "var(--space-1)",
+  flex: "1 1 auto",
+  justifyContent: "center",
+});
+
+export const calendar__nav = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "1.75rem",
+  height: "1.75rem",
+  padding: 0,
+  border: "none",
+  borderRadius: "calc(var(--radius) - 2px)",
+  background: "transparent",
+  color: "var(--foreground-muted)",
+  cursor: "pointer",
+  flexShrink: 0,
+  transition: "background-color var(--duration-fast), color var(--duration-fast)",
+  selectors: {
+    "&:hover:not(:disabled)": {
+      background: "var(--background-muted)",
+      color: "var(--foreground)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+  },
+});
+
+export const calendarNavPlaceholder = style({
+  visibility: "hidden",
+  pointerEvents: "none",
+});
+
+export const calendarSelectTrigger = style({
+  selectors: {
+    "&.select__trigger": {
+      minWidth: 0,
+      height: "1.75rem",
+      gap: "var(--space-1)",
+      padding: "0 var(--space-2)",
+      background: "transparent",
+      borderColor: "transparent",
+      fontWeight: "var(--weight-semibold)",
+      fontSize: "var(--text-sm)",
+      color: "var(--foreground)",
+    },
+    "&.select__trigger:hover:not(:disabled)": {
+      background: "var(--background-muted)",
+      borderColor: "transparent",
+    },
+    "&.select__trigger[data-popup-open]": {
+      background: "var(--background-muted)",
+      borderColor: "transparent",
+    },
+  },
+});
+
+export const select__positioner = style({
+  selectors: {
+    [`&:has(${calendarSelectPopup})`]: {
+      zIndex: "var(--z-popover)",
+    },
+  },
+});
+
+export const calendar__weekdays = style({
+  display: "grid",
+  gridTemplateColumns: "repeat(7, 1fr)",
+  marginBottom: "var(--space-1)",
+});
+
+export const calendar__weekday = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "2rem",
+  fontSize: "var(--text-xs)",
+  fontWeight: "var(--weight-medium)",
+  color: "var(--foreground-muted)",
+});
+
+export const calendar__grid = style({
+  display: "grid",
+  gridTemplateColumns: "repeat(7, 1fr)",
+  outline: "none",
+  selectors: {
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+      borderRadius: "calc(var(--radius) - 2px)",
+    },
+  },
+});
+
+export const calendar__cell = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "2.375rem",
+  minWidth: 0,
+});
+
+export const calendarCellInRange = style({
+  background: "color-mix(in srgb, var(--primary) 12%, transparent)",
+});
+
+export const calendarCellRangeStart = style({
+  background: "color-mix(in srgb, var(--primary) 12%, transparent)",
+  selectors: {
+    [`&:not(${calendarCellRangeEnd})`]: {
+      borderRadius: "calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px)",
+    },
+    [`&${calendarCellRangeEnd}`]: {
+      borderRadius: "calc(var(--radius) - 2px)",
+    },
+  },
+});
+
+export const calendarCellRangeEnd = style({
+  background: "color-mix(in srgb, var(--primary) 12%, transparent)",
+  selectors: {
+    [`&:not(${calendarCellRangeStart})`]: {
+      borderRadius: "0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0",
+    },
+  },
+});
+
+export const calendar__day = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "2.25rem",
+  height: "2.25rem",
+  padding: 0,
+  border: "none",
+  borderRadius: "calc(var(--radius) - 2px)",
+  background: "transparent",
+  color: "var(--foreground)",
+  fontSize: "0.8125rem",
+  fontFamily: "inherit",
+  cursor: "pointer",
+  transition: "background-color var(--duration-fast), color var(--duration-fast)",
+  selectors: {
+    "&:hover:not(:disabled)": {
+      background: "var(--background-muted)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&:disabled": {
+      opacity: 0.3,
+      cursor: "not-allowed",
+    },
+  },
+});
+
+export const calendarDayOutside = style({
+  color: "var(--foreground-subtle, var(--foreground-muted))",
+  opacity: 0.4,
+});
+
+export const calendarDayToday = style({
+  fontWeight: "var(--weight-bold)",
+  textDecoration: "underline",
+  textUnderlineOffset: "0.125rem",
+});
+
+export const calendarDaySelected = style({
+  background: "var(--primary)",
+  color: "var(--primary-foreground)",
+  fontWeight: "var(--weight-semibold)",
+  selectors: {
+    "&:hover:not(:disabled)": {
+      background: "var(--primary-hover)",
+      color: "var(--primary-foreground)",
+    },
+  },
+});
+
+export const calendarSelectValue = style({
+});
+
+export const calendarSelectPopup = style({
+});
+
+export const calendarGridWrap = style({
+});
+
+export const calendarCellHidden = style({
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "calendar": calendar,
+  "calendar--multi": calendarMulti,
+  "calendar__month": calendar__month,
+  "calendar__header": calendar__header,
+  "calendar__title": calendar__title,
+  "calendar__nav": calendar__nav,
+  "calendar__nav--placeholder": calendarNavPlaceholder,
+  "calendar__select-trigger": calendarSelectTrigger,
+  "select__positioner": select__positioner,
+  "calendar__weekdays": calendar__weekdays,
+  "calendar__weekday": calendar__weekday,
+  "calendar__grid": calendar__grid,
+  "calendar__cell": calendar__cell,
+  "calendar__cell--in-range": calendarCellInRange,
+  "calendar__cell--range-start": calendarCellRangeStart,
+  "calendar__cell--range-end": calendarCellRangeEnd,
+  "calendar__day": calendar__day,
+  "calendar__day--outside": calendarDayOutside,
+  "calendar__day--today": calendarDayToday,
+  "calendar__day--selected": calendarDaySelected,
+  "calendar__select-value": calendarSelectValue,
+  "calendar__select-popup": calendarSelectPopup,
+  "calendar__grid-wrap": calendarGridWrap,
+  "calendar__cell--hidden": calendarCellHidden,
+};

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";