@bridge-ui/vue 0.0.8 → 0.0.9

package/dist/index.js

@@ -1,89 +1,128 @@
 import { useBridgeUI as e } from "./Provider/useBridgeUI.js";
-import { setI18nAdapterForTests as t, useI18nAdapter as n, useResolveMessage as r } from "./Adapters/I18n/useI18nAdapter.js";
-import { setIconAdapterForTests as i, useIconAdapter as a } from "./Adapters/Icon/useIconAdapter.js";
-import { useBreakpoint as o } from "./Utils/useBreakpoint.js";
-import { useBridgeUIComponent as s, useBridgeUIMergedRegistryClasses as c } from "./Utils/index.js";
-import { useAlert as l } from "./Components/Alert/composables/useAlert.js";
-import u from "./Components/Icon/Icon.js";
-import d from "./Components/Alert/Alert.js";
-import { useFormField as f } from "./Components/FormField/composables/useFormField.js";
-import { findFirstEnabledOptionIndex as p, findLastEnabledOptionIndex as m, getListboxActiveDescendantId as h, getListboxOptionId as g, moveListboxHighlight as _, useListboxNavigation as v } from "./Components/Listbox/composables/useListboxNavigation.js";
-import { useChip as y } from "./Components/Chip/composables/useChip.js";
-import b from "./Components/Chip/Chip.js";
-import { useLabel as x } from "./Components/Label/composables/useLabel.js";
-import S from "./Components/Label/Label.js";
-import C from "./Components/FormField/FormField.js";
-import { useListbox as w } from "./Components/Listbox/composables/useListbox.js";
-import { useList as T } from "./Components/List/composables/useList.js";
-import E from "./Components/List/List.js";
-import D from "./Components/ListItem/ListItem.js";
-import O from "./Components/ListSection/ListSection.js";
-import { useMenu as k } from "./Components/Menu/composables/useMenu.js";
-import A from "./Components/Menu/Menu.js";
-import { useProgress as j } from "./Components/Progress/composables/useProgress.js";
-import M from "./Components/Progress/Progress.js";
-import N from "./Components/Listbox/Listbox.js";
-import P from "./Components/Autocomplete/Autocomplete.js";
-import F from "./Components/Autocomplete/AutocompleteOption.js";
-import I from "./Components/Avatar/Avatar.js";
-import { useBadge as L } from "./Components/Badge/composables/useBadge.js";
-import R from "./Components/Badge/Badge.js";
-import z from "./Components/BaseField/BaseField.js";
-import { useBaseField as B } from "./Components/BaseField/composables/useBaseField.js";
-import { useButton as V } from "./Components/Button/composables/useButton.js";
-import H from "./Components/Button/Button.js";
-import { useCard as U } from "./Components/Card/composables/useCard.js";
-import W from "./Components/Card/Card.js";
-import { useFormControl as G } from "./Components/FormControl/composables/useFormControl.js";
-import K from "./Components/FormControl/FormControl.js";
-import { useCheckbox as q } from "./Components/Checkbox/composables/useCheckbox.js";
-import J from "./Components/Checkbox/Checkbox.js";
-import { useDivider as Y } from "./Components/Divider/composables/useDivider.js";
-import X from "./Components/Divider/Divider.js";
-import { useDrawer as Z } from "./Components/Drawer/composables/useDrawer.js";
-import Q from "./Components/Drawer/Drawer.js";
-import { useLink as $ } from "./Components/Link/composables/useLink.js";
-import ee from "./Components/Link/Link.js";
-import { useModal as te } from "./Components/Modal/composables/useModal.js";
-import ne from "./Components/Modal/Modal.js";
-import { useNumberField as re } from "./Components/NumberField/composables/useNumberField.js";
-import ie from "./Components/NumberField/NumberField.js";
-import { useOtpField as ae } from "./Components/OtpField/composables/useOtpField.js";
-import oe from "./Components/OtpField/OtpField.js";
-import { usePasswordField as se } from "./Components/PasswordField/composables/usePasswordField.js";
-import ce from "./Components/PasswordField/PasswordField.js";
-import { useRadio as le } from "./Components/Radio/composables/useRadio.js";
-import ue from "./Components/Radio/Radio.js";
-import de from "./Components/Select/Select.js";
-import fe from "./Components/Select/SelectOption.js";
-import { useSkeleton as pe } from "./Components/Skeleton/composables/useSkeleton.js";
-import me from "./Components/Skeleton/Skeleton.js";
-import { useSlider as he } from "./Components/Slider/composables/useSlider.js";
-import { useTooltip as ge } from "./Components/Tooltip/composables/useTooltip.js";
-import _e from "./Components/Tooltip/Tooltip.js";
-import ve from "./Components/Slider/Slider.js";
-import { useSnackbar as ye } from "./Components/Snackbar/composables/useSnackbar.js";
-import be from "./Components/Snackbar/Snackbar.js";
-import { useSpinner as xe } from "./Components/Spinner/composables/useSpinner.js";
-import Se from "./Components/Spinner/Spinner.js";
-import { useSwitch as Ce } from "./Components/Switch/composables/useSwitch.js";
-import we from "./Components/Switch/Switch.js";
-import { TABS_INJECTION_KEY as Te } from "./Components/Tabs/tabsInjectionKey.js";
-import { useTab as Ee } from "./Components/Tab/composables/useTab.js";
-import De from "./Components/Tab/Tab.js";
-import { useTabItem as Oe } from "./Components/TabItem/composables/useTabItem.js";
-import ke from "./Components/TabItem/TabItem.js";
-import { useTabList as Ae } from "./Components/TabList/composables/useTabList.js";
-import je from "./Components/TabList/TabList.js";
-import { useTabPanel as Me } from "./Components/TabPanel/composables/useTabPanel.js";
-import Ne from "./Components/TabPanel/TabPanel.js";
-import { useTabs as Pe } from "./Components/Tabs/composables/useTabs.js";
-import Fe from "./Components/Tabs/Tabs.js";
-import { useTextarea as Ie } from "./Components/Textarea/composables/useTextarea.js";
-import Le from "./Components/Textarea/Textarea.js";
-import { useTextField as Re } from "./Components/TextField/composables/useTextField.js";
-import ze from "./Components/TextField/TextField.js";
-import Be from "./Provider/BridgeUIProvider.js";
-import { createBridgeUI as Ve } from "./Provider/createBridgeUI.js";
-import { BRIDGE_UI_DEFAULT_GLOBAL as He, SEMANTIC_ICON_NAMES as Ue, cn as We, mergeBridgeUIComponents as Ge, mergeBridgeUIGlobal as Ke, resolveBridgeUIOptions as qe, resolveMessage as Je } from "@bridge-ui/core";
-export { d as Alert, P as Autocomplete, F as AutocompleteOption, I as Avatar, He as BRIDGE_UI_DEFAULT_GLOBAL, R as Badge, z as BaseField, Be as BridgeUIProvider, H as Button, W as Card, J as Checkbox, b as Chip, X as Divider, Q as Drawer, K as FormControl, C as FormField, u as Icon, S as Label, ee as Link, E as List, D as ListItem, O as ListSection, N as Listbox, A as Menu, ne as Modal, ie as NumberField, oe as OtpField, ce as PasswordField, M as Progress, ue as Radio, Ue as SEMANTIC_ICON_NAMES, de as Select, fe as SelectOption, me as Skeleton, ve as Slider, be as Snackbar, Se as Spinner, we as Switch, Te as TABS_INJECTION_KEY, De as Tab, ke as TabItem, je as TabList, Ne as TabPanel, Fe as Tabs, ze as TextField, Le as Textarea, _e as Tooltip, We as cn, Ve as createBridgeUI, p as findFirstEnabledOptionIndex, m as findLastEnabledOptionIndex, h as getListboxActiveDescendantId, g as getListboxOptionId, Ge as mergeBridgeUIComponents, Ke as mergeBridgeUIGlobal, _ as moveListboxHighlight, qe as resolveBridgeUIOptions, Je as resolveMessage, t as setI18nAdapterForTests, i as setIconAdapterForTests, l as useAlert, L as useBadge, B as useBaseField, o as useBreakpoint, e as useBridgeUI, s as useBridgeUIComponent, c as useBridgeUIMergedRegistryClasses, V as useButton, U as useCard, q as useCheckbox, y as useChip, Y as useDivider, Z as useDrawer, G as useFormControl, f as useFormField, n as useI18nAdapter, a as useIconAdapter, x as useLabel, $ as useLink, T as useList, w as useListbox, v as useListboxNavigation, k as useMenu, te as useModal, re as useNumberField, ae as useOtpField, se as usePasswordField, j as useProgress, le as useRadio, r as useResolveMessage, pe as useSkeleton, he as useSlider, ye as useSnackbar, xe as useSpinner, Ce as useSwitch, Ee as useTab, Oe as useTabItem, Ae as useTabList, Me as useTabPanel, Pe as useTabs, Re as useTextField, Ie as useTextarea, ge as useTooltip };
+import { setDateAdapterForTests as t, useDateAdapter as n, useDateAdapterContext as r } from "./Adapters/Date/useDateAdapter.js";
+import { setI18nAdapterForTests as i, useI18nAdapter as a, useResolveMessage as o } from "./Adapters/I18n/useI18nAdapter.js";
+import { setIconAdapterForTests as s, useIconAdapter as c } from "./Adapters/Icon/useIconAdapter.js";
+import { useBreakpoint as l } from "./Utils/useBreakpoint.js";
+import { useBridgeUIComponent as u, useBridgeUIMergedRegistryClasses as d } from "./Utils/index.js";
+import { useAlert as f } from "./Components/Alert/composables/useAlert.js";
+import p from "./Components/Icon/Icon.js";
+import m from "./Components/Alert/Alert.js";
+import { useFormField as h } from "./Components/FormField/composables/useFormField.js";
+import { findFirstEnabledOptionIndex as g, findLastEnabledOptionIndex as _, getListboxActiveDescendantId as v, getListboxOptionId as y, moveListboxHighlight as b, useListboxNavigation as x } from "./Components/Listbox/composables/useListboxNavigation.js";
+import { useChip as S } from "./Components/Chip/composables/useChip.js";
+import C from "./Components/Chip/Chip.js";
+import { useLabel as w } from "./Components/Label/composables/useLabel.js";
+import T from "./Components/Label/Label.js";
+import E from "./Components/FormField/FormField.js";
+import { useListbox as D } from "./Components/Listbox/composables/useListbox.js";
+import { useButton as O } from "./Components/Button/composables/useButton.js";
+import k from "./Components/Button/Button.js";
+import { useFieldOverlay as A } from "./Components/FieldOverlay/composables/useFieldOverlay.js";
+import { useDrawer as j } from "./Components/Drawer/composables/useDrawer.js";
+import M from "./Components/Drawer/Drawer.js";
+import { useMenu as N } from "./Components/Menu/composables/useMenu.js";
+import P from "./Components/Menu/Menu.js";
+import { useModal as F } from "./Components/Modal/composables/useModal.js";
+import I from "./Components/Modal/Modal.js";
+import L from "./Components/FieldOverlay/FieldOverlay.js";
+import { useList as R } from "./Components/List/composables/useList.js";
+import z from "./Components/List/List.js";
+import B from "./Components/ListItem/ListItem.js";
+import V from "./Components/ListSection/ListSection.js";
+import { useProgress as H } from "./Components/Progress/composables/useProgress.js";
+import U from "./Components/Progress/Progress.js";
+import W from "./Components/Listbox/Listbox.js";
+import G from "./Components/Autocomplete/Autocomplete.js";
+import K from "./Components/Autocomplete/AutocompleteOption.js";
+import q from "./Components/Avatar/Avatar.js";
+import { useBadge as J } from "./Components/Badge/composables/useBadge.js";
+import Y from "./Components/Badge/Badge.js";
+import X from "./Components/BaseField/BaseField.js";
+import { useBaseField as Z } from "./Components/BaseField/composables/useBaseField.js";
+import { useCalendar as Q } from "./Components/Calendar/composables/useCalendar.js";
+import { useCalendarDate as $ } from "./Components/CalendarDate/composables/useCalendarDate.js";
+import ee from "./Components/CalendarDate/CalendarDate.js";
+import { useCalendarMonth as te } from "./Components/CalendarMonth/composables/useCalendarMonth.js";
+import ne from "./Components/CalendarMonth/CalendarMonth.js";
+import { useCalendarYear as re } from "./Components/CalendarYear/composables/useCalendarYear.js";
+import ie from "./Components/CalendarYear/CalendarYear.js";
+import ae from "./Components/Calendar/Calendar.js";
+import { useCalendarRange as oe } from "./Components/CalendarRange/composables/useCalendarRange.js";
+import se from "./Components/CalendarRange/CalendarRange.js";
+import { useCard as ce } from "./Components/Card/composables/useCard.js";
+import le from "./Components/Card/Card.js";
+import { useFormControl as ue } from "./Components/FormControl/composables/useFormControl.js";
+import de from "./Components/FormControl/FormControl.js";
+import { useCheckbox as fe } from "./Components/Checkbox/composables/useCheckbox.js";
+import pe from "./Components/Checkbox/Checkbox.js";
+import { useDateField as me } from "./Components/DateField/composables/useDateField.js";
+import { useDatePicker as he } from "./Components/DatePicker/composables/useDatePicker.js";
+import ge from "./Components/DatePicker/DatePicker.js";
+import _e from "./Components/DateField/DateField.js";
+import { useDateRangeField as ve } from "./Components/DateRangeField/composables/useDateRangeField.js";
+import { useDateRangePicker as ye } from "./Components/DateRangePicker/composables/useDateRangePicker.js";
+import be from "./Components/DateRangePicker/DateRangePicker.js";
+import xe from "./Components/DateRangeField/DateRangeField.js";
+import { useDateTimeField as Se } from "./Components/DateTimeField/composables/useDateTimeField.js";
+import { useDateTimePicker as Ce } from "./Components/DateTimePicker/composables/useDateTimePicker.js";
+import { useTimePanel as we } from "./Components/TimePanel/composables/useTimePanel.js";
+import Te from "./Components/TimePanel/TimePanel.js";
+import Ee from "./Components/DateTimePicker/DateTimePicker.js";
+import De from "./Components/DateTimeField/DateTimeField.js";
+import { useDateTimeRangeField as Oe } from "./Components/DateTimeRangeField/composables/useDateTimeRangeField.js";
+import { useDateTimeRangePicker as ke } from "./Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js";
+import Ae from "./Components/DateTimeRangePicker/DateTimeRangePicker.js";
+import je from "./Components/DateTimeRangeField/DateTimeRangeField.js";
+import { useDivider as Me } from "./Components/Divider/composables/useDivider.js";
+import Ne from "./Components/Divider/Divider.js";
+import { useLink as Pe } from "./Components/Link/composables/useLink.js";
+import Fe from "./Components/Link/Link.js";
+import { useNumberField as Ie } from "./Components/NumberField/composables/useNumberField.js";
+import Le from "./Components/NumberField/NumberField.js";
+import { useOtpField as Re } from "./Components/OtpField/composables/useOtpField.js";
+import ze from "./Components/OtpField/OtpField.js";
+import { usePasswordField as Be } from "./Components/PasswordField/composables/usePasswordField.js";
+import Ve from "./Components/PasswordField/PasswordField.js";
+import { useRadio as He } from "./Components/Radio/composables/useRadio.js";
+import Ue from "./Components/Radio/Radio.js";
+import We from "./Components/Select/Select.js";
+import Ge from "./Components/Select/SelectOption.js";
+import { useSkeleton as Ke } from "./Components/Skeleton/composables/useSkeleton.js";
+import qe from "./Components/Skeleton/Skeleton.js";
+import { useSlider as Je } from "./Components/Slider/composables/useSlider.js";
+import { useTooltip as Ye } from "./Components/Tooltip/composables/useTooltip.js";
+import Xe from "./Components/Tooltip/Tooltip.js";
+import Ze from "./Components/Slider/Slider.js";
+import { useSnackbar as Qe } from "./Components/Snackbar/composables/useSnackbar.js";
+import $e from "./Components/Snackbar/Snackbar.js";
+import { useSpinner as et } from "./Components/Spinner/composables/useSpinner.js";
+import tt from "./Components/Spinner/Spinner.js";
+import { useSwitch as nt } from "./Components/Switch/composables/useSwitch.js";
+import rt from "./Components/Switch/Switch.js";
+import { TABS_INJECTION_KEY as it } from "./Components/Tabs/tabsInjectionKey.js";
+import { useTab as at } from "./Components/Tab/composables/useTab.js";
+import ot from "./Components/Tab/Tab.js";
+import { useTabItem as st } from "./Components/TabItem/composables/useTabItem.js";
+import ct from "./Components/TabItem/TabItem.js";
+import { useTabList as lt } from "./Components/TabList/composables/useTabList.js";
+import ut from "./Components/TabList/TabList.js";
+import { useTabPanel as dt } from "./Components/TabPanel/composables/useTabPanel.js";
+import ft from "./Components/TabPanel/TabPanel.js";
+import { useTabs as pt } from "./Components/Tabs/composables/useTabs.js";
+import mt from "./Components/Tabs/Tabs.js";
+import { useTextarea as ht } from "./Components/Textarea/composables/useTextarea.js";
+import gt from "./Components/Textarea/Textarea.js";
+import { useTextField as _t } from "./Components/TextField/composables/useTextField.js";
+import vt from "./Components/TextField/TextField.js";
+import { useTimeField as yt } from "./Components/TimeField/composables/useTimeField.js";
+import { useTimePicker as bt } from "./Components/TimePicker/composables/useTimePicker.js";
+import xt from "./Components/TimePicker/TimePicker.js";
+import St from "./Components/TimeField/TimeField.js";
+import { useTimeRangeField as Ct } from "./Components/TimeRangeField/composables/useTimeRangeField.js";
+import { useTimeRangePicker as wt } from "./Components/TimeRangePicker/composables/useTimeRangePicker.js";
+import Tt from "./Components/TimeRangePicker/TimeRangePicker.js";
+import Et from "./Components/TimeRangeField/TimeRangeField.js";
+import Dt from "./Provider/BridgeUIProvider.js";
+import { createBridgeUI as Ot } from "./Provider/createBridgeUI.js";
+import { BRIDGE_UI_DEFAULT_GLOBAL as kt, SEMANTIC_ICON_NAMES as At, cn as jt, mergeBridgeUIComponents as Mt, mergeBridgeUIGlobal as Nt, resolveBridgeUIOptions as Pt, resolveMessage as Ft } from "@bridge-ui/core";
+export { m as Alert, G as Autocomplete, K as AutocompleteOption, q as Avatar, kt as BRIDGE_UI_DEFAULT_GLOBAL, Y as Badge, X as BaseField, Dt as BridgeUIProvider, k as Button, ae as Calendar, ee as CalendarDate, ne as CalendarMonth, se as CalendarRange, ie as CalendarYear, le as Card, pe as Checkbox, C as Chip, _e as DateField, ge as DatePicker, xe as DateRangeField, be as DateRangePicker, De as DateTimeField, Ee as DateTimePicker, je as DateTimeRangeField, Ae as DateTimeRangePicker, Ne as Divider, M as Drawer, L as FieldOverlay, de as FormControl, E as FormField, p as Icon, T as Label, Fe as Link, z as List, B as ListItem, V as ListSection, W as Listbox, P as Menu, I as Modal, Le as NumberField, ze as OtpField, Ve as PasswordField, U as Progress, Ue as Radio, At as SEMANTIC_ICON_NAMES, We as Select, Ge as SelectOption, qe as Skeleton, Ze as Slider, $e as Snackbar, tt as Spinner, rt as Switch, it as TABS_INJECTION_KEY, ot as Tab, ct as TabItem, ut as TabList, ft as TabPanel, mt as Tabs, vt as TextField, gt as Textarea, St as TimeField, Te as TimePanel, xt as TimePicker, Et as TimeRangeField, Tt as TimeRangePicker, Xe as Tooltip, jt as cn, Ot as createBridgeUI, g as findFirstEnabledOptionIndex, _ as findLastEnabledOptionIndex, v as getListboxActiveDescendantId, y as getListboxOptionId, Mt as mergeBridgeUIComponents, Nt as mergeBridgeUIGlobal, b as moveListboxHighlight, Pt as resolveBridgeUIOptions, Ft as resolveMessage, t as setDateAdapterForTests, i as setI18nAdapterForTests, s as setIconAdapterForTests, f as useAlert, J as useBadge, Z as useBaseField, l as useBreakpoint, e as useBridgeUI, u as useBridgeUIComponent, d as useBridgeUIMergedRegistryClasses, O as useButton, Q as useCalendar, $ as useCalendarDate, te as useCalendarMonth, oe as useCalendarRange, re as useCalendarYear, ce as useCard, fe as useCheckbox, S as useChip, n as useDateAdapter, r as useDateAdapterContext, me as useDateField, he as useDatePicker, ve as useDateRangeField, ye as useDateRangePicker, Se as useDateTimeField, Ce as useDateTimePicker, Oe as useDateTimeRangeField, ke as useDateTimeRangePicker, Me as useDivider, j as useDrawer, A as useFieldOverlay, ue as useFormControl, h as useFormField, a as useI18nAdapter, c as useIconAdapter, w as useLabel, Pe as useLink, R as useList, D as useListbox, x as useListboxNavigation, N as useMenu, F as useModal, Ie as useNumberField, Re as useOtpField, Be as usePasswordField, H as useProgress, He as useRadio, o as useResolveMessage, Ke as useSkeleton, Je as useSlider, Qe as useSnackbar, et as useSpinner, nt as useSwitch, at as useTab, st as useTabItem, lt as useTabList, dt as useTabPanel, pt as useTabs, _t as useTextField, ht as useTextarea, yt as useTimeField, we as useTimePanel, bt as useTimePicker, Ct as useTimeRangeField, wt as useTimeRangePicker, Ye as useTooltip };

