@klinking/squircle 0.1.0

package/dist/tw-merge-cfg.d.mts

@@ -0,0 +1,47 @@
+//#region src/tw-merge-cfg.d.ts
+declare const squircleMergeConfig: {
+  readonly extend: {
+    readonly classGroups: {
+      readonly squircle: readonly [{
+        readonly squircle: readonly [() => boolean];
+      }, {
+        readonly "squircle-t": readonly [() => boolean];
+      }, {
+        readonly "squircle-r": readonly [() => boolean];
+      }, {
+        readonly "squircle-b": readonly [() => boolean];
+      }, {
+        readonly "squircle-l": readonly [() => boolean];
+      }, {
+        readonly "squircle-s": readonly [() => boolean];
+      }, {
+        readonly "squircle-e": readonly [() => boolean];
+      }, {
+        readonly "squircle-tl": readonly [() => boolean];
+      }, {
+        readonly "squircle-tr": readonly [() => boolean];
+      }, {
+        readonly "squircle-br": readonly [() => boolean];
+      }, {
+        readonly "squircle-bl": readonly [() => boolean];
+      }, {
+        readonly "squircle-ss": readonly [() => boolean];
+      }, {
+        readonly "squircle-se": readonly [() => boolean];
+      }, {
+        readonly "squircle-es": readonly [() => boolean];
+      }, {
+        readonly "squircle-ee": readonly [() => boolean];
+      }];
+      readonly "squircle-amt": readonly [{
+        readonly "squircle-amt": readonly [() => boolean];
+      }];
+    };
+    readonly conflictingClassGroups: {
+      readonly squircle: readonly [...string[], "squircle-amt"];
+    };
+  };
+};
+//#endregion
+export { squircleMergeConfig };
+//# sourceMappingURL=tw-merge-cfg.d.mts.map

package/dist/tw-merge-cfg.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tw-merge-cfg.d.mts","names":[],"sources":["../src/tw-merge-cfg.ts"],"mappings":";cAkBa,mBAAA;EAAA"}

package/dist/tw-merge-cfg.mjs

@@ -0,0 +1,48 @@
+//#region src/tw-merge-cfg.ts
+const allRoundedGroups = [
+	"rounded",
+	"rounded-s",
+	"rounded-e",
+	"rounded-t",
+	"rounded-r",
+	"rounded-b",
+	"rounded-l",
+	"rounded-ss",
+	"rounded-se",
+	"rounded-es",
+	"rounded-ee",
+	"rounded-tl",
+	"rounded-tr",
+	"rounded-br",
+	"rounded-bl"
+];
+const squircleMergeConfig = { extend: {
+	classGroups: {
+		squircle: [
+			{ squircle: [() => true] },
+			{ "squircle-t": [() => true] },
+			{ "squircle-r": [() => true] },
+			{ "squircle-b": [() => true] },
+			{ "squircle-l": [() => true] },
+			{ "squircle-s": [() => true] },
+			{ "squircle-e": [() => true] },
+			{ "squircle-tl": [() => true] },
+			{ "squircle-tr": [() => true] },
+			{ "squircle-br": [() => true] },
+			{ "squircle-bl": [() => true] },
+			{ "squircle-ss": [() => true] },
+			{ "squircle-se": [() => true] },
+			{ "squircle-es": [() => true] },
+			{ "squircle-ee": [() => true] }
+		],
+		"squircle-amt": [{ "squircle-amt": [() => true] }]
+	},
+	conflictingClassGroups: {
+		squircle: [...allRoundedGroups, "squircle-amt"],
+		...Object.fromEntries(allRoundedGroups.map((g) => [g, ["squircle", "squircle-amt"]]))
+	}
+} };
+//#endregion
+export { squircleMergeConfig };
+
+//# sourceMappingURL=tw-merge-cfg.mjs.map

