@journ/nude 0.1.0 → 0.1.2

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

@@ -6,11 +6,16 @@ import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createRequiredContext } from "@journ/lift";
 //#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 };

package/dist/pill-select.d.ts

@@ -1,4 +1,5 @@
+import { Styled } from "./styled.js";
 //#region src/pill-select.d.ts
-declare const PillSelect: (props: import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>) => import("react").ReactNode;
+declare const PillSelect: Styled<"select">;
 //#endregion
 export { PillSelect };

package/dist/popover-parts.d.ts

@@ -1,9 +1,9 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
 import * as RadixPopover from "@radix-ui/react-popover";
 //#region src/popover-parts.d.ts
-declare const Root: import("react").FC<RadixPopover.PopoverProps>;
-declare const Trigger: import("react").ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const Close: import("react").ForwardRefExoticComponent<RadixPopover.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const Content: (props: ComponentPropsWithRef<typeof RadixPopover.Content>) => import("react").JSX.Element;
+declare const Root: typeof RadixPopover.Root;
+declare const Trigger: typeof RadixPopover.Trigger;
+declare const Close: typeof RadixPopover.Close;
+declare const Content: Styled<typeof RadixPopover.Content>;
 //#endregion
 export { Close, Content, Root, Trigger };

package/dist/popover.d.ts

@@ -1,10 +1,10 @@
-import { Content } from "./popover-parts.js";
+import { Close, Content, Root, Trigger } from "./popover-parts.js";
 //#region src/popover.d.ts
 declare const Popover: {
-  Root: import("react").FC<import("@radix-ui/react-popover").PopoverProps>;
-  Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
   Content: typeof Content;
-  Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Close: typeof Close;
 };
 //#endregion
 export { Popover };

package/dist/portal.d.ts

