@journ/bloom 0.1.1

package/dist/markdown.js

@@ -0,0 +1,70 @@
+import { cn } from "./lib/cn.js";
+import { displayTitle } from "./lib/text-styles.js";
+import { jsx } from "react/jsx-runtime";
+import { Markdown as Markdown$1 } from "@journ/nude/markdown";
+//#region src/markdown.tsx
+const components = {
+	h1: ({ className, ...props }) => /* @__PURE__ */ jsx("h1", {
+		...props,
+		className: cn(displayTitle, "mt-6 mb-2 text-3xl/9", className)
+	}),
+	h2: ({ className, ...props }) => /* @__PURE__ */ jsx("h2", {
+		...props,
+		className: cn(displayTitle, "mt-5 mb-2", className)
+	}),
+	h3: ({ className, ...props }) => /* @__PURE__ */ jsx("h3", {
+		...props,
+		className: cn("mt-4 mb-1 text-base/6 font-medium", className)
+	}),
+	p: ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
+		...props,
+		className: cn("my-3 text-sm/6 text-pretty", className)
+	}),
+	a: ({ className, ...props }) => /* @__PURE__ */ jsx("a", {
+		...props,
+		className: cn("rounded-sm underline decoration-current/40 underline-offset-4 outline-none hover:decoration-current focus-visible:outline-2 focus-visible:outline-bloom-sky", className)
+	}),
+	ul: ({ className, ...props }) => /* @__PURE__ */ jsx("ul", {
+		...props,
+		className: cn("my-3 list-disc pl-5 text-sm/6 marker:opacity-50", className)
+	}),
+	ol: ({ className, ...props }) => /* @__PURE__ */ jsx("ol", {
+		...props,
+		className: cn("my-3 list-decimal pl-5 text-sm/6 marker:opacity-50", className)
+	}),
+	li: ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+		...props,
+		className: cn("my-1", className)
+	}),
+	blockquote: ({ className, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+		...props,
+		className: cn("my-3 border-l-2 border-current/30 pl-4 text-sm/6 opacity-80", className)
+	}),
+	hr: ({ className, ...props }) => /* @__PURE__ */ jsx("hr", {
+		...props,
+		className: cn("my-6 border-0 border-t border-current/15", className)
+	}),
+	code: ({ className, ...props }) => /* @__PURE__ */ jsx("code", {
+		...props,
+		className: cn("bg-current/10 px-1 py-0.5 font-mono text-xs", className)
+	}),
+	pre: ({ className, ...props }) => /* @__PURE__ */ jsx("pre", {
+		...props,
+		className: cn("scrollbar-bloom my-3 overflow-x-auto border border-current/10 bg-current/5 p-4 font-mono text-xs/5 [&_code]:bg-transparent [&_code]:p-0", className)
+	}),
+	strong: ({ className, ...props }) => /* @__PURE__ */ jsx("strong", {
+		...props,
+		className: cn("font-semibold", className)
+	})
+};
+/** `className` goes to the wrapper, which keeps the element margins from stacking with a parent's gap. */
+const Markdown = ({ components: overrides, className, ...props }) => /* @__PURE__ */ jsx(Markdown$1, {
+	...props,
+	components: {
+		...components,
+		...overrides
+	},
+	className: cn("[&>:first-child]:mt-0 [&>:last-child]:mb-0", className)
+});
+//#endregion
+export { Markdown };

package/dist/message.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/message.d.ts
+type RootProps = ComponentPropsWithRef<'div'> & {
+  from?: 'agent' | 'user';
+};
+declare const Root: ({ from, className, ...props }: RootProps) => import("react").JSX.Element;
+declare const Bubble: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+declare const Highlight: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
+declare const Message: {
+  Root: typeof Root;
+  Bubble: typeof Bubble;
+  Highlight: typeof Highlight;
+};
+//#endregion
+export { Message };

package/dist/message.js

