colibri-ui 0.8.76 → 0.8.78

package/Modal/components/Body/Body.module.css

@@ -0,0 +1,12 @@
+.root {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--space-4) var(--space-5);
+}
+.root_bleed {
+  padding: 0;
+}

package/Modal/components/Body/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from "react";
+import type { BodyProps } from "./index.props";
+export declare const Body: FC<BodyProps>;

package/Modal/components/Body/index.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var styles = require('./Body.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var Body = function Body(_a) {
+  var children = _a.children,
+    className = _a.className,
+    _a$bleed = _a.bleed,
+    bleed = _a$bleed === void 0 ? false : _a$bleed,
+    props = tslib.__rest(_a, ["children", "className", "bleed"]);
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, props, {
+    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default({}, styles__default.default.root_bleed, bleed), className)
+  }), children);
+};
+
+exports.Body = Body;

package/Modal/components/Body/index.props.d.ts

@@ -0,0 +1 @@
+export type { ModalBodyProps as BodyProps } from "../../index.props";

package/Modal/components/Close/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var clsx = require('clsx');
 require('../../../Icons/index.js');
 var styles = require('./Close.module.css');
 var Close$1 = require('../../../Icons/Close.js');
@@ -8,16 +9,18 @@ var Close$1 = require('../../../Icons/Close.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var Close = function Close(_ref) {
-  var onClick = _ref.onClick,
+  var className = _ref.className,
+    onClick = _ref.onClick,
     ariaLabel = _ref["aria-label"];
   return /*#__PURE__*/React__default.default.createElement("button", {
     type: "button",
     onClick: onClick,
     "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Close",
-    className: styles__default.default["close-button"]
+    className: clsx__default.default(styles__default.default["close-button"], className)
   }, /*#__PURE__*/React__default.default.createElement(Close$1.Close, {
     width: 18,
     height: 18

package/Modal/components/Close/index.props.d.ts

@@ -1,4 +1,5 @@
 export type CloseButtonProps = {
+    className?: string;
     onClick?: () => void;
     "aria-label"?: string;
 };

package/Modal/components/Footer/Footer.module.css

@@ -0,0 +1,10 @@
+.root {
+  align-items: center;
+  border-top: var(--border-width-hairline) solid var(--component-modal-border);
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  gap: var(--space-3);
+  justify-content: flex-end;
+  padding: var(--space-4) var(--space-5);
+}

package/Modal/components/Footer/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from "react";
+import type { FooterProps } from "./index.props";
+export declare const Footer: FC<FooterProps>;

package/Modal/components/Footer/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var styles = require('./Footer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var Footer = function Footer(_a) {
+  var children = _a.children,
+    className = _a.className,
+    props = tslib.__rest(_a, ["children", "className"]);
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, props, {
+    className: clsx__default.default(styles__default.default.root, className)
+  }), children);
+};
+
+exports.Footer = Footer;

package/Modal/components/Footer/index.props.d.ts

@@ -0,0 +1 @@
+export type { ModalFooterProps as FooterProps } from "../../index.props";

package/Modal/components/Header/Header.module.css

@@ -0,0 +1,32 @@
+.root {
+  align-items: center;
+  border-bottom: var(--border-width-hairline) solid var(--component-modal-border);
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-5);
+}
+.root_overlay {
+  align-items: flex-start;
+  background: transparent;
+  border-bottom: none;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+.root_overlay > * {
+  pointer-events: auto;
+}
+
+.close {
+  margin-left: auto;
+}
+.root_overlay .close {
+  background-color: var(--component-modal-bg);
+  border-radius: var(--component-modal-radius);
+  box-shadow: var(--shadow-raised);
+}

package/Modal/components/Header/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from "react";
+import type { HeaderProps } from "./index.props";
+export declare const Header: FC<HeaderProps>;

package/Modal/components/Header/index.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var tslib = require('tslib');
+var React = require('react');
+var clsx = require('clsx');
+var context = require('../../context.js');
+var index = require('../Close/index.js');
+var styles = require('./Header.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var Header = function Header(_a) {
+  var children = _a.children,
+    className = _a.className,
+    _a$overlay = _a.overlay,
+    overlay = _a$overlay === void 0 ? false : _a$overlay,
+    _a$closeAriaLabel = _a.closeAriaLabel,
+    closeAriaLabel = _a$closeAriaLabel === void 0 ? "Close modal" : _a$closeAriaLabel,
+    props = tslib.__rest(_a, ["children", "className", "overlay", "closeAriaLabel"]);
+  var _useModalContext = context.useModalContext(),
+    onClose = _useModalContext.onClose;
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, props, {
+    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default({}, styles__default.default.root_overlay, overlay), className)
+  }), children, /*#__PURE__*/React__default.default.createElement(index.Close, {
+    className: styles__default.default.close,
+    onClick: onClose,
+    "aria-label": closeAriaLabel
+  }));
+};
+
+exports.Header = Header;

