@marwes-ui/react 1.1.0 → 1.2.0

package/README.md

@@ -1,6 +1,8 @@
+React 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 @@
 
 React 18+ • 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) • [React Storybook](https://storybook-react.marwes.io/latest/) • [GitHub](https://github.com/niklas-westman/marwes)
 
 </div>
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-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, DatePickerDay, 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, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 import * as React from 'react';
 export { MarwesThemeScript, MarwesThemeScriptProps, MarwesThemeStyle, MarwesThemeStyleProps, createMarwesThemeScript, createMarwesThemeStyle } from './ssr.js';
@@ -253,6 +253,7 @@ type InputOtpProps = Omit<InputOtpOptions, "describedBy"> & {
 };
 declare function InputOtp(props: InputOtpProps): React.ReactElement;
 
+type SelectFieldVariant = "default" | "date";
 type SelectFieldProps = {
     id?: string;
     label: string;
@@ -260,6 +261,7 @@ type SelectFieldProps = {
     error?: string;
     select: SelectProps;
     ariaDescribedBy?: string;
+    variant?: SelectFieldVariant;
 };
 declare function SelectField(props: SelectFieldProps): React.ReactElement;
 
@@ -958,6 +960,11 @@ declare function ButtonSpinner(props: ButtonSpinnerProps): React.ReactElement;
 type EmptyStateSpinnerProps = SpinnerProps;
 declare function EmptyStateSpinner(props: EmptyStateSpinnerProps): React.ReactElement;
 
+interface SkeletonProps extends SkeletonOptions, Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    dataAttributes?: Record<string, string>;
+}
+declare function Skeleton(props: SkeletonProps): React.ReactElement;
+
 /**
  * React adapter for Marwes Spacing component.
  * - Renders a decorative, aria-hidden div using the core spacing recipe.
@@ -1253,6 +1260,28 @@ type ParagraphProps = ParagraphOptions & {
  */
 declare function Paragraph(props: ParagraphProps): React.ReactElement;
 
+interface StatTileProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "title">, Pick<StatTileOptions, "dataAttributes"> {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    subtitle?: React.ReactNode;
+    trendValue?: React.ReactNode;
+    trendDirection?: StatTileTrendDirection;
+    tone?: StatTileTone;
+}
+declare function StatTile(props: StatTileProps): React.ReactElement;
+
+interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onSelect">, Pick<DatePickerOptions, "monthLabel" | "weekdayLabels" | "weeks" | "previousYearLabel" | "previousMonthLabel" | "nextMonthLabel" | "nextYearLabel" | "cancelLabel" | "applyLabel" | "calendarLabel" | "dataAttributes"> {
+    device?: DatePickerDevice;
+    onPreviousYear?: () => void;
+    onPreviousMonth?: () => void;
+    onNextMonth?: () => void;
+    onNextYear?: () => void;
+    onDaySelect?: (day: DatePickerDay) => void;
+    onCancel?: () => void;
+    onApply?: () => void;
+}
+declare function DatePicker(props: DatePickerProps): React.ReactElement;
+
 interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** Optional title rendered above the body content */
     title?: React.ReactNode;
@@ -2132,4 +2161,4 @@ type InfoDialogProps = Omit<DialogModalProps, "footer"> & {
 };
 declare function InfoDialog(props: InfoDialogProps): React.ReactElement;
 
-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, type H1Props, H2, type H2Props, H3, type H3Props, 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, 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, type H1Props, H2, type H2Props, H3, type H3Props, 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, useTheme, useThemeMode, useToast };

package/dist/index.js

@@ -1,6 +1,6 @@
 export { MarwesThemeScript, MarwesThemeStyle, createMarwesThemeScript, createMarwesThemeStyle } from './chunk-VFY2GW62.js';
 import '@marwes-ui/presets/firstEdition/styles.css';
