@uxf/styles 1.4.3 → 2.0.0

package/README.md

@@ -1,227 +1,171 @@
 # @uxf/styles
 
-## Components
+## Color
 
-### `AccessibleSvg`
+### `shade` and `tint`
 
-## Constants
+- returns HEX string with mix of provided color and specified amount of black (`shade`) or white (`tint`)
 
-### `Classes`
-- common modifier classname constants (eg. `IS_HOVERABLE_CLASSNAME` for `is-hoverable` classname)
+```ts
+import { shade } from "@uxf/styles/colors/shade";
+
+const darker = shade("#f00", 0.1);
+```
+```ts
+import { tint } from "@uxf/styles/colors/tint";
+
+const lighter = tint("#f00", 0.1);
+```
 
 ## Mixins
 
-### `appearanceReset`
-### `aspectRatio`
-### `injectCss`
-### `inputAutofill`
-### `inputReset`
-### `multilineTruncate`
-### `noWrap`
-### `reboot`
-### `responsiveHidden`
-### `responsiveHideVisually`
-### `responsiveMultilineTruncate`
-### `responsiveNoWrap`
-### `responsiveTruncate`
-### `selectReset`
-### `textAreaReset`
-### `truncate`
+### `srOnly`
+
+- returns js object with CSS to hide an element to all devices except screen readers
+
+```tsx
+import { srOnly } from "@uxf/styles/mixins/sr-only";
+
+const example = <div style={srOnly} />;
+```
 
 ## Properties
 
-### `background`
-- `$backgroundColor`
-- `$background`
-### `borders`
-- `$border`
-- `$borderBottom`
-- `$borderLeft`
-- `$borderRight`
-- `$borderTop`
-- `$borderX`
-- `$borderY`
-- `$borderRadius`
-- `$outline`
-### `breaks`
-- `$breakAfter`
-- `$breakBefore`
-- `$breakInside`
-### `character`
-- `$fontFamily`
-- `$fontSize`
-- `$fontStretch`
-- `$fontStyle`
-- `$fontWeight`
-- `$letterSpacing`
-- `$lineHeight`
-- `$textTransform`
-### `child`
-- `$alignSelf`
-- `$flexBasis`
-- `$flexGrow`
-- `$flexShrink`
-- `$gridArea`
-- `$justifySelf`
-- `$order`
-### `colors`
-- `$backgroundColor`
-- `$color`
-### `column`
-- `$columnCount`
-- `$columnFill`
-- `$columnGap`
-- `$columnRule`
-- `$columnSpan`
-- `$columnWidth`
-### `display`
-- `$display`
-### `flexChild`
-- `$alignSelf`
-- `$flexBasis`
-- `$flexGrow`
-- `$flexShrink`
-- `$order`
-### `flexParent`
-- `$alignContent`
-- `$alignItems`
-- `$display`
-- `$flexDirection`
-- `$flexWrap`
-- `$justifyContent`
-### `floating`
-- `$clear`
-- `$float`
-### `gridChild`
-- `$alignSelf`
-- `$gridArea`
-- `$justifySelf`
-### `gridParent`
-- `$alignContent`
-- `$alignItems`
-- `$display`
-- `$gridAutoColumns`
-- `$gridAutoFlow`
-- `$gridAutoRows`
-- `$gridColumnCount`
-- `$gridGap`
-- `$gridColumnGap`
-- `$gridRowGap`
-- `$gridRowCount`
-- `$gridTemplateAreas`
-- `$gridTemplateColumns`
-- `$gridTemplateRows`
-- `$justifyContent`
-- `$justifyItems`
-### `interactions`
-- `$cursor`
-- `$pointerEvents`
-- `$resize`
-- `$userSelect`
-### `margins`
-- `$mb`
-- `$ml`
-- `$mr`
-- `$mt`
-- `$my`
-- `$mx`
-### `maxLines`
-- `$maxLines`
-### `objectFitting`
-- `$objectFit`
-- `$objectPosition`
-### `overflow`
-- `$overflow`
-- `$overflowX`
-- `$overflowY`
-### `paddings`
-- `$pb`
-- `$pl`
-- `$pr`
-- `$pt`
-- `$py`
-- `$px`
-### `paragraph`
-- `$hyphens`
-- `$maxLines`
-- `$noWrap`
-- `$textAlign`
-- `$textIndent`
-- `$truncate`
-### `perspective`
-- `$perspective`
-- `$perspectiveOrigin`
-### `position`
-- `$bottom`
-- `$left`
-- `$right`
-- `$top`
-- `$position`
-- `$verticalAlign`
-- `$zIndex`
-### `shadows`
-- `$boxShadow`
-- `$textShadow`
-### `sizing`
-- `$height`
-- `$maxHeight`
-- `$maxWidth`
-- `$minHeight`
-- `$minWidth`
-- `$width`
-### `spacings`
-- `margins`
-- `paddings`
-### `textDecoration`
-- `$textDecoration`
-### `transform`
-- `$transform`
-- `$transformOrigin`
-- `$transformStyle`
-### `transitions`
-- `$transition`
-### `typography`
-- `character`
-- `colors`
-- `paragraph`
-- `textDecoration`
-### `visibility`
-- `$backfaceVisibility`
-- `$hidden`
-- `$opacity`
-- `$hideVisually`
+### `columnsToPercent`
 
