@inkra/react 0.0.0-stage → 0.1.0

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type ButtonLinkProps } from '../Button.js';
+export type BreadcrumbProps = ComponentPropsWithoutRef<'nav'>;
+export type BreadcrumbListProps = ComponentPropsWithoutRef<'ol'>;
+export type BreadcrumbItemProps = ComponentPropsWithoutRef<'li'>;
+export type BreadcrumbLinkProps = ButtonLinkProps;
+export type BreadcrumbPageProps = ComponentPropsWithoutRef<'span'>;
+export type BreadcrumbSeparatorProps = ComponentPropsWithoutRef<'li'>;
+export declare const Breadcrumb: {
+    Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+    List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+    Link: import("react").ForwardRefExoticComponent<ButtonLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+    Page: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+};

package/dist/breadcrumb/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { ButtonLink } from '../Button.js';
+import { PencilText } from '../PencilText.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+const copy = (children) => typeof children === 'string' ? _jsx(PencilText, { children: children }) : children;
+const Root = forwardRef(function BreadcrumbRoot({ className, 'aria-label': label = 'Breadcrumb', ...props }, ref) {
+    return _jsx("nav", { ...props, ref: ref, "aria-label": label, className: classes('inkra-breadcrumb', className) });
+});
+const List = forwardRef(function BreadcrumbList({ className, ...props }, ref) {
+    return _jsx("ol", { ...props, ref: ref, className: classes('inkra-breadcrumb__list', className) });
+});
+const Item = forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
+    return _jsx("li", { ...props, ref: ref, className: classes('inkra-breadcrumb__item', className) });
+});
+const Link = forwardRef(function BreadcrumbLink({ className, variant = 'ghost', ...props }, ref) {
+    return _jsx(ButtonLink, { ...props, ref: ref, variant: variant, className: classes('inkra-breadcrumb__link', className) });
+});
+const Page = forwardRef(function BreadcrumbPage({ className, children, ...props }, ref) {
+    return _jsx("span", { ...props, ref: ref, "aria-current": "page", className: classes('inkra-breadcrumb__page', className), children: copy(children) });
+});
+const Separator = forwardRef(function BreadcrumbSeparator({ className, children = '/', ...props }, ref) {
+    return _jsx("li", { ...props, ref: ref, role: "presentation", "aria-hidden": "true", className: classes('inkra-breadcrumb__separator', className), children: copy(children) });
+});
+export const Breadcrumb = { Root, List, Item, Link, Page, Separator };

package/dist/calendar/index.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import { type DayPickerProps } from 'react-day-picker';
+export interface CalendarEvent {
+    date: Date;
+    label: string;
+    id?: string;
+    color?: string;
+    description?: string;
+}
+export type CalendarProps = DayPickerProps & {
+    events?: readonly CalendarEvent[];
+    eventIndicator?: 'count' | 'dot' | 'none';
+    appearance?: 'itinerary' | 'picker';
+    onEventSelect?: (event: CalendarEvent) => void;
+    renderDayAccessory?: (date: Date) => ReactNode;
+    displayRange?: {
+        from: Date;
+        to: Date;
+    };
+};
+export declare function Calendar({ events, eventIndicator, appearance, onEventSelect, renderDayAccessory, displayRange, className, components, showOutsideDays, ...props }: CalendarProps): import("react").JSX.Element;

