@journ/bloom 0.1.1

package/dist/lib/interactive.js

@@ -0,0 +1,19 @@
+//#region src/lib/interactive.ts
+/**
+* Shared affordances for anything pressable: keyboard-only focus ring, a
+* currentColor hover/press overlay that sits between the background and the
+* content, and a dimmed disabled state. Flat: nothing moves on press.
+*/
+/** Stops text selection and the iOS tap flash on controls that are pressed, not read. */
+const pressReset = "select-none [-webkit-tap-highlight-color:transparent]";
+const interactive = [
+	pressReset,
+	"relative isolate cursor-default outline-none",
+	"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bloom-sky",
+	"after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:transition-colors",
+	"hover:after:bg-current/10 active:after:bg-current/15",
+	"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+	"forced-colors:outline-[Highlight]"
+].join(" ");
+//#endregion
+export { interactive, pressReset };

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

@@ -0,0 +1,25 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+//#region src/lib/menu-parts.d.ts
+type MenuParts = {
+  Content: ElementType;
+  Item: ElementType;
+  Label: ElementType;
+  Separator: ElementType;
+};
+/** Styled Content, Item, Label and Separator over the nude parts of any menu (dropdown menu, context menu). */
+declare const styleMenuParts: <P extends MenuParts>(parts: P) => {
+  Content: ({ className, ...props }: ComponentPropsWithRef<P['Content']> & {
+    className?: string;
+  }) => import("react").JSX.Element;
+  Item: ({ className, ...props }: ComponentPropsWithRef<P['Item']> & {
+    className?: string;
+  }) => import("react").JSX.Element;
+  Label: ({ className, ...props }: ComponentPropsWithRef<P['Label']> & {
+    className?: string;
+  }) => import("react").JSX.Element;
+  Separator: ({ className, ...props }: ComponentPropsWithRef<P['Separator']> & {
+    className?: string;
+  }) => import("react").JSX.Element;
+};
+//#endregion
+export { styleMenuParts };

package/dist/lib/menu-parts.js

@@ -0,0 +1,41 @@
+import { cn } from "./cn.js";
+import { usePopEnter } from "./use-enter.js";
+import { floatingItem, floatingLabel, floatingSeparator, floatingSurface } from "./overlay.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/menu-parts.tsx
+/** Styled Content, Item, Label and Separator over the nude parts of any menu (dropdown menu, context menu). */
+const styleMenuParts = (parts) => {
+	const ContentPart = parts.Content;
+	const ItemPart = parts.Item;
+	const LabelPart = parts.Label;
+	const SeparatorPart = parts.Separator;
+	const Content = ({ className, ...props }) => {
+		const panel = usePopEnter();
+		return /* @__PURE__ */ jsx(ContentPart, {
+			ref: panel,
+			sideOffset: 6,
+			...props,
+			className: cn(floatingSurface, className)
+		});
+	};
+	const Item = ({ className, ...props }) => /* @__PURE__ */ jsx(ItemPart, {
+		...props,
+		className: cn(floatingItem, className)
+	});
+	const Label = ({ className, ...props }) => /* @__PURE__ */ jsx(LabelPart, {
+		...props,
+		className: cn(floatingLabel, className)
+	});
+	const Separator = ({ className, ...props }) => /* @__PURE__ */ jsx(SeparatorPart, {
+		...props,
+		className: cn(floatingSeparator, className)
+	});
+	return {
+		Content,
+		Item,
+		Label,
+		Separator
+	};
+};
+//#endregion
+export { styleMenuParts };

package/dist/lib/modal-content.d.ts

@@ -0,0 +1,10 @@
+import { animate } from "animejs";
+import { ComponentPropsWithRef, ElementType } from "react";
+//#region src/lib/modal-content.d.ts
+/** Styles a nude modal content: a dimmed, fading overlay and a panel that animates in with `enter`. */
+declare const ModalContent: <C extends ElementType>({ content: Content, enter, ...props }: ComponentPropsWithRef<C> & {
+  content: C;
+  enter: Parameters<typeof animate>[1];
+}) => import("react").JSX.Element;
+//#endregion
+export { ModalContent };

package/dist/lib/modal-content.js