@@ -10,6 +10,6 @@ type PortalProps = {
  * cannot trap them. Waits for the client, so it renders nothing on the server.
  * Radix overlays already portal themselves; use this for your own floating UI.
  */
-declare const Portal: ({ children, container }: PortalProps) => import("react").ReactPortal | null;
+declare const Portal: ({ children, container }: PortalProps) => ReactNode;
 //#endregion
 export { Portal, type PortalProps };

package/dist/progress-parts.d.ts

@@ -1,11 +1,12 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as RadixProgress from "@radix-ui/react-progress";
 //#region src/progress-parts.d.ts
-type RootProps = Omit<ComponentPropsWithRef<typeof RadixProgress.Root>, 'value'> & {
+type RootProps = Omit<ComponentPropsWithRef<typeof RadixProgress.Root>, "value"> & {
   value: number;
 };
-declare const Root: ({ value, max, ...props }: RootProps) => import("react").JSX.Element;
+declare const Root: ({ value, max, ...props }: RootProps) => JSX.Element;
 /** Slides in from the left as the value grows. */
-declare const Indicator: ({ style, ...props }: ComponentPropsWithRef<typeof RadixProgress.Indicator>) => import("react").JSX.Element;
+declare const Indicator: Styled<typeof RadixProgress.Indicator>;
 //#endregion
 export { Indicator, type RootProps as ProgressProps, Root };

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

@@ -1,8 +1,9 @@
+import { Styled } from "./styled.js";
 import { IconButtonProps } from "./icon-button.js";
 import { Composer } from "./composer.js";
-import { ComponentPropsWithRef, ReactNode } from "react";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
 //#region src/quantity-input-parts.d.ts
-type RootProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'> & {
+type RootProps = Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange"> & {
   value?: number;
   defaultValue?: number;
   onValueChange?: (value: number) => void;
@@ -13,9 +14,9 @@ type RootProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'>
   children?: ReactNode;
 };
 /** A number with minus and plus. Typing is free until blur or Enter, then it snaps to the bounds. */
-declare const Root: ({ value, defaultValue, onValueChange, min, max, step, disabled, children, ...props }: RootProps) => import("react").JSX.Element;
-declare const Decrement: (props: IconButtonProps) => import("react").JSX.Element;
-declare const Increment: (props: IconButtonProps) => import("react").JSX.Element;
-declare const Field: ({ onBlur, onKeyDown, ...props }: ComponentPropsWithRef<typeof Composer.Input>) => import("react").JSX.Element;
+declare const Root: ({ value, defaultValue, onValueChange, min, max, step, disabled, children, ...props }: RootProps) => JSX.Element;
+declare const Decrement: (props: IconButtonProps) => JSX.Element;
+declare const Increment: (props: IconButtonProps) => JSX.Element;
+declare const Field: Styled<typeof Composer.Input>;
 //#endregion
 export { Decrement, Field, Increment, Root, type RootProps };

package/dist/radio-parts.d.ts

@@ -1,13 +1,14 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as RadixRadio from "@radix-ui/react-radio-group";
 //#region src/radio-parts.d.ts
-declare const Group: (props: RadixRadio.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+declare const Group: Styled<typeof RadixRadio.Root>;
 type ItemProps = ComponentPropsWithRef<typeof RadixRadio.Item> & {
   classNames?: {
     indicator?: string;
   };
 };
 /** Renders its own indicator after any children. */
-declare const Item: ({ classNames, children, ...props }: ItemProps) => import("react").JSX.Element;
+declare const Item: ({ classNames, children, ...props }: ItemProps) => JSX.Element;
 //#endregion
 export { Group, Item };

package/dist/radio.d.ts

@@ -1,7 +1,7 @@
-import { Item } from "./radio-parts.js";
+import { Group, Item } from "./radio-parts.js";
 //#region src/radio.d.ts
 declare const Radio: {
-  Group: (props: import("@radix-ui/react-radio-group").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  Group: typeof Group;
   Item: typeof Item;
 };
 //#endregion

package/dist/scroll-area-parts.d.ts

@@ -1,9 +1,10 @@
-import { ComponentPropsWithRef, ReactNode } from "react";
+import { Styled } from "./styled.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
 //#region src/scroll-area-parts.d.ts
-declare const Root: (props: RadixScrollArea.ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>) => ReactNode;
-declare const Viewport: (props: RadixScrollArea.ScrollAreaViewportProps & import("react").RefAttributes<HTMLDivElement>) => ReactNode;
-type ScrollbarProps = Omit<ComponentPropsWithRef<typeof RadixScrollArea.Scrollbar>, 'children'> & {
+declare const Root: Styled<typeof RadixScrollArea.Root>;
+declare const Viewport: Styled<typeof RadixScrollArea.Viewport>;
+type ScrollbarProps = Omit<ComponentPropsWithRef<typeof RadixScrollArea.Scrollbar>, "children"> & {
   classNames?: {
     thumb?: string;
   };
@@ -11,7 +12,7 @@ type ScrollbarProps = Omit<ComponentPropsWithRef<typeof RadixScrollArea.Scrollba
   children?: ReactNode;
 };
 /** Draws its own thumb. */
-declare const Scrollbar: ({ classNames, children, ...props }: ScrollbarProps) => import("react").JSX.Element;
-declare const Corner: import("react").ForwardRefExoticComponent<RadixScrollArea.ScrollAreaCornerProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Scrollbar: ({ classNames, children, ...props }: ScrollbarProps) => JSX.Element;
+declare const Corner: typeof RadixScrollArea.Corner;
 //#endregion
 export { Corner, Root, Scrollbar, Viewport };

package/dist/scroll-area.d.ts

@@ -1,10 +1,10 @@
-import { Scrollbar } from "./scroll-area-parts.js";
+import { Corner, Root, Scrollbar, Viewport } from "./scroll-area-parts.js";
 //#region src/scroll-area.d.ts
 declare const ScrollArea: {
-  Root: (props: import("@radix-ui/react-scroll-area").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
-  Viewport: (props: import("@radix-ui/react-scroll-area").ScrollAreaViewportProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Viewport: typeof Viewport;
   Scrollbar: typeof Scrollbar;
-  Corner: import("react").ForwardRefExoticComponent<import("@radix-ui/react-scroll-area").ScrollAreaCornerProps & import("react").RefAttributes<HTMLDivElement>>;
+  Corner: typeof Corner;
 };
 //#endregion
 export { ScrollArea };

package/dist/select-parts.d.ts

@@ -1,26 +1,27 @@
-import { ComponentPropsWithRef, ReactNode } from "react";
+import { Styled } from "./styled.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
 import * as RadixSelect from "@radix-ui/react-select";
 //#region src/select-parts.d.ts
-declare const Root: import("react").FC<RadixSelect.SelectProps>;
-declare const Group: import("react").ForwardRefExoticComponent<RadixSelect.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-declare const Value: import("react").ForwardRefExoticComponent<RadixSelect.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Root: typeof RadixSelect.Root;
+declare const Group: typeof RadixSelect.Group;
+declare const Value: typeof RadixSelect.Value;
 type TriggerProps = ComponentPropsWithRef<typeof RadixSelect.Trigger> & {
   /** Rendered after the value, hidden from assistive tech. */
   icon?: ReactNode;
 };
-declare const Trigger: ({ icon, children, ...props }: TriggerProps) => import("react").JSX.Element;
+declare const Trigger: ({ icon, children, ...props }: TriggerProps) => JSX.Element;
 type ContentProps = ComponentPropsWithRef<typeof RadixSelect.Content> & {
   classNames?: {
     viewport?: string;
   };
 };
-declare const Content: ({ classNames, children, position, ...props }: ContentProps) => import("react").JSX.Element;
+declare const Content: ({ classNames, children, position, ...props }: ContentProps) => JSX.Element;
 type ItemProps = ComponentPropsWithRef<typeof RadixSelect.Item> & {
   /** Shown while the item is the selected one. */
   indicator?: ReactNode;
 };
-declare const Item: ({ indicator, children, ...props }: ItemProps) => import("react").JSX.Element;
-declare const Label: (props: RadixSelect.SelectLabelProps & import("react").RefAttributes<HTMLDivElement>) => ReactNode;
-declare const Separator: (props: RadixSelect.SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>) => ReactNode;
+declare const Item: ({ indicator, children, ...props }: ItemProps) => JSX.Element;
+declare const Label: Styled<typeof RadixSelect.Label>;
+declare const Separator: Styled<typeof RadixSelect.Separator>;
 //#endregion
 export { Content, Group, Item, Label, Root, Separator, Trigger, Value };

package/dist/select.d.ts

@@ -1,14 +1,14 @@
-import { Content, Item, Trigger } from "./select-parts.js";
+import { Content, Group, Item, Label, Root, Separator, Trigger, Value } from "./select-parts.js";
 //#region src/select.d.ts
 declare const Select: {
-  Root: import("react").FC<import("@radix-ui/react-select").SelectProps>;
+  Root: typeof Root;
   Trigger: typeof Trigger;
-  Value: import("react").ForwardRefExoticComponent<import("@radix-ui/react-select").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+  Value: typeof Value;
   Content: typeof Content;
-  Group: import("react").ForwardRefExoticComponent<import("@radix-ui/react-select").SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-  Label: (props: import("@radix-ui/react-select").SelectLabelProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  Group: typeof Group;
+  Label: typeof Label;
   Item: typeof Item;
-  Separator: (props: import("@radix-ui/react-select").SelectSeparatorProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  Separator: typeof Separator;
 };
 //#endregion
 export { Select };

package/dist/sheet-parts.d.ts

@@ -1,15 +1,15 @@
-import { ModalContentProps } from "./lib/modal-content.js";
+import { ModalContentPart } from "./lib/modal-content.js";
 import { Actions, Body } from "./lib/modal-parts.js";
 import { Close, Description, Root, Title, Trigger } from "./dialog-parts.js";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
 //#region src/sheet-parts.d.ts
-type Side = 'top' | 'right' | 'bottom' | 'left';
-declare const SheetContent: ({ classNames, overlayRef, ...props }: ModalContentProps<typeof RadixDialog>) => import("react").JSX.Element;
+type Side = "top" | "right" | "bottom" | "left";
+declare const SheetContent: ModalContentPart<typeof RadixDialog>;
 type ContentProps = ComponentPropsWithRef<typeof SheetContent> & {
   side?: Side;
 };
 /** A dialog attached to one edge. `data-side` tells the styles which one. */
-declare const Content: ({ side, ...props }: ContentProps) => import("react").JSX.Element;
+declare const Content: ({ side, ...props }: ContentProps) => JSX.Element;
 //#endregion
 export { Actions, Body, Close, Content, Description, Root, type ContentProps as SheetContentProps, type Side as SheetSide, Title, Trigger };

package/dist/sheet.d.ts

@@ -1,14 +1,16 @@
+import { Actions, Body } from "./lib/modal-parts.js";
+import { Close, Description, Root, Title, Trigger } from "./dialog-parts.js";
 import { Content, SheetContentProps as ContentProps, SheetSide as Side } from "./sheet-parts.js";
 //#region src/sheet.d.ts
 declare const Sheet: {
-  Root: import("react").FC<import("@radix-ui/react-dialog").DialogProps>;
-  Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-  Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Close: typeof Close;
   Content: typeof Content;
-  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;
-  Body: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Actions: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+  Title: typeof Title;
+  Description: typeof Description;
+  Body: typeof Body;
+  Actions: typeof Actions;
 };
 //#endregion
 export { Sheet, type ContentProps as SheetContentProps, type Side as SheetSide };