package/dist/tw-merge-cfg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tw-merge-cfg.mjs","names":[],"sources":["../src/tw-merge-cfg.ts"],"sourcesContent":["const allRoundedGroups: string[] = [\n  \"rounded\",\n  \"rounded-s\",\n  \"rounded-e\",\n  \"rounded-t\",\n  \"rounded-r\",\n  \"rounded-b\",\n  \"rounded-l\",\n  \"rounded-ss\",\n  \"rounded-se\",\n  \"rounded-es\",\n  \"rounded-ee\",\n  \"rounded-tl\",\n  \"rounded-tr\",\n  \"rounded-br\",\n  \"rounded-bl\",\n];\n\nexport const squircleMergeConfig = {\n  extend: {\n    classGroups: {\n      squircle: [\n        { squircle: [() => true] },\n        { \"squircle-t\": [() => true] },\n        { \"squircle-r\": [() => true] },\n        { \"squircle-b\": [() => true] },\n        { \"squircle-l\": [() => true] },\n        { \"squircle-s\": [() => true] },\n        { \"squircle-e\": [() => true] },\n        { \"squircle-tl\": [() => true] },\n        { \"squircle-tr\": [() => true] },\n        { \"squircle-br\": [() => true] },\n        { \"squircle-bl\": [() => true] },\n        { \"squircle-ss\": [() => true] },\n        { \"squircle-se\": [() => true] },\n        { \"squircle-es\": [() => true] },\n        { \"squircle-ee\": [() => true] },\n      ],\n      \"squircle-amt\": [{ \"squircle-amt\": [() => true] }],\n    },\n    conflictingClassGroups: {\n      squircle: [...allRoundedGroups, \"squircle-amt\"],\n      ...Object.fromEntries(allRoundedGroups.map((g) => [g, [\"squircle\", \"squircle-amt\"]])),\n    },\n  },\n} as const;\n"],"mappings":";AAAA,MAAM,mBAA6B;CACjC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,sBAAsB,EACjC,QAAQ;CACN,aAAa;EACX,UAAU;GACR,EAAE,UAAU,OAAO,KAAK,EAAE;GAC1B,EAAE,cAAc,OAAO,KAAK,EAAE;GAC9B,EAAE,cAAc,OAAO,KAAK,EAAE;GAC9B,EAAE,cAAc,OAAO,KAAK,EAAE;GAC9B,EAAE,cAAc,OAAO,KAAK,EAAE;GAC9B,EAAE,cAAc,OAAO,KAAK,EAAE;GAC9B,EAAE,cAAc,OAAO,KAAK,EAAE;GAC9B,EAAE,eAAe,OAAO,KAAK,EAAE;GAC/B,EAAE,eAAe,OAAO,KAAK,EAAE;GAC/B,EAAE,eAAe,OAAO,KAAK,EAAE;GAC/B,EAAE,eAAe,OAAO,KAAK,EAAE;GAC/B,EAAE,eAAe,OAAO,KAAK,EAAE;GAC/B,EAAE,eAAe,OAAO,KAAK,EAAE;GAC/B,EAAE,eAAe,OAAO,KAAK,EAAE;GAC/B,EAAE,eAAe,OAAO,KAAK,EAAE;GAChC;EACD,gBAAgB,CAAC,EAAE,gBAAgB,OAAO,KAAK,EAAE,CAAC;EACnD;CACD,wBAAwB;EACtB,UAAU,CAAC,GAAG,kBAAkB,eAAe;EAC/C,GAAG,OAAO,YAAY,iBAAiB,KAAK,MAAM,CAAC,GAAG,CAAC,YAAY,eAAe,CAAC,CAAC,CAAC;EACtF;CACF,EACF"}

package/dist/tw-plugin.d.mts

@@ -0,0 +1,15 @@
+import plugin from "tailwindcss/plugin";
+
+//#region src/tw-plugin.d.ts
+interface SquirclePluginOptions {
+  /** CSS custom property name for the superellipse amount (default: "--squircle-amt") */
+  amtVar?: string;
+  /** @plugin CSS alias for amtVar */
+  "amt-var"?: string;
+  /** Class name prefix for utilities (default: "squircle") */
+  prefix?: string;
+}
+declare const squircle: ReturnType<typeof plugin.withOptions<SquirclePluginOptions>>;
+//#endregion
+export { SquirclePluginOptions, squircle as default };
+//# sourceMappingURL=tw-plugin.d.mts.map

