reshaped 3.4.0 → 3.4.2

package/dist/cjs/cli/theming/index.js

@@ -28,7 +28,6 @@ const transformDefinition = (name, definition, options) => {
     if (code.media)
         fs_1.default.writeFileSync(themeMediaPath, code.media);
     const logOutput = `Compiled ${chalk_1.default.bold(name)} theme${isFragment ? " fragment" : ""}`;
-    // eslint-disable-next-line no-console
     console.log(chalk_1.default.green(logOutput));
 };
 const addThemeFragment = (name, definition, options) => {

package/dist/cjs/themes/_generator/definitions/figma.d.ts

@@ -1,3 +1,3 @@
 import type { ThemeDefinition } from "../tokens/types";
-declare const theme: ThemeDefinition;
+declare const theme: Partial<ThemeDefinition>;
 export default theme;

package/dist/cjs/themes/_generator/definitions/figma.js

@@ -101,7 +101,6 @@ const theme = {
         radiusMedium: { px: 4 },
         radiusLarge: { px: 4 },
     },
-    // @ts-ignore
     color: {
         foregroundNeutral: { hex: "#191919", hexDark: "#FFFFFF" },
         foregroundNeutralFaded: { hex: "#474747", hexDark: "#B2B2B2" },
@@ -109,20 +108,19 @@ const theme = {
         foregroundPrimary: { hex: "#007BE5", hexDark: "#7CC4F8" },
         foregroundPositive: { hex: "#009951", hexDark: "#79D297" },
         foregroundCritical: { hex: "#DC3412", hexDark: "#FCA397" },
+        foregroundWarning: { hex: "#7b6305", hexDark: "#b4920c" },
         backgroundNeutral: { hex: "#DFE2EA", hexDark: "#444444" },
         backgroundNeutralFaded: { hex: "#F5F5F5", hexDark: "#383838" },
-        backgroundNeutralHighlighted: { hex: "#D4D8E3", hexDark: "#525252" },
         backgroundDisabled: { hex: "#e4e4e4", hexDark: "#474747" },
         backgroundDisabledFaded: { hex: "#F5F5F5", hexDark: "#3A3A3A" },
         backgroundPrimary: { hex: "#0D99FF", hexDark: "#0C8CE9" },
-        backgroundPrimaryHighlighted: { hex: "#007BE5", hexDark: "#0A6DC2" },
         backgroundPrimaryFaded: { hex: "#E5F4FF", hexDark: "#394360" },
         backgroundPositive: { hex: "#14AE5C", hexDark: "#198F51" },
         backgroundPositiveFaded: { hex: "#DAECDF", hexDark: "#3d5749" },
-        backgroundPositiveHighlighted: { hex: "#009951", hexDark: "#078348" },
         backgroundCritical: { hex: "#F24822", hexDark: "#E03E1A" },
         backgroundCriticalFaded: { hex: "#FFE2E0", hexDark: "#60332A" },
-        backgroundCriticalHighlighted: { hex: "#DC3412", hexDark: "#C4381C" },
+        backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" },
+        backgroundWarningFaded: { hex: "#fffae9", hexDark: "#2c271f" },
         borderNeutral: { hex: "#E6E6E6", hexDark: "#444444" },
         borderNeutralFaded: { hex: "#E6E6E6", hexDark: "#444444" },
         borderDisabled: { hex: "#E6E6E6", hexDark: "#3E3E3E" },
@@ -132,12 +130,15 @@ const theme = {
         borderPositiveFaded: { hex: "#BBDDC6", hexDark: "#086338" },
         borderCritical: { hex: "#DC3412", hexDark: "#FCA397" },
         borderCriticalFaded: { hex: "#FFC7C2", hexDark: "#803226" },
+        borderWarning: { hex: "#cfa90f", hexDark: "#b4920a" },
+        borderWarningFaded: { hex: "#ece2c4", hexDark: "#453c1e" },
         backgroundPage: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
         backgroundPageFaded: { hex: "#FAFAFA", hexDark: "#1E1E1E" },
         backgroundElevationBase: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
         backgroundElevationRaised: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
         backgroundElevationOverlay: { hex: "#FFFFFF", hexDark: "#2C2C2C" },
         onBackgroundPrimary: { hex: "#FFFFFF" },
+        brand: { hex: "#0D99FF" },
         black: { hex: "#000000" },
         white: { hex: "#FFFFFF" },
     },

package/dist/cjs/themes/_generator/utilities/color.js

@@ -338,17 +338,17 @@ const GREEN = 0.7152;
 const BLUE = 0.0722;
 const GAMMA = 2.4;
 function luminanceWCAG(r, g, b) {
-    var a = [r, g, b].map((v) => {
+    const a = [r, g, b].map((v) => {
         v /= 255;
         return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
     });
     return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
 }
 function contrastWCAG(rgb1, rgb2) {
-    var lum1 = luminanceWCAG(...rgb1);
-    var lum2 = luminanceWCAG(...rgb2);
-    var brightest = Math.max(lum1, lum2);
-    var darkest = Math.min(lum1, lum2);
+    const lum1 = luminanceWCAG(...rgb1);
+    const lum2 = luminanceWCAG(...rgb2);
+    const brightest = Math.max(lum1, lum2);
+    const darkest = Math.min(lum1, lum2);
     return (brightest + 0.05) / (darkest + 0.05);
 }
 const getOnColorWCAG = (args) => {
@@ -370,7 +370,7 @@ function luminanceAPCA({ r, g, b }) {
 }
 function contrastAPCA(backgroundLuminance, textLuminance) {
     // Calculate the contrast based on APCA
-    let Lc = textLuminance - backgroundLuminance;
+    const Lc = textLuminance - backgroundLuminance;
     return Math.abs(Lc); // Return the absolute value of contrast
 }
 const getOnColorAPCA = (args) => {
@@ -385,12 +385,12 @@ const getOnColorAPCA = (args) => {
         b: (1 - bgAlpha) * baseColor.b + bgAlpha * bgColor.b,
     };
     // Calculate luminance for background and for white & black
-    let backgroundLuminance = luminanceAPCA({ r, g, b });
-    let whiteLuminance = luminanceAPCA({ r: 255, g: 255, b: 255 });
-    let blackLuminance = luminanceAPCA({ r: 0, g: 0, b: 0 });
+    const backgroundLuminance = luminanceAPCA({ r, g, b });
+    const whiteLuminance = luminanceAPCA({ r: 255, g: 255, b: 255 });
+    const blackLuminance = luminanceAPCA({ r: 0, g: 0, b: 0 });
     // Calculate contrast
-    let contrastWithWhite = contrastAPCA(backgroundLuminance, whiteLuminance);
-    let contrastWithBlack = contrastAPCA(backgroundLuminance, blackLuminance);
+    const contrastWithWhite = contrastAPCA(backgroundLuminance, whiteLuminance);
+    const contrastWithBlack = contrastAPCA(backgroundLuminance, blackLuminance);
     // Choose the color with higher contrast
     return contrastWithWhite > contrastWithBlack ? lightHexColor : darkHexColor;
 };

package/dist/cjs/themes/_generator/utilities/generateBackgroundColors.js

@@ -41,7 +41,6 @@ const generateBackgroundColors = (definition, themeOptions) => {
                 algorithm: themeOptions?.colorContrastAlgorithm,
                 ...onColorHexMap,
             });
-            // eslint-disable-next-line no-param-reassign
             definition.color[generatedForegroundName] = {
                 hex,
                 hexDark: hex !== hexDark ? hexDark : undefined,
@@ -50,7 +49,6 @@ const generateBackgroundColors = (definition, themeOptions) => {
         if (needsRGB) {
             const rgb = (0, color_1.hexToRgb)(bgToken.hex);
             const rgbDark = bgToken.hexDark && (0, color_1.hexToRgb)(bgToken.hexDark);
-            // eslint-disable-next-line no-param-reassign
             definition.color[generatedRGBName] = {
                 hex: `${rgb.r}, ${rgb.g}, ${rgb.b}`,
                 hexDark: rgbDark && `${rgbDark.r}, ${rgbDark.g}, ${rgbDark.b}`,

package/dist/cjs/themes/_generator/utilities/generateColors.js

@@ -4,7 +4,7 @@ const fn_1 = require("culori/require");
 const hexToOkHsl = (hex) => {
     const rgb = (0, fn_1.parseHex)(hex);
     if (!rgb)
-        throw new Error(`[Reshaped] Can\'t generate rgb from ${hex} color`);
+        throw new Error(`[Reshaped] Can't generate rgb from ${hex} color`);
     const lrgb = (0, fn_1.convertRgbToLrgb)(rgb);
     const oklab = (0, fn_1.convertLrgbToOklab)(lrgb);
     const okhsl = (0, fn_1.convertOklabToOkhsl)(oklab);

package/dist/cjs/themes/_generator/utilities/generateUnits.js

@@ -7,7 +7,6 @@ const generateUnits = (definition) => {
         return;
     for (let i = 1; i <= 10; i += 1) {
         const generatedName = `x${i}`;
-        // eslint-disable-next-line no-param-reassign
         definition.unit[generatedName] = {
             px: baseValue * i,
         };

package/dist/cjs/themes/_generator/utilities/mergeDeep.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const isObject = (item) => {
-    return item && typeof item === "object" && !Array.isArray(item);
+    return !!item && typeof item === "object" && !Array.isArray(item);
 };
 const mergeDeep = (target, ...sources) => {
     if (!sources.length)

package/dist/cjs/themes/_generator/utilities/resolveTokenReference.js

@@ -6,6 +6,8 @@ const resolveTokenReference = (theme, tokenType, ref) => {
     Object.keys(tokenGroup).forEach((tokenName) => {
         if (referencedToken)
             return;
+        // Relaxed runtime group resolving
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (tokenName === ref)
             referencedToken = tokenGroup[tokenName];
     });

package/dist/cjs/themes/figma/tailwind.css

@@ -1 +1 @@
-@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-neutral-highlighted:var(--rs-color-background-neutral-highlighted);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--background-color-positive-highlighted:var(--rs-color-background-positive-highlighted);--background-color-critical-highlighted:var(--rs-color-background-critical-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
+@theme{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}

package/dist/cjs/themes/figma/theme.css

@@ -1 +1 @@
-[data-rs-theme=figma]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:5rem;--rs-line-height-title-1:5.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-semibold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:4rem;--rs-line-height-title-2:4.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-semibold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:3.5rem;--rs-line-height-title-3:3.75rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-semibold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:2.5rem;--rs-line-height-title-4:2.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-semibold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:2.25rem;--rs-line-height-title-5:2.5rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-semibold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:1.5rem;--rs-line-height-title-6:1.75rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-semibold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:1.375rem;--rs-line-height-featured-1:1.75rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.25rem;--rs-line-height-featured-2:1.75rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.125rem;--rs-line-height-featured-3:1.5rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:0.875rem;--rs-line-height-body-1:1.25rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:0.8125rem;--rs-line-height-body-2:1.25rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.6875rem;--rs-line-height-body-3:1rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.6875rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-radius-small:4px;--rs-unit-radius-medium:4px;--rs-unit-radius-large:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#5a58f2;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#000;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#000;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 3px 0px rgba(0,0,0,.15);--rs-shadow-overlay:0px 10px 24px 0px rgba(0,0,0,.1),0px 2px 5px 0px rgba(0,0,0,.04);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280}[data-rs-theme=figma][data-rs-color-mode=light]{--rs-color-background-primary:#0d99ff;--rs-color-background-primary-faded:#e5f4ff;--rs-color-border-primary:#007be5;--rs-color-border-primary-faded:#bde3ff;--rs-color-foreground-primary:#007be5;--rs-color-background-critical:#f24822;--rs-color-background-critical-faded:#ffe2e0;--rs-color-border-critical:#dc3412;--rs-color-border-critical-faded:#ffc7c2;--rs-color-foreground-critical:#dc3412;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#ece2c4;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#14ae5c;--rs-color-background-positive-faded:#daecdf;--rs-color-border-positive:#009951;--rs-color-border-positive-faded:#bbddc6;--rs-color-foreground-positive:#009951;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f5f5f5;--rs-color-border-neutral:#e6e6e6;--rs-color-border-neutral-faded:#e6e6e6;--rs-color-foreground-neutral:#191919;--rs-color-foreground-neutral-faded:#474747;--rs-color-background-disabled:#e4e4e4;--rs-color-background-disabled-faded:#f5f5f5;--rs-color-border-disabled:#e6e6e6;--rs-color-foreground-disabled:#b2b2b2;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#fafafa;--rs-color-background-neutral-highlighted:#d4d8e3;--rs-color-background-primary-highlighted:#007be5;--rs-color-background-positive-highlighted:#009951;--rs-color-background-critical-highlighted:#dc3412;--rs-color-rgb-background-primary:13,153,255;--rs-color-rgb-background-primary-faded:229,244,255;--rs-color-rgb-background-critical:242,72,34;--rs-color-rgb-background-critical-faded:255,226,224;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,250,233;--rs-color-rgb-background-positive:20,174,92;--rs-color-rgb-background-positive-faded:218,236,223;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:223,226,234;--rs-color-rgb-background-neutral-faded:245,245,245;--rs-color-rgb-background-disabled:228,228,228;--rs-color-rgb-background-disabled-faded:245,245,245;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:250,250,250;--rs-color-rgb-background-neutral-highlighted:212,216,227;--rs-color-rgb-background-primary-highlighted:0,123,229;--rs-color-rgb-background-positive-highlighted:0,153,81;--rs-color-rgb-background-critical-highlighted:220,52,18}[data-rs-theme=figma][data-rs-color-mode=dark]{--rs-color-background-primary:#0c8ce9;--rs-color-background-primary-faded:#394360;--rs-color-border-primary:#7cc4f8;--rs-color-border-primary-faded:#2a4d72;--rs-color-foreground-primary:#7cc4f8;--rs-color-background-critical:#e03e1a;--rs-color-background-critical-faded:#60332a;--rs-color-border-critical:#fca397;--rs-color-border-critical-faded:#803226;--rs-color-foreground-critical:#fca397;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#453c1e;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#198f51;--rs-color-background-positive-faded:#3d5749;--rs-color-border-positive:#79d297;--rs-color-border-positive-faded:#086338;--rs-color-foreground-positive:#79d297;--rs-color-background-neutral:#444;--rs-color-background-neutral-faded:#383838;--rs-color-border-neutral:#444;--rs-color-border-neutral-faded:#444;--rs-color-foreground-neutral:#fff;--rs-color-foreground-neutral-faded:#b2b2b2;--rs-color-background-disabled:#474747;--rs-color-background-disabled-faded:#3a3a3a;--rs-color-border-disabled:#3e3e3e;--rs-color-foreground-disabled:#656565;--rs-color-background-elevation-base:#2c2c2c;--rs-color-background-elevation-raised:#2c2c2c;--rs-color-background-elevation-overlay:#2c2c2c;--rs-color-background-page:#2c2c2c;--rs-color-background-page-faded:#1e1e1e;--rs-color-background-neutral-highlighted:#525252;--rs-color-background-primary-highlighted:#0a6dc2;--rs-color-background-positive-highlighted:#078348;--rs-color-background-critical-highlighted:#c4381c;--rs-color-rgb-background-primary:12,140,233;--rs-color-rgb-background-primary-faded:57,67,96;--rs-color-rgb-background-critical:224,62,26;--rs-color-rgb-background-critical-faded:96,51,42;--rs-color-rgb-background-warning:241,197,18;--rs-color-rgb-background-warning-faded:44,39,31;--rs-color-rgb-background-positive:25,143,81;--rs-color-rgb-background-positive-faded:61,87,73;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:68,68,68;--rs-color-rgb-background-neutral-faded:56,56,56;--rs-color-rgb-background-disabled:71,71,71;--rs-color-rgb-background-disabled-faded:58,58,58;--rs-color-rgb-background-elevation-base:44,44,44;--rs-color-rgb-background-elevation-raised:44,44,44;--rs-color-rgb-background-elevation-overlay:44,44,44;--rs-color-rgb-background-page:44,44,44;--rs-color-rgb-background-page-faded:30,30,30;--rs-color-rgb-background-neutral-highlighted:82,82,82;--rs-color-rgb-background-primary-highlighted:10,109,194;--rs-color-rgb-background-positive-highlighted:7,131,72;--rs-color-rgb-background-critical-highlighted:196,56,28}
+[data-rs-theme=figma]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:5rem;--rs-line-height-title-1:5.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-semibold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:4rem;--rs-line-height-title-2:4.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-semibold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:3.5rem;--rs-line-height-title-3:3.75rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-semibold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:2.5rem;--rs-line-height-title-4:2.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-semibold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:2.25rem;--rs-line-height-title-5:2.5rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-semibold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:1.5rem;--rs-line-height-title-6:1.75rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-semibold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:1.375rem;--rs-line-height-featured-1:1.75rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.25rem;--rs-line-height-featured-2:1.75rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.125rem;--rs-line-height-featured-3:1.5rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:0.875rem;--rs-line-height-body-1:1.25rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:0.8125rem;--rs-line-height-body-2:1.25rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.6875rem;--rs-line-height-body-3:1rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.6875rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-radius-small:4px;--rs-unit-radius-medium:4px;--rs-unit-radius-large:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#0d99ff;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#000;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#000;--rs-color-on-brand:#000;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 3px 0px rgba(0,0,0,.15);--rs-shadow-overlay:0px 10px 24px 0px rgba(0,0,0,.1),0px 2px 5px 0px rgba(0,0,0,.04);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280}[data-rs-theme=figma][data-rs-color-mode=light]{--rs-color-background-primary:#0d99ff;--rs-color-background-primary-faded:#e5f4ff;--rs-color-border-primary:#007be5;--rs-color-border-primary-faded:#bde3ff;--rs-color-foreground-primary:#007be5;--rs-color-background-critical:#f24822;--rs-color-background-critical-faded:#ffe2e0;--rs-color-border-critical:#dc3412;--rs-color-border-critical-faded:#ffc7c2;--rs-color-foreground-critical:#dc3412;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#ece2c4;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#14ae5c;--rs-color-background-positive-faded:#daecdf;--rs-color-border-positive:#009951;--rs-color-border-positive-faded:#bbddc6;--rs-color-foreground-positive:#009951;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f5f5f5;--rs-color-border-neutral:#e6e6e6;--rs-color-border-neutral-faded:#e6e6e6;--rs-color-foreground-neutral:#191919;--rs-color-foreground-neutral-faded:#474747;--rs-color-background-disabled:#e4e4e4;--rs-color-background-disabled-faded:#f5f5f5;--rs-color-border-disabled:#e6e6e6;--rs-color-foreground-disabled:#b2b2b2;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#fafafa;--rs-color-rgb-background-primary:13,153,255;--rs-color-rgb-background-primary-faded:229,244,255;--rs-color-rgb-background-critical:242,72,34;--rs-color-rgb-background-critical-faded:255,226,224;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,250,233;--rs-color-rgb-background-positive:20,174,92;--rs-color-rgb-background-positive-faded:218,236,223;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:223,226,234;--rs-color-rgb-background-neutral-faded:245,245,245;--rs-color-rgb-background-disabled:228,228,228;--rs-color-rgb-background-disabled-faded:245,245,245;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:250,250,250}[data-rs-theme=figma][data-rs-color-mode=dark]{--rs-color-background-primary:#0c8ce9;--rs-color-background-primary-faded:#394360;--rs-color-border-primary:#7cc4f8;--rs-color-border-primary-faded:#2a4d72;--rs-color-foreground-primary:#7cc4f8;--rs-color-background-critical:#e03e1a;--rs-color-background-critical-faded:#60332a;--rs-color-border-critical:#fca397;--rs-color-border-critical-faded:#803226;--rs-color-foreground-critical:#fca397;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#453c1e;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#198f51;--rs-color-background-positive-faded:#3d5749;--rs-color-border-positive:#79d297;--rs-color-border-positive-faded:#086338;--rs-color-foreground-positive:#79d297;--rs-color-background-neutral:#444;--rs-color-background-neutral-faded:#383838;--rs-color-border-neutral:#444;--rs-color-border-neutral-faded:#444;--rs-color-foreground-neutral:#fff;--rs-color-foreground-neutral-faded:#b2b2b2;--rs-color-background-disabled:#474747;--rs-color-background-disabled-faded:#3a3a3a;--rs-color-border-disabled:#3e3e3e;--rs-color-foreground-disabled:#656565;--rs-color-background-elevation-base:#2c2c2c;--rs-color-background-elevation-raised:#2c2c2c;--rs-color-background-elevation-overlay:#2c2c2c;--rs-color-background-page:#2c2c2c;--rs-color-background-page-faded:#1e1e1e;--rs-color-rgb-background-primary:12,140,233;--rs-color-rgb-background-primary-faded:57,67,96;--rs-color-rgb-background-critical:224,62,26;--rs-color-rgb-background-critical-faded:96,51,42;--rs-color-rgb-background-warning:241,197,18;--rs-color-rgb-background-warning-faded:44,39,31;--rs-color-rgb-background-positive:25,143,81;--rs-color-rgb-background-positive-faded:61,87,73;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:68,68,68;--rs-color-rgb-background-neutral-faded:56,56,56;--rs-color-rgb-background-disabled:71,71,71;--rs-color-rgb-background-disabled-faded:58,58,58;--rs-color-rgb-background-elevation-base:44,44,44;--rs-color-rgb-background-elevation-raised:44,44,44;--rs-color-rgb-background-elevation-overlay:44,44,44;--rs-color-rgb-background-page:44,44,44;--rs-color-rgb-background-page-faded:30,30,30}

package/dist/cli/theming/index.js

@@ -22,7 +22,6 @@ const transformDefinition = (name, definition, options) => {
     if (code.media)
         fs.writeFileSync(themeMediaPath, code.media);
     const logOutput = `Compiled ${chalk.bold(name)} theme${isFragment ? " fragment" : ""}`;
-    // eslint-disable-next-line no-console
     console.log(chalk.green(logOutput));
 };
 export const addThemeFragment = (name, definition, options) => {

package/dist/components/Actionable/Actionable.js

@@ -15,6 +15,8 @@ const Actionable = forwardRef((props, ref) => {
     // To make sure it doesn't render a span
     const isButton = Boolean(hasClickHandler || hasFocusHandler || type || attributes?.ref);
     const renderedAsButton = !isLink && isButton && (!as || as === "button");
+    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let TagName;
     if (isLink) {
         TagName = "a";

package/dist/components/Autocomplete/Autocomplete.js

@@ -70,6 +70,7 @@ const Autocomplete = (props) => {
     return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
                             // Ignoring the type check since TS can't infer the correct html element type
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
                             ref: ref,
                             onClick: attributes.onFocus,
                         }, inputAttributes: {

package/dist/components/Calendar/Calendar.module.css

@@ -1 +1 @@
-.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}.row{border-top:2px solid transparent}[dir=rtl] .control{transform:scaleX(-1)}.cell-button{padding:var(--rs-unit-x2);text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:border-radius,background-color,color}.cell-button[disabled],.cell-button[disabled]:hover{background-color:transparent!important;color:var(--rs-color-foreground-disabled)!important}.cell{padding:0}.cell .cell-button:hover,.cell--in-range .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell--active-end .cell-button,.cell--active-end:hover .cell-button,.cell--active-start .cell-button,.cell--active-start:hover .cell-button{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.cell--active-start .cell-button,.cell:first-child .cell-button{border-end-start-radius:var(--rs-radius-small);border-start-start-radius:var(--rs-radius-small)}.cell--active-end .cell-button,.cell--active-start+.cell:hover:not(.cell--in-range) .cell-button,.cell--in-range+.cell:hover:not(.cell--in-range) .cell-button,.cell:last-child .cell-button{border-end-end-radius:var(--rs-radius-small);border-start-end-radius:var(--rs-radius-small)}.cell--active-single+.cell:hover .cell-button,.cell:hover:not(.cell--in-range,.cell--in-range+.cell:hover,.cell--active-start+.cell:hover) .cell-button{border-radius:var(--rs-radius-small)}
+.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}[dir=rtl] .control{transform:scaleX(-1)}.cell{isolation:isolate;padding:2px}.cell:hover .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell.--active .cell-button{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.cell.--selection-range .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell.--selection-range:not(:last-child) .cell-button,.cell.--selection-start:not(:last-child) .cell-button{border-end-end-radius:0;border-start-end-radius:0}.cell.--selection-end:not(:first-child) .cell-button,.cell.--selection-range+:hover .cell-button,.cell.--selection-range:not(:first-child) .cell-button,.cell.--selection-start+:hover .cell-button{border-end-start-radius:0;border-start-start-radius:0}.cell.--selection-range+.--selection-end .cell-button:before,.cell.--selection-range+.--selection-range .cell-button:before,.cell.--selection-range+:hover .cell-button:before,.cell.--selection-start+.--selection-range .cell-button:before,.cell.--selection-start+:hover .cell-button:before{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell-button{border-radius:var(--rs-radius-small);padding:var(--rs-unit-x2);position:relative;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color,background-color,border-radius}.cell-button:before{content:"";inset-block:0;inset-inline-start:-4px;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color;width:4px}.cell-button[disabled]{background-color:transparent!important;color:var(--rs-color-foreground-disabled)!important}

package/dist/components/Calendar/Calendar.types.d.ts

@@ -4,6 +4,7 @@ export type BaseProps = {
     min?: Date;
     max?: Date;
     firstWeekDay?: number;
+    selectedDates?: Date[];
     renderWeekDay?: (args: {
         weekDay: number;
         date: Date;
@@ -74,21 +75,20 @@ export type MonthProps = {
     hoveredDate: Date | null;
     onDateHover: (date: Date) => void;
     onDateHoverEnd: (date: Date) => void;
-} & Pick<BaseProps, "max" | "min" | "firstWeekDay" | "renderMonthLabel" | "renderWeekDay" | "renderSelectedMonthLabel" | "renderDateAriaLabel"> & Pick<ControlledProps, "value" | "onChange" | "range">;
+} & Pick<BaseProps, "max" | "min" | "firstWeekDay" | "selectedDates" | "renderMonthLabel" | "renderWeekDay" | "renderSelectedMonthLabel" | "renderDateAriaLabel"> & Pick<ControlledProps, "value" | "onChange" | "range">;
 export type YearProps = {
     monthDate: Date;
     onMonthClick: (month: number) => void;
 } & Pick<BaseProps, "renderMonthLabel" | "min" | "max" | "renderMonthAriaLabel">;
 export type DateProps = {
     date: Date | null;
+    isoDate: string | null;
     disabled?: boolean;
     focusable?: boolean;
     startValue: Date | null;
     endValue: Date | null;
-    isActiveStart: boolean;
-    isActiveEnd: boolean;
     renderAriaLabel?: MonthProps["renderDateAriaLabel"];
-} & Pick<MonthProps, "hoveredDate" | "onDateHover" | "onDateHoverEnd" | "onChange" | "range" | "min" | "max">;
+} & Pick<MonthProps, "hoveredDate" | "onDateHover" | "onDateHoverEnd" | "onChange" | "range" | "min" | "max" | "selectedDates">;
 export type ControlsProps = {
     selectionMode: SelectionMode;
     onMonthTitleClick: () => void;

package/dist/components/Calendar/CalendarControlled.js

@@ -9,7 +9,7 @@ import CalendarMonth from "./CalendarMonth.js";
 import CalendarYear from "./CalendarYear.js";
 import CalendarControls from "./CalendarControls.js";
 const CalendarControlled = (props) => {
-    const { value, onChange, defaultMonth, min, max, range, firstWeekDay, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, } = props;
+    const { value, onChange, defaultMonth, min, max, range, firstWeekDay, selectedDates, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, } = props;
     const [selectionMode, setSelectionMode] = React.useState("date");
     const [monthDate, setMonthDate] = React.useState(defaultMonth || new Date());
     const [hoveredDate, setHoveredDate] = React.useState(null);
@@ -63,6 +63,6 @@ const CalendarControlled = (props) => {
         min,
         max,
     });
-    return (_jsxs(View, { gap: 2, children: [_jsx(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: monthDate, selectionMode: selectionMode, isFirstMonth: bounds.isFirstMonth, isLastMonth: bounds.isLastMonth, monthTitleRef: monthTitleRef, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel }), _jsxs(View.Item, { attributes: { ref: selectionRootRef }, children: [selectionMode === "date" && (_jsx(CalendarMonth, { date: monthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel })), selectionMode === "month" && (_jsx(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max }))] })] }));
+    return (_jsxs(View, { gap: 2, children: [_jsx(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: monthDate, selectionMode: selectionMode, isFirstMonth: bounds.isFirstMonth, isLastMonth: bounds.isLastMonth, monthTitleRef: monthTitleRef, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel }), _jsxs(View.Item, { attributes: { ref: selectionRootRef }, children: [selectionMode === "date" && (_jsx(CalendarMonth, { date: monthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, selectedDates: selectedDates, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel })), selectionMode === "month" && (_jsx(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max }))] })] }));
 };
 export default CalendarControlled;

package/dist/components/Calendar/CalendarDate.js

@@ -5,20 +5,38 @@ import { classNames } from "../../utilities/helpers.js";
 import { getLocalISODate } from "./Calendar.utils.js";
 import s from "./Calendar.module.css";
 const CalendarDate = (props) => {
-    const { date, startValue, endValue, isActiveStart, isActiveEnd, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, renderAriaLabel, } = props;
+    const { date, isoDate, startValue, endValue, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, renderAriaLabel, selectedDates, } = props;
     if (!date)
         return _jsx("td", { className: s.cell, "aria-hidden": "true" });
-    const inRange = startValue &&
-        startValue < date &&
-        ((endValue && endValue > date) || (hoveredDate && !endValue && hoveredDate > date));
+    const isoStartValue = startValue && getLocalISODate({ date: startValue });
+    const isoEndValue = endValue && getLocalISODate({ date: endValue });
+    const isStartValue = !!isoDate && !!isoStartValue && isoDate === isoStartValue;
+    const isEndValue = !!isoDate && !!isoEndValue && isoDate === isoEndValue;
+    const isAfterStartValue = startValue && date > startValue;
+    const isBeforeEndValue = endValue && date < endValue;
+    const isInHoveredRange = hoveredDate && !endValue && hoveredDate > date;
+    const isInSelectedDates = !!selectedDates?.find((selectedDate) => getLocalISODate({ date: selectedDate }) === isoDate);
+    let selection;
+    switch (true) {
+        case isAfterStartValue && isInHoveredRange:
+        case isAfterStartValue && isBeforeEndValue:
+            selection = "range";
+            break;
+        case isStartValue && (!range || isEndValue):
+        case isInSelectedDates:
+            selection = "standalone";
+            break;
+        case isStartValue:
+            selection = "start";
+            break;
+        case isEndValue:
+            selection = "end";
+            break;
+    }
     const dateClassNames = classNames([
         s.cell,
-        !range && isActiveStart && s["cell--active-single"],
-        isActiveStart && s["cell--active-start"],
-        (isActiveEnd ||
-            (!endValue && isActiveStart && !(hoveredDate && startValue && hoveredDate > startValue))) &&
-            s["cell--active-end"],
-        inRange && s["cell--in-range"],
+        selection && s["--active"],
+        selection && s[`--selection-${selection}`],
     ]);
     const handleClick = () => {
         if (!range) {
@@ -46,7 +64,7 @@ const CalendarDate = (props) => {
                 "aria-label": renderAriaLabel
                     ? renderAriaLabel({ date })
                     : date.toLocaleDateString("en-us", { month: "long", day: "numeric", weekday: "long" }),
-                "aria-checked": isActiveStart || isActiveEnd,
+                "aria-checked": !!selection,
                 "data-rs-date": getLocalISODate({ date }),
                 onMouseEnter: handleMouseEnter,
                 onMouseLeave: handleMouseLeave,

package/dist/components/Calendar/CalendarMonth.js

@@ -4,7 +4,7 @@ import { getMonthWeeks, getWeekdayNames, getLocalISODate } from "./Calendar.util
 import CalendarDate from "./CalendarDate.js";
 import s from "./Calendar.module.css";
 const CalendarMonth = (props) => {
-    const { date, value, onChange, min, max, range, firstWeekDay, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
+    const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
     let foundFocusableDate = false;
     const month = date.getMonth();
     const weeks = getMonthWeeks({ date, firstWeekDay });
@@ -19,10 +19,6 @@ const CalendarMonth = (props) => {
                             const startValue = value && "start" in value ? value.start : value;
                             const endValue = value && "end" in value ? value.end : value;
                             const isoDate = date && getLocalISODate({ date });
-                            const isoStartValue = startValue && getLocalISODate({ date: startValue });
-                            const isoEndValue = endValue && getLocalISODate({ date: endValue });
-                            const isActiveStart = !!isoDate && !!isoStartValue && isoDate === isoStartValue;
-                            const isActiveEnd = !!isoDate && !!isoEndValue && isoDate === isoEndValue;
                             /**
                              * Decide if date has to be focusable with Tab (only one date should be)
                              * 1. If there is a selected value - it's focusable
@@ -43,7 +39,7 @@ const CalendarMonth = (props) => {
                             }
                             if (focusable)
                                 foundFocusableDate = true;
-                            return (_jsx(CalendarDate, { date: date, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, isActiveStart: isActiveStart, isActiveEnd: isActiveEnd, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, renderAriaLabel: renderDateAriaLabel }, index));
+                            return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates }, index));
                         }) }, key));
                 }) })] }));
 };

package/dist/components/Calendar/tests/Calendar.stories.d.ts

@@ -1,3 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { type Mock } from "@storybook/test";
 declare const _default: {
     title: string;
     component: (props: import("./..").CalendarProps) => import("react").JSX.Element;
@@ -8,7 +10,20 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const selection: () => import("react").JSX.Element;
-export declare const boundaries: () => import("react").JSX.Element;
-export declare const translation: () => import("react").JSX.Element;
+export declare const defaultMonth: StoryObj;
+export declare const uncontrolled: StoryObj<{
+    handleChange: Mock;
+}>;
+export declare const controlled: StoryObj<{
+    handleChange: Mock;
+}>;
+export declare const selectedDates: StoryObj;
+export declare const minMax: StoryObj;
+export declare const firstWeekDay: StoryObj;
+export declare const translation: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const ariaLabels: StoryObj;
+export declare const monthSelection: StoryObj;
+export declare const keyboardNavigation: StoryObj;