sh-ui-cli 0.42.1 → 0.44.0

package/data/registry/react/components/separator/index.tailwind.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export type SeparatorOrientation = "horizontal" | "vertical";
+
+export interface SeparatorProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+  orientation?: SeparatorOrientation;
+  /**
+   * 의미 없는 시각적 구분선인지 여부. 기본 true(aria-hidden).
+   * 스크린리더에도 섹션 구분을 알려야 하면 false.
+   */
+  decorative?: boolean;
+}
+
+/**
+ * 시각적 구분선 (Tailwind utility 변종). 가로(height=1px) / 세로(width=1px).
+ */
+export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  function Separator(
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) {
+    const sizing =
+      orientation === "horizontal" ? "w-full h-px" : "w-px h-full self-stretch";
+    return (
+      <div
+        ref={ref}
+        role={decorative ? undefined : "separator"}
+        aria-orientation={decorative ? undefined : orientation}
+        aria-hidden={decorative || undefined}
+        data-orientation={orientation}
+        className={cx("bg-border shrink-0", sizing, className)}
+        {...props}
+      />
+    );
+  },
+);
+Separator.displayName = "Separator";

package/data/registry/react/components/skeleton/index.tailwind.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/**
+ * 로딩 중 콘텐츠 자리를 채우는 placeholder 박스 (Tailwind utility 변종).
+ * `aria-hidden`이 기본 적용되므로 스크린리더에 노출되지 않는다.
+ */
+export const Skeleton = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    aria-hidden="true"
+    className={cx(
+      "block w-full h-4 bg-background-muted rounded-[calc(var(--radius)-2px)] animate-[sh-ui-skeleton-pulse_1.6s_ease-in-out_infinite] motion-reduce:animate-none",
+      className,
+    )}
+    style={
+      {
+        ...(props.style as React.CSSProperties),
+      }
+    }
+    {...props}
+  />
+));
+Skeleton.displayName = "Skeleton";
+
+/* keyframes — Tailwind 4 의 @theme 가 keyframe 도 가져가지만,
+ * 사용자 토큰에는 없으므로 컴포넌트 옆에 한 번만 inject. */
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-skeleton]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-skeleton", "");
+  style.textContent = `@keyframes sh-ui-skeleton-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.55 } }`;
+  document.head.appendChild(style);
+}

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