package/dist/theme.css

@@ -258,14 +258,14 @@
 
   .bridge-field-adornment-button {
     @apply cursor-pointer transition-colors duration-150 ease-in-out select-none;
-    @apply text-gray-500 hover:bg-gray-100 hover:text-gray-700;
-    @apply active:bg-gray-200 active:text-gray-900;
-    @apply focus-visible:bg-gray-100 focus-visible:text-gray-700 focus-visible:outline-none;
-    @apply dark:text-gray-400 dark:hover:bg-gray-700/50 dark:hover:text-gray-200;
-    @apply dark:active:bg-gray-700 dark:active:text-white;
-    @apply dark:focus-visible:bg-gray-700/50 dark:focus-visible:text-gray-200;
+    @apply text-dark-500 hover:bg-dark-100 hover:text-dark-700;
+    @apply active:bg-dark-200 active:text-dark-900;
+    @apply focus-visible:bg-dark-100 focus-visible:text-dark-700 focus-visible:outline-none;
+    @apply dark:text-dark-400 dark:hover:bg-dark-700/50 dark:hover:text-dark-200;
+    @apply dark:active:bg-dark-700 dark:active:text-white;
+    @apply dark:focus-visible:bg-dark-700/50 dark:focus-visible:text-dark-200;
     @apply disabled:cursor-not-allowed disabled:opacity-50;
-    @apply disabled:hover:bg-transparent disabled:hover:text-gray-500;
-    @apply dark:disabled:hover:bg-transparent dark:disabled:hover:text-gray-400;
+    @apply disabled:hover:text-dark-500 disabled:hover:bg-transparent;
+    @apply dark:disabled:hover:text-dark-400 dark:disabled:hover:bg-transparent;
   }
 }

