@journ/nude 0.1.1 → 0.1.3

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/progress-parts.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createRequiredContext } from "@journ/lift";
+import { createRequiredContext } from "@journ/lift/required-context";
 import * as RadixProgress from "@radix-ui/react-progress";
 //#region src/progress-parts.tsx
 const [PercentageContext, usePercentage] = createRequiredContext("Progress.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/quantity-input-parts.js

@@ -3,8 +3,11 @@ import { StepButton } from "./step-button.js";
 import { Composer } from "./composer.js";
 import { commitOn } from "./lib/commit-on.js";
 import { jsx } from "react/jsx-runtime";
-import { createRequiredContext, useControllableState, useDraft } from "@journ/lift";
-import { clamp, parseNumber } from "@journ/fitter-happier";
+import { createRequiredContext } from "@journ/lift/required-context";
+import { useControllableState } from "@journ/lift/use-controllable-state";
+import { clamp } from "@journ/fitter-happier/clamp";
+import { parseNumber } from "@journ/fitter-happier/number";
+import { useDraft } from "@journ/lift/use-draft";
 //#region src/quantity-input-parts.tsx
 const [QuantityContext, useQuantity] = createRequiredContext("QuantityInput.Root");
 /** A number with minus and plus. Typing is free until blur or Enter, then it snaps to the bounds. */

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 };

package/dist/sidebar.d.ts

@@ -1,14 +1,24 @@
+import { Styled } from "./styled.js";
 //#region src/sidebar.d.ts
