ionbase-ui 0.4.0 → 0.5.0

package/dist/components/FullCard.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+export type FullCardAlignment = 'right' | 'left';
+/**
+ * Which heading element the headline renders as.
+ *
+ * `h1` is deliberately absent: a full card is a section within a page, never
+ * the page's own title.
+ */
+export type FullCardHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface FullCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /**
+     * Which side the media panel sits on. Matches Figma's `Alignment` variant,
+     * whose `Right` / `Left` name the media, not the text.
+     */
+    alignment?: FullCardAlignment;
+    /** Figma's `Eyebrow` slot — a Badge in the design, but any node works. */
+    eyebrow?: React.ReactNode;
+    /** Figma's `Headline`. Required: a card with no headline has no accessible name. */
+    headline: React.ReactNode;
+    /** Figma's `Description`. */
+    description?: React.ReactNode;
+    /** Figma's `Actions` slot — a secondary Button in the design. */
+    actions?: React.ReactNode;
+    /**
+     * Figma's `Media` slot. Rendered inside the framed screen holder, so pass
+     * the screenshot or embed itself, not the frame.
+     */
+    media?: React.ReactNode;
+    /**
+     * Heading element for the headline. Defaults to `h3`, matching the `Type/H3`
+     * text style Figma applies — but the level is a document-outline decision
+     * only the page knows, so it is a prop rather than a constant.
+     */
+    headingLevel?: FullCardHeadingLevel;
+    children?: React.ReactNode;
+}
+/**
+ * Full Card — the full-bleed case study row from Figma `Full Card` (592:857).
+ *
+ * A text column beside a framed media panel, split down the middle, mirrored
+ * by the `Alignment` variant.
+ *
+ * The split holds from 1080 and stacks below it, media above content in BOTH
+ * alignments — `Alignment` names a horizontal side and
+ * stops meaning anything once there is one column, so it does not get to
+ * decide the vertical order too. Size is a media query, not a prop, the same
+ * call Header makes about Device.
+ *
+ * WHY THE `show*` BOOLEANS ARE GONE
+ *
+ * Figma carries `Show Eyebrow`, `Show Description` and `Show Actions` beside
+ * the slots they gate, because a Figma component instance always holds every
+ * layer and needs a switch to hide one. React has no such constraint — an
+ * absent prop is the switch. Badge made the same call with `Show Dot`, and
+ * keeping both would have let `showActions` and `actions` disagree.
+ *
+ * `headline` is required, and it is the only required prop. The heading is
+ * what makes this a section rather than a decorated div, and every other part
+ * of the card is optional in Figma too.
+ *
+ * No `'use client'`: nothing here is stateful or interactive. The interactive
+ * parts arrive through `actions`, and they carry their own boundary.
+ */
+export declare const FullCard: React.ForwardRefExoticComponent<FullCardProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=FullCard.d.ts.map

package/dist/components/FullCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullCard.d.ts","sourceRoot":"","sources":["../../src/components/FullCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,OAAO,CACR;IACC;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oFAAoF;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iEAAiE;IACjE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,mFAgEpB,CAAC"}

package/dist/components/FullCard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+/**
+ * Full Card — the full-bleed case study row from Figma `Full Card` (592:857).
+ *
+ * A text column beside a framed media panel, split down the middle, mirrored
+ * by the `Alignment` variant.
+ *
+ * The split holds from 1080 and stacks below it, media above content in BOTH
+ * alignments — `Alignment` names a horizontal side and
+ * stops meaning anything once there is one column, so it does not get to
+ * decide the vertical order too. Size is a media query, not a prop, the same
+ * call Header makes about Device.
+ *
+ * WHY THE `show*` BOOLEANS ARE GONE
+ *
+ * Figma carries `Show Eyebrow`, `Show Description` and `Show Actions` beside
+ * the slots they gate, because a Figma component instance always holds every
+ * layer and needs a switch to hide one. React has no such constraint — an
+ * absent prop is the switch. Badge made the same call with `Show Dot`, and
+ * keeping both would have let `showActions` and `actions` disagree.
+ *
+ * `headline` is required, and it is the only required prop. The heading is
+ * what makes this a section rather than a decorated div, and every other part
+ * of the card is optional in Figma too.
+ *
+ * No `'use client'`: nothing here is stateful or interactive. The interactive
+ * parts arrive through `actions`, and they carry their own boundary.
+ */
+export const FullCard = forwardRef(({ alignment = 'right', eyebrow, headline, description, actions, media, headingLevel = 3, className, children, ...rest }, ref) => {
+    const Heading = `h${headingLevel}`;
+    return (_jsxs("section", { ...rest, ref: ref, className: [
+            'ion-full-card',
+            `ion-full-card--media-${alignment}`,
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), children: [_jsx("div", { className: "ion-full-card__content", children: _jsxs("div", { className: "ion-full-card__body", children: [eyebrow && _jsx("div", { className: "ion-full-card__eyebrow", children: eyebrow }), _jsx(Heading, { className: "ion-full-card__headline", children: headline }), description && (_jsx("p", { className: "ion-full-card__description", children: description })), actions && _jsx("div", { className: "ion-full-card__actions", children: actions }), children] }) }), _jsx("div", { className: "ion-full-card__media", children: _jsx("div", { className: "ion-full-card__media-mat", children: _jsx("div", { className: "ion-full-card__media-frame", children: _jsx("div", { className: "ion-full-card__media-screen", children: media }) }) }) })] }));
+});
+FullCard.displayName = 'FullCard';
+//# sourceMappingURL=FullCard.js.map