package/Modal/components/Header/index.props.d.ts

@@ -0,0 +1 @@
+export type { ModalHeaderProps as HeaderProps } from "../../index.props";

package/Modal/components/Title/index.js

@@ -1,23 +1,36 @@
 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
+var clsx = require('clsx');
 var index = require('../../../Typography/index.js');
+var context = require('../../context.js');
 var styles = require('./Title.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var Title = function Title(_ref) {
-  var children = _ref.children;
+var Title = function Title(_a) {
+  var children = _a.children,
+    className = _a.className,
+    props = tslib.__rest(_a, ["children", "className"]);
+  var _useModalContext = context.useModalContext(),
+    titleId = _useModalContext.titleId,
+    registerTitle = _useModalContext.registerTitle;
+  React.useEffect(function () {
+    return registerTitle();
+  }, [registerTitle]);
   return /*#__PURE__*/React__default.default.createElement(index.Typography, {
-    tag: "h3",
-    size: "h3",
+    tag: "h4",
+    size: "h4",
     className: styles__default.default.title
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: styles__default.default.wrapper
-  }, children));
+  }, /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, props, {
+    id: titleId,
+    className: clsx__default.default(styles__default.default.wrapper, className)
+  }), children));
 };
 
 exports.Title = Title;

package/Modal/components/Title/index.props.d.ts

@@ -1,2 +1 @@
-import type { PropsWithChildren } from "react";
-export type TitleProps = PropsWithChildren;
+export type { ModalTitleProps as TitleProps } from "../../index.props";

package/Modal/context.d.ts

@@ -0,0 +1,9 @@
+type ModalContextValue = {
+    onClose: () => void;
+    titleId: string;
+    registerTitle: () => () => void;
+    container: HTMLDivElement | null;
+};
+export declare const ModalContext: import("react").Context<ModalContextValue | null>;
+export declare const useModalContext: () => ModalContextValue;
+export {};

package/Modal/context.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+
+var ModalContext = /*#__PURE__*/React.createContext(null);
+var useModalContext = function useModalContext() {
+  var context = React.useContext(ModalContext);
+  if (!context) {
+    throw new Error("Modal compound components must be used inside <Modal>");
+  }
+  return context;
+};
+
+exports.ModalContext = ModalContext;
+exports.useModalContext = useModalContext;

package/Modal/index.d.ts

@@ -1,3 +1,13 @@
-import type { FC, PropsWithChildren } from "react";
+import React from "react";
+import { Body } from "./components/Body";
+import { Footer } from "./components/Footer";
+import { Header } from "./components/Header";
+import { Title } from "./components/Title";
 import type { ModalProps } from "./index.props";
-export declare const Modal: FC<PropsWithChildren<ModalProps>>;
+export declare const Modal: React.FC<React.PropsWithChildren<ModalProps>> & {
+    Header: React.FC<import("./index.props").ModalHeaderProps>;
+    Title: React.FC<import("./index.props").ModalTitleProps>;
+    Body: React.FC<import("./index.props").ModalBodyProps>;
+    Footer: React.FC<import("./index.props").ModalFooterProps>;
+};
+export { Header as ModalHeader, Title as ModalTitle, Body as ModalBody, Footer as ModalFooter, };

package/Modal/index.js