+declare const Layout: Styled<"div">;
+declare const Content: Styled<"main">;
+declare const Root: Styled<"aside">;
+declare const Header: Styled<"div">;
+declare const Body: Styled<"nav">;
+declare const Section: Styled<"div">;
+declare const Heading: Styled<"h3">;
+declare const Item: Styled<"a">;
+declare const Footer: Styled<"div">;
 declare const Sidebar: {
-  Layout: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
-  Header: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Body: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
-  Section: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Heading: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) => import("react").ReactNode;
-  Item: (props: import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => import("react").ReactNode;
-  Footer: (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;
+  Layout: typeof Layout;
+  Root: typeof Root;
+  Header: typeof Header;
+  Body: typeof Body;
+  Section: typeof Section;
+  Heading: typeof Heading;
+  Item: typeof Item;
+  Footer: typeof Footer;
+  Content: typeof Content;
 };
 //#endregion
 export { Sidebar };

package/dist/skeleton.d.ts

@@ -1,4 +1,5 @@
+import { Styled } from "./styled.js";
 //#region src/skeleton.d.ts
-declare const Skeleton: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+declare const Skeleton: Styled<"div">;
 //#endregion
 export { Skeleton };

package/dist/slider-parts.d.ts

@@ -1,9 +1,10 @@
+import { Styled } from "./styled.js";
 import * as RadixSlider from "@radix-ui/react-slider";
 //#region src/slider-parts.d.ts
-declare const Root: (props: RadixSlider.SliderProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
-declare const Track: (props: RadixSlider.SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
-declare const Range: (props: RadixSlider.SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+declare const Root: Styled<typeof RadixSlider.Root>;
+declare const Track: Styled<typeof RadixSlider.Track>;
+declare const Range: Styled<typeof RadixSlider.Range>;
 /** Render one thumb per value. */
-declare const Thumb: (props: RadixSlider.SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+declare const Thumb: Styled<typeof RadixSlider.Thumb>;
 //#endregion
 export { Range, Root, Thumb, Track };

package/dist/slider.d.ts

@@ -1,9 +1,10 @@
+import { Range, Root, Thumb, Track } from "./slider-parts.js";
 //#region src/slider.d.ts
 declare const Slider: {
-  Root: (props: import("@radix-ui/react-slider").SliderProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
-  Track: (props: import("@radix-ui/react-slider").SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
-  Range: (props: import("@radix-ui/react-slider").SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
-  Thumb: (props: import("@radix-ui/react-slider").SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Track: typeof Track;
+  Range: typeof Range;
+  Thumb: typeof Thumb;
 };
 //#endregion
 export { Slider };

package/dist/spinner.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
 //#region src/spinner.d.ts
 /** Announces itself as "Loading" unless `aria-hidden` says another element already does. */
-declare const Spinner: ({ 'aria-hidden': hidden, ...props }: ComponentPropsWithRef<'svg'>) => import("react").JSX.Element;
+declare const Spinner: Styled<"svg">;
 //#endregion
 export { Spinner };

package/dist/stack-parts.d.ts

@@ -1,6 +1,7 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/stack-parts.d.ts
-type RootProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> & {
+type RootProps = Omit<ComponentPropsWithRef<"div">, "defaultValue"> & {
   defaultValue: string;
   onValueChange?: (value: string) => void;
 };
@@ -9,14 +10,14 @@ type RootProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> & {
  * remaining items keep their relative order. Positions are animated with a FLIP
  * transition so every item glides to its new place.
  */
-declare const Root: ({ defaultValue, onValueChange, ...props }: RootProps) => import("react").JSX.Element;
-type ItemProps = Omit<ComponentPropsWithRef<'div'>, 'ref'> & {
+declare const Root: ({ defaultValue, onValueChange, ...props }: RootProps) => JSX.Element;
+type ItemProps = Omit<ComponentPropsWithRef<"div">, "ref"> & {
   value: string;
 };
 /** Sets `order` and `z-index` inline, so the stack only reorders inside a flex or grid root. */
-declare const Item: ({ value, style, ...props }: ItemProps) => import("react").JSX.Element;
-declare const Trigger: ({ onClick, ...props }: ComponentPropsWithRef<'button'>) => import("react").JSX.Element;
+declare const Item: ({ value, style, ...props }: ItemProps) => JSX.Element;
+declare const Trigger: Styled<"button">;
 /** Inert and hidden while its item is not the active one. */
-declare const Content: (props: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+declare const Content: Styled<"div">;
 //#endregion
 export { Content, Item, type ItemProps, Root, type RootProps, Trigger };

package/dist/stack-parts.js

@@ -1,8 +1,9 @@
 "use client";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { createRequiredContext, prefersReducedMotion } from "@journ/lift";
+import { prefersReducedMotion } from "@journ/lift/prefers-reduced-motion";
 import { animate } from "animejs";
+import { createRequiredContext } from "@journ/lift/required-context";
 //#region src/stack-parts.tsx
 const [StackContext, useStack] = createRequiredContext("Stack.Root");
 const [ItemContext, useItemValue] = createRequiredContext("Stack.Item");

package/dist/stat.d.ts

@@ -1,9 +1,14 @@
+import { Styled } from "./styled.js";
 //#region src/stat.d.ts
+declare const Root: Styled<"div">;
+declare const Label: Styled<"p">;
+declare const Value: Styled<"p">;
+declare const Hint: Styled<"p">;
 declare const Stat: {
-  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Label: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
-  Value: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
-  Hint: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Label: typeof Label;
+  Value: typeof Value;
+  Hint: typeof Hint;
 };
 //#endregion
 export { Stat };

package/dist/step-button.d.ts

@@ -1,11 +1,12 @@
 import { IconButtonProps } from "./icon-button.js";
+import { JSX } from "react";
 //#region src/step-button.d.ts
-type StepButtonProps = Omit<IconButtonProps, 'onClick'> & {
+type StepButtonProps = Omit<IconButtonProps, "onClick"> & {
   /** Runs after the caller's own `onClick`. */
   onStep: () => void;
-  onClick?: IconButtonProps['onClick'];
+  onClick?: IconButtonProps["onClick"];
 };
 /** The icon button behind every previous, next, minus and plus control. */
-declare const StepButton: ({ onStep, onClick, ...props }: StepButtonProps) => import("react").JSX.Element;
+declare const StepButton: ({ onStep, onClick, ...props }: StepButtonProps) => JSX.Element;
 //#endregion
 export { StepButton, type StepButtonProps };

package/dist/stepper-parts.d.ts

@@ -1,19 +1,24 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/stepper-parts.d.ts
-type StepStatus = 'complete' | 'current' | 'upcoming';
-declare const useStepperItem: any;
-type RootProps = ComponentPropsWithRef<'ol'> & {
+type StepStatus = "complete" | "current" | "upcoming";
+type ItemContextValue = {
+  step: number;
+  status: StepStatus;
+};
+declare const useStepperItem: () => ItemContextValue;
+type RootProps = ComponentPropsWithRef<"ol"> & {
   /** The step the user is on, starting at 1. */
   value: number;
 };
-declare const Root: ({ value, ...props }: RootProps) => import("react").JSX.Element;
-type ItemProps = ComponentPropsWithRef<'li'> & {
+declare const Root: ({ value, ...props }: RootProps) => JSX.Element;
+type ItemProps = ComponentPropsWithRef<"li"> & {
   step: number;
 };
-declare const Item: ({ step, ...props }: ItemProps) => import("react").JSX.Element;
+declare const Item: ({ step, ...props }: ItemProps) => JSX.Element;
 /** Shows the step number unless children are given. */
-declare const Indicator: ({ children, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
-declare const Label: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
-declare const Description: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
+declare const Indicator: Styled<"span">;
+declare const Label: Styled<"span">;
+declare const Description: Styled<"span">;
 //#endregion
 export { Description, Indicator, Item, Label, Root, type StepStatus, useStepperItem };

package/dist/stepper-parts.js

@@ -1,10 +1,11 @@
 "use client";
 import { part } from "./lib/part.js";
 import { jsx } from "react/jsx-runtime";
-import { createRequiredContext } from "@journ/lift";
+import { createRequiredContext } from "@journ/lift/required-context";
 //#region src/stepper-parts.tsx
 const [StepperContext, useStepper] = createRequiredContext("Stepper.Root");
-const [ItemContext, useStepperItem] = createRequiredContext("Stepper.Item");
+const [ItemContext, useStepperItemContext] = createRequiredContext("Stepper.Item");
+const useStepperItem = useStepperItemContext;
 const Root = ({ value, ...props }) => /* @__PURE__ */ jsx(StepperContext, {
 	value: { value },
 	children: /* @__PURE__ */ jsx("ol", {

package/dist/stepper.d.ts

@@ -1,11 +1,11 @@
-import { Indicator, Item, Root } from "./stepper-parts.js";
+import { Description, Indicator, Item, Label, Root } from "./stepper-parts.js";
 //#region src/stepper.d.ts
 declare const Stepper: {
   Root: typeof Root;
   Item: typeof Item;
   Indicator: typeof Indicator;
-  Label: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
-  Description: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
+  Label: typeof Label;
+  Description: typeof Description;
 };
 //#endregion
 export { Stepper };

package/dist/styled.d.ts

@@ -0,0 +1,5 @@
+import { ComponentPropsWithRef, ElementType, JSX } from "react";
+//#region src/styled.d.ts
+type Styled<T extends ElementType> = (props: ComponentPropsWithRef<T>) => JSX.Element;
+//#endregion
+export type { Styled };

package/dist/switch-parts.d.ts

@@ -1,6 +1,7 @@
+import { Styled } from "./styled.js";
 import * as RadixSwitch from "@radix-ui/react-switch";
 //#region src/switch-parts.d.ts
-declare const Root: (props: RadixSwitch.SwitchProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactNode;
-declare const Thumb: (props: RadixSwitch.SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+declare const Root: Styled<typeof RadixSwitch.Root>;
+declare const Thumb: Styled<typeof RadixSwitch.Thumb>;
 //#endregion
 export { Root, Thumb };

package/dist/switch.d.ts

@@ -1,7 +1,8 @@
+import { Root, Thumb } from "./switch-parts.js";
 //#region src/switch.d.ts
 declare const Switch: {
-  Root: (props: import("@radix-ui/react-switch").SwitchProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactNode;
-  Thumb: (props: import("@radix-ui/react-switch").SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Thumb: typeof Thumb;
 };
 //#endregion
 export { Switch };

package/dist/table.d.ts

@@ -1,12 +1,20 @@
+import { Styled } from "./styled.js";
 //#region src/table.d.ts
+declare const Root: Styled<"table">;
+declare const Caption: Styled<"caption">;
+declare const Head: Styled<"thead">;
+declare const Body: Styled<"tbody">;
+declare const Row: Styled<"tr">;
+declare const Header: Styled<"th">;
+declare const Cell: Styled<"td">;
 declare const Table: {
-  Root: (props: import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>) => import("react").ReactNode;
-  Caption: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
-  Head: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>) => import("react").ReactNode;
-  Body: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>) => import("react").ReactNode;
-  Row: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>) => import("react").ReactNode;
-  Header: (props: import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>) => import("react").ReactNode;
-  Cell: (props: import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Caption: typeof Caption;
+  Head: typeof Head;
+  Body: typeof Body;
+  Row: typeof Row;
+  Header: typeof Header;
+  Cell: typeof Cell;
 };
 //#endregion
 export { Table };