package/docs/README.md

@@ -11,8 +11,21 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [BaseField](./components/BaseField.md)
 - [BridgeUIProvider](./components/BridgeUIProvider.md)
 - [Button](./components/Button.md)
+- [Calendar](./components/Calendar.md)
+- [CalendarDate](./components/CalendarDate.md)
+- [CalendarMonth](./components/CalendarMonth.md)
+- [CalendarRange](./components/CalendarRange.md)
+- [CalendarYear](./components/CalendarYear.md)
 - [Card](./components/Card.md)
 - [Checkbox](./components/Checkbox.md)
+- [DateField](./components/DateField.md)
+- [DatePicker](./components/DatePicker.md)
+- [DateRangeField](./components/DateRangeField.md)
+- [DateRangePicker](./components/DateRangePicker.md)
+- [DateTimeField](./components/DateTimeField.md)
+- [DateTimePicker](./components/DateTimePicker.md)
+- [DateTimeRangeField](./components/DateTimeRangeField.md)
+- [DateTimeRangePicker](./components/DateTimeRangePicker.md)
 - [Divider](./components/Divider.md)
 - [Drawer](./components/Drawer.md)
 - [FormControl](./components/FormControl.md)
@@ -36,8 +49,13 @@ Component reference and adapter samples for **Vue**. This folder ships with the
 - [Spinner](./components/Spinner.md)
 - [Switch](./components/Switch.md)
 - [Tabs](./components/Tabs.md)
