css-calipers 0.9.3 → 0.9.4

package/dist/esm/ratio.js

@@ -0,0 +1,131 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _RatioImpl_numerator, _RatioImpl_denominator, _RatioImpl_omitDenominatorWhenOne;
+class RatioImpl {
+    constructor(numerator, denominator, options = {}) {
+        var _a;
+        _RatioImpl_numerator.set(this, void 0);
+        _RatioImpl_denominator.set(this, void 0);
+        _RatioImpl_omitDenominatorWhenOne.set(this, void 0);
+        if (!Number.isFinite(numerator) || !Number.isFinite(denominator)) {
+            throw new Error("Ratio values must be finite numbers.");
+        }
+        if (denominator === 0) {
+            throw new Error("Ratio denominator cannot be zero.");
+        }
+        __classPrivateFieldSet(this, _RatioImpl_numerator, numerator, "f");
+        __classPrivateFieldSet(this, _RatioImpl_denominator, denominator, "f");
+        __classPrivateFieldSet(this, _RatioImpl_omitDenominatorWhenOne, (_a = options.omitDenominatorWhenOne) !== null && _a !== void 0 ? _a : false, "f");
+    }
+    numerator() {
+        return __classPrivateFieldGet(this, _RatioImpl_numerator, "f");
+    }
+    denominator() {
+        return __classPrivateFieldGet(this, _RatioImpl_denominator, "f");
+    }
+    withNumerator(numerator) {
+        return new RatioImpl(numerator, __classPrivateFieldGet(this, _RatioImpl_denominator, "f"));
+    }
+    withDenominator(denominator) {
+        return new RatioImpl(__classPrivateFieldGet(this, _RatioImpl_numerator, "f"), denominator);
+    }
+    valueOf() {
+        return __classPrivateFieldGet(this, _RatioImpl_numerator, "f") / __classPrivateFieldGet(this, _RatioImpl_denominator, "f");
+    }
+    css() {
+        if (__classPrivateFieldGet(this, _RatioImpl_omitDenominatorWhenOne, "f") && __classPrivateFieldGet(this, _RatioImpl_denominator, "f") === 1) {
+            return String(__classPrivateFieldGet(this, _RatioImpl_numerator, "f"));
+        }
+        return `${__classPrivateFieldGet(this, _RatioImpl_numerator, "f")}/${__classPrivateFieldGet(this, _RatioImpl_denominator, "f")}`;
+    }
+    toString() {
+        return this.css();
+    }
+}
+_RatioImpl_numerator = new WeakMap(), _RatioImpl_denominator = new WeakMap(), _RatioImpl_omitDenominatorWhenOne = new WeakMap();
+export function r(numeratorOrDenominator, denominator) {
+    const numerator = denominator === undefined ? numeratorOrDenominator : numeratorOrDenominator;
+    const resolvedDenominator = denominator === undefined ? 1 : denominator;
+    return new RatioImpl(numerator, resolvedDenominator);
+}
+export const isRatio = (value) => {
+    return (typeof value === "object" &&
+        value !== null &&
+        "css" in value &&
+        "numerator" in value &&
+        "denominator" in value &&
+        typeof value.css === "function" &&
+        typeof value.numerator === "function" &&
+        typeof value.denominator === "function");
+};
+export const parseRatio = (value) => {
+    if (typeof value === "number") {
+        return Number.isFinite(value) ? { numerator: value, denominator: 1 } : null;
+    }
+    if (isRatio(value)) {
+        return { numerator: value.numerator(), denominator: value.denominator() };
+    }
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    if (trimmed.includes("/")) {
+        const [left, right] = trimmed.split("/");
+        if (left === undefined || right === undefined)
+            return null;
+        const numerator = Number(left.trim());
+        const denominator = Number(right.trim());
+        if (!Number.isFinite(numerator) || !Number.isFinite(denominator))
+            return null;
+        if (denominator === 0)
+            return null;
+        return { numerator, denominator };
+    }
+    const parsed = Number(trimmed);
+    return Number.isFinite(parsed) ? { numerator: parsed, denominator: 1 } : null;
+};
+export const normalizeRatio = (ratio) => {
+    let numerator = ratio.numerator();
+    let denominator = ratio.denominator();
+    if (!Number.isFinite(numerator) || !Number.isFinite(denominator)) {
+        throw new Error("Ratio values must be finite numbers.");
+    }
+    if (denominator === 0) {
+        throw new Error("Ratio denominator cannot be zero.");
+    }
+    if (!Number.isInteger(numerator) || !Number.isInteger(denominator)) {
+        return new RatioImpl(numerator, denominator);
+    }
+    if (denominator < 0) {
+        numerator = -numerator;
+        denominator = Math.abs(denominator);
+    }
+    const gcd = (a, b) => {
+        let x = Math.abs(a);
+        let y = Math.abs(b);
+        while (y !== 0) {
+            const next = x % y;
+            x = y;
+            y = next;
+        }
+        return x === 0 ? 1 : x;
+    };
+    const divisor = gcd(numerator, denominator);
+    return new RatioImpl(numerator / divisor, denominator / divisor);
+};
+export const reduceRatio = (ratio) => normalizeRatio(ratio);
+export const simplifyRatio = (ratio) => {
+    const reduced = normalizeRatio(ratio);
+    return new RatioImpl(reduced.numerator(), reduced.denominator(), {
+        omitDenominatorWhenOne: true,
+    });
+};
+export const ratioToFloat = (ratio) => ratio.numerator() / ratio.denominator();