package/dist/calendar/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { CaptionLabel, Day, DayButton, DayPicker, Weekday } from 'react-day-picker';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const EventContext = createContext({ events: [], indicator: 'count', appearance: 'itinerary' });
+const matches = (event, date) => event.date.getFullYear() === date.getFullYear()
+    && event.date.getMonth() === date.getMonth() && event.date.getDate() === date.getDate();
+function CalendarCaption({ children, ...props }) {
+    return _jsx(CaptionLabel, { ...props, children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children });
+}
+function CalendarWeekday({ children, ...props }) {
+    return _jsx(Weekday, { ...props, children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children });
+}
+function CalendarMonthButton({ disabled, ...props }) {
+    return _jsx(Button, { ...props, size: "icon", variant: "ghost", disabled: disabled || props['aria-disabled'] === true || props['aria-disabled'] === 'true' });
+}
+// Lucide chevrons retain their geometry and use the shared pencil renderer.
+const chevrons = { left: 'm15 18-6-6 6-6', right: 'm9 18 6-6-6-6', up: 'm18 15-6-6-6 6', down: 'm6 9 6 6 6-6' };
+function CalendarChevron({ className, orientation = 'left', size = 28 }) {
+    return _jsx(PencilIcon, { className: className, paths: [{ d: chevrons[orientation] }], sourceSize: 24, size: size });
+}
+// The trip calendar uses a full-cell date target with sibling event buttons.
+function CalendarCell({ children, day, modifiers, ...props }) {
+    const { events, appearance, onEventSelect, renderDayAccessory } = useContext(EventContext);
+    if (appearance === 'picker')
+        return _jsx(Day, { ...props, day: day, modifiers: modifiers, children: children });
+    const entries = events.filter(event => matches(event, day.date));
+    return _jsx(Day, { ...props, day: day, modifiers: modifiers, children: _jsxs("div", { className: "inkra-calendar__day-card", children: [_jsx(PencilSurface, { variant: modifiers.selected ? 'action' : 'quiet', radius: 8, className: "inkra-calendar__day-paper", "aria-hidden": "true", seed: `day-${day.date.toISOString()}` }), children, renderDayAccessory && _jsx("div", { className: "inkra-calendar__accessory", children: renderDayAccessory(day.date) }), _jsx("div", { className: "inkra-calendar__events", children: entries.map((event, index) => _jsx(PencilSurface, { as: "button", variant: "quiet", radius: 3, className: "inkra-calendar__event-card", disabled: modifiers.disabled || !onEventSelect, style: event.color ? { '--inkra-accent-soft': event.color } : undefined, "aria-label": `${event.label}${event.description ? `, ${event.description}` : ''}`, title: event.description ?? event.label, onClick: click => { click.stopPropagation(); onEventSelect?.(event); }, children: _jsx(PencilText, { ellipsis: true, children: event.label }) }, event.id ?? index)) })] }) });
+}
+function CalendarDay({ children, modifiers, day, ...props }) {
+    const { events: allEvents, indicator, appearance } = useContext(EventContext);
+    const events = allEvents.filter(event => matches(event, day.date));
+    return _jsxs(DayButton, { ...props, day: day, modifiers: modifiers, "aria-label": [props['aria-label'], ...events.map(event => event.label)].filter(Boolean).join(', '), children: [modifiers.selected && appearance === 'picker' && _jsx(PencilSurface, { variant: "selection", className: "inkra-calendar__selection", "aria-hidden": "true" }), _jsx(PencilText, { children: String(children) }), appearance === 'picker' && events.length > 0 && indicator !== 'none' && _jsx("span", { className: "inkra-calendar__event", "data-indicator": indicator, "aria-hidden": "true", children: indicator === 'count' ? events.length : '\u2022' })] });
+}
+export function Calendar({ events = [], eventIndicator = 'count', appearance = 'itinerary', onEventSelect, renderDayAccessory, displayRange, className, components, showOutsideDays = true, ...props }) {
+    const hidden = displayRange ? [...(Array.isArray(props.hidden) ? props.hidden : props.hidden ? [props.hidden] : []), { before: displayRange.from }, { after: displayRange.to }] : props.hidden;
+    return _jsx(EventContext.Provider, { value: { events, indicator: eventIndicator, appearance, onEventSelect, renderDayAccessory }, children: _jsx("div", { className: "inkra-calendar-scroll", "data-appearance": appearance, children: _jsx(DayPicker, { ...props, hidden: hidden, "data-appearance": appearance, "data-week-numbers": props.showWeekNumber || undefined, showOutsideDays: showOutsideDays, className: ['inkra-calendar', className].filter(Boolean).join(' '), components: { CaptionLabel: CalendarCaption, Weekday: CalendarWeekday, Chevron: CalendarChevron, PreviousMonthButton: CalendarMonthButton, NextMonthButton: CalendarMonthButton, Day: CalendarCell, DayButton: CalendarDay, ...components } }) }) });
+}

package/dist/content/index.d.ts

