css-calipers 0.13.0 → 0.15.0

package/dist/esm/mediaQueries/validation.js

@@ -1,127 +0,0 @@
-import { applyMediaQueryValidation } from './helpers';
-import { assertCondition, assertMatchingUnits, isRatio, ratioToFloat, } from '../core';
-const toValidationResult = (error, fallback) => {
-    if (error instanceof Error && error.message)
-        return error.message;
-    return fallback;
-};
-export const createMediaQueryValidation = (core) => {
-    const { assertCondition, assertMatchingUnits } = core;
-    const runMediaQueryValidation = (config, helpers, check, context, fallbackMessage = 'Invalid media query configuration') => {
-        if (!check)
-            return true;
-        try {
-            check(config);
-            return true;
-        }
-        catch (error) {
-            const result = toValidationResult(error, fallbackMessage);
-            return applyMediaQueryValidation(config, helpers, () => result, context);
-        }
-    };
-    const validateMinMaxWidth = (props) => {
-        if (!props.minWidth || !props.maxWidth)
-            return;
-        assertMatchingUnits(props.minWidth, props.maxWidth, 'mediaQueries.minMaxWidth');
-        assertCondition(props.minWidth.getValue() <= props.maxWidth.getValue(), 'minWidth must be less than or equal to maxWidth');
-    };
-    const validateWidthValuesPositive = (props) => {
-        const assertPositive = (value, label) => {
-            assertCondition(value.getValue() > 0, `${label} must be greater than 0`);
-        };
-        if (props.width) {
-            assertPositive(props.width, 'width');
-        }
-        if (props.minWidth) {
-            assertPositive(props.minWidth, 'minWidth');
-        }
-        if (props.maxWidth) {
-            assertPositive(props.maxWidth, 'maxWidth');
-        }
-    };
-    const validateMinMaxHeight = (props) => {
-        if (!props.minHeight || !props.maxHeight)
-            return;
-        assertMatchingUnits(props.minHeight, props.maxHeight, 'mediaQueries.minMaxHeight');
-        assertCondition(props.minHeight.getValue() <= props.maxHeight.getValue(), 'minHeight must be less than or equal to maxHeight');
-    };
-    const validateHeightValuesPositive = (props) => {
-        const assertPositive = (value, label) => {
-            assertCondition(value.getValue() > 0, `${label} must be greater than 0`);
-        };
-        if (props.height) {
-            assertPositive(props.height, 'height');
-        }
-        if (props.minHeight) {
-            assertPositive(props.minHeight, 'minHeight');
-        }
-        if (props.maxHeight) {
-            assertPositive(props.maxHeight, 'maxHeight');
-        }
-    };
-    const validateMinMaxAspectRatio = (props) => {
-        if (!props.minAspectRatio || !props.maxAspectRatio)
-            return;
-        const assertRatio = (value, label) => {
-            assertCondition(isRatio(value), `${label} must be a ratio created with r()`);
-        };
-        assertRatio(props.minAspectRatio, 'minAspectRatio');
-        assertRatio(props.maxAspectRatio, 'maxAspectRatio');
-        const minRatio = ratioToFloat(props.minAspectRatio);
-        const maxRatio = ratioToFloat(props.maxAspectRatio);
-        assertCondition(minRatio <= maxRatio, 'minAspectRatio must be less than or equal to maxAspectRatio');
-    };
-    const validateAspectRatioValuesPositive = (props) => {
-        const assertRatio = (value, label) => {
-            assertCondition(isRatio(value), `${label} must be a ratio created with r()`);
-        };
-        const assertValidPositive = (label, ratio) => {
-            assertCondition(ratioToFloat(ratio) > 0, `${label} must be a valid ratio greater than 0`);
-        };
-        if (props.aspectRatio !== undefined) {
-            assertRatio(props.aspectRatio, 'aspectRatio');
-            assertValidPositive('aspectRatio', props.aspectRatio);
-        }
-        if (props.minAspectRatio !== undefined) {
-            assertRatio(props.minAspectRatio, 'minAspectRatio');
-            assertValidPositive('minAspectRatio', props.minAspectRatio);
-        }
-        if (props.maxAspectRatio !== undefined) {
-            assertRatio(props.maxAspectRatio, 'maxAspectRatio');
-            assertValidPositive('maxAspectRatio', props.maxAspectRatio);
-        }
-    };
-    const validateResolutionValues = (props) => {
-        const assertPositive = (value, label) => {
-            assertCondition(value.getValue() > 0, `${label} must be greater than 0`);
-        };
-        if (props.resolutionValue) {
-            assertPositive(props.resolutionValue, 'resolution');
-        }
-        if (props.minResolution) {
-            assertPositive(props.minResolution, 'minResolution');
-        }
-        if (props.maxResolution) {
-            assertPositive(props.maxResolution, 'maxResolution');
-        }
-        if (props.minResolution && props.maxResolution) {
-            assertMatchingUnits(props.minResolution, props.maxResolution, 'mediaQueries.resolutionUnits');
-        }
-    };
-    return {
-        runMediaQueryValidation,
-        validateMinMaxWidth,
-        validateWidthValuesPositive,
-        validateMinMaxHeight,
-        validateHeightValuesPositive,
-        validateMinMaxAspectRatio,
-        validateAspectRatioValuesPositive,
-        validateResolutionValues,
-    };
-};
-const defaultMediaQueryValidation = createMediaQueryValidation({
-    assertCondition,
-    assertMatchingUnits,
-});
-export const { runMediaQueryValidation, validateMinMaxWidth, validateWidthValuesPositive, validateMinMaxHeight, validateHeightValuesPositive, validateMinMaxAspectRatio, validateAspectRatioValuesPositive, validateResolutionValues, } = defaultMediaQueryValidation;
-export { defaultMediaQueryValidation };

package/dist/esm/types.d.ts

@@ -1,35 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

package/dist/esm/validation.d.ts

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,15 +0,0 @@
-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

@@ -1,54 +0,0 @@
-"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

@@ -1,54 +0,0 @@
-"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

@@ -1,33 +0,0 @@
-"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

@@ -1,81 +0,0 @@
-"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

@@ -1,127 +0,0 @@
-"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

@@ -1,55 +0,0 @@
-"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",
-//         },
-//       }),
-//     ),
-//   }),
-// );