@@ -0,0 +1,17 @@
+import { useEnter, useOverlayEnter } from "./use-enter.js";
+import { modalOverlay } from "./overlay.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/modal-content.tsx
+/** Styles a nude modal content: a dimmed, fading overlay and a panel that animates in with `enter`. */
+const ModalContent = ({ content: Content, enter, ...props }) => {
+	const overlay = useOverlayEnter();
+	const panel = useEnter(enter);
+	return /* @__PURE__ */ jsx(Content, {
+		ref: panel,
+		overlayRef: overlay,
+		classNames: { overlay: modalOverlay },
+		...props
+	});
+};
+//#endregion
+export { ModalContent };

package/dist/lib/modal-parts.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/lib/modal-parts.d.ts
+/** Shared by Dialog, AlertDialog and Drawer. */
+declare const Body: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+declare const Actions: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+//#endregion
+export { Actions, Body };

package/dist/lib/modal-parts.js

@@ -0,0 +1,15 @@
+import { cn } from "./cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Actions as Actions$1, Body as Body$1 } from "@journ/nude/dialog-parts";
+//#region src/lib/modal-parts.tsx
+/** Shared by Dialog, AlertDialog and Drawer. */
+const Body = ({ className, ...props }) => /* @__PURE__ */ jsx(Body$1, {
+	...props,
+	className: cn("scrollbar-bloom flex flex-col gap-3 overflow-y-auto", className)
+});
+const Actions = ({ className, ...props }) => /* @__PURE__ */ jsx(Actions$1, {
+	...props,
+	className: cn("flex items-center justify-end gap-2", className)
+});
+//#endregion
+export { Actions, Body };

package/dist/lib/overlay.d.ts

@@ -0,0 +1,41 @@
+//#region src/lib/overlay.d.ts
+/** Surface and item styles shared by floating menus (select, dropdown menu, popover, hover card). */
+declare const floatingSurface = "bg-bloom-surface dark:bg-bloom-surface-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark border border-bloom-line dark:border-bloom-line-dark z-50 min-w-40 p-1 shadow-md outline-none";
+/** A floating surface that holds free-form content (popover, hover card). */
+declare const floatingCard = "bg-bloom-surface dark:bg-bloom-surface-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark border border-bloom-line dark:border-bloom-line-dark z-50 min-w-40 p-1 shadow-md outline-none flex w-72 flex-col gap-2 p-4";
+declare const floatingItem: string;
+declare const floatingLabel = "px-2 py-1.5 text-sm font-medium";
+declare const floatingSeparator = "-mx-1 my-1 h-px bg-current/10";
+/** Backdrop behind dialogs, alert dialogs, sheets and drawers. */
+declare const modalOverlay = "fixed inset-0 bg-bloom-canvas/60 dark:bg-bloom-canvas-dark/80";
+/** Centered panel shared by Dialog and AlertDialog. */
+declare const centeredPanel: import("tailwind-variants").TVReturnType<{
+  tone: {
+    readonly surface: "bg-bloom-surface dark:bg-bloom-surface-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark border border-bloom-line dark:border-bloom-line-dark";
+    readonly coral: string;
+    readonly yellow: string;
+    readonly indigo: string;
+    readonly mint: string;
+    readonly sky: string;
+  };
+}, undefined, "rounded-bloom fixed top-1/2 left-1/2 flex w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col gap-4 p-6 outline-none", {
+  tone: {
+    readonly surface: "bg-bloom-surface dark:bg-bloom-surface-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark border border-bloom-line dark:border-bloom-line-dark";
+    readonly coral: string;
+    readonly yellow: string;
+    readonly indigo: string;
+    readonly mint: string;
+    readonly sky: string;
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    readonly surface: "bg-bloom-surface dark:bg-bloom-surface-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark border border-bloom-line dark:border-bloom-line-dark";
+    readonly coral: string;
+    readonly yellow: string;
+    readonly indigo: string;
+    readonly mint: string;
+    readonly sky: string;
+  };
+}, undefined>>;
+//#endregion
+export { centeredPanel, floatingCard, floatingItem, floatingLabel, floatingSeparator, floatingSurface, modalOverlay };

package/dist/lib/overlay.js