@@ -1,38 +1,91 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var clsx = require('clsx');
-var index$1 = require('../hooks/useScrollLock/index.js');
-var index$2 = require('../hooks/useTrapFocus/index.js');
-var index$3 = require('../Portal/index.js');
-var index = require('../hooks/useMediaSizes/index.js');
-var index$6 = require('./components/Content/index.js');
-var index$5 = require('./components/Close/index.js');
-var index$4 = require('./components/Title/index.js');
+var index$5 = require('../hooks/useScrollLock/index.js');
+var index$6 = require('../hooks/useTrapFocus/index.js');
+var index$9 = require('../Portal/index.js');
+var index$4 = require('../hooks/useMediaSizes/index.js');
+var index = require('./components/Body/index.js');
+var index$7 = require('./components/Close/index.js');
+var index$8 = require('./components/Content/index.js');
+var index$1 = require('./components/Footer/index.js');
+var index$2 = require('./components/Header/index.js');
+var index$3 = require('./components/Title/index.js');
+var context = require('./context.js');
+var useModalStack = require('./useModalStack.js');
 var styles = require('./Modal.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
+var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var Modal = function Modal(_ref) {
+var compoundParts = [index$2.Header, index.Body, index$1.Footer];
+var isCompoundPart = function isCompoundPart(child) {
+  return /*#__PURE__*/React.isValidElement(child) && compoundParts.includes(child.type);
+};
+var hasHeader = function hasHeader(children) {
+  return React.Children.toArray(children).some(function (child) {
+    return /*#__PURE__*/React.isValidElement(child) && child.type === index$2.Header;
+  });
+};
+var ModalRoot = function ModalRoot(_ref) {
   var children = _ref.children,
     className = _ref.className,
     onClose = _ref.onClose,
-    title = _ref.title;
+    title = _ref.title,
+    _ref$withinParent = _ref.withinParent,
+    withinParent = _ref$withinParent === void 0 ? false : _ref$withinParent;
   var modalRef = React.useRef(null);
-  var isDesktop = index.useMediaSizes(function (bp) {
-    return bp.up("md");
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    container = _useState2[0],
+    setContainer = _useState2[1];
+  var parentModal = React.useContext(context.ModalContext);
+  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("lg");
   });
-  index$1.useScrollLock();
-  index$2.useTrapFocus(modalRef);
+  var titleId = React.useId();
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    titleCount = _useState4[0],
+    setTitleCount = _useState4[1];
+  var isTopmost = useModalStack.useModalStack(titleId);
+  index$5.useScrollLock();
+  index$6.useTrapFocus(modalRef, isTopmost);
   var handleClose = React.useCallback(function () {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
+  var registerTitle = React.useCallback(function () {
+    setTitleCount(function (count) {
+      return count + 1;
+    });
+    return function () {
+      return setTitleCount(function (count) {
+        return count - 1;
+      });
+    };
+  }, []);
+  var setWrapperRef = React.useCallback(function (node) {
+    modalRef.current = node;
+    setContainer(node);
+  }, []);
+  var contextValue = React.useMemo(function () {
+    return {
+      onClose: handleClose,
+      titleId: titleId,
+      registerTitle: registerTitle,
+      container: container
+    };
+  }, [handleClose, titleId, registerTitle, container]);
   var handleOverlayClick = React.useCallback(function (event) {
     if (event.target === event.currentTarget) {
       handleClose();
@@ -40,7 +93,7 @@ var Modal = function Modal(_ref) {
   }, [handleClose]);
   React.useEffect(function () {
     var handleEscape = function handleEscape(event) {
-      if (event.key === "Escape") {
+      if (event.key === "Escape" && isTopmost()) {
         handleClose();
       }
     };
@@ -48,30 +101,49 @@ var Modal = function Modal(_ref) {
     return function () {
       return document.removeEventListener("keydown", handleEscape);
     };
-  }, [handleClose]);
-  return /*#__PURE__*/React__default.default.createElement(index$3.Portal, null, /*#__PURE__*/React__default.default.createElement("div", {
-    className: styles__default.default.root,
+  }, [handleClose, isTopmost]);
+  var isCompound = React.Children.toArray(children).some(isCompoundPart);
+  var standaloneClose = /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default["close-wrapper"]
+  }, /*#__PURE__*/React__default.default.createElement(index$7.Close, {
+    onClick: handleClose,
+    "aria-label": "Close modal"
+  }));
+  var content;
+  if (isCompound) {
+    content = /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, !hasHeader(children) && standaloneClose, children);
+  } else {
+    content = /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, title ? (/*#__PURE__*/React__default.default.createElement(index$2.Header, null, /*#__PURE__*/React__default.default.createElement(index$3.Title, null, title))) : standaloneClose, /*#__PURE__*/React__default.default.createElement(index$8.Content, null, children));
+  }
+  // Wait for the parent window node instead of flashing in document.body.
+  if (withinParent && parentModal && !parentContainer) return null;
+  return /*#__PURE__*/React__default.default.createElement(index$9.Portal, {
+    node: parentContainer
+  }, /*#__PURE__*/React__default.default.createElement(context.ModalContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default({}, styles__default.default.root_contained, isContained)),
     role: "dialog",
     "aria-modal": "true",
-    "aria-labelledby": title ? "modal-title" : undefined
+    "aria-labelledby": titleCount > 0 ? titleId : undefined
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: styles__default.default["modal-overlay"],
     onClick: handleOverlayClick,
     "aria-hidden": "true"
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(styles__default.default["modal-wrapper"], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["modal-wrapper_desktop"], isDesktop), styles__default.default["modal-wrapper_mobile"], !isDesktop), className),
-    ref: modalRef
-  }, title ? (/*#__PURE__*/React__default.default.createElement("div", {
-    className: styles__default.default["title-wrapper"]
-  }, /*#__PURE__*/React__default.default.createElement(index$4.Title, null, title), /*#__PURE__*/React__default.default.createElement(index$5.Close, {
-    onClick: handleClose,
-    "aria-label": "Close modal"
-  }))) : (/*#__PURE__*/React__default.default.createElement("div", {
-    className: styles__default.default["close-wrapper"]
-  }, /*#__PURE__*/React__default.default.createElement(index$5.Close, {
-    onClick: handleClose,
-    "aria-label": "Close modal"
-  }))), /*#__PURE__*/React__default.default.createElement(index$6.Content, null, children))));
+    className: clsx__default.default(styles__default.default["modal-wrapper"], _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["modal-wrapper_desktop"], isDesktop), styles__default.default["modal-wrapper_mobile"], !isDesktop), styles__default.default["modal-wrapper_contained"], isContained), className),
+    ref: setWrapperRef
+  }, content))));
 };
