@theengineerguy/chronos-picker 1.0.3 → 1.0.4

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Chronos Picker Contributors
-
-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.
+MIT License
+
+Copyright (c) 2024 Chronos Picker Contributors
+
+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

@@ -1,386 +1,386 @@
-# 🕐 Chronos Picker
-
-A modern, accessible, and fully-featured date & time picker for React with comprehensive timezone support.
-
-[![npm version](https://img.shields.io/npm/v/@chronos/picker.svg)](https://www.npmjs.com/package/@chronos/picker)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-
-## ✨ Features
-
-- 🌍 **Full Timezone Support** - IANA timezone database with automatic DST handling
-- ♿ **Accessible** - WCAG 2.1 compliant with full keyboard navigation
-- 🎨 **Modern UI** - Beautiful design with smooth animations
-- 📱 **Responsive** - Works seamlessly on desktop and mobile
-- 🌙 **Dark Mode** - Automatic dark mode support
-- 📦 **Lightweight** - Minimal dependencies (only Luxon for date handling)
-- 🎯 **Type-Safe** - Full TypeScript support
-- ⚡ **Performance** - Optimized rendering with React best practices
-
-## 📦 Installation
-
-```bash
-npm install @chronos/picker luxon
-```
-
-Or with yarn:
-
-```bash
-yarn add @chronos/picker luxon
-```
-
-## 🚀 Quick Start
-
-```tsx
-import React, { useState } from 'react';
-import { DateTimePicker, DateTimeValue } from '@chronos/picker';
-
-function App() {
-  const [value, setValue] = useState<DateTimeValue | null>(null);
-  
-  const handleChange = (newValue: DateTimeValue) => {
-    setValue(newValue);
-    console.log('ISO:', newValue.iso);
-    console.log('Formatted:', newValue.formatted);
-    console.log('Timestamp:', newValue.timestamp);
-  };
-  
-  return (
-    <DateTimePicker
-      value={value?.dateTime}
-      onChange={handleChange}
-      timezone="Asia/Kolkata"
-      placeholder="Select date and time"
-    />
-  );
-}
-```
-
-## 📖 API Reference
-
-### DateTimePicker Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `Date \| string \| DateTime` | `undefined` | Current selected value |
-| `onChange` | `(value: DateTimeValue) => void` | `undefined` | Callback when value changes |
-| `timezone` | `string` | `"Asia/Kolkata"` | IANA timezone identifier |
-| `dateFormat` | `string` | `"DD"` | Date format (Luxon tokens) |
-| `timeFormat` | `string` | `"HH:mm"` | Time format (Luxon tokens) |
-| `minDate` | `Date \| string` | `undefined` | Minimum selectable date |
-| `maxDate` | `Date \| string` | `undefined` | Maximum selectable date |
-| `placeholder` | `string` | `"Select date and time"` | Input placeholder text |
-| `disabled` | `boolean` | `false` | Disable the picker |
-| `showTime` | `boolean` | `true` | Show time picker |
-| `use24Hour` | `boolean` | `true` | Use 24-hour format |
-| `className` | `string` | `""` | Custom CSS class |
-| `ariaLabel` | `string` | `"Date and time picker"` | ARIA label for accessibility |
-| `showTimezoneSelector` | `boolean` | `false` | Show timezone selector |
-
-### DateTimeValue Type
-
-```typescript
-interface DateTimeValue {
-  iso: string;              // ISO 8601 string
-  formatted: string;        // Formatted display string
-  timestamp: number;        // Unix timestamp (ms)
-  dateTime: DateTime;       // Luxon DateTime object
-}
-```
-
-## 🎯 Usage Examples
-
-### Basic Usage with Default Timezone (IST)
-
-```tsx
-import { DateTimePicker } from '@chronos/picker';
-
-function BasicExample() {
-  return (
-    <DateTimePicker
-      onChange={(value) => console.log(value.iso)}
-      placeholder="Pick a date and time"
-    />
-  );
-}
-```
-
-### With Custom Timezone
-
-```tsx
-<DateTimePicker
-  timezone="America/New_York"
-  onChange={(value) => {
-    console.log('Selected time in New York:', value.formatted);
-  }}
-/>
-```
-
-### With Timezone Selector
-
-```tsx
-<DateTimePicker
-  showTimezoneSelector
-  timezone="UTC"
-  onChange={(value) => {
-    console.log('Timezone:', value.dateTime.zoneName);
-    console.log('Offset:', value.dateTime.offset);
-  }}
-/>
-```
-
-### Date Only (No Time)
-
-```tsx
-<DateTimePicker
-  showTime={false}
-  dateFormat="MMMM d, yyyy"
-  onChange={(value) => console.log(value.formatted)}
-/>
-```
-
-### 12-Hour Time Format
-
-```tsx
-<DateTimePicker
-  use24Hour={false}
-  timeFormat="hh:mm a"
-  onChange={(value) => console.log(value.formatted)}
-/>
-```
-
-### With Date Range Restrictions
-
-```tsx
-<DateTimePicker
-  minDate="2024-01-01"
-  maxDate="2024-12-31"
-  onChange={(value) => console.log('Selected:', value.iso)}
-/>
-```
-
-### Controlled Component
-
-```tsx
-function ControlledExample() {
-  const [selectedDate, setSelectedDate] = useState<DateTime | null>(null);
-  
-  return (
-    <div>
-      <DateTimePicker
-        value={selectedDate}
-        onChange={(value) => setSelectedDate(value.dateTime)}
-      />
-      
-      <button onClick={() => setSelectedDate(DateTime.now())}>
-        Set to Now
-      </button>
-      
-      <button onClick={() => setSelectedDate(null)}>
-        Clear
-      </button>
-    </div>
-  );
-}
-```
-
-### Custom Format and Styling
-
-```tsx
-<DateTimePicker
-  dateFormat="dd/MM/yyyy"
-  timeFormat="HH:mm:ss"
-  className="my-custom-picker"
-  ariaLabel="Event date and time"
-  onChange={(value) => console.log(value)}
-/>
-```
-
-### Multiple Timezones
-
-```tsx
-function MultiTimezoneExample() {
-  const [indiaTime, setIndiaTime] = useState<DateTimeValue | null>(null);
-  const [nyTime, setNYTime] = useState<DateTimeValue | null>(null);
-  
-  const handleIndiaChange = (value: DateTimeValue) => {
-    setIndiaTime(value);
-    // Convert to New York time
-    const converted = value.dateTime.setZone('America/New_York');
-    setNYTime({
-      ...value,
-      dateTime: converted,
-      formatted: converted.toFormat('DD HH:mm'),
-      iso: converted.toISO() || '',
-    });
-  };
-  
-  return (
-    <div>
-      <div>
-        <label>India Time (IST)</label>
-        <DateTimePicker
-          timezone="Asia/Kolkata"
-          value={indiaTime?.dateTime}
-          onChange={handleIndiaChange}
-        />
-      </div>
-      
-      <div>
-        <label>New York Time (EST/EDT)</label>
-        <DateTimePicker
-          timezone="America/New_York"
-          value={nyTime?.dateTime}
-          disabled
-        />
-      </div>
-    </div>
-  );
-}
-```
-
-## 🌍 Supported Timezones
-
-The component supports all IANA timezone identifiers. Common timezones are provided for quick selection:
-
-- Asia/Kolkata (India - IST)
-- America/New_York (Eastern Time)
-- America/Chicago (Central Time)
-- America/Denver (Mountain Time)
-- America/Los_Angeles (Pacific Time)
-- Europe/London (GMT/BST)
-- Europe/Paris (CET)
-- Asia/Dubai (GST)
-- Asia/Singapore (SGT)
-- Asia/Tokyo (JST)
-- Australia/Sydney (AEDT)
-- UTC
-
-## ♿ Accessibility
-
-Chronos Picker is built with accessibility in mind:
-
-- **Keyboard Navigation**: Full keyboard support (Tab, Enter, Space, Arrow keys, Escape)
-- **ARIA Labels**: Comprehensive ARIA attributes for screen readers
-- **Focus Management**: Proper focus indicators and logical tab order
-- **Screen Reader Support**: Announced date selections and state changes
-- **WCAG 2.1 Compliant**: Meets AA level accessibility standards
-
-### Keyboard Shortcuts
-
-- `Tab` / `Shift+Tab` - Navigate between elements
-- `Enter` / `Space` - Select date/time or toggle dropdown
-- `Arrow Keys` - Navigate calendar grid
-- `Escape` - Close picker
-
-## 🎨 Styling
-
-The component comes with beautiful default styles, but you can customize it:
-
-### Custom CSS
-
-```css
-/* Override default styles */
-.my-custom-picker .chronos-input {
-  border-color: #your-color;
-  border-radius: 12px;
-}
-
-.my-custom-picker .chronos-day.selected {
-  background-color: #your-brand-color;
-}
-```
-
-### Tailwind CSS
-
-```tsx
-<DateTimePicker
-  className="w-full max-w-md"
-  onChange={handleChange}
-/>
-```
-
-## 🔧 Advanced Usage
-
-### Working with Luxon DateTime
-
-```tsx
-import { DateTime } from 'luxon';
-
-function AdvancedExample() {
-  const handleChange = (value: DateTimeValue) => {
-    const dt = value.dateTime;
-    
-    // Access Luxon DateTime methods
-    console.log('Day of week:', dt.weekdayLong);
-    console.log('Week number:', dt.weekNumber);
-    console.log('Is DST:', dt.isInDST);
-    
-    // Format in different ways
-    console.log('ISO:', dt.toISO());
-    console.log('SQL:', dt.toSQL());
-    console.log('Relative:', dt.toRelative());
-    
-    // Convert to other timezones
-    const tokyo = dt.setZone('Asia/Tokyo');
-    console.log('Tokyo time:', tokyo.toFormat('HH:mm'));
-  };
-  
-  return <DateTimePicker onChange={handleChange} />;
-}
-```
-
-### Timezone Conversion Helper
-
-```tsx
-import { convertToTimezone } from '@chronos/picker';
-
-// Convert a date to specific timezone
-const indiaTime = new Date();
-const tokyoTime = convertToTimezone(indiaTime, 'Asia/Tokyo');
-console.log(tokyoTime.toISO());
-```
-
-## 🐛 Troubleshooting
-
-### Date not updating
-
-Make sure you're using a controlled component pattern:
-
-```tsx
-const [date, setDate] = useState<DateTime | null>(null);
-
-<DateTimePicker
-  value={date}
-  onChange={(value) => setDate(value.dateTime)}
-/>
-```
-
-### Timezone not changing
-
-Ensure you're using valid IANA timezone identifiers. Check the [IANA timezone database](https://www.iana.org/time-zones).
-
-### Styling issues
-
-Import the CSS file in your component or main app file:
-
-```tsx
-import '@chronos/picker/dist/style.css';
-```
-
-## 📄 License
-
-MIT © [Your Name]
-
-## 🤝 Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-## 🙏 Acknowledgments
-
-- Built with [React](https://reactjs.org/)
-- Date handling by [Luxon](https://moment.github.io/luxon/)
-- Inspired by modern design systems
-
----
-
-Made with ❤️ by developers, for developers
+# 🕐 Chronos Picker
+
+A modern, accessible, and fully-featured date & time picker for React with comprehensive timezone support.
+
+[![npm version](https://img.shields.io/npm/v/@chronos/picker.svg)](https://www.npmjs.com/package/@chronos/picker)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## ✨ Features
+
+- 🌍 **Full Timezone Support** - IANA timezone database with automatic DST handling
+- ♿ **Accessible** - WCAG 2.1 compliant with full keyboard navigation
+- 🎨 **Modern UI** - Beautiful design with smooth animations
+- 📱 **Responsive** - Works seamlessly on desktop and mobile
+- 🌙 **Dark Mode** - Automatic dark mode support
+- 📦 **Lightweight** - Minimal dependencies (only Luxon for date handling)
+- 🎯 **Type-Safe** - Full TypeScript support
+- ⚡ **Performance** - Optimized rendering with React best practices
+
+## 📦 Installation
+
+```bash
+npm install @chronos/picker luxon
+```
+
+Or with yarn:
+
+```bash
+yarn add @chronos/picker luxon
+```
+
+## 🚀 Quick Start
+
+```tsx
+import React, { useState } from 'react';
+import { DateTimePicker, DateTimeValue } from '@chronos/picker';
+
+function App() {
+  const [value, setValue] = useState<DateTimeValue | null>(null);
+
+  const handleChange = (newValue: DateTimeValue) => {
+    setValue(newValue);
+    console.log('ISO:', newValue.iso);
+    console.log('Formatted:', newValue.formatted);
+    console.log('Timestamp:', newValue.timestamp);
+  };
+
+  return (
+    <DateTimePicker
+      value={value?.dateTime}
+      onChange={handleChange}
+      timezone="Asia/Kolkata"
+      placeholder="Select date and time"
+    />
+  );
+}
+```
+
+## 📖 API Reference
+
+### DateTimePicker Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Date \| string \| DateTime` | `undefined` | Current selected value |
+| `onChange` | `(value: DateTimeValue) => void` | `undefined` | Callback when value changes |
+| `timezone` | `string` | `"Asia/Kolkata"` | IANA timezone identifier |
+| `dateFormat` | `string` | `"DD"` | Date format (Luxon tokens) |
+| `timeFormat` | `string` | `"HH:mm"` | Time format (Luxon tokens) |
+| `minDate` | `Date \| string` | `undefined` | Minimum selectable date |
+| `maxDate` | `Date \| string` | `undefined` | Maximum selectable date |
+| `placeholder` | `string` | `"Select date and time"` | Input placeholder text |
+| `disabled` | `boolean` | `false` | Disable the picker |
+| `showTime` | `boolean` | `true` | Show time picker |
+| `use24Hour` | `boolean` | `true` | Use 24-hour format |
+| `className` | `string` | `""` | Custom CSS class |
+| `ariaLabel` | `string` | `"Date and time picker"` | ARIA label for accessibility |
+| `showTimezoneSelector` | `boolean` | `false` | Show timezone selector |
+
+### DateTimeValue Type
+
+```typescript
+interface DateTimeValue {
+  iso: string;              // ISO 8601 string
+  formatted: string;        // Formatted display string
+  timestamp: number;        // Unix timestamp (ms)
+  dateTime: DateTime;       // Luxon DateTime object
+}
+```
+
+## 🎯 Usage Examples
+
+### Basic Usage with Default Timezone (IST)
+
+```tsx
+import { DateTimePicker } from '@chronos/picker';
+
+function BasicExample() {
+  return (
+    <DateTimePicker
+      onChange={(value) => console.log(value.iso)}
+      placeholder="Pick a date and time"
+    />
+  );
+}
+```
+
+### With Custom Timezone
+
+```tsx
+<DateTimePicker
+  timezone="America/New_York"
+  onChange={(value) => {
+    console.log('Selected time in New York:', value.formatted);
+  }}
+/>
+```
+
+### With Timezone Selector
+
+```tsx
+<DateTimePicker
+  showTimezoneSelector
+  timezone="UTC"
+  onChange={(value) => {
+    console.log('Timezone:', value.dateTime.zoneName);
+    console.log('Offset:', value.dateTime.offset);
+  }}
+/>
+```
+
+### Date Only (No Time)
+
+```tsx
+<DateTimePicker
+  showTime={false}
+  dateFormat="MMMM d, yyyy"
+  onChange={(value) => console.log(value.formatted)}
+/>
+```
+
+### 12-Hour Time Format
+
+```tsx
+<DateTimePicker
+  use24Hour={false}
+  timeFormat="hh:mm a"
+  onChange={(value) => console.log(value.formatted)}
+/>
+```
+
+### With Date Range Restrictions
+
+```tsx
+<DateTimePicker
+  minDate="2024-01-01"
+  maxDate="2024-12-31"
+  onChange={(value) => console.log('Selected:', value.iso)}
+/>
+```
+
+### Controlled Component
+
+```tsx
+function ControlledExample() {
+  const [selectedDate, setSelectedDate] = useState<DateTime | null>(null);
+
+  return (
+    <div>
+      <DateTimePicker
+        value={selectedDate}
+        onChange={(value) => setSelectedDate(value.dateTime)}
+      />
+
+      <button onClick={() => setSelectedDate(DateTime.now())}>
+        Set to Now
+      </button>
+
+      <button onClick={() => setSelectedDate(null)}>
+        Clear
+      </button>
+    </div>
+  );
+}
+```
+
+### Custom Format and Styling
+
+```tsx
+<DateTimePicker
+  dateFormat="dd/MM/yyyy"
+  timeFormat="HH:mm:ss"
+  className="my-custom-picker"
+  ariaLabel="Event date and time"
+  onChange={(value) => console.log(value)}
+/>
+```
+
+### Multiple Timezones
+
+```tsx
+function MultiTimezoneExample() {
+  const [indiaTime, setIndiaTime] = useState<DateTimeValue | null>(null);
+  const [nyTime, setNYTime] = useState<DateTimeValue | null>(null);
+
+  const handleIndiaChange = (value: DateTimeValue) => {
+    setIndiaTime(value);
+    // Convert to New York time
+    const converted = value.dateTime.setZone('America/New_York');
+    setNYTime({
+      ...value,
+      dateTime: converted,
+      formatted: converted.toFormat('DD HH:mm'),
+      iso: converted.toISO() || '',
+    });
+  };
+
+  return (
+    <div>
+      <div>
+        <label>India Time (IST)</label>
+        <DateTimePicker
+          timezone="Asia/Kolkata"
+          value={indiaTime?.dateTime}
+          onChange={handleIndiaChange}
+        />
+      </div>
+
+      <div>
+        <label>New York Time (EST/EDT)</label>
+        <DateTimePicker
+          timezone="America/New_York"
+          value={nyTime?.dateTime}
+          disabled
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+## 🌍 Supported Timezones
+
+The component supports all IANA timezone identifiers. Common timezones are provided for quick selection:
+
+- Asia/Kolkata (India - IST)
+- America/New_York (Eastern Time)
+- America/Chicago (Central Time)
+- America/Denver (Mountain Time)
+- America/Los_Angeles (Pacific Time)
+- Europe/London (GMT/BST)
+- Europe/Paris (CET)
+- Asia/Dubai (GST)
+- Asia/Singapore (SGT)
+- Asia/Tokyo (JST)
+- Australia/Sydney (AEDT)
+- UTC
+
+## ♿ Accessibility
+
+Chronos Picker is built with accessibility in mind:
+
+- **Keyboard Navigation**: Full keyboard support (Tab, Enter, Space, Arrow keys, Escape)
+- **ARIA Labels**: Comprehensive ARIA attributes for screen readers
+- **Focus Management**: Proper focus indicators and logical tab order
+- **Screen Reader Support**: Announced date selections and state changes
+- **WCAG 2.1 Compliant**: Meets AA level accessibility standards
+
+### Keyboard Shortcuts
+
+- `Tab` / `Shift+Tab` - Navigate between elements
+- `Enter` / `Space` - Select date/time or toggle dropdown
+- `Arrow Keys` - Navigate calendar grid
+- `Escape` - Close picker
+
+## 🎨 Styling
+
+The component comes with beautiful default styles, but you can customize it:
+
+### Custom CSS
+
+```css
+/* Override default styles */
+.my-custom-picker .chronos-input {
+  border-color: #your-color;
+  border-radius: 12px;
+}
+
+.my-custom-picker .chronos-day.selected {
+  background-color: #your-brand-color;
+}
+```
+
+### Tailwind CSS
+
+```tsx
+<DateTimePicker
+  className="w-full max-w-md"
+  onChange={handleChange}
+/>
+```
+
+## 🔧 Advanced Usage
+
+### Working with Luxon DateTime
+
+```tsx
+import { DateTime } from 'luxon';
+
+function AdvancedExample() {
+  const handleChange = (value: DateTimeValue) => {
+    const dt = value.dateTime;
+
+    // Access Luxon DateTime methods
+    console.log('Day of week:', dt.weekdayLong);
+    console.log('Week number:', dt.weekNumber);
+    console.log('Is DST:', dt.isInDST);
+
+    // Format in different ways
+    console.log('ISO:', dt.toISO());
+    console.log('SQL:', dt.toSQL());
+    console.log('Relative:', dt.toRelative());
+
+    // Convert to other timezones
+    const tokyo = dt.setZone('Asia/Tokyo');
+    console.log('Tokyo time:', tokyo.toFormat('HH:mm'));
+  };
+
+  return <DateTimePicker onChange={handleChange} />;
+}
+```
+
+### Timezone Conversion Helper
+
+```tsx
+import { convertToTimezone } from '@chronos/picker';
+
+// Convert a date to specific timezone
+const indiaTime = new Date();
+const tokyoTime = convertToTimezone(indiaTime, 'Asia/Tokyo');
+console.log(tokyoTime.toISO());
+```
+
+## 🐛 Troubleshooting
+
+### Date not updating
+
+Make sure you're using a controlled component pattern:
+
+```tsx
+const [date, setDate] = useState<DateTime | null>(null);
+
+<DateTimePicker
+  value={date}
+  onChange={(value) => setDate(value.dateTime)}
+/>
+```
+
+### Timezone not changing
+
+Ensure you're using valid IANA timezone identifiers. Check the [IANA timezone database](https://www.iana.org/time-zones).
+
+### Styling issues
+
+Import the CSS file in your component or main app file:
+
+```tsx
+import '@chronos/picker/dist/style.css';
+```
+
+## 📄 License
+
+MIT © [Your Name]
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 🙏 Acknowledgments
+
+- Built with [React](https://reactjs.org/)
+- Date handling by [Luxon](https://moment.github.io/luxon/)
+- Inspired by modern design systems
+
+---
+
+Made with ❤️ by Debmalya, for developers

package/dist/style.css

@@ -1 +1 @@
-.chronos-picker{position:relative;display:inline-block;width:100%;max-width:320px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#1a1a1a}.chronos-picker[data-disabled=true]{opacity:.6;cursor:not-allowed}.chronos-input-wrapper{position:relative;display:flex;align-items:center;cursor:pointer}.chronos-input{width:100%;padding:10px 40px 10px 14px;border:1.5px solid #d1d5db;border-radius:8px;font-size:14px;color:#1a1a1a;background-color:#fff;transition:all .2s ease;cursor:pointer;outline:none}.chronos-input:hover:not(:disabled){border-color:#9ca3af}.chronos-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chronos-input:disabled{background-color:#f3f4f6;cursor:not-allowed}.chronos-input::placeholder{color:#9ca3af}.chronos-calendar-icon{position:absolute;right:12px;width:20px;height:20px;color:#6b7280;pointer-events:none;transition:color .2s ease}.chronos-input:hover:not(:disabled)~.chronos-calendar-icon,.chronos-input:focus~.chronos-calendar-icon{color:#3b82f6}.chronos-dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:9999;min-width:320px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 4px 6px -1px #00000014,0 10px 30px -4px #0000001f;overflow:hidden;animation:chronos-dropdown-appear .2s ease}.chronos-dropdown-content{display:flex;flex-direction:column}.chronos-dropdown[data-orientation=portrait] .chronos-dropdown-content{flex-direction:column}.chronos-dropdown[data-orientation=landscape]{min-width:auto}.chronos-dropdown[data-orientation=landscape] .chronos-dropdown-content{flex-direction:row}.chronos-dropdown[data-orientation=landscape] .chronos-calendar{border-right:1px solid #e5e7eb;border-bottom:none}.chronos-dropdown[data-orientation=landscape] .chronos-sidebar{display:flex;flex-direction:column;min-width:240px}.chronos-dropdown[data-orientation=landscape] .chronos-time-picker{border-top:none;border-bottom:1px solid #e5e7eb}.chronos-dropdown[data-orientation=landscape] .chronos-time-picker:last-child{border-bottom:none}.chronos-dropdown[data-orientation=landscape] .chronos-timezone-selector{border-top:none}@keyframes chronos-dropdown-appear{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.chronos-range-summary{padding:16px 16px 0;margin-bottom:8px}.chronos-range-nights{font-size:1.5rem;font-weight:700;color:#1a1a1a;letter-spacing:-.025em;line-height:1.2}.chronos-range-dates{font-size:.875rem;color:#6b7280;margin-top:4px}.chronos-calendar{padding:16px}.chronos-calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:8px}.chronos-nav-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:6px;background:transparent;color:#4b5563;font-size:20px;font-weight:600;cursor:pointer;transition:all .15s ease}.chronos-nav-button:hover{background:#f3f4f6;color:#1a1a1a}.chronos-nav-button:active{transform:scale(.95)}.chronos-month-year-selectors{display:flex;gap:8px;flex:1;justify-content:center}.chronos-month-select,.chronos-year-select{padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-weight:500;color:#1a1a1a;background-color:#fff;cursor:pointer;transition:all .15s ease;outline:none}.chronos-month-select:hover,.chronos-year-select:hover{border-color:#9ca3af}.chronos-month-select:focus,.chronos-year-select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chronos-calendar-grid{display:flex;flex-direction:column;gap:4px}.chronos-weekday-row,.chronos-week-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.chronos-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.chronos-day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0 auto;border:none;border-radius:50%;font-size:14px;font-weight:500;color:#1a1a1a;background:transparent;cursor:pointer;transition:all .2s ease;position:relative}.chronos-day:hover:not(.disabled){background:#f3f4f6;transform:scale(1.08)}.chronos-day.other-month{color:#9ca3af}.chronos-day.today{color:#3b82f6;font-weight:600}.chronos-day.today:after{content:"";position:absolute;bottom:5px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:#3b82f6}.chronos-day.selected{background:#3b82f6;color:#fff;font-weight:600;box-shadow:0 2px 8px #3b82f659}.chronos-day.selected:hover{background:#2563eb;box-shadow:0 2px 12px #2563eb66}.chronos-day.disabled{color:#d1d5db;cursor:not-allowed;opacity:.5}.chronos-day.disabled:hover{background:transparent;transform:none}.chronos-day.in-range{background:#e5e7eb;border-radius:0}.chronos-day.in-range:hover{background:#d1d5db}.chronos-day.range-start{border-radius:50% 0 0 50%}.chronos-day.range-start.in-range{background:#e5e7eb}.chronos-day.range-end{border-radius:0 50% 50% 0}.chronos-day.range-end.in-range{background:#e5e7eb}.chronos-day.range-start.selected,.chronos-day.range-end.selected{background:#1a1a1a;color:#fff;font-weight:600;box-shadow:0 0 0 2px #fff}.chronos-day.range-start.selected:hover,.chronos-day.range-end.selected:hover{background:#374151}.chronos-day.range-start.range-end{border-radius:50%}.chronos-day:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.chronos-time-picker{padding:16px}.chronos-dropdown[data-orientation=portrait] .chronos-time-picker{border-top:1px solid #e5e7eb}.chronos-time-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-weight:600;color:#4b5563}.chronos-clock-icon{width:18px;height:18px;color:#6b7280}.chronos-time-controls{display:flex;align-items:flex-end;justify-content:center;gap:8px}.chronos-time-input-group{display:flex;flex-direction:column;gap:4px}.chronos-time-label{font-size:11px;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.chronos-time-select{width:70px;padding:8px 10px;border:1.5px solid #d1d5db;border-radius:6px;font-size:16px;font-weight:600;color:#1a1a1a;background-color:#fff;cursor:pointer;transition:all .15s ease;outline:none;text-align:center}.chronos-time-select:hover{border-color:#9ca3af}.chronos-time-select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chronos-time-separator{font-size:24px;font-weight:700;color:#1a1a1a;line-height:1;margin-bottom:8px}.chronos-period-toggle{padding:8px 16px;border:1.5px solid #d1d5db;border-radius:6px;font-size:14px;font-weight:600;color:#1a1a1a;background-color:#fff;cursor:pointer;transition:all .15s ease;outline:none}.chronos-period-toggle:hover{border-color:#3b82f6;background-color:#eff6ff;color:#3b82f6}.chronos-period-toggle:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chronos-period-toggle:active{transform:scale(.95)}.chronos-timezone-selector{padding:16px}.chronos-dropdown[data-orientation=portrait] .chronos-timezone-selector{border-top:1px solid #e5e7eb}.chronos-timezone-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-weight:600;color:#4b5563}.chronos-globe-icon{width:18px;height:18px;color:#6b7280}.chronos-timezone-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:1.5px solid #d1d5db;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .15s ease;outline:none}.chronos-timezone-button:hover{border-color:#9ca3af}.chronos-timezone-button:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chronos-timezone-label{font-weight:500;color:#1a1a1a;flex:1;text-align:left}.chronos-timezone-offset{font-size:12px;color:#6b7280;margin-right:8px}.chronos-chevron{width:16px;height:16px;color:#6b7280;transition:transform .2s ease}.chronos-chevron.expanded{transform:rotate(180deg)}.chronos-timezone-list{margin-top:8px;max-height:240px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:8px;background:#fff;animation:chronos-timezone-list-appear .2s ease}@keyframes chronos-timezone-list-appear{0%{opacity:0;max-height:0}to{opacity:1;max-height:240px}}.chronos-timezone-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:none;border-bottom:1px solid #f3f4f6;background:transparent;text-align:left;cursor:pointer;transition:background .15s ease;outline:none}.chronos-timezone-option:last-child{border-bottom:none}.chronos-timezone-option:hover{background:#f9fafb}.chronos-timezone-option.selected{background:#eff6ff}.chronos-timezone-option:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.chronos-timezone-option-label{font-weight:500;color:#1a1a1a}.chronos-timezone-option.selected .chronos-timezone-option-label{color:#3b82f6;font-weight:600}.chronos-timezone-option-offset{font-size:12px;color:#6b7280}@media (max-width: 480px){.chronos-dropdown{min-width:calc(100vw - 32px);max-width:calc(100vw - 32px)}.chronos-picker{max-width:100%}}.chronos-timezone-list::-webkit-scrollbar{width:6px}.chronos-timezone-list::-webkit-scrollbar-track{background:#f3f4f6}.chronos-timezone-list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.chronos-timezone-list::-webkit-scrollbar-thumb:hover{background:#9ca3af}.chronos-picker[data-theme=dark]{color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-dropdown[data-orientation=landscape] .chronos-calendar{border-right-color:#374151}.chronos-picker[data-theme=dark] .chronos-dropdown[data-orientation=landscape] .chronos-time-picker{border-bottom-color:#374151}.chronos-picker[data-theme=dark] .chronos-dropdown[data-orientation=portrait] .chronos-time-picker,.chronos-picker[data-theme=dark] .chronos-dropdown[data-orientation=portrait] .chronos-timezone-selector{border-top-color:#374151}.chronos-picker[data-theme=dark] .chronos-input{background-color:#1f2937;border-color:#374151;color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-input:hover:not(:disabled){border-color:#4b5563}.chronos-picker[data-theme=dark] .chronos-input:disabled{background-color:#111827}.chronos-picker[data-theme=dark] .chronos-input::placeholder{color:#6b7280}.chronos-picker[data-theme=dark] .chronos-calendar-icon{color:#9ca3af}.chronos-picker[data-theme=dark] .chronos-dropdown{background:#1f2937;border-color:#374151;box-shadow:0 10px 40px #0006}.chronos-picker[data-theme=dark] .chronos-nav-button{color:#9ca3af}.chronos-picker[data-theme=dark] .chronos-nav-button:hover{background:#374151;color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-month-select,.chronos-picker[data-theme=dark] .chronos-year-select{background-color:#1f2937;border-color:#374151;color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-weekday{color:#9ca3af}.chronos-picker[data-theme=dark] .chronos-day{color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-day:hover:not(.disabled){background:#374151}.chronos-picker[data-theme=dark] .chronos-day.other-month{color:#6b7280}.chronos-picker[data-theme=dark] .chronos-day.today{color:#60a5fa}.chronos-picker[data-theme=dark] .chronos-day.today:after{background:#60a5fa}.chronos-picker[data-theme=dark] .chronos-day.selected{background:#3b82f6;color:#fff}.chronos-picker[data-theme=dark] .chronos-range-nights{color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-range-dates{color:#9ca3af}.chronos-picker[data-theme=dark] .chronos-day.in-range{background:#374151}.chronos-picker[data-theme=dark] .chronos-day.in-range:hover{background:#4b5563}.chronos-picker[data-theme=dark] .chronos-day.range-start.selected,.chronos-picker[data-theme=dark] .chronos-day.range-end.selected{background:#3b82f6;color:#fff;box-shadow:0 0 0 2px #1f2937}.chronos-picker[data-theme=dark] .chronos-time-header,.chronos-picker[data-theme=dark] .chronos-timezone-header{color:#9ca3af}.chronos-picker[data-theme=dark] .chronos-time-select,.chronos-picker[data-theme=dark] .chronos-period-toggle,.chronos-picker[data-theme=dark] .chronos-timezone-button{background-color:#1f2937;border-color:#374151;color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-timezone-list{background:#1f2937;border-color:#374151}.chronos-picker[data-theme=dark] .chronos-timezone-option:hover{background:#374151}.chronos-picker[data-theme=dark] .chronos-timezone-option.selected{background:#1e3a5f}.chronos-picker[data-theme=dark] .chronos-timezone-option.selected .chronos-timezone-option-label{color:#60a5fa}
+.chronos-picker{position:relative;display:inline-block;width:100%;max-width:320px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:#1a1a1a}.chronos-picker[data-disabled=true]{opacity:.6;cursor:not-allowed}.chronos-input-wrapper{position:relative;display:flex;align-items:center;cursor:pointer}.chronos-input{width:100%;padding:10px 40px 10px 14px;border:1.5px solid #d1d5db;border-radius:8px;font-size:14px;color:#1a1a1a;background-color:#fff;transition:all .2s ease;cursor:pointer;outline:none}.chronos-input:hover:not(:disabled){border-color:#9ca3af}.chronos-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chronos-input:disabled{background-color:#f3f4f6;cursor:not-allowed}.chronos-input::placeholder{color:#9ca3af}.chronos-calendar-icon{position:absolute;right:12px;width:20px;height:20px;color:#6b7280;pointer-events:none;transition:color .2s ease}.chronos-input:hover:not(:disabled)~.chronos-calendar-icon,.chronos-input:focus~.chronos-calendar-icon{color:#3b82f6}.chronos-dropdown{position:absolute;top:calc(100% + 8px);left:0;z-index:99999;min-width:320px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 4px 6px -1px #00000014,0 10px 30px -4px #0000001f;overflow:hidden;animation:chronos-dropdown-appear .2s ease}.chronos-dropdown-content{display:flex;flex-direction:column}.chronos-dropdown[data-orientation=portrait] .chronos-dropdown-content{flex-direction:column}.chronos-dropdown[data-orientation=landscape]{min-width:auto}.chronos-dropdown[data-orientation=landscape] .chronos-dropdown-content{flex-direction:row}.chronos-dropdown[data-orientation=landscape] .chronos-calendar{border-right:1px solid #e5e7eb;border-bottom:none}.chronos-dropdown[data-orientation=landscape] .chronos-sidebar{display:flex;flex-direction:column;min-width:240px}.chronos-dropdown[data-orientation=landscape] .chronos-time-picker{border-top:none;border-bottom:1px solid #e5e7eb}.chronos-dropdown[data-orientation=landscape] .chronos-time-picker:last-child{border-bottom:none}.chronos-dropdown[data-orientation=landscape] .chronos-timezone-selector{border-top:none}@keyframes chronos-dropdown-appear{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.chronos-range-summary{padding:16px 16px 0;margin-bottom:8px}.chronos-range-nights{font-size:1.5rem;font-weight:700;color:#1a1a1a;letter-spacing:-.025em;line-height:1.2}.chronos-range-dates{font-size:.875rem;color:#6b7280;margin-top:4px}.chronos-calendar{padding:16px}.chronos-calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:8px}.chronos-nav-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:6px;background:transparent;color:#4b5563;font-size:20px;font-weight:600;cursor:pointer;transition:all .15s ease}.chronos-nav-button:hover{background:#f3f4f6;color:#1a1a1a}.chronos-nav-button:active{transform:scale(.95)}.chronos-month-year-selectors{display:flex;gap:8px;flex:1;justify-content:center}.chronos-month-select,.chronos-year-select{padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-weight:500;color:#1a1a1a;background-color:#fff;cursor:pointer;transition:all .15s ease;outline:none}.chronos-month-select:hover,.chronos-year-select:hover{border-color:#9ca3af}.chronos-month-select:focus,.chronos-year-select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chronos-calendar-grid{display:flex;flex-direction:column;gap:4px}.chronos-weekday-row,.chronos-week-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.chronos-weekday{display:flex;align-items:center;justify-content:center;height:32px;font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.chronos-day{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0 auto;border:none;border-radius:50%;font-size:14px;font-weight:500;color:#1a1a1a;background:transparent;cursor:pointer;transition:all .2s ease;position:relative}.chronos-day:hover:not(.disabled){background:#f3f4f6;transform:scale(1.08)}.chronos-day.other-month{color:#9ca3af}.chronos-day.today{color:#3b82f6;font-weight:600}.chronos-day.today:after{content:"";position:absolute;bottom:5px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:#3b82f6}.chronos-day.selected{background:#3b82f6;color:#fff;font-weight:600;box-shadow:0 2px 8px #3b82f659}.chronos-day.selected:hover{background:#2563eb;box-shadow:0 2px 12px #2563eb66}.chronos-day.disabled{color:#d1d5db;cursor:not-allowed;opacity:.5}.chronos-day.disabled:hover{background:transparent;transform:none}.chronos-day.in-range{background:#e5e7eb;border-radius:0}.chronos-day.in-range:hover{background:#d1d5db}.chronos-day.range-start{border-radius:50% 0 0 50%}.chronos-day.range-start.in-range{background:#e5e7eb}.chronos-day.range-end{border-radius:0 50% 50% 0}.chronos-day.range-end.in-range{background:#e5e7eb}.chronos-day.range-start.selected,.chronos-day.range-end.selected{background:#1a1a1a;color:#fff;font-weight:600;box-shadow:0 0 0 2px #fff}.chronos-day.range-start.selected:hover,.chronos-day.range-end.selected:hover{background:#374151}.chronos-day.range-start.range-end{border-radius:50%}.chronos-day:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.chronos-time-picker{padding:16px}.chronos-dropdown[data-orientation=portrait] .chronos-time-picker{border-top:1px solid #e5e7eb}.chronos-time-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-weight:600;color:#4b5563}.chronos-clock-icon{width:18px;height:18px;color:#6b7280}.chronos-time-controls{display:flex;align-items:flex-end;justify-content:center;gap:8px}.chronos-time-input-group{display:flex;flex-direction:column;gap:4px}.chronos-time-label{font-size:11px;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.chronos-time-select{width:70px;padding:8px 10px;border:1.5px solid #d1d5db;border-radius:6px;font-size:16px;font-weight:600;color:#1a1a1a;background-color:#fff;cursor:pointer;transition:all .15s ease;outline:none;text-align:center}.chronos-time-select:hover{border-color:#9ca3af}.chronos-time-select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chronos-time-separator{font-size:24px;font-weight:700;color:#1a1a1a;line-height:1;margin-bottom:8px}.chronos-period-toggle{padding:8px 16px;border:1.5px solid #d1d5db;border-radius:6px;font-size:14px;font-weight:600;color:#1a1a1a;background-color:#fff;cursor:pointer;transition:all .15s ease;outline:none}.chronos-period-toggle:hover{border-color:#3b82f6;background-color:#eff6ff;color:#3b82f6}.chronos-period-toggle:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chronos-period-toggle:active{transform:scale(.95)}.chronos-timezone-selector{padding:16px}.chronos-dropdown[data-orientation=portrait] .chronos-timezone-selector{border-top:1px solid #e5e7eb}.chronos-timezone-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-weight:600;color:#4b5563}.chronos-globe-icon{width:18px;height:18px;color:#6b7280}.chronos-timezone-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:1.5px solid #d1d5db;border-radius:8px;background-color:#fff;cursor:pointer;transition:all .15s ease;outline:none}.chronos-timezone-button:hover{border-color:#9ca3af}.chronos-timezone-button:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.chronos-timezone-label{font-weight:500;color:#1a1a1a;flex:1;text-align:left}.chronos-timezone-offset{font-size:12px;color:#6b7280;margin-right:8px}.chronos-chevron{width:16px;height:16px;color:#6b7280;transition:transform .2s ease}.chronos-chevron.expanded{transform:rotate(180deg)}.chronos-timezone-list{margin-top:8px;max-height:240px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:8px;background:#fff;animation:chronos-timezone-list-appear .2s ease}@keyframes chronos-timezone-list-appear{0%{opacity:0;max-height:0}to{opacity:1;max-height:240px}}.chronos-timezone-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:none;border-bottom:1px solid #f3f4f6;background:transparent;text-align:left;cursor:pointer;transition:background .15s ease;outline:none}.chronos-timezone-option:last-child{border-bottom:none}.chronos-timezone-option:hover{background:#f9fafb}.chronos-timezone-option.selected{background:#eff6ff}.chronos-timezone-option:focus-visible{outline:2px solid #3b82f6;outline-offset:-2px}.chronos-timezone-option-label{font-weight:500;color:#1a1a1a}.chronos-timezone-option.selected .chronos-timezone-option-label{color:#3b82f6;font-weight:600}.chronos-timezone-option-offset{font-size:12px;color:#6b7280}@media (max-width: 480px){.chronos-dropdown{min-width:calc(100vw - 32px);max-width:calc(100vw - 32px)}.chronos-picker{max-width:100%}}.chronos-timezone-list::-webkit-scrollbar{width:6px}.chronos-timezone-list::-webkit-scrollbar-track{background:#f3f4f6}.chronos-timezone-list::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.chronos-timezone-list::-webkit-scrollbar-thumb:hover{background:#9ca3af}.chronos-picker[data-theme=dark]{color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-dropdown[data-orientation=landscape] .chronos-calendar{border-right-color:#374151}.chronos-picker[data-theme=dark] .chronos-dropdown[data-orientation=landscape] .chronos-time-picker{border-bottom-color:#374151}.chronos-picker[data-theme=dark] .chronos-dropdown[data-orientation=portrait] .chronos-time-picker,.chronos-picker[data-theme=dark] .chronos-dropdown[data-orientation=portrait] .chronos-timezone-selector{border-top-color:#374151}.chronos-picker[data-theme=dark] .chronos-input{background-color:#1f2937;border-color:#374151;color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-input:hover:not(:disabled){border-color:#4b5563}.chronos-picker[data-theme=dark] .chronos-input:disabled{background-color:#111827}.chronos-picker[data-theme=dark] .chronos-input::placeholder{color:#6b7280}.chronos-picker[data-theme=dark] .chronos-calendar-icon{color:#9ca3af}.chronos-picker[data-theme=dark] .chronos-dropdown{background:#1f2937;border-color:#374151;box-shadow:0 10px 40px #0006}.chronos-picker[data-theme=dark] .chronos-nav-button{color:#9ca3af}.chronos-picker[data-theme=dark] .chronos-nav-button:hover{background:#374151;color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-month-select,.chronos-picker[data-theme=dark] .chronos-year-select{background-color:#1f2937;border-color:#374151;color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-weekday{color:#9ca3af}.chronos-picker[data-theme=dark] .chronos-day{color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-day:hover:not(.disabled){background:#374151}.chronos-picker[data-theme=dark] .chronos-day.other-month{color:#6b7280}.chronos-picker[data-theme=dark] .chronos-day.today{color:#60a5fa}.chronos-picker[data-theme=dark] .chronos-day.today:after{background:#60a5fa}.chronos-picker[data-theme=dark] .chronos-day.selected{background:#3b82f6;color:#fff}.chronos-picker[data-theme=dark] .chronos-range-nights{color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-range-dates{color:#9ca3af}.chronos-picker[data-theme=dark] .chronos-day.in-range{background:#374151}.chronos-picker[data-theme=dark] .chronos-day.in-range:hover{background:#4b5563}.chronos-picker[data-theme=dark] .chronos-day.range-start.selected,.chronos-picker[data-theme=dark] .chronos-day.range-end.selected{background:#3b82f6;color:#fff;box-shadow:0 0 0 2px #1f2937}.chronos-picker[data-theme=dark] .chronos-time-header,.chronos-picker[data-theme=dark] .chronos-timezone-header{color:#9ca3af}.chronos-picker[data-theme=dark] .chronos-time-select,.chronos-picker[data-theme=dark] .chronos-period-toggle,.chronos-picker[data-theme=dark] .chronos-timezone-button{background-color:#1f2937;border-color:#374151;color:#f3f4f6}.chronos-picker[data-theme=dark] .chronos-timezone-list{background:#1f2937;border-color:#374151}.chronos-picker[data-theme=dark] .chronos-timezone-option:hover{background:#374151}.chronos-picker[data-theme=dark] .chronos-timezone-option.selected{background:#1e3a5f}.chronos-picker[data-theme=dark] .chronos-timezone-option.selected .chronos-timezone-option-label{color:#60a5fa}

package/package.json

@@ -1,61 +1,61 @@
-{
-  "name": "@theengineerguy/chronos-picker",
-  "version": "1.0.3",
-  "description": "A modern, accessible date & time picker with comprehensive timezone support",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint src --ext ts,tsx",
-    "test": "vitest",
-    "prepublishOnly": "npm run build",
-    "publish:npm": "npm publish --access public"
-  },
-  "keywords": [
-    "datepicker",
-    "timepicker",
-    "datetime",
-    "timezone",
-    "react",
-    "component",
-    "accessible",
-    "a11y"
-  ],
-  "author": "Debmalya Biswas <viperbale.db.@gmail.com>",
-  "license": "MIT",
-  "homepage": "https://github.com/AnTIdoTe003/chronos-picker#readme",
-  "bugs": {
-    "url": "https://github.com/AnTIdoTe003/chronos-picker/issues"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "dependencies": {
-    "luxon": "^3.4.4"
-  },
-  "devDependencies": {
-    "@types/luxon": "^3.4.2",
-    "@types/node": "^25.2.3",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vite-plugin-dts": "^3.7.1",
-    "vitest": "^1.2.1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/AnTIdoTe003/chronos-picker"
-  }
-}
+{
+  "name": "@theengineerguy/chronos-picker",
+  "version": "1.0.4",
+  "description": "A modern, accessible date & time picker with comprehensive timezone support",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx",
+    "test": "vitest",
+    "prepublishOnly": "npm run build",
+    "publish:npm": "npm publish --access public"
+  },
+  "keywords": [
+    "datepicker",
+    "timepicker",
+    "datetime",
+    "timezone",
+    "react",
+    "component",
+    "accessible",
+    "a11y"
+  ],
+  "author": "Debmalya Biswas <viperbale.db.@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://chronos-picker.debmalya.in",
+  "bugs": {
+    "url": "https://github.com/AnTIdoTe003/chronos-picker/issues"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "luxon": "^3.4.4"
+  },
+  "devDependencies": {
+    "@types/luxon": "^3.4.2",
+    "@types/node": "^25.2.3",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vite-plugin-dts": "^3.7.1",
+    "vitest": "^1.2.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AnTIdoTe003/chronos-picker"
+  }
+}