@atom-learning/components 11.6.0 → 12.0.0-beta.1

package/dist/codemods/bin.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+import { n as v12_colour_props_exports } from "./shared/v12-colour-props.js";
+import path from "node:path";
+import { parseArgs } from "node:util";
+import { Project } from "ts-morph";
+//#region ../code-mods/src/bin.ts
+var mods = { "v12-colour-props": v12_colour_props_exports };
+var usage = `Usage: atom-components-codemod <name> <glob…> [--dry]
+
+Codemods: ${Object.keys(mods).join(", ")}
+
+  atom-components-codemod v12-colour-props 'src/**/*.tsx'`;
+var { positionals, values } = parseArgs({
+	allowPositionals: true,
+	options: { dry: { type: "boolean" } }
+});
+var [name, ...globs] = positionals;
+var mod = mods[name];
+if (!mod || !globs.length) {
+	console.error(usage);
+	process.exit(1);
+}
+var project = new Project({ skipAddingFilesFromTsConfig: true });
+var files = project.addSourceFilesAtPaths([...globs, "!**/node_modules/**"]);
+var changed = 0;
+for (const file of files) if (await mod.transform(file)) {
+	changed++;
+	console.log(path.relative(process.cwd(), file.getFilePath()));
+}
+if (!values.dry) await project.save();
+console.log(`${changed} of ${files.length} files ${values.dry ? "would change" : "changed"}`);
+//#endregion
+export {};

package/dist/codemods/shared/v12-colour-props.js

