@journ/nude 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Journ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# @journ/nude
+
+Unstyled, accessible React primitives for the web. They own behavior, state, focus and ARIA, and leave every visual decision to you.
+
+Built on Radix UI, vaul, cmdk, sonner, Embla and TanStack Table. Nothing here sets a class, a color or a size. `@journ/lotus` and `@journ/bloom` are style layers over these parts.
+
+## Install
+
+```sh
+pnpm add @journ/nude react react-dom
+```
+
+## Usage
+
+```tsx
+import { Button } from '@journ/nude/button'
+import { Dialog } from '@journ/nude/dialog'
+
+function Example() {
+	return (
+		<Dialog.Root>
+			<Dialog.Trigger asChild>
+				<Button>Delete</Button>
+			</Dialog.Trigger>
+			<Dialog.Content>
+				<Dialog.Title>Delete file</Dialog.Title>
+				<Dialog.Description>This cannot be undone.</Dialog.Description>
+				<Dialog.Close>Cancel</Dialog.Close>
+			</Dialog.Content>
+		</Dialog.Root>
+	)
+}
+```
+
+Every component has its own entry (`@journ/nude/button`, `@journ/nude/dialog`, ...). `@journ/nude` exports all of them. The individual parts behind a namespace live in `@journ/nude/<name>-parts`.
+
+## Styling contract
+
+- Every part sets a `data-slot` and passes `className`, `style` and `ref` to its element. State is exposed as `data-*` and `aria-*` attributes (`data-state`, `data-active`, `data-status`, `aria-pressed`, ...).
+- A part that renders inner elements takes `classNames`, one key per inner element. State-dependent keys are functions:
+
+  ```tsx
+  <Calendar.Days className='grid' classNames={{ day: state => (state === 'selected' ? 'on' : 'off') }} />
+  ```
+
+- A composite that renders other components takes `components` and defaults to the nude ones. `DataTable.Root` takes `components`, `classNames` and `icons` once for all of its parts; `MultipleSelector.Tags` and `TagInput.Tags` take `components={{ Tag }}`.
+- Nude renders no icons. Parts that usually hold one (`Select.Trigger`, `Select.Item`, step buttons, indicators) take it as `icon`, `indicator` or `children`.
+- The only inline styles are the ones a behavior needs: clipping in `AnimatedSize`, the transform in `Progress.Indicator`, `order` and `z-index` in `Stack.Item`, and visually hidden labels.
+
+## Composition rules
+
+- Compound components: `Card.Root`, `Card.Header`, `Card.Title`. Consumers pick the parts they need.
+- Pass `children`, not `renderX` props. No boolean props like `showFooter`.
+- React 19 style: `ref` is a regular prop, no `forwardRef`.
+- Shared state lives in a provider only when parts truly share it. Context is `{ state, actions, meta }`: `X.Provider` takes all three, so the state can come from anywhere, and `X.Root` is the default provider that owns local state with `value`, `defaultValue` and `onValueChange`. Neither renders DOM.
+- A `useX` hook is exported next to the namespace (`useCalendar`, `useCombobox`, `useDataTable`, ...), so custom UI inside the provider can read state and call actions.
+- Parts that must live inside a root throw a clear error when used alone (`createRequiredContext` from `@journ/lift`).
+- Client-only parts live in `*-parts.tsx` with `'use client'`. The sibling file without the directive builds the namespace object.
+- `src/lib/part.tsx`: `part(element, slot, defaults)` builds a part that only tags its element. Use it for every part without logic.

package/dist/accordion-parts.d.ts

