@lidofinance/lido-app-ui 1.15.0 → 1.16.0

package/README.md

@@ -39,7 +39,6 @@ Next.js 13+ — `next/link` renders its own `<a>` and forwards its ref, so pass
 ```tsx
 import NextLink from 'next/link'
 import { LinkProvider } from '@lidofinance/lido-app-ui'
-
 ;<LinkProvider component={NextLink}>{children}</LinkProvider>
 ```
 
@@ -117,7 +116,7 @@ Deprecated aliases: `GroupName` (use `Caption`), variants `richInput` (use `amou
 
 ## Customization
 
-Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing, `--lido-app-ui-shadow-dropdown`) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-popover` (it reads color tokens) are redeclared on every theme scope, so override them on `:root, [data-lido-theme]` or per theme, not on `:root` alone:
+Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-default` (it reads color tokens) are redeclared on every theme scope, so override them on `:root, [data-lido-theme]` or per theme, not on `:root` alone:
 
 ```css
 :root {
@@ -159,20 +158,19 @@ export default {
 
 ## Layout
 
-Breakpoints are desktop-first: `-down` is `(width < N)`, `-up` is `(width >= N)`. The queries use range syntax (Safari 16.4+, Chrome 104+, Firefox 63+).
+Breakpoints are desktop-first: `-down` is `(width <= N)`, `-up` is `(width > N)`. The queries use range syntax (Safari 16.4+, Chrome 104+, Firefox 63+).
 
-| Name  | N      |
-| ----- | ------ |
-| `lg`  | 1280px |
-| `ml`  | 1024px |
-| `md`  | 900px  |
-| `sm`  | 768px  |
-| `xs`  | 600px  |
-| `xxs` | 400px  |
+| Name | N      |
+| ---- | ------ |
+| `xl` | 1280px |
+| `lg` | 1024px |
+| `md` | 900px  |
+| `sm` | 600px  |
+| `xs` | 400px  |
 
-Two component breakpoints sit outside the scale: the Sidebar drawer at `--lido-app-ui-breakpoint-sidebar-down` / `-up` (1280px, `sidebarBreakpointWidth`) and Logo `auto` dropping its wordmark at `--lido-app-ui-breakpoint-logo-down` / `-up` (1024px, `logoBreakpointWidth`).
+The Sidebar drawer and Logo `auto` switch at `lg`. In JS, `downQuery('md')` / `upQuery('md')` build the matching `matchMedia` strings.
 
-In CSS use `@media (--lido-app-ui-breakpoint-md-down)`. Responsive props such as `Stack` `gap` take `{ base, mdDown, smDown, … }` (bare `md`/`sm` are aliases), where a key applies below that width:
+In CSS use `@media (--lido-app-ui-breakpoint-md-down)`. Responsive props such as `Stack` `gap` take `{ base, mdDown, smDown, … }` (bare `md`/`sm` are aliases), where a key applies at that width and below:
 
 ```tsx
 <Stack gap={{ base: 24, smDown: 12 }}>{children}</Stack>

package/dist/README.md

@@ -39,7 +39,6 @@ Next.js 13+ — `next/link` renders its own `<a>` and forwards its ref, so pass
 ```tsx
 import NextLink from 'next/link'
 import { LinkProvider } from '@lidofinance/lido-app-ui'
-
 ;<LinkProvider component={NextLink}>{children}</LinkProvider>
 ```
 
@@ -117,7 +116,7 @@ Deprecated aliases: `GroupName` (use `Caption`), variants `richInput` (use `amou
 
 ## Customization
 
-Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing, `--lido-app-ui-shadow-dropdown`) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-popover` (it reads color tokens) are redeclared on every theme scope, so override them on `:root, [data-lido-theme]` or per theme, not on `:root` alone:
+Override any token after importing the stylesheet. Non-color tokens (radii, typography, z-index, spacing) are theme-independent and live on `:root`. Color tokens and `--lido-app-ui-shadow-default` (it reads color tokens) are redeclared on every theme scope, so override them on `:root, [data-lido-theme]` or per theme, not on `:root` alone:
 
 ```css
 :root {
@@ -159,20 +158,19 @@ export default {
 
 ## Layout
 
-Breakpoints are desktop-first: `-down` is `(width < N)`, `-up` is `(width >= N)`. The queries use range syntax (Safari 16.4+, Chrome 104+, Firefox 63+).
+Breakpoints are desktop-first: `-down` is `(width <= N)`, `-up` is `(width > N)`. The queries use range syntax (Safari 16.4+, Chrome 104+, Firefox 63+).
 
-| Name  | N      |
-| ----- | ------ |
-| `lg`  | 1280px |
-| `ml`  | 1024px |
-| `md`  | 900px  |
-| `sm`  | 768px  |
-| `xs`  | 600px  |
-| `xxs` | 400px  |
+| Name | N      |
+| ---- | ------ |
+| `xl` | 1280px |
+| `lg` | 1024px |
+| `md` | 900px  |
+| `sm` | 600px  |
+| `xs` | 400px  |
 
-Two component breakpoints sit outside the scale: the Sidebar drawer at `--lido-app-ui-breakpoint-sidebar-down` / `-up` (1280px, `sidebarBreakpointWidth`) and Logo `auto` dropping its wordmark at `--lido-app-ui-breakpoint-logo-down` / `-up` (1024px, `logoBreakpointWidth`).
+The Sidebar drawer and Logo `auto` switch at `lg`. In JS, `downQuery('md')` / `upQuery('md')` build the matching `matchMedia` strings.
 
-In CSS use `@media (--lido-app-ui-breakpoint-md-down)`. Responsive props such as `Stack` `gap` take `{ base, mdDown, smDown, … }` (bare `md`/`sm` are aliases), where a key applies below that width:
+In CSS use `@media (--lido-app-ui-breakpoint-md-down)`. Responsive props such as `Stack` `gap` take `{ base, mdDown, smDown, … }` (bare `md`/`sm` are aliases), where a key applies at that width and below:
 
 ```tsx
 <Stack gap={{ base: 24, smDown: 12 }}>{children}</Stack>

package/dist/cjs/hidden/Hidden.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hidden.cjs","sources":["../../../src/hidden/Hidden.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport { capitalize, type Breakpoint } from '../utils'\nimport styles from './Hidden.module.css'\n\nexport type HiddenDataTestId = { root?: string }\n\nexport type HiddenProps = HTMLAttributes<HTMLElement> & {\n  /** Hides below this breakpoint's width. */\n  below?: Breakpoint\n  /** Hides at this breakpoint's width and above. */\n  above?: Breakpoint\n  /** Wrapper tag; `span` is valid inside text, use `div` around block content. */\n  as?: 'span' | 'div'\n  dataTestId?: HiddenDataTestId\n}\n\n/** CSS-only responsive visibility, safe for SSR. Wrapper is `display: contents` while visible. Inside a `<p>` (Typography `body`, `description`...) children must be phrasing content too: a block child closes the paragraph in server HTML and breaks hydration. */\nexport const Hidden = forwardRef<HTMLElement, HiddenProps>(\n  (\n    {\n      as: Tag = 'span' as ElementType,\n      below,\n      above,\n      className,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Tag\n      ref={ref}\n      className={cn(\n        styles.root,\n        below && styles[`below${capitalize(below)}`],\n        above && styles[`above${capitalize(above)}`],\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      {...rest}\n    />\n  ),\n)\n\nHidden.displayName = 'Hidden'\n"],"names":["Hidden","forwardRef","_ref","ref","as","Tag","below","above","className","dataTestId","rest","_jsx","cn","styles","root","capitalize","displayName"],"mappings":";;;;;;;;;;AAmBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EASEC,GAAG,KAAA;EAAA,IARH;IACEC,EAAE,EAAEC,GAAG,GAAG,MAAqB;IAC/BC,KAAK;IACLC,KAAK;IACLC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAR,IAAA,CAAA;EAAA,oBAGDS,cAAA,CAACN,GAAG,EAAA;AACFF,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,SAAS,EAAEI,EAAE,CACXC,aAAM,CAACC,IAAI,EACXR,KAAK,IAAIO,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACT,KAAK,CAAC,CAAE,CAAA,CAAC,EAC5CC,KAAK,IAAIM,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACR,KAAK,CAAC,CAAA,CAAE,CAAC,EAC5CC,SACF,CAAE;IACF,aAAaC,EAAAA,UAAU,EAAEK,IAAK;IAAA,GAC1BJ,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA,CAEN,EAAC;AAEDV,MAAM,CAACgB,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Hidden.cjs","sources":["../../../src/hidden/Hidden.tsx"],"sourcesContent":["import { forwardRef, type ElementType, type HTMLAttributes } from 'react'\n\nimport cn from 'classnames'\n\nimport { capitalize, type Breakpoint } from '../utils'\nimport styles from './Hidden.module.css'\n\nexport type HiddenDataTestId = { root?: string }\n\nexport type HiddenProps = HTMLAttributes<HTMLElement> & {\n  /** Hides at this breakpoint's width and below. */\n  below?: Breakpoint\n  /** Hides above this breakpoint's width. */\n  above?: Breakpoint\n  /** Wrapper tag; `span` is valid inside text, use `div` around block content. */\n  as?: 'span' | 'div'\n  dataTestId?: HiddenDataTestId\n}\n\n/** CSS-only responsive visibility, safe for SSR. Wrapper is `display: contents` while visible. Inside a `<p>` (Typography `body`, `description`...) children must be phrasing content too: a block child closes the paragraph in server HTML and breaks hydration. */\nexport const Hidden = forwardRef<HTMLElement, HiddenProps>(\n  (\n    {\n      as: Tag = 'span' as ElementType,\n      below,\n      above,\n      className,\n      dataTestId,\n      ...rest\n    },\n    ref,\n  ) => (\n    <Tag\n      ref={ref}\n      className={cn(\n        styles.root,\n        below && styles[`below${capitalize(below)}`],\n        above && styles[`above${capitalize(above)}`],\n        className,\n      )}\n      data-testid={dataTestId?.root}\n      {...rest}\n    />\n  ),\n)\n\nHidden.displayName = 'Hidden'\n"],"names":["Hidden","forwardRef","_ref","ref","as","Tag","below","above","className","dataTestId","rest","_jsx","cn","styles","root","capitalize","displayName"],"mappings":";;;;;;;;;;AAmBA;AACO,MAAMA,MAAM,gBAAGC,gBAAU,CAC9B,CAAAC,IAAA,EASEC,GAAG,KAAA;EAAA,IARH;IACEC,EAAE,EAAEC,GAAG,GAAG,MAAqB;IAC/BC,KAAK;IACLC,KAAK;IACLC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACL,GAAC,GAAAR,IAAA,CAAA;EAAA,oBAGDS,cAAA,CAACN,GAAG,EAAA;AACFF,IAAAA,GAAG,EAAEA,GAAI;AACTK,IAAAA,SAAS,EAAEI,EAAE,CACXC,aAAM,CAACC,IAAI,EACXR,KAAK,IAAIO,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACT,KAAK,CAAC,CAAE,CAAA,CAAC,EAC5CC,KAAK,IAAIM,aAAM,CAAC,CAAQE,KAAAA,EAAAA,qBAAU,CAACR,KAAK,CAAC,CAAA,CAAE,CAAC,EAC5CC,SACF,CAAE;IACF,aAAaC,EAAAA,UAAU,EAAEK,IAAK;IAAA,GAC1BJ,IAAAA;AAAI,GACT,CAAC,CAAA;AAAA,CAEN,EAAC;AAEDV,MAAM,CAACgB,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/hidden/Hidden.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"root":"Hidden-module_root__9hkfD","belowLg":"Hidden-module_belowLg__zbI6R","belowMl":"Hidden-module_belowMl__vJPhT","belowMd":"Hidden-module_belowMd__lVH9f","belowSm":"Hidden-module_belowSm__cnb9B","belowXs":"Hidden-module_belowXs__ipzM-","belowXxs":"Hidden-module_belowXxs__BkbGR","aboveLg":"Hidden-module_aboveLg__G7kJk","aboveMl":"Hidden-module_aboveMl__QadhV","aboveMd":"Hidden-module_aboveMd__1yfOJ","aboveSm":"Hidden-module_aboveSm__6-6D8","aboveXs":"Hidden-module_aboveXs__TxT4e","aboveXxs":"Hidden-module_aboveXxs__gRrwE"};
+const styles = {"root":"Hidden-module_root__9hkfD","belowXl":"Hidden-module_belowXl__xHCwc","belowLg":"Hidden-module_belowLg__zbI6R","belowMd":"Hidden-module_belowMd__lVH9f","belowSm":"Hidden-module_belowSm__cnb9B","belowXs":"Hidden-module_belowXs__ipzM-","aboveXl":"Hidden-module_aboveXl__LnW79","aboveLg":"Hidden-module_aboveLg__G7kJk","aboveMd":"Hidden-module_aboveMd__1yfOJ","aboveSm":"Hidden-module_aboveSm__6-6D8","aboveXs":"Hidden-module_aboveXs__TxT4e"};
 
 module.exports = styles;
 //# sourceMappingURL=Hidden.module.css.cjs.map

package/dist/cjs/index.cjs

@@ -242,8 +242,8 @@ exports.useFocusTrap = useFocusTrap.useFocusTrap;
 exports.useOutsideClick = useOutsideClick.useOutsideClick;
 exports.breakpointWidths = breakpoints.breakpointWidths;
 exports.breakpoints = breakpoints.breakpoints;
-exports.logoBreakpointWidth = breakpoints.logoBreakpointWidth;
-exports.sidebarBreakpointWidth = breakpoints.sidebarBreakpointWidth;
+exports.downQuery = breakpoints.downQuery;
+exports.upQuery = breakpoints.upQuery;
 exports.spaces = responsive.spaces;
 exports.TokenIcon = TokenIcon.TokenIcon;
 exports.isTokenIcon = TokenIcon.isTokenIcon;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import { ThemeToggler as SharedThemeToggler } from '@lidofinance/lido-shared-ui'\n\nexport * from './icons'\n\nexport * from './accordion'\nexport * from './address'\nexport * from './address-button'\nexport * from './badge'\nexport * from './banner'\nexport * from './breadcrumbs'\nexport * from './button'\nexport * from './card'\nexport * from './checkbox'\nexport * from './copy'\nexport * from './counter'\nexport * from './data-list'\nexport * from './disclaimer'\nexport * from './divider'\nexport * from './error-page'\nexport * from './footer'\nexport * from './grid'\nexport * from './header'\nexport * from './hex'\nexport * from './hidden'\nexport {\n  Portal,\n  useBodyScrollLock,\n  useEscape,\n  useFocusTrap,\n  useOutsideClick,\n} from './hooks'\nexport type { FocusTrapOptions, PortalProps } from './hooks'\nexport * from './icon-button'\nexport * from './identicon'\nexport * from './info-tooltip'\nexport * from './input'\nexport * from './link-provider'\nexport * from './logo'\nexport * from './message-box'\nexport * from './modal'\nexport * from './nav-link'\nexport * from './notification'\nexport * from './page-layout'\nexport * from './pagination'\nexport * from './popover'\nexport * from './radio-button'\nexport * from './rich-input'\nexport * from './section-title'\nexport * from './segmented-control'\nexport * from './sidebar'\nexport * from './skeleton'\nexport * from './skip-link'\nexport * from './slider'\nexport * from './small-card'\nexport * from './stack'\nexport * from './stat-item'\nexport * from './switch'\nexport * from './tabs'\nexport * from './tag'\nexport * from './text-link'\nexport * from './theme-switcher'\nexport * from './token-amount'\nexport * from './token-selector'\nexport * from './tooltip'\nexport * from './tx-status'\nexport * from './typography'\nexport {\n  breakpoints,\n  breakpointWidths,\n  logoBreakpointWidth,\n  sidebarBreakpointWidth,\n  spaces,\n} from './utils'\nexport type { Breakpoint, Responsive, Space } from './utils'\n\n// Everything lido-shared-ui exposes is re-exported, so app products get the\n// same non-production banner and theming primitives as the landing. Their\n// styles come in through src/styles/global.css.\nexport * from '@lidofinance/lido-shared-ui'\n\n/** Unstyled in app-ui (relies on `--lido-ui-*` tokens); prefer `ThemeSwitcher`. */\nexport const ThemeToggler = SharedThemeToggler\n"],"names":["ThemeToggler","SharedThemeToggler"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA;AACO,MAAMA,YAAY,GAAGC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import { ThemeToggler as SharedThemeToggler } from '@lidofinance/lido-shared-ui'\n\nexport * from './icons'\n\nexport * from './accordion'\nexport * from './address'\nexport * from './address-button'\nexport * from './badge'\nexport * from './banner'\nexport * from './breadcrumbs'\nexport * from './button'\nexport * from './card'\nexport * from './checkbox'\nexport * from './copy'\nexport * from './counter'\nexport * from './data-list'\nexport * from './disclaimer'\nexport * from './divider'\nexport * from './error-page'\nexport * from './footer'\nexport * from './grid'\nexport * from './header'\nexport * from './hex'\nexport * from './hidden'\nexport {\n  Portal,\n  useBodyScrollLock,\n  useEscape,\n  useFocusTrap,\n  useOutsideClick,\n} from './hooks'\nexport type { FocusTrapOptions, PortalProps } from './hooks'\nexport * from './icon-button'\nexport * from './identicon'\nexport * from './info-tooltip'\nexport * from './input'\nexport * from './link-provider'\nexport * from './logo'\nexport * from './message-box'\nexport * from './modal'\nexport * from './nav-link'\nexport * from './notification'\nexport * from './page-layout'\nexport * from './pagination'\nexport * from './popover'\nexport * from './radio-button'\nexport * from './rich-input'\nexport * from './section-title'\nexport * from './segmented-control'\nexport * from './sidebar'\nexport * from './skeleton'\nexport * from './skip-link'\nexport * from './slider'\nexport * from './small-card'\nexport * from './stack'\nexport * from './stat-item'\nexport * from './switch'\nexport * from './tabs'\nexport * from './tag'\nexport * from './text-link'\nexport * from './theme-switcher'\nexport * from './token-amount'\nexport * from './token-selector'\nexport * from './tooltip'\nexport * from './tx-status'\nexport * from './typography'\nexport {\n  breakpoints,\n  breakpointWidths,\n  downQuery,\n  upQuery,\n  spaces,\n} from './utils'\nexport type { Breakpoint, Responsive, Space } from './utils'\n\n// Everything lido-shared-ui exposes is re-exported, so app products get the\n// same non-production banner and theming primitives as the landing. Their\n// styles come in through src/styles/global.css.\nexport * from '@lidofinance/lido-shared-ui'\n\n/** Unstyled in app-ui (relies on `--lido-ui-*` tokens); prefer `ThemeSwitcher`. */\nexport const ThemeToggler = SharedThemeToggler\n"],"names":["ThemeToggler","SharedThemeToggler"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA;AACO,MAAMA,YAAY,GAAGC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}