@obosbbl/grunnmuren-react 3.0.5 → 3.0.6
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.mjs +49 -47
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1118,7 +1118,7 @@ const cardVariants = cva({
|
|
|
1118
1118
|
base: [
|
|
1119
1119
|
'group/card',
|
|
1120
1120
|
'rounded-2xl border p-3',
|
|
1121
|
-
'flex gap-y-4',
|
|
1121
|
+
'flex flex-col gap-y-4',
|
|
1122
1122
|
'relative',
|
|
1123
1123
|
// **** Content ****
|
|
1124
1124
|
'[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
|
|
@@ -1187,22 +1187,21 @@ const cardVariants = cva({
|
|
|
1187
1187
|
horizontal: [
|
|
1188
1188
|
'gap-x-4',
|
|
1189
1189
|
// **** With Media ****
|
|
1190
|
-
'[&:has(>[data-slot="media"]:first-child)]:flex-col',
|
|
1191
1190
|
'[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
|
|
1192
|
-
'
|
|
1193
|
-
'
|
|
1194
|
-
'
|
|
1191
|
+
'has-data-[slot=media]:@2xl:!flex-row',
|
|
1192
|
+
'*:data-[slot=media]:@2xl:h-fit',
|
|
1193
|
+
'has-data-[slot=media]:*:@2xl:basis-1/2',
|
|
1195
1194
|
// Position media at the edges of the card
|
|
1196
|
-
'
|
|
1197
|
-
'
|
|
1198
|
-
'
|
|
1195
|
+
'*:data-[slot=media]:@2xl:mb-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
|
|
1196
|
+
'*:data-[slot=media]:first:@2xl:mr-0',
|
|
1197
|
+
'*:data-[slot=media]:last:@2xl:ml-0',
|
|
1199
1198
|
// Make sure the card link is clickable when the media is on the right side
|
|
1200
|
-
// This
|
|
1199
|
+
// This is necessary because the media content is positioned after the card link in the DOM
|
|
1201
1200
|
'[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-[1]',
|
|
1202
1201
|
// **** Without Media ****
|
|
1203
|
-
'
|
|
1202
|
+
'not-has-data-[slot=media]:@md:flex-row',
|
|
1204
1203
|
// Make the layout responsive: when the Content reaches a minimum width of 12rem, the layout switches to vertical. Also makes sure Content takes up the remaining space available.
|
|
1205
|
-
'
|
|
1204
|
+
'not-has-data-[slot=media]:**:data-[slot=content]:grow',
|
|
1206
1205
|
// Make sure svg's etc. are not shrinkable
|
|
1207
1206
|
'[&>:not([data-slot="content"],[data-slot="media"])]:shrink-0'
|
|
1208
1207
|
]
|
|
@@ -1220,12 +1219,12 @@ const cardVariants = cva({
|
|
|
1220
1219
|
// **** Media ****
|
|
1221
1220
|
// Some rounded corners are removed when the card is outlined
|
|
1222
1221
|
'[&_[data-slot="media"]]:rounded-t-2xl',
|
|
1223
|
-
'
|
|
1224
|
-
'
|
|
1222
|
+
'*:data-[slot=media]:first:@2xl:rounded-tr-none *:data-[slot=media]:first:@2xl:rounded-bl-2xl',
|
|
1223
|
+
'*:data-[slot=media]:last:@2xl:rounded-tl-none *:data-[slot=media]:last:@2xl:rounded-br-2xl',
|
|
1225
1224
|
// **** Badge ****
|
|
1226
1225
|
// Override default corner radius of the badge to match the media border radius
|
|
1227
|
-
'[&_[data-slot="media"]:first-child_[data-slot="badge"]:last-child]:
|
|
1228
|
-
'[&_[data-slot="media"]:last-child_[data-slot="badge"]:first-child]:
|
|
1226
|
+
'[&_[data-slot="media"]:first-child_[data-slot="badge"]:last-child]:@2xl:rounded-tr-none',
|
|
1227
|
+
'[&_[data-slot="media"]:last-child_[data-slot="badge"]:first-child]:@2xl:rounded-tl-none'
|
|
1229
1228
|
]
|
|
1230
1229
|
}
|
|
1231
1230
|
]
|
|
@@ -1237,38 +1236,41 @@ const Card = ({ children, className: _className, variant, layout, ...restProps }
|
|
|
1237
1236
|
layout
|
|
1238
1237
|
});
|
|
1239
1238
|
return /*#__PURE__*/ jsx("div", {
|
|
1240
|
-
className:
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
'
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1239
|
+
className: "@container",
|
|
1240
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
1241
|
+
className: className,
|
|
1242
|
+
...restProps,
|
|
1243
|
+
children: /*#__PURE__*/ jsx(Provider, {
|
|
1244
|
+
values: [
|
|
1245
|
+
[
|
|
1246
|
+
HeadingContext,
|
|
1247
|
+
{
|
|
1248
|
+
size: 's',
|
|
1249
|
+
className: cx([
|
|
1250
|
+
'inline',
|
|
1251
|
+
'w-fit',
|
|
1252
|
+
'text-pretty',
|
|
1253
|
+
'hyphens-auto',
|
|
1254
|
+
'[word-break:break-word]',
|
|
1255
|
+
// **** Card link in Heading ****
|
|
1256
|
+
// Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
|
|
1257
|
+
// Border top is set to even out the border bottom used for the underline
|
|
1258
|
+
'*:data-[slot="card-link"]:no-underline',
|
|
1259
|
+
'*:data-[slot="card-link"]:border-y-2',
|
|
1260
|
+
'*:data-[slot="card-link"]:border-y-transparent',
|
|
1261
|
+
'*:data-[slot="card-link"]:transition-colors',
|
|
1262
|
+
'*:data-[slot="card-link"]:hover:border-b-current',
|
|
1263
|
+
// Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
|
|
1264
|
+
'*:data-[slot="card-link"]:font-inherit',
|
|
1265
|
+
'*:data-[slot="card-link"]:text-pretty',
|
|
1266
|
+
'*:data-[slot="card-link"]:hyphens-auto',
|
|
1267
|
+
'*:data-[slot="card-link"]:[word-break:break-word]'
|
|
1268
|
+
])
|
|
1269
|
+
}
|
|
1270
|
+
]
|
|
1271
|
+
],
|
|
1272
|
+
children: children
|
|
1273
|
+
})
|
|
1272
1274
|
})
|
|
1273
1275
|
});
|
|
1274
1276
|
};
|