@journ/bloom 0.1.1 → 0.1.2

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

@@ -1,11 +1,12 @@
 import { IconButtonProps } from "./icon-button.js";
-import { ComponentPropsWithRef } from "react";
+import { JSX } from "react";
 import * as Nude from "@journ/nude/month-stepper-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/month-stepper-parts.d.ts
 /** Always reports the first day of the month. */
-declare const Root: ({ className, ...props }: Nude.RootProps) => import("react").JSX.Element;
-declare const Previous: ({ tone, size, className, children, ...props }: IconButtonProps) => import("react").JSX.Element;
-declare const Next: ({ tone, size, className, children, ...props }: IconButtonProps) => import("react").JSX.Element;
-declare const Label: ({ className, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
+declare const Root: ({ className, ...props }: Nude.RootProps) => JSX.Element;
+declare const Previous: ({ tone, size, className, children, ...props }: IconButtonProps) => JSX.Element;
+declare const Next: ({ tone, size, className, children, ...props }: IconButtonProps) => JSX.Element;
+declare const Label: Styled<"span">;
 //#endregion
 export { Label, Next, Previous, Root };

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

@@ -1,18 +1,17 @@
-import { ButtonProps } from "./button.js";
+import { PickerTrigger, PickerValue } from "./lib/picker.js";
 import { Empty, Frame, Group, Input as Input$1, ItemIndicator, List } from "./combobox-parts.js";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/multiple-selector-parts";
 import { RootProps } from "@journ/nude/multiple-selector-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/multiple-selector-parts.d.ts
-declare const Root: any, useMultipleSelector: any;
-declare const Trigger: ({ tone, className, children, ...props }: import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-  tone?: ButtonProps['tone'];
-}) => import("react").JSX.Element, Value: ({ className, ...props }: {
-  className?: string;
-}) => import("react").JSX.Element;
-declare const Tags: () => import("react").JSX.Element;
-declare const Input: (props: ComponentPropsWithRef<typeof Input$1>) => import("react").JSX.Element;
-declare const Item: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Item>) => import("react").JSX.Element;
-declare const Create: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Create>) => import("react").JSX.Element;
+declare const Root: typeof Nude.Root;
+declare const useMultipleSelector: typeof Nude.useMultipleSelector;
+declare const Trigger: PickerTrigger;
+declare const Value: PickerValue<ComponentPropsWithRef<typeof Nude.Value>>;
+declare const Tags: () => JSX.Element;
+declare const Input: Styled<typeof Input$1>;
+declare const Item: Styled<typeof Nude.Item>;
+declare const Create: Styled<typeof Nude.Create>;
 //#endregion
 export { Create, Empty, Frame, Group, Input, Item, ItemIndicator, List, Root, type RootProps, Tags, Trigger, Value, useMultipleSelector };

package/dist/multiple-selector-parts.js

@@ -5,8 +5,11 @@ import { Empty, Frame, Group, Input as Input$1, ItemIndicator, List, option } fr
 import { jsx } from "react/jsx-runtime";
 import * as Nude from "@journ/nude/multiple-selector-parts";
 //#region src/multiple-selector-parts.tsx
-const { Root, useMultipleSelector } = Nude;
-const { Trigger, Value } = stylePicker(Nude);
+const Root = Nude.Root;
+const useMultipleSelector = Nude.useMultipleSelector;
+const picker = stylePicker(Nude);
+const Trigger = picker.Trigger;
+const Value = picker.Value;
 const Tags = () => /* @__PURE__ */ jsx(Nude.Tags, { components: { Tag: Chip.Tag } });
 const Input = (props) => {
 	const { search, setSearch } = useMultipleSelector();

package/dist/multiple-selector.d.ts

@@ -1,16 +1,11 @@
-import { ButtonProps } from "./button.js";
 import { Empty, Frame, Group, ItemIndicator, List } from "./combobox-parts.js";
 import { Content, Description, Title } from "./drawer-parts.js";
-import { Create, Input, Item, RootProps, Tags, useMultipleSelector } from "./multiple-selector-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: any;
-  Trigger: ({ tone, className, children, ...props }: import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-    tone?: ButtonProps['tone'];
-  }) => import("react").JSX.Element;
-  Value: ({ className, ...props }: {
-    className?: string;
-  }) => import("react").JSX.Element;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Value: typeof Value;
   Tags: typeof Tags;
   Content: typeof Content;
   Title: typeof Title;