@@ -0,0 +1,25 @@
+import { cn } from "./lib/cn.js";
+import { accentText, dim } from "./lib/theme.js";
+import { jsx } from "react/jsx-runtime";
+import { Message as Message$1 } from "@journ/nude/message";
+//#region src/message.tsx
+const Root = ({ from = "agent", className, ...props }) => /* @__PURE__ */ jsx(Message$1.Root, {
+	from,
+	...props,
+	className: cn("group flex items-start gap-3 data-[from=user]:justify-end", className)
+});
+const Bubble = ({ className, ...props }) => /* @__PURE__ */ jsx(Message$1.Bubble, {
+	...props,
+	className: cn(dim, "rounded-3xl px-4 py-2.5 text-sm/6 group-data-[from=user]:border group-data-[from=user]:border-current/15 group-data-[from=user]:bg-transparent", className)
+});
+const Highlight = ({ className, ...props }) => /* @__PURE__ */ jsx(Message$1.Highlight, {
+	...props,
+	className: cn(dim, accentText, "px-1 font-mono text-xs", className)
+});
+const Message = {
+	Root,
+	Bubble,
+	Highlight
+};
+//#endregion
+export { Message };

package/dist/month-picker-parts.d.ts

@@ -0,0 +1,2 @@
+import { Root, RootProps } from "@journ/nude/month-picker-parts";
+export { Root, type RootProps };

package/dist/month-picker-parts.js

@@ -0,0 +1,3 @@
+"use client";
+import { Root } from "@journ/nude/month-picker-parts";
+export { Root };

package/dist/month-picker.d.ts

@@ -0,0 +1,15 @@
+import { Frame, Header, Heading, Months, Next, Previous, Years } from "./calendar-parts.js";
+import { RootProps } from "./month-picker-parts.js";
+//#region src/month-picker.d.ts
+declare const MonthPicker: {
+  Root: any;
+  Frame: typeof Frame;
+  Header: typeof Header;
+  Heading: typeof Heading;
+  Previous: typeof Previous;
+  Next: typeof Next;
+  Months: typeof Months;
+  Years: typeof Years;
+};
+//#endregion
+export { MonthPicker, type RootProps as MonthPickerProps };

package/dist/month-picker.js

@@ -0,0 +1,15 @@
+import { Frame, Header, Heading, Months, Next, Previous, Years } from "./calendar-parts.js";
+import { Root } from "./month-picker-parts.js";
+//#region src/month-picker.tsx
+const MonthPicker = {
+	Root,
+	Frame,
+	Header,
+	Heading,
+	Previous,
+	Next,
+	Months,
+	Years
+};
+//#endregion
+export { MonthPicker };

package/dist/month-stepper-parts.d.ts

@@ -0,0 +1,11 @@
+import { IconButtonProps } from "./icon-button.js";
+import { ComponentPropsWithRef } from "react";
+import * as Nude from "@journ/nude/month-stepper-parts";
+//#region src/month-stepper-parts.d.ts
+/** Always reports the first day of the month. */
+declare const Root: ({ className, ...props }: Nude.RootProps) => import("react").JSX.Element;
+declare const Previous: ({ tone, size, className, children, ...props }: IconButtonProps) => import("react").JSX.Element;
+declare const Next: ({ tone, size, className, children, ...props }: IconButtonProps) => import("react").JSX.Element;
+declare const Label: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
+//#endregion
+export { Label, Next, Previous, Root };

package/dist/month-stepper-parts.js

@@ -0,0 +1,37 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { displayHeading } from "./lib/text-styles.js";
+import { stepButton } from "./step-button.js";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import * as Nude from "@journ/nude/month-stepper-parts";
+//#region src/month-stepper-parts.tsx
+/** Always reports the first day of the month. */
+const Root = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Root, {
+	...props,
+	className: cn("inline-flex items-center gap-2", className)
+});
+const Previous = ({ tone, size, className, children, ...props }) => /* @__PURE__ */ jsx(Nude.Previous, {
+	...props,
+	...stepButton(ChevronLeft, {
+		tone,
+		size,
+		className,
+		children
+	})
+});
+const Next = ({ tone, size, className, children, ...props }) => /* @__PURE__ */ jsx(Nude.Next, {
+	...props,
+	...stepButton(ChevronRight, {
+		tone,
+		size,
+		className,
+		children
+	})
+});
+const Label = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Label, {
+	...props,
+	className: cn(displayHeading, "min-w-36 text-center tabular-nums", className)
+});
+//#endregion
+export { Label, Next, Previous, Root };

package/dist/month-stepper.d.ts

