@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/button-group.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { type ButtonProps } from "./button.js";
+/**
+ * Merged-edge styling for any row of controls. Corner rounding is done with logical
+ * properties (`rounded-s` / `rounded-e`), so the group is RTL-safe.
+ */
+export declare const buttonGroupVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | null | undefined;
+    attached?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type GroupSize = "xs" | "sm" | "md" | "lg";
+export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, Omit<VariantProps<typeof buttonGroupVariants>, "attached" | "orientation"> {
+    /** Merged borders (default). `false` keeps a small gap between the buttons. */
+    attached?: boolean;
+    orientation?: "horizontal" | "vertical";
+    /** Default variant for direct Button / IconButton children that don't set one. */
+    variant?: ButtonProps["variant"];
+    /** Default size for direct Button / IconButton children that don't set one. */
+    size?: GroupSize;
+}
+/**
+ * Related buttons merged into one control: split "Save ▾", pager arrows, an editor toolbar,
+ * a search field + "Go". `role="group"` — give it an `aria-label`. Every button stays its own
+ * tab stop. Server-compatible.
+ *
+ * ```tsx
+ * <ButtonGroup aria-label="Pagination" size="sm">
+ *   <IconButton label="Previous page"><ChevronLeft /></IconButton>
+ *   <ButtonGroupText>21–40 of 340</ButtonGroupText>
+ *   <IconButton label="Next page"><ChevronRight /></IconButton>
+ * </ButtonGroup>
+ * ```
+ *
+ * For a selected state (view switch, text alignment) use `ToggleGroup`; for a form value use
+ * `RadioGroup variant="segmented"`.
+ */
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface ButtonGroupSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: "horizontal" | "vertical";
+}
+/**
+ * Hairline between two attached buttons that share a fill (a primary split button), where
+ * the merged border would otherwise disappear.
+ */
+export declare const ButtonGroupSeparator: React.ForwardRefExoticComponent<ButtonGroupSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export interface ButtonGroupTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: GroupSize;
+}
+/** A static segment inside a group: "21–40 of 340", a unit, a prefix. */
+export declare const ButtonGroupText: React.ForwardRefExoticComponent<ButtonGroupTextProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/button-group.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { Button, IconButton } from "./button.js";
+/**
+ * Merged-edge styling for any row of controls. Corner rounding is done with logical
+ * properties (`rounded-s` / `rounded-e`), so the group is RTL-safe.
+ */
+export const buttonGroupVariants = cva("relative isolate inline-flex w-fit max-w-full", {
+    variants: {
+        orientation: {
+            horizontal: "flex-row items-stretch",
+            vertical: "flex-col items-stretch",
+        },
+        attached: {
+            true: "[&>*:focus-visible]:z-10 [&>*:focus-within]:z-10 [&>*:hover]:z-[1] [&>[data-slot=button]]:shadow-none!",
+            false: "gap-2",
+        },
+    },
+    compoundVariants: [
+        {
+            orientation: "horizontal",
+            attached: true,
+            className: "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:last-child)]:rounded-e-none [&>*:not(:first-child)]:-ms-px [&>[data-slot=button-group-separator]+*]:ms-0",
+        },
+        {
+            orientation: "vertical",
+            attached: true,
+            className: "[&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:first-child)]:-mt-px [&>[data-slot=button-group-separator]+*]:mt-0",
+        },
+    ],
+    defaultVariants: { orientation: "horizontal", attached: true },
+});
+/**
+ * Related buttons merged into one control: split "Save ▾", pager arrows, an editor toolbar,
+ * a search field + "Go". `role="group"` — give it an `aria-label`. Every button stays its own
+ * tab stop. Server-compatible.
+ *
+ * ```tsx
+ * <ButtonGroup aria-label="Pagination" size="sm">
+ *   <IconButton label="Previous page"><ChevronLeft /></IconButton>
+ *   <ButtonGroupText>21–40 of 340</ButtonGroupText>
+ *   <IconButton label="Next page"><ChevronRight /></IconButton>
+ * </ButtonGroup>
+ * ```
+ *
+ * For a selected state (view switch, text alignment) use `ToggleGroup`; for a form value use
+ * `RadioGroup variant="segmented"`.
+ */
+export const ButtonGroup = React.forwardRef(function ButtonGroup({ attached = true, orientation = "horizontal", variant, size, className, children, ...props }, ref) {
+    const content = variant || size
+        ? React.Children.map(children, (child) => {
+            if (!React.isValidElement(child))
+                return child;
+            if (child.type !== Button && child.type !== IconButton)
+                return child;
+            const p = child.props;
+            return React.cloneElement(child, {
+                variant: p.variant ?? variant,
+                size: p.size ?? size,
+            });
+        })
+        : children;
+    return (_jsx("div", { ref: ref, role: "group", "data-slot": "button-group", "data-orientation": orientation, "data-attached": attached ? "" : undefined, "data-variant": variant, className: cn(buttonGroupVariants({ orientation, attached }), variant === "primary" && "[--group-sep:color-mix(in_srgb,var(--accent-fg)_22%,transparent)]", className), ...props, children: content }));
+});
+/**
+ * Hairline between two attached buttons that share a fill (a primary split button), where
+ * the merged border would otherwise disappear.
+ */
+export const ButtonGroupSeparator = React.forwardRef(function ButtonGroupSeparator({ orientation = "vertical", className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "aria-hidden": true, "data-slot": "button-group-separator", className: cn("relative z-20 shrink-0 self-stretch bg-(--group-sep,var(--field-border))", orientation === "vertical" ? "w-px" : "h-px", className), ...props }));
+});
+/** A static segment inside a group: "21–40 of 340", a unit, a prefix. */
+export const ButtonGroupText = React.forwardRef(function ButtonGroupText({ size = "md", className, ...props }, ref) {
+    return (_jsx("span", { ref: ref, "data-slot": "button-group-text", className: cn("inline-flex shrink-0 items-center whitespace-nowrap border border-field-border bg-surface-2 font-medium tabular text-fg-muted [&_svg]:size-4", size === "xs" ? "h-7 rounded-ui-sm px-2.5 text-xs" : size === "sm" ? "h-8 rounded-ui-sm px-3 text-[13px]" : size === "lg" ? "h-12 rounded-ui px-5 text-[15px]" : "h-(--control-h) rounded-ui px-3.5 text-sm", className), ...props }));
+});