package/dist/tw-plugin.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tw-plugin.d.mts","names":[],"sources":["../src/tw-plugin.ts"],"mappings":";;;UASiB,qBAAA;;EAEf,MAAA;EAFoC;EAIpC,SAAA;EAJoC;EAMpC,MAAA;AAAA;AAAA,cAGI,QAAA,EAAU,UAAA,QAAkB,MAAA,CAAO,WAAA,CAAY,qBAAA"}

package/dist/tw-plugin.mjs

@@ -0,0 +1,85 @@
+import plugin from "tailwindcss/plugin";
+const DEFAULT_AMOUNT_VAR_NAME = "--squircle-amt";
+const DEFAULT_AMT_CSS = `var(${DEFAULT_AMOUNT_VAR_NAME}, 2)`;
+const getCornerShape = (varName = DEFAULT_AMOUNT_VAR_NAME) => `superellipse(var(${varName}, 2))`;
+function correctedRadius(radius, amt = DEFAULT_AMT_CSS) {
+	return `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt}))))`;
+}
+function isComment(entry) {
+	return !Array.isArray(entry);
+}
+const VARIANTS = {
+	"": ["border-radius"],
+	"$comment-physical-sides": { comment: "/* --- Per-side physical variants --- */" },
+	t: ["border-top-left-radius", "border-top-right-radius"],
+	r: ["border-top-right-radius", "border-bottom-right-radius"],
+	b: ["border-bottom-left-radius", "border-bottom-right-radius"],
+	l: ["border-top-left-radius", "border-bottom-left-radius"],
+	"$comment-logical-sides": { comment: "/* --- Per-side logical variants --- */" },
+	s: ["border-start-start-radius", "border-end-start-radius"],
+	e: ["border-start-end-radius", "border-end-end-radius"],
+	"$comment-physical-corners": { comment: "/* --- Per-corner physical variants --- */" },
+	tl: ["border-top-left-radius"],
+	tr: ["border-top-right-radius"],
+	br: ["border-bottom-right-radius"],
+	bl: ["border-bottom-left-radius"],
+	"$comment-logical-corners": { comment: "/* --- Per-corner logical variants --- */" },
+	ss: ["border-start-start-radius"],
+	se: ["border-start-end-radius"],
+	es: ["border-end-start-radius"],
+	ee: ["border-end-end-radius"]
+};
+function variantEntries() {
+	return Object.entries(VARIANTS).filter((entry) => !isComment(entry[1]));
+}
+function usesIntermediateVar(suffix) {
+	const entry = VARIANTS[suffix];
+	if (!entry || isComment(entry)) return false;
+	return suffix === "" || entry.length > 1;
+}
+//#endregion
+//#region src/tw-plugin.ts
+const squircle = plugin.withOptions((options = {}) => ({ matchUtilities, theme }) => {
+	const amtVar = options.amtVar ?? options["amt-var"] ?? "--squircle-amt";
+	const prefix = options.prefix ?? "squircle";
+	const radiusValues = theme("borderRadius");
+	const amtCss = `var(${amtVar}, 2)`;
+	const cornerShape = getCornerShape(amtVar);
+	const supportsCornerShape = "@supports (corner-shape: superellipse())";
+	matchUtilities({ [`${prefix}-amt`]: (value) => ({
+		[amtVar]: value,
+		[supportsCornerShape]: { "corner-shape": `superellipse(var(${amtVar}))` }
+	}) }, { type: "number" });
+	for (const [suffix, props] of variantEntries()) {
+		const name = suffix ? `${prefix}-${suffix}` : prefix;
+		if (usesIntermediateVar(suffix)) matchUtilities({ [name]: (value) => ({
+			...Object.fromEntries(props.map((p) => [p, value])),
+			[supportsCornerShape]: {
+				"--squircle-r": correctedRadius(value, amtCss),
+				...Object.fromEntries(props.map((p) => [p, "var(--squircle-r)"])),
+				"corner-shape": cornerShape
+			}
+		}) }, {
+			type: "length",
+			values: radiusValues
+		});
+		else {
+			const prop = props[0];
+			matchUtilities({ [name]: (value) => {
+				const result = { [prop]: value };
+				result[supportsCornerShape] = {
+					[prop]: correctedRadius(value, amtCss),
+					"corner-shape": cornerShape
+				};
+				return result;
+			} }, {
+				type: "length",
+				values: radiusValues
+			});
+		}
+	}
+});
+//#endregion
+export { squircle as default };
+
+//# sourceMappingURL=tw-plugin.mjs.map

