@mittwald/flow-react-components 1.5.29 → 1.5.31

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.module.mjs","names":[],"sources":["../../../../../../../src/components/Icon/Icon.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.icon {\n  flex-shrink: 0;\n  max-width: none;\n  display: inline-block;\n\n  @extend .size-m;\n\n  /* Sizes */\n  @mixin size($size, $faPadding) {\n    &:where(.size-#{$size}) {\n      width: var(--icon--size--#{$size});\n      height: var(--icon--size--#{$size});\n\n      /*\n       * FontAwesome inserts its stylesheet as an unlayered `<style>` element at\n       * runtime (`autoAddCss` defaults to true), outside of Flow's build, and\n       * sizes `.svg-inline--fa` itself (`content-box`, `1.25em` × `1em`).\n       * Unlayered CSS beats layered CSS regardless of specificity, so this\n       * override only applies in the layered stylesheet variant if it leaves\n       * the cascade layer as well.\n       *\n       * The size goes back to Flow's layered rules (`revert-layer`) instead of\n       * the token, so a context's size (`Avatar`'s 70 %) still applies. The\n       * variants without layers drop these declarations — there Flow's rules\n       * already win, and `revert-layer` would discard them all.\n       *\n       * Marked at the leaf rather than in a separate block, because these rules\n       * live in a size mixin – a block would have to duplicate it.\n       */\n      &:global(.svg-inline--fa) {\n        @layer flow.unlayered {\n          width: revert-layer;\n          height: revert-layer;\n          box-sizing: border-box;\n          padding: $faPadding;\n        }\n      }\n    }\n  }\n\n  @include size(m, var(--size-rem--xxs));\n  @include size(s, var(--size-rem--xxs));\n  @include size(l, var(--size-rem--xs));\n\n  /* Colors */\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--icon--#{$color}-color);\n    }\n  }\n\n  &.neutral {\n    color: var(--icon--color);\n  }\n\n  @include color(\"danger\");\n  @include color(\"success\");\n  @include color(\"warning\");\n  @include color(\"info\");\n  @include color(\"unavailable\");\n  @include color(\"blue\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--corner-radius--s);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
+{"version":3,"file":"Icon.module.mjs","names":[],"sources":["../../../../../../../src/components/Icon/Icon.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.icon {\n  flex-shrink: 0;\n  max-width: none;\n  display: inline-block;\n\n  @extend .size-m;\n\n  /* Sizes */\n  @mixin size($size, $faPadding) {\n    &:where(.size-#{$size}) {\n      width: var(--icon--size--#{$size});\n      height: var(--icon--size--#{$size});\n\n      /*\n       * FontAwesome inserts its stylesheet as an unlayered `<style>` element at\n       * runtime (`autoAddCss` defaults to true), outside of Flow's build, and\n       * sizes `.svg-inline--fa` itself (`content-box`, `1.25em` × `1em`).\n       * Unlayered CSS beats layered CSS regardless of specificity, so this\n       * override only applies in the layered stylesheet variant if it leaves\n       * the cascade layer as well.\n       *\n       * The size goes back to Flow's layered rules (`revert-layer`) instead of\n       * the token, so a context's size (`Avatar`'s 70 %) still applies. The\n       * variants without layers drop these declarations — there Flow's rules\n       * already win, and `revert-layer` would discard them all.\n       *\n       * Marked at the leaf rather than in a separate block, because these rules\n       * live in a size mixin – a block would have to duplicate it.\n       */\n      &:global(.svg-inline--fa) {\n        @layer flow.unlayered {\n          width: revert-layer;\n          height: revert-layer;\n          box-sizing: border-box;\n          padding: $faPadding;\n        }\n      }\n    }\n  }\n\n  @include size(m, var(--size-rem--xxs));\n  @include size(s, var(--size-rem--xxs));\n  @include size(l, var(--size-rem--xs));\n\n  /*\n   * FontAwesome also sets `vertical-align: -0.125em`, which would shift the\n   * icon a context aligns (`Heading`, `Alert`, `Link`). Same mechanism as the\n   * size above.\n   */\n  &:global(.svg-inline--fa) {\n    @layer flow.unlayered {\n      vertical-align: revert-layer;\n    }\n  }\n\n  /* Colors */\n  @mixin color($color) {\n    &.#{$color} {\n      color: var(--icon--#{$color}-color);\n    }\n  }\n\n  &.neutral {\n    color: var(--icon--color);\n  }\n\n  @include color(\"danger\");\n  @include color(\"success\");\n  @include color(\"warning\");\n  @include color(\"info\");\n  @include color(\"unavailable\");\n  @include color(\"blue\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--corner-radius--s);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/ListSummary/ListSummary.mjs

@@ -7,18 +7,14 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/ListSummary/ListSummary.tsx
 /** @flr-generate all */
 var ListSummary = flowComponent("ListSummary", (props) => {
-	const { children, position = "top", ref } = props;
+	const { position = "top", className, ...rest } = props;
 	if (position === "bottom") return /* @__PURE__ */ jsx("footer", {
-		ref,
-		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.bottom),
-		...props,
-		children
+		...rest,
+		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.bottom, className)
 	});
 	return /* @__PURE__ */ jsx("header", {
-		ref,
-		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.top),
-		...props,
-		children
+		...rest,
+		className: clsx(ListSummary_module_default.listSummary, ListSummary_module_default.top, className)
 	});
 });
 //#endregion

package/dist/js/packages/components/src/components/List/components/ListSummary/ListSummary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListSummary.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/ListSummary/ListSummary.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListSummary.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\n\nexport interface ListSummaryProps\n  extends FlowComponentProps, PropsWithChildren {\n  /** Whether the summary is placed above or underneath the list @default \"top\" */\n  position?: \"top\" | \"bottom\";\n}\n\n/** @flr-generate all */\nexport const ListSummary = flowComponent(\"ListSummary\", (props) => {\n  const { children, position = \"top\", ref } = props;\n\n  if (position === \"bottom\") {\n    return (\n      <footer\n        ref={ref}\n        className={clsx(styles.listSummary, styles.bottom)}\n        {...props}\n      >\n        {children}\n      </footer>\n    );\n  }\n\n  return (\n    <header\n      ref={ref}\n      className={clsx(styles.listSummary, styles.top)}\n      {...props}\n    >\n      {children}\n    </header>\n  );\n});\n\nexport default ListSummary;\n"],"mappings":";;;;;;;;AAaA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,UAAU,WAAW,OAAO,QAAQ;CAE5C,IAAI,aAAa,UACf,OACE,oBAAC,UAAD;EACO;EACL,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,MAAM;EACjD,GAAI;EAEH;CACK,CAAA;CAIZ,OACE,oBAAC,UAAD;EACO;EACL,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,GAAG;EAC9C,GAAI;EAEH;CACK,CAAA;AAEZ,CAAC"}
+{"version":3,"file":"ListSummary.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/List/components/ListSummary/ListSummary.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./ListSummary.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface ListSummaryProps\n  extends PropsWithClassName, FlowComponentProps, PropsWithChildren {\n  /** Whether the summary is placed above or underneath the list @default \"top\" */\n  position?: \"top\" | \"bottom\";\n}\n\n/** @flr-generate all */\nexport const ListSummary = flowComponent(\"ListSummary\", (props) => {\n  const { position = \"top\", className, ...rest } = props;\n\n  if (position === \"bottom\") {\n    return (\n      <footer\n        {...rest}\n        className={clsx(styles.listSummary, styles.bottom, className)}\n      />\n    );\n  }\n\n  return (\n    <header\n      {...rest}\n      className={clsx(styles.listSummary, styles.top, className)}\n    />\n  );\n});\n\nexport default ListSummary;\n"],"mappings":";;;;;;;;AAcA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EAAE,WAAW,OAAO,WAAW,GAAG,SAAS;CAEjD,IAAI,aAAa,UACf,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,QAAQ,SAAS;CAC7D,CAAA;CAIL,OACE,oBAAC,UAAD;EACE,GAAI;EACJ,WAAW,KAAKA,2BAAO,aAAaA,2BAAO,KAAK,SAAS;CAC1D,CAAA;AAEL,CAAC"}

package/dist/types/components/List/components/ListSummary/ListSummary.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { FlowComponentProps } from '../../../../lib/componentFactory/flowComponent';
-export interface ListSummaryProps extends FlowComponentProps, PropsWithChildren {
+import { PropsWithClassName } from '../../../../lib/types/props';
+export interface ListSummaryProps extends PropsWithClassName, FlowComponentProps, PropsWithChildren {
     /** Whether the summary is placed above or underneath the list @default "top" */
     position?: "top" | "bottom";
 }

package/package.json

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