reshaped 2.11.12 → 3.0.0

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

@@ -0,0 +1,175 @@
+import { parseHex, convertOklabToOkhsl, convertLrgbToOklab, convertRgbToLrgb, convertOkhslToOklab, convertOklabToLrgb, convertLrgbToRgb, serializeHex, serializeHex8, } from "culori/fn";
+const hexToOkHsl = (hex) => {
+    const rgb = parseHex(hex);
+    if (!rgb)
+        throw new Error(`Can\'t generate rgb from ${hex} color`);
+    const lrgb = convertRgbToLrgb(rgb);
+    const oklab = convertLrgbToOklab(lrgb);
+    const okhsl = convertOklabToOkhsl(oklab);
+    return okhsl;
+};
+const okhslToHex = (okhsl) => {
+    const oklab = convertOkhslToOklab(okhsl);
+    const lrgb = convertOklabToLrgb(oklab);
+    const rgb = convertLrgbToRgb(lrgb);
+    return !okhsl.alpha || okhsl.alpha === 1 ? serializeHex(rgb) : serializeHex8(rgb);
+};
+const getDarkModeColor = (hsl) => {
+    const { l } = hsl;
+    const mid = 0.5;
+    const lDelta = 1 - (l - mid) / (1 - mid);
+    return { ...hsl, l: l < mid ? l : 1 - l * lDelta };
+};
+const generateColorValues = (args) => {
+    const { key, hex, hexDark } = args;
+    const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
+    const okhsl = hexToOkHsl(hex);
+    /**
+     * Calculate hue perceptual lighness (yellow, cyan, )
+     */
+    const hueStep = 120;
+    const normalizedHue = ((okhsl.h + 150) % 360) / 360;
+    const hueLightness = Math.cos((2 * Math.PI) / hueStep) * normalizedHue;
+    const okhslDark = key === "neutral"
+        ? { ...okhsl, l: 1 - okhsl.l + 0.16, s: 0.1 }
+        : (hexDark && hexToOkHsl(hexDark)) || getDarkModeColor(okhsl);
+    /**
+     * Background
+     */
+    const bgHex = hex;
+    const bgHexDark = okhslToHex(okhslDark);
+    const bgFadedHsl = { ...okhsl, l: 0.94 + 0.045 * hueLightness };
+    const bgFadedHslDark = { ...okhslDark, l: 0.16, s: okhslDark.s / 2 };
+    const bgFadedHex = okhslToHex(bgFadedHsl);
+    const bgFadedHexDark = okhslToHex(bgFadedHslDark);
+    /**
+     * Foreground
+     */
+    const fgOkhsl = key === "neutral" ? { ...okhsl, l: 0.2 } : { ...okhsl, l: 0.45 };
+    // Lighter colors need smaller lightness increase for fg colors
+    const fgDarkLDelta = 0.16 / (1 + Math.max(0, okhslDark.l - 0.5));
+    const fgOkhslDark = key === "neutral"
+        ? { ...okhsl, l: 0.96 }
+        : { ...okhslDark, l: okhslDark.l + fgDarkLDelta, s: 0.7 };
+    const fgHex = okhslToHex(fgOkhsl);
+    const fgHexDark = okhslToHex(fgOkhslDark);
+    /**
+     * Border
+     */
+    const bdHex = key === "neutral" ? okhslToHex({ ...fgOkhsl, l: 0, alpha: 0.12 }) : fgHex;
+    const bdHexDark = key === "neutral" ? okhslToHex({ ...fgOkhslDark, l: 1, alpha: 0.14 }) : fgHexDark;
+    const bdFadedHex = key === "neutral"
+        ? okhslToHex({
+            ...bgFadedHsl,
+            l: 0,
+            alpha: 0.06,
+        })
+        : okhslToHex({
+            ...bgFadedHsl,
+            s: 0.6 - 0.2 * hueLightness,
+            l: bgFadedHsl.l - 0.05,
+        });
+    const bdFadedHexDark = key === "neutral"
+        ? okhslToHex({
+            ...bgFadedHslDark,
+            l: 1,
+            alpha: 0.09,
+        })
+        : okhslToHex({
+            ...bgFadedHslDark,
+            l: bgFadedHslDark.l + 0.08,
+        });
+    const output = {
+        [`background${capitalizedKey}`]: {
+            hex: bgHex,
+            hexDark: bgHexDark,
+        },
+        [`background${capitalizedKey}Faded`]: {
+            hex: bgFadedHex,
+            hexDark: bgFadedHexDark,
+        },
+        [`border${capitalizedKey}`]: {
+            hex: bdHex,
+            hexDark: bdHexDark,
+        },
+        [`border${capitalizedKey}Faded`]: {
+            hex: bdFadedHex,
+            hexDark: bdFadedHexDark,
+        },
+        [`foreground${capitalizedKey}`]: {
+            hex: fgHex,
+            hexDark: fgHexDark,
+        },
+    };
+    if (key === "neutral") {
+        output[`foreground${capitalizedKey}Faded`] = {
+            hex: okhslToHex({ ...fgOkhsl, l: fgOkhsl.l + 0.25 }),
+            hexDark: okhslToHex({ ...fgOkhslDark, l: fgOkhslDark.l - 0.15 }),
+        };
+        output[`backgroundDisabled`] = {
+            hex: okhslToHex({ ...okhsl, s: 0.04, l: 0.94 }),
+            hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.16 }),
+        };
+        output[`backgroundDisabledFaded`] = {
+            hex: okhslToHex({ ...okhsl, l: 0.97, s: 0.04 }),
+            hexDark: okhslToHex({ ...okhslDark, l: 0.12, s: 0.04 }),
+        };
+        output[`borderDisabled`] = {
+            hex: okhslToHex({ ...okhsl, l: 0.9, s: 0.04 }),
+            hexDark: okhslToHex({ ...okhslDark, l: 0.17, s: 0.04 }),
+        };
+        output[`foregroundDisabled`] = {
+            hex: okhslToHex({ ...okhsl, l: 0.82, s: 0.04 }),
+            hexDark: okhslToHex({ ...okhslDark, l: 0.32, s: 0.04 }),
+        };
+        output[`backgroundElevationBase`] = {
+            hex: "#ffffff",
+            hexDark: okhslToHex({ ...okhslDark, s: 0.03, l: 0.1 }),
+        };
+        output[`backgroundElevationRaised`] = {
+            hex: "#ffffff",
+            hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.11 }),
+        };
+        output[`backgroundElevationOverlay`] = {
+            hex: "#ffffff",
+            hexDark: okhslToHex({ ...okhslDark, s: 0.04, l: 0.13 }),
+        };
+        output[`backgroundPage`] = {
+            hex: "#ffffff",
+            hexDark: okhslToHex({ ...okhslDark, l: 0.07, s: 0.02 }),
+        };
+        output[`backgroundPageFaded`] = {
+            hex: okhslToHex({ ...okhsl, l: 0.985 }),
+            hexDark: okhslToHex({ ...okhslDark, l: 0.09, s: 0.02 }),
+        };
+    }
+    return output;
+};
+const validateHexColor = (color) => {
+    const hexColorRegex = /^#([A-Fa-f0-9]{3}){2}$/;
+    if (!hexColorRegex.test(color)) {
+        throw new Error(`Invalid hex color: ${color}`);
+    }
+    return color;
+};
+const generate = (args = {}) => {
+    const { primary = "#2563eb", critical = "#e22c2c", warning = "#facc15", positive = "#118850", neutral = "#e3e4e8", brand, } = args;
+    const generateFor = (key, color) => {
+        return generateColorValues({
+            key,
+            hex: validateHexColor(typeof color === "string" ? color : color.hex),
+            hexDark: typeof color !== "string" ? validateHexColor(color.hexDark) : undefined,
+        });
+    };
+    return {
+        ...generateFor("primary", primary),
+        ...generateFor("critical", critical),
+        ...generateFor("warning", warning),
+        ...generateFor("positive", positive),
+        ...generateFor("neutral", neutral),
+        brand: { hex: brand || primary },
+        white: { hex: "#ffffff" },
+        black: { hex: "#000000" },
+    };
+};
+export default generate;

