@journ/bloom 0.1.1 → 0.1.2

package/dist/field.d.ts

@@ -1,11 +1,11 @@
-import { Description, Error as FieldError, Label, Root } from "./field-parts.js";
+import { Control, Description, Error as FieldError, Label, Root } from "./field-parts.js";
 //#region src/field.d.ts
 declare const Field: {
   Root: typeof Root;
   Label: typeof Label;
   Description: typeof Description;
   Error: typeof FieldError;
-  Control: any;
+  Control: typeof Control;
 };
 //#endregion
 export { Field };

package/dist/file-dropzone-parts.d.ts

@@ -1,12 +1,14 @@
-import { ComponentPropsWithRef } from "react";
+import { JSX } from "react";
 import * as Nude from "@journ/nude/file-dropzone-parts";
 import { FileRejection, RejectionReason } from "@journ/nude/file-dropzone-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/file-dropzone-parts.d.ts
-declare const matchesAccept: any, sortFiles: any;
+declare const matchesAccept: typeof Nude.matchesAccept;
+declare const sortFiles: typeof Nude.sortFiles;
 /** A drop target that is also a button: click or press Enter to open the file picker. */
-declare const Root: ({ className, ...props }: Nude.RootProps) => import("react").JSX.Element;
-declare const Icon: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
-declare const Title: ({ className, ...props }: ComponentPropsWithRef<'p'>) => import("react").JSX.Element;
-declare const Description: ({ className, ...props }: ComponentPropsWithRef<'p'>) => import("react").JSX.Element;
+declare const Root: ({ className, ...props }: Nude.RootProps) => JSX.Element;
+declare const Icon: Styled<"span">;
+declare const Title: Styled<"p">;
+declare const Description: Styled<"p">;
 //#endregion
 export { Description, type FileRejection, Icon, type RejectionReason, Root, Title, matchesAccept, sortFiles };

package/dist/file-dropzone-parts.js

@@ -5,7 +5,8 @@ import { iconTile } from "./lib/icon-tile.js";
 import { jsx } from "react/jsx-runtime";
 import * as Nude from "@journ/nude/file-dropzone-parts";
 //#region src/file-dropzone-parts.tsx