@@ -0,0 +1,22 @@
+import { tv } from "./tv.js";
+import { controlSize } from "./text-styles.js";
+import { raised, scrim } from "./theme.js";
+import { surfaceTones } from "./tones.js";
+//#region src/lib/overlay.ts
+/** Surface and item styles shared by floating menus (select, dropdown menu, popover, hover card). */
+const floatingSurface = `${raised} z-50 min-w-40 p-1 shadow-md outline-none`;
+/** A floating surface that holds free-form content (popover, hover card). */
+const floatingCard = `${floatingSurface} flex w-72 flex-col gap-2 p-4`;
+const floatingItem = [`relative flex cursor-default items-center gap-2 px-2 ${controlSize} outline-none select-none`, "data-[highlighted]:bg-bloom-foreground/8 dark:data-[highlighted]:bg-bloom-foreground-dark/8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0"].join(" ");
+const floatingLabel = "px-2 py-1.5 text-sm font-medium";
+const floatingSeparator = "-mx-1 my-1 h-px bg-current/10";
+/** Backdrop behind dialogs, alert dialogs, sheets and drawers. */
+const modalOverlay = `fixed inset-0 ${scrim}`;
+/** Centered panel shared by Dialog and AlertDialog. */
+const centeredPanel = tv({
+	base: "rounded-bloom fixed top-1/2 left-1/2 flex w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 flex-col gap-4 p-6 outline-none",
+	variants: { tone: surfaceTones },
+	defaultVariants: { tone: "surface" }
+});
+//#endregion
+export { centeredPanel, floatingCard, floatingItem, floatingLabel, floatingSeparator, floatingSurface, modalOverlay };

package/dist/lib/picker.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps } from "../button.js";
+import { ComponentPropsWithRef, ComponentType } from "react";
+//#region src/lib/picker.d.ts
+type TriggerProps = ComponentPropsWithRef<'button'> & {
+  tone?: ButtonProps['tone'];
+};
+/** Styles a nude picker's trigger as a field button and its value as truncating text. */
+declare const stylePicker: <V extends {
+  className?: string;
+}>(parts: {
+  Trigger: ComponentType<ComponentPropsWithRef<'button'>>;
+  Value: ComponentType<V>;
+}) => {
+  Trigger: ({ tone, className, children, ...props }: TriggerProps) => import("react").JSX.Element;
+  Value: ({ className, ...props }: V) => import("react").JSX.Element;
+};
+//#endregion
+export { stylePicker };

package/dist/lib/picker.js

@@ -0,0 +1,25 @@
+import { cn } from "./cn.js";
+import { button, buttonContent } from "../button.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/picker.tsx
+/** Styles a nude picker's trigger as a field button and its value as truncating text. */
+const stylePicker = (parts) => {
+	const Trigger = ({ tone = "field", className, children, ...props }) => /* @__PURE__ */ jsx(parts.Trigger, {
+		...props,
+		className: button({
+			tone,
+			class: cn("justify-start", className)
+		}),
+		children: buttonContent(children)
+	});
+	const Value = ({ className, ...props }) => /* @__PURE__ */ jsx(parts.Value, {
+		...props,
+		className: cn("truncate data-[placeholder=true]:opacity-50", className)
+	});
+	return {
+		Trigger,
+		Value
+	};
+};
+//#endregion
+export { stylePicker };

package/dist/lib/text-styles.d.ts

@@ -0,0 +1,25 @@
+//#region src/lib/text-styles.d.ts
+/** Heading used by every title in the package. */
+declare const displayTitle = "text-lg/7 font-medium tracking-tight";
+/** Small label: stat names, alert and toast titles. */
+declare const displayLabel = "text-sm/6 font-medium";
+/** Medium heading: accordion triggers, calendar and month headings. */
+declare const displayHeading = "text-base/6 font-medium";
+/** Secondary text: same color at reduced opacity, never a separate gray. */
+declare const mutedText = "text-sm/5 opacity-60";
+/** Touch-first control sizing: 16px on mobile, 14px from `sm` up. */
+declare const controlSize = "py-2.5 text-base/6 sm:py-1.5 sm:text-sm/6";
+/** Colour scheme and placeholder shared by every text field. */
+declare const fieldText = "placeholder:text-current/40 scheme-light dark:scheme-dark";
+/** Focus, invalid and disabled states shared by every text field. */
+declare const fieldRing = "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bloom-sky aria-invalid:border-bloom-coral disabled:opacity-50";
+/**
+ * The "you are here" fill, one string per state attribute because Tailwind needs full class names.
+ * Tabs and toggles sit in a dim track, so the selected one takes the canvas color; nav items sit on
+ * the page, so the current one takes the dim wash.
+ */
+declare const selectedWhenActive = "data-[state=active]:bg-bloom-canvas dark:data-[state=active]:bg-bloom-canvas-dark";
+declare const selectedWhenOn = "data-[state=on]:bg-bloom-canvas dark:data-[state=on]:bg-bloom-canvas-dark";
+declare const selectedWhenCurrent = "border border-transparent aria-[current=page]:border-bloom-line aria-[current=page]:bg-bloom-foreground/4 dark:aria-[current=page]:border-bloom-line-dark dark:aria-[current=page]:bg-bloom-foreground-dark/4";
+//#endregion
+export { controlSize, displayHeading, displayLabel, displayTitle, fieldRing, fieldText, mutedText, selectedWhenActive, selectedWhenCurrent, selectedWhenOn };