package/dist/nav-bar.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/nav-bar.d.ts
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<'nav'>) => import("react").JSX.Element;
-declare const Item: ({ className, children, ...props }: ComponentPropsWithRef<'a'>) => import("react").JSX.Element;
+declare const Root: Styled<"nav">;
+declare const Item: Styled<"a">;
 declare const NavBar: {
   Root: typeof Root;
   Item: typeof Item;

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

@@ -1,12 +1,13 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/navigation-menu-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/navigation-menu-parts.d.ts
 /** Includes the viewport, the panel that Content opens into. */
-declare const Root: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Root>, 'classNames'>) => import("react").JSX.Element;
-declare const List: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.List>) => import("react").JSX.Element;
-declare const Item: any;
-declare const Trigger: ({ className, children, ...props }: ComponentPropsWithRef<typeof Nude.Trigger>) => import("react").JSX.Element;
-declare const Content: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Content>) => import("react").JSX.Element;
-declare const Link: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Link>) => import("react").JSX.Element;
+declare const Root: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Root>, "classNames">) => JSX.Element;
+declare const List: Styled<typeof Nude.List>;
+declare const Item: typeof Nude.Item;
+declare const Trigger: Styled<typeof Nude.Trigger>;
+declare const Content: Styled<typeof Nude.Content>;
+declare const Link: Styled<typeof Nude.Link>;
 //#endregion
 export { Content, Item, Link, List, Root, Trigger };

package/dist/navigation-menu.d.ts

@@ -1,9 +1,9 @@
-import { Content, Link, List, Root, Trigger } 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: typeof List;
-  Item: any;
+  Item: typeof Item;
   Trigger: typeof Trigger;
   Content: typeof Content;
   Link: typeof Link;

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

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

package/dist/otp-input.d.ts

@@ -1,9 +1,9 @@
-import { Root, Slot } from "./otp-input-parts.js";
+import { Hidden, Root, Slot } from "./otp-input-parts.js";
 //#region src/otp-input.d.ts
 declare const OtpInput: {
   Root: typeof Root;
   Slot: typeof Slot;
-  Hidden: any;
+  Hidden: typeof Hidden;
 };
 //#endregion
 export { OtpInput };

package/dist/page-header.d.ts

