@mittwald/flow-react-components 1.3.0-next.3 → 1.3.0-next.31

package/dist/js/packages/components/src/components/Tooltip/Tooltip.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.module.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".tooltip {\n  border-radius: var(--tooltip--corner-radius);\n  background-color: var(--tooltip--background-color);\n  color: var(--tooltip--color);\n  font-size: var(--tooltip--font-size);\n  padding-block: var(--tooltip--padding-y);\n  padding-inline: var(--tooltip--padding-x);\n  max-width: var(--tooltip--max-width);\n  transform: translate3d(0, 0, 0);\n  box-shadow: var(--tooltip--box-shadow);\n\n  --translate-origin-length: var(--tooltip--tooltip-to-trigger-spacing) / 2;\n\n  /* Placement */\n  &[data-placement=\"top\"] {\n    margin-bottom: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateY(var(--translate-origin-length));\n  }\n\n  &[data-placement=\"bottom\"] {\n    margin-top: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateY(var(--translate-origin-length) * -1);\n\n    .tip svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-placement=\"right\"] {\n    margin-inline-start: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateX(var(--translate-origin-length) * -1);\n\n    .tip svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  &[data-placement=\"left\"] {\n    margin-inline-end: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateX(var(--translate-origin-length));\n\n    .tip svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  /* Animation */\n\n  &[data-entering] {\n    animation: slide 200ms;\n  }\n\n  &[data-exiting] {\n    animation: slide 200ms reverse ease-in;\n  }\n\n  .tip {\n    width: var(--tooltip--tip-size);\n    height: var(--tooltip--tip-size);\n\n    svg {\n      display: block;\n      fill: var(--tooltip--background-color);\n    }\n  }\n}\n\n@keyframes slide {\n  from {\n    transform: var(--translate-origin);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tooltip.module.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".tooltip {\n  border-radius: var(--tooltip--corner-radius);\n  background-color: var(--tooltip--background-color);\n  color: var(--tooltip--color);\n  font-size: var(--tooltip--font-size);\n  padding-block: var(--tooltip--padding-y);\n  padding-inline: var(--tooltip--padding-x);\n  max-width: var(--tooltip--max-width);\n  transform: translate3d(0, 0, 0);\n  box-shadow: var(--tooltip--box-shadow);\n\n  --translate-origin-length: var(--tooltip--tooltip-to-trigger-spacing) / 2;\n\n  /**\n   * React Aria sets `data-placement` once it has computed a position, and\n   * renders the overlay at `top: 0; left: 0` of the viewport until then. It\n   * skips computing one when the tooltip mounts for its exit animation alone –\n   * swapping quickly between neighbouring triggers does that – and never\n   * retries afterwards, so such a tooltip stays parked in the corner for its\n   * whole lifetime. Keep it out of sight instead. `visibility` rather than\n   * `display`, so the overlay stays measurable for the positioning pass.\n   */\n  &:not([data-placement]) {\n    visibility: hidden;\n  }\n\n  /* Placement */\n  &[data-placement=\"top\"] {\n    margin-bottom: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateY(var(--translate-origin-length));\n  }\n\n  &[data-placement=\"bottom\"] {\n    margin-top: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateY(var(--translate-origin-length) * -1);\n\n    .tip .tipIcon {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-placement=\"right\"] {\n    margin-inline-start: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateX(var(--translate-origin-length) * -1);\n\n    .tip .tipIcon {\n      transform: rotate(90deg);\n    }\n  }\n\n  &[data-placement=\"left\"] {\n    margin-inline-end: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateX(var(--translate-origin-length));\n\n    .tip .tipIcon {\n      transform: rotate(-90deg);\n    }\n  }\n\n  /* Animation */\n\n  &[data-entering] {\n    animation: slide 200ms;\n  }\n\n  &[data-exiting] {\n    animation: slide 200ms reverse ease-in;\n  }\n\n  .tip {\n    width: var(--tooltip--tip-size);\n    height: var(--tooltip--tip-size);\n\n    .tipIcon {\n      display: block;\n      fill: var(--tooltip--background-color);\n    }\n  }\n}\n\n@keyframes slide {\n  from {\n    transform: var(--translate-origin);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/lib/files/acceptedFiles.mjs

@@ -0,0 +1,34 @@
+"use client"
+/* */
+//#region src/lib/files/acceptedFiles.ts
+/**
+* Whether a file matches an `accept` attribute value — a comma separated list
+* of MIME types (`image/png`), MIME wildcards (`image/*`) and file extensions
+* (`.png`). A missing or empty list matches everything, the way the attribute
+* itself does.
+*
+* @internal
+*/
+var matchesAccept = (file, accept) => {
+	const tokens = accept?.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean) ?? [];
+	if (tokens.length === 0) return true;
+	const type = file.type.toLowerCase();
+	const name = file.name.toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+		return type === token;
+	});
+};
+/**
+* The files of a drop event that match `accept`. Non-file items (dragged text,
+* directories) are skipped, and the filter runs on the drop item — so a file
+* `accept` rejects is never read from disk.
+*
+* @internal
+*/
+var getAcceptedFiles = async (items, accept) => await Promise.all(items.filter((item) => item.kind === "file").filter((item) => matchesAccept(item, accept)).map(async (item) => await item.getFile()));
+//#endregion
+export { getAcceptedFiles, matchesAccept };
+
+//# sourceMappingURL=acceptedFiles.mjs.map

