bs-ad-calendar-react 1.2.2 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +135 -85
  2. package/dist/bs-ad-calendar.css +1 -1
  3. package/dist/bs-ad-calendar.js +652 -766
  4. package/dist/bs-ad-calendar.umd.cjs +1 -1
  5. package/dist/components/CalendarInput/CalendarInput.d.ts +1 -0
  6. package/dist/components/CalendarInputTab.d.ts +1 -0
  7. package/dist/components/ExampleCard.d.ts +0 -1
  8. package/dist/components/RangeTab.d.ts +3 -3
  9. package/dist/index.d.ts +2 -1
  10. package/dist/types/index.d.ts +5 -4
  11. package/package.json +26 -4
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # BS-AD Calendar
2
2
 
3
- A modern React calendar component for seamless conversion between **Bikram Sambat (BS)** and **Gregorian (AD)** calendars.
3
+ A modern React calendar component for seamless conversion between **Bikram Sambat (BS)** and **Gregorian (AD)** calendars. Supports date picker, range selector, Nepali localization, and full theme customization.
4
4
 
5
5
  [![npm version](https://img.shields.io/npm/v/bs-ad-calendar-react.svg)](https://www.npmjs.com/package/bs-ad-calendar-react)
6
6
  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
@@ -14,20 +14,25 @@ A modern React calendar component for seamless conversion between **Bikram Samba
14
14
  **Select any date → Get both BS and AD dates automatically**
15
15
 
16
16
  ```
17
- Input: Click Poush 15, 2081 (BS)
18
- Output: { bs: "2081-09-15", ad: "2024-12-31", formatted: {...} }
17
+ Input: Click Poush 15, 2081 (BS)
18
+ Output: { bs: "2081-09-15", ad: "2024-12-31", formatted: { bs: "Poush 15, 2081", ad: "December 31, 2024" } }
19
19
  ```
20
20
 
21
21
  ## Features
22
22
 
23
- - Automatic dual calendar conversion
24
- - Single date and range selection
25
- - Customizable themes and colors
26
- - Nepali localization
27
- - Keyboard navigation
28
- - Responsive design
29
- - TypeScript support
30
- - Accessible (ARIA labels)
23
+ - ✅ Automatic BS ↔ AD dual calendar conversion
24
+ - ✅ Single date and range selection
25
+ - ✅ Range selector with preset shortcuts (Last 7 days, This month, etc.)
26
+ - ✅ DatePicker input component
27
+ - ✅ Default value support
28
+ - ✅ Nepali localization (months, days, numbers)
29
+ - ✅ Full CSS variable theming (dark mode support)
30
+ - ✅ Custom colors via `colors` prop
31
+ - ✅ Date constraints (minDate / maxDate)
32
+ - ✅ Keyboard navigation
33
+ - ✅ TypeScript support
34
+ - ✅ Accessible (ARIA labels)
35
+ - ✅ Responsive design
31
36
 
32
37
  ## Installation
33
38
 
@@ -53,18 +58,18 @@ export default function App() {
53
58
  ```
54
59
 
55
60
  **Output:**
56
- ```
61
+ ```json
57
62
  {
58
- bs: "2081-09-15",
59
- ad: "2024-12-31",
60
- formatted: {
61
- bs: "Poush 15, 2081",
62
- ad: "December 31, 2024"
63
+ "bs": "2081-09-15",
64
+ "ad": "2024-12-31",
65
+ "formatted": {
66
+ "bs": "Poush 15, 2081",
67
+ "ad": "December 31, 2024"
63
68
  }
64
69
  }
65
70
  ```
66
71
 
67
- ### Range Selection
72
+ ### Range Selector
68
73
 
69
74
  ```tsx
70
75
  <Calendar
@@ -76,14 +81,14 @@ export default function App() {
76
81
  ```
77
82
 
78
83
  **Output:**
79
- ```
84
+ ```json
80
85
  {
81
- start: { year: 2081, month: 8, day: 1 },
82
- end: { year: 2081, month: 8, day: 30 }
86
+ "start": { "bs": "2081-09-01", "ad": "2024-12-17", "formatted": { "bs": "Poush 1, 2081", "ad": "December 17, 2024" } },
87
+ "end": { "bs": "2081-09-30", "ad": "2025-01-14", "formatted": { "bs": "Poush 30, 2081", "ad": "January 14, 2025" } }
83
88
  }
84
89
  ```
85
90
 
86
- ### Range Presets with Filtering
91
+ ### Range Selector with Preset Shortcuts
87
92
 
88
93
  ```tsx
89
94
  import { Calendar, PRESET_KEYS } from 'bs-ad-calendar-react'
@@ -94,10 +99,13 @@ import { Calendar, PRESET_KEYS } from 'bs-ad-calendar-react'
94
99
  showRangePresets
95
100
  rangePresetsPosition="left"
96
101
  presetKeys={[
102
+ PRESET_KEYS.TODAY,
97
103
  PRESET_KEYS.LAST_7_DAYS,
98
104
  PRESET_KEYS.LAST_30_DAYS,
99
105
  PRESET_KEYS.THIS_MONTH,
100
- PRESET_KEYS.LAST_MONTH
106
+ PRESET_KEYS.LAST_MONTH,
107
+ PRESET_KEYS.LAST_3_MONTHS,
108
+ PRESET_KEYS.LAST_YEAR,
101
109
  ]}
102
110
  onRangeSelect={(range) => console.log(range)}
103
111
  />
@@ -106,21 +114,14 @@ import { Calendar, PRESET_KEYS } from 'bs-ad-calendar-react'
106
114
  ### Custom Preset Labels
107
115
 
108
116
  ```tsx
109
- import { Calendar, PRESET_KEYS } from 'bs-ad-calendar-react'
110
-
111
117
  <Calendar
112
- calendarType="AD"
118
+ calendarType="BS"
113
119
  mode="range"
114
120
  showRangePresets
115
- presetKeys={[
116
- PRESET_KEYS.LAST_7_DAYS,
117
- PRESET_KEYS.LAST_30_DAYS,
118
- PRESET_KEYS.THIS_MONTH
119
- ]}
121
+ presetKeys={[PRESET_KEYS.LAST_7_DAYS, PRESET_KEYS.THIS_MONTH]}
120
122
  presetLabels={{
121
- [PRESET_KEYS.LAST_7_DAYS]: 'Past Week',
122
- [PRESET_KEYS.LAST_30_DAYS]: 'Past Month',
123
- [PRESET_KEYS.THIS_MONTH]: 'Current Month'
123
+ [PRESET_KEYS.LAST_7_DAYS]: 'पछिल्लो ७ दिन',
124
+ [PRESET_KEYS.THIS_MONTH]: 'यो महिना'
124
125
  }}
125
126
  onRangeSelect={(range) => console.log(range)}
126
127
  />
@@ -131,11 +132,14 @@ import { Calendar, PRESET_KEYS } from 'bs-ad-calendar-react'
131
132
  ```tsx
132
133
  import { DatePicker } from 'bs-ad-calendar-react'
133
134
 
135
+ const today = new Date().toISOString().split('T')[0]
136
+
134
137
  export default function App() {
135
138
  return (
136
139
  <DatePicker
137
- calendarType="AD"
140
+ calendarType="BS"
138
141
  placeholder="Select a date"
142
+ defaultValue={today}
139
143
  onDateSelect={(date) => console.log(date)}
140
144
  />
141
145
  )
@@ -162,20 +166,43 @@ export default function App() {
162
166
  colors={{
163
167
  primary: '#10b981',
164
168
  selected: '#059669',
165
- today: '#d1fae5'
169
+ today: '#d1fae5',
170
+ hover: '#f0fdf4',
171
+ background: '#ffffff',
172
+ text: '#1f2937',
173
+ border: '#e5e7eb',
174
+ disabled: '#d1d5db',
166
175
  }}
167
176
  onDateSelect={(date) => console.log(date)}
168
177
  />
169
178
  ```
170
179
 
171
- ### Dark Theme
172
-
173
- ```tsx
174
- <Calendar
175
- calendarType="BS"
176
- theme="dark"
177
- onDateSelect={(date) => console.log(date)}
178
- />
180
+ ### Dark Theme via CSS Variables
181
+
182
+ ```css
183
+ /* In your global CSS */
184
+ :root {
185
+ --calendar-background: #1e293b;
186
+ --calendar-text: #f1f5f9;
187
+ --calendar-border: #334155;
188
+ --calendar-hover: #334155;
189
+ --calendar-selected: #3b82f6;
190
+ --calendar-today: #1e40af;
191
+ --calendar-primary: #60a5fa;
192
+ --calendar-disabled: #475569;
193
+
194
+ /* Range presets */
195
+ --presets-background: #1e293b;
196
+ --presets-border: #334155;
197
+ --preset-btn-background: #0f172a;
198
+ --preset-btn-text: #94a3b8;
199
+ --preset-btn-active-background: #3b82f6;
200
+
201
+ /* DatePicker input */
202
+ --datepicker-background: #0f172a;
203
+ --datepicker-text: #ffffff;
204
+ --datepicker-border: #334155;
205
+ }
179
206
  ```
180
207
 
181
208
  ### Date Constraints
@@ -184,17 +211,7 @@ export default function App() {
184
211
  <Calendar
185
212
  calendarType="AD"
186
213
  minDate="2024-01-01"
187
- maxDate="2024-12-31"
188
- onDateSelect={(date) => console.log(date)}
189
- />
190
- ```
191
-
192
- ### Disabled State
193
-
194
- ```tsx
195
- <Calendar
196
- calendarType="BS"
197
- disabled
214
+ maxDate="2025-12-31"
198
215
  onDateSelect={(date) => console.log(date)}
199
216
  />
200
217
  ```
@@ -207,21 +224,20 @@ export default function App() {
207
224
  |------|------|---------|-------------|
208
225
  | `calendarType` | `'BS' \| 'AD'` | `'AD'` | Calendar type |
209
226
  | `mode` | `'single' \| 'range'` | `'single'` | Selection mode |
210
- | `onDateSelect` | `(date: DateOutput) => void` | - | Date callback |
211
- | `onRangeSelect` | `(range: DateRange) => void` | - | Range callback |
227
+ | `onDateSelect` | `(date: DateOutput) => void` | - | Single date callback |
228
+ | `onRangeSelect` | `(range: DateRangeOutput) => void` | - | Range callback |
212
229
  | `showToday` | `boolean` | `true` | Highlight today |
213
230
  | `disabled` | `boolean` | `false` | Disable interaction |
214
- | `minDate` | `string` | - | Min selectable date |
215
- | `maxDate` | `string` | - | Max selectable date |
216
- | `theme` | `'light' \| 'dark'` | `'light'` | Theme |
231
+ | `minDate` | `string` | - | Min selectable date (YYYY-MM-DD) |
232
+ | `maxDate` | `string` | - | Max selectable date (YYYY-MM-DD) |
217
233
  | `colors` | `ColorConfig` | - | Custom colors |
218
- | `showNepaliMonths` | `boolean` | `false` | Nepali months |
219
- | `showNepaliDays` | `boolean` | `false` | Nepali days |
220
- | `showNepaliNumbers` | `boolean` | `false` | Nepali numbers |
221
- | `showRangePresets` | `boolean` | `false` | Show presets |
234
+ | `showNepaliMonths` | `boolean` | `false` | Nepali month names |
235
+ | `showNepaliDays` | `boolean` | `false` | Nepali day names |
236
+ | `showNepaliNumbers` | `boolean` | `false` | Nepali digits |
237
+ | `showRangePresets` | `boolean` | `false` | Show preset shortcuts |
222
238
  | `rangePresetsPosition` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | Preset position |
223
- | `presetKeys` | `string[]` | - | Filter presets |
224
- | `presetLabels` | `Record<string, string>` | - | Rename presets |
239
+ | `presetKeys` | `string[]` | - | Filter which presets to show |
240
+ | `presetLabels` | `Record<string, string>` | - | Rename preset labels |
225
241
  | `predefinedRanges` | `PredefinedRange[]` | - | Custom presets |
226
242
 
227
243
  ### DatePicker Props
@@ -231,12 +247,14 @@ Extends Calendar props plus:
231
247
  | Prop | Type | Default | Description |
232
248
  |------|------|---------|-------------|
233
249
  | `placeholder` | `string` | `'Select date'` | Input placeholder |
234
- | `inputClassName` | `string` | - | Input CSS class |
235
- | `popupClassName` | `string` | - | Popup CSS class |
250
+ | `defaultValue` | `string` | - | Initial date (AD ISO: YYYY-MM-DD) |
251
+ | `inputClassName` | `string` | - | Input element CSS class |
252
+ | `popupClassName` | `string` | - | Popup container CSS class |
236
253
 
237
254
  ### Output Format
238
255
 
239
256
  ```tsx
257
+ // DateOutput (onDateSelect)
240
258
  {
241
259
  bs: "2081-09-15",
242
260
  ad: "2024-12-31",
@@ -245,26 +263,37 @@ Extends Calendar props plus:
245
263
  ad: "December 31, 2024"
246
264
  }
247
265
  }
248
- ```
249
266
 
250
- ## Keyboard Navigation
251
-
252
- - Arrow Left/Right - Navigate months
253
- - Arrow Up/Down - Navigate years
254
- - PageUp/PageDown - Navigate months
255
- - Shift + PageUp/PageDown - Navigate years
256
-
257
- ## Browser Support
258
-
259
- Chrome, Firefox, Safari, Edge (latest versions)
260
-
261
- ## TypeScript
262
-
263
- ```tsx
264
- import type { DateOutput, DateRange, CalendarProps } from 'bs-ad-calendar-react'
265
- import { PRESET_KEYS } from 'bs-ad-calendar-react'
267
+ // DateRangeOutput (onRangeSelect)
268
+ {
269
+ start: DateOutput,
270
+ end: DateOutput
271
+ }
266
272
  ```
267
273
 
274
+ ## CSS Variables Reference
275
+
276
+ | Variable | Description |
277
+ |----------|-------------|
278
+ | `--calendar-background` | Calendar background |
279
+ | `--calendar-text` | Text color |
280
+ | `--calendar-border` | Border color |
281
+ | `--calendar-hover` | Day hover background |
282
+ | `--calendar-selected` | Selected day background |
283
+ | `--calendar-today` | Today highlight background |
284
+ | `--calendar-primary` | Primary color (today text, range text) |
285
+ | `--calendar-disabled` | Disabled day color |
286
+ | `--presets-background` | Presets container background |
287
+ | `--presets-border` | Presets container border |
288
+ | `--preset-btn-background` | Preset button background |
289
+ | `--preset-btn-text` | Preset button text |
290
+ | `--preset-btn-active-background` | Active preset background |
291
+ | `--datepicker-background` | Input background |
292
+ | `--datepicker-text` | Input text color |
293
+ | `--datepicker-border` | Input border color |
294
+ | `--datepicker-border-focus` | Input focus border |
295
+ | `--datepicker-icon` | Calendar icon color |
296
+
268
297
  ## Available Preset Keys
269
298
 
270
299
  ```tsx
@@ -282,6 +311,26 @@ PRESET_KEYS.LAST_180_DAYS // Last 180 Days
282
311
  PRESET_KEYS.LAST_YEAR // Last Year (12 months)
283
312
  ```
284
313
 
314
+ ## Keyboard Navigation
315
+
316
+ | Key | Action |
317
+ |-----|--------|
318
+ | `Arrow Left / Right` | Navigate months |
319
+ | `Arrow Up / Down` | Navigate years |
320
+ | `PageUp / PageDown` | Navigate months |
321
+ | `Shift + PageUp / PageDown` | Navigate years |
322
+
323
+ ## TypeScript
324
+
325
+ ```tsx
326
+ import type { DateOutput, DateRangeOutput, CalendarProps, DatePickerProps } from 'bs-ad-calendar-react'
327
+ import { Calendar, DatePicker, PRESET_KEYS } from 'bs-ad-calendar-react'
328
+ ```
329
+
330
+ ## Browser Support
331
+
332
+ Chrome, Firefox, Safari, Edge (latest versions)
333
+
285
334
  ## License
286
335
 
287
336
  MIT © [Bibek Amatya](https://github.com/bibekamatya)
@@ -291,3 +340,4 @@ MIT © [Bibek Amatya](https://github.com/bibekamatya)
291
340
  - [GitHub](https://github.com/bibekamatya/bs-ad-calendar)
292
341
  - [NPM](https://www.npmjs.com/package/bs-ad-calendar-react)
293
342
  - [Demo](https://bibekamatya.github.io/bs-ad-calendar/)
343
+ - [Report Issues](https://github.com/bibekamatya/bs-ad-calendar/issues)
package/dist/bs-ad-calendar.css CHANGED
@@ -1 +1 @@
1
- ._calendar_lve6c_1{background:var(--calendar-background, white);border:1px solid var(--calendar-border, #e5e7eb);border-radius:8px;box-shadow:0 4px 6px -1px #0000001a;padding:16px;font-family:system-ui,-apple-system,sans-serif;color:var(--calendar-text, #1f2937)}._calendar_lve6c_1>div:has(._grid_lve6c_14){display:flex;gap:16px}@media(max-width:600px){._calendar_lve6c_1>div:has(._grid_lve6c_14){flex-direction:column}}._header_lve6c_25{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}._navButton_lve6c_32{background:none;border:none;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s;color:var(--calendar-text, #1f2937);font-size:18px;font-weight:700;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}._navButton_lve6c_32:hover:not(:disabled){background-color:var(--calendar-hover, #f3f4f6)}._navButton_lve6c_32:disabled{opacity:.5;cursor:not-allowed}._monthYear_lve6c_58{font-weight:600;font-size:16px;color:var(--calendar-text, #1f2937);background:none;border:none;cursor:pointer;padding:8px 12px;border-radius:4px;transition:background-color .2s}._monthYear_lve6c_58:hover:not(:disabled){background-color:var(--calendar-hover, #f3f4f6)}._monthYear_lve6c_58:disabled{cursor:not-allowed}._pickerOverlay_lve6c_78{position:fixed;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:1000}._pickerContent_lve6c_88{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a;width:90%;max-width:400px;max-height:90vh;overflow:auto}._pickerHeader_lve6c_98{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e5e7eb}._pickerHeader_lve6c_98 h3{margin:0;font-size:16px;font-weight:600}._closeButton_lve6c_112{background:none;border:none;font-size:24px;cursor:pointer;color:#6b7280;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}._closeButton_lve6c_112:hover{background:#f3f4f6}._pickerBody_lve6c_131{padding:16px}._pickerSection_lve6c_135{margin-bottom:20px}._pickerSection_lve6c_135:last-child{margin-bottom:0}._pickerSection_lve6c_135 label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:#374151}._pickerSectionHeader_lve6c_151{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}._pickerSectionHeader_lve6c_151 label{margin-bottom:0}._yearNav_lve6c_162{display:flex;align-items:center;gap:8px}._yearNav_lve6c_162 button{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:4px;font-size:16px;color:var(--calendar-primary, #3b82f6)}._yearNav_lve6c_162 button:hover:not(:disabled){background:var(--calendar-hover, #eff6ff)}._yearNav_lve6c_162 button:disabled{opacity:.3;cursor:not-allowed}._yearNav_lve6c_162 span{font-size:13px;font-weight:500;min-width:80px;text-align:center}._yearGrid_lve6c_194{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}._yearGrid_lve6c_194 button{padding:10px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}._yearGrid_lve6c_194 button:hover{background:#f3f4f6}._yearGrid_lve6c_194 button._selected_lve6c_214{background:var(--calendar-selected, #3b82f6);color:#fff;border-color:var(--calendar-selected, #3b82f6)}._monthGrid_lve6c_220{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}._monthGrid_lve6c_220 button{padding:12px;border:1px solid #e5e7eb;background:#fff;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}._monthGrid_lve6c_220 button:hover{background:#f3f4f6}._monthGrid_lve6c_220 button._selected_lve6c_214{background:var(--calendar-selected, #3b82f6);color:#fff;border-color:var(--calendar-selected, #3b82f6)}._grid_lve6c_14{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}._dayHeader_lve6c_252{text-align:center;font-weight:500;font-size:12px;color:var(--calendar-disabled, #6b7280);padding:8px 4px}._day_lve6c_252{aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;transition:all .2s;font-size:14px;color:var(--calendar-text, #1f2937);min-height:32px}._day_lve6c_252:hover:not(._dayDisabled_lve6c_273):not(._dayOtherMonth_lve6c_273){background-color:var(--calendar-hover, #f3f4f6)}._daySelected_lve6c_277{background-color:var(--calendar-selected, #3b82f6)!important;color:#fff!important}._dayToday_lve6c_282{background-color:var(--calendar-today, #dbeafe);color:var(--calendar-primary, #1d4ed8);font-weight:600}._dayInRange_lve6c_288{background-color:var(--calendar-hover, #eff6ff);color:var(--calendar-primary, #1d4ed8)}._dayDisabled_lve6c_273{color:var(--calendar-disabled, #d1d5db);cursor:not-allowed}._dayOtherMonth_lve6c_273{color:var(--calendar-disabled, #9ca3af);cursor:default}._calendar_lve6c_1[data-theme=dark]{--calendar-primary: #60a5fa;--calendar-background: #1f2937;--calendar-text: #f9fafb;--calendar-border: #374151;--calendar-hover: #374151;--calendar-selected: #3b82f6;--calendar-today: #1e40af;--calendar-disabled: #6b7280}._datePicker_z7mc2_1{position:relative;display:inline-block;width:100%}._input_z7mc2_7{width:100%;padding:10px 40px 10px 12px;border:1px solid var(--datepicker-border, #d1d5db);border-radius:var(--datepicker-radius, 6px);font-size:var(--datepicker-font-size, 14px);cursor:pointer;background:var(--datepicker-background, white);color:var(--datepicker-text, #1f2937);transition:border-color .2s,box-shadow .2s;box-sizing:border-box}._input_z7mc2_7:hover{border-color:var(--datepicker-border-hover, #9ca3af)}._input_z7mc2_7:focus{outline:none;border-color:var(--datepicker-border-focus, #3b82f6);box-shadow:0 0 0 3px var(--datepicker-focus-ring, rgba(59, 130, 246, .1))}._input_z7mc2_7:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.6}._iconButton_z7mc2_38{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--datepicker-icon, #6b7280);transition:color .2s}._iconButton_z7mc2_38:hover{color:var(--datepicker-icon-hover, #3b82f6)}._iconButton_z7mc2_38:disabled{cursor:not-allowed;opacity:.5}._popup_z7mc2_64{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;box-shadow:0 10px 25px #00000026;border-radius:8px;background:#fff}@media(max-width:640px){._popup_z7mc2_64{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:90vw}}
1
+ .bsac-datepicker{position:relative;display:flex;align-items:center;width:100%}.bsac-input{flex:1;width:100%;padding:10px 40px 10px 12px;border:1px solid var(--datepicker-border, #d1d5db);border-radius:var(--datepicker-radius, 6px);font-size:var(--datepicker-font-size, 14px);cursor:pointer;background:var(--datepicker-background, white);color:var(--datepicker-text, #1f2937);transition:border-color .2s,box-shadow .2s;box-sizing:border-box;outline:none}.bsac-input:hover{border-color:var(--datepicker-border-hover, #9ca3af)}.bsac-input:focus{border-color:var(--datepicker-border-focus, #3b82f6);box-shadow:0 0 0 3px var(--datepicker-focus-ring, rgba(59, 130, 246, .1))}.bsac-input:disabled{background:#f3f4f6;cursor:not-allowed;opacity:.6}.bsac-icon-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--datepicker-icon, #6b7280);transition:color .2s}.bsac-icon-btn:hover{color:var(--datepicker-icon-hover, #3b82f6)}.bsac-icon-btn:disabled{cursor:not-allowed;opacity:.5}.bsac-popup{position:fixed;z-index:9999;box-shadow:0 10px 25px #0000004d;border-radius:8px;background:var(--calendar-background, white);min-width:280px;max-height:90vh;overflow-y:auto}.bsac-calendar{background:var(--calendar-background, white);border:1px solid var(--calendar-border, #e5e7eb);border-radius:8px;box-shadow:0 4px 6px -1px #0000001a;padding:16px;font-family:system-ui,-apple-system,sans-serif;color:var(--calendar-text, #1f2937);min-width:280px}.bsac-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.bsac-nav-btn{background:none;border:none;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s;color:var(--calendar-text, #1f2937);font-size:18px;font-weight:700;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}.bsac-nav-btn:hover:not(:disabled){background-color:var(--calendar-hover, #f3f4f6)}.bsac-nav-btn:disabled{opacity:.5;cursor:not-allowed}.bsac-month-year-btn{font-weight:600;font-size:16px;color:var(--calendar-text, #1f2937);background:none;border:none;cursor:pointer;padding:8px 12px;border-radius:4px;transition:background-color .2s}.bsac-month-year-btn:hover:not(:disabled){background-color:var(--calendar-hover, #f3f4f6)}.bsac-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.bsac-day-header{text-align:center;font-weight:500;font-size:12px;color:var(--calendar-disabled, #6b7280);padding:8px 4px}.bsac-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;transition:all .2s;font-size:14px;color:var(--calendar-text, #1f2937);min-height:32px}.bsac-day:hover:not(.bsac-day-disabled):not(.bsac-day-empty){background-color:var(--calendar-hover, #f3f4f6)}.bsac-day-selected{background-color:var(--calendar-selected, #3b82f6)!important;color:#fff!important}.bsac-day-today{background-color:var(--calendar-today, #dbeafe);color:var(--calendar-primary, #1d4ed8);font-weight:600}.bsac-day-in-range{background-color:var(--calendar-hover, #eff6ff);color:var(--calendar-primary, #1d4ed8)}.bsac-day-disabled{color:var(--calendar-disabled, #d1d5db);cursor:not-allowed}.bsac-day-empty{cursor:default}.bsac-picker-overlay{position:fixed;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:10000}.bsac-picker-content{background:var(--calendar-background, white);border-radius:12px;box-shadow:0 20px 25px -5px #0000001a;width:90%;max-width:400px;max-height:90vh;overflow:auto;color:var(--calendar-text, #1f2937)}.bsac-picker-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--calendar-border, #e5e7eb)}.bsac-picker-header h3{margin:0;font-size:16px;font-weight:600}.bsac-close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#6b7280;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}.bsac-close-btn:hover{background:#f3f4f6}.bsac-picker-body{padding:16px}.bsac-picker-section{margin-bottom:20px}.bsac-picker-section:last-child{margin-bottom:0}.bsac-picker-section label{display:block;font-size:14px;font-weight:500;margin-bottom:8px;color:var(--calendar-text, #374151)}.bsac-picker-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.bsac-year-nav{display:flex;align-items:center;gap:8px}.bsac-year-nav button{background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:4px;font-size:16px;color:var(--calendar-primary, #3b82f6)}.bsac-year-nav button:hover:not(:disabled){background:var(--calendar-hover, #eff6ff)}.bsac-year-nav button:disabled{opacity:.3;cursor:not-allowed}.bsac-year-nav span{font-size:13px;font-weight:500;min-width:80px;text-align:center}.bsac-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.bsac-year-grid button{padding:10px;border:1px solid var(--calendar-border, #e5e7eb);background:var(--calendar-background, white);color:var(--calendar-text, #1f2937);border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}.bsac-year-grid button:hover{background:var(--calendar-hover, #f3f4f6)}.bsac-year-grid button.bsac-selected{background:var(--calendar-selected, #3b82f6);color:#fff;border-color:var(--calendar-selected, #3b82f6)}.bsac-month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bsac-month-grid button{padding:12px;border:1px solid var(--calendar-border, #e5e7eb);background:var(--calendar-background, white);color:var(--calendar-text, #1f2937);border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}.bsac-month-grid button:hover{background:var(--calendar-hover, #f3f4f6)}.bsac-month-grid button.bsac-selected{background:var(--calendar-selected, #3b82f6);color:#fff;border-color:var(--calendar-selected, #3b82f6)}.bsac-calendar[data-theme=dark]{--calendar-primary: #60a5fa;--calendar-background: #1f2937;--calendar-text: #f9fafb;--calendar-border: #374151;--calendar-hover: #374151;--calendar-selected: #3b82f6;--calendar-today: #1e40af;--calendar-disabled: #6b7280}.bsac-presets{display:flex;gap:8px;padding:12px;background:var(--presets-background, var(--calendar-hover, #f8f9fa));border-radius:6px;border:1px solid var(--presets-border, var(--calendar-border, #e9ecef));flex-shrink:0}.bsac-presets--top,.bsac-presets--bottom{flex-direction:row;flex-wrap:wrap;margin-bottom:0}.bsac-presets--top{margin-bottom:16px}.bsac-presets--bottom{margin-top:16px}.bsac-presets--left,.bsac-presets--right{flex-direction:column;flex-wrap:nowrap;min-width:150px;max-width:180px}.bsac-preset-btn{padding:6px 12px;font-size:12px;border:1px solid var(--preset-btn-border, var(--calendar-border, #dee2e6));border-radius:4px;background:var(--preset-btn-background, var(--calendar-background, #ffffff));color:var(--preset-btn-text, var(--calendar-text, #495057));cursor:pointer;transition:all .2s;white-space:nowrap}.bsac-preset-btn:hover{background:var(--preset-btn-active-background, var(--calendar-selected, #007bff));color:var(--preset-btn-active-text, white);border-color:var(--preset-btn-active-background, var(--calendar-selected, #007bff))}.bsac-preset-btn--active{background:var(--preset-btn-active-background, var(--calendar-selected, #007bff))!important;color:var(--preset-btn-active-text, white)!important;border-color:var(--preset-btn-active-background, var(--calendar-selected, #007bff))!important}