package/dist/esm/types.d.ts

@@ -0,0 +1,35 @@
+export type Resolve<T> = {
+    [Key in keyof T]: T[Key];
+} & {};
+export type CSSVarFunction = string;
+export type MapLeafNodes<T, Leaf> = T extends null ? null : T extends string ? Leaf : T extends object ? {
+    [Key in keyof T]: MapLeafNodes<T[Key], Leaf>;
+} : Leaf;
+export type NullableTokens = {
+    [key: string]: string | NullableTokens | null;
+};
+export type Tokens = {
+    [key: string]: string | Tokens;
+};
+export type ThemeVars<ThemeContract extends NullableTokens> = MapLeafNodes<ThemeContract, CSSVarFunction>;
+export type ClassNames = string | Array<ClassNames>;
+type _PropertySyntax = "<angle>" | "<color>" | "<custom-ident>" | "<image>" | "<integer>" | "<length-percentage>" | "<length>" | "<number>" | "<percentage>" | "<resolution>" | "<string>" | "<time>" | "<transform-function>" | "<transform-list>" | "<url>" | "*";
+type LooseAutocomplete<Suggestions extends string> = Suggestions | Omit<string, Suggestions>;
+export type PropertySyntax = LooseAutocomplete<_PropertySyntax>;
+export type QueryRule<Key extends string, StyleType> = {
+    [key in Key]?: {
+        [query: string]: Omit<StyleType, Key>;
+    };
+};
+export type QueryMedia<StyleType> = QueryRule<"@media", StyleType>;
+export type QueryFeature<StyleType> = QueryRule<"@supports", StyleType>;
+export type QueryContainer<StyleType> = QueryRule<"@container", StyleType>;
+export type QueryLayer<StyleType> = QueryRule<"@layer", StyleType>;
+export type QueryStartingStyle<StyleType> = {
+    "@starting-style"?: Omit<StyleType, "@starting-style">;
+};
+export interface QueryAll<StyleType> extends QueryMedia<StyleType & QueryAll<StyleType>>, QueryFeature<StyleType & QueryAll<StyleType>>, QueryContainer<StyleType & QueryAll<StyleType>>, QueryLayer<StyleType & QueryAll<StyleType>>, QueryStartingStyle<StyleType> {
+}
+export type WithQuery<StyleType> = StyleType & QueryAll<StyleType>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI;KACtB,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;CACzB,GAAG,EAAE,CAAC;AAEP,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC;AAEpC,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,IAAI,GAC9C,IAAI,GACJ,CAAC,SAAS,MAAM,GAChB,IAAI,GACJ,CAAC,SAAS,MAAM,GAChB;KAAG,GAAG,IAAI,MAAM,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC;CAAE,GAChD,IAAI,CAAC;AAET,MAAM,MAAM,cAAc,GAAG;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,cAAc,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,aAAa,SAAS,cAAc,IAAI,YAAY,CACxE,aAAa,EACb,cAAc,CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;AAEpD,KAAK,eAAe,GAChB,SAAS,GACT,SAAS,GACT,gBAAgB,GAChB,SAAS,GACT,WAAW,GACX,qBAAqB,GACrB,UAAU,GACV,UAAU,GACV,cAAc,GACd,cAAc,GACd,UAAU,GACV,QAAQ,GACR,sBAAsB,GACtB,kBAAkB,GAClB,OAAO,GACP,GAAG,CAAC;AAER,KAAK,iBAAiB,CAAC,WAAW,SAAS,MAAM,IAC7C,WAAW,GACX,IAAI,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAE9B,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAAC,eAAe,CAAC,CAAC;AAEhE,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,MAAM,EAAE,SAAS,IAAI;KACpD,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE;QACb,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;KACvC;CACF,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,SAAS,IAAI,SAAS,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AACnE,MAAM,MAAM,YAAY,CAAC,SAAS,IAAI,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AACxE,MAAM,MAAM,cAAc,CAAC,SAAS,IAAI,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAC3E,MAAM,MAAM,UAAU,CAAC,SAAS,IAAI,SAAS,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AACnE,MAAM,MAAM,kBAAkB,CAAC,SAAS,IAAI;IAC1C,iBAAiB,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAC;CACxD,CAAC;AAEF,MAAM,WAAW,QAAQ,CAAC,SAAS,CACjC,SAAQ,UAAU,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,EACjD,YAAY,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,EAC7C,cAAc,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,EAC/C,UAAU,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC,EAC3C,kBAAkB,CAAC,SAAS,CAAC;CAAG;AAEpC,MAAM,MAAM,SAAS,CAAC,SAAS,IAAI,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC"}

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/validation.d.ts