@@ -1,8 +1,8 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/page-header.d.ts
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<'header'>) => import("react").JSX.Element;
-declare const Title: ({ className, ...props }: ComponentPropsWithRef<'h1'>) => import("react").JSX.Element;
-declare const Actions: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+declare const Root: Styled<"header">;
+declare const Title: Styled<"h1">;
+declare const Actions: Styled<"div">;
 declare const PageHeader: {
   Root: typeof Root;
   Title: typeof Title;

package/dist/page.d.ts

@@ -1,41 +1,14 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { PageTint } from "./lib/tones.js";
+import { ComponentPropsWithRef, JSX } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/page.d.ts
-declare const pageRoot: import("tailwind-variants").TVReturnType<{
-  tone: {
-    canvas: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark";
-    ink: "bg-bloom-ink text-bloom-paper";
-    indigo: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-indigo/10 to-bloom-indigo/10";
-    mint: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-mint/10 to-bloom-mint/10";
-    sky: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-sky/10 to-bloom-sky/10";
-    yellow: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-yellow/10 to-bloom-yellow/10";
-    coral: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-coral/10 to-bloom-coral/10";
-  };
-}, undefined, "min-h-dvh w-full", {
-  tone: {
-    canvas: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark";
-    ink: "bg-bloom-ink text-bloom-paper";
-    indigo: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-indigo/10 to-bloom-indigo/10";
-    mint: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-mint/10 to-bloom-mint/10";
-    sky: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-sky/10 to-bloom-sky/10";
-    yellow: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-yellow/10 to-bloom-yellow/10";
-    coral: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-coral/10 to-bloom-coral/10";
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  tone: {
-    canvas: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark";
-    ink: "bg-bloom-ink text-bloom-paper";
-    indigo: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-indigo/10 to-bloom-indigo/10";
-    mint: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-mint/10 to-bloom-mint/10";
-    sky: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-sky/10 to-bloom-sky/10";
-    yellow: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-yellow/10 to-bloom-yellow/10";
-    coral: "bg-bloom-canvas scheme-light dark:bg-bloom-canvas-dark dark:scheme-dark font-bloom-display text-bloom-foreground dark:text-bloom-foreground-dark bg-linear-to-b from-bloom-coral/10 to-bloom-coral/10";
-  };
-}, undefined>>;
-type RootProps = ComponentPropsWithRef<'div'> & VariantProps<typeof pageRoot>;
-declare const Root: ({ tone, className, ...props }: RootProps) => import("react").JSX.Element;
-declare const Content: ({ className, ...props }: ComponentPropsWithRef<'main'>) => import("react").JSX.Element;
-declare const Footer: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+type PageTone = "canvas" | "ink" | PageTint;
+type RootProps = ComponentPropsWithRef<"div"> & {
+  tone?: PageTone;
+};
+declare const Root: ({ tone, className, ...props }: RootProps) => JSX.Element;
+declare const Content: Styled<"main">;
+declare const Footer: Styled<"div">;
 declare const Page: {
   Root: typeof Root;
   Content: typeof Content;

package/dist/pagination.d.ts

@@ -1,11 +1,11 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/pagination.d.ts
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<'nav'>) => import("react").JSX.Element;
-declare const List: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Previous: ({ className, children, ...props }: ComponentPropsWithRef<'a'>) => import("react").JSX.Element;
-declare const Next: ({ className, children, ...props }: ComponentPropsWithRef<'a'>) => import("react").JSX.Element;
-declare const Page: ({ className, children, ...props }: ComponentPropsWithRef<'a'>) => import("react").JSX.Element;
-declare const Gap: ({ className, ...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: typeof Root;
   Previous: typeof Previous;

package/dist/pill-select.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/pill-select.d.ts
-declare const PillSelect: ({ className, children, ...props }: ComponentPropsWithRef<'select'>) => import("react").JSX.Element;
+declare const PillSelect: Styled<"select">;
 //#endregion
 export { PillSelect };

package/dist/popover-parts.d.ts

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

package/dist/progress-parts.d.ts

@@ -1,38 +1,12 @@
-import { VariantProps } from "./lib/tv.js";
-import { ComponentPropsWithRef } from "react";
+import { Fill } from "./lib/tones.js";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/progress-parts";
 //#region src/progress-parts.d.ts
 type RootProps = Nude.ProgressProps;
-declare const Root: ({ className, ...props }: RootProps) => import("react").JSX.Element;
-declare const indicator: import("tailwind-variants").TVReturnType<{
-  tone: {
-    readonly neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark";
-    readonly coral: 'bg-bloom-coral';
-    readonly yellow: 'bg-bloom-yellow';
-    readonly indigo: 'bg-bloom-indigo';
-    readonly mint: 'bg-bloom-mint';
-    readonly sky: 'bg-bloom-sky';
-  };
-}, undefined, "size-full transition-transform duration-300 ease-out", {
-  tone: {
-    readonly neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark";
-    readonly coral: 'bg-bloom-coral';
-    readonly yellow: 'bg-bloom-yellow';
-    readonly indigo: 'bg-bloom-indigo';
-    readonly mint: 'bg-bloom-mint';
-    readonly sky: 'bg-bloom-sky';
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  tone: {
-    readonly neutral: "bg-bloom-foreground dark:bg-bloom-foreground-dark";
-    readonly coral: 'bg-bloom-coral';
-    readonly yellow: 'bg-bloom-yellow';
-    readonly indigo: 'bg-bloom-indigo';
-    readonly mint: 'bg-bloom-mint';
-    readonly sky: 'bg-bloom-sky';
-  };
-}, undefined>>;
-type IndicatorProps = ComponentPropsWithRef<typeof Nude.Indicator> & VariantProps<typeof indicator>;
-declare const Indicator: ({ tone, className, ...props }: IndicatorProps) => import("react").JSX.Element;
+declare const Root: ({ className, ...props }: RootProps) => JSX.Element;
+type IndicatorProps = ComponentPropsWithRef<typeof Nude.Indicator> & {
+  tone?: Fill;
+};
+declare const Indicator: ({ tone, className, ...props }: IndicatorProps) => JSX.Element;
 //#endregion
 export { Indicator, type RootProps as ProgressProps, Root };

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

@@ -1,11 +1,12 @@
 import { IconButtonProps } from "./icon-button.js";
-import { ComponentPropsWithRef } from "react";
+import { JSX } from "react";
 import * as Nude from "@journ/nude/quantity-input-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/quantity-input-parts.d.ts
 type RootProps = Nude.RootProps;
-declare const Root: ({ className, ...props }: RootProps) => import("react").JSX.Element;
-declare const Decrement: ({ tone, size, className, children, ...props }: IconButtonProps) => import("react").JSX.Element;
-declare const Increment: ({ tone, size, className, children, ...props }: IconButtonProps) => import("react").JSX.Element;
-declare const Field: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Field>) => import("react").JSX.Element;
+declare const Root: ({ className, ...props }: RootProps) => JSX.Element;
+declare const Decrement: ({ tone, size, className, children, ...props }: IconButtonProps) => JSX.Element;
+declare const Increment: ({ tone, size, className, children, ...props }: IconButtonProps) => JSX.Element;
+declare const Field: Styled<typeof Nude.Field>;
 //#endregion
 export { Decrement, Field, Increment, Root, type RootProps };

package/dist/radio-parts.d.ts

@@ -1,7 +1,8 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/radio-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/radio-parts.d.ts
-declare const Group: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Group>) => import("react").JSX.Element;
-declare const Item: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Item>, 'classNames' | 'children'>) => import("react").JSX.Element;
+declare const Group: Styled<typeof Nude.Group>;
+declare const Item: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Item>, "classNames" | "children">) => JSX.Element;
 //#endregion
 export { Group, Item };

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

@@ -1,9 +1,10 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/scroll-area-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/scroll-area-parts.d.ts
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Root>) => import("react").JSX.Element;
-declare const Viewport: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Viewport>) => import("react").JSX.Element;
-declare const Scrollbar: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Scrollbar>, 'classNames' | 'children'>) => import("react").JSX.Element;
-declare const Corner: any;
+declare const Root: Styled<typeof Nude.Root>;
+declare const Viewport: Styled<typeof Nude.Viewport>;
+declare const Scrollbar: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Scrollbar>, "classNames" | "children">) => JSX.Element;
+declare const Corner: typeof Nude.Corner;
 //#endregion
 export { Corner, Root, Scrollbar, Viewport };