package/dist/components/FullCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullCard.js","sourceRoot":"","sources":["../../src/components/FullCard.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AA2C1C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,GAAG,OAAO,EACnB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,EACL,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAC;IAE5C,OAAO,CACL,sBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,eAAe;YACf,wBAAwB,SAAS,EAAE;YACnC,SAAS;SACV;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,aAQZ,cAAK,SAAS,EAAC,wBAAwB,YACrC,eAAK,SAAS,EAAC,qBAAqB,aACjC,OAAO,IAAI,cAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,GAAO,EACnE,KAAC,OAAO,IAAC,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAW,EAChE,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,4BAA4B,YAAE,WAAW,GAAK,CAC5D,EACA,OAAO,IAAI,cAAK,SAAS,EAAC,wBAAwB,YAAE,OAAO,GAAO,EAClE,QAAQ,IACL,GACF,EAQN,cAAK,SAAS,EAAC,sBAAsB,YACnC,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,4BAA4B,YACzC,cAAK,SAAS,EAAC,6BAA6B,YAAE,KAAK,GAAO,GACtD,GACF,GACF,IACE,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/index.d.ts

@@ -30,4 +30,6 @@ export { Table, TableHead, TableBody, TableRow, TableCell } from './Table.js';
 export type { TableProps, TableDensity, TableRowProps, TableRowSelection, TableCellProps, TableCellAlign, TableCellScope, } from './Table.js';
 export { ScrollProgress } from './ScrollProgress.js';
 export type { ScrollProgressProps, ScrollProgressSection, } from './ScrollProgress.js';
+export { FullCard } from './FullCard.js';
+export type { FullCardProps, FullCardAlignment, FullCardHeadingLevel, } from './FullCard.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC9E,YAAY,EACV,UAAU,EACV,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,cAAc,GACf,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC/C,YAAY,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,WAAW,GACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC3C,YAAY,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,YAAY,GACb,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC9E,YAAY,EACV,UAAU,EACV,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,GACf,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EACV,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,eAAe,CAAC"}

package/dist/components/index.js

@@ -14,4 +14,5 @@ export { Divider } from './Divider.js';
 export { NavItem } from './NavItem.js';
 export { Table, TableHead, TableBody, TableRow, TableCell } from './Table.js';
 export { ScrollProgress } from './ScrollProgress.js';
+export { FullCard } from './FullCard.js';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAOlD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAO/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAOlD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAU9E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/dist/styles/full-card.css

