@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-7K0j.1

package/dist/esm/components/badge/MrlBadgeNotification/MrlBadgeNotification.module.css

@@ -0,0 +1,37 @@
+.MrlBadgeNotification--L-6vO {
+  align-items: center;
+  background-color: rgb(var(--mrl-gray-90));
+  border: var(--mrl-line-width-border-fine) solid rgb(var(--mrl-white));
+  border-radius: var(--mrl-radii-04);
+  box-sizing: border-box;
+  color: var(--mrl-color-text-inverse);
+  display: inline-flex;
+  flex-shrink: 1;
+  font-size: var(--mrl-font-size-02);
+  font-weight: var(--mrl-font-weight-02);
+  height: var(--mrl-spacing-03);
+  justify-content: center;
+  padding: 0;
+  width: var(--mrl-spacing-03);
+}
+.MrlBadgeNotification--info---rg4M {
+  background-color: var(--mrl-color-background-info);
+}
+.MrlBadgeNotification--numeric--nYv-K {
+  font-size: 0.5625rem;
+  height: var(--mrl-spacing-05);
+  padding: 0 var(--mrl-spacing-01);
+  width: var(--mrl-spacing-05);
+}
+
+.mrlButton .MrlBadgeNotification--L-6vO,
+.mrlIconButton .MrlBadgeNotification--L-6vO {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.mrlButton .MrlBadgeNotification--numeric--nYv-K,
+.mrlIconButton .MrlBadgeNotification--numeric--nYv-K {
+  right: calc(var(--mrl-spacing-01) * -1);
+  top: calc(var(--mrl-spacing-01) * -1);
+}

package/dist/esm/components/badge/MrlBadgeNotification/MrlBadgeNotification.module.scss.js

@@ -0,0 +1,6 @@
+import "./MrlBadgeNotification.module.css";
+export default {
+	"MrlBadgeNotification": "MrlBadgeNotification--L-6vO",
+	"MrlBadgeNotification--info": "MrlBadgeNotification--info---rg4M",
+	"MrlBadgeNotification--numeric": "MrlBadgeNotification--numeric--nYv-K"
+};

package/dist/esm/components/badge/MrlBadgeNotification/index.js

@@ -0,0 +1 @@
+export * from './MrlBadgeNotification';

package/dist/esm/components/badge/index.js

@@ -0,0 +1,2 @@
+export * from './MrlBadge';
+export * from './MrlBadgeNotification';

package/dist/esm/components/breadcrumb/MrlBreadcrumbItem/MrlBreadcrumbItem.js

@@ -0,0 +1,47 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable no-mixed-spaces-and-tabs */
+import * as React from 'react';
+import classnames from 'classnames';
+import { Link } from 'react-router-dom';
+import styles from './MrlBreadcrumbItem.module.scss.js';
+import { MrlSvg } from '../../svg';
+import { more } from '@muraldevkit/ds-icons';
+import { MrlBreadcrumbSeparator } from '../MrlBreadcrumbSeparator';
+/**
+ * MrlBreadcrumbItem component.
+ * @param props The MrlBreadcrumbItem component properties.
+ * @returns The MrlBreadcrumbItem component.
+ */
+export function MrlBreadcrumbItem(props) {
+    const { link, text, isSelected, hasSeparator = true, isTruncated = false } = props, rest = __rest(props, ["link", "text", "isSelected", "hasSeparator", "isTruncated"]);
+    const breadcrumbItem = React.useMemo(() => {
+        if (isSelected) {
+            // eslint-disable-next-line jsx-a11y/anchor-is-valid
+            return React.createElement("a", { "aria-current": "page" }, text);
+        }
+        if (typeof link === 'string') {
+            return React.createElement("a", { href: link }, text);
+        }
+        else if (typeof link === 'object') {
+            return React.createElement(Link, Object.assign({}, link), text);
+        }
+    }, [link, text, isSelected]);
+    return (React.createElement("li", Object.assign({}, rest, { className: classnames(styles['MrlBreadcrumbItem'], 'MrlBreadcrumbItem', {
+            [styles['MrlBreadcrumbItem--selected']]: isSelected,
+            ['MrlBreadcrumbItem--selected']: isSelected
+        }) }),
+        isTruncated && (React.createElement("span", { className: classnames(styles['MrlBreadcrumbItem--icon']) },
+            React.createElement(MrlSvg, { size: "auto", svg: more }))),
+        !isTruncated && breadcrumbItem,
+        hasSeparator && React.createElement(MrlBreadcrumbSeparator, null)));
+}

package/dist/esm/components/breadcrumb/MrlBreadcrumbItem/MrlBreadcrumbItem.module.css

@@ -0,0 +1,148 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--VWXNO {
+  position: relative;
+}
+
+.MrlBreadcrumbItem--LZttq {
+  align-items: center;
+  color: var(--mrl-color-text);
+  display: inline-flex;
+  font-size: var(--mrl-font-size-02);
+  font-weight: var(--mrl-font-weight-02);
+  line-height: var(--mrl-line-height-06);
+  min-height: var(--mrl-spacing-05);
+}
+.MrlBreadcrumbItem--LZttq:hover {
+  color: var(--mrl-color-text-hover);
+}
+.MrlBreadcrumbItem--selected--w6EUT {
+  color: var(--mrl-color-text-selected);
+  font-weight: var(--mrl-font-weight-04);
+}
+.MrlBreadcrumbItem--LZttq a {
+  position: relative;
+  color: var(--mrl-color-text);
+  padding-right: var(--mrl-spacing-01);
+  text-decoration: none;
+}
+.MrlBreadcrumbItem--LZttq a:focus-visible {
+  outline: none;
+}
+.MrlBreadcrumbItem--LZttq a:focus-visible::after {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-timing-function: var(--mrl-timing-m3);
+  border: 0 solid transparent;
+  border-radius: calc(
+		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
+	);
+  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  content: "";
+  display: block;
+  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  position: absolute;
+  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  z-index: 1;
+  animation-name: border-animation--DJU6R;
+}
+@keyframes border-animation--DJU6R {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes border-animation-inverse--LDYEl {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes outline-animation--PEBR6 {
+  0% {
+    outline: 0 solid transparent;
+    outline-offset: 1px;
+  }
+  50% {
+    outline: 4px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+  100% {
+    outline: 2px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+}
+.MrlBreadcrumbItem--LZttq a:focus-visible::after {
+  border-radius: var(--mrl-radii-03);
+}
+.MrlBreadcrumbItem--LZttq a:hover {
+  color: var(--mrl-color-text-hover);
+}
+.MrlBreadcrumbItem--LZttq a--active {
+  color: var(--mrl-color-text-selected);
+  font-weight: var(--mrl-font-weight-04);
+}
+.MrlBreadcrumbItem--icon---qJCT, .MrlBreadcrumbItem--separator--x0Px1 {
+  align-items: center;
+  color: var(--mrl-color-text);
+  height: 0.75rem;
+  margin: 0 var(--mrl-spacing-01);
+  width: 0.75rem;
+}

package/dist/esm/components/breadcrumb/MrlBreadcrumbItem/MrlBreadcrumbItem.module.scss.js

@@ -0,0 +1,11 @@
+import "./MrlBreadcrumbItem.module.css";
+export default {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--VWXNO",
+	"MrlBreadcrumbItem": "MrlBreadcrumbItem--LZttq",
+	"MrlBreadcrumbItem--selected": "MrlBreadcrumbItem--selected--w6EUT",
+	"border-animation": "border-animation--DJU6R",
+	"MrlBreadcrumbItem--icon": "MrlBreadcrumbItem--icon---qJCT",
+	"MrlBreadcrumbItem--separator": "MrlBreadcrumbItem--separator--x0Px1",
+	"border-animation-inverse": "border-animation-inverse--LDYEl",
+	"outline-animation": "outline-animation--PEBR6"
+};

package/dist/esm/components/breadcrumb/MrlBreadcrumbItem/index.js

@@ -0,0 +1 @@
+export * from './MrlBreadcrumbItem';

package/dist/esm/components/breadcrumb/MrlBreadcrumbSeparator/MrlBreadcrumbSeparator.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from '../MrlBreadcrumbItem/MrlBreadcrumbItem.module.scss.js';
+import { MrlSvg } from '../../svg';
+import { chevronRight } from '@muraldevkit/ds-icons';
+/**
+ * MrlBreadcrumbSeparator component.
+ * @returns The MrlBreadcrumbSeparator component.
+ */
+export function MrlBreadcrumbSeparator() {
+    return (React.createElement("span", { className: classnames(styles['MrlBreadcrumbItem--separator'], 'MrlBreadcrumbItem--separator'), role: "presentation" },
+        React.createElement(MrlSvg, { size: "auto", svg: chevronRight })));
+}

package/dist/esm/components/breadcrumb/MrlBreadcrumbSeparator/index.js

@@ -0,0 +1 @@
+export * from './MrlBreadcrumbSeparator';

package/dist/esm/components/breadcrumb/MrlBreadcrumbs/MrlBreadcrumbs.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import styles from './MrlBreadcrumbs.module.scss.js';
+import { MrlBreadcrumbItem } from '../MrlBreadcrumbItem';
+/**
+ * MrlBreadcrumbs component.
+ * @param props The MrlBreadcrumbs component properties.
+ * @returns The MrlBreadcrumbs component.
+ */
+export function MrlBreadcrumbs(props) {
+    const { items, className } = props, rest = __rest(props, ["items", "className"]);
+    const breadcrumbsData = React.useMemo(() => {
+        const arr = [];
+        let isTruncated = false;
+        for (const [i, item] of items.entries()) {
+            if (item.isTruncated) {
+                isTruncated = true;
+                continue;
+            }
+            if (i === items.length - 1) {
+                arr.push(Object.assign(Object.assign({}, item), { hasSeparator: false }));
+            }
+            else {
+                arr.push(item);
+            }
+        }
+        return {
+            isTruncated,
+            items: arr
+        };
+    }, [items]);
+    return (React.createElement("nav", Object.assign({}, rest),
+        React.createElement("ol", { className: classnames(styles['MrlBreadcrumbs--list'], 'MrlBreadcrumbs--list', className) },
+            breadcrumbsData.isTruncated && React.createElement(MrlBreadcrumbItem, { hasSeparator: true, isTruncated: true }),
+            breadcrumbsData.items.map((item, i) => {
+                return React.createElement(MrlBreadcrumbItem, Object.assign({ key: `${i}${item.text}` }, item));
+            }))));
+}

package/dist/esm/components/breadcrumb/MrlBreadcrumbs/MrlBreadcrumbs.module.css

@@ -0,0 +1,5 @@
+.MrlBreadcrumbs--list--rGKQb {
+  align-items: center;
+  display: flex;
+  justify-items: flex-start;
+}

package/dist/esm/components/breadcrumb/MrlBreadcrumbs/MrlBreadcrumbs.module.scss.js

@@ -0,0 +1,4 @@
+import "./MrlBreadcrumbs.module.css";
+export default {
+	"MrlBreadcrumbs--list": "MrlBreadcrumbs--list--rGKQb"
+};

package/dist/esm/components/breadcrumb/MrlBreadcrumbs/index.js

@@ -0,0 +1 @@
+export * from './MrlBreadcrumbs';

package/dist/esm/components/breadcrumb/index.js

@@ -0,0 +1,3 @@
+export * from './MrlBreadcrumbItem';
+export * from './MrlBreadcrumbs';
+export * from './MrlBreadcrumbSeparator';