@@ -0,0 +1,10 @@
+import { Label, Next, Previous, Root } from "./month-stepper-parts.js";
+//#region src/month-stepper.d.ts
+declare const MonthStepper: {
+  Root: typeof Root;
+  Previous: typeof Previous;
+  Label: typeof Label;
+  Next: typeof Next;
+};
+//#endregion
+export { MonthStepper };

package/dist/month-stepper.js

@@ -0,0 +1,10 @@
+import { Label, Next, Previous, Root } from "./month-stepper-parts.js";
+//#region src/month-stepper.tsx
+const MonthStepper = {
+	Root,
+	Previous,
+	Label,
+	Next
+};
+//#endregion
+export { MonthStepper };

package/dist/multiple-selector-parts.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps } from "./button.js";
+import { Empty, Frame, Group, Input as Input$1, ItemIndicator, List } from "./combobox-parts.js";
+import { ComponentPropsWithRef } from "react";
+import * as Nude from "@journ/nude/multiple-selector-parts";
+import { RootProps } from "@journ/nude/multiple-selector-parts";
+//#region src/multiple-selector-parts.d.ts
+declare const Root: any, useMultipleSelector: any;
+declare const Trigger: ({ tone, className, children, ...props }: import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+  tone?: ButtonProps['tone'];
+}) => import("react").JSX.Element, Value: ({ className, ...props }: {
+  className?: string;
+}) => import("react").JSX.Element;
+declare const Tags: () => import("react").JSX.Element;
+declare const Input: (props: ComponentPropsWithRef<typeof Input$1>) => import("react").JSX.Element;
+declare const Item: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Item>) => import("react").JSX.Element;
+declare const Create: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Create>) => import("react").JSX.Element;
+//#endregion
+export { Create, Empty, Frame, Group, Input, Item, ItemIndicator, List, Root, type RootProps, Tags, Trigger, Value, useMultipleSelector };

package/dist/multiple-selector-parts.js

@@ -0,0 +1,28 @@
+"use client";
+import { Chip } from "./chip.js";
+import { stylePicker } from "./lib/picker.js";
+import { Empty, Frame, Group, Input as Input$1, ItemIndicator, List, option } from "./combobox-parts.js";
+import { jsx } from "react/jsx-runtime";
+import * as Nude from "@journ/nude/multiple-selector-parts";
+//#region src/multiple-selector-parts.tsx
+const { Root, useMultipleSelector } = Nude;
+const { Trigger, Value } = stylePicker(Nude);
+const Tags = () => /* @__PURE__ */ jsx(Nude.Tags, { components: { Tag: Chip.Tag } });
+const Input = (props) => {
+	const { search, setSearch } = useMultipleSelector();
+	return /* @__PURE__ */ jsx(Input$1, {
+		...props,
+		value: search,
+		onValueChange: setSearch
+	});
+};
+const Item = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Item, {
+	...props,
+	className: option(className)
+});
+const Create = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Create, {
+	...props,
+	className: option(className)
+});
+//#endregion
+export { Create, Empty, Frame, Group, Input, Item, ItemIndicator, List, Root, Tags, Trigger, Value, useMultipleSelector };

package/dist/multiple-selector.d.ts

@@ -0,0 +1,28 @@
+import { ButtonProps } from "./button.js";
+import { Empty, Frame, Group, ItemIndicator, List } from "./combobox-parts.js";
+import { Content, Description, Title } from "./drawer-parts.js";
+import { Create, Input, Item, RootProps, Tags, useMultipleSelector } from "./multiple-selector-parts.js";
+//#region src/multiple-selector.d.ts
+declare const MultipleSelector: {
+  Root: any;
+  Trigger: ({ tone, className, children, ...props }: import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    tone?: ButtonProps['tone'];
+  }) => import("react").JSX.Element;
+  Value: ({ className, ...props }: {
+    className?: string;
+  }) => import("react").JSX.Element;
+  Tags: typeof Tags;
+  Content: typeof Content;
+  Title: typeof Title;
+  Description: typeof Description;
+  Frame: typeof Frame;
+  Input: typeof Input;
+  List: typeof List;
+  Empty: typeof Empty;
+  Group: typeof Group;
+  Item: typeof Item;
+  ItemIndicator: typeof ItemIndicator;
+  Create: typeof Create;
+};
+//#endregion
+export { MultipleSelector, type RootProps as MultipleSelectorProps, useMultipleSelector };

