@askrjs/themes 0.0.10 → 0.0.12

package/src/components/nav/nav.tsx

@@ -3,6 +3,7 @@ import { currentRoute, Link, navigate } from "@askrjs/askr/router";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import { resolvePathname } from "../_internal/pathname";
 import type {
   NavItemAsChildProps,
@@ -16,6 +17,8 @@ import type {
   TabsProps,
 } from "./nav.types";
 
+const LayoutBlock = Block as (props: Record<string, unknown>) => JSX.Element;
+
 function normalizePathname(pathname: string): string {
   return pathname.endsWith("/") && pathname !== "/" ? pathname.slice(0, -1) : pathname;
 }
@@ -87,7 +90,7 @@ function renderNavSet(
     return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   }
 
-  return <nav {...finalProps}>{children}</nav>;
+  return intrinsicElement("nav", finalProps, children);
 }
 
 function renderRoutedLink(
@@ -98,7 +101,8 @@ function renderRoutedLink(
   const {
     active,
     children,
-    href,
+    href: suppliedHref,
+    to,
     onClick,
     ref,
     class: className,
@@ -106,6 +110,10 @@ function renderRoutedLink(
     target,
     ...rest
   } = props as NavLinkProps & { onClick?: (event: MouseEvent) => void };
+  const href = to?.href ?? suppliedHref;
+  if (!href) {
+    throw new Error("Nav link requires href or to.");
+  }
   const inheritedSlot =
     options.inheritSlot && typeof (rest as Record<string, unknown>)["data-slot"] === "string"
       ? String((rest as Record<string, unknown>)["data-slot"])
@@ -130,12 +138,10 @@ function renderRoutedLink(
     : {
         "data-active": undefined,
       };
-  const useRouterLink = targetPathname !== null && !target && typeof onClick !== "function";
-  const childProps = {
-    ...childRest,
-    href,
-    target,
-  };
+  const rendersRouterLink = targetPathname !== null && !target && typeof onClick !== "function";
+  const childProps: NavLinkProps = to
+    ? ({ ...childRest, to, target } as NavLinkProps)
+    : ({ ...childRest, href, target } as NavLinkProps);
   const handleClick = (event: MouseEvent) => {
     onClick?.(event);
 
@@ -148,25 +154,25 @@ function renderRoutedLink(
   };
 
   return (
-    <Block
+    <LayoutBlock
       asChild
       paddingX="sm"
       paddingY="xs"
       radius={resolvedSlot === "pill" ? "round" : "md"}
       background={isActive && options.activeBackground ? "selected" : undefined}
       ref={ref}
-      class={classes(options.className, inheritedNavClass, className)}
+      className={classes(options.className, inheritedNavClass, className)}
       data-slot={resolvedSlot}
       {...activeProps}
     >
-      {useRouterLink ? (
+      {rendersRouterLink ? (
         <Link {...childProps}>{children}</Link>
       ) : (
-        <a {...childProps} onClick={handleClick}>
+        <a {...childRest} href={href} target={target} onClick={handleClick}>
           {children}
         </a>
       )}
-    </Block>
+    </LayoutBlock>
   );
 }
 
@@ -206,7 +212,7 @@ export function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element
 
   if (asChild) {
     return (
-      <Block
+      <LayoutBlock
         asChild
         paddingX="sm"
         paddingY="xs"
@@ -214,17 +220,17 @@ export function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element
         background={active ? "selected" : undefined}
         {...rest}
         ref={ref}
-        class={className}
+        className={className}
         data-active={active ? "true" : undefined}
         data-slot="nav-item"
       >
         {children}
-      </Block>
+      </LayoutBlock>
     );
   }
 
   return (
-    <Block
+    <LayoutBlock
       as="a"
       paddingX="sm"
       paddingY="xs"
@@ -232,12 +238,12 @@ export function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element
       background={active ? "selected" : undefined}
       {...rest}
       ref={ref}
-      class={className}
+      className={className}
       data-active={active ? "true" : undefined}
       data-slot="nav-item"
     >
       {children}
-    </Block>
+    </LayoutBlock>
   );
 }
 

package/src/components/navbar/navbar.tsx

@@ -6,6 +6,7 @@ import { DropdownContent } from "../overlays/dropdown-content";
 import type { NavBrandProps, NavDropdownProps, NavGroupProps, NavbarProps } from "./navbar.types";
 
 const ASKR_FRAGMENT = Symbol.for("askr.fragment");
+const LayoutBlock = Block as (props: Record<string, unknown>) => JSX.Element;
 
 function flattenNavbarChildren(children: unknown): unknown[] {
   return toChildArray(children).flatMap((child) => {
@@ -45,7 +46,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
 
   if (!collapseAt) {
     return (
-      <Block
+      <LayoutBlock
         as="nav"
         direction="row"
         align="center"
@@ -55,7 +56,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
         data-slot="navbar"
       >
         {children}
-      </Block>
+      </LayoutBlock>
     );
   }
 
@@ -64,9 +65,9 @@ export function Navbar(props: NavbarProps): JSX.Element {
   const navChildren = navbarChildren.filter((child) => !isNavBrandChild(child));
   const hasNavContent = hasRenderableChildren(navChildren);
   const content = (
-    <Block direction="row" align="center" gap="md" width="full" data-slot="navbar-content">
+    <LayoutBlock direction="row" align="center" gap="md" width="full" data-slot="navbar-content">
       {navChildren}
-    </Block>
+    </LayoutBlock>
   );
   const collapse = hasNavContent ? (
     <details data-slot="navbar-collapse">
@@ -79,7 +80,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
   ) : null;
 
   return (
-    <Block
+    <LayoutBlock
       as="nav"
       direction="row"
       align="center"
@@ -90,7 +91,7 @@ export function Navbar(props: NavbarProps): JSX.Element {
       data-slot="navbar"
     >
       {[...brandChildren, collapse]}
-    </Block>
+    </LayoutBlock>
   );
 }
 
@@ -98,9 +99,16 @@ export function NavBrand(props: NavBrandProps): JSX.Element {
   const { children, ...rest } = props;
 
   return (
-    <Block direction="row" align="center" gap="sm" shrink={false} {...rest} data-slot="nav-brand">
+    <LayoutBlock
+      direction="row"
+      align="center"
+      gap="sm"
+      shrink={false}
+      {...rest}
+      data-slot="nav-brand"
+    >
       {children}
-    </Block>
+    </LayoutBlock>
   );
 }
 
@@ -108,12 +116,12 @@ export function NavGroup(props: NavGroupProps): JSX.Element {
   const { align, children, label, title = label, ...rest } = props;
 
   return (
-    <Block align={align} gap="sm" {...rest} data-align={align} data-slot="nav-group">
+    <LayoutBlock align={align} gap="sm" {...rest} data-align={align} data-slot="nav-group">
       {title !== undefined ? <div data-slot="nav-group-label">{title}</div> : null}
-      <Block gap="xs" data-slot="nav-group-body">
+      <LayoutBlock gap="xs" data-slot="nav-group-body">
         {children}
-      </Block>
-    </Block>
+      </LayoutBlock>
+    </LayoutBlock>
   );
 }
 
@@ -121,7 +129,7 @@ export function NavDropdown(props: NavDropdownProps): JSX.Element {
   const { align = "end", children, label, side = "bottom", sideOffset = 6, ...rest } = props;
 
   return (
-    <Block direction="row" align="center" data-slot="nav-dropdown">
+    <LayoutBlock direction="row" align="center" data-slot="nav-dropdown">
       <Dropdown {...rest}>
         <DropdownTrigger class={classes("nav-item")} data-slot="nav-dropdown-trigger">
           {label}
@@ -136,6 +144,6 @@ export function NavDropdown(props: NavDropdownProps): JSX.Element {
           {children}
         </DropdownContent>
       </Dropdown>
-    </Block>
+    </LayoutBlock>
   );
 }

package/src/components/separator/separator.tsx

@@ -1,5 +1,6 @@
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import type { SeparatorAsChildProps, SeparatorNativeProps } from "./separator.types";
 
 export function Separator(props: SeparatorNativeProps): JSX.Element;
@@ -19,5 +20,5 @@ export function Separator(props: SeparatorNativeProps | SeparatorAsChildProps) {
     return <Slot asChild {...finalProps} children={children} />;
   }
 
-  return <div {...finalProps}>{children}</div>;
+  return intrinsicElement("div", finalProps, children);
 }

package/src/components/sidebar/index.ts

@@ -12,7 +12,7 @@ export {
   SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarProvider,
+  SidebarScope,
   SidebarRail,
   SidebarTrigger,
 } from "./sidebar";

package/src/components/sidebar/sidebar.tsx

@@ -2,6 +2,7 @@ import { Slot } from "@askrjs/askr/foundations";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import type {
   SidebarButtonProps,
   SidebarPartProps,
@@ -25,7 +26,6 @@ function sidebarPart(
   element: keyof JSX.IntrinsicElements = "div",
 ): JSX.Element {
   const { as, asChild, children, class: className, ...rest } = props;
-  const Element = (as ?? element) as "div";
   const finalProps = mergeProps(rest, {
     class: className,
     "data-slot": slot,
@@ -35,7 +35,7 @@ function sidebarPart(
     return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   }
 
-  return <Element {...finalProps}>{children}</Element>;
+  return intrinsicElement(String(as ?? element), finalProps, children);
 }
 
 export function Sidebar(props: SidebarProps): JSX.Element {
@@ -69,8 +69,8 @@ export function Sidebar(props: SidebarProps): JSX.Element {
   );
 }
 
-export function SidebarProvider(props: SidebarPartProps): JSX.Element {
-  return sidebarPart(props, "sidebar-provider");
+export function SidebarScope(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-scope");
 }
 
 export function SidebarInset(props: SidebarPartProps): JSX.Element {
@@ -136,7 +136,7 @@ export function SidebarMenuButton(props: SidebarButtonProps): JSX.Element {
   }
 
   return (
-    <button type={type} {...finalProps}>
+    <button type={type as "button" | "submit" | "reset" | undefined} {...finalProps}>
       {children}
     </button>
   );
@@ -146,7 +146,7 @@ export function SidebarMenuAction(props: SidebarButtonProps): JSX.Element {
   const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
   return (
     <button
-      type={type}
+      type={type as "button" | "submit" | "reset" | undefined}
       {...mergeProps(rest, {
         class: classes(className),
         "data-slot": "sidebar-menu-action",
@@ -170,7 +170,7 @@ export function SidebarTrigger(props: SidebarButtonProps): JSX.Element {
   const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
   return (
     <button
-      type={type}
+      type={type as "button" | "submit" | "reset" | undefined}
       {...mergeProps(rest, {
         class: classes("btn btn-ghost btn-icon", className),
         "data-slot": "sidebar-trigger",

package/src/components/skeleton/skeleton.tsx

@@ -2,6 +2,7 @@ import { Slot } from "@askrjs/askr/foundations";
 import { mergeLayoutStyles } from "../_internal/block-layout";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import { styleDeclarationsToClass } from "../_internal/style";
 import type { SkeletonAsChildProps, SkeletonProps } from "./skeleton.types";
 
@@ -28,15 +29,12 @@ export function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {
     className?: unknown;
     style?: unknown;
   };
-  const layoutClass = styleDeclarationsToClass(
-    mergeLayoutStyles(
-      {
-        blockSize: resolveSkeletonDimension(height),
-        inlineSize: resolveSkeletonDimension(width),
-      },
-      style,
-    ),
-  );
+  const dimensions: Record<string, string | number> = {};
+  const blockSize = resolveSkeletonDimension(height);
+  const inlineSize = resolveSkeletonDimension(width);
+  if (blockSize !== undefined) dimensions.blockSize = blockSize;
+  if (inlineSize !== undefined) dimensions.inlineSize = inlineSize;
+  const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(dimensions, style));
   const finalProps = mergeProps(rest, {
     ref,
     class: classes(classProp, className, layoutClass),
@@ -49,5 +47,5 @@ export function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {
     return <Slot asChild {...finalProps} children={children} />;
   }
 
-  return <div {...finalProps}>{children}</div>;
+  return intrinsicElement("div", finalProps, children);
 }

package/src/components/text/text.tsx

@@ -1,5 +1,6 @@
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import type { TextElement, TextProps } from "./text.types";
 
 const DEFAULT_ELEMENT = "p";
@@ -34,6 +35,5 @@ export function Text<TElement extends TextElement = "p">(props: TextProps<TEleme
     "data-truncate": truncate ? "true" : undefined,
   });
 
-  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
-  return <Element {...finalProps}>{children}</Element>;
+  return intrinsicElement(as ?? DEFAULT_ELEMENT, finalProps, children);
 }

package/src/components/theme/index.ts

@@ -3,17 +3,17 @@ export {
   CAT_THEME_OPTIONS,
   DEFAULT_THEME_OPTIONS,
   ThemePicker,
-  ThemeProvider,
+  ThemeScope,
   ThemeToggle,
-  useTheme,
+  theme,
 } from "./theme";
 export type {
   CatThemeName,
-  ThemeContextValue,
+  ThemeScopeValue,
   ThemeName,
   ThemeOption,
   ThemePickerProps,
-  ThemeProviderProps,
+  ThemeScopeProps,
   ThemeToggleProps,
   ThemeToggleRenderContext,
 } from "./theme";