@momentum-design/components 0.130.8 → 0.131.0

package/dist/index.d.ts

@@ -74,6 +74,7 @@ import Tab from './components/tab';
 import TabList from './components/tablist';
 import Text from './components/text';
 import Textarea from './components/textarea';
+import TimePicker from './components/timepicker';
 import Typewriter from './components/typewriter';
 import ThemeProvider from './components/themeprovider';
 import Toast from './components/toast';
@@ -103,12 +104,13 @@ import type { SliderChangeEvent } from './components/slider/slider.types';
 import type { InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent } from './components/input/input.types';
 import type { VirtualizedListScrollEvent } from './components/virtualizedlist/virtualizedlist.types';
 import type { TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent } from './components/textarea/textarea.types';
-import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
-import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 import type { TablistChangeEvent } from './components/tablist/tablist.types';
 import type { ToggleOnChangeEvent } from './components/toggle/toggle.types';
 import type { CheckboxOnChangeEvent } from './components/checkbox/checkbox.types';
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
-export type { AvatarSize, BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, PresenceType, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, ToggleOnChangeEvent, CheckboxOnChangeEvent, LinkButtonSize, };
+import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
+import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
+import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
+import type { TimePickerChangeEvent, TimePickerInputEvent } from './components/timepicker/timepicker.types';
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
+export type { AvatarSize, BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, PresenceType, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, ToggleOnChangeEvent, CheckboxOnChangeEvent, LinkButtonSize, TimePickerChangeEvent, TimePickerInputEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/index.js

@@ -76,6 +76,7 @@ import Tab from './components/tab';
 import TabList from './components/tablist';
 import Text from './components/text';
 import Textarea from './components/textarea';
+import TimePicker from './components/timepicker';
 import Typewriter from './components/typewriter';
 import ThemeProvider from './components/themeprovider';
 import Toast from './components/toast';
@@ -92,6 +93,6 @@ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, }
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 // Components Exports
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/react/index.d.ts

@@ -82,6 +82,7 @@ export { default as TabList } from './tablist';
 export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
+export { default as TimePicker } from './timepicker';
 export { default as Toast } from './toast';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';

package/dist/react/index.js

@@ -82,6 +82,7 @@ export { default as TabList } from './tablist';
 export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
+export { default as TimePicker } from './timepicker';
 export { default as Toast } from './toast';
 export { default as Toggle } from './toggle';
 export { default as ToggleTip } from './toggletip';

package/dist/react/timepicker/index.d.ts

@@ -0,0 +1,67 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/timepicker';
+import type { Events } from '../../components/timepicker/timepicker.types';
+/**
+ * mdc-timepicker is a component that allows users to select a specific time
+ * or enter a time manually. It supports both 12-hour and 24-hour formats.
+ *
+ * The component consists of:
+ * - label - describes the time picker field
+ * - input field - made up of 2-3 spinbuttons (hours, minutes, optional AM/PM period)
+ * - dropdown arrow button - opens a flyout menu with predefined time intervals
+ * - helper text - displayed below the input field
+ *
+ * Users can input values by:
+ * - Manually entering numbers/characters in spinbuttons
+ * - Navigating using arrow keys to increment/decrement values
+ * - Selecting a predefined time from the dropdown menu
+ *
+ * @tagname mdc-timepicker
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-option
+ * @dependency mdc-popover
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
+ *
+ * @event input - (React: onInput) This event is dispatched when the time value changes.
+ * @event change - (React: onChange) This event is dispatched when the time value is committed.
+ * @event focus - (React: onFocus) This event is dispatched when the timepicker receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the timepicker loses focus.
+ *
+ * @slot label - Slot for the label element.
+ * @slot toggletip - Slot for the toggletip info icon button.
+ * @slot help-icon - Slot for the helper/validation icon.
+ * @slot help-text - Slot for the helper/validation text.
+ *
+ * @cssproperty --mdc-timepicker-background-color - Background color of the timepicker input.
+ * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.
+ * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.
+ * @cssproperty --mdc-timepicker-width - Width of the timepicker component.
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element.
+ * @csspart info-icon-btn - The info icon button element.
+ * @csspart label-toggletip - The toggletip element.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element.
+ * @csspart help-text-container - The container for helper/validation elements.
+ * @csspart container - The outer container for the input and popover.
+ * @csspart base-container - The input container with border and background.
+ * @csspart spinbutton-group - The container for spinbutton elements.
+ * @csspart spinbutton - A spinbutton input element.
+ * @csspart separator - The colon separator between spinbuttons.
+ * @csspart period - The AM/PM period spinbutton.
+ * @csspart icon-container - The dropdown arrow button container.
+ * @csspart native-input - The hidden native input for form participation.
+ * @csspart listbox - The dropdown list container.
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onInput: EventName<Events["onInputEvent"]>;
+    onChange: EventName<Events["onChangeEvent"]>;
+    onFocus: EventName<Events["onFocusEvent"]>;
+    onBlur: EventName<Events["onBlurEvent"]>;
+}>;
+export default reactWrapper;

package/dist/react/timepicker/index.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/timepicker';
+import { TAG_NAME } from '../../components/timepicker/timepicker.constants';
+/**
+ * mdc-timepicker is a component that allows users to select a specific time
+ * or enter a time manually. It supports both 12-hour and 24-hour formats.
+ *
+ * The component consists of:
+ * - label - describes the time picker field
+ * - input field - made up of 2-3 spinbuttons (hours, minutes, optional AM/PM period)
+ * - dropdown arrow button - opens a flyout menu with predefined time intervals
+ * - helper text - displayed below the input field
+ *
+ * Users can input values by:
+ * - Manually entering numbers/characters in spinbuttons
+ * - Navigating using arrow keys to increment/decrement values
+ * - Selecting a predefined time from the dropdown menu
+ *
+ * @tagname mdc-timepicker
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-option
+ * @dependency mdc-popover
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
+ *
+ * @event input - (React: onInput) This event is dispatched when the time value changes.
+ * @event change - (React: onChange) This event is dispatched when the time value is committed.
+ * @event focus - (React: onFocus) This event is dispatched when the timepicker receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the timepicker loses focus.
+ *
+ * @slot label - Slot for the label element.
+ * @slot toggletip - Slot for the toggletip info icon button.
+ * @slot help-icon - Slot for the helper/validation icon.
+ * @slot help-text - Slot for the helper/validation text.
+ *
+ * @cssproperty --mdc-timepicker-background-color - Background color of the timepicker input.
+ * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.
+ * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.
+ * @cssproperty --mdc-timepicker-width - Width of the timepicker component.
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element.
+ * @csspart info-icon-btn - The info icon button element.
+ * @csspart label-toggletip - The toggletip element.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element.
+ * @csspart help-text-container - The container for helper/validation elements.
+ * @csspart container - The outer container for the input and popover.
+ * @csspart base-container - The input container with border and background.
+ * @csspart spinbutton-group - The container for spinbutton elements.
+ * @csspart spinbutton - A spinbutton input element.
+ * @csspart separator - The colon separator between spinbuttons.
+ * @csspart period - The AM/PM period spinbutton.
+ * @csspart icon-container - The dropdown arrow button container.
+ * @csspart native-input - The hidden native input for form participation.
+ * @csspart listbox - The dropdown list container.
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onInput: 'input',
+        onChange: 'change',
+        onFocus: 'focus',
+        onBlur: 'blur',
+    },
+    displayName: 'TimePicker',
+});
+export default reactWrapper;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.130.8",
+  "version": "0.131.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"