package/dist/themes/_generator/utilities/generateUnits.d.ts

@@ -0,0 +1,4 @@
+import type * as T from "../types";
+import type { FullThemeDefinition } from "../tokens/types";
+declare const generateUnits: (definition: T.PartialDeep<FullThemeDefinition>) => void;
+export default generateUnits;

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

@@ -0,0 +1,14 @@
+const generateUnits = (definition) => {
+    const baseValue = definition.unit?.base?.px;
+    // If base value hasn't changed, we don't need to regenerate tokens
+    if (!baseValue)
+        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,
+        };
+    }
+};
+export default generateUnits;

package/dist/themes/_generator/utilities/mergeDeep.d.ts

@@ -0,0 +1,5 @@
+type Obj = {
+    [key: string]: unknown;
+};
+declare const mergeDeep: (target: Obj, ...sources: Obj[]) => Obj;
+export default mergeDeep;

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

@@ -0,0 +1,22 @@
+const isObject = (item) => {
+    return item && typeof item === "object" && !Array.isArray(item);
+};
+const mergeDeep = (target, ...sources) => {
+    if (!sources.length)
+        return target;
+    const source = sources.shift();
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach((key) => {
+            if (isObject(source[key]) && isObject(target[key])) {
+                if (!target[key])
+                    Object.assign(target, { [key]: {} });
+                mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        });
+    }
+    return mergeDeep(target, ...sources);
+};
+export default mergeDeep;

