@papillonarts/components 0.44.0 → 0.46.0

package/build/Modern/AvatarStack/AvatarStack.module.scss

@@ -0,0 +1,270 @@
+/* stylelint-disable selector-max-specificity, custom-property-pattern, no-descending-specificity, selector-not-notation */
+.AvatarStack {
+  --avatar-border-width: 1px;
+  --mask-size: calc(100% + (var(--avatar-border-width) * 2));
+  --mask-start: -1;
+  --opacity-step: 15%;
+
+  position: relative;
+  display: flex;
+  min-width: var(--avatar-stack-size);
+  height: var(--avatar-stack-size);
+  isolation: isolate;
+
+  &:where([data-variant='cascade']) {
+    --overlap-size: calc(var(--avatar-stack-size) * 0.55);
+    --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85);
+  }
+
+  &:where([data-variant='stack']) {
+    --overlap-size: calc(var(--avatar-stack-size) * 0.55);
+    --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55);
+  }
+
+  &:where([data-responsive]) {
+    @media screen and (--viewportRange-narrow) {
+      --avatar-stack-size: var(--stackSize-narrow);
+    }
+
+    @media screen and (--viewportRange-regular) {
+      --avatar-stack-size: var(--stackSize-regular);
+    }
+
+    @media screen and (--viewportRange-wide) {
+      --avatar-stack-size: var(--stackSize-wide);
+    }
+  }
+
+  &:where([data-avatar-count='1'][data-shape='circle']) {
+    .AvatarItem:where([data-component='Avatar']) {
+      /* stylelint-disable-next-line primer/box-shadow */
+      box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);
+    }
+  }
+
+  &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: 1px 0 rgb(0, 0, 0, 1);
+  }
+
+  &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: -1px 0 rgb(0, 0, 0, 1);
+  }
+
+  &:where([data-avatar-count='2']) {
+    /*
+    MIN-WIDTH CALC FORMULA EXPLAINED:
+    avatar size ➡️ var(--avatar-stack-size)
+    plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)
+    */
+    min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)));
+  }
+
+  &:where([data-avatar-count='3'][data-variant='cascade']) {
+    /*
+    MIN-WIDTH CALC FORMULA EXPLAINED:
+    avatar size ➡️ var(--avatar-stack-size)
+    plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)
+    plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)
+    */
+    min-width: calc(
+      var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +
+        (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))
+    );
+  }
+
+  &:where([data-avatar-count='3'][data-variant='stack']) {
+    /*
+    MIN-WIDTH CALC FORMULA EXPLAINED:
+    avatar size ➡️ var(--avatar-stack-size)
+    plus the visible part of the 2nd avatar & 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 2
+    */
+    min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2);
+  }
+
+  &:where([data-avatar-count='3+'][data-variant='cascade']) {
+    /*
+    MIN-WIDTH CALC FORMULA EXPLAINED:
+    avatar size ➡️ var(--avatar-stack-size)
+    plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)
+    plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2
+    */
+    min-width: calc(
+      var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +
+        (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2
+    );
+  }
+
+  &:where([data-avatar-count='3+'][data-variant='stack']) {
+    /*
+    MIN-WIDTH CALC FORMULA EXPLAINED:
+    avatar size ➡️ var(--avatar-stack-size)
+    plus the visible part of the 2nd to 4th avatars ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 3
+    */
+    min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3);
+
+    --overlap-size: var(--overlap-size-avatar-three-plus);
+  }
+
+  &:where([data-align-right]) {
+    --mask-start: 1;
+
+    direction: rtl;
+  }
+}
+
+.AvatarStackBody {
+  position: absolute;
+  display: flex;
+
+  &:where([data-disable-expand]) {
+    position: relative;
+  }
+}
+
+.AvatarItem {
+  --avatarSize-regular: var(--avatar-stack-size);
+
+  position: relative;
+  display: flex;
+  width: var(--avatar-stack-size);
+  height: var(--avatar-stack-size);
+  overflow: hidden;
+  flex-shrink: 0;
+  transition:
+    margin 0.2s ease-in-out,
+    opacity 0.2s ease-in-out,
+    mask-position 0.2s ease-in-out,
+    mask-size 0.2s ease-in-out;
+
+  .AvatarStack:where([data-shape='circle']) &:is(img) {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: 0 0 0 var(--avatar-border-width) transparent;
+  }
+
+  &:not([data-component='Avatar']):not(:has([data-square])) {
+    border-radius: 50%;
+  }
+
+  .AvatarStack:where([data-shape='square']) &:is(img) {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: 1px 0 rgb(255, 255, 255, 1);
+  }
+
+  .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: -1px 0 rgb(255, 255, 255, 1);
+  }
+
+  &:first-child {
+    margin-inline-start: 0;
+  }
+
+  &:nth-child(n + 2) {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-inline-start: calc(var(--overlap-size) * -1);
+    mask-repeat: no-repeat, no-repeat;
+    mask-size:
+      var(--mask-size) var(--mask-size),
+      auto;
+    mask-composite: exclude;
+
+    /*
+    HORIZONTAL POSITION CALC FORMULA EXPLAINED:
+    width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)
+    multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)
+    subtract the avatar border width ➡️ var(--avatar-border-width)
+    */
+    mask-position:
+      calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,
+      0 0;
+
+    /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */
+    /* stylelint-disable-next-line primer/spacing */
+    padding: 0.1px;
+  }
+
+  /* Circular mask */
+  .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);
+  }
+
+  /* Square mask */
+  .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);
+  }
+
+  /* Cascade variant override for nth-child(n + 3) */
+  .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) {
+    --overlap-size: var(--overlap-size-avatar-three-plus);
+
+    /* stylelint-disable-next-line alpha-value-notation */
+    opacity: calc(100% - 2 * var(--opacity-step));
+  }
+
+  /* Cascade variant override for nth-child(n + 4) */
+  .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) {
+    /* stylelint-disable-next-line alpha-value-notation */
+    opacity: calc(100% - 3 * var(--opacity-step));
+  }
+
+  /* Cascade variant override for nth-child(n + 5) */
+  .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) {
+    /* stylelint-disable-next-line alpha-value-notation */
+    opacity: calc(100% - 4 * var(--opacity-step));
+  }
+
+  .AvatarStack:where([data-shape='square']) &:nth-child(1) {
+    z-index: 5;
+  }
+
+  .AvatarStack:where([data-shape='square']) &:nth-child(2) {
+    z-index: 4;
+  }
+
+  .AvatarStack:where([data-shape='square']) &:nth-child(3) {
+    z-index: 3;
+  }
+
+  .AvatarStack:where([data-shape='square']) &:nth-child(4) {
+    z-index: 2;
+  }
+
+  .AvatarStack:where([data-shape='square']) &:nth-child(5) {
+    z-index: 1;
+  }
+
+  &:nth-child(n + 6) {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+
+.AvatarStackBody:not([data-disable-expand]):hover,
+.AvatarStackBody:not([data-disable-expand]):focus-within {
+  width: auto;
+
+  .AvatarItem {
+    --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */
+
+    margin-inline-start: var(--base-size-4);
+    visibility: visible;
+    opacity: 1;
+
+    /*
+    HORIZONTAL POSITION CALC FORMULA EXPLAINED:
+    width of the full avatar ➡️ var(--avatar-stack-size)
+    multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)
+    */
+    mask-position:
+      calc(var(--avatar-stack-size) * var(--mask-start)) center,
+      0 0;
+
+    &:first-child {
+      margin-inline-start: 0;
+    }
+  }
+}

package/build/Modern/AvatarStack/__tests__/AvatarStack.doc.md

@@ -0,0 +1,194 @@
+# Features
+
+```
+AvatarStack all props and variants
+```
+
+## Props
+
+```typescript
+export interface AvatarStackProps {
+  alignRight?: boolean
+  disableExpand?: boolean
+  variant?: 'cascade' | 'stack'
+  shape?: 'circle' | 'square'
+  size?: number | ResponsiveValue<number>
+  className?: string
+  children: ReactNode
+  style?: CSSProperties
+}
+```
+
+## Variants
+
+```
+Default
+
+Align Left
+
+Align Right
+
+Disable Expand
+
+Custom Size
+
+Custom Size Responsive
+
+Custom Size on Children
+
+Square Shape
+
+Custom Size on Children Responsive
+
+With Single Avatar
+
+With Link Wrappers
+```
+
+### Default
+
+> AvatarStack default variant with cascade layout
+
+```tsx
+<AvatarStack size={20}>
+  <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+  <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+  <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+  <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+</AvatarStack>
+```
+
+### Align Left
+
+> AvatarStack aligned to the left (default behavior)
+
+```tsx
+<AvatarStack size={20}>
+  <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+  <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+  <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+  <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+</AvatarStack>
+```
+
+### Align Right
+
+> AvatarStack aligned to the right
+
+```tsx
+<AvatarStack size={20} alignRight>
+  <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+  <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+  <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+  <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+</AvatarStack>
+```
+
+### Disable Expand On Hover
+
+> AvatarStack with expansion on hover disabled
+
+```tsx
+<AvatarStack size={20} disableExpand>
+  <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+  <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+  <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+  <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+</AvatarStack>
+```
+
+### Custom Size On Parent
+
+> AvatarStack with custom avatar size
+
+```tsx
+<AvatarStack size={32}>
+  <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+  <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+  <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+  <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+</AvatarStack>
+```
+
+### Custom Size On Parent Responsive
+
+> AvatarStack with responsive avatar sizes
+
+```tsx
+<AvatarStack size={64}>
+  <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+  <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+  <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+  <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+</AvatarStack>
+```
+
+### Custom Size on Children
+
+> AvatarStack with different sizes on each child Avatar
+
+```tsx
+<AvatarStack size={20}>
+  <Avatar size={20} alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+  <Avatar size={32} alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+  <Avatar size={48} alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+  <Avatar size={64} alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+</AvatarStack>
+```
+
+### With Square Avatars
+
+> AvatarStack with square-shaped avatars
+
+```tsx
+<AvatarStack size={20} shape="square">
+  <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+  <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+  <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+  <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+</AvatarStack>
+```
+
+### Custom Size on Children Responsive
+
+> AvatarStack with responsive sizes on each child Avatar
+
+```tsx
+<AvatarStack size={48}>
+  <Avatar size={{ narrow: 16, regular: 32, wide: 48 }} alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+  <Avatar size={{ narrow: 32, regular: 48, wide: 64 }} alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+  <Avatar size={{ narrow: 48, regular: 64, wide: 96 }} alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+  <Avatar size={{ narrow: 64, regular: 96, wide: 120 }} alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+</AvatarStack>
+```
+
+### With Single Avatar
+
+> AvatarStack with only one avatar
+
+```tsx
+<AvatarStack>
+  <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+</AvatarStack>
+```
+
+### With Link Wrappers
+
+> AvatarStack with Link components wrapping each Avatar
+
+```tsx
+<AvatarStack>
+  <Link aria-label="Primer is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
+    <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
+  </Link>
+  <Link aria-label="GitHub is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
+    <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
+  </Link>
+  <Link aria-label="Atom is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
+    <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />
+  </Link>
+  <Link aria-label="GitHub Desktop is assigned" href="#" className="pc-AvatarItem" data-hovercard-url="/primer">
+    <Avatar alt="GitHub Desktop logo" src="https://avatars.githubusercontent.com/desktop" />
+  </Link>
+</AvatarStack>
+```

package/build/Modern/AvatarStack/index.d.ts

@@ -0,0 +1,3 @@
+export { AvatarStack } from './AvatarStack';
+export type { AvatarStackProps } from './AvatarStack';
+//# sourceMappingURL=index.d.ts.map

package/build/Modern/AvatarStack/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Modern/AvatarStack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/build/Modern/AvatarStack/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AvatarStack", {
+  enumerable: true,
+  get: function get() {
+    return _AvatarStack.AvatarStack;
+  }
+});
+var _AvatarStack = require("./AvatarStack");

