@ratio-ui/core 0.1.1 → 0.3.0

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+/** The tone of an alert. Critical uses the question 1 tokens. */
+export type AlertTone = 'info' | 'success' | 'warning' | 'critical';
+/** The props of Alert: the HTML attributes of its div, except className, style, children and title. */
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'title'> & {
+  /** The tone. Defaults to info. */
+  tone?: AlertTone;
+  /** An optional bold first line. */
+  title?: ReactNode;
+  /** An optional second line. */
+  description?: ReactNode;
+  /** An optional action on the right, usually one Button. */
+  action?: ReactNode;
+  /** Receives the rendered div. */
+  ref?: Ref<HTMLDivElement>;
+};
+/** A message that stays in the page: a tone glyph, an optional title and description, and an optional action. */
+export declare function Alert({ tone, title, description, action, ref, ...rest }: AlertProps): JSX.Element;

package/dist/components/alert/Alert.js

@@ -0,0 +1,67 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/alert/Alert.tsx
+const TONES = {
+	info: {
+		box: "rt:bg-primary-tint rt:border-primary-tint",
+		glyph: "rt:text-primary",
+		icon: "info-circle"
+	},
+	success: {
+		box: "rt:bg-success-tint rt:border-success-border",
+		glyph: "rt:text-success",
+		icon: "check"
+	},
+	warning: {
+		box: "rt:bg-warning-tint rt:border-warning-border",
+		glyph: "rt:text-warning",
+		icon: "alert-triangle"
+	},
+	critical: {
+		box: "rt:bg-alert-critical-background rt:border-alert-critical-border rt:text-alert-critical-foreground",
+		glyph: "rt:text-error-icon",
+		icon: "alert-triangle"
+	}
+};
+/** A message that stays in the page: a tone glyph, an optional title and description, and an optional action. */
+function Alert({ tone = "info", title, description, action, ref, ...rest }) {
+	const t = TONES[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		role: tone === "warning" || tone === "critical" ? "alert" : "status",
+		"data-slot": "alert",
+		...rest,
+		ref,
+		"data-tone": tone,
+		className: cn("rt:flex rt:w-full rt:min-w-0 rt:items-start rt:gap-2 rt:rounded-lg rt:border rt:px-3 rt:py-2 rt:text-left rt:text-foreground", t.box),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("rt:mt-0.5 rt:shrink-0", t.glyph),
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: t.icon,
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:min-w-0 rt:flex-1 rt:flex-col rt:gap-0.5",
+				children: [title ? /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					variant: "b4",
+					tone: tone === "critical" ? "inherit" : "default",
+					children: title
+				}) : null, description ? /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					tone: tone === "critical" ? "inherit" : "subdued",
+					children: description
+				}) : null]
+			}),
+			action ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "alert-action",
+				className: "rt:shrink-0",
+				children: action
+			}) : null
+		]
+	});
+}
+export { Alert };

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

@@ -0,0 +1,2 @@
+import { Alert, AlertProps, AlertTone } from "./Alert.js";
+export { Alert, type AlertProps, type AlertTone };

package/dist/components/alert/index.js

@@ -0,0 +1 @@
+export { Alert } from "./Alert.js";