-import { createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, createDividerRecipe, createSpacingRecipe, createSliderRecipe, richTextCommandByFormat, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, ThemeMode, resolveThemePreference, nextThemeMode, resolveThemeInput, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, headingRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, moveTabSelection, createDialogRecipe, sanitizeCurrencyValue, isThemePreference, themeToCSSVars, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
+import { createRichTextRecipe, resolveRichTextAllowedFormats, normalizeRichTextHtml, isRichTextHtmlEmpty, createDividerRecipe, createSpacingRecipe, createSliderRecipe, richTextCommandByFormat, resolveIconSize, resolveIconStrokeWidth, iconRegistry, resolveIconA11y, ThemeMode, resolveThemePreference, nextThemeMode, resolveThemeInput, createSpinnerRecipe, createButtonRecipe, ButtonAction, ButtonVariant, IconName, createInputRecipe, createSelectRecipe, resolveSelectMode, createTextareaRecipe, paragraphRecipe, buildInputFieldA11yIds, sanitizeInputOtpValue, createInputOtpRecipe, buildRichTextFieldA11yIds, buildCurrencyHelperText, getCurrencySymbol, createAvatarRecipe, createPurposeSemanticAttributes, checkboxRecipe, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, createSkeletonRecipe, headingRecipe, createStatTileRecipe, createDatePickerRecipe, createCardRecipe, createToastRecipe, createTooltipRecipe, createAccordionRecipe, buildAccordionFieldA11yIds, radioRecipe, buildRadioGroupFieldA11yIds, createBadgeRecipe, createSwitchRecipe, buildSwitchFieldA11yIds, buildSliderFieldA11yIds, createTabRecipe, resolveTabValue, buildTabGroupA11yIds, moveTabSelection, createDialogRecipe, sanitizeCurrencyValue, isThemePreference, themeToCSSVars, extractUsedWeights, extractFontFamilyName, shouldLoadGoogleFont, buildGoogleFontsUrl } from '@marwes-ui/core';
 export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, IconName, Spacings, SwitchSize, ThemeMode, createFontStack, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar } from '@marwes-ui/core';
 import * as React2 from 'react';
 import { useEffect } from 'react';