package/build/Modern/index.d.ts

@@ -1,9 +1,23 @@
 import '@papillonarts/css/index.scss';
 import { Pagination } from './Pagination';
+export type { AvatarProps } from './Avatar';
+export type { AvatarStackProps } from './AvatarStack';
 export type { FlashProps } from './Flash';
 export type { LinkProps } from './Link';
 export type { PaginationProps } from './Pagination';
 export declare const Modern: {
+    Avatar: {
+        Avatar: import("react").ForwardRefExoticComponent<{
+            size?: number | import("./hooks/useResponsiveValue").ResponsiveValue<number>;
+            square?: boolean;
+            src: string;
+            alt?: string;
+            className?: string;
+        } & Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+    };
+    AvatarStack: {
+        AvatarStack: ({ children, variant, shape, alignRight, disableExpand, size, className, style, }: import("./AvatarStack").AvatarStackProps) => import("react/jsx-runtime").JSX.Element;
+    };
     Flash: {
         Flash: import("./utils/polymorphic").ForwardRefComponent<"div", import("./Flash").FlashProps>;
     };

package/build/Modern/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Modern/index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAGrC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CAUlB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Modern/index.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAA;AAKrC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBlB,CAAA"}

package/build/Modern/index.js

@@ -5,10 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Modern = void 0;
 require("@papillonarts/css/index.scss");
+var _Avatar = require("./Avatar");
+var _AvatarStack = require("./AvatarStack");
 var _Flash = require("./Flash");
 var _Link = require("./Link");
 var _Pagination = require("./Pagination");
 var Modern = exports.Modern = {
+  Avatar: {
+    Avatar: _Avatar.Avatar
+  },
+  AvatarStack: {
+    AvatarStack: _AvatarStack.AvatarStack
+  },
   Flash: {
     Flash: _Flash.Flash
   },

package/build/Modern/type.d.ts

@@ -1,3 +1,4 @@
+export type { AvatarProps } from './Avatar';
 export type { FlashProps } from './Flash';
 export type { LinkProps } from './Link';
 export type { PaginationProps } from './Pagination';

package/build/Modern/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../src/Modern/type.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../src/Modern/type.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACzC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/build/Modern/utils/hasInteractiveNodes.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Finds interactive nodes within the passed node.
+ * If the node itself is interactive, or children within are, it will return true.
+ *
+ * @param node - The HTML element to search for interactive nodes in.
+ * @param ignoreSelectors - A string of selectors to ignore when searching for interactive nodes. This is useful for
+ * ignoring nodes that are conditionally interactive based on the return value of the function.
+ * @returns {boolean | undefined}
+ */
+export declare function hasInteractiveNodes(node: HTMLElement | null, ignoreNodes?: HTMLElement[]): boolean;
+//# sourceMappingURL=hasInteractiveNodes.d.ts.map

package/build/Modern/utils/hasInteractiveNodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasInteractiveNodes.d.ts","sourceRoot":"","sources":["../../../src/Modern/utils/hasInteractiveNodes.ts"],"names":[],"mappings":"AA2BA;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,WAAW,CAAC,EAAE,WAAW,EAAE,WAoBxF"}

package/build/Modern/utils/hasInteractiveNodes.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasInteractiveNodes = hasInteractiveNodes;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var nonValidSelectors = {
+  disabled: '[disabled]',
+  hidden: '[hidden]',
+  inert: '[inert]',
+  negativeTabIndex: '[tabindex="-1"]'
+};
+var interactiveElementsSelectors = ["a[href]", "button", 'summary', 'select', 'input:not([type=hidden])', 'textarea', '[tabindex="0"]', "audio[controls]", "video[controls]", "[contenteditable]"];
+var interactiveElements = interactiveElementsSelectors.map(function (selector) {
+  return "".concat(selector, ":not(").concat(Object.values(nonValidSelectors).join('):not('), ")");
+});
+
+// Combined selector for fast querySelector check
+var interactiveSelector = interactiveElements.join(', ');
+
+/**
+ * Finds interactive nodes within the passed node.
+ * If the node itself is interactive, or children within are, it will return true.
+ *
+ * @param node - The HTML element to search for interactive nodes in.
+ * @param ignoreSelectors - A string of selectors to ignore when searching for interactive nodes. This is useful for
+ * ignoring nodes that are conditionally interactive based on the return value of the function.
+ * @returns {boolean | undefined}
+ */
+function hasInteractiveNodes(node, ignoreNodes) {
+  if (!node || isNonValidInteractiveNode(node)) return false;
+
+  // We only need to confirm if at least one interactive node exists.
+  // If one does exist, we can abort early.
+
+  var nodesToIgnore = ignoreNodes ? [node].concat((0, _toConsumableArray2["default"])(ignoreNodes)) : [node];
+
+  // Performance optimization: Use querySelectorAll with combined selector first
+  // This avoids recursive getComputedStyle calls for each node
+  var candidates = node.querySelectorAll(interactiveSelector);
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
+  for (var i = 0; i < candidates.length; i++) {
+    var candidate = candidates[i];
+    if (!nodesToIgnore.includes(candidate) && !isNonValidInteractiveNode(candidate)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// Note: Only call getComputedStyle when CSS-based checks are insufficient
+function isNonValidInteractiveNode(node) {
+  // Fast path: Check attribute-based states first (no style recalc needed)
+  var isNonInteractive = node.matches('[disabled], [hidden], [inert]');
+  if (isNonInteractive) return true;
+
+  // Only call getComputedStyle if attribute checks passed
+  // This is necessary for display:none and visibility:hidden which aren't detectable via attributes
+  var nodeStyle = getComputedStyle(node);
+  var isHiddenVisually = nodeStyle.display === 'none' || nodeStyle.visibility === 'hidden';
+  return isHiddenVisually;
+}

package/build/Modern/utils/testing.d.ts

@@ -0,0 +1,2 @@
+export declare function implementsClassName(Component: React.ElementType, baseClassName?: string): void;
+//# sourceMappingURL=testing.d.ts.map

package/build/Modern/utils/testing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/Modern/utils/testing.tsx"],"names":[],"mappings":"AAGA,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,WAAW,EAAE,aAAa,CAAC,EAAE,MAAM,QAcvF"}

package/build/Modern/utils/testing.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.implementsClassName = implementsClassName;
+var _react = require("@testing-library/react");
+var _jsxRuntime = require("react/jsx-runtime");
+/* eslint-disable jest/no-export, jest/no-conditional-expect */
+
+function implementsClassName(Component, baseClassName) {
+  test('renders with the custom className', function () {
+    var component = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      className: "test-class"
+    }));
+    if (baseClassName) {
+      var _component$container$;
+      // account for elements rendering in root portals
+      var baseElement = (_component$container$ = component.container.parentElement) === null || _component$container$ === void 0 ? void 0 : _component$container$.getElementsByClassName(baseClassName);
+      expect(baseElement).toHaveLength(1);
+      expect(baseElement === null || baseElement === void 0 ? void 0 : baseElement[0].classList.contains('test-class')).toBeTruthy();
+    } else {
+      var _component$container$2;
+      // account for elements rendering in root portals
+      var classNameElement = (_component$container$2 = component.container.parentElement) === null || _component$container$2 === void 0 ? void 0 : _component$container$2.getElementsByClassName('test-class');
+      expect(classNameElement).toHaveLength(1);
+    }
+  });
+}

package/build/Modern/utils/types/ViewportRangeKeys.d.ts

@@ -0,0 +1,3 @@
+export type ViewportRangeKeys = 'narrow' | 'narrowLandscape' | 'regular' | 'wide' | 'portrait' | 'landscape';
+export type WidthOnlyViewportRangeKeys = Exclude<ViewportRangeKeys, 'narrowLandscape' | 'portrait' | 'landscape'>;
+//# sourceMappingURL=ViewportRangeKeys.d.ts.map

package/build/Modern/utils/types/ViewportRangeKeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportRangeKeys.d.ts","sourceRoot":"","sources":["../../../../src/Modern/utils/types/ViewportRangeKeys.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,CAAA;AAC5G,MAAM,MAAM,0BAA0B,GAAG,OAAO,CAAC,iBAAiB,EAAE,iBAAiB,GAAG,UAAU,GAAG,WAAW,CAAC,CAAA"}