@mittwald/flow-react-components 0.2.0-alpha.97 → 0.2.0-alpha.98

package/dist/js/components/Image/Image.mjs

@@ -7,9 +7,21 @@ import clsx from 'clsx';
 import styles from './Image.module.scss.mjs';
 
 const Image = flowComponent("Image", (props) => {
-  const { className, withBorder, ...rest } = props;
-  const rootClassName = clsx(withBorder && styles.border, className);
-  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx("img", { className: rootClassName, ...rest }) });
+  const { className, withBorder, style, aspectRatio, width, height, ...rest } = props;
+  const rootClassName = clsx(
+    styles.image,
+    withBorder && styles.border,
+    aspectRatio && styles.aspectRatio,
+    className
+  );
+  return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: rootClassName,
+      style: { ...style, aspectRatio, width, height },
+      ...rest
+    }
+  ) });
 });
 
 export { Image, Image as default };

package/dist/js/components/Image/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps extends ComponentProps<\"img\">, FlowComponentProps {\n  /** Display the image with border and rounded edges */\n  withBorder?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Image = flowComponent(\"Image\", (props) => {\n  const { className, withBorder, ...rest } = props;\n\n  const rootClassName = clsx(withBorder && styles.border, className);\n\n  return (\n    <ClearPropsContext>\n      <img className={rootClassName} {...rest} />\n    </ClearPropsContext>\n  );\n});\n\nexport default Image;\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,KAAQ,GAAA,aAAA,CAAc,OAAS,EAAA,CAAC,KAAU,KAAA;AACrD,EAAA,MAAM,EAAE,SAAA,EAAW,UAAY,EAAA,GAAG,MAAS,GAAA,KAAA;AAE3C,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,UAAc,IAAA,MAAA,CAAO,QAAQ,SAAS,CAAA;AAEjE,EACE,uBAAA,GAAA,CAAC,qBACC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,aAAgB,EAAA,GAAG,MAAM,CAC3C,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Image.mjs","sources":["../../../../src/components/Image/Image.tsx"],"sourcesContent":["import type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/components/ClearPropsContext/ClearPropsContext\";\nimport clsx from \"clsx\";\nimport type { ComponentProps } from \"react\";\nimport styles from \"./Image.module.scss\";\n\nexport interface ImageProps extends ComponentProps<\"img\">, FlowComponentProps {\n  /** Display the image with border and rounded edges. */\n  withBorder?: boolean;\n  /**\n   * The aspect ratio of the images container. Larger images will be centered\n   * and their overflow will be hidden.\n   */\n  aspectRatio?: number;\n}\n\n/**\n * @flr-generate all\n * @flr-clear-props-context\n */\nexport const Image = flowComponent(\"Image\", (props) => {\n  const { className, withBorder, style, aspectRatio, width, height, ...rest } =\n    props;\n\n  const rootClassName = clsx(\n    styles.image,\n    withBorder && styles.border,\n    aspectRatio && styles.aspectRatio,\n    className,\n  );\n\n  return (\n    <ClearPropsContext>\n      <img\n        className={rootClassName}\n        style={{ ...style, aspectRatio, width, height }}\n        {...rest}\n      />\n    </ClearPropsContext>\n  );\n});\n\nexport default Image;\n"],"names":[],"mappings":";;;;;;AAqBO,MAAM,KAAQ,GAAA,aAAA,CAAc,OAAS,EAAA,CAAC,KAAU,KAAA;AACrD,EAAM,MAAA,EAAE,WAAW,UAAY,EAAA,KAAA,EAAO,aAAa,KAAO,EAAA,MAAA,EAAQ,GAAG,IAAA,EACnE,GAAA,KAAA;AAEF,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,KAAA;AAAA,IACP,cAAc,MAAO,CAAA,MAAA;AAAA,IACrB,eAAe,MAAO,CAAA,WAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,2BACG,iBACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACX,OAAO,EAAE,GAAG,KAAO,EAAA,WAAA,EAAa,OAAO,MAAO,EAAA;AAAA,MAC7C,GAAG;AAAA;AAAA,GAER,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/Image/Image.module.scss.mjs

@@ -1,9 +1,13 @@
 "use client"
 /* */
+const image = "flow--image";
 const border = "flow--image--border";
+const aspectRatio = "flow--image--aspect-ratio";
 const styles = {
-	border: border
+	image: image,
+	border: border,
+	aspectRatio: aspectRatio
 };
 
-export { border, styles as default };
+export { aspectRatio, border, styles as default, image };
 //# sourceMappingURL=Image.module.scss.mjs.map

package/dist/js/components/Image/Image.module.scss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"Image.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/types/components/Image/Image.d.ts

@@ -1,8 +1,13 @@
 import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 import { ComponentProps } from 'react';
 export interface ImageProps extends ComponentProps<"img">, FlowComponentProps {
-    /** Display the image with border and rounded edges */
+    /** Display the image with border and rounded edges. */
     withBorder?: boolean;
+    /**
+     * The aspect ratio of the images container. Larger images will be centered
+     * and their overflow will be hidden.
+     */
+    aspectRatio?: number;
 }
 /**
  * @flr-generate all

package/dist/types/components/Image/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,KAAK,CAAC,EAAE,kBAAkB;IAC3E,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,+FAUhB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,KAAK,CAAC,EAAE,kBAAkB;IAC3E,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,+FAoBhB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/types/components/Image/stories/Default.stories.d.ts

@@ -5,4 +5,5 @@ export default meta;
 type Story = StoryObj<typeof Image>;
 export declare const Default: Story;
 export declare const WithBorder: Story;
+export declare const WithAspectRation: Story;
 //# sourceMappingURL=Default.stories.d.ts.map

package/dist/types/components/Image/stories/Default.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Image/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,UAAU,CAAC;AAI7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAI5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,UAAU,EAAE,KAAsC,CAAC"}
+{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Image/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,UAAU,CAAC;AAI7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAI5B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,UAAU,EAAE,KAAsC,CAAC;AAEhE,eAAO,MAAM,gBAAgB,EAAE,KAAyC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.2.0-alpha.97",
+  "version": "0.2.0-alpha.98",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -53,7 +53,7 @@
   "dependencies": {
     "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/string-compiler": "^3.2.6",
-    "@mittwald/react-tunnel": "0.2.0-alpha.97",
+    "@mittwald/react-tunnel": "0.2.0-alpha.98",
     "@mittwald/react-use-promise": "^3.0.1",
     "@react-aria/form": "^3.0.14",
     "@react-aria/utils": "^3.28.1",
@@ -92,7 +92,7 @@
     "@faker-js/faker": "^9.6.0",
     "@internationalized/date": "^3.7.0",
     "@mfalkenberg/remote-dom-react": "1.2.3",
-    "@mittwald/flow-design-tokens": "0.2.0-alpha.97",
+    "@mittwald/flow-design-tokens": "0.2.0-alpha.98",
     "@mittwald/react-use-promise": "^2.6.0",
     "@mittwald/typescript-config": "",
     "@nx/storybook": "^20.5.0",
@@ -172,5 +172,5 @@
       "optional": true
     }
   },
-  "gitHead": "0a834ad080c238fa9561ddce3d0423c855c7d7df"
+  "gitHead": "7ec72e8eb33bb6030e81355089cfb2624e8818b4"
 }