colibri-ui 0.8.77 → 0.8.78

package/Modal/index.js

@@ -51,7 +51,7 @@ var ModalRoot = function ModalRoot(_ref) {
   var parentContainer = withinParent ? parentModal === null || parentModal === void 0 ? void 0 : parentModal.container : undefined;
   var isContained = Boolean(parentContainer);
   var isDesktop = index$4.useMediaSizes(function (bp) {
-    return bp.up("md");
+    return bp.up("lg");
   });
   var titleId = React.useId();
   var _useState3 = React.useState(0),

package/README.md

@@ -131,6 +131,65 @@ If you add a theme inside the library itself, create both layers:
 
 Then export it from `src/components/Theme/index.tsx` and update `scripts/variables.ts` if you want a generated CSS variables file in the package build.
 
+## Breakpoints
+
+Colibri UI uses one fixed set of breakpoints, shared with the apps that use the kit.
+
+| Name  | Value   | px   |
+| ----- | ------- | ---- |
+| `sm`  | `40rem` | 640  |
+| `md`  | `48rem` | 768  |
+| `lg`  | `64rem` | 1024 |
+| `xl`  | `80rem` | 1280 |
+| `2xl` | `96rem` | 1536 |
+
+The values match the Tailwind CSS defaults on purpose, because they are an industry standard. Tailwind is not a dependency of Colibri UI.
+
+Rules:
+
+- **Mobile first.** Base styles are for screens narrower than `sm`. There is no `xs`.
+- **rem, not px.** Layout follows the user's browser font size.
+- **Range syntax only.** Write `(width >= 48rem)` and `(width < 48rem)`. Do not use `min-width` / `max-width` or `- 1px` arithmetic: each edge belongs to exactly one side.
+
+### CSS
+
+CSS cannot read variables inside media queries, so write the value as a literal:
+
+```css
+.card {
+  padding: var(--space-4);
+}
+
+@media (width >= 64rem) {
+  .card {
+    padding: var(--space-6);
+  }
+}
+```
+
+Inside the kit, a test and a stylelint rule reject `min-width` / `max-width` and any width value outside the table.
+
+### JavaScript
+
+```ts
+import { BREAKPOINTS, media, useMediaSizes } from "colibri-ui";
+
+BREAKPOINTS.md; // "48rem"
+media.up("md"); // "(width >= 48rem)"
+media.down("md"); // "(width < 48rem)"
+media.between("md", "lg"); // "(48rem <= width < 64rem)"
+
+window.matchMedia(media.up("lg")).matches;
+
+// in a component
+const isDesktop = useMediaSizes((bp) => bp.up("lg"));
+
+// CSS-in-JS: add the @media prefix yourself
+const css = `@media ${media.down("sm")} { … }`;
+```
+
+`BREAKPOINTS` and `media` are also exported from `colibri-ui/Theme`.
+
 ## License
 
 MIT

package/Theme/breakpoints.d.ts

@@ -1,18 +1,22 @@
-export type Breakpoints = {
-    hd: number;
-    xl: number;
-    lg: number;
-    md: number;
-    sm: number;
-    xs: number;
+/**
+ * Breakpoints shared with the apps that use the kit.
+ * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
+ */
+export declare const BREAKPOINTS: {
+    readonly sm: "40rem";
+    readonly md: "48rem";
+    readonly lg: "64rem";
+    readonly xl: "80rem";
+    readonly "2xl": "96rem";
 };
-export type BreakpointName = keyof Breakpoints;
-export type BreakpointsTheme = {
-    values: Breakpoints;
-    up: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-    under: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-    between: ([from, to]: [BreakpointName, BreakpointName], isMedial?: boolean) => string;
+export type BreakpointName = keyof typeof BREAKPOINTS;
+export type Media = {
+    /** `(width >= <name>)` */
+    up: (name: BreakpointName) => string;
+    /** `(width < <name>)` */
+    down: (name: BreakpointName) => string;
+    /** `(<from> <= width < <to>)` */
+    between: (from: BreakpointName, to: BreakpointName) => string;
 };
-export type BreakpointMap<T = number> = Map<BreakpointName, T>;
-declare const Breakpoints: BreakpointsTheme;
-export default Breakpoints;
+/** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
+export declare const media: Media;

package/Theme/breakpoints.js

@@ -1,39 +1,28 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
-
-var Breakpoints = {
-  values: {
-    hd: 2560,
-    xl: 1920,
-    lg: 1450,
-    md: 1075,
-    sm: 680,
-    xs: 320
-  },
-  up: function up(breakpoint) {
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return "".concat(isMedia ? "@media " : "", "(min-width: ").concat(this.values[breakpoint], "px)");
+/**
+ * Breakpoints shared with the apps that use the kit.
+ * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
+ */
+var BREAKPOINTS = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem"
+};
+/** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
+var media = {
+  up: function up(name) {
+    return "(width >= ".concat(BREAKPOINTS[name], ")");
   },
-  under: function under(breakpoint) {
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return "".concat(isMedia ? "@media " : "", "(max-width: ").concat(this.values[breakpoint] - 1, "px)");
+  down: function down(name) {
+    return "(width < ".concat(BREAKPOINTS[name], ")");
   },
-  between: function between(_ref) {
-    var _ref2 = _slicedToArray__default.default(_ref, 2),
-      min = _ref2[0],
-      max = _ref2[1];
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var from = this.values[min];
-    var to = this.values[max] - 1;
-    return "".concat(isMedia ? "@media " : "", "(min-width: ").concat(from, "px) and (max-width: ").concat(to, "px)");
+  between: function between(from, to) {
+    return "(".concat(BREAKPOINTS[from], " <= width < ").concat(BREAKPOINTS[to], ")");
   }
 };
 
-exports.default = Breakpoints;
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.media = media;

package/Theme/index.d.ts

@@ -1,3 +1,5 @@
+export { BREAKPOINTS, media } from "./breakpoints";
+export type { BreakpointName, Media } from "./breakpoints";
 export declare const THEMES: {
     JAIPUR: {
         "component-button-primary-bg": "var(--color-action-primary)";

package/Theme/index.js

@@ -3,10 +3,13 @@
 var tokens = require('../Button/tokens.js');
 var jaipur = require('./themes/jaipur.js');
 var buenos_aires = require('./themes/buenos_aires.js');
+var breakpoints = require('./breakpoints.js');
 
 var THEMES = {
   JAIPUR: Object.assign(Object.assign({}, jaipur.default), tokens.BUTTON_TOKENS),
   BA: Object.assign(Object.assign({}, buenos_aires.default), tokens.BUTTON_TOKENS)
 };
 
+exports.BREAKPOINTS = breakpoints.BREAKPOINTS;
+exports.media = breakpoints.media;
 exports.THEMES = THEMES;

package/esm/Modal/index.js

@@ -41,7 +41,7 @@ var ModalRoot = function ModalRoot(_ref) {
   var parentContainer = withinParent ? parentModal === null || parentModal === void 0 ? void 0 : parentModal.container : undefined;
   var isContained = Boolean(parentContainer);
   var isDesktop = useMediaSizes(function (bp) {
-    return bp.up("md");
+    return bp.up("lg");
   });
   var titleId = useId();
   var _useState3 = useState(0),

package/esm/Theme/breakpoints.d.ts

@@ -1,18 +1,22 @@
-export type Breakpoints = {
-    hd: number;
-    xl: number;
-    lg: number;
-    md: number;
-    sm: number;
-    xs: number;
+/**
+ * Breakpoints shared with the apps that use the kit.
+ * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
+ */
+export declare const BREAKPOINTS: {
+    readonly sm: "40rem";
+    readonly md: "48rem";
+    readonly lg: "64rem";
+    readonly xl: "80rem";
+    readonly "2xl": "96rem";
 };
-export type BreakpointName = keyof Breakpoints;
-export type BreakpointsTheme = {
-    values: Breakpoints;
-    up: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-    under: (breakpoint: BreakpointName, isMedial?: boolean) => string;
-    between: ([from, to]: [BreakpointName, BreakpointName], isMedial?: boolean) => string;
+export type BreakpointName = keyof typeof BREAKPOINTS;
+export type Media = {
+    /** `(width >= <name>)` */
+    up: (name: BreakpointName) => string;
+    /** `(width < <name>)` */
+    down: (name: BreakpointName) => string;
+    /** `(<from> <= width < <to>)` */
+    between: (from: BreakpointName, to: BreakpointName) => string;
 };
-export type BreakpointMap<T = number> = Map<BreakpointName, T>;
-declare const Breakpoints: BreakpointsTheme;
-export default Breakpoints;
+/** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
+export declare const media: Media;

package/esm/Theme/breakpoints.js

@@ -1,31 +1,25 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-
-var Breakpoints = {
-  values: {
-    hd: 2560,
-    xl: 1920,
-    lg: 1450,
-    md: 1075,
-    sm: 680,
-    xs: 320
-  },
-  up: function up(breakpoint) {
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return "".concat(isMedia ? "@media " : "", "(min-width: ").concat(this.values[breakpoint], "px)");
+/**
+ * Breakpoints shared with the apps that use the kit.
+ * The values match the Tailwind CSS defaults on purpose; Tailwind is not a dependency.
+ */
+var BREAKPOINTS = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem"
+};
+/** Bare media queries, usable in `window.matchMedia`. Prefix with `@media ` in CSS-in-JS. */
+var media = {
+  up: function up(name) {
+    return "(width >= ".concat(BREAKPOINTS[name], ")");
   },
-  under: function under(breakpoint) {
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    return "".concat(isMedia ? "@media " : "", "(max-width: ").concat(this.values[breakpoint] - 1, "px)");
+  down: function down(name) {
+    return "(width < ".concat(BREAKPOINTS[name], ")");
   },
-  between: function between(_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      min = _ref2[0],
-      max = _ref2[1];
-    var isMedia = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    var from = this.values[min];
-    var to = this.values[max] - 1;
-    return "".concat(isMedia ? "@media " : "", "(min-width: ").concat(from, "px) and (max-width: ").concat(to, "px)");
+  between: function between(from, to) {
+    return "(".concat(BREAKPOINTS[from], " <= width < ").concat(BREAKPOINTS[to], ")");
   }
 };
 
-export { Breakpoints as default };
+export { BREAKPOINTS, media };

package/esm/Theme/index.d.ts

@@ -1,3 +1,5 @@
+export { BREAKPOINTS, media } from "./breakpoints";
+export type { BreakpointName, Media } from "./breakpoints";
 export declare const THEMES: {
     JAIPUR: {
         "component-button-primary-bg": "var(--color-action-primary)";

package/esm/hooks/useMediaSizes/index.d.ts

@@ -1,5 +1,5 @@
-import type { BreakpointsTheme } from "../../Theme/breakpoints";
-export type QueryInputFunction = (breakpoints: BreakpointsTheme) => string;
+import type { Media } from "../../Theme/breakpoints";
+export type QueryInputFunction = (breakpoints: Media) => string;
 type QueryInput = QueryInputFunction | string;
 export declare const useMediaSizes: (queryInput: QueryInput) => boolean;
 export {};

package/esm/hooks/useMediaSizes/index.js

@@ -1,10 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useEffect } from 'react';
-import Breakpoints from '../../Theme/breakpoints.js';
+import { media } from '../../Theme/breakpoints.js';
 
 var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
 var useMediaSizes = function useMediaSizes(queryInput) {
-  var query = typeof queryInput === "function" ? queryInput(Breakpoints) : queryInput;
+  var query = typeof queryInput === "function" ? queryInput(media) : queryInput;
   query = query.replace(/^@media( ?)/m, "");
   var matchMedia = supportMatchMedia ? window.matchMedia : null;
   var _useState = useState(function () {

package/esm/index.d.ts

@@ -78,7 +78,8 @@ export { TabsPanels } from "./TabsPanels";
 export type { TabsPanelsProps } from "./TabsPanels/index.props";
 export { TextArea } from "./TextArea";
 export type { ITextAreaProps } from "./TextArea/index.props";
-export { THEMES } from "./Theme";
+export { THEMES, BREAKPOINTS, media } from "./Theme";
+export type { BreakpointName, Media } from "./Theme";
 export { TimeSelect } from "./TimeSelect";
 export type { TimeSelectProps } from "./TimeSelect/index.props";
 export { Tooltip } from "./Tooltip";

package/esm/index.js

@@ -65,6 +65,7 @@ export { Setting } from './Icons/Setting.js';
 export { Shield } from './Icons/Shield.js';
 export { Trash } from './Icons/Trash.js';
 export { User } from './Icons/User.js';
+export { BREAKPOINTS, media } from './Theme/breakpoints.js';
 export { Body as ModalBody } from './Modal/components/Body/index.js';
 export { Footer as ModalFooter } from './Modal/components/Footer/index.js';
 export { Header as ModalHeader } from './Modal/components/Header/index.js';

package/hooks/useMediaSizes/index.d.ts

@@ -1,5 +1,5 @@
-import type { BreakpointsTheme } from "../../Theme/breakpoints";
-export type QueryInputFunction = (breakpoints: BreakpointsTheme) => string;
+import type { Media } from "../../Theme/breakpoints";
+export type QueryInputFunction = (breakpoints: Media) => string;
 type QueryInput = QueryInputFunction | string;
 export declare const useMediaSizes: (queryInput: QueryInput) => boolean;
 export {};

package/hooks/useMediaSizes/index.js

@@ -10,7 +10,7 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 
 var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
 var useMediaSizes = function useMediaSizes(queryInput) {
-  var query = typeof queryInput === "function" ? queryInput(breakpoints.default) : queryInput;
+  var query = typeof queryInput === "function" ? queryInput(breakpoints.media) : queryInput;
   query = query.replace(/^@media( ?)/m, "");
   var matchMedia = supportMatchMedia ? window.matchMedia : null;
   var _useState = React.useState(function () {

package/index.d.ts

@@ -78,7 +78,8 @@ export { TabsPanels } from "./TabsPanels";
 export type { TabsPanelsProps } from "./TabsPanels/index.props";
 export { TextArea } from "./TextArea";
 export type { ITextAreaProps } from "./TextArea/index.props";
-export { THEMES } from "./Theme";
+export { THEMES, BREAKPOINTS, media } from "./Theme";
+export type { BreakpointName, Media } from "./Theme";
 export { TimeSelect } from "./TimeSelect";
 export type { TimeSelectProps } from "./TimeSelect/index.props";
 export { Tooltip } from "./Tooltip";

package/index.js

@@ -49,6 +49,7 @@ var index$B = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Autocomplete = require('./Autocomplete/Autocomplete.js');
+var breakpoints = require('./Theme/breakpoints.js');
 var Calendar = require('./Calendar/Calendar.js');
 var Card = require('./Card/Card.js');
 var Cart = require('./Icons/Cart.js');
@@ -124,6 +125,8 @@ exports.useMediaSizes = index$A.useMediaSizes;
 exports.useScrollLock = index$B.useScrollLock;
 exports.ArrowNext = ArrowNext.ArrowNext;
 exports.Autocomplete = Autocomplete.Autocomplete;
+exports.BREAKPOINTS = breakpoints.BREAKPOINTS;
+exports.media = breakpoints.media;
 exports.Calendar = Calendar.Calendar;
 exports.Card = Card.Card;
 exports.CardContent = Card.CardContent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.77",
+  "version": "0.8.78",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",