package/dist/lib/text-styles.js

@@ -0,0 +1,25 @@
+//#region src/lib/text-styles.ts
+/** Heading used by every title in the package. */
+const displayTitle = "text-lg/7 font-medium tracking-tight";
+/** Small label: stat names, alert and toast titles. */
+const displayLabel = "text-sm/6 font-medium";
+/** Medium heading: accordion triggers, calendar and month headings. */
+const displayHeading = "text-base/6 font-medium";
+/** Secondary text: same color at reduced opacity, never a separate gray. */
+const mutedText = "text-sm/5 opacity-60";
+/** Touch-first control sizing: 16px on mobile, 14px from `sm` up. */
+const controlSize = "py-2.5 text-base/6 sm:py-1.5 sm:text-sm/6";
+/** Colour scheme and placeholder shared by every text field. */
+const fieldText = "placeholder:text-current/40 scheme-light dark:scheme-dark";
+/** Focus, invalid and disabled states shared by every text field. */
+const fieldRing = "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bloom-sky aria-invalid:border-bloom-coral disabled:opacity-50";
+/**
+* The "you are here" fill, one string per state attribute because Tailwind needs full class names.
+* Tabs and toggles sit in a dim track, so the selected one takes the canvas color; nav items sit on
+* the page, so the current one takes the dim wash.
+*/
+const selectedWhenActive = "data-[state=active]:bg-bloom-canvas dark:data-[state=active]:bg-bloom-canvas-dark";
+const selectedWhenOn = "data-[state=on]:bg-bloom-canvas dark:data-[state=on]:bg-bloom-canvas-dark";
+const selectedWhenCurrent = "border border-transparent aria-[current=page]:border-bloom-line aria-[current=page]:bg-bloom-foreground/4 dark:aria-[current=page]:border-bloom-line-dark dark:aria-[current=page]:bg-bloom-foreground-dark/4";
+//#endregion
+export { controlSize, displayHeading, displayLabel, displayTitle, fieldRing, fieldText, mutedText, selectedWhenActive, selectedWhenCurrent, selectedWhenOn };

package/dist/lib/theme.d.ts