package/dist/tw-plugin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tw-plugin.mjs","names":[],"sources":["../src/variants.ts","../src/tw-plugin.ts"],"sourcesContent":["export const DEFAULT_AMT = 2 as const;\nexport const DEFAULT_AMOUNT_VAR_NAME = \"--squircle-amt\" as const;\nexport const DEFAULT_AMT_CSS = `var(${DEFAULT_AMOUNT_VAR_NAME}, ${DEFAULT_AMT})` as const;\n\nexport const getCornerShape = (varName: string = DEFAULT_AMOUNT_VAR_NAME) =>\n  `superellipse(var(${varName}, ${DEFAULT_AMT}))` as const;\n\nexport function correctedRadius(radius: string, amt: string = DEFAULT_AMT_CSS): string {\n  return `calc(${radius} * (1 - pow(2, -0.5)) / (1 - pow(2, -1 * pow(2, -1 * ${amt}))))` as const;\n}\n\ntype SectionComment = { comment: string };\ntype VariantEntry = string[] | SectionComment;\n\nfunction isComment(entry: VariantEntry): entry is SectionComment {\n  return !Array.isArray(entry);\n}\n\nexport const VARIANTS: Record<string, VariantEntry> & Record<`$comment-${string}`, SectionComment> =\n  {\n    \"\": [\"border-radius\"],\n    \"$comment-physical-sides\": { comment: \"/* --- Per-side physical variants --- */\" },\n    t: [\"border-top-left-radius\", \"border-top-right-radius\"],\n    r: [\"border-top-right-radius\", \"border-bottom-right-radius\"],\n    b: [\"border-bottom-left-radius\", \"border-bottom-right-radius\"],\n    l: [\"border-top-left-radius\", \"border-bottom-left-radius\"],\n    \"$comment-logical-sides\": { comment: \"/* --- Per-side logical variants --- */\" },\n    s: [\"border-start-start-radius\", \"border-end-start-radius\"],\n    e: [\"border-start-end-radius\", \"border-end-end-radius\"],\n    \"$comment-physical-corners\": { comment: \"/* --- Per-corner physical variants --- */\" },\n    tl: [\"border-top-left-radius\"],\n    tr: [\"border-top-right-radius\"],\n    br: [\"border-bottom-right-radius\"],\n    bl: [\"border-bottom-left-radius\"],\n    \"$comment-logical-corners\": { comment: \"/* --- Per-corner logical variants --- */\" },\n    ss: [\"border-start-start-radius\"],\n    se: [\"border-start-end-radius\"],\n    es: [\"border-end-start-radius\"],\n    ee: [\"border-end-end-radius\"],\n  };\n\nexport function variantEntries(): [string, string[]][] {\n  return Object.entries(VARIANTS).filter(\n    (entry): entry is [string, string[]] => !isComment(entry[1]),\n  );\n}\n\nexport function usesIntermediateVar(suffix: string): boolean {\n  const entry = VARIANTS[suffix];\n  if (!entry || isComment(entry)) return false;\n  return suffix === \"\" || entry.length > 1;\n}\n\nexport { isComment };\nexport type { SectionComment, VariantEntry };\n","import plugin from \"tailwindcss/plugin\";\nimport {\n  DEFAULT_AMOUNT_VAR_NAME,\n  correctedRadius,\n  getCornerShape,\n  usesIntermediateVar,\n  variantEntries,\n} from \"./variants\";\n\nexport interface SquirclePluginOptions {\n  /** CSS custom property name for the superellipse amount (default: \"--squircle-amt\") */\n  amtVar?: string;\n  /** @plugin CSS alias for amtVar */\n  \"amt-var\"?: string;\n  /** Class name prefix for utilities (default: \"squircle\") */\n  prefix?: string;\n}\n\nconst squircle: ReturnType<typeof plugin.withOptions<SquirclePluginOptions>> =\n  plugin.withOptions<SquirclePluginOptions>((options = {}) =>\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    ({ matchUtilities, theme }) => {\n    const amtVar = options.amtVar ?? options[\"amt-var\"] ?? DEFAULT_AMOUNT_VAR_NAME;\n    const prefix = options.prefix ?? \"squircle\";\n    const radiusValues = theme(\"borderRadius\");\n\n    const amtCss = `var(${amtVar}, 2)`;\n    const cornerShape = getCornerShape(amtVar);\n    const supportsCornerShape: string = \"@supports (corner-shape: superellipse())\";\n\n    matchUtilities(\n      {\n        [`${prefix}-amt`]: (value: string) => ({\n          [amtVar]: value,\n          [supportsCornerShape]: {\n            \"corner-shape\": `superellipse(var(${amtVar}))`,\n          },\n        }),\n      },\n      { type: \"number\" },\n    );\n\n    for (const [suffix, props] of variantEntries()) {\n      const name = suffix ? `${prefix}-${suffix}` : prefix;\n\n      if (usesIntermediateVar(suffix)) {\n        matchUtilities(\n          {\n            [name]: (value: string) => ({\n              ...Object.fromEntries(props.map((p) => [p, value])),\n              [supportsCornerShape]: {\n                \"--squircle-r\": correctedRadius(value, amtCss),\n                ...Object.fromEntries(props.map((p) => [p, \"var(--squircle-r)\"])),\n                \"corner-shape\": cornerShape,\n              },\n            }),\n          },\n          { type: \"length\", values: radiusValues },\n        );\n      } else {\n        const prop = props[0]!;\n        matchUtilities(\n          {\n            [name]: (value: string) => {\n              const result: Record<string, string | Record<string, string>> = {\n                [prop]: value,\n              };\n              result[supportsCornerShape] = {\n                [prop]: correctedRadius(value, amtCss),\n                \"corner-shape\": cornerShape,\n              };\n              return result;\n            },\n          },\n          { type: \"length\", values: radiusValues },\n        );\n      }\n    }\n  });\n\nexport default squircle;\n"],"mappings":";AACA,MAAa,0BAA0B;AACvC,MAAa,kBAAkB,OAAO,wBAAwB;AAE9D,MAAa,kBAAkB,UAAkB,4BAC/C,oBAAoB,QAAQ;AAE9B,SAAgB,gBAAgB,QAAgB,MAAc,iBAAyB;AACrF,QAAO,QAAQ,OAAO,uDAAuD,IAAI;;AAMnF,SAAS,UAAU,OAA8C;AAC/D,QAAO,CAAC,MAAM,QAAQ,MAAM;;AAG9B,MAAa,WACX;CACE,IAAI,CAAC,gBAAgB;CACrB,2BAA2B,EAAE,SAAS,4CAA4C;CAClF,GAAG,CAAC,0BAA0B,0BAA0B;CACxD,GAAG,CAAC,2BAA2B,6BAA6B;CAC5D,GAAG,CAAC,6BAA6B,6BAA6B;CAC9D,GAAG,CAAC,0BAA0B,4BAA4B;CAC1D,0BAA0B,EAAE,SAAS,2CAA2C;CAChF,GAAG,CAAC,6BAA6B,0BAA0B;CAC3D,GAAG,CAAC,2BAA2B,wBAAwB;CACvD,6BAA6B,EAAE,SAAS,8CAA8C;CACtF,IAAI,CAAC,yBAAyB;CAC9B,IAAI,CAAC,0BAA0B;CAC/B,IAAI,CAAC,6BAA6B;CAClC,IAAI,CAAC,4BAA4B;CACjC,4BAA4B,EAAE,SAAS,6CAA6C;CACpF,IAAI,CAAC,4BAA4B;CACjC,IAAI,CAAC,0BAA0B;CAC/B,IAAI,CAAC,0BAA0B;CAC/B,IAAI,CAAC,wBAAwB;CAC9B;AAEH,SAAgB,iBAAuC;AACrD,QAAO,OAAO,QAAQ,SAAS,CAAC,QAC7B,UAAuC,CAAC,UAAU,MAAM,GAAG,CAC7D;;AAGH,SAAgB,oBAAoB,QAAyB;CAC3D,MAAM,QAAQ,SAAS;AACvB,KAAI,CAAC,SAAS,UAAU,MAAM,CAAE,QAAO;AACvC,QAAO,WAAW,MAAM,MAAM,SAAS;;;;AChCzC,MAAM,WACJ,OAAO,aAAoC,UAAU,EAAE,MAEpD,EAAE,gBAAgB,YAAY;CAC/B,MAAM,SAAS,QAAQ,UAAU,QAAQ,cAAA;CACzC,MAAM,SAAS,QAAQ,UAAU;CACjC,MAAM,eAAe,MAAM,eAAe;CAE1C,MAAM,SAAS,OAAO,OAAO;CAC7B,MAAM,cAAc,eAAe,OAAO;CAC1C,MAAM,sBAA8B;AAEpC,gBACE,GACG,GAAG,OAAO,SAAS,WAAmB;GACpC,SAAS;GACT,sBAAsB,EACrB,gBAAgB,oBAAoB,OAAO,KAC5C;EACF,GACF,EACD,EAAE,MAAM,UAAU,CACnB;AAED,MAAK,MAAM,CAAC,QAAQ,UAAU,gBAAgB,EAAE;EAC9C,MAAM,OAAO,SAAS,GAAG,OAAO,GAAG,WAAW;AAE9C,MAAI,oBAAoB,OAAO,CAC7B,gBACE,GACG,QAAQ,WAAmB;GAC1B,GAAG,OAAO,YAAY,MAAM,KAAK,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC;IAClD,sBAAsB;IACrB,gBAAgB,gBAAgB,OAAO,OAAO;IAC9C,GAAG,OAAO,YAAY,MAAM,KAAK,MAAM,CAAC,GAAG,oBAAoB,CAAC,CAAC;IACjE,gBAAgB;IACjB;GACF,GACF,EACD;GAAE,MAAM;GAAU,QAAQ;GAAc,CACzC;OACI;GACL,MAAM,OAAO,MAAM;AACnB,kBACE,GACG,QAAQ,UAAkB;IACzB,MAAM,SAA0D,GAC7D,OAAO,OACT;AACD,WAAO,uBAAuB;MAC3B,OAAO,gBAAgB,OAAO,OAAO;KACtC,gBAAgB;KACjB;AACD,WAAO;MAEV,EACD;IAAE,MAAM;IAAU,QAAQ;IAAc,CACzC;;;EAGL"}