@@ -0,0 +1,10 @@
+export type ValidationResult = boolean | string | null | undefined | {
+    valid: boolean;
+    message?: string;
+};
+export declare const normalizeValidationResult: (result: ValidationResult) => {
+    valid: boolean;
+    message?: string;
+};
+export declare const toValidationResult: (error: unknown, fallback: string) => ValidationResult;
+//# sourceMappingURL=validation.d.ts.map

package/dist/esm/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../src/validation.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GACxB,OAAO,GACP,MAAM,GACN,IAAI,GACJ,SAAS,GACT;IACE,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEN,eAAO,MAAM,yBAAyB,GACpC,QAAQ,gBAAgB,KACvB;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAOpC,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,OAAO,EACd,UAAU,MAAM,KACf,gBAGF,CAAC"}

package/dist/esm/validation.js

@@ -0,0 +1,15 @@
+export const normalizeValidationResult = (result) => {
+    if (result === undefined || result === null)
+        return { valid: true };
+    if (typeof result === "boolean")
+        return { valid: result };
+    if (typeof result === "string") {
+        return result ? { valid: false, message: result } : { valid: true };
+    }
+    return result;
+};
+export const toValidationResult = (error, fallback) => {
+    if (error instanceof Error && error.message)
+        return error.message;
+    return fallback;
+};

package/dist/examples/containerQueries.example.js