package/dist/js/packages/components/src/lib/files/acceptedFiles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acceptedFiles.mjs","names":[],"sources":["../../../../../../../src/lib/files/acceptedFiles.ts"],"sourcesContent":["import type { DropItem } from \"@react-types/shared\";\n\n/**\n * Whether a file matches an `accept` attribute value — a comma separated list\n * of MIME types (`image/png`), MIME wildcards (`image/*`) and file extensions\n * (`.png`). A missing or empty list matches everything, the way the attribute\n * itself does.\n *\n * @internal\n */\nexport const matchesAccept = (\n  file: Pick<File, \"name\" | \"type\">,\n  accept?: string,\n): boolean => {\n  const tokens =\n    accept\n      ?.split(\",\")\n      .map((token) => token.trim().toLowerCase())\n      .filter(Boolean) ?? [];\n\n  if (tokens.length === 0) {\n    return true;\n  }\n\n  const type = file.type.toLowerCase();\n  const name = file.name.toLowerCase();\n\n  return tokens.some((token) => {\n    if (token.startsWith(\".\")) {\n      return name.endsWith(token);\n    }\n    if (token.endsWith(\"/*\")) {\n      return type.startsWith(token.slice(0, -1));\n    }\n    return type === token;\n  });\n};\n\n/**\n * The files of a drop event that match `accept`. Non-file items (dragged text,\n * directories) are skipped, and the filter runs on the drop item — so a file\n * `accept` rejects is never read from disk.\n *\n * @internal\n */\nexport const getAcceptedFiles = async (\n  items: readonly DropItem[],\n  accept?: string,\n): Promise<File[]> =>\n  await Promise.all(\n    items\n      .filter((item) => item.kind === \"file\")\n      .filter((item) => matchesAccept(item, accept))\n      .map(async (item) => await item.getFile()),\n  );\n"],"mappings":";;;;;;;;;;;AAUA,IAAa,iBACX,MACA,WACY;CACZ,MAAM,SACJ,QACI,MAAM,GAAG,CAAC,CACX,KAAK,UAAU,MAAM,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAC1C,OAAO,OAAO,KAAK,CAAC;CAEzB,IAAI,OAAO,WAAW,GACpB,OAAO;CAGT,MAAM,OAAO,KAAK,KAAK,YAAY;CACnC,MAAM,OAAO,KAAK,KAAK,YAAY;CAEnC,OAAO,OAAO,MAAM,UAAU;EAC5B,IAAI,MAAM,WAAW,GAAG,GACtB,OAAO,KAAK,SAAS,KAAK;EAE5B,IAAI,MAAM,SAAS,IAAI,GACrB,OAAO,KAAK,WAAW,MAAM,MAAM,GAAG,EAAE,CAAC;EAE3C,OAAO,SAAS;CAClB,CAAC;AACH;;;;;;;;AASA,IAAa,mBAAmB,OAC9B,OACA,WAEA,MAAM,QAAQ,IACZ,MACG,QAAQ,SAAS,KAAK,SAAS,MAAM,CAAC,CACtC,QAAQ,SAAS,cAAc,MAAM,MAAM,CAAC,CAAC,CAC7C,IAAI,OAAO,SAAS,MAAM,KAAK,QAAQ,CAAC,CAC7C"}

