@marigold/components 3.0.6 → 4.0.0

package/dist/index.d.ts

@@ -640,11 +640,12 @@ declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.
 
 interface TilesProps {
     children: ReactNode;
+    tilesWidth: string;
     space?: ResponsiveStyleValue<string>;
-    itemMinWidth?: ResponsiveStyleValue<string>;
-    gridAutoRows?: boolean;
+    stretch?: boolean;
+    equalHeight?: boolean;
 }
-declare const Tiles: React.ForwardRefExoticComponent<TilesProps & React.RefAttributes<HTMLDivElement>>;
+declare const Tiles: ({ space, stretch, equalHeight, tilesWidth, children, ...props }: TilesProps) => JSX.Element;
 
 declare const XLoader: React.ForwardRefExoticComponent<SVGProps & React.RefAttributes<SVGElement>>;
 

package/dist/index.js

@@ -424,6 +424,7 @@ var IndeterminateMark = () => /* @__PURE__ */ import_react11.default.createEleme
 var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react11.default.createElement(import_system8.Box, {
   "aria-hidden": "true",
   __baseCSS: {
+    flex: "0 0 16px",
     width: 16,
     height: 16,
     bg: "#fff",
@@ -2675,29 +2676,36 @@ var TextField = (0, import_react67.forwardRef)(
 
 // src/Tiles/Tiles.tsx
 var import_react68 = __toESM(require("react"));
-var Tiles = import_react68.default.forwardRef(
-  ({
-    space = "none",
-    itemMinWidth = "250px",
-    gridAutoRows,
-    children,
-    ...props
-  }, ref) => /* @__PURE__ */ import_react68.default.createElement(import_system.Box, {
-    ref,
-    display: "grid",
-    __baseCSS: {
+var import_system50 = require("@marigold/system");
+var Tiles = ({
+  space = "none",
+  stretch = false,
+  equalHeight = false,
+  tilesWidth,
+  children,
+  ...props
+}) => {
+  const { css } = (0, import_system50.useTheme)();
+  const { width } = css({ width: tilesWidth });
+  let column = `min(${typeof width === "number" ? `${width}px` : width}, 100%)`;
+  if (stretch) {
+    column = `minmax(${column}, 1fr)`;
+  }
+  return /* @__PURE__ */ import_react68.default.createElement(import_system.Box, {
+    ...props,
+    css: {
+      display: "grid",
       gap: space,
-      gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`,
-      gridAutoRows: gridAutoRows ? "1fr" : "none"
-    },
-    ...props
-  }, children)
-);
+      gridTemplateColumns: `repeat(auto-fit, ${column})`,
+      gridAutoRows: equalHeight ? "1fr" : void 0
+    }
+  }, children);
+};
 
 // src/Tooltip/Tooltip.tsx
 var import_react71 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_system50 = require("@marigold/system");
+var import_system51 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
 var import_react69 = require("react");
@@ -2767,18 +2775,18 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
-  const styles = (0, import_system50.useComponentStyles)(
+  const styles = (0, import_system51.useComponentStyles)(
     "Tooltip",
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ import_react71.default.createElement(import_system50.Box, {
+  return /* @__PURE__ */ import_react71.default.createElement(import_system51.Box, {
     ...tooltipProps,
     ...rest,
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }, /* @__PURE__ */ import_react71.default.createElement("div", null, children), /* @__PURE__ */ import_react71.default.createElement(import_system50.Box, {
+  }, /* @__PURE__ */ import_react71.default.createElement("div", null, children), /* @__PURE__ */ import_react71.default.createElement(import_system51.Box, {
     ...arrowProps,
     __baseCSS: {
       position: "absolute",
@@ -2795,9 +2803,9 @@ var Tooltip = ({ children, variant, size }) => {
 Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
-var import_system51 = require("@marigold/system");
+var import_system52 = require("@marigold/system");
 var import_react72 = __toESM(require("react"));
-var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ import_react72.default.createElement(import_system51.SVG, {
+var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ import_react72.default.createElement(import_system52.SVG, {
   id: "XLoader",
   xmlns: "http://www.w3.org/2000/svg",
   size: 150,
@@ -2814,7 +2822,7 @@ var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ imp
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
-  begin: "1.1s",
+  begin: "1.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
 })), /* @__PURE__ */ import_react72.default.createElement("path", {
@@ -2843,7 +2851,7 @@ var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ imp
 }, /* @__PURE__ */ import_react72.default.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
-  values: "1; .01; 1; 1;",
+  values: "1; .01; 1; 1; 1;",
   begin: "0.7s",
   dur: "2.5s",
   repeatCount: "indefinite"
@@ -2914,7 +2922,7 @@ var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ imp
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
-  begin: "0.1s",
+  begin: "0.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
 }))));

package/dist/index.mjs

@@ -359,6 +359,7 @@ var IndeterminateMark = () => /* @__PURE__ */ React11.createElement("svg", {
 var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React11.createElement(Box7, {
   "aria-hidden": "true",
   __baseCSS: {
+    flex: "0 0 16px",
     width: 16,
     height: 16,
     bg: "#fff",
@@ -2683,24 +2684,31 @@ var TextField = forwardRef14(
 
 // src/Tiles/Tiles.tsx
 import React62 from "react";
-var Tiles = React62.forwardRef(
-  ({
-    space = "none",
-    itemMinWidth = "250px",
-    gridAutoRows,
-    children,
-    ...props
-  }, ref) => /* @__PURE__ */ React62.createElement(Box, {
-    ref,
-    display: "grid",
-    __baseCSS: {
+import { useTheme as useTheme3 } from "@marigold/system";
+var Tiles = ({
+  space = "none",
+  stretch = false,
+  equalHeight = false,
+  tilesWidth,
+  children,
+  ...props
+}) => {
+  const { css } = useTheme3();
+  const { width } = css({ width: tilesWidth });
+  let column = `min(${typeof width === "number" ? `${width}px` : width}, 100%)`;
+  if (stretch) {
+    column = `minmax(${column}, 1fr)`;
+  }
+  return /* @__PURE__ */ React62.createElement(Box, {
+    ...props,
+    css: {
+      display: "grid",
       gap: space,
-      gridTemplateColumns: `repeat(auto-fit, minmax(min(${itemMinWidth}, 100%), 1fr))`,
-      gridAutoRows: gridAutoRows ? "1fr" : "none"
-    },
-    ...props
-  }, children)
-);
+      gridTemplateColumns: `repeat(auto-fit, ${column})`,
+      gridAutoRows: equalHeight ? "1fr" : void 0
+    }
+  }, children);
+};
 
 // src/Tooltip/Tooltip.tsx
 import React64 from "react";
@@ -2825,7 +2833,7 @@ var XLoader = forwardRef15((props, ref) => /* @__PURE__ */ React65.createElement
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
-  begin: "1.1s",
+  begin: "1.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
 })), /* @__PURE__ */ React65.createElement("path", {
@@ -2854,7 +2862,7 @@ var XLoader = forwardRef15((props, ref) => /* @__PURE__ */ React65.createElement
 }, /* @__PURE__ */ React65.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
-  values: "1; .01; 1; 1;",
+  values: "1; .01; 1; 1; 1;",
   begin: "0.7s",
   dur: "2.5s",
   repeatCount: "indefinite"
@@ -2925,7 +2933,7 @@ var XLoader = forwardRef15((props, ref) => /* @__PURE__ */ React65.createElement
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
-  begin: "0.1s",
+  begin: "0.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
 }))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "3.0.6",
+  "version": "4.0.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,10 +23,10 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "1.1.6",
-    "@marigold/system": "3.0.6",
+    "@marigold/icons": "1.1.7",
+    "@marigold/system": "4.0.0",
     "@marigold/tokens": "3.1.0",
-    "@marigold/types": "0.5.4",
+    "@marigold/types": "0.5.5",
     "@react-aria/button": "3.6.2",
     "@react-aria/checkbox": "3.6.0",
     "@react-aria/dialog": "3.4.0",