@journ/bloom 0.1.1 → 0.1.3

package/DESIGN.md

@@ -88,7 +88,7 @@ Every pressable thing shares `src/lib/interactive.ts`:
 - Disabled and `aria-disabled` dim to 50% and ignore pointer events.
 - `TouchTarget` expands the hit area to at least 44x44px on touch devices only.
 
-Use `Button`, `IconButton` or `NavBar.Item` for anything pressable. Do not hand-roll pressable elements.
+Use `Button`, `IconButton`, `NavBar.Item`, `ListRow.Button` or `ListRow.Link` for anything pressable. Do not hand-roll pressable elements.
 
 ### Shared building blocks
 
@@ -166,7 +166,7 @@ Follow the composable pattern (`folio kb get react-composition-patterns`).
 | `radius`  | An arbitrary radius. Use `rounded-bloom`, `rounded-full` or the scale; `rounded-[inherit]` is allowed                                                                |
 | `import`  | A direct import of a library that belongs to nude                                                                                                                    |
 
-The check cannot judge intent, so these stay review rules: `gap-4` between blocks and `gap-3` inside cards, `bloom-ink` text on colored fills, `tabular-nums` on numbers, the 200ms motion budget, and using `Button`, `IconButton` or `NavBar.Item` for anything pressable.
+The check cannot judge intent, so these stay review rules: `gap-4` between blocks and `gap-3` inside cards, `bloom-ink` text on colored fills, `tabular-nums` on numbers, the 200ms motion budget, and using `Button`, `IconButton`, `NavBar.Item`, `ListRow.Button` or `ListRow.Link` for anything pressable.
 
 ## Theming
 
@@ -231,6 +231,7 @@ Import from `@journ/bloom` or per file (`@journ/bloom/card`). The library named
 | `IconButton`                    | single element, `tone`, `size`                                                                                                                                                        |
 | `Input`                         | single element, native `<input>`                                                                                                                                                      |
 | `Link`                          | single element, `asChild` styles a router link                                                                                                                                        |
+| `ListRow`                       | `Root` (static), `Button` or `Link` (pressable), each with `tone`; `Leading`, `Content`, `Title`, `Subtitle`, `Trailing`                                                              |
 | `Markdown` (react-markdown)     | single element, `components` overrides                                                                                                                                                |
 | `MonthStepper`                  | `Root` (`value`, `locale`), `Previous`, `Label`, `Next`                                                                                                                               |
 | `Message`                       | `Root` (`from`), `Bubble`, `Highlight`                                                                                                                                                |

package/dist/accordion-parts.d.ts

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

package/dist/accordion.d.ts

@@ -1,7 +1,7 @@
-import { Content, Item, Trigger } from "./accordion-parts.js";
+import { Content, Item, Root, Trigger } from "./accordion-parts.js";
 //#region src/accordion.d.ts
 declare const Accordion: {
-  Root: any;
+  Root: typeof Root;
   Item: typeof Item;
   Trigger: typeof Trigger;
   Content: typeof Content;

package/dist/alert-dialog-parts.d.ts

@@ -1,16 +1,18 @@
 import { Actions } from "./lib/modal-parts.js";
-import { centeredPanel } from "./lib/overlay.js";
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { SurfaceTone } from "./lib/tones.js";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/alert-dialog-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/alert-dialog-parts.d.ts
-declare const Root: any;
-declare const Trigger: any;
-declare const Cancel: any;
-declare const Action: any;
-type ContentProps = Omit<ComponentPropsWithRef<typeof Nude.Content>, 'classNames' | 'overlayRef'> & VariantProps<typeof centeredPanel>;
-declare const Content: ({ tone, className, ...props }: ContentProps) => import("react").JSX.Element;
-declare const Title: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Title>) => import("react").JSX.Element;
-declare const Description: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Description>) => import("react").JSX.Element;
+declare const Root: typeof Nude.Root;
+declare const Trigger: typeof Nude.Trigger;
+declare const Cancel: typeof Nude.Cancel;
+declare const Action: typeof Nude.Action;
+type ContentProps = Omit<ComponentPropsWithRef<typeof Nude.Content>, "classNames" | "overlayRef"> & {
+  tone?: SurfaceTone;
+};
+declare const Content: ({ tone, className, ...props }: ContentProps) => JSX.Element;
+declare const Title: Styled<typeof Nude.Title>;
+declare const Description: Styled<typeof Nude.Description>;
 //#endregion
 export { Action, Actions, Cancel, Content, Description, Root, Title, Trigger };

