react-schedule-picker 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 innerbloo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,268 @@
+# react-schedule-picker
+
+[![npm version](https://img.shields.io/npm/v/react-schedule-picker.svg)](https://www.npmjs.com/package/react-schedule-picker)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/react-schedule-picker)](https://bundlephobia.com/package/react-schedule-picker)
+[![types](https://img.shields.io/npm/types/react-schedule-picker.svg)](https://www.npmjs.com/package/react-schedule-picker)
+[![license](https://img.shields.io/npm/l/react-schedule-picker.svg)](./LICENSE)
+
+Drag-to-select weekly schedule picker for React. Zero dependencies, fully typed, locale-aware.
+
+**[Live Demo →](https://react-schedule-picker.vercel.app/)**
+
+```tsx
+<SchedulePicker value={schedule} onChange={setSchedule} />
+```
+
+## Features
+
+- **Drag selection** — click cells, drag rectangles, or drag day/hour headers to select rows/columns
+- **Touch support** — full mobile drag with haptic feedback
+- **Locale-aware** — built-in `en`, `en-US`, `ko`, `ja`, `zh-CN`, `zh-TW` (week start, hour format, weekend colors, button text)
+- **Serializable** — convert to ranges or iCalendar-style payloads for APIs and databases
+- **Themable** — CSS custom properties, no styling library required
+- **Zero runtime dependencies** — only React as a peer dep
+- **Fully typed** — written in TypeScript with strict types
+
+## Installation
+
+```bash
+npm install react-schedule-picker
+# or
+pnpm add react-schedule-picker
+# or
+yarn add react-schedule-picker
+# or
+bun add react-schedule-picker
+```
+
+Import the stylesheet once at your app root:
+
+```tsx
+import "react-schedule-picker/styles.css";
+```
+
+## Quick Start
+
+```tsx
+import { useState } from "react";
+import { SchedulePicker, type Schedule } from "react-schedule-picker";
+import "react-schedule-picker/styles.css";
+
+export function Availability() {
+  const [schedule, setSchedule] = useState<Schedule>({});
+
+  return <SchedulePicker value={schedule} onChange={setSchedule} />;
+}
+```
+
+The `Schedule` shape is `Record<string, number[]>` — day key (`"mon"` … `"sun"`) mapped to an array of selected hours (0–23).
+
+## Common Examples
+
+### Localized to Korean
+
+```tsx
+<SchedulePicker locale="ko" value={schedule} onChange={setSchedule} />
+```
+
+### Business hours only
+
+```tsx
+<SchedulePicker
+  value={schedule}
+  onChange={setSchedule}
+  minHour={9}
+  maxHour={18}
+  visibleDays={["mon", "tue", "wed", "thu", "fri"]}
+/>
+```
+
+### Block out specific slots
+
+```tsx
+const lunchBreak: Schedule = {
+  mon: [12, 13], tue: [12, 13], wed: [12, 13], thu: [12, 13], fri: [12, 13],
+};
+
+<SchedulePicker
+  value={schedule}
+  onChange={setSchedule}
+  disabledSlots={lunchBreak}
+/>
+```
+
+### Read-only display
+
+```tsx
+<SchedulePicker value={schedule} onChange={setSchedule} readOnly />
+```
+
+### Submit-style — fire only when the user finishes dragging
+
+```tsx
+<SchedulePicker
+  value={schedule}
+  onChange={setSchedule}
+  onSelectEnd={(final) => saveToServer(final)}
+/>
+```
+
+## Props
+
+### Core
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Schedule` | required | Controlled schedule value |
+| `onChange` | `(s: Schedule) => void` | required | Fires on every change, including during drag |
+| `onSelectEnd` | `(s: Schedule) => void` | — | Fires once when a drag completes |
+
+### Localization
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `locale` | `"en" \| "en-US" \| "ko" \| "ja" \| "zh-CN" \| "zh-TW"` | `"en"` | Sets week start, hour format, weekend colors, and built-in text |
+| `weekStartsOn` | `"mon" \| "sun" \| "sat"` | locale default | Override the first day of the week |
+| `weekendHighlight` | `Record<string, string> \| "none"` | locale default | Weekend text colors. `"none"` disables highlighting |
+| `dayLabels` | `Record<string, string>` | locale default | Custom day header labels |
+| `messages` | `Partial<Messages>` | locale default | Override individual built-in messages |
+
+### Display
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dayAxis` | `"x" \| "y"` | `"x"` | `"x"`: days as columns. `"y"`: days as rows |
+| `visibleDays` | `string[]` | locale default | Which days to show, and their order |
+| `minHour` | `number` | `0` | Earliest hour to display |
+| `maxHour` | `number` | `23` | Latest hour to display |
+| `compactHourLabels` | `boolean` | `false` | Show only every 3rd hour label |
+| `formatHour` | `(h: number) => string` | locale default | Custom hour label formatter |
+
+### State
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `readOnly` | `boolean` | `false` | Display-only mode (no interactions) |
+| `disabled` | `boolean` | `false` | Fully disabled state |
+| `disabledSlots` | `Schedule` | — | Slots that cannot be selected |
+
+### Toolbar
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `presets` | `Preset[]` | 4 built-in | Preset buttons. Empty array hides the toolbar entries |
+| `hideToolbar` | `boolean` | `false` | Hide the toolbar entirely |
+
+### Styling
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | — | Extra class on the outermost container |
+
+## Localization Details
+
+Each `locale` preset bundles week start, hour format, weekend colors, and translated text in one prop:
+
+| `locale` | Week start | Hour format | Sat / Sun | `clear` |
+|----------|-----------|-------------|-----------|---------|
+| `"en"` | Mon | `14` | none | Clear |
+| `"en-US"` | Sun | `2PM` | none | Clear |
+| `"ko"` | Mon | `14` | blue / red | 초기화 |
+| `"ja"` | Sun | `14` | blue / red | クリア |
+| `"zh-CN"` | Mon | `14` | red / red | 清除 |
+| `"zh-TW"` | Mon | `14` | red / red | 清除 |
+
+Preset button labels (Weekday Day / Weekday Night / etc.) are translated per locale as well.
+
+### Override priority
+
+```
+explicit prop (dayLabels / formatHour / visibleDays / presets)
+   > messages / weekStartsOn / weekendHighlight props
+   > LOCALE_PRESETS[locale]
+   > "en" fallback
+```
+
+## Serialization
+
+The internal `Schedule` shape is optimized for rendering. For API transport and storage, convert it with one of the bundled helpers.
+
+### `toRanges(schedule, options?)`
+
+Compress consecutive hours into `[start, end)` ranges, keyed by ISO 8601 day-of-week (1=Mon … 7=Sun).
+
+```ts
+import { toRanges } from "react-schedule-picker";
+
+toRanges({ mon: [9, 10, 11, 14, 15] }, { timezone: "Asia/Seoul" });
+// {
+//   version: 1,
+//   timezone: "Asia/Seoul",
+//   ranges: [
+//     { day: 1, start: "09:00", end: "12:00" },
+//     { day: 1, start: "14:00", end: "16:00" },
+//   ],
+// }
+```
+
+### `fromRanges(payload)`
+
+Inverse of `toRanges`. Accepts only hour-aligned input.
+
+```ts
+import { fromRanges } from "react-schedule-picker";
+
+fromRanges({
+  version: 1,
+  ranges: [{ day: 1, start: "09:00", end: "12:00" }],
+});
+// { mon: [9, 10, 11] }
+```
+
+### `toISO(schedule, options?)`
+
+Same data as `toRanges`, but with iCalendar-style field names (`startTime` / `endTime`).
+
+```ts
+import { toISO } from "react-schedule-picker";
+
+toISO({ mon: [9, 10, 11] }, { timezone: "Asia/Seoul" });
+// {
+//   version: 1,
+//   timezone: "Asia/Seoul",
+//   availability: [
+//     { day: 1, startTime: "09:00", endTime: "12:00" },
+//   ],
+// }
+```
+
+### Notes
+
+- 1-hour granularity only. Sub-hour (15/30 min) is not supported.
+- Ranges use half-open intervals: `end` is exclusive. `end: "24:00"` means up to midnight.
+- Day keys in the raw `Schedule` are strings (`"mon"`…`"sun"`). ISO numeric keys appear only in serialized output.
+
+## Theming
+
+All colors and sizes are CSS custom properties on `.rsp-container`. Override what you need:
+
+```css
+.rsp-container {
+  --rsp-color-selected: #34d399;
+  --rsp-color-border: #d4d4d8;
+  --rsp-cell-size: 40px;
+  --rsp-border-radius: 12px;
+}
+```
+
+See [`src/variables.css`](./src/variables.css) for the full list.
+
+## Requirements
+
+- React 18+
+- Modern browsers (last 2 versions of Chrome, Safari, Firefox, Edge)
+- TypeScript 4.7+ (optional)
+
+## License
+
+[MIT](./LICENSE) © [innerbloo](https://github.com/innerbloo)

package/dist/index.css

@@ -0,0 +1,253 @@
+/* src/variables.css */
+:root {
+  --rsp-color-primary: #2d6af6;
+  --rsp-color-primary-light: #ecf1ff;
+  --rsp-color-selected: #bbcaff;
+  --rsp-color-selected-readonly: #d4d4d8;
+  --rsp-color-border: #e4e4e7;
+  --rsp-color-bg: #ffffff;
+  --rsp-color-bg-header: #f4f4f5;
+  --rsp-color-bg-label: #fafafa;
+  --rsp-color-bg-hover: #efeff1;
+  --rsp-color-text: #2c2c31;
+  --rsp-color-text-sub: #71717a;
+  --rsp-color-text-header: #1c1c20;
+  --rsp-color-saturday: var(--rsp-color-primary);
+  --rsp-color-sunday: #f04646;
+  --rsp-cell-size: 36px;
+  --rsp-day-col-width: 48px;
+  --rsp-border-radius: 8px;
+  --rsp-font-family: inherit;
+  --rsp-font-size-sm: 12px;
+  --rsp-font-size-md: 14px;
+  --rsp-preset-bg: var(--rsp-color-bg);
+  --rsp-preset-bg-hover: var(--rsp-color-bg-hover);
+  --rsp-preset-border: var(--rsp-color-border);
+  --rsp-preset-text: var(--rsp-color-text);
+  --rsp-preset-radius: 9999px;
+}
+
+/* src/SchedulePicker.css */
+.rsp-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: var(--rsp-font-family);
+}
+.rsp-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.rsp-toolbar-clear {
+  margin-left: auto;
+}
+.rsp-preset-button {
+  font-size: var(--rsp-font-size-md);
+  line-height: 1.6;
+  padding: 2px 8px;
+  border: 1px solid var(--rsp-preset-border);
+  border-radius: var(--rsp-preset-radius);
+  background-color: var(--rsp-preset-bg);
+  color: var(--rsp-preset-text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.rsp-preset-button:hover {
+  background-color: var(--rsp-preset-bg-hover);
+}
+.rsp-table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.rsp-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid var(--rsp-color-border);
+  border-radius: var(--rsp-border-radius);
+  width: 100%;
+  overflow: hidden;
+  background-color: var(--rsp-color-bg);
+}
+.rsp-day-col {
+  width: var(--rsp-day-col-width);
+}
+.rsp-header-row {
+  background-color: var(--rsp-color-bg-header);
+}
+.rsp-corner-cell {
+  background-color: var(--rsp-color-bg-header);
+}
+.rsp-corner-cell--clickable {
+  cursor: pointer;
+}
+.rsp-corner-cell--clickable:hover {
+  background-color: var(--rsp-color-bg-hover);
+}
+.rsp-header-cell {
+  font-size: var(--rsp-font-size-sm);
+  line-height: 1.6;
+  font-weight: 400;
+  color: var(--rsp-color-text-header);
+  text-align: center;
+  padding: 6px 0;
+  cursor: pointer;
+  touch-action: none;
+}
+.rsp-header-cell span {
+  display: inline-block;
+}
+.rsp-header-cell:hover {
+  background-color: var(--rsp-color-bg-hover);
+}
+.rsp-day-row {
+}
+.rsp-day-label {
+  font-size: var(--rsp-font-size-sm);
+  line-height: 1;
+  font-weight: 400;
+  color: var(--rsp-color-text-header);
+  text-align: center;
+  height: var(--rsp-cell-size);
+  padding: 0;
+  background-color: var(--rsp-color-bg-label);
+  border-top: 1px solid var(--rsp-color-border);
+  cursor: pointer;
+  touch-action: none;
+}
+.rsp-day-label:hover {
+  background-color: var(--rsp-color-bg-hover);
+}
+.rsp-cell {
+  padding: 0;
+  width: var(--rsp-cell-size);
+  height: var(--rsp-cell-size);
+  border-left: 1px solid var(--rsp-color-border);
+  border-top: 1px solid var(--rsp-color-border);
+  cursor: pointer;
+  touch-action: none;
+  -webkit-touch-callout: none;
+}
+.rsp-cell:hover {
+  background-color: var(--rsp-color-bg-hover);
+}
+.rsp-cell--highlighted {
+  background-color: var(--rsp-color-bg-hover);
+}
+.rsp-cell--selected {
+  background-color: var(--rsp-color-selected);
+}
+.rsp-cell--selected:hover {
+  background-color: var(--rsp-color-selected);
+  filter: brightness(1.1);
+}
+.rsp-cell--disabled {
+  background-color: var(--rsp-color-bg-header);
+  cursor: not-allowed;
+  background-image:
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 3px,
+      var(--rsp-color-border) 3px,
+      var(--rsp-color-border) 4px);
+}
+.rsp-cell--disabled:hover {
+  background-color: var(--rsp-color-bg-header);
+  background-image:
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 3px,
+      var(--rsp-color-border) 3px,
+      var(--rsp-color-border) 4px);
+}
+.rsp-cell--readonly {
+  cursor: default;
+}
+.rsp-cell--readonly:hover {
+  background-color: transparent;
+}
+.rsp-cell--readonly.rsp-cell--selected {
+  background-color: var(--rsp-color-selected-readonly);
+}
+.rsp-cell--readonly.rsp-cell--selected:hover {
+  background-color: var(--rsp-color-selected-readonly);
+}
+.rsp-day-label--readonly,
+.rsp-header-cell--readonly {
+  cursor: default;
+}
+.rsp-day-label--readonly:hover {
+  background-color: var(--rsp-color-bg-label);
+}
+.rsp-header-cell--readonly:hover {
+  background-color: transparent;
+}
+.rsp-container--disabled {
+  pointer-events: none;
+}
+.rsp-container--disabled .rsp-cell {
+  background-color: var(--rsp-color-bg-header);
+}
+.rsp-container--disabled .rsp-cell--selected {
+  background-color: var(--rsp-color-selected-readonly);
+}
+.rsp-container--disabled .rsp-header-cell,
+.rsp-container--disabled .rsp-day-label,
+.rsp-container--disabled .rsp-hour-label {
+  color: var(--rsp-color-text-sub);
+}
+.rsp-container--disabled .rsp-preset-button {
+  color: var(--rsp-color-text-sub);
+  border-color: var(--rsp-color-border);
+}
+.rsp-hour-col {
+  width: var(--rsp-day-col-width);
+}
+.rsp-hour-label {
+  font-size: var(--rsp-font-size-sm);
+  line-height: 1;
+  font-weight: 400;
+  color: var(--rsp-color-text-header);
+  text-align: center;
+  height: var(--rsp-cell-size);
+  padding: 0;
+  background-color: var(--rsp-color-bg-label);
+  border-top: 1px solid var(--rsp-color-border);
+  cursor: pointer;
+  touch-action: none;
+}
+.rsp-hour-label:hover {
+  background-color: var(--rsp-color-bg-hover);
+}
+.rsp-hour-label--readonly {
+  cursor: default;
+}
+.rsp-hour-label--readonly:hover {
+  background-color: var(--rsp-color-bg-label);
+}
+.rsp-header-cell--day {
+  text-align: center;
+}
+.rsp-header-cell--day span {
+  transform: none;
+}
+@media (max-width: 639px) {
+  .rsp-day-label {
+    width: 36px;
+    font-size: var(--rsp-font-size-sm);
+    padding: 6px 0;
+  }
+  .rsp-day-col {
+    width: 36px;
+  }
+  .rsp-cell {
+    width: 30px;
+    height: 30px;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/variables.css","../src/SchedulePicker.css"],"sourcesContent":[":root {\n  /* 색상 */\n  --rsp-color-primary: #2d6af6;\n  --rsp-color-primary-light: #ecf1ff;\n  --rsp-color-selected: #bbcaff;\n  --rsp-color-selected-readonly: #d4d4d8;\n  --rsp-color-border: #e4e4e7;\n  --rsp-color-bg: #ffffff;\n  --rsp-color-bg-header: #f4f4f5;\n  --rsp-color-bg-label: #fafafa;\n  --rsp-color-bg-hover: #efeff1;\n  --rsp-color-text: #2c2c31;\n  --rsp-color-text-sub: #71717a;\n  --rsp-color-text-header: #1c1c20;\n  --rsp-color-saturday: var(--rsp-color-primary);\n  --rsp-color-sunday: #f04646;\n\n  /* 크기 */\n  --rsp-cell-size: 36px;\n  --rsp-day-col-width: 48px;\n  --rsp-border-radius: 8px;\n\n  /* 폰트 */\n  --rsp-font-family: inherit;\n  --rsp-font-size-sm: 12px;\n  --rsp-font-size-md: 14px;\n\n  /* 프리셋 버튼 */\n  --rsp-preset-bg: var(--rsp-color-bg);\n  --rsp-preset-bg-hover: var(--rsp-color-bg-hover);\n  --rsp-preset-border: var(--rsp-color-border);\n  --rsp-preset-text: var(--rsp-color-text);\n  --rsp-preset-radius: 9999px;\n}\n\n","@import \"./variables.css\";\n\n/* 컨테이너 */\n.rsp-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  font-family: var(--rsp-font-family);\n}\n\n/* 프리셋 툴바 */\n.rsp-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.rsp-toolbar-clear {\n  margin-left: auto;\n}\n\n.rsp-preset-button {\n  font-size: var(--rsp-font-size-md);\n  line-height: 1.6;\n  padding: 2px 8px;\n  border: 1px solid var(--rsp-preset-border);\n  border-radius: var(--rsp-preset-radius);\n  background-color: var(--rsp-preset-bg);\n  color: var(--rsp-preset-text);\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.rsp-preset-button:hover {\n  background-color: var(--rsp-preset-bg-hover);\n}\n\n/* 테이블 래퍼 — 가로 스크롤 */\n.rsp-table-wrapper {\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n/* 테이블 */\n.rsp-table {\n  border-collapse: separate;\n  border-spacing: 0;\n  border: 1px solid var(--rsp-color-border);\n  border-radius: var(--rsp-border-radius);\n  width: 100%;\n  overflow: hidden;\n  background-color: var(--rsp-color-bg);\n}\n\n/* 요일 라벨 컬럼 폭 */\n.rsp-day-col {\n  width: var(--rsp-day-col-width);\n}\n\n/* 헤더 행 */\n.rsp-header-row {\n  background-color: var(--rsp-color-bg-header);\n}\n\n/* 좌상단 코너 셀 */\n.rsp-corner-cell {\n  background-color: var(--rsp-color-bg-header);\n}\n\n.rsp-corner-cell--clickable {\n  cursor: pointer;\n}\n\n.rsp-corner-cell--clickable:hover {\n  background-color: var(--rsp-color-bg-hover);\n}\n\n/* 시간 헤더 셀 */\n.rsp-header-cell {\n  font-size: var(--rsp-font-size-sm);\n  line-height: 1.6;\n  font-weight: 400;\n  color: var(--rsp-color-text-header);\n  text-align: center;\n  padding: 6px 0;\n  cursor: pointer;\n  touch-action: none;\n}\n\n.rsp-header-cell span {\n  display: inline-block;\n}\n\n.rsp-header-cell:hover {\n  background-color: var(--rsp-color-bg-hover);\n}\n\n/* 요일 행 */\n.rsp-day-row {\n}\n\n/* 요일 라벨 셀 */\n.rsp-day-label {\n  font-size: var(--rsp-font-size-sm);\n  line-height: 1;\n  font-weight: 400;\n  color: var(--rsp-color-text-header);\n  text-align: center;\n  height: var(--rsp-cell-size);\n  padding: 0;\n  background-color: var(--rsp-color-bg-label);\n  border-top: 1px solid var(--rsp-color-border);\n  cursor: pointer;\n  touch-action: none;\n}\n\n.rsp-day-label:hover {\n  background-color: var(--rsp-color-bg-hover);\n}\n\n/* 주말 강조 색상은 컴포넌트가 weekendHighlight prop/locale 기반 인라인 style로 주입합니다.\n   .rsp-day-label--sat, .rsp-day-label--sun 클래스명은 사용자 커스텀 CSS 오버라이드를 위해 유지합니다. */\n\n/* 시간 셀 */\n.rsp-cell {\n  padding: 0;\n  width: var(--rsp-cell-size);\n  height: var(--rsp-cell-size);\n  border-left: 1px solid var(--rsp-color-border);\n  border-top: 1px solid var(--rsp-color-border);\n  cursor: pointer;\n  touch-action: none;\n  -webkit-touch-callout: none;\n}\n\n.rsp-cell:hover {\n  background-color: var(--rsp-color-bg-hover);\n}\n\n.rsp-cell--highlighted {\n  background-color: var(--rsp-color-bg-hover);\n}\n\n.rsp-cell--selected {\n  background-color: var(--rsp-color-selected);\n}\n\n.rsp-cell--selected:hover {\n  background-color: var(--rsp-color-selected);\n  filter: brightness(1.1);\n}\n\n/* disabledSlots: 빗금 패턴 */\n.rsp-cell--disabled {\n  background-color: var(--rsp-color-bg-header);\n  cursor: not-allowed;\n  background-image: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 3px,\n    var(--rsp-color-border) 3px,\n    var(--rsp-color-border) 4px\n  );\n}\n\n.rsp-cell--disabled:hover {\n  background-color: var(--rsp-color-bg-header);\n  background-image: repeating-linear-gradient(\n    45deg,\n    transparent,\n    transparent 3px,\n    var(--rsp-color-border) 3px,\n    var(--rsp-color-border) 4px\n  );\n}\n\n/* readOnly: 선택 셀 회색, 호버 없음 */\n.rsp-cell--readonly {\n  cursor: default;\n}\n\n.rsp-cell--readonly:hover {\n  background-color: transparent;\n}\n\n.rsp-cell--readonly.rsp-cell--selected {\n  background-color: var(--rsp-color-selected-readonly);\n}\n\n.rsp-cell--readonly.rsp-cell--selected:hover {\n  background-color: var(--rsp-color-selected-readonly);\n}\n\n.rsp-day-label--readonly,\n.rsp-header-cell--readonly {\n  cursor: default;\n}\n\n.rsp-day-label--readonly:hover {\n  background-color: var(--rsp-color-bg-label);\n}\n\n.rsp-header-cell--readonly:hover {\n  background-color: transparent;\n}\n\n/* disabled: 전체 회색 배경 + 상호작용 불가 */\n.rsp-container--disabled {\n  pointer-events: none;\n}\n\n.rsp-container--disabled .rsp-cell {\n  background-color: var(--rsp-color-bg-header);\n}\n\n.rsp-container--disabled .rsp-cell--selected {\n  background-color: var(--rsp-color-selected-readonly);\n}\n\n.rsp-container--disabled .rsp-header-cell,\n.rsp-container--disabled .rsp-day-label,\n.rsp-container--disabled .rsp-hour-label {\n  color: var(--rsp-color-text-sub);\n}\n\n.rsp-container--disabled .rsp-preset-button {\n  color: var(--rsp-color-text-sub);\n  border-color: var(--rsp-color-border);\n}\n\n/* dayAxis=\"x\" 모드: 시간 라벨 컬럼 */\n.rsp-hour-col {\n  width: var(--rsp-day-col-width);\n}\n\n.rsp-hour-label {\n  font-size: var(--rsp-font-size-sm);\n  line-height: 1;\n  font-weight: 400;\n  color: var(--rsp-color-text-header);\n  text-align: center;\n  height: var(--rsp-cell-size);\n  padding: 0;\n  background-color: var(--rsp-color-bg-label);\n  border-top: 1px solid var(--rsp-color-border);\n  cursor: pointer;\n  touch-action: none;\n}\n\n.rsp-hour-label:hover {\n  background-color: var(--rsp-color-bg-hover);\n}\n\n.rsp-hour-label--readonly {\n  cursor: default;\n}\n\n.rsp-hour-label--readonly:hover {\n  background-color: var(--rsp-color-bg-label);\n}\n\n/* dayAxis=\"x\" 모드: 요일 헤더 센터 정렬 */\n.rsp-header-cell--day {\n  text-align: center;\n}\n\n.rsp-header-cell--day span {\n  transform: none;\n}\n\n/* 모바일 최적화 (터치 타겟 권장 크기 ~30px+) */\n@media (max-width: 639px) {\n  .rsp-day-label {\n    width: 36px;\n    font-size: var(--rsp-font-size-sm);\n    padding: 6px 0;\n  }\n\n  .rsp-day-col {\n    width: 36px;\n  }\n\n  .rsp-cell {\n    width: 30px;\n    height: 30px;\n  }\n}\n"],"mappings":"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","names":[]}