package/dist/themes/_generator/utilities/mergeDefinitions.d.ts

@@ -0,0 +1,5 @@
+type Obj = {
+    [key: string]: unknown;
+};
+declare const mergeDefinitions: (originalDefinition: Obj, newDefinition: Obj, currentLevel?: number) => Obj;
+export default mergeDefinitions;

package/dist/themes/_generator/utilities/mergeDefinitions.js

@@ -0,0 +1,15 @@
+// Level 1 is token types, level 2 is token values
+// { color: { foreground: {} } }
+// We don't merge token values
+const MAX_LEVEL = 2;
+const mergeDefinitions = (originalDefinition, newDefinition, currentLevel = 1) => {
+    // Overwrite the token value
+    if (currentLevel > MAX_LEVEL)
+        return newDefinition;
+    const mergedDefinition = { ...originalDefinition };
+    Object.keys(newDefinition).forEach((key) => {
+        mergedDefinition[key] = mergeDefinitions(mergedDefinition[key], newDefinition[key], currentLevel + 1);
+    });
+    return mergedDefinition;
+};
+export default mergeDefinitions;

package/dist/themes/_generator/utilities/resolveTokenReference.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "../tokens/types";
+declare const resolveTokenReference: <ReferencedToken>(theme: T.ThemeDefinition, tokenType: T.TokenType, ref: string) => ReferencedToken;
+export default resolveTokenReference;

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

@@ -0,0 +1,14 @@
+const resolveTokenReference = (theme, tokenType, ref) => {
+    const tokenGroup = theme[tokenType];
+    let referencedToken = null;
+    Object.keys(tokenGroup).forEach((tokenName) => {
+        if (referencedToken)
+            return;
+        if (tokenName === ref)
+            referencedToken = tokenGroup[tokenName];
+    });
+    if (!referencedToken)
+        throw new Error(`Referenced token not found for: ${ref}`);
+    return referencedToken;
+};
+export default resolveTokenReference;

package/dist/themes/figma/media.css

@@ -0,0 +1 @@
+@custom-media --rs-viewport-m (min-width: 660px);@custom-media --rs-viewport-l (min-width: 900px);@custom-media --rs-viewport-xl (min-width: 1280px);@custom-media --rs-viewport-s (max-width: 659px);

package/dist/themes/figma/theme.css