@@ -0,0 +1,54 @@
+"use strict";
+/**
+ * Example-only file.
+ *
+ * This is not part of the public API surface and is not published in the
+ * package. It shows how to nest media + container query outputs, including
+ * optional vanilla-extract helpers.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_1 = require("@vanilla-extract/css");
+const factory_wrapper_example_1 = require("./factory-wrapper.example");
+const containerQueries_1 = require("../src/containerQueries");
+const media = (0, factory_wrapper_example_1.makeMediaQueryStyle)({
+    desktop: { minWidth: (0, factory_wrapper_example_1.m)(1024) },
+});
+const container = (0, containerQueries_1.makeContainerQueryStyle)({
+    wideCard: {
+        inlineSize: { operator: ">=", value: (0, factory_wrapper_example_1.m)(28, "rem") },
+    },
+});
+// const nestedStyles = media({
+//   desktop: container({
+//     wideCard: {
+//       gridTemplateColumns: "1fr 2fr",
+//       gridTemplateRows: "none",
+//       alignItems: "stretch",
+//     },
+//   }),
+// });
+const sampleClasses = {
+    container: (0, css_1.style)({
+        display: "grid",
+    }),
+    logo: (0, css_1.style)({}),
+    text: (0, css_1.style)({}),
+};
+const sampleComponent = `
+  <div className={container}>
+    <div className={logo}>Logo</div>
+    <div className={text}>Some text here</div>
+  </div>
+`;
+// const vanillaExtractStyles = mediaQueryOutputVanillaExtract(
+//   media({
+//     desktop: containerQueryOutputVanillaExtract(
+//       container({
+//         wideCard: {
+//           gridTemplateColumns: "1fr 2fr",
+//           gridTemplateRows: "none",
+//         },
+//       }),
+//     ),
+//   }),
+// );

package/dist/examples/examples/containerQueries.example.js

@@ -0,0 +1,54 @@
+"use strict";
+/**
+ * Example-only file.
+ *
+ * This is not part of the public API surface and is not published in the
+ * package. It shows how to nest media + container query outputs, including
+ * optional vanilla-extract helpers.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_1 = require("@vanilla-extract/css");
+const factory_wrapper_example_1 = require("./factory-wrapper.example");
+const containerQueries_1 = require("../src/containerQueries");
+const media = (0, factory_wrapper_example_1.makeMediaQueryStyle)({
+    desktop: { minWidth: (0, factory_wrapper_example_1.m)(1024) },
+});
+const container = (0, containerQueries_1.makeContainerQueryStyle)({
+    wideCard: {
+        inlineSize: { operator: ">=", value: (0, factory_wrapper_example_1.m)(28, "rem") },
+    },
+});
+// const nestedStyles = media({
+//   desktop: container({
+//     wideCard: {
+//       gridTemplateColumns: "1fr 2fr",
+//       gridTemplateRows: "none",
+//       alignItems: "stretch",
+//     },
+//   }),
+// });
+const sampleClasses = {
+    container: (0, css_1.style)({
+        display: "grid",
+    }),
+    logo: (0, css_1.style)({}),
+    text: (0, css_1.style)({}),
+};
+const sampleComponent = `
+  <div className={container}>
+    <div className={logo}>Logo</div>
+    <div className={text}>Some text here</div>
+  </div>
+`;
+// const vanillaExtractStyles = mediaQueryOutputVanillaExtract(
+//   media({
+//     desktop: containerQueryOutputVanillaExtract(
+//       container({
+//         wideCard: {
+//           gridTemplateColumns: "1fr 2fr",
+//           gridTemplateRows: "none",
+//         },
+//       }),
+//     ),
+//   }),
+// );

package/dist/examples/examples/factory-wrapper.example.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.m = exports.mVw = exports.mEm = exports.makeMediaQueryStyle = exports.buildMediaQueryString = exports.units = exports.mediaQueries = exports.assertCondition = exports.assertMatchingUnits = exports.mPercent = exports.mPx = void 0;
+const factory_1 = require("css-calipers/factory");
+/**
+ * Example wrapper module.
+ * Use the factory once, then re-export from here across your app.
+ * This keeps a single import path and makes refactors cheaper.
+ */
+const calipers = (0, factory_1.createCalipers)({
+    errorConfig: { stackHints: 'on' },
+});
+exports.mPx = calipers.mPx, exports.mPercent = calipers.mPercent, exports.assertMatchingUnits = calipers.assertMatchingUnits, exports.assertCondition = calipers.assertCondition, exports.mediaQueries = calipers.mediaQueries, exports.units = calipers.units;
+exports.buildMediaQueryString = exports.mediaQueries.buildMediaQueryString, exports.makeMediaQueryStyle = exports.mediaQueries.makeMediaQueryStyle;
+exports.mEm = exports.units.mEm, exports.mVw = exports.units.mVw;
+/**
+ * Benefit: you can make custom changes in one place without touching call sites.
+ * Example wrapper below is intentionally demonstrative, not a recommended m change.
+ */
+const m = (value, unitOrOptions, context) => {
+    var _a;
+    if (!unitOrOptions) {
+        return calipers.m(value, '%', context);
+    }
+    if (typeof unitOrOptions === 'object') {
+        return calipers.m(value, {
+            ...unitOrOptions,
+            unit: (_a = unitOrOptions.unit) !== null && _a !== void 0 ? _a : '%',
+        });
+    }
+    return calipers.m(value, unitOrOptions, context);
+};
+exports.m = m;