@@ -0,0 +1,43 @@
+//#region src/lib/theme.d.ts
+/**
+ * Every light and dark pairing in the package lives here, written with
+ * Tailwind's `dark:` variant. Components import these instead of repeating
+ * the pairs. Roles: canvas (page), surface (raised blocks), foreground (text),
+ * line (borders), accent (text accent on a surface).
+ */
+/** Readable text on the canvas and on surfaces. */
+declare const foreground = "text-bloom-foreground dark:text-bloom-foreground-dark";
+/** The page background with its text and native control scheme. */
+declare const 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";
+/** A raised block's fill and text, no edge. */
+declare const surfaceFill = "bg-bloom-surface dark:bg-bloom-surface-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark";
+/** The color of every hairline: card edges, field outlines, dividers. */
+declare const line = "border-bloom-line dark:border-bloom-line-dark";
+/** Cards and panels: the canvas color by default, set apart by a hairline edge only. */
+declare const surface = "bg-bloom-surface dark:bg-bloom-surface-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark border border-bloom-line dark:border-bloom-line-dark";
+/** Floating blocks: menus, toasts, the nav bar. Same edge as a card; the shadow is added where they float. */
+declare const raised = "bg-bloom-surface dark:bg-bloom-surface-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark border border-bloom-line dark:border-bloom-line-dark";
+declare const faintBorder = "border-bloom-line dark:border-bloom-line-dark";
+/** The canvas color as a fill, for marks that sit on a solid: the switch thumb. */
+declare const canvasFill = "bg-bloom-canvas dark:bg-bloom-canvas-dark";
+/** A dim layer over a surface: bubbles, hover states, selected items. */
+declare const dim = "bg-bloom-foreground/8 dark:bg-bloom-foreground-dark/8";
+/** The unchecked switch track: a light gray in light, a mid gray in dark. */
+declare const trackFill = "bg-bloom-foreground/12 dark:bg-bloom-foreground-dark/40";
+/** The handle of a drawer and other low-key marks. */
+declare const mutedFill = "bg-bloom-foreground/30 dark:bg-bloom-foreground-dark/30";
+/** A solid fill that inverts with the theme, for primary buttons and thumbs. */
+declare const neutralFill = "bg-bloom-foreground dark:bg-bloom-foreground-dark";
+declare const neutralText = "text-bloom-canvas dark:text-bloom-canvas-dark";
+declare const neutral = "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
+/** Text on a form control that opens something. */
+declare const controlText = "text-bloom-foreground dark:text-bloom-foreground-dark";
+/** Text fields, selects and pickers: no fill, a hairline outline. */
+declare const control = "border border-bloom-line dark:border-bloom-line-dark bg-transparent text-bloom-foreground dark:text-bloom-foreground-dark";
+/** The backdrop behind modals: the canvas, mostly opaque. */
+declare const scrim = "bg-bloom-canvas/60 dark:bg-bloom-canvas-dark/80";
+/** A gradient of the text color that the shimmer animation slides across the letters. */
+declare const shimmer = "bg-linear-to-r from-bloom-foreground/40 via-bloom-foreground to-bloom-foreground/40 dark:from-bloom-foreground-dark/40 dark:via-bloom-foreground-dark dark:to-bloom-foreground-dark/40";
+declare const accentText = "text-bloom-accent dark:text-bloom-accent-dark";
+//#endregion
+export { accentText, canvas, canvasFill, control, controlText, dim, faintBorder, foreground, line, mutedFill, neutral, neutralFill, neutralText, raised, scrim, shimmer, surface, surfaceFill, trackFill };

package/dist/lib/theme.js

@@ -0,0 +1,45 @@
+//#region src/lib/theme.ts
+/**
+* Every light and dark pairing in the package lives here, written with
+* Tailwind's `dark:` variant. Components import these instead of repeating
+* the pairs. Roles: canvas (page), surface (raised blocks), foreground (text),
+* line (borders), accent (text accent on a surface).
+*/
+/** Readable text on the canvas and on surfaces. */
+const foreground = "text-bloom-foreground dark:text-bloom-foreground-dark";
+/** The package typeface. Set on every root that paints its own background, portals included. */
+const typeface = "font-bloom-display";
+/** The page background with its text and native control scheme. */
+const canvas = `bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark ${typeface} ${foreground}`;
+/** A raised block's fill and text, no edge. */
+const surfaceFill = `bg-bloom-surface dark:bg-bloom-surface-dark ${typeface} ${foreground}`;
+/** The color of every hairline: card edges, field outlines, dividers. */
+const line = "border-bloom-line dark:border-bloom-line-dark";
+/** Cards and panels: the canvas color by default, set apart by a hairline edge only. */
+const surface = `${surfaceFill} border ${line}`;
+/** Floating blocks: menus, toasts, the nav bar. Same edge as a card; the shadow is added where they float. */
+const raised = surface;
+const faintBorder = line;
+/** The canvas color as a fill, for marks that sit on a solid: the switch thumb. */
+const canvasFill = "bg-bloom-canvas dark:bg-bloom-canvas-dark";
+/** A dim layer over a surface: bubbles, hover states, selected items. */
+const dim = "bg-bloom-foreground/8 dark:bg-bloom-foreground-dark/8";
+/** The unchecked switch track: a light gray in light, a mid gray in dark. */
+const trackFill = "bg-bloom-foreground/12 dark:bg-bloom-foreground-dark/40";
+/** The handle of a drawer and other low-key marks. */
+const mutedFill = "bg-bloom-foreground/30 dark:bg-bloom-foreground-dark/30";
+/** A solid fill that inverts with the theme, for primary buttons and thumbs. */
+const neutralFill = "bg-bloom-foreground dark:bg-bloom-foreground-dark";
+const neutralText = "text-bloom-canvas dark:text-bloom-canvas-dark";
+const neutral = `${neutralFill} ${neutralText}`;
+/** Text on a form control that opens something. */
+const controlText = foreground;
+/** Text fields, selects and pickers: no fill, a hairline outline. */
+const control = `border ${line} bg-transparent ${controlText}`;
+/** The backdrop behind modals: the canvas, mostly opaque. */
+const scrim = "bg-bloom-canvas/60 dark:bg-bloom-canvas-dark/80";
+/** A gradient of the text color that the shimmer animation slides across the letters. */
+const shimmer = "bg-linear-to-r from-bloom-foreground/40 via-bloom-foreground to-bloom-foreground/40 dark:from-bloom-foreground-dark/40 dark:via-bloom-foreground-dark dark:to-bloom-foreground-dark/40";
+const accentText = "text-bloom-accent dark:text-bloom-accent-dark";
+//#endregion
+export { accentText, canvas, canvasFill, control, controlText, dim, faintBorder, foreground, line, mutedFill, neutral, neutralFill, neutralText, raised, scrim, shimmer, surface, surfaceFill, trackFill };