-## Types
+- returns css `calc()` value with relative width of provided number of columns in provided total columns (defaults is `12`) compensated by optionally provided gutter in pixels
 
-- `CssUnits`
-- shared types for utils and mixins
-- several custom css property definitions (for these which are not suitable from `csstype` package)
-- `ResponsiveProperty` namespace with typing for each property available in *Properties*
+```tsx
+import { columnsToPercent } from "@uxf/styles/properties/columns-to-percent";
 
-## Utils
+const example = columnsToPercent(4, 12, 24);
+/* returns "calc((100% + 1.5rem) / 12 * 4)" */
+```
+
+### `encodedSvgUrl`
+
+- returns css `url()` value of an encoded version of provided svg
+
+```tsx
+import { encodedSvgUrl } from "@uxf/styles/properties/encoded-svg-url";
+
+const example = encodedSvgUrl(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="currentColor" d="0 20 20 0" /></svg>`);
+```
+
+### `repeatGridColumns`
+
+- returns css `repeat()` value of provided number of columns and size
+
+```tsx
+import { repeatGridColumns } from "@uxf/styles/properties/repeat-grid-columns";
+
+const example = repeatGridColumns(6, "1fr"); /* returns "repeat(6, 1fr)" */
+```
+
+### `transition`
+
+- returns css `transition` property for specified property or an array of properties
+
+```tsx
+import { transition } from "@uxf/styles/properties/transition";
+
+const example = transition(["color", "transform"], 400, "ease-in-out");
+/* returns "color 400ms ease-in-out, transform 400 ease-in-out" */
+```
+
+## Responsive
+
+### string media queries `mqBetween`, `mqHiDpi`, `mqMax`, `mqMin`
+
+```tsx
+import { mqBetween } from "@uxf/styles/responsive/mq-between";
+
+const example = mqBetween(320, 480)
+/* returns "(min-width: 20em and (max-width: 29.9375em)" */
+```
+```tsx
+import { mqHiDpi } from "@uxf/styles/responsive/mq-hidpi";
+
+const example = mqHiDpi(3)
+/* returns hidpi media query string for DPR 3.0 */
+```
+
+### `window.matchMedia().matches` media queries `matchBetween`, `matchHiDpi`, `matchMax`, `matchMin`
+
+```tsx
+import { matchBetween } from "@uxf/styles/responsive/match-between";
+
+const example = matchBetween(320, 480) /* returns boolean */
+```
+```tsx
+import { matchHiDpi } from "@uxf/styles/responsive/match-hidpi";
+
+const example = matchHiDpi(3) /* returns boolean */
+```
+
+## Units
+
+### `em` and `rem`
+
+- returns string values divided by specified amount (defaults `16`)
+
+```tsx
+import { em } from "@uxf/styles/units/em";
+
+const example1 = em(320) /* returns "20em" */
+const example2 = em(320, 10) /* returns "32em" */
+```
+```tsx
+import { rem } from "@uxf/styles/units/rem";
+
+const example1 = rem(320) /* returns "20rem" */
+const example2 = rem(320, 10) /* returns "32rem" */
+```
+
+### `formatCssValue`
+
+- returns normalized css value: pass string as string or input to rem or zero as string or optionally forced input as string
+
+```tsx
+import { formatCssValue } from "@uxf/styles/units/format-css-value";
+
+const example1 = formatCssValue(0) /* returns "0" */
+const example2 = formatCssValue(24) /* returns "1.5rem" */
+const example3 = formatCssValue("100%") /* returns "100%" */
+const example4 = formatCssValue(1, true) /* returns "1" */
+```
 
-### `columnsToPercent`
-### `encodedSvg`
-### `formatResponsiveAspectRatio`
-### `formatResponsiveGridColumns`
-### `formatValue`
-### `formatResponsiveValue`
-### `formatResponsiveValueFromProperty`
-### `getNumericValueFromArray`
-### `hexToRgb`
 ### `percent`
-### `matchBetween`
-### `matchMin`
-### `matchBetween`
-### `matchMax`
-### `mediaBetween`
-### `mediaMin`
-### `mediaMax`
-### `mediaHiDpi`
-### `facepaintMin`
-### `facepaintOnly`
-### `resolveResponsiveProperties`
-### `responsiveMixin`
+
+- returns float of percentage of provided number in provided max value (defaults `100`) with provided precision (defaults `2`)
+
+```tsx
+import { percent } from "@uxf/styles/units/percent";
+
+const example = percent(54.874, 80, 2) /* returns 68.59 */
+```
+
 ### `spacing`
-### `transition`
+
+- returns input multiplied by given factor (defaults `8`)
+
+```tsx
+import { spacing } from "@uxf/styles/units/spacing";
+
+const example = spacing(4) /* returns 32 */
+
+```
 ### `withUnit`
+
+- returns literal of input with CSS unit
+
+```tsx
+import { withUnit } from "@uxf/styles/units/with-unit";
+
+const example = withUnit(80, "vh") /* returns "80vh" */
+```
+
+## Types
+
+- typed css units
+- shared types for utils

package/color/shade.d.ts

@@ -0,0 +1,2 @@
+import { ColorInput } from "tinycolor2";
+export declare const shade: (color: ColorInput, amount: number) => import("tinycolor2").Instance;

package/color/shade.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shade = void 0;
+var tinycolor2_1 = require("tinycolor2");
+var shade = function (color, amount) { return (0, tinycolor2_1.mix)(color, "#000", amount); };
+exports.shade = shade;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhZGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvY29sb3Ivc2hhZGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEseUNBQTZDO0FBRXRDLElBQU0sS0FBSyxHQUFHLFVBQUMsS0FBaUIsRUFBRSxNQUFjLElBQUssT0FBQSxJQUFBLGdCQUFHLEVBQUMsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLENBQUMsRUFBMUIsQ0FBMEIsQ0FBQztBQUExRSxRQUFBLEtBQUssU0FBcUUifQ==

package/color/tint.d.ts

@@ -0,0 +1,2 @@
+import { ColorInput } from "tinycolor2";
+export declare const tint: (color: ColorInput, amount: number) => import("tinycolor2").Instance;

package/color/tint.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tint = void 0;
+var tinycolor2_1 = require("tinycolor2");
+var tint = function (color, amount) { return (0, tinycolor2_1.mix)(color, "#fff", amount); };
+exports.tint = tint;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGludC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb2xvci90aW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBLHlDQUE2QztBQUV0QyxJQUFNLElBQUksR0FBRyxVQUFDLEtBQWlCLEVBQUUsTUFBYyxJQUFLLE9BQUEsSUFBQSxnQkFBRyxFQUFDLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxDQUFDLEVBQTFCLENBQTBCLENBQUM7QUFBekUsUUFBQSxJQUFJLFFBQXFFIn0=

package/mixins/sr-only.d.ts

@@ -0,0 +1,2 @@
+import { CSSProperties } from "react";
+export declare const srOnly: Partial<CSSProperties>;

package/mixins/sr-only.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.srOnly = void 0;
+exports.srOnly = {
+    borderWidth: "0",
+    clip: "rect(0, 0, 0, 0)",
+    height: "1px",
+    margin: "-1px",
+    overflow: "hidden",
+    padding: "0",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: "1px",
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Itb25seS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9taXhpbnMvc3Itb25seS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFFYSxRQUFBLE1BQU0sR0FBMkI7SUFDMUMsV0FBVyxFQUFFLEdBQUc7SUFDaEIsSUFBSSxFQUFFLGtCQUFrQjtJQUN4QixNQUFNLEVBQUUsS0FBSztJQUNiLE1BQU0sRUFBRSxNQUFNO0lBQ2QsUUFBUSxFQUFFLFFBQVE7SUFDbEIsT0FBTyxFQUFFLEdBQUc7SUFDWixRQUFRLEVBQUUsVUFBVTtJQUNwQixVQUFVLEVBQUUsUUFBUTtJQUNwQixLQUFLLEVBQUUsS0FBSztDQUNmLENBQUMifQ==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/styles",
-  "version": "1.4.3",
+  "version": "2.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -9,9 +9,8 @@
     "compile": "tsc -P tsconfig.build.json",
     "dev": "parcel demo/index.html",
     "lint:ts": "eslint -c .eslintrc.js \"./**/*.ts*\"",
-    "lint:css": "stylelint \"./**/*.(js|ts|tsx)\"",
     "typecheck": "tsc --noEmit --skipLibCheck",
-    "test": "npm run lint:ts && npm run lint:css && npm run typecheck"
+    "test": "npm run lint:ts && npm run typecheck"
   },
   "publishConfig": {
     "access": "public"
@@ -21,37 +20,26 @@
     "url": "git+https://gitlab.com/uxf-npm/styles.git"
   },
   "devDependencies": {
-    "@stylelint/postcss-css-in-js": "^0.37.2",
-    "@types/facepaint": "^1.2.2",
+    "@types/node": "^18.8.2",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
-    "@types/styled-components": "^5.1.11",
-    "@uxf/core": "^2.0.1",
+    "@types/tinycolor2": "^1.4.3",
+    "@uxf/core": "^3.1.0",
     "@uxf/eslint-config": "^1.2.3",
-    "csstype": "^3.0.10",
+    "csstype": "^3.1.1",
     "eslint": "^8.8.0",
-    "facepaint": "^1.2.1",
-    "parcel": "^2.0.1",
-    "polished": "^4.1.3",
-    "postcss": "^8.4.5",
-    "postcss-syntax": "^0.36.2",
-    "prettier": "^2.5.1",
+    "parcel": "^2.7.0",
+    "prettier": "^2.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3",
-    "stylelint": "^14.2.0",
-    "stylelint-config-recommended": "^6.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
-    "typescript": "^4.5.4"
+    "tinycolor2": "^1.4.2",
+    "typescript": "^4.8.4"
   },
   "peerDependencies": {
-    "@uxf/core": "^2.0.0",
-    "facepaint": "^1.2.1",
-    "polished": "^4.1.3",
-    "react": "^16 || ^17",
-    "react-dom": "^16 || ^17",
-    "styled-components": "^5.3.0"
+    "@uxf/core": "^3.1.0",
+    "react": "^16 || ^17 || ^18",
+    "react-dom": "^16 || ^17 || ^18",
+    "tinycolor2": "^1.4.2"
   },
   "author": "",
   "license": "ISC",

package/properties/columns-to-percent.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.columnsToPercent = void 0;
+var format_css_value_1 = require("../units/format-css-value");
+var columnsToPercent = function (columns, totalColumns, gutter) {
+    if (totalColumns === void 0) { totalColumns = 12; }
+    if (gutter === void 0) { gutter = 0; }
+    return "calc(".concat(gutter !== 0 ? "(100% + ".concat((0, format_css_value_1.formatCssValue)(gutter), ")") : "100%", " / ").concat(totalColumns, " * ").concat(columns, ")");
+};
+exports.columnsToPercent = columnsToPercent;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sdW1ucy10by1wZXJjZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3Byb3BlcnRpZXMvY29sdW1ucy10by1wZXJjZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBLDhEQUEyRDtBQUVwRCxJQUFNLGdCQUFnQixHQUFHLFVBQUMsT0FBZSxFQUFFLFlBQWlCLEVBQUUsTUFBVTtJQUE3Qiw2QkFBQSxFQUFBLGlCQUFpQjtJQUFFLHVCQUFBLEVBQUEsVUFBVTtJQUMzRSxPQUFBLGVBQVEsTUFBTSxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsa0JBQVcsSUFBQSxpQ0FBYyxFQUFDLE1BQU0sQ0FBQyxNQUFHLENBQUMsQ0FBQyxDQUFDLE1BQU0sZ0JBQU0sWUFBWSxnQkFBTSxPQUFPLE1BQUc7QUFBdEcsQ0FBc0csQ0FBQztBQUQ5RixRQUFBLGdCQUFnQixvQkFDOEUifQ==

package/properties/encoded-svg-url.d.ts

@@ -0,0 +1 @@
+export declare const encodedSvgUrl: (svg: string) => string;

package/properties/encoded-svg-url.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.encodedSvgUrl = void 0;
+var encodedSvgUrl = function (svg) { return "url(\"data:image/svg+xml; utf8, ".concat(escape(svg), "\")"); };
+exports.encodedSvgUrl = encodedSvgUrl;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW5jb2RlZC1zdmctdXJsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3Byb3BlcnRpZXMvZW5jb2RlZC1zdmctdXJsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFPLElBQU0sYUFBYSxHQUFHLFVBQUMsR0FBVyxJQUFLLE9BQUEsMENBQWtDLE1BQU0sQ0FBQyxHQUFHLENBQUMsUUFBSSxFQUFqRCxDQUFpRCxDQUFDO0FBQW5GLFFBQUEsYUFBYSxpQkFBc0UifQ==

package/properties/repeat-grid-columns.d.ts

@@ -0,0 +1 @@
+export declare const repeatGridColumns: (count?: number, size?: string) => string | null;

package/properties/repeat-grid-columns.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.repeatGridColumns = void 0;
+var format_css_value_1 = require("../units/format-css-value");
+var repeatGridColumns = function (count, size) {
+    if (size === void 0) { size = "1fr"; }
+    return count && size ? "repeat(".concat(count, ", ").concat((0, format_css_value_1.formatCssValue)(size), ")") : null;
+};
+exports.repeatGridColumns = repeatGridColumns;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVwZWF0LWdyaWQtY29sdW1ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wcm9wZXJ0aWVzL3JlcGVhdC1ncmlkLWNvbHVtbnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsOERBQTJEO0FBRXBELElBQU0saUJBQWlCLEdBQUcsVUFBQyxLQUFjLEVBQUUsSUFBWTtJQUFaLHFCQUFBLEVBQUEsWUFBWTtJQUMxRCxPQUFBLEtBQUssSUFBSSxJQUFJLENBQUMsQ0FBQyxDQUFDLGlCQUFVLEtBQUssZUFBSyxJQUFBLGlDQUFjLEVBQUMsSUFBSSxDQUFDLE1BQUcsQ0FBQyxDQUFDLENBQUMsSUFBSTtBQUFsRSxDQUFrRSxDQUFDO0FBRDFELFFBQUEsaUJBQWlCLHFCQUN5QyJ9

package/properties/transition.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transition = void 0;
+var camelCaseToDash_1 = require("@uxf/core/utils/camelCaseToDash");
+var with_unit_1 = require("../units/with-unit");
+var transition = function (property, duration, easing) {
+    if (duration === void 0) { duration = 400; }
+    if (easing === void 0) { easing = "ease-in-out"; }
+    if (Array.isArray(property)) {
+        return property.map(function (p) { return (0, exports.transition)(p, duration, easing); }).join(", ");
+    }
+    return "".concat((0, camelCaseToDash_1.camelCaseToDash)(property), " ").concat((0, with_unit_1.withUnit)(duration, "ms"), " ").concat(easing);
+};
+exports.transition = transition;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNpdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wcm9wZXJ0aWVzL3RyYW5zaXRpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsbUVBQWtFO0FBR2xFLGdEQUE4QztBQUV2QyxJQUFNLFVBQVUsR0FBRyxVQUN0QixRQUE4QixFQUM5QixRQUFjLEVBQ2QsTUFBeUQ7SUFEekQseUJBQUEsRUFBQSxjQUFjO0lBQ2QsdUJBQUEsRUFBQSxzQkFBeUQ7SUFFekQsSUFBSSxLQUFLLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUFFO1FBQ3pCLE9BQU8sUUFBUSxDQUFDLEdBQUcsQ0FBQyxVQUFDLENBQUMsSUFBSyxPQUFBLElBQUEsa0JBQVUsRUFBQyxDQUFDLEVBQUUsUUFBUSxFQUFFLE1BQU0sQ0FBQyxFQUEvQixDQUErQixDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0tBQzFFO0lBQ0QsT0FBTyxVQUFHLElBQUEsaUNBQWUsRUFBQyxRQUFRLENBQUMsY0FBSSxJQUFBLG9CQUFRLEVBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxjQUFJLE1BQU0sQ0FBRSxDQUFDO0FBQ2hGLENBQUMsQ0FBQztBQVRXLFFBQUEsVUFBVSxjQVNyQiJ9

package/responsive/match-between.d.ts

@@ -0,0 +1 @@
+export declare function matchBetween(from: number, to: number): boolean;

package/responsive/match-between.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchBetween = void 0;
+var isBrowser_1 = require("@uxf/core/utils/isBrowser");
+var mq_between_1 = require("./mq-between");
+function matchBetween(from, to) {
+    return isBrowser_1.isBrowser ? window.matchMedia((0, mq_between_1.mqBetween)(from, to)).matches : false;
+}
+exports.matchBetween = matchBetween;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0Y2gtYmV0d2Vlbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9yZXNwb25zaXZlL21hdGNoLWJldHdlZW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsdURBQXNEO0FBQ3RELDJDQUF5QztBQUV6QyxTQUFnQixZQUFZLENBQUMsSUFBWSxFQUFFLEVBQVU7SUFDakQsT0FBTyxxQkFBUyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUEsc0JBQVMsRUFBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztBQUM5RSxDQUFDO0FBRkQsb0NBRUMifQ==

package/responsive/match-hidpi.d.ts

@@ -0,0 +1 @@
+export declare function matchHidpi(ratio: number): boolean;

package/responsive/match-hidpi.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchHidpi = void 0;
+var isBrowser_1 = require("@uxf/core/utils/isBrowser");
+var mq_hidpi_1 = require("./mq-hidpi");
+function matchHidpi(ratio) {
+    return isBrowser_1.isBrowser ? window.matchMedia((0, mq_hidpi_1.mqHiDpi)(ratio)).matches : false;
+}
+exports.matchHidpi = matchHidpi;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0Y2gtaGlkcGkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvcmVzcG9uc2l2ZS9tYXRjaC1oaWRwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFBQSx1REFBc0Q7QUFDdEQsdUNBQXFDO0FBRXJDLFNBQWdCLFVBQVUsQ0FBQyxLQUFhO0lBQ3BDLE9BQU8scUJBQVMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFBLGtCQUFPLEVBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztBQUN6RSxDQUFDO0FBRkQsZ0NBRUMifQ==

package/responsive/match-max.d.ts

@@ -0,0 +1 @@
+export declare function matchMax(to: number): boolean;

package/responsive/match-max.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchMax = void 0;
+var isBrowser_1 = require("@uxf/core/utils/isBrowser");
+var mq_max_1 = require("./mq-max");
+function matchMax(to) {
+    return isBrowser_1.isBrowser ? window.matchMedia((0, mq_max_1.mqMax)(to)).matches : false;
+}
+exports.matchMax = matchMax;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0Y2gtbWF4LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3Jlc3BvbnNpdmUvbWF0Y2gtbWF4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBLHVEQUFzRDtBQUN0RCxtQ0FBaUM7QUFFakMsU0FBZ0IsUUFBUSxDQUFDLEVBQVU7SUFDL0IsT0FBTyxxQkFBUyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUEsY0FBSyxFQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7QUFDcEUsQ0FBQztBQUZELDRCQUVDIn0=

package/responsive/match-min.d.ts

@@ -0,0 +1 @@
+export declare function matchMin(from: number): boolean;

package/responsive/match-min.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchMin = void 0;
+var isBrowser_1 = require("@uxf/core/utils/isBrowser");
+var mq_min_1 = require("./mq-min");
+function matchMin(from) {
+    return isBrowser_1.isBrowser ? window.matchMedia((0, mq_min_1.mqMin)(from)).matches : false;
+}
+exports.matchMin = matchMin;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0Y2gtbWluLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3Jlc3BvbnNpdmUvbWF0Y2gtbWluLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBLHVEQUFzRDtBQUN0RCxtQ0FBaUM7QUFFakMsU0FBZ0IsUUFBUSxDQUFDLElBQVk7SUFDakMsT0FBTyxxQkFBUyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUEsY0FBSyxFQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7QUFDdEUsQ0FBQztBQUZELDRCQUVDIn0=

package/responsive/mq-between.d.ts

@@ -0,0 +1 @@
+export declare function mqBetween(from: number, to: number): string;

package/responsive/mq-between.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mqBetween = void 0;
+var em_1 = require("../units/em");
+function mqBetween(from, to) {
+    return "(min-width: ".concat((0, em_1.em)(from), ") and (max-width: ").concat((0, em_1.em)(to - 1), ")");
+}
+exports.mqBetween = mqBetween;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXEtYmV0d2Vlbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9yZXNwb25zaXZlL21xLWJldHdlZW4udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsa0NBQWlDO0FBRWpDLFNBQWdCLFNBQVMsQ0FBQyxJQUFZLEVBQUUsRUFBVTtJQUM5QyxPQUFPLHNCQUFlLElBQUEsT0FBRSxFQUFDLElBQUksQ0FBQywrQkFBcUIsSUFBQSxPQUFFLEVBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQyxNQUFHLENBQUM7QUFDckUsQ0FBQztBQUZELDhCQUVDIn0=

package/responsive/mq-hidpi.d.ts

@@ -0,0 +1 @@
+export declare function mqHiDpi(ratio?: number): string;

package/responsive/mq-hidpi.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mqHiDpi = void 0;
+function mqHiDpi(ratio) {
+    if (ratio === void 0) { ratio = 2; }
+    if (ratio < 1) {
+        ratio = 1;
+    }
+    return ("\n    only screen and (-webkit-min-device-pixel-ratio: " +
+        ratio +
+        "),\n    only screen and (min--moz-device-pixel-ratio: " +
+        ratio +
+        "),\n    only screen and (-o-min-device-pixel-ratio: " +
+        ratio +
+        "/1),\n    only screen and (min-resolution: " +
+        Math.round(ratio * 96) +
+        "dpi),\n    only screen and (min-resolution: " +
+        ratio +
+        "dppx)\n  ");
+}
+exports.mqHiDpi = mqHiDpi;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibXEtaGlkcGkuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvcmVzcG9uc2l2ZS9tcS1oaWRwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFBQSxTQUFnQixPQUFPLENBQUMsS0FBUztJQUFULHNCQUFBLEVBQUEsU0FBUztJQUM3QixJQUFJLEtBQUssR0FBRyxDQUFDLEVBQUU7UUFDWCxLQUFLLEdBQUcsQ0FBQyxDQUFDO0tBQ2I7SUFFRCxPQUFPLENBQ0gseURBQXlEO1FBQ3pELEtBQUs7UUFDTCx3REFBd0Q7UUFDeEQsS0FBSztRQUNMLHNEQUFzRDtRQUN0RCxLQUFLO1FBQ0wsNkNBQTZDO1FBQzdDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztRQUN0Qiw4Q0FBOEM7UUFDOUMsS0FBSztRQUNMLFdBQVcsQ0FDZCxDQUFDO0FBQ04sQ0FBQztBQWxCRCwwQkFrQkMifQ==

package/responsive/mq-max.d.ts

@@ -0,0 +1 @@
+export declare function mqMax(to: number): string;