sh-ui-cli 0.14.0 → 0.21.0

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

@@ -0,0 +1,203 @@
+.sh-ui-input {
+  display: block;
+  width: 100%;
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  line-height: 1;
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 모바일/터치: 최소 탭 영역 + iOS 자동 줌 방지(16px) */
+@media (hover: none) and (pointer: coarse) {
+  .sh-ui-input {
+    height: 2.75rem;
+    font-size: var(--text-base);
+  }
+}
+
+.sh-ui-input::placeholder {
+  color: var(--foreground-subtle);
+}
+
+.sh-ui-input:hover:not(:disabled):not(:focus) {
+  border-color: var(--border-strong);
+}
+
+.sh-ui-input:focus {
+  outline: none;
+  border-color: var(--foreground);
+  box-shadow: 0 0 0 1px var(--foreground);
+}
+
+.sh-ui-input:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  background: var(--background-subtle);
+}
+
+
+.sh-ui-input:read-only {
+  background: var(--background-subtle);
+}
+
+/* 숫자 input 화살표 제거 (원하는 경우) */
+.sh-ui-input[type="number"]::-webkit-outer-spin-button,
+.sh-ui-input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.sh-ui-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* ───────── prefix / suffix ───────── */
+
+.sh-ui-input-wrap {
+  position: relative;
+  width: 100%;
+  display: block;
+}
+
+.sh-ui-input--with-prefix { padding-left: var(--space-10); }
+.sh-ui-input--with-suffix { padding-right: var(--space-10); }
+
+.sh-ui-input__affix {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground-muted);
+  pointer-events: none;
+}
+.sh-ui-input__affix--prefix { left: var(--space-3); }
+.sh-ui-input__affix--suffix { right: var(--space-1); }
+
+/* suffix 내부 클릭 가능한 요소(버튼 등)는 pointer-events 복원 */
+.sh-ui-input__affix > * { pointer-events: auto; }
+
+/* 비밀번호 토글 버튼 */
+.sh-ui-input__toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  color: var(--foreground-muted);
+  cursor: pointer;
+  transition: color var(--duration-fast), background-color var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+.sh-ui-input__toggle:hover { color: var(--foreground); background: var(--background-muted); }
+.sh-ui-input__toggle:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* 에러 상태 — aria-invalid="true" 기반 */
+.sh-ui-input[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+.sh-ui-input[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 1px var(--danger);
+}
+
+/* ───────── InputGroup + InputAdornment ───────── */
+
+.sh-ui-input-group {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--control-md);
+  padding: 0 var(--space-2);
+  gap: var(--space-2);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+  cursor: text;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .sh-ui-input-group {
+    min-height: 2.75rem;
+  }
+}
+
+.sh-ui-input-group:hover:not([data-disabled]):not(:focus-within) {
+  border-color: var(--border-strong);
+}
+
+.sh-ui-input-group:focus-within {
+  border-color: var(--foreground);
+  box-shadow: 0 0 0 1px var(--foreground);
+}
+
+.sh-ui-input-group[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+.sh-ui-input-group[aria-invalid="true"]:focus-within {
+  box-shadow: 0 0 0 1px var(--danger);
+}
+
+.sh-ui-input-group[data-disabled] {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  background: var(--background-subtle);
+}
+
+/* 그룹 내부의 Input은 자체 보더/배경/포커스 링을 모두 감춘다 */
+.sh-ui-input[data-in-group] {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: auto;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.sh-ui-input[data-in-group]:focus,
+.sh-ui-input[data-in-group]:hover {
+  border: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.sh-ui-input[data-in-group]:disabled {
+  background: transparent;
+}
+
+/* 그룹 안에서는 Input-wrap도 단순 flex 자식으로 */
+.sh-ui-input-wrap[data-in-group] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sh-ui-input-group__adornment {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  color: var(--foreground-muted);
+  padding: 0 var(--space-1);
+}
+
+.sh-ui-input-group__adornment[data-interactive] {
+  padding: 0;
+}

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import "./styles.css";
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  /**
+   * 필수 필드 표시. `true`면 `::after`로 `*` 표시가 붙는다.
+   * Input에 `required` 속성이 있으면 CSS `:has()`로 자동 감지되므로 보통 명시 불필요.
+   *
+   * @default false
+   */
+  isRequired?: boolean;
+}
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/**
+ * 폼 컨트롤과 1:1로 연결되는 레이블. `htmlFor`로 컨트롤의 `id`와 매칭하거나
+ * Label 안에 컨트롤을 감싸 묵시적으로 연결한다. 클릭 시 자동으로 컨트롤에 포커스가 간다.
+ */
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, children, isRequired, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cx("sh-ui-label", className)}
+      data-required={isRequired || undefined}
+      {...props}
+    >
+      {children}
+    </label>
+  ),
+);
+Label.displayName = "Label";
+
+/** Label 안의 주 라벨 텍스트. 구조적 그룹핑이 필요할 때 Label과 함께 사용. */
+export function LabelTitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cx("sh-ui-label__title", className)} {...props} />;
+}
+
+/** 라벨 옆에 약하게 표시되는 보조 텍스트(예: "선택 사항"). */
+export function LabelSubtitle({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cx("sh-ui-label__subtitle", className)} {...props} />;
+}
+
+/** 라벨 아래에 붙는 안내 문구. 컨트롤과 `aria-describedby`로 연결할 것. */
+export function LabelDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cx("sh-ui-label__description", className)} {...props} />;
+}
+
+/** 라벨 아래의 보조 캡션(예: 입력 형식 예시, 글자 수 제한). */
+export function LabelCaption({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cx("sh-ui-label__caption", className)} {...props} />;
+}

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