package/dist/components/button.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { type TooltipContentProps } from "./tooltip.js";
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "danger" | "ghost" | "solid" | "primary" | "secondary" | "soft" | "danger-ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "icon" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    block?: boolean | null | undefined;
+    pill?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render as the child element (e.g. Next <Link>), keeping the styles. */
+    asChild?: boolean;
+    /** Spinner, `aria-busy` and click lock. */
+    loading?: boolean;
+    /** Text shown (and announced) while loading, e.g. "Saving…". Replaces the label. */
+    loadingText?: string;
+    /**
+     * `"inline"` (default): the spinner sits before the label (replacing a leading icon).
+     * `"replace"`: the label is hidden and the spinner centred — the width never changes.
+     */
+    loadingMode?: "inline" | "replace";
+}
+/**
+ * Starts an action. One `primary` per screen; the rest `secondary` or `ghost`.
+ *
+ * ```tsx
+ * <Button variant="primary" loading={saving} loadingText="Publishing…">Publish</Button>
+ * <Button asChild><Link href="/posts/new">New post</Link></Button>
+ * ```
+ *
+ * Defaults to `type="button"` (no accidental form submits). With `asChild` + `disabled`/`loading`
+ * the element gets `aria-disabled`, leaves the tab order and ignores clicks.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface IconButtonProps extends Omit<ButtonProps, "size" | "aria-label" | "loadingText" | "loadingMode"> {
+    /** Accessible name — required for icon-only controls. Also shown as the tooltip. */
+    label: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * Tooltip text. Default: `label`. A string shows different text (the accessible name stays `label`);
+     * `false` turns the tooltip off and uses the native `title` instead.
+     * Inside a `TooltipProvider` (App shell ships one) the label is a Tooltip; without one it falls back to `title`.
+     */
+    tooltip?: boolean | string;
+    /** Side the tooltip opens on. Default `"top"`. */
+    tooltipSide?: TooltipContentProps["side"];
+    /** Shortcut hint in the tooltip, e.g. `"mod+e"`. */
+    shortcut?: string | string[];
+}
+/**
+ * Icon-only button. `label` is required: it becomes the accessible name and the tooltip.
+ *
+ * ```tsx
+ * <IconButton label="Delete post" variant="danger-ghost"><Trash2 /></IconButton>
+ * <IconButton label="Edit" shortcut="mod+e"><Pencil /></IconButton>
+ * ```
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { Spinner } from "./spinner.js";
+import { IconButtonTooltip } from "./tooltip.js";
+export const buttonVariants = cva([
+    "relative inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap font-medium",
+    "transition-[background-color,border-color,box-shadow,color,filter,opacity] duration-150 focus-ring",
+    "disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45",
+    "motion-safe:active:translate-y-px [&_svg]:shrink-0",
+    // loading: the spinner replaces a leading icon instead of adding a second one
+    "[&[data-loading]>[data-slot=spinner]+svg]:hidden",
+], {
+    variants: {
+        variant: {
+            /** The one loud action on a screen. */
+            primary: "bg-accent text-accent-fg font-semibold shadow-[inset_0_1px_0_rgb(255_255_255/0.35),0_1px_2px_rgb(0_0_0/0.12)] ring-1 ring-[color-mix(in_srgb,var(--fg)_10%,transparent)] hover:brightness-[1.04]",
+            /** Default: a calm action on a surface. */
+            secondary: "border border-field-border bg-field text-fg shadow-[0_1px_1px_rgb(0_0_0/0.04)] hover:border-field-border-hover hover:bg-hover glass:border-field-border-hover",
+            ghost: "text-fg hover:bg-hover",
+            soft: "bg-accent-soft text-accent-ink hover:brightness-95",
+            /** Dark, typographic action for decisive steps ("Publish"). */
+            solid: "bg-fg text-scene hover:opacity-90",
+            danger: "bg-danger-solid text-white shadow-sm hover:brightness-110",
+            "danger-ghost": "text-danger hover:bg-[color-mix(in_srgb,var(--danger)_10%,transparent)]",
+            link: "h-auto! p-0! text-accent-ink underline-offset-4 hover:underline",
+        },
+        size: {
+            xs: "h-7 gap-1 rounded-ui-sm px-2.5 text-xs [&_svg]:size-3.5",
+            sm: "h-8 gap-1.5 rounded-ui-sm px-3 text-[13px] [&_svg]:size-3.5",
+            md: "h-(--control-h) gap-2 rounded-ui px-4 text-sm [&_svg]:size-4",
+            lg: "h-12 gap-2.5 rounded-ui px-6 text-[15px] [&_svg]:size-[18px]",
+            /** Hero / website CTA. */
+            xl: "h-14 gap-3 rounded-ui px-8 text-base [&_svg]:size-5",
+            "icon-xs": "size-7 rounded-ui-sm [&_svg]:size-3.5",
+            "icon-sm": "size-8 rounded-ui-sm [&_svg]:size-4",
+            icon: "size-(--control-h) rounded-ui [&_svg]:size-[18px]",
+            "icon-lg": "size-12 rounded-ui [&_svg]:size-5",
+        },
+        block: { true: "w-full" },
+        pill: { true: "rounded-full!" },
+    },
+    defaultVariants: { variant: "secondary", size: "md" },
+});
+const spinnerSize = (size) => (size === "xs" || size === "sm" || size === "icon-xs" ? "xs" : size === "lg" || size === "xl" || size === "icon-lg" ? "md" : "sm");
+/**
+ * Starts an action. One `primary` per screen; the rest `secondary` or `ghost`.
+ *
+ * ```tsx
+ * <Button variant="primary" loading={saving} loadingText="Publishing…">Publish</Button>
+ * <Button asChild><Link href="/posts/new">New post</Link></Button>
+ * ```
+ *
+ * Defaults to `type="button"` (no accidental form submits). With `asChild` + `disabled`/`loading`
+ * the element gets `aria-disabled`, leaves the tab order and ignores clicks.
+ */
+export const Button = React.forwardRef(function Button({ className, variant, size, block, pill, asChild, loading, loadingText, loadingMode = "inline", disabled, children, type, onClick, ...props }, ref) {
+    const classes = cn(buttonVariants({ variant, size, block, pill }), className);
+    const state = {
+        "data-slot": "button",
+        "data-variant": variant ?? "secondary",
+        "data-size": size ?? "md",
+        "data-loading": loading ? "" : undefined,
+        "aria-busy": loading || undefined,
+    };
+    const spinner = _jsx(Spinner, { size: spinnerSize(size), className: loadingMode === "replace" ? "absolute" : undefined });
+    if (asChild) {
+        const inert = disabled || loading;
+        const slotProps = {
+            ref,
+            className: classes,
+            ...state,
+            "aria-disabled": inert || undefined,
+            tabIndex: inert ? -1 : undefined,
+            // No wrapper function here, so Button stays usable from server components. While inert the
+            // element leaves the tab order and `aria-disabled:pointer-events-none` blocks pointer clicks.
+            onClick: inert ? undefined : onClick,
+            ...props,
+        };
+        // Slot needs the spinner and the Slottable as direct children (no fragment).
+        return loading ? (_jsxs(Slot.Root, { ...slotProps, children: [spinner, _jsx(Slot.Slottable, { children: children })] })) : (_jsx(Slot.Root, { ...slotProps, children: children }));
+    }
+    let content = children;
+    if (loading && loadingText)
+        content = loadingMode === "replace" ? _jsxs(_Fragment, { children: [_jsx("span", { className: "invisible", children: children }), _jsx("span", { className: "sr-only", children: loadingText })] }) : loadingText;
+    // opacity-0 (not visibility:hidden) keeps the label in the accessibility tree, so the busy button keeps its name.
+    else if (loading && loadingMode === "replace")
+        content = _jsx("span", { className: "inline-flex items-center gap-[inherit] opacity-0", children: children });
+    return (_jsxs("button", { ref: ref, type: type ?? "button", className: classes, disabled: disabled || loading, onClick: onClick, ...state, ...props, children: [loading ? spinner : null, content] }));
+});
+const iconSize = { xs: "icon-xs", sm: "icon-sm", md: "icon", lg: "icon-lg" };
+/**
+ * Icon-only button. `label` is required: it becomes the accessible name and the tooltip.
+ *
+ * ```tsx
+ * <IconButton label="Delete post" variant="danger-ghost"><Trash2 /></IconButton>
+ * <IconButton label="Edit" shortcut="mod+e"><Pencil /></IconButton>
+ * ```
+ */
+export const IconButton = React.forwardRef(function IconButton({ label, size = "md", variant = "ghost", title, loading, tooltip = true, tooltipSide, shortcut, children, ...props }, ref) {
+    if (tooltip === false) {
+        return (_jsx(Button, { ref: ref, "aria-label": label, title: title ?? label, variant: variant, size: iconSize[size], loading: loading, loadingMode: "replace", ...props, children: children }));
+    }
+    return (_jsx(IconButtonTooltip, { label: typeof tooltip === "string" ? tooltip : label, side: tooltipSide, shortcut: shortcut, children: _jsx(Button, { ref: ref, "aria-label": label, ...(title !== undefined ? { title } : null), variant: variant, size: iconSize[size], loading: loading, loadingMode: "replace", ...props, children: children }) }));
+});

