@mochi-css/vanilla 2.1.0 → 3.0.1

package/dist/index.js

@@ -23,8 +23,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 //#endregion
 let clsx = require("clsx");
 clsx = __toESM(clsx);
-let react = require("react");
-react = __toESM(react);
 
 //#region src/token.ts
 /**
@@ -239,7 +237,6 @@ const propertyUnits = {
 	interestDelay: "ms",
 	interestDelayEnd: "ms",
 	interestDelayStart: "ms",
-	itemFlow: "px",
 	left: "px",
 	letterSpacing: "px",
 	lineHeight: "px",
@@ -379,12 +376,12 @@ const propertyUnits = {
 	textSizeAdjust: "%",
 	textUnderlineOffset: "px",
 	timelineTrigger: "px",
-	timelineTriggerExitRange: "px",
-	timelineTriggerExitRangeEnd: "px",
-	timelineTriggerExitRangeStart: "px",
-	timelineTriggerRange: "px",
-	timelineTriggerRangeEnd: "px",
-	timelineTriggerRangeStart: "px",
+	timelineTriggerActivationRange: "px",
+	timelineTriggerActivationRangeEnd: "px",
+	timelineTriggerActivationRangeStart: "px",
+	timelineTriggerActiveRange: "px",
+	timelineTriggerActiveRangeEnd: "px",
+	timelineTriggerActiveRangeStart: "px",
 	top: "px",
 	transformOrigin: "px",
 	transition: "ms",
@@ -594,6 +591,7 @@ const knownPropertyNames = new Set([
 	"columnRuleInteriorInsetEnd",
 	"columnRuleInteriorInsetStart",
 	"columnRuleStyle",
+	"columnRuleVisibilityItems",
 	"columnRuleWidth",
 	"columnSpan",
 	"columnWidth",
@@ -750,6 +748,7 @@ const knownPropertyNames = new Set([
 	"hyphenateLimitLines",
 	"hyphenateLimitZone",
 	"hyphens",
+	"imageAnimation",
 	"imageOrientation",
 	"imageRendering",
 	"imageResolution",
@@ -772,12 +771,6 @@ const knownPropertyNames = new Set([
 	"interestDelayStart",
 	"interpolateSize",
 	"isolation",
-	"itemCross",
-	"itemDirection",
-	"itemFlow",
-	"itemPack",
-	"itemTrack",
-	"itemWrap",
 	"justifyContent",
 	"justifyItems",
 	"justifySelf",
@@ -952,6 +945,7 @@ const knownPropertyNames = new Set([
 	"rowRuleInteriorInsetEnd",
 	"rowRuleInteriorInsetStart",
 	"rowRuleStyle",
+	"rowRuleVisibilityItems",
 	"rowRuleWidth",
 	"rubyAlign",
 	"rubyMerge",
@@ -967,6 +961,7 @@ const knownPropertyNames = new Set([
 	"ruleInteriorInset",
 	"ruleOverlap",
 	"ruleStyle",
+	"ruleVisibilityItems",
 	"ruleWidth",
 	"rx",
 	"ry",
@@ -1088,13 +1083,13 @@ const knownPropertyNames = new Set([
 	"textWrapStyle",
 	"timelineScope",
 	"timelineTrigger",
-	"timelineTriggerExitRange",
-	"timelineTriggerExitRangeEnd",
-	"timelineTriggerExitRangeStart",
+	"timelineTriggerActivationRange",
+	"timelineTriggerActivationRangeEnd",
+	"timelineTriggerActivationRangeStart",
+	"timelineTriggerActiveRange",
+	"timelineTriggerActiveRangeEnd",
+	"timelineTriggerActiveRangeStart",
 	"timelineTriggerName",
-	"timelineTriggerRange",
-	"timelineTriggerRangeEnd",
-	"timelineTriggerRangeStart",
 	"timelineTriggerSource",
 	"top",
 	"touchAction",
@@ -1156,6 +1151,12 @@ const knownPropertyNames = new Set([
 //#endregion
 //#region src/props.ts
 /**
+* Converts a kebab-case string to camelCase.
+*/
+function kebabToCamel(str) {
+	return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+/**
 * Converts a camelCase string to kebab-case.
 */
 function camelToKebab(str) {
@@ -1496,12 +1497,13 @@ var CssObjectBlock = class {
 	subBlocks = [];
 	/**
 	* Creates a new CSS block from style properties.
-	* Generates a unique class name based on the content hash.
+	* Generates a unique class name based on the content hash, or uses the provided class name.
 	* @param styles - The style properties to compile
+	* @param className - Optional stable class name; if omitted, a content-hash-based name is generated
 	*/
-	constructor(styles) {
+	constructor(styles, className) {
 		const blocks = CssObjectSubBlock.fromProps(styles);
-		this.className = "c" + shortHash(blocks.map((b) => b.hash).join("+"));
+		this.className = className ?? "c" + shortHash(blocks.map((b) => b.hash).join("+"));
 		this.subBlocks = blocks;
 	}
 	/**
@@ -1549,9 +1551,14 @@ var CSSObject = class {
 	/**
 	* Creates a new CSSObject from style props.
 	* Compiles main styles and all variant options into CSS blocks.
+	* @param props - Base style props plus variant definitions
+	* @param props.variants - Named variant groups, each mapping variant values to style props
+	* @param props.defaultVariants - Default value for each variant when none is provided at runtime
+	* @param props.compoundVariants - Style props applied when a specific combination of variants is active
+	* @param className - Optional stable class name for the main block
 	*/
-	constructor({ variants, defaultVariants, compoundVariants,...props }) {
-		this.mainBlock = new CssObjectBlock(props);
+	constructor({ variants, defaultVariants, compoundVariants,...props }, className) {
+		this.mainBlock = new CssObjectBlock(props, className);
 		this.variantBlocks = {};
 		this.variantDefaults = defaultVariants ?? {};
 		this.compoundVariants = [];
@@ -1593,6 +1600,10 @@ var CSSObject = class {
 
 //#endregion
 //#region src/css.ts
+const MOCHI_CSS_TYPEOF = Symbol.for("mochi-css.MochiCSS");
+function isMochiCSS(value) {
+	return typeof value === "object" && value !== null && value["$$typeof"] === MOCHI_CSS_TYPEOF;
+}
 /**
 * Runtime representation of a CSS style definition with variant support.
 * Holds generated class names and provides methods to compute the final
@@ -1607,10 +1618,6 @@ var CSSObject = class {
 * }))
 * styles.variant({ size: 'large' }) // Returns combined class names
 */
-const MOCHI_CSS_TYPEOF = Symbol.for("mochi-css.MochiCSS");
-function isMochiCSS(value) {
-	return typeof value === "object" && value !== null && value["$$typeof"] === MOCHI_CSS_TYPEOF;
-}
 var MochiCSS = class MochiCSS {
 	$$typeof = MOCHI_CSS_TYPEOF;
 	/**
@@ -1646,6 +1653,16 @@ var MochiCSS = class MochiCSS {
 		}));
 	}
 	/**
+	* Returns the CSS selector for this style (e.g. `.abc123`).
+	* Useful for targeting this component from another style.
+	*/
+	get selector() {
+		return this.classNames.map((n) => `.${n}`).join();
+	}
+	toString() {
+		return this.selector;
+	}
+	/**
 	* Creates a MochiCSS instance from a CSSObject.
 	* Extracts class names from the compiled CSS blocks.
 	* @template V - The variant definitions type
@@ -1704,51 +1721,18 @@ function mergeMochiCss(instances) {
 function css(...props) {
 	const cssToMerge = [];
 	for (const p of props) {
-		if (p == null || typeof p !== "object") continue;
+		if (p == null) continue;
+		if (typeof p === "string") {
+			cssToMerge.push(new MochiCSS([p], {}, {}));
+			continue;
+		}
+		if (typeof p !== "object") continue;
 		if (p instanceof MochiCSS) cssToMerge.push(p);
 		else cssToMerge.push(MochiCSS.from(new CSSObject(p)));
 	}
 	return mergeMochiCss(cssToMerge);
 }
 
-//#endregion
-//#region src/styled.ts
-/**
-* Creates a styled React component with CSS-in-JS support and variant props.
-* Similar to styled-components or Stitches, but with zero runtime overhead.
-*
-* @template T - The base element type or component type
-* @template V - The variant definitions tuple type
-* @param target - The HTML element tag name or React component to style
-* @param props - One or more style objects with optional variants
-* @returns A React functional component with merged props and variant support
-*
-* @example
-* const Button = styled('button', {
-*   padding: 8,
-*   borderRadius: 4,
-*   variants: {
-*     size: {
-*       small: { padding: 4 },
-*       large: { padding: 16 }
-*     },
-*     variant: {
-*       primary: { backgroundColor: 'blue' },
-*       secondary: { backgroundColor: 'gray' }
-*     }
-*   }
-* })
-*
-* // Usage: <Button size="large" variant="primary">Click me</Button>
-*/
-function styled(target, ...props) {
-	const styles = css(...props);
-	return ({ className,...p }) => (0, react.createElement)(target, {
-		className: (0, clsx.default)(styles.variant(p), className),
-		...p
-	});
-}
-
 //#endregion
 //#region src/keyframesObject.ts
 var KeyframesObject = class KeyframesObject {
@@ -1904,6 +1888,7 @@ exports.MochiCSS = MochiCSS;
 exports.MochiKeyframes = MochiKeyframes;
 exports.MochiSelector = MochiSelector;
 exports.Token = Token;
+exports.camelToKebab = camelToKebab;
 exports.container = container;
 exports.createToken = createToken;
 exports.css = css;
@@ -1911,9 +1896,11 @@ exports.cssFromProps = cssFromProps;
 exports.globalCss = globalCss;
 exports.isAtRuleKey = isAtRuleKey;
 exports.isMochiCSS = isMochiCSS;
+exports.kebabToCamel = kebabToCamel;
 exports.keyframes = keyframes;
 exports.media = media;
 exports.mergeMochiCss = mergeMochiCss;
-exports.styled = styled;
+exports.numberToBase62 = numberToBase62;
+exports.shortHash = shortHash;
 exports.supports = supports;
 //# sourceMappingURL=index.js.map