@journ/bloom 0.1.1 → 0.1.3

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/lib/use-enter.js

@@ -1,4 +1,4 @@
-import { prefersReducedMotion } from "@journ/lift";
+import { prefersReducedMotion } from "@journ/lift/prefers-reduced-motion";
 import { animate } from "animejs";
 import { useLayoutEffect, useRef } from "react";
 //#region src/lib/use-enter.ts

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/list-row.d.ts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithRef, JSX } from "react";
+import { Styled } from "@journ/nude/styled";
+//#region src/list-row.d.ts
+type ListRowTone = "surface" | "soft" | "outline";
+type ToneProps = {
+  tone?: ListRowTone;
+};
+type ListRowProps = ToneProps & ComponentPropsWithRef<"div">;
+type ListRowButtonProps = ToneProps & ComponentPropsWithRef<"button">;
+type ListRowLinkProps = ToneProps & ComponentPropsWithRef<"a">;
+declare const Root: ({ tone, className, ...props }: ListRowProps) => JSX.Element;
+declare const Button: ({ tone, className, children, ...props }: ListRowButtonProps) => JSX.Element;
+declare const Link: ({ tone, className, children, ...props }: ListRowLinkProps) => JSX.Element;
+declare const Leading: Styled<"span">;
+declare const Content: Styled<"span">;
+declare const Title: Styled<"span">;
+declare const Subtitle: Styled<"span">;
+declare const Trailing: Styled<"span">;
+declare const ListRow: {
+  Root: typeof Root;
+  Button: typeof Button;
+  Link: typeof Link;
+  Leading: typeof Leading;
+  Content: typeof Content;
+  Title: typeof Title;
+  Subtitle: typeof Subtitle;
+  Trailing: typeof Trailing;
+};
+//#endregion
+export { ListRow, type ListRowButtonProps, type ListRowLinkProps, type ListRowProps, type ListRowTone };

package/dist/list-row.js

@@ -0,0 +1,73 @@
+import { tv } from "./lib/tv.js";
+import { cn } from "./lib/cn.js";
+import { interactive } from "./lib/interactive.js";
+import { mutedText } from "./lib/text-styles.js";
+import { dim, line, surface } from "./lib/theme.js";
+import { TouchTarget } from "./touch-target.js";
+import { jsx } from "react/jsx-runtime";
+import { ListRow as ListRow$1 } from "@journ/nude/list-row";
+//#region src/list-row.tsx
+const listRow = tv({
+	base: "flex w-full items-center text-left",
+	variants: { tone: {
+		surface: `${surface} rounded-bloom gap-3 px-4 py-3`,
+		soft: `${dim} rounded-bloom gap-2 px-3 py-2.5`,
+		outline: `${line} rounded-bloom min-h-14 gap-3 border px-4 py-3`
+	} },
+	defaultVariants: { tone: "surface" }
+});
+const Root = ({ tone, className, ...props }) => /* @__PURE__ */ jsx(ListRow$1.Root, {
+	...props,
+	className: listRow({
+		tone,
+		class: className
+	})
+});
+const Button = ({ tone, className, children, ...props }) => /* @__PURE__ */ jsx(ListRow$1.Button, {
+	...props,
+	className: listRow({
+		tone,
+		class: cn(interactive, className)
+	}),
+	children: /* @__PURE__ */ jsx(TouchTarget, { children })
+});
+const Link = ({ tone, className, children, ...props }) => /* @__PURE__ */ jsx(ListRow$1.Link, {
+	...props,
+	className: listRow({
+		tone,
+		class: cn(interactive, className)
+	}),
+	children: /* @__PURE__ */ jsx(TouchTarget, { children })
+});
+const Leading = ({ className, ...props }) => /* @__PURE__ */ jsx(ListRow$1.Leading, {
+	...props,
+	className: cn("flex shrink-0 items-center [&>svg]:size-4 [&>svg]:opacity-60", className)
+});
+const Content = ({ className, ...props }) => /* @__PURE__ */ jsx(ListRow$1.Content, {
+	...props,
+	className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className)
+});
+const Title = ({ className, ...props }) => /* @__PURE__ */ jsx(ListRow$1.Title, {
+	...props,
+	className: cn("truncate text-sm/5 font-medium", className)
+});
+const Subtitle = ({ className, ...props }) => /* @__PURE__ */ jsx(ListRow$1.Subtitle, {
+	...props,
+	className: cn(mutedText, "truncate", className)
+});
+const Trailing = ({ className, ...props }) => /* @__PURE__ */ jsx(ListRow$1.Trailing, {
+	...props,
+	className: cn("flex shrink-0 items-center gap-2 text-sm/5 opacity-60 [&>svg]:size-4", className)
+});
+const ListRow = {
+	Root,
+	Button,
+	Link,
+	Leading,
+	Content,
+	Title,
+	Subtitle,
+	Trailing
+};
+//#endregion
+export { ListRow };

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;

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