package/dist/components/calendar.d.ts

@@ -0,0 +1,240 @@
+import * as React from "react";
+import { type DayPickerProps, type Matcher, type Modifiers } from "react-day-picker";
+import { type IsoDateRange, type IsoDateString } from "../lib/date.js";
+import type { Holiday, HolidayProvider } from "../locale-data/core/types.js";
+declare const calendarLabels: {
+    prevMonth: string;
+    nextMonth: string;
+    prevYear: string;
+    nextYear: string;
+    selectMonth: string;
+    selectYear: string;
+    nav: string;
+    today: string;
+    todayDay: string;
+    selectedDay: string;
+    weekNumber: string;
+    weekColumn: string;
+    weekColumnShort: string;
+    holiday: string;
+    halfDay: string;
+    weekend: string;
+    more: string;
+    loading: string;
+    slots: string;
+    noSlots: string;
+    slotsError: string;
+    retry: string;
+    slotsLeft: string;
+    unavailable: string;
+};
+export type CalendarLabels = typeof calendarLabels;
+/** A day matcher: any react-day-picker matcher, or a `YYYY-MM-DD` string. */
+export type DayMatcher = Matcher | IsoDateString;
+/** Turns string / matcher input into react-day-picker matchers (min/max become `before`/`after`). */
+export declare function toDayMatchers(options: {
+    min?: IsoDateString;
+    max?: IsoDateString;
+    disabledDays?: DayMatcher | DayMatcher[];
+}): Matcher[];
+/** react-day-picker `weekStartsOn` (0 = Sunday) and `firstWeekContainsDate` of a locale. */
+export declare function useCalendarWeek(locale?: string): {
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    firstWeekContainsDate: 1 | 4;
+    /** ISO weekdays (1 = Monday … 7 = Sunday) of the weekend. */
+    weekend: number[];
+};
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+export type CalendarGridSize = "sm" | "md" | "lg";
+interface CalendarGridOwnProps {
+    /** Cell size: sm = 32px, md = `--control-h` (density axis), lg = 76px cells with a content area. */
+    size?: CalendarGridSize;
+    /** Content under the day number: dots, a count, a price. */
+    renderDayExtra?: (date: Date, modifiers: Modifiers) => React.ReactNode;
+    /** Extra words appended to a day's accessible name ("Republic Day, 2 scheduled posts"). */
+    describeDay?: (date: Date, modifiers: Modifiers) => string | undefined;
+    /** Native tooltip of a day (holiday names). */
+    dayTitle?: (date: Date, modifiers: Modifiers) => string | undefined;
+    /** Mark the locale's weekend days with `data-weekend`. Default `true`. */
+    markWeekends?: boolean;
+    /** Built-in strings (`calendar` namespace). */
+    labels?: Partial<CalendarLabels>;
+    /** react-day-picker's own label functions (advanced). */
+    ariaLabels?: DayPickerProps["labels"];
+}
+/**
+ * The shared month grid behind Calendar, Date picker and Date range picker: react-day-picker v9
+ * styled with tokens, with locale-aware week start (`getWeekInfo`), weekend marks, localized
+ * labels, and stable `data-*` hooks (`data-today`, `data-selected`, `data-range-start|middle|end`,
+ * `data-disabled`, `data-outside`, `data-weekend`, `data-holiday`).
+ *
+ * All react-day-picker props pass through (`mode`, `selected`, `onSelect`, `modifiers`,
+ * `numberOfMonths`, `captionLayout`, `showWeekNumber`…). Dates here are `Date` objects; the
+ * higher-level components take `YYYY-MM-DD` strings.
+ *
+ * ```tsx
+ * <CalendarGrid mode="single" selected={day} onSelect={setDay} />
+ * ```
+ */
+export type CalendarGridProps = DistributiveOmit<DayPickerProps, "labels"> & CalendarGridOwnProps;
+/** react-day-picker styled with tokens. See `CalendarGridProps`. */
+export declare function CalendarGrid(props: CalendarGridProps): React.JSX.Element;
+export type CalendarTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+/** Something on a day: a scheduled post, an absence, "3 slots left". */
+export interface CalendarMarker {
+    label: string;
+    tone?: CalendarTone;
+    /** Shown as a number in `lg` cells and summed for density. */
+    count?: number;
+}
+export interface CalendarDayInfo {
+    iso: IsoDateString;
+    isToday: boolean;
+    isWeekend: boolean;
+    outside: boolean;
+    selected: boolean;
+    disabled: boolean;
+    holidays: Holiday[];
+    markers: CalendarMarker[];
+}
+export interface CalendarLegendItem {
+    label: string;
+    tone?: CalendarTone;
+    /** `"dot"` (default), `"holiday"` (tinted cell) or `"today"` (accent bar). */
+    kind?: "dot" | "holiday" | "today";
+}
+type CalendarSelectionProps = {
+    /** Selection mode. Default `"single"`. */
+    mode?: "single";
+    value?: IsoDateString | null;
+    defaultValue?: IsoDateString | null;
+    onValueChange?: (value: IsoDateString | null) => void;
+} | {
+    mode: "multiple";
+    value?: IsoDateString[];
+    defaultValue?: IsoDateString[];
+    onValueChange?: (value: IsoDateString[]) => void;
+} | {
+    mode: "range";
+    value?: IsoDateRange | null;
+    defaultValue?: IsoDateRange | null;
+    onValueChange?: (value: IsoDateRange | null) => void;
+} | {
+    /** Display only: no selection. */
+    mode: "none";
+    value?: undefined;
+    defaultValue?: undefined;
+    onValueChange?: undefined;
+};
+interface CalendarBaseProps {
+    /** Visible months: 1, 2, 3, or 12 (year view with compact cells). Default 1. */
+    months?: 1 | 2 | 3 | 12;
+    /** Visible month (`YYYY-MM` or any date in it), controlled. */
+    month?: string;
+    /** Initial visible month. Default: the month of the value, else today. */
+    defaultMonth?: string;
+    /** Called with `YYYY-MM-01` of the first visible month. */
+    onMonthChange?: (month: IsoDateString) => void;
+    /** Called with the visible window, e.g. to fetch events for it. */
+    onVisibleRangeChange?: (range: {
+        start: IsoDateString;
+        end: IsoDateString;
+    }) => void;
+    /** Earliest selectable date. */
+    min?: IsoDateString;
+    /** Latest selectable date. */
+    max?: IsoDateString;
+    /** Days that cannot be picked (unavailable, fully booked). */
+    disabledDays?: DayMatcher | DayMatcher[];
+    /** `true`: a selected day cannot be cleared by clicking it again (single mode). */
+    required?: boolean;
+    /** Week numbers in the first column (locale week rules). */
+    showWeekNumbers?: boolean;
+    /** Holiday data. Default: the active locale's pack (`tr` → Turkish public holidays); `false` hides them. */
+    holidays?: HolidayProvider | HolidayProvider[] | false;
+    /** Holiday region filter (ISO 3166-2). */
+    holidayRegion?: string;
+    /** Per-day markers, keyed by `YYYY-MM-DD`. */
+    markers?: Record<IsoDateString, CalendarMarker | CalendarMarker[]>;
+    /** Custom content under the day number (replaces the marker dots). */
+    renderDay?: (date: Date, info: CalendarDayInfo) => React.ReactNode;
+    /** Cell size. sm 32px, md `--control-h`, lg 76px with a content area. Default `"md"` (`"sm"` in the year view). */
+    size?: CalendarGridSize;
+    /** `"card"` wraps the calendar in a surface. Default `"plain"`. */
+    variant?: "plain" | "card";
+    /** Header with title, previous / next and Today. Default `true`. */
+    header?: boolean;
+    /** Extra content at the end of the header (filters, a view switch). */
+    headerAction?: React.ReactNode;
+    /** Legend under the grid. Holidays in view are added automatically. */
+    legend?: CalendarLegendItem[] | boolean;
+    /** Placeholder dots while the visible range is loading. */
+    loading?: boolean;
+    /** Week start override (0 = Sunday … 6). Default from the locale. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Content under the grid (pickers put Clear / Apply here). */
+    footer?: React.ReactNode;
+    /** Extra react-day-picker props for the grid. */
+    gridProps?: Partial<CalendarGridOwnProps> & Omit<Partial<DayPickerProps>, "mode" | "selected" | "onSelect" | "labels">;
+    className?: string;
+    id?: string;
+    "aria-label"?: string;
+    labels?: Partial<CalendarLabels>;
+}
+export type CalendarProps = CalendarBaseProps & CalendarSelectionProps;
+/**
+ * Standalone month, multi-month or year calendar with per-day content: marker dots, holidays,
+ * counts, availability. Values are `YYYY-MM-DD` strings. Week start, weekend and month names
+ * follow the locale; holidays come from the locale pack (Turkish public holidays for `tr`).
+ *
+ * ```tsx
+ * <Calendar
+ *   value={day}
+ *   onValueChange={setDay}
+ *   markers={{ "2026-11-12": { label: "2 scheduled posts", tone: "accent", count: 2 } }}
+ * />
+ * <Calendar months={12} size="sm" markers={density} />
+ * ```
+ */
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
+export interface CalendarLegendProps extends React.HTMLAttributes<HTMLUListElement> {
+    items: CalendarLegendItem[];
+    labels?: Partial<CalendarLabels>;
+}
+/** Key for the marks on a Calendar (dot tones, holidays, today). */
+export declare const CalendarLegend: React.ForwardRefExoticComponent<CalendarLegendProps & React.RefAttributes<HTMLUListElement>>;
+export interface CalendarSlot {
+    /** `"HH:mm"` (24h). The value reported on select. */
+    start: string;
+    end?: string;
+    available: boolean;
+    /** Extra text ("1 left", "$45"). */
+    label?: string;
+}
+export interface CalendarSlotsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    slots: CalendarSlot[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (start: string | null) => void;
+    /** The day the slots belong to (`YYYY-MM-DD`), shown as the heading. */
+    day?: IsoDateString | null;
+    loading?: boolean;
+    /** Error text; shows a retry button when `onRetry` is set. */
+    error?: React.ReactNode;
+    onRetry?: () => void;
+    /** Display hour cycle. Default from the locale. */
+    hourCycle?: 12 | 24;
+    /** Columns of the slot grid. Default 3. */
+    columns?: 2 | 3 | 4;
+    labels?: Partial<CalendarLabels>;
+}
+/**
+ * Time slots for the selected day (booking). A `radiogroup` with roving focus: arrows move,
+ * Space / Enter selects. Unavailable slots are shown struck through and skipped.
+ *
+ * ```tsx
+ * <CalendarSlots day={day} slots={slots} value={time} onValueChange={setTime} />
+ * ```
+ */
+export declare const CalendarSlots: React.ForwardRefExoticComponent<CalendarSlotsProps & React.RefAttributes<HTMLDivElement>>;
+export {};