package/dist/scroll-area.d.ts

@@ -1,10 +1,10 @@
-import { Root, Scrollbar, Viewport } 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: typeof Root;
   Viewport: typeof Viewport;
   Scrollbar: typeof Scrollbar;
-  Corner: any;
+  Corner: typeof Corner;
 };
 //#endregion
 export { ScrollArea };

package/dist/select-parts.d.ts

@@ -1,13 +1,14 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/select-parts";
+import { Styled } from "@journ/nude/styled";
 //#region src/select-parts.d.ts
-declare const Root: any;
-declare const Group: any;
-declare const Value: any;
-declare const Trigger: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Trigger>, 'icon'>) => import("react").JSX.Element;
-declare const Content: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Content>, 'classNames'>) => import("react").JSX.Element;
-declare const Item: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Item>, 'indicator'>) => import("react").JSX.Element;
-declare const Label: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Label>) => import("react").JSX.Element;
-declare const Separator: ({ className, ...props }: ComponentPropsWithRef<typeof Nude.Separator>) => import("react").JSX.Element;
+declare const Root: typeof Nude.Root;
+declare const Group: typeof Nude.Group;
+declare const Value: typeof Nude.Value;
+declare const Trigger: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Trigger>, "icon">) => JSX.Element;
+declare const Content: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Content>, "classNames">) => JSX.Element;
+declare const Item: ({ className, ...props }: Omit<ComponentPropsWithRef<typeof Nude.Item>, "indicator">) => JSX.Element;
+declare const Label: Styled<typeof Nude.Label>;
+declare const Separator: Styled<typeof Nude.Separator>;
 //#endregion
 export { Content, Group, Item, Label, Root, Separator, Trigger, Value };

package/dist/select.d.ts