@@ -0,0 +1,90 @@
+.sh-ui-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: 1.4;
+  color: var(--foreground);
+  cursor: pointer;
+  user-select: none;
+}
+
+.sh-ui-label:not(:has(.sh-ui-label__title, .sh-ui-label__subtitle, .sh-ui-label__description, .sh-ui-label__caption)) {
+  display: block;
+}
+
+/* ───── 텍스트 계층 ───── */
+
+/* Title — 주 라벨 텍스트 (기본). Label에 서브컴포넌트 없이 텍스트만 넣으면 이 스타일. */
+.sh-ui-label__title {
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+/* Subtitle — 부제. 타이틀 옆이나 아래에 보조 강조. */
+.sh-ui-label__subtitle {
+  font-weight: var(--weight-regular);
+  font-size: 0.8125rem;
+  color: var(--foreground);
+}
+
+/* Description — 설명. 입력 필드 가이드. */
+.sh-ui-label__description {
+  margin: 0;
+  font-weight: var(--weight-regular);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--foreground-muted);
+}
+
+/* Caption — 흐린 설명. 가장 덜 중요한 보조 텍스트. */
+.sh-ui-label__caption {
+  margin: 0;
+  font-weight: var(--weight-regular);
+  font-size: var(--text-xs);
+  line-height: 1.3;
+  color: var(--foreground-subtle, var(--foreground-muted));
+  opacity: 0.75;
+}
+
+/* ───── 필수 표시 (* 마크) ─────
+ * 1) isRequired prop (data-required) — 명시적 수동 지정
+ * 2) 인접 폼 컴포넌트에 required 속성 — CSS :has()로 자동 감지
+ * ::after는 Label의 첫 번째 인라인 자식(타이틀) 뒤에 표시. */
+
+/* LabelTitle sub-component가 있는 경우 */
+.sh-ui-label[data-required] > .sh-ui-label__title::after,
+.sh-ui-label:has(+ .sh-ui-input:required) > .sh-ui-label__title::after,
+.sh-ui-label:has(+ .sh-ui-input-wrap .sh-ui-input:required) > .sh-ui-label__title::after,
+.sh-ui-label:has(+ .sh-ui-textarea:required) > .sh-ui-label__title::after,
+.sh-ui-label:has(+ .sh-ui-combobox__input:required) > .sh-ui-label__title::after {
+  content: " *";
+  color: var(--danger);
+  font-weight: var(--weight-semibold);
+}
+
+/* Title 없이 Label에 직접 텍스트를 넣은 경우 */
+.sh-ui-label[data-required]:not(:has(.sh-ui-label__title))::after,
+.sh-ui-label:not(:has(.sh-ui-label__title)):has(+ .sh-ui-input:required)::after,
+.sh-ui-label:not(:has(.sh-ui-label__title)):has(+ .sh-ui-input-wrap .sh-ui-input:required)::after,
+.sh-ui-label:not(:has(.sh-ui-label__title)):has(+ .sh-ui-textarea:required)::after,
+.sh-ui-label:not(:has(.sh-ui-label__title)):has(+ .sh-ui-combobox__input:required)::after {
+  content: " *";
+  color: var(--danger);
+  font-weight: var(--weight-semibold);
+}
+
+/* ───── disabled 자동 감지 ─────
+ * 인접 폼 컴포넌트가 disabled이면 Label도 흐리게. */
+.sh-ui-label:has(+ .sh-ui-input:disabled),
+.sh-ui-label:has(+ .sh-ui-input-wrap .sh-ui-input:disabled),
+.sh-ui-label:has(+ .sh-ui-textarea:disabled),
+.sh-ui-label:has(+ .sh-ui-select__trigger:disabled),
+.sh-ui-label:has(+ .sh-ui-combobox__input:disabled),
+.sh-ui-label:has(+ .sh-ui-date-picker__trigger:disabled),
+.sh-ui-label:has(+ .sh-ui-file-upload .sh-ui-file-upload__dropzone--disabled) {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Menubar as BaseMenubar } from "@base-ui-components/react/menubar";
+import "./styles.css";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/**
+ * 상단 앱 메뉴바(파일/편집/보기 등). 내부에 DropdownMenu를 나란히 배치하여
+ * 좌우 화살표로 메뉴 간 이동이 가능해진다.
+ *
+ *   <Menubar>
+ *     <DropdownMenu>
+ *       <DropdownMenuTrigger>파일</DropdownMenuTrigger>
+ *       <DropdownMenuContent>...</DropdownMenuContent>
+ *     </DropdownMenu>
+ *     <DropdownMenu>...</DropdownMenu>
+ *   </Menubar>
+ */
+export const Menubar = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseMenubar>>
+>(function Menubar({ className, ...props }, ref) {
+  return (
+    <BaseMenubar
+      ref={ref}
+      className={cx("sh-ui-menubar", className)}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,45 @@
+.sh-ui-menubar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+/* Menubar 안의 DropdownMenuTrigger는 메뉴바 항목 스타일로 재지정.
+   dropdown-menu가 함께 설치되어 있어야 한다(registryDependencies).
+   사용자가 render로 자체 엘리먼트를 넘겨 덮어쓸 수 있다. */
+.sh-ui-menubar .sh-ui-dm__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-3);
+  height: var(--control-md);
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground);
+  font-size: var(--text-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast);
+}
+
+.sh-ui-menubar .sh-ui-dm__trigger:hover,
+.sh-ui-menubar .sh-ui-dm__trigger[data-popup-open] {
+  background: var(--background-muted);
+}
+
+.sh-ui-menubar .sh-ui-dm__trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: -1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-menubar .sh-ui-dm__trigger {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,271 @@
+import * as React from "react";
+import "./styles.css";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/* ───────── Pagination (nav) ─────────
+ * 시맨틱: <nav aria-label="Pagination"><ul>...</ul></nav>.
+ * 현재 페이지 링크에 aria-current="page"를 부여해 스크린리더가 위치를 읽게 한다.
+ */
+
+/**
+ * 페이지 분할 내비게이션의 시맨틱 컨테이너(`<nav aria-label="Pagination">`).
+ * 자식 구조: PaginationContent > PaginationItem × n > PaginationLink/Previous/Next/Ellipsis.
+ */
+export const Pagination = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement>
+>(function Pagination({ className, ...props }, ref) {
+  return (
+    <nav
+      ref={ref}
+      aria-label="Pagination"
+      className={cx("sh-ui-pagination", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Content (ul) ───────── */
+
+/** 페이지 항목들을 담는 정렬되지 않은 리스트(`<ul>`). */
+export const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.HTMLAttributes<HTMLUListElement>
+>(function PaginationContent({ className, ...props }, ref) {
+  return (
+    <ul
+      ref={ref}
+      className={cx("sh-ui-pagination__content", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Item (li) ───────── */
+
+/** 한 페이지 슬롯(`<li>`). PaginationLink/Previous/Next/Ellipsis를 자식으로 둔다. */
+export const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(function PaginationItem({ className, ...props }, ref) {
+  return (
+    <li
+      ref={ref}
+      className={cx("sh-ui-pagination__item", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Link ─────────
+ * 숫자 페이지 링크. isActive일 때 aria-current="page" + 시각 강조.
+ */
+
+export interface PaginationLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * 현재 페이지 표시. `true`면 `aria-current="page"`가 자동 부여되고 시각적으로 강조된다.
+   * @default false
+   */
+  isActive?: boolean;
+  /**
+   * 크기.
+   * - `sm` — 컴팩트
+   * - `md` — 일반 (기본)
+   *
+   * @default "md"
+   */
+  size?: "sm" | "md";
+}
+
+/**
+ * 숫자 페이지 링크. `isActive`이면 `aria-current="page"`가 자동 부여되어
+ * 스크린리더가 현재 위치를 읽는다.
+ */
+export const PaginationLink = React.forwardRef<
+  HTMLAnchorElement,
+  PaginationLinkProps
+>(function PaginationLink(
+  { className, isActive, size = "md", ...props },
+  ref,
+) {
+  return (
+    <a
+      ref={ref}
+      aria-current={isActive ? "page" : undefined}
+      data-active={isActive ? "" : undefined}
+      data-size={size}
+      className={cx("sh-ui-pagination__link", className)}
+      {...props}
+    />
+  );
+});
+
+/* ───────── Previous / Next ─────────
+ * 아이콘 + 레이블. 레이블이 없는 아이콘 버튼에는 aria-label로 의미 전달.
+ */
+
+/** "이전 페이지" 링크. 화살표 아이콘과 라벨이 함께 렌더되며 `aria-label`이 자동 부여된다. */
+export const PaginationPrevious = React.forwardRef<
+  HTMLAnchorElement,
+  PaginationLinkProps
+>(function PaginationPrevious({ className, children, ...props }, ref) {
+  return (
+    <PaginationLink
+      ref={ref}
+      aria-label="이전 페이지"
+      className={cx("sh-ui-pagination__nav", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      {children ?? <span>이전</span>}
+    </PaginationLink>
+  );
+});
+
+/** "다음 페이지" 링크. */
+export const PaginationNext = React.forwardRef<
+  HTMLAnchorElement,
+  PaginationLinkProps
+>(function PaginationNext({ className, children, ...props }, ref) {
+  return (
+    <PaginationLink
+      ref={ref}
+      aria-label="다음 페이지"
+      className={cx("sh-ui-pagination__nav", className)}
+      {...props}
+    >
+      {children ?? <span>다음</span>}
+      <ChevronRightIcon />
+    </PaginationLink>
+  );
+});
+
+/* ───────── Ellipsis — 생략 표시 ───────── */
+
+/** 페이지 사이 생략을 표현하는 점 3개. 시각만 표현하고 스크린리더에는 무시된다. */
+export const PaginationEllipsis = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(function PaginationEllipsis({ className, ...props }, ref) {
+  return (
+    <span
+      ref={ref}
+      role="presentation"
+      aria-hidden="true"
+      className={cx("sh-ui-pagination__ellipsis", className)}
+      {...props}
+    >
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+        <circle cx="3" cy="8" r="1.25" />
+        <circle cx="8" cy="8" r="1.25" />
+        <circle cx="13" cy="8" r="1.25" />
+      </svg>
+      <span className="sh-ui-pagination__sr">더 많은 페이지</span>
+    </span>
+  );
+});
+
+/* ───────── 페이지 범위 유틸 ─────────
+ * 현재 페이지 주변 siblings개 + 양 끝 1개 + 필요한 곳에 "dots"를 넣어
+ * 렌더할 토큰 배열을 돌려준다.
+ *
+ * 예: page=5, totalPages=10, siblings=1 → [1, "dots", 4, 5, 6, "dots", 10]
+ *
+ * page·totalPages는 1-based를 가정한다.
+ */
+
+export type PaginationToken = number | "dots";
+
+/**
+ * 1-based `page`/`totalPages`로부터 렌더할 토큰 배열을 만든다.
+ * 양 끝과 현재 주변 `siblings`개를 보여주고, 끊긴 구간엔 `"dots"`를 넣어준다.
+ *
+ * @param args.page - 1-based 현재 페이지.
+ * @param args.siblings - 현재 페이지 양옆에 보일 페이지 개수.
+ * @returns 렌더 토큰 배열. 숫자 또는 문자열 `"dots"`로 구성.
+ * @example
+ * getPaginationRange({ page: 5, totalPages: 10, siblings: 1 })
+ * // [1, "dots", 4, 5, 6, "dots", 10]
+ */
+export function getPaginationRange({
+  page,
+  totalPages,
+  siblings = 1,
+}: {
+  /** 1-based 현재 페이지. */
+  page: number;
+  /** 전체 페이지 수. */
+  totalPages: number;
+  /**
+   * 현재 페이지 양옆에 보일 페이지 개수.
+   * @default 1
+   */
+  siblings?: number;
+}): PaginationToken[] {
+  if (totalPages <= 0) return [];
+
+  // 끝점 2개(첫/마지막) + 현재 주변 (2*siblings + 1) + dots 2개가 총 페이지 수보다 크거나 같으면
+  // 생략 없이 전부 보여준다.
+  const totalSlots = siblings * 2 + 5;
+  if (totalPages <= totalSlots) {
+    return range(1, totalPages);
+  }
+
+  const leftSibling = Math.max(page - siblings, 1);
+  const rightSibling = Math.min(page + siblings, totalPages);
+
+  const showLeftDots = leftSibling > 2;
+  const showRightDots = rightSibling < totalPages - 1;
+
+  // 왼쪽만 닫혀있음 → [1 ... right side]
+  if (!showLeftDots && showRightDots) {
+    const leftCount = 3 + 2 * siblings;
+    return [...range(1, leftCount), "dots", totalPages];
+  }
+
+  // 오른쪽만 닫혀있음 → [1 ... left side]
+  if (showLeftDots && !showRightDots) {
+    const rightCount = 3 + 2 * siblings;
+    return [1, "dots", ...range(totalPages - rightCount + 1, totalPages)];
+  }
+
+  // 양쪽 모두 생략
+  return [1, "dots", ...range(leftSibling, rightSibling), "dots", totalPages];
+}
+
+function range(start: number, end: number): number[] {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, i) => start + i);
+}
+
+function ChevronLeftIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M10 4l-4 4 4 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronRightIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path
+        d="M6 4l4 4-4 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}