@@ -0,0 +1,106 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { type HTMLAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type ContentSize = 'sm' | 'md' | 'lg';
+export type CardPadding = 'inherit' | 'none' | ContentSize;
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: 'paper' | 'quiet' | 'outline';
+    radius?: number;
+    seed?: string | number;
+    size?: ContentSize;
+    divided?: boolean;
+}
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    action?: ReactNode;
+    divided?: boolean;
+    padding?: CardPadding;
+    align?: 'start' | 'center' | 'end';
+}
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    padding?: CardPadding;
+}
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    divided?: boolean;
+    justify?: 'start' | 'center' | 'end' | 'between';
+    padding?: CardPadding;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const Card: {
+    Root: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<CardHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<CardTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Content: import("react").ForwardRefExoticComponent<CardContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<CardFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: AlertVariant;
+    icon?: ReactNode;
+    seed?: string | number;
+    size?: ContentSize;
+    appearance?: 'soft' | 'outline';
+    actions?: ReactNode;
+}
+export declare const Alert: {
+    Root: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+    Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export interface AvatarProps extends Omit<AvatarPrimitive.AvatarProps, 'asChild'> {
+    size?: 'sm' | 'md' | 'lg';
+    radius?: number;
+    bordered?: boolean;
+}
+export type AvatarImageProps = Omit<AvatarPrimitive.AvatarImageProps, 'asChild' | 'alt'> & {
+    alt: string;
+    fit?: 'cover' | 'contain';
+};
+export type AvatarFallbackProps = Omit<AvatarPrimitive.AvatarFallbackProps, 'asChild'>;
+export declare const Avatar: {
+    Root: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Image: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps, "asChild" | "alt"> & {
+        alt: string;
+        fit?: "cover" | "contain";
+    } & import("react").RefAttributes<HTMLImageElement>>;
+    Fallback: import("react").ForwardRefExoticComponent<AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export interface TableProps extends ComponentPropsWithoutRef<'table'> {
+    density?: 'compact' | 'comfortable';
+    striped?: boolean;
+    hoverable?: boolean;
+    stickyHeader?: boolean;
+    captionSide?: 'top' | 'bottom';
+    layout?: 'auto' | 'fixed';
+}
+export interface TableRowProps extends ComponentPropsWithoutRef<'tr'> {
+    selected?: boolean;
+}
+interface TableCellLayout {
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    wrap?: boolean;
+}
+export type TableHeadProps = Omit<ComponentPropsWithoutRef<'th'>, 'align'> & TableCellLayout & {
+    align?: ComponentPropsWithoutRef<'th'>['align'] | 'start' | 'end';
+};
+export type TableCellProps = Omit<ComponentPropsWithoutRef<'td'>, 'align'> & TableCellLayout & {
+    align?: ComponentPropsWithoutRef<'td'>['align'] | 'start' | 'end';
+};
+export declare const Table: {
+    Container: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Root: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
+    Header: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Footer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Row: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+    Head: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">, "align"> & TableCellLayout & {
+        align?: ComponentPropsWithoutRef<"th">["align"] | "start" | "end";
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
+    Cell: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "align"> & TableCellLayout & {
+        align?: ComponentPropsWithoutRef<"td">["align"] | "start" | "end";
+    } & import("react").RefAttributes<HTMLTableCellElement>>;
+    Caption: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLTableCaptionElement>>;
+};
+export {};

package/dist/content/index.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { createContext, useContext, forwardRef, useId } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PencilLine } from '../PencilLine.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+const copy = (children) => typeof children === 'string' ? _jsx(PencilText, { children: children }) : children;
+const CardDividers = createContext(true);
+const CardRoot = forwardRef(function CardRoot({ className, variant = 'paper', radius = 8, seed, size = 'md', divided = true, ...props }, ref) {
+    const id = useId();
+    return _jsx(CardDividers.Provider, { value: divided, children: _jsx(PencilSurface, { ...props, ref: ref, "data-size": size, className: classes('inkra-card', className), variant: variant, radius: radius, seed: seed ?? `card-${id}` }) });
+});
+const CardHeader = forwardRef(function CardHeader({ className, children, action, divided, padding = 'inherit', align = 'start', ...props }, ref) {
+    const inherited = useContext(CardDividers);
+    return _jsxs("div", { ...props, ref: ref, "data-padding": padding, "data-align": align, className: classes('inkra-card__header', className), children: [_jsx("div", { className: "inkra-card__heading", children: children }), action != null && _jsx("div", { className: "inkra-card__action", children: action }), (divided ?? inherited) && _jsx(PencilLine, { className: "inkra-card__divider" })] });
+});
+const CardTitle = forwardRef(function CardTitle({ className, children, as: Heading = 'h3', ...props }, ref) {
+    return _jsx(Heading, { ...props, ref: ref, className: classes('inkra-card__title', className), children: copy(children) });
+});
+const CardDescription = forwardRef(function CardDescription({ className, children, ...props }, ref) {
+    return _jsx("p", { ...props, ref: ref, className: classes('inkra-card__description', className), children: copy(children) });
+});
+const CardContent = forwardRef(function CardContent({ className, padding = 'inherit', ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, "data-padding": padding, className: classes('inkra-card__content', className) });
+});
+const CardFooter = forwardRef(function CardFooter({ className, children, divided, justify = 'start', padding = 'inherit', orientation = 'horizontal', ...props }, ref) {
+    const inherited = useContext(CardDividers);
+    return _jsxs("div", { ...props, ref: ref, "data-justify": justify, "data-padding": padding, "data-orientation": orientation, className: classes('inkra-card__footer', className), children: [(divided ?? inherited) && _jsx(PencilLine, { className: "inkra-card__divider" }), children] });
+});
+export const Card = { Root: CardRoot, Header: CardHeader, Title: CardTitle, Description: CardDescription, Content: CardContent, Footer: CardFooter };
+const AlertRoot = forwardRef(function AlertRoot({ className, variant = 'info', icon, seed, style, children, role = 'status', size = 'md', appearance = 'soft', actions, ...props }, ref) {
+    const id = useId();
+    const tokens = {
+        color: `var(--inkra-${variant}-foreground)`,
+        '--inkra-paper': `var(--inkra-${variant}-surface)`,
+        '--inkra-accent': `var(--inkra-${variant}-pigment)`,
+        '--inkra-accent-strong': `var(--inkra-${variant}-foreground)`,
+        '--inkra-border-strong': `var(--inkra-${variant}-foreground)`,
+        '--inkra-border': `var(--inkra-${variant}-foreground)`,
+        ...style,
+    };
+    return _jsxs(PencilSurface, { ...props, ref: ref, role: role, className: classes('inkra-alert', className), "data-variant": variant, "data-size": size, "data-appearance": appearance, variant: appearance === 'outline' ? 'outline' : 'action', radius: 8, style: tokens, seed: seed ?? `alert-${id}`, children: [icon && _jsx("span", { className: "inkra-alert__icon", "aria-hidden": "true", children: icon }), _jsxs("div", { className: "inkra-alert__body", children: [children, actions != null && _jsx("div", { className: "inkra-alert__actions", children: actions })] })] });
+});
+const AlertTitle = forwardRef(function AlertTitle({ className, children, ...props }, ref) {
+    return _jsx("p", { ...props, ref: ref, className: classes('inkra-alert__title', className), children: copy(children) });
+});
+const AlertDescription = forwardRef(function AlertDescription({ className, children, ...props }, ref) {
+    return _jsx("div", { ...props, ref: ref, className: classes('inkra-alert__description', className), children: copy(children) });
+});
+export const Alert = { Root: AlertRoot, Title: AlertTitle, Description: AlertDescription };
+const AvatarRoot = forwardRef(function AvatarRoot({ className, size = 'md', radius = 8, bordered = true, style, children, ...props }, ref) {
+    const corner = Number.isFinite(radius) ? Math.max(0, Math.min(8, radius)) : 8;
+    return _jsxs(AvatarPrimitive.Root, { ...props, ref: ref, "data-size": size, "data-bordered": bordered, className: classes('inkra-avatar', className), style: { '--inkra-avatar-radius': `${corner}px`, ...style }, children: [children, bordered && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-avatar__outline", variant: "outline", radius: corner })] });
+});
+const AvatarImage = forwardRef(function AvatarImage({ className, fit = 'cover', ...props }, ref) {
+    return _jsx(AvatarPrimitive.Image, { ...props, ref: ref, "data-fit": fit, className: classes('inkra-avatar__image', className) });
+});
+const AvatarFallback = forwardRef(function AvatarFallback({ className, children, ...props }, ref) {
+    return _jsx(AvatarPrimitive.Fallback, { ...props, ref: ref, className: classes('inkra-avatar__fallback', className), children: copy(children) });
+});
+export const Avatar = { Root: AvatarRoot, Image: AvatarImage, Fallback: AvatarFallback };
+const TableRoot = forwardRef(function TableRoot({ className, density = 'comfortable', striped = false, hoverable = false, stickyHeader = false, captionSide = 'top', layout = 'auto', ...props }, ref) {
+    return _jsx("table", { ...props, ref: ref, "data-layout": layout, "data-density": density, "data-striped": striped || undefined, "data-hoverable": hoverable || undefined, "data-sticky-header": stickyHeader || undefined, "data-caption-side": captionSide, className: classes('inkra-table', className) });
+});
+const TableContainer = forwardRef(function TableContainer({ className, ...props }, ref) {
+    return _jsx("div", { tabIndex: 0, ...props, ref: ref, className: classes('inkra-table-container', className) });
+});
+const TableHeader = forwardRef(function TableHeader(props, ref) { return _jsx("thead", { ...props, ref: ref }); });
+const TableBody = forwardRef(function TableBody(props, ref) { return _jsx("tbody", { ...props, ref: ref }); });
+const TableFooter = forwardRef(function TableFooter(props, ref) { return _jsx("tfoot", { ...props, ref: ref }); });
+const TableRow = forwardRef(function TableRow({ selected = false, ...props }, ref) { return _jsx("tr", { ...props, ref: ref, "data-selected": selected || undefined }); });
+const TableHead = forwardRef(function TableHead({ children, align = 'start', verticalAlign = 'middle', wrap = true, ...props }, ref) {
+    return _jsxs("th", { scope: "col", ...props, ref: ref, "data-align": align, "data-vertical-align": verticalAlign, "data-wrap": wrap, children: [wrap ? copy(children) : _jsx("div", { className: "inkra-table__nowrap", tabIndex: 0, children: copy(children) }), _jsx(PencilLine, { className: "inkra-table__divider" })] });
+});
+const TableCell = forwardRef(function TableCell({ children, align = 'start', verticalAlign = 'middle', wrap = true, ...props }, ref) {
+    return _jsxs("td", { ...props, ref: ref, "data-align": align, "data-vertical-align": verticalAlign, "data-wrap": wrap, children: [wrap ? copy(children) : _jsx("div", { className: "inkra-table__nowrap", tabIndex: 0, children: copy(children) }), _jsx(PencilLine, { className: "inkra-table__divider" })] });
+});
+const TableCaption = forwardRef(function TableCaption({ children, ...props }, ref) { return _jsx("caption", { ...props, ref: ref, children: copy(children) }); });
+export const Table = { Container: TableContainer, Root: TableRoot, Header: TableHeader, Body: TableBody, Footer: TableFooter, Row: TableRow, Head: TableHead, Cell: TableCell, Caption: TableCaption };

package/dist/day-agenda/index.d.ts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface AgendaEvent {
+    id: string;
+    title: string;
+    /** Minutes from the selected local day's midnight. Negative/over-1440 values indicate continuation. */
+    startMinute?: number;
+    endMinute?: number;
+    description?: ReactNode;
+    kind?: 'activity' | 'travel' | 'stay';
+    color?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface DayAgendaProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'> {
+    date: string;
+    events: readonly AgendaEvent[];
+    selectedEvent?: string;
+    onEventSelect?: (event: AgendaEvent) => void;
+    locale?: string;
+    timeZoneLabel?: string;
+    emptyLabel?: string;
+    untimedLabel?: string;
+    showOverview?: boolean;
+    hourCycle?: 'h12' | 'h23';
+    density?: 'compact' | 'comfortable';
+    showDescriptions?: boolean;
+    divided?: boolean;
+    disabled?: boolean;
+    onPreviousDay?: () => void;
+    onNextDay?: () => void;
+    navigationLabels?: {
+        previous: string;
+        next: string;
+    };
+}
+export declare function agendaTime(minute: number, hourCycle?: 'h12' | 'h23', locale?: string): string;
+export declare function agendaInterval(event: AgendaEvent): {
+    start: number;
+    end: number;
+    before: boolean;
+    after: boolean;
+} | null;
+export declare function DayAgenda({ date, events, selectedEvent, onEventSelect, locale, timeZoneLabel, emptyLabel, untimedLabel, showOverview, hourCycle, density, showDescriptions, divided, disabled, onPreviousDay, onNextDay, navigationLabels, className, ...props }: DayAgendaProps): import("react").JSX.Element;

package/dist/day-agenda/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId } from 'react';
+import { TravelIcon } from '../internal/travelIcons.js';
+import { Button } from '../Button.js';
+import { createAgendaScale, layoutAgendaCards } from './layout.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilText } from '../PencilText.js';
+export function agendaTime(minute, hourCycle = 'h23', locale = 'en') {
+    const value = Math.max(0, Math.min(1440, Math.floor(minute)));
+    if (hourCycle === 'h12') {
+        const time = new Date(Date.UTC(2000, 0, 1, 0, value));
+        return new Intl.DateTimeFormat(locale, { timeZone: 'UTC', hour: 'numeric', minute: '2-digit', hourCycle }).format(time) + (value === 1440 ? ' +1' : '');
+    }
+    return value === 1440 ? '00:00 +1' : `${String(Math.floor(value / 60)).padStart(2, '0')}:${String(value % 60).padStart(2, '0')}`;
+}
+export function agendaInterval(event) {
+    if (event.startMinute === undefined || !Number.isFinite(event.startMinute))
+        return null;
+    const end = event.endMinute;
+    if (end !== undefined && (!Number.isFinite(end) || end < event.startMinute))
+        return null;
+    if (event.startMinute >= 1440 || (end ?? event.startMinute) < 0 || (end === 0 && event.startMinute < 0))
+        return null;
+    return { start: Math.max(0, event.startMinute), end: Math.min(1440, end ?? event.startMinute), before: event.startMinute < 0, after: (end ?? 0) > 1440 };
+}
+export function DayAgenda({ date, events, selectedEvent, onEventSelect, locale = 'en', timeZoneLabel, emptyLabel = 'No events', untimedLabel = 'Time pending', showOverview = true, hourCycle = 'h23', density = 'comfortable', showDescriptions = true, divided = true, disabled = false, onPreviousDay, onNextDay, navigationLabels = { previous: 'Previous day', next: 'Next day' }, className, ...props }) {
+    const id = useId();
+    const validDate = /^\d{4}-\d{2}-\d{2}$/.test(date) ? new Date(`${date}T12:00:00Z`) : new Date(NaN);
+    const title = Number.isFinite(validDate.getTime()) ? new Intl.DateTimeFormat(locale, { timeZone: 'UTC', month: 'long', day: 'numeric', weekday: 'short' }).format(validDate) : date;
+    const ordered = [...events].sort((a, b) => (agendaInterval(a)?.start ?? Infinity) - (agendaInterval(b)?.start ?? Infinity));
+    const formatTime = (minute) => agendaTime(minute, hourCycle, locale);
+    const timed = ordered.flatMap(event => {
+        const interval = agendaInterval(event);
+        return interval ? [{ ...interval, id: event.id, event }] : [];
+    });
+    const intervals = timed.filter(row => row.end > row.start);
+    const points = timed.filter(row => row.end === row.start);
+    const scale = createAgendaScale(intervals, points.map(row => row.start), density === 'compact');
+    const cards = layoutAgendaCards(timed, scale).sort((a, b) => a.start - b.start);
+    const ticks = Array.from({ length: 25 }, (_, hour) => hour * 60).filter((minute, index, list) => index === 0 || index === 24 || scale.position(minute) - scale.position(list[index - 1]) >= 25);
+    const renderCard = (event, time) => _jsxs(PencilSurface, { variant: "quiet", radius: 6, className: "inkra-agenda__card", "data-selected": selectedEvent === event.id, style: { '--inkra-accent-soft': event.color ?? (event.kind === 'stay' ? '#c8c38f' : event.kind === 'travel' ? '#87bbc0' : '#a7c7ad') }, children: [onEventSelect && _jsx("button", { type: "button", className: "inkra-agenda__hit", disabled: disabled || event.disabled, "aria-label": `${time}, ${event.title}`, "aria-pressed": selectedEvent === event.id, onClick: () => onEventSelect(event) }), _jsxs("div", { className: "inkra-agenda__card-copy", children: [_jsxs("span", { className: "inkra-agenda__card-title", title: event.title, children: [event.icon && _jsx("span", { "aria-hidden": "true", children: event.icon }), _jsx(PencilText, { ellipsis: true, children: event.title })] }), showDescriptions && event.description && _jsx("span", { className: "inkra-agenda__description", children: event.description })] })] });
+    return _jsxs("section", { ...props, "data-density": density, "data-hour-cycle": hourCycle, className: ['inkra-agenda', className].filter(Boolean).join(' '), "aria-labelledby": props['aria-labelledby'] ?? id, children: [_jsxs("header", { className: "inkra-agenda__heading", children: [_jsx(PencilText, { as: "h3", id: id, children: title }), timeZoneLabel && _jsx(PencilText, { children: timeZoneLabel })] }), _jsx(PencilLine, {}), ordered.length === 0 ? _jsx(PencilText, { as: "p", children: emptyLabel }) : _jsxs(_Fragment, { children: [_jsx("div", { className: "inkra-agenda__timeline", "data-overview": showOverview, children: _jsxs("div", { className: "inkra-agenda__scale", style: { height: scale.height + 24 }, children: [ticks.map(minute => _jsxs("div", { className: "inkra-agenda__tick", style: { top: scale.position(minute) + 12 }, children: [_jsx("span", { children: _jsx(PencilText, { children: formatTime(minute) }) }), divided && _jsx(PencilLine, {})] }, minute)), _jsx("ol", { className: "inkra-agenda__lanes", children: cards.map(row => {
+                                        const time = `${row.before ? '\u2190 ' : ''}${formatTime(row.start)}${row.event.endMinute !== undefined ? ` - ${formatTime(row.end)}` : ''}${row.after ? ' \u2192' : ''}`;
+                                        return _jsxs("li", { "data-kind": row.event.kind, style: { top: row.top + 14, height: Math.max(44, row.height - 4), insetInlineStart: `${row.lane / row.lanes * 100}%`, width: `${100 / row.lanes}%` }, children: [renderCard(row.event, time), _jsx("span", { className: "inkra-agenda__accessible-time", children: time })] }, row.id);
+                                    }) })] }) }), ordered.some(event => !agendaInterval(event)) && _jsxs("div", { className: "inkra-agenda__pending", children: [_jsx(PencilText, { children: untimedLabel }), ordered.filter(event => !agendaInterval(event)).map(event => _jsx("div", { children: renderCard(event, untimedLabel) }, event.id))] })] }), (onPreviousDay || onNextDay) && _jsxs("footer", { className: "inkra-agenda__navigation", children: [_jsx(PencilLine, {}), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": navigationLabels.previous, title: navigationLabels.previous, disabled: !onPreviousDay, onClick: onPreviousDay, children: _jsx(TravelIcon, { name: "previous" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": navigationLabels.next, title: navigationLabels.next, disabled: !onNextDay, onClick: onNextDay, children: _jsx(TravelIcon, { name: "next" }) })] })] });
+}