package/dist/alert-dialog.d.ts

@@ -1,15 +1,15 @@
 import { Actions } from "./lib/modal-parts.js";
-import { Content, Description, Title } from "./alert-dialog-parts.js";
+import { Action, Cancel, Content, Description, Root, Title, Trigger } from "./alert-dialog-parts.js";
 //#region src/alert-dialog.d.ts
 declare const AlertDialog: {
-  Root: any;
-  Trigger: any;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
   Content: typeof Content;
   Title: typeof Title;
   Description: typeof Description;
   Actions: typeof Actions;
-  Cancel: any;
-  Action: any;
+  Cancel: typeof Cancel;
+  Action: typeof Action;
 };
 //#endregion
 export { AlertDialog };

package/dist/alert.d.ts

@@ -1,41 +1,16 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { SurfaceTone } from "./lib/tones.js";
+import { ComponentPropsWithRef, JSX } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/alert.d.ts
-declare const alertRoot: 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 flex items-start gap-3 p-4", {
-  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>>;
-type RootProps = ComponentPropsWithRef<'div'> & VariantProps<typeof alertRoot>;
-declare const Root: ({ tone, className, ...props }: RootProps) => import("react").JSX.Element;
-declare const Icon: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
-declare const Body: ({ className, ...props }: ComponentPropsWithRef<'div'>) => 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 Actions: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+type RootProps = ComponentPropsWithRef<"div"> & {
+  tone?: SurfaceTone;
+};
+declare const Root: ({ tone, className, ...props }: RootProps) => JSX.Element;
+declare const Icon: Styled<"span">;
+declare const Body: Styled<"div">;
+declare const Title: Styled<"p">;
+declare const Description: Styled<"p">;
+declare const Actions: Styled<"div">;
 declare const Alert: {
   Root: typeof Root;
   Icon: typeof Icon;

package/dist/animated-size.d.ts

@@ -1,6 +1,7 @@
+import { JSX } from "react";
 import { AnimatedSizeProps as AnimatedSizeProps$1 } from "@journ/nude/animated-size";
 //#region src/animated-size.d.ts
-type AnimatedSizeProps = Omit<AnimatedSizeProps$1, 'classNames'>;
-declare const AnimatedSize: ({ width, className, ...props }: AnimatedSizeProps) => import("react").JSX.Element;
+type AnimatedSizeProps = Omit<AnimatedSizeProps$1, "classNames">;
+declare const AnimatedSize: ({ width, className, ...props }: AnimatedSizeProps) => JSX.Element;
 //#endregion
 export { AnimatedSize, type AnimatedSizeProps };

package/dist/avatar-parts.d.ts

@@ -1,10 +1,11 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/avatar-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/avatar-parts.d.ts
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Root>) => import("react").JSX.Element;
+declare const Root: Styled<typeof Nude.Root>;
 declare const Image: ({ className, alt, ...props }: ComponentPropsWithRef<typeof Nude.Image> & {
   alt: string;
-}) => import("react").JSX.Element;
-declare const Fallback: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Fallback>) => import("react").JSX.Element;
+}) => JSX.Element;
+declare const Fallback: Styled<typeof Nude.Fallback>;
 //#endregion
 export { Fallback, Image, Root };

package/dist/badge.d.ts

