@calcifer-design/ui 0.1.0

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,12 @@
+import { Button as BaseButton } from '@base-ui/react/button';
+import type { ComponentPropsWithoutRef } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+export type ButtonSize = 'md' | 'sm';
+export interface ButtonProps extends Omit<ComponentPropsWithoutRef<typeof BaseButton>, 'className'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Shows a busy state, keeps the button focusable, and blocks activation. */
+    loading?: boolean;
+    className?: string;
+}
+export declare function Button({ variant, size, loading, disabled, className, children, nativeButton, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/components/Button/Button.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import Button_module from "./Button.module.js";
+function Button_Button({ variant = 'primary', size = 'md', loading = false, disabled, className, children, nativeButton, ...rest }) {
+    const isDisabled = Boolean(disabled) || loading;
+    const isNativeButton = nativeButton ?? !rest.render;
+    return /*#__PURE__*/ jsx(Button, {
+        ...rest,
+        nativeButton: isNativeButton,
+        className: [
+            Button_module.root,
+            className
+        ].filter(Boolean).join(' '),
+        "data-variant": variant,
+        "data-size": size,
+        "data-loading": loading ? '' : void 0,
+        disabled: isDisabled,
+        focusableWhenDisabled: loading,
+        "aria-busy": loading || void 0,
+        children: /*#__PURE__*/ jsx("span", {
+            className: Button_module.label,
+            children: children
+        })
+    });
+}
+export { Button_Button as Button };

package/dist/components/Button/Button.module.js

@@ -0,0 +1,6 @@
+import "./Button_module.css";
+const Button_module = {
+    root: "root-kIffN",
+    label: "label-Ujxp1"
+};
+export default Button_module;

package/dist/components/Button/Button_module.css

@@ -0,0 +1,79 @@
+.root-kIffN {
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: var(--size-touch);
+  min-width: var(--size-touch);
+  padding: var(--space-2) var(--space-5);
+  border-radius: var(--radius-full);
+  font-size: var(--text-md);
+  font-weight: 500;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-body);
+  cursor: pointer;
+  white-space: nowrap;
+  transition-property: background-color, color, border-color, box-shadow, transform;
+  transition-duration: var(--motion-duration-1);
+  transition-timing-function: var(--motion-ease);
+  -webkit-tap-highlight-color: transparent;
+  border: 1px solid #0000;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.root-kIffN[data-size="sm"] {
+  min-height: 2.5rem;
+  padding: var(--space-1) var(--space-4);
+  font-size: var(--text-sm);
+}
+
+.root-kIffN[data-variant="primary"] {
+  background: var(--color-accent);
+  color: var(--color-accent-text);
+}
+
+.root-kIffN[data-variant="secondary"] {
+  border-radius: var(--radius-md);
+  background: var(--color-surface-raised);
+  color: var(--color-text);
+  border-color: var(--color-border-strong);
+}
+
+.root-kIffN[data-variant="ghost"] {
+  padding-inline: var(--space-2);
+  border-radius: var(--radius-md);
+  color: var(--color-link);
+  background: none;
+}
+
+@media (hover: hover) {
+  .root-kIffN[data-variant="primary"]:hover:not([data-disabled]) {
+    background: var(--color-accent-hover);
+  }
+
+  .root-kIffN[data-variant="secondary"]:hover:not([data-disabled]) {
+    background: var(--color-surface-2);
+  }
+
+  .root-kIffN[data-variant="ghost"]:hover:not([data-disabled]) {
+    text-decoration: underline;
+  }
+}
+
+.root-kIffN:active:not([data-disabled]) {
+  transform: scale(.98);
+}
+
+.root-kIffN[data-disabled] {
+  cursor: not-allowed;
+  opacity: .45;
+}
+
+.label-Ujxp1 {
+  display: inline-block;
+}
+
+.root-kIffN[data-loading] .label-Ujxp1 {
+  opacity: .7;
+}
+

package/dist/components/Button/LinkButton.d.ts

@@ -0,0 +1,19 @@
+import { useRender } from '@base-ui/react/use-render';
+import type { ComponentPropsWithRef } from 'react';
+import type { ButtonSize, ButtonVariant } from './Button.js';
+export interface LinkButtonProps extends ComponentPropsWithRef<'a'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /**
+     * Replaces the rendered `<a>` so a router link can wear the button styling; the
+     * element's own props are merged with the ones this component supplies.
+     */
+    render?: useRender.RenderProp;
+}
+/**
+ * A link that looks like a `Button`. It shares `Button`'s styling but none of its
+ * semantics: no `role`, no button behaviour, so assistive technology announces a
+ * destination change rather than an action. Use it for navigation; use `Button` for
+ * anything that acts on the current page.
+ */
+export declare function LinkButton({ variant, size, className, children, render, ref, ...rest }: LinkButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/Button/LinkButton.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import Button_module from "./Button.module.js";
+function LinkButton({ variant = 'primary', size = 'md', className, children, render, ref, ...rest }) {
+    return useRender({
+        defaultTagName: 'a',
+        render,
+        ref,
+        props: {
+            ...rest,
+            className: [
+                Button_module.root,
+                className
+            ].filter(Boolean).join(' '),
+            'data-variant': variant,
+            'data-size': size,
+            children: /*#__PURE__*/ jsx("span", {
+                className: Button_module.label,
+                children: children
+            })
+        }
+    });
+}
+export { LinkButton };

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface CardProps {
+    as?: 'div' | 'article' | 'section';
+    heading?: ReactNode;
+    headingLevel?: 2 | 3;
+    /** Rendered on the heading's row, pushed to the end: a status pill, a version, a badge. */
+    headingAside?: ReactNode;
+    footer?: ReactNode;
+    /** `danger` is the failed-remote card: tinted surface and border. */
+    tone?: 'default' | 'danger';
+    /** Lifts on hover; use when the card's main action is a link inside it. */
+    interactive?: boolean;
+    children: ReactNode;
+}
+export declare function Card({ as: Element, heading, headingLevel, headingAside, footer, tone, interactive, children, }: CardProps): import("react").JSX.Element;

package/dist/components/Card/Card.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Card_module from "./Card.module.js";
+function Card({ as: Element = 'div', heading, headingLevel = 3, headingAside, footer, tone = 'default', interactive = false, children }) {
+    const Heading = 2 === headingLevel ? 'h2' : 'h3';
+    return /*#__PURE__*/ jsxs(Element, {
+        className: Card_module.root,
+        "data-tone": tone,
+        "data-interactive": interactive ? '' : void 0,
+        children: [
+            heading ? /*#__PURE__*/ jsxs("div", {
+                className: Card_module.header,
+                children: [
+                    /*#__PURE__*/ jsx(Heading, {
+                        className: Card_module.heading,
+                        children: heading
+                    }),
+                    headingAside
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                className: Card_module.body,
+                children: children
+            }),
+            footer ? /*#__PURE__*/ jsx("div", {
+                className: Card_module.footer,
+                children: footer
+            }) : null
+        ]
+    });
+}
+export { Card };

package/dist/components/Card/Card.module.js

@@ -0,0 +1,9 @@
+import "./Card_module.css";
+const Card_module = {
+    root: "root-Burn_",
+    header: "header-vKZVf",
+    heading: "heading-ZZrOA",
+    body: "body-na04U",
+    footer: "footer-bRVor"
+};
+export default Card_module;

package/dist/components/Card/Card_module.css

@@ -0,0 +1,55 @@
+.root-Burn_ {
+  gap: var(--space-3);
+  padding: var(--space-5);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-card-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--elevation-1);
+  transition-property: transform, box-shadow;
+  transition-duration: var(--motion-duration-3);
+  transition-timing-function: var(--motion-ease);
+  flex-direction: column;
+  display: flex;
+  position: relative;
+  container-type: inline-size;
+}
+
+.root-Burn_[data-tone="danger"] {
+  background: var(--color-danger-surface);
+  border-color: var(--color-danger-border);
+}
+
+@media (hover: hover) {
+  .root-Burn_[data-interactive]:hover {
+    box-shadow: var(--elevation-2);
+    transform: translateY(-2px);
+  }
+}
+
+.header-vKZVf {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-2);
+  display: flex;
+}
+
+.heading-ZZrOA {
+  font-size: var(--text-h3);
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-heading);
+}
+
+.body-na04U {
+  gap: var(--space-3);
+  color: var(--color-text-muted);
+  flex-direction: column;
+  display: flex;
+}
+
+.footer-bRVor {
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-top: auto;
+  display: flex;
+}
+

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,46 @@
+import { type ColumnDef as TanStackColumnDef, type RowData, type SortingState } from '@tanstack/react-table';
+import type { BreakpointName } from '@calcifer-design/tokens';
+declare const features: {
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    sortFns: {
+        alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    };
+};
+export type ColumnDef<Row extends RowData, Value = unknown> = TanStackColumnDef<typeof features, Row, Value>;
+export type { SortingState };
+/**
+ * Thin wrapper so consumers call `createColumnHelper<Row>()` exactly as they would
+ * against the v8 API.
+ *
+ * Build the resulting column array with `columnHelper.columns([...])`, not a plain
+ * array literal: under v9's feature-based typing, wrapping the array through the
+ * helper is what preserves each individual column's `TValue`, rather than widening
+ * every column to the union of all of them.
+ */
+export declare function createColumnHelper<Row extends RowData>(): import("@tanstack/react-table").ColumnHelper<{
+    rowSortingFeature: import("@tanstack/react-table").TableFeature;
+    sortedRowModel: (table: import("@tanstack/react-table").Table<any, any>) => () => import("@tanstack/react-table").RowModel<any, any>;
+    sortFns: {
+        alphanumeric: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        text: import("@tanstack/react-table").CreatedSortFn<any, any>;
+        datetime: import("@tanstack/react-table").CreatedSortFn<any, any>;
+    };
+}, Row>;
+export interface DataTableProps<Row extends RowData> {
+    caption: string;
+    /** Build with `columnHelper.columns([...])` (see `createColumnHelper` above), not a plain array literal. */
+    columns: ColumnDef<Row, unknown>[];
+    data: Row[];
+    getRowId?: (row: Row) => string;
+    initialSort?: SortingState;
+    /** Below this breakpoint, rows render stacked with header labels. */
+    stackBelow?: BreakpointName;
+    /** Drop the wrapper's own border, radius and surface when a panel already frames it. */
+    bare?: boolean;
+    /** Keep the caption for assistive tech but hide it visually (the panel shows the title). */
+    hideCaption?: boolean;
+}
+export declare function DataTable<Row extends RowData>({ caption, columns, data, getRowId, initialSort, stackBelow, bare, hideCaption, }: DataTableProps<Row>): import("react").JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createColumnHelper, createSortedRowModel, flexRender, rowSortingFeature, sortFn_alphanumeric, sortFn_datetime, sortFn_text, tableFeatures, useTable } from "@tanstack/react-table";
+import { useId, useState } from "react";
+import { minWidth, useMediaQuery } from "../../hooks/useMediaQuery.js";
+import DataTable_module from "./DataTable.module.js";
+const features = tableFeatures({
+    rowSortingFeature: rowSortingFeature,
+    sortedRowModel: createSortedRowModel(),
+    sortFns: {
+        alphanumeric: sortFn_alphanumeric,
+        text: sortFn_text,
+        datetime: sortFn_datetime
+    }
+});
+function DataTable_createColumnHelper() {
+    return createColumnHelper();
+}
+const ariaSortByDirection = {
+    asc: 'ascending',
+    desc: 'descending'
+};
+function DataTable({ caption, columns, data, getRowId, initialSort = [], stackBelow, bare = false, hideCaption = false }) {
+    const [sorting, setSorting] = useState(initialSort);
+    const captionId = useId();
+    const isWide = useMediaQuery(stackBelow ? minWidth(stackBelow) : '(min-width: 0px)');
+    const stacked = Boolean(stackBelow) && !isWide;
+    const table = useTable({
+        features: features,
+        data,
+        columns,
+        state: {
+            sorting
+        },
+        onSortingChange: setSorting,
+        getRowId
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: DataTable_module.scroll,
+        "data-bare": bare ? '' : void 0,
+        role: "region",
+        "aria-labelledby": captionId,
+        tabIndex: 0,
+        children: /*#__PURE__*/ jsxs("table", {
+            className: DataTable_module.table,
+            "data-stacked": stacked ? '' : void 0,
+            children: [
+                /*#__PURE__*/ jsx("caption", {
+                    id: captionId,
+                    className: DataTable_module.caption,
+                    "data-hidden": hideCaption ? '' : void 0,
+                    children: caption
+                }),
+                /*#__PURE__*/ jsx("thead", {
+                    className: DataTable_module.head,
+                    children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsx("tr", {
+                            children: headerGroup.headers.map((header)=>{
+                                const sortDirection = header.column.getIsSorted();
+                                const canSort = header.column.getCanSort();
+                                return /*#__PURE__*/ jsx("th", {
+                                    scope: "col",
+                                    className: DataTable_module.headerCell,
+                                    "aria-sort": sortDirection ? ariaSortByDirection[sortDirection] : void 0,
+                                    children: canSort ? /*#__PURE__*/ jsxs("button", {
+                                        type: "button",
+                                        className: DataTable_module.sortButton,
+                                        onClick: header.column.getToggleSortingHandler(),
+                                        children: [
+                                            flexRender(header.column.columnDef.header, header.getContext()),
+                                            /*#__PURE__*/ jsx("span", {
+                                                "aria-hidden": "true",
+                                                className: DataTable_module.sortIcon,
+                                                "data-direction": sortDirection || 'none'
+                                            })
+                                        ]
+                                    }) : flexRender(header.column.columnDef.header, header.getContext())
+                                }, header.id);
+                            })
+                        }, headerGroup.id))
+                }),
+                /*#__PURE__*/ jsx("tbody", {
+                    children: table.getRowModel().rows.map((row)=>/*#__PURE__*/ jsx("tr", {
+                            className: DataTable_module.row,
+                            children: row.getAllCells().map((cell)=>{
+                                const header = cell.column.columnDef.header;
+                                const headerLabel = 'string' == typeof header ? header : cell.column.id;
+                                return /*#__PURE__*/ jsx("td", {
+                                    className: DataTable_module.cell,
+                                    "data-label": headerLabel,
+                                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                }, cell.id);
+                            })
+                        }, row.id))
+                })
+            ]
+        })
+    });
+}
+export { DataTable, DataTable_createColumnHelper as createColumnHelper };