@@ -1625,7 +1625,7 @@ function getNextEnabledOptionIndex(options, currentIndex, direction) {
   return currentIndex;
 }
 function MarwesSelectFieldControl(props) {
-  const { id, select } = props;
+  const { id, label, select } = props;
   const listboxId = `${id}-listbox`;
   const isControlled = select.value !== void 0;
   const [internalValue, setInternalValue] = React2.useState(() => getInitialSelectValue2(select));
@@ -1639,6 +1639,7 @@ function MarwesSelectFieldControl(props) {
   const selectedOption = select.options.find((option) => option.value === value) ?? (select.placeholder === void 0 ? select.options[0] : void 0);
   const placeholderSelected = select.placeholder !== void 0 && value === "";
   const displayText = placeholderSelected ? select.placeholder : selectedOption?.label ?? "";
+  const accessibleName = select.ariaLabel ?? (hasTextContent3(label) ? label : void 0) ?? (hasTextContent3(displayText) ? displayText : void 0);
   React2.useEffect(() => {
     if (!open) {
       return;
@@ -1775,6 +1776,7 @@ function MarwesSelectFieldControl(props) {
             "aria-controls": listboxId,
             "aria-expanded": open,
             "aria-haspopup": "listbox",
+            "aria-label": accessibleName,
             "aria-describedby": select.describedBy,
             "aria-invalid": select.invalid ? "true" : void 0,
             "aria-required": select.required ? "true" : void 0,
@@ -1880,6 +1882,7 @@ function SelectField(props) {
     "mw-input-field",
     "mw-input-field--select",
     mode === "marwes" && "mw-input-field--select-marwes",
+    props.variant === "date" && "mw-input-field--select-date",
     disabled && "mw-input-field--disabled",
     invalid && "mw-input-field--invalid"
   );
@@ -1893,7 +1896,7 @@ function SelectField(props) {
   }
   return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
     /* @__PURE__ */ jsx("label", { className: "mw-input-field__label", htmlFor: id, children: /* @__PURE__ */ jsx(Paragraph, { size: "md", children: props.label }) }),
-    /* @__PURE__ */ jsx("div", { className: "mw-input-field__input-wrapper", children: mode === "native" ? /* @__PURE__ */ jsx(Select, { ...selectProps, native: true }) : /* @__PURE__ */ jsx(MarwesSelectFieldControl, { id, select: selectProps }) }),
+    /* @__PURE__ */ jsx("div", { className: "mw-input-field__input-wrapper", children: mode === "native" ? /* @__PURE__ */ jsx(Select, { ...selectProps, native: true }) : /* @__PURE__ */ jsx(MarwesSelectFieldControl, { id, label: props.label, select: selectProps }) }),
     hasHelperText && !hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__helper", id: helperTextId, children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.helperText }) }),
     hasError && /* @__PURE__ */ jsx("div", { className: "mw-input-field__error", id: errorId, "aria-live": "polite", children: /* @__PURE__ */ jsx(Paragraph, { size: "sm", children: props.error }) })
   ] });
@@ -2511,6 +2514,51 @@ var Divider = React2.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx("hr", { ref, ...kit.a11y, ...kit.dataAttributes, className, style });
 });
 Divider.displayName = "Divider";
+function Skeleton(props) {
+  const {
+    className,
+    style,
+    dataAttributes,
+    variant,
+    width,
+    height,
+    radius,
+    animation,
+    decorative,
+    ariaLabel,
+    id,
+    ...nativeSpanProps
+  } = props;
+  const resolvedAriaLabel = ariaLabel ?? (typeof nativeSpanProps["aria-label"] === "string" ? nativeSpanProps["aria-label"] : void 0);
+  const skeletonOptions = {
+    ...variant !== void 0 ? { variant } : {},
+    ...width !== void 0 ? { width } : {},
+    ...height !== void 0 ? { height } : {},
+    ...radius !== void 0 ? { radius } : {},
+    ...animation !== void 0 ? { animation } : {},
+    ...decorative !== void 0 ? { decorative } : {},
+    ...resolvedAriaLabel !== void 0 ? { ariaLabel: resolvedAriaLabel } : {},
+    ...id !== void 0 ? { id } : {}
+  };
+  const renderKit = createSkeletonRecipe(skeletonOptions);
+  const mergedClassName = [renderKit.className, className].filter(Boolean).join(" ");
+  const mergedStyle = { ...renderKit.vars, ...style };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...nativeSpanProps,
+      ...renderKit.dataAttributes,
+      ...dataAttributes,
+      className: mergedClassName,
+      style: mergedStyle,
+      role: renderKit.a11y.role,
+      id: renderKit.a11y.id,
+      "aria-hidden": renderKit.a11y.ariaHidden ? "true" : void 0,
+      "aria-label": renderKit.a11y.ariaLabel,
+      "aria-live": renderKit.a11y.ariaLive
+    }
+  );
+}
 var Spacing = React2.forwardRef((props, ref) => {
   const { className: customClassName, scale, size, spacing, style: customStyle } = props;
   const resolvedSize = spacing ?? size;
@@ -2548,6 +2596,189 @@ function H3(props) {
   const className = customClassName ? `${kit.className} ${customClassName}` : kit.className;
   return /* @__PURE__ */ jsx("h3", { id: kit.a11y.id, "aria-label": kit.a11y.ariaLabel, className, style, children });
 }
+function StatTile(props) {
+  const {
+    className,
+    dataAttributes,
+    label,
+    value,
+    subtitle,
+    trendValue,
+    trendDirection,
+    tone,
+    ...nativeArticleProps
+  } = props;
+  const kit = createStatTileRecipe({
+    ...tone !== void 0 ? { tone } : {},
+    ...trendDirection !== void 0 ? { trendDirection } : {},
+    ...typeof trendValue === "string" ? { trendValue } : {},
+    ...dataAttributes !== void 0 ? { dataAttributes } : {}
+  });
+  const mergedClassName = [kit.className, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("article", { ...nativeArticleProps, ...kit.dataAttributes, className: mergedClassName, children: [
+    /* @__PURE__ */ jsxs("div", { className: kit.slots.headerClassName, children: [
+      /* @__PURE__ */ jsx("span", { className: kit.slots.labelClassName, children: label }),
+      trendValue ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ...kit.trendDataAttributes,
+          className: kit.slots.trendClassName,
+          "aria-label": kit.a11y.trendAriaLabel,
+          children: [
+            kit.trendIcon ? /* @__PURE__ */ jsx("span", { className: kit.slots.trendIconClassName, "aria-hidden": "true", children: kit.trendIcon }) : null,
+            /* @__PURE__ */ jsx("span", { className: kit.slots.trendValueClassName, children: trendValue })
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: kit.slots.valueClassName, children: value }),
+    subtitle ? /* @__PURE__ */ jsx("div", { className: kit.slots.subtitleClassName, children: subtitle }) : null
+  ] });
+}
+function DatePicker(props) {
+  const {
+    className,
+    monthLabel,
+    weekdayLabels,
+    weeks,
+    device,
+    previousYearLabel,
+    previousMonthLabel,
+    nextMonthLabel,
+    nextYearLabel,
+    cancelLabel,
+    applyLabel,
+    calendarLabel,
+    dataAttributes,
+    onPreviousYear,
+    onPreviousMonth,
+    onNextMonth,
+    onNextYear,
+    onDaySelect,
+    onCancel,
+    onApply,
+    ...nativeProps
+  } = props;
+  const kit = createDatePickerRecipe({
+    ...monthLabel !== void 0 ? { monthLabel } : {},
+    ...weekdayLabels !== void 0 ? { weekdayLabels } : {},
+    ...weeks !== void 0 ? { weeks } : {},
+    ...device !== void 0 ? { device } : {},
+    ...previousYearLabel !== void 0 ? { previousYearLabel } : {},
+    ...previousMonthLabel !== void 0 ? { previousMonthLabel } : {},
+    ...nextMonthLabel !== void 0 ? { nextMonthLabel } : {},
+    ...nextYearLabel !== void 0 ? { nextYearLabel } : {},
+    ...cancelLabel !== void 0 ? { cancelLabel } : {},
+    ...applyLabel !== void 0 ? { applyLabel } : {},
+    ...calendarLabel !== void 0 ? { calendarLabel } : {},
+    ...dataAttributes !== void 0 ? { dataAttributes } : {}
+  });
+  const mergedClassName = [kit.className, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...nativeProps,
+      ...kit.dataAttributes,
+      className: mergedClassName,
+      "aria-label": kit.labels.calendar,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: kit.slots.headerClassName, children: [
+          /* @__PURE__ */ jsxs("div", { className: kit.slots.navGroupClassName, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: kit.slots.navButtonClassName,
+                "aria-label": kit.labels.previousYear,
+                onClick: onPreviousYear,
+                children: "\xAB"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: kit.slots.navButtonClassName,
+                "aria-label": kit.labels.previousMonth,
+                onClick: onPreviousMonth,
+                children: "\u2039"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: kit.slots.monthLabelClassName, children: kit.monthLabel }),
+          /* @__PURE__ */ jsxs("div", { className: kit.slots.navGroupClassName, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: kit.slots.navButtonClassName,
+                "aria-label": kit.labels.nextMonth,
+                onClick: onNextMonth,
+                children: "\u203A"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: kit.slots.navButtonClassName,
+                "aria-label": kit.labels.nextYear,
+                onClick: onNextYear,
+                children: "\xBB"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("table", { className: kit.slots.gridClassName, "aria-label": kit.monthLabel, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "mw-date-picker__weekdays", children: kit.weekdayLabels.map((weekday) => /* @__PURE__ */ jsx("th", { className: kit.slots.weekdayClassName, scope: "col", children: weekday }, weekday)) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: kit.weeks.map((week, weekIndex) => /* @__PURE__ */ jsx(
+            "tr",
+            {
+              className: kit.slots.weekClassName,
+              children: week.map((day, dayIndex) => {
+                const dayKit = kit.dayKits[weekIndex]?.[dayIndex];
+                if (!dayKit) return null;
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: kit.slots.cellClassName,
+                    children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        ...dayKit.dataAttributes,
+                        className: dayKit.className,
+                        "aria-label": dayKit.ariaLabel,
+                        "aria-pressed": dayKit.selected ? "true" : void 0,
+                        disabled: dayKit.disabled,
+                        onClick: () => onDaySelect?.(day),
+                        children: day.label
+                      }
+                    )
+                  },
+                  day.date ?? `${weekIndex}-${dayIndex}`
+                );
+              })
+            },
+            week.map((day) => day.date ?? day.label).join("-")
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: kit.slots.footerClassName, children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: kit.slots.footerButtonClassName, onClick: onCancel, children: kit.labels.cancel }),
+          kit.labels.apply ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `${kit.slots.footerButtonClassName} mw-date-picker__footer-button--primary`,
+              onClick: onApply,
+              children: kit.labels.apply
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
 function Card(props) {
   const { title, children, className, dataAttributes, ...nativeDivProps } = props;
   const kit = createCardRecipe(dataAttributes ? { dataAttributes } : {});
@@ -4407,6 +4638,6 @@ function InfoDialog(props) {
   );
 }
 
-export { Accordion, AccordionField, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeGroup, BrightnessSlider, Button, ButtonSpinner, CancelButton, Card, Checkbox, CheckboxField, CheckboxGroupField, CloseButton, ConfirmButton, ConfirmDialog, ContentTabs, CopyButton, CreateButton, CurrencyField, DateOfBirthField, DestructiveButton, DestructiveDialog, Dialog, DialogModal, Divider, DownloadButton, DropdownButton, DropdownField, EditButton, EmailField, EmptyStateSpinner, ErrorToast, FAQAccordion, FeatureToggle, FilterButton, H1, H2, H3, Icon, InfoDialog, InfoToast, Input, InputField, InputOtp, LinkButton, MarwesProvider, NavigationTabs, NotificationBadge, OptionRadioGroup, Paragraph, PasswordField, PermissionSwitch, PhoneField, PreferenceSwitch, PresenceAvatar, PrimaryButton, PriorityBadge, ProductCard, ProfileAvatar, ProfileCard, Radio, RadioGroupField, RadiusSlider, RatingRadioGroup, RefreshButton, RichText, RichTextField, SaveButton, SearchButton, SearchField, SecondaryButton, SectionsAccordion, Select, SelectField, SettingsAccordion, SettingsTabs, Slider, SliderField, SortButton, Spacer, Spacing, Spinner, StatCard, StatusBadge, SubmitButton, SuccessButton, SuccessToast, Switch, SwitchField, Tab, TabGroup, TabPanel, TeamAvatarGroup, TextButton, Textarea, TextareaField, Toast, ToastContainer, ToastProvider, Tooltip, TooltipGroup, URLField, UploadButton, VerifyButton, VolumeSlider, WarningToast, YesNoRadioGroup, ZipCodeField, useTheme, useThemeMode, useToast };
+export { Accordion, AccordionField, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeGroup, BrightnessSlider, Button, ButtonSpinner, CancelButton, Card, Checkbox, CheckboxField, CheckboxGroupField, CloseButton, ConfirmButton, ConfirmDialog, ContentTabs, CopyButton, CreateButton, CurrencyField, DateOfBirthField, DatePicker, DestructiveButton, DestructiveDialog, Dialog, DialogModal, Divider, DownloadButton, DropdownButton, DropdownField, EditButton, EmailField, EmptyStateSpinner, ErrorToast, FAQAccordion, FeatureToggle, FilterButton, H1, H2, H3, Icon, InfoDialog, InfoToast, Input, InputField, InputOtp, LinkButton, MarwesProvider, NavigationTabs, NotificationBadge, OptionRadioGroup, Paragraph, PasswordField, PermissionSwitch, PhoneField, PreferenceSwitch, PresenceAvatar, PrimaryButton, PriorityBadge, ProductCard, ProfileAvatar, ProfileCard, Radio, RadioGroupField, RadiusSlider, RatingRadioGroup, RefreshButton, RichText, RichTextField, SaveButton, SearchButton, SearchField, SecondaryButton, SectionsAccordion, Select, SelectField, SettingsAccordion, SettingsTabs, Skeleton, Slider, SliderField, SortButton, Spacer, Spacing, Spinner, StatCard, StatTile, StatusBadge, SubmitButton, SuccessButton, SuccessToast, Switch, SwitchField, Tab, TabGroup, TabPanel, TeamAvatarGroup, TextButton, Textarea, TextareaField, Toast, ToastContainer, ToastProvider, Tooltip, TooltipGroup, URLField, UploadButton, VerifyButton, VolumeSlider, WarningToast, YesNoRadioGroup, ZipCodeField, useTheme, useThemeMode, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map