@@ -1,11 +1,12 @@
 import { IconButtonProps } from "./icon-button.js";
-import { ComponentPropsWithRef } from "react";
+import { JSX } from "react";
 import * as Nude from "@journ/nude/month-stepper-parts";
+import { Styled } from "@journ/nude/styled";
 //#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;
+declare const Root: ({ className, ...props }: Nude.RootProps) => JSX.Element;
+declare const Previous: ({ tone, size, className, children, ...props }: IconButtonProps) => JSX.Element;
+declare const Next: ({ tone, size, className, children, ...props }: IconButtonProps) => JSX.Element;
+declare const Label: Styled<"span">;
 //#endregion
 export { Label, Next, Previous, Root };

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

@@ -1,18 +1,17 @@
-import { ButtonProps } from "./button.js";
+import { PickerTrigger, PickerValue } from "./lib/picker.js";
 import { Empty, Frame, Group, Input as Input$1, ItemIndicator, List } from "./combobox-parts.js";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/multiple-selector-parts";
 import { RootProps } from "@journ/nude/multiple-selector-parts";
+import { Styled } from "@journ/nude/styled";
 //#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;
+declare const Root: typeof Nude.Root;
+declare const useMultipleSelector: typeof Nude.useMultipleSelector;
+declare const Trigger: PickerTrigger;
+declare const Value: PickerValue<ComponentPropsWithRef<typeof Nude.Value>>;
+declare const Tags: () => JSX.Element;
+declare const Input: Styled<typeof Input$1>;
+declare const Item: Styled<typeof Nude.Item>;
+declare const Create: Styled<typeof Nude.Create>;
 //#endregion
 export { Create, Empty, Frame, Group, Input, Item, ItemIndicator, List, Root, type RootProps, Tags, Trigger, Value, useMultipleSelector };

package/dist/multiple-selector-parts.js

@@ -5,8 +5,11 @@ import { Empty, Frame, Group, Input as Input$1, ItemIndicator, List, option } fr
 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 Root = Nude.Root;