@@ -1,11 +1,11 @@
-import { Content, Item, Label, Separator, 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: any;
+  Root: typeof Root;
   Trigger: typeof Trigger;
-  Value: any;
+  Value: typeof Value;
   Content: typeof Content;
-  Group: any;
+  Group: typeof Group;
   Label: typeof Label;
   Item: typeof Item;
   Separator: typeof Separator;

package/dist/sheet-parts.d.ts

@@ -1,33 +1,12 @@
 import { Actions, Body } from "./lib/modal-parts.js";
-import { VariantProps } from "./lib/tv.js";
 import { Close, Description, Root, Title, Trigger } from "./dialog-parts.js";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, JSX } from "react";
 import * as Nude from "@journ/nude/sheet-parts";
 //#region src/sheet-parts.d.ts
 type Side = Nude.SheetSide;
-declare const sheetContent: import("tailwind-variants").TVReturnType<{
-  side: {
-    right: "inset-y-0 right-0 w-full max-w-lg md:inset-y-4 md:right-4";
-    left: "inset-y-0 left-0 w-full max-w-lg md:inset-y-4 md:left-4";
-    top: "inset-x-0 top-0 max-h-[85dvh] md:inset-x-4 md:top-4";
-    bottom: "inset-x-0 bottom-0 max-h-[85dvh] md:inset-x-4 md:bottom-4";
-  };
-}, undefined, string[], {
-  side: {
-    right: "inset-y-0 right-0 w-full max-w-lg md:inset-y-4 md:right-4";
-    left: "inset-y-0 left-0 w-full max-w-lg md:inset-y-4 md:left-4";
-    top: "inset-x-0 top-0 max-h-[85dvh] md:inset-x-4 md:top-4";
-    bottom: "inset-x-0 bottom-0 max-h-[85dvh] md:inset-x-4 md:bottom-4";
-  };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-  side: {
-    right: "inset-y-0 right-0 w-full max-w-lg md:inset-y-4 md:right-4";
-    left: "inset-y-0 left-0 w-full max-w-lg md:inset-y-4 md:left-4";
-    top: "inset-x-0 top-0 max-h-[85dvh] md:inset-x-4 md:top-4";
-    bottom: "inset-x-0 bottom-0 max-h-[85dvh] md:inset-x-4 md:bottom-4";
-  };
-}, undefined>>;
-type ContentProps = Omit<ComponentPropsWithRef<typeof Nude.Content>, 'classNames' | 'overlayRef' | 'side'> & VariantProps<typeof sheetContent>;
-declare const Content: ({ side, className, ...props }: ContentProps) => import("react").JSX.Element;
+type ContentProps = Omit<ComponentPropsWithRef<typeof Nude.Content>, "classNames" | "overlayRef" | "side"> & {
+  side?: Side;
+};
+declare const Content: ({ side, className, ...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,11 +1,11 @@
 import { Actions, Body } from "./lib/modal-parts.js";
-import { Description, Title } from "./dialog-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: any;
-  Trigger: any;
-  Close: any;
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Close: typeof Close;
   Content: typeof Content;
   Title: typeof Title;
   Description: typeof Description;

package/dist/sidebar.d.ts

@@ -1,14 +1,14 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/sidebar.d.ts
-declare const Layout: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Content: ({ className, ...props }: ComponentPropsWithRef<'main'>) => import("react").JSX.Element;
-declare const Root: ({ className, ...props }: ComponentPropsWithRef<'aside'>) => import("react").JSX.Element;
-declare const Header: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Body: ({ className, ...props }: ComponentPropsWithRef<'nav'>) => import("react").JSX.Element;
-declare const Section: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
-declare const Heading: ({ className, ...props }: ComponentPropsWithRef<'h3'>) => import("react").JSX.Element;
-declare const Item: ({ className, children, ...props }: ComponentPropsWithRef<'a'>) => import("react").JSX.Element;
-declare const Footer: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+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: typeof Layout;
   Root: typeof Root;

package/dist/skeleton.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/skeleton.d.ts
-declare const Skeleton: ({ className, ...props }: ComponentPropsWithRef<'div'>) => import("react").JSX.Element;
+declare const Skeleton: Styled<"div">;
 //#endregion
 export { Skeleton };

package/dist/slider-parts.d.ts

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

package/dist/spinner.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef } from "react";
+import { Styled } from "@journ/nude/styled";
 //#region src/spinner.d.ts
-declare const Spinner: ({ className, ...props }: ComponentPropsWithRef<'svg'>) => import("react").JSX.Element;
+declare const Spinner: Styled<"svg">;
 //#endregion
 export { Spinner };