-- [TextField](./components/TextField.md)
 - [Textarea](./components/Textarea.md)
+- [TextField](./components/TextField.md)
+- [TimeField](./components/TimeField.md)
+- [TimePanel](./components/TimePanel.md)
+- [TimePicker](./components/TimePicker.md)
+- [TimeRangeField](./components/TimeRangeField.md)
+- [TimeRangePicker](./components/TimeRangePicker.md)
 - [Tooltip](./components/Tooltip.md)
 - [useBreakpoint](./components/useBreakpoint.md)
 - [useDialogAction](./components/useDialogAction.md)

package/docs/components/Autocomplete.md

@@ -124,6 +124,17 @@ Use the default slot with `ListSection` / `ListItem` to build the dropdown list
 </Autocomplete>
 ```
 
+### Overlay
+
+```vue
+<Autocomplete overlay="auto" label="Country" :options="countries" />
+
+<Autocomplete label="Country" overlay="drawer" :options="countries" />
+```
+
+Default `overlay` is `auto`: `menu` on desktop and bottom `drawer` on mobile.
+When unset, `showFooter` defaults to `true` on mobile (`false` on desktop). Selection stays draft until Apply.
+
 ### customProps
 
 ```vue
@@ -142,26 +153,28 @@ Use the default slot with `ListSection` / `ListItem` to build the dropdown list
 
 ### Autocomplete-specific
 
