@journ/bloom 0.1.1 → 0.1.3

package/dist/dropdown-menu.d.ts

@@ -1,20 +1,13 @@
+import { Content, Group, Item, Label, Root, Separator, Trigger } from "./dropdown-menu-parts.js";
 //#region src/dropdown-menu.d.ts
 declare const DropdownMenu: {
-  Root: any;
-  Trigger: any;
-  Content: ({ className, ...props }: import("react").ComponentPropsWithRef<any> & {
-    className?: string;
-  }) => import("react").JSX.Element;
-  Group: any;
-  Label: ({ className, ...props }: import("react").ComponentPropsWithRef<any> & {
-    className?: string;
-  }) => import("react").JSX.Element;
-  Item: ({ className, ...props }: import("react").ComponentPropsWithRef<any> & {
-    className?: string;
-  }) => import("react").JSX.Element;
-  Separator: ({ className, ...props }: import("react").ComponentPropsWithRef<any> & {
-    className?: string;
-  }) => import("react").JSX.Element;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Content: typeof Content;
+  Group: typeof Group;
+  Label: typeof Label;
+  Item: typeof Item;
+  Separator: typeof Separator;
 };
 //#endregion
 export { DropdownMenu };

package/dist/empty-state.d.ts

@@ -1,10 +1,10 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/empty-state.d.ts
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Icon: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
-declare const Title: ({ className, ...props }: ComponentPropsWithRef<'h3'>) => import("react").JSX.Element;
-declare const Description: ({ className, ...props }: ComponentPropsWithRef<'p'>) => import("react").JSX.Element;
-declare const Actions: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+declare const Root: Styled<"div">;
+declare const Icon: Styled<"span">;
+declare const Title: Styled<"h3">;
+declare const Description: Styled<"p">;
+declare const Actions: Styled<"div">;
 declare const EmptyState: {
   Root: typeof Root;
   Icon: typeof Icon;

package/dist/field-parts.d.ts

@@ -1,10 +1,10 @@
-import { ComponentPropsWithRef } from "react";
 import * as Nude from "@journ/nude/field-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/field-parts.d.ts
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Root>) => import("react").JSX.Element;
-declare const Label: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Label>) => import("react").JSX.Element;
-declare const Description: ({ className, ...props }: ComponentPropsWithRef<'p'>) => import("react").JSX.Element;
-declare const FieldError: ({ className, ...props }: ComponentPropsWithRef<'p'>) => import("react").JSX.Element;
-declare const Control: any;
+declare const Root: Styled<typeof Nude.Root>;
+declare const Label: Styled<typeof Nude.Label>;
+declare const Description: Styled<"p">;
+declare const FieldError: Styled<"p">;
+declare const Control: typeof Nude.Control;
 //#endregion
 export { Control, Description, FieldError as Error, Label, Root };

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";
@@ -47,6 +47,7 @@ import { Icon } from "./icon.js";
 import { Input } from "./input.js";
 import { ClassValue, cn } from "./lib/cn.js";
 import { Link } from "./link.js";
+import { ListRow, ListRowButtonProps, ListRowLinkProps, ListRowProps, ListRowTone } from "./list-row.js";
 import { Markdown, MarkdownProps } from "./markdown.js";
 import { Message } from "./message.js";
 import { RootProps as RootProps$9 } from "./month-picker-parts.js";
@@ -93,4 +94,4 @@ import { Toast } from "./toast.js";
 import { ToggleGroup } from "./toggle-group.js";
 import { Tooltip } from "./tooltip.js";
 import { TouchTarget } from "./touch-target.js";
