sh-ui-cli 0.15.0 → 0.21.0

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

@@ -0,0 +1,105 @@
+.sh-ui-pagination {
+  display: flex;
+  justify-content: center;
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+.sh-ui-pagination__content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.sh-ui-pagination__item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.sh-ui-pagination__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 0.75rem;
+  border-radius: calc(var(--radius) - 2px);
+  border: var(--border-width) solid transparent;
+  background: transparent;
+  color: var(--foreground);
+  text-decoration: none;
+  transition:
+    background-color var(--duration-fast),
+    border-color var(--duration-fast),
+    color var(--duration-fast);
+  cursor: pointer;
+  user-select: none;
+}
+
+.sh-ui-pagination__link[data-size="sm"] {
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+}
+
+.sh-ui-pagination__link:hover {
+  background: var(--background-muted);
+}
+
+.sh-ui-pagination__link:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.sh-ui-pagination__link[data-active] {
+  background: var(--foreground);
+  color: var(--background);
+  font-weight: var(--weight-medium);
+}
+
+.sh-ui-pagination__link[data-active]:hover {
+  background: var(--foreground);
+  opacity: 0.9;
+}
+
+.sh-ui-pagination__link[aria-disabled="true"],
+.sh-ui-pagination__link[data-disabled] {
+  pointer-events: none;
+  opacity: 0.45;
+}
+
+.sh-ui-pagination__nav {
+  padding: 0 0.625rem;
+}
+
+.sh-ui-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  color: var(--foreground-muted);
+}
+
+.sh-ui-pagination__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-pagination__link {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { Popover as BasePopover } from "@base-ui-components/react/popover";
+import "./styles.css";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/**
+ * 트리거 요소에 떠다니는 가벼운 패널을 띄우는 비모달 컨테이너. 포커스를 가두지 않으므로
+ * 짧은 폼·정보 표시에 적합하고, 강제 응답이 필요하면 Dialog를 사용할 것.
+ */
+export const Popover = BasePopover.Root;
+
+/** Popover를 여는 트리거. */
+export const PopoverTrigger = BasePopover.Trigger;
+
+/** Popover를 닫는 요소. */
+export const PopoverClose = BasePopover.Close;
+
+export interface PopoverContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BasePopover.Popup>> {
+  /**
+   * Trigger 기준 배치 방향. 공간 부족 시 자동으로 반대편으로 뒤집힌다.
+   * @default "bottom"
+   */
+  side?: "top" | "right" | "bottom" | "left";
+  /**
+   * 트리거 축에서의 정렬.
+   * - `start` — 트리거 시작 가장자리 정렬
+   * - `center` — 가운데 (기본)
+   * - `end` — 트리거 끝 가장자리 정렬
+   *
+   * @default "center"
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Trigger와 Popup 사이 간격(px).
+   * @default 8
+   */
+  sideOffset?: number;
+  /**
+   * Portal이 마운트될 DOM 노드.
+   * @default document.body
+   */
+  container?: React.ComponentPropsWithoutRef<typeof BasePopover.Portal>["container"];
+  /**
+   * Trigger를 가리키는 화살표 표시 여부.
+   * @default false
+   */
+  showArrow?: boolean;
+}
+
+/**
+ * Popover의 콘텐츠. 트리거에 자동 위치 조정되어 portal로 마운트된다.
+ * `side`/`align`/`sideOffset`로 배치를 미세조정하고, `showArrow`로 화살표를 노출한다.
+ */
+export const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(
+  function PopoverContent(
+    { className, children, side, align, sideOffset = 8, container, showArrow, ...props },
+    ref,
+  ) {
+    return (
+      <BasePopover.Portal container={container}>
+        <BasePopover.Positioner
+          className="sh-ui-popover__positioner"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+        >
+          <BasePopover.Popup
+            ref={ref}
+            className={cx("sh-ui-popover__content", className)}
+            {...props}
+          >
+            {showArrow && (
+              <BasePopover.Arrow className="sh-ui-popover__arrow" />
+            )}
+            {children}
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    );
+  },
+);
+
+/** Popover 콘텐츠의 제목. 접근성을 위해 짧은 제목이라도 함께 두는 것을 권장. */
+export const PopoverTitle = React.forwardRef<
+  HTMLHeadingElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BasePopover.Title>>
+>(function PopoverTitle({ className, ...props }, ref) {
+  return (
+    <BasePopover.Title
+      ref={ref}
+      className={cx("sh-ui-popover__title", className)}
+      {...props}
+    />
+  );
+});
+
+/** Popover 콘텐츠의 보조 설명. */
+export const PopoverDescription = React.forwardRef<
+  HTMLParagraphElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BasePopover.Description>>
+>(function PopoverDescription({ className, ...props }, ref) {
+  return (
+    <BasePopover.Description
+      ref={ref}
+      className={cx("sh-ui-popover__description", className)}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,65 @@
+.sh-ui-popover__positioner {
+  z-index: var(--z-popover);
+  outline: none;
+}
+
+.sh-ui-popover__content {
+  min-width: 12rem;
+  padding: var(--space-2);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  outline: none;
+  font-size: var(--text-sm);
+  line-height: 1.4;
+  transform-origin: var(--transform-origin);
+}
+
+.sh-ui-popover__content[data-starting-style],
+.sh-ui-popover__content[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
+.sh-ui-popover__content {
+  transition:
+    opacity 140ms ease,
+    transform 140ms ease;
+}
+
+.sh-ui-popover__content:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.sh-ui-popover__arrow {
+  color: var(--background);
+}
+
+.sh-ui-popover__arrow svg {
+  display: block;
+}
+
+.sh-ui-popover__title {
+  margin: 0 0 var(--space-1);
+  font-weight: var(--weight-semibold);
+  font-size: 0.9375rem;
+}
+
+.sh-ui-popover__description {
+  margin: 0;
+  color: var(--foreground-muted);
+  font-size: 0.8125rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-popover__content {
+    transition: none;
+  }
+  .sh-ui-popover__content[data-starting-style],
+  .sh-ui-popover__content[data-ending-style] {
+    transform: none;
+  }
+}

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

@@ -0,0 +1,56 @@
+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));
+}
+
+export interface ProgressProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+  /** 0~100 사이의 현재 값. 생략 시 indeterminate 모드. */
+  value?: number;
+  /** 최댓값. 기본 100. */
+  max?: number;
+  /** 접근성: aria-label (시각적 라벨이 없으면 권장). */
+  "aria-label"?: string;
+}
+
+/**
+ * 작업 진행도를 가로 바로 표시. value가 없으면 무한 루프 indeterminate.
+ *
+ * - determinate: `<Progress value={40} />`
+ * - indeterminate: `<Progress aria-label="로딩 중" />`
+ */
+export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
+  function Progress(
+    { value, max = 100, className, "aria-label": ariaLabel, ...props },
+    ref,
+  ) {
+    const isDeterminate = value !== undefined;
+    const normalized = isDeterminate ? clamp((value / max) * 100, 0, 100) : 0;
+
+    return (
+      <div
+        ref={ref}
+        role="progressbar"
+        aria-label={ariaLabel}
+        aria-valuemin={isDeterminate ? 0 : undefined}
+        aria-valuemax={isDeterminate ? max : undefined}
+        aria-valuenow={isDeterminate ? value : undefined}
+        data-state={isDeterminate ? "determinate" : "indeterminate"}
+        className={cx("sh-ui-progress", className)}
+        {...props}
+      >
+        <div
+          className="sh-ui-progress__indicator"
+          style={isDeterminate ? { width: `${normalized}%` } : undefined}
+        />
+      </div>
+    );
+  },
+);
+Progress.displayName = "Progress";

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