package/dist/lib/tones.d.ts

@@ -0,0 +1,52 @@
+//#region src/lib/tones.d.ts
+/** Fill colors, the single source for every tone map in the package. */
+declare const fills: {
+  /** Inverts with the theme: a dark fill in light mode, a light fill in dark mode. */
+  readonly neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark";
+  readonly coral: 'bg-bloom-coral';
+  readonly yellow: 'bg-bloom-yellow';
+  readonly indigo: 'bg-bloom-indigo';
+  readonly mint: 'bg-bloom-mint';
+  readonly sky: 'bg-bloom-sky';
+};
+/** Fill plus readable text, for buttons. */
+declare const solidTones: {
+  readonly neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
+  readonly coral: "bg-bloom-coral text-bloom-paper";
+  readonly yellow: "bg-bloom-yellow text-bloom-ink";
+  readonly indigo: "bg-bloom-indigo text-bloom-paper";
+  readonly mint: "bg-bloom-mint text-bloom-ink";
+  readonly sky: "bg-bloom-sky text-bloom-ink";
+};
+/** Status labels: a faint wash of the color, with the color as text in dark and plain text in light. */
+declare const labelTones: {
+  readonly neutral: "bg-bloom-foreground/8 dark:bg-bloom-foreground-dark/10 text-bloom-foreground dark:text-bloom-foreground-dark";
+  readonly coral: 'bg-bloom-coral/15 text-bloom-foreground dark:text-bloom-coral';
+  readonly yellow: 'bg-bloom-yellow/25 text-bloom-foreground dark:bg-bloom-yellow/15 dark:text-bloom-yellow';
+  readonly indigo: 'bg-bloom-indigo/15 text-bloom-foreground dark:text-bloom-indigo';
+  readonly mint: 'bg-bloom-mint/20 text-bloom-foreground dark:bg-bloom-mint/15 dark:text-bloom-mint';
+  readonly sky: 'bg-bloom-sky/15 text-bloom-foreground dark:text-bloom-sky';
+};
+/** The dark canvas color with light text, in both themes. */
+declare const inkTone = "bg-bloom-ink text-bloom-paper";
+/** The page background and its readable text. Follows the theme. */
+declare const canvasTone = "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark";
+/** A page washed with a color: the wash is a flat gradient, so the canvas stays opaque under it. */
+declare const pageTints: {
+  readonly 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";
+  readonly 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";
+  readonly 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";
+  readonly 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";
+  readonly 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";
+};
+/** Surface tones shared by every block that paints its own background. */
+declare const surfaceTones: {
+  readonly surface: "bg-bloom-surface dark:bg-bloom-surface-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark border border-bloom-line dark:border-bloom-line-dark";
+  readonly coral: string;
+  readonly yellow: string;
+  readonly indigo: string;
+  readonly mint: string;
+  readonly sky: string;
+};
+//#endregion
+export { canvasTone, fills, inkTone, labelTones, pageTints, solidTones, surfaceTones };

