moru-krds-react 0.1.0

package/dist/radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/radio/index.tsx"],"sourcesContent":["import type { ChangeEvent, ComponentPropsWithRef, ReactNode } from 'react';\nimport { cx, type KrdsSize } from '../lib/krds';\n\n/**\n * 라디오 버튼 — KRDS `krds-form-check` · `krds-form-chip`.\n *\n * `name` 을 공유하는 것끼리 한 묶음이 되고 방향키 이동은 브라우저가 한다.\n * **`<label>` 안에 `<input>` 을 넣으면 동그라미가 아예 안 그려진다** — 이 부품이 그 골격을 강제한다.\n * 보통은 {@link RadioGroup} 에 `options` 를 넘겨 한 번에 그린다(그래야 `<fieldset>`/`<legend>` 가 붙는다).\n * 여러 값을 고르는 자리는 `ui/checkbox` 다.\n *\n * @example\n * <RadioGroup label=\"공개 범위\" name=\"scope\" options={[\n *   { value: 'all', label: '전체 공개' },\n *   { value: 'org', label: '기관 내부', description: '소속 기관 승인 뒤 열립니다.' },\n * ]} />\n * <RadioGroup label=\"동의\" name=\"agree\" chip equalWidth options={[\n *   { value: 'y', label: '예' }, { value: 'n', label: '아니오' },\n * ]} />\n *\n * 자세히: docs/krds/09-부품-노트.md#라디오\n */\n\n/** 항목 크기. 킷에 있는 둘뿐이다 — 동그라미 20px / 24px, 글자 17px / 19px. */\nexport type RadioSize = Extract<KrdsSize, 'medium' | 'large'>;\n\n/** 칩 크기. 높이 40 / 48 / 56px — 버튼·입력칸과 같은 눈금이라 한 줄에 섞어도 어긋나지 않는다. */\nexport type RadioChipSize = Extract<KrdsSize, 'small' | 'medium' | 'large'>;\n\n/** id 를 `name`+`value` 로 만든다. `useId()` 를 쓰면 부품이 클라이언트로 내려가는데 그럴 이유가 없다. */\nfunction radioId(name: string, value: string): string {\n  return `${name}-${value}`.replace(/\\s+/g, '-');\n}\n\n/* ────────────────────────────────────────────────────────────────────────── */\n\nexport type RadioProps = Omit<\n  ComponentPropsWithRef<'input'>,\n  'type' | 'size' | 'value' | 'className'\n> & {\n  /** 그룹 이름. 같은 값을 가진 라디오끼리 한 묶음이 되고 방향키가 그 안에서 돈다. */\n  name: string;\n  /** 값. 같은 `name` 안에서 유일해야 한다 — `id` 를 이 값으로 만든다. */\n  value: string;\n  /** `<label>` 에 들어갈 글. */\n  label: ReactNode;\n  /** 부가 설명. 세로 배치와 함께 쓴다. `aria-describedby` 로 이어진다. */\n  description?: ReactNode;\n  /** 크기. 기본 medium. */\n  size?: RadioSize;\n  /** 감싸개 `div.krds-form-check` 에 붙는다(여백 조절은 여기서). */\n  className?: string;\n  /** `<input>` 에 붙는다. */\n  inputClassName?: string;\n};\n\n/** 라디오 한 개. `id` 를 주지 않으면 `name`-`value` 로 만든다. 묶음은 {@link RadioGroup} 이다. */\nexport function Radio({\n  name,\n  value,\n  label,\n  description,\n  size = 'medium',\n  className,\n  inputClassName,\n  id,\n  'aria-describedby': describedBy,\n  ...rest\n}: RadioProps) {\n  const inputId = id ?? radioId(name, value);\n  const descId = description ? `${inputId}-desc` : undefined;\n\n  return (\n    <div className={cx('krds-form-check', size, className)}>\n      <input\n        type=\"radio\"\n        id={inputId}\n        name={name}\n        value={value}\n        className={inputClassName}\n        aria-describedby={cx(describedBy, descId) || undefined}\n        {...rest}\n      />\n      <label htmlFor={inputId}>{label}</label>\n      {description ? (\n        // 킷 규칙이 `label + .krds-form-check-cnt` 라 label 바로 다음 형제여야 왼쪽 들여쓰기가 맞는다.\n        <div className=\"krds-form-check-cnt\">\n          <p className=\"krds-form-check-p\" id={descId}>\n            {description}\n          </p>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────── */\n\n/**\n * 칩 포커스 테두리. 킷은 JS 가 붙이는 `.focus` 클래스를 전제하는데 그 JS 가 없어\n * CSS 형제 선택(`peer` / `peer-focus`)으로 같은 그림을 만든다. 값은 킷 토큰 그대로다.\n */\nconst CHIP_FOCUS_RING = 'peer-focus:[box-shadow:var(--krds-box-shadow-outline-inset)]';\n\nexport type RadioChipProps = Omit<\n  ComponentPropsWithRef<'input'>,\n  'type' | 'size' | 'value' | 'className'\n> & {\n  /** 그룹 이름. */\n  name: string;\n  /** 값. 같은 `name` 안에서 유일해야 한다. */\n  value: string;\n  /** 칩에 보이는 글. */\n  label: ReactNode;\n  /** 크기. 기본 medium(48px). */\n  size?: RadioChipSize;\n  /** 감싸개 `div.krds-form-chip` 에 붙는다. */\n  className?: string;\n  /** `<input>` 에 붙는다. */\n  inputClassName?: string;\n};\n\n/**\n * 칩 라디오 — 테두리 알약을 눌러 고른다. 예/아니오처럼 선택지가 짧을 때 쓴다.\n * 체크 아이콘은 킷이 알아서 켜고 끈다.\n */\nexport function RadioChip({\n  name,\n  value,\n  label,\n  size = 'medium',\n  className,\n  inputClassName,\n  id,\n  ...rest\n}: RadioChipProps) {\n  const inputId = id ?? radioId(name, value);\n\n  return (\n    <div className={cx('krds-form-chip', size, className)}>\n      <input\n        type=\"radio\"\n        // `radio` 는 킷 샘플이 붙이는 클래스다(chip-wrap 안에서 선택자로 쓰인다).\n        className={cx('radio peer', inputClassName)}\n        id={inputId}\n        name={name}\n        value={value}\n        {...rest}\n      />\n      <label className={cx('krds-form-chip-outline', CHIP_FOCUS_RING)} htmlFor={inputId}>\n        {label}\n      </label>\n    </div>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────── */\n\n/** `RadioGroup` 이 직접 그릴 항목. */\nexport type RadioOption<T extends string = string> = {\n  /** 값. */\n  value: T;\n  /** 화면에 보이는 글. */\n  label: ReactNode;\n  /** 부가 설명. 하나라도 있으면 세로 배치가 맞는다. */\n  description?: ReactNode;\n  /** 비활성. */\n  disabled?: boolean;\n  /** 기본값은 `name`-`value`. 한 페이지에 같은 `name` 을 두 번 쓸 때만 손으로 준다. */\n  id?: string;\n};\n\nexport type RadioGroupProps<T extends string = string> = Omit<\n  ComponentPropsWithRef<'fieldset'>,\n  'onChange' | 'children'\n> & {\n  /** 묶음 이름. `<legend>` 로 들어간다 — 킷이 화면에서 감추지만 스크린리더는 읽는다. */\n  label: ReactNode;\n  /** 소제목을 화면에도 보이게 한다. 사본이라 낭독에서는 빠진다. */\n  labelVisible?: boolean;\n  /** 그룹 이름. 방향키 이동이 이 값을 공유하는 라디오 안에서 돈다. */\n  name: string;\n  /** 항목. 주면 `RadioGroup` 이 직접 그린다. 생략하고 `children` 으로 손수 넣어도 된다. */\n  options?: readonly RadioOption<T>[];\n  /** 통제 컴포넌트로 쓸 때의 현재 값. */\n  value?: T;\n  /** 비통제로 쓸 때의 처음 값. 정확한 값이 중요하면 **기본 선택값을 주지 않는다**(규격). */\n  defaultValue?: T;\n  /** 값이 바뀔 때. */\n  onValueChange?: (value: T) => void;\n  /** 항목 크기. 기본 medium. */\n  size?: RadioSize;\n  /** 칩 크기. 기본 medium. */\n  chipSize?: RadioChipSize;\n  /** 칩 형태로 그린다. */\n  chip?: boolean;\n  /** 배치. 기본은 세로다(규격). 칩은 성질상 가로가 기본. */\n  orientation?: 'vertical' | 'horizontal';\n  /** 칩을 같은 너비로 늘린다(킷 `chip-wrap`). */\n  equalWidth?: boolean;\n  /** `div.krds-check-area` 에 붙는다. `className` 은 바깥 `<fieldset>` 에 붙는다. */\n  areaClassName?: string;\n  children?: ReactNode;\n};\n\n/**\n * 라디오 묶음 — `fieldset > legend + div.krds-check-area`. 규격이 요구하는 골격이다.\n *\n * `disabled` 를 주면 안에 든 라디오가 전부 잠긴다(브라우저 기본 동작).\n */\nexport function RadioGroup<T extends string = string>({\n  label,\n  labelVisible,\n  name,\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  size = 'medium',\n  chipSize = 'medium',\n  chip,\n  orientation,\n  equalWidth,\n  className,\n  areaClassName,\n  children,\n  ...rest\n}: RadioGroupProps<T>) {\n  const vertical = (orientation ?? (chip ? 'horizontal' : 'vertical')) === 'vertical';\n  const controlled = value !== undefined;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onValueChange?.(e.currentTarget.value as T);\n  };\n\n  return (\n    <fieldset\n      // 브라우저 기본 테두리를 지우고, flex/grid 안에서 줄어들지 못하는 기본값을 푼다.\n      className={cx('border-0 min-w-0', className)}\n      {...rest}\n    >\n      <legend>{label}</legend>\n      {labelVisible ? (\n        // `<legend>` 가 이미 읽히므로 사본은 낭독에서 뺀다.\n        <p className=\"form-label mb-3\" aria-hidden=\"true\">\n          {label}\n        </p>\n      ) : null}\n\n      <div\n        className={cx(\n          'krds-check-area',\n          vertical && 'chk-column',\n          equalWidth && 'chip-wrap',\n          areaClassName,\n        )}\n      >\n        {options?.map((o) => {\n          const common = {\n            name,\n            value: o.value,\n            label: o.label,\n            id: o.id,\n            disabled: o.disabled,\n            onChange: handleChange,\n            ...(controlled\n              ? { checked: o.value === value }\n              : defaultValue !== undefined\n                ? { defaultChecked: o.value === defaultValue }\n                : null),\n          };\n          // key 는 spread 밖에 둔다 — props 객체에 섞으면 React 가 경고한다.\n          return chip ? (\n            <RadioChip key={o.value} {...common} size={chipSize} />\n          ) : (\n            <Radio key={o.value} {...common} size={size} description={o.description} />\n          );\n        })}\n        {children}\n      </div>\n    </fieldset>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/resize/index.d.ts

@@ -0,0 +1,118 @@
+import { type ComponentPropsWithRef } from 'react';
+/**
+ * 화면 크기 조정 — KRDS `krds-drop-wrap krds-resize`.
+ * 선명한 화면 모드 전환({@link ViewModeSwitch}) — 같은 드롭다운 껍데기를 쓰는 우리 부품이다.
+ *
+ * 헤더 유틸리티 줄에 놓는다. 배율은 문서 루트 글자 크기로 걸리므로 화면 전체가 따라온다.
+ * 첫 화면이 기본 모드로 번쩍이지 않게 `<head>` 에 {@link ViewSettingsScript} 를 두고 **nonce 를 넘긴다**.
+ * `ViewModeSwitch` 는 `<html data-krds-mode>` 를 붙이는 **유일한 곳**이다 —
+ * 이것 없이는 킷의 고대비 규칙이 통째로 죽은 코드로 남는다.
+ *
+ * @example
+ * // app/layout.tsx <head>
+ * <ViewSettingsScript nonce={nonce} />
+ * // 헤더 유틸리티 줄
+ * <HeaderUtility>
+ *   <Resize />
+ *   <ViewModeSwitch />
+ * </HeaderUtility>
+ *
+ * 자세히: docs/krds/09-부품-노트.md#크기조절
+ */
+/** 킷의 5단. 클래스 이름(`.item-link.sm` …)과 값이 같아야 한다. */
+export type ResizeScale = 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';
+/** 5단의 레이블과 배율 — 작게 90% · 보통 100% · 조금 크게 110% · 크게 130% · 가장 크게 150%. */
+export declare const RESIZE_SCALES: ReadonlyArray<{
+    value: ResizeScale;
+    label: string;
+    percent: number;
+}>;
+/**
+ * 그 배율에서 문서 루트에 넣을 글자 크기. %(브라우저 기본 글자 크기의 비율)라
+ * 사용자의 브라우저 글꼴 설정을 덮지 않는다.
+ *
+ * @example
+ * rootFontSize('lg') // '68.75%'
+ */
+export declare function rootFontSize(scale: ResizeScale): string;
+/**
+ * 배율을 문서에 건다 — `<html>` 인라인 글자 크기 · `data-krds-scale` 표시 ·
+ * 확대(100% 초과)일 때 `krds-scaled-layout`(목차의 고정 위치를 푼다).
+ */
+export declare function applyScale(scale: ResizeScale): void;
+/** 화면 모드. `light` 는 속성을 떼는 것이고, 나머지 둘은 `<html data-krds-mode>` 값이다. */
+export type ViewMode = 'light' | 'high-contrast' | 'theme';
+/** 모드 레이블. 「고대비」 대신 KRDS 용어인 「선명한 화면」을 쓴다. */
+export declare const VIEW_MODES: ReadonlyArray<{
+    value: ViewMode;
+    label: string;
+}>;
+/** 화면 모드를 `<html>` 에 건다. 킷 선택자가 후손 선택자라 반드시 루트에 붙어야 한다. */
+export declare function applyViewMode(mode: ViewMode): void;
+/** 배율 저장 키. */
+export declare const SCALE_STORAGE_KEY = "krds.scale";
+/** 화면 모드 저장 키. */
+export declare const VIEW_MODE_STORAGE_KEY = "krds.view-mode";
+/** 저장된 배율. 없거나 못 읽으면 null. */
+export declare function readStoredScale(): ResizeScale | null;
+/** 저장된 화면 모드. 없거나 못 읽으면 null. */
+export declare function readStoredViewMode(): ViewMode | null;
+/**
+ * 첫 그림 전에 저장된 배율·화면 모드를 거는 인라인 스크립트. 없으면 첫 화면이 한 번 번쩍인다.
+ * `<head>` 안, 스타일시트 뒤에 놓는다.
+ *
+ * **`nonce` 를 반드시 넘겨라** — CSP 가 nonce 없는 인라인 스크립트를 막는다.
+ *
+ * @example
+ * const nonce = await requestNonce();
+ * <ViewSettingsScript nonce={nonce ?? undefined} />
+ */
+export declare function ViewSettingsScript({ nonce }: {
+    nonce?: string;
+}): import("react").JSX.Element;
+/** 드롭다운 정렬. 생략하면 가운데(킷 기본). */
+export type DropAlign = 'left' | 'right';
+export type ResizeProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'onSelect'> & {
+    /** 버튼 글자. 기본 「화면 크기」. */
+    label?: string;
+    /** 초기화 버튼 글자. 기본 「초기화」. */
+    resetLabel?: string;
+    /** 드롭다운 정렬. */
+    align?: DropAlign;
+    /** 저장값이 없을 때의 배율. 기본 `md`(100%). */
+    defaultScale?: ResizeScale;
+    /** localStorage 기억. 기본 켬. */
+    persist?: boolean;
+    /** 배율이 바뀔 때. 서버에 남기고 싶을 때 쓴다. */
+    onScaleChange?: (scale: ResizeScale) => void;
+};
+/**
+ * 화면 크기 조정 — 헤더 유틸리티 줄에 놓는다. 5단(90~150%)에서 고른다.
+ * 저장값은 붙은 뒤에 읽는다 — 그 한 프레임의 번쩍임은 {@link ViewSettingsScript} 가 없앤다.
+ */
+export declare function Resize({ label, resetLabel, align, defaultScale, persist, onScaleChange, className, ...rest }: ResizeProps): import("react").JSX.Element;
+export type ViewModeSwitchProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'onSelect'> & {
+    /** 버튼 글자. 기본 「화면 모드」. */
+    label?: string;
+    /** 드롭다운 정렬. */
+    align?: DropAlign;
+    /** 저장값이 없을 때의 모드. 기본 `light`. */
+    defaultMode?: ViewMode;
+    /** localStorage 기억. 기본 켬. */
+    persist?: boolean;
+    /**
+     * 「기기 설정 따름」을 옵션에 넣는다. **기본 끔** — 보충 층이 그 모드를 재정의하지 않아
+     * 킷 부품만 어두워지고 유틸리티로 그린 부분은 밝게 남는다.
+     */
+    systemOption?: boolean;
+    /** 모드가 바뀔 때. */
+    onModeChange?: (mode: ViewMode) => void;
+};
+/**
+ * 선명한 화면 모드 전환 — 킷에 이름이 없는 우리 부품이다. 껍데기와 아이콘은 킷 것을 쓴다.
+ *
+ * **`<html data-krds-mode>` 를 붙이는 유일한 곳이다** — 이것 없이는 킷의 고대비 규칙이
+ * 통째로 죽은 코드로 남는다.
+ */
+export declare function ViewModeSwitch({ label, align, defaultMode, persist, systemOption, onModeChange, className, ...rest }: ViewModeSwitchProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/resize/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resize/index.tsx"],"names":[],"mappings":"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"}

package/dist/resize/index.js

@@ -0,0 +1,342 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { cx } from "../lib/krds.js";
+const RESIZE_SCALES = [
+  { value: "sm", label: "\uC791\uAC8C", percent: 90 },
+  { value: "md", label: "\uBCF4\uD1B5", percent: 100 },
+  { value: "lg", label: "\uC870\uAE08 \uD06C\uAC8C", percent: 110 },
+  { value: "xlg", label: "\uD06C\uAC8C", percent: 130 },
+  { value: "xxlg", label: "\uAC00\uC7A5 \uD06C\uAC8C", percent: 150 }
+];
+const ROOT_FONT_BASE_PERCENT = 62.5;
+const DEFAULT_SCALE = "md";
+function scaleInfo(scale) {
+  return RESIZE_SCALES.find((s) => s.value === scale) ?? RESIZE_SCALES[1];
+}
+function rootFontSize(scale) {
+  return `${ROOT_FONT_BASE_PERCENT * scaleInfo(scale).percent / 100}%`;
+}
+function applyScale(scale) {
+  const root = document.documentElement;
+  root.style.fontSize = rootFontSize(scale);
+  root.dataset.krdsScale = scale;
+  document.body?.classList.toggle("krds-scaled-layout", scaleInfo(scale).percent > 100);
+}
+const VIEW_MODES = [
+  { value: "light", label: "\uAE30\uBCF8 \uD654\uBA74" },
+  { value: "high-contrast", label: "\uC120\uBA85\uD55C \uD654\uBA74" },
+  { value: "theme", label: "\uAE30\uAE30 \uC124\uC815 \uB530\uB984" }
+];
+function applyViewMode(mode) {
+  const root = document.documentElement;
+  if (mode === "light") delete root.dataset.krdsMode;
+  else root.dataset.krdsMode = mode;
+}
+const SCALE_STORAGE_KEY = "krds.scale";
+const VIEW_MODE_STORAGE_KEY = "krds.view-mode";
+function readStored(key, allowed) {
+  try {
+    const v = window.localStorage.getItem(key);
+    return v && allowed.includes(v) ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeStored(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function readStoredScale() {
+  return readStored(
+    SCALE_STORAGE_KEY,
+    RESIZE_SCALES.map((s) => s.value)
+  );
+}
+function readStoredViewMode() {
+  return readStored(
+    VIEW_MODE_STORAGE_KEY,
+    VIEW_MODES.map((m) => m.value)
+  );
+}
+const BOOT_SCRIPT = (() => {
+  const map = {};
+  for (const s of RESIZE_SCALES) map[s.value] = rootFontSize(s.value);
+  return `(function(){try{var d=document.documentElement,m=${JSON.stringify(map)},s=localStorage.getItem(${JSON.stringify(SCALE_STORAGE_KEY)});if(s&&m[s]){d.style.fontSize=m[s];d.dataset.krdsScale=s;}var v=localStorage.getItem(${JSON.stringify(VIEW_MODE_STORAGE_KEY)});if(v==='high-contrast'||v==='theme'){d.dataset.krdsMode=v;}}catch(e){}})();`;
+})();
+function ViewSettingsScript({ nonce }) {
+  return /* @__PURE__ */ jsx("script", { nonce, dangerouslySetInnerHTML: { __html: BOOT_SCRIPT } });
+}
+function DropdownShell({
+  wrapClass,
+  triggerLabel,
+  leadingIcon,
+  options,
+  value,
+  onSelect,
+  align,
+  footer,
+  className,
+  dataAdjust,
+  wrapProps
+}) {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const menuId = useId();
+  const close = useCallback((refocus = false) => {
+    setOpen(false);
+    if (refocus) triggerRef.current?.focus();
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      if (!wrapRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  const focusItem = (index) => {
+    const items = menuRef.current?.querySelectorAll(".item-link");
+    if (!items?.length) return;
+    const i = (index + items.length) % items.length;
+    items[i]?.focus();
+  };
+  const onTriggerKeyDown = (e) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    e.preventDefault();
+    if (open) {
+      focusItem(e.key === "ArrowDown" ? 0 : options.length - 1);
+      return;
+    }
+    const at = options.findIndex((o) => o.value === value);
+    const next = e.key === "ArrowDown" ? at + 1 : at - 1;
+    if (next >= 0 && next < options.length) onSelect(options[next].value);
+  };
+  const onMenuKeyDown = (e) => {
+    const items = Array.from(
+      menuRef.current?.querySelectorAll(".item-link") ?? []
+    );
+    const at = items.indexOf(document.activeElement);
+    if (at < 0) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      focusItem(at + 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      focusItem(at - 1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focusItem(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      focusItem(items.length - 1);
+    }
+  };
+  const onWrapKeyDown = (e) => {
+    if (e.key === "Escape" && open) {
+      e.stopPropagation();
+      close(true);
+    }
+  };
+  const onBlurCapture = (e) => {
+    const next = e.relatedTarget;
+    if (next && !e.currentTarget.contains(next)) setOpen(false);
+  };
+  const current = options.find((o) => o.value === value);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...wrapProps,
+      ref: wrapRef,
+      className: cx("krds-drop-wrap", wrapClass, align && `drop-${align}`, className),
+      "data-adjust": dataAdjust,
+      onKeyDown: onWrapKeyDown,
+      onBlurCapture,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            className: "krds-btn small text drop-btn",
+            "aria-expanded": open,
+            "aria-controls": menuId,
+            onClick: () => setOpen((v) => !v),
+            onKeyDown: onTriggerKeyDown,
+            children: [
+              leadingIcon && /* @__PURE__ */ jsx("i", { className: `svg-icon ico-${leadingIcon}`, "aria-hidden": "true" }),
+              triggerLabel,
+              /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                "\uD604\uC7AC ",
+                current?.label ?? ""
+              ] }),
+              /* @__PURE__ */ jsx("i", { className: "svg-icon ico-toggle", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: menuRef,
+            id: menuId,
+            className: "drop-menu",
+            style: open ? { display: "block" } : void 0,
+            onKeyDown: onMenuKeyDown,
+            children: /* @__PURE__ */ jsxs("div", { className: "drop-in", children: [
+              /* @__PURE__ */ jsx("ul", { className: "drop-list", children: options.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cx(
+                    "item-link",
+                    option.itemClass,
+                    option.value === value && "active"
+                  ),
+                  "data-adjust-scale": option.data,
+                  "aria-current": option.value === value ? "true" : void 0,
+                  onClick: () => {
+                    onSelect(option.value);
+                    close(true);
+                  },
+                  children: option.label
+                }
+              ) }, option.value)) }),
+              footer && /* @__PURE__ */ jsx("div", { className: "drop-bottom", onClick: () => close(true), children: footer })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function Resize({
+  label = "\uD654\uBA74 \uD06C\uAE30",
+  resetLabel = "\uCD08\uAE30\uD654",
+  align,
+  defaultScale = DEFAULT_SCALE,
+  persist = true,
+  onScaleChange,
+  className,
+  ...rest
+}) {
+  const [scale, setScale] = useState(defaultScale);
+  useEffect(() => {
+    const initial = persist && readStoredScale() || defaultScale;
+    setScale(initial);
+    applyScale(initial);
+  }, [persist, defaultScale]);
+  const select = useCallback(
+    (next) => {
+      setScale(next);
+      applyScale(next);
+      if (persist) writeStored(SCALE_STORAGE_KEY, next);
+      onScaleChange?.(next);
+    },
+    [persist, onScaleChange]
+  );
+  return /* @__PURE__ */ jsx(
+    DropdownShell,
+    {
+      wrapClass: "krds-resize",
+      dataAdjust: "scale",
+      triggerLabel: label,
+      options: RESIZE_SCALES.map((s) => ({
+        value: s.value,
+        label: s.label,
+        // 킷이 이 클래스로 목록 앞 글자 미리보기 아이콘 크기(2.2~3.0rem)를 그린다.
+        itemClass: s.value,
+        data: s.value
+      })),
+      value: scale,
+      onSelect: select,
+      align,
+      footer: (
+        // 킷 샘플 그대로 `krds-btn medium text` + ico-reset. 아이콘이 글자 앞에 온다.
+        // 목록을 닫는 일은 껍데기(`.drop-bottom` 의 클릭)가 맡는다.
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "krds-btn medium text",
+            "data-adjust-scale": DEFAULT_SCALE,
+            onClick: () => select(DEFAULT_SCALE),
+            children: [
+              /* @__PURE__ */ jsx("i", { className: "svg-icon ico-reset", "aria-hidden": "true" }),
+              " ",
+              resetLabel
+            ]
+          }
+        )
+      ),
+      className,
+      wrapProps: rest
+    }
+  );
+}
+function ViewModeSwitch({
+  label = "\uD654\uBA74 \uBAA8\uB4DC",
+  align,
+  defaultMode = "light",
+  persist = true,
+  systemOption = false,
+  onModeChange,
+  className,
+  ...rest
+}) {
+  const [mode, setMode] = useState(defaultMode);
+  useEffect(() => {
+    const saved = persist && readStoredViewMode() || defaultMode;
+    const initial = saved === "theme" && !systemOption ? "light" : saved;
+    setMode(initial);
+    applyViewMode(initial);
+  }, [persist, defaultMode, systemOption]);
+  const select = useCallback(
+    (next) => {
+      setMode(next);
+      applyViewMode(next);
+      if (persist) writeStored(VIEW_MODE_STORAGE_KEY, next);
+      onModeChange?.(next);
+    },
+    [persist, onModeChange]
+  );
+  const options = VIEW_MODES.filter((m) => systemOption || m.value !== "theme");
+  return /* @__PURE__ */ jsx(
+    DropdownShell,
+    {
+      wrapClass: void 0,
+      triggerLabel: label,
+      leadingIcon: "view-mode",
+      options: options.map((m) => ({ value: m.value, label: m.label })),
+      value: mode,
+      onSelect: select,
+      align,
+      className,
+      wrapProps: rest
+    }
+  );
+}
+export {
+  RESIZE_SCALES,
+  Resize,
+  SCALE_STORAGE_KEY,
+  VIEW_MODES,
+  VIEW_MODE_STORAGE_KEY,
+  ViewModeSwitch,
+  ViewSettingsScript,
+  applyScale,
+  applyViewMode,
+  readStoredScale,
+  readStoredViewMode,
+  rootFontSize
+};
+//# sourceMappingURL=index.js.map

package/dist/resize/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/resize/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type FocusEvent as ReactFocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { cx } from '../lib/krds';\n\n/**\n * 화면 크기 조정 — KRDS `krds-drop-wrap krds-resize`.\n * 선명한 화면 모드 전환({@link ViewModeSwitch}) — 같은 드롭다운 껍데기를 쓰는 우리 부품이다.\n *\n * 헤더 유틸리티 줄에 놓는다. 배율은 문서 루트 글자 크기로 걸리므로 화면 전체가 따라온다.\n * 첫 화면이 기본 모드로 번쩍이지 않게 `<head>` 에 {@link ViewSettingsScript} 를 두고 **nonce 를 넘긴다**.\n * `ViewModeSwitch` 는 `<html data-krds-mode>` 를 붙이는 **유일한 곳**이다 —\n * 이것 없이는 킷의 고대비 규칙이 통째로 죽은 코드로 남는다.\n *\n * @example\n * // app/layout.tsx <head>\n * <ViewSettingsScript nonce={nonce} />\n * // 헤더 유틸리티 줄\n * <HeaderUtility>\n *   <Resize />\n *   <ViewModeSwitch />\n * </HeaderUtility>\n *\n * 자세히: docs/krds/09-부품-노트.md#크기조절\n */\n\n/* ────────────────────────────────────────────────────────────────────────\n * 1. 배율\n * ──────────────────────────────────────────────────────────────────────── */\n\n/** 킷의 5단. 클래스 이름(`.item-link.sm` …)과 값이 같아야 한다. */\nexport type ResizeScale = 'sm' | 'md' | 'lg' | 'xlg' | 'xxlg';\n\n/** 5단의 레이블과 배율 — 작게 90% · 보통 100% · 조금 크게 110% · 크게 130% · 가장 크게 150%. */\nexport const RESIZE_SCALES: ReadonlyArray<{\n  value: ResizeScale;\n  label: string;\n  percent: number;\n}> = [\n  { value: 'sm', label: '작게', percent: 90 },\n  { value: 'md', label: '보통', percent: 100 },\n  { value: 'lg', label: '조금 크게', percent: 110 },\n  { value: 'xlg', label: '크게', percent: 130 },\n  { value: 'xxlg', label: '가장 크게', percent: 150 },\n];\n\n/** 킷 기본 루트 글자 크기. */\nconst ROOT_FONT_BASE_PERCENT = 62.5;\n\n/** 기본 배율(킷의 `.active` 가 붙어 있는 단). */\nconst DEFAULT_SCALE: ResizeScale = 'md';\n\nfunction scaleInfo(scale: ResizeScale) {\n  return RESIZE_SCALES.find((s) => s.value === scale) ?? RESIZE_SCALES[1];\n}\n\n/**\n * 그 배율에서 문서 루트에 넣을 글자 크기. %(브라우저 기본 글자 크기의 비율)라\n * 사용자의 브라우저 글꼴 설정을 덮지 않는다.\n *\n * @example\n * rootFontSize('lg') // '68.75%'\n */\nexport function rootFontSize(scale: ResizeScale): string {\n  return `${(ROOT_FONT_BASE_PERCENT * scaleInfo(scale).percent) / 100}%`;\n}\n\n/**\n * 배율을 문서에 건다 — `<html>` 인라인 글자 크기 · `data-krds-scale` 표시 ·\n * 확대(100% 초과)일 때 `krds-scaled-layout`(목차의 고정 위치를 푼다).\n */\nexport function applyScale(scale: ResizeScale): void {\n  const root = document.documentElement;\n  root.style.fontSize = rootFontSize(scale);\n  root.dataset.krdsScale = scale;\n  document.body?.classList.toggle('krds-scaled-layout', scaleInfo(scale).percent > 100);\n}\n\n/* ────────────────────────────────────────────────────────────────────────\n * 2. 선명한 화면 모드\n * ──────────────────────────────────────────────────────────────────────── */\n\n/** 화면 모드. `light` 는 속성을 떼는 것이고, 나머지 둘은 `<html data-krds-mode>` 값이다. */\nexport type ViewMode = 'light' | 'high-contrast' | 'theme';\n\n/** 모드 레이블. 「고대비」 대신 KRDS 용어인 「선명한 화면」을 쓴다. */\nexport const VIEW_MODES: ReadonlyArray<{ value: ViewMode; label: string }> = [\n  { value: 'light', label: '기본 화면' },\n  { value: 'high-contrast', label: '선명한 화면' },\n  { value: 'theme', label: '기기 설정 따름' },\n];\n\n/** 화면 모드를 `<html>` 에 건다. 킷 선택자가 후손 선택자라 반드시 루트에 붙어야 한다. */\nexport function applyViewMode(mode: ViewMode): void {\n  const root = document.documentElement;\n  if (mode === 'light') delete root.dataset.krdsMode;\n  else root.dataset.krdsMode = mode;\n}\n\n/* ────────────────────────────────────────────────────────────────────────\n * 3. 저장 — 브라우저가 막아도 화면은 떠야 한다\n * ──────────────────────────────────────────────────────────────────────── */\n\n/** 배율 저장 키. */\nexport const SCALE_STORAGE_KEY = 'krds.scale';\n/** 화면 모드 저장 키. */\nexport const VIEW_MODE_STORAGE_KEY = 'krds.view-mode';\n\n/** 사생활 보호 모드·쿠키 차단에서는 접근만 해도 예외가 난다 — try/catch 로 감싼다. */\nfunction readStored<T extends string>(key: string, allowed: ReadonlyArray<T>): T | null {\n  try {\n    const v = window.localStorage.getItem(key);\n    return v && (allowed as ReadonlyArray<string>).includes(v) ? (v as T) : null;\n  } catch {\n    return null;\n  }\n}\n\nfunction writeStored(key: string, value: string): void {\n  try {\n    window.localStorage.setItem(key, value);\n  } catch {\n    /* 저장이 막힌 브라우저 — 이번 방문에만 적용된다 */\n  }\n}\n\n/** 저장된 배율. 없거나 못 읽으면 null. */\nexport function readStoredScale(): ResizeScale | null {\n  return readStored(\n    SCALE_STORAGE_KEY,\n    RESIZE_SCALES.map((s) => s.value),\n  );\n}\n\n/** 저장된 화면 모드. 없거나 못 읽으면 null. */\nexport function readStoredViewMode(): ViewMode | null {\n  return readStored(\n    VIEW_MODE_STORAGE_KEY,\n    VIEW_MODES.map((m) => m.value),\n  );\n}\n\n/** 첫 그림 전에 저장값을 거는 인라인 스크립트 본문. `RESIZE_SCALES` 에서 만들어 낸다. */\nconst BOOT_SCRIPT = ((): string => {\n  const map: Record<string, string> = {};\n  for (const s of RESIZE_SCALES) map[s.value] = rootFontSize(s.value);\n  return (\n    '(function(){try{var d=document.documentElement,' +\n    `m=${JSON.stringify(map)},` +\n    `s=localStorage.getItem(${JSON.stringify(SCALE_STORAGE_KEY)});` +\n    'if(s&&m[s]){d.style.fontSize=m[s];d.dataset.krdsScale=s;}' +\n    `var v=localStorage.getItem(${JSON.stringify(VIEW_MODE_STORAGE_KEY)});` +\n    \"if(v==='high-contrast'||v==='theme'){d.dataset.krdsMode=v;}\" +\n    '}catch(e){}})();'\n  );\n})();\n\n/**\n * 첫 그림 전에 저장된 배율·화면 모드를 거는 인라인 스크립트. 없으면 첫 화면이 한 번 번쩍인다.\n * `<head>` 안, 스타일시트 뒤에 놓는다.\n *\n * **`nonce` 를 반드시 넘겨라** — CSP 가 nonce 없는 인라인 스크립트를 막는다.\n *\n * @example\n * const nonce = await requestNonce();\n * <ViewSettingsScript nonce={nonce ?? undefined} />\n */\nexport function ViewSettingsScript({ nonce }: { nonce?: string }) {\n  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: BOOT_SCRIPT }} />;\n}\n\n/* ────────────────────────────────────────────────────────────────────────\n * 4. 드롭다운 껍데기 — 두 부품이 함께 쓴다\n * ──────────────────────────────────────────────────────────────────────── */\n\n/** 드롭다운 정렬. 생략하면 가운데(킷 기본). */\nexport type DropAlign = 'left' | 'right';\n\ntype DropOption<T extends string> = {\n  value: T;\n  label: string;\n  /** 항목에 덧붙일 킷 클래스. 화면 크기 조정의 `sm`~`xxlg` 미리보기 아이콘이 여기로 온다. */\n  itemClass?: string;\n  /** 항목에 붙일 `data-adjust-scale` 값(킷 샘플의 손잡이). */\n  data?: string;\n};\n\ntype DropdownShellProps<T extends string> = {\n  /** 껍데기 종류 클래스. `krds-resize` 처럼 킷에 실재하는 것만 넣는다. */\n  wrapClass?: string;\n  /** 버튼 글자(구조 ①). */\n  triggerLabel: string;\n  /** 버튼 앞 아이콘 이름(`ico-` 뺀 것). 없으면 글자만. */\n  leadingIcon?: string;\n  options: ReadonlyArray<DropOption<T>>;\n  value: T;\n  onSelect: (value: T) => void;\n  align?: DropAlign;\n  /**\n   * `.drop-bottom` 자리. 여기서 일어난 클릭은 **목록을 닫고 버튼으로 초점을 돌린다**\n   * — 초기화처럼 값을 바꾸는 동작이 들어오는 자리라 옵션을 고른 것과 같이 다룬다.\n   */\n  footer?: ReactNode;\n  className?: string;\n  /** 감싸개에 붙일 `data-adjust` 값(킷 샘플의 손잡이). */\n  dataAdjust?: string;\n  wrapProps: Omit<ComponentPropsWithRef<'div'>, 'children'>;\n};\n\n/**\n * 드롭다운 껍데기. 상호작용은 10_02 원문 그대로 — Esc 는 접고 버튼으로 초점 복귀,\n * 접힌 상태의 ↑↓ 는 **선택값 자체를** 옮기고, 목록 안에서는 초점만 옮긴다.\n * `role=\"menu\"` 를 쓰지 않는다 — 가이드가 Tab 으로 항목에 닿을 것을 요구한다.\n */\nfunction DropdownShell<T extends string>({\n  wrapClass,\n  triggerLabel,\n  leadingIcon,\n  options,\n  value,\n  onSelect,\n  align,\n  footer,\n  className,\n  dataAdjust,\n  wrapProps,\n}: DropdownShellProps<T>) {\n  const [open, setOpen] = useState(false);\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const menuId = useId();\n\n  const close = useCallback((refocus = false) => {\n    setOpen(false);\n    if (refocus) triggerRef.current?.focus();\n  }, []);\n\n  // 바깥을 누르면 접는다(가이드라인: 「레이블, 컨테이너, 옵션 목록이 아닌 영역을 Click 하면 축소」).\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: PointerEvent) => {\n      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);\n    };\n    document.addEventListener('pointerdown', onPointerDown);\n    return () => document.removeEventListener('pointerdown', onPointerDown);\n  }, [open]);\n\n  /** 목록 안 n 번째 항목으로 초점을 옮긴다. */\n  const focusItem = (index: number) => {\n    const items = menuRef.current?.querySelectorAll<HTMLButtonElement>('.item-link');\n    if (!items?.length) return;\n    const i = (index + items.length) % items.length;\n    items[i]?.focus();\n  };\n\n  const onTriggerKeyDown = (e: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;\n    e.preventDefault();\n    if (open) {\n      // 펼쳐져 있으면 목록으로 들어간다.\n      focusItem(e.key === 'ArrowDown' ? 0 : options.length - 1);\n      return;\n    }\n    // 접혀 있으면 **선택값 자체가** 이전/다음으로 바뀐다(가이드라인 원문).\n    const at = options.findIndex((o) => o.value === value);\n    const next = e.key === 'ArrowDown' ? at + 1 : at - 1;\n    if (next >= 0 && next < options.length) onSelect(options[next].value);\n  };\n\n  const onMenuKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    const items = Array.from(\n      menuRef.current?.querySelectorAll<HTMLButtonElement>('.item-link') ?? [],\n    );\n    const at = items.indexOf(document.activeElement as HTMLButtonElement);\n    if (at < 0) return;\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      focusItem(at + 1);\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      focusItem(at - 1);\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      focusItem(0);\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      focusItem(items.length - 1);\n    }\n  };\n\n  // Esc 는 감싸개에서 한 번에 받는다 — 버튼에 있든 항목에 있든 접고 버튼으로 돌아간다.\n  const onWrapKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' && open) {\n      e.stopPropagation();\n      close(true);\n    }\n  };\n\n  // Tab 으로 껍데기 밖으로 나가면 접는다. relatedTarget 이 없으면(브라우저 UI 로 이동 등) 그대로 둔다.\n  const onBlurCapture = (e: ReactFocusEvent<HTMLDivElement>) => {\n    const next = e.relatedTarget as Node | null;\n    if (next && !e.currentTarget.contains(next)) setOpen(false);\n  };\n\n  const current = options.find((o) => o.value === value);\n\n  return (\n    <div\n      // 밖에서 온 props 를 먼저 편다 — 아래 넷은 부품이 도는 데 꼭 필요한 배선이라 덮이면 안 된다.\n      {...wrapProps}\n      ref={wrapRef}\n      className={cx('krds-drop-wrap', wrapClass, align && `drop-${align}`, className)}\n      data-adjust={dataAdjust}\n      onKeyDown={onWrapKeyDown}\n      onBlurCapture={onBlurCapture}\n    >\n      {/* 킷은 앞뒤로 아이콘 둘을 두는데 `Button` 은 하나만 받아 여기서는 마크업을 그대로 쓴다. */}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className=\"krds-btn small text drop-btn\"\n        aria-expanded={open}\n        aria-controls={menuId}\n        onClick={() => setOpen((v) => !v)}\n        onKeyDown={onTriggerKeyDown}\n      >\n        {leadingIcon && <i className={`svg-icon ico-${leadingIcon}`} aria-hidden=\"true\" />}\n        {triggerLabel}\n        {/* 구조 ③ 「선택값」 — 킷 샘플은 목록의 .active 로만 보여 준다. 스크린리더에도 알린다. */}\n        <span className=\"sr-only\">현재 {current?.label ?? ''}</span>\n        <i className=\"svg-icon ico-toggle\" aria-hidden=\"true\" />\n      </button>\n\n      {/* 킷에 여는 클래스가 없어 인라인 display 로 연다. 접힌 동안은 스크린리더도 읽지 않는다. */}\n      <div\n        ref={menuRef}\n        id={menuId}\n        className=\"drop-menu\"\n        style={open ? { display: 'block' } : undefined}\n        onKeyDown={onMenuKeyDown}\n      >\n        <div className=\"drop-in\">\n          <ul className=\"drop-list\">\n            {options.map((option) => (\n              <li key={option.value}>\n                <button\n                  type=\"button\"\n                  className={cx(\n                    'item-link',\n                    option.itemClass,\n                    option.value === value && 'active',\n                  )}\n                  data-adjust-scale={option.data}\n                  // 고른 값 표시. 목록이 role=listbox 가 아니므로 aria-selected 가 아니라 aria-current 다.\n                  aria-current={option.value === value ? 'true' : undefined}\n                  onClick={() => {\n                    onSelect(option.value);\n                    close(true);\n                  }}\n                >\n                  {option.label}\n                </button>\n              </li>\n            ))}\n          </ul>\n          {footer && (\n            <div className=\"drop-bottom\" onClick={() => close(true)}>\n              {footer}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────\n * 5. 부품\n * ──────────────────────────────────────────────────────────────────────── */\n\nexport type ResizeProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'onSelect'> & {\n  /** 버튼 글자. 기본 「화면 크기」. */\n  label?: string;\n  /** 초기화 버튼 글자. 기본 「초기화」. */\n  resetLabel?: string;\n  /** 드롭다운 정렬. */\n  align?: DropAlign;\n  /** 저장값이 없을 때의 배율. 기본 `md`(100%). */\n  defaultScale?: ResizeScale;\n  /** localStorage 기억. 기본 켬. */\n  persist?: boolean;\n  /** 배율이 바뀔 때. 서버에 남기고 싶을 때 쓴다. */\n  onScaleChange?: (scale: ResizeScale) => void;\n};\n\n/**\n * 화면 크기 조정 — 헤더 유틸리티 줄에 놓는다. 5단(90~150%)에서 고른다.\n * 저장값은 붙은 뒤에 읽는다 — 그 한 프레임의 번쩍임은 {@link ViewSettingsScript} 가 없앤다.\n */\nexport function Resize({\n  label = '화면 크기',\n  resetLabel = '초기화',\n  align,\n  defaultScale = DEFAULT_SCALE,\n  persist = true,\n  onScaleChange,\n  className,\n  ...rest\n}: ResizeProps) {\n  const [scale, setScale] = useState<ResizeScale>(defaultScale);\n\n  useEffect(() => {\n    const initial = (persist && readStoredScale()) || defaultScale;\n    setScale(initial);\n    applyScale(initial);\n  }, [persist, defaultScale]);\n\n  const select = useCallback(\n    (next: ResizeScale) => {\n      setScale(next);\n      applyScale(next);\n      if (persist) writeStored(SCALE_STORAGE_KEY, next);\n      onScaleChange?.(next);\n    },\n    [persist, onScaleChange],\n  );\n\n  return (\n    <DropdownShell\n      wrapClass=\"krds-resize\"\n      dataAdjust=\"scale\"\n      triggerLabel={label}\n      options={RESIZE_SCALES.map((s) => ({\n        value: s.value,\n        label: s.label,\n        // 킷이 이 클래스로 목록 앞 글자 미리보기 아이콘 크기(2.2~3.0rem)를 그린다.\n        itemClass: s.value,\n        data: s.value,\n      }))}\n      value={scale}\n      onSelect={select}\n      align={align}\n      footer={\n        // 킷 샘플 그대로 `krds-btn medium text` + ico-reset. 아이콘이 글자 앞에 온다.\n        // 목록을 닫는 일은 껍데기(`.drop-bottom` 의 클릭)가 맡는다.\n        <button\n          type=\"button\"\n          className=\"krds-btn medium text\"\n          data-adjust-scale={DEFAULT_SCALE}\n          onClick={() => select(DEFAULT_SCALE)}\n        >\n          <i className=\"svg-icon ico-reset\" aria-hidden=\"true\" /> {resetLabel}\n        </button>\n      }\n      className={className}\n      wrapProps={rest}\n    />\n  );\n}\n\nexport type ViewModeSwitchProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'onSelect'> & {\n  /** 버튼 글자. 기본 「화면 모드」. */\n  label?: string;\n  /** 드롭다운 정렬. */\n  align?: DropAlign;\n  /** 저장값이 없을 때의 모드. 기본 `light`. */\n  defaultMode?: ViewMode;\n  /** localStorage 기억. 기본 켬. */\n  persist?: boolean;\n  /**\n   * 「기기 설정 따름」을 옵션에 넣는다. **기본 끔** — 보충 층이 그 모드를 재정의하지 않아\n   * 킷 부품만 어두워지고 유틸리티로 그린 부분은 밝게 남는다.\n   */\n  systemOption?: boolean;\n  /** 모드가 바뀔 때. */\n  onModeChange?: (mode: ViewMode) => void;\n};\n\n/**\n * 선명한 화면 모드 전환 — 킷에 이름이 없는 우리 부품이다. 껍데기와 아이콘은 킷 것을 쓴다.\n *\n * **`<html data-krds-mode>` 를 붙이는 유일한 곳이다** — 이것 없이는 킷의 고대비 규칙이\n * 통째로 죽은 코드로 남는다.\n */\nexport function ViewModeSwitch({\n  label = '화면 모드',\n  align,\n  defaultMode = 'light',\n  persist = true,\n  systemOption = false,\n  onModeChange,\n  className,\n  ...rest\n}: ViewModeSwitchProps) {\n  const [mode, setMode] = useState<ViewMode>(defaultMode);\n\n  useEffect(() => {\n    const saved = (persist && readStoredViewMode()) || defaultMode;\n    // 목록에서 뺀 값이 저장돼 있으면 기본 화면으로 되돌린다 — 고를 수도 끌 수도 없는 상태를 막는다.\n    const initial: ViewMode = saved === 'theme' && !systemOption ? 'light' : saved;\n    setMode(initial);\n    applyViewMode(initial);\n  }, [persist, defaultMode, systemOption]);\n\n  const select = useCallback(\n    (next: ViewMode) => {\n      setMode(next);\n      applyViewMode(next);\n      if (persist) writeStored(VIEW_MODE_STORAGE_KEY, next);\n      onModeChange?.(next);\n    },\n    [persist, onModeChange],\n  );\n\n  const options = VIEW_MODES.filter((m) => systemOption || m.value !== 'theme');\n\n  return (\n    <DropdownShell\n      wrapClass={undefined}\n      triggerLabel={label}\n      leadingIcon=\"view-mode\"\n      options={options.map((m) => ({ value: m.value, label: m.label }))}\n      value={mode}\n      onSelect={select}\n      align={align}\n      className={className}\n      wrapProps={rest}\n    />\n  );\n}\n"],"mappings":";AAkLS,cAkKD,YAlKC;AAhLT;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP,SAAS,UAAU;AA+BZ,MAAM,gBAIR;AAAA,EACH,EAAE,OAAO,MAAM,OAAO,gBAAM,SAAS,GAAG;AAAA,EACxC,EAAE,OAAO,MAAM,OAAO,gBAAM,SAAS,IAAI;AAAA,EACzC,EAAE,OAAO,MAAM,OAAO,6BAAS,SAAS,IAAI;AAAA,EAC5C,EAAE,OAAO,OAAO,OAAO,gBAAM,SAAS,IAAI;AAAA,EAC1C,EAAE,OAAO,QAAQ,OAAO,6BAAS,SAAS,IAAI;AAChD;AAGA,MAAM,yBAAyB;AAG/B,MAAM,gBAA6B;AAEnC,SAAS,UAAU,OAAoB;AACrC,SAAO,cAAc,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,KAAK,cAAc,CAAC;AACxE;AASO,SAAS,aAAa,OAA4B;AACvD,SAAO,GAAI,yBAAyB,UAAU,KAAK,EAAE,UAAW,GAAG;AACrE;AAMO,SAAS,WAAW,OAA0B;AACnD,QAAM,OAAO,SAAS;AACtB,OAAK,MAAM,WAAW,aAAa,KAAK;AACxC,OAAK,QAAQ,YAAY;AACzB,WAAS,MAAM,UAAU,OAAO,sBAAsB,UAAU,KAAK,EAAE,UAAU,GAAG;AACtF;AAUO,MAAM,aAAgE;AAAA,EAC3E,EAAE,OAAO,SAAS,OAAO,4BAAQ;AAAA,EACjC,EAAE,OAAO,iBAAiB,OAAO,kCAAS;AAAA,EAC1C,EAAE,OAAO,SAAS,OAAO,yCAAW;AACtC;AAGO,SAAS,cAAc,MAAsB;AAClD,QAAM,OAAO,SAAS;AACtB,MAAI,SAAS,QAAS,QAAO,KAAK,QAAQ;AAAA,MACrC,MAAK,QAAQ,WAAW;AAC/B;AAOO,MAAM,oBAAoB;AAE1B,MAAM,wBAAwB;AAGrC,SAAS,WAA6B,KAAa,SAAqC;AACtF,MAAI;AACF,UAAM,IAAI,OAAO,aAAa,QAAQ,GAAG;AACzC,WAAO,KAAM,QAAkC,SAAS,CAAC,IAAK,IAAU;AAAA,EAC1E,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,YAAY,KAAa,OAAqB;AACrD,MAAI;AACF,WAAO,aAAa,QAAQ,KAAK,KAAK;AAAA,EACxC,QAAQ;AAAA,EAER;AACF;AAGO,SAAS,kBAAsC;AACpD,SAAO;AAAA,IACL;AAAA,IACA,cAAc,IAAI,CAAC,MAAM,EAAE,KAAK;AAAA,EAClC;AACF;AAGO,SAAS,qBAAsC;AACpD,SAAO;AAAA,IACL;AAAA,IACA,WAAW,IAAI,CAAC,MAAM,EAAE,KAAK;AAAA,EAC/B;AACF;AAGA,MAAM,eAAe,MAAc;AACjC,QAAM,MAA8B,CAAC;AACrC,aAAW,KAAK,cAAe,KAAI,EAAE,KAAK,IAAI,aAAa,EAAE,KAAK;AAClE,SACE,oDACK,KAAK,UAAU,GAAG,CAAC,2BACE,KAAK,UAAU,iBAAiB,CAAC,yFAE7B,KAAK,UAAU,qBAAqB,CAAC;AAIvE,GAAG;AAYI,SAAS,mBAAmB,EAAE,MAAM,GAAuB;AAChE,SAAO,oBAAC,YAAO,OAAc,yBAAyB,EAAE,QAAQ,YAAY,GAAG;AACjF;AA6CA,SAAS,cAAgC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,SAAS,MAAM;AAErB,QAAM,QAAQ,YAAY,CAAC,UAAU,UAAU;AAC7C,YAAQ,KAAK;AACb,QAAI,QAAS,YAAW,SAAS,MAAM;AAAA,EACzC,GAAG,CAAC,CAAC;AAGL,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,gBAAgB,CAAC,MAAoB;AACzC,UAAI,CAAC,QAAQ,SAAS,SAAS,EAAE,MAAc,EAAG,SAAQ,KAAK;AAAA,IACjE;AACA,aAAS,iBAAiB,eAAe,aAAa;AACtD,WAAO,MAAM,SAAS,oBAAoB,eAAe,aAAa;AAAA,EACxE,GAAG,CAAC,IAAI,CAAC;AAGT,QAAM,YAAY,CAAC,UAAkB;AACnC,UAAM,QAAQ,QAAQ,SAAS,iBAAoC,YAAY;AAC/E,QAAI,CAAC,OAAO,OAAQ;AACpB,UAAM,KAAK,QAAQ,MAAM,UAAU,MAAM;AACzC,UAAM,CAAC,GAAG,MAAM;AAAA,EAClB;AAEA,QAAM,mBAAmB,CAAC,MAA6C;AACrE,QAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,UAAW;AAClD,MAAE,eAAe;AACjB,QAAI,MAAM;AAER,gBAAU,EAAE,QAAQ,cAAc,IAAI,QAAQ,SAAS,CAAC;AACxD;AAAA,IACF;AAEA,UAAM,KAAK,QAAQ,UAAU,CAAC,MAAM,EAAE,UAAU,KAAK;AACrD,UAAM,OAAO,EAAE,QAAQ,cAAc,KAAK,IAAI,KAAK;AACnD,QAAI,QAAQ,KAAK,OAAO,QAAQ,OAAQ,UAAS,QAAQ,IAAI,EAAE,KAAK;AAAA,EACtE;AAEA,QAAM,gBAAgB,CAAC,MAA0C;AAC/D,UAAM,QAAQ,MAAM;AAAA,MAClB,QAAQ,SAAS,iBAAoC,YAAY,KAAK,CAAC;AAAA,IACzE;AACA,UAAM,KAAK,MAAM,QAAQ,SAAS,aAAkC;AACpE,QAAI,KAAK,EAAG;AACZ,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE,eAAe;AACjB,gBAAU,KAAK,CAAC;AAAA,IAClB,WAAW,EAAE,QAAQ,WAAW;AAC9B,QAAE,eAAe;AACjB,gBAAU,KAAK,CAAC;AAAA,IAClB,WAAW,EAAE,QAAQ,QAAQ;AAC3B,QAAE,eAAe;AACjB,gBAAU,CAAC;AAAA,IACb,WAAW,EAAE,QAAQ,OAAO;AAC1B,QAAE,eAAe;AACjB,gBAAU,MAAM,SAAS,CAAC;AAAA,IAC5B;AAAA,EACF;AAGA,QAAM,gBAAgB,CAAC,MAA0C;AAC/D,QAAI,EAAE,QAAQ,YAAY,MAAM;AAC9B,QAAE,gBAAgB;AAClB,YAAM,IAAI;AAAA,IACZ;AAAA,EACF;AAGA,QAAM,gBAAgB,CAAC,MAAuC;AAC5D,UAAM,OAAO,EAAE;AACf,QAAI,QAAQ,CAAC,EAAE,cAAc,SAAS,IAAI,EAAG,SAAQ,KAAK;AAAA,EAC5D;AAEA,QAAM,UAAU,QAAQ,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MAEE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,GAAG,kBAAkB,WAAW,SAAS,QAAQ,KAAK,IAAI,SAAS;AAAA,MAC9E,eAAa;AAAA,MACb,WAAW;AAAA,MACX;AAAA,MAGA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAU;AAAA,YACV,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,YAChC,WAAW;AAAA,YAEV;AAAA,6BAAe,oBAAC,OAAE,WAAW,gBAAgB,WAAW,IAAI,eAAY,QAAO;AAAA,cAC/E;AAAA,cAED,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,gBAAI,SAAS,SAAS;AAAA,iBAAG;AAAA,cACnD,oBAAC,OAAE,WAAU,uBAAsB,eAAY,QAAO;AAAA;AAAA;AAAA,QACxD;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,WAAU;AAAA,YACV,OAAO,OAAO,EAAE,SAAS,QAAQ,IAAI;AAAA,YACrC,WAAW;AAAA,YAEX,+BAAC,SAAI,WAAU,WACb;AAAA,kCAAC,QAAG,WAAU,aACX,kBAAQ,IAAI,CAAC,WACZ,oBAAC,QACC;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAW;AAAA,oBACT;AAAA,oBACA,OAAO;AAAA,oBACP,OAAO,UAAU,SAAS;AAAA,kBAC5B;AAAA,kBACA,qBAAmB,OAAO;AAAA,kBAE1B,gBAAc,OAAO,UAAU,QAAQ,SAAS;AAAA,kBAChD,SAAS,MAAM;AACb,6BAAS,OAAO,KAAK;AACrB,0BAAM,IAAI;AAAA,kBACZ;AAAA,kBAEC,iBAAO;AAAA;AAAA,cACV,KAjBO,OAAO,KAkBhB,CACD,GACH;AAAA,cACC,UACC,oBAAC,SAAI,WAAU,eAAc,SAAS,MAAM,MAAM,IAAI,GACnD,kBACH;AAAA,eAEJ;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAyBO,SAAS,OAAO;AAAA,EACrB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,YAAY;AAE5D,YAAU,MAAM;AACd,UAAM,UAAW,WAAW,gBAAgB,KAAM;AAClD,aAAS,OAAO;AAChB,eAAW,OAAO;AAAA,EACpB,GAAG,CAAC,SAAS,YAAY,CAAC;AAE1B,QAAM,SAAS;AAAA,IACb,CAAC,SAAsB;AACrB,eAAS,IAAI;AACb,iBAAW,IAAI;AACf,UAAI,QAAS,aAAY,mBAAmB,IAAI;AAChD,sBAAgB,IAAI;AAAA,IACtB;AAAA,IACA,CAAC,SAAS,aAAa;AAAA,EACzB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,YAAW;AAAA,MACX,cAAc;AAAA,MACd,SAAS,cAAc,IAAI,CAAC,OAAO;AAAA,QACjC,OAAO,EAAE;AAAA,QACT,OAAO,EAAE;AAAA;AAAA,QAET,WAAW,EAAE;AAAA,QACb,MAAM,EAAE;AAAA,MACV,EAAE;AAAA,MACF,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA;AAAA;AAAA;AAAA,QAGE;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,qBAAmB;AAAA,YACnB,SAAS,MAAM,OAAO,aAAa;AAAA,YAEnC;AAAA,kCAAC,OAAE,WAAU,sBAAqB,eAAY,QAAO;AAAA,cAAE;AAAA,cAAE;AAAA;AAAA;AAAA,QAC3D;AAAA;AAAA,MAEF;AAAA,MACA,WAAW;AAAA;AAAA,EACb;AAEJ;AA0BO,SAAS,eAAe;AAAA,EAC7B,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,WAAW;AAEtD,YAAU,MAAM;AACd,UAAM,QAAS,WAAW,mBAAmB,KAAM;AAEnD,UAAM,UAAoB,UAAU,WAAW,CAAC,eAAe,UAAU;AACzE,YAAQ,OAAO;AACf,kBAAc,OAAO;AAAA,EACvB,GAAG,CAAC,SAAS,aAAa,YAAY,CAAC;AAEvC,QAAM,SAAS;AAAA,IACb,CAAC,SAAmB;AAClB,cAAQ,IAAI;AACZ,oBAAc,IAAI;AAClB,UAAI,QAAS,aAAY,uBAAuB,IAAI;AACpD,qBAAe,IAAI;AAAA,IACrB;AAAA,IACA,CAAC,SAAS,YAAY;AAAA,EACxB;AAEA,QAAM,UAAU,WAAW,OAAO,CAAC,MAAM,gBAAgB,EAAE,UAAU,OAAO;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,cAAc;AAAA,MACd,aAAY;AAAA,MACZ,SAAS,QAAQ,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,OAAO,EAAE,MAAM,EAAE;AAAA,MAChE,OAAO;AAAA,MACP,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA;AAAA,EACb;AAEJ;","names":[]}

package/dist/scroll-area/index.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+/**
+ * 스크롤 영역 — KRDS 에 없다. 킷 스크롤 막대 모양을 유틸리티로 옮긴 보충 부품이다.
+ *
+ * 넘치는 내용을 가둬 굴린다. **초점을 받아 키보드로도 굴러간다** — 그것이 이 부품의 존재 이유다.
+ * `role="region"` 이라 이름(`label` 또는 `labelledBy`)이 필수이고, 랜드마크가 목록에 쌓이므로
+ * 이름을 붙일 만큼 뜻이 있는 칸에만 쓴다. 단순히 넘치는 표는 `ui/table` 의 감싸개다.
+ * **높이(폭)를 제한하지 않으면 아무것도 스크롤되지 않는다** — `className="max-h-80"` 처럼 준다.
+ *
+ * @example
+ * <ScrollArea label="약관 전문" className="max-h-80 rounded-lg border border-solid border-line p-4">
+ *   {terms}
+ * </ScrollArea>
+ *
+ * 자세히: docs/krds/09-부품-노트.md#스크롤영역
+ */
+/** 굴릴 방향. 기본은 세로. */
+export type ScrollAreaAxis = 'vertical' | 'horizontal' | 'both';
+type BaseProps = {
+    /** 굴릴 방향. 기본 세로. */
+    axis?: ScrollAreaAxis;
+    /** 끝에 닿았을 때 바깥까지 따라 굴러가는 것을 막는다. 모달·서랍처럼 겹쳐 뜨는 칸에 켠다. */
+    containScroll?: boolean;
+    /** 칸에 붙일 클래스. **여기서 높이(폭)를 제한해야 스크롤이 생긴다.** */
+    className?: string;
+    /** 굴릴 내용. */
+    children?: ReactNode;
+};
+/** 이름은 반드시 하나 있어야 한다 — 둘 다 주지도 둘 다 빼지도 못하게 타입으로 막는다. */
+type NameProps = {
+    label: string;
+    labelledBy?: never;
+} | {
+    label?: never;
+    labelledBy: string;
+};
+export type ScrollAreaProps = Omit<ComponentPropsWithRef<'div'>, 'aria-label' | 'aria-labelledby' | 'children'> & BaseProps & NameProps;
+export declare function ScrollArea(props: ScrollAreaProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/scroll-area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/scroll-area/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D;;;;;;;;;;;;;;GAcG;AAEH,qBAAqB;AACrB,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEhE,KAAK,SAAS,GAAG;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wDAAwD;AACxD,KAAK,SAAS,GACV;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAE,GACrC;IAAE,KAAK,CAAC,EAAE,KAAK,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,qBAAqB,CAAC,KAAK,CAAC,EAC5B,YAAY,GAAG,iBAAiB,GAAG,UAAU,CAC9C,GACC,SAAS,GACT,SAAS,CAAC;AAmBZ,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAiChD"}

package/dist/scroll-area/index.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { cx } from "../lib/krds.js";
+const OVERFLOW = {
+  vertical: "overflow-y-auto overflow-x-hidden",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto"
+};
+const SCROLLBAR = cx(
+  // 표준 속성 — 파이어폭스와 크롬 121+ 가 본다.
+  "[scrollbar-width:thin]",
+  "[scrollbar-color:var(--color-line)_var(--color-surface-subtler)]",
+  // 웹킷 의사요소 — 킷과 같은 8px 막대.
+  "[&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2",
+  "[&::-webkit-scrollbar-track]:bg-surface-subtler",
+  "[&::-webkit-scrollbar-thumb]:rounded-lg [&::-webkit-scrollbar-thumb]:bg-line"
+);
+function ScrollArea(props) {
+  const {
+    axis = "vertical",
+    containScroll,
+    label,
+    labelledBy,
+    className,
+    children,
+    // 기본 0. 스크롤 칸은 초점을 받아야 ↑↓·PageUp/PageDown·Space 로 굴러간다(브라우저가 처리한다).
+    tabIndex = 0,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": label,
+      "aria-labelledby": labelledBy,
+      tabIndex,
+      className: cx(
+        OVERFLOW[axis],
+        // flex/grid 자식일 때 내용만큼 늘어나 스크롤이 안 생기는 것을 막는다.
+        "min-h-0 min-w-0",
+        containScroll && "overscroll-contain",
+        SCROLLBAR,
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  ScrollArea
+};
+//# sourceMappingURL=index.js.map