-| Prop                | Type                  | Default       | Description                                                                                             |
-| ------------------- | --------------------- | ------------- | ------------------------------------------------------------------------------------------------------- |
-| `asyncData`         | `SelectAsyncData`     | —             | Remote data source. Implies `searchable`.                                                               |
-| `clearable`         | `boolean`             | `true`        | Whether the value can be cleared.                                                                       |
-| `defaultValue`      | `SelectModel`         | —             | Initial value when uncontrolled.                                                                        |
-| `disableMaxHeight`  | `boolean`             | `false`       | When true, the dropdown options list is not height-limited. Forwarded to the internal `Listbox`.        |
-| `emptyMessage`      | `string`              | "No options"  | Message when the filtered list is empty.                                                                |
-| `flipOptions`       | `boolean`             | `false`       | Inverts the visual order of options.                                                                    |
-| `freeSolo`          | `boolean`             | `true`        | Allows committing typed text that is not in `options` (Enter, Tab, or closing the menu).                |
-| `hideEmptyMessage`  | `boolean`             | `false`       | Hides the empty-state message.                                                                          |
-| `loading`           | `boolean`             | —             | External or async loading state.                                                                        |
-| `maxHeight`         | `string`              | "max-h-60"    | Tailwind max-height class for the dropdown options area. Forwarded to the internal `Listbox`.           |
-| `minItemsForSearch` | `number`              | 11            | Minimum option count before search UI is enabled.                                                       |
-| `multiple`          | `boolean`             | `false`       | Whether multiple values can be selected.                                                                |
-| `optionDescription` | `string`              | "description" | Key used to read the description from option objects.                                                   |
-| `optionLabel`       | `string`              | "label"       | Key used to read the label from option objects.                                                         |
-| `options`           | `ListboxOptionsInput` | —             | Options to display. May include section groups (`{ title, options, sticky? }`) mixed with flat options. |
-| `optionValue`       | `string`              | "value"       | Key used to read the value from option objects.                                                         |
-| `placeholder`       | `string`              | —             | Placeholder shown when no value is selected.                                                            |
-| `searchable`        | `boolean`             | `true`        | Whether options can be filtered via the trigger input.                                                  |
+| Prop                | Type                  | Default                               | Description                                                                                             |
+| ------------------- | --------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `asyncData`         | `SelectAsyncData`     | —                                     | Remote data source. Implies `searchable`.                                                               |
+| `clearable`         | `boolean`             | `true`                                | Whether the value can be cleared.                                                                       |
+| `defaultValue`      | `SelectModel`         | —                                     | Initial value when uncontrolled.                                                                        |
+| `disableMaxHeight`  | `boolean`             | `false`                               | When true, the dropdown options list is not height-limited. Forwarded to the internal `Listbox`.        |
+| `emptyMessage`      | `string`              | "No options"                          | Message when the filtered list is empty.                                                                |
+| `flipOptions`       | `boolean`             | `false`                               | Inverts the visual order of options.                                                                    |
+| `freeSolo`          | `boolean`             | `true`                                | Allows committing typed text that is not in `options` (Enter, Tab, or closing the menu).                |
+| `hideEmptyMessage`  | `boolean`             | `false`                               | Hides the empty-state message.                                                                          |
+| `loading`           | `boolean`             | —                                     | External or async loading state.                                                                        |
+| `maxHeight`         | `string`              | "max-h-60"                            | Tailwind max-height class for the dropdown options area. Forwarded to the internal `Listbox`.           |
+| `minItemsForSearch` | `number`              | 11                                    | Minimum option count before search UI is enabled.                                                       |
+| `multiple`          | `boolean`             | `false`                               | Whether multiple values can be selected.                                                                |
+| `optionDescription` | `string`              | "description"                         | Key used to read the description from option objects.                                                   |
+| `optionLabel`       | `string`              | "label"                               | Key used to read the label from option objects.                                                         |
+| `options`           | `ListboxOptionsInput` | —                                     | Options to display. May include section groups (`{ title, options, sticky? }`) mixed with flat options. |
+| `optionValue`       | `string`              | "value"                               | Key used to read the value from option objects.                                                         |
+| `overlay`           | `FieldOverlayMode`    | `"auto"`                              | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                                    |
+| `placeholder`       | `string`              | —                                     | Placeholder shown when no value is selected.                                                            |
+| `searchable`        | `boolean`             | `true`                                | Whether options can be filtered via the trigger input.                                                  |
+| `showFooter`        | `boolean`             | `false` (`true` on mobile when unset) | Shows Cancel / Apply on the nested listbox. Selection stays draft until Apply.                          |
 
 ### v-model
 