package/dist/lib/tones.js

@@ -0,0 +1,55 @@
+import { canvas, foreground, neutral, neutralFill, surface, surfaceFill } from "./theme.js";
+//#region src/lib/tones.ts
+/** Fill colors, the single source for every tone map in the package. */
+const fills = {
+	/** Inverts with the theme: a dark fill in light mode, a light fill in dark mode. */
+	neutral: neutralFill,
+	coral: "bg-bloom-coral",
+	yellow: "bg-bloom-yellow",
+	indigo: "bg-bloom-indigo",
+	mint: "bg-bloom-mint",
+	sky: "bg-bloom-sky"
+};
+/** Fill plus readable text, for buttons. */
+const solidTones = {
+	neutral,
+	coral: `${fills.coral} text-bloom-paper`,
+	yellow: `${fills.yellow} text-bloom-ink`,
+	indigo: `${fills.indigo} text-bloom-paper`,
+	mint: `${fills.mint} text-bloom-ink`,
+	sky: `${fills.sky} text-bloom-ink`
+};
+/** Status labels: a faint wash of the color, with the color as text in dark and plain text in light. */
+const labelTones = {
+	neutral: `bg-bloom-foreground/8 dark:bg-bloom-foreground-dark/10 ${foreground}`,
+	coral: "bg-bloom-coral/15 text-bloom-foreground dark:text-bloom-coral",
+	yellow: "bg-bloom-yellow/25 text-bloom-foreground dark:bg-bloom-yellow/15 dark:text-bloom-yellow",
+	indigo: "bg-bloom-indigo/15 text-bloom-foreground dark:text-bloom-indigo",
+	mint: "bg-bloom-mint/20 text-bloom-foreground dark:bg-bloom-mint/15 dark:text-bloom-mint",
+	sky: "bg-bloom-sky/15 text-bloom-foreground dark:text-bloom-sky"
+};
+/** The dark canvas color with light text, in both themes. */
+const inkTone = "bg-bloom-ink text-bloom-paper";
+/** The page background and its readable text. Follows the theme. */
+const canvasTone = canvas;
+/** A page washed with a color: the wash is a flat gradient, so the canvas stays opaque under it. */
+const pageTints = {
+	coral: `${canvas} bg-linear-to-b from-bloom-coral/10 to-bloom-coral/10`,
+	yellow: `${canvas} bg-linear-to-b from-bloom-yellow/10 to-bloom-yellow/10`,
+	indigo: `${canvas} bg-linear-to-b from-bloom-indigo/10 to-bloom-indigo/10`,
+	mint: `${canvas} bg-linear-to-b from-bloom-mint/10 to-bloom-mint/10`,
+	sky: `${canvas} bg-linear-to-b from-bloom-sky/10 to-bloom-sky/10`
+};
+/** The same wash on a surface, with the edge in the color. Opaque, so it also works for modals. */
+const tint = (wash, edge) => `${surfaceFill} border ${edge} bg-linear-to-b ${wash}`;
+/** Surface tones shared by every block that paints its own background. */
+const surfaceTones = {
+	surface,
+	coral: tint("from-bloom-coral/10 to-bloom-coral/10", "border-bloom-coral/40"),
+	yellow: tint("from-bloom-yellow/10 to-bloom-yellow/10", "border-bloom-yellow/40"),
+	indigo: tint("from-bloom-indigo/10 to-bloom-indigo/10", "border-bloom-indigo/40"),
+	mint: tint("from-bloom-mint/10 to-bloom-mint/10", "border-bloom-mint/40"),
+	sky: tint("from-bloom-sky/10 to-bloom-sky/10", "border-bloom-sky/40")
+};
+//#endregion
+export { canvasTone, fills, inkTone, labelTones, pageTints, solidTones, surfaceTones };

package/dist/lib/tv.d.ts

@@ -0,0 +1,2 @@
+import { VariantProps, tv } from "tailwind-variants";
+export { type VariantProps, tv };

package/dist/lib/tv.js

@@ -0,0 +1,2 @@
+import { tv } from "tailwind-variants";
+export { tv };

