reshaped 2.11.12 → 3.0.1

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

@@ -0,0 +1,177 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fn_1 = require("culori/require");
+const hexToOkHsl = (hex) => {
+    const rgb = (0, fn_1.parseHex)(hex);
+    if (!rgb)
+        throw new Error(`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);
+    return okhsl;
+};
+const okhslToHex = (okhsl) => {
+    const oklab = (0, fn_1.convertOkhslToOklab)(okhsl);
+    const lrgb = (0, fn_1.convertOklabToLrgb)(oklab);
+    const rgb = (0, fn_1.convertLrgbToRgb)(lrgb);
+    return !okhsl.alpha || okhsl.alpha === 1 ? (0, fn_1.serializeHex)(rgb) : (0, fn_1.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" },
+    };
+};
+exports.default = generate;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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,
+        };
+    }
+};
+exports.default = generateUnits;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// 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;
+};
+exports.default = mergeDefinitions;

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const color_1 = require("../color");
+describe("cli/utilities/color", () => {
+    test("returns white for black background", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#000000" })).toBe("#ffffff");
+    });
+    test("returns white for dark colored background", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#aa0000" })).toBe("#ffffff");
+    });
+    test("returns black for white background", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff" })).toBe("#000000");
+    });
+    test("returns white for light colored background", () => {
+        expect((0, color_1.getOnColor)({ bgHexColor: "#dedede" })).toBe("#000000");
+    });
+    /**
+     * 8-digit hex
+     */
+    // test("returns black for dark background with alpha: 0", () => {
+    // 	expect(getOnColor({ bgHexColor: "#00000000",  })).toBe("#000000");
+    // });
+    // test("returns black for light background with alpha: 0", () => {
+    // 	expect(getOnColor({ bgHexColor: "#ffffff00", mode: "light" })).toBe("#000000");
+    // });
+    // test("returns black for dark background with alpha: 25%", () => {
+    // 	expect(getOnColor({ bgHexColor: "#00000040", mode: "light" })).toBe("#000000");
+    // });
+    // test("returns white for dark background with alpha: 30%", () => {
+    // 	expect(getOnColor({ bgHexColor: "#0000004D", mode: "light" })).toBe("#ffffff");
+    // });
+    /**
+     * Custom resolved color
+     */
+    test("returns #999 for white background in dark mode", () => {
+        expect((0, color_1.getOnColor)({
+            bgHexColor: "#ffffff",
+            lightHexColor: "#eeeeee",
+            darkHexColor: "#999999",
+        })).toBe("#999999");
+    });
+    test("returns #eee for black background in dark mode", () => {
+        expect((0, color_1.getOnColor)({
+            bgHexColor: "#000000",
+            lightHexColor: "#eeeeee",
+            darkHexColor: "#999999",
+        })).toBe("#eeeeee");
+    });
+});

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/types/config.d.ts

@@ -0,0 +1,14 @@
+import type { 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/cjs/types/config.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cli/theming/index.d.ts

@@ -0,0 +1,4 @@
+import type { PartialThemeDefinition } from "../../themes/_generator/tokens/types";
+import type * as T from "../../themes/_generator/types";
+export declare const addThemeFragment: (name: string, definition: PartialThemeDefinition, options: T.CLIOptions) => void;
+export declare const addTheme: (name: string, definition: PartialThemeDefinition, options: T.CLIOptions) => void;

package/dist/cli/theming/index.js

@@ -0,0 +1,30 @@
+import fs from "fs";
+import path from "path";
+import chalk from "chalk";
+import mergeDefinitions from "../../themes/_generator/utilities/mergeDefinitions.js";
+import transform from "../../themes/_generator/transform.js";
+import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
+const transformDefinition = (name, definition, options) => {
+    const { isFragment, outputPath } = options;
+    const code = transform(name, definition, options);
+    const themeFolderPath = isFragment
+        ? path.resolve(outputPath, "fragments", name)
+        : path.resolve(outputPath, name);
+    const themePath = path.resolve(themeFolderPath, "theme.css");
+    const themeMediaPath = path.resolve(themeFolderPath, "media.css");
+    const themeJsonPath = path.resolve(themeFolderPath, "theme.json");
+    fs.mkdirSync(themeFolderPath, { recursive: true });
+    fs.writeFileSync(themePath, code.variables);
+    fs.writeFileSync(themeJsonPath, JSON.stringify(definition));
+    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) => {
+    transformDefinition(name, definition, { ...options, isFragment: true });
+};
+export const addTheme = (name, definition, options) => {
+    transformDefinition(name, mergeDefinitions(reshapedDefinition, definition), options);
+};

package/dist/cli/theming/reshaped.config.d.ts

@@ -0,0 +1,3 @@
+import type { ReshapedConfig } from "../../types/config";
+declare const config: ReshapedConfig;
+export default config;

package/dist/cli/theming/reshaped.config.js

@@ -0,0 +1,21 @@
+import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
+import figmaDefinition from "../../themes/_generator/definitions/figma.js";
+import slateDefinition from "../../themes/_generator/definitions/slate.js";
+const config = {
+    themes: {
+        reshaped: reshapedDefinition,
+        figma: figmaDefinition,
+        slate: slateDefinition,
+    },
+    themeFragments: {
+        twitter: {
+            color: {
+                backgroundPrimary: { hex: "#1da1f2" },
+                backgroundPrimaryHighlighted: { hex: "#1a90da" },
+                onBackgroundPrimary: { hex: "#ffffff" },
+            },
+        },
+    },
+    themeOptions: {},
+};
+export default config;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AccordionControlled from "./AccordionControlled.js";
+import AccordionUncontrolled from "./AccordionUncontrolled.js";
+import AccordionTrigger from "./AccordionTrigger.js";
+import AccordionContent from "./AccordionContent.js";
+const Accordion = (props) => {
+    const { active } = props;
+    if (active !== undefined)
+        return _jsx(AccordionControlled, { ...props });
+    return _jsx(AccordionUncontrolled, { ...props });
+};
+Accordion.Trigger = AccordionTrigger;
+Accordion.Content = AccordionContent;
+export default Accordion;

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

@@ -0,0 +1,39 @@
+import type React from "react";
+import type { IconProps } from "../Icon";
+import type * as G from "../../types/global";
+export type BaseProps = {
+    iconSize?: IconProps["size"];
+    iconPosition?: "start" | "end";
+    children?: React.ReactNode;
+    onToggle?: (active: boolean) => void;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};
+export type TriggerProps = {
+    children?: ((attributes: {
+        "aria-expanded": boolean;
+        "aria-controls": string;
+        id: string;
+        onClick: () => void;
+    }, props: {
+        active: boolean;
+    }) => React.ReactNode) | React.ReactNode;
+};
+export type ContentProps = {
+    children?: React.ReactNode;
+};
+export type ControlledProps = BaseProps & {
+    active: boolean;
+    defaultActive?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    active?: never;
+    defaultActive?: boolean;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export type ContextProps = Pick<BaseProps, "iconSize" | "iconPosition"> & {
+    triggerId: string;
+    contentId: string;
+    active: boolean;
+    onToggle?: (active: boolean) => void;
+};

package/dist/components/Accordion/AccordionControlled.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import useElementId from "../../hooks/useElementId.js";
+import AccordionContext from "./Accordion.context.js";
+const AccordionControlled = (props) => {
+    const { children, onToggle, active, iconPosition, iconSize, className, attributes } = props;
+    const rootClassNames = classNames(className);
+    const id = useElementId();
+    const value = React.useMemo(() => ({
+        triggerId: `${id}-trigger`,
+        contentId: `${id}-content`,
+        active,
+        onToggle,
+        iconPosition,
+        iconSize,
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [active]);
+    return (_jsx("div", { ...attributes, className: rootClassNames, children: _jsx(AccordionContext.Provider, { value: value, children: children }) }));
+};
+export default AccordionControlled;

package/dist/components/Accordion/AccordionTrigger.js

@@ -0,0 +1,24 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import Actionable from "../Actionable/index.js";
+import View from "../View/index.js";
+import Icon from "../Icon/index.js";
+import IconChevronDown from "../../icons/ChevronDown.js";
+import AccordionContext from "./Accordion.context.js";
+import s from "./Accordion.module.css";
+const AccordionTrigger = (props) => {
+    const { children } = props;
+    const { active, onToggle, triggerId, contentId, iconPosition = "end", iconSize, } = React.useContext(AccordionContext);
+    const iconClassNames = classNames(s.icon, active && s["icon--active"]);
+    const handleClick = () => {
+        onToggle?.(!active);
+    };
+    const attributes = { "aria-expanded": active, "aria-controls": contentId, id: triggerId };
+    if (typeof children === "function") {
+        return _jsx(_Fragment, { children: children({ ...attributes, onClick: handleClick }, { active }) });
+    }
+    return (_jsx(Actionable, { onClick: handleClick, fullWidth: true, attributes: attributes, children: _jsxs(View, { gap: 2, direction: iconPosition === "start" ? "row-reverse" : "row", align: "center", children: [_jsx(View.Item, { grow: true, children: children }), _jsx(Icon, { size: iconSize || 4, svg: IconChevronDown, className: iconClassNames })] }) }));
+};
+export default AccordionTrigger;

package/dist/components/Accordion/AccordionUncontrolled.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import AccordionControlled from "./AccordionControlled.js";
+const AccordionUncontrolled = (props) => {
+    const { defaultActive, onToggle, ...controlledProps } = props;
+    const [active, setActive] = React.useState(defaultActive || false);
+    const handleToggle = (active) => {
+        setActive(active);
+        onToggle?.(active);
+    };
+    return _jsx(AccordionControlled, { ...controlledProps, onToggle: handleToggle, active: active });
+};
+export default AccordionUncontrolled;

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

@@ -0,0 +1,10 @@
+import type React from "react";
+import type { ViewProps } from "../View";
+import type * as G from "../../types/global";
+export type Props = Pick<ViewProps, "paddingBlock" | "paddingInline" | "padding"> & {
+    position?: "top" | "bottom";
+    elevated?: boolean;
+    children?: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div">;
+};

package/dist/components/Actionable/Actionable.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { classNames } from "../../utilities/helpers.js";
+import * as keys from "../../constants/keys.js";
+import s from "./Actionable.module.css";
+const Actionable = forwardRef((props, ref) => {
+    const { children, href, onClick, type, disabled, insetFocus, borderRadius, as, fullWidth, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], fullWidth && s["--full-width"]);
+    const rootAttributes = { ...attributes };
+    const hasClickHandler = onClick || attributes?.onClick;
+    const hasFocusHandler = attributes?.onFocus || attributes?.onBlur;
+    const isLink = Boolean(href || attributes?.href);
+    const isButton = Boolean(hasClickHandler || hasFocusHandler || type);
+    const renderedAsButton = !isLink && isButton && (!as || as === "button");
+    let TagName;
+    if (isLink) {
+        TagName = "a";
+        rootAttributes.href = disabled ? undefined : href || attributes?.href;
+    }
+    else if (renderedAsButton) {
+        TagName = "button";
+        rootAttributes.type = type || attributes?.type || "button";
+        rootAttributes.disabled = disabled || attributes?.disabled;
+    }
+    else if (isButton) {
+        const isFocusable = as === "label";
+        const simulateButton = !isFocusable || hasClickHandler || hasFocusHandler;
+        TagName = as || "span";
+        rootAttributes.role = simulateButton ? "button" : undefined;
+        rootAttributes.tabIndex = simulateButton ? 0 : undefined;
+    }
+    else {
+        TagName = as || "span";
+    }
+    const handlePress = (event) => {
+        if (disabled)
+            return;
+        onClick?.(event);
+        attributes?.onClick?.(event);
+    };
+    const handleKeyDown = (event) => {
+        const isSpace = event.key === keys.SPACE;
+        const isEnter = event.key === keys.ENTER;
+        if (!isSpace && !isEnter)
+            return;
+        if (rootAttributes.role !== "button")
+            return;
+        event.preventDefault();
+        handlePress(event);
+    };
+    return (_jsx(TagName, { ref: ref, ...rootAttributes, className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: children }));
+});
+export default Actionable;

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

@@ -0,0 +1,18 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    children?: React.ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    href?: string;
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    disabled?: boolean;
+    fullWidth?: boolean;
+    insetFocus?: boolean;
+    borderRadius?: "inherit";
+    as?: keyof JSX.IntrinsicElements;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"button"> & Omit<JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
+        ref?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
+    };
+};
+export type Ref = React.Ref<HTMLButtonElement | HTMLAnchorElement>;