@@ -0,0 +1,15 @@
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import { ComponentPropsWithRef } from "react";
+//#region src/accordion-parts.d.ts
+declare const Root: import("react").ForwardRefExoticComponent<(RadixAccordion.AccordionMultipleProps | RadixAccordion.AccordionSingleProps) & import("react").RefAttributes<HTMLDivElement>>;
+declare const Item: (props: RadixAccordion.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+declare const Content: (props: RadixAccordion.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+type TriggerProps = ComponentPropsWithRef<typeof RadixAccordion.Trigger> & {
+  classNames?: {
+    header?: string;
+  };
+};
+/** Wrapped in a heading, as the accordion pattern requires. */
+declare const Trigger: ({ classNames, ...props }: TriggerProps) => import("react").JSX.Element;
+//#endregion
+export { Content, Item, Root, Trigger };

package/dist/accordion-parts.js

@@ -0,0 +1,19 @@
+"use client";
+import { part } from "./lib/part.js";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import { jsx } from "react/jsx-runtime";
+//#region src/accordion-parts.tsx
+const Root = RadixAccordion.Root;
+const Item = part(RadixAccordion.Item, "accordion-item");
+const Content = part(RadixAccordion.Content, "accordion-content");
+/** Wrapped in a heading, as the accordion pattern requires. */
+const Trigger = ({ classNames, ...props }) => /* @__PURE__ */ jsx(RadixAccordion.Header, {
+	"data-slot": "accordion-header",
+	className: classNames?.header,
+	children: /* @__PURE__ */ jsx(RadixAccordion.Trigger, {
+		"data-slot": "accordion-trigger",
+		...props
+	})
+});
+//#endregion
+export { Content, Item, Root, Trigger };

package/dist/accordion.d.ts

@@ -0,0 +1,10 @@
+import { Trigger } from "./accordion-parts.js";
+//#region src/accordion.d.ts
+declare const Accordion: {
+  Root: import("react").ForwardRefExoticComponent<(import("@radix-ui/react-accordion").AccordionMultipleProps | import("@radix-ui/react-accordion").AccordionSingleProps) & import("react").RefAttributes<HTMLDivElement>>;
+  Item: (props: import("@radix-ui/react-accordion").AccordionItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  Trigger: typeof Trigger;
+  Content: (props: import("@radix-ui/react-accordion").AccordionContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+};
+//#endregion
+export { Accordion };

package/dist/accordion.js

@@ -0,0 +1,10 @@
+import { Content, Item, Root, Trigger } from "./accordion-parts.js";
+//#region src/accordion.tsx
+const Accordion = {
+	Root,
+	Item,
+	Trigger,
+	Content
+};
+//#endregion
+export { Accordion };

package/dist/alert-dialog-parts.d.ts

@@ -0,0 +1,13 @@
+import { ModalContentProps } from "./lib/modal-content.js";
+import { Actions } from "./lib/modal-parts.js";
+import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
+//#region src/alert-dialog-parts.d.ts
+declare const Root: import("react").FC<RadixAlertDialog.AlertDialogProps>;
+declare const Trigger: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Cancel: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Action: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Content: ({ classNames, overlayRef, ...props }: ModalContentProps<typeof RadixAlertDialog>) => import("react").JSX.Element;
+declare const Title: (props: RadixAlertDialog.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>) => import("react").ReactNode;
+declare const Description: (props: RadixAlertDialog.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>) => import("react").ReactNode;
+//#endregion
+export { Action, Actions, Cancel, Content, Description, Root, Title, Trigger };

package/dist/alert-dialog-parts.js

@@ -0,0 +1,15 @@
+"use client";
+import { part } from "./lib/part.js";
+import { createModalContent } from "./lib/modal-content.js";
+import { Actions } from "./lib/modal-parts.js";
+import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
+//#region src/alert-dialog-parts.tsx
+const Root = RadixAlertDialog.Root;
+const Trigger = RadixAlertDialog.Trigger;
+const Cancel = RadixAlertDialog.Cancel;
+const Action = RadixAlertDialog.Action;
+const Content = createModalContent(RadixAlertDialog, "alert-dialog");
+const Title = part(RadixAlertDialog.Title, "alert-dialog-title");
+const Description = part(RadixAlertDialog.Description, "alert-dialog-description");
+//#endregion
+export { Action, Actions, Cancel, Content, Description, Root, Title, Trigger };

package/dist/alert-dialog.d.ts

@@ -0,0 +1,14 @@
+import { ModalContentProps } from "./lib/modal-content.js";
+//#region src/alert-dialog.d.ts
+declare const AlertDialog: {
+  Root: import("react").FC<import("@radix-ui/react-alert-dialog").AlertDialogProps>;
+  Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Content: ({ classNames, overlayRef, ...props }: ModalContentProps<typeof import("@radix-ui/react-alert-dialog")>) => import("react").JSX.Element;
+  Title: (props: import("@radix-ui/react-alert-dialog").AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>) => import("react").ReactNode;
+  Description: (props: import("@radix-ui/react-alert-dialog").AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>) => import("react").ReactNode;
+  Actions: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+  Cancel: import("react").ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Action: import("react").ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+//#endregion
+export { AlertDialog };

package/dist/alert-dialog.js

@@ -0,0 +1,15 @@
+import { Actions } from "./lib/modal-parts.js";
+import { Action, Cancel, Content, Description, Root, Title, Trigger } from "./alert-dialog-parts.js";
+//#region src/alert-dialog.tsx
+const AlertDialog = {
+	Root,
+	Trigger,
+	Content,
+	Title,
+	Description,
+	Actions,
+	Cancel,
+	Action
+};
+//#endregion
+export { AlertDialog };

package/dist/alert.d.ts

@@ -0,0 +1,11 @@
+//#region src/alert.d.ts
+declare const Alert: {
+  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+  Icon: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
+  Body: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+  Title: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
+  Description: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
+  Actions: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+};
+//#endregion
+export { Alert };

package/dist/alert.js

@@ -0,0 +1,12 @@
+import { part } from "./lib/part.js";
+//#region src/alert.tsx
+const Alert = {
+	Root: part("div", "alert", { role: "alert" }),
+	Icon: part("span", "alert-icon", { "aria-hidden": true }),
+	Body: part("div", "alert-body"),
+	Title: part("p", "alert-title"),
+	Description: part("p", "alert-description"),
+	Actions: part("div", "alert-actions")
+};
+//#endregion
+export { Alert };

package/dist/animated-size.d.ts

@@ -0,0 +1,18 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/animated-size.d.ts
+type AnimatedSizeProps = ComponentPropsWithRef<'div'> & {
+  /** Animate the width as the content's width changes. */
+  width?: boolean;
+  /** Animate the height as the content's height changes. */
+  height?: boolean;
+  classNames?: {
+    content?: string;
+  };
+};
+/**
+ * Follows the size of its content: when the children grow or shrink, the box
+ * glides to the new size. The first measure and reduced motion jump straight there.
+ */
+declare const AnimatedSize: ({ width, height, classNames, style, children, ...props }: AnimatedSizeProps) => import("react").JSX.Element;
+//#endregion
+export { AnimatedSize, type AnimatedSizeProps };

package/dist/animated-size.js

@@ -0,0 +1,55 @@
+"use client";
+import { useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { prefersReducedMotion } from "@journ/lift";
+import { animate } from "animejs";
+//#region src/animated-size.tsx
+/**
+* Follows the size of its content: when the children grow or shrink, the box
+* glides to the new size. The first measure and reduced motion jump straight there.
+*/
+const AnimatedSize = ({ width = false, height = true, classNames, style, children, ...props }) => {
+	const outer = useRef(null);
+	const inner = useRef(null);
+	const measured = useRef(false);
+	useLayoutEffect(() => {
+		const box = outer.current;
+		const content = inner.current;
+		if (!box || !content) return;
+		const observer = new ResizeObserver(([entry]) => {
+			if (!entry) return;
+			const sizes = {};
+			if (width) sizes.width = [box.offsetWidth, entry.contentRect.width];
+			if (height) sizes.height = [box.offsetHeight, entry.contentRect.height];
+			if (!measured.current || prefersReducedMotion()) {
+				measured.current = true;
+				for (const [key, [, to]] of Object.entries(sizes)) box.style[key] = `${to}px`;
+				return;
+			}
+			animate(box, {
+				...sizes,
+				duration: 250,
+				ease: "outExpo"
+			});
+		});
+		observer.observe(content);
+		return () => observer.disconnect();
+	}, [width, height]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: outer,
+		"data-slot": "animated-size",
+		...props,
+		style: {
+			overflow: "hidden",
+			...style
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref: inner,
+			className: classNames?.content,
+			style: width ? { width: "fit-content" } : void 0,
+			children
+		})
+	});
+};
+//#endregion
+export { AnimatedSize };

package/dist/avatar-parts.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef } from "react";
+import * as RadixAvatar from "@radix-ui/react-avatar";
+//#region src/avatar-parts.d.ts
+declare const Root: (props: RadixAvatar.AvatarProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+declare const Fallback: (props: RadixAvatar.AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+declare const Image: ({ alt, ...props }: ComponentPropsWithRef<typeof RadixAvatar.Image> & {
+  alt: string;
+}) => import("react").JSX.Element;
+//#endregion
+export { Fallback, Image, Root };

package/dist/avatar-parts.js

@@ -0,0 +1,14 @@
+"use client";
+import { part } from "./lib/part.js";
+import { jsx } from "react/jsx-runtime";
+import * as RadixAvatar from "@radix-ui/react-avatar";
+//#region src/avatar-parts.tsx
+const Root = part(RadixAvatar.Root, "avatar");
+const Fallback = part(RadixAvatar.Fallback, "avatar-fallback");
+const Image = ({ alt, ...props }) => /* @__PURE__ */ jsx(RadixAvatar.Image, {
+	"data-slot": "avatar-image",
+	alt,
+	...props
+});
+//#endregion
+export { Fallback, Image, Root };

package/dist/avatar.d.ts

@@ -0,0 +1,9 @@
+import { Image } from "./avatar-parts.js";
+//#region src/avatar.d.ts
+declare const Avatar: {
+  Root: (props: import("@radix-ui/react-avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+  Image: typeof Image;
+  Fallback: (props: import("@radix-ui/react-avatar").AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+};
+//#endregion
+export { Avatar };

package/dist/avatar.js

@@ -0,0 +1,9 @@
+import { Fallback, Image, Root } from "./avatar-parts.js";
+//#region src/avatar.tsx
+const Avatar = {
+	Root,
+	Image,
+	Fallback
+};
+//#endregion
+export { Avatar };

package/dist/badge.d.ts

@@ -0,0 +1,4 @@
+//#region src/badge.d.ts
+declare const Badge: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
+//#endregion
+export { Badge };

package/dist/badge.js

@@ -0,0 +1,5 @@
+import { part } from "./lib/part.js";
+//#region src/badge.tsx
+const Badge = part("span", "badge");
+//#endregion
+export { Badge };

package/dist/breadcrumbs.d.ts

@@ -0,0 +1,11 @@
+//#region src/breadcrumbs.d.ts
+declare const Breadcrumbs: {
+  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
+  List: (props: import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>) => import("react").ReactNode;
+  Item: (props: import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>) => import("react").ReactNode;
+  Link: (props: import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => import("react").ReactNode;
+  Page: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
+  Separator: (props: import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>) => import("react").ReactNode;
+};
+//#endregion
+export { Breadcrumbs };

package/dist/breadcrumbs.js

@@ -0,0 +1,15 @@
+import { part } from "./lib/part.js";
+//#region src/breadcrumbs.tsx
+const Breadcrumbs = {
+	Root: part("nav", "breadcrumbs", { "aria-label": "Breadcrumb" }),
+	List: part("ol", "breadcrumbs-list"),
+	Item: part("li", "breadcrumbs-item"),
+	Link: part("a", "breadcrumbs-link"),
+	Page: part("span", "breadcrumbs-page", { "aria-current": "page" }),
+	Separator: part("li", "breadcrumbs-separator", {
+		role: "presentation",
+		"aria-hidden": true
+	})
+};
+//#endregion
+export { Breadcrumbs };

package/dist/bulk-bar.d.ts

@@ -0,0 +1,8 @@
+//#region src/bulk-bar.d.ts
+declare const BulkBar: {
+  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+  Count: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
+  Actions: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+};
+//#endregion
+export { BulkBar };

package/dist/bulk-bar.js

@@ -0,0 +1,9 @@
+import { part } from "./lib/part.js";
+//#region src/bulk-bar.tsx
+const BulkBar = {
+	Root: part("div", "bulk-bar", { role: "toolbar" }),
+	Count: part("p", "bulk-bar-count", { "aria-live": "polite" }),
+	Actions: part("div", "bulk-bar-actions")
+};
+//#endregion
+export { BulkBar };

package/dist/button.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/button.d.ts
+type ButtonProps = {
+  /** Marks the button busy and ignores presses until the work is done. */
+  pending?: boolean;
+} & (({
+  href?: never;
+} & ComponentPropsWithRef<'button'>) | ({
+  href: string;
+} & ComponentPropsWithRef<'a'>));
+declare const Button: ({ pending, ...props }: ButtonProps) => import("react").JSX.Element;
+//#endregion
+export { Button, type ButtonProps };

package/dist/button.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/button.tsx
+const Button = ({ pending = false, ...props }) => {
+	const busy = {
+		"aria-busy": pending || void 0,
+		"data-pending": pending || void 0,
+		onClick: pending ? (event) => event.preventDefault() : props.onClick
+	};
+	return typeof props.href === "string" ? /* @__PURE__ */ jsx("a", {
+		"data-slot": "button",
+		...props,
+		...busy
+	}) : /* @__PURE__ */ jsx("button", {
+		"data-slot": "button",
+		type: "button",
+		...props,
+		...busy
+	});
+};
+//#endregion
+export { Button };

package/dist/calendar-parts.d.ts

@@ -0,0 +1,81 @@
+import { IconButtonProps } from "./icon-button.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/calendar-parts.d.ts
+type CalendarView = 'days' | 'months' | 'years';
+type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/** A range being picked: `to` stays null until the second click. */
+type CalendarRange = {
+  from: Date;
+  to: Date | null;
+};
+type CalendarState = {
+  selected: Date | null;
+  /** When set, days show as a range instead of a single selection. */
+  range?: CalendarRange | null;
+  month: Date;
+  view: CalendarView;
+};
+type CalendarActions = {
+  select: (date: Date) => void;
+  showMonth: (month: Date) => void;
+  showView: (view: CalendarView) => void;
+  previous: () => void;
+  next: () => void;
+};
+type CalendarMeta = {
+  locale?: string;
+  weekStartsOn: Weekday;
+};
+type CalendarContextValue = {
+  state: CalendarState;
+  actions: CalendarActions;
+  meta: CalendarMeta;
+};
+/** What a day, month or year cell is right now. Also set as its `data-state`. */
+type CalendarCellState = 'idle' | 'today' | 'selected' | 'inRange';
+declare const YEAR_PAGE_SIZE = 12;
+declare const useCalendar: any;
+type ProviderProps = CalendarContextValue & {
+  children?: ReactNode;
+};
+declare const Provider: ({ state, actions, meta, children }: ProviderProps) => import("react").JSX.Element;
+/** Month, view and paging shared by every calendar-based picker. */
+declare const useCalendarNavigation: (initialMonth: Date, initialView?: CalendarView) => {
+  month: any;
+  view: CalendarView;
+  navigation: {
+    showMonth: (next: Date) => void;
+    showView: import("react").Dispatch<import("react").SetStateAction<CalendarView>>;
+    previous: () => void;
+    next: () => void;
+  };
+};
+type RootProps = {
+  value?: Date | null;
+  defaultValue?: Date | null;
+  onValueChange?: (date: Date) => void;
+  defaultMonth?: Date;
+  locale?: string;
+  weekStartsOn?: Weekday;
+  children?: ReactNode;
+};
+declare const Root: ({ value, defaultValue, onValueChange, defaultMonth, locale, weekStartsOn, children }: RootProps) => import("react").JSX.Element;
+declare const Frame: (props: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+declare const Header: (props: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+declare const Heading: ({ onClick, ...props }: Omit<ComponentPropsWithRef<'button'>, 'children'>) => import("react").JSX.Element;
+declare const Previous: (props: IconButtonProps) => import("react").JSX.Element;
+declare const Next: (props: IconButtonProps) => import("react").JSX.Element;
+type GridProps<Slot extends string> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+  classNames?: Partial<Record<Slot, (state: CalendarCellState) => string>>;
+};
+type WeekdaysProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+  classNames?: {
+    weekday?: string;
+  };
+};
+declare const Weekdays: ({ classNames, ...props }: WeekdaysProps) => import("react").JSX.Element | null;
+declare const Days: ({ classNames, ...props }: GridProps<'day'>) => import("react").JSX.Element | null;
+declare const Months: ({ classNames, ...props }: GridProps<'month'>) => import("react").JSX.Element | null;
+declare const Years: ({ classNames, ...props }: GridProps<'year'>) => import("react").JSX.Element | null;
+//#endregion
+export { type CalendarActions, type CalendarCellState, type CalendarContextValue, type CalendarMeta, type CalendarRange, type CalendarState, type CalendarView, Days, Frame, Header, Heading, Months, Next, Previous, Provider, Root, type RootProps, type Weekday, Weekdays, YEAR_PAGE_SIZE, Years, useCalendar, useCalendarNavigation };