@@ -0,0 +1,287 @@
+/*
+ * Full Card
+ *
+ * Measured from Figma `Full Card` (592:857) — a component set with one axis,
+ * `Alignment`, whose `Right` (590:189) and `Left` (592:858) variants mirror the
+ * media panel across the card.
+ *
+ *   content column   padding 0 / 48, centred, hugs half the width
+ *   media column     surface/page, 1px rule facing the content, padding-top 48
+ *   media mat        surface/sunken, 8px inset, radius/6xl on the outer top corner
+ *   media frame      surface/default, 1px rule on three sides, radius/5xl
+ *
+ * WHAT WAS NOT COPIED FROM FIGMA, AND WHY
+ *
+ * 1. The 366px height and 1296px width are canvas measurements, not
+ *    constraints. 366 is what the parts add up to — 48 (column) + 8 (mat) +
+ *    310 (screen) — so it falls out of the box model and stating it again
+ *    would only pin the card to one media size. 1296 is the desktop container
+ *    width, which belongs to the page, not the card.
+ *
+ * 2. The description container's gap reads 9px in Figma. There is no 9 on the
+ *    spacing ladder and no token that resolves to one, so it is a nudge rather
+ *    than a decision; this uses `spacing/8`. Change it in Figma if the 9 was
+ *    meant, and it becomes a real token here.
+ *
+ * 3. The left variant carries its media rule on the media column's LEFT edge —
+ *    i.e. the card's outer edge — while the right variant carries it on the
+ *    edge facing the text. Only one of those is a divider; the other is a
+ *    stray line at the boundary of the card. Read as a mirroring oversight in
+ *    Figma, so both variants draw the rule on the inner edge here. Worth
+ *    fixing in the file, since the two disagree today.
+ *
+ * 4. The left variant's media column also hard-codes a 48px top padding where
+ *    the right variant binds `spacing/48`. Same oversight, same resolution:
+ *    the token, both times.
+ *
+ * 5. Figma has no narrow variant of this card, and a 1296-wide two-column row
+ *    is unusable below its own width. The stacked layout is repo-owned, on the
+ *    same reasoning as Header's device media queries: the browser knows the
+ *    viewport, so the caller should not have to say.
+ *
+ *    The split holds from 1080 — a chosen number, not a Breakpoint collection
+ *    container width, so it is stated here rather than in the token pipeline.
+ *    The two halves are even only while there is room for it: below roughly
+ *    1190 the media column holds at the panel plus its gutter and the text
+ *    column takes what is left, bottoming out near 375px of text at 1080. The
+ *    896 query below changes no layout at all — only the text gutter.
+ *
+ * STACKED PUTS THE MEDIA ON TOP, IN BOTH ALIGNMENTS
+ *
+ * `column-reverse`, so the DOM stays content-then-media while the media renders
+ * above the text. Two reasons it is the media rather than the headline:
+ *
+ *   - `Alignment` stops meaning anything once there is only one column. Letting
+ *     it decide the vertical order would turn one axis into two, and a card
+ *     whose text sits above the panel on some rows and below it on others reads
+ *     as a bug rather than a variant.
+ *   - The panel is the thing the card is about. Stacked, it is also the only
+ *     part with a fixed height, so putting it second would push it below the
+ *     fold on every narrow viewport.
+ */
+.ion-full-card {
+  --ion-full-card-padding-x: var(--spacing-24);
+  --ion-full-card-padding-y: var(--spacing-32);
+  --ion-full-card-gap: var(--spacing-8);
+  --ion-full-card-media-width: 562px;
+
+  /*
+   * The least space allowed between the centre rule and the media panel.
+   * Figma's is 86 at the design width (648 column − 562 panel), which is not on
+   * the spacing ladder and is a consequence of the 50/50 split rather than a
+   * decision. `spacing/48` is the floor, and it is the same 48 the panel is
+   * already inset from the top of the card — so when the row is too narrow for
+   * an even split, the panel keeps a gutter that matches its own top edge.
+   */
+  --ion-full-card-media-gutter: var(--spacing-48);
+
+  /*
+   * Placeholder geometry: the height of Figma's empty `Screen Container`. It
+   * is a floor, not a size — real media in the slot sets the height and this
+   * stops an empty card collapsing. Override per instance if the media has a
+   * known aspect ratio.
+   */
+  --ion-full-card-media-min-height: 310px;
+
+  display: flex;
+  flex-direction: column-reverse;
+  width: 100%;
+  border-top: var(--border-width-default) solid var(--border-default);
+  border-bottom: var(--border-width-default) solid var(--border-default);
+  font-family: var(--font-family-sans);
+}
+
+/*
+ * `flex: 0 0 auto` while stacked, not the `1 1 0` the split uses. In a column
+ * flex container a zero basis is a zero HEIGHT that then grows to fill — which
+ * is the two halves splitting the viewport instead of sizing to their content.
+ * The split re-states `1 1 0` at Desktop, where the axis is horizontal and a
+ * zero basis is what makes the halves equal regardless of text length.
+ */
+.ion-full-card__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: 0;
+  padding: var(--ion-full-card-padding-y) var(--ion-full-card-padding-x);
+  overflow: hidden;
+}
+
+.ion-full-card__body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ion-full-card-gap);
+  width: 100%;
+}
+
+.ion-full-card__eyebrow,
+.ion-full-card__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  flex-wrap: wrap;
+}
+
+/*
+ * The type styles are restated rather than delegated to `.ion-text-h3` /
+ * `.ion-text-body-sm`, so the card renders correctly whatever classes the
+ * caller puts on the headline. Both sets read the same breakpoint-scoped
+ * `type/*` tokens, so they resize together.
+ */
+.ion-full-card__headline {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--type-h3);
+  line-height: var(--type-h3-line-height);
+  color: var(--text-default);
+}
+
+.ion-full-card__description {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  color: var(--text-secondary);
+}
+
+.ion-full-card__media {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: stretch;
+  flex: 0 0 auto;
+  min-width: 0;
+  padding-top: var(--spacing-48);
+
+  /*
+   * Stacked, the panel is inset from the card's left and right edges too, not
+   * just the top — and by the text's own gutter, so the panel and the headline
+   * share an edge instead of sitting on two arbitrary ones. In the split the
+   * panel deliberately bleeds off the outer edge, so this resets to zero there.
+   */
+  padding-inline: var(--ion-full-card-padding-x);
+  background-color: var(--surface-page);
+
+  /*
+   * The stacked analogue of the vertical rule between the two halves. The
+   * frame deliberately has no bottom border, so without this the white screen
+   * would run straight into the text with nothing separating them.
+   */
+  border-bottom: var(--border-width-default) solid var(--border-default);
+  overflow: hidden;
+}
+
+.ion-full-card__media-mat {
+  width: 100%;
+  padding-top: var(--spacing-8);
+  padding-inline: var(--spacing-8);
+  background-color: var(--surface-sunken);
+  border-start-start-radius: var(--radius-6xl);
+  border-start-end-radius: var(--radius-6xl);
+  overflow: hidden;
+}
+
+/*
+ * Three sides only. The card is a full-bleed band and the panel runs off its
+ * bottom edge, so a fourth rule would draw a line the design does not have.
+ */
+.ion-full-card__media-frame {
+  width: 100%;
+  border: var(--border-width-default) solid var(--border-default);
+  border-bottom: none;
+  border-start-start-radius: var(--radius-5xl);
+  border-start-end-radius: var(--radius-5xl);
+  overflow: hidden;
+}
+
+.ion-full-card__media-screen {
+  width: 100%;
+  min-height: var(--ion-full-card-media-min-height);
+  background-color: var(--surface-default);
+}
+
+/* Tablet is still stacked; only the text gutter opens up. */
+@media (width >= 896px) {
+  .ion-full-card {
+    --ion-full-card-padding-x: var(--spacing-32);
+  }
+}
+
+/*
+ * Side by side from 1080 up. Below it the card stacks, media first, the panel
+ * takes the text's own gutters and both its top corners round rather than the
+ * single outer one.
+ */
+@media (width >= 1080px) {
+  .ion-full-card {
+    --ion-full-card-padding-x: var(--spacing-48);
+    --ion-full-card-padding-y: var(--spacing-0);
+
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  .ion-full-card__content {
+    flex: 1 1 0;
+  }
+
+  .ion-full-card--media-left {
+    /*
+     * Reversed here, not in the DOM: the markup stays headline → actions →
+     * media in both alignments so reading and focus order follow the content
+     * rather than the mirror.
+     */
+    flex-direction: row-reverse;
+  }
+
+  /*
+   * `1 1 0` for the even split, floored so the panel is never the thing that
+   * gives. Below roughly 1190 the halves are narrower than the panel, and
+   * without the floor the panel shrank to fill its column — losing the gutter
+   * against the centre rule and reading as a full-bleed block right up to the
+   * moment the card stacked. The text column absorbs the difference instead:
+   * a paragraph reflows, and a panel with no gutter is a different design.
+   */
+  .ion-full-card__media {
+    align-items: flex-end;
+    flex: 1 1 0;
+    min-width: calc(
+      var(--ion-full-card-media-width) + var(--ion-full-card-media-gutter)
+    );
+    padding-inline: var(--spacing-0);
+    border-bottom: none;
+    border-inline-start: var(--border-width-default) solid var(--border-default);
+  }
+
+  .ion-full-card--media-left .ion-full-card__media {
+    align-items: flex-start;
+    border-inline-start: none;
+    border-inline-end: var(--border-width-default) solid var(--border-default);
+  }
+
+  .ion-full-card__media-mat {
+    width: var(--ion-full-card-media-width);
+    max-width: 100%;
+    padding-inline: var(--spacing-8) var(--spacing-0);
+    border-start-end-radius: var(--radius-none);
+  }
+
+  .ion-full-card--media-left .ion-full-card__media-mat {
+    padding-inline: var(--spacing-0) var(--spacing-8);
+    border-start-start-radius: var(--radius-none);
+    border-start-end-radius: var(--radius-6xl);
+  }
+
+  .ion-full-card__media-frame {
+    border-start-end-radius: var(--radius-none);
+  }
+
+  .ion-full-card--media-left .ion-full-card__media-frame {
+    border-start-start-radius: var(--radius-none);
+    border-start-end-radius: var(--radius-5xl);
+  }
+}

package/dist/styles/index.css

@@ -36,6 +36,7 @@
 @import url('./divider.css');
 @import url('./nav-item.css');
 @import url('./scroll-progress.css');
+@import url('./full-card.css');
 
 /*
  * Every IonBase element is border-box.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",