@journ/nude 0.1.0 → 0.1.2

package/dist/accordion-parts.d.ts

@@ -1,15 +1,16 @@
+import { Styled } from "./styled.js";
 import * as RadixAccordion from "@radix-ui/react-accordion";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/accordion-parts.d.ts
-declare const Root: import("react").ForwardRefExoticComponent<(RadixAccordion.AccordionMultipleProps | RadixAccordion.AccordionSingleProps) & import("react").RefAttributes<HTMLDivElement>>;
-declare const Item: (props: RadixAccordion.AccordionItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
-declare const Content: (props: RadixAccordion.AccordionContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+declare const Root: typeof RadixAccordion.Root;
+declare const Item: Styled<typeof RadixAccordion.Item>;
+declare const Content: Styled<typeof RadixAccordion.Content>;
 type TriggerProps = ComponentPropsWithRef<typeof RadixAccordion.Trigger> & {
   classNames?: {
     header?: string;
   };
 };
 /** Wrapped in a heading, as the accordion pattern requires. */
-declare const Trigger: ({ classNames, ...props }: TriggerProps) => import("react").JSX.Element;
+declare const Trigger: ({ classNames, ...props }: TriggerProps) => JSX.Element;
 //#endregion
 export { Content, Item, Root, Trigger };

package/dist/accordion.d.ts

@@ -1,10 +1,10 @@
-import { Trigger } from "./accordion-parts.js";
+import { Content, Item, Root, Trigger } from "./accordion-parts.js";
 //#region src/accordion.d.ts
 declare const Accordion: {
-  Root: import("react").ForwardRefExoticComponent<(import("@radix-ui/react-accordion").AccordionMultipleProps | import("@radix-ui/react-accordion").AccordionSingleProps) & import("react").RefAttributes<HTMLDivElement>>;
-  Item: (props: import("@radix-ui/react-accordion").AccordionItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Item: typeof Item;
   Trigger: typeof Trigger;
-  Content: (props: import("@radix-ui/react-accordion").AccordionContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  Content: typeof Content;
 };
 //#endregion
 export { Accordion };

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

@@ -1,13 +1,14 @@
-import { ModalContentProps } from "./lib/modal-content.js";
+import { Styled } from "./styled.js";
+import { ModalContentPart } from "./lib/modal-content.js";
 import { Actions } from "./lib/modal-parts.js";
 import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
 //#region src/alert-dialog-parts.d.ts
-declare const Root: import("react").FC<RadixAlertDialog.AlertDialogProps>;
-declare const Trigger: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const Cancel: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const Action: import("react").ForwardRefExoticComponent<RadixAlertDialog.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const Content: ({ classNames, overlayRef, ...props }: ModalContentProps<typeof RadixAlertDialog>) => import("react").JSX.Element;
-declare const Title: (props: RadixAlertDialog.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>) => import("react").ReactNode;
-declare const Description: (props: RadixAlertDialog.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>) => import("react").ReactNode;
+declare const Root: typeof RadixAlertDialog.Root;
+declare const Trigger: typeof RadixAlertDialog.Trigger;
+declare const Cancel: typeof RadixAlertDialog.Cancel;
+declare const Action: typeof RadixAlertDialog.Action;
+declare const Content: ModalContentPart<typeof RadixAlertDialog>;
+declare const Title: Styled<typeof RadixAlertDialog.Title>;
+declare const Description: Styled<typeof RadixAlertDialog.Description>;
 //#endregion
 export { Action, Actions, Cancel, Content, Description, Root, Title, Trigger };

package/dist/alert-dialog.d.ts

@@ -1,14 +1,15 @@
-import { ModalContentProps } from "./lib/modal-content.js";
+import { Actions } from "./lib/modal-parts.js";
+import { Action, Cancel, Content, Description, Root, Title, Trigger } from "./alert-dialog-parts.js";
 //#region src/alert-dialog.d.ts
 declare const AlertDialog: {
-  Root: import("react").FC<import("@radix-ui/react-alert-dialog").AlertDialogProps>;
-  Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-  Content: ({ classNames, overlayRef, ...props }: ModalContentProps<typeof import("@radix-ui/react-alert-dialog")>) => import("react").JSX.Element;
-  Title: (props: import("@radix-ui/react-alert-dialog").AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>) => import("react").ReactNode;
-  Description: (props: import("@radix-ui/react-alert-dialog").AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>) => import("react").ReactNode;
-  Actions: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Cancel: import("react").ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
-  Action: import("react").ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Content: typeof Content;
+  Title: typeof Title;
+  Description: typeof Description;
+  Actions: typeof Actions;
+  Cancel: typeof Cancel;
+  Action: typeof Action;
 };
 //#endregion
 export { AlertDialog };

package/dist/alert.d.ts

@@ -1,11 +1,18 @@
+import { Styled } from "./styled.js";
 //#region src/alert.d.ts
+declare const Root: Styled<"div">;
+declare const Icon: Styled<"span">;
+declare const Body: Styled<"div">;
+declare const Title: Styled<"p">;
+declare const Description: Styled<"p">;
+declare const Actions: Styled<"div">;
 declare const Alert: {
-  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Icon: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
-  Body: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Title: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
-  Description: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
-  Actions: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Icon: typeof Icon;
+  Body: typeof Body;
+  Title: typeof Title;
+  Description: typeof Description;
+  Actions: typeof Actions;
 };
 //#endregion
 export { Alert };

package/dist/animated-size.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/animated-size.d.ts
-type AnimatedSizeProps = ComponentPropsWithRef<'div'> & {
+type AnimatedSizeProps = ComponentPropsWithRef<"div"> & {
   /** Animate the width as the content's width changes. */
   width?: boolean;
   /** Animate the height as the content's height changes. */
@@ -13,6 +13,6 @@ type AnimatedSizeProps = ComponentPropsWithRef<'div'> & {
  * Follows the size of its content: when the children grow or shrink, the box
  * glides to the new size. The first measure and reduced motion jump straight there.
  */
-declare const AnimatedSize: ({ width, height, classNames, style, children, ...props }: AnimatedSizeProps) => import("react").JSX.Element;
+declare const AnimatedSize: ({ width, height, classNames, style, children, ...props }: AnimatedSizeProps) => JSX.Element;
 //#endregion
 export { AnimatedSize, type AnimatedSizeProps };

package/dist/avatar-parts.d.ts

@@ -1,10 +1,11 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as RadixAvatar from "@radix-ui/react-avatar";
 //#region src/avatar-parts.d.ts
-declare const Root: (props: RadixAvatar.AvatarProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
-declare const Fallback: (props: RadixAvatar.AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+declare const Root: Styled<typeof RadixAvatar.Root>;
+declare const Fallback: Styled<typeof RadixAvatar.Fallback>;
 declare const Image: ({ alt, ...props }: ComponentPropsWithRef<typeof RadixAvatar.Image> & {
   alt: string;
-}) => import("react").JSX.Element;
+}) => JSX.Element;
 //#endregion
 export { Fallback, Image, Root };

package/dist/avatar.d.ts

@@ -1,9 +1,9 @@
-import { Image } from "./avatar-parts.js";
+import { Fallback, Image, Root } from "./avatar-parts.js";
 //#region src/avatar.d.ts
 declare const Avatar: {
-  Root: (props: import("@radix-ui/react-avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+  Root: typeof Root;
   Image: typeof Image;
-  Fallback: (props: import("@radix-ui/react-avatar").AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+  Fallback: typeof Fallback;
 };
 //#endregion
 export { Avatar };

package/dist/badge.d.ts

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

package/dist/breadcrumbs.d.ts

@@ -1,11 +1,18 @@
+import { Styled } from "./styled.js";
 //#region src/breadcrumbs.d.ts
+declare const Root: Styled<"nav">;
+declare const List: Styled<"ol">;
+declare const Item: Styled<"li">;
+declare const Link: Styled<"a">;
+declare const Page: Styled<"span">;
+declare const Separator: Styled<"li">;
 declare const Breadcrumbs: {
-  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
-  List: (props: import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>) => import("react").ReactNode;
-  Item: (props: import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>) => import("react").ReactNode;
-  Link: (props: import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => import("react").ReactNode;
-  Page: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
-  Separator: (props: import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  List: typeof List;
+  Item: typeof Item;
+  Link: typeof Link;
+  Page: typeof Page;
+  Separator: typeof Separator;
 };
 //#endregion
 export { Breadcrumbs };

package/dist/bulk-bar.d.ts

@@ -1,8 +1,13 @@
+import { Styled } from "./styled.js";
 //#region src/bulk-bar.d.ts
+/** Render it while something is selected. */
+declare const Root: Styled<"div">;
+declare const Count: Styled<"p">;
+declare const Actions: Styled<"div">;
 declare const BulkBar: {
-  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Count: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
-  Actions: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Count: typeof Count;
+  Actions: typeof Actions;
 };
 //#endregion
 export { BulkBar };

package/dist/button.d.ts

@@ -1,13 +1,13 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/button.d.ts
 type ButtonProps = {
   /** Marks the button busy and ignores presses until the work is done. */
   pending?: boolean;
 } & (({
   href?: never;
-} & ComponentPropsWithRef<'button'>) | ({
+} & ComponentPropsWithRef<"button">) | ({
   href: string;
-} & ComponentPropsWithRef<'a'>));
-declare const Button: ({ pending, ...props }: ButtonProps) => import("react").JSX.Element;
+} & ComponentPropsWithRef<"a">));
+declare const Button: ({ pending, ...props }: ButtonProps) => JSX.Element;
 //#endregion
 export { Button, type ButtonProps };

package/dist/calendar-parts.d.ts

@@ -1,7 +1,8 @@
+import { Styled } from "./styled.js";
 import { IconButtonProps } from "./icon-button.js";
-import { ComponentPropsWithRef, ReactNode } from "react";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
 //#region src/calendar-parts.d.ts
-type CalendarView = 'days' | 'months' | 'years';
+type CalendarView = "days" | "months" | "years";
 type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 /** A range being picked: `to` stays null until the second click. */
 type CalendarRange = {
@@ -32,24 +33,20 @@ type CalendarContextValue = {
   meta: CalendarMeta;
 };
 /** What a day, month or year cell is right now. Also set as its `data-state`. */
-type CalendarCellState = 'idle' | 'today' | 'selected' | 'inRange';
+type CalendarCellState = "idle" | "today" | "selected" | "inRange";
 declare const YEAR_PAGE_SIZE = 12;
-declare const useCalendar: any;
+declare const useCalendar: () => CalendarContextValue;
 type ProviderProps = CalendarContextValue & {
   children?: ReactNode;
 };
-declare const Provider: ({ state, actions, meta, children }: ProviderProps) => import("react").JSX.Element;
-/** Month, view and paging shared by every calendar-based picker. */
-declare const useCalendarNavigation: (initialMonth: Date, initialView?: CalendarView) => {
-  month: any;
+declare const Provider: ({ state, actions, meta, children }: ProviderProps) => JSX.Element;
+type CalendarNavigation = {
+  month: Date;
   view: CalendarView;
-  navigation: {
-    showMonth: (next: Date) => void;
-    showView: import("react").Dispatch<import("react").SetStateAction<CalendarView>>;
-    previous: () => void;
-    next: () => void;
-  };
+  navigation: Pick<CalendarActions, "showMonth" | "showView" | "previous" | "next">;
 };
+/** Month, view and paging shared by every calendar-based picker. */
+declare const useCalendarNavigation: (initialMonth: Date, initialView?: CalendarView) => CalendarNavigation;
 type RootProps = {
   value?: Date | null;
   defaultValue?: Date | null;
@@ -59,23 +56,23 @@ type RootProps = {
   weekStartsOn?: Weekday;
   children?: ReactNode;
 };
-declare const Root: ({ value, defaultValue, onValueChange, defaultMonth, locale, weekStartsOn, children }: RootProps) => import("react").JSX.Element;
-declare const Frame: (props: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Header: (props: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Heading: ({ onClick, ...props }: Omit<ComponentPropsWithRef<'button'>, 'children'>) => import("react").JSX.Element;
-declare const Previous: (props: IconButtonProps) => import("react").JSX.Element;
-declare const Next: (props: IconButtonProps) => import("react").JSX.Element;
-type GridProps<Slot extends string> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+declare const Root: ({ value, defaultValue, onValueChange, defaultMonth, locale, weekStartsOn, children }: RootProps) => JSX.Element;
+declare const Frame: Styled<"div">;
+declare const Header: Styled<"div">;
+declare const Heading: ({ onClick, ...props }: Omit<ComponentPropsWithRef<"button">, "children">) => JSX.Element;
+declare const Previous: (props: IconButtonProps) => JSX.Element;
+declare const Next: (props: IconButtonProps) => JSX.Element;
+type GridProps<Slot extends string> = Omit<ComponentPropsWithRef<"div">, "children"> & {
   classNames?: Partial<Record<Slot, (state: CalendarCellState) => string>>;
 };
-type WeekdaysProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+type WeekdaysProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
   classNames?: {
     weekday?: string;
   };
 };
-declare const Weekdays: ({ classNames, ...props }: WeekdaysProps) => import("react").JSX.Element | null;
-declare const Days: ({ classNames, ...props }: GridProps<'day'>) => import("react").JSX.Element | null;
-declare const Months: ({ classNames, ...props }: GridProps<'month'>) => import("react").JSX.Element | null;
-declare const Years: ({ classNames, ...props }: GridProps<'year'>) => import("react").JSX.Element | null;
+declare const Weekdays: ({ classNames, ...props }: WeekdaysProps) => ReactNode;
+declare const Days: ({ classNames, ...props }: GridProps<"day">) => ReactNode;
+declare const Months: ({ classNames, ...props }: GridProps<"month">) => ReactNode;
+declare const Years: ({ classNames, ...props }: GridProps<"year">) => ReactNode;
 //#endregion
 export { type CalendarActions, type CalendarCellState, type CalendarContextValue, type CalendarMeta, type CalendarRange, type CalendarState, type CalendarView, Days, Frame, Header, Heading, Months, Next, Previous, Provider, Root, type RootProps, type Weekday, Weekdays, YEAR_PAGE_SIZE, Years, useCalendar, useCalendarNavigation };

package/dist/calendar-parts.js

@@ -21,7 +21,8 @@ const useToday = () => {
 	const [year, month, date] = key.split("-").map(Number);
 	return new Date(year ?? 0, month ?? 0, date ?? 1);
 };
-const [CalendarContext, useCalendar] = createRequiredContext("Calendar.Provider or Calendar.Root");
+const [CalendarContext, useCalendarContext] = createRequiredContext("Calendar.Provider or Calendar.Root");
+const useCalendar = useCalendarContext;
 const Provider = ({ state, actions, meta, children }) => /* @__PURE__ */ jsx(CalendarContext, {
 	value: {
 		state,

package/dist/card.d.ts

@@ -1,12 +1,20 @@
+import { Styled } from "./styled.js";
 //#region src/card.d.ts
+declare const Root: Styled<"div">;
+declare const Icon: Styled<"span">;
+declare const Header: Styled<"div">;
+declare const Title: Styled<"h3">;
+declare const Description: Styled<"p">;
+declare const Content: Styled<"div">;
+declare const Footer: Styled<"footer">;
 declare const Card: {
-  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Icon: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
-  Header: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Title: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) => import("react").ReactNode;
-  Description: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
-  Content: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
-  Footer: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Icon: typeof Icon;
+  Header: typeof Header;
+  Title: typeof Title;
+  Description: typeof Description;
+  Content: typeof Content;
+  Footer: typeof Footer;
 };
 //#endregion
 export { Card };

package/dist/carousel-parts.d.ts

@@ -1,12 +1,21 @@
+import { Styled } from "./styled.js";
 import { IconButtonProps } from "./icon-button.js";
-import { ComponentPropsWithRef, ReactNode } from "react";
-import useEmblaCarousel from "embla-carousel-react";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 //#region src/carousel-parts.d.ts
-type Orientation = 'horizontal' | 'vertical';
+type Orientation = "horizontal" | "vertical";
 type Options = Parameters<typeof useEmblaCarousel>[0];
 type Plugins = Parameters<typeof useEmblaCarousel>[1];
-declare const useCarousel: any;
-type RootProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+type CarouselContextValue = {
+  viewport: UseEmblaCarouselType[0];
+  orientation: Orientation;
+  canPrevious: boolean;
+  canNext: boolean;
+  previous: () => void;
+  next: () => void;
+};
+declare const useCarousel: () => CarouselContextValue;
+type RootProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
   /** Embla options such as `loop` and `align`. */
   opts?: Options;
   plugins?: Plugins;
@@ -14,16 +23,16 @@ type RootProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
   children?: ReactNode;
 };
 /** Slides with Embla. Arrow keys move between slides. */
-declare const Root: ({ opts, plugins, orientation, children, onKeyDownCapture, ...props }: RootProps) => import("react").JSX.Element;
-type ContentProps = ComponentPropsWithRef<'div'> & {
+declare const Root: ({ opts, plugins, orientation, children, onKeyDownCapture, ...props }: RootProps) => JSX.Element;
+type ContentProps = ComponentPropsWithRef<"div"> & {
   classNames?: {
     viewport?: string;
   };
 };
 /** The track of slides, inside the viewport Embla scrolls. Embla needs the viewport to clip and the track to be a flex row or column. */
-declare const Content: ({ classNames, ...props }: ContentProps) => import("react").JSX.Element;
-declare const Item: (props: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Previous: (props: IconButtonProps) => import("react").JSX.Element;
-declare const Next: (props: IconButtonProps) => import("react").JSX.Element;
+declare const Content: ({ classNames, ...props }: ContentProps) => JSX.Element;
+declare const Item: Styled<"div">;
+declare const Previous: (props: IconButtonProps) => JSX.Element;
+declare const Next: (props: IconButtonProps) => JSX.Element;
 //#endregion
 export { Content, Item, Next, Previous, Root, type RootProps, useCarousel };

package/dist/carousel-parts.js

@@ -5,7 +5,8 @@ import { jsx } from "react/jsx-runtime";
 import { createRequiredContext } from "@journ/lift";
 import useEmblaCarousel from "embla-carousel-react";
 //#region src/carousel-parts.tsx
-const [CarouselContext, useCarousel] = createRequiredContext("Carousel.Root");
+const [CarouselContext, useCarouselContext] = createRequiredContext("Carousel.Root");
+const useCarousel = useCarouselContext;
 /** Slides with Embla. Arrow keys move between slides. */
 const Root = ({ opts, plugins, orientation = "horizontal", children, onKeyDownCapture, ...props }) => {
 	const [viewport, api] = useEmblaCarousel({

package/dist/checkbox-parts.d.ts

@@ -1,7 +1,8 @@
+import { Styled } from "./styled.js";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
 //#region src/checkbox-parts.d.ts
-declare const Root: (props: RadixCheckbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactNode;
+declare const Root: Styled<typeof RadixCheckbox.Root>;
 /** Shown while the root is checked or indeterminate. */
-declare const Indicator: (props: RadixCheckbox.CheckboxIndicatorProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactNode;
+declare const Indicator: Styled<typeof RadixCheckbox.Indicator>;
 //#endregion
 export { Indicator, Root };

package/dist/checkbox.d.ts

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

package/dist/chip.d.ts

@@ -1,20 +1,22 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "./styled.js";
+import { ComponentPropsWithRef, JSX } from "react";
 //#region src/chip.d.ts
-declare const Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
+declare const Root: Styled<"span">;
+declare const Dot: Styled<"span">;
 /** A small close button for chips that can be dismissed. `label` is the accessible name. */
-declare const Remove: ({ label, ...props }: ComponentPropsWithRef<'button'> & {
+declare const Remove: ({ label, ...props }: ComponentPropsWithRef<"button"> & {
   label: string;
-}) => import("react").JSX.Element;
+}) => JSX.Element;
 type TagProps = ComponentPropsWithRef<typeof Root> & {
   /** Shows a remove button when given. Leave it out for a chip that cannot be dismissed. */
   onRemove?: () => void;
   removeLabel?: string;
 };
 /** A chip with a remove button: the shape of a selected value. */
-declare const Tag: ({ onRemove, removeLabel, children, ...props }: TagProps) => import("react").JSX.Element;
+declare const Tag: ({ onRemove, removeLabel, children, ...props }: TagProps) => JSX.Element;
 declare const Chip: {
-  Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
-  Dot: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Dot: typeof Dot;
   Remove: typeof Remove;
   Tag: typeof Tag;
 };

package/dist/collapsible-parts.d.ts

@@ -1,7 +1,8 @@
+import { Styled } from "./styled.js";
 import * as RadixCollapsible from "@radix-ui/react-collapsible";
 //#region src/collapsible-parts.d.ts
-declare const Root: import("react").ForwardRefExoticComponent<RadixCollapsible.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
-declare const Trigger: import("react").ForwardRefExoticComponent<RadixCollapsible.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-declare const Content: (props: RadixCollapsible.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+declare const Root: typeof RadixCollapsible.Root;
+declare const Trigger: typeof RadixCollapsible.Trigger;
+declare const Content: Styled<typeof RadixCollapsible.Content>;
 //#endregion
 export { Content, Root, Trigger };

package/dist/collapsible.d.ts

@@ -1,8 +1,9 @@
+import { Content, Root, Trigger } from "./collapsible-parts.js";
 //#region src/collapsible.d.ts
 declare const Collapsible: {
-  Root: import("react").ForwardRefExoticComponent<import("@radix-ui/react-collapsible").CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
-  Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-collapsible").CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-  Content: (props: import("@radix-ui/react-collapsible").CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Content: typeof Content;
 };
 //#endregion
 export { Collapsible };

package/dist/combobox-parts.d.ts

@@ -1,74 +1,30 @@
-import { PickerActions, PickerContextValue, PickerProviderProps, PickerState } from "./lib/picker.js";
-import { ComponentPropsWithRef, ReactNode } from "react";
+import { Styled } from "./styled.js";
+import { Picker, PickerActions, PickerContextValue, PickerState } from "./lib/picker.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
 import { Command } from "cmdk";
 //#region src/combobox-parts.d.ts
 type ComboboxState = PickerState<string>;
 type ComboboxActions = PickerActions<string>;
-type ComboboxContextValue = Omit<PickerContextValue<string, object>, 'meta'>;
-declare const ContextProvider: ({ state, actions, meta, children }: PickerProviderProps<string, object>) => import("react").JSX.Element, Provider: ({ children, ...props }: PickerProviderProps<string, object>) => import("react").JSX.Element, Trigger: (props: ComponentPropsWithRef<'button'>) => import("react").JSX.Element, Value: ({ placeholder, children, ...props }: import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
-  placeholder?: string;
-}) => import("react").JSX.Element, useCombobox: any;
+type ComboboxContextValue = Omit<PickerContextValue<string, object>, "meta">;
+declare const ContextProvider: Picker<string>["ContextProvider"];
+declare const Provider: Picker<string>["Provider"];
+declare const Trigger: Picker<string>["Trigger"];
+declare const Value: Picker<string>["Value"];
+declare const useCombobox: Picker<string>["usePicker"];
 type RootProps = {
   value?: string | null;
   defaultValue?: string | null;
   onValueChange?: (value: string) => void;
   children?: ReactNode;
 };
-declare const Root: ({ value, defaultValue, onValueChange, children }: RootProps) => import("react").JSX.Element;
+declare const Root: ({ value, defaultValue, onValueChange, children }: RootProps) => JSX.Element;
 /** Matches without accents or case, against the item's keywords when it has any. */
-declare const 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>) => ReactNode;
-declare const Input: (props: Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
-  ref?: React.Ref<HTMLInputElement>;
-} & {
-  asChild?: boolean;
-}, "asChild" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
-  value?: string;
-  onValueChange?: (search: string) => void;
-} & import("react").RefAttributes<HTMLInputElement>) => ReactNode;
-declare const 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>) => ReactNode;
-declare const 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>) => ReactNode;
-declare const 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>) => ReactNode;
-type ItemProps = Omit<ComponentPropsWithRef<typeof Command.Item>, 'value'> & {
+declare const Frame: Styled<typeof Command>;
+declare const Input: Styled<typeof Command.Input>;
+declare const List: Styled<typeof Command.List>;
+declare const Empty: Styled<typeof Command.Empty>;
+declare const Group: Styled<typeof Command.Group>;
+type ItemProps = Omit<ComponentPropsWithRef<typeof Command.Item>, "value"> & {
   value: string;
 };
 type OptionProps = ItemProps & {
@@ -77,9 +33,9 @@ type OptionProps = ItemProps & {
   onPick: (value: string) => void;
 };
 /** An option that knows nothing about the picker around it. Combobox, MultipleSelector and others build their items from it. */
-declare const Option: ({ value, checked, onPick, onSelect, ...props }: OptionProps) => import("react").JSX.Element;
-declare const Item: (props: ItemProps) => import("react").JSX.Element;
+declare const Option: ({ value, checked, onPick, onSelect, ...props }: OptionProps) => JSX.Element;
+declare const Item: (props: ItemProps) => JSX.Element;
 /** Rendered only inside the checked item. */
-declare const ItemIndicator: (props: ComponentPropsWithRef<'span'>) => import("react").JSX.Element | null;
+declare const ItemIndicator: (props: ComponentPropsWithRef<"span">) => ReactNode;
 //#endregion
 export { type ComboboxActions, type ComboboxContextValue, type ComboboxState, ContextProvider, Empty, Frame, Group, Input, Item, ItemIndicator, type ItemProps, List, Option, type OptionProps, Provider, Root, type RootProps, Trigger, Value, useCombobox };