package/dist/lib/use-enter.d.ts

@@ -0,0 +1,15 @@
+import { animate } from "animejs";
+//#region src/lib/use-enter.d.ts
+declare const useEnter: <T extends HTMLElement>(keyframes: Parameters<typeof animate>[1]) => import("react").RefObject<T | null>;
+declare const usePopEnter: (duration?: number) => import("react").RefObject<HTMLDivElement | null>;
+declare const useDropEnter: () => import("react").RefObject<HTMLDivElement | null>;
+declare const useOverlayEnter: () => import("react").RefObject<HTMLDivElement | null>;
+declare const modalPanelEnter: {
+  readonly opacity: [0, 1];
+  readonly scale: [0.97, 1];
+  readonly duration: 100;
+  readonly ease: 'outQuad';
+};
+declare const useExpand: <T extends HTMLElement>() => import("react").RefObject<T | null>;
+//#endregion
+export { modalPanelEnter, useDropEnter, useEnter, useExpand, useOverlayEnter, usePopEnter };

package/dist/lib/use-enter.js

@@ -0,0 +1,54 @@
+import { prefersReducedMotion } from "@journ/lift";
+import { animate } from "animejs";
+import { useLayoutEffect, useRef } from "react";
+//#region src/lib/use-enter.ts
+const useEnter = (keyframes) => {
+	const element = useRef(null);
+	useLayoutEffect(() => {
+		if (!element.current || prefersReducedMotion()) return;
+		animate(element.current, keyframes);
+	}, []);
+	return element;
+};
+const usePopEnter = (duration = 200) => useEnter({
+	opacity: [0, 1],
+	scale: [.96, 1],
+	duration,
+	ease: "outQuad"
+});
+const useDropEnter = () => useEnter({
+	opacity: [0, 1],
+	translateY: [4, 0],
+	duration: 180,
+	ease: "outQuad"
+});
+const useOverlayEnter = () => useEnter({
+	opacity: [0, 1],
+	duration: 200,
+	ease: "outQuad"
+});
+const modalPanelEnter = {
+	opacity: [0, 1],
+	scale: [.97, 1],
+	duration: 100,
+	ease: "outQuad"
+};
+const useExpand = () => {
+	const element = useRef(null);
+	useLayoutEffect(() => {
+		const node = element.current;
+		if (!node || prefersReducedMotion()) return;
+		animate(node, {
+			height: [0, node.scrollHeight],
+			opacity: [0, 1],
+			duration: 200,
+			ease: "outQuad",
+			onComplete: () => {
+				node.style.height = "";
+			}
+		});
+	}, []);
+	return element;
+};
+//#endregion
+export { modalPanelEnter, useDropEnter, useEnter, useExpand, useOverlayEnter, usePopEnter };

package/dist/link.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/link.d.ts
+type LinkProps = ComponentPropsWithRef<'a'> & {
+  asChild?: boolean;
+};
+declare const Link: ({ asChild, className, ...props }: LinkProps) => import("react").JSX.Element;
+//#endregion
+export { Link, type LinkProps };

package/dist/link.js

@@ -0,0 +1,13 @@
+import { cn } from "./lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Link as Link$1 } from "@journ/nude/link";
+//#region src/link.tsx
+const Link = ({ asChild, className, ...props }) => {
+	return /* @__PURE__ */ jsx(Link$1, {
+		asChild,
+		...props,
+		className: cn("underline decoration-current/40 underline-offset-4 outline-none transition-colors hover:decoration-current", "rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bloom-sky", className)
+	});
+};
+//#endregion
+export { Link };

package/dist/markdown.d.ts

@@ -0,0 +1,10 @@
+import { MarkdownComponents, MarkdownProps as MarkdownProps$1 } from "@journ/nude/markdown";
+//#region src/markdown.d.ts
+type MarkdownProps = Omit<MarkdownProps$1, 'components'> & {
+  /** Override or add elements. Merged over the bloom defaults. */
+  components?: MarkdownComponents;
+};
+/** `className` goes to the wrapper, which keeps the element margins from stacking with a parent's gap. */
+declare const Markdown: ({ components: overrides, className, ...props }: MarkdownProps) => import("react").JSX.Element;
+//#endregion
+export { Markdown, type MarkdownProps };