@@ -183,16 +196,17 @@ See [FormField](./FormField.md) (building-block chrome). Field tokens live on `c
 
 ## Events
 
-| Event           | Payload                  | Description                                           |
-| --------------- | ------------------------ | ----------------------------------------------------- |
-| `v-on:change`   | `(value: SelectModel)`   | Emitted when the selection changes.                   |
-| `v-on:clear`    | —                        | Emitted when the value is cleared.                    |
-| `v-on:close`    | —                        | Emitted when the menu closes.                         |
-| `v-on:deselect` | `(option: SelectOption)` | Emitted when an option is deselected (multiple mode). |
-| `v-on:open`     | —                        | Emitted when the menu opens.                          |
-| `v-on:search`   | `(query: string)`        | Emitted when the search query changes.                |
-| `v-on:select`   | `(option: SelectOption)` | Emitted when an option is selected.                   |
+| Event           | Payload                  | Description                                                          |
+| --------------- | ------------------------ | -------------------------------------------------------------------- |
+| `v-on:cancel`   | —                        | Emitted when Cancel is pressed on the listbox footer (`showFooter`). |
+| `v-on:change`   | `(value: SelectModel)`   | Emitted when the selection changes.                                  |
+| `v-on:clear`    | —                        | Emitted when the value is cleared.                                   |
+| `v-on:close`    | —                        | Emitted when the menu closes.                                        |
+| `v-on:deselect` | `(option: SelectOption)` | Emitted when an option is deselected (multiple mode).                |
+| `v-on:open`     | —                        | Emitted when the menu opens.                                         |
+| `v-on:search`   | `(query: string)`        | Emitted when the search query changes.                               |
+| `v-on:select`   | `(option: SelectOption)` | Emitted when an option is selected.                                  |
 
 ## Related components
 
-Menu, List, ListItem, ListSection, FormField
+Menu, Modal, Drawer, FieldOverlay, List, ListItem, ListSection, FormField

package/docs/components/BridgeUIProvider.md

@@ -1,6 +1,6 @@
 # BridgeUIProvider
 
-Root provider for theme, locale, direction, breakpoints, icon/i18n adapters, and component registry defaults.
+Root provider for theme, locale, direction, breakpoints, icon/i18n/date adapters, and component registry defaults.
 
 ## Import
 
@@ -60,6 +60,23 @@ app.use(
 );
 ```
 