package/dist/components/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,48 @@
+import { ButtonVariant } from "../button/Button.js";
+import "../button/index.js";
+import { ComponentProps, JSX } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+/**
+ * The root of a confirmation. It holds the open state and renders nothing itself. Pass `open` and `onOpenChange` to
+ * control it, or `defaultOpen` to leave it uncontrolled. Escape closes it; a click outside does not.
+ */
+declare function AlertDialog$1(props: AlertDialog.Root.Props): JSX.Element;
+/** Props of AlertDialogTrigger. */
+export type AlertDialogTriggerProps = Omit<AlertDialog.Trigger.Props, 'className' | 'style'>;
+/** The button that opens the confirmation. */
+export declare function AlertDialogTrigger(props: AlertDialogTriggerProps): JSX.Element;
+/** Props of AlertDialogContent. */
+export type AlertDialogContentProps = Omit<AlertDialog.Popup.Props, 'className' | 'style'>;
+/**
+ * The panel: 480px wide, white, drawn with the ring outline and no shadow, with no scrim behind it. Put
+ * AlertDialogHeader and AlertDialogFooter inside.
+ */
+export declare function AlertDialogContent(props: AlertDialogContentProps): JSX.Element;
+/** Props of AlertDialogHeader. */
+export type AlertDialogHeaderProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The title and description, stacked. */
+export declare function AlertDialogHeader(props: AlertDialogHeaderProps): JSX.Element;
+/** Props of AlertDialogFooter. */
+export type AlertDialogFooterProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The row of actions at the bottom, aligned to the end. */
+export declare function AlertDialogFooter(props: AlertDialogFooterProps): JSX.Element;
+/** Props of AlertDialogTitle. */
+export type AlertDialogTitleProps = Omit<AlertDialog.Title.Props, 'className' | 'style'>;
+/** The question, in the b4 style. It names the dialog for assistive technology. */
+export declare function AlertDialogTitle(props: AlertDialogTitleProps): JSX.Element;
+/** Props of AlertDialogDescription. */
+export type AlertDialogDescriptionProps = Omit<AlertDialog.Description.Props, 'className' | 'style'>;
+/** What will happen, in subdued body text. */
+export declare function AlertDialogDescription(props: AlertDialogDescriptionProps): JSX.Element;
+/** Props of AlertDialogAction. */
+export interface AlertDialogActionProps extends Omit<AlertDialog.Close.Props, 'className' | 'style' | 'render'> {
+  /** The Button look. Defaults to destructive; use main for a confirmation that deletes nothing. */
+  variant?: Extract<ButtonVariant, 'destructive' | 'main'>;
+}
+/** The confirming button. It is the Button's destructive variant and closes the dialog after its onClick runs. */
+export declare function AlertDialogAction({ variant, ...props }: AlertDialogActionProps): JSX.Element;
+/** Props of AlertDialogCancel. */
+export type AlertDialogCancelProps = Omit<AlertDialog.Close.Props, 'className' | 'style' | 'render'>;
+/** The secondary button that closes the dialog without doing anything. */
+export declare function AlertDialogCancel(props: AlertDialogCancelProps): JSX.Element;
+export { AlertDialog$1 as AlertDialog };

package/dist/components/alert-dialog/AlertDialog.js

@@ -0,0 +1,76 @@
+import { Button } from "../button/Button.js";
+import { jsx } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+// src/components/alert-dialog/AlertDialog.tsx
+/**
+* The root of a confirmation. It holds the open state and renders nothing itself. Pass `open` and `onOpenChange` to
+* control it, or `defaultOpen` to leave it uncontrolled. Escape closes it; a click outside does not.
+*/
+function AlertDialog$1(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, { ...props });
+}
+/** The button that opens the confirmation. */
+function AlertDialogTrigger(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+/**
+* The panel: 480px wide, white, drawn with the ring outline and no shadow, with no scrim behind it. Put
+* AlertDialogHeader and AlertDialogFooter inside.
+*/
+function AlertDialogContent(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, { children: /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		"data-slot": "alert-dialog-content",
+		className: "rt:fixed rt:inset-0 rt:z-50 rt:m-auto rt:flex rt:h-fit rt:max-h-full rt:w-120 rt:max-w-full rt:overflow-y-auto rt:flex-col rt:gap-6 rt:rounded-lg rt:bg-popover rt:p-6 rt:text-b3 rt:text-popover-foreground rt:shadow-ring-strong rt:forced-outline rt:focus-visible:focus-ring",
+		...props
+	}) });
+}
+/** The title and description, stacked. */
+function AlertDialogHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: "rt:flex rt:flex-col rt:gap-1",
+		...props
+	});
+}
+/** The row of actions at the bottom, aligned to the end. */
+function AlertDialogFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: "rt:flex rt:items-center rt:justify-end rt:gap-2",
+		...props
+	});
+}
+/** The question, in the b4 style. It names the dialog for assistive technology. */
+function AlertDialogTitle(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: "rt:text-b4 rt:text-foreground-strong",
+		...props
+	});
+}
+/** What will happen, in subdued body text. */
+function AlertDialogDescription(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: "rt:text-b3 rt:text-foreground-subdued",
+		...props
+	});
+}
+/** The confirming button. It is the Button's destructive variant and closes the dialog after its onClick runs. */
+function AlertDialogAction({ variant = "destructive", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		render: /* @__PURE__ */ jsx(Button, { variant }),
+		...props
+	});
+}
+/** The secondary button that closes the dialog without doing anything. */
+function AlertDialogCancel(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		render: /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
+		...props
+	});
+}
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps } from "./AlertDialog.js";
+export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps };

package/dist/components/alert-dialog/index.js

@@ -0,0 +1 @@
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "./AlertDialog.js";

package/dist/components/app-shell/AppShell.d.ts

@@ -0,0 +1,22 @@
+import { JSX, ReactNode } from "react";
+/** The props of AppShell. */
+export type AppShellProps = {
+  /** The side navigation, for example SideNav. It sits at the left of the top bar and the content. */
+  sideNav?: ReactNode;
+  /** The top bar, for example TopBar. It spans the width beside the side nav. */
+  topBar?: ReactNode;
+  /** Whether the side navigation drawer is open on a phone. Set it with onNavOpenChange to control the drawer. */
+  navOpen?: boolean;
+  /** Whether the drawer starts open on a phone when navOpen is not set. Defaults to false. */
+  defaultNavOpen?: boolean;
+  /** Called when the drawer asks to open or close on a phone: the menu button in TopBar, Escape, or choosing a row. */
+  onNavOpenChange?: (open: boolean) => void;
+  /** The page content, centred in a column that is 1152px wide at most. */
+  children?: ReactNode;
+};
+/**
+ * The frame of every page: the side nav at the left, the top bar above and the content below it. It fills the height of its
+ * container, so the app gives it a height and the content scrolls beside the side nav and under the top bar. The parts are slots, so the shell does not depend on their components.
+ * On a phone the side nav is a drawer: the menu button in TopBar opens it, and Escape or choosing a row closes it.
+ */
+export declare function AppShell({ sideNav, topBar, navOpen, defaultNavOpen, onNavOpenChange, children }: AppShellProps): JSX.Element;

package/dist/components/app-shell/AppShell.js

@@ -0,0 +1,39 @@
+import { ShellNavContext } from "./context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+// src/components/app-shell/AppShell.tsx
+/**
+* The frame of every page: the side nav at the left, the top bar above and the content below it. It fills the height of its
+* container, so the app gives it a height and the content scrolls beside the side nav and under the top bar. The parts are slots, so the shell does not depend on their components.
+* On a phone the side nav is a drawer: the menu button in TopBar opens it, and Escape or choosing a row closes it.
+*/
+function AppShell({ sideNav, topBar, navOpen, defaultNavOpen = false, onNavOpenChange, children }) {
+	const [inner, setInner] = useState(defaultNavOpen);
+	const id = useId();
+	const open = navOpen ?? inner;
+	const setOpen = (next) => {
+		if (navOpen === void 0) setInner(next);
+		onNavOpenChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(ShellNavContext, {
+		value: sideNav ? {
+			open,
+			setOpen,
+			id
+		} : void 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "rt:flex rt:h-full rt:bg-page rt:font-sans rt:text-foreground",
+			children: [sideNav, /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:min-w-0 rt:flex-1 rt:flex-col",
+				children: [topBar, /* @__PURE__ */ jsx("main", {
+					className: "rt:min-h-0 rt:flex-1 rt:overflow-y-auto rt:px-3 rt:py-6 rt:md:px-6",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "rt:mx-auto rt:w-full rt:max-w-content",
+						children
+					})
+				})]
+			})]
+		})
+	});
+}
+export { AppShell };

package/dist/components/app-shell/context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+// src/components/app-shell/context.ts
+/** The drawer state of the nearest AppShell that has a side nav, or undefined outside one. */
+const ShellNavContext = createContext(void 0);
+export { ShellNavContext };

package/dist/components/app-shell/index.d.ts

@@ -0,0 +1,2 @@
+import { AppShell, AppShellProps } from "./AppShell.js";
+export { AppShell, type AppShellProps };

package/dist/components/app-shell/index.js