package/dist/multiple-selector.js

@@ -0,0 +1,23 @@
+import { Empty, Frame, Group, ItemIndicator, List } from "./combobox-parts.js";
+import { Content, Description, Title } from "./drawer-parts.js";
+import { Create, Input, Item, Root, Tags, Trigger, Value, useMultipleSelector } from "./multiple-selector-parts.js";
+//#region src/multiple-selector.tsx
+const MultipleSelector = {
+	Root,
+	Trigger,
+	Value,
+	Tags,
+	Content,
+	Title,
+	Description,
+	Frame,
+	Input,
+	List,
+	Empty,
+	Group,
+	Item,
+	ItemIndicator,
+	Create
+};
+//#endregion
+export { MultipleSelector, useMultipleSelector };

package/dist/nav-bar.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/nav-bar.d.ts
+declare const Root: ({ className, ...props }: ComponentPropsWithRef<'nav'>) => import("react").JSX.Element;
+declare const Item: ({ className, children, ...props }: ComponentPropsWithRef<'a'>) => import("react").JSX.Element;
+declare const NavBar: {
+  Root: typeof Root;
+  Item: typeof Item;
+};
+//#endregion
+export { NavBar };

package/dist/nav-bar.js

@@ -0,0 +1,23 @@
+import { cn } from "./lib/cn.js";
+import { interactive } from "./lib/interactive.js";
+import { selectedWhenCurrent } from "./lib/text-styles.js";
+import { foreground, raised } from "./lib/theme.js";
+import { TouchTarget } from "./touch-target.js";
+import { jsx } from "react/jsx-runtime";
+import { NavBar as NavBar$1 } from "@journ/nude/nav-bar";
+//#region src/nav-bar.tsx
+const Root = ({ className, ...props }) => /* @__PURE__ */ jsx(NavBar$1.Root, {
+	...props,
+	className: cn(raised, "flex items-center justify-between p-1", className)
+});
+const Item = ({ className, children, ...props }) => /* @__PURE__ */ jsx(NavBar$1.Item, {
+	...props,
+	className: cn(interactive, foreground, "grid size-10 place-items-center [&>svg]:size-5", selectedWhenCurrent, className),
+	children: /* @__PURE__ */ jsx(TouchTarget, { children })
+});
+const NavBar = {
+	Root,
+	Item
+};
+//#endregion
+export { NavBar };

package/dist/navigation-menu-parts.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef } from "react";
+import * as Nude from "@journ/nude/navigation-menu-parts";
+//#region src/navigation-menu-parts.d.ts
+/** Includes the viewport, the panel that Content opens into. */
+declare const Root: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Root>, 'classNames'>) => import("react").JSX.Element;
+declare const List: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.List>) => import("react").JSX.Element;
+declare const Item: any;
+declare const Trigger: ({ className, children, ...props }: ComponentPropsWithRef<typeof Nude.Trigger>) => import("react").JSX.Element;
+declare const Content: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Content>) => import("react").JSX.Element;
+declare const Link: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Link>) => import("react").JSX.Element;
+//#endregion
+export { Content, Item, Link, List, Root, Trigger };

package/dist/navigation-menu-parts.js

@@ -0,0 +1,47 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { interactive } from "./lib/interactive.js";
+import { useDropEnter } from "./lib/use-enter.js";
+import { controlSize, selectedWhenCurrent } from "./lib/text-styles.js";
+import { floatingSurface } from "./lib/overlay.js";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Nude from "@journ/nude/navigation-menu-parts";
+//#region src/navigation-menu-parts.tsx
+/** Includes the viewport, the panel that Content opens into. */
+const Root = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Root, {
+	...props,
+	className: cn("relative flex max-w-max flex-1 items-center justify-center", className),
+	classNames: {
+		viewportPosition: "absolute top-full left-0 flex w-full justify-center pt-2",
+		viewport: cn(floatingSurface, "relative h-(--radix-navigation-menu-viewport-height) w-full origin-top overflow-hidden p-0 md:w-(--radix-navigation-menu-viewport-width)")
+	}
+});
+const List = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.List, {
+	...props,
+	className: cn("flex list-none items-center gap-1", className)
+});
+const Item = Nude.Item;
+const pill = (className) => cn(interactive, controlSize, "inline-flex items-center gap-1.5 px-3 font-medium", className);
+const Trigger = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(Nude.Trigger, {
+	...props,
+	className: pill(cn("group", className)),
+	children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+		"aria-hidden": true,
+		className: "size-4 transition-transform group-data-[state=open]:rotate-180"
+	})]
+});
+const Content = ({ className, ...props }) => {
+	const panel = useDropEnter();
+	return /* @__PURE__ */ jsx(Nude.Content, {
+		ref: panel,
+		...props,
+		className: cn("w-full p-2 md:w-96", className)
+	});
+};
+const Link = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Link, {
+	...props,
+	className: pill(cn(selectedWhenCurrent, className))
+});
+//#endregion
+export { Content, Item, Link, List, Root, Trigger };

