@eightshift/ui-components 6.3.0 → 7.1.0

package/dist/components/breakpoint-preview/breakpoint-preview.js

@@ -1,160 +1,164 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { upperFirst } from "../../utilities/es-dash.js";
+import { t as clsx } from "../../clsx-BUU5J41u.js";
+import { f as upperFirst } from "../../es-dash-HqXWZZ3_.js";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region lib/components/breakpoint-preview/breakpoint-preview.jsx
 /**
- * Component that renders a preview of the breakpoints to help users visualize the options they set.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {Object[]} [props.blocks] - Blocks to display.
- * @param {string} [props.blocks[].width] - Current breakpoint width. Left-aligned with the block.
- * @param {string} [props.blocks[].widthEnd] - Current breakpoint width. Right-aligned with the block.
- * @param {string} [props.blocks[].breakpoint] - Breakpoint name.
- * @param {string} [props.blocks[].value] - Current value at the breakpoint.
- * @param {boolean} [props.blocks[].dotsStart=false] - If `true`, dots are displayed at the start of the block.
- * @param {boolean} [props.blocks[].dotsEnd=false] - If `true`, dots are displayed at the end of the block.
- * @param {boolean} [props.blocks[].active=false] - If `true`, the block is active.
- * @param {boolean} [props.blocks[].alignEnd=false] - If `true`, the block is aligned to the end.
- * @param {BreakpointColor} [props.blocks[].color] - Color of the block.
- * @param {boolean} [props.dotsStart=false] - If `true`, dots are displayed at the start of the preview.
- * @param {boolean} [props.dotsEnd=false] - If `true`, dots are displayed at the end of the preview.
- *  *
- * @returns {JSX.Element} The BreakpointPreview component.
- *
- * @typedef {'blue' | 'green' | 'yellow' | 'red' | 'indigo' | 'orange' | 'cyan' | 'teal' | 'fuchsia' | 'black' | 'default'} BreakpointColor
- *
- * @example
- * <BreakpointPreview
- * 		blocks={[
- * 			{
- * 				breakpoint: 'Mobile',
- * 				widthEnd: '480px',
- * 				value: 'Regular',
- * 				dotsStart: true,
- * 				alignEnd: true,
- * 				active: true,
- * 			},
- * 			{
- * 				breakpoint: 'Default',
- * 				value: 'Small',
- * 				dotsEnd: true,
- * 			},
- * 		]}
- * />
- *
- * @preserve
- */
-const BreakpointPreview = (props) => {
-  const { blocks: rawBlocks, dotsStart = false, dotsEnd = false } = props;
-  const blocks = rawBlocks.filter(Boolean);
-  if (!blocks || blocks.length < 1) {
-    return null;
-  }
-  const hasActive = blocks?.some(({ active }) => active) ?? false;
-  const activeColors = {
-    blue: {
-      text: "es:text-blue-500",
-      bg: "es:bg-blue-500"
-    },
-    green: {
-      text: "es:text-lime-500",
-      bg: "es:bg-lime-500"
-    },
-    yellow: {
-      text: "es:text-yellow-400",
-      bg: "es:bg-yellow-400"
-    },
-    red: {
-      text: "es:text-red-500",
-      bg: "es:bg-red-500"
-    },
-    indigo: {
-      text: "es:text-indigo-500",
-      bg: "es:bg-indigo-500"
-    },
-    orange: {
-      text: "es:text-orange-500",
-      bg: "es:bg-orange-500"
-    },
-    cyan: {
-      text: "es:text-cyan-500",
-      bg: "es:bg-cyan-500"
-    },
-    teal: {
-      text: "es:text-accent-500",
-      bg: "es:bg-accent-500"
-    },
-    fuchsia: {
-      text: "es:text-fuchsia-500",
-      bg: "es:bg-fuchsia-500"
-    },
-    black: {
-      text: "es:text-black",
-      bg: "es:bg-black"
-    },
-    default: {
-      text: "es:text-secondary-600",
-      bg: "es:bg-secondary-600"
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: clsx("es:mx-auto es:grid es:w-fit es:shrink-0 es:auto-cols-auto es:grid-rows-[auto_auto] es:gap-x-2 es:gap-y-0.5"), children: [
-    dotsStart && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "es:row-start-1 es:flex es:shrink-0 es:translate-x-1 es:items-center es:gap-1 es:justify-self-end es:text-secondary-400", children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-0.5 es:text-secondary-300", children: [
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "es:row-start-2 es:size-px es:justify-self-end" })
-    ] }),
-    blocks.map(({ width, widthEnd, breakpoint, value, dotsStart: dotsStart2 = false, dotsEnd: dotsEnd2 = false, active = false, alignEnd = false, color }, i) => {
-      const activeTextColor = activeColors?.[color]?.text ?? activeColors.default.text;
-      const activeBgColor = activeColors?.[color]?.bg ?? activeColors.default.bg;
-      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "es:row-start-1 es:flex es:min-w-28 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400", children: [
-          dotsStart2 && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "text-secondary-300"), children: [
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
-          ] }),
-          width && /* @__PURE__ */ jsx("span", { children: width }),
-          /* @__PURE__ */ jsx("div", { className: clsx("es:grow es:rounded", active ? "es:h-0.5" : "es:h-px es:bg-secondary-300", active && activeBgColor) }),
-          widthEnd && /* @__PURE__ */ jsx("span", { children: widthEnd }),
-          dotsEnd2 && /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "es:text-secondary-300"), children: [
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-            /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "es:row-start-2 es:flex es:w-full es:min-w-28 es:flex-col es:items-start es:gap-1", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: clsx(
-                "es:rounded es:px-1 es:py-0.5",
-                hasActive && active && "es:text-white",
-                hasActive && active && activeBgColor,
-                hasActive && !active && "es:bg-secondary-200 es:text-secondary-500",
-                !hasActive && "es:bg-secondary-600 es:text-white",
-                alignEnd && "es:ml-auto"
-              ),
-              children: upperFirst(breakpoint)
-            }
-          ),
-          value && /* @__PURE__ */ jsx("span", { className: clsx("es:-mt-0.5 es:px-1", active ? "es:text-secondary-400" : "es:text-secondary-400", alignEnd && "es:ml-auto"), children: value })
-        ] })
-      ] }, i);
-    }),
-    dotsEnd && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "es:row-start-1 es:flex es:shrink-0 es:-translate-x-1 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400", children: /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-0.5 es:text-secondary-300", children: [
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
-        /* @__PURE__ */ jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "es:row-start-2 es:size-px" })
-    ] })
-  ] });
-};
-export {
-  BreakpointPreview
+* Component that renders a preview of the breakpoints to help users visualize the options they set.
+*
+* @component
+* @param {Object} props - Component props.
+* @param {Object[]} [props.blocks] - Blocks to display.
+* @param {string} [props.blocks[].width] - Current breakpoint width. Left-aligned with the block.
+* @param {string} [props.blocks[].widthEnd] - Current breakpoint width. Right-aligned with the block.
+* @param {string} [props.blocks[].breakpoint] - Breakpoint name.
+* @param {string} [props.blocks[].value] - Current value at the breakpoint.
+* @param {boolean} [props.blocks[].dotsStart=false] - If `true`, dots are displayed at the start of the block.
+* @param {boolean} [props.blocks[].dotsEnd=false] - If `true`, dots are displayed at the end of the block.
+* @param {boolean} [props.blocks[].active=false] - If `true`, the block is active.
+* @param {boolean} [props.blocks[].alignEnd=false] - If `true`, the block is aligned to the end.
+* @param {BreakpointColor} [props.blocks[].color] - Color of the block.
+* @param {boolean} [props.dotsStart=false] - If `true`, dots are displayed at the start of the preview.
+* @param {boolean} [props.dotsEnd=false] - If `true`, dots are displayed at the end of the preview.
+*  *
+* @returns {JSX.Element} The BreakpointPreview component.
+*
+* @typedef {'blue' | 'green' | 'yellow' | 'red' | 'indigo' | 'orange' | 'cyan' | 'teal' | 'fuchsia' | 'black' | 'default'} BreakpointColor
+*
+* @example
+* <BreakpointPreview
+* 		blocks={[
+* 			{
+* 				breakpoint: 'Mobile',
+* 				widthEnd: '480px',
+* 				value: 'Regular',
+* 				dotsStart: true,
+* 				alignEnd: true,
+* 				active: true,
+* 			},
+* 			{
+* 				breakpoint: 'Default',
+* 				value: 'Small',
+* 				dotsEnd: true,
+* 			},
+* 		]}
+* />
+*/
+var BreakpointPreview = (props) => {
+	const { blocks: rawBlocks, dotsStart = false, dotsEnd = false } = props;
+	const blocks = rawBlocks.filter(Boolean);
+	if (!blocks || blocks.length < 1) return null;
+	const hasActive = blocks?.some(({ active }) => active) ?? false;
+	const activeColors = {
+		blue: {
+			text: "es:text-blue-500",
+			bg: "es:bg-blue-500"
+		},
+		green: {
+			text: "es:text-lime-500",
+			bg: "es:bg-lime-500"
+		},
+		yellow: {
+			text: "es:text-yellow-400",
+			bg: "es:bg-yellow-400"
+		},
+		red: {
+			text: "es:text-red-500",
+			bg: "es:bg-red-500"
+		},
+		indigo: {
+			text: "es:text-indigo-500",
+			bg: "es:bg-indigo-500"
+		},
+		orange: {
+			text: "es:text-orange-500",
+			bg: "es:bg-orange-500"
+		},
+		cyan: {
+			text: "es:text-cyan-500",
+			bg: "es:bg-cyan-500"
+		},
+		teal: {
+			text: "es:text-accent-500",
+			bg: "es:bg-accent-500"
+		},
+		fuchsia: {
+			text: "es:text-fuchsia-500",
+			bg: "es:bg-fuchsia-500"
+		},
+		black: {
+			text: "es:text-black",
+			bg: "es:bg-black"
+		},
+		default: {
+			text: "es:text-secondary-600",
+			bg: "es:bg-secondary-600"
+		}
+	};
+	return jsxs("div", {
+		className: clsx("es:mx-auto es:grid es:w-fit es:shrink-0 es:auto-cols-auto es:grid-rows-[auto_auto] es:gap-x-2 es:gap-y-0.5"),
+		children: [
+			dotsStart && jsxs(Fragment$1, { children: [jsx("div", {
+				className: "es:row-start-1 es:flex es:shrink-0 es:translate-x-1 es:items-center es:gap-1 es:justify-self-end es:text-secondary-400",
+				children: jsxs("div", {
+					className: "es:flex es:gap-0.5 es:text-secondary-300",
+					children: [
+						jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+						jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+						jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
+					]
+				})
+			}), jsx("div", { className: "es:row-start-2 es:size-px es:justify-self-end" })] }),
+			blocks.map(({ width, widthEnd, breakpoint, value, dotsStart = false, dotsEnd = false, active = false, alignEnd = false, color }, i) => {
+				const activeTextColor = activeColors?.[color]?.text ?? activeColors.default.text;
+				const activeBgColor = activeColors?.[color]?.bg ?? activeColors.default.bg;
+				return jsxs(Fragment, { children: [jsxs("div", {
+					className: "es:row-start-1 es:flex es:min-w-28 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400",
+					children: [
+						dotsStart && jsxs("div", {
+							className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "text-secondary-300"),
+							children: [
+								jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+								jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+								jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
+							]
+						}),
+						width && jsx("span", { children: width }),
+						jsx("div", { className: clsx("es:grow es:rounded", active ? "es:h-0.5" : "es:h-px es:bg-secondary-300", active && activeBgColor) }),
+						widthEnd && jsx("span", { children: widthEnd }),
+						dotsEnd && jsxs("div", {
+							className: clsx("es:flex es:gap-0.5", active ? activeTextColor : "es:text-secondary-300"),
+							children: [
+								jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+								jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+								jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
+							]
+						})
+					]
+				}), jsxs("div", {
+					className: "es:row-start-2 es:flex es:w-full es:min-w-28 es:flex-col es:items-start es:gap-1",
+					children: [jsx("span", {
+						className: clsx("es:rounded es:px-1 es:py-0.5", hasActive && active && "es:text-white", hasActive && active && activeBgColor, hasActive && !active && "es:bg-secondary-200 es:text-secondary-500", !hasActive && "es:bg-secondary-600 es:text-white", alignEnd && "es:ml-auto"),
+						children: upperFirst(breakpoint)
+					}), value && jsx("span", {
+						className: clsx("es:-mt-0.5 es:px-1", active ? "es:text-secondary-400" : "es:text-secondary-400", alignEnd && "es:ml-auto"),
+						children: value
+					})]
+				})] }, i);
+			}),
+			dotsEnd && jsxs(Fragment$1, { children: [jsx("div", {
+				className: "es:row-start-1 es:flex es:shrink-0 es:-translate-x-1 es:items-center es:gap-1 es:font-mono es:font-medium es:text-secondary-400",
+				children: jsxs("div", {
+					className: "es:flex es:gap-0.5 es:text-secondary-300",
+					children: [
+						jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+						jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" }),
+						jsx("div", { className: "es:size-0.5 es:rounded es:bg-current" })
+					]
+				})
+			}), jsx("div", { className: "es:row-start-2 es:size-px" })] })
+		]
+	});
 };
+//#endregion
+export { BreakpointPreview };