@marwes-ui/vue 1.1.0 → 1.3.0

package/README.md

@@ -1,6 +1,8 @@
+Vue 3 components for the Marwes design system with default styling, typed theme tokens, accessibility contracts, and AI-readable semantics.
+
 <div align="center">
 
-<img alt="Marwes Design System" src="https://raw.githubusercontent.com/niklas-westman/marwes/main/.github/assets/banner.png" width="100%" style="border-radius: 40px;">
+<img alt="Marwes Design System" src="https://raw.githubusercontent.com/niklas-westman/marwes/main/.github/assets/cover-v3.png" width="100%" style="border-radius: 40px;">
 
 <br>
 <br>
@@ -11,7 +13,7 @@
 
 Vue 3.4+ • TypeScript-first • Default CSS included • ThemeInput • Google Fonts DX • Purpose components
 
-[Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [Storybook](https://d3hobet9plpuvm.cloudfront.net/storybook-react/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
+[Documentation](https://github.com/niklas-westman/marwes/tree/main/docs) • [Vue Storybook](https://storybook-vue.marwes.io/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
 
 </div>
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { ComputedRef, VNodeChild } from 'vue';
 import * as _marwes_ui_core from '@marwes-ui/core';
-import { ThemeInput, ThemePreference, ThemeMode, FontLoadingConfig, ThemeVariableStrategy, ResolvedTheme, ButtonOptions, InputOptions, SelectOptions, SelectAppearance as SelectAppearance$1, SelectOption as SelectOption$1, TextareaOptions, RichTextOptions, InputOtpOptions, CurrencyCode, iconRegistry, IconSize, IconStrokeWidth, AvatarOptions, CheckboxProps as CheckboxProps$1, DividerOptions, DividerSize, DividerOrientation, SpinnerOptions, SpacingOptions, SpacingSize, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize, ToastOptions, ToastVariant, ToastIntent, ToastPlacement, TooltipOptions, IconNameType, RadioOptions, BadgeOptions, SwitchOptions, SliderOptions, TabOptions, DialogOptions } from '@marwes-ui/core';
+import { ThemeInput, ThemePreference, ThemeMode, FontLoadingConfig, ThemeVariableStrategy, ResolvedTheme, ButtonOptions, InputOptions, SelectOptions, SelectAppearance as SelectAppearance$1, SelectOption as SelectOption$1, TextareaOptions, RichTextOptions, InputOtpOptions, CurrencyCode, iconRegistry, IconSize, IconStrokeWidth, AvatarOptions, CheckboxProps as CheckboxProps$1, DividerOptions, DividerSize, DividerOrientation, SpinnerOptions, SkeletonOptions, SpacingOptions, SpacingSize, HeadingOptions, HeadingSize, ParagraphOptions, ParagraphSize, StatTileOptions, StatTileTrendDirection, StatTileTone, DatePickerOptions, DatePickerDevice, ToastOptions, ToastVariant, ToastIntent, ToastPlacement, TooltipOptions, IconNameType, RadioOptions, BadgeOptions, SwitchOptions, SliderOptions, TabOptions, DialogOptions } from '@marwes-ui/core';
 export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, Density, FontLoadingConfig, FontLoadingMode, FontLoadingOptions, IconName, MarwesThemeScriptOptions, MarwesThemeStyleOptions, MwAvailableFont, MwFontFallback, MwGoogleFontFamily, MwStyledTheme, MwThemeVarName, MwThemeVarNames, MwThemeVarReference, MwThemeVars, ResolvedTheme, SpacingSize, Spacings, SwitchSize, Theme, ThemeInput, ThemeMode, ThemeModeAttribute, ThemeModeRootTarget, ThemePreference, ThemeVariableStrategy, ToneName, createFontStack, createMarwesThemeScript, createMarwesThemeStyle, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 
 type ThemeTarget = "provider" | "html" | "body";
@@ -1198,6 +1198,7 @@ declare const InputOtp: vue.DefineSetupFnComponent<InputOtpProps, ("change" | "u
     "onValue-change"?: (...args: any[]) => any;
 }, vue.PublicProps>;
 
+type SelectFieldVariant = "default" | "date";
 type SelectFieldProps = {
     id?: string;
     label: string;
@@ -1206,6 +1207,7 @@ type SelectFieldProps = {
     select: SelectProps;
     ariaDescribedBy?: string;
     modelValue?: string;
+    variant?: SelectFieldVariant;
 };
 declare const SelectField: vue.DefineSetupFnComponent<SelectFieldProps, ("update:modelValue" | "value-change")[], {}, SelectFieldProps & {
     "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -1714,6 +1716,15 @@ declare const EmptyStateSpinner: vue.DefineComponent<{
     variant?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
+type SkeletonProps = SkeletonOptions & {
+    className?: string;
+    dataAttributes?: Record<string, string>;
+};
+declare const Skeleton: vue.DefineSetupFnComponent<SkeletonProps, {}, {}, SkeletonOptions & {
+    className?: string;
+    dataAttributes?: Record<string, string>;
+} & {}, vue.PublicProps>;
+
 type SpacingProps = SpacingOptions & {
     size?: SpacingSize;
     spacing?: SpacingSize;
@@ -1765,6 +1776,31 @@ declare const Paragraph: vue.DefineSetupFnComponent<ParagraphProps, {}, {}, Para
     className?: string;
 } & {}, vue.PublicProps>;
 
+interface StatTileProps extends Pick<StatTileOptions, "dataAttributes"> {
+    className?: string;
+    label: string;
+    value: string;
+    subtitle?: string;
+    trendValue?: string;
+    trendDirection?: StatTileTrendDirection;
+    tone?: StatTileTone;
+}
+declare const StatTile: vue.DefineSetupFnComponent<StatTileProps, {}, {}, StatTileProps & {}, vue.PublicProps>;
+
+interface DatePickerProps extends Pick<DatePickerOptions, "monthLabel" | "weekdayLabels" | "weeks" | "previousYearLabel" | "previousMonthLabel" | "nextMonthLabel" | "nextYearLabel" | "cancelLabel" | "applyLabel" | "calendarLabel" | "dataAttributes"> {
+    className?: string;
+    device?: DatePickerDevice;
+}
+declare const DatePicker: vue.DefineSetupFnComponent<DatePickerProps, ("cancel" | "previousYear" | "previousMonth" | "nextMonth" | "nextYear" | "daySelect" | "apply")[], {}, DatePickerProps & {
+    onCancel?: (...args: any[]) => any;
+    onPreviousYear?: (...args: any[]) => any;
+    onPreviousMonth?: (...args: any[]) => any;
+    onNextMonth?: (...args: any[]) => any;
+    onNextYear?: (...args: any[]) => any;
+    onDaySelect?: (...args: any[]) => any;
+    onApply?: (...args: any[]) => any;
+}, vue.PublicProps>;
+
 interface CardProps {
     className?: string;
     id?: string;
@@ -2165,8 +2201,8 @@ type YesNoRadioGroupProps = Omit<RadioGroupFieldProps, "options"> & {
 declare const YesNoRadioGroup: vue.DefineComponent<{
     disabled?: any;
     label?: any;
-    value?: any;
     error?: any;
+    value?: any;
     id?: any;
     required?: any;
     name?: any;
@@ -2184,8 +2220,8 @@ declare const YesNoRadioGroup: vue.DefineComponent<{
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
     disabled?: any;
     label?: any;
-    value?: any;
     error?: any;
+    value?: any;
     id?: any;
     required?: any;
     name?: any;
@@ -2207,8 +2243,8 @@ type RatingRadioGroupProps = Omit<RadioGroupFieldProps, "options"> & {
 declare const RatingRadioGroup: vue.DefineComponent<{
     disabled?: any;
     label?: any;
-    value?: any;
     error?: any;
+    value?: any;
     id?: any;
     required?: any;
     name?: any;
@@ -2227,8 +2263,8 @@ declare const RatingRadioGroup: vue.DefineComponent<{
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
     disabled?: any;
     label?: any;
-    value?: any;
     error?: any;
+    value?: any;
     id?: any;
     required?: any;
     name?: any;
@@ -2247,8 +2283,8 @@ type OptionRadioGroupProps = RadioGroupFieldProps;
 declare const OptionRadioGroup: vue.DefineComponent<{
     disabled?: any;
     label?: any;
-    value?: any;
     error?: any;
+    value?: any;
     id?: any;
     required?: any;
     name?: any;
@@ -2264,8 +2300,8 @@ declare const OptionRadioGroup: vue.DefineComponent<{
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{
     disabled?: any;
     label?: any;
-    value?: any;
     error?: any;
+    value?: any;
     id?: any;
     required?: any;
     name?: any;
@@ -2759,6 +2795,7 @@ declare const ConfirmDialog: vue.DefineComponent<{
     onCancel?: any;
     className?: any;
     description?: any;
+    cancelLabel?: any;
     open?: any;
     defaultOpen?: any;
     showFooter?: any;
@@ -2769,7 +2806,6 @@ declare const ConfirmDialog: vue.DefineComponent<{
     portalTarget?: any;
     overlayClassName?: any;
     confirmLabel?: any;
-    cancelLabel?: any;
     onConfirm?: any;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
@@ -2784,6 +2820,7 @@ declare const ConfirmDialog: vue.DefineComponent<{
     onCancel?: any;
     className?: any;
     description?: any;
+    cancelLabel?: any;
     open?: any;
     defaultOpen?: any;
     showFooter?: any;
@@ -2794,7 +2831,6 @@ declare const ConfirmDialog: vue.DefineComponent<{
     portalTarget?: any;
     overlayClassName?: any;
     confirmLabel?: any;
-    cancelLabel?: any;
     onConfirm?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 type DestructiveDialogProps = Omit<DialogModalProps, "footer"> & {
@@ -2814,6 +2850,7 @@ declare const DestructiveDialog: vue.DefineComponent<{
     onCancel?: any;
     className?: any;
     description?: any;
+    cancelLabel?: any;
     open?: any;
     defaultOpen?: any;
     showFooter?: any;
@@ -2824,7 +2861,6 @@ declare const DestructiveDialog: vue.DefineComponent<{
     portalTarget?: any;
     overlayClassName?: any;
     confirmLabel?: any;
-    cancelLabel?: any;
     onConfirm?: any;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
@@ -2839,6 +2875,7 @@ declare const DestructiveDialog: vue.DefineComponent<{
     onCancel?: any;
     className?: any;
     description?: any;
+    cancelLabel?: any;
     open?: any;
     defaultOpen?: any;
     showFooter?: any;
@@ -2849,7 +2886,6 @@ declare const DestructiveDialog: vue.DefineComponent<{
     portalTarget?: any;
     overlayClassName?: any;
     confirmLabel?: any;
-    cancelLabel?: any;
     onConfirm?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 type InfoDialogProps = Omit<DialogModalProps, "footer"> & {
@@ -2902,4 +2938,4 @@ declare const InfoDialog: vue.DefineComponent<{
     onAcknowledge?: any;
 }> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { Accordion, AccordionField, type AccordionFieldItem, type AccordionFieldProps, type AccordionProps, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, Badge, BadgeGroup, type BadgeGroupProps, type BadgeProps, BrightnessSlider, type BrightnessSliderProps, Button, type ButtonProps, ButtonSpinner, type ButtonSpinnerProps, CancelButton, type CancelButtonProps, Card, type CardProps, Checkbox, CheckboxField, type CheckboxFieldProps, CheckboxGroupField, type CheckboxGroupFieldOption, type CheckboxGroupFieldProps, type CheckboxProps, CloseButton, type CloseButtonProps, ConfirmButton, type ConfirmButtonProps, ConfirmDialog, type ConfirmDialogProps, ContentTabs, type ContentTabsProps, CopyButton, type CopyButtonProps, CreateButton, type CreateButtonProps, CurrencyField, type CurrencyFieldProps, DateOfBirthField, type DateOfBirthFieldProps, DestructiveButton, type DestructiveButtonProps, DestructiveDialog, type DestructiveDialogProps, Dialog, type DialogFooterControls, DialogModal, type DialogModalProps, type DialogProps, Divider, type DividerProps, DownloadButton, type DownloadButtonProps, DropdownButton, type DropdownButtonProps, DropdownField, type DropdownFieldProps, EditButton, type EditButtonProps, EmailField, type EmailFieldProps, EmptyStateSpinner, type EmptyStateSpinnerProps, ErrorToast, type ErrorToastProps, FAQAccordion, type FAQAccordionProps, FeatureToggle, type FeatureToggleProps, FilterButton, type FilterButtonProps, H1, H2, H3, type HeadingLevel, type HeadingProps, Icon, type IconProps, InfoDialog, type InfoDialogProps, InfoToast, type InfoToastProps, Input, InputField, type InputFieldProps, InputOtp, type InputOtpProps, type InputProps, LinkButton, type LinkButtonProps, type ManagedToast, MarwesProvider, type MarwesProviderProps, NavigationTabs, type NavigationTabsProps, NotificationBadge, type NotificationBadgeProps, OptionRadioGroup, type OptionRadioGroupProps, Paragraph, type ParagraphProps, PasswordField, type PasswordFieldProps, PermissionSwitch, type PermissionSwitchProps, PhoneField, type PhoneFieldProps, PreferenceSwitch, type PreferenceSwitchProps, PresenceAvatar, type PresenceAvatarProps, PrimaryButton, type PrimaryButtonProps, PriorityBadge, type PriorityBadgeProps, ProductCard, type ProductCardProps, ProfileAvatar, type ProfileAvatarProps, ProfileCard, type ProfileCardProps, Radio, RadioGroupField, type RadioGroupFieldOption, type RadioGroupFieldProps, type RadioProps, RadiusSlider, type RadiusSliderProps, RatingRadioGroup, type RatingRadioGroupProps, RefreshButton, type RefreshButtonProps, RichText, RichTextField, type RichTextFieldProps, type RichTextProps, SaveButton, type SaveButtonProps, SearchButton, type SearchButtonProps, SearchField, type SearchFieldProps, SecondaryButton, type SecondaryButtonProps, SectionsAccordion, type SectionsAccordionProps, Select, type SelectAppearance, SelectField, type SelectFieldProps, type SelectOption, type SelectProps, SettingsAccordion, type SettingsAccordionProps, SettingsTabs, type SettingsTabsProps, type ShowToastOptions, Slider, SliderField, type SliderFieldProps, type SliderProps, SortButton, type SortButtonProps, Spacer, type SpacerProps, Spacing, type SpacingProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, SubmitButton, type SubmitButtonProps, SuccessButton, type SuccessButtonProps, SuccessToast, type SuccessToastProps, Switch, SwitchField, type SwitchFieldProps, type SwitchProps, Tab, TabGroup, type TabGroupItem, type TabGroupProps, TabPanel, type TabPanelProps, type TabProps, TeamAvatarGroup, type TeamAvatarGroupProps, TextButton, type TextButtonProps, Textarea, TextareaField, type TextareaFieldProps, type TextareaProps, type ThemeModeContextValue, Toast, ToastContainer, type ToastContainerProps, type ToastController, type ToastProps, ToastProvider, type ToastProviderProps, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipProps, URLField, type URLFieldProps, UploadButton, type UploadButtonProps, VerifyButton, type VerifyButtonProps, VolumeSlider, type VolumeSliderProps, WarningToast, type WarningToastProps, YesNoRadioGroup, type YesNoRadioGroupProps, ZipCodeField, type ZipCodeFieldProps, createHeadingComponent, useTheme, useThemeMode, useToast };
+export { Accordion, AccordionField, type AccordionFieldItem, type AccordionFieldProps, type AccordionProps, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, Badge, BadgeGroup, type BadgeGroupProps, type BadgeProps, BrightnessSlider, type BrightnessSliderProps, Button, type ButtonProps, ButtonSpinner, type ButtonSpinnerProps, CancelButton, type CancelButtonProps, Card, type CardProps, Checkbox, CheckboxField, type CheckboxFieldProps, CheckboxGroupField, type CheckboxGroupFieldOption, type CheckboxGroupFieldProps, type CheckboxProps, CloseButton, type CloseButtonProps, ConfirmButton, type ConfirmButtonProps, ConfirmDialog, type ConfirmDialogProps, ContentTabs, type ContentTabsProps, CopyButton, type CopyButtonProps, CreateButton, type CreateButtonProps, CurrencyField, type CurrencyFieldProps, DateOfBirthField, type DateOfBirthFieldProps, DatePicker, type DatePickerProps, DestructiveButton, type DestructiveButtonProps, DestructiveDialog, type DestructiveDialogProps, Dialog, type DialogFooterControls, DialogModal, type DialogModalProps, type DialogProps, Divider, type DividerProps, DownloadButton, type DownloadButtonProps, DropdownButton, type DropdownButtonProps, DropdownField, type DropdownFieldProps, EditButton, type EditButtonProps, EmailField, type EmailFieldProps, EmptyStateSpinner, type EmptyStateSpinnerProps, ErrorToast, type ErrorToastProps, FAQAccordion, type FAQAccordionProps, FeatureToggle, type FeatureToggleProps, FilterButton, type FilterButtonProps, H1, H2, H3, type HeadingLevel, type HeadingProps, Icon, type IconProps, InfoDialog, type InfoDialogProps, InfoToast, type InfoToastProps, Input, InputField, type InputFieldProps, InputOtp, type InputOtpProps, type InputProps, LinkButton, type LinkButtonProps, type ManagedToast, MarwesProvider, type MarwesProviderProps, NavigationTabs, type NavigationTabsProps, NotificationBadge, type NotificationBadgeProps, OptionRadioGroup, type OptionRadioGroupProps, Paragraph, type ParagraphProps, PasswordField, type PasswordFieldProps, PermissionSwitch, type PermissionSwitchProps, PhoneField, type PhoneFieldProps, PreferenceSwitch, type PreferenceSwitchProps, PresenceAvatar, type PresenceAvatarProps, PrimaryButton, type PrimaryButtonProps, PriorityBadge, type PriorityBadgeProps, ProductCard, type ProductCardProps, ProfileAvatar, type ProfileAvatarProps, ProfileCard, type ProfileCardProps, Radio, RadioGroupField, type RadioGroupFieldOption, type RadioGroupFieldProps, type RadioProps, RadiusSlider, type RadiusSliderProps, RatingRadioGroup, type RatingRadioGroupProps, RefreshButton, type RefreshButtonProps, RichText, RichTextField, type RichTextFieldProps, type RichTextProps, SaveButton, type SaveButtonProps, SearchButton, type SearchButtonProps, SearchField, type SearchFieldProps, SecondaryButton, type SecondaryButtonProps, SectionsAccordion, type SectionsAccordionProps, Select, type SelectAppearance, SelectField, type SelectFieldProps, type SelectOption, type SelectProps, SettingsAccordion, type SettingsAccordionProps, SettingsTabs, type SettingsTabsProps, type ShowToastOptions, Skeleton, type SkeletonProps, Slider, SliderField, type SliderFieldProps, type SliderProps, SortButton, type SortButtonProps, Spacer, type SpacerProps, Spacing, type SpacingProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, SubmitButton, type SubmitButtonProps, SuccessButton, type SuccessButtonProps, SuccessToast, type SuccessToastProps, Switch, SwitchField, type SwitchFieldProps, type SwitchProps, Tab, TabGroup, type TabGroupItem, type TabGroupProps, TabPanel, type TabPanelProps, type TabProps, TeamAvatarGroup, type TeamAvatarGroupProps, TextButton, type TextButtonProps, Textarea, TextareaField, type TextareaFieldProps, type TextareaProps, type ThemeModeContextValue, Toast, ToastContainer, type ToastContainerProps, type ToastController, type ToastProps, ToastProvider, type ToastProviderProps, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipProps, URLField, type URLFieldProps, UploadButton, type UploadButtonProps, VerifyButton, type VerifyButtonProps, VolumeSlider, type VolumeSliderProps, WarningToast, type WarningToastProps, YesNoRadioGroup, type YesNoRadioGroupProps, ZipCodeField, type ZipCodeFieldProps, createHeadingComponent, useTheme, useThemeMode, useToast };