package/dist/navigation-menu.d.ts

@@ -0,0 +1,12 @@
+import { Content, Link, List, Root, Trigger } from "./navigation-menu-parts.js";
+//#region src/navigation-menu.d.ts
+declare const NavigationMenu: {
+  Root: typeof Root;
+  List: typeof List;
+  Item: any;
+  Trigger: typeof Trigger;
+  Content: typeof Content;
+  Link: typeof Link;
+};
+//#endregion
+export { NavigationMenu };

package/dist/navigation-menu.js

@@ -0,0 +1,12 @@
+import { Content, Item, Link, List, Root, Trigger } from "./navigation-menu-parts.js";
+//#region src/navigation-menu.tsx
+const NavigationMenu = {
+	Root,
+	List,
+	Item,
+	Trigger,
+	Content,
+	Link
+};
+//#endregion
+export { NavigationMenu };

package/dist/otp-input-parts.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef } from "react";
+import * as Nude from "@journ/nude/otp-input-parts";
+//#region src/otp-input-parts.d.ts
+declare const Root: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Root>) => import("react").JSX.Element;
+declare const Slot: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Slot>) => import("react").JSX.Element;
+declare const Hidden: any;
+//#endregion
+export { Hidden, Root, Slot };

package/dist/otp-input-parts.js

@@ -0,0 +1,17 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { fieldRing, fieldText } from "./lib/text-styles.js";
+import { jsx } from "react/jsx-runtime";
+import * as Nude from "@journ/nude/otp-input-parts";
+//#region src/otp-input-parts.tsx
+const Root = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Root, {
+	...props,
+	className: cn("flex items-center", className)
+});
+const Slot = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Slot, {
+	...props,
+	className: cn(fieldText, fieldRing, "relative size-14 border-y border-r border-current/15 bg-transparent text-center font-mono text-2xl tabular-nums first:border-l focus-visible:z-10", className)
+});
+const Hidden = Nude.Hidden;
+//#endregion
+export { Hidden, Root, Slot };

package/dist/otp-input.d.ts

@@ -0,0 +1,9 @@
+import { Root, Slot } from "./otp-input-parts.js";
+//#region src/otp-input.d.ts
+declare const OtpInput: {
+  Root: typeof Root;
+  Slot: typeof Slot;
+  Hidden: any;
+};
+//#endregion
+export { OtpInput };

package/dist/otp-input.js

@@ -0,0 +1,9 @@
+import { Hidden, Root, Slot } from "./otp-input-parts.js";
+//#region src/otp-input.tsx
+const OtpInput = {
+	Root,
+	Slot,
+	Hidden
+};
+//#endregion
+export { OtpInput };

package/dist/page-header.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/page-header.d.ts
+declare const Root: ({ className, ...props }: ComponentPropsWithRef<'header'>) => import("react").JSX.Element;
+declare const Title: ({ className, ...props }: ComponentPropsWithRef<'h1'>) => import("react").JSX.Element;
+declare const Actions: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+declare const PageHeader: {
+  Root: typeof Root;
+  Title: typeof Title;
+  Actions: typeof Actions;
+};
+//#endregion
+export { PageHeader };

package/dist/page-header.js