@@ -0,0 +1 @@
+export { AppShell } from "./AppShell.js";

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,22 @@
+import { JSX, Ref } from "react";
+/** The size of an avatar: sm is 24px, default 32px and lg 40px. */
+export type AvatarSize = 'sm' | 'default' | 'lg';
+/** The shape of an avatar: round for a person, square for a store. */
+export type AvatarShape = 'round' | 'square';
+/** The props of Avatar. */
+export type AvatarProps = {
+  /** The full name of the person or store. It is the accessible label, and its first letters are the initials. */
+  name: string;
+  /** The address of a picture. The initials show until it loads and when it fails. */
+  src?: string;
+  /** Round for a person, square for a store. Defaults to round. */
+  shape?: AvatarShape;
+  /** Defaults to default, which is 32px. */
+  size?: AvatarSize;
+  /** Receives the rendered element. */
+  ref?: Ref<HTMLSpanElement>;
+};
+/** The first letters of the first two words of a name, in capitals: "My Store" gives MS, and an empty name gives nothing. */
+export declare function getInitials(name: string): string;
+/** A picture or the initials of a person or a store: round for people, square for stores. */
+export declare function Avatar({ name, src, shape, size, ref }: AvatarProps): JSX.Element;

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,38 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+// src/components/avatar/Avatar.tsx
+/** The first letters of the first two words of a name, in capitals: "My Store" gives MS, and an empty name gives nothing. */
+function getInitials(name) {
+	return name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((word) => Array.from(word)[0]?.toUpperCase() ?? "").join("");
+}
+const SIZE_CLASSES = {
+	sm: "rt:size-6 rt:text-c2",
+	default: "rt:size-8 rt:text-c2",
+	lg: "rt:size-10 rt:text-b2"
+};
+const SHAPE_CLASSES = {
+	round: "rt:rounded-3xl",
+	square: "rt:rounded-md"
+};
+/** A picture or the initials of a person or a store: round for people, square for stores. */
+function Avatar$1({ name, src, shape = "round", size = "default", ref }) {
+	const radius = SHAPE_CLASSES[shape];
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		ref,
+		role: "img",
+		"aria-label": name,
+		"data-shape": shape,
+		"data-size": size,
+		className: cn("rt:relative rt:inline-flex rt:shrink-0 rt:overflow-hidden rt:select-none", SIZE_CLASSES[size], radius),
+		children: [src !== void 0 && /* @__PURE__ */ jsx(Avatar.Image, {
+			src,
+			alt: "",
+			className: "rt:aspect-square rt:size-full rt:object-cover"
+		}), /* @__PURE__ */ jsx(Avatar.Fallback, {
+			className: cn("rt:flex rt:size-full rt:items-center rt:justify-center rt:bg-muted rt:text-foreground-subdued", radius),
+			children: getInitials(name)
+		})]
+	});
+}
+export { Avatar$1 as Avatar, getInitials };

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

@@ -0,0 +1,2 @@
+import { Avatar, AvatarProps, AvatarShape, AvatarSize, getInitials } from "./Avatar.js";
+export { Avatar, type AvatarProps, type AvatarShape, type AvatarSize, getInitials };

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar, getInitials } from "./Avatar.js";

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

@@ -0,0 +1,37 @@
+import { JSX, Ref } from "react";
+import { Button } from "@base-ui/react/button";
+/**
+ * How a button looks. main is the filled accent action, one per view. secondary is a ring on a transparent fill. ghost is
+ * text only with a fill on hover, link is accent text with an underline on hover. destructive is for actions that delete
+ * or remove, and needs a confirm step after it.
+ */
+export type ButtonVariant = 'main' | 'secondary' | 'ghost' | 'link' | 'destructive';
+interface ButtonBaseProps extends Omit<Button.Props, 'focusableWhenDisabled' | 'className' | 'style' | 'render' | 'children' | 'aria-label'> {
+  /** The look of the button. Defaults to main. */
+  variant?: ButtonVariant;
+  /** Gives the button back to the caller's ref. */
+  ref?: Ref<HTMLButtonElement>;
+}
+interface LabelledButtonProps extends ButtonBaseProps {
+  /** Draws a 28px square for one icon. Needs aria-label, because there is no text to name the button. */
+  iconOnly?: false;
+  /** The label, optionally with an Icon beside it. */
+  children?: React.ReactNode;
+}
+interface IconButtonProps extends ButtonBaseProps {
+  /** Draws a 28px square for one icon. Needs aria-label, because there is no text to name the button. */
+  iconOnly: true;
+  /** The accessible name of an icon-only button. */
+  'aria-label': string;
+  /** One Icon. */
+  children: React.ReactNode;
+}
+/** Props of Button: a labelled button, or an icon-only one that has to carry an aria-label. */
+export type ButtonProps = LabelledButtonProps | IconButtonProps;
+/**
+ * The design system's 28px button in five looks: main, secondary, ghost, link and destructive. Hover and pressed change
+ * the fill only, disabled is 50% opacity and the colours fade in 120ms. Put an Icon beside the label, or use iconOnly with
+ * an aria-label. It has no size prop: 28px is the only height.
+ */
+declare function Button$1({ variant, iconOnly, type, ...props }: ButtonProps): JSX.Element;
+export { Button$1 as Button };