+var Modal = Object.assign(ModalRoot, {
+  Header: index$2.Header,
+  Title: index$3.Title,
+  Body: index.Body,
+  Footer: index$1.Footer
+});
 
+exports.ModalBody = index.Body;
+exports.ModalFooter = index$1.Footer;
+exports.ModalHeader = index$2.Header;
+exports.ModalTitle = index$3.Title;
 exports.Modal = Modal;

package/Modal/index.props.d.ts

@@ -1,5 +1,30 @@
+import type { HTMLAttributes } from "react";
 export type ModalProps = {
     className?: string;
     onClose?: () => void;
+    /**
+     * Legacy shorthand. Used only when children do not contain
+     * `Modal.Header`, `Modal.Body` or `Modal.Footer`.
+     */
     title?: string;
+    /**
+     * Renders the modal inside the parent modal window: the overlay covers
+     * only the parent, not the whole viewport. Works when the modal is
+     * rendered inside another `Modal`.
+     */
+    withinParent?: boolean;
 };
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Places the header above the body instead of before it.
+     * The header becomes transparent and the body takes the whole modal.
+     */
+    overlay?: boolean;
+    closeAriaLabel?: string;
+}
+export type ModalTitleProps = HTMLAttributes<HTMLDivElement>;
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Removes the body padding so content goes edge to edge. */
+    bleed?: boolean;
+}
+export type ModalFooterProps = HTMLAttributes<HTMLDivElement>;

package/Modal/useModalStack.d.ts

@@ -0,0 +1,2 @@
+/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
+export declare const useModalStack: (id: string) => () => boolean;

package/Modal/useModalStack.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+
+var stack = [];
+/** Tracks open modals so only the topmost one reacts to Escape and Tab. */
+var useModalStack = function useModalStack(id) {
+  React.useEffect(function () {
+    stack.push(id);
+    return function () {
+      var index = stack.lastIndexOf(id);
+      if (index !== -1) stack.splice(index, 1);
+    };
+  }, [id]);
+  return React.useCallback(function () {
+    return stack[stack.length - 1] === id;
+  }, [id]);
+};
+
+exports.useModalStack = useModalStack;

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;