package/dist/js/packages/components/src/lib/hooks/dom/useKeepBrowserExtensionsInteractive.mjs

@@ -59,6 +59,6 @@ var useKeepBrowserExtensionsInteractive = (isActive) => {
 	}, [isActive]);
 };
 //#endregion
-export { useKeepBrowserExtensionsInteractive as default, useKeepBrowserExtensionsInteractive };
+export { useKeepBrowserExtensionsInteractive as default, useKeepBrowserExtensionsInteractive, isBrowserExtensionNode };
 
 //# sourceMappingURL=useKeepBrowserExtensionsInteractive.mjs.map

package/dist/js/packages/components/src/lib/hooks/dom/useKeepBrowserExtensionsInteractive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useKeepBrowserExtensionsInteractive.mjs","names":[],"sources":["../../../../../../../../src/lib/hooks/dom/useKeepBrowserExtensionsInteractive.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * Attribute react-aria checks to keep a node out of the `inert` / `aria-hidden`\n * isolation it applies to everything outside an open modal overlay.\n *\n * @see `isAlwaysVisibleNode` in `@react-aria/overlays` (`ariaHideOutside`)\n */\nconst keepInteractiveAttribute = \"data-react-aria-top-layer\";\n\nconst extensionUrlSchemes = [\n  \"chrome-extension:\",\n  \"moz-extension:\",\n  \"safari-web-extension:\",\n  \"safari-extension:\",\n];\n\nconst isBrowserExtensionNode = (element: Element): boolean => {\n  if (element.tagName.includes(\"-\")) {\n    return true;\n  }\n  if (element.shadowRoot !== null) {\n    return true;\n  }\n  if (element instanceof HTMLIFrameElement) {\n    const source = element.getAttribute(\"src\") ?? \"\";\n    return extensionUrlSchemes.some((scheme) => source.startsWith(scheme));\n  }\n  return false;\n};\n\nconst keepInteractive = (element: Element): void => {\n  if (!element.hasAttribute(keepInteractiveAttribute)) {\n    element.setAttribute(keepInteractiveAttribute, \"\");\n  }\n  if (element instanceof HTMLElement && element.inert) {\n    element.inert = false;\n  }\n  if (element.getAttribute(\"aria-hidden\") === \"true\") {\n    element.removeAttribute(\"aria-hidden\");\n  }\n};\n\n/**\n * While a modal overlay is open, react-aria isolates the rest of the document\n * by setting `inert` on every sibling of the modal (see `ariaHideOutside`) —\n * and it keeps doing so for nodes that appear afterwards via a\n * `MutationObserver`. That also catches UI a browser extension injects while\n * the modal is open, e.g. a password manager's autofill dropdown on a field, or\n * its \"save credentials\" popover. An `inert` node stays visible but cannot be\n * clicked, so the user sees the extension UI but cannot interact with it.\n *\n * This hook watches the document while `isActive` and re-enables such\n * extension-injected, document-level nodes, so browser extensions keep working\n * on top of modals. It targets the structural fingerprint of extension UI (see\n * {@link isBrowserExtensionNode}) rather than a fixed list of vendors.\n */\nexport const useKeepBrowserExtensionsInteractive = (\n  isActive: boolean,\n): void => {\n  useEffect(() => {\n    if (!isActive || typeof MutationObserver === \"undefined\") {\n      return;\n    }\n\n    const root = document.body;\n\n    const process = (node: Node): void => {\n      if (node instanceof Element && isBrowserExtensionNode(node)) {\n        keepInteractive(node);\n      }\n    };\n\n    for (const child of Array.from(root.children)) {\n      process(child);\n    }\n\n    const observer = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        for (const node of Array.from(mutation.addedNodes)) {\n          process(node);\n        }\n      }\n    });\n    observer.observe(root, { childList: true });\n\n    return () => observer.disconnect();\n  }, [isActive]);\n};\n\nexport default useKeepBrowserExtensionsInteractive;\n"],"mappings":";;;;;;;;;;AAQA,IAAM,2BAA2B;AAEjC,IAAM,sBAAsB;CAC1B;CACA;CACA;CACA;AACF;AAEA,IAAM,0BAA0B,YAA8B;CAC5D,IAAI,QAAQ,QAAQ,SAAS,GAAG,GAC9B,OAAO;CAET,IAAI,QAAQ,eAAe,MACzB,OAAO;CAET,IAAI,mBAAmB,mBAAmB;EACxC,MAAM,SAAS,QAAQ,aAAa,KAAK,KAAK;EAC9C,OAAO,oBAAoB,MAAM,WAAW,OAAO,WAAW,MAAM,CAAC;CACvE;CACA,OAAO;AACT;AAEA,IAAM,mBAAmB,YAA2B;CAClD,IAAI,CAAC,QAAQ,aAAa,wBAAwB,GAChD,QAAQ,aAAa,0BAA0B,EAAE;CAEnD,IAAI,mBAAmB,eAAe,QAAQ,OAC5C,QAAQ,QAAQ;CAElB,IAAI,QAAQ,aAAa,aAAa,MAAM,QAC1C,QAAQ,gBAAgB,aAAa;AAEzC;;;;;;;;;;;;;;;AAgBA,IAAa,uCACX,aACS;CACT,gBAAgB;EACd,IAAI,CAAC,YAAY,OAAO,qBAAqB,aAC3C;EAGF,MAAM,OAAO,SAAS;EAEtB,MAAM,WAAW,SAAqB;GACpC,IAAI,gBAAgB,WAAW,uBAAuB,IAAI,GACxD,gBAAgB,IAAI;EAExB;EAEA,KAAK,MAAM,SAAS,MAAM,KAAK,KAAK,QAAQ,GAC1C,QAAQ,KAAK;EAGf,MAAM,WAAW,IAAI,kBAAkB,cAAc;GACnD,KAAK,MAAM,YAAY,WACrB,KAAK,MAAM,QAAQ,MAAM,KAAK,SAAS,UAAU,GAC/C,QAAQ,IAAI;EAGlB,CAAC;EACD,SAAS,QAAQ,MAAM,EAAE,WAAW,KAAK,CAAC;EAE1C,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,QAAQ,CAAC;AACf"}
+{"version":3,"file":"useKeepBrowserExtensionsInteractive.mjs","names":[],"sources":["../../../../../../../../src/lib/hooks/dom/useKeepBrowserExtensionsInteractive.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * Attribute react-aria checks to keep a node out of the `inert` / `aria-hidden`\n * isolation it applies to everything outside an open modal overlay.\n *\n * @see `isAlwaysVisibleNode` in `@react-aria/overlays` (`ariaHideOutside`)\n */\nconst keepInteractiveAttribute = \"data-react-aria-top-layer\";\n\nconst extensionUrlSchemes = [\n  \"chrome-extension:\",\n  \"moz-extension:\",\n  \"safari-web-extension:\",\n  \"safari-extension:\",\n];\n\nexport const isBrowserExtensionNode = (element: Element): boolean => {\n  if (element.tagName.includes(\"-\")) {\n    return true;\n  }\n  if (element.shadowRoot !== null) {\n    return true;\n  }\n  if (element instanceof HTMLIFrameElement) {\n    const source = element.getAttribute(\"src\") ?? \"\";\n    return extensionUrlSchemes.some((scheme) => source.startsWith(scheme));\n  }\n  return false;\n};\n\nconst keepInteractive = (element: Element): void => {\n  if (!element.hasAttribute(keepInteractiveAttribute)) {\n    element.setAttribute(keepInteractiveAttribute, \"\");\n  }\n  if (element instanceof HTMLElement && element.inert) {\n    element.inert = false;\n  }\n  if (element.getAttribute(\"aria-hidden\") === \"true\") {\n    element.removeAttribute(\"aria-hidden\");\n  }\n};\n\n/**\n * While a modal overlay is open, react-aria isolates the rest of the document\n * by setting `inert` on every sibling of the modal (see `ariaHideOutside`) —\n * and it keeps doing so for nodes that appear afterwards via a\n * `MutationObserver`. That also catches UI a browser extension injects while\n * the modal is open, e.g. a password manager's autofill dropdown on a field, or\n * its \"save credentials\" popover. An `inert` node stays visible but cannot be\n * clicked, so the user sees the extension UI but cannot interact with it.\n *\n * This hook watches the document while `isActive` and re-enables such\n * extension-injected, document-level nodes, so browser extensions keep working\n * on top of modals. It targets the structural fingerprint of extension UI (see\n * {@link isBrowserExtensionNode}) rather than a fixed list of vendors.\n */\nexport const useKeepBrowserExtensionsInteractive = (\n  isActive: boolean,\n): void => {\n  useEffect(() => {\n    if (!isActive || typeof MutationObserver === \"undefined\") {\n      return;\n    }\n\n    const root = document.body;\n\n    const process = (node: Node): void => {\n      if (node instanceof Element && isBrowserExtensionNode(node)) {\n        keepInteractive(node);\n      }\n    };\n\n    for (const child of Array.from(root.children)) {\n      process(child);\n    }\n\n    const observer = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        for (const node of Array.from(mutation.addedNodes)) {\n          process(node);\n        }\n      }\n    });\n    observer.observe(root, { childList: true });\n\n    return () => observer.disconnect();\n  }, [isActive]);\n};\n\nexport default useKeepBrowserExtensionsInteractive;\n"],"mappings":";;;;;;;;;;AAQA,IAAM,2BAA2B;AAEjC,IAAM,sBAAsB;CAC1B;CACA;CACA;CACA;AACF;AAEA,IAAa,0BAA0B,YAA8B;CACnE,IAAI,QAAQ,QAAQ,SAAS,GAAG,GAC9B,OAAO;CAET,IAAI,QAAQ,eAAe,MACzB,OAAO;CAET,IAAI,mBAAmB,mBAAmB;EACxC,MAAM,SAAS,QAAQ,aAAa,KAAK,KAAK;EAC9C,OAAO,oBAAoB,MAAM,WAAW,OAAO,WAAW,MAAM,CAAC;CACvE;CACA,OAAO;AACT;AAEA,IAAM,mBAAmB,YAA2B;CAClD,IAAI,CAAC,QAAQ,aAAa,wBAAwB,GAChD,QAAQ,aAAa,0BAA0B,EAAE;CAEnD,IAAI,mBAAmB,eAAe,QAAQ,OAC5C,QAAQ,QAAQ;CAElB,IAAI,QAAQ,aAAa,aAAa,MAAM,QAC1C,QAAQ,gBAAgB,aAAa;AAEzC;;;;;;;;;;;;;;;AAgBA,IAAa,uCACX,aACS;CACT,gBAAgB;EACd,IAAI,CAAC,YAAY,OAAO,qBAAqB,aAC3C;EAGF,MAAM,OAAO,SAAS;EAEtB,MAAM,WAAW,SAAqB;GACpC,IAAI,gBAAgB,WAAW,uBAAuB,IAAI,GACxD,gBAAgB,IAAI;EAExB;EAEA,KAAK,MAAM,SAAS,MAAM,KAAK,KAAK,QAAQ,GAC1C,QAAQ,KAAK;EAGf,MAAM,WAAW,IAAI,kBAAkB,cAAc;GACnD,KAAK,MAAM,YAAY,WACrB,KAAK,MAAM,QAAQ,MAAM,KAAK,SAAS,UAAU,GAC/C,QAAQ,IAAI;EAGlB,CAAC;EACD,SAAS,QAAQ,MAAM,EAAE,WAAW,KAAK,CAAC;EAE1C,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,QAAQ,CAAC;AACf"}