+### Date adapter
+
+Provide `global.dates` to replace the native `Date` adapter used by calendars and pickers. Without one, Bridge uses `createNativeDateAdapter`. Ready samples in `packages/vue/docs/examples/` (Day.js, date-fns, Luxon, Moment).
+
+```ts
+import { createBridgeUI } from "@bridge-ui/vue";
+import { createDayjsDateAdapter } from "@examples/date-dayjs";
+
+const dates = createDayjsDateAdapter();
+
+app.use(
+  createBridgeUI({
+    global: { dates },
+  }),
+);
+```
+
 ### Form density defaults
 
 Set `global.formDefaults` to apply shared `size` / `rounded` to form controls (TextField, Select, Checkbox, Slider, OtpField, …). Does not affect Button, Progress, Modal, etc.
@@ -137,10 +154,10 @@ setGlobal({ mobileBreakpoint: "md" });
 
 ## Props
 
-| Prop         | Type                       | Default | Description                                                                                        |
-| ------------ | -------------------------- | ------- | -------------------------------------------------------------------------------------------------- |
-| `components` | `BridgeUIComponentsConfig` | —       | Per-component defaults                                                                             |
-| `global`     | `Partial<BridgeUIGlobal>`  | —       | `theme`, `locale`, `direction`, `mobileBreakpoint`, `breakpoints`, `icons`, `i18n`, `formDefaults` |
+| Prop         | Type                       | Default | Description                                                                                                 |
+| ------------ | -------------------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
+| `components` | `BridgeUIComponentsConfig` | —       | Per-component defaults                                                                                      |
+| `global`     | `Partial<BridgeUIGlobal>`  | —       | `theme`, `locale`, `direction`, `mobileBreakpoint`, `breakpoints`, `icons`, `i18n`, `dates`, `formDefaults` |
 
 App content is passed via the **default slot** (see Usage above).
 

