@journ/nude 0.1.1 → 0.1.3

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

@@ -1,4 +1,5 @@
-import { ComponentPropsWithRef, ElementType } from "react";
+import { Styled } from "../styled.js";
+import { ElementType } from "react";
 //#region src/lib/menu-parts.d.ts
 type MenuPrimitive = {
   Portal: ElementType;
@@ -7,15 +8,16 @@ type MenuPrimitive = {
   Label: ElementType;
   Separator: ElementType;
 };
+type MenuParts<P extends MenuPrimitive> = {
+  Content: Styled<P["Content"]>;
+  Item: Styled<P["Item"]>;
+  Label: Styled<P["Label"]>;
+  Separator: Styled<P["Separator"]>;
+};
 /**
  * Content, Item, Label and Separator for any Radix menu-like primitive
  * (dropdown menu, context menu, select). `slot` prefixes each `data-slot`.
  */
-declare const createMenuParts: <P extends MenuPrimitive>(primitive: P, slot: string) => {
-  Content: (props: ComponentPropsWithRef<P['Content']>) => import("react").JSX.Element;
-  Item: (props: ComponentPropsWithRef<P["Item"]>) => import("react").ReactNode;
-  Label: (props: ComponentPropsWithRef<P["Label"]>) => import("react").ReactNode;
-  Separator: (props: ComponentPropsWithRef<P["Separator"]>) => import("react").ReactNode;
-};
+declare const createMenuParts: <P extends MenuPrimitive>(primitive: P, slot: string) => MenuParts<P>;
 //#endregion
 export { createMenuParts };

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

@@ -1,17 +1,18 @@
-import { ComponentPropsWithRef, ElementType, Ref } from "react";
+import { ComponentPropsWithRef, ElementType, JSX, Ref } from "react";
 //#region src/lib/modal-content.d.ts
 type ModalPrimitive = {
   Portal: ElementType;
   Overlay: ElementType;
   Content: ElementType;
 };
-type ModalContentProps<P extends ModalPrimitive> = ComponentPropsWithRef<P['Content']> & {
+type ModalContentProps<P extends ModalPrimitive> = ComponentPropsWithRef<P["Content"]> & {
   classNames?: {
     overlay?: string;
   };
   overlayRef?: Ref<HTMLDivElement>;
 };
+type ModalContentPart<P extends ModalPrimitive> = (props: ModalContentProps<P>) => JSX.Element;
 /** Opens in a portal over an overlay. `slot` prefixes each `data-slot`, e.g. `dialog` gives `dialog` and `dialog-overlay`. */
-declare const createModalContent: <P extends ModalPrimitive>(primitive: P, slot: string) => ({ classNames, overlayRef, ...props }: ModalContentProps<P>) => import("react").JSX.Element;
+declare const createModalContent: <P extends ModalPrimitive>(primitive: P, slot: string) => ModalContentPart<P>;
 //#endregion
-export { type ModalContentProps, createModalContent };
+export { type ModalContentPart, type ModalContentProps, createModalContent };

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

@@ -1,6 +1,7 @@
+import { Styled } from "../styled.js";
 //#region src/lib/modal-parts.d.ts
 /** Shared by Dialog, AlertDialog, Sheet and Drawer. */
-declare const Body: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-declare const Actions: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+declare const Body: Styled<"div">;
+declare const Actions: Styled<"div">;
 //#endregion
 export { Actions, Body };

package/dist/lib/part.d.ts

@@ -1,6 +1,7 @@
-import { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+import { Styled } from "../styled.js";
+import { ComponentPropsWithRef, ElementType } from "react";
 //#region src/lib/part.d.ts
 /** A part that tags its element with `data-slot` and applies default props. Props given by the caller win. */
-declare const part: <T extends ElementType>(element: T, slot: string, defaults?: Partial<ComponentPropsWithRef<T>>) => (props: ComponentPropsWithRef<T>) => ReactNode;
+declare const part: <T extends ElementType>(element: T, slot: string, defaults?: Partial<ComponentPropsWithRef<T>>) => Styled<T>;
 //#endregion
 export { part };

package/dist/lib/picker.d.ts

@@ -1,4 +1,5 @@
-import { ComponentPropsWithRef, ReactNode } from "react";
+import { Styled } from "../styled.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
 //#region src/lib/picker.d.ts
 type PickerState<V> = {
   value: V | null;
@@ -13,7 +14,7 @@ type PickerContextValue<V, M> = {
   actions: PickerActions<V>;
   meta: M;
 };
-type PickerProviderProps<V, M> = Omit<PickerContextValue<V, M>, 'meta'> & {
+type PickerProviderProps<V, M> = Omit<PickerContextValue<V, M>, "meta"> & {
   meta?: M;
   children?: ReactNode;
 };
@@ -23,22 +24,24 @@ type PickerOptions<V> = {
   /** When the value counts as empty and `Value` shows its placeholder. */
   isEmpty?: (value: V | null) => boolean;
 };
-/**
- * The state, trigger and value shared by every picker that opens in a drawer
- * (combobox, date picker, date range picker). `slot` prefixes each `data-slot`.
- */
-declare const createPicker: <V, M extends object = object>(name: string, slot: string, { closeOnSelect, isEmpty }?: PickerOptions<V>) => {
-  ContextProvider: ({ state, actions, meta, children }: PickerProviderProps<V, M>) => import("react").JSX.Element;
-  Provider: ({ children, ...props }: PickerProviderProps<V, M>) => import("react").JSX.Element;
-  Trigger: (props: ComponentPropsWithRef<'button'>) => import("react").JSX.Element;
-  Value: ({ placeholder, children, ...props }: ComponentPropsWithRef<'span'> & {
-    placeholder?: string;
-  }) => import("react").JSX.Element;
-  usePicker: any;
+type PickerValueProps = ComponentPropsWithRef<"span"> & {
+  placeholder?: string;
+};
+type Picker<V, M extends object = object> = {
+  ContextProvider: (props: PickerProviderProps<V, M>) => JSX.Element;
+  Provider: (props: PickerProviderProps<V, M>) => JSX.Element;
+  Trigger: Styled<"button">;
+  Value: (props: PickerValueProps) => JSX.Element;
+  usePicker: () => PickerContextValue<V, M>;
   usePickerState: (value: V | null | undefined, defaultValue: V | null, onValueChange?: (value: V) => void) => {
     state: PickerState<V>;
     actions: PickerActions<V>;
   };
 };
+/**
+ * The state, trigger and value shared by every picker that opens in a drawer
+ * (combobox, date picker, date range picker). `slot` prefixes each `data-slot`.
+ */
+declare const createPicker: <V, M extends object = object>(name: string, slot: string, { closeOnSelect, isEmpty }?: PickerOptions<V>) => Picker<V, M>;
 //#endregion
-export { type PickerActions, type PickerContextValue, type PickerProviderProps, type PickerState, createPicker };
+export { type Picker, type PickerActions, type PickerContextValue, type PickerProviderProps, type PickerState, type PickerValueProps, createPicker };

package/dist/lib/picker.js

@@ -2,7 +2,8 @@ import { Button } from "../button.js";
 import { Root, Trigger } from "../drawer-parts.js";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { createRequiredContext, useControllableState } from "@journ/lift";
+import { createRequiredContext } from "@journ/lift/required-context";
+import { useControllableState } from "@journ/lift/use-controllable-state";
 //#region src/lib/picker.tsx
 /**
 * The state, trigger and value shared by every picker that opens in a drawer

package/dist/link.d.ts

@@ -1,9 +1,9 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/link.d.ts
-type LinkProps = ComponentPropsWithRef<'a'> & {
+type LinkProps = ComponentPropsWithRef<"a"> & {
   asChild?: boolean;
 };
 /** Pass `asChild` to render your router's link component instead of a plain anchor. */
-declare const Link: ({ asChild, ...props }: LinkProps) => import("react").JSX.Element;
+declare const Link: ({ asChild, ...props }: LinkProps) => JSX.Element;
 //#endregion
 export { Link, type LinkProps };

package/dist/list-row.d.ts

@@ -0,0 +1,22 @@
+import { Styled } from "./styled.js";
+//#region src/list-row.d.ts
+declare const Root: Styled<"div">;
+declare const Button: Styled<"button">;
+declare const Link: Styled<"a">;
+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 };

package/dist/list-row.js

@@ -0,0 +1,14 @@
+import { part } from "./lib/part.js";
+//#region src/list-row.tsx
+const ListRow = {
+	Root: part("div", "list-row"),
+	Button: part("button", "list-row", { type: "button" }),
+	Link: part("a", "list-row"),
+	Leading: part("span", "list-row-leading"),
+	Content: part("span", "list-row-content"),
+	Title: part("span", "list-row-title"),
+	Subtitle: part("span", "list-row-subtitle"),
+	Trailing: part("span", "list-row-trailing")
+};
+//#endregion
+export { ListRow };

package/dist/markdown.d.ts

@@ -1,10 +1,10 @@
-import { ComponentProps } from "react";
+import { ComponentProps, JSX } from "react";
 import ReactMarkdown, { Components as MarkdownComponents } from "react-markdown";
 //#region src/markdown.d.ts
 type MarkdownProps = ComponentProps<typeof ReactMarkdown> & {
   /** Applied to the wrapper. */
   className?: string;
 };
-declare const Markdown: ({ className, ...props }: MarkdownProps) => import("react").JSX.Element;
+declare const Markdown: ({ className, ...props }: MarkdownProps) => JSX.Element;
 //#endregion
 export { Markdown, type MarkdownComponents, type MarkdownProps };

package/dist/message.d.ts

@@ -1,13 +1,16 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/message.d.ts
-type RootProps = ComponentPropsWithRef<'div'> & {
-  from?: 'agent' | 'user';
+type RootProps = ComponentPropsWithRef<"div"> & {
+  from?: "agent" | "user";
 };
-declare const Root: ({ from, ...props }: RootProps) => import("react").JSX.Element;
+declare const Root: ({ from, ...props }: RootProps) => JSX.Element;
+declare const Bubble: Styled<"div">;
+declare const Highlight: Styled<"span">;
 declare const Message: {
   Root: typeof Root;
-  Bubble: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Highlight: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
+  Bubble: typeof Bubble;
+  Highlight: typeof Highlight;
 };
 //#endregion
 export { Message, type RootProps as MessageProps };

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { JSX, ReactNode } from "react";
 //#region src/month-picker-parts.d.ts
 type RootProps = {
   /** Any day in the selected month. Reported back as the first of the month. */
@@ -14,6 +14,6 @@ type RootProps = {
  * A calendar that stops at months: it reuses the Calendar parts (Frame, Header,
  * Heading, Previous, Next, Months, Years) and never shows days.
  */
-declare const Root: ({ value, defaultValue, onValueChange, defaultMonth, locale, children }: RootProps) => import("react").JSX.Element;
+declare const Root: ({ value, defaultValue, onValueChange, defaultMonth, locale, children }: RootProps) => JSX.Element;
 //#endregion
 export { Root, type RootProps };

package/dist/month-picker-parts.js

@@ -1,8 +1,8 @@
 "use client";
 import { Provider, useCalendarNavigation } from "./calendar-parts.js";
 import { jsx } from "react/jsx-runtime";
-import { useControllableState } from "@journ/lift";
-import { startOfMonth } from "@journ/fitter-happier";
+import { startOfMonth } from "@journ/fitter-happier/month";
+import { useControllableState } from "@journ/lift/use-controllable-state";
 //#region src/month-picker-parts.tsx
 /**
 * A calendar that stops at months: it reuses the Calendar parts (Frame, Header,

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

@@ -1,16 +1,17 @@
+import { Styled } from "./styled.js";
 import { IconButtonProps } from "./icon-button.js";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/month-stepper-parts.d.ts
-type RootProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> & {
+type RootProps = Omit<ComponentPropsWithRef<"div">, "defaultValue"> & {
   value?: Date;
   defaultValue?: Date;
   onValueChange?: (month: Date) => void;
   locale?: string;
 };
 /** Always reports the first day of the month. */
-declare const Root: ({ value, defaultValue, onValueChange, locale, ...props }: RootProps) => import("react").JSX.Element;
-declare const Previous: (props: IconButtonProps) => import("react").JSX.Element;
-declare const Next: (props: IconButtonProps) => import("react").JSX.Element;
-declare const Label: (props: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
+declare const Root: ({ value, defaultValue, onValueChange, locale, ...props }: RootProps) => JSX.Element;
+declare const Previous: (props: IconButtonProps) => JSX.Element;
+declare const Next: (props: IconButtonProps) => JSX.Element;
+declare const Label: Styled<"span">;
 //#endregion
 export { Label, Next, Previous, Root, type RootProps };

package/dist/month-stepper-parts.js

@@ -1,8 +1,9 @@
 "use client";
 import { StepButton } from "./step-button.js";
 import { jsx } from "react/jsx-runtime";
-import { createRequiredContext, useControllableState } from "@journ/lift";
-import { addMonths, formatMonthYear, startOfMonth } from "@journ/fitter-happier";
+import { addMonths, formatMonthYear, startOfMonth } from "@journ/fitter-happier/month";
+import { createRequiredContext } from "@journ/lift/required-context";
+import { useControllableState } from "@journ/lift/use-controllable-state";
 //#region src/month-stepper-parts.tsx
 const [MonthStepperContext, useMonthStepper] = createRequiredContext("MonthStepper.Root");
 /** Always reports the first day of the month. */

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

@@ -1,10 +1,22 @@
+import { Styled } from "./styled.js";
+import { Picker } from "./lib/picker.js";
 import { Empty, Frame, Group, Input as Input$1, ItemIndicator, List, Option } from "./combobox-parts.js";
-import { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+import { ComponentPropsWithRef, ElementType, JSX, ReactNode } from "react";
 //#region src/multiple-selector-parts.d.ts
-declare const Trigger: (props: ComponentPropsWithRef<'button'>) => import("react").JSX.Element, PickerValue: ({ placeholder, children, ...props }: import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
-  placeholder?: string;
-}) => import("react").JSX.Element;
-declare const useMultipleSelector: any;
+declare const Trigger: Picker<string[]>["Trigger"];
+declare const PickerValue: Picker<string[]>["Value"];
+type SelectionContextValue = {
+  selected: string[];
+  fixed: string[];
+  /** True once `max` values are chosen: nothing more can be added. */
+  full: boolean;
+  search: string;
+  setSearch: (search: string) => void;
+  toggle: (value: string) => void;
+  remove: (value: string) => void;
+  create: (text: string) => void;
+};
+declare const useMultipleSelector: () => SelectionContextValue;
 type RootProps = {
   value?: string[];
   defaultValue?: string[];
@@ -19,9 +31,9 @@ type RootProps = {
  * A combobox that keeps its drawer open and collects values. A value is also its
  * label. Build the list from Combobox's parts, plus `Create` to allow new values.
  */
-declare const Root: ({ value, defaultValue, onValueChange, fixed, max, children }: RootProps) => import("react").JSX.Element;
+declare const Root: ({ value, defaultValue, onValueChange, fixed, max, children }: RootProps) => JSX.Element;
 /** The count of chosen values, or `children` when given. */
-declare const Value: ({ placeholder, children, ...props }: ComponentPropsWithRef<typeof PickerValue>) => import("react").JSX.Element;
+declare const Value: Styled<typeof PickerValue>;
 type TagsProps = {
   /** The chip rendered per value. It receives `removeLabel`, `onRemove` and the value as children. */
   components?: {
@@ -29,11 +41,11 @@ type TagsProps = {
   };
 };
 /** One chip per chosen value, with a remove button unless the value is fixed. */
-declare const Tags: ({ components }: TagsProps) => any;
-declare const Input: (props: ComponentPropsWithRef<typeof Input$1>) => import("react").JSX.Element;
+declare const Tags: ({ components }: TagsProps) => ReactNode;
+declare const Input: Styled<typeof Input$1>;
 /** Toggles its value. Fixed values are locked, and unchosen values lock once `max` is reached. */
-declare const Item: ({ value, disabled, ...props }: Omit<ComponentPropsWithRef<typeof Option>, 'checked' | 'onPick'>) => import("react").JSX.Element;
+declare const Item: ({ value, disabled, ...props }: Omit<ComponentPropsWithRef<typeof Option>, "checked" | "onPick">) => JSX.Element;
 /** Offers the typed text as a new value. Hidden when empty, already chosen, or the selection is full. */
-declare const Create: ({ children, ...props }: Omit<ComponentPropsWithRef<typeof Option>, 'value' | 'checked' | 'onPick'>) => import("react").JSX.Element | null;
+declare const Create: ({ children, ...props }: Omit<ComponentPropsWithRef<typeof Option>, "value" | "checked" | "onPick">) => ReactNode;
 //#endregion
 export { Create, Empty, Frame, Group, Input, Item, ItemIndicator, List, Root, type RootProps, Tags, Trigger, Value, useMultipleSelector };

package/dist/multiple-selector-parts.js

@@ -4,13 +4,18 @@ import { createPicker } from "./lib/picker.js";
 import { Empty, Frame, Group, Input as Input$1, ItemIndicator, List, Option } from "./combobox-parts.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createRequiredContext } from "@journ/lift";
+import { createRequiredContext } from "@journ/lift/required-context";
 //#region src/multiple-selector-parts.tsx
-const { Provider, Trigger, Value: PickerValue, usePickerState } = createPicker("MultipleSelector", "multiple-selector", {
+const picker = createPicker("MultipleSelector", "multiple-selector", {
 	closeOnSelect: false,
 	isEmpty: (value) => !value || value.length === 0
 });
-const [SelectionContext, useMultipleSelector] = createRequiredContext("MultipleSelector.Root");
+const Provider = picker.Provider;
+const Trigger = picker.Trigger;
+const PickerValue = picker.Value;
+const usePickerState = picker.usePickerState;
+const [SelectionContext, useMultipleSelectorContext] = createRequiredContext("MultipleSelector.Root");
+const useMultipleSelector = useMultipleSelectorContext;
 const none = [];
 /**
 * A combobox that keeps its drawer open and collects values. A value is also its

package/dist/multiple-selector.d.ts

@@ -1,73 +1,20 @@
-import { ModalContentProps } from "./lib/modal-content.js";
-import { ItemIndicator } from "./combobox-parts.js";
-import { Create, Input, Item, Root, RootProps, Tags, Value, useMultipleSelector } from "./multiple-selector-parts.js";
+import { Empty, Frame, Group, ItemIndicator, List } from "./combobox-parts.js";
+import { Content, Description, Title } from "./drawer-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: typeof Root;
-  Trigger: (props: import("react").ComponentPropsWithRef<'button'>) => import("react").JSX.Element;
+  Trigger: typeof Trigger;
   Value: typeof Value;
   Tags: typeof Tags;
-  Content: ({ classNames, overlayRef, ...props }: ModalContentProps<{
-    Root: typeof import("vaul").Root;
-    NestedRoot: typeof import("vaul").NestedRoot;
-    Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Overlay: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Portal: typeof import("vaul").Portal;
-    Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-      preventCycle?: boolean | undefined;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Close: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-    Title: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
-  }>) => import("react").JSX.Element;
-  Title: (props: import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>) => import("react").ReactNode;
-  Description: (props: import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>) => import("react").ReactNode;
-  Frame: (props: {
-    children?: React.ReactNode;
-  } & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    label?: string;
-    shouldFilter?: boolean;
-    filter?: (value: string, search: string, keywords?: string[]) => number;
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    loop?: boolean;
-    disablePointerSelection?: boolean;
-    vimBindings?: boolean;
-  } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  Content: typeof Content;
+  Title: typeof Title;
+  Description: typeof Description;
+  Frame: typeof Frame;
   Input: typeof Input;
-  List: (props: {
-    children?: React.ReactNode;
-  } & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    label?: string;
-  } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
-  Empty: (props: {
-    children?: React.ReactNode;
-  } & Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
-  Group: (props: {
-    children?: React.ReactNode;
-  } & Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-  } & {
-    asChild?: boolean;
-  }, "asChild" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
-    heading?: React.ReactNode;
-    value?: string;
-    forceMount?: boolean;
-  } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  List: typeof List;
+  Empty: typeof Empty;
+  Group: typeof Group;
   Item: typeof Item;
   ItemIndicator: typeof ItemIndicator;
   Create: typeof Create;

package/dist/nav-bar.d.ts

@@ -1,7 +1,10 @@
+import { Styled } from "./styled.js";
 //#region src/nav-bar.d.ts
+declare const Root: Styled<"nav">;
+declare const Item: Styled<"a">;
 declare const NavBar: {
-  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
-  Item: (props: import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Item: typeof Item;
 };
 //#endregion
 export { NavBar };

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

@@ -1,4 +1,5 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as RadixNav from "@radix-ui/react-navigation-menu";
 //#region src/navigation-menu-parts.d.ts
 type RootProps = ComponentPropsWithRef<typeof RadixNav.Root> & {
@@ -8,11 +9,11 @@ type RootProps = ComponentPropsWithRef<typeof RadixNav.Root> & {
   };
 };
 /** Includes the viewport, the panel that Content opens into. */
-declare const Root: ({ classNames, children, ...props }: RootProps) => import("react").JSX.Element;
-declare const List: (props: RadixNav.NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>) => import("react").ReactNode;
-declare const Item: import("react").ForwardRefExoticComponent<RadixNav.NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>>;
-declare const Trigger: (props: RadixNav.NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactNode;
-declare const Content: (props: RadixNav.NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
-declare const Link: (props: RadixNav.NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactNode;
+declare const Root: ({ classNames, children, ...props }: RootProps) => JSX.Element;
+declare const List: Styled<typeof RadixNav.List>;
+declare const Item: typeof RadixNav.Item;
+declare const Trigger: Styled<typeof RadixNav.Trigger>;
+declare const Content: Styled<typeof RadixNav.Content>;
+declare const Link: Styled<typeof RadixNav.Link>;
 //#endregion
 export { Content, Item, Link, List, Root, Trigger };

package/dist/navigation-menu.d.ts

@@ -1,12 +1,12 @@
-import { Root } 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: (props: import("@radix-ui/react-navigation-menu").NavigationMenuListProps & import("react").RefAttributes<HTMLUListElement>) => import("react").ReactNode;
-  Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-navigation-menu").NavigationMenuItemProps & import("react").RefAttributes<HTMLLIElement>>;
-  Trigger: (props: import("@radix-ui/react-navigation-menu").NavigationMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactNode;
-  Content: (props: import("@radix-ui/react-navigation-menu").NavigationMenuContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
-  Link: (props: import("@radix-ui/react-navigation-menu").NavigationMenuLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactNode;
+  List: typeof List;
+  Item: typeof Item;
+  Trigger: typeof Trigger;
+  Content: typeof Content;
+  Link: typeof Link;
 };
 //#endregion
 export { NavigationMenu };

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

@@ -1,9 +1,10 @@
+import { Styled } from "./styled.js";
 import * as RadixOtp from "@radix-ui/react-one-time-password-field";
 //#region src/otp-input-parts.d.ts
-declare const Root: (props: Omit<RadixOtp.OneTimePasswordFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+declare const Root: Styled<typeof RadixOtp.Root>;
 /** One box per character. Render as many as the code is long. */
-declare const Slot: (props: Omit<RadixOtp.OneTimePasswordFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactNode;
+declare const Slot: Styled<typeof RadixOtp.Input>;
 /** Submits the whole code with a surrounding form. Render it once, after the slots. */
-declare const Hidden: import("react").ForwardRefExoticComponent<Omit<RadixOtp.OneTimePasswordFieldHiddenInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const Hidden: typeof RadixOtp.HiddenInput;
 //#endregion
 export { Hidden, Root, Slot };

package/dist/otp-input.d.ts

@@ -1,8 +1,9 @@
+import { Hidden, Root, Slot } from "./otp-input-parts.js";
 //#region src/otp-input.d.ts
 declare const OtpInput: {
-  Root: (props: Omit<import("@radix-ui/react-one-time-password-field").OneTimePasswordFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
-  Slot: (props: Omit<import("@radix-ui/react-one-time-password-field").OneTimePasswordFieldInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>) => import("react").ReactNode;
-  Hidden: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-one-time-password-field").OneTimePasswordFieldHiddenInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+  Root: typeof Root;
+  Slot: typeof Slot;
+  Hidden: typeof Hidden;
 };
 //#endregion
 export { OtpInput };

package/dist/page-header.d.ts

@@ -1,8 +1,12 @@
+import { Styled } from "./styled.js";
 //#region src/page-header.d.ts
+declare const Root: Styled<"header">;
+declare const Title: Styled<"h1">;
+declare const Actions: Styled<"div">;
 declare const PageHeader: {
-  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
-  Title: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) => import("react").ReactNode;
-  Actions: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Title: typeof Title;
+  Actions: typeof Actions;
 };
 //#endregion
 export { PageHeader };

package/dist/page.d.ts

@@ -1,8 +1,12 @@
+import { Styled } from "./styled.js";
 //#region src/page.d.ts
+declare const Root: Styled<"div">;
+declare const Content: Styled<"main">;
+declare const Footer: Styled<"div">;
 declare const Page: {
-  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Content: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
-  Footer: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Content: typeof Content;
+  Footer: typeof Footer;
 };
 //#endregion
 export { Page };

package/dist/pagination.d.ts

@@ -1,13 +1,18 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
 //#region src/pagination.d.ts
-declare const Gap: (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: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
-  Previous: (props: import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => import("react").ReactNode;
-  List: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Page: (props: import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Previous: typeof Previous;
+  List: typeof List;
+  Page: typeof Page;
   Gap: typeof Gap;
-  Next: (props: import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => import("react").ReactNode;
+  Next: typeof Next;
 };
 //#endregion
 export { Pagination };