package/dist/day-agenda/layout.d.ts

@@ -0,0 +1,20 @@
+export interface ScheduleInterval {
+    id: string;
+    start: number;
+    end: number;
+}
+export declare function layoutAgendaIntervals<T extends ScheduleInterval>(intervals: T[]): (T & {
+    lane: number;
+    lanes: number;
+})[];
+export declare function createAgendaScale(intervals: ScheduleInterval[], pointTimes: number[], compact: boolean): {
+    position: (minute: number, edge?: "before" | "after") => number;
+    height: number;
+    rowHeight: number;
+};
+export declare function layoutAgendaCards<T extends ScheduleInterval>(rows: T[], scale: ReturnType<typeof createAgendaScale>): (T & {
+    top: number;
+    height: number;
+    lane: number;
+    lanes: number;
+})[];

package/dist/day-agenda/layout.js

@@ -0,0 +1,60 @@
+export function layoutAgendaIntervals(intervals) {
+    const sorted = [...intervals].sort((a, b) => a.start - b.start || a.id.localeCompare(b.id));
+    const result = [];
+    let group = [], groupEnd = -Infinity, laneEnds = [];
+    const flush = () => { for (const item of group)
+        result.push({ ...item, lanes: laneEnds.length }); group = []; laneEnds = []; };
+    for (const item of sorted) {
+        if (item.start >= groupEnd)
+            flush();
+        let lane = laneEnds.findIndex(end => end <= item.start);
+        if (lane < 0)
+            lane = laneEnds.length;
+        laneEnds[lane] = item.end;
+        group.push({ ...item, lane });
+        groupEnd = Math.max(groupEnd, item.end);
+    }
+    flush();
+    return result;
+}
+export function createAgendaScale(intervals, pointTimes, compact) {
+    const rowHeight = compact ? 56 : 72;
+    const points = new Set(pointTimes);
+    const boundaries = [...new Set([0, 1440, ...pointTimes, ...intervals.flatMap(row => [row.start, row.end])])].sort((a, b) => a - b);
+    const before = new Map(), after = new Map();
+    const segments = [];
+    let height = 0;
+    for (let index = 0; index < boundaries.length; index++) {
+        const time = boundaries[index];
+        before.set(time, height);
+        if (points.has(time))
+            height += rowHeight;
+        after.set(time, height);
+        const next = boundaries[index + 1];
+        if (next === undefined)
+            continue;
+        const occupied = intervals.some(row => row.start < next && row.end > time);
+        const size = Math.max(occupied ? rowHeight : 16, (next - time) / 60 * 32);
+        segments.push({ start: time, end: next, top: height, size });
+        height += size;
+    }
+    const position = (minute, edge = 'before') => {
+        const time = Math.max(0, Math.min(1440, minute));
+        const exact = (edge === 'after' ? after : before).get(time);
+        if (exact !== undefined)
+            return exact;
+        const segment = segments.find(row => time >= row.start && time <= row.end);
+        return segment ? segment.top + (time - segment.start) / (segment.end - segment.start) * segment.size : 0;
+    };
+    return { position, height, rowHeight };
+}
+export function layoutAgendaCards(rows, scale) {
+    // Allocate lanes in the shared pixel scale so a point inside a long event cannot cover it.
+    const positioned = rows.map(row => {
+        const point = row.start === row.end;
+        const top = scale.position(row.start, point ? 'before' : 'after');
+        const height = point ? scale.rowHeight : scale.position(row.end) - top;
+        return { id: row.id, start: top, end: top + height, row, top, height };
+    });
+    return layoutAgendaIntervals(positioned).map(({ row, top, height, lane, lanes }) => ({ ...row, top, height, lane, lanes }));
+}