@@ -0,0 +1,468 @@
+import { Node, SyntaxKind } from "ts-morph";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+//#region ../code-mods/src/mods/v12-colour-props/v12-colour-props.ts
+var v12_colour_props_exports = /* @__PURE__ */ __exportAll({ transform: () => transform });
+/**
+* Moves @atom-learning/components v11 colour props to v12: `theme` and
+* `colorScheme` become `tone`, `accent`, `fill`, `appearance` or `inverse`,
+* `ColorScheme` wrappers with default values are removed, and defaults that
+* changed are written out. Anything without a safe mapping keeps its old prop
+* and gets a `TODO(ds-v12)` comment, so it fails type-checking until a person
+* resolves it. Only components imported from @atom-learning/components are
+* changed; local wrappers that forward `theme` need the same change by hand.
+*
+*   yarn code-mod --script v12-colour-props -i 'path/to/app/src/**\/*.tsx'
+*/
+var DS_MODULE = "@atom-learning/components";
+var TODO = "TODO(ds-v12)";
+var STATUSES = [
+	"success",
+	"warning",
+	"danger",
+	"info"
+];
+var BADGE_HUES = [
+	"grey",
+	"blue",
+	"pink",
+	"purple",
+	"cyan",
+	"green",
+	"magenta",
+	"red",
+	"teal",
+	"orange",
+	"yellow",
+	"lime",
+	"lapis",
+	"maroon",
+	"marsh",
+	"emerald"
+];
+var BANNER_HUES = [
+	"grey",
+	"blue",
+	"pink",
+	"purple",
+	"cyan",
+	"green",
+	"magenta",
+	"red",
+	"teal",
+	"orange",
+	"yellow",
+	"lime"
+];
+var tone = (values, rename = {}) => (v) => values.includes(v) ? [["tone", rename[v] ?? v]] : void 0;
+var drop = (values) => (v) => values.includes(v) ? [] : void 0;
+var set = (map) => (v) => map[v];
+var either = (...rules) => (v) => {
+	for (const rule of rules) {
+		const mapped = rule(v);
+		if (mapped) return mapped;
+	}
+};
+var buttonTheme = either(drop(["primary", "secondary"]), set({ neutral: [["inverse", null]] }), tone([
+	"success",
+	"warning",
+	"danger"
+]));
+var messageTheme = tone([
+	...STATUSES,
+	"neutral",
+	"error"
+], { error: "danger" });
+var badgeTheme = either(tone([...STATUSES, "neutral"]), set({ primary: [["accent", "brand"]] }), (v) => BADGE_HUES.includes(v) ? [["accent", v]] : void 0);
+var inputTheme = set({
+	white: [["fill", "surface"]],
+	grey: [["fill", "subtle"]]
+});
+var tableTheme = set({
+	primary: [["appearance", "emphasis"]],
+	primaryDark: [["appearance", "emphasis"]],
+	primaryLight: [["appearance", "inset"]],
+	light: [["appearance", "inset"]],
+	white: [["appearance", "surface"]]
+});
+var inputs = [
+	"Input",
+	"Select",
+	"Textarea",
+	"Combobox.Input",
+	"DateInput",
+	"NumberInput",
+	"SelectMenu",
+	"InputField",
+	"SelectField",
+	"TextareaField",
+	"DateField",
+	"NumberInputField",
+	"SearchInput",
+	"SearchField",
+	"PasswordField",
+	"PasswordInput",
+	"CreatePasswordField",
+	"SelectMenuField",
+	"Form"
+];
+var rules = {
+	Button: { theme: buttonTheme },
+	"BannerRegular.Button": { theme: buttonTheme },
+	"BannerSlim.Button": { theme: buttonTheme },
+	ActionIcon: { theme: either(drop(["primary", "primaryDark"]), set({ white: [["inverse", null]] }), tone([
+		"neutral",
+		"success",
+		"warning",
+		"danger"
+	])) },
+	ProgressBar: { theme: either(drop(["primary"]), tone([...STATUSES, "neutral"])) },
+	InlineMessage: {
+		theme: messageTheme,
+		defaultAttr: ["tone", "danger"]
+	},
+	SectionMessage: {
+		theme: messageTheme,
+		defaultAttr: ["tone", "info"]
+	},
+	Badge: {
+		theme: badgeTheme,
+		defaultAttr: ["tone", "info"]
+	},
+	NotificationBadge: { theme: either(drop(["primary"]), badgeTheme) },
+	BannerRegular: { colorScheme: "banner" },
+	BannerSlim: { colorScheme: "banner" },
+	"SegmentedControl.Root": {
+		theme: drop(["primary"]),
+		wrapAccent: true
+	},
+	List: { theme: drop(["primary"]) },
+	"Table.Header": { theme: tableTheme },
+	DataTable: { theme: tableTheme },
+	"DataTable.Table": { theme: tableTheme },
+	"DataTable.Head": { theme: tableTheme },
+	"DataTable.DragAndDropTable": { theme: tableTheme },
+	Slider: { theme: set({
+		light: [["appearance", "light"]],
+		tonal: [["appearance", "tonal"]]
+	}) },
+	"ToggleGroup.Root": { theme: set({
+		standard: [["appearance", "standard"]],
+		modern: [["appearance", "modern"]]
+	}) },
+	Tile: { colorScheme: "tile" },
+	TileInteractive: { colorScheme: "tile" },
+	Pagination: { colorScheme: "drop" },
+	"DataTable.Pagination": { colorScheme: "drop" },
+	"Accordion.Trigger": { colorScheme: { todo: "Accordion.Trigger colorScheme has no v12 prop yet; see the ADR component table" } },
+	...Object.fromEntries(inputs.map((name) => [name, { theme: inputTheme }]))
+};
+var isStringy = (node) => Node.isStringLiteral(node) || Node.isNoSubstitutionTemplateLiteral(node);
+var attrText = ([name, value]) => value === null ? name : `${name}="${value}"`;
+var todoComment = (message) => `/* ${TODO}: ${message} */ `;
+var getAttr = (element, name) => element.getAttributes().find((a) => Node.isJsxAttribute(a) && a.getNameNode().getText() === name);
+var literalValue = (attr) => {
+	const init = attr.getInitializer();
+	if (!init) return void 0;
+	if (Node.isStringLiteral(init)) return init.getLiteralValue();
+	if (Node.isJsxExpression(init)) {
+		const expr = init.getExpression();
+		if (expr && isStringy(expr)) return expr.getLiteralValue();
+	}
+};
+var conditionalLeaves = (attr) => {
+	const init = attr.getInitializer();
+	if (!init || !Node.isJsxExpression(init)) return void 0;
+	const leaves = [];
+	const walk = (node) => {
+		if (!node) return false;
+		if (Node.isParenthesizedExpression(node)) return walk(node.getExpression());
+		if (Node.isConditionalExpression(node)) return walk(node.getWhenTrue()) && walk(node.getWhenFalse());
+		if (isStringy(node)) return leaves.push(node) > 0;
+		return false;
+	};
+	const expr = init.getExpression();
+	return expr && Node.isConditionalExpression(expr) && walk(expr) ? leaves : void 0;
+};
+var mapProp = (attr, rule, edits) => {
+	const range = {
+		start: attr.getStart(),
+		end: attr.getEnd()
+	};
+	const flag = (message) => edits.push({
+		...range,
+		text: `${todoComment(message)}${attr.getText()}`
+	});
+	const value = literalValue(attr);
+	if (value !== void 0) {
+		const mapped = rule(value);
+		if (!mapped) return flag(`no v12 mapping for ${attr.getNameNode().getText()}="${value}"`);
+		if ("todo" in mapped) return flag(mapped.todo);
+		return edits.push({
+			...range,
+			text: mapped.map(attrText).join(" ")
+		});
+	}
+	const leaves = conditionalLeaves(attr);
+	if (leaves) {
+		const mapped = leaves.map((leaf) => rule(leaf.getLiteralValue()));
+		const names = new Set(mapped.flatMap((m) => m && !("todo" in m) && m.length === 1 ? [m[0][0]] : []));
+		if (mapped.every((m) => m && !("todo" in m) && (m.length === 0 || m.length === 1 && m[0][1] !== null)) && names.size === 1) {
+			const [name] = names;
+			const init = attr.getInitializer();
+			let text = init.getText();
+			const base = init.getStart();
+			leaves.map((leaf, i) => ({
+				leaf,
+				m: mapped[i]
+			})).sort((a, b) => b.leaf.getStart() - a.leaf.getStart()).forEach(({ leaf, m }) => {
+				const s = leaf.getStart() - base;
+				const e = leaf.getEnd() - base;
+				text = text.slice(0, s) + (m.length ? `'${m[0][1]}'` : "undefined") + text.slice(e);
+			});
+			return edits.push({
+				...range,
+				text: `${name}=${text}`
+			});
+		}
+	}
+	flag(`map ${attr.getNameNode().getText()} by hand: ${attr.getText()}`);
+};
+var colorSchemeObject = (attr) => {
+	const init = attr.getInitializer();
+	const expr = init && Node.isJsxExpression(init) ? init.getExpression() : void 0;
+	if (!expr || !Node.isObjectLiteralExpression(expr)) return void 0;
+	const entries = {};
+	for (const prop of expr.getProperties()) {
+		if (!Node.isPropertyAssignment(prop)) return void 0;
+		const value = prop.getInitializer();
+		if (!value || !isStringy(value)) return void 0;
+		entries[prop.getName().replace(/['"]/g, "")] = value.getLiteralValue();
+	}
+	return entries;
+};
+var mapColorScheme = (attr, kind, edits) => {
+	const range = {
+		start: attr.getStart(),
+		end: attr.getEnd()
+	};
+	const flag = (message) => edits.push({
+		...range,
+		text: `${todoComment(message)}${attr.getText()}`
+	});
+	if (typeof kind === "object") return flag(kind.todo);
+	if (kind === "drop") return edits.push({
+		...range,
+		text: ""
+	});
+	const entries = colorSchemeObject(attr);
+	const keys = entries ? Object.keys(entries) : [];
+	if (!entries || keys.length !== 1 || keys[0] !== "base") return flag(`map colorScheme by hand: ${attr.getText()}`);
+	if (kind === "tile") return entries.base === "grey2" ? edits.push({
+		...range,
+		text: "fill=\"inset\""
+	}) : flag(`no v12 fill for colorScheme base '${entries.base}'`);
+	const hue = entries.base.replace(/\d+$/, "");
+	const accent = hue === "primary" ? "brand" : hue;
+	return accent === "brand" || BANNER_HUES.includes(accent) ? edits.push({
+		...range,
+		text: `accent="${accent}"`
+	}) : flag(`'${hue}' isn't a Banner accent`);
+};
+var messageFills = {
+	"bg-white": "surface",
+	"bg-blue-200": "muted",
+	"bg-primary-200": "muted"
+};
+var mapMessageFill = (element, edits) => {
+	const className = getAttr(element, "className");
+	const value = className && literalValue(className);
+	if (!className || value === void 0) return;
+	const classes = value.split(/\s+/).filter(Boolean);
+	const fill = classes.map((c) => messageFills[c]).find(Boolean);
+	if (!fill) return;
+	const rest = classes.filter((c) => !messageFills[c]).join(" ");
+	edits.push({
+		start: className.getStart(),
+		end: className.getEnd(),
+		text: rest ? `fill="${fill}" className="${rest}"` : `fill="${fill}"`
+	});
+};
+/** Canonical DS names for each locally imported identifier */
+var dsImports = (file) => {
+	const names = /* @__PURE__ */ new Map();
+	for (const decl of file.getImportDeclarations()) {
+		if (decl.getModuleSpecifierValue() !== DS_MODULE) continue;
+		for (const named of decl.getNamedImports()) names.set(named.getAliasNode()?.getText() ?? named.getName(), named.getName());
+	}
+	return names;
+};
+var canonicalName = (element, imports) => {
+	const [root, ...rest] = element.getTagNameNode().getText().split(".");
+	const imported = imports.get(root);
+	return imported ? [imported, ...rest].join(".") : void 0;
+};
+var isDefaultColorScheme = (element) => {
+	const base = getAttr(element, "base");
+	const accent = getAttr(element, "accent");
+	const baseValue = base ? literalValue(base) : "grey1";
+	const accentValue = accent ? literalValue(accent) : "primary1";
+	const others = ["interactive", "contrast"].some((name) => getAttr(element, name));
+	return baseValue === "grey1" && ["primary1", "blue1"].includes(accentValue ?? "") && !others;
+};
+var mapColorSchemeElement = (element, edits) => {
+	if (!isDefaultColorScheme(element)) {
+		const tag = element.getTagNameNode();
+		return edits.push({
+			start: tag.getEnd(),
+			end: tag.getEnd(),
+			text: ` ${todoComment("replace ColorScheme with <Theme accent> or a palette").trim()}`
+		});
+	}
+	const parent = element.getParent();
+	if (getAttr(element, "asChild") && Node.isJsxOpeningElement(element) && Node.isJsxElement(parent)) {
+		edits.push({
+			start: element.getStart(),
+			end: element.getEnd(),
+			text: ""
+		});
+		const closing = parent.getClosingElement();
+		edits.push({
+			start: closing.getStart(),
+			end: closing.getEnd(),
+			text: ""
+		});
+		return;
+	}
+	for (const name of [
+		"base",
+		"accent",
+		"asChild"
+	]) {
+		const attr = getAttr(element, name);
+		if (attr) edits.push({
+			start: attr.getStart(),
+			end: attr.getEnd(),
+			text: ""
+		});
+	}
+	const tag = element.getTagNameNode();
+	edits.push({
+		start: tag.getStart(),
+		end: tag.getEnd(),
+		text: "div"
+	});
+	if (Node.isJsxOpeningElement(element) && Node.isJsxElement(parent)) {
+		const closingTag = parent.getClosingElement().getTagNameNode();
+		edits.push({
+			start: closingTag.getStart(),
+			end: closingTag.getEnd(),
+			text: "div"
+		});
+	}
+};
+var transform = async (file) => {
+	const imports = dsImports(file);
+	if (!imports.size) return void 0;
+	const edits = [];
+	let needsTheme = false;
+	const elements = [...file.getDescendantsOfKind(SyntaxKind.JsxOpeningElement), ...file.getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)];
+	for (const element of elements) {
+		const name = canonicalName(element, imports);
+		if (!name) continue;
+		if (name === "ColorScheme") {
+			mapColorSchemeElement(element, edits);
+			continue;
+		}
+		const rule = rules[name];
+		const theme = getAttr(element, "theme");
+		const colorScheme = getAttr(element, "colorScheme");
+		if (!rule) {
+			for (const attr of [theme, colorScheme]) if (attr) edits.push({
+				start: attr.getStart(),
+				end: attr.getEnd(),
+				text: `${todoComment(`${name} has no v12 colour prop; remove or replace`)}${attr.getText()}`
+			});
+			continue;
+		}
+		if (theme && rule.wrapAccent) {
+			const value = literalValue(theme);
+			const mapped = value !== void 0 ? rule.theme?.(value) : void 0;
+			const parent = element.getParent();
+			const whole = Node.isJsxOpeningElement(element) && Node.isJsxElement(parent) ? parent : element;
+			if (mapped && Array.isArray(mapped) && mapped.length === 0) edits.push({
+				start: theme.getStart(),
+				end: theme.getEnd(),
+				text: ""
+			});
+			else if (value && BADGE_HUES.includes(value)) {
+				edits.push({
+					start: theme.getStart(),
+					end: theme.getEnd(),
+					text: ""
+				});
+				edits.push({
+					start: whole.getStart(),
+					end: whole.getStart(),
+					text: `<Theme accent="${value}">`
+				});
+				edits.push({
+					start: whole.getEnd(),
+					end: whole.getEnd(),
+					text: "</Theme>"
+				});
+				needsTheme = true;
+			} else mapProp(theme, () => void 0, edits);
+		} else if (theme && rule.theme) mapProp(theme, rule.theme, edits);
+		else if (theme) mapProp(theme, () => void 0, edits);
+		if (colorScheme) if (rule.colorScheme) mapColorScheme(colorScheme, rule.colorScheme, edits);
+		else mapProp(colorScheme, () => void 0, edits);
+		if (name === "Badge" || name === "NotificationBadge") {
+			const emphasis = getAttr(element, "emphasis");
+			for (const literal of emphasis?.getDescendants() ?? []) if (isStringy(literal) && literal.getLiteralValue() === "white") {
+				const quote = literal.getText()[0];
+				edits.push({
+					start: literal.getStart(),
+					end: literal.getEnd(),
+					text: `${quote}minimal${quote}`
+				});
+			}
+		}
+		if (name === "SectionMessage" && !getAttr(element, "fill")) mapMessageFill(element, edits);
+		if (rule.defaultAttr && !theme && !getAttr(element, "tone") && !getAttr(element, "accent")) {
+			const tag = element.getTagNameNode();
+			edits.push({
+				start: tag.getEnd(),
+				end: tag.getEnd(),
+				text: ` ${attrText(rule.defaultAttr)}`
+			});
+		}
+	}
+	if (!edits.length) return void 0;
+	let text = file.getFullText();
+	for (const edit of edits.sort((a, b) => b.start - a.start || b.end - a.end)) text = `${text.slice(0, edit.start)}${edit.text}${text.slice(edit.end)}`;
+	file.replaceWithText(text);
+	const dsImport = file.getImportDeclaration((d) => d.getModuleSpecifierValue() === DS_MODULE);
+	if (dsImport) {
+		if (needsTheme && !dsImports(file).has("Theme")) dsImport.addNamedImport("Theme");
+		for (const named of dsImport.getNamedImports()) {
+			if (named.getName() !== "ColorScheme") continue;
+			const local = named.getAliasNode()?.getText() ?? named.getName();
+			if (!file.getDescendantsOfKind(SyntaxKind.Identifier).some((id) => id.getText() === local && !Node.isImportSpecifier(id.getParent()))) named.remove();
+		}
+		if (!dsImport.getNamedImports().length && !dsImport.getDefaultImport() && !dsImport.getNamespaceImport()) dsImport.remove();
+	}
+	return true;
+};
+//#endregion
+export { v12_colour_props_exports as n, transform as t };

package/dist/codemods/v12-colour-props.js

@@ -0,0 +1,2 @@
+import { t as transform } from "./shared/v12-colour-props.js";
+export { transform };

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

@@ -6,10 +6,8 @@ type AccordionProps = React.ComponentProps<typeof Root> & {
 export declare const Accordion: (({ ref, type, className, children, ...rest }: AccordionProps) => React.JSX.Element) & {
     Item: import("../..").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionItemProps & React.RefAttributes<HTMLDivElement>>, unknown>;
     Content: ({ children, className, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>>, unknown>>) => React.JSX.Element;
-    Trigger: ({ children, colorScheme, asChild, arrowPosition, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
+    Trigger: ({ children, asChild, arrowPosition, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
         arrowPosition?: "left" | "right" | undefined;
-    }>> & {
-        colorScheme?: import("../..").TcolorScheme;
-    }) => React.JSX.Element;
+    }>>) => React.JSX.Element;
 };
 export {};

package/dist/components/accordion/AccordionContent.js

@@ -7,7 +7,6 @@ import { jsx } from "react/jsx-runtime";
 var StyledContent = styled(Content, { base: [
 	"border-none",
 	"w-full",
-	"bg-(--base-1)",
 	"overflow-hidden",
 	"data-[state=open]:rounded-b-sm",
 	"data-[state=open]:rounded-t-none",

package/dist/components/accordion/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","names":[],"sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'border-none',\n    'w-full',\n    'bg-(--base-1)',\n    'overflow-hidden',\n    'data-[state=open]:rounded-b-sm',\n    'data-[state=open]:rounded-t-none',\n    'motion-safe:data-[state=open]:animate-accordion-open',\n    'motion-safe:data-[state=closed]:animate-accordion-close'\n  ]\n})\n\nexport const AccordionContent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledContent>) => (\n  <StyledContent {...rest}>\n    <CSSWrapper className={className}>{children}</CSSWrapper>\n  </StyledContent>\n)\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OAAO,SAAS,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,oBAAoB,EAC/B,UACA,WACA,GAAG,WAEH,oBAAC,eAAD;CAAe,GAAI;WACjB,oBAAC,YAAD;EAAuB;EAAY;CAAqB,CAAA;AAC3C,CAAA"}
+{"version":3,"file":"AccordionContent.js","names":[],"sources":["../../../src/components/accordion/AccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-accordion'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'border-none',\n    'w-full',\n    'overflow-hidden',\n    'data-[state=open]:rounded-b-sm',\n    'data-[state=open]:rounded-t-none',\n    'motion-safe:data-[state=open]:animate-accordion-open',\n    'motion-safe:data-[state=closed]:animate-accordion-close'\n  ]\n})\n\nexport const AccordionContent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledContent>) => (\n  <StyledContent {...rest}>\n    <CSSWrapper className={className}>{children}</CSSWrapper>\n  </StyledContent>\n)\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OAAO,SAAS,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,oBAAoB,EAC/B,UACA,WACA,GAAG,WAEH,oBAAC,eAAD;CAAe,GAAI;WACjB,oBAAC,YAAD;EAAuB;EAAY;CAAqB,CAAA;AAC3C,CAAA"}

package/dist/components/accordion/AccordionTrigger.d.ts

@@ -1,9 +1,6 @@
 import * as React from 'react';
-import { type TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 declare const StyledTrigger: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
     arrowPosition?: "left" | "right" | undefined;
 }>;
-export declare const AccordionTrigger: ({ children, colorScheme, asChild, arrowPosition, ...rest }: React.ComponentProps<typeof StyledTrigger> & {
-    colorScheme?: TcolorScheme;
-}) => React.JSX.Element;
+export declare const AccordionTrigger: ({ children, asChild, arrowPosition, ...rest }: React.ComponentProps<typeof StyledTrigger>) => React.JSX.Element;
 export {};

package/dist/components/accordion/AccordionTrigger.js

@@ -1,5 +1,4 @@
 import { styled } from "../../styled.js";
-import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import { Icon } from "../icon/Icon.js";
 import { Trigger } from "@radix-ui/react-accordion";
 import "react";
@@ -22,18 +21,19 @@ var StyledTrigger = styled(Trigger, {
 		"justify-between",
 		"items-center",
 		"cursor-pointer",
-		"bg-(--interactive-2)",
-		"text-(--interactive-foreground)",
+		"bg-inset",
+		"text-default",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30",
-		"not-disabled:active:bg-(--interactive-3)",
-		"not-disabled:focus-visible:bg-(--interactive-3)",
-		"not-disabled:focus-visible:outline-none",
+		"not-disabled:active:bg-surface-hover",
+		"not-disabled:focus-visible:bg-surface-hover",
+		"not-disabled:focus-visible:outline-2",
+		"not-disabled:focus-visible:outline-offset-2",
+		"not-disabled:focus-visible:outline-solid",
+		"not-disabled:focus-visible:outline-focus",
 		"not-disabled:focus-visible:relative",
-		"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-		"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
 		"not-disabled:focus-visible:z-1",
-		"not-disabled:hover:bg-(--interactive-3)",
+		"not-disabled:hover:bg-surface-hover",
 		"data-[state=open]:rounded-b-none",
 		"data-[state=open]:rounded-t-sm",
 		"data-[state=closed]:rounded-sm"
@@ -47,20 +47,14 @@ var StyledTrigger = styled(Trigger, {
 		right: []
 	} }
 });
-var AccordionTrigger = ({ children, colorScheme = {}, asChild, arrowPosition = "right", ...rest }) => /* @__PURE__ */ jsx(ColorScheme, {
-	asChild: true,
-	accent: "grey1",
-	interactive: "loContrast",
-	...colorScheme,
-	children: /* @__PURE__ */ jsx(StyledTrigger, {
-		asChild,
-		arrowPosition,
-		...rest,
-		children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx(RotatingIcon, {
-			is: ChevronDown,
-			"data-testid": "accordion-chevron"
-		})] })
-	})
+var AccordionTrigger = ({ children, asChild, arrowPosition = "right", ...rest }) => /* @__PURE__ */ jsx(StyledTrigger, {
+	asChild,
+	arrowPosition,
+	...rest,
+	children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx(RotatingIcon, {
+		is: ChevronDown,
+		"data-testid": "accordion-chevron"
+	})] })
 });
 //#endregion
 export { AccordionTrigger };