package/dist/components/button/Button.js

@@ -0,0 +1,41 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+// src/components/button/Button.tsx
+const buttonVariants = cva("rt:inline-flex rt:h-7 rt:shrink-0 rt:items-center rt:justify-center rt:rounded-md rt:border-0 rt:text-btn rt:whitespace-nowrap rt:select-none rt:cursor-pointer rt:transition-colors rt:focus-visible:focus-ring rt:disabled:pointer-events-none rt:disabled:opacity-50 rt:data-disabled:pointer-events-none rt:data-disabled:opacity-50", {
+	variants: {
+		variant: {
+			main: "rt:gap-1.5 rt:bg-primary rt:text-primary-foreground rt:hover:bg-primary-hover rt:active:bg-primary-hover",
+			secondary: "rt:gap-1 rt:bg-secondary rt:text-secondary-foreground rt:shadow-ring-strong rt:forced-outline rt:hover:bg-primary-tint rt:active:bg-primary-tint",
+			ghost: "rt:gap-1 rt:bg-transparent rt:text-secondary-foreground rt:hover:bg-muted rt:active:bg-muted",
+			link: "rt:gap-1 rt:bg-transparent rt:text-primary rt:hover:underline rt:active:underline",
+			destructive: "rt:gap-1 rt:bg-destructive-fill rt:text-destructive-foreground rt:shadow-ring-destructive rt:forced-outline rt:hover:bg-destructive-hover rt:active:bg-destructive-hover"
+		},
+		iconOnly: {
+			false: "rt:px-2 rt:py-1",
+			true: "rt:w-7 rt:p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "main",
+		iconOnly: false
+	}
+});
+/**
+* The design system's 28px button in five looks: main, secondary, ghost, link and destructive. Hover and pressed change
+* the fill only, disabled is 50% opacity and the colours fade in 120ms. Put an Icon beside the label, or use iconOnly with
+* an aria-label. It has no size prop: 28px is the only height.
+*/
+function Button$1({ variant = "main", iconOnly = false, type = "button", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "button",
+		type,
+		className: cn(buttonVariants({
+			variant,
+			iconOnly
+		})),
+		...props
+	});
+}
+export { Button$1 as Button };

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

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, ButtonVariant } from "./Button.js";
+export { Button, type ButtonProps, type ButtonVariant };

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { Button } from "./Button.js";

package/dist/components/calendar/Calendar.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from "react";
+import { DayPickerProps } from "react-day-picker";
+/** Omit for each member of a union, so the selection modes of DayPicker stay a discriminated union. */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+/**
+ * Props of Calendar: DayPicker's props (mode, selected, onSelect, defaultMonth, month, today, disabled, startMonth,
+ * endMonth, numberOfMonths, showOutsideDays, locale, labels and the rest), without the ones that restyle it, replace its
+ * parts, change how a date is written or animate it: the calendar is drawn by the design system, dates are written by
+ * the format module and motion is a colour fade only.
+ */
+export type CalendarProps = DistributiveOmit<DayPickerProps, 'className' | 'style' | 'classNames' | 'styles' | 'modifiersClassNames' | 'modifiersStyles' | 'components' | 'formatters' | 'captionLayout' | 'animate' | 'showWeekNumber'>;
+/**
+ * A month grid to pick a day or a range of days, drawn by the design system: 28px days with a 6px radius, today in the
+ * accent ink, the selected day filled with the accent, a range as accent ends on a tinted band, disabled days at 50% and
+ * the days of the months around it in the muted ink. Every day is named in the format module's date order (28/10/2026).
+ * Arrow keys move between days and the previous and next buttons between months. It has no fill of its own, so it sits
+ * in a popover or a container as drawn.
+ */
+export declare function Calendar({ showOutsideDays, labels, ...props }: CalendarProps): JSX.Element;
+export {};

