@reachweb/alpine-calendar 0.3.0 → 0.4.0

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 (3) hide show
  1. package/README.md +73 -25
  2. package/dist/alpine-calendar.css +1 -1
  3. package/package.json +2 -5
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Alpine Calendar
2
2
 
3
- A lightweight, AlpineJS-native calendar component with inline/popup display, input binding with masking, single/multiple/range selection, month/year pickers, birth-date wizard, TailwindCSS 4 theming, and timezone-safe date handling.
3
+ A lightweight, AlpineJS-native calendar component with inline/popup display, input binding with masking, single/multiple/range selection, month/year pickers, birth-date wizard, CSS custom property theming, and timezone-safe date handling.
4
4
 
5
5
  **[Live Demo](https://reachweb.github.io/alpine-calendar/)**
6
6
 
@@ -175,6 +175,7 @@ All options are passed via `x-data="calendar({ ... })"`.
175
175
  | `scrollHeight` | `number` | `400` | Max height (px) of scrollable container when `months >= 3` |
176
176
  | `presets` | `RangePreset[]` | — | Predefined date range shortcuts (see [Range Presets](#range-presets)) |
177
177
  | `constraintMessages` | `ConstraintMessages` | — | Custom tooltip strings for disabled dates |
178
+ | `dateMetadata` | `DateMetaProvider` | — | Per-date metadata: labels, availability, colors (see [Date Metadata](#date-metadata)) |
178
179
  | `template` | `boolean` | `true` | Auto-render template when no `.rc-calendar` exists |
179
180
 
180
181
  ### Date Constraints
@@ -297,12 +298,15 @@ Access these via `$refs`:
297
298
  | `open()` / `close()` / `toggle()` | Popup lifecycle |
298
299
  | `getSelection()` | Get current selection as `CalendarDate[]` |
299
300
  | `updateConstraints(options)` | Update constraints at runtime |
301
+ | `updateDateMetadata(provider)` | Replace metadata at runtime (static map, callback, or `null` to clear) |
300
302
 
301
303
  ### Template Helpers
302
304
 
303
305
  | Method | Description |
304
306
  |--------|-------------|
305
307
  | `dayClasses(cell)` | CSS class object for day cells |
308
+ | `dayMeta(cell)` | Get `DateMeta` for a day cell (label, availability, color, cssClass) |
309
+ | `dayStyle(cell)` | Inline style string for metadata color (`--color-calendar-day-meta`) |
306
310
  | `monthClasses(cell)` | CSS class object for month cells |
307
311
  | `yearClasses(cell)` | CSS class object for year cells |
308
312
  | `monthYearLabel(index)` | Formatted "Month Year" label for grid at index |
@@ -350,30 +354,7 @@ Listen with Alpine's `@` syntax on the calendar container:
350
354
 
351
355
  The calendar uses CSS custom properties for all visual styles. Override them in your CSS:
352
356
 
353
- ### With TailwindCSS 4
354
-
355
- ```css
356
- @theme {
357
- --color-calendar-bg: var(--color-white);
358
- --color-calendar-text: var(--color-gray-900);
359
- --color-calendar-primary: var(--color-indigo-600);
360
- --color-calendar-primary-text: var(--color-white);
361
- --color-calendar-hover: var(--color-gray-100);
362
- --color-calendar-disabled: var(--color-gray-300);
363
- --color-calendar-range: var(--color-indigo-50);
364
- --color-calendar-today-ring: var(--color-indigo-400);
365
- --color-calendar-border: var(--color-gray-200);
366
- --color-calendar-other-month: var(--color-gray-400);
367
- --color-calendar-weekday: var(--color-gray-500);
368
- --color-calendar-focus-ring: var(--color-indigo-600);
369
- --color-calendar-overlay: oklch(0 0 0 / 0.2);
370
- --radius-calendar: var(--radius-lg);
371
- --shadow-calendar: var(--shadow-lg);
372
- --font-calendar: system-ui, -apple-system, sans-serif;
373
- }
374
- ```
375
-
376
- ### Without Tailwind (plain CSS)
357
+ ### Override variables
377
358
 
378
359
  ```css
379
360
  :root {
@@ -414,6 +395,9 @@ All classes use the `.rc-` prefix:
414
395
  | `.rc-day--disabled` | Disabled date |
415
396
  | `.rc-day--other-month` | Leading/trailing days |
416
397
  | `.rc-day--focused` | Keyboard-focused date |
398
+ | `.rc-day--available` / `.rc-day--unavailable` | Metadata availability states |
399
+ | `.rc-day--has-label` | Day cell with a metadata label |
400
+ | `.rc-day__number` / `.rc-day__label` / `.rc-day__dot` | Day cell inner elements (number, label text, availability dot) |
417
401
  | `.rc-month-grid` / `.rc-month` | Month picker |
418
402
  | `.rc-year-grid` / `.rc-year` | Year picker |
419
403
  | `.rc-months--dual` | Two-month side-by-side layout |
@@ -497,6 +481,67 @@ const customPreset = {
497
481
  }
498
482
  ```
499
483
 
484
+ ## Date Metadata
485
+
486
+ Attach labels, pricing, availability indicators, and custom colors to individual dates. Useful for booking calendars, event schedules, and pricing displays.
487
+
488
+ ### Static Map
489
+
490
+ Pass an object keyed by ISO date strings:
491
+
492
+ ```html
493
+ <div x-data="calendar({
494
+ mode: 'single',
495
+ dateMetadata: {
496
+ '2026-03-01': { label: '$120', availability: 'available' },
497
+ '2026-03-05': { label: '$180', availability: 'available', color: '#ea580c' },
498
+ '2026-03-06': { availability: 'unavailable' },
499
+ '2026-03-07': { label: 'Sold', availability: 'unavailable' },
500
+ }
501
+ })"></div>
502
+ ```
503
+
504
+ ### Dynamic Callback
505
+
506
+ Use a function for computed metadata. Called for each visible date:
507
+
508
+ ```html
509
+ <div x-data="calendar({
510
+ mode: 'range',
511
+ dateMetadata: (date) => {
512
+ const d = date.toNativeDate().getDay()
513
+ if (d === 0 || d === 6) return { availability: 'unavailable' }
514
+ return { label: '$' + (100 + date.day * 3), availability: 'available' }
515
+ }
516
+ })"></div>
517
+ ```
518
+
519
+ ### DateMeta Properties
520
+
521
+ | Property | Type | Description |
522
+ |----------|------|-------------|
523
+ | `label` | `string` | Text below the day number (e.g., price, event name) |
524
+ | `availability` | `'available' \| 'unavailable'` | `'available'` shows a green dot, `'unavailable'` disables selection with strikethrough |
525
+ | `color` | `string` | CSS color for the label and dot (e.g., `'#16a34a'`) |
526
+ | `cssClass` | `string` | Custom CSS class(es) added to the day cell |
527
+
528
+ All properties are optional and work independently. Dates with `availability: 'unavailable'` cannot be selected regardless of constraint settings.
529
+
530
+ ### Runtime Updates
531
+
532
+ Replace metadata after initialization with `updateDateMetadata()`:
533
+
534
+ ```js
535
+ // Update with new data (e.g., after fetching availability)
536
+ $refs.cal.updateDateMetadata({
537
+ '2026-03-15': { label: '$200', availability: 'available' },
538
+ '2026-03-20': { availability: 'unavailable' },
539
+ })
540
+
541
+ // Clear all metadata
542
+ $refs.cal.updateDateMetadata(null)
543
+ ```
544
+
500
545
  ## Multi-Month Scrollable Layout
501
546
 
502
547
  When `months` is 3 or more, the calendar renders as a vertically scrollable container instead of side-by-side panels:
@@ -567,6 +612,7 @@ import {
567
612
  createRangeValidator,
568
613
  createDisabledReasons,
569
614
  isDateDisabled,
615
+ normalizeDateMeta,
570
616
  presetToday,
571
617
  presetYesterday,
572
618
  presetLastNDays,
@@ -592,6 +638,8 @@ import type {
592
638
  DateConstraintProperties,
593
639
  DateConstraintRule,
594
640
  ConstraintMessages,
641
+ DateMeta,
642
+ DateMetaProvider,
595
643
  InputMask,
596
644
  MaskEventHandlers,
597
645
  } from '@reachweb/alpine-calendar'
package/dist/alpine-calendar.css CHANGED
@@ -1 +1 @@
1
- /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-blue-50:oklch(97% .014 254.604);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-600:oklch(51.1% .262 276.966);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-calendar-bg:var(--color-white);--color-calendar-text:var(--color-gray-900);--color-calendar-border:var(--color-gray-200);--color-calendar-hover:var(--color-gray-100);--color-calendar-overlay:oklch(0% 0 0/.2);--color-calendar-primary:var(--color-blue-600);--color-calendar-primary-text:var(--color-white);--color-calendar-disabled:var(--color-gray-600);--color-calendar-other-month:var(--color-gray-600);--color-calendar-weekday:var(--color-gray-600);--color-calendar-range:var(--color-blue-50);--color-calendar-today-ring:var(--color-blue-400);--color-calendar-focus-ring:var(--color-blue-600);--color-calendar-available:oklch(65% .2 145);--color-calendar-unavailable:var(--color-gray-400);--radius-calendar:var(--radius-lg);--shadow-calendar:var(--shadow-lg);--font-calendar:system-ui, -apple-system, sans-serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.block{display:block}.contents{display:contents}.grid{display:grid}.hidden{display:none}.inline{display:inline}.translate-y-0{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-1{--tw-translate-y:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.flex-wrap{flex-wrap:wrap}.border{border-style:var(--tw-border-style);border-width:1px}.opacity-0{opacity:0}.opacity-100{opacity:1}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}}.rc-calendar{background-color:var(--color-calendar-bg);color:var(--color-calendar-text);border-radius:var(--radius-calendar);border:1px solid var(--color-calendar-border);box-shadow:var(--shadow-calendar);width:fit-content;min-width:17.5rem;max-width:100%;font-family:var(--font-calendar);padding:1rem}@media(max-width:639px){.rc-calendar{padding:.75rem}}.rc-months{grid-template-columns:1fr;gap:1rem;display:grid}@media(min-width:640px){.rc-months--dual{grid-template-columns:1fr 1fr}}.rc-months--scroll{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-calendar-border) transparent;flex-direction:column;gap:.25rem;display:flex;overflow-y:auto}.rc-months--scroll::-webkit-scrollbar{width:6px}.rc-months--scroll::-webkit-scrollbar-track{background:0 0}.rc-months--scroll::-webkit-scrollbar-thumb{background-color:var(--color-calendar-border);border-radius:3px}.rc-header--scroll-sticky{justify-content:center}.rc-header--scroll{border-top:1px solid var(--color-calendar-border);justify-content:center;padding:.5rem 0 .25rem}.rc-header--scroll:first-child{border-top:none;padding-top:0}.rc-header__label--scroll{cursor:default}.rc-header__label--scroll:hover{background-color:#0000}.rc-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;padding:0 .25rem;display:flex}.rc-header__label{cursor:pointer;border-radius:var(--radius-calendar);padding:.25rem .5rem;font-size:.9375rem;font-weight:600;transition:background-color .15s}.rc-header__label:hover{background-color:var(--color-calendar-hover)}.rc-header__nav{cursor:pointer;width:2rem;height:2rem;color:var(--color-calendar-text);background:0 0;border:none;border-radius:9999px;justify-content:center;align-items:center;font-size:1rem;transition:background-color .15s;display:flex}.rc-header__nav:hover{background-color:var(--color-calendar-hover)}.rc-weekdays{text-align:center;color:var(--color-calendar-weekday);text-transform:uppercase;letter-spacing:.05em;grid-template-columns:repeat(7,1fr);margin-bottom:.25rem;font-size:.75rem;font-weight:600;display:grid}.rc-weekday{padding:.25rem 0}.rc-grid{flex-direction:column;gap:1px;display:flex;position:relative;overflow:hidden}.rc-row{grid-template-columns:repeat(7,1fr);gap:1px;display:grid}.rc-row--week-numbers{grid-template-columns:2rem repeat(7,1fr)}.rc-day{aspect-ratio:1;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:9999px;justify-content:center;align-items:center;min-height:2.25rem;font-size:.875rem;transition:background-color .15s,color .15s;display:flex;position:relative}.rc-day:hover:not(.rc-day--disabled):not(.rc-day--selected):not(.rc-day--range-start):not(.rc-day--range-end){background-color:var(--color-calendar-hover)}.rc-day--other-month{color:var(--color-calendar-other-month)}.rc-day--hidden{visibility:hidden;pointer-events:none}.rc-day--today:not(.rc-day--selected):not(.rc-day--range-start):not(.rc-day--range-end){box-shadow:inset 0 0 0 1.5px var(--color-calendar-today-ring)}.rc-day--selected,.rc-day--range-start,.rc-day--range-end{background-color:var(--color-calendar-primary);color:var(--color-calendar-primary-text);font-weight:600}.rc-day--in-range{background-color:var(--color-calendar-range);border-radius:0}.rc-day--range-start{border-radius:9999px 0 0 9999px}.rc-day--range-end{border-radius:0 9999px 9999px 0}.rc-day--range-start.rc-day--range-end{border-radius:9999px}.rc-day--disabled{color:var(--color-calendar-disabled);cursor:not-allowed}.rc-day--disabled:hover{background-color:#0000}.rc-day--range-invalid{opacity:.4;cursor:not-allowed}.rc-day--focused:not(.rc-day--selected):not(.rc-day--range-start):not(.rc-day--range-end){box-shadow:0 0 0 2px var(--color-calendar-focus-ring)}.rc-day--has-label{flex-direction:column;gap:0;padding:.125rem 0}.rc-day__number{line-height:1.2}.rc-day__label{color:var(--color-calendar-day-meta,inherit);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.5625rem;line-height:1;overflow:hidden}.rc-day__dot{background-color:var(--color-calendar-day-meta,var(--color-calendar-available));border-radius:9999px;flex-shrink:0;width:4px;height:4px}.rc-day--unavailable{color:var(--color-calendar-unavailable);cursor:not-allowed;text-decoration:line-through}.rc-day--unavailable:hover{background-color:#0000}.rc-day--selected .rc-day__label,.rc-day--range-start .rc-day__label,.rc-day--range-end .rc-day__label{color:var(--color-calendar-primary-text)}.rc-day--selected .rc-day__dot,.rc-day--range-start .rc-day__dot,.rc-day--range-end .rc-day__dot{background-color:var(--color-calendar-primary-text)}.rc-popup-overlay{background:var(--color-calendar-overlay);justify-content:center;align-items:center;padding:1rem;display:flex}@media(max-width:639px){.rc-popup-overlay .rc-calendar{width:100%;max-width:100%}}.rc-popup-header{border-bottom:1px solid var(--color-calendar-border);justify-content:space-between;align-items:center;margin-bottom:.75rem;padding-bottom:.75rem;display:flex}.rc-popup-header__title{font-size:.9375rem;font-weight:600}.rc-popup-header__close{cursor:pointer;width:1.75rem;height:1.75rem;color:var(--color-calendar-text);background:0 0;border:none;border-radius:9999px;justify-content:center;align-items:center;transition:background-color .15s;display:flex}.rc-popup-header__close:hover{background-color:var(--color-calendar-hover)}.rc-month-grid{grid-template-columns:repeat(4,1fr);gap:.5rem;padding:.25rem;display:grid}.rc-month{border-radius:var(--radius-calendar);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;height:2.75rem;font-size:.875rem;transition:background-color .15s,color .15s;display:flex}.rc-month:hover:not(.rc-month--disabled):not(.rc-month--selected){background-color:var(--color-calendar-hover)}.rc-month--current:not(.rc-month--selected){box-shadow:inset 0 0 0 1.5px var(--color-calendar-today-ring)}.rc-month--selected{background-color:var(--color-calendar-primary);color:var(--color-calendar-primary-text);font-weight:600}.rc-month--disabled{color:var(--color-calendar-disabled);cursor:not-allowed}.rc-month--disabled:hover{background-color:#0000}.rc-year-grid{grid-template-columns:repeat(4,1fr);gap:.5rem;padding:.25rem;display:grid}.rc-year{border-radius:var(--radius-calendar);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;height:2.75rem;font-size:.875rem;transition:background-color .15s,color .15s;display:flex}.rc-year:hover:not(.rc-year--disabled):not(.rc-year--selected){background-color:var(--color-calendar-hover)}.rc-year--current:not(.rc-year--selected){box-shadow:inset 0 0 0 1.5px var(--color-calendar-today-ring)}.rc-year--selected{background-color:var(--color-calendar-primary);color:var(--color-calendar-primary-text);font-weight:600}.rc-year--disabled{color:var(--color-calendar-disabled);cursor:not-allowed}.rc-year--disabled:hover{background-color:#0000}.rc-weekdays--week-numbers{grid-template-columns:2rem repeat(7,1fr)}.rc-week-number{color:var(--color-calendar-weekday);-webkit-user-select:none;user-select:none;opacity:.7;justify-content:center;align-items:center;font-size:.6875rem;font-weight:500;display:flex}.rc-presets{border-top:1px solid var(--color-calendar-border);flex-wrap:wrap;gap:.375rem;margin-top:.625rem;padding-top:.625rem;display:flex}.rc-preset{color:var(--color-calendar-primary);border:1px solid var(--color-calendar-border);border-radius:var(--radius-calendar);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;justify-content:center;align-items:center;padding:.3125rem .625rem;font-size:.75rem;font-weight:500;transition:background-color .15s,border-color .15s;display:inline-flex}.rc-preset:hover{background-color:var(--color-calendar-hover);border-color:var(--color-calendar-primary)}.rc-preset:active{background-color:var(--color-calendar-range)}.rc-grid-wrapper{position:relative;overflow:hidden}@keyframes rc-slide-in-from-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes rc-slide-in-from-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.rc-grid--slide-next{animation:.2s ease-out rc-slide-in-from-right}.rc-grid--slide-prev{animation:.2s ease-out rc-slide-in-from-left}@keyframes rc-view-enter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.rc-view-enter{animation:.15s ease-out rc-view-enter}@keyframes rc-popup-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.rc-popup-overlay .rc-calendar{animation:.2s ease-out rc-popup-enter}@media(prefers-reduced-motion:reduce){.rc-grid--slide-next,.rc-grid--slide-prev,.rc-view-enter,.rc-popup-overlay .rc-calendar{animation:none}}.rc-wizard-steps{justify-content:center;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.rc-wizard-step{background-color:var(--color-calendar-border);border-radius:9999px;width:.5rem;height:.5rem;transition:background-color .2s,transform .2s}.rc-wizard-step--active{background-color:var(--color-calendar-primary);transform:scale(1.25)}.rc-wizard-step--done{background-color:var(--color-calendar-primary)}.rc-wizard-label{text-align:center;color:var(--color-calendar-weekday);margin-bottom:.5rem;font-size:.8125rem;font-weight:500}.rc-wizard-back{color:var(--color-calendar-primary);cursor:pointer;border-radius:var(--radius-calendar);background:0 0;border:none;align-items:center;gap:.25rem;margin-bottom:.5rem;padding:.25rem .5rem;font-size:.8125rem;transition:background-color .15s;display:flex}.rc-wizard-back:hover{background-color:var(--color-calendar-hover)}.rc-calendar--wizard{min-width:17.5rem}.rc-wizard-summary{text-align:center;color:var(--color-calendar-text);border-top:1px solid var(--color-calendar-border);margin-top:.5rem;padding-top:.5rem;font-size:.8125rem;font-weight:600;transition:opacity .2s,transform .2s}.rc-calendar--wizard .rc-month,.rc-calendar--wizard .rc-year{height:3.25rem;font-size:.9375rem}@media(max-width:639px){.rc-day{min-height:2.75rem;font-size:.9375rem}.rc-header__nav{width:2.75rem;height:2.75rem}.rc-month,.rc-year{min-height:2.75rem}.rc-calendar--wizard .rc-month,.rc-calendar--wizard .rc-year{height:3.5rem;font-size:1rem}}.rc-sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.rc-header__nav:focus-visible,.rc-header__label:focus-visible,.rc-popup-header__close:focus-visible,.rc-wizard-back:focus-visible,.rc-preset:focus-visible{outline:2px solid var(--color-calendar-focus-ring);outline-offset:2px}button.rc-header__label{font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;padding:.25rem .5rem}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
1
+ :root{--color-calendar-bg: #fff;--color-calendar-text: oklch(21% .034 264.665);--color-calendar-border: oklch(92.8% .006 264.531);--color-calendar-hover: oklch(96.7% .003 264.542);--color-calendar-overlay: oklch(0 0 0 / .2);--color-calendar-primary: oklch(54.6% .245 262.881);--color-calendar-primary-text: #fff;--color-calendar-muted: oklch(44.6% .03 256.802);--color-calendar-disabled: var(--color-calendar-muted);--color-calendar-other-month: var(--color-calendar-muted);--color-calendar-weekday: var(--color-calendar-muted);--color-calendar-range: oklch(97% .014 254.604);--color-calendar-today-ring: oklch(70.7% .165 254.624);--color-calendar-focus-ring: var(--color-calendar-primary);--color-calendar-available: oklch(.65 .2 145);--color-calendar-available-bg: oklch(.95 .05 145);--color-calendar-unavailable: oklch(70.7% .022 261.325);--radius-calendar: .5rem;--shadow-calendar: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--font-calendar: system-ui, -apple-system, sans-serif}.rc-calendar{background-color:var(--color-calendar-bg);color:var(--color-calendar-text);border-radius:var(--radius-calendar);border:1px solid var(--color-calendar-border);box-shadow:var(--shadow-calendar);padding:1rem;width:fit-content;min-width:17.5rem;max-width:100%;font-family:var(--font-calendar)}@media(max-width:639px){.rc-calendar{padding:.75rem}}.rc-months{display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width:640px){.rc-months--dual{grid-template-columns:1fr 1fr}}.rc-months--scroll{display:flex;flex-direction:column;gap:.25rem;overflow-y:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-calendar-border) transparent}.rc-months--scroll::-webkit-scrollbar{width:6px}.rc-months--scroll::-webkit-scrollbar-track{background:transparent}.rc-months--scroll::-webkit-scrollbar-thumb{background-color:var(--color-calendar-border);border-radius:3px}.rc-header--scroll-sticky{justify-content:center}.rc-header--scroll{justify-content:center;padding:.5rem 0 .25rem;border-top:1px solid var(--color-calendar-border)}.rc-header--scroll:first-child{border-top:none;padding-top:0}.rc-header__label--scroll{cursor:default}.rc-header__label--scroll:hover{background-color:transparent}.rc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding:0 .25rem}.rc-header__label{font-weight:600;font-size:.9375rem;cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-calendar);transition:background-color .15s}.rc-header__label:hover{background-color:var(--color-calendar-hover)}.rc-header__nav{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;border:none;background:transparent;cursor:pointer;color:var(--color-calendar-text);font-size:1rem;transition:background-color .15s}.rc-header__nav:hover{background-color:var(--color-calendar-hover)}.rc-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.75rem;font-weight:600;color:var(--color-calendar-weekday);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}.rc-weekday{padding:.25rem 0}.rc-grid{display:flex;flex-direction:column;gap:1px;overflow:hidden;position:relative}.rc-row{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}.rc-row--week-numbers{grid-template-columns:2rem repeat(7,1fr)}.rc-day{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-height:2.25rem;font-size:.875rem;border-radius:9999px;cursor:pointer;transition:background-color .15s,color .15s;user-select:none;-webkit-user-select:none}.rc-day:hover:not(.rc-day--disabled):not(.rc-day--selected):not(.rc-day--range-start):not(.rc-day--range-end){background-color:var(--color-calendar-hover)}.rc-day--other-month{color:var(--color-calendar-other-month)}.rc-day--hidden{visibility:hidden;pointer-events:none}.rc-day--today:not(.rc-day--selected):not(.rc-day--range-start):not(.rc-day--range-end){box-shadow:inset 0 0 0 1.5px var(--color-calendar-today-ring)}.rc-day--selected,.rc-day--range-start,.rc-day--range-end{background-color:var(--color-calendar-primary);color:var(--color-calendar-primary-text);font-weight:600}.rc-day--in-range{background-color:var(--color-calendar-range);border-radius:0}.rc-day--range-start{border-radius:9999px 0 0 9999px}.rc-day--range-end{border-radius:0 9999px 9999px 0}.rc-day--range-start.rc-day--range-end{border-radius:9999px}.rc-day--disabled{color:var(--color-calendar-disabled);cursor:not-allowed}.rc-day--disabled:hover{background-color:transparent}.rc-day--range-invalid{opacity:.4;cursor:not-allowed}.rc-day--focused:not(.rc-day--selected):not(.rc-day--range-start):not(.rc-day--range-end){box-shadow:0 0 0 2px var(--color-calendar-focus-ring)}.rc-day--has-label{flex-direction:column;gap:0;padding:.125rem 0}.rc-day__number{line-height:1.2}.rc-day__label{font-size:.5625rem;line-height:1;color:var(--color-calendar-day-meta, inherit);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rc-day__dot{width:4px;height:4px;border-radius:9999px;background-color:var(--color-calendar-day-meta, var(--color-calendar-available));flex-shrink:0}.rc-day--unavailable{text-decoration:line-through;color:var(--color-calendar-unavailable);cursor:not-allowed}.rc-day--unavailable:hover{background-color:transparent}.rc-day--selected .rc-day__label,.rc-day--range-start .rc-day__label,.rc-day--range-end .rc-day__label{color:var(--color-calendar-primary-text)}.rc-day--selected .rc-day__dot,.rc-day--range-start .rc-day__dot,.rc-day--range-end .rc-day__dot{background-color:var(--color-calendar-primary-text)}.rc-popup-overlay{display:flex;align-items:center;justify-content:center;background:var(--color-calendar-overlay);padding:1rem}@media(max-width:639px){.rc-popup-overlay .rc-calendar{width:100%;max-width:100%}}.rc-popup-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-calendar-border)}.rc-popup-header__title{font-weight:600;font-size:.9375rem}.rc-popup-header__close{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:9999px;border:none;background:transparent;cursor:pointer;color:var(--color-calendar-text);transition:background-color .15s}.rc-popup-header__close:hover{background-color:var(--color-calendar-hover)}.rc-month-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;padding:.25rem}.rc-month{display:flex;align-items:center;justify-content:center;height:2.75rem;font-size:.875rem;border-radius:var(--radius-calendar);cursor:pointer;transition:background-color .15s,color .15s;user-select:none;-webkit-user-select:none}.rc-month:hover:not(.rc-month--disabled):not(.rc-month--selected){background-color:var(--color-calendar-hover)}.rc-month--current:not(.rc-month--selected){box-shadow:inset 0 0 0 1.5px var(--color-calendar-today-ring)}.rc-month--selected{background-color:var(--color-calendar-primary);color:var(--color-calendar-primary-text);font-weight:600}.rc-month--disabled{color:var(--color-calendar-disabled);cursor:not-allowed}.rc-month--disabled:hover{background-color:transparent}.rc-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;padding:.25rem}.rc-year{display:flex;align-items:center;justify-content:center;height:2.75rem;font-size:.875rem;border-radius:var(--radius-calendar);cursor:pointer;transition:background-color .15s,color .15s;user-select:none;-webkit-user-select:none}.rc-year:hover:not(.rc-year--disabled):not(.rc-year--selected){background-color:var(--color-calendar-hover)}.rc-year--current:not(.rc-year--selected){box-shadow:inset 0 0 0 1.5px var(--color-calendar-today-ring)}.rc-year--selected{background-color:var(--color-calendar-primary);color:var(--color-calendar-primary-text);font-weight:600}.rc-year--disabled{color:var(--color-calendar-disabled);cursor:not-allowed}.rc-year--disabled:hover{background-color:transparent}.rc-weekdays--week-numbers{grid-template-columns:2rem repeat(7,1fr)}.rc-week-number{display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:500;color:var(--color-calendar-weekday);user-select:none;-webkit-user-select:none;opacity:.7}.rc-presets{display:flex;flex-wrap:wrap;gap:.375rem;padding-top:.625rem;margin-top:.625rem;border-top:1px solid var(--color-calendar-border)}.rc-preset{display:inline-flex;align-items:center;justify-content:center;padding:.3125rem .625rem;font-size:.75rem;font-weight:500;color:var(--color-calendar-primary);background:transparent;border:1px solid var(--color-calendar-border);border-radius:var(--radius-calendar);cursor:pointer;transition:background-color .15s,border-color .15s;user-select:none;-webkit-user-select:none;white-space:nowrap}.rc-preset:hover{background-color:var(--color-calendar-hover);border-color:var(--color-calendar-primary)}.rc-preset:active{background-color:var(--color-calendar-range)}.rc-grid-wrapper{position:relative;overflow:hidden}@keyframes rc-slide-in-from-right{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes rc-slide-in-from-left{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.rc-grid--slide-next{animation:rc-slide-in-from-right .2s ease-out}.rc-grid--slide-prev{animation:rc-slide-in-from-left .2s ease-out}@keyframes rc-view-enter{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.rc-view-enter{animation:rc-view-enter .15s ease-out}@keyframes rc-popup-enter{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.rc-popup-overlay .rc-calendar{animation:rc-popup-enter .2s ease-out}@media(prefers-reduced-motion:reduce){.rc-grid--slide-next,.rc-grid--slide-prev,.rc-view-enter,.rc-popup-overlay .rc-calendar{animation:none}}.rc-wizard-steps{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.75rem}.rc-wizard-step{width:.5rem;height:.5rem;border-radius:9999px;background-color:var(--color-calendar-border);transition:background-color .2s,transform .2s}.rc-wizard-step--active{background-color:var(--color-calendar-primary);transform:scale(1.25)}.rc-wizard-step--done{background-color:var(--color-calendar-primary)}.rc-wizard-label{text-align:center;font-size:.8125rem;font-weight:500;color:var(--color-calendar-weekday);margin-bottom:.5rem}.rc-wizard-back{display:flex;align-items:center;gap:.25rem;font-size:.8125rem;color:var(--color-calendar-primary);background:transparent;border:none;cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-calendar);transition:background-color .15s;margin-bottom:.5rem}.rc-wizard-back:hover{background-color:var(--color-calendar-hover)}.rc-calendar--wizard{min-width:17.5rem}.rc-wizard-summary{text-align:center;font-size:.8125rem;font-weight:600;color:var(--color-calendar-text);padding-top:.5rem;margin-top:.5rem;border-top:1px solid var(--color-calendar-border);transition:opacity .2s ease,transform .2s ease}.rc-calendar--wizard .rc-month,.rc-calendar--wizard .rc-year{height:3.25rem;font-size:.9375rem}@media(max-width:639px){.rc-day{min-height:2.75rem;font-size:.9375rem}.rc-header__nav{width:2.75rem;height:2.75rem}.rc-month,.rc-year{min-height:2.75rem}.rc-calendar--wizard .rc-month,.rc-calendar--wizard .rc-year{height:3.5rem;font-size:1rem}}.rc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.rc-header__nav:focus-visible,.rc-header__label:focus-visible,.rc-popup-header__close:focus-visible,.rc-wizard-back:focus-visible,.rc-preset:focus-visible{outline:2px solid var(--color-calendar-focus-ring);outline-offset:2px}button.rc-header__label{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:.25rem .5rem}
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@reachweb/alpine-calendar",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "type": "module",
5
- "description": "A lightweight, AlpineJS-native calendar component with inline/popup display, input binding with masking, and TailwindCSS 4 theming.",
5
+ "description": "A lightweight, AlpineJS-native calendar component with inline/popup display, input binding with masking, and CSS custom property theming.",
6
6
  "main": "dist/alpine-calendar.umd.js",
7
7
  "module": "dist/alpine-calendar.es.js",
8
8
  "types": "dist/index.d.ts",
@@ -28,7 +28,6 @@
28
28
  "alpinejs",
29
29
  "calendar",
30
30
  "datepicker",
31
- "tailwindcss",
32
31
  "livewire"
33
32
  ],
34
33
  "license": "MIT",
@@ -38,7 +37,6 @@
38
37
  },
39
38
  "devDependencies": {
40
39
  "@eslint/js": "^9.39.3",
41
- "@tailwindcss/vite": "^4.2.1",
42
40
  "@types/alpinejs": "^3.13.11",
43
41
  "@vitest/coverage-v8": "^4.0.18",
44
42
  "alpinejs": "^3.15.8",
@@ -49,7 +47,6 @@
49
47
  "lint-staged": "^16.2.7",
50
48
  "prettier": "^3.8.1",
51
49
  "simple-git-hooks": "^2.13.1",
52
- "tailwindcss": "^4.2.1",
53
50
  "terser": "^5.46.0",
54
51
  "typescript": "^5.9.3",
55
52
  "typescript-eslint": "^8.56.1",