@mittwald/flow-react-components 1.3.0-next.20 → 1.3.0-next.21

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

@@ -1 +1 @@
-{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n  color: inherit;\n  text-wrap-style: pretty;\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--text--color--#{$color});\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n\n  ul,\n  ol {\n    padding-inline-start: var(--text--list-padding);\n  }\n\n  ul {\n    li {\n      list-style: initial;\n    }\n  }\n\n  small {\n    font-size: var(--font-size-text--s);\n  }\n\n  blockquote {\n    border-inline-start: var(--text--blockquote-border-width)\n      var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n    padding-inline-start: var(--text--blockquote-padding);\n  }\n\n  .icon {\n    vertical-align: text-bottom;\n  }\n\n  small {\n    .icon {\n      width: var(--line-height-s);\n      height: var(--line-height-s);\n    }\n  }\n\n  &:where(.align-start) {\n    text-align: start;\n  }\n\n  &:where(.align-center) {\n    text-align: center;\n  }\n\n  &:where(.align-end) {\n    text-align: end;\n  }\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n\n  &:where(.wrap-pretty) {\n    text-wrap: pretty;\n  }\n\n  &:where(.no-ligatures) {\n    font-variant-ligatures: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n  color: inherit;\n  text-wrap-style: pretty;\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--text--color--#{$color});\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* `Text` styles raw HTML that its children bring along — `Markdown` nests\n     bare `<ul>`/`<ol>`/`<blockquote>` inside a `Text`, and consumers write the\n     same markup by hand. None of it is authored here, so none of it is classed. */\n  // stylelint-disable selector-max-type -- children's raw HTML, see above\n  ul,\n  ol {\n    padding-inline-start: var(--text--list-padding);\n  }\n\n  ul {\n    li {\n      list-style: initial;\n    }\n  }\n\n  small {\n    font-size: var(--font-size-text--s);\n  }\n\n  blockquote {\n    border-inline-start: var(--text--blockquote-border-width)\n      var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n    padding-inline-start: var(--text--blockquote-padding);\n  }\n\n  .icon {\n    vertical-align: text-bottom;\n  }\n\n  small {\n    .icon {\n      width: var(--line-height-s);\n      height: var(--line-height-s);\n    }\n  }\n  // stylelint-enable selector-max-type\n\n  &:where(.align-start) {\n    text-align: start;\n  }\n\n  &:where(.align-center) {\n    text-align: center;\n  }\n\n  &:where(.align-end) {\n    text-align: end;\n  }\n\n  &:where(.wrap-wrap) {\n    text-wrap: wrap;\n  }\n\n  &:where(.wrap-balance) {\n    text-wrap: balance;\n  }\n\n  &:where(.wrap-pretty) {\n    text-wrap: pretty;\n  }\n\n  &:where(.no-ligatures) {\n    font-variant-ligatures: none;\n  }\n}\n"],"mappings":""}

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

@@ -19,6 +19,7 @@ var Tooltip = (props) => {
 		children: [/* @__PURE__ */ jsx(Aria.OverlayArrow, {
 			className: Tooltip_module_default.tip,
 			children: /* @__PURE__ */ jsx("svg", {
+				className: Tooltip_module_default.tipIcon,
 				viewBox: "0 0 8 8",
 				children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" })
 			})

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Tooltip.module.scss\";\nimport clsx from \"clsx\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nexport type TooltipProps = PropsWithChildren<\n  Omit<Aria.TooltipProps, \"children\">\n>;\n\n/** @flr-generate all */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  const rootClassName = clsx(styles.tooltip, className);\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  return (\n    <ClearPropsContext>\n      <Aria.Tooltip {...rest} className={rootClassName}>\n        <Aria.OverlayArrow className={styles.tip}>\n          <svg viewBox=\"0 0 8 8\">\n            <path d=\"M0 0 L4 4 L8 0\" />\n          </svg>\n        </Aria.OverlayArrow>\n        {children}\n      </Aria.Tooltip>\n    </ClearPropsContext>\n  );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;AAYA,IAAa,WAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,KAAK,SAAN;EAAc,GAAI;EAAM,WAAW;EAAnC,UAAA,CACE,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IAAK,SAAQ;IACX,UAAA,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;GACvB,CAAA;EACY,CAAA,GAClB,QACW;CACG,CAAA,EAAA,CAAA;AAEvB"}
+{"version":3,"file":"Tooltip.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Tooltip.module.scss\";\nimport clsx from \"clsx\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nexport type TooltipProps = PropsWithChildren<\n  Omit<Aria.TooltipProps, \"children\">\n>;\n\n/** @flr-generate all */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  const rootClassName = clsx(styles.tooltip, className);\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  return (\n    <ClearPropsContext>\n      <Aria.Tooltip {...rest} className={rootClassName}>\n        <Aria.OverlayArrow className={styles.tip}>\n          <svg className={styles.tipIcon} viewBox=\"0 0 8 8\">\n            <path d=\"M0 0 L4 4 L8 0\" />\n          </svg>\n        </Aria.OverlayArrow>\n        {children}\n      </Aria.Tooltip>\n    </ClearPropsContext>\n  );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;AAYA,IAAa,WAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,KAAK,SAAN;EAAc,GAAI;EAAM,WAAW;EAAnC,UAAA,CACE,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IAAK,WAAW,uBAAO;IAAS,SAAQ;IACtC,UAAA,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;GACvB,CAAA;EACY,CAAA,GAClB,QACW;CACG,CAAA,EAAA,CAAA;AAEvB"}

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

@@ -3,13 +3,15 @@
 //#region src/components/Tooltip/Tooltip.module.scss
 var tooltip = "flow--tooltip";
 var tip = "flow--tooltip--tip";
+var tipIcon = "flow--tooltip--tip-icon";
 var slide = "flow--tooltip--slide";
 var Tooltip_module_default = {
 	tooltip,
 	tip,
+	tipIcon,
 	slide
 };
 //#endregion
-export { Tooltip_module_default as default, slide, tip, tooltip };
+export { Tooltip_module_default as default, slide, tip, tipIcon, tooltip };
 
 //# sourceMappingURL=Tooltip.module.mjs.map

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  /**\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 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.3.0-next.20",
+  "version": "1.3.0-next.21",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -83,9 +83,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.3.0-next.20",
+    "@mittwald/flow-icons": "^1.3.0-next.21",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.3.0-next.20",
+    "@mittwald/react-tunnel": "^1.3.0-next.21",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -138,12 +138,12 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-core": "1.3.0-next.20",
-    "@mittwald/flow-design-tokens": "1.3.0-next.20",
-    "@mittwald/flow-icons-base": "1.3.0-next.20",
+    "@mittwald/flow-core": "1.3.0-next.21",
+    "@mittwald/flow-design-tokens": "1.3.0-next.21",
+    "@mittwald/flow-icons-base": "1.3.0-next.21",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.3.0-next.20",
+    "@mittwald/typescript-config": "1.3.0-next.21",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -195,7 +195,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.3.0-next.20",
+    "@mittwald/flow-icons-pro": "1.3.0-next.21",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -219,5 +219,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "89522e32233bb3f92accf31e4c338898bd13296c"
+  "gitHead": "94e51cf8c2d0fa764e1c1afdd37597982e6d9c6d"
 }