package/dist/components/calendar/Calendar.js

@@ -0,0 +1,119 @@
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { FORMAT, formatDate } from "../../lib/format.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cva } from "class-variance-authority";
+import { DayPicker } from "react-day-picker";
+// src/components/calendar/Calendar.tsx
+const dayButtonVariants = cva("rt:flex rt:size-7 rt:items-center rt:justify-center rt:border-0 rt:p-0 rt:select-none rt:cursor-pointer rt:transition-colors rt:focus-visible:focus-ring rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
+	variants: { look: {
+		plain: "rt:rounded-md rt:bg-transparent rt:text-btn rt:text-foreground rt:hover:bg-muted rt:active:bg-muted",
+		today: "rt:rounded-md rt:bg-transparent rt:text-c3 rt:text-primary rt:hover:bg-muted rt:active:bg-muted",
+		outside: "rt:rounded-md rt:bg-transparent rt:text-btn rt:text-muted-foreground rt:hover:bg-muted rt:active:bg-muted",
+		selected: "rt:rounded-md rt:bg-primary rt:text-btn rt:text-primary-foreground rt:hover:bg-primary-hover rt:active:bg-primary-hover",
+		"range-middle": "rt:rounded-none rt:group-first:rounded-l-md rt:group-last:rounded-r-md rt:bg-primary-tint rt:text-btn rt:text-foreground"
+	} },
+	defaultVariants: { look: "plain" }
+});
+/** The look of a day from DayPicker's modifiers: a selection wins over outside, and outside over today. */
+function dayLook(modifiers) {
+	if (modifiers.range_middle) return "range-middle";
+	if (modifiers.selected) return "selected";
+	if (modifiers.outside) return "outside";
+	if (modifiers.today) return "today";
+	return "plain";
+}
+/**
+* The number in a day's button, written as the date pattern writes the day (two digits for DD), so the visible text is a
+* word of the button's name (WCAG 2.5.3): 03 in 03/10/2026.
+*/
+function formatDay(date) {
+	const day = String(date.getDate());
+	return FORMAT.datePattern.includes("DD") ? day.padStart(2, "0") : day;
+}
+/** A day as an accessible name, in the format module's date order: "Today, 28/10/2026, selected". */
+function labelDay(date, modifiers) {
+	return `${modifiers?.today ? "Today, " : ""}${formatDate(date)}${modifiers?.selected ? ", selected" : ""}`;
+}
+/**
+* The button of one day. DayPicker moves focus between days, so the button takes focus when its day is focused. Its look
+* comes after DayPicker's props, so it replaces DayPicker's class name.
+*/
+function CalendarDayButton({ day, modifiers, ...props }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		...props,
+		"data-day": formatDate(day.date),
+		className: dayButtonVariants({ look: dayLook(modifiers) })
+	});
+}
+/** A month navigation button: the ghost Button with a chevron, disabled at the first or last allowed month. */
+function navButton(icon) {
+	return function CalendarNavButton({ onClick, tabIndex, "aria-label": label, "aria-disabled": ariaDisabled }) {
+		return /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			iconOnly: true,
+			"aria-label": label ?? "",
+			disabled: ariaDisabled === true || ariaDisabled === "true",
+			tabIndex,
+			onClick,
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				size: 12
+			})
+		});
+	};
+}
+const PreviousMonthButton = navButton("chevron-left");
+const NextMonthButton = navButton("chevron-right");
+const CLASS_NAMES = {
+	root: "rt:relative rt:w-fit rt:p-2 rt:text-foreground",
+	months: "rt:relative rt:flex rt:flex-col rt:gap-4 rt:md:flex-row",
+	month: "rt:flex rt:w-full rt:flex-col rt:gap-2",
+	nav: "rt:absolute rt:inset-x-0 rt:top-0 rt:z-10 rt:flex rt:w-full rt:items-center rt:justify-between rt:gap-1",
+	month_caption: "rt:flex rt:h-7 rt:w-full rt:items-center rt:justify-center rt:px-7",
+	caption_label: "rt:text-c3 rt:text-foreground rt:select-none",
+	month_grid: "rt:w-full rt:border-collapse",
+	weekdays: "rt:flex",
+	weekday: "rt:flex rt:w-7 rt:items-center rt:justify-center rt:text-c1 rt:text-muted-foreground rt:select-none",
+	week: "rt:mt-1 rt:flex rt:w-full",
+	day: "rt:relative rt:size-7 rt:p-0 rt:text-center rt:select-none rt:first:rounded-l-md rt:last:rounded-r-md rt:group",
+	range_start: "rt:rounded-l-md rt:bg-primary-tint",
+	range_end: "rt:rounded-r-md rt:bg-primary-tint",
+	hidden: "rt:invisible",
+	footer: "rt:pt-2 rt:text-c1 rt:text-muted-foreground"
+};
+/**
+* A month grid to pick a day or a range of days, drawn by the design system: 28px days with a 6px radius, today in the
+* accent ink, the selected day filled with the accent, a range as accent ends on a tinted band, disabled days at 50% and
+* the days of the months around it in the muted ink. Every day is named in the format module's date order (28/10/2026).
+* Arrow keys move between days and the previous and next buttons between months. It has no fill of its own, so it sits
+* in a popover or a container as drawn.
+*/
+function Calendar({ showOutsideDays = true, labels, ...props }) {
+	return /* @__PURE__ */ jsx(DayPicker, {
+		"data-slot": "calendar",
+		showOutsideDays,
+		classNames: CLASS_NAMES,
+		components: {
+			DayButton: CalendarDayButton,
+			PreviousMonthButton,
+			NextMonthButton
+		},
+		formatters: { formatDay },
+		labels: {
+			labelDayButton: labelDay,
+			labelGridcell: labelDay,
+			labelPrevious: () => "Previous month",
+			labelNext: () => "Next month",
+			...labels
+		},
+		...props
+	});
+}
+export { Calendar };

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