-const { matchesAccept, sortFiles } = Nude;
+const matchesAccept = Nude.matchesAccept;
+const sortFiles = Nude.sortFiles;
 /** A drop target that is also a button: click or press Enter to open the file picker. */
 const Root = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Root, {
 	...props,

package/dist/heading.d.ts

@@ -1,31 +1,10 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/heading.d.ts
-declare const heading: import("tailwind-variants").TVReturnType<{
-  size: {
-    sm: "text-lg/7";
-    md: "text-2xl/8";
-    lg: "text-3xl/9";
-    xl: "text-5xl/none";
-  };
-}, undefined, "font-medium tracking-tight", {
-  size: {
-    sm: "text-lg/7";
-    md: "text-2xl/8";
-    lg: "text-3xl/9";
-    xl: "text-5xl/none";
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  size: {
-    sm: "text-lg/7";
-    md: "text-2xl/8";
-    lg: "text-3xl/9";
-    xl: "text-5xl/none";
-  };
-}, undefined>>;
-type HeadingProps = ComponentPropsWithRef<'h1'> & VariantProps<typeof heading> & {
+type HeadingSize = "sm" | "md" | "lg" | "xl";
+type HeadingProps = ComponentPropsWithRef<"h1"> & {
+  size?: HeadingSize;
   level?: 1 | 2 | 3 | 4 | 5 | 6;
 };
-declare const Heading: ({ level, size, className, ...props }: HeadingProps) => import("react").JSX.Element;
+declare const Heading: ({ level, size, className, ...props }: HeadingProps) => JSX.Element;
 //#endregion
 export { Heading, type HeadingProps };

package/dist/hover-card-parts.d.ts

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

package/dist/hover-card.d.ts

@@ -1,8 +1,8 @@
-import { Content } from "./hover-card-parts.js";
+import { Content, Root, Trigger } from "./hover-card-parts.js";
 //#region src/hover-card.d.ts
 declare const HoverCard: {
-  Root: any;
-  Trigger: any;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
   Content: typeof Content;
 };
 //#endregion

package/dist/icon-button.d.ts

@@ -1,44 +1,14 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { Recipe } from "./lib/tv.js";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/icon-button.d.ts
-declare const iconButton: import("tailwind-variants").TVReturnType<{
-  tone: {
-    neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
-    ink: "bg-bloom-ink text-bloom-paper";
-    coral: "bg-bloom-coral text-bloom-paper";
-    ghost: "bg-transparent text-inherit";
-    outline: "border border-current/15 bg-transparent text-inherit";
-  };
-  size: {
-    sm: "size-8 [&>svg]:size-4";
-    md: "size-9 [&>svg]:size-4";
-  };
-}, undefined, string[], {
-  tone: {
-    neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
-    ink: "bg-bloom-ink text-bloom-paper";
-    coral: "bg-bloom-coral text-bloom-paper";
-    ghost: "bg-transparent text-inherit";
-    outline: "border border-current/15 bg-transparent text-inherit";
-  };
-  size: {
-    sm: "size-8 [&>svg]:size-4";
-    md: "size-9 [&>svg]:size-4";
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  tone: {
-    neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
-    ink: "bg-bloom-ink text-bloom-paper";
-    coral: "bg-bloom-coral text-bloom-paper";
-    ghost: "bg-transparent text-inherit";
-    outline: "border border-current/15 bg-transparent text-inherit";
-  };
-  size: {
-    sm: "size-8 [&>svg]:size-4";
-    md: "size-9 [&>svg]:size-4";
-  };
-}, undefined>>;
-type IconButtonProps = ComponentPropsWithRef<'button'> & VariantProps<typeof iconButton>;
-declare const IconButton: ({ tone, size, className, children, type, ...props }: IconButtonProps) => import("react").JSX.Element;
+type IconButtonTone = "neutral" | "ink" | "coral" | "ghost" | "outline";
+type IconButtonSize = "sm" | "md";
+type IconButtonVariants = {
+  tone?: IconButtonTone;
+  size?: IconButtonSize;
+};
+declare const iconButton: Recipe<IconButtonVariants>;
+type IconButtonProps = ComponentPropsWithRef<"button"> & IconButtonVariants;
+declare const IconButton: ({ tone, size, className, children, type, ...props }: IconButtonProps) => JSX.Element;
 //#endregion
 export { IconButton, type IconButtonProps, iconButton };

package/dist/icon.d.ts

@@ -1,30 +1,10 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/icon.d.ts
-declare const icon: import("tailwind-variants").TVReturnType<{
-  size: {
-    sm: "[&>svg]:size-4";
-    md: "[&>svg]:size-5";
-    lg: "[&>svg]:size-6";
-    xl: "[&>svg]:size-8";
-  };
-}, undefined, "inline-flex shrink-0 items-center justify-center", {
-  size: {
-    sm: "[&>svg]:size-4";
-    md: "[&>svg]:size-5";
-    lg: "[&>svg]:size-6";
-    xl: "[&>svg]:size-8";
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  size: {
-    sm: "[&>svg]:size-4";
-    md: "[&>svg]:size-5";
-    lg: "[&>svg]:size-6";
-    xl: "[&>svg]:size-8";
-  };
-}, undefined>>;
-type IconProps = ComponentPropsWithRef<'span'> & VariantProps<typeof icon>;
+type IconSize = "sm" | "md" | "lg" | "xl";
+type IconProps = ComponentPropsWithRef<"span"> & {
+  size?: IconSize;
+};
 /** Sizes any svg child and hides it from assistive tech unless a label is given. */
-declare const Icon: ({ size, className, 'aria-label': label, ...props }: IconProps) => import("react").JSX.Element;
+declare const Icon: ({ size, className, "aria-label": label, ...props }: IconProps) => JSX.Element;
 //#endregion
 export { Icon, type IconProps };

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import { Accordion } from "./accordion.js";
-import { VariantProps, tv } from "./lib/tv.js";
 import { AlertDialog } from "./alert-dialog.js";
 import { Alert } from "./alert.js";
 import { AnimatedSize, AnimatedSizeProps } from "./animated-size.js";
@@ -7,6 +6,7 @@ import { Avatar } from "./avatar.js";
 import { Badge } from "./badge.js";
 import { Breadcrumbs } from "./breadcrumbs.js";
 import { BulkBar } from "./bulk-bar.js";
+import { VariantProps, tv } from "./lib/tv.js";
 import { Button, ButtonProps } from "./button.js";
 import { IconButton, IconButtonProps } from "./icon-button.js";
 import { CalendarActions, CalendarContextValue, CalendarMeta, CalendarState, CalendarView, RootProps, Weekday, useCalendar } from "./calendar-parts.js";

package/dist/input.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/input.d.ts
-declare const field = "block w-full rounded-bloom px-3 border border-bloom-line dark:border-bloom-line-dark bg-transparent text-bloom-foreground dark:text-bloom-foreground-dark py-2.5 text-base/6 sm:py-1.5 sm:text-sm/6 placeholder:text-current/40 scheme-light dark:scheme-dark outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-bloom-sky aria-invalid:border-bloom-coral disabled:opacity-50";
+declare const field: string;
 declare const input: (className?: string) => string;
-declare const Input: ({ className, ...props }: ComponentPropsWithRef<'input'>) => import("react").JSX.Element;
+declare const Input: Styled<"input">;
 //#endregion
 export { Input, field, input };

package/dist/lib/icon-tile.d.ts

@@ -1,32 +1,9 @@
+import { Recipe } from "./tv.js";
 //#region src/lib/icon-tile.d.ts
 /** A bordered square that holds an icon: card icons, empty states, dropzones. */
-declare const iconTile: import("tailwind-variants").TVReturnType<{
-  size: {
-    md: "size-10 [&>svg]:size-5";
-    lg: "size-12 [&>svg]:size-6";
-  };
-  tone: {
-    outline: "border border-bloom-line dark:border-bloom-line-dark";
-    soft: "bg-current/8";
-  };
-}, undefined, "grid shrink-0 place-items-center", {
-  size: {
-    md: "size-10 [&>svg]:size-5";
-    lg: "size-12 [&>svg]:size-6";
-  };
-  tone: {
-    outline: "border border-bloom-line dark:border-bloom-line-dark";
-    soft: "bg-current/8";
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  size: {
-    md: "size-10 [&>svg]:size-5";
-    lg: "size-12 [&>svg]:size-6";
-  };
-  tone: {
-    outline: "border border-bloom-line dark:border-bloom-line-dark";
-    soft: "bg-current/8";
-  };
-}, undefined>>;
+declare const iconTile: Recipe<{
+  size?: "md" | "lg";
+  tone?: "outline" | "soft";
+}>;
 //#endregion
 export { iconTile };

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

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef, ElementType } from "react";
+import { ComponentPropsWithRef, ElementType, JSX } from "react";
 //#region src/lib/menu-parts.d.ts
 type MenuParts = {
   Content: ElementType;
@@ -6,20 +6,16 @@ type MenuParts = {
   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;
+type MenuPart<T extends ElementType> = (props: ComponentPropsWithRef<T> & {
+  className?: string;
+}) => JSX.Element;
+type StyledMenuParts<P extends MenuParts> = {
+  Content: MenuPart<P["Content"]>;
+  Item: MenuPart<P["Item"]>;
+  Label: MenuPart<P["Label"]>;
+  Separator: MenuPart<P["Separator"]>;
 };
+/** 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) => StyledMenuParts<P>;
 //#endregion
-export { styleMenuParts };
+export { type MenuPart, styleMenuParts };

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

@@ -1,10 +1,10 @@
 import { animate } from "animejs";
-import { ComponentPropsWithRef, ElementType } from "react";
+import { ComponentPropsWithRef, ElementType, JSX } 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;
+}) => JSX.Element;
 //#endregion
 export { ModalContent };

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

@@ -1,7 +1,7 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#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;
+declare const Body: Styled<"div">;
+declare const Actions: Styled<"div">;
 //#endregion
 export { Actions, Body };

package/dist/lib/overlay.d.ts

@@ -1,41 +1,18 @@
+import { SurfaceTone } from "./tones.js";
+import { Recipe } from "./tv.js";
 //#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";
+declare const floatingSurface: string;
 /** 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 floatingCard: string;
 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";
+declare const modalOverlay: string;
 /** 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>>;
+declare const centeredPanel: Recipe<{
+  tone?: SurfaceTone;
+}>;
 //#endregion
 export { centeredPanel, floatingCard, floatingItem, floatingLabel, floatingSeparator, floatingSurface, modalOverlay };

package/dist/lib/picker.d.ts

@@ -1,18 +1,20 @@
 import { ButtonProps } from "../button.js";
-import { ComponentPropsWithRef, ComponentType } from "react";
+import { ComponentPropsWithRef, ComponentType, JSX } from "react";
 //#region src/lib/picker.d.ts
-type TriggerProps = ComponentPropsWithRef<'button'> & {
-  tone?: ButtonProps['tone'];
+type TriggerProps = ComponentPropsWithRef<"button"> & {
+  tone?: ButtonProps["tone"];
 };
+type PickerTrigger = (props: TriggerProps) => JSX.Element;
+type PickerValue<V> = (props: V) => JSX.Element;
 /** 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'>>;
+  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;
+  Trigger: PickerTrigger;
+  Value: PickerValue<V>;
 };
 //#endregion
-export { stylePicker };
+export { type PickerTrigger, type PickerValue, stylePicker };

package/dist/lib/theme.d.ts

@@ -8,16 +8,16 @@
 /** 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";
+declare const canvas: string;
 /** 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";
+declare const surfaceFill: string;
 /** 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";
+declare const surface: string;
 /** 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";
+declare const raised: string;
+declare const faintBorder: string;
 /** 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. */
@@ -29,11 +29,11 @@ declare const mutedFill = "bg-bloom-foreground/30 dark:bg-bloom-foreground-dark/
 /** 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";
+declare const neutral: string;
 /** Text on a form control that opens something. */
-declare const controlText = "text-bloom-foreground dark:text-bloom-foreground-dark";
+declare const controlText: string;
 /** 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";
+declare const control: string;
 /** 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. */

package/dist/lib/tones.d.ts

@@ -1,52 +1,22 @@
 //#region src/lib/tones.d.ts
+type Fill = "neutral" | "coral" | "yellow" | "indigo" | "mint" | "sky";
+type SolidTone = Fill;
+type LabelTone = Fill;
+type PageTint = "coral" | "yellow" | "indigo" | "mint" | "sky";
+type SurfaceTone = "surface" | "coral" | "yellow" | "indigo" | "mint" | "sky";
 /** 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';
-};
+declare const fills: Record<Fill, string>;
 /** 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";
-};
+declare const solidTones: Record<SolidTone, string>;
 /** 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';
-};
+declare const labelTones: Record<LabelTone, string>;
 /** 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";
+declare const canvasTone: string;
 /** 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";
-};
+declare const pageTints: Record<PageTint, string>;
 /** 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;
-};
+declare const surfaceTones: Record<SurfaceTone, string>;
 //#endregion
-export { canvasTone, fills, inkTone, labelTones, pageTints, solidTones, surfaceTones };
+export { type Fill, type LabelTone, type PageTint, type SolidTone, type SurfaceTone, canvasTone, fills, inkTone, labelTones, pageTints, solidTones, surfaceTones };

package/dist/lib/tv.d.ts

@@ -1,2 +1,7 @@
 import { VariantProps, tv } from "tailwind-variants";
-export { type VariantProps, tv };
+//#region src/lib/tv.d.ts
+type Recipe<V> = (props?: V & {
+  class?: string | undefined;
+}) => string;
+//#endregion
+export { type Recipe, type VariantProps, tv };

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

@@ -1,15 +1,12 @@
 import { animate } from "animejs";
+import { RefObject } from "react";
 //#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>;
+type Keyframes = Parameters<typeof animate>[1];
+declare const useEnter: <T extends HTMLElement>(keyframes: Keyframes) => RefObject<T | null>;
+declare const usePopEnter: (duration?: number) => RefObject<HTMLDivElement | null>;
+declare const useDropEnter: () => RefObject<HTMLDivElement | null>;
+declare const useOverlayEnter: () => RefObject<HTMLDivElement | null>;
+declare const modalPanelEnter: Keyframes;
+declare const useExpand: <T extends HTMLElement>() => RefObject<T | null>;
 //#endregion
 export { modalPanelEnter, useDropEnter, useEnter, useExpand, useOverlayEnter, usePopEnter };

package/dist/link.d.ts

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

package/dist/markdown.d.ts

@@ -1,10 +1,11 @@
+import { JSX } from "react";
 import { MarkdownComponents, MarkdownProps as MarkdownProps$1 } from "@journ/nude/markdown";
 //#region src/markdown.d.ts
-type MarkdownProps = Omit<MarkdownProps$1, 'components'> & {
+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;
+declare const Markdown: ({ components: overrides, className, ...props }: MarkdownProps) => JSX.Element;
 //#endregion
 export { Markdown, type MarkdownProps };

package/dist/message.d.ts

@@ -1,11 +1,12 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/message.d.ts
-type RootProps = ComponentPropsWithRef<'div'> & {
-  from?: 'agent' | 'user';
+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 Root: ({ from, className, ...props }: RootProps) => JSX.Element;
+declare const Bubble: Styled<"div">;
+declare const Highlight: Styled<"span">;
 declare const Message: {
   Root: typeof Root;
   Bubble: typeof Bubble;

package/dist/month-picker.d.ts

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