@@ -0,0 +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:5.714285714285714rem;--rs-line-height-title-1:6rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-semibold);--rs-font-size-title-2:4.571428571428571rem;--rs-line-height-title-2:4.857142857142857rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-semibold);--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.285714285714286rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-semibold);--rs-font-size-title-4:2.857142857142857rem;--rs-line-height-title-4:3.142857142857143rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-semibold);--rs-font-size-title-5:2.5714285714285716rem;--rs-line-height-title-5:2.857142857142857rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-semibold);--rs-font-size-title-6:1.7142857142857142rem;--rs-line-height-title-6:2rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-semibold);--rs-font-size-featured-1:1.5714285714285714rem;--rs-line-height-featured-1:2rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-font-size-featured-2:1.4285714285714286rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-font-size-featured-3:1.2857142857142858rem;--rs-line-height-featured-3:1.7142857142857142rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-font-size-body-1:1rem;--rs-line-height-body-1:1.4285714285714286rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-font-size-body-2:0.9285714285714286rem;--rs-line-height-body-2:1.4285714285714286rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-font-size-body-3:0.7857142857142857rem;--rs-line-height-body-3:1.1428571428571428rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-font-size-caption-1:0.7857142857142857rem;--rs-line-height-caption-1:1.1428571428571428rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-font-size-caption-2:0.7142857142857143rem;--rs-line-height-caption-2:0.8571428571428571rem;--rs-font-family-caption-2:var(--rs-font-family-body);--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-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)}[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:#faedbb;--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:#3d3628;--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}

package/dist/themes/fragments/twitter/theme.css

@@ -0,0 +1 @@
+[data-rs-theme=twitter]{--rs-color-background-primary:#1da1f2;--rs-color-background-primary-highlighted:#1a90da;--rs-color-on-background-primary:#fff;--rs-color-rgb-background-primary:29,161,242;--rs-color-rgb-background-primary-highlighted:26,144,218}

package/dist/themes/index.d.ts

@@ -0,0 +1,12 @@
+import type * as T from "./_generator/types";
+import type { FullThemeDefinition } from "./_generator/tokens/types";
+export { default as baseThemeDefinition } from "./_generator/definitions/reshaped";
+export declare const generateThemeColors: (options: {
+    primary: T.Color;
+    critical?: T.Color;
+    positive?: T.Color;
+    neutral?: T.Color;
+}) => Record<import("./_generator/tokens/color/color.types").Name, import("./_generator/tokens/color/color.types").Token> & {
+    [tokenName: string]: import("./_generator/tokens/color/color.types").Token;
+};
+export declare const getThemeCSS: (name: string, definition: T.PartialDeep<FullThemeDefinition>, options?: T.PublicOptions["themeOptions"]) => string;

package/dist/themes/index.js

@@ -0,0 +1,10 @@
+import transform from "./_generator/transform.js";
+import generateColors from "./_generator/utilities/generateColors.js";
+export { default as baseThemeDefinition } from "./_generator/definitions/reshaped.js";
+export const generateThemeColors = (options) => {
+    return generateColors(options);
+};
+export const getThemeCSS = (name, definition, options) => {
+    const code = transform(name, definition, { themeOptions: options, isFragment: true });
+    return code.variables;
+};

package/dist/themes/reshaped/media.css

@@ -0,0 +1 @@
+@custom-media --rs-viewport-m (min-width: 660px);@custom-media --rs-viewport-l (min-width: 900px);@custom-media --rs-viewport-xl (min-width: 1280px);@custom-media --rs-viewport-s (max-width: 659px);

package/dist/themes/reshaped/theme.css

@@ -0,0 +1 @@
+[data-rs-theme=reshaped]{--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:6.857142857142857rem;--rs-line-height-title-1:7.142857142857143rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-font-size-title-2:5.714285714285714rem;--rs-line-height-title-2:6rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-font-size-title-3:4.571428571428571rem;--rs-line-height-title-3:4.857142857142857rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-font-size-title-4:4rem;--rs-line-height-title-4:4.285714285714286rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-font-size-title-5:3.4285714285714284rem;--rs-line-height-title-5:3.7142857142857144rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-font-size-title-6:2.5714285714285716rem;--rs-line-height-title-6:2.857142857142857rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-font-size-featured-1:2.2857142857142856rem;--rs-line-height-featured-1:2.857142857142857rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-font-size-featured-2:1.7142857142857142rem;--rs-line-height-featured-2:2.2857142857142856rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-font-size-featured-3:1.4285714285714286rem;--rs-line-height-featured-3:2rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-font-size-body-1:1.2857142857142858rem;--rs-line-height-body-1:2rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-font-size-body-2:1.1428571428571428rem;--rs-line-height-body-2:1.7142857142857142rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-font-size-body-3:1rem;--rs-line-height-body-3:1.4285714285714286rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-font-size-caption-1:0.8571428571428571rem;--rs-line-height-caption-1:1.1428571428571428rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-font-size-caption-2:0.7142857142857143rem;--rs-line-height-caption-2:0.8571428571428571rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-unit-base: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:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--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 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07)}[data-rs-theme=reshaped][data-rs-color-mode=light]{--rs-color-background-primary:#5a58f2;--rs-color-background-primary-faded:#ecebfe;--rs-color-border-primary:#3b38ed;--rs-color-border-primary-faded:#dedcfb;--rs-color-foreground-primary:#4f4cf0;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fdeded;--rs-color-border-critical:#bf2424;--rs-color-border-critical-faded:#fadbdb;--rs-color-foreground-critical:#c42525;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#faedbb;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#edfdf5;--rs-color-border-positive:#0c6e40;--rs-color-border-positive-faded:#d0f3e2;--rs-color-foreground-positive:#0d7544;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f1f2f6;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#0000001a;--rs-color-foreground-neutral:#14181f;--rs-color-foreground-neutral-faded:#5b667e;--rs-color-background-disabled:#eceef2;--rs-color-background-disabled-faded:#f5f6f9;--rs-color-border-disabled:#dfe2ea;--rs-color-foreground-disabled:#c6ccda;--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:#f9f9fb;--rs-color-rgb-background-primary:90,88,242;--rs-color-rgb-background-primary-faded:236,235,254;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:253,237,237;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,250,233;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:237,253,245;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:223,226,234;--rs-color-rgb-background-neutral-faded:241,242,246;--rs-color-rgb-background-disabled:236,238,242;--rs-color-rgb-background-disabled-faded:245,246,249;--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:249,249,251}[data-rs-theme=reshaped][data-rs-color-mode=dark]{--rs-color-background-primary:#524fea;--rs-color-background-primary-faded:#252544;--rs-color-border-primary:#8c8bf3;--rs-color-border-primary-faded:#323164;--rs-color-foreground-primary:#8b8af7;--rs-color-background-critical:#d02626;--rs-color-background-critical-faded:#3e1f1f;--rs-color-border-critical:#f46969;--rs-color-border-critical-faded:#582929;--rs-color-foreground-critical:#f36a6a;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#3d3628;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#14784a;--rs-color-background-positive-faded:#1f2a23;--rs-color-border-positive:#21ab6b;--rs-color-border-positive-faded:#293b2f;--rs-color-foreground-positive:#18ab66;--rs-color-background-neutral:#494f60;--rs-color-background-neutral-faded:#222835;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff17;--rs-color-foreground-neutral:#eff1f5;--rs-color-foreground-neutral-faded:#c0c6d6;--rs-color-background-disabled:#1e212a;--rs-color-background-disabled-faded:#171921;--rs-color-border-disabled:#262a34;--rs-color-foreground-disabled:#434959;--rs-color-background-elevation-base:#15171e;--rs-color-background-elevation-raised:#191b23;--rs-color-background-elevation-overlay:#1c1f28;--rs-color-background-page:#0f1116;--rs-color-background-page-faded:#111319;--rs-color-rgb-background-primary:82,79,234;--rs-color-rgb-background-primary-faded:37,37,68;--rs-color-rgb-background-critical:208,38,38;--rs-color-rgb-background-critical-faded:62,31,31;--rs-color-rgb-background-warning:241,197,18;--rs-color-rgb-background-warning-faded:44,39,31;--rs-color-rgb-background-positive:20,120,74;--rs-color-rgb-background-positive-faded:31,42,35;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:73,79,96;--rs-color-rgb-background-neutral-faded:34,40,53;--rs-color-rgb-background-disabled:30,33,42;--rs-color-rgb-background-disabled-faded:23,25,33;--rs-color-rgb-background-elevation-base:21,23,30;--rs-color-rgb-background-elevation-raised:25,27,35;--rs-color-rgb-background-elevation-overlay:28,31,40;--rs-color-rgb-background-page:15,17,22;--rs-color-rgb-background-page-faded:17,19,25}

package/dist/themes/slate/media.css

@@ -0,0 +1 @@
+@custom-media --rs-viewport-m (min-width: 660px);@custom-media --rs-viewport-l (min-width: 900px);@custom-media --rs-viewport-xl (min-width: 1280px);@custom-media --rs-viewport-s (max-width: 659px);

package/dist/themes/slate/theme.css

@@ -0,0 +1 @@
+[data-rs-theme=slate]{--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:6.857142857142857rem;--rs-line-height-title-1:7.142857142857143rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-font-size-title-2:5.714285714285714rem;--rs-line-height-title-2:6rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-font-size-title-3:4.571428571428571rem;--rs-line-height-title-3:4.857142857142857rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-font-size-title-4:4rem;--rs-line-height-title-4:4.285714285714286rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-font-size-title-5:3.4285714285714284rem;--rs-line-height-title-5:3.7142857142857144rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-font-size-title-6:2.5714285714285716rem;--rs-line-height-title-6:2.857142857142857rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-font-size-featured-1:2.2857142857142856rem;--rs-line-height-featured-1:2.857142857142857rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-font-size-featured-2:1.7142857142857142rem;--rs-line-height-featured-2:2.2857142857142856rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-font-size-featured-3:1.4285714285714286rem;--rs-line-height-featured-3:2rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-font-size-body-1:1.2857142857142858rem;--rs-line-height-body-1:2rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-font-size-body-2:1.1428571428571428rem;--rs-line-height-body-2:1.7142857142857142rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-font-size-body-3:1rem;--rs-line-height-body-3:1.4285714285714286rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-font-size-caption-1:0.8571428571428571rem;--rs-line-height-caption-1:1.1428571428571428rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-font-size-caption-2:0.7142857142857143rem;--rs-line-height-caption-2:0.8571428571428571rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-unit-base: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:#2563eb;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--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 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07)}[data-rs-theme=slate][data-rs-color-mode=light]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#e8f0ff;--rs-color-border-primary:#1e5ce5;--rs-color-border-primary-faded:#d7e2f6;--rs-color-foreground-primary:#1e5ce5;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fff1ef;--rs-color-border-critical:#c22022;--rs-color-border-critical-faded:#f6e1de;--rs-color-foreground-critical:#c22022;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fff6dd;--rs-color-border-warning:#816802;--rs-color-border-warning-faded:#f0e8d0;--rs-color-foreground-warning:#816802;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#ebfff1;--rs-color-border-positive:#0f7f4a;--rs-color-border-positive-faded:#dcf1e2;--rs-color-foreground-positive:#0f7f4a;--rs-color-background-neutral:#e3e4e8;--rs-color-background-neutral-faded:#eff0f2;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#0000000f;--rs-color-foreground-neutral:#2c2e34;--rs-color-foreground-neutral-faded:#676a75;--rs-color-background-disabled:#edeeef;--rs-color-background-disabled-faded:#f6f6f7;--rs-color-border-disabled:#e2e2e4;--rs-color-foreground-disabled:#cbcccf;--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:#fafbfb;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:232,240,255;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:255,241,239;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,246,221;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:235,255,241;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:227,228,232;--rs-color-rgb-background-neutral-faded:239,240,242;--rs-color-rgb-background-disabled:237,238,239;--rs-color-rgb-background-disabled-faded:246,246,247;--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,251,251}[data-rs-theme=slate][data-rs-color-mode=dark]{--rs-color-background-primary:#2563eb;--rs-color-background-primary-faded:#17243d;--rs-color-border-primary:#7199e5;--rs-color-border-primary-faded:#253759;--rs-color-foreground-primary:#7199e5;--rs-color-background-critical:#d72828;--rs-color-background-critical-faded:#391b18;--rs-color-border-critical:#e68075;--rs-color-border-critical-faded:#532a26;--rs-color-foreground-critical:#e68075;--rs-color-background-warning:#d7ae06;--rs-color-background-warning-faded:#2b2410;--rs-color-border-warning:#eed58a;--rs-color-border-warning-faded:#40371b;--rs-color-foreground-warning:#eed58a;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#152a1d;--rs-color-border-positive:#57b17c;--rs-color-border-positive-faded:#223f2d;--rs-color-foreground-positive:#57b17c;--rs-color-background-neutral:#393a42;--rs-color-background-neutral-faded:#242527;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff17;--rs-color-foreground-neutral:#f3f3f5;--rs-color-foreground-neutral-faded:#c7c9d1;--rs-color-background-disabled:#242527;--rs-color-background-disabled-faded:#1b1b1d;--rs-color-border-disabled:#262729;--rs-color-foreground-disabled:#494a4e;--rs-color-background-elevation-base:#161617;--rs-color-background-elevation-raised:#18191a;--rs-color-background-elevation-overlay:#1d1d1f;--rs-color-background-page:#0e0e0f;--rs-color-background-page-faded:#131414;--rs-color-rgb-background-primary:37,99,235;--rs-color-rgb-background-primary-faded:23,36,61;--rs-color-rgb-background-critical:215,40,40;--rs-color-rgb-background-critical-faded:57,27,24;--rs-color-rgb-background-warning:215,174,6;--rs-color-rgb-background-warning-faded:43,36,16;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:21,42,29;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:57,58,66;--rs-color-rgb-background-neutral-faded:36,37,39;--rs-color-rgb-background-disabled:36,37,39;--rs-color-rgb-background-disabled-faded:27,27,29;--rs-color-rgb-background-elevation-base:22,22,23;--rs-color-rgb-background-elevation-raised:24,25,26;--rs-color-rgb-background-elevation-overlay:29,29,31;--rs-color-rgb-background-page:14,14,15;--rs-color-rgb-background-page-faded:19,20,20}

package/dist/types/config.d.ts

@@ -0,0 +1,14 @@
+import { PartialThemeDefinition, ColorHue } from "../themes/_generator/tokens/types";
+export type ReshapedConfig = {
+    themes?: Record<string, PartialThemeDefinition>;
+    themeFragments?: Record<string, PartialThemeDefinition>;
+    themeOptions?: {
+        generateOnColorsFor?: string[];
+        onColorValues?: {
+            [key in ColorHue]?: {
+                hexDark: string;
+                hexLight: string;
+            };
+        };
+    };
+};

package/dist/types/config.js

@@ -0,0 +1 @@
+export {};

package/dist/types/global.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+type ClassNameValue = string | null | undefined | false;
+export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
+export type CSSVariable = `--${string}`;
+export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number>);
+type DataAttributes = {} | Record<`data-${string}`, string | boolean>;
+export type Attributes<TagName extends keyof JSX.IntrinsicElements = "div"> = JSX.IntrinsicElements[TagName] & DataAttributes & {
+    style?: StyleAttribute;
+};
+export type Viewport = "s" | "m" | "l" | "xl";
+export type ResponsiveOnly<T> = {
+    [key in Viewport]?: T;
+};
+export type Responsive<T> = T | ResponsiveOnly<T>;
+/**
+ * Form handlers
+ */
+type ChangeHandlerArgs<Value, Event> = Value extends Boolean ? {
+    name: string;
+    value?: string;
+    checked: Value;
+    event?: Event;
+} : {
+    name: string;
+    value: Value;
+    event?: Event;
+};
+export type ChangeHandler<Value, Event = React.ChangeEvent<HTMLInputElement>> = (args: ChangeHandlerArgs<Value, Event>) => void;
+export {};

package/dist/types/global.js

@@ -0,0 +1 @@
+export {};

package/dist/utilities/Chain.js

@@ -0,0 +1,60 @@
+class Chain {
+    chain = {};
+    tailId = null;
+    idCounter = 0;
+    generateId() {
+        this.idCounter += 1;
+        return this.idCounter;
+    }
+    getAll() {
+        return this.chain;
+    }
+    get(id) {
+        return this.chain[id];
+    }
+    isLast(id) {
+        return this.tailId !== null && id === this.tailId;
+    }
+    isEmpty() {
+        return typeof this.tailId !== "number";
+    }
+    add(data) {
+        const previousId = this.tailId;
+        const previousItem = previousId && this.get(previousId);
+        const id = this.generateId();
+        this.chain[id] = { previousId, data };
+        if (previousItem)
+            previousItem.nextId = id;
+        this.tailId = id;
+        return id;
+    }
+    remove(id) {
+        const target = this.chain[id];
+        if (!target)
+            return;
+        const previousId = target.previousId;
+        const previousItem = previousId && this.get(previousId);
+        const nextId = target.nextId;
+        const nextItem = nextId && this.get(nextId);
+        if (previousItem)
+            previousItem.nextId = target.nextId ?? null;
+        if (nextItem)
+            nextItem.previousId = target.previousId ?? null;
+        if (!nextId)
+            this.tailId = previousId ?? null;
+        const data = this.get(id).data;
+        delete this.chain[id];
+        return data;
+    }
+    removePreviousTill(id, condition) {
+        const target = this.get(id);
+        const data = this.remove(id);
+        if (!target || !target.previousId)
+            return data;
+        const keepIterating = !condition(target);
+        if (keepIterating)
+            return this.removePreviousTill(target.previousId, condition);
+        return data;
+    }
+}
+export default Chain;

package/dist/utilities/a11y/TrapFocus.js

@@ -0,0 +1,130 @@
+import Chain from "../Chain.js";
+import * as keys from "../../constants/keys.js";
+import TrapScreenReader from "./TrapScreenReader.js";
+import { getActiveElement, getFocusableElements, focusElement, getFocusData } from "./focus.js";
+import { checkKeyboardMode } from "./keyboardMode.js";
+class TrapFocus {
+    static chain = new Chain();
+    chainId;
+    root;
+    trigger = null;
+    options = {};
+    trapped;
+    screenReaderTrap;
+    mutationObserver = null;
+    constructor(root) {
+        this.root = root;
+        this.screenReaderTrap = new TrapScreenReader(root);
+    }
+    /**
+     * Handle keyboard navigation while focus is trapped
+     */
+    handleKeyDown = (event) => {
+        if (TrapFocus.chain.tailId !== this.chainId)
+            return;
+        const { mode, onNavigateOutside, pseudoFocus, includeTrigger } = this.options;
+        let navigationMode = "tabs";
+        if (mode === "action-menu" || mode === "selection-menu")
+            navigationMode = "arrows";
+        const key = event.key;
+        const isTab = key === keys.TAB;
+        const isNextTab = isTab && !event.shiftKey;
+        const isBackTab = isTab && event.shiftKey;
+        const isUp = navigationMode === "arrows" && key === keys.UP;
+        const isDown = navigationMode === "arrows" && key === keys.DOWN;
+        const isPrev = (isBackTab && navigationMode === "tabs") || isUp;
+        const isNext = (isNextTab && navigationMode === "tabs") || isDown;
+        const isFocusedOnTrigger = getActiveElement() === this.trigger;
+        const focusData = getFocusData({
+            root: this.root,
+            target: isPrev ? "prev" : "next",
+            options: {
+                additionalElement: includeTrigger ? this.trigger : undefined,
+                circular: mode !== "action-menu",
+            },
+        });
+        // Release the trap when tab is used in navigation modes that support arrows
+        const hasNavigatedOutside = (isTab && navigationMode === "arrows") ||
+            (mode === "content-menu" && isTab && focusData.overflow);
+        if (hasNavigatedOutside) {
+            // Prevent shift + tab event to avoid focus moving after the trap release
+            if (isBackTab && !isFocusedOnTrigger)
+                event.preventDefault();
+            this.release();
+            onNavigateOutside?.();
+            return;
+        }
+        if (!isPrev && !isNext)
+            return;
+        event.preventDefault();
+        if (!focusData.el)
+            return;
+        focusElement(focusData.el, { pseudoFocus });
+    };
+    addListeners = () => document.addEventListener("keydown", this.handleKeyDown);
+    removeListeners = () => document.removeEventListener("keydown", this.handleKeyDown);
+    /**
+     * Trap the focus, add observer and keyboard event listeners
+     * and create a chain item
+     */
+    trap = (options = {}) => {
+        const { mode = "dialog", includeTrigger, initialFocusEl } = options;
+        const trigger = getActiveElement();
+        const focusable = getFocusableElements(this.root, {
+            additionalElement: includeTrigger ? trigger : undefined,
+        });
+        const pseudoFocus = mode === "selection-menu";
+        this.options = { ...options, pseudoFocus };
+        this.trigger = trigger;
+        this.mutationObserver = new MutationObserver(() => {
+            const currentActiveElement = getActiveElement();
+            // Focus stayed inside the wrapper, no need to refocus
+            if (this.root.contains(currentActiveElement))
+                return;
+            const focusable = getFocusableElements(this.root, {
+                additionalElement: includeTrigger ? trigger : undefined,
+            });
+            if (!focusable.length)
+                return;
+            focusElement(focusable[0], { pseudoFocus });
+        });
+        this.removeListeners();
+        if (mode === "dialog")
+            this.screenReaderTrap.trap();
+        this.mutationObserver.observe(this.root, { childList: true, subtree: true });
+        if (!focusable.length && !initialFocusEl)
+            return;
+        this.addListeners();
+        // Don't add back to the chain if we're traversing back
+        const tailItem = TrapFocus.chain.tailId && TrapFocus.chain.get(TrapFocus.chain.tailId);
+        if (!tailItem || this.root !== tailItem.data.root) {
+            this.chainId = TrapFocus.chain.add(this);
+            focusElement(initialFocusEl || focusable[0], { pseudoFocus });
+        }
+        this.trapped = true;
+    };
+    /**
+     * Disabled the trap focus for the element,
+     * cleanup all observers/handlers and trap for the previous element in the chain
+     */
+    release = (releaseOptions = {}) => {
+        const { withoutFocusReturn } = releaseOptions;
+        if (!this.trapped || !this.chainId)
+            return;
+        this.trapped = false;
+        if (this.trigger) {
+            const preventScroll = withoutFocusReturn || !checkKeyboardMode();
+            this.trigger.focus({ preventScroll });
+        }
+        TrapFocus.chain.removePreviousTill(this.chainId, (item) => document.body.contains(item.data.trigger));
+        this.mutationObserver?.disconnect();
+        this.removeListeners();
+        this.screenReaderTrap.release();
+        const previousItem = TrapFocus.chain.tailId && TrapFocus.chain.get(TrapFocus.chain.tailId);
+        if (previousItem) {
+            const trapInstance = new TrapFocus(previousItem.data.root);
+            trapInstance.trap(previousItem.data.options);
+        }
+    };
+}
+export default TrapFocus;

package/dist/utilities/a11y/TrapScreenReader.js

@@ -0,0 +1,40 @@
+class TrapScreenReader {
+    root;
+    /**
+     * Elements ignored by screen reader when trap is active
+     */
+    hiddenElements = [];
+    constructor(root) {
+        this.root = root;
+    }
+    /**
+     * Apply aria-hidden to all elements except the passed
+     */
+    hideSiblingsFromScreenReader = (el) => {
+        let sibling = el.parentNode && el.parentNode.firstChild;
+        while (sibling) {
+            const notCurrent = sibling !== el;
+            const isValid = sibling.nodeType === 1 && !sibling.hasAttribute("aria-hidden");
+            if (notCurrent && isValid) {
+                sibling.setAttribute("aria-hidden", "true");
+                this.hiddenElements.push(sibling);
+            }
+            sibling = sibling.nextSibling;
+        }
+    };
+    release = () => {
+        this.hiddenElements.forEach((el) => {
+            el.removeAttribute("aria-hidden");
+        });
+        this.hiddenElements = [];
+    };
+    trap = () => {
+        let currentEl = this.root;
+        this.release();
+        while (currentEl !== document.body) {
+            this.hideSiblingsFromScreenReader(currentEl);
+            currentEl = currentEl.parentElement;
+        }
+    };
+}
+export default TrapScreenReader;