@marwes-ui/core 1.1.0 → 1.3.0

package/dist/index.js

@@ -84,6 +84,15 @@ function colorRoleVars(role, cr) {
     [`--mw-color-${role}-label-disabled`]: cr.labelDisabled
   };
 }
+function statusColorVars(role, tokens) {
+  return {
+    [`--mw-color-status-${role}-background`]: tokens.background,
+    [`--mw-color-status-${role}-text`]: tokens.text,
+    [`--mw-color-status-${role}-icon`]: tokens.icon,
+    [`--mw-color-status-${role}-border`]: tokens.border,
+    [`--mw-color-status-${role}-border-strong`]: tokens.borderStrong
+  };
+}
 function themeToCSSVars(theme) {
   const { color, font, ui, typography } = theme;
   return {
@@ -109,11 +118,18 @@ function themeToCSSVars(theme) {
     "--mw-color-text-subtle": color.textSubtle,
     "--mw-color-text-disabled": color.textDisabled,
     "--mw-color-text-inverted": color.textInverted,
+    "--mw-color-text-brand": color.textBrand,
     "--mw-color-border": color.border,
     "--mw-color-border-subtle": color.borderSubtle,
     "--mw-color-border-strong": color.borderStrong,
     "--mw-color-border-disabled": color.borderDisabled,
+    "--mw-color-border-brand": color.borderBrand,
     "--mw-color-focus": color.focus,
+    // Status role tokens (4 × 5 = 20)
+    ...statusColorVars("success", color.status.success),
+    ...statusColorVars("warning", color.status.warning),
+    ...statusColorVars("error", color.status.error),
+    ...statusColorVars("info", color.status.info),
     // Font (3)
     "--mw-font-primary": font.primary,
     "--mw-font-secondary": font.secondary,
@@ -316,8 +332,8 @@ function resolveColorRole(base, overrides) {
   };
   return overrides ? { ...derived, ...overrides } : derived;
 }
-function resolveSecondaryRole(primary) {
-  return {
+function resolveSecondaryRole(primary, overrides) {
+  const derived = {
     base: "transparent",
     hover: setAlpha(primary.base, 0.08),
     pressed: setAlpha(primary.base, 0.15),
@@ -327,6 +343,7 @@ function resolveSecondaryRole(primary) {
     border: primary.base,
     borderDisabled: primary.disabled
   };
+  return overrides ? { ...derived, ...overrides } : derived;
 }
 function resolveInfoRole(primary) {
   return { ...primary };
@@ -345,30 +362,62 @@ var lightThemeDefaults = {
   color: {
     // Primary (firstEdition brand blue)
     primary: "#2F31FC",
-    // Background & Surface (from Figma: Neutrals)
+    // Background & Surface
     background: "#FFFFFF",
-    surface: "#F9FAFB",
-    surfaceSubtle: "#F3F4F6",
+    surface: "#F8F8F8",
+    surfaceSubtle: "#F5F5F5",
     surfaceElevated: "#FFFFFF",
-    surfaceDisabled: "#F3F4F6",
+    surfaceDisabled: "#F5F5F5",
     surfaceInverted: "#141414",
-    // Text (from Figma: Colours/Text)
+    // Text
     text: "#141414",
-    textMuted: "#9CA3AF",
-    textSubtle: "#9CA3AF",
-    textDisabled: "rgba(20,20,20,0.4)",
-    textInverted: "#F9FAFB",
-    // Borders (from Figma: Colours/Border and Neutrals)
-    border: "rgba(0,0,0,0.4)",
-    borderSubtle: "#00000033",
-    borderStrong: "#141414",
-    borderDisabled: "rgba(20,20,20,0.16)",
-    // Focus color (from Figma: node 120:927 - Accessible blue)
-    focus: "#2684FF",
+    textMuted: "#595959",
+    textSubtle: "#737373",
+    textDisabled: "#737373",
+    textInverted: "#FFFFFF",
+    textBrand: "#2F31FC",
+    // Borders
+    border: "#D8D8D8",
+    borderSubtle: "#D8D8D8",
+    borderStrong: "#A3A3A3",
+    borderDisabled: "#D8D8D8",
+    borderBrand: "#2F31FC",
+    // Focus
+    focus: "#2F31FC",
     // Semantic colors
     danger: "#D90429",
-    success: "#00875A",
-    warning: "#FFB703"
+    success: "#006633",
+    warning: "#B45309",
+    status: {
+      success: {
+        background: "#E6F4ED",
+        text: "#006633",
+        icon: "#006D48",
+        border: "#90CAAD",
+        borderStrong: "#2E9970"
+      },
+      warning: {
+        background: "#FFF8E6",
+        text: "#B45309",
+        icon: "#D97706",
+        border: "#FDE08A",
+        borderStrong: "#E46F00"
+      },
+      error: {
+        background: "#FFE8EB",
+        text: "#A8031F",
+        icon: "#D90429",
+        border: "#FF8A95",
+        borderStrong: "#FF2847"
+      },
+      info: {
+        background: "#EEEEFF",
+        text: "#1B1D97",
+        icon: "#2F31FC",
+        border: "#ABABFD",
+        borderStrong: "#5859FC"
+      }
+    }
   },
   font: {
     primary: "'Instrument Sans', Inter, system-ui, sans-serif",
@@ -417,32 +466,64 @@ var lightThemeDefaults = {
 var darkThemeDefaults = {
   mode: ThemeMode.dark,
   color: {
-    // Primary — firstEdition brand blue in dark mode as well
-    primary: "#2F31FC",
-    // Background & Surface - Inverted
-    background: "#141414",
-    surface: "#141414",
-    surfaceSubtle: "#111827",
-    surfaceElevated: "#1F2937",
-    surfaceDisabled: "#3E3E3E",
-    surfaceInverted: "#F9FAFB",
-    // Text - Inverted
+    // Primary
+    primary: "#5859FC",
+    // Background & Surface
+    background: "#0F0F0F",
+    surface: "#1A1A1A",
+    surfaceSubtle: "#050505",
+    surfaceElevated: "#2B2B2B",
+    surfaceDisabled: "#1A1A1A",
+    surfaceInverted: "#FFFFFF",
+    // Text
     text: "#F9FAFB",
-    textMuted: "#9CA3AF",
-    textSubtle: "#6B7280",
-    textDisabled: "rgba(249,250,251,0.4)",
+    textMuted: "#A3A3A3",
+    textSubtle: "#595959",
+    textDisabled: "#595959",
     textInverted: "#141414",
-    // Borders - Adjusted for dark mode
-    border: "#d9d9d9",
-    borderSubtle: "#d4d4d433",
-    borderStrong: "#F9FAFB",
-    borderDisabled: "rgba(255,255,255,0.16)",
-    // Focus color - Same accessible blue works in both modes
-    focus: "#2684FF",
+    textBrand: "#8182FC",
+    // Borders
+    border: "#474747",
+    borderSubtle: "#474747",
+    borderStrong: "#A3A3A3",
+    borderDisabled: "#474747",
+    borderBrand: "#5859FC",
+    // Focus
+    focus: "#8182FC",
     // Semantic colors
-    danger: "#D90429",
-    success: "#00875A",
-    warning: "#FFB703"
+    danger: "#FF002C",
+    success: "#90CAAD",
+    warning: "#FCC94A",
+    status: {
+      success: {
+        background: "#001A0C",
+        text: "#90CAAD",
+        icon: "#5DB189",
+        border: "#5DB189",
+        borderStrong: "#006D48"
+      },
+      warning: {
+        background: "#221004",
+        text: "#FCC94A",
+        icon: "#F9B21A",
+        border: "#E46F00",
+        borderStrong: "#B45308"
+      },
+      error: {
+        background: "#240006",
+        text: "#FF5566",
+        icon: "#FF2847",
+        border: "#FF2847",
+        borderStrong: "#FF2847"
+      },
+      info: {
+        background: "#040519",
+        text: "#ABABFD",
+        icon: "#8182FC",
+        border: "#8182FC",
+        borderStrong: "#252599"
+      }
+    }
   },
   font: {
     primary: "'Instrument Sans', Inter, system-ui, sans-serif",
@@ -552,24 +633,97 @@ function resolveTone(tone) {
 }
 
 // src/theme/theme-normalize.ts
+var lightDefaultColorRoles = {
+  primary: {
+    base: "#2F31FC",
+    hover: "#2527CA",
+    pressed: "#1B1D97",
+    disabled: "#8182FC",
+    label: "#FFFFFF",
+    labelDisabled: "rgba(255,255,255,0.5)"
+  },
+  secondary: {
+    hover: "#EEEEFF",
+    pressed: "#D4D5FE",
+    label: "#2F31FC",
+    labelDisabled: "rgba(47,49,252,0.5)",
+    border: "#2F31FC",
+    borderDisabled: "#8182FC"
+  },
+  danger: {
+    base: "#D90429",
+    hover: "#A8031F",
+    pressed: "#780215",
+    disabled: "#FF8A95",
+    label: "#FFFFFF",
+    labelDisabled: "rgba(255,255,255,0.5)"
+  },
+  success: {
+    base: "#006633"
+  },
+  warning: {
+    base: "#B45309"
+  },
+  info: {
+    base: "#2F31FC"
+  }
+};
+var darkDefaultColorRoles = {
+  primary: {
+    base: "#2F31FC",
+    hover: "#5859FC",
+    pressed: "#8182FC",
+    disabled: "#121365",
+    label: "#FFFFFF",
+    labelDisabled: "rgba(255,255,255,0.5)"
+  },
+  secondary: {
+    hover: "#090A32",
+    pressed: "#121365",
+    label: "#8182FC",
+    labelDisabled: "rgba(129,130,252,0.5)",
+    border: "#8182FC",
+    borderDisabled: "#121365"
+  },
+  danger: {
+    base: "#FF002C",
+    hover: "#FF2847",
+    pressed: "#FF5566",
+    disabled: "#48010D",
+    label: "#FFFFFF",
+    labelDisabled: "rgba(255,255,255,0.5)"
+  },
+  success: {
+    base: "#90CAAD"
+  },
+  warning: {
+    base: "#FCC94A"
+  },
+  info: {
+    base: "#8182FC"
+  }
+};
 function resolveThemeInput(input) {
   const mode = input.mode ?? ThemeMode.light;
   const colorBase = mode === ThemeMode.dark ? darkThemeDefaults.color : lightThemeDefaults.color;
+  const defaultColorRoles = mode === ThemeMode.dark ? darkDefaultColorRoles : lightDefaultColorRoles;
   const base = lightThemeDefaults;
   const tone = resolveTone(input.tone ?? "default");
-  const primary = normalizeColorInput(input.color?.primary ?? colorBase.primary);
-  const danger = normalizeColorInput(input.color?.danger ?? colorBase.danger);
-  const success = normalizeColorInput(input.color?.success ?? colorBase.success);
-  const warning = normalizeColorInput(input.color?.warning ?? colorBase.warning);
+  const primary = normalizeColorInput(input.color?.primary ?? defaultColorRoles.primary);
+  const secondary = input.color?.primary === void 0 ? resolveSecondaryRole(primary, defaultColorRoles.secondary) : resolveSecondaryRole(primary);
+  const danger = normalizeColorInput(input.color?.danger ?? defaultColorRoles.danger);
+  const success = normalizeColorInput(input.color?.success ?? defaultColorRoles.success);
+  const warning = normalizeColorInput(input.color?.warning ?? defaultColorRoles.warning);
+  const info = input.color?.primary === void 0 ? normalizeColorInput(defaultColorRoles.info) : resolveInfoRole(primary);
   return {
     mode,
     color: {
       primary,
-      secondary: resolveSecondaryRole(primary),
+      secondary,
       danger,
       success,
       warning,
-      info: resolveInfoRole(primary),
+      info,
       background: input.color?.background ?? colorBase.background,
       surface: input.color?.surface ?? colorBase.surface,
       surfaceSubtle: input.color?.surfaceSubtle ?? colorBase.surfaceSubtle,
@@ -581,11 +735,14 @@ function resolveThemeInput(input) {
       textSubtle: input.color?.textSubtle ?? colorBase.textSubtle,
       textDisabled: input.color?.textDisabled ?? colorBase.textDisabled,
       textInverted: input.color?.textInverted ?? colorBase.textInverted,
+      textBrand: colorBase.textBrand,
       border: input.color?.border ?? colorBase.border,
       borderSubtle: input.color?.borderSubtle ?? colorBase.borderSubtle,
       borderStrong: input.color?.borderStrong ?? colorBase.borderStrong,
       borderDisabled: input.color?.borderDisabled ?? colorBase.borderDisabled,
-      focus: input.color?.focus ?? colorBase.focus
+      borderBrand: colorBase.borderBrand,
+      focus: input.color?.focus ?? colorBase.focus,
+      status: colorBase.status
     },
     font: { ...base.font, ...tone.font, ...input.font },
     ui: { ...base.ui, ...tone.ui, ...input.ui },
@@ -728,11 +885,43 @@ var mwThemeVarNames = {
     textSubtle: "--mw-color-text-subtle",
     textDisabled: "--mw-color-text-disabled",
     textInverted: "--mw-color-text-inverted",
+    textBrand: "--mw-color-text-brand",
     border: "--mw-color-border",
     borderSubtle: "--mw-color-border-subtle",
     borderStrong: "--mw-color-border-strong",
     borderDisabled: "--mw-color-border-disabled",
-    focus: "--mw-color-focus"
+    borderBrand: "--mw-color-border-brand",
+    focus: "--mw-color-focus",
+    status: {
+      success: {
+        background: "--mw-color-status-success-background",
+        text: "--mw-color-status-success-text",
+        icon: "--mw-color-status-success-icon",
+        border: "--mw-color-status-success-border",
+        borderStrong: "--mw-color-status-success-border-strong"
+      },
+      warning: {
+        background: "--mw-color-status-warning-background",
+        text: "--mw-color-status-warning-text",
+        icon: "--mw-color-status-warning-icon",
+        border: "--mw-color-status-warning-border",
+        borderStrong: "--mw-color-status-warning-border-strong"
+      },
+      error: {
+        background: "--mw-color-status-error-background",
+        text: "--mw-color-status-error-text",
+        icon: "--mw-color-status-error-icon",
+        border: "--mw-color-status-error-border",
+        borderStrong: "--mw-color-status-error-border-strong"
+      },
+      info: {
+        background: "--mw-color-status-info-background",
+        text: "--mw-color-status-info-text",
+        icon: "--mw-color-status-info-icon",
+        border: "--mw-color-status-info-border",
+        borderStrong: "--mw-color-status-info-border-strong"
+      }
+    }
   },
   spacing: {
     sp0: "--mw-spacing-sp-0",
@@ -872,11 +1061,43 @@ var mwThemeVars = {
     textSubtle: "var(--mw-color-text-subtle)",
     textDisabled: "var(--mw-color-text-disabled)",
     textInverted: "var(--mw-color-text-inverted)",
+    textBrand: "var(--mw-color-text-brand)",
     border: "var(--mw-color-border)",
     borderSubtle: "var(--mw-color-border-subtle)",
     borderStrong: "var(--mw-color-border-strong)",
     borderDisabled: "var(--mw-color-border-disabled)",
-    focus: "var(--mw-color-focus)"
+    borderBrand: "var(--mw-color-border-brand)",
+    focus: "var(--mw-color-focus)",
+    status: {
+      success: {
+        background: "var(--mw-color-status-success-background)",
+        text: "var(--mw-color-status-success-text)",
+        icon: "var(--mw-color-status-success-icon)",
+        border: "var(--mw-color-status-success-border)",
+        borderStrong: "var(--mw-color-status-success-border-strong)"
+      },
+      warning: {
+        background: "var(--mw-color-status-warning-background)",
+        text: "var(--mw-color-status-warning-text)",
+        icon: "var(--mw-color-status-warning-icon)",
+        border: "var(--mw-color-status-warning-border)",
+        borderStrong: "var(--mw-color-status-warning-border-strong)"
+      },
+      error: {
+        background: "var(--mw-color-status-error-background)",
+        text: "var(--mw-color-status-error-text)",
+        icon: "var(--mw-color-status-error-icon)",
+        border: "var(--mw-color-status-error-border)",
+        borderStrong: "var(--mw-color-status-error-border-strong)"
+      },
+      info: {
+        background: "var(--mw-color-status-info-background)",
+        text: "var(--mw-color-status-info-text)",
+        icon: "var(--mw-color-status-info-icon)",
+        border: "var(--mw-color-status-info-border)",
+        borderStrong: "var(--mw-color-status-info-border-strong)"
+      }
+    }
   },
   spacing: {
     sp0: "var(--mw-spacing-sp-0)",
@@ -4944,7 +5165,7 @@ function createDotsSquareNodes() {
       y: "1.5",
       width: "4",
       height: "5",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.89375"
     }),
@@ -4953,7 +5174,7 @@ function createDotsSquareNodes() {
       y: "4.4",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.46875"
     }),
@@ -4962,7 +5183,7 @@ function createDotsSquareNodes() {
       y: "10",
       width: "5",
       height: "4",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.3625"
     }),
@@ -4971,7 +5192,7 @@ function createDotsSquareNodes() {
       y: "14.8",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.15"
     }),
@@ -4980,7 +5201,7 @@ function createDotsSquareNodes() {
       y: "17.5",
       width: "4",
       height: "5",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.575"
     }),
@@ -4989,7 +5210,7 @@ function createDotsSquareNodes() {
       y: "14.8",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.7875"
     }),
@@ -4998,7 +5219,7 @@ function createDotsSquareNodes() {
       y: "10",
       width: "5",
       height: "4",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.68125"
     }),
@@ -5007,7 +5228,7 @@ function createDotsSquareNodes() {
       y: "4.4",
       width: "4.8",
       height: "4.8",
-      rx: "1.5",
+      rx: "999",
       fill: INDICATOR_COLOR,
       opacity: "0.25625"
     })
@@ -5133,6 +5354,286 @@ function createSpinnerRecipe(options = {}) {
   };
 }
 
+// src/components/atoms/skeleton/skeleton-a11y.ts
+function isDev4() {
+  const p = globalThis.process;
+  const nodeEnv = p?.env?.NODE_ENV;
+  if (nodeEnv) return nodeEnv !== "production";
+  const meta = import.meta;
+  if (typeof meta.env?.PROD === "boolean") return !meta.env.PROD;
+  if (meta.env?.MODE) return meta.env.MODE !== "production";
+  return true;
+}
+var __DEV__4 = isDev4();
+function resolveSkeletonA11y(options = {}) {
+  if (options.decorative === true) {
+    return {
+      ...options.id ? { id: options.id } : {},
+      ariaHidden: true
+    };
+  }
+  if (options.ariaLabel) {
+    return {
+      ...options.id ? { id: options.id } : {},
+      role: "status",
+      ariaLabel: options.ariaLabel,
+      ariaLive: "polite"
+    };
+  }
+  if (__DEV__4 && options.decorative === false) {
+    console.warn(
+      "[marwes] Skeleton: decorative={false} was passed without ariaLabel. The skeleton stays hidden from assistive technology unless ariaLabel is also provided."
+    );
+  }
+  return {
+    ...options.id ? { id: options.id } : {},
+    ariaHidden: true
+  };
+}
+
+// src/components/atoms/skeleton/skeleton-types.ts
+var SkeletonVariant = {
+  text: "text",
+  circular: "circular",
+  rectangular: "rectangular"
+};
+var skeletonVariants = Object.values(SkeletonVariant);
+var SkeletonAnimation = {
+  pulse: "pulse",
+  wave: "wave",
+  none: "none"
+};
+var skeletonAnimations = Object.values(SkeletonAnimation);
+
+// src/components/atoms/skeleton/skeleton-recipe.ts
+var FIGMA_TEXT_WIDTH = 120;
+var FIGMA_TEXT_HEIGHT = 12;
+var FIGMA_CIRCULAR_SIZE = 40;
+var FIGMA_RECTANGULAR_SIZE = 120;
+var FIGMA_RADIUS = 4;
+function cx11(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function toCssDimension(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function resolveDefaultWidth(variant) {
+  if (variant === SkeletonVariant.circular) return `${FIGMA_CIRCULAR_SIZE}px`;
+  return `${variant === SkeletonVariant.text ? FIGMA_TEXT_WIDTH : FIGMA_RECTANGULAR_SIZE}px`;
+}
+function resolveDefaultHeight(variant) {
+  if (variant === SkeletonVariant.text) return `${FIGMA_TEXT_HEIGHT}px`;
+  if (variant === SkeletonVariant.circular) return `${FIGMA_CIRCULAR_SIZE}px`;
+  return `${FIGMA_RECTANGULAR_SIZE}px`;
+}
+function resolveRadius(variant, radius) {
+  if (variant === SkeletonVariant.circular) return "9999px";
+  return toCssDimension(radius) ?? `${FIGMA_RADIUS}px`;
+}
+function createSkeletonRecipe(options = {}) {
+  const variant = options.variant ?? SkeletonVariant.text;
+  const animation = options.animation ?? SkeletonAnimation.pulse;
+  return {
+    tag: "span",
+    className: cx11(
+      "mw-skeleton",
+      `mw-skeleton--${variant}`,
+      animation !== SkeletonAnimation.none && `mw-skeleton--${animation}`
+    ),
+    vars: {
+      "--mw-skeleton-width": toCssDimension(options.width) ?? resolveDefaultWidth(variant),
+      "--mw-skeleton-height": toCssDimension(options.height) ?? resolveDefaultHeight(variant),
+      "--mw-skeleton-radius": resolveRadius(variant, options.radius)
+    },
+    a11y: resolveSkeletonA11y(options),
+    dataAttributes: {
+      "data-component": "skeleton",
+      "data-variant": variant,
+      "data-animation": animation
+    }
+  };
+}
+
+// src/components/atoms/stat-tile/stat-tile-a11y.ts
+function resolveStatTileTrendLabel(direction, trendValue) {
+  if (!direction || !trendValue) return void 0;
+  return direction === "positive" ? `Increased by ${trendValue}` : `Decreased by ${trendValue}`;
+}
+
+// src/components/atoms/stat-tile/stat-tile-recipe.ts
+var statTileTones = ["neutral", "brand", "success", "warning", "danger"];
+function resolveTone2(tone) {
+  return tone && statTileTones.includes(tone) ? tone : "neutral";
+}
+function createStatTileRecipe(opts = {}) {
+  const tone = resolveTone2(opts.tone);
+  const trendDirection = opts.trendDirection;
+  const trendClassName = [
+    "mw-stat-tile__trend",
+    trendDirection ? `mw-stat-tile__trend--${trendDirection}` : null
+  ].filter(Boolean).join(" ");
+  const trendAriaLabel = resolveStatTileTrendLabel(trendDirection, opts.trendValue);
+  return {
+    tag: "article",
+    className: ["mw-stat-tile", `mw-stat-tile--${tone}`].join(" "),
+    slots: {
+      headerClassName: "mw-stat-tile__header",
+      labelClassName: "mw-stat-tile__label",
+      trendClassName,
+      trendIconClassName: "mw-stat-tile__trend-icon",
+      trendValueClassName: "mw-stat-tile__trend-value",
+      valueClassName: "mw-stat-tile__value",
+      subtitleClassName: "mw-stat-tile__subtitle"
+    },
+    dataAttributes: {
+      ...opts.dataAttributes,
+      "data-component": "stat-tile",
+      "data-tone": tone,
+      ...trendDirection ? { "data-trend": trendDirection } : {}
+    },
+    trendDataAttributes: {
+      "data-component": "stat-tile-trend",
+      ...trendDirection ? { "data-trend": trendDirection } : {}
+    },
+    trendIcon: trendDirection === "positive" ? "\u2191" : trendDirection === "negative" ? "\u2193" : null,
+    a11y: {
+      ...trendAriaLabel ? { trendAriaLabel } : {}
+    }
+  };
+}
+
+// src/components/atoms/date-picker/date-picker-a11y.ts
+function resolveDatePickerDayLabel(day) {
+  if (day.ariaLabel) return day.ariaLabel;
+  if (day.date) return day.date;
+  return day.label;
+}
+
+// src/components/atoms/date-picker/date-picker-recipe.ts
+var datePickerDevices = ["desktop", "mobile"];
+var defaultWeekdayLabels = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+var defaultWeeks = [
+  [
+    { label: "", state: "null" },
+    { label: "", state: "null" },
+    { label: "", state: "null" },
+    { label: "", state: "null" },
+    { label: "", state: "null" },
+    { label: "", state: "null" },
+    { label: "01", date: "2026-03-01" }
+  ],
+  [
+    { label: "02", date: "2026-03-02" },
+    { label: "03", date: "2026-03-03" },
+    { label: "04", date: "2026-03-04", state: "selected" },
+    { label: "05", date: "2026-03-05", state: "range" },
+    { label: "06", date: "2026-03-06", state: "range" },
+    { label: "07", date: "2026-03-07", state: "range" },
+    { label: "08", date: "2026-03-08", state: "selected" }
+  ],
+  [
+    { label: "09", date: "2026-03-09" },
+    { label: "10", date: "2026-03-10" },
+    { label: "11", date: "2026-03-11" },
+    { label: "12", date: "2026-03-12" },
+    { label: "13", date: "2026-03-13" },
+    { label: "14", date: "2026-03-14" },
+    { label: "15", date: "2026-03-15" }
+  ],
+  [
+    { label: "16", date: "2026-03-16" },
+    { label: "17", date: "2026-03-17" },
+    { label: "18", date: "2026-03-18" },
+    { label: "19", date: "2026-03-19" },
+    { label: "20", date: "2026-03-20" },
+    { label: "21", date: "2026-03-21" },
+    { label: "22", date: "2026-03-22" }
+  ],
+  [
+    { label: "23", date: "2026-03-23" },
+    { label: "24", date: "2026-03-24" },
+    { label: "25", date: "2026-03-25" },
+    { label: "26", date: "2026-03-26" },
+    { label: "27", date: "2026-03-27" },
+    { label: "28", date: "2026-03-28" },
+    { label: "29", date: "2026-03-29" }
+  ],
+  [
+    { label: "30", date: "2026-03-30" },
+    { label: "31", date: "2026-03-31" },
+    { label: "", state: "null" },
+    { label: "", state: "null" },
+    { label: "", state: "null" },
+    { label: "", state: "null" },
+    { label: "", state: "null" }
+  ]
+];
+function resolveDevice(device) {
+  return device && datePickerDevices.includes(device) ? device : "desktop";
+}
+function createDayKit(day) {
+  const state = day.state ?? "default";
+  const isEmpty = state === "null" || day.label === "";
+  const disabled = state === "disabled" || isEmpty;
+  const selected = state === "selected";
+  return {
+    className: [
+      "mw-date-picker__day",
+      `mw-date-picker__day--${state}`,
+      day.isToday ? "mw-date-picker__day--today" : null
+    ].filter(Boolean).join(" "),
+    dataAttributes: {
+      "data-component": "date-picker-day",
+      "data-state": state,
+      ...day.date ? { "data-date": day.date } : {},
+      ...day.isToday ? { "data-today": "true" } : {}
+    },
+    ariaLabel: resolveDatePickerDayLabel(day),
+    disabled,
+    selected,
+    isEmpty
+  };
+}
+function createDatePickerRecipe(opts = {}) {
+  const device = resolveDevice(opts.device);
+  const weeks = opts.weeks ?? defaultWeeks;
+  return {
+    className: ["mw-date-picker", `mw-date-picker--${device}`].join(" "),
+    dataAttributes: {
+      ...opts.dataAttributes,
+      "data-component": "date-picker",
+      "data-device": device
+    },
+    monthLabel: opts.monthLabel ?? "March 2026",
+    weekdayLabels: opts.weekdayLabels ?? defaultWeekdayLabels,
+    weeks,
+    dayKits: weeks.map((week) => week.map(createDayKit)),
+    slots: {
+      headerClassName: "mw-date-picker__header",
+      navGroupClassName: "mw-date-picker__nav-group",
+      navButtonClassName: "mw-date-picker__nav-button",
+      monthLabelClassName: "mw-date-picker__month-label",
+      gridClassName: "mw-date-picker__grid",
+      weekdayClassName: "mw-date-picker__weekday",
+      weekClassName: "mw-date-picker__week",
+      cellClassName: "mw-date-picker__cell",
+      dayClassName: "mw-date-picker__day",
+      footerClassName: "mw-date-picker__footer",
+      footerButtonClassName: "mw-date-picker__footer-button"
+    },
+    labels: {
+      calendar: opts.calendarLabel ?? "Choose date",
+      previousYear: opts.previousYearLabel ?? "Previous year",
+      previousMonth: opts.previousMonthLabel ?? "Previous month",
+      nextMonth: opts.nextMonthLabel ?? "Next month",
+      nextYear: opts.nextYearLabel ?? "Next year",
+      cancel: opts.cancelLabel ?? "Today",
+      apply: opts.applyLabel ?? ""
+    }
+  };
+}
+
 // src/components/atoms/icon/icon-registry.ts
 var iconRegistry = {
   airplay: {
@@ -9942,7 +10443,7 @@ function resolveIconStrokeWidth(input) {
 var iconNames = iconNamesList;
 
 // src/components/atoms/icon/icon-a11y.ts
-function isDev4() {
+function isDev5() {
   const p = globalThis.process;
   const nodeEnv = p?.env?.NODE_ENV;
   if (nodeEnv) return nodeEnv !== "production";
@@ -9951,7 +10452,7 @@ function isDev4() {
   if (meta.env?.MODE) return meta.env.MODE !== "production";
   return true;
 }
-var __DEV__4 = isDev4();
+var __DEV__5 = isDev5();
 function resolveIconA11y(options) {
   if (options.ariaLabel) {
     return {
@@ -9959,7 +10460,7 @@ function resolveIconA11y(options) {
       ariaLabel: options.ariaLabel
     };
   }
-  if (__DEV__4 && options.decorative === false) {
+  if (__DEV__5 && options.decorative === false) {
     console.warn(
       "[marwes] Icon: decorative={false} was passed without ariaLabel. The icon stays hidden from assistive technology unless ariaLabel is also provided."
     );
@@ -10061,7 +10562,7 @@ function resolveInputOtpA11y(options) {
 }
 
 // src/components/atoms/input/input-otp-recipe.ts
-function cx11(...parts) {
+function cx12(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function sanitizeInputOtpValue(rawValue, length) {
@@ -10097,7 +10598,7 @@ function createInputOtpRecipe(options) {
   };
   return {
     tag: "div",
-    className: cx11(
+    className: cx12(
       "mw-input-otp",
       options.invalid && "mw-input-otp--invalid",
       options.disabled && "mw-input-otp--disabled",
@@ -10345,13 +10846,13 @@ function resolveTabA11y(opts) {
 }
 
 // src/components/atoms/tab/tab-recipe.ts
-function cx12(...parts) {
+function cx13(...parts) {
   return parts.filter(Boolean).join(" ");
 }
 function createTabRecipe(opts) {
   return {
     tag: "button",
-    className: cx12(
+    className: cx13(
       "mw-tab",
       opts.selected && "mw-tab--selected",
       opts.disabled && "mw-tab--disabled"
@@ -10553,6 +11054,72 @@ var storybookSpinnerArgTypes = {
     description: "Accessible label for standalone loading indicators"
   }
 };
+var storybookSkeletonArgTypes = {
+  variant: {
+    control: "select",
+    options: ["text", "circular", "rectangular"],
+    description: "Skeleton shape from the synced Skeleton page"
+  },
+  animation: {
+    control: "select",
+    options: ["pulse", "wave", "none"],
+    description: "Visual loading animation"
+  },
+  width: {
+    control: "text",
+    description: "Width override; numbers in code are treated as pixels"
+  },
+  height: {
+    control: "text",
+    description: "Height override; numbers in code are treated as pixels"
+  },
+  radius: {
+    control: "text",
+    description: "Corner radius override; circular skeletons force a full radius"
+  },
+  decorative: {
+    control: "boolean",
+    description: "Hide the skeleton from assistive technology when surrounding UI already communicates loading"
+  },
+  ariaLabel: {
+    control: "text",
+    description: "Accessible label for standalone loading placeholder groups"
+  }
+};
+var storybookStatTileArgTypes = {
+  tone: {
+    control: "select",
+    options: ["neutral", "brand", "success", "warning", "danger"],
+    description: "Color treatment from the synced Stat Tile Figma instances"
+  },
+  trendDirection: {
+    control: "select",
+    options: [void 0, "positive", "negative"],
+    description: "Trend direction for the compact trend pill"
+  },
+  trendValue: {
+    control: "text",
+    description: "Compact trend value, for example 12%"
+  },
+  label: { control: "text" },
+  value: { control: "text" },
+  subtitle: { control: "text" }
+};
+var storybookDatePickerArgTypes = {
+  device: {
+    control: "select",
+    options: ["desktop", "mobile"],
+    description: "Device variant from the synced Date Picker Figma component set"
+  },
+  monthLabel: { control: "text" },
+  calendarLabel: { control: "text" },
+  previousYearLabel: { control: "text" },
+  previousMonthLabel: { control: "text" },
+  nextMonthLabel: { control: "text" },
+  nextYearLabel: { control: "text" },
+  cancelLabel: { control: "text" },
+  applyLabel: { control: "text" }
+};
 var storybookSpacingArgTypes = {
   size: {
     control: "select",
@@ -10646,6 +11213,6 @@ var storybookDocsDescription = {
   colors: "Complete color palette from the design system. Semantic roles map to CSS variables, with label colors auto-derived by default and overrideable for brand-specific fills."
 };
 
-export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, DENSITY_SCALES, IconName, Spacings, SpinnerVariant, SpinnerVariants, SwitchSize, ThemeMode, accordionPurposeComponentReference, accordionWhyPurposeComponents, avatarPurposeSemantics, avatarPurposes, badgePurposeComponentReference, badgePurposeSemantics, badgePurposes, badgeWhyPurposeComponents, buildAccordionFieldA11yIds, buildCheckboxA11y, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, buildCurrencyHelperText, buildGoogleFontsUrl, buildHeadingA11y, buildInputFieldA11yIds, buildRadioA11y, buildRadioGroupFieldA11yIds, buildRichTextFieldA11yIds, buildSliderFieldA11yIds, buildSwitchFieldA11yIds, buildTabGroupA11yIds, buttonActionSemanticPurposes, buttonPurposeSemantics, buttonPurposes, buttonVariantVisualStyles, buttonWhySemanticComponents, canonicalSemanticAttributeNames, canonicalSemanticAttributeRegistry, canonicalSemanticAttributes, cardPurposeComponentReference, cardWhyPurposeComponents, checkboxRecipe, createAccordionRecipe, createAvatarRecipe, createBadgeRecipe, createButtonRecipe, createCardRecipe, createDialogRecipe, createDividerRecipe, createFamilySemanticAttributes, createFontStack, createIconRecipe, createInputOtpRecipe, createInputRecipe, createMarwesThemeScript, createMarwesThemeStyle, createPurposeSemanticAttributes, createRichTextRecipe, createSelectRecipe, createSliderRecipe, createSpacingRecipe, createSpinnerRecipe, createSwitchRecipe, createTabRecipe, createTextareaRecipe, createToastRecipe, createTooltipRecipe, currencyCodes, darkThemeDefaults, densityToCSSVars, dialogPurposeComponentReference, dialogPurposeSemantics, dialogPurposes, dialogWhyPurposeComponents, emptySemanticAttributes, escapeRichTextHtml, extractFontFamilyName, extractUsedWeights, familySemanticsRegistry, fieldComparisonRows, fieldWhyPurposeComponents, filterUndefinedSemanticAttributes, getCurrencySymbol, headingRecipe, iconNames, iconNamesList, iconRegistry, iconSizeScale, iconStrokeWidthScale, isRichTextHtmlEmpty, isSystemFont, isThemeMode, isThemePreference, lightThemeDefaults, mergeIdRefs, mergeSemanticAttributes, moveTabSelection, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar, nextThemeMode, normalizeRichTextHtml, paragraphRecipe, purposeSemanticsRegistry, radioPurposeComponentReference, radioRecipe, radioWhyPurposeComponents, resolveAccordionA11y, resolveAvatarA11y, resolveBadgeA11y, resolveButtonLoading, resolveDialogA11y, resolveIconA11y, resolveIconSize, resolveIconStrokeWidth, resolveRichTextAllowedFormats, resolveSelectMode, resolveServerThemeMode, resolveSliderA11y, resolveSpinnerA11y, resolveSpinnerSize, resolveSwitchA11y, resolveTabA11y, resolveTabValue, resolveThemeInput, resolveThemePreference, resolveToastA11y, resolveTone, resolveTooltipA11y, richTextCommandByFormat, richTextFormattingReference, richTextWhyUseIt, sanitizeCurrencyValue, sanitizeInputOtpValue, semanticFamilies, semanticFrameworkSupport, semanticIntents, semanticLayers, semanticOrientations, semanticOutcomes, semanticPurposes, shouldLoadGoogleFont, sliderPurposeComponentReference, sliderWhyPurposeComponents, spinnerSizeScale, spinnerSizes, spinnerVariants, storybookA11yPolicy, storybookButtonGeneralArgTypes, storybookButtonIconArgTypes, storybookButtonPurposeArgTypes, storybookCheckboxArgTypes, storybookDividerArgTypes, storybookDocsDescription, storybookIconGalleryArgTypes, storybookIconGalleryDefaults, storybookIconNames, storybookLayout, storybookOptionalIconNames, storybookRadioArgTypes, storybookSliderArgTypes, storybookSpacingArgTypes, storybookSpinnerArgTypes, switchPurposeComponentReference, switchWhyPurposeComponents, tabPurposeComponentReference, tabWhyPurposeComponents, themeModesToCSSRules, themeToCSSRule, themeToCSSVars, toastPurposeComponentReference, toastPurposeSemantics, toastPurposes, toastWhyPurposeComponents, validateSemanticRegistry };
+export { AvatarSize, AvatarType, BadgeVariant, ButtonAction, ButtonSize, ButtonVariant, DENSITY_SCALES, IconName, SkeletonAnimation, SkeletonVariant, Spacings, SpinnerVariant, SpinnerVariants, SwitchSize, ThemeMode, accordionPurposeComponentReference, accordionWhyPurposeComponents, avatarPurposeSemantics, avatarPurposes, badgePurposeComponentReference, badgePurposeSemantics, badgePurposes, badgeWhyPurposeComponents, buildAccordionFieldA11yIds, buildCheckboxA11y, buildCheckboxFieldA11yIds, buildCheckboxGroupFieldA11yIds, buildCurrencyHelperText, buildGoogleFontsUrl, buildHeadingA11y, buildInputFieldA11yIds, buildRadioA11y, buildRadioGroupFieldA11yIds, buildRichTextFieldA11yIds, buildSliderFieldA11yIds, buildSwitchFieldA11yIds, buildTabGroupA11yIds, buttonActionSemanticPurposes, buttonPurposeSemantics, buttonPurposes, buttonVariantVisualStyles, buttonWhySemanticComponents, canonicalSemanticAttributeNames, canonicalSemanticAttributeRegistry, canonicalSemanticAttributes, cardPurposeComponentReference, cardWhyPurposeComponents, checkboxRecipe, createAccordionRecipe, createAvatarRecipe, createBadgeRecipe, createButtonRecipe, createCardRecipe, createDatePickerRecipe, createDialogRecipe, createDividerRecipe, createFamilySemanticAttributes, createFontStack, createIconRecipe, createInputOtpRecipe, createInputRecipe, createMarwesThemeScript, createMarwesThemeStyle, createPurposeSemanticAttributes, createRichTextRecipe, createSelectRecipe, createSkeletonRecipe, createSliderRecipe, createSpacingRecipe, createSpinnerRecipe, createStatTileRecipe, createSwitchRecipe, createTabRecipe, createTextareaRecipe, createToastRecipe, createTooltipRecipe, currencyCodes, darkThemeDefaults, densityToCSSVars, dialogPurposeComponentReference, dialogPurposeSemantics, dialogPurposes, dialogWhyPurposeComponents, emptySemanticAttributes, escapeRichTextHtml, extractFontFamilyName, extractUsedWeights, familySemanticsRegistry, fieldComparisonRows, fieldWhyPurposeComponents, filterUndefinedSemanticAttributes, getCurrencySymbol, headingRecipe, iconNames, iconNamesList, iconRegistry, iconSizeScale, iconStrokeWidthScale, isRichTextHtmlEmpty, isSystemFont, isThemeMode, isThemePreference, lightThemeDefaults, mergeIdRefs, mergeSemanticAttributes, moveTabSelection, mwAvailableFonts, mwFontFallbacks, mwGoogleFontFamilies, mwStyledTheme, mwThemeVarNames, mwThemeVars, mwVar, nextThemeMode, normalizeRichTextHtml, paragraphRecipe, purposeSemanticsRegistry, radioPurposeComponentReference, radioRecipe, radioWhyPurposeComponents, resolveAccordionA11y, resolveAvatarA11y, resolveBadgeA11y, resolveButtonLoading, resolveDatePickerDayLabel, resolveDialogA11y, resolveIconA11y, resolveIconSize, resolveIconStrokeWidth, resolveRichTextAllowedFormats, resolveSelectMode, resolveServerThemeMode, resolveSkeletonA11y, resolveSliderA11y, resolveSpinnerA11y, resolveSpinnerSize, resolveStatTileTrendLabel, resolveSwitchA11y, resolveTabA11y, resolveTabValue, resolveThemeInput, resolveThemePreference, resolveToastA11y, resolveTone, resolveTooltipA11y, richTextCommandByFormat, richTextFormattingReference, richTextWhyUseIt, sanitizeCurrencyValue, sanitizeInputOtpValue, semanticFamilies, semanticFrameworkSupport, semanticIntents, semanticLayers, semanticOrientations, semanticOutcomes, semanticPurposes, shouldLoadGoogleFont, skeletonAnimations, skeletonVariants, sliderPurposeComponentReference, sliderWhyPurposeComponents, spinnerSizeScale, spinnerSizes, spinnerVariants, storybookA11yPolicy, storybookButtonGeneralArgTypes, storybookButtonIconArgTypes, storybookButtonPurposeArgTypes, storybookCheckboxArgTypes, storybookDatePickerArgTypes, storybookDividerArgTypes, storybookDocsDescription, storybookIconGalleryArgTypes, storybookIconGalleryDefaults, storybookIconNames, storybookLayout, storybookOptionalIconNames, storybookRadioArgTypes, storybookSkeletonArgTypes, storybookSliderArgTypes, storybookSpacingArgTypes, storybookSpinnerArgTypes, storybookStatTileArgTypes, switchPurposeComponentReference, switchWhyPurposeComponents, tabPurposeComponentReference, tabWhyPurposeComponents, themeModesToCSSRules, themeToCSSRule, themeToCSSVars, toastPurposeComponentReference, toastPurposeSemantics, toastPurposes, toastWhyPurposeComponents, validateSemanticRegistry };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map