@pandacss/preset-base 0.0.0-dev-20230620131522 → 0.0.0-dev-20230620140733

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -289,15 +289,25 @@ declare const preset: {
289
289
  };
290
290
  };
291
291
  blocklist: "aspectRatio"[];
292
- transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
293
- aspectRatio: any;
294
- overflow: "hidden";
295
- display: "flex";
296
- justifyContent: "center";
297
- alignItems: "center";
298
- '&>img, &>video': {
292
+ transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>, { map }: _pandacss_types.PatternHelpers): {
293
+ position: "relative";
294
+ _before: {
295
+ content: "\"\"";
296
+ display: "block";
297
+ height: "0";
298
+ paddingBottom: any;
299
+ };
300
+ '&>*': {
301
+ display: "flex";
302
+ justifyContent: "center";
303
+ alignItems: "center";
304
+ overflow: "hidden";
305
+ position: "absolute";
306
+ inset: "0";
299
307
  width: "100%";
300
308
  height: "100%";
309
+ };
310
+ '&>img, &>video': {
301
311
  objectFit: "cover";
302
312
  };
303
313
  };
package/dist/index.js CHANGED
@@ -2146,17 +2146,27 @@ var aspectRatio = definePattern({
2146
2146
  ratio: { type: "number" }
2147
2147
  },
2148
2148
  blocklist: ["aspectRatio"],
2149
- transform(props) {
2150
- const { ratio, ...rest } = props;
2149
+ transform(props, { map }) {
2150
+ const { ratio = 4 / 3, ...rest } = props;
2151
2151
  return {
2152
- aspectRatio: ratio,
2153
- overflow: "hidden",
2154
- display: "flex",
2155
- justifyContent: "center",
2156
- alignItems: "center",
2157
- "&>img, &>video": {
2152
+ position: "relative",
2153
+ _before: {
2154
+ content: `""`,
2155
+ display: "block",
2156
+ height: "0",
2157
+ paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
2158
+ },
2159
+ "&>*": {
2160
+ display: "flex",
2161
+ justifyContent: "center",
2162
+ alignItems: "center",
2163
+ overflow: "hidden",
2164
+ position: "absolute",
2165
+ inset: "0",
2158
2166
  width: "100%",
2159
- height: "100%",
2167
+ height: "100%"
2168
+ },
2169
+ "&>img, &>video": {
2160
2170
  objectFit: "cover"
2161
2171
  },
2162
2172
  ...rest
package/dist/index.mjs CHANGED
@@ -2119,17 +2119,27 @@ var aspectRatio = definePattern({
2119
2119
  ratio: { type: "number" }
2120
2120
  },
2121
2121
  blocklist: ["aspectRatio"],
2122
- transform(props) {
2123
- const { ratio, ...rest } = props;
2122
+ transform(props, { map }) {
2123
+ const { ratio = 4 / 3, ...rest } = props;
2124
2124
  return {
2125
- aspectRatio: ratio,
2126
- overflow: "hidden",
2127
- display: "flex",
2128
- justifyContent: "center",
2129
- alignItems: "center",
2130
- "&>img, &>video": {
2125
+ position: "relative",
2126
+ _before: {
2127
+ content: `""`,
2128
+ display: "block",
2129
+ height: "0",
2130
+ paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
2131
+ },
2132
+ "&>*": {
2133
+ display: "flex",
2134
+ justifyContent: "center",
2135
+ alignItems: "center",
2136
+ overflow: "hidden",
2137
+ position: "absolute",
2138
+ inset: "0",
2131
2139
  width: "100%",
2132
- height: "100%",
2140
+ height: "100%"
2141
+ },
2142
+ "&>img, &>video": {
2133
2143
  objectFit: "cover"
2134
2144
  },
2135
2145
  ...rest
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pandacss/preset-base",
3
- "version": "0.0.0-dev-20230620131522",
3
+ "version": "0.0.0-dev-20230620140733",
4
4
  "description": "The base preset for Panda CSS that contains the conditions and utilities",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -14,7 +14,7 @@
14
14
  "dist"
15
15
  ],
16
16
  "dependencies": {
17
- "@pandacss/types": "0.0.0-dev-20230620131522"
17
+ "@pandacss/types": "0.0.0-dev-20230620140733"
18
18
  },
19
19
  "scripts": {
20
20
  "build": "tsup src/index.ts --format=esm,cjs --dts",