@@ -0,0 +1,23 @@
+import { cn } from "./lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { PageHeader as PageHeader$1 } from "@journ/nude/page-header";
+//#region src/page-header.tsx
+const Root = ({ className, ...props }) => /* @__PURE__ */ jsx(PageHeader$1.Root, {
+	...props,
+	className: cn("flex items-center gap-3", className)
+});
+const Title = ({ className, ...props }) => /* @__PURE__ */ jsx(PageHeader$1.Title, {
+	...props,
+	className: cn("flex-1 text-2xl/8 font-medium tracking-tight", className)
+});
+const Actions = ({ className, ...props }) => /* @__PURE__ */ jsx(PageHeader$1.Actions, {
+	...props,
+	className: cn("ml-auto flex items-center gap-2", className)
+});
+const PageHeader = {
+	Root,
+	Title,
+	Actions
+};
+//#endregion
+export { PageHeader };

package/dist/page.d.ts

@@ -0,0 +1,45 @@
+import { VariantProps } from "./lib/tv.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/page.d.ts
+declare const pageRoot: import("tailwind-variants").TVReturnType<{
+  tone: {
+    canvas: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark";
+    ink: "bg-bloom-ink text-bloom-paper";
+    indigo: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-indigo/10 to-bloom-indigo/10";
+    mint: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-mint/10 to-bloom-mint/10";
+    sky: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-sky/10 to-bloom-sky/10";
+    yellow: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-yellow/10 to-bloom-yellow/10";
+    coral: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-coral/10 to-bloom-coral/10";
+  };
+}, undefined, "min-h-dvh w-full", {
+  tone: {
+    canvas: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark";
+    ink: "bg-bloom-ink text-bloom-paper";
+    indigo: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-indigo/10 to-bloom-indigo/10";
+    mint: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-mint/10 to-bloom-mint/10";
+    sky: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-sky/10 to-bloom-sky/10";
+    yellow: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-yellow/10 to-bloom-yellow/10";
+    coral: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-coral/10 to-bloom-coral/10";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    canvas: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark";
+    ink: "bg-bloom-ink text-bloom-paper";
+    indigo: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-indigo/10 to-bloom-indigo/10";
+    mint: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-mint/10 to-bloom-mint/10";
+    sky: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-sky/10 to-bloom-sky/10";
+    yellow: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-yellow/10 to-bloom-yellow/10";
+    coral: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-coral/10 to-bloom-coral/10";
+  };
+}, undefined>>;
+type RootProps = ComponentPropsWithRef<'div'> & VariantProps<typeof pageRoot>;
+declare const Root: ({ tone, className, ...props }: RootProps) => import("react").JSX.Element;
+declare const Content: ({ className, ...props }: ComponentPropsWithRef<'main'>) => import("react").JSX.Element;
+declare const Footer: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+declare const Page: {
+  Root: typeof Root;
+  Content: typeof Content;
+  Footer: typeof Footer;
+};
+//#endregion
+export { Page, type RootProps as PageProps };

package/dist/page.js

@@ -0,0 +1,41 @@
+import { tv } from "./lib/tv.js";
+import { cn } from "./lib/cn.js";
+import { canvasTone, inkTone, pageTints } from "./lib/tones.js";
+import { jsx } from "react/jsx-runtime";
+import { Page as Page$1 } from "@journ/nude/page";
+//#region src/page.tsx
+const pageRoot = tv({
+	base: "min-h-dvh w-full",
+	variants: { tone: {
+		canvas: canvasTone,
+		ink: inkTone,
+		indigo: pageTints.indigo,
+		mint: pageTints.mint,
+		sky: pageTints.sky,
+		yellow: pageTints.yellow,
+		coral: pageTints.coral
+	} },
+	defaultVariants: { tone: "canvas" }
+});
+const Root = ({ tone, className, ...props }) => /* @__PURE__ */ jsx(Page$1.Root, {
+	...props,
+	className: pageRoot({
+		tone,
+		class: className
+	})
+});
+const Content = ({ className, ...props }) => /* @__PURE__ */ jsx(Page$1.Content, {
+	...props,
+	className: cn("mx-auto flex min-h-dvh w-full max-w-sm flex-col gap-4 px-4 pt-[max(2rem,env(safe-area-inset-top))] pb-[max(1rem,env(safe-area-inset-bottom))]", className)
+});
+const Footer = ({ className, ...props }) => /* @__PURE__ */ jsx(Page$1.Footer, {
+	...props,
+	className: cn("sticky bottom-4 mt-auto", className)
+});
+const Page = {
+	Root,
+	Content,
+	Footer
+};
+//#endregion
+export { Page };