-export { Accordion, Alert, AlertDialog, AnimatedSize, type AnimatedSizeProps, Avatar, Badge, Breadcrumbs, BulkBar, Button, type ButtonProps, Calendar, type CalendarActions, type CalendarContextValue, type CalendarMeta, type RootProps as CalendarProps, type CalendarState, type CalendarView, Card, type CardProps, Carousel, type RootProps$1 as CarouselProps, Checkbox, Chip, type RootProps$2 as ChipProps, type ClassValue, Collapsible, Combobox, type ComboboxActions, type ComboboxContextValue, type RootProps$3 as ComboboxProps, type ComboboxState, CommandPalette, type RootProps$4 as CommandPaletteProps, Composer, ContextMenu, CurrencyInput, type RootProps$5 as CurrencyInputProps, DataTable, type DataTableColumn, type RootProps$6 as DataTableProps, DateInput, DatePicker, type DatePickerActions, type DatePickerContextValue, type DatePickerMeta, type RootProps$7 as DatePickerProps, type DatePickerState, type DateRange, DateRangePicker, type DateRangePickerActions, type DateRangePickerContextValue, type DateRangePickerMeta, type RootProps$8 as DateRangePickerProps, type DateRangePickerState, DescriptionList, Dialog, Divider, Drawer, DropdownMenu, EmptyState, Field, FileDropzone, type FileRejection, Heading, HoverCard, Icon, IconButton, type IconButtonProps, Input, Link, Markdown, type MarkdownProps, Message, MonthPicker, type RootProps$9 as MonthPickerProps, MonthStepper, MultipleSelector, type RootProps$10 as MultipleSelectorProps, NavBar, NavigationMenu, OtpInput, Page, PageHeader, type RootProps$11 as PageProps, Pagination, PillSelect, Popover, Portal, type PortalProps, Progress, QuantityInput, type RootProps$12 as QuantityInputProps, Radio, type RejectionReason, ScrollArea, Select, Sheet, type ContentProps as SheetContentProps, type Side as SheetSide, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, TagInput, type RootProps$13 as TagInputProps, Text, TextMorph, type TextMorphProps, TextShimmer, type TextShimmerProps, Textarea, TimeRange, type RootProps$14 as TimeRangeProps, type TimeRangeValue, Toast, ToggleGroup, Tooltip, TouchTarget, type VariantProps, type Weekday, cn, dataTableColumns, selectColumn, tv, useCalendar, useCarousel, useCombobox, useDataTable, useDatePicker, useDateRangePicker, useMultipleSelector, useTagInput };
+export { Accordion, Alert, AlertDialog, AnimatedSize, type AnimatedSizeProps, Avatar, Badge, Breadcrumbs, BulkBar, Button, type ButtonProps, Calendar, type CalendarActions, type CalendarContextValue, type CalendarMeta, type RootProps as CalendarProps, type CalendarState, type CalendarView, Card, type CardProps, Carousel, type RootProps$1 as CarouselProps, Checkbox, Chip, type RootProps$2 as ChipProps, type ClassValue, Collapsible, Combobox, type ComboboxActions, type ComboboxContextValue, type RootProps$3 as ComboboxProps, type ComboboxState, CommandPalette, type RootProps$4 as CommandPaletteProps, Composer, ContextMenu, CurrencyInput, type RootProps$5 as CurrencyInputProps, DataTable, type DataTableColumn, type RootProps$6 as DataTableProps, DateInput, DatePicker, type DatePickerActions, type DatePickerContextValue, type DatePickerMeta, type RootProps$7 as DatePickerProps, type DatePickerState, type DateRange, DateRangePicker, type DateRangePickerActions, type DateRangePickerContextValue, type DateRangePickerMeta, type RootProps$8 as DateRangePickerProps, type DateRangePickerState, DescriptionList, Dialog, Divider, Drawer, DropdownMenu, EmptyState, Field, FileDropzone, type FileRejection, Heading, HoverCard, Icon, IconButton, type IconButtonProps, Input, Link, ListRow, type ListRowButtonProps, type ListRowLinkProps, type ListRowProps, type ListRowTone, Markdown, type MarkdownProps, Message, MonthPicker, type RootProps$9 as MonthPickerProps, MonthStepper, MultipleSelector, type RootProps$10 as MultipleSelectorProps, NavBar, NavigationMenu, OtpInput, Page, PageHeader, type RootProps$11 as PageProps, Pagination, PillSelect, Popover, Portal, type PortalProps, Progress, QuantityInput, type RootProps$12 as QuantityInputProps, Radio, type RejectionReason, ScrollArea, Select, Sheet, type ContentProps as SheetContentProps, type Side as SheetSide, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, TagInput, type RootProps$13 as TagInputProps, Text, TextMorph, type TextMorphProps, TextShimmer, type TextShimmerProps, Textarea, TimeRange, type RootProps$14 as TimeRangeProps, type TimeRangeValue, Toast, ToggleGroup, Tooltip, TouchTarget, type VariantProps, type Weekday, cn, dataTableColumns, selectColumn, tv, useCalendar, useCarousel, useCombobox, useDataTable, useDatePicker, useDateRangePicker, useMultipleSelector, useTagInput };