@@ -0,0 +1,255 @@
+"use client";
+
+import * as React from "react";
+
+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;
+}
+
+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"?: string;
+}
+
+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(
+            "relative w-full py-[var(--space-2)] select-none",
+            disabled && "opacity-[var(--opacity-disabled)] pointer-events-none",
+            className,
+          )}
+          data-disabled={disabled || undefined}
+        >
+          {children ?? (
+            <SliderTrack>
+              <SliderRange />
+              <SliderThumb />
+            </SliderTrack>
+          )}
+        </div>
+      </SliderContext.Provider>
+    );
+  },
+);
+Slider.displayName = "Slider";
+
+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(
+          "relative w-full h-1.5 bg-background-muted rounded-full cursor-pointer touch-none",
+          className,
+        )}
+        onPointerDown={onPointerDown}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <SliderRange />
+            <SliderThumb />
+          </>
+        )}
+      </div>
+    );
+  },
+);
+SliderTrack.displayName = "SliderTrack";
+
+export const SliderRange = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function SliderRange({ className, style, ...props }, ref) {
+    const { percent } = useSliderContext();
+    return (
+      <div
+        ref={ref}
+        className={cx(
+          "absolute top-0 left-0 h-full bg-primary rounded-full pointer-events-none",
+          className,
+        )}
+        style={{ width: percent, ...style }}
+        {...props}
+      />
+    );
+  },
+);
+SliderRange.displayName = "SliderRange";
+
+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(
+        "absolute top-1/2 w-4 h-4 -ml-2 -translate-y-1/2 bg-background border-2 border-primary rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.1)] cursor-grab transition-transform duration-[80ms] active:cursor-grabbing active:scale-110 active:-translate-y-1/2 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5 [@media(hover:none)_and_(pointer:coarse)]:-ml-2.5",
+        className,
+      )}
+      style={{ left: percent, ...style }}
+      {...props}
+    />
+  );
+});
+SliderThumb.displayName = "SliderThumb";

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+const spinnerVariants = cva(
+  "inline-flex items-center justify-center align-middle text-current",
+  {
+    variants: {
+      size: {
+        sm: "w-3.5 h-3.5",
+        md: "w-[1.125rem] h-[1.125rem]",
+        lg: "w-6 h-6",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+export type SpinnerSize = NonNullable<VariantProps<typeof spinnerVariants>["size"]>;
+
+export interface SpinnerProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "role"> {
+  size?: SpinnerSize;
+  "aria-label"?: string;
+}
+
+export const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
+  function Spinner(
+    { size = "md", className, "aria-label": ariaLabel = "로딩 중", ...props },
+    ref,
+  ) {
+    const ringBorder = size === "sm" ? "border-[1.5px]" : "border-2";
+    return (
+      <span
+        ref={ref}
+        role="status"
+        aria-live="polite"
+        aria-label={ariaLabel}
+        className={cx(spinnerVariants({ size }), className)}
+        {...props}
+      >
+        <span
+          aria-hidden
+          className={cx(
+            "inline-block w-full h-full rounded-full border-current border-t-transparent opacity-80 animate-[sh-ui-spinner-rotate_0.8s_linear_infinite] motion-reduce:[animation-duration:3s]",
+            ringBorder,
+          )}
+        />
+      </span>
+    );
+  },
+);
+Spinner.displayName = "Spinner";
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-spinner]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-spinner", "");
+  style.textContent = `@keyframes sh-ui-spinner-rotate { to { transform: rotate(360deg) } }`;
+  document.head.appendChild(style);
+}

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

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { cva, type VariantProps } from "class-variance-authority";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+const switchRoot = cva(
+  "inline-flex items-center border-none rounded-full bg-background-muted cursor-pointer shrink-0 p-0.5 transition-colors duration-150 hover:not-data-[disabled]:bg-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:hover:not-data-[disabled]:bg-primary-hover data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none",
+  {
+    variants: {
+      size: {
+        sm: "w-8 h-[1.125rem]",
+        md: "w-10 h-[1.375rem]",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+const switchThumb = cva(
+  "block rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.12)] transition-transform duration-150 ease-out motion-reduce:transition-none",
+  {
+    variants: {
+      size: {
+        sm: "w-3.5 h-3.5",
+        md: "w-[1.125rem] h-[1.125rem]",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+type SwitchSize = NonNullable<VariantProps<typeof switchRoot>["size"]>;
+
+export type SwitchProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseSwitch.Root>,
+  "className"
+> & {
+  className?: string;
+  size?: SwitchSize;
+};
+
+export const Switch = React.forwardRef<HTMLElement, SwitchProps>(
+  ({ className, size = "md", ...props }, ref) => (
+    <BaseSwitch.Root
+      ref={ref}
+      className={cx(switchRoot({ size }), className)}
+      {...props}
+    >
+      <BaseSwitch.Thumb
+        className={cx(
+          switchThumb({ size }),
+          size === "sm" && "data-[checked]:translate-x-3.5",
+          size === "md" && "data-[checked]:translate-x-[1.125rem]",
+        )}
+      />
+    </BaseSwitch.Root>
+  ),
+);
+Switch.displayName = "Switch";

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

@@ -0,0 +1,113 @@
+"use client";
+
+import * as React from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+
+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>
+> & {
+  variant?: TabsVariant;
+};
+
+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("flex flex-col gap-[var(--space-3)] w-full data-[orientation=vertical]:flex-row", className)}
+        {...props}
+      />
+    </TabsContext.Provider>
+  ),
+);
+Tabs.displayName = "Tabs";
+
+const listVariantClasses =
+  "data-[variant=underline]:[&]:w-full data-[variant=underline]:[&]:gap-0 data-[variant=underline]:[&]:shadow-[inset_0_-1px_0_var(--border)] data-[variant=pill]:[&]:p-[var(--space-1)] data-[variant=pill]:[&]:bg-[var(--background-muted,var(--background))] data-[variant=pill]:[&]:border data-[variant=pill]:[&]:border-border data-[variant=pill]:[&]:rounded-[var(--radius)] [[data-orientation=vertical]_&]:flex-col [[data-orientation=vertical]_&]:items-stretch [[data-orientation=vertical][data-variant=underline]_&]:w-auto [[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-1px_0_0_var(--border)]";
+
+export const TabsList = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.List>>
+>(({ className, ...props }, ref) => {
+  const { variant } = React.useContext(TabsContext);
+  return (
+    <BaseTabs.List
+      ref={ref}
+      data-variant={variant}
+      className={cx(
+        "relative inline-flex items-center gap-[var(--space-1)] w-fit",
+        listVariantClasses,
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+TabsList.displayName = "TabsList";
+
+const triggerVariantClasses =
+  "[[data-variant=underline]_&]:py-2.5 [[data-variant=underline]_&]:px-[var(--space-4)] [[data-variant=pill]_&]:py-1.5 [[data-variant=pill]_&]:px-[var(--space-3)] [[data-variant=pill]_&]:rounded-[calc(var(--radius)-2px)] [[data-variant=plain]_&]:py-1.5 [[data-variant=plain]_&]:px-[var(--space-2)] [[data-variant=plain]_&]:rounded-[calc(var(--radius)-2px)] data-[selected]:[[data-variant=plain]_&]:bg-[var(--background-muted,transparent)]";
+
+export const TabsTrigger = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.Tab
+    ref={ref}
+    className={cx(
+      "relative z-[1] inline-flex items-center justify-center gap-1.5 py-[var(--space-2)] px-[var(--space-3)] bg-transparent text-foreground-muted border-0 text-[length:var(--text-sm)] font-medium leading-none cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] select-none whitespace-nowrap hover:not-disabled:not-data-[selected]:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[selected]:text-foreground disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
+      triggerVariantClasses,
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = "TabsTrigger";
+
+const indicatorVariantClasses =
+  "[[data-variant=underline]_&]:shadow-[inset_0_-2px_0_var(--foreground)] [[data-variant=pill]_&]:bg-background [[data-variant=pill]_&]:rounded-[calc(var(--radius)-2px)] [[data-variant=pill]_&]:shadow-[0_1px_2px_rgba(0,0,0,0.06)] [[data-variant=plain]_&]:hidden [[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-2px_0_0_var(--foreground)]";
+
+export const TabsIndicator = React.forwardRef<
+  HTMLSpanElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Indicator>>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.Indicator
+    ref={ref}
+    className={cx(
+      "absolute z-0 pointer-events-none transition-[top,left,width,height] duration-[180ms] data-[activation-direction=none]:transition-none top-[var(--active-tab-top)] left-[var(--active-tab-left)] w-[var(--active-tab-width)] h-[var(--active-tab-height)]",
+      indicatorVariantClasses,
+      className,
+    )}
+    {...props}
+  />
+));
+TabsIndicator.displayName = "TabsIndicator";
+
+export const TabsContent = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.Panel
+    ref={ref}
+    className={cx(
+      "outline-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:rounded-[var(--radius)]",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = "TabsContent";
+
+export const useTabsVariant = () => React.useContext(TabsContext).variant;

package/data/registry/react/components/textarea/index.tailwind.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cx(
+        "block w-full min-h-20 px-[var(--space-3)] py-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-normal resize-y transition-[border-color,box-shadow] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:not-focus:border-border-strong focus:outline-none focus:border-foreground focus:shadow-[0_0_0_1px_var(--foreground)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle read-only:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Textarea.displayName = "Textarea";