@obosbbl/grunnmuren-react 3.0.5 → 3.0.7
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.mts +1 -1
- package/dist/index.mjs +56 -52
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -458,7 +458,7 @@ declare const cardVariants: (props?: ({
|
|
|
458
458
|
class?: never;
|
|
459
459
|
className?: cva.ClassValue;
|
|
460
460
|
})) | undefined) => string;
|
|
461
|
-
declare const Card: ({ children, className
|
|
461
|
+
declare const Card: ({ children, className, variant, layout, ...restProps }: CardProps) => react_jsx_runtime.JSX.Element;
|
|
462
462
|
type CardLinkWrapperProps = {
|
|
463
463
|
children?: React.ReactNode;
|
|
464
464
|
className?: string;
|
package/dist/index.mjs
CHANGED
|
@@ -1117,8 +1117,9 @@ function Backlink(props) {
|
|
|
1117
1117
|
const cardVariants = cva({
|
|
1118
1118
|
base: [
|
|
1119
1119
|
'group/card',
|
|
1120
|
-
'rounded-
|
|
1121
|
-
'
|
|
1120
|
+
'rounded-[inherit]',
|
|
1121
|
+
'border p-3',
|
|
1122
|
+
'flex flex-col gap-y-4',
|
|
1122
1123
|
'relative',
|
|
1123
1124
|
// **** Content ****
|
|
1124
1125
|
'[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
|
|
@@ -1187,22 +1188,21 @@ const cardVariants = cva({
|
|
|
1187
1188
|
horizontal: [
|
|
1188
1189
|
'gap-x-4',
|
|
1189
1190
|
// **** With Media ****
|
|
1190
|
-
'[&:has(>[data-slot="media"]:first-child)]:flex-col',
|
|
1191
1191
|
'[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse',
|
|
1192
|
-
'
|
|
1193
|
-
'
|
|
1194
|
-
'
|
|
1192
|
+
'has-data-[slot=media]:@2xl:!flex-row',
|
|
1193
|
+
'*:data-[slot=media]:@2xl:h-fit',
|
|
1194
|
+
'has-data-[slot=media]:*:@2xl:basis-1/2',
|
|
1195
1195
|
// Position media at the edges of the card
|
|
1196
|
-
'
|
|
1197
|
-
'
|
|
1198
|
-
'
|
|
1196
|
+
'*:data-[slot=media]:@2xl:mb-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
|
|
1197
|
+
'*:data-[slot=media]:first:@2xl:mr-0',
|
|
1198
|
+
'*:data-[slot=media]:last:@2xl:ml-0',
|
|
1199
1199
|
// Make sure the card link is clickable when the media is on the right side
|
|
1200
|
-
// This
|
|
1200
|
+
// This is necessary because the media content is positioned after the card link in the DOM
|
|
1201
1201
|
'[&:has(>[data-slot="media"]:last-child)_[data-slot="card-link"]]:z-[1]',
|
|
1202
1202
|
// **** Without Media ****
|
|
1203
|
-
'
|
|
1203
|
+
'not-has-data-[slot=media]:@md:flex-row',
|
|
1204
1204
|
// 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
|
-
'
|
|
1205
|
+
'not-has-data-[slot=media]:**:data-[slot=content]:grow',
|
|
1206
1206
|
// Make sure svg's etc. are not shrinkable
|
|
1207
1207
|
'[&>:not([data-slot="content"],[data-slot="media"])]:shrink-0'
|
|
1208
1208
|
]
|
|
@@ -1220,57 +1220,61 @@ const cardVariants = cva({
|
|
|
1220
1220
|
// **** Media ****
|
|
1221
1221
|
// Some rounded corners are removed when the card is outlined
|
|
1222
1222
|
'[&_[data-slot="media"]]:rounded-t-2xl',
|
|
1223
|
-
'
|
|
1224
|
-
'
|
|
1223
|
+
'*:data-[slot=media]:first:@2xl:rounded-tr-none *:data-[slot=media]:first:@2xl:rounded-bl-2xl',
|
|
1224
|
+
'*:data-[slot=media]:last:@2xl:rounded-tl-none *:data-[slot=media]:last:@2xl:rounded-br-2xl',
|
|
1225
1225
|
// **** Badge ****
|
|
1226
1226
|
// 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]:
|
|
1227
|
+
'[&_[data-slot="media"]:first-child_[data-slot="badge"]:last-child]:@2xl:rounded-tr-none',
|
|
1228
|
+
'[&_[data-slot="media"]:last-child_[data-slot="badge"]:first-child]:@2xl:rounded-tl-none'
|
|
1229
1229
|
]
|
|
1230
1230
|
}
|
|
1231
1231
|
]
|
|
1232
1232
|
});
|
|
1233
|
-
const Card = ({ children, className
|
|
1234
|
-
const
|
|
1235
|
-
className: _className,
|
|
1233
|
+
const Card = ({ children, className, variant, layout, ...restProps })=>{
|
|
1234
|
+
const cardClassName = cardVariants({
|
|
1236
1235
|
variant,
|
|
1237
1236
|
layout
|
|
1238
1237
|
});
|
|
1239
|
-
return
|
|
1240
|
-
|
|
1238
|
+
return(// The border-radius is set on the outer container to make it act as an invisible wrapper, only used for container queries
|
|
1239
|
+
// Since passing the className prop to this container is necessary to make custom styles behave as expected, we need to apply the border-radius here incase the consumer passes a custom background color
|
|
1240
|
+
/*#__PURE__*/ jsx("div", {
|
|
1241
1241
|
...restProps,
|
|
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
|
-
|
|
1242
|
+
className: cx(className, '@container rounded-2xl'),
|
|
1243
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
1244
|
+
className: cardClassName,
|
|
1245
|
+
children: /*#__PURE__*/ jsx(Provider, {
|
|
1246
|
+
values: [
|
|
1247
|
+
[
|
|
1248
|
+
HeadingContext,
|
|
1249
|
+
{
|
|
1250
|
+
size: 's',
|
|
1251
|
+
className: cx([
|
|
1252
|
+
'inline',
|
|
1253
|
+
'w-fit',
|
|
1254
|
+
'text-pretty',
|
|
1255
|
+
'hyphens-auto',
|
|
1256
|
+
'[word-break:break-word]',
|
|
1257
|
+
// **** Card link in Heading ****
|
|
1258
|
+
// Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
|
|
1259
|
+
// Border top is set to even out the border bottom used for the underline
|
|
1260
|
+
'*:data-[slot="card-link"]:no-underline',
|
|
1261
|
+
'*:data-[slot="card-link"]:border-y-2',
|
|
1262
|
+
'*:data-[slot="card-link"]:border-y-transparent',
|
|
1263
|
+
'*:data-[slot="card-link"]:transition-colors',
|
|
1264
|
+
'*:data-[slot="card-link"]:hover:border-b-current',
|
|
1265
|
+
// 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
|
|
1266
|
+
'*:data-[slot="card-link"]:font-inherit',
|
|
1267
|
+
'*:data-[slot="card-link"]:text-pretty',
|
|
1268
|
+
'*:data-[slot="card-link"]:hyphens-auto',
|
|
1269
|
+
'*:data-[slot="card-link"]:[word-break:break-word]'
|
|
1270
|
+
])
|
|
1271
|
+
}
|
|
1272
|
+
]
|
|
1273
|
+
],
|
|
1274
|
+
children: children
|
|
1275
|
+
})
|
|
1272
1276
|
})
|
|
1273
|
-
});
|
|
1277
|
+
}));
|
|
1274
1278
|
};
|
|
1275
1279
|
const cardLinkVariants = cva({
|
|
1276
1280
|
base: 'w-fit max-w-full',
|