package/dist/index.js

@@ -48,6 +48,7 @@ import { Heading } from "./heading.js";
 import { HoverCard } from "./hover-card.js";
 import { Icon } from "./icon.js";
 import { Link } from "./link.js";
+import { ListRow } from "./list-row.js";
 import { Markdown } from "./markdown.js";
 import { Message } from "./message.js";
 import { MonthPicker } from "./month-picker.js";
@@ -86,4 +87,4 @@ import { TimeRange } from "./time-range.js";
 import { Toast } from "./toast.js";
 import { ToggleGroup } from "./toggle-group.js";
 import { Tooltip } from "./tooltip.js";
-export { Accordion, Alert, AlertDialog, AnimatedSize, Avatar, Badge, Breadcrumbs, BulkBar, Button, Calendar, Card, Carousel, Checkbox, Chip, Collapsible, Combobox, CommandPalette, Composer, ContextMenu, CurrencyInput, DataTable, DateInput, DatePicker, DateRangePicker, DescriptionList, Dialog, Divider, Drawer, DropdownMenu, EmptyState, Field, FileDropzone, Heading, HoverCard, Icon, IconButton, Input, Link, Markdown, Message, MonthPicker, MonthStepper, MultipleSelector, NavBar, NavigationMenu, OtpInput, Page, PageHeader, Pagination, PillSelect, Popover, Portal, Progress, QuantityInput, Radio, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, TagInput, Text, TextMorph, TextShimmer, Textarea, TimeRange, Toast, ToggleGroup, Tooltip, TouchTarget, cn, dataTableColumns, selectColumn, tv, useCalendar, useCarousel, useCombobox, useDataTable, useDatePicker, useDateRangePicker, useMultipleSelector, useTagInput };
+export { Accordion, Alert, AlertDialog, AnimatedSize, Avatar, Badge, Breadcrumbs, BulkBar, Button, Calendar, Card, Carousel, Checkbox, Chip, Collapsible, Combobox, CommandPalette, Composer, ContextMenu, CurrencyInput, DataTable, DateInput, DatePicker, DateRangePicker, DescriptionList, Dialog, Divider, Drawer, DropdownMenu, EmptyState, Field, FileDropzone, Heading, HoverCard, Icon, IconButton, Input, Link, ListRow, Markdown, Message, MonthPicker, MonthStepper, MultipleSelector, NavBar, NavigationMenu, OtpInput, Page, PageHeader, Pagination, PillSelect, Popover, Portal, Progress, QuantityInput, Radio, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, Spinner, Stack, Stat, Stepper, Switch, Table, Tabs, TagInput, Text, TextMorph, TextShimmer, Textarea, TimeRange, Toast, ToggleGroup, Tooltip, TouchTarget, cn, dataTableColumns, selectColumn, tv, useCalendar, useCarousel, useCombobox, useDataTable, useDatePicker, useDateRangePicker, useMultipleSelector, useTagInput };

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. */