package/dist/tw-utils.css

@@ -0,0 +1,207 @@
+/* THIS FILE IS GENERATED — do not edit by hand.
+ * Source: scripts/generate-squircle-css.ts
+ * Formula: src/variants.ts
+ * Run: vp run generate:css */
+
+/* ── Squircle utilities ─────────────────────────────────────── */
+/* squircle-amt-[n] sets the superellipse amount (default 2)    */
+/* squircle-* mirrors rounded-* variants: all, t, r, b, l, s, e, tl, tr, br, bl, ss, se, es, ee */
+
+@utility squircle-amt-* {
+  --squircle-amt: --value(--squircle-amt-*, number);
+  @supports (corner-shape: superellipse()) {
+    corner-shape: superellipse(var(--squircle-amt));
+  }
+}
+
+@utility squircle-* {
+  border-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    --squircle-r: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    border-radius: var(--squircle-r);
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+/* --- Per-side physical variants --- */
+
+@utility squircle-t-* {
+  border-top-left-radius: --value(--radius-*);
+  border-top-right-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    --squircle-r: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    border-top-left-radius: var(--squircle-r);
+    border-top-right-radius: var(--squircle-r);
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+@utility squircle-r-* {
+  border-top-right-radius: --value(--radius-*);
+  border-bottom-right-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    --squircle-r: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    border-top-right-radius: var(--squircle-r);
+    border-bottom-right-radius: var(--squircle-r);
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+@utility squircle-b-* {
+  border-bottom-left-radius: --value(--radius-*);
+  border-bottom-right-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    --squircle-r: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    border-bottom-left-radius: var(--squircle-r);
+    border-bottom-right-radius: var(--squircle-r);
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+@utility squircle-l-* {
+  border-top-left-radius: --value(--radius-*);
+  border-bottom-left-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    --squircle-r: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    border-top-left-radius: var(--squircle-r);
+    border-bottom-left-radius: var(--squircle-r);
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+/* --- Per-side logical variants --- */
+
+@utility squircle-s-* {
+  border-start-start-radius: --value(--radius-*);
+  border-end-start-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    --squircle-r: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    border-start-start-radius: var(--squircle-r);
+    border-end-start-radius: var(--squircle-r);
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+@utility squircle-e-* {
+  border-start-end-radius: --value(--radius-*);
+  border-end-end-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    --squircle-r: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    border-start-end-radius: var(--squircle-r);
+    border-end-end-radius: var(--squircle-r);
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+/* --- Per-corner physical variants --- */
+
+@utility squircle-tl-* {
+  border-top-left-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    border-top-left-radius: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+@utility squircle-tr-* {
+  border-top-right-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    border-top-right-radius: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+@utility squircle-br-* {
+  border-bottom-right-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    border-bottom-right-radius: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+@utility squircle-bl-* {
+  border-bottom-left-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    border-bottom-left-radius: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+/* --- Per-corner logical variants --- */
+
+@utility squircle-ss-* {
+  border-start-start-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    border-start-start-radius: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+@utility squircle-se-* {
+  border-start-end-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    border-start-end-radius: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+@utility squircle-es-* {
+  border-end-start-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    border-end-start-radius: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}
+
+@utility squircle-ee-* {
+  border-end-end-radius: --value(--radius-*);
+  @supports (corner-shape: superellipse()) {
+    border-end-end-radius: calc(
+      --value(--radius- *) * (1 - pow(2, -0.5)) /
+        (1 - pow(2, -1 * pow(2, -1 * var(--squircle-amt, 2))))
+    );
+    corner-shape: superellipse(var(--squircle-amt, 2));
+  }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@klinking/squircle",
+  "version": "0.1.0",
+  "description": "Tailwind CSS v4 squircle (superellipse) corner utilities with visual radius correction",
+  "keywords": [
+    "border-radius",
+    "corner-shape",
+    "squircle",
+    "superellipse",
+    "tailwind-plugin",
+    "tailwindcss"
+  ],
+  "homepage": "https://dogmar.github.io/squircle",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dogmar/squircle.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    "./tw-utils.css": "./dist/tw-utils.css",
+    "./squircle-radius.css": "./dist/squircle-radius.css",
+    "./tw-merge-cfg": {
+      "types": "./dist/tw-merge-cfg.d.mts",
+      "import": "./dist/tw-merge-cfg.mjs"
+    },
+    "./tw-plugin": {
+      "types": "./dist/tw-plugin.d.mts",
+      "import": "./dist/tw-plugin.mjs"
+    }
+  },
+  "scripts": {
+    "prepublishOnly": "vp run build"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "@types/node": "^25.5.2",
+    "oxlint": "^1.58.0",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@^0.1.15",
+    "vite-plus": "catalog:",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@^0.1.15"
+  },
+  "peerDependencies": {
+    "tailwind-merge": ">=2.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwind-merge": {
+      "optional": true
+    }
+  },
+  "packageManager": "pnpm@10.33.0"
+}