package/docs/components/Calendar.md

@@ -0,0 +1,96 @@
+# Calendar
+
+Standalone calendar with date, month, and year panels. Supports single, multiple, and range selection.
+
+## Import
+
+```ts
+import { Calendar } from "@bridge-ui/vue/Components/Calendar";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Calendar />
+
+<Calendar v-model="date" />
+
+<Calendar range v-model="range" :min-date="min" :max-date="max" />
+
+<Calendar multiple v-model="dates" />
+```
+
+### Bounds and disabled dates
+
+```vue
+<Calendar
+  :min-date="new Date(2024, 0, 1)"
+  :max-date="new Date(2026, 11, 31)"
+  :disable-dates="[new Date(2026, 7, 15)]"
+/>
+```
+
+### customProps
+
+```vue
+<Calendar
+  :custom-props="{
+    root: { 'data-testid': 'calendar' },
+    todayButton: { type: 'button' },
+  }"
+/>
+```
+
+## Props
+
+| Prop              | Type                  | Default     | Description                                               |
+| ----------------- | --------------------- | ----------- | --------------------------------------------------------- |
+| `classes`         | `CalendarClasses`     | —           | Classes for calendar regions.                             |
+| `color`           | `CalendarColor`       | `"primary"` | Accent color for tiles.                                   |
+| `customProps`     | `CalendarCustomProps` | —           | Extra props for internal parts.                           |
+| `defaultValue`    | `DatePickerModel`     | `null`      | Uncontrolled initial value.                               |
+| `defaultView`     | `CalendarView`        | `"date"`    | Uncontrolled initial panel view.                          |
+| `disabled`        | `boolean`             | `false`     | Disables the calendar.                                    |
+| `disableDates`    | `Date[]`              | —           | Dates that cannot be selected.                            |
+| `disableMonths`   | `number[]`            | —           | Month indexes (`0`–`11`) that cannot be selected.         |
+| `disableYears`    | `number[]`            | —           | Years that cannot be selected.                            |
+| `hideMonths`      | `boolean`             | `false`     | Hides the month selector and month panel.                 |
+| `hideOutsideDays` | `boolean`             | `false`     | Hides days that fall outside the displayed month.         |
+| `hideWeekdays`    | `boolean`             | `false`     | Hides weekday labels on the date panel.                   |
+| `hideYears`       | `boolean`             | `false`     | Hides the year selector and year panel.                   |
+| `maxDate`         | `Date`                | —           | Latest selectable date.                                   |
+| `minDate`         | `Date`                | —           | Earliest selectable date.                                 |
+| `multiple`        | `boolean`             | `false`     | Allows selecting multiple dates.                          |
+| `previewDate`     | `Date \| null`        | —           | Controlled range-preview hover date.                      |
+| `range`           | `boolean`             | `false`     | Selects a start/end date range.                           |
+| `readOnly`        | `boolean`             | `false`     | Prevents selection.                                       |
+| `rounded`         | `CalendarRounded`     | `"md"`      | Border radius of tiles and chrome.                        |
+| `slots`           | `CalendarDateSlots`   | —           | Named slots forwarded to `CalendarDate` (`day`).          |
+| `startOfWeek`     | `StartOfWeek`         | `0`         | First day of the week (`0` = Sunday).                     |
+| `timeZone`        | `string`              | —           | IANA time zone.                                           |
+| `tokens`          | `CalendarTokens`      | —           | Token overrides.                                          |
+| `value`           | `DatePickerModel`     | —           | Controlled selection model.                               |
+| `view`            | `CalendarView`        | —           | Controlled panel view. Pair with `view-change`.           |
+| `viewDate`        | `Date`                | —           | Controlled displayed month. Pair with `view-date-change`. |
+
+### v-model
+
+| Prop / Event        | Type                               | Default | Description                           |
+| ------------------- | ---------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `DatePickerModel`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: DatePickerModel) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event                      | Payload                    | Description                                        |
+| -------------------------- | -------------------------- | -------------------------------------------------- |
+| `v-on:change`              | `(value: DatePickerModel)` | Emitted when the selection model changes.          |
+| `v-on:preview-date-change` | `(date: Date \| null)`     | Emitted when the range preview hover date changes. |
+| `v-on:view-change`         | `(view: CalendarView)`     | Emitted when the active panel view changes.        |
+| `v-on:view-date-change`    | `(date: Date)`             | Emitted when the displayed month changes.          |
+
+## Related components
+
+CalendarDate, CalendarMonth, CalendarYear, CalendarRange, DatePicker, DateField