timepicker-ui 3.0.0 → 3.1.0

package/README.md

@@ -1,60 +1,58 @@
 # timepicker-ui
 
-> ⚠️ **Upgrading from v2 to v3?**  
-> Major changes were introduced in version 3.0.  
-> 👉 [Click here to view the Upgrade Guide](#📈-upgrade-guide-v2-→-v3)
-
-A modern, lightweight, and fully customizable time picker library built with TypeScript. Features Google's Material Design principles with extensive theming support and framework-agnostic architecture.
+Modern time picker library built with TypeScript. Works with any framework or vanilla JavaScript.
 
 [![npm version](https://badge.fury.io/js/timepicker-ui.svg)](https://badge.fury.io/js/timepicker-ui)
 [![downloads](https://img.shields.io/npm/dw/timepicker-ui)](https://npmcharts.com/compare/timepicker-ui?minimal=true)
 [![license](https://img.shields.io/badge/license-MIT-green.svg)](https://img.shields.io/npm/l/timepicker-ui)
 
----
+[Live Demo](https://timepicker-ui.vercel.app/) • [Documentation](https://timepicker-ui.vercel.app/docs) • [Changelog](./CHANGELOG.md)
 
-## 📦 Live Demo
+**Upgrading from v2?** Check the [upgrade guide](#upgrade-guide-v2--v3) below.
 
-Curious how it works in practice?  
-👉 [Click here to see live examples](https://timepicker-ui.vercel.app/)
+## Features
 
----
+- 9 built-in themes (Material, Crane, Dark, Glassmorphic, Cyberpunk, and more)
+- Mobile-first design with touch support
+- Framework agnostic - works with React, Vue, Angular, Svelte, or vanilla JS
+- Full TypeScript support
+- Inline mode for always-visible timepicker
+- ARIA-compliant and keyboard accessible
+- SSR compatible
+- Lightweight with tree-shaking support
 
-## ✨ Features
+## Known Limitations
 
-- 🎨 **9 Built-in Themes** — Material, Crane, Dark, Glassmorphic, Cyberpunk, AI, and more
-- 📱 **Mobile-First Design** — Responsive with touch and keyboard support
-- 🚀 **Framework Agnostic** — Works with vanilla JS, React, Vue, Angular, and others
-- 🔧 **TypeScript Support** — Full type definitions and IntelliSense
-- 🎯 **Inline Mode** — Always-visible timepicker without modal overlay
-- 🛠️ **Rich API** — Comprehensive methods and event system
-- ♿ **Accessible** — ARIA-compliant with keyboard navigation
-- 🌐 **SSR Compatible** — Works with Next.js, Nuxt, and other SSR frameworks
-- 📦 **Lightweight** — Minimal footprint with tree-shaking support
+This project is actively maintained. Some areas planned for improvement:
 
-## 🧭 Roadmap & Known Limitations
+- No unit/integration tests yet
+- Some files need refactoring
+- A few `any` types remain in the codebase
+- No performance monitoring
 
-This project is actively maintained and evolving. Some areas are planned for future improvements:
+Contributions welcome! Feel free to [open an issue or PR](https://github.com/pglejzer/timepicker-ui/issues).
 
-- ❌ No formal tests (unit/integration) — **planned for future releases**
-- ❌ Some files are too large — **will be split/refactored**
-- ❌ A few `any` types in the codebase — **will be replaced with strict typings**
-- ❌ No performance monitoring — **planned metrics/logging in dev mode**
+## Installation
 
-If you're interested in contributing to any of these areas, feel free to [open an issue or pull request](https://github.com/pglejzer/timepicker-ui/issues)!
+```bash
+npm install timepicker-ui
+```
 
----
+## Important: Global CSS Required
 
-## 🚀 Installation
+Your app needs this global CSS rule for correct styling:
 
-```bash
-npm install timepicker-ui
-# or
-yarn add timepicker-ui
+```css
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 ```
 
----
+Most projects include this by default.
 
-## 📖 Quick Start
+## Quick Start
 
 ### Basic Usage
 
@@ -64,6 +62,7 @@ yarn add timepicker-ui
 
 ```javascript
 import { TimepickerUI } from "timepicker-ui";
+import "timepicker-ui/main.css";
 
 const input = document.querySelector("#timepicker");
 const picker = new TimepickerUI(input);
@@ -78,15 +77,19 @@ const picker = new TimepickerUI(input, {
   clockType: "24h",
   animation: true,
   backdrop: true,
+  onConfirm: (data) => {
+    console.log("Selected time:", data);
+  },
 });
 picker.create();
 ```
 
-### React Integration
+### React Example
 
 ```tsx
 import { useEffect, useRef } from "react";
 import { TimepickerUI } from "timepicker-ui";
+import "timepicker-ui/main.css";
 
 function TimePickerComponent() {
   const inputRef = useRef<HTMLInputElement>(null);
@@ -108,439 +111,264 @@ function TimePickerComponent() {
 }
 ```
 
----
-
-## ⚙️ Configuration Options
-
-| Option                           | Type                | Default         | Description                                          |
-| -------------------------------- | ------------------- | --------------- | ---------------------------------------------------- |
-| `amLabel`                        | `string`            | `"AM"`          | Custom text for AM label                             |
-| `animation`                      | `boolean`           | `true`          | Enable/disable open/close animations                 |
-| `appendModalSelector`            | `string`            | `""`            | DOM selector to append timepicker (defaults to body) |
-| `backdrop`                       | `boolean`           | `true`          | Show/hide backdrop overlay                           |
-| `cancelLabel`                    | `string`            | `"CANCEL"`      | Text for cancel button                               |
-| `clockType`                      | `"12h" \| "24h"`    | `"12h"`         | Clock format type                                    |
-| `cssClass`                       | `string`            | `undefined`     | Additional CSS class for timepicker wrapper          |
-| `currentTime`                    | `boolean \| object` | `undefined`     | Set current time to input and picker                 |
-| `delayHandler`                   | `number`            | `300`           | Debounce delay for buttons (ms)                      |
-| `disabledTime`                   | `object`            | `undefined`     | Disable specific hours, minutes, or intervals        |
-| `editable`                       | `boolean`           | `false`         | Allow manual input editing                           |
-| `enableScrollbar`                | `boolean`           | `false`         | Keep page scroll when picker is open                 |
-| `enableSwitchIcon`               | `boolean`           | `false`         | Show desktop/mobile switch icon                      |
-| `focusInputAfterCloseModal`      | `boolean`           | `false`         | Focus input after closing modal                      |
-| `focusTrap`                      | `boolean`           | `true`          | Trap focus within modal                              |
-| `hourMobileLabel`                | `string`            | `"Hour"`        | Hour label for mobile version                        |
-| `iconTemplate`                   | `string`            | Material Icons  | HTML template for desktop switch icon                |
-| `iconTemplateMobile`             | `string`            | Material Icons  | HTML template for mobile switch icon                 |
-| `id`                             | `string`            | `undefined`     | Custom ID for timepicker instance                    |
-| `incrementHours`                 | `number`            | `1`             | Hour increment step (1, 2, 3)                        |
-| `incrementMinutes`               | `number`            | `1`             | Minute increment step (1, 5, 10, 15)                 |
-| `inline`                         | `object`            | `undefined`     | Inline mode configuration                            |
-| `minuteMobileLabel`              | `string`            | `"Minute"`      | Minute label for mobile version                      |
-| `mobile`                         | `boolean`           | `false`         | Force mobile version                                 |
-| `mobileTimeLabel`                | `string`            | `"Enter Time"`  | Time label for mobile version                        |
-| `okLabel`                        | `string`            | `"OK"`          | Text for OK button                                   |
-| `pmLabel`                        | `string`            | `"PM"`          | Custom text for PM label                             |
-| `switchToMinutesAfterSelectHour` | `boolean`           | `true`          | Auto-switch to minutes after hour selection          |
-| `theme`                          | Theme               | `"basic"`       | UI theme (see themes section)                        |
-| `timeLabel`                      | `string`            | `"Select Time"` | Time label for desktop version                       |
-
-### Inline Mode Configuration
+## Configuration
+
+Full documentation available at [timepicker-ui.vercel.app/docs](https://timepicker-ui.vercel.app/docs)
+
+### Key Options
+
+| Option                           | Type          | Default     | Description                       |
+| -------------------------------- | ------------- | ----------- | --------------------------------- |
+| `clockType`                      | `12h` / `24h` | `12h`       | Clock format                      |
+| `theme`                          | string        | `basic`     | UI theme (9 themes available)     |
+| `animation`                      | boolean       | `true`      | Enable animations                 |
+| `backdrop`                       | boolean       | `true`      | Show backdrop overlay             |
+| `editable`                       | boolean       | `false`     | Allow manual input editing        |
+| `mobile`                         | boolean       | `false`     | Force mobile version              |
+| `disabledTime`                   | object        | `undefined` | Disable specific hours/minutes    |
+| `incrementHours`                 | number        | `1`         | Hour increment step               |
+| `incrementMinutes`               | number        | `1`         | Minute increment step             |
+| `switchToMinutesAfterSelectHour` | boolean       | `true`      | Auto-switch to minutes after hour |
+| `okLabel`                        | string        | `OK`        | OK button text                    |
+| `cancelLabel`                    | string        | `CANCEL`    | Cancel button text                |
+| `onConfirm`                      | function      | `undefined` | Callback when time is confirmed   |
+| `onCancel`                       | function      | `undefined` | Callback when cancelled           |
+| `onOpen`                         | function      | `undefined` | Callback when picker opens        |
+| `onUpdate`                       | function      | `undefined` | Callback when time is updated     |
+| `onSelectHour`                   | function      | `undefined` | Callback when hour is selected    |
+| `onSelectMinute`                 | function      | `undefined` | Callback when minute is selected  |
+| `onSelectAM`                     | function      | `undefined` | Callback when AM is selected      |
+| `onSelectPM`                     | function      | `undefined` | Callback when PM is selected      |
+| `onError`                        | function      | `undefined` | Callback when error occurs        |
+
+### Themes
+
+Available themes: `basic`, `crane-straight`, `crane-radius`, `m3`, `dark`, `glassmorphic`, `pastel`, `ai`, `cyberpunk`
 
 ```javascript
+import "timepicker-ui/main.css"; // Required base styles
+import "timepicker-ui/theme-dark.css"; // Specific theme
+
 const picker = new TimepickerUI(input, {
-  inline: {
-    enabled: true,
-    containerId: "timepicker-container",
-    showButtons: false, // Hide OK/Cancel buttons
-    autoUpdate: true, // Auto-update input on change
-  },
+  theme: "dark",
 });
 ```
 
-### Disabled Time Configuration
+### Disabled Time
 
 ```javascript
 const picker = new TimepickerUI(input, {
   disabledTime: {
-    hours: [1, 3, 5, 8], // Disable specific hours
-    minutes: [15, 30, 45], // Disable specific minutes
-    interval: "10:00 AM - 2:00 PM", // Disable time range
+    hours: [1, 3, 5, 8],
+    minutes: [15, 30, 45],
+    interval: "10:00 AM - 2:00 PM",
   },
 });
 ```
 
----
-
-## 🎨 Themes
-
-> **Note:** As of v3.0, you must import CSS styles manually. See [Upgrade Guide](#upgrade-guide-v2--v3) for details.
-
-Choose from 9 built-in themes:
-
-| Theme            | Description                            |
-| ---------------- | -------------------------------------- |
-| `basic`          | Default Material Design theme          |
-| `crane-straight` | Google Crane theme with straight edges |
-| `crane-radius`   | Google Crane theme with rounded edges  |
-| `m3`             | Material Design 3 (Material You)       |
-| `dark`           | Dark mode theme                        |
-| `glassmorphic`   | Modern glass effect                    |
-| `pastel`         | Soft pastel colors                     |
-| `ai`             | Futuristic AI-inspired theme           |
-| `cyberpunk`      | Neon cyberpunk aesthetic               |
-
-```javascript
-const picker = new TimepickerUI(input, {
-  theme: "cyberpunk",
-});
-```
-
----
-
-## 📞 Callbacks
-
-Configure callback functions to handle timepicker events:
-
-| Callback         | Type             | Description                                    |
-| ---------------- | ---------------- | ---------------------------------------------- |
-| `onOpen`         | `(data) => void` | Triggered when timepicker opens                |
-| `onCancel`       | `(data) => void` | Triggered when picker is cancelled             |
-| `onConfirm`      | `(data) => void` | Triggered when time is confirmed (OK clicked)  |
-| `onUpdate`       | `(data) => void` | Triggered during clock interaction (real-time) |
-| `onSelectHour`   | `(data) => void` | Triggered when hour mode is activated          |
-| `onSelectMinute` | `(data) => void` | Triggered when minute mode is activated        |
-| `onSelectAM`     | `(data) => void` | Triggered when AM is selected                  |
-| `onSelectPM`     | `(data) => void` | Triggered when PM is selected                  |
-| `onError`        | `(data) => void` | Triggered when invalid time format is detected |
-
-### Callback Data Structure
-
-```typescript
-interface CallbackData {
-  hour?: string;
-  minutes?: string;
-  type?: string; // 'AM' or 'PM'
-  degreesHours?: number;
-  degreesMinutes?: number;
-  error?: string; // Only for onError
-  // ... additional context data
-}
-```
-
-### Example Usage
+### Inline Mode
 
 ```javascript
 const picker = new TimepickerUI(input, {
-  onConfirm: (data) => {
-    console.log(`Time selected: ${data.hour}:${data.minutes} ${data.type}`);
-  },
-  onCancel: (data) => {
-    console.log("User cancelled time selection");
-  },
-  onError: (data) => {
-    alert(`Invalid time format: ${data.error}`);
+  inline: {
+    enabled: true,
+    containerId: "timepicker-container",
+    showButtons: false,
+    autoUpdate: true,
   },
 });
 ```
 
----
-
-## 🎯 Events
-
-Listen to DOM events dispatched on the input element:
-
-| Event                      | Description                        |
-| -------------------------- | ---------------------------------- |
-| `timepicker:open`          | Fired when timepicker opens        |
-| `timepicker:cancel`        | Fired when user cancels            |
-| `timepicker:confirm`       | Fired when time is confirmed       |
-| `timepicker:update`        | Fired during clock interaction     |
-| `timepicker:select-hour`   | Fired when hour mode is selected   |
-| `timepicker:select-minute` | Fired when minute mode is selected |
-| `timepicker:select-am`     | Fired when AM is selected          |
-| `timepicker:select-pm`     | Fired when PM is selected          |
-| `timepicker:error`         | Fired when input validation fails  |
-
-### Event Usage
-
-```javascript
-const input = document.querySelector("#timepicker");
-const picker = new TimepickerUI(input);
-picker.create();
-
-// Listen to events
-input.addEventListener("timepicker:confirm", (e) => {
-  console.log("Time confirmed:", e.detail);
-  // e.detail contains: { hour, minutes, type, degreesHours, degreesMinutes }
-});
-
-input.addEventListener("timepicker:cancel", (e) => {
-  console.log("Cancelled:", e.detail);
-});
-
-input.addEventListener("timepicker:error", (e) => {
-  console.error("Error:", e.detail.error);
-});
-```
-
----
-
-## 🛠️ API Methods
+## API Methods
 
 ### Instance Methods
 
 ```javascript
 const picker = new TimepickerUI(input, options);
 
-// Core methods
-picker.create(); // Initialize the timepicker
-picker.open(); // Open the timepicker programmatically
-picker.close(); // Close the timepicker
-picker.destroy(); // Destroy instance and clean up
-
-// Value methods
-picker.getValue(); // Get current time value
-picker.setValue("14:30"); // Set time programmatically
-
-// Configuration methods
-picker.update({ options: newOptions }); // Update configuration
-picker.getElement(); // Get the DOM element
+picker.create(); // Initialize
+picker.open(); // Open programmatically
+picker.close(); // Close
+picker.destroy(); // Clean up
+picker.getValue(); // Get current time
+picker.setValue("14:30"); // Set time
+picker.update({ options }); // Update configuration
 ```
 
 ### Static Methods
 
 ```javascript
-// Instance management
 TimepickerUI.getById("my-id"); // Get instance by ID
-TimepickerUI.getAllInstances(); // Get all active instances
+TimepickerUI.getAllInstances(); // Get all instances
 TimepickerUI.destroyAll(); // Destroy all instances
-TimepickerUI.isAvailable(element); // Check if element exists
 ```
 
-### Method Examples
-
-```javascript
-// Get current value
-const currentTime = picker.getValue();
-console.log(currentTime);
-// Output: { hour: '14', minutes: '30', type: '', time: '14:30', degreesHours: 30, degreesMinutes: 180 }
-
-// Set new time
-picker.setValue("09:15 AM");
-
-// Update configuration
-picker.update({
-  options: { theme: "dark", clockType: "24h" },
-  create: true, // Reinitialize after update
-});
-
-// Instance management
-const picker1 = new TimepickerUI("#picker1", { id: "picker-1" });
-const picker2 = new TimepickerUI("#picker2", { id: "picker-2" });
-
-// Later...
-const foundPicker = TimepickerUI.getById("picker-1");
-```
+## Events
 
----
+Listen to timepicker events using the new **EventEmitter API** (recommended) or the legacy DOM events (deprecated, will be removed in v4):
 
-## 🆕 What's New in v3.0
+### EventEmitter API (Recommended)
 
-### ✅ New Features
+```javascript
+const picker = new TimepickerUI(input);
+picker.create();
 
-- **Inline Mode**: Always-visible timepicker without modal overlay
-- **Instance Management**: `getById()`, `destroyAll()`, and custom instance IDs
-- **Callback System**: Direct callback functions instead of manual event listeners
-- **New Themes**: Added `dark`, `glassmorphic`, `pastel`, `ai`, `cyberpunk`
-- **Enhanced API**: `getValue()`, `setValue()`, improved `destroy()`
-- **SSR Compatibility**: Better support for server-side rendering
-- **TypeScript Improvements**: Complete type definitions and better IntelliSense
+picker.on("confirm", (data) => {
+  console.log("Time confirmed:", data);
+});
 
-### 🔄 Breaking Changes
+picker.on("cancel", (data) => {
+  console.log("Cancelled:", data);
+});
 
-- **Event Names**: All events now use `timepicker:` prefix
-- **Destroy Behavior**: `.destroy()` no longer removes input from DOM
-- **Theme Options**: Some theme names have changed
-- **API Changes**: Some method signatures have been updated
-- **Styles are no longer auto-loaded**
-  You must now explicitly import CSS files. Use:
+picker.on("open", () => {
+  console.log("Picker opened");
+});
 
-  - `main.css` – core styles with `basic` theme only
-  - `index.css` – all styles including all themes
-  - or import specific themes from `themes/`
+picker.on("update", (data) => {
+  console.log("Time updated:", data);
+});
 
----
+picker.on("select:hour", (data) => {
+  console.log("Hour selected:", data.hour);
+});
 
-## 📈 Upgrade Guide: v2 → v3
+picker.on("select:minute", (data) => {
+  console.log("Minute selected:", data.minutes);
+});
 
-### 1. Update Event Listeners
+picker.on("select:am", (data) => {
+  console.log("AM selected");
+});
 
-**v2 (Old):**
+picker.on("select:pm", (data) => {
+  console.log("PM selected");
+});
 
-```javascript
-input.addEventListener('show', (e) => { ... });
-input.addEventListener('cancel', (e) => { ... });
-input.addEventListener('accept', (e) => { ... });
-```
+picker.on("error", (data) => {
+  console.log("Error:", data.error);
+});
 
-**v3 (New):**
+picker.once("confirm", (data) => {
+  console.log("This runs only once");
+});
 
-```javascript
-input.addEventListener('timepicker:open', (e) => { ... });
-input.addEventListener('timepicker:cancel', (e) => { ... });
-input.addEventListener('timepicker:confirm', (e) => { ... });
+picker.off("confirm", handler);
 ```
 
-### 2. Replace Event Listeners with Callbacks
+### Legacy DOM Events (Deprecated)
 
-**v2 (Old):**
+**Note:** DOM events (e.g., `timepicker:confirm`) are deprecated and will be removed in v4. Please migrate to the new EventEmitter API shown above.
 
 ```javascript
-const picker = new TimepickerUI(input);
-input.addEventListener("accept", (e) => {
-  console.log("Time selected:", e.detail);
+input.addEventListener("timepicker:confirm", (e) => {
+  console.log("Time:", e.detail);
 });
-```
-
-**v3 (New):**
 
-```javascript
-const picker = new TimepickerUI(input, {
-  onConfirm: (data) => {
-    console.log("Time selected:", data);
-  },
+input.addEventListener("timepicker:cancel", (e) => {
+  console.log("Cancelled");
 });
 ```
 
-### 3. Update Destroy Method Usage
+Available legacy events: `timepicker:open`, `timepicker:cancel`, `timepicker:confirm`, `timepicker:update`, `timepicker:select-hour`, `timepicker:select-minute`, `timepicker:select-am`, `timepicker:select-pm`, `timepicker:error`
 
-**v2 (Old):**
+## Upgrade Guide: v2 → v3
 
-```javascript
-picker.destroy(); // This removed the input from DOM
-```
+### Breaking Changes
 
-**v3 (New):**
+**1. CSS must be imported manually**
 
 ```javascript
-picker.destroy(); // Only destroys timepicker, keeps input intact
-// If you need to remove input, do it manually:
-// input.remove();
+// v3 - Required
+import "timepicker-ui/main.css";
 ```
 
-### 4. Theme Updates
-
-**v2 (Old):**
+**2. Event names changed**
 
 ```javascript
-// Limited theme options
-theme: "basic" | "crane-straight" | "crane-radius" | "m3";
-```
-
-**v3 (New):**
+// v2
+input.addEventListener("show", ...);
+input.addEventListener("accept", ...);
 
-```javascript
-// Extended theme options
-theme: "basic" |
-  "crane-straight" |
-  "crane-radius" |
-  "m3" |
-  "dark" |
-  "glassmorphic" |
-  "pastel" |
-  "ai" |
-  "cyberpunk";
+// v3
+input.addEventListener("timepicker:open", ...);
+input.addEventListener("timepicker:confirm", ...);
 ```
 
-### 5. Add Inline Mode (Optional)
-
-**v3 New Feature:**
+**3. Use callbacks instead of events**
 
 ```javascript
+// v3 - Recommended
 const picker = new TimepickerUI(input, {
-  inline: {
-    enabled: true,
-    containerId: "timepicker-container",
-    showButtons: false,
-    autoUpdate: true,
-  },
+  onConfirm: (data) => console.log(data),
+  onCancel: (data) => console.log("Cancelled"),
 });
 ```
 
-### 6. Instance Management (Optional)
-
-**v3 New Feature:**
+**4. destroy() behavior**
 
 ```javascript
-// Create with custom ID
-const picker = new TimepickerUI(input, { id: "my-timepicker" });
+// v2 - Removed input from DOM
+picker.destroy();
 
-// Later, get by ID
-const foundPicker = TimepickerUI.getById("my-timepicker");
-
-// Destroy all instances
-TimepickerUI.destroyAll();
+// v3 - Only destroys picker, keeps input
+picker.destroy();
 ```
 
-### 7. Import CSS Manually (New Requirement)
-
-**v2 (Old):**
-Styles were bundled and automatically injected.
+### New in v3
 
-**v3 (New):**
-You must now import the styles yourself:
+- Inline mode
+- Instance management (`getById`, `destroyAll`)
+- Direct callbacks
+- 5 new themes
+- `getValue()` and `setValue()` methods
+- Better TypeScript support
+- **EventEmitter API** for modern event handling (`on`, `off`, `once`)
 
-#### Option 1 – All-in-one (includes every theme):
+### Migration to EventEmitter (v3.x)
 
-```js
-import "timepicker-ui/index.css";
-```
+Starting in v3.x, we recommend using the new EventEmitter API instead of DOM events:
 
-#### Option 2 – Core only (main styles + basic theme):
+```javascript
+// Old way (deprecated, will be removed in v4)
+input.addEventListener("timepicker:confirm", (e) => {
+  console.log(e.detail);
+});
 
-```js
-import "timepicker-ui/main.css";
+// New way (recommended)
+picker.on("confirm", (data) => {
+  console.log(data);
+});
 ```
 
-#### Option 3 – Use only the theme you need:
+Benefits:
 
-```js
-import "timepicker-ui/main.css"; // Required base
-import "timepicker-ui/theme-dark.css"; // Or any other theme
-```
+- Cleaner API without prefixes
+- Better TypeScript support
+- No DOM pollution
+- Memory-efficient (automatic cleanup on destroy)
+- Supports `once()` for one-time listeners
 
----
-
-## 🌐 Framework Integration
+## Framework Integration
 
 ### React
 
-```tsx
+```jsx
 import { useEffect, useRef } from "react";
 import { TimepickerUI } from "timepicker-ui";
+import "timepicker-ui/main.css";
 
-function TimePicker({ onChange }) {
+function App() {
   const inputRef = useRef(null);
-  const pickerRef = useRef(null);
 
   useEffect(() => {
-    if (inputRef.current) {
-      pickerRef.current = new TimepickerUI(inputRef.current, {
-        theme: "dark",
-        onConfirm: (data) => {
-          onChange?.(data);
-        },
-      });
-      pickerRef.current.create();
-    }
-
-    return () => {
-      pickerRef.current?.destroy();
-    };
-  }, [onChange]);
+    if (!inputRef.current) return;
+    const picker = new TimepickerUI(inputRef.current);
+    picker.create();
+    return () => picker.destroy();
+  }, []);
 
-  return <input ref={inputRef} type="text" />;
+  return <input ref={inputRef} placeholder="Select time" />;
 }
 ```
 
@@ -548,105 +376,68 @@ function TimePicker({ onChange }) {
 
 ```vue
 <template>
-  <input ref="inputRef" type="text" />
+  <input ref="pickerInput" placeholder="Select time" />
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { onMounted, ref } from "vue";
 import { TimepickerUI } from "timepicker-ui";
+import "timepicker-ui/main.css";
 
-const inputRef = ref(null);
-let picker = null;
-
-const emit = defineEmits(["time-selected"]);
+const pickerInput = ref(null);
 
 onMounted(() => {
-  picker = new TimepickerUI(inputRef.value, {
-    theme: "glassmorphic",
-    onConfirm: (data) => {
-      emit("time-selected", data);
-    },
-  });
+  if (!pickerInput.value) return;
+  const picker = new TimepickerUI(pickerInput.value);
   picker.create();
 });
-
-onUnmounted(() => {
-  picker?.destroy();
-});
 </script>
 ```
 
 ### Angular
 
 ```typescript
-import {
-  Component,
-  ElementRef,
-  ViewChild,
-  AfterViewInit,
-  OnDestroy,
-} from "@angular/core";
+import { Component, ElementRef, ViewChild, AfterViewInit } from "@angular/core";
 import { TimepickerUI } from "timepicker-ui";
 
 @Component({
-  selector: "app-timepicker",
-  template: '<input #timepickerInput type="text" />',
+  selector: "app-root",
+  template: `<input #timepickerInput placeholder="Select time" />`,
 })
-export class TimepickerComponent implements AfterViewInit, OnDestroy {
-  @ViewChild("timepickerInput") inputRef!: ElementRef;
-  private picker!: TimepickerUI;
+export class App implements AfterViewInit {
+  @ViewChild("timepickerInput") inputRef!: ElementRef<HTMLInputElement>;
 
   ngAfterViewInit() {
-    this.picker = new TimepickerUI(this.inputRef.nativeElement, {
-      theme: "ai",
-      onConfirm: (data) => {
-        console.log("Time selected:", data);
-      },
-    });
-    this.picker.create();
-  }
-
-  ngOnDestroy() {
-    this.picker?.destroy();
+    const picker = new TimepickerUI(this.inputRef.nativeElement);
+    picker.create();
   }
 }
 ```
 
----
+Add to `angular.json` styles:
 
-## 🔧 Development
+```json
+"styles": ["src/styles.css", "timepicker-ui/main.css"]
+```
 
-All development and build tooling is located in the [`app/`](./app) directory.
-Please refer to [`app/README.md`](./app/README.md) for instructions on running the development server, building the library, running tests, and using the full toolchain.
+## Development
 
----
+Development tooling is in the [`app/`](./app) directory. See [`app/README.md`](./app/README.md) for details.
 
-## 📄 License
+## License
 
 MIT © [Piotr Glejzer](https://github.com/pglejzer)
 
----
-
-## 🤝 Contributing
-
-Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/pglejzer/timepicker-ui/issues).
-
----
+## Contributing
 
-## 📊 Browser Support
+Contributions welcome! Check the [issues page](https://github.com/pglejzer/timepicker-ui/issues).
 
-- Chrome 60+
-- Firefox 55+
-- Safari 12+
-- Edge 79+
-- iOS Safari 12+
-- Chrome Android 60+
+## Browser Support
 
----
+Chrome 60+, Firefox 55+, Safari 12+, Edge 79+, iOS Safari 12+, Chrome Android 60+
 
-## 🙋‍♂️ Support
+## Support
 
-- 📖 [Documentation](https://pglejzer.github.io/timepicker-ui-docs/)
-- 🐛 [Report Bug](https://github.com/pglejzer/timepicker-ui/issues)
-- 💡 [Request Feature](https://github.com/pglejzer/timepicker-ui/issues)
-- 💬 [Discussions](https://github.com/pglejzer/timepicker-ui/discussions)
+- [Documentation](https://pglejzer.github.io/timepicker-ui-docs/)
+- [Report Bug](https://github.com/pglejzer/timepicker-ui/issues)
+- [Discussions](https://github.com/pglejzer/timepicker-ui/discussions)