@@ -0,0 +1,41 @@
+.sh-ui-progress {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  overflow: hidden;
+  background: var(--background-muted);
+  border-radius: 999px;
+}
+
+.sh-ui-progress__indicator {
+  height: 100%;
+  background: var(--primary);
+  border-radius: 999px;
+  transition: width var(--duration-base) ease;
+}
+
+/* indeterminate 모드: 바가 좌우로 왕복 */
+.sh-ui-progress[data-state="indeterminate"] .sh-ui-progress__indicator {
+  width: 40%;
+  animation: sh-ui-progress-slide 1.2s ease-in-out infinite;
+}
+
+@keyframes sh-ui-progress-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-progress__indicator {
+    transition: none;
+  }
+  .sh-ui-progress[data-state="indeterminate"] .sh-ui-progress__indicator {
+    /* 움직임 최소화 — 중앙에 정지된 바 */
+    animation: none;
+    transform: translateX(75%);
+  }
+}

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { Radio as BaseRadio } from "@base-ui-components/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui-components/react/radio-group";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/* ───────────── Radio ───────────── */
+
+export type RadioProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseRadio.Root>,
+  "className"
+> & {
+  className?: string;
+};
+
+/**
+ * 단일 선택지. 단독으로 쓰지 않고 반드시 `RadioGroup` 안에 두 개 이상을 묶어 사용한다.
+ * 단일 선택이지만 즉시 적용되는 설정에는 Switch를, 다중 선택에는 Checkbox를 권장.
+ */
+export const Radio = React.forwardRef<HTMLElement, RadioProps>(
+  ({ className, ...props }, ref) => (
+    <BaseRadio.Root
+      ref={ref}
+      className={cx("sh-ui-radio", className)}
+      {...props}
+    >
+      <BaseRadio.Indicator className="sh-ui-radio__indicator" />
+    </BaseRadio.Root>
+  ),
+);
+Radio.displayName = "Radio";
+
+/* ───────────── RadioGroup ───────────── */
+
+export type RadioGroupProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseRadioGroup>,
+  "className"
+> & {
+  className?: string;
+  /**
+   * 그룹 내 항목 배치 방향.
+   * - `vertical` — 세로 나열 (기본)
+   * - `horizontal` — 가로 나열. 짧은 라벨 2~3개에만 권장
+   *
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+};
+
+/**
+ * 여러 Radio를 묶는 컨테이너. 같은 `name` 아래 단일 선택을 보장하고,
+ * 키보드 화살표로 항목 간 이동이 가능하다. 그룹 라벨은 외부 `<Label>`로 제공할 것.
+ */
+export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <BaseRadioGroup
+      ref={ref}
+      className={cx("sh-ui-radio-group", className)}
+      data-orientation={orientation}
+      {...props}
+    />
+  ),
+);
+RadioGroup.displayName = "RadioGroup";

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

@@ -0,0 +1,80 @@
+/* ───────────── Radio ───────────── */
+
+.sh-ui-radio {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  background: var(--background);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.sh-ui-radio:hover:not([data-disabled]) {
+  border-color: var(--foreground);
+}
+
+.sh-ui-radio:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.sh-ui-radio[data-checked] {
+  border-color: var(--primary);
+}
+
+.sh-ui-radio[data-disabled] {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* 모바일/터치: 최소 탭 영역 */
+@media (hover: none) and (pointer: coarse) {
+  .sh-ui-radio {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+/* ───────────── Indicator (내부 원) ───────────── */
+
+.sh-ui-radio__indicator {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: var(--primary);
+  transform: scale(0);
+  transition: transform var(--duration-fast) ease-out;
+}
+
+.sh-ui-radio[data-checked] .sh-ui-radio__indicator {
+  transform: scale(1);
+}
+
+/* ───────────── RadioGroup ───────────── */
+
+.sh-ui-radio-group {
+  display: flex;
+  gap: 0.625rem;
+}
+
+.sh-ui-radio-group[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+.sh-ui-radio-group[data-orientation="horizontal"] {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-radio,
+  .sh-ui-radio__indicator {
+    transition: none;
+  }
+}