package/dist/components/accordion/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionTrigger.js","names":[],"sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport * as React from 'react'\n\nimport {\n  ColorScheme,\n  type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\n\nconst RotatingIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180',\n    '[[data-state=closed]>&]:rotate-0'\n  ]\n})\n\nconst StyledTrigger = styled(Trigger, {\n  base: [\n    'border-none',\n    'py-3',\n    'px-4',\n    'w-full',\n    'flex',\n    'justify-between',\n    'items-center',\n    'cursor-pointer',\n    'bg-(--interactive-2)',\n    'text-(--interactive-foreground)',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--interactive-3)',\n    'not-disabled:focus-visible:bg-(--interactive-3)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--interactive-3)',\n    'data-[state=open]:rounded-b-none',\n    'data-[state=open]:rounded-t-sm',\n    'data-[state=closed]:rounded-sm'\n  ],\n  variants: {\n    arrowPosition: {\n      left: ['flex-row-reverse', 'gap-2', 'justify-end'],\n      right: []\n    }\n  }\n})\n\nexport const AccordionTrigger = ({\n  children,\n  colorScheme = {},\n  asChild,\n  arrowPosition = 'right',\n  ...rest\n}: React.ComponentProps<typeof StyledTrigger> & {\n  colorScheme?: TcolorScheme\n}) => (\n  <ColorScheme asChild accent=\"grey1\" interactive=\"loContrast\" {...colorScheme}>\n    <StyledTrigger asChild={asChild} arrowPosition={arrowPosition} {...rest}>\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {children}\n          <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n        </>\n      )}\n    </StyledTrigger>\n  </ColorScheme>\n)\n"],"mappings":";;;;;;;;AAWA,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,eAAe;EACb,MAAM;GAAC;GAAoB;GAAS;EAAa;EACjD,OAAO,CAAC;CACV,EACF;AACF,CAAC;AAED,IAAa,oBAAoB,EAC/B,UACA,cAAc,CAAC,GACf,SACA,gBAAgB,SAChB,GAAG,WAIH,oBAAC,aAAD;CAAa,SAAA;CAAQ,QAAO;CAAQ,aAAY;CAAa,GAAI;WAC/D,oBAAC,eAAD;EAAwB;EAAwB;EAAe,GAAI;YAChE,UACC,WAEA,qBAAA,UAAA,EAAA,UAAA,CACG,UACD,oBAAC,cAAD;GAAc,IAAI;GAAa,eAAY;EAAqB,CAAA,CAChE,EAAA,CAAA;CAES,CAAA;AACJ,CAAA"}
+{"version":3,"file":"AccordionTrigger.js","names":[],"sources":["../../../src/components/accordion/AccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-accordion'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\n\nconst RotatingIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180',\n    '[[data-state=closed]>&]:rotate-0'\n  ]\n})\n\nconst StyledTrigger = styled(Trigger, {\n  base: [\n    'border-none',\n    'py-3',\n    'px-4',\n    'w-full',\n    'flex',\n    'justify-between',\n    'items-center',\n    'cursor-pointer',\n    'bg-inset',\n    'text-default',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-surface-hover',\n    'not-disabled:focus-visible:bg-surface-hover',\n    'not-disabled:focus-visible:outline-2',\n    'not-disabled:focus-visible:outline-offset-2',\n    'not-disabled:focus-visible:outline-solid',\n    'not-disabled:focus-visible:outline-focus',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-surface-hover',\n    'data-[state=open]:rounded-b-none',\n    'data-[state=open]:rounded-t-sm',\n    'data-[state=closed]:rounded-sm'\n  ],\n  variants: {\n    arrowPosition: {\n      left: ['flex-row-reverse', 'gap-2', 'justify-end'],\n      right: []\n    }\n  }\n})\n\nexport const AccordionTrigger = ({\n  children,\n  asChild,\n  arrowPosition = 'right',\n  ...rest\n}: React.ComponentProps<typeof StyledTrigger>) => (\n  <StyledTrigger asChild={asChild} arrowPosition={arrowPosition} {...rest}>\n    {asChild ? (\n      children\n    ) : (\n      <>\n        {children}\n        <RotatingIcon is={ChevronDown} data-testid=\"accordion-chevron\" />\n      </>\n    )}\n  </StyledTrigger>\n)\n"],"mappings":";;;;;;;AAOA,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,eAAe;EACb,MAAM;GAAC;GAAoB;GAAS;EAAa;EACjD,OAAO,CAAC;CACV,EACF;AACF,CAAC;AAED,IAAa,oBAAoB,EAC/B,UACA,SACA,gBAAgB,SAChB,GAAG,WAEH,oBAAC,eAAD;CAAwB;CAAwB;CAAe,GAAI;WAChE,UACC,WAEA,qBAAA,UAAA,EAAA,UAAA,CACG,UACD,oBAAC,cAAD;EAAc,IAAI;EAAa,eAAY;CAAqB,CAAA,CAChE,EAAA,CAAA;AAES,CAAA"}

