@asnewyla/card 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 XD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,72 @@
+# @asnewyla/card
+
+Content card surface with an optional full-bleed image, padding, and radius.
+
+## Install
+
+```bash
+npm install @asnewyla/card @asnewyla/image
+```
+
+`Card` renders `@asnewyla/image`'s `Image` internally for its optional `image`
+slot, so that stylesheet also needs importing once, alongside `Card`'s own:
+
+```ts
+import '@asnewyla/card/styles.css';
+import '@asnewyla/image/styles.css';
+```
+
+## Usage
+
+```tsx
+import { Card } from '@asnewyla/card';
+
+<Card>
+  <h3>Card title</h3>
+  <p>Some supporting body text.</p>
+</Card>
+
+<Card
+  radius="md"
+  image={{ src: '/photo.jpg', alt: 'A mountain at sunset', aspectRatio: '2 / 1' }}
+>
+  <h3>Mountain view</h3>
+  <p>The image renders full-bleed above the content, clipped to the card's own radius.</p>
+</Card>
+```
+
+### Props
+
+| Prop | Type | Default |
+|---|---|---|
+| `children` | `React.ReactNode` (**required**) | — |
+| `image` | `Omit<ImageProps, 'radius'>` | — |
+| `padding` | `'sm' \| 'md' \| 'lg'` | `'md'` |
+| `radius` | `'sm' \| 'md' \| 'lg' \| 'full'` | — (square corners) |
+
+Every other native `<div>` prop (`className`, `style`, `id`, `aria-*`, ...) is
+accepted and forwarded to the root element; a `className` you pass is merged
+with the card's own, not replaced.
+
+`image` accepts everything `Image` itself does — `src`, `alt`, `fit`,
+`aspectRatio`, `fallback`, native `<img>` attributes — except `radius`:
+the card's own `radius` already governs the image's corners (it's rendered
+edge-to-edge and clipped to the card's shape), so a separate image radius
+would just be a way to fight it.
+
+### Theming
+
+Override the CSS custom properties — defaults adapt automatically to
+`prefers-color-scheme` via `@asnewyla/tokens`:
+
+```css
+:root {
+  --xd-color-border: #cbd5e1;
+  --xd-radius-md: 0.375rem;
+  --xd-space-md: 0.5rem;
+}
+```
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1,37 @@
+/* src/components/Card.css */
+.xd-card {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);
+}
+.xd-card[data-padding=sm] {
+  --_padding: var(--xd-space-sm, 0.375rem);
+}
+.xd-card[data-padding=md] {
+  --_padding: var(--xd-space-md, 0.5rem);
+}
+.xd-card[data-padding=lg] {
+  --_padding: var(--xd-space-lg, 0.75rem);
+}
+.xd-card {
+  padding: var(--_padding);
+}
+.xd-card > .xd-image {
+  margin: calc(var(--_padding) * -1) calc(var(--_padding) * -1) var(--_padding);
+  width: calc(100% + var(--_padding) * 2);
+  max-width: none;
+}
+.xd-card[data-radius=sm] {
+  border-radius: var(--xd-radius-sm, 0.25rem);
+}
+.xd-card[data-radius=md] {
+  border-radius: var(--xd-radius-md, 0.375rem);
+}
+.xd-card[data-radius=lg] {
+  border-radius: var(--xd-radius-lg, 0.625rem);
+}
+.xd-card[data-radius=full] {
+  border-radius: var(--xd-radius-full, 9999px);
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Card.css"],"sourcesContent":[".xd-card {\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n  border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);\r\n}\r\n\r\n/* --- Padding --- */\r\n\r\n.xd-card[data-padding=\"sm\"] {\r\n  --_padding: var(--xd-space-sm, 0.375rem);\r\n}\r\n\r\n.xd-card[data-padding=\"md\"] {\r\n  --_padding: var(--xd-space-md, 0.5rem);\r\n}\r\n\r\n.xd-card[data-padding=\"lg\"] {\r\n  --_padding: var(--xd-space-lg, 0.75rem);\r\n}\r\n\r\n.xd-card {\r\n  padding: var(--_padding);\r\n}\r\n\r\n/* The image is pulled back out to the card's edges via a negative margin\r\n   matching --_padding, then re-clipped to the card's own border-radius by\r\n   `overflow: hidden` above — no separate image radius needed. */\r\n.xd-card > .xd-image {\r\n  margin: calc(var(--_padding) * -1) calc(var(--_padding) * -1) var(--_padding);\r\n  width: calc(100% + var(--_padding) * 2);\r\n  max-width: none;\r\n}\r\n\r\n/* --- Radius --- */\r\n\r\n.xd-card[data-radius=\"sm\"] {\r\n  border-radius: var(--xd-radius-sm, 0.25rem);\r\n}\r\n\r\n.xd-card[data-radius=\"md\"] {\r\n  border-radius: var(--xd-radius-md, 0.375rem);\r\n}\r\n\r\n.xd-card[data-radius=\"lg\"] {\r\n  border-radius: var(--xd-radius-lg, 0.625rem);\r\n}\r\n\r\n.xd-card[data-radius=\"full\"] {\r\n  border-radius: var(--xd-radius-full, 9999px);\r\n}\r\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,YAAU;AACV,UAAQ,IAAI,sBAAsB,EAAE,KAAK,MAAM,IAAI,iBAAiB,EAAE;AACxE;AAIA,CATC,OASO,CAAC;AACP,cAAY,IAAI,aAAa,EAAE;AACjC;AAEA,CAbC,OAaO,CAAC;AACP,cAAY,IAAI,aAAa,EAAE;AACjC;AAEA,CAjBC,OAiBO,CAAC;AACP,cAAY,IAAI,aAAa,EAAE;AACjC;AAEA,CArBC;AAsBC,WAAS,IAAI;AACf;AAKA,CA5BC,QA4BQ,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,CApCC,OAoCO,CAAC;AACP,iBAAe,IAAI,cAAc,EAAE;AACrC;AAEA,CAxCC,OAwCO,CAAC;AACP,iBAAe,IAAI,cAAc,EAAE;AACrC;AAEA,CA5CC,OA4CO,CAAC;AACP,iBAAe,IAAI,cAAc,EAAE;AACrC;AAEA,CAhDC,OAgDO,CAAC;AACP,iBAAe,IAAI,gBAAgB,EAAE;AACvC;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { ImageProps } from '@asnewyla/image';
+
+type CardPadding = 'sm' | 'md' | 'lg';
+type CardRadius = 'sm' | 'md' | 'lg' | 'full';
+type CardProps = ComponentPropsWithoutRef<'div'> & {
+    children: ReactNode;
+    image?: Omit<ImageProps, 'radius'>;
+    padding?: CardPadding;
+    radius?: CardRadius;
+};
+declare const Card: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    children: ReactNode;
+    image?: Omit<ImageProps, "radius">;
+    padding?: CardPadding;
+    radius?: CardRadius;
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { Card, type CardPadding, type CardProps, type CardRadius };

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { ImageProps } from '@asnewyla/image';
+
+type CardPadding = 'sm' | 'md' | 'lg';
+type CardRadius = 'sm' | 'md' | 'lg' | 'full';
+type CardProps = ComponentPropsWithoutRef<'div'> & {
+    children: ReactNode;
+    image?: Omit<ImageProps, 'radius'>;
+    padding?: CardPadding;
+    radius?: CardRadius;
+};
+declare const Card: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    children: ReactNode;
+    image?: Omit<ImageProps, "radius">;
+    padding?: CardPadding;
+    radius?: CardRadius;
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { Card, type CardPadding, type CardProps, type CardRadius };

package/dist/index.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var image = require('@asnewyla/image');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Card.tsx
+function CardInner({
+  children,
+  image: image$1,
+  padding = "md",
+  radius,
+  className,
+  ...restProps
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      ...restProps,
+      className: ["xd-card", className].filter(Boolean).join(" "),
+      "data-padding": padding,
+      "data-radius": radius,
+      children: [
+        image$1 && /* @__PURE__ */ jsxRuntime.jsx(image.Image, { ...image$1 }),
+        children
+      ]
+    }
+  );
+}
+var Card = react.forwardRef(CardInner);
+
+exports.Card = Card;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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,CAAC,SAAA,EAAW,SAAS,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAAA,MAC1D,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';\r\nimport {\r\n  type ComponentPropsWithoutRef,\r\n  type ForwardedRef,\r\n  type ReactNode,\r\n  forwardRef,\r\n} from 'react';\r\nimport './Card.css';\r\n\r\nexport type CardPadding = 'sm' | 'md' | 'lg';\r\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'full';\r\n\r\nexport type CardProps = ComponentPropsWithoutRef<'div'> & {\r\n  children: ReactNode;\r\n  image?: Omit<ImageProps, 'radius'>;\r\n  padding?: CardPadding;\r\n  radius?: CardRadius;\r\n};\r\n\r\nfunction CardInner(\r\n  {\r\n    children,\r\n    image,\r\n    padding = 'md',\r\n    radius,\r\n    className,\r\n    ...restProps\r\n  }: CardProps,\r\n  ref: ForwardedRef<HTMLDivElement>,\r\n) {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      {...restProps}\r\n      className={['xd-card', className].filter(Boolean).join(' ')}\r\n      data-padding={padding}\r\n      data-radius={radius}\r\n    >\r\n      {image && <Image {...image} />}\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const Card = forwardRef<HTMLDivElement, CardProps>(CardInner);\r\n"]}