@@ -0,0 +1,2 @@
+import { Calendar, CalendarProps } from "./Calendar.js";
+export { Calendar, type CalendarProps };

package/dist/components/calendar/index.js

@@ -0,0 +1 @@
+export { Calendar } from "./Calendar.js";

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

@@ -0,0 +1,33 @@
+import { HTMLAttributes, JSX } from "react";
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
+/** The props of Card: the HTML attributes of its div, except className and style. */
+export type CardProps = DivProps;
+/** The props of CardHeader: the HTML attributes of its div, except className and style. */
+export type CardHeaderProps = DivProps;
+/** The props of CardTitle: the HTML attributes of its heading, except className and style, with the heading level. */
+export type CardTitleProps = Omit<HTMLAttributes<HTMLHeadingElement>, 'className' | 'style'> & {
+  /** The heading element. Defaults to h3. */
+  as?: 'h2' | 'h3' | 'h4' | 'div';
+};
+/** The props of CardDescription: the HTML attributes of its paragraph, except className and style. */
+export type CardDescriptionProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'className' | 'style'>;
+/** The props of CardContent: the HTML attributes of its div, except className and style. */
+export type CardContentProps = DivProps;
+/** The props of CardFooter: the HTML attributes of its div, except className and style. */
+export type CardFooterProps = DivProps;
+/**
+ * A container for a panel of content: a 1px hairline border on white, no shadow and 24px of padding. The design system
+ * has no cards, so this is only the hairline container.
+ */
+export declare function Card(props: CardProps): JSX.Element;
+/** The top of a card: its title and description, stacked. */
+export declare function CardHeader(props: CardHeaderProps): JSX.Element;
+/** The title of a card, set in the B4 text style. */
+export declare function CardTitle({ as: Tag, ...rest }: CardTitleProps): JSX.Element;
+/** A line under the title that says what the card holds. */
+export declare function CardDescription(props: CardDescriptionProps): JSX.Element;
+/** The body of a card. */
+export declare function CardContent(props: CardContentProps): JSX.Element;
+/** The foot of a card, a row for its actions. */
+export declare function CardFooter(props: CardFooterProps): JSX.Element;
+export {};