@mittwald/flow-react-components 1.5.0-next.0 → 1.5.0-next.1

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

@@ -4,26 +4,33 @@ import Flex_module_default from "./Flex.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Flex/Flex.tsx
+var sizeVariable = (size) => size && `var(--size-px--${size})`;
 /** @flr-generate all */
 var Flex = (props) => {
 	const { children, className, direction = "row", align, justify, gap, columnGap, rowGap, grow, wrap = "nowrap", padding, paddingTop, paddingBottom, paddingLeft, paddingRight, elementType = "div", ...restProps } = props;
-	const rootClassName = clsx(Flex_module_default.flex, className);
+	const columnGapSize = columnGap ?? gap;
+	const rowGapSize = rowGap ?? gap;
+	const paddingTopSize = paddingTop ?? padding;
+	const paddingBottomSize = paddingBottom ?? padding;
+	const paddingLeftSize = paddingLeft ?? padding;
+	const paddingRightSize = paddingRight ?? padding;
+	const rootClassName = clsx(Flex_module_default.flex, align && Flex_module_default.align, justify && Flex_module_default.justify, grow && Flex_module_default.grow, columnGapSize && Flex_module_default["column-gap"], rowGapSize && Flex_module_default["row-gap"], paddingTopSize && Flex_module_default["padding-top"], paddingBottomSize && Flex_module_default["padding-bottom"], paddingLeftSize && Flex_module_default["padding-left"], paddingRightSize && Flex_module_default["padding-right"], className);
+	const style = {
+		"--flex--direction": direction,
+		"--flex--wrap": wrap,
+		"--flex--align": align === "end" ? "flex-end" : align === "start" ? "flex-start" : align,
+		"--flex--justify": justify,
+		"--flex--column-gap": sizeVariable(columnGapSize),
+		"--flex--row-gap": sizeVariable(rowGapSize),
+		"--flex--padding-top": sizeVariable(paddingTopSize),
+		"--flex--padding-bottom": sizeVariable(paddingBottomSize),
+		"--flex--padding-left": sizeVariable(paddingLeftSize),
+		"--flex--padding-right": sizeVariable(paddingRightSize)
+	};
 	return /* @__PURE__ */ jsx(elementType, {
 		...restProps,
 		className: rootClassName,
-		style: {
-			flexDirection: direction,
-			alignItems: align === "end" ? "flex-end" : align === "start" ? "flex-start" : align,
-			justifyContent: justify,
-			columnGap: columnGap ? `var(--size-px--${columnGap})` : gap ? `var(--size-px--${gap})` : void 0,
-			rowGap: rowGap ? `var(--size-px--${rowGap})` : gap ? `var(--size-px--${gap})` : void 0,
-			flexGrow: grow ? 1 : void 0,
-			flexWrap: wrap,
-			paddingTop: paddingTop ? `var(--size-px--${paddingTop})` : padding ? `var(--size-px--${padding})` : void 0,
-			paddingBottom: paddingBottom ? `var(--size-px--${paddingBottom})` : padding ? `var(--size-px--${padding})` : void 0,
-			paddingLeft: paddingLeft ? `var(--size-px--${paddingLeft})` : padding ? `var(--size-px--${padding})` : void 0,
-			paddingRight: paddingRight ? `var(--size-px--${paddingRight})` : padding ? `var(--size-px--${padding})` : void 0
-		},
+		style,
 		children
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.mjs","names":[],"sources":["../../../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Flex.module.scss\";\n\nexport interface FlexProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    PropsWithElementType<\n      | \"div\"\n      | \"aside\"\n      | \"ul\"\n      | \"li\"\n      | \"ol\"\n      | \"section\"\n      | \"main\"\n      | \"span\"\n      | \"p\"\n      | \"footer\"\n      | \"header\"\n    > {\n  /** The flexDirection value of the element. @default \"row\" */\n  direction?: CSSProperties[\"flexDirection\"];\n  /** The alignItems value of the element. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\n  /** The justifyContent value of the element. @default \"start\" */\n  justify?: CSSProperties[\"justifyContent\"];\n  /** The gap size of the element. */\n  gap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The columnGap size of the element. */\n  columnGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The rowGap size of the element. */\n  rowGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** Whether the element should grow. */\n  grow?: boolean;\n  /** The flexWrap value of the element. @default \"nowrap\" */\n  wrap?: CSSProperties[\"flexWrap\"];\n  /** The padding of the element. */\n  padding?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding top of the element. */\n  paddingTop?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding bottom of the element. */\n  paddingBottom?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left of the element. */\n  paddingLeft?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding right of the element. */\n  paddingRight?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n}\n\n/** @flr-generate all */\nexport const Flex: FC<FlexProps> = (props) => {\n  const {\n    children,\n    className,\n    direction = \"row\",\n    align,\n    justify,\n    gap,\n    columnGap,\n    rowGap,\n    grow,\n    wrap = \"nowrap\",\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n    ...restProps\n  } = props;\n\n  const rootClassName = clsx(styles.flex, className);\n\n  const Element = elementType;\n\n  return (\n    <Element\n      {...restProps}\n      className={rootClassName}\n      style={{\n        flexDirection: direction,\n        alignItems:\n          align === \"end\"\n            ? \"flex-end\"\n            : align === \"start\"\n              ? \"flex-start\"\n              : align,\n        justifyContent: justify,\n        columnGap: columnGap\n          ? `var(--size-px--${columnGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        rowGap: rowGap\n          ? `var(--size-px--${rowGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        flexGrow: grow ? 1 : undefined,\n        flexWrap: wrap,\n        paddingTop: paddingTop\n          ? `var(--size-px--${paddingTop})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingBottom: paddingBottom\n          ? `var(--size-px--${paddingBottom})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingLeft: paddingLeft\n          ? `var(--size-px--${paddingLeft})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingRight: paddingRight\n          ? `var(--size-px--${paddingRight})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n      }}\n    >\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"mappings":";;;;;;;AAsDA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,UACA,WACA,YAAY,OACZ,OACA,SACA,KACA,WACA,QACA,MACA,OAAO,UACP,SACA,YACA,eACA,aACA,cACA,cAAc,OACd,GAAG,cACD;CAEJ,MAAM,gBAAgB,KAAK,oBAAO,MAAM,SAAS;CAIjD,OACE,oBAAC,aAAD;EACE,GAAI;EACJ,WAAW;EACX,OAAO;GACL,eAAe;GACf,YACE,UAAU,QACN,aACA,UAAU,UACR,eACA;GACR,gBAAgB;GAChB,WAAW,YACP,kBAAkB,UAAU,KAC5B,MACE,kBAAkB,IAAI,KACtB,KAAA;GACN,QAAQ,SACJ,kBAAkB,OAAO,KACzB,MACE,kBAAkB,IAAI,KACtB,KAAA;GACN,UAAU,OAAO,IAAI,KAAA;GACrB,UAAU;GACV,YAAY,aACR,kBAAkB,WAAW,KAC7B,UACE,kBAAkB,QAAQ,KAC1B,KAAA;GACN,eAAe,gBACX,kBAAkB,cAAc,KAChC,UACE,kBAAkB,QAAQ,KAC1B,KAAA;GACN,aAAa,cACT,kBAAkB,YAAY,KAC9B,UACE,kBAAkB,QAAQ,KAC1B,KAAA;GACN,cAAc,eACV,kBAAkB,aAAa,KAC/B,UACE,kBAAkB,QAAQ,KAC1B,KAAA;EACR;EAEC;CACM,CAAA;AAEb"}
+{"version":3,"file":"Flex.mjs","names":[],"sources":["../../../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Flex.module.scss\";\n\nexport interface FlexProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    PropsWithElementType<\n      | \"div\"\n      | \"aside\"\n      | \"ul\"\n      | \"li\"\n      | \"ol\"\n      | \"section\"\n      | \"main\"\n      | \"span\"\n      | \"p\"\n      | \"footer\"\n      | \"header\"\n    > {\n  /** The flexDirection value of the element. @default \"row\" */\n  direction?: CSSProperties[\"flexDirection\"];\n  /** The alignItems value of the element. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\n  /** The justifyContent value of the element. @default \"start\" */\n  justify?: CSSProperties[\"justifyContent\"];\n  /** The gap size of the element. */\n  gap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The columnGap size of the element. */\n  columnGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The rowGap size of the element. */\n  rowGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** Whether the element should grow. */\n  grow?: boolean;\n  /** The flexWrap value of the element. @default \"nowrap\" */\n  wrap?: CSSProperties[\"flexWrap\"];\n  /** The padding of the element. */\n  padding?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding top of the element. */\n  paddingTop?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding bottom of the element. */\n  paddingBottom?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left of the element. */\n  paddingLeft?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding right of the element. */\n  paddingRight?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n}\n\ntype FlexSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nconst sizeVariable = (size: FlexSize | undefined) =>\n  size && `var(--size-px--${size})`;\n\n/** @flr-generate all */\nexport const Flex: FC<FlexProps> = (props) => {\n  const {\n    children,\n    className,\n    direction = \"row\",\n    align,\n    justify,\n    gap,\n    columnGap,\n    rowGap,\n    grow,\n    wrap = \"nowrap\",\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n    ...restProps\n  } = props;\n\n  const columnGapSize = columnGap ?? gap;\n  const rowGapSize = rowGap ?? gap;\n  const paddingTopSize = paddingTop ?? padding;\n  const paddingBottomSize = paddingBottom ?? padding;\n  const paddingLeftSize = paddingLeft ?? padding;\n  const paddingRightSize = paddingRight ?? padding;\n\n  const rootClassName = clsx(\n    styles.flex,\n    align && styles.align,\n    justify && styles.justify,\n    grow && styles.grow,\n    columnGapSize && styles[\"column-gap\"],\n    rowGapSize && styles[\"row-gap\"],\n    paddingTopSize && styles[\"padding-top\"],\n    paddingBottomSize && styles[\"padding-bottom\"],\n    paddingLeftSize && styles[\"padding-left\"],\n    paddingRightSize && styles[\"padding-right\"],\n    className,\n  );\n\n  const style: CSSProperties = {\n    \"--flex--direction\": direction,\n    \"--flex--wrap\": wrap,\n    \"--flex--align\":\n      align === \"end\" ? \"flex-end\" : align === \"start\" ? \"flex-start\" : align,\n    \"--flex--justify\": justify,\n    \"--flex--column-gap\": sizeVariable(columnGapSize),\n    \"--flex--row-gap\": sizeVariable(rowGapSize),\n    \"--flex--padding-top\": sizeVariable(paddingTopSize),\n    \"--flex--padding-bottom\": sizeVariable(paddingBottomSize),\n    \"--flex--padding-left\": sizeVariable(paddingLeftSize),\n    \"--flex--padding-right\": sizeVariable(paddingRightSize),\n  };\n\n  const Element = elementType;\n\n  return (\n    <Element {...restProps} className={rootClassName} style={style}>\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"mappings":";;;;;;AAuDA,IAAM,gBAAgB,SACpB,QAAQ,kBAAkB,KAAK;;AAGjC,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,UACA,WACA,YAAY,OACZ,OACA,SACA,KACA,WACA,QACA,MACA,OAAO,UACP,SACA,YACA,eACA,aACA,cACA,cAAc,OACd,GAAG,cACD;CAEJ,MAAM,gBAAgB,aAAa;CACnC,MAAM,aAAa,UAAU;CAC7B,MAAM,iBAAiB,cAAc;CACrC,MAAM,oBAAoB,iBAAiB;CAC3C,MAAM,kBAAkB,eAAe;CACvC,MAAM,mBAAmB,gBAAgB;CAEzC,MAAM,gBAAgB,KACpB,oBAAO,MACP,SAAS,oBAAO,OAChB,WAAW,oBAAO,SAClB,QAAQ,oBAAO,MACf,iBAAiB,oBAAO,eACxB,cAAc,oBAAO,YACrB,kBAAkB,oBAAO,gBACzB,qBAAqB,oBAAO,mBAC5B,mBAAmB,oBAAO,iBAC1B,oBAAoB,oBAAO,kBAC3B,SACF;CAEA,MAAM,QAAuB;EAC3B,qBAAqB;EACrB,gBAAgB;EAChB,iBACE,UAAU,QAAQ,aAAa,UAAU,UAAU,eAAe;EACpE,mBAAmB;EACnB,sBAAsB,aAAa,aAAa;EAChD,mBAAmB,aAAa,UAAU;EAC1C,uBAAuB,aAAa,cAAc;EAClD,0BAA0B,aAAa,iBAAiB;EACxD,wBAAwB,aAAa,eAAe;EACpD,yBAAyB,aAAa,gBAAgB;CACxD;CAIA,OACE,oBAAC,aAAD;EAAS,GAAI;EAAW,WAAW;EAAsB;EACtD;CACM,CAAA;AAEb"}

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

@@ -2,8 +2,22 @@
 /* */
 //#region src/components/Flex/Flex.module.scss
 var flex = "flow--flex";
-var Flex_module_default = { flex };
+var align = "flow--flex--align";
+var justify = "flow--flex--justify";
+var grow = "flow--flex--grow";
+var Flex_module_default = {
+	flex,
+	align,
+	justify,
+	grow,
+	"column-gap": "flow--flex--column-gap",
+	"row-gap": "flow--flex--row-gap",
+	"padding-top": "flow--flex--padding-top",
+	"padding-bottom": "flow--flex--padding-bottom",
+	"padding-left": "flow--flex--padding-left",
+	"padding-right": "flow--flex--padding-right"
+};
 //#endregion
-export { Flex_module_default as default, flex };
+export { align, Flex_module_default as default, flex, grow, justify };
 
 //# sourceMappingURL=Flex.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.module.mjs","names":[],"sources":["../../../../../../../src/components/Flex/Flex.module.scss"],"sourcesContent":[".flex {\n  display: flex;\n}\n"],"mappings":""}
+{"version":3,"file":"Flex.module.mjs","names":[],"sources":["../../../../../../../src/components/Flex/Flex.module.scss"],"sourcesContent":["/* The props arrive as custom properties, so a consumer's `className` – a\n   media query included – can override them. A property whose prop is unset is\n   left alone entirely, instead of competing with the consumer's CSS. */\n.flex {\n  display: flex;\n  flex-flow: var(--flex--direction) var(--flex--wrap);\n}\n\n.align {\n  align-items: var(--flex--align);\n}\n\n.justify {\n  justify-content: var(--flex--justify);\n}\n\n.grow {\n  flex-grow: 1;\n}\n\n/* Spacing */\n.column-gap {\n  column-gap: var(--flex--column-gap);\n}\n\n.row-gap {\n  row-gap: var(--flex--row-gap);\n}\n\n.padding-top {\n  padding-top: var(--flex--padding-top);\n}\n\n.padding-bottom {\n  padding-bottom: var(--flex--padding-bottom);\n}\n\n/* The props are named physically, so they stay physical under `direction: rtl`. */\n.padding-left {\n  // stylelint-disable-next-line logical-css/require-logical-properties -- `paddingLeft` prop\n  padding-left: var(--flex--padding-left);\n}\n\n.padding-right {\n  // stylelint-disable-next-line logical-css/require-logical-properties -- `paddingRight` prop\n  padding-right: var(--flex--padding-right);\n}\n"],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.5.0-next.0",
+  "version": "1.5.0-next.1",
   "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.5.0-next.0",
+    "@mittwald/flow-icons": "^1.5.0-next.1",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.5.0-next.0",
+    "@mittwald/react-tunnel": "^1.5.0-next.1",
     "@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.5.0-next.0",
-    "@mittwald/flow-design-tokens": "1.5.0-next.0",
-    "@mittwald/flow-icons-base": "1.5.0-next.0",
+    "@mittwald/flow-core": "1.5.0-next.1",
+    "@mittwald/flow-design-tokens": "1.5.0-next.1",
+    "@mittwald/flow-icons-base": "1.5.0-next.1",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.5.0-next.0",
+    "@mittwald/typescript-config": "1.5.0-next.1",
     "@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.5.0-next.0",
+    "@mittwald/flow-icons-pro": "1.5.0-next.1",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -219,5 +219,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "8f28ecdc568addeb83eac40f35f0653c70766141"
+  "gitHead": "960225094d5ee4e519ccdd7020d4dd138fa3bceb"
 }