package/dist/index.mjs

@@ -0,0 +1,33 @@
+import { Image } from '@asnewyla/image';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Card.tsx
+function CardInner({
+  children,
+  image,
+  padding = "md",
+  radius,
+  className,
+  ...restProps
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...restProps,
+      className: ["xd-card", className].filter(Boolean).join(" "),
+      "data-padding": padding,
+      "data-radius": radius,
+      children: [
+        image && /* @__PURE__ */ jsx(Image, { ...image }),
+        children
+      ]
+    }
+  );
+}
+var Card = forwardRef(CardInner);
+
+export { Card };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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,CAAC,SAAA,EAAW,SAAS,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAAA,MAC1D,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';\r\nimport {\r\n  type ComponentPropsWithoutRef,\r\n  type ForwardedRef,\r\n  type ReactNode,\r\n  forwardRef,\r\n} from 'react';\r\nimport './Card.css';\r\n\r\nexport type CardPadding = 'sm' | 'md' | 'lg';\r\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'full';\r\n\r\nexport type CardProps = ComponentPropsWithoutRef<'div'> & {\r\n  children: ReactNode;\r\n  image?: Omit<ImageProps, 'radius'>;\r\n  padding?: CardPadding;\r\n  radius?: CardRadius;\r\n};\r\n\r\nfunction CardInner(\r\n  {\r\n    children,\r\n    image,\r\n    padding = 'md',\r\n    radius,\r\n    className,\r\n    ...restProps\r\n  }: CardProps,\r\n  ref: ForwardedRef<HTMLDivElement>,\r\n) {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      {...restProps}\r\n      className={['xd-card', className].filter(Boolean).join(' ')}\r\n      data-padding={padding}\r\n      data-radius={radius}\r\n    >\r\n      {image && <Image {...image} />}\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const Card = forwardRef<HTMLDivElement, CardProps>(CardInner);\r\n"]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@asnewyla/card",
+  "version": "0.2.0",
+  "description": "Content card surface with an optional image, padding, and radius",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xavierDelaFuente/xd-components.git",
+    "directory": "packages/card"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "keywords": [
+    "react",
+    "card",
+    "surface",
+    "accessible"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@asnewyla/image": "0.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "jsdom": "^24.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.0",
+    "vitest": "^2.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "type-check": "tsc --noEmit"
+  }
+}