@likec4/styles 1.48.0 → 1.50.0

package/dist/types/system-types.d.mts

@@ -22,140 +22,9 @@ export type Assign<T, U> = {
  * Native css properties
  * -----------------------------------------------------------------------------*/
 
-type DashedIdent = `--${string}`
-
-type StringToMultiple<T extends string> = T | `${T}, ${T}`
-
-export type PositionAreaAxis =
-  | 'left'
-  | 'center'
-  | 'right'
-  | 'x-start'
-  | 'x-end'
-  | 'span-x-start'
-  | 'span-x-end'
-  | 'x-self-start'
-  | 'x-self-end'
-  | 'span-x-self-start'
-  | 'span-x-self-end'
-  | 'span-all'
-  | 'top'
-  | 'bottom'
-  | 'span-top'
-  | 'span-bottom'
-  | 'y-start'
-  | 'y-end'
-  | 'span-y-start'
-  | 'span-y-end'
-  | 'y-self-start'
-  | 'y-self-end'
-  | 'span-y-self-start'
-  | 'span-y-self-end'
-  | 'block-start'
-  | 'block-end'
-  | 'span-block-start'
-  | 'span-block-end'
-  | 'inline-start'
-  | 'inline-end'
-  | 'span-inline-start'
-  | 'span-inline-end'
-  | 'self-block-start'
-  | 'self-block-end'
-  | 'span-self-block-start'
-  | 'span-self-block-end'
-  | 'self-inline-start'
-  | 'self-inline-end'
-  | 'span-self-inline-start'
-  | 'span-self-inline-end'
-  | 'start'
-  | 'end'
-  | 'span-start'
-  | 'span-end'
-  | 'self-start'
-  | 'self-end'
-  | 'span-self-start'
-  | 'span-self-end'
-
-type PositionTry =
-  | 'normal'
-  | 'flip-block'
-  | 'flip-inline'
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | 'block-start'
-  | 'block-end'
-  | 'inline-start'
-  | 'inline-end'
-  | DashedIdent
+type CornerShapeValue = 'round' | 'square' | 'bevel' | 'scoop' | 'notch' | 'squircle' | `superellipse(${number})`
 
 export interface ModernCssProperties {
-  /**
-   * Defines a name for the anchor element that can be referenced by positioned elements.
-   */
-  anchorName?: Globals | 'none' | DashedIdent | StringToMultiple<DashedIdent>
-
-  /**
-   * Defines the scope of anchor names within the element.
-   */
-  anchorScope?: Globals | 'none' | 'all' | DashedIdent | StringToMultiple<DashedIdent>
-
-  /**
-   * Controls how form elements size themselves.
-   */
-  fieldSizing?: Globals | 'fixed' | 'content'
-
-  /**
-   * Controls whether interpolation of size values should allow keywords.
-   */
-  interpolateSize?: Globals | 'allow-keywords' | 'numeric-only'
-
-  /**
-   * Specifies the anchor element that this positioned element should be positioned relative to.
-   */
-  positionAnchor?: Globals | 'auto' | DashedIdent
-
-  /**
-   * Specifies the area within the anchor element where this positioned element should be placed.
-   */
-  positionArea?: Globals | 'auto' | PositionAreaAxis | `${PositionAreaAxis} ${PositionAreaAxis}` | String
-
-  /**
-   * Specifies the position try options for the element.
-   */
-  positionTry?: Globals | StringToMultiple<PositionTry> | String
-
-  /**
-   * Specifies fallback position try options when the primary position fails.
-   */
-  positionTryFallback?: Globals | 'none' | StringToMultiple<PositionTry> | String
-
-  /**
-   * Specifies the order in which position try options should be attempted.
-   */
-  positionTryOrder?: Globals | 'normal' | 'most-width' | 'most-height' | 'most-block-size' | 'most-inline-size'
-
-  /**
-   * Controls when the positioned element should be visible.
-   */
-  positionVisibility?: Globals | 'always' | 'anchors-visible' | 'no-overflow'
-
-  /**
-   * Controls whether text should wrap or not.
-   */
-  textWrapMode?: Globals | 'wrap' | 'nowrap'
-
-  /**
-   * Controls trimming of spacing in text.
-   */
-  textSpacingTrim?: Globals | 'normal' | 'space-all' | 'space-first' | 'trim-start'
-
-  /**
-   * Controls the style of text wrapping.
-   */
-  textWrapStyle?: Globals | 'auto' | 'balance' | 'pretty' | 'stable'
-
   /**
    * Controls whether the entire element should be draggable instead of its contents.
    */
@@ -180,6 +49,19 @@ export interface ModernCssProperties {
    * Controls the display of text content for security purposes (e.g., password fields).
    */
   WebkitTextSecurity?: Globals | 'none' | 'circle' | 'disc' | 'square'
+
+  /**
+   * Specifies the shape of a box's corners within the area defined by the border-radius property.
+   * @experimental
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape
+   */
+  cornerShape?:
+    | Globals
+    | CornerShapeValue
+    | `${CornerShapeValue} ${CornerShapeValue}`
+    | `${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue}`
+    | `${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue} ${CornerShapeValue}`
+    | String
 }
 
 export type CssProperty = keyof PropertiesFallback

package/package.json

@@ -2,14 +2,14 @@
   "name": "@likec4/styles",
   "description": "Shared PandaCSS preset and generated styles, used in LikeC4",
   "license": "MIT",
-  "version": "1.48.0",
+  "version": "1.50.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
   "files": [
     "dist",
-    "*.mts",
-    "*.mjs",
+    "**/*.mts",
+    "**/*.mjs",
     "**/package.json",
     "!build.config.ts"
   ],
@@ -23,8 +23,6 @@
     "access": "public"
   },
   "type": "module",
-  "types": "dist/types/index.d.mts",
-  "module": "dist/types/index.mjs",
   "sideEffects": false,
   "exports": {
     ".": {
@@ -60,58 +58,55 @@
       "default": "./dist/recipes/index.mjs"
     },
     "./preset": {
-      "types": "./dist/preset.d.mts",
-      "default": "./dist/preset.mjs"
+      "sources": "./preset.ts",
+      "default": {
+        "types": "./preset/preset.d.mts",
+        "default": "./preset/preset.mjs"
+      }
     },
     "./vars": {
-      "types": "./dist/vars/index.d.mts",
-      "default": "./dist/vars/index.mjs"
+      "sources": "./vars.ts",
+      "default": {
+        "types": "./vars/vars.d.mts",
+        "default": "./vars/vars.mjs"
+      }
     },
     "./dev": {
       "types": "./dev.d.mts",
       "default": "./dev.mjs"
     }
   },
+  "dependencies": {
+    "@pandacss/types": "^1.8.2"
+  },
   "peerDependencies": {
-    "@pandacss/dev": "^1.8.1",
-    "@pandacss/types": "^1.8.1",
-    "react": "^18.x || ^19.x",
-    "react-dom": "^18.x || ^19.x",
-    "@types/react": "^18.x || ^19.x",
-    "@types/react-dom": "^18.x || ^19.x"
+    "@pandacss/dev": "^1.8.2",
+    "react": "^18.x || ^19.x"
   },
   "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
+    "@pandacss/dev": {
       "optional": true
     },
-    "@types/react": {
-      "optional": true
-    },
-    "@types/react-dom": {
+    "react": {
       "optional": true
     }
   },
   "devDependencies": {
-    "@types/node": "~22.19.7",
+    "@types/node": "~22.19.11",
     "@pandabox/panda-plugins": "^0.0.8",
     "@pandabox/utils": "^0.0.5",
     "@pandabox/unplugin": "^0.2.2",
-    "@pandacss/dev": "^1.8.1",
-    "@pandacss/types": "^1.8.1",
+    "@pandacss/dev": "^1.8.2",
     "@types/picomatch": "^4.0.2",
-    "@types/react": "19.2.9",
-    "@types/react-dom": "19.2.3",
+    "@types/react": "19.2.14",
     "postcss": "8.5.6",
-    "remeda": "^2.32.0",
+    "remeda": "^2.33.5",
     "nano-spawn": "^2.0.0",
-    "obuild": "^0.4.20",
+    "obuild": "^0.4.31",
     "typescript": "5.9.3",
+    "@likec4/style-preset": "1.50.0",
     "@likec4/devops": "1.42.0",
-    "@likec4/tsconfig": "1.48.0",
-    "@likec4/style-preset": "1.48.0"
+    "@likec4/tsconfig": "1.50.0"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -120,5 +115,7 @@
     "clean": "likec4ops clean",
     "pack": "pnpm pack",
     "lint:package": "pnpx publint ./package.tgz"
-  }
+  },
+  "types": "dist/types/index.d.mts",
+  "module": "dist/types/index.mjs"
 }