package/dist/examples/examples/lineHeight-normalizer.example.js

@@ -0,0 +1,81 @@
+"use strict";
+/**
+ * Example-only file.
+ *
+ * This is not part of the public API surface and is not published in the
+ * package. It exists to demonstrate one way to normalize mixed line-height
+ * inputs into a single value with a `.css()` method. See the README for a
+ * deeper discussion of this pattern and its trade-offs.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeLineHeight = void 0;
+const css_calipers_1 = require("css-calipers");
+const parseNumericWithUnit = (raw) => {
+    const value = raw.trim();
+    const match = value.match(/^(-?\d*\.?\d+)\s*(px|rem|em|%)$/i);
+    if (!match)
+        return null;
+    const [, numeric, unit] = match;
+    return {
+        value: Number(numeric),
+        unit: unit.toLowerCase(),
+    };
+};
+const normalizeLineHeight = (value) => {
+    // Case 1: bare number (unitless line-height)
+    if (typeof value === 'number') {
+        return {
+            css: () => value,
+        };
+    }
+    const trimmed = value.trim();
+    // Case 2: numeric value + unit string (for example, "1.5rem", "20px")
+    const numericWithUnit = parseNumericWithUnit(trimmed);
+    if (numericWithUnit) {
+        const measurement = (0, css_calipers_1.m)(numericWithUnit.value, numericWithUnit.unit);
+        return measurement;
+    }
+    // Case 3: unitless numeric string (for example, "1.5")
+    const numericValue = Number(trimmed);
+    if (!Number.isNaN(numericValue)) {
+        return {
+            css: () => numericValue,
+        };
+    }
+    // Case 4: keywords ("normal") or CSS variables ("var(--body-line-height)")
+    // remain opaque CSS strings and resolve at runtime.
+    return {
+        css: () => trimmed,
+    };
+};
+exports.normalizeLineHeight = normalizeLineHeight;
+// Example usages (not executed here; for illustration only):
+const lineHeightFromNumber = (0, exports.normalizeLineHeight)(1.5);
+const lineHeightFromUnitString = (0, exports.normalizeLineHeight)('1.5rem');
+const lineHeightFromNumericString = (0, exports.normalizeLineHeight)('1.5');
+const lineHeightFromKeyword = (0, exports.normalizeLineHeight)('normal');
+const lineHeightFromVar = (0, exports.normalizeLineHeight)('var(--body-line-height)');
+// All normalized values expose a `.css()` method:
+const lineHeightStyles = {
+    number: lineHeightFromNumber.css(),
+    unitString: lineHeightFromUnitString.css(),
+    numericString: lineHeightFromNumericString.css(),
+    keyword: lineHeightFromKeyword.css(),
+    cssVariable: lineHeightFromVar.css(),
+};
+// Advanced example: if the normalized value happens to be a CSS-Calipers
+// measurement, you can safely do math on it before emitting CSS.
+const baseLineHeight = (0, exports.normalizeLineHeight)('1.4rem');
+const minLineHeight = (0, css_calipers_1.m)(1.2, 'rem');
+const maxLineHeight = (0, css_calipers_1.m)(1.8, 'rem');
+let clampedLineHeight;
+if ((0, css_calipers_1.isMeasurement)(baseLineHeight)) {
+    // Here TypeScript knows `baseLineHeight` is an IMeasurement, so you can use
+    // unit-aware helpers before emitting.
+    const clamped = baseLineHeight.clamp(minLineHeight, maxLineHeight);
+    clampedLineHeight = clamped.css();
+}
+else {
+    // Keywords or CSS variables bypass CSS-Calipers and stay as-is.
+    clampedLineHeight = baseLineHeight.css();
+}

package/dist/examples/examples/mediaQueries-multipleInstances.example.js

@@ -0,0 +1,127 @@
+"use strict";
+/**
+ * Example-only file.
+ *
+ * This is not part of the public API surface and is not published in the
+ * package. It shows how a page layout and a grid component can use different
+ * media query configs (and different breakpoints) in the same codebase.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_calipers_1 = require("css-calipers");
+const mediaQueries_1 = require("css-calipers/mediaQueries");
+// Simple helper: grid component uses its own breakpoints and column labels.
+// This helper uses the default builder, which includes all modules.
+const gridBreakpoints = {
+    columns_four: { maxWidth: (0, css_calipers_1.m)(1200) },
+    columns_three: { maxWidth: (0, css_calipers_1.m)(1024) },
+    columns_two: { maxWidth: (0, css_calipers_1.m)(768) },
+    columns_one: { maxWidth: (0, css_calipers_1.m)(520) },
+};
+const gridMediaSimple = (0, mediaQueries_1.makeMediaQueryStyle)(gridBreakpoints);
+const gridStylesSimple = {
+    display: "grid",
+    gap: "16px",
+    gridTemplateColumns: "repeat(4, 1fr)",
+    ...gridMediaSimple({
+        columns_four: { gridTemplateColumns: "repeat(4, 1fr)" },
+        columns_three: { gridTemplateColumns: "repeat(3, 1fr)" },
+        columns_two: { gridTemplateColumns: "repeat(2, 1fr)" },
+        columns_one: { gridTemplateColumns: "1fr" },
+    }),
+};
+// Multiple instances: page layout and grid component use different configs.
+// Layout uses the standard mobile/tablet/desktop breakpoints and defaults.
+// The default keeps all modules enabled, if you want to limit modules, you
+// can specify what moduels to load explicitely
+const layoutMedia = (0, mediaQueries_1.mediaQueryFactory)({
+    queries: {
+        mobile: { maxWidth: (0, css_calipers_1.m)(639) },
+        tablet: { minWidth: (0, css_calipers_1.m)(640), maxWidth: (0, css_calipers_1.m)(1023) },
+        desktop: { minWidth: (0, css_calipers_1.m)(1024) },
+    },
+    config: { label: "layout" },
+});
+// Grid uses a custom breakpoint map and custom error handling for iteration.
+// Note "core" is explicit here and no other modules will be loaded.
+const gridMedia = (0, mediaQueries_1.mediaQueryFactory)({
+    queries: gridBreakpoints,
+    config: {
+        label: "product-grid",
+        modules: ["core"],
+        errorHandling: {
+            invalidValueMode: "log",
+            lintingMode: "log",
+        },
+    },
+});
+const pageStyles = {
+    display: "grid",
+    gridTemplateColumns: "repeat(4, 1fr)",
+    ...layoutMedia({
+        mobile: { gridTemplateColumns: "1fr" },
+        tablet: { gridTemplateColumns: "repeat(2, 1fr)" },
+        desktop: { gridTemplateColumns: "repeat(4, 1fr)" },
+    }),
+};
+const gridStyles = {
+    display: "grid",
+    gap: "16px",
+    gridTemplateColumns: "repeat(4, 1fr)",
+    ...gridMedia({
+        columns_four: { gridTemplateColumns: "repeat(4, 1fr)" },
+        columns_three: { gridTemplateColumns: "repeat(3, 1fr)" },
+        columns_two: { gridTemplateColumns: "repeat(2, 1fr)" },
+        columns_one: { gridTemplateColumns: "1fr" },
+    }),
+};
+// Advanced example: any-hover with custom validation + linting.
+// Note
+const interactionMedia = (0, mediaQueries_1.mediaQueryFactory)({
+    queries: {
+        hoverReady: {
+            anyHover: "hover",
+            anyPointer: "fine",
+            reducedMotion: "no-preference",
+        },
+        hoverDisabled: {
+            anyHover: "none",
+            anyPointer: "coarse",
+            reducedMotion: "reduce",
+        },
+    },
+    config: {
+        label: "interaction",
+        modules: ["interaction", "preferences"],
+        errorHandling: {
+            invalidValueMode: "throw",
+            lintingMode: "log",
+        },
+        output: (media) => ({
+            label: "interaction",
+            media,
+            note: "Custom output for advanced example",
+        }),
+        custom: {
+            key: "any-hover-guard",
+            validator: (props) => {
+                if (props.anyHover && !props.anyPointer) {
+                    return "anyHover should be paired with anyPointer for clarity";
+                }
+                return true;
+            },
+            linter: (props) => {
+                if (props.anyHover === "none" && props.anyPointer === "fine") {
+                    return "anyHover none rarely pairs with anyPointer fine";
+                }
+                return true;
+            },
+        },
+    },
+});
+const interactionResult = interactionMedia({
+    hoverReady: { cursor: "pointer", transitionDuration: "160ms" },
+    hoverDisabled: { cursor: "default", transitionDuration: "0ms" },
+});
+const interactionStyles = {
+    ...interactionResult.media,
+};

package/dist/examples/examples/mixedQueries.example.js

@@ -0,0 +1,55 @@
+"use strict";
+/**
+ * Example-only file.
+ *
+ * This is not part of the public API surface and is not published in the
+ * package. It shows how to nest media + container query outputs, including
+ * optional vanilla-extract helpers.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_calipers_1 = require("css-calipers");
+const mediaQueries_1 = require("css-calipers/mediaQueries");
+const containerQueries_1 = require("css-calipers/containerQueries");
+const media = (0, mediaQueries_1.makeMediaQueryStyle)({
+    desktop: { minWidth: (0, css_calipers_1.m)(1024) },
+    aspectRatio: (0, css_calipers_1.m)("16/9"),
+});
+// const media2 = makeMediaQueryStyle({
+//   queryA: {
+//     // implied "and"
+//     minWidth: m(1024),
+//     maxWidth: m(2024),
+//   },
+//   queryB: not({
+//     minResolution: m(2, "dppx"),
+//   }),
+//   queryC: or({
+//     aspectRatio: m("16/9"),
+//   }),
+// });
+const container = (0, containerQueries_1.makeContainerQueryStyle)({
+    wideCard: {
+        inlineSize: { operator: ">=", value: (0, css_calipers_1.m)(28, "rem") },
+    },
+});
+const nestedStyles = media({
+    desktop: container({
+        wideCard: {
+            gridTemplateColumns: "1fr 2fr",
+            gridTemplateRows: "none",
+            alignItems: "stretch",
+        },
+    }),
+});
+// const vanillaExtractStyles = mediaQueryOutputVanillaExtract(
+//   media({
+//     desktop: containerQueryOutputVanillaExtract(
+//       container({
+//         wideCard: {
+//           gridTemplateColumns: "1fr 2fr",
+//           gridTemplateRows: "none",
+//         },
+//       }),
+//     ),
+//   }),
+// );