@@ -1,38 +1,10 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { LabelTone } from "./lib/tones.js";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/badge.d.ts
-declare const badge: import("tailwind-variants").TVReturnType<{
-  tone: {
-    neutral: "bg-bloom-foreground/8 dark:bg-bloom-foreground-dark/10 text-bloom-foreground dark:text-bloom-foreground-dark";
-    coral: 'bg-bloom-coral/15 text-bloom-foreground dark:text-bloom-coral';
-    yellow: 'bg-bloom-yellow/25 text-bloom-foreground dark:bg-bloom-yellow/15 dark:text-bloom-yellow';
-    indigo: 'bg-bloom-indigo/15 text-bloom-foreground dark:text-bloom-indigo';
-    mint: 'bg-bloom-mint/20 text-bloom-foreground dark:bg-bloom-mint/15 dark:text-bloom-mint';
-    sky: 'bg-bloom-sky/15 text-bloom-foreground dark:text-bloom-sky';
-    ink: "bg-bloom-ink text-bloom-paper";
-  };
-}, undefined, "inline-flex items-center rounded-full px-2.5 py-0.5 font-mono text-xs/5 tabular-nums", {
-  tone: {
-    neutral: "bg-bloom-foreground/8 dark:bg-bloom-foreground-dark/10 text-bloom-foreground dark:text-bloom-foreground-dark";
-    coral: 'bg-bloom-coral/15 text-bloom-foreground dark:text-bloom-coral';
-    yellow: 'bg-bloom-yellow/25 text-bloom-foreground dark:bg-bloom-yellow/15 dark:text-bloom-yellow';
-    indigo: 'bg-bloom-indigo/15 text-bloom-foreground dark:text-bloom-indigo';
-    mint: 'bg-bloom-mint/20 text-bloom-foreground dark:bg-bloom-mint/15 dark:text-bloom-mint';
-    sky: 'bg-bloom-sky/15 text-bloom-foreground dark:text-bloom-sky';
-    ink: "bg-bloom-ink text-bloom-paper";
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  tone: {
-    neutral: "bg-bloom-foreground/8 dark:bg-bloom-foreground-dark/10 text-bloom-foreground dark:text-bloom-foreground-dark";
-    coral: 'bg-bloom-coral/15 text-bloom-foreground dark:text-bloom-coral';
-    yellow: 'bg-bloom-yellow/25 text-bloom-foreground dark:bg-bloom-yellow/15 dark:text-bloom-yellow';
-    indigo: 'bg-bloom-indigo/15 text-bloom-foreground dark:text-bloom-indigo';
-    mint: 'bg-bloom-mint/20 text-bloom-foreground dark:bg-bloom-mint/15 dark:text-bloom-mint';
-    sky: 'bg-bloom-sky/15 text-bloom-foreground dark:text-bloom-sky';
-    ink: "bg-bloom-ink text-bloom-paper";
-  };
-}, undefined>>;
-type BadgeProps = ComponentPropsWithRef<'span'> & VariantProps<typeof badge>;
-declare const Badge: ({ tone, className, ...props }: BadgeProps) => import("react").JSX.Element;
+type BadgeTone = LabelTone | "ink";
+type BadgeProps = ComponentPropsWithRef<"span"> & {
+  tone?: BadgeTone;
+};
+declare const Badge: ({ tone, className, ...props }: BadgeProps) => JSX.Element;
 //#endregion
 export { Badge, type BadgeProps };

package/dist/breadcrumbs.d.ts

@@ -1,11 +1,11 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/breadcrumbs.d.ts
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<'nav'>) => import("react").JSX.Element;
-declare const List: ({ className, ...props }: ComponentPropsWithRef<'ol'>) => import("react").JSX.Element;
-declare const Item: ({ className, ...props }: ComponentPropsWithRef<'li'>) => import("react").JSX.Element;
-declare const Link: ({ className, ...props }: ComponentPropsWithRef<'a'>) => import("react").JSX.Element;
-declare const Page: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
-declare const Separator: ({ className, ...props }: ComponentPropsWithRef<'li'>) => import("react").JSX.Element;
+declare const Root: Styled<"nav">;
+declare const List: Styled<"ol">;
+declare const Item: Styled<"li">;
+declare const Link: Styled<"a">;
+declare const Page: Styled<"span">;
+declare const Separator: Styled<"li">;
 declare const Breadcrumbs: {
   Root: typeof Root;
   List: typeof List;

package/dist/bulk-bar.d.ts

@@ -1,9 +1,9 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/bulk-bar.d.ts
 /** Render it while something is selected; it floats at the bottom of the page. */
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Count: ({ 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 Count: Styled<"p">;
+declare const Actions: Styled<"div">;
 declare const BulkBar: {
   Root: typeof Root;
   Count: typeof Count;

package/dist/button.d.ts

@@ -1,40 +1,15 @@
-import { VariantProps } from "./lib/tv.js";
-import { ReactNode } from "react";
+import { Recipe } from "./lib/tv.js";
+import { JSX, ReactNode } from "react";
 import { ButtonProps as ButtonProps$1 } from "@journ/nude/button";
 //#region src/button.d.ts
-declare const button: import("tailwind-variants").TVReturnType<{
-  tone: {
-    neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
-    field: "border border-bloom-line dark:border-bloom-line-dark bg-transparent text-bloom-foreground dark:text-bloom-foreground-dark";
-    coral: "bg-bloom-coral text-bloom-paper";
-    yellow: "bg-bloom-yellow text-bloom-ink";
-    ink: "bg-bloom-ink text-bloom-paper";
-    ghost: "bg-transparent text-inherit";
-    outline: "border border-current/20 bg-transparent text-inherit";
-  };
-}, undefined, string[], {
-  tone: {
-    neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
-    field: "border border-bloom-line dark:border-bloom-line-dark bg-transparent text-bloom-foreground dark:text-bloom-foreground-dark";
-    coral: "bg-bloom-coral text-bloom-paper";
-    yellow: "bg-bloom-yellow text-bloom-ink";
-    ink: "bg-bloom-ink text-bloom-paper";
-    ghost: "bg-transparent text-inherit";
-    outline: "border border-current/20 bg-transparent text-inherit";
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  tone: {
-    neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark text-bloom-canvas dark:text-bloom-canvas-dark";
-    field: "border border-bloom-line dark:border-bloom-line-dark bg-transparent text-bloom-foreground dark:text-bloom-foreground-dark";
-    coral: "bg-bloom-coral text-bloom-paper";
-    yellow: "bg-bloom-yellow text-bloom-ink";
-    ink: "bg-bloom-ink text-bloom-paper";
-    ghost: "bg-transparent text-inherit";
-    outline: "border border-current/20 bg-transparent text-inherit";
-  };
-}, undefined>>;
-type ButtonProps = VariantProps<typeof button> & ButtonProps$1;
-declare const buttonContent: (children: ReactNode, pending?: boolean) => import("react").JSX.Element;
-declare const Button: ({ tone, pending, className, children, ...props }: ButtonProps) => import("react").JSX.Element;
+type ButtonTone = "neutral" | "field" | "coral" | "yellow" | "ink" | "ghost" | "outline";
+declare const button: Recipe<{
+  tone?: ButtonTone;
+}>;
+type ButtonProps = {
+  tone?: ButtonTone;
+} & ButtonProps$1;
+declare const buttonContent: (children: ReactNode, pending?: boolean) => JSX.Element;
+declare const Button: ({ tone, pending, className, children, ...props }: ButtonProps) => JSX.Element;
 //#endregion
 export { Button, type ButtonProps, button, buttonContent };

package/dist/calendar-parts.d.ts

@@ -1,17 +1,23 @@
 import { IconButtonProps } from "./icon-button.js";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
+import * as Nude from "@journ/nude/calendar-parts";
 import { CalendarActions, CalendarContextValue, CalendarMeta, CalendarRange, CalendarState, CalendarView, RootProps, Weekday } from "@journ/nude/calendar-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/calendar-parts.d.ts
-declare const YEAR_PAGE_SIZE: any, Provider: any, Root: any, useCalendar: any, useCalendarNavigation: any;
-declare const Frame: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Header: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Heading: ({ className, ...props }: Omit<ComponentPropsWithRef<'button'>, 'children'>) => 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;
-type GridProps = Omit<ComponentPropsWithRef<'div'>, 'children'>;
-declare const Weekdays: ({ className, ...props }: GridProps) => import("react").JSX.Element;
-declare const Days: ({ className, ...props }: GridProps) => import("react").JSX.Element;
-declare const Months: ({ className, ...props }: GridProps) => import("react").JSX.Element;
-declare const Years: ({ className, ...props }: GridProps) => import("react").JSX.Element;
+declare const YEAR_PAGE_SIZE: typeof Nude.YEAR_PAGE_SIZE;
+declare const Provider: typeof Nude.Provider;
+declare const Root: typeof Nude.Root;
+declare const useCalendar: typeof Nude.useCalendar;
+declare const useCalendarNavigation: typeof Nude.useCalendarNavigation;
+declare const Frame: Styled<"div">;
+declare const Header: Styled<"div">;
+declare const Heading: ({ className, ...props }: Omit<ComponentPropsWithRef<"button">, "children">) => JSX.Element;
+declare const Previous: ({ tone, size, className, children, ...props }: IconButtonProps) => JSX.Element;
+declare const Next: ({ tone, size, className, children, ...props }: IconButtonProps) => JSX.Element;
+type GridProps = Omit<ComponentPropsWithRef<"div">, "children">;
+declare const Weekdays: ({ className, ...props }: GridProps) => JSX.Element;
+declare const Days: ({ className, ...props }: GridProps) => JSX.Element;
+declare const Months: ({ className, ...props }: GridProps) => JSX.Element;
+declare const Years: ({ className, ...props }: GridProps) => JSX.Element;
 //#endregion
 export { type CalendarActions, type CalendarContextValue, type CalendarMeta, type CalendarRange, type CalendarState, type CalendarView, Days, Frame, Header, Heading, Months, Next, Previous, Provider, Root, type RootProps, type Weekday, Weekdays, YEAR_PAGE_SIZE, Years, useCalendar, useCalendarNavigation };

package/dist/calendar-parts.js

@@ -9,7 +9,11 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import * as Nude from "@journ/nude/calendar-parts";
 //#region src/calendar-parts.tsx
-const { YEAR_PAGE_SIZE, Provider, Root, useCalendar, useCalendarNavigation } = Nude;
+const YEAR_PAGE_SIZE = Nude.YEAR_PAGE_SIZE;
+const Provider = Nude.Provider;
+const Root = Nude.Root;
+const useCalendar = Nude.useCalendar;
+const useCalendarNavigation = Nude.useCalendarNavigation;
 const Frame = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Frame, {
 	...props,
 	className: cn("flex w-full flex-col gap-3", className)

package/dist/calendar.d.ts

@@ -1,8 +1,8 @@
-import { CalendarActions, CalendarContextValue, CalendarMeta, CalendarRange, CalendarState, CalendarView, Days, Frame, Header, Heading, Months, Next, Previous, RootProps, Weekday, Weekdays, Years, useCalendar } from "./calendar-parts.js";
+import { CalendarActions, CalendarContextValue, CalendarMeta, CalendarRange, CalendarState, CalendarView, Days, Frame, Header, Heading, Months, Next, Previous, Provider, Root, RootProps, Weekday, Weekdays, Years, useCalendar } from "./calendar-parts.js";
 //#region src/calendar.d.ts
 declare const Calendar: {
-  Provider: any;
-  Root: any;
+  Provider: typeof Provider;
+  Root: typeof Root;
   Frame: typeof Frame;
   Header: typeof Header;
   Heading: typeof Heading;

package/dist/card.d.ts

@@ -1,42 +1,17 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { SurfaceTone } from "./lib/tones.js";
+import { ComponentPropsWithRef, JSX } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/card.d.ts
-declare const cardRoot: 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 flex flex-col gap-3 p-6", {
-  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>>;
-type RootProps = ComponentPropsWithRef<'div'> & VariantProps<typeof cardRoot>;
-declare const Root: ({ tone, className, ...props }: RootProps) => import("react").JSX.Element;
-declare const Header: ({ className, ...props }: ComponentPropsWithRef<'div'>) => 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 Content: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Footer: ({ className, ...props }: ComponentPropsWithRef<'footer'>) => import("react").JSX.Element;
-declare const Icon: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
+type RootProps = ComponentPropsWithRef<"div"> & {
+  tone?: SurfaceTone;
+};
+declare const Root: ({ tone, className, ...props }: RootProps) => JSX.Element;
+declare const Header: Styled<"div">;
+declare const Title: Styled<"h3">;
+declare const Description: Styled<"p">;
+declare const Content: Styled<"div">;
+declare const Footer: Styled<"footer">;
+declare const Icon: Styled<"span">;
 declare const Card: {
   Root: typeof Root;
   Icon: typeof Icon;

package/dist/carousel-parts.d.ts

@@ -1,13 +1,14 @@
 import { IconButtonProps } from "./icon-button.js";
-import { ComponentPropsWithRef } from "react";
+import { JSX } from "react";
 import * as Nude from "@journ/nude/carousel-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/carousel-parts.d.ts
-declare const useCarousel: any;
+declare const useCarousel: typeof Nude.useCarousel;
 type RootProps = Nude.RootProps;
-declare const Root: ({ className, ...props }: RootProps) => import("react").JSX.Element;
-declare const Content: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Item: ({ className, ...props }: ComponentPropsWithRef<'div'>) => 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 Root: ({ className, ...props }: RootProps) => JSX.Element;
+declare const Content: Styled<"div">;
+declare const Item: Styled<"div">;
+declare const Previous: ({ tone, size, className, children, ...props }: IconButtonProps) => JSX.Element;
+declare const Next: ({ tone, size, className, children, ...props }: IconButtonProps) => JSX.Element;
 //#endregion
 export { Content, Item, Next, Previous, Root, type RootProps, useCarousel };

package/dist/carousel-parts.js

@@ -5,7 +5,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import * as Nude from "@journ/nude/carousel-parts";
 //#region src/carousel-parts.tsx
-const { useCarousel } = Nude;
+const useCarousel = Nude.useCarousel;
 const Root = ({ className, ...props }) => /* @__PURE__ */ jsx(Nude.Root, {
 	...props,
 	className: cn("relative", className)

package/dist/checkbox-parts.d.ts

@@ -1,8 +1,8 @@
-import { ComponentPropsWithRef } from "react";
 import * as Nude from "@journ/nude/checkbox-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/checkbox-parts.d.ts
-declare const Root: ({ className, children, ...props }: ComponentPropsWithRef<typeof Nude.Root>) => import("react").JSX.Element;
+declare const Root: Styled<typeof Nude.Root>;
 /** Shows a check, or a minus when the root is indeterminate. Pass children to use your own icon. */
-declare const Indicator: ({ className, children, ...props }: ComponentPropsWithRef<typeof Nude.Indicator>) => import("react").JSX.Element;
+declare const Indicator: Styled<typeof Nude.Indicator>;
 //#endregion
 export { Indicator, Root };

package/dist/chip.d.ts

@@ -1,40 +1,21 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/chip.d.ts
-declare const chipRoot: import("tailwind-variants").TVReturnType<{
-  tone: {
-    light: "border border-current/15";
-    ink: "bg-bloom-ink text-bloom-paper";
-    dim: "bg-bloom-foreground/8 dark:bg-bloom-foreground-dark/8 text-current/60";
-    sky: "bg-bloom-sky/15 text-bloom-foreground dark:text-bloom-sky";
-  };
-}, undefined, "inline-flex items-center gap-1.5 px-2 py-0.5 text-xs/5", {
-  tone: {
-    light: "border border-current/15";
-    ink: "bg-bloom-ink text-bloom-paper";
-    dim: "bg-bloom-foreground/8 dark:bg-bloom-foreground-dark/8 text-current/60";
-    sky: "bg-bloom-sky/15 text-bloom-foreground dark:text-bloom-sky";
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  tone: {
-    light: "border border-current/15";
-    ink: "bg-bloom-ink text-bloom-paper";
-    dim: "bg-bloom-foreground/8 dark:bg-bloom-foreground-dark/8 text-current/60";
-    sky: "bg-bloom-sky/15 text-bloom-foreground dark:text-bloom-sky";
-  };
-}, undefined>>;
-type RootProps = ComponentPropsWithRef<'span'> & VariantProps<typeof chipRoot>;
-declare const Root: ({ tone, className, ...props }: RootProps) => import("react").JSX.Element;
-declare const Dot: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
-declare const Remove: ({ label, className, ...props }: ComponentPropsWithRef<'button'> & {
+type ChipTone = "light" | "ink" | "dim" | "sky";
+type RootProps = ComponentPropsWithRef<"span"> & {
+  tone?: ChipTone;
+};
+declare const Root: ({ tone, className, ...props }: RootProps) => JSX.Element;
+declare const Dot: Styled<"span">;
+declare const Remove: ({ label, className, ...props }: ComponentPropsWithRef<"button"> & {
   label: string;
-}) => import("react").JSX.Element;
+}) => JSX.Element;
 type TagProps = ComponentPropsWithRef<typeof Root> & {
   /** Shows a remove button when given. Leave it out for a chip that cannot be dismissed. */
   onRemove?: () => void;
   removeLabel?: string;
 };
-declare const Tag: ({ onRemove, removeLabel, tone, className, children, ...props }: TagProps) => import("react").JSX.Element;
+declare const Tag: ({ onRemove, removeLabel, tone, className, children, ...props }: TagProps) => JSX.Element;
 declare const Chip: {
   Root: typeof Root;
   Dot: typeof Dot;

package/dist/collapsible-parts.d.ts

@@ -1,8 +1,8 @@
-import { ComponentPropsWithRef } from "react";
 import * as Nude from "@journ/nude/collapsible-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/collapsible-parts.d.ts
-declare const Root: any;
-declare const Trigger: any;
-declare const Content: ({ className, children, ...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/collapsible.d.ts

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