@asnewyla/card 0.2.0 → 0.2.2
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.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/dist/index.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
overflow: hidden;
|
|
6
|
-
border: var(--xd-border-width
|
|
6
|
+
border: var(--xd-frame-border-width, 1px) solid var(--xd-color-border, #cbd5e1);
|
|
7
7
|
}
|
|
8
8
|
.xd-card[data-padding=sm] {
|
|
9
9
|
--_padding: var(--xd-space-sm, 0.375rem);
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Card.css"],"sourcesContent":[".xd-card {\
|
|
1
|
+
{"version":3,"sources":["../src/components/Card.css"],"sourcesContent":[".xd-card {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n /* Cards are a \"frame\" surface in the same sense Select's popover is —\n see --xd-frame-border-width in tokens.css. Defaults to the hairline. */\n border: var(--xd-frame-border-width, 1px) solid\n var(--xd-color-border, #cbd5e1);\n}\n\n/* --- Padding --- */\n\n.xd-card[data-padding=\"sm\"] {\n --_padding: var(--xd-space-sm, 0.375rem);\n}\n\n.xd-card[data-padding=\"md\"] {\n --_padding: var(--xd-space-md, 0.5rem);\n}\n\n.xd-card[data-padding=\"lg\"] {\n --_padding: var(--xd-space-lg, 0.75rem);\n}\n\n.xd-card {\n padding: var(--_padding);\n}\n\n/* The image is pulled back out to the card's edges via a negative margin\n matching --_padding, then re-clipped to the card's own border-radius by\n `overflow: hidden` above — no separate image radius needed. */\n.xd-card > .xd-image {\n margin: calc(var(--_padding) * -1) calc(var(--_padding) * -1) var(--_padding);\n width: calc(100% + var(--_padding) * 2);\n max-width: none;\n}\n\n/* --- Radius --- */\n\n.xd-card[data-radius=\"sm\"] {\n border-radius: var(--xd-radius-sm, 0.25rem);\n}\n\n.xd-card[data-radius=\"md\"] {\n border-radius: var(--xd-radius-md, 0.375rem);\n}\n\n.xd-card[data-radius=\"lg\"] {\n border-radius: var(--xd-radius-lg, 0.625rem);\n}\n\n.xd-card[data-radius=\"full\"] {\n border-radius: var(--xd-radius-full, 9999px);\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,YAAU;AAGV,UAAQ,IAAI,uBAAuB,EAAE,KAAK,MACxC,IAAI,iBAAiB,EAAE;AAC3B;AAIA,CAZC,OAYO,CAAC;AACP,cAAY,IAAI,aAAa,EAAE;AACjC;AAEA,CAhBC,OAgBO,CAAC;AACP,cAAY,IAAI,aAAa,EAAE;AACjC;AAEA,CApBC,OAoBO,CAAC;AACP,cAAY,IAAI,aAAa,EAAE;AACjC;AAEA,CAxBC;AAyBC,WAAS,IAAI;AACf;AAKA,CA/BC,QA+BQ,EAAE,CAAC;AACV,UAAQ,KAAK,IAAI,YAAY,EAAE,IAAI,KAAK,IAAI,YAAY,EAAE,IAAI,IAAI;AAClE,SAAO,KAAK,KAAK,EAAE,IAAI,YAAY,EAAE;AACrC,aAAW;AACb;AAIA,CAvCC,OAuCO,CAAC;AACP,iBAAe,IAAI,cAAc,EAAE;AACrC;AAEA,CA3CC,OA2CO,CAAC;AACP,iBAAe,IAAI,cAAc,EAAE;AACrC;AAEA,CA/CC,OA+CO,CAAC;AACP,iBAAe,IAAI,cAAc,EAAE;AACrC;AAEA,CAnDC,OAmDO,CAAC;AACP,iBAAe,IAAI,gBAAgB,EAAE;AACvC;","names":[]}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Card.tsx"],"names":["image","jsxs","jsx","Image","forwardRef"],"mappings":";;;;;;;AAmBA,SAAS,SAAA,CACP;AAAA,EACE,QAAA;AAAA,SACAA,OAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,
|
|
1
|
+
{"version":3,"sources":["../src/components/Card.tsx"],"names":["image","jsxs","jsx","Image","forwardRef"],"mappings":";;;;;;;AAmBA,SAAS,SAAA,CACP;AAAA,EACE,QAAA;AAAA,SACAA,OAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,SAAA,GAAY,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,GAAK,SAAA;AAAA,MAChD,cAAA,EAAc,OAAA;AAAA,MACd,aAAA,EAAa,MAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,QAAAD,OAAA,oBAASE,cAAA,CAACC,WAAA,EAAA,EAAO,GAAGH,OAAA,EAAO,CAAA;AAAA,QAC3B;AAAA;AAAA;AAAA,GACH;AAEJ;AAEO,IAAM,IAAA,GAAOI,iBAAsC,SAAS","file":"index.js","sourcesContent":["import { Image, type ImageProps } from '@asnewyla/image';\nimport {\n type ComponentPropsWithoutRef,\n type ForwardedRef,\n type ReactNode,\n forwardRef,\n} from 'react';\nimport './Card.css';\n\nexport type CardPadding = 'sm' | 'md' | 'lg';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'full';\n\nexport type CardProps = ComponentPropsWithoutRef<'div'> & {\n children: ReactNode;\n image?: Omit<ImageProps, 'radius'>;\n padding?: CardPadding;\n radius?: CardRadius;\n};\n\nfunction CardInner(\n {\n children,\n image,\n padding = 'md',\n radius,\n className,\n ...restProps\n }: CardProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n ref={ref}\n {...restProps}\n className={className ? `xd-card ${className}` : 'xd-card'}\n data-padding={padding}\n data-radius={radius}\n >\n {image && <Image {...image} />}\n {children}\n </div>\n );\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(CardInner);\n"]}
|
package/dist/index.mjs
CHANGED
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Card.tsx"],"names":[],"mappings":";;;;;AAmBA,SAAS,SAAA,CACP;AAAA,EACE,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,
|
|
1
|
+
{"version":3,"sources":["../src/components/Card.tsx"],"names":[],"mappings":";;;;;AAmBA,SAAS,SAAA,CACP;AAAA,EACE,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,MAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,SAAA,GAAY,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,GAAK,SAAA;AAAA,MAChD,cAAA,EAAc,OAAA;AAAA,MACd,aAAA,EAAa,MAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,QAAA,KAAA,oBAAS,GAAA,CAAC,KAAA,EAAA,EAAO,GAAG,KAAA,EAAO,CAAA;AAAA,QAC3B;AAAA;AAAA;AAAA,GACH;AAEJ;AAEO,IAAM,IAAA,GAAO,WAAsC,SAAS","file":"index.mjs","sourcesContent":["import { Image, type ImageProps } from '@asnewyla/image';\nimport {\n type ComponentPropsWithoutRef,\n type ForwardedRef,\n type ReactNode,\n forwardRef,\n} from 'react';\nimport './Card.css';\n\nexport type CardPadding = 'sm' | 'md' | 'lg';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'full';\n\nexport type CardProps = ComponentPropsWithoutRef<'div'> & {\n children: ReactNode;\n image?: Omit<ImageProps, 'radius'>;\n padding?: CardPadding;\n radius?: CardRadius;\n};\n\nfunction CardInner(\n {\n children,\n image,\n padding = 'md',\n radius,\n className,\n ...restProps\n }: CardProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n ref={ref}\n {...restProps}\n className={className ? `xd-card ${className}` : 'xd-card'}\n data-padding={padding}\n data-radius={radius}\n >\n {image && <Image {...image} />}\n {children}\n </div>\n );\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(CardInner);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@asnewyla/card",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "Content card surface with an optional image, padding, and radius",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"types": "dist/index.d.ts",
|
|
17
17
|
"exports": {
|
|
18
18
|
".": {
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
19
20
|
"import": "./dist/index.mjs",
|
|
20
|
-
"require": "./dist/index.js"
|
|
21
|
-
"types": "./dist/index.d.ts"
|
|
21
|
+
"require": "./dist/index.js"
|
|
22
22
|
},
|
|
23
23
|
"./styles.css": "./dist/index.css"
|
|
24
24
|
},
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@asnewyla/image": "0.2.
|
|
42
|
+
"@asnewyla/image": "0.2.1"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@testing-library/jest-dom": "^6.4.0",
|