@skdx/react 0.26.0 → 0.28.0

package/dist/calendar/types.d.ts

@@ -1,3 +1,4 @@
+import type { DateInput } from '../utils/dateValue.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /** One cell in a {@link Calendar} grid week, as produced by `getVisibleWeeks`. */
 export interface CalendarDay {
@@ -6,14 +7,8 @@ export interface CalendarDay {
     outsideMonth: boolean;
 }
 /**
- * How many dates a {@link Calendar} selects at once, and therefore what shape
- * its `value` takes:
- *
- * | `selectionMode` | `value` type          | empty selection |
- * | --------------- | --------------------- | --------------- |
- * | `'single'`      | `Date \| null`        | `null`          |
- * | `'multiple'`    | `Date[]`              | `[]`            |
- * | `'range'`       | `DateRange \| null`   | `null`          |
+ * Selection count: 'single' (Date | null), 'multiple' (Date[]), or 'range'
+ * ({ start: Date; end: Date | null } | null). Determines the shape of `value`.
  */
 export type CalendarSelectionMode = 'single' | 'multiple' | 'range';
 /**
@@ -27,15 +22,33 @@ export interface DateRange {
     end: Date | null;
 }
 /**
- * A {@link Calendar}'s selection, whose concrete shape follows
- * {@link CalendarSelectionMode}. One union rather than a discriminated
- * props type, because Angular `@Input`s, Vue props and Web Component
- * properties cannot discriminate on a sibling prop — semantic parity across
- * the five frameworks beats a type trick only two of them could express.
+ * Calendar's selection shape following {@link CalendarSelectionMode}. Union
+ * type (not discriminated props) for semantic parity across frameworks.
  */
 export type CalendarValue = Date | Date[] | DateRange | null;
+/**
+ * Lenient input form of {@link CalendarValue}. Each Date position accepts ISO
+ * strings; the whole selection accepts wire strings ('2026-08-10' single,
+ * '2026-08-10,2026-08-14' set, '2026-08-10/2026-08-14' range, trailing / for
+ * anchored range). Strings read as local-time calendar dates, never UTC.
+ * Component emits the strict `Date` shape.
+ */
+export type CalendarValueInput = DateInput | ReadonlyArray<DateInput> | {
+    start: DateInput;
+    end?: DateInput | null;
+} | null;
 /** Where a date sits inside a selected range, for the `data-range-*` styling hooks. */
 export type RangePosition = 'start' | 'middle' | 'end';
+/**
+ * Navigation button step size: 'visible' pages by the whole displayed span so
+ * pages never overlap; 'single' always moves one month.
+ */
+export type CalendarPageBehavior = 'visible' | 'single';
+/**
+ * Which grid a {@link Calendar} is showing. Ordered coarsest-last —
+ * `CalendarHeading` steps *up* this list, activating a cell steps *down* it.
+ */
+export type CalendarView = 'day' | 'month' | 'year';
 /** @internal Shared state distributed from {@link Calendar} to its parts via context. Not part of the public API. */
 export interface CalendarContextValue {
     value: CalendarValue;
@@ -44,20 +57,48 @@ export interface CalendarContextValue {
     /** Every displayed month, `numberOfMonths` long, starting at `month`. */
     months: Date[];
     focusedDate: Date;
+    /** The date the calendar treats as today, pinned once per mount. */
+    today: Date;
     weekStartsOn: number;
+    /** Whether week rows show their ISO-8601 week number. */
+    weekNumbers: boolean;
     locale?: string;
-    /** Weekday names for `locale`, rotated to start at `weekStartsOn`, as `[short, long]` pairs. */
+    /** Weekday names for `locale`, rotated to `weekStartsOn`, as `[short, long]` pairs. */
     weekDayNames: Array<{
         short: string;
         long: string;
     }>;
     minDate?: Date;
     maxDate?: Date;
-    disabled?: (date: Date) => boolean;
-    isDateUnavailable?: (isoDate: string) => boolean;
+    readOnly: boolean;
+    disabled: boolean;
+    /** Whether a day from an adjacent month is pickable rather than natively disabled. */
+    outsideDaySelectable: boolean;
+    /**
+     * Predicate marking arbitrary dates as disabled, in addition to `minDate`/`maxDate`.
+     * A disabled cell is neither focusable nor clickable.
+     * @default undefined — no additional dates disabled.
+     */
+    isDateDisabled?: (date: Date) => boolean;
+    /**
+     * Predicate marking dates as *unavailable* — a booked night, a closed day. Stays
+     * keyboard-reachable and announced via `aria-disabled`, unlike `isDateDisabled`,
+     * which skips the cell entirely.
+     * @default undefined — every date is available.
+     */
+    isDateUnavailable?: (date: Date) => boolean;
     onValueChange: (date: Date) => void;
     onMonthChange: (month: Date) => void;
+    /** Moves one page back (`-1`) or forward (`1`) and announces it. */
+    pageMonths: (direction: -1 | 1) => void;
     setFocusedDate: (date: Date) => void;
+    view: CalendarView;
+    minView: CalendarView;
+    maxView: CalendarView;
+    /** Sets the view, clamped into `minView`/`maxView`. */
+    setView: (view: CalendarView) => void;
+    /** Moves the cursor onto `date`, pages to it, and steps the view down one level. */
+    navigateToUnit: (date: Date) => void;
 }
 /** @internal The month one {@link CalendarGrid} renders, so a multi-month calendar's cells know which month they belong to. */
 export interface CalendarGridContextValue {
@@ -66,26 +107,23 @@ export interface CalendarGridContextValue {
 /** Props for the {@link Calendar} root. */
 export interface CalendarProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
     /**
-     * How many dates can be selected at once. Determines the shape of `value` —
-     * see {@link CalendarSelectionMode}.
+     * How many dates can be selected at once; determines the shape of `value`.
+     * See {@link CalendarSelectionMode}.
      * @default 'single'
      */
     selectionMode?: CalendarSelectionMode;
     /**
-     * Current selection, for controlled usage. Pair with `onValueChange`. Its
-     * shape follows `selectionMode`.
+     * Current selection for controlled usage. Pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own selection internally.
      */
-    value?: CalendarValue;
+    value?: CalendarValueInput;
     /**
-     * Initial selection, for uncontrolled usage. Its shape follows `selectionMode`.
+     * Initial selection for uncontrolled usage, follows `selectionMode`.
      * @default null for `single`/`range`, `[]` for `multiple`.
      */
-    defaultValue?: CalendarValue;
+    defaultValue?: CalendarValueInput;
     /**
-     * Fires with the whole new selection whenever a `CalendarCell` is chosen —
-     * a `Date` in `single` mode, the full `Date[]` in `multiple`, the
-     * `DateRange` (with `end: null` while anchored) in `range`.
+     * Fires with the whole new selection whenever a `CalendarCell` is chosen.
      * @default undefined — no-op if omitted.
      */
     onValueChange?: (value: CalendarValue) => void;
@@ -93,26 +131,70 @@ export interface CalendarProps extends Omit<PrimitivePropsWithRef<'div'>, 'defau
      * Displayed month, for controlled usage. Pair with `onMonthChange`.
      * @default undefined — uncontrolled, tracks its own displayed month internally.
      */
-    month?: Date;
+    month?: DateInput;
     /**
      * Initially displayed month, for uncontrolled usage.
      * @default undefined — defaults to the selection's month, or the current month.
      */
-    defaultMonth?: Date;
+    defaultMonth?: DateInput;
     /**
-     * Fires with the newly displayed month whenever navigation changes it (prev/next, PageUp/PageDown, etc).
+     * Fires with the newly displayed month whenever navigation changes it.
      * @default undefined — no-op if omitted.
      */
     onMonthChange?: (month: Date) => void;
     /**
-     * How many consecutive months to display, starting at `month` — render one
-     * `CalendarGrid` per month with a matching `monthOffset`.
+     * The date holding the grid's roving tab stop, for controlled usage. Pair
+     * with `onFocusChange`. Distinct from `value` — focus moves on every arrow
+     * key and selects nothing.
+     * @default undefined — uncontrolled, tracks its own roving focus internally.
+     */
+    focusedDate?: DateInput;
+    /**
+     * Initially focused date, for uncontrolled usage.
+     * @default undefined — the selection's anchor date, else the displayed month.
+     */
+    defaultFocusedDate?: DateInput;
+    /**
+     * Fires with the newly focused date whenever the grid's roving tab stop moves.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusChange?: (date: Date) => void;
+    /**
+     * Which grid is showing, for controlled usage. Pair with `onViewChange`. A
+     * non-day grid navigates only: activating a cell steps the view down
+     * without touching `value`.
+     * @default undefined — uncontrolled, tracks its own view internally.
+     */
+    view?: CalendarView;
+    /**
+     * Which grid shows first, for uncontrolled usage.
+     * @default 'day'
+     */
+    defaultView?: CalendarView;
+    /**
+     * The most granular view the calendar steps down to; raising it makes the
+     * calendar navigation-only.
+     * @default 'day'
+     */
+    minView?: CalendarView;
+    /**
+     * The least granular view the calendar steps up to, and how far
+     * `CalendarHeading` goes.
+     * @default 'year'
+     */
+    maxView?: CalendarView;
+    /**
+     * Fires with the view now showing whenever it steps up or down.
+     * @default undefined — no-op if omitted.
+     */
+    onViewChange?: (view: CalendarView) => void;
+    /**
+     * How many consecutive months to display, starting at `month`.
      * @default 1
      */
     numberOfMonths?: number;
     /**
-     * BCP 47 tag used to derive month and weekday names (via `Intl`) and, when
-     * `weekStartsOn` is omitted, the first day of the week.
+     * BCP 47 tag to derive month and weekday names via Intl, and default `weekStartsOn`.
      * @default undefined — the runtime's own locale.
      */
     locale?: string;
@@ -120,45 +202,84 @@ export interface CalendarProps extends Omit<PrimitivePropsWithRef<'div'>, 'defau
      * Earliest selectable date; earlier dates render disabled.
      * @default undefined — no minimum.
      */
-    minDate?: Date;
+    minDate?: DateInput;
     /**
      * Latest selectable date; later dates render disabled.
      * @default undefined — no maximum.
      */
-    maxDate?: Date;
+    maxDate?: DateInput;
     /**
-     * Day of week the grid's first column represents (`0` = Sunday … `6` = Saturday).
+     * Day of week the grid's first column represents (0=Sunday…6=Saturday).
+     * Derived from `locale` when omitted.
      * @default undefined — derived from `locale`, falling back to `0` (Sunday).
      */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     /**
-     * Predicate marking arbitrary dates as disabled, in addition to `minDate`/`maxDate`.
+     * How far the previous/next buttons move — `'visible'` pages by the whole
+     * displayed span (`numberOfMonths` months) so consecutive pages never
+     * overlap, `'single'` always moves one month. Only observable with
+     * `numberOfMonths` above 1.
+     * @default 'visible'
+     */
+    pageBehavior?: CalendarPageBehavior;
+    /**
+     * Label each week with its ISO-8601 number. ISO numbering runs from Monday
+     * independently of `weekStartsOn`.
+     * @default false
+     */
+    weekNumbers?: boolean;
+    /**
+     * Date treated as today: carries `data-today` and `aria-current="date"`.
+     * Read once per mount. Pass explicitly in SSR to prevent hydration mismatch
+     * when server and client are in different time zones.
+     * @default undefined — `new Date()`, read once when the calendar mounts.
+     */
+    today?: DateInput;
+    /**
+     * Non-editable: cells stay focusable, `onValueChange` never fires, grid
+     * carries `aria-readonly="true"`. Distinct from `disabled`.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Disables the whole calendar: cells carry the native `disabled` attribute,
+     * grid leaves the tab order, carries `aria-disabled="true"`. Use
+     * `isDateDisabled` for per-date disabling.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Allow selecting adjacent-month days. Enabled cells stay focusable and page
+     * the calendar on selection.
+     * @default false
+     */
+    outsideDaySelectable?: boolean;
+    /**
+     * Predicate marking arbitrary dates as disabled, in addition to
+     * `minDate`/`maxDate`. A disabled cell is not focusable or clickable.
      * @default undefined — no additional dates disabled.
      */
-    disabled?: (date: Date) => boolean;
+    isDateDisabled?: (date: Date) => boolean;
     /**
-     * Predicate marking dates as *unavailable* — a booked hotel night, a closed
-     * clinic day. Receives the cell's local `YYYY-MM-DD` string.
-     *
-     * Distinct from `disabled`: an unavailable cell stays keyboard-reachable and
-     * is announced as `aria-disabled`, so a screen-reader user can arrow onto it
-     * and hear *why* it can't be picked, where a `disabled` cell is skipped
-     * entirely.
+     * Predicate marking dates as *unavailable* — a booked night, a closed day.
+     * Stays keyboard-reachable and announced via `aria-disabled`, unlike
+     * `isDateDisabled` which skips the cell entirely.
      * @default undefined — every date is available.
      */
-    isDateUnavailable?: (isoDate: string) => boolean;
+    isDateUnavailable?: (date: Date) => boolean;
     /**
-     * Words the polite live-region message announced after a selection change in
-     * `multiple` and `range` mode — the state that changed lives across several
-     * cells, so no cell's own `aria-selected` flip carries it. Return `''` to
-     * announce nothing.
-     *
-     * The month and weekday names around it are already localized by `locale`;
-     * this sentence is the one string in the calendar that a `locale` cannot
-     * translate on its own.
+     * Words the polite live-region message announced after a selection change
+     * in `multiple`/`range` mode, where no single cell's `aria-selected` flip
+     * carries it. Return `''` to announce nothing.
      * @default undefined — the built-in English wording ("Range selected, 1 May to 8 May.").
      */
     getSelectionAnnouncement?: (value: CalendarValue, locale: string | undefined) => string;
+    /**
+     * Words the polite live-region message announced when paging the grid, so a
+     * screen reader learns the whole view changed. Return `''` for nothing.
+     * @default undefined — `formatMonthLabel(month, locale)`, e.g. "février 2026".
+     */
+    getMonthAnnouncement?: (month: Date, locale: string | undefined) => string;
 }
 /** Props for {@link CalendarHeader}, the purely presentational wrapper around the month navigation row. */
 export interface CalendarHeaderProps extends PrimitivePropsWithRef<'div'> {
@@ -166,8 +287,7 @@ export interface CalendarHeaderProps extends PrimitivePropsWithRef<'div'> {
 /** Props for {@link CalendarHeading}, the label for the displayed month. */
 export interface CalendarHeadingProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Which of the displayed months to label, `0` being the first — only
-     * meaningful when the `Calendar` sets `numberOfMonths` above 1.
+     * Which of the displayed months to label, `0` being the first.
      * @default 0
      */
     monthOffset?: number;
@@ -187,6 +307,20 @@ export interface CalendarGridProps extends PrimitivePropsWithRef<'div'> {
      */
     monthOffset?: number;
 }
+/** Props for {@link CalendarWeekNumber}, a `rowheader` cell carrying one week's ISO-8601 number. */
+export interface CalendarWeekNumberProps extends PrimitivePropsWithRef<'div'> {
+    /** Any day of the week to number — `CalendarGridBody` passes the row's first cell. */
+    date: DateInput;
+}
+/** Props for {@link CalendarWeekNumberHeader}, the `columnheader` above the week-number column. */
+export interface CalendarWeekNumberHeaderProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link CalendarMonthGrid}, the `grid`-role twelve-month view. */
+export interface CalendarMonthGridProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link CalendarYearGrid}, the `grid`-role twenty-year view. */
+export interface CalendarYearGridProps extends PrimitivePropsWithRef<'div'> {
+}
 /** Props for {@link CalendarGridHead}, the `rowgroup`-role wrapper for the weekday header. */
 export interface CalendarGridHeadProps extends PrimitivePropsWithRef<'div'> {
 }
@@ -202,5 +336,5 @@ export interface CalendarRowProps extends PrimitivePropsWithRef<'div'> {
 /** Props for {@link CalendarCell}, a single selectable `gridcell` date button. */
 export interface CalendarCellProps extends PrimitivePropsWithRef<'button'> {
     /** The date value this calendar grid cell represents and selects when activated. */
-    date: Date;
+    date: DateInput;
 }

package/dist/card/Card.cjs

@@ -1 +1 @@
-"use strict";var I=Object.create;var m=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var S=(r,o)=>{for(var e in o)m(r,e,{get:o[e],enumerable:!0})},c=(r,o,e,C)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of K(o))!Q.call(r,a)&&a!==e&&m(r,a,{get:()=>o[a],enumerable:!(C=J(o,a))||C.enumerable});return r};var t=(r,o,e)=>(e=r!=null?I(O(r)):{},c(o||!r||!r.__esModule?m(e,"default",{value:r,enumerable:!0}):e,r)),U=r=>c(m({},"__esModule",{value:!0}),r);var V={};S(V,{Card:()=>y,CardContent:()=>s,CardDescription:()=>p,CardFooter:()=>f,CardHeader:()=>d,CardTitle:()=>i});module.exports=U(V);var P=t(require("react"),1),n=require("../utils/part.cjs"),l=require("../utils/primitive.cjs"),R=require("react/jsx-runtime"),y=P.forwardRef((r,o)=>(0,R.jsx)(l.Primitive.div,{...r,...(0,n.skdxPart)("card","root",r.className),ref:o}));y.displayName="Card";var v=t(require("react"),1),x=require("../utils/part.cjs"),H=require("../utils/primitive.cjs"),N=require("react/jsx-runtime"),d=v.forwardRef((r,o)=>(0,N.jsx)(H.Primitive.div,{...r,...(0,x.skdxPart)("card","header",r.className),ref:o}));d.displayName="CardHeader";var T=t(require("react"),1),D=require("../utils/part.cjs"),k=require("../utils/primitive.cjs"),w=require("react/jsx-runtime"),i=T.forwardRef((r,o)=>(0,w.jsx)(k.Primitive.h3,{...r,...(0,D.skdxPart)("card","title",r.className),ref:o}));i.displayName="CardTitle";var E=t(require("react"),1),F=require("../utils/part.cjs"),L=require("../utils/primitive.cjs"),M=require("react/jsx-runtime"),p=E.forwardRef((r,o)=>(0,M.jsx)(L.Primitive.p,{...r,...(0,F.skdxPart)("card","description",r.className),ref:o}));p.displayName="CardDescription";var h=t(require("react"),1),g=require("../utils/part.cjs"),b=require("../utils/primitive.cjs"),q=require("react/jsx-runtime"),s=h.forwardRef((r,o)=>(0,q.jsx)(b.Primitive.div,{...r,...(0,g.skdxPart)("card","content",r.className),ref:o}));s.displayName="CardContent";var z=t(require("react"),1),A=require("../utils/part.cjs"),B=require("../utils/primitive.cjs"),G=require("react/jsx-runtime"),f=z.forwardRef((r,o)=>(0,G.jsx)(B.Primitive.div,{...r,...(0,A.skdxPart)("card","footer",r.className),ref:o}));f.displayName="CardFooter";0&&(module.exports={Card,CardContent,CardDescription,CardFooter,CardHeader,CardTitle});
+"use strict";var Y=Object.create;var f=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var rr=(r,o)=>{for(var e in o)f(r,e,{get:o[e],enumerable:!0})},x=(r,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let d of _(o))!j.call(r,d)&&d!==e&&f(r,d,{get:()=>o[d],enumerable:!(t=Z(o,d))||t.enumerable});return r};var m=(r,o,e)=>(e=r!=null?Y(u(r)):{},x(o||!r||!r.__esModule?f(e,"default",{value:r,enumerable:!0}):e,r)),or=r=>x(f({},"__esModule",{value:!0}),r);var er={};rr(er,{Card:()=>y,CardContent:()=>v,CardDescription:()=>s,CardFooter:()=>i,CardHeader:()=>p,CardMedia:()=>C,CardRoot:()=>P,CardTitle:()=>c});module.exports=or(er);var R=m(require("react"),1),K=require("../utils/part.cjs"),O=require("../utils/primitive.cjs");var N=m(require("react"),1),H=require("../utils/part.cjs"),M=require("../utils/primitive.cjs"),T=require("react/jsx-runtime"),s=N.forwardRef((r,o)=>(0,T.jsx)(M.Primitive.p,{...r,...(0,H.skdxPart)("card","description",r.className),ref:o}));s.displayName="CardDescription";var D=m(require("react"),1),L=require("../utils/part.cjs"),E=require("../utils/primitive.cjs"),w=require("react/jsx-runtime"),i=D.forwardRef((r,o)=>(0,w.jsx)(E.Primitive.div,{...r,...(0,L.skdxPart)("card","footer",r.className),ref:o}));i.displayName="CardFooter";var F=m(require("react"),1),k=require("../utils/part.cjs"),g=require("../utils/primitive.cjs"),h=require("react/jsx-runtime"),p=F.forwardRef((r,o)=>(0,h.jsx)(g.Primitive.div,{...r,...(0,k.skdxPart)("card","header",r.className),ref:o}));p.displayName="CardHeader";var A=m(require("react"),1),$=require("../utils/part.cjs"),b=require("../utils/primitive.cjs"),q=require("react/jsx-runtime"),C=A.forwardRef((r,o)=>(0,q.jsx)(b.Primitive.div,{...r,...(0,$.skdxPart)("card","media",r.className),ref:o}));C.displayName="CardMedia";var z=m(require("react"),1),B=require("../utils/part.cjs"),G=require("../utils/primitive.cjs"),I=require("react/jsx-runtime"),c=z.forwardRef(({level:r=3,...o},e)=>{let t=G.Primitive[`h${r}`];return(0,I.jsx)(t,{...o,...(0,B.skdxPart)("card","title",o.className),ref:e})});c.displayName="CardTitle";var a=require("react/jsx-runtime"),J=({media:r,title:o,description:e,footer:t,headingLevel:d,children:l})=>(0,a.jsxs)(a.Fragment,{children:[r?(0,a.jsx)(C,{children:r}):null,o||e?(0,a.jsxs)(p,{children:[o?(0,a.jsx)(c,{level:d,children:o}):null,e?(0,a.jsx)(s,{children:e}):null]}):null,l,t?(0,a.jsx)(i,{children:t}):null]});var n=require("react/jsx-runtime"),P=R.forwardRef(({as:r="div",...o},e)=>{let t=O.Primitive[r];return(0,n.jsx)(t,{...o,...(0,K.skdxPart)("card","root",o.className),ref:e})});P.displayName="CardRoot";var y=R.forwardRef(({title:r,description:o,media:e,footer:t,headingLevel:d=3,children:l,...W},X)=>(0,n.jsx)(P,{...W,ref:X,children:(0,n.jsx)(J,{media:e,title:r,description:o,footer:t,headingLevel:d,children:l})}));y.displayName="Card";var Q=m(require("react"),1),S=require("../utils/part.cjs"),U=require("../utils/primitive.cjs"),V=require("react/jsx-runtime"),v=Q.forwardRef((r,o)=>(0,V.jsx)(U.Primitive.div,{...r,...(0,S.skdxPart)("card","content",r.className),ref:o}));v.displayName="CardContent";0&&(module.exports={Card,CardContent,CardDescription,CardFooter,CardHeader,CardMedia,CardRoot,CardTitle});

package/dist/card/Card.d.cts

@@ -1,24 +1,30 @@
 import * as React from 'react';
-import type { CardProps } from './types.cjs';
+import type { CardProps, CardRootProps } from './types.cjs';
 /**
- * Root container for a card layout. Renders a plain `<div>` with no shared
- * state or context — purely structural, like every part in this folder.
- * Color, elevation, and spacing are brand-layer concerns applied via
- * className.
+ * Card's root: renders the card surface (plain `<div>` or custom `as` tag) with no state/context.
+ * Use for full manual composition of parts via `@skdx/react/primitives/card`.
  *
  * @example
  * ```tsx
- * <Card>
+ * import { CardHeader, CardRoot, CardTitle } from '@skdx/react/primitives/card';
+ *
+ * <CardRoot>
  *   <CardHeader>
  *     <CardTitle>Project Alpha</CardTitle>
- *     <CardDescription>Last updated 2 days ago</CardDescription>
  *   </CardHeader>
- *   <CardContent>
- *     <p>Details about the project go here.</p>
- *   </CardContent>
- *   <CardFooter>
- *     <Button>View</Button>
- *   </CardFooter>
+ * </CardRoot>
+ * ```
+ */
+export declare const CardRoot: React.ForwardRefExoticComponent<Omit<CardRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Bounded region of related content: media, header (title + description), body, footer.
+ * Use props for ordinary cards, or place children with `CardHeader`/`CardContent`/`CardFooter`
+ * for full control of regions.
+ *
+ * @example
+ * ```tsx
+ * <Card title="Project Alpha" description="Updated 2 days ago" footer={<Button>View</Button>}>
+ *   <CardContent>Details about the project go here.</CardContent>
  * </Card>
  * ```
  */

package/dist/card/Card.d.ts

@@ -1,24 +1,30 @@
 import * as React from 'react';
-import type { CardProps } from './types.js';
+import type { CardProps, CardRootProps } from './types.js';
 /**
- * Root container for a card layout. Renders a plain `<div>` with no shared
- * state or context — purely structural, like every part in this folder.
- * Color, elevation, and spacing are brand-layer concerns applied via
- * className.
+ * Card's root: renders the card surface (plain `<div>` or custom `as` tag) with no state/context.
+ * Use for full manual composition of parts via `@skdx/react/primitives/card`.
  *
  * @example
  * ```tsx
- * <Card>
+ * import { CardHeader, CardRoot, CardTitle } from '@skdx/react/primitives/card';
+ *
+ * <CardRoot>
  *   <CardHeader>
  *     <CardTitle>Project Alpha</CardTitle>
- *     <CardDescription>Last updated 2 days ago</CardDescription>
  *   </CardHeader>
- *   <CardContent>
- *     <p>Details about the project go here.</p>
- *   </CardContent>
- *   <CardFooter>
- *     <Button>View</Button>
- *   </CardFooter>
+ * </CardRoot>
+ * ```
+ */
+export declare const CardRoot: React.ForwardRefExoticComponent<Omit<CardRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Bounded region of related content: media, header (title + description), body, footer.
+ * Use props for ordinary cards, or place children with `CardHeader`/`CardContent`/`CardFooter`
+ * for full control of regions.
+ *
+ * @example
+ * ```tsx
+ * <Card title="Project Alpha" description="Updated 2 days ago" footer={<Button>View</Button>}>
+ *   <CardContent>Details about the project go here.</CardContent>
  * </Card>
  * ```
  */

package/dist/card/Card.js

@@ -1 +1 @@
-import*as e from"react";import{skdxPart as P}from"../utils/part.js";import{Primitive as n}from"../utils/primitive.js";import{jsx as y}from"react/jsx-runtime";var l=e.forwardRef((r,o)=>y(n.div,{...r,...P("card","root",r.className),ref:o}));l.displayName="Card";import*as t from"react";import{skdxPart as R}from"../utils/part.js";import{Primitive as v}from"../utils/primitive.js";import{jsx as x}from"react/jsx-runtime";var a=t.forwardRef((r,o)=>x(v.div,{...r,...R("card","header",r.className),ref:o}));a.displayName="CardHeader";import*as m from"react";import{skdxPart as H}from"../utils/part.js";import{Primitive as N}from"../utils/primitive.js";import{jsx as T}from"react/jsx-runtime";var d=m.forwardRef((r,o)=>T(N.h3,{...r,...H("card","title",r.className),ref:o}));d.displayName="CardTitle";import*as i from"react";import{skdxPart as D}from"../utils/part.js";import{Primitive as k}from"../utils/primitive.js";import{jsx as w}from"react/jsx-runtime";var p=i.forwardRef((r,o)=>w(k.p,{...r,...D("card","description",r.className),ref:o}));p.displayName="CardDescription";import*as s from"react";import{skdxPart as E}from"../utils/part.js";import{Primitive as F}from"../utils/primitive.js";import{jsx as L}from"react/jsx-runtime";var f=s.forwardRef((r,o)=>L(F.div,{...r,...E("card","content",r.className),ref:o}));f.displayName="CardContent";import*as C from"react";import{skdxPart as M}from"../utils/part.js";import{Primitive as h}from"../utils/primitive.js";import{jsx as g}from"react/jsx-runtime";var c=C.forwardRef((r,o)=>g(h.div,{...r,...M("card","footer",r.className),ref:o}));c.displayName="CardFooter";export{l as Card,f as CardContent,p as CardDescription,c as CardFooter,a as CardHeader,d as CardTitle};
+import*as n from"react";import{skdxPart as Q}from"../utils/part.js";import{Primitive as S}from"../utils/primitive.js";import*as l from"react";import{skdxPart as w}from"../utils/part.js";import{Primitive as F}from"../utils/primitive.js";import{jsx as k}from"react/jsx-runtime";var f=l.forwardRef((r,o)=>k(F.p,{...r,...w("card","description",r.className),ref:o}));f.displayName="CardDescription";import*as R from"react";import{skdxPart as g}from"../utils/part.js";import{Primitive as h}from"../utils/primitive.js";import{jsx as A}from"react/jsx-runtime";var a=R.forwardRef((r,o)=>A(h.div,{...r,...g("card","footer",r.className),ref:o}));a.displayName="CardFooter";import*as P from"react";import{skdxPart as $}from"../utils/part.js";import{Primitive as b}from"../utils/primitive.js";import{jsx as q}from"react/jsx-runtime";var d=P.forwardRef((r,o)=>q(b.div,{...r,...$("card","header",r.className),ref:o}));d.displayName="CardHeader";import*as y from"react";import{skdxPart as z}from"../utils/part.js";import{Primitive as B}from"../utils/primitive.js";import{jsx as G}from"react/jsx-runtime";var s=y.forwardRef((r,o)=>G(B.div,{...r,...z("card","media",r.className),ref:o}));s.displayName="CardMedia";import*as v from"react";import{skdxPart as I}from"../utils/part.js";import{Primitive as J}from"../utils/primitive.js";import{jsx as K}from"react/jsx-runtime";var C=v.forwardRef(({level:r=3,...o},e)=>{let t=J[`h${r}`];return K(t,{...o,...I("card","title",o.className),ref:e})});C.displayName="CardTitle";import{Fragment as O,jsx as m,jsxs as x}from"react/jsx-runtime";var N=({media:r,title:o,description:e,footer:t,headingLevel:i,children:p})=>x(O,{children:[r?m(s,{children:r}):null,o||e?x(d,{children:[o?m(C,{level:i,children:o}):null,e?m(f,{children:e}):null]}):null,p,t?m(a,{children:t}):null]});import{jsx as c}from"react/jsx-runtime";var H=n.forwardRef(({as:r="div",...o},e)=>{let t=S[r];return c(t,{...o,...Q("card","root",o.className),ref:e})});H.displayName="CardRoot";var M=n.forwardRef(({title:r,description:o,media:e,footer:t,headingLevel:i=3,children:p,...L},E)=>c(H,{...L,ref:E,children:c(N,{media:e,title:r,description:o,footer:t,headingLevel:i,children:p})}));M.displayName="Card";import*as T from"react";import{skdxPart as U}from"../utils/part.js";import{Primitive as V}from"../utils/primitive.js";import{jsx as W}from"react/jsx-runtime";var D=T.forwardRef((r,o)=>W(V.div,{...r,...U("card","content",r.className),ref:o}));D.displayName="CardContent";export{M as Card,D as CardContent,f as CardDescription,a as CardFooter,d as CardHeader,s as CardMedia,H as CardRoot,C as CardTitle};

package/dist/card/CardAnatomy.d.cts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+/**
+ * The anatomy a {@link Card} draws from `media`/`title`/`description`/`footer`:
+ * media region, header with title and description, body, and footer.
+ *
+ * `children` render unwrapped between header and footer so consumers choose
+ * which content is the padded `CardContent` region.
+ *
+ * @internal
+ */
+export declare const CardAnatomy: ({ media, title, description, footer, headingLevel, children, }: {
+    media?: React.ReactNode;
+    title?: string;
+    description?: React.ReactNode;
+    footer?: React.ReactNode;
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/dist/card/CardAnatomy.d.ts

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+/**
+ * The anatomy a {@link Card} draws from `media`/`title`/`description`/`footer`:
+ * media region, header with title and description, body, and footer.
+ *
+ * `children` render unwrapped between header and footer so consumers choose
+ * which content is the padded `CardContent` region.
+ *
+ * @internal
+ */
+export declare const CardAnatomy: ({ media, title, description, footer, headingLevel, children, }: {
+    media?: React.ReactNode;
+    title?: string;
+    description?: React.ReactNode;
+    footer?: React.ReactNode;
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/dist/card/CardContent.d.cts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { CardContentProps } from './types.cjs';
 /**
- * A {@link Card}'s main body. Renders a plain `<div>`, typically placed
- * between `CardHeader` and `CardFooter`.
+ * {@link Card}'s main body, typically placed between `CardHeader` and `CardFooter`.
  *
  * @example
  * ```tsx

package/dist/card/CardContent.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { CardContentProps } from './types.js';
 /**
- * A {@link Card}'s main body. Renders a plain `<div>`, typically placed
- * between `CardHeader` and `CardFooter`.
+ * {@link Card}'s main body, typically placed between `CardHeader` and `CardFooter`.
  *
  * @example
  * ```tsx

package/dist/card/CardFooter.d.cts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { CardFooterProps } from './types.cjs';
 /**
- * Container for actions at the bottom of a {@link Card}. Renders a plain
- * `<div>`, typically placed as the last child of `Card`.
+ * Container for actions at the bottom of a {@link Card}, typically placed as the last child.
  *
  * @example
  * ```tsx

package/dist/card/CardFooter.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { CardFooterProps } from './types.js';
 /**
- * Container for actions at the bottom of a {@link Card}. Renders a plain
- * `<div>`, typically placed as the last child of `Card`.
+ * Container for actions at the bottom of a {@link Card}, typically placed as the last child.
  *
  * @example
  * ```tsx

package/dist/card/CardHeader.d.cts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { CardHeaderProps } from './types.cjs';
 /**
- * Container for a {@link Card}'s title and description. Renders a plain
- * `<div>`, typically placed as the first child of `Card`.
+ * Container for a {@link Card}'s title and description, typically placed as the first child.
  *
  * @example
  * ```tsx

package/dist/card/CardHeader.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { CardHeaderProps } from './types.js';
 /**
- * Container for a {@link Card}'s title and description. Renders a plain
- * `<div>`, typically placed as the first child of `Card`.
+ * Container for a {@link Card}'s title and description, typically placed as the first child.
  *
  * @example
  * ```tsx

package/dist/card/CardMedia.d.cts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { CardMediaProps } from './types.cjs';
+/**
+ * An edge-to-edge image or video region for a {@link Card}. The skin uses
+ * this as a clip boundary for media at the card's **first** child position.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardMedia>
+ *     <img src="/cover.jpg" alt="" />
+ *   </CardMedia>
+ *   <CardHeader>
+ *     <CardTitle>Project Alpha</CardTitle>
+ *   </CardHeader>
+ * </Card>
+ * ```
+ */
+export declare const CardMedia: React.ForwardRefExoticComponent<Omit<CardMediaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/card/CardMedia.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { CardMediaProps } from './types.js';
+/**
+ * An edge-to-edge image or video region for a {@link Card}. The skin uses
+ * this as a clip boundary for media at the card's **first** child position.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardMedia>
+ *     <img src="/cover.jpg" alt="" />
+ *   </CardMedia>
+ *   <CardHeader>
+ *     <CardTitle>Project Alpha</CardTitle>
+ *   </CardHeader>
+ * </Card>
+ * ```
+ */
+export declare const CardMedia: React.ForwardRefExoticComponent<Omit<CardMediaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;