package/dist/display/index.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type BadgeVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    seed?: string | number;
+    variant?: BadgeVariant;
+    size?: 'sm' | 'md' | 'lg';
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export interface SeparatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    weight?: number;
+    decorative?: boolean;
+    orientation?: SeparatorOrientation;
+    seed?: string | number;
+}
+export declare const Separator: import("react").ForwardRefExoticComponent<SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    seed?: string | number;
+    radius?: number;
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    value: number | null;
+    max?: number;
+    label?: ReactNode;
+    seed?: string | number;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/display/index.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const badgeTokens = {
+    neutral: { foreground: 'ink-muted', pigment: 'surface-muted' },
+    accent: { foreground: 'accent-strong', pigment: 'accent-soft' },
+    success: { foreground: 'success-foreground', pigment: 'success-pigment' },
+    warning: { foreground: 'warning-foreground', pigment: 'warning-pigment' },
+    danger: { foreground: 'danger-foreground', pigment: 'danger-pigment' },
+    info: { foreground: 'info-foreground', pigment: 'info-pigment' },
+};
+export const Badge = forwardRef(function Badge({ children, className, seed, style, variant = 'neutral', size = 'md', startIcon, endIcon, ...props }, ref) {
+    const generatedId = useId();
+    const tokens = badgeTokens[variant];
+    const resolvedStyle = {
+        ...style,
+        color: `var(--inkra-${tokens.foreground})`,
+        '--inkra-coral-soft': `var(--inkra-${tokens.pigment})`,
+        '--inkra-border-strong': `var(--inkra-${tokens.foreground})`,
+    };
+    return (_jsxs(PencilSurface, { ...props, as: "span", className: ['inkra-badge', className].filter(Boolean).join(' '), "data-variant": variant, "data-size": size, radius: 6, ref: ref, seed: seed ?? `inkra-badge-${generatedId}`, style: resolvedStyle, variant: "badge", children: [startIcon && _jsx("span", { className: "inkra-badge__icon", "aria-hidden": "true", children: startIcon }), typeof children === 'string' ? (_jsx(PencilText, { seed: `${seed ?? `inkra-badge-${generatedId}`}-label`, children: children })) : children, endIcon && _jsx("span", { className: "inkra-badge__icon", "aria-hidden": "true", children: endIcon })] }));
+});
+export const Separator = forwardRef(function Separator({ className, decorative = false, orientation = 'horizontal', weight = 0.9, seed, ...props }, ref) {
+    const semanticProps = decorative
+        ? { 'aria-hidden': true }
+        : { 'aria-orientation': orientation, role: 'separator' };
+    return (_jsx("div", { ...props, ...semanticProps, className: ['inkra-separator', className].filter(Boolean).join(' '), "data-orientation": orientation, ref: ref, children: _jsx(PencilLine, { className: "inkra-separator__line", orientation: orientation, seed: seed ?? `inkra-separator-${orientation}`, weight: Number.isFinite(weight) ? Math.max(0.3, Math.min(2, weight)) : 0.9 }) }));
+});
+export const Skeleton = forwardRef(function Skeleton({ className, seed = 'inkra-skeleton', radius, ...props }, ref) {
+    return (_jsx(PencilSurface, { ...props, "aria-hidden": "true", as: "div", className: ['inkra-skeleton', className].filter(Boolean).join(' '), ref: ref, seed: seed, radius: radius, variant: "quiet" }));
+});
+function normalizeMax(max) {
+    return typeof max === 'number' && Number.isFinite(max) && max > 0 ? max : 100;
+}
+function normalizeValue(value, max) {
+    if (value === null)
+        return null;
+    if (!Number.isFinite(value))
+        return 0;
+    return Math.min(max, Math.max(0, value));
+}
+export const Progress = forwardRef(function Progress({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, label, max, seed, style, value, size = 'md', ...props }, ref) {
+    const generatedId = useId();
+    const labelId = `inkra-progress-${generatedId}-label`;
+    const resolvedMax = normalizeMax(max);
+    const resolvedValue = normalizeValue(value, resolvedMax);
+    const percent = resolvedValue === null ? null : resolvedValue / resolvedMax * 100;
+    const resolvedLabelledBy = ariaLabel == null && ariaLabelledBy == null && label != null
+        ? labelId
+        : ariaLabelledBy;
+    const resolvedSeed = seed ?? `inkra-progress-${generatedId}`;
+    const resolvedStyle = {
+        ...style,
+        '--inkra-progress-value': `${percent ?? 36}%`,
+    };
+    return (_jsxs("div", { ...props, "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, "aria-valuemax": resolvedMax, "aria-valuemin": 0, "aria-valuenow": resolvedValue ?? undefined, className: ['inkra-progress', className].filter(Boolean).join(' '), "data-state": resolvedValue === null ? 'indeterminate' : 'determinate', "data-value": resolvedValue ?? undefined, "data-size": size, ref: ref, role: "progressbar", style: resolvedStyle, children: [label == null ? null : (typeof label === 'string' ? (_jsx(PencilText, { as: "span", className: "inkra-progress__label", id: labelId, seed: `${resolvedSeed}-label`, children: label })) : _jsx("span", { className: "inkra-progress__label", id: labelId, children: label })), _jsxs("span", { "aria-hidden": "true", className: "inkra-progress__track", children: [_jsx(PencilSurface, { as: "span", className: "inkra-progress__outline", radius: 6, seed: `${resolvedSeed}-outline`, variant: "outline" }), _jsx("span", { className: "inkra-progress__fill-clip", children: _jsx(PencilSurface, { as: "span", className: "inkra-progress__fill", radius: 6, seed: `${resolvedSeed}-fill`, variant: "selection" }) })] })] }));
+});

package/dist/dropdown-menu/index.d.ts

@@ -0,0 +1,34 @@
+import * as Primitive from '@radix-ui/react-dropdown-menu';
+import { type ReactNode } from 'react';
+export type DropdownMenuProps = Primitive.DropdownMenuProps;
+declare function Root(props: DropdownMenuProps): import("react").JSX.Element;
+export type DropdownMenuTriggerProps = Primitive.DropdownMenuTriggerProps;
+export type DropdownMenuPortalProps = Primitive.DropdownMenuPortalProps;
+declare function Portal({ children, ...props }: DropdownMenuPortalProps): import("react").JSX.Element;
+export interface DropdownMenuContentProps extends Omit<Primitive.DropdownMenuContentProps, 'asChild'> {
+    seed?: string | number;
+}
+export interface DropdownMenuItemProps extends Omit<Primitive.DropdownMenuItemProps, 'asChild'> {
+    destructive?: boolean;
+    icon?: ReactNode;
+}
+export type DropdownMenuCheckboxItemProps = Omit<Primitive.DropdownMenuCheckboxItemProps, 'asChild'>;
+export type DropdownMenuRadioItemProps = Omit<Primitive.DropdownMenuRadioItemProps, 'asChild'>;
+export type DropdownMenuLabelProps = Omit<Primitive.DropdownMenuLabelProps, 'asChild'>;
+export type DropdownMenuSeparatorProps = Omit<Primitive.DropdownMenuSeparatorProps, 'asChild' | 'children'>;
+export type DropdownMenuGroupProps = Primitive.DropdownMenuGroupProps;
+export type DropdownMenuRadioGroupProps = Primitive.DropdownMenuRadioGroupProps;
+export declare const DropdownMenu: {
+    Root: typeof Root;
+    Trigger: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: typeof Portal;
+    Content: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("react").ForwardRefExoticComponent<DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Label: import("react").ForwardRefExoticComponent<DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Group: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioGroup: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};