package/{dist → preset}/_chunks/libs/@radix-ui/colors.mjs

@@ -1,6 +1,4 @@
 import { t as __exportAll } from "../../rolldown-runtime.mjs";
-
-//#region ../../node_modules/.pnpm/@radix-ui+colors@3.0.0/node_modules/@radix-ui/colors/index.mjs
 var colors_exports = /* @__PURE__ */ __exportAll({
 	amber: () => amber,
 	amberA: () => amberA,
@@ -3783,6 +3781,4 @@ const whiteP3A = {
 	whiteA11: "color(display-p3 1 1 1 / 0.9)",
 	whiteA12: "color(display-p3 1 1 1 / 0.95)"
 };
-
-//#endregion
-export { colors_exports as t };
+export { grass as a, orange as c, red as d, ruby as f, yellow as g, violet as h, crimson as i, pink as l, tomato as m, blue as n, indigo as o, teal as p, colors_exports as r, lime as s, amber as t, purple as u };

package/preset/_chunks/libs/pandacss-preset-radix-colors.mjs

@@ -0,0 +1,147 @@
+import { r as colors_exports } from "./@radix-ui/colors.mjs";
+import { definePreset } from "@pandacss/dev";
+var SCALE_TAGS_REGEX = new RegExp(`(${["P3"].join("|")})|(?=[A-Z0-9])`, "g");
+function getScaleTags(fullName) {
+	return fullName.split(SCALE_TAGS_REGEX).filter(Boolean).map((x) => x.toLowerCase());
+}
+function getScalePath(tags) {
+	return tags.join(".");
+}
+function isScaleAlpha(tags) {
+	return tags.includes("a");
+}
+function isScaleDark(tags) {
+	return tags.includes("dark");
+}
+function isScaleP3(tags) {
+	return tags.includes("p3");
+}
+function getScaleName(tags) {
+	return tags[0];
+}
+function getScaleShades(value) {
+	return Object.assign({}, ...Object.values(value).map((shade, i) => ({ [++i]: shade })));
+}
+function getScales(lightPrefix) {
+	return Object.entries(colors_exports).map(([fullName, value]) => {
+		const tags = getScaleTags(fullName);
+		const dark = isScaleDark(tags);
+		if (!dark && lightPrefix) tags.splice(1, 0, "light");
+		return {
+			fullName,
+			tags,
+			name: getScaleName(tags),
+			path: getScalePath(tags),
+			dark,
+			alpha: isScaleAlpha(tags),
+			p3: isScaleP3(tags),
+			shades: getScaleShades(value)
+		};
+	});
+}
+function keysToObj(keys, value) {
+	if (keys.length === 0) return value;
+	const key = keys[0];
+	const obj = keysToObj(keys.slice(1), value);
+	return { [key]: obj };
+}
+function isObject(value) {
+	return value !== null && value !== void 0 && typeof value === "object" && !Array.isArray(value);
+}
+function mergeObjs(target, ...sources) {
+	if (!sources.length) return target;
+	const source = sources.shift();
+	if (isObject(target) && isObject(source)) for (const key in source) if (isObject(source[key])) {
+		if (!target[key]) Object.assign(target, { [key]: {} });
+		mergeObjs(target[key], source[key]);
+	} else Object.assign(target, { [key]: source[key] });
+	return mergeObjs(target, ...sources);
+}
+function findDarkScale(scale, scales) {
+	return scales.find((x) => x.name === scale.name && x.alpha === scale.alpha && x.p3 === scale.p3 && x.dark);
+}
+function findP3Scale(scale, scales) {
+	return scales.find((x) => x.name === scale.name && x.alpha === scale.alpha && x.dark === scale.dark && x.p3);
+}
+function findLightScale(scale, scales) {
+	return scales.find((x) => x.name === scale.name && x.alpha === scale.alpha && x.dark === scale.dark && x.p3 === scale.p3 && x.tags.includes("light"));
+}
+function findRelatedScales(scale, scales, enableDarkMode, enableAutoP3) {
+	const result = { current: scale };
+	if (enableDarkMode && !scale.dark && !scale.tags.includes("light")) result.dark = findDarkScale(scale, scales);
+	if (!result.dark && enableAutoP3 && !scale.p3) result.p3 = findP3Scale(scale, scales);
+	if (result.dark) result.light = scale.tags.includes("light") ? scale : findLightScale(scale, scales);
+	return result;
+}
+function buildTokenValue(shade, shadeIndex, relatedScales) {
+	if (relatedScales.dark) return {
+		base: `{colors.${relatedScales.light?.path}.${shadeIndex}}`,
+		_dark: `{colors.${relatedScales.dark.path}.${shadeIndex}}`
+	};
+	if (relatedScales.p3) return {
+		base: shade,
+		_p3: `{colors.${relatedScales.p3.path}.${shadeIndex}}`
+	};
+	return shade;
+}
+function getSemanticTokens(darkMode, autoP3, colorScales = []) {
+	let scales = getScales(darkMode);
+	if (darkMode) scales = scales.concat(getScales(false).filter((x) => !x.dark));
+	const filteredScales = scales.filter((scale) => shouldIncludeScale(scale, colorScales));
+	return mergeObjs({}, ...filteredScales.map((scale) => generateScaleTokens(scale, filteredScales, darkMode, autoP3)));
+}
+function shouldIncludeScale(scale, colorScales) {
+	if (colorScales.length === 0) return true;
+	return colorScales.some((colorScale) => {
+		return scale.path === colorScale || scale.path.startsWith(colorScale + ".");
+	});
+}
+function generateScaleTokens(scale, allScales, enableDarkMode = false, enableAutoP3 = false) {
+	const relatedScales = findRelatedScales(scale, allScales, enableDarkMode, enableAutoP3);
+	const mergedShades = mergeObjs({}, ...Object.entries(scale.shades).map(([shadeIndex, color]) => {
+		const tokenValue = buildTokenValue(color, shadeIndex, relatedScales);
+		return { [shadeIndex]: { value: tokenValue } };
+	}));
+	return keysToObj(scale.tags, mergedShades);
+}
+var name = "pandacss-preset-radix-colors";
+var DEFAULT_DARK_MODE_CONDITION = ".dark &";
+function getConditions(darkModeCondition) {
+	const conditions = {};
+	if (darkModeCondition) conditions["dark"] = darkModeCondition;
+	conditions["p3"] = "@media (color-gamut: p3)";
+	return conditions;
+}
+function normalizeDarkMode(darkModeOption) {
+	if (!darkModeOption) return { enabled: false };
+	if (typeof darkModeOption === "boolean") return {
+		enabled: true,
+		condition: DEFAULT_DARK_MODE_CONDITION
+	};
+	return {
+		enabled: darkModeOption.enabled ?? true,
+		condition: darkModeOption.condition
+	};
+}
+function validateColorScales(colorScales) {
+	if (!colorScales || colorScales.length === 0) return;
+	const scales = getScales();
+	const unmatchedScales = colorScales.filter((colorScale) => {
+		return !scales.some((scale) => scale.path === colorScale || scale.path.startsWith(colorScale + "."));
+	});
+	if (unmatchedScales.length > 0) console.warn(`[pandacss-preset-radix-colors] Color scale paths don't match any available scales: ${unmatchedScales.join(", ")}. Valid examples: "amber", "blue.dark", "gray.p3", "red.dark.a". Available base colors: ${Array.from(new Set(scales.map((s) => s.name))).join(", ")}.`);
+}
+function createPreset(options) {
+	const darkModeConfig = normalizeDarkMode(options?.darkMode);
+	validateColorScales(options?.colorScales);
+	return definePreset({
+		name,
+		conditions: { extend: getConditions(darkModeConfig.enabled ? darkModeConfig.condition : void 0) },
+		theme: { extend: { semanticTokens: { colors: getSemanticTokens(darkModeConfig.enabled, options?.autoP3, options?.colorScales) } } }
+	});
+}
+function transformScaleName(scale) {
+	return scale.split(/(Dark|P3|A)/).map((x) => x.toLowerCase()).filter(Boolean).join(".");
+}
+Object.keys(colors_exports).filter((scale) => !scale.includes("default")).map(transformScaleName);
+export { createPreset as t };

package/{dist → preset}/_chunks/libs/remeda.mjs

@@ -1,45 +1,24 @@
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/lazyDataLastImpl-BDhrIOwR.js
-function e$3(e, t, n) {
+function e$4(e, t, n) {
 	let r = (n) => e(n, ...t);
 	return n === void 0 ? r : Object.assign(r, {
 		lazy: n,
 		lazyArgs: t
 	});
 }
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/purry-DH9cw9sy.js
-function t$9(t, n, r) {
+function t$10(t, n, r) {
 	let i = t.length - n.length;
 	if (i === 0) return t(...n);
-	if (i === 1) return e$3(t, n, r);
+	if (i === 1) return e$4(t, n, r);
 	throw Error(`Wrong number of arguments`);
 }
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/capitalize-DktTi0gl.js
-function t$8(...t) {
-	return t$9(n$6, t);
-}
-const n$6 = (e) => `${e[0]?.toUpperCase() ?? ``}${e.slice(1)}`;
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/utilityEvaluators-DORpnx39.js
-const e$2 = {
-	done: !0,
-	hasNext: !1
-}, t$7 = {
+function t$9(...t) {
+	return t$10(n$6, t);
+}
+const n$6 = (e) => `${e[0]?.toUpperCase() ?? ``}${e.slice(1)}`, t$8 = {
 	done: !1,
 	hasNext: !1
-}, n$5 = () => e$2, r$1 = (e) => ({
-	hasNext: !0,
-	next: e,
-	done: !1
-});
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/pipe-jLehR9-P.js
-function t$6(e, ...t) {
+};
+function t$7(e, ...t) {
 	let a = e, o = t.map((e) => `lazy` in e ? r(e) : void 0), s = 0;
 	for (; s < t.length;) {
 		if (o[s] === void 0 || !i(a)) {
@@ -61,7 +40,7 @@ function t$6(e, ...t) {
 }
 function n$4(t, r, i) {
 	if (i.length === 0) return r.push(t), !1;
-	let a = t, o = t$7, s = !1;
+	let a = t, o = t$8, s = !1;
 	for (let [e, t] of i.entries()) {
 		let { index: c, items: l } = t;
 		if (l.push(a), o = t(a, c, l), t.index += 1, o.hasNext) {
@@ -87,30 +66,18 @@ function r(e) {
 function i(e) {
 	return typeof e == `string` || typeof e == `object` && !!e && Symbol.iterator in e;
 }
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/hasAtLeast-F1Oj_xBB.js
-function t$5(...t) {
-	return t$9(n$3, t);
+function t$6(...t) {
+	return t$10(n$3, t);
 }
 const n$3 = (e, t) => e.length >= t;
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/isString-BPlksnnG.js
-function e$1(e) {
+function e$2(e) {
 	return typeof e == `string`;
 }
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/keys-CT72t2DB.js
-function t$4(...t) {
-	return t$9(Object.keys, t);
+function t$5(...t) {
+	return t$10(Object.keys, t);
 }
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/mapKeys-CKFpUwVc.js
-function t$3(...t) {
-	return t$9(n$2, t);
+function t$4(...t) {
+	return t$10(n$2, t);
 }
 function n$2(e, t) {
 	let n = {};
@@ -120,11 +87,8 @@ function n$2(e, t) {
 	}
 	return n;
 }
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/mapToObj-8STtUbFK.js
-function t$2(...t) {
-	return t$9(n$1, t);
+function t$3(...t) {
+	return t$10(n$1, t);
 }
 function n$1(e, t) {
 	let n = {};
@@ -134,24 +98,18 @@ function n$1(e, t) {
 	}
 	return n;
 }
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/mapValues-D8ywfrE_.js
-function t$1(...t) {
-	return t$9(n, t);
+function t$2(...t) {
+	return t$10(n, t);
 }
 function n(e, t) {
 	let n = {};
 	for (let [r, i] of Object.entries(e)) n[r] = t(i, r, e);
 	return n;
 }
-
-//#endregion
-//#region ../../node_modules/.pnpm/remeda@2.32.0/node_modules/remeda/dist/prop-Cv_AVBuA.js
-function e(e, ...n) {
-	return typeof e == `string` || typeof e == `number` || typeof e == `symbol` ? (r) => t(r, e, ...n) : t(e, ...n);
+function e$1(e, ...n) {
+	return typeof e == `string` || typeof e == `number` || typeof e == `symbol` ? (r) => t$1(r, e, ...n) : t$1(e, ...n);
 }
-function t(e, ...t) {
+function t$1(e, ...t) {
 	let n = e;
 	for (let e of t) {
 		if (n == null) return;
@@ -159,6 +117,10 @@ function t(e, ...t) {
 	}
 	return n;
 }
-
-//#endregion
-export { t$4 as a, t$6 as c, t$3 as i, t$8 as l, t$1 as n, e$1 as o, t$2 as r, t$5 as s, e as t };
+new Set([
+	`-`,
+	`_`,
+	...`	.
+.\v.\f.\r. .….\xA0. . . . . . . . . . . . .\u2028.\u2029. . .　.`.split(`.`)
+]);
+export { t$5 as a, t$7 as c, t$4 as i, t$9 as l, t$2 as n, e$2 as o, t$3 as r, t$6 as s, e$1 as t };

package/preset/_chunks/rolldown-runtime.mjs

@@ -0,0 +1,11 @@
+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;
+};
+export { __exportAll as t };

package/preset/package.json

@@ -1,4 +1,4 @@
 {
-  "types": "../dist/preset.d.mts",
-  "module": "../dist/preset.mjs"
+  "types": "preset.d.mts",
+  "module": "preset.mjs"
 }