package/dist/components/action-icon/ActionIcon.d.ts

@@ -1,18 +1,26 @@
 import * as React from 'react';
+import type { TColorAccent } from '../../experiments/theme/Theme';
 import type { OptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper';
 import type { Override } from '../../utilities/types';
 declare const StyledButton: import("../..").PolymorphicComponent<"button", {
-    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+    colorRole?: ("accent" | "inverse" | "neutral" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inverse" | "neutral">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 }>;
-type ActionIconProps = Override<React.ComponentProps<typeof StyledButton>, {
+type ActionIconTone = 'neutral' | Extract<TColorAccent, 'success' | 'warning' | 'danger'>;
+type ActionIconProps = Override<Omit<React.ComponentProps<typeof StyledButton>, 'colorRole'>, {
+    /**
+     * Unset inherits the accent from the nearest <Theme> or palette. Don't
+     * combine with `inverse`, which replaces the tone's colours.
+     */
+    tone?: ActionIconTone;
+    inverse?: boolean;
     as?: React.ElementType;
     children: React.ReactNode;
     href?: string;
     label: string;
     reloadDocument?: boolean;
 } & Omit<OptionalTooltipWrapperProps, 'label'>>;
-export declare const ActionIcon: ({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: ActionIconProps) => React.JSX.Element;
+export declare const ActionIcon: ({ ref, children, tone, inverse, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: ActionIconProps) => React.JSX.Element;
 export {};