package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs

@@ -1099,7 +1099,7 @@ var image = {
 		"path": ["image", "border-style"]
 	},
 	"border-color": {
-		"value": "#DCE9F7",
+		"value": "#8FA1B4",
 		"path": ["image", "border-color"]
 	}
 };
@@ -4326,6 +4326,10 @@ var all_dark_default = {
 			"path": ["big-number", "font-weight"]
 		}
 	},
+	"cartesian-chart": { "transition-duration": {
+		"value": "800ms",
+		"path": ["cartesian-chart", "transition-duration"]
+	} },
 	"cartesian-grid": {
 		"color": {
 			"value": "#E5EFF8",
@@ -4341,6 +4345,10 @@ var all_dark_default = {
 		"path": ["chart-tooltip", "spacing"]
 	} },
 	"donut-chart": {
+		"transition-duration": {
+			"value": "800ms",
+			"path": ["donut-chart", "transition-duration"]
+		},
 		"border-color": {
 			"value": "#DCE9F7",
 			"path": ["donut-chart", "border-color"]
@@ -5302,6 +5310,10 @@ var all_dark_default = {
 		"path": ["password-creation-field", "rule-to-rule-spacing"]
 	} },
 	"progress-bar": {
+		"transition-duration": {
+			"value": "800ms",
+			"path": ["progress-bar", "transition-duration"]
+		},
 		"font-size": {
 			"value": "1rem",
 			"path": ["progress-bar", "font-size"]