package/dist/components/DataTable/DataTable.module.js

@@ -0,0 +1,13 @@
+import "./DataTable_module.css";
+const DataTable_module = {
+    scroll: "scroll-vHFjf",
+    table: "table-H20Eb",
+    caption: "caption-glW7e",
+    head: "head-KQpiR",
+    headerCell: "headerCell-Bm5aB",
+    sortButton: "sortButton-b2Ze6",
+    sortIcon: "sortIcon-sc98J",
+    row: "row-oItIj",
+    cell: "cell-L4VgS"
+};
+export default DataTable_module;

package/dist/components/DataTable/DataTable_module.css

@@ -0,0 +1,149 @@
+.scroll-vHFjf {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-raised);
+  overflow-x: auto;
+}
+
+.scroll-vHFjf[data-bare] {
+  background: none;
+  border: 0;
+  border-radius: 0;
+}
+
+.table-H20Eb {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+.caption-glW7e {
+  padding: var(--space-3) var(--space-5);
+  text-align: left;
+  color: var(--color-text);
+  caption-side: top;
+  font-weight: 600;
+}
+
+.caption-glW7e[data-hidden] {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.head-KQpiR {
+  background: var(--color-surface-2);
+}
+
+.headerCell-Bm5aB {
+  padding: var(--space-1) var(--space-3);
+  border-block: 1px solid var(--color-border);
+  text-align: left;
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--color-text-subtle);
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.sortButton-b2Ze6 {
+  align-items: center;
+  gap: var(--space-1);
+  min-height: var(--size-touch);
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+  display: inline-flex;
+}
+
+.sortIcon-sc98J:after {
+  content: "↕";
+  color: var(--color-text-subtle);
+}
+
+.sortIcon-sc98J[data-direction="asc"]:after {
+  content: "↑";
+  color: var(--color-link);
+}
+
+.sortIcon-sc98J[data-direction="desc"]:after {
+  content: "↓";
+  color: var(--color-link);
+}
+
+.row-oItIj {
+  border-bottom: 1px solid var(--color-border);
+  transition-property: background-color;
+  transition-duration: var(--motion-duration-1);
+  transition-timing-function: var(--motion-ease);
+}
+
+@media (hover: hover) {
+  .row-oItIj:hover {
+    background: var(--color-surface-2);
+  }
+}
+
+.cell-L4VgS {
+  height: 2.75rem;
+  padding: var(--space-2) var(--space-3);
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.headerCell-Bm5aB:first-child, .cell-L4VgS:first-child {
+  padding-inline-start: var(--space-5);
+}
+
+.headerCell-Bm5aB:last-child, .cell-L4VgS:last-child {
+  padding-inline-end: var(--space-5);
+}
+
+.table-H20Eb[data-stacked] .head-KQpiR {
+  clip-path: inset(50%);
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  overflow: hidden;
+}
+
+.table-H20Eb[data-stacked] .row-oItIj {
+  gap: var(--space-1);
+  padding: var(--space-3) var(--space-5);
+  display: grid;
+}
+
+.table-H20Eb[data-stacked] .cell-L4VgS {
+  gap: var(--space-2);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  grid-template-columns: minmax(6rem, 30%) 1fr;
+  height: auto;
+  padding: 0;
+  display: grid;
+}
+
+.table-H20Eb[data-stacked] .cell-L4VgS:before {
+  content: attr(data-label);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--color-text-subtle);
+  font-weight: 500;
+}
+

package/dist/components/LiveRegion/LiveRegion.d.ts

@@ -0,0 +1,5 @@
+export interface LiveRegionProps {
+    message: string;
+    politeness?: 'polite' | 'assertive';
+}
+export declare function LiveRegion({ message, politeness }: LiveRegionProps): import("react").JSX.Element;

package/dist/components/LiveRegion/LiveRegion.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import LiveRegion_module from "./LiveRegion.module.js";
+function LiveRegion({ message, politeness = 'polite' }) {
+    const role = 'assertive' === politeness ? 'alert' : 'status';
+    return /*#__PURE__*/ jsx("div", {
+        className: LiveRegion_module.root,
+        role: role,
+        "aria-live": politeness,
+        "aria-atomic": "true",
+        children: message
+    });
+}
+export { LiveRegion };

package/dist/components/LiveRegion/LiveRegion.module.js

@@ -0,0 +1,5 @@
+import "./LiveRegion_module.css";
+const LiveRegion_module = {
+    root: "root-queRh"
+};
+export default LiveRegion_module;

package/dist/components/LiveRegion/LiveRegion_module.css

@@ -0,0 +1,12 @@
+.root-queRh {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+

package/dist/components/NavMenu/NavMenu.d.ts

@@ -0,0 +1,19 @@
+import { type ReactElement, type ReactNode } from 'react';
+export interface NavItem {
+    href: string;
+    label: string;
+}
+export interface LinkRenderProps {
+    className: string;
+    'aria-current'?: 'page';
+    children: ReactNode;
+}
+export interface NavMenuProps {
+    items: NavItem[];
+    currentPath: string;
+    /** Accessible name for the navigation landmark. */
+    label?: string;
+    /** Lets the shell render router links; defaults to a plain anchor. */
+    renderLink?: (item: NavItem, props: LinkRenderProps) => ReactElement;
+}
+export declare function NavMenu({ items, currentPath, label, renderLink, }: NavMenuProps): import("react").JSX.Element;