+const useMultipleSelector = Nude.useMultipleSelector;
+const picker = stylePicker(Nude);
+const Trigger = picker.Trigger;
+const Value = picker.Value;
 const Tags = () => /* @__PURE__ */ jsx(Nude.Tags, { components: { Tag: Chip.Tag } });
 const Input = (props) => {
 	const { search, setSearch } = useMultipleSelector();

package/dist/multiple-selector.d.ts

@@ -1,16 +1,11 @@
-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";
+import { Create, Input, Item, Root, RootProps, Tags, Trigger, Value, 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;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Value: typeof Value;
   Tags: typeof Tags;
   Content: typeof Content;
   Title: typeof Title;

package/dist/nav-bar.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#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 Root: Styled<"nav">;
+declare const Item: Styled<"a">;
 declare const NavBar: {
   Root: typeof Root;
   Item: typeof Item;

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

@@ -1,12 +1,13 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/navigation-menu-parts";
+import { Styled } from "@journ/nude/styled";
 //#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;
+declare const Root: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Root>, "classNames">) => JSX.Element;
+declare const List: Styled<typeof Nude.List>;
+declare const Item: typeof Nude.Item;
+declare const Trigger: Styled<typeof Nude.Trigger>;
+declare const Content: Styled<typeof Nude.Content>;
+declare const Link: Styled<typeof Nude.Link>;
 //#endregion
 export { Content, Item, Link, List, Root, Trigger };

package/dist/navigation-menu.d.ts

@@ -1,9 +1,9 @@
-import { Content, Link, List, Root, Trigger } from "./navigation-menu-parts.js";
+import { Content, Item, 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;
+  Item: typeof Item;
   Trigger: typeof Trigger;
   Content: typeof Content;
   Link: typeof Link;

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

@@ -1,8 +1,8 @@
-import { ComponentPropsWithRef } from "react";
 import * as Nude from "@journ/nude/otp-input-parts";
+import { Styled } from "@journ/nude/styled";
 //#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;
+declare const Root: Styled<typeof Nude.Root>;
+declare const Slot: Styled<typeof Nude.Slot>;
+declare const Hidden: typeof Nude.Hidden;
 //#endregion
 export { Hidden, Root, Slot };

package/dist/otp-input.d.ts

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

package/dist/page-header.d.ts

@@ -1,8 +1,8 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#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 Root: Styled<"header">;
+declare const Title: Styled<"h1">;
+declare const Actions: Styled<"div">;
 declare const PageHeader: {
   Root: typeof Root;
   Title: typeof Title;

package/dist/page.d.ts

@@ -1,41 +1,14 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { PageTint } from "./lib/tones.js";
+import { ComponentPropsWithRef, JSX } from "react";
+import { Styled } from "@journ/nude/styled";
 //#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;
+type PageTone = "canvas" | "ink" | PageTint;
+type RootProps = ComponentPropsWithRef<"div"> & {
+  tone?: PageTone;
+};
+declare const Root: ({ tone, className, ...props }: RootProps) => JSX.Element;
+declare const Content: Styled<"main">;
+declare const Footer: Styled<"div">;
 declare const Page: {
   Root: typeof Root;
   Content: typeof Content;

package/dist/pagination.d.ts

@@ -1,11 +1,11 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/pagination.d.ts
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<'nav'>) => import("react").JSX.Element;
-declare const List: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Previous: ({ className, children, ...props }: ComponentPropsWithRef<'a'>) => import("react").JSX.Element;
-declare const Next: ({ className, children, ...props }: ComponentPropsWithRef<'a'>) => import("react").JSX.Element;
-declare const Page: ({ className, children, ...props }: ComponentPropsWithRef<'a'>) => import("react").JSX.Element;
-declare const Gap: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
+declare const Root: Styled<"nav">;
+declare const List: Styled<"div">;
+declare const Previous: Styled<"a">;
+declare const Next: Styled<"a">;
+declare const Page: Styled<"a">;
+declare const Gap: Styled<"span">;
 declare const Pagination: {
   Root: typeof Root;
   Previous: typeof Previous;

package/dist/pill-select.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/pill-select.d.ts
-declare const PillSelect: ({ className, children, ...props }: ComponentPropsWithRef<'select'>) => import("react").JSX.Element;
+declare const PillSelect: Styled<"select">;
 //#endregion
 export { PillSelect };

package/dist/popover-parts.d.ts

@@ -1,9 +1,9 @@
-import { ComponentPropsWithRef } from "react";
 import * as Nude from "@journ/nude/popover-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/popover-parts.d.ts
-declare const Root: any;
-declare const Trigger: any;
-declare const Close: 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 Close: typeof Nude.Close;
+declare const Content: Styled<typeof Nude.Content>;
 //#endregion
 export { Close, Content, Root, Trigger };

package/dist/popover.d.ts

@@ -1,10 +1,10 @@
-import { Content } from "./popover-parts.js";
+import { Close, Content, Root, Trigger } from "./popover-parts.js";
 //#region src/popover.d.ts
 declare const Popover: {
-  Root: any;
-  Trigger: any;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
   Content: typeof Content;
-  Close: any;
+  Close: typeof Close;
 };
 //#endregion
 export { Popover };

package/dist/progress-parts.d.ts

@@ -1,38 +1,12 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { Fill } from "./lib/tones.js";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/progress-parts";
 //#region src/progress-parts.d.ts
 type RootProps = Nude.ProgressProps;
-declare const Root: ({ className, ...props }: RootProps) => import("react").JSX.Element;
-declare const indicator: import("tailwind-variants").TVReturnType<{
-  tone: {
-    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';
-  };
-}, undefined, "size-full transition-transform duration-300 ease-out", {
-  tone: {
-    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';
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  tone: {
-    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';
-  };
-}, undefined>>;
-type IndicatorProps = ComponentPropsWithRef<typeof Nude.Indicator> & VariantProps<typeof indicator>;
-declare const Indicator: ({ tone, className, ...props }: IndicatorProps) => import("react").JSX.Element;
+declare const Root: ({ className, ...props }: RootProps) => JSX.Element;
+type IndicatorProps = ComponentPropsWithRef<typeof Nude.Indicator> & {
+  tone?: Fill;
+};
+declare const Indicator: ({ tone, className, ...props }: IndicatorProps) => JSX.Element;
 //#endregion
 export { Indicator, type RootProps as ProgressProps, Root };