@askrjs/themes 0.0.9 → 0.0.11

package/src/components/nav/index.ts

@@ -1,14 +1,12 @@
-export { Nav, NavItem, NavLink } from "./nav";
+export { NavItem, NavLink, Pill, Pills, Tab, Tabs } from "./nav";
 export type {
-  NavAsChildProps,
-  NavDivProps,
   NavItemAsChildProps,
   NavItemProps,
-  NavItemVariant,
   NavLinkProps,
-  NavListProps,
-  NavNavProps,
-  NavOrientation,
-  NavProps,
-  NavVariant,
+  PillProps,
+  PillsAsChildProps,
+  PillsProps,
+  TabProps,
+  TabsAsChildProps,
+  TabsProps,
 } from "./nav.types";

package/src/components/nav/nav.tsx

@@ -1,30 +1,21 @@
 import { Slot } from "@askrjs/askr/foundations";
-import { currentRoute, navigate } from "@askrjs/askr/router";
+import { currentRoute, Link, navigate } from "@askrjs/askr/router";
+import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import { resolvePathname } from "../_internal/pathname";
 import type {
-  NavAsChildProps,
-  NavDivProps,
   NavItemAsChildProps,
   NavItemProps,
-  NavItemVariant,
   NavLinkProps,
-  NavListProps,
-  NavNavProps,
-  NavProps,
+  PillProps,
+  PillsAsChildProps,
+  PillsProps,
+  TabProps,
+  TabsAsChildProps,
+  TabsProps,
 } from "./nav.types";
 
-function navItemClasses(variant: NavItemVariant, className: unknown): string | undefined {
-  return classes(
-    "nav-item",
-    "navbar-item",
-    variant === "icon" && "nav-item-icon",
-    variant === "icon" && "navbar-item-icon",
-    className,
-  );
-}
-
 function normalizePathname(pathname: string): string {
   return pathname.endsWith("/") && pathname !== "/" ? pathname.slice(0, -1) : pathname;
 }
@@ -45,6 +36,22 @@ function getReactiveCurrentPathname(): string | null {
   }
 }
 
+function isActiveNavLink(
+  currentPathname: string,
+  targetPathname: string,
+  match: NavLinkProps["match"] = "prefix",
+): boolean {
+  if (targetPathname === "/") {
+    return currentPathname === "/";
+  }
+
+  if (match === "exact") {
+    return currentPathname === targetPathname;
+  }
+
+  return currentPathname === targetPathname || currentPathname.startsWith(`${targetPathname}/`);
+}
+
 function shouldHandleClientNavigation(
   event: MouseEvent,
   target: string | undefined,
@@ -64,90 +71,32 @@ function shouldHandleClientNavigation(
   );
 }
 
-function isActiveNavLink(
-  currentPathname: string,
-  targetPathname: string,
-  match: NavLinkProps["match"] = "prefix",
-): boolean {
-  if (targetPathname === "/") {
-    return currentPathname === "/";
-  }
-
-  if (match === "exact") {
-    return currentPathname === targetPathname;
-  }
-
-  return currentPathname === targetPathname || currentPathname.startsWith(`${targetPathname}/`);
-}
-
-export function Nav(props: NavNavProps): JSX.Element;
-export function Nav(props: NavDivProps): JSX.Element;
-export function Nav(props: NavListProps): JSX.Element;
-export function Nav(props: NavAsChildProps): JSX.Element;
-export function Nav(props: NavProps): JSX.Element {
-  const as = "as" in props ? props.as : "nav";
+function renderNavSet(
+  props: TabsProps | TabsAsChildProps | PillsProps | PillsAsChildProps,
+  slot: "tabs" | "pills",
+): JSX.Element {
   const className = "class" in props ? props.class : undefined;
-  const {
-    asChild,
-    children,
-    orientation = "horizontal",
-    variant = "default",
-    ref,
-    ...rest
-  } = props;
+  const { asChild, children, ref, ...rest } = props;
   const finalProps = mergeProps(rest, {
     ref,
-    class: classes("nav", className),
-    "data-slot": "nav",
-    "data-orientation": orientation,
-    "data-variant": variant,
+    class: classes(slot, className),
+    "data-slot": slot,
   });
 
   if (asChild) {
     return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   }
 
-  if (as === "div") {
-    return <div {...finalProps}>{children}</div>;
-  }
-
-  if (as === "ul") {
-    return <ul {...finalProps}>{children}</ul>;
-  }
-
   return <nav {...finalProps}>{children}</nav>;
 }
 
-export function NavItem(props: NavItemProps): JSX.Element;
-export function NavItem(props: NavItemAsChildProps): JSX.Element;
-export function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element {
-  const {
-    asChild,
-    children,
-    ref,
-    class: className,
-    match: _match,
-    variant = "default",
-    ...rest
-  } = props as (NavItemProps | NavItemAsChildProps) & { match?: unknown };
-  void _match;
-
-  const finalProps = mergeProps(rest, {
-    ref,
-    class: navItemClasses(variant, className),
-    "data-slot": "nav-item",
-    "data-variant": variant,
-  });
-
-  if (asChild) {
-    return <Slot asChild {...finalProps} children={children} />;
-  }
-
-  return <a {...finalProps}>{children}</a>;
-}
-
-export function NavLink(props: NavLinkProps): JSX.Element {
+function renderRoutedLink(
+  props: NavLinkProps | TabProps | PillProps,
+  slot: "nav-item" | "tab" | "pill",
+  options: { activeBackground?: boolean; className?: string; inheritSlot?: boolean } = {},
+): JSX.Element {
   const {
+    active,
     children,
     href,
     onClick,
@@ -155,35 +104,38 @@ export function NavLink(props: NavLinkProps): JSX.Element {
     class: className,
     match = "prefix",
     target,
-    variant = "default",
     ...rest
   } = props as NavLinkProps & { onClick?: (event: MouseEvent) => void };
+  const inheritedSlot =
+    options.inheritSlot && typeof (rest as Record<string, unknown>)["data-slot"] === "string"
+      ? String((rest as Record<string, unknown>)["data-slot"])
+      : undefined;
+  const resolvedSlot = (inheritedSlot ?? slot) as "nav-item" | "tab" | "pill";
+  const inheritedNavClass =
+    slot === "nav-item" && resolvedSlot !== "nav-item" ? "nav-item" : undefined;
+  const { "data-slot": _dataSlot, ...childRest } = rest as Record<string, unknown>;
+  void _dataSlot;
   const currentPathname = getReactiveCurrentPathname();
   const targetPathname = resolvePathname(href);
-  const isActive =
+  const routeActive =
     currentPathname !== null &&
     targetPathname !== null &&
     isActiveNavLink(currentPathname, targetPathname, match);
-
-  const linkProps = mergeProps(rest, {
+  const isActive = active ?? routeActive;
+  const activeProps = isActive
+    ? {
+        "aria-current": "page" as const,
+        "data-active": "true" as const,
+      }
+    : {
+        "data-active": undefined,
+      };
+  const useRouterLink = targetPathname !== null && !target && typeof onClick !== "function";
+  const childProps = {
+    ...childRest,
     href,
     target,
-    ref,
-    class: navItemClasses(variant, className),
-    "data-slot": "nav-link",
-    "data-variant": variant,
-  });
-
-  const finalProps = isActive
-    ? mergeProps(
-        {
-          "aria-current": "page",
-          "data-active": "true",
-        },
-        linkProps,
-      )
-    : linkProps;
-
+  };
   const handleClick = (event: MouseEvent) => {
     onClick?.(event);
 
@@ -196,8 +148,99 @@ export function NavLink(props: NavLinkProps): JSX.Element {
   };
 
   return (
-    <a {...finalProps} onClick={handleClick}>
+    <Block
+      asChild
+      paddingX="sm"
+      paddingY="xs"
+      radius={resolvedSlot === "pill" ? "round" : "md"}
+      background={isActive && options.activeBackground ? "selected" : undefined}
+      ref={ref}
+      class={classes(options.className, inheritedNavClass, className)}
+      data-slot={resolvedSlot}
+      {...activeProps}
+    >
+      {useRouterLink ? (
+        <Link {...childProps}>{children}</Link>
+      ) : (
+        <a {...childProps} onClick={handleClick}>
+          {children}
+        </a>
+      )}
+    </Block>
+  );
+}
+
+export function Tabs(props: TabsProps): JSX.Element;
+export function Tabs(props: TabsAsChildProps): JSX.Element;
+export function Tabs(props: TabsProps | TabsAsChildProps): JSX.Element {
+  return renderNavSet(props, "tabs");
+}
+
+export function Pills(props: PillsProps): JSX.Element;
+export function Pills(props: PillsAsChildProps): JSX.Element;
+export function Pills(props: PillsProps | PillsAsChildProps): JSX.Element {
+  return renderNavSet(props, "pills");
+}
+
+export function Tab(props: TabProps): JSX.Element {
+  return renderRoutedLink(props, "tab", { className: "tab" });
+}
+
+export function Pill(props: PillProps): JSX.Element {
+  return renderRoutedLink(props, "pill", { activeBackground: true, className: "pill" });
+}
+
+export function NavItem(props: NavItemProps): JSX.Element;
+export function NavItem(props: NavItemAsChildProps): JSX.Element;
+export function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element {
+  const {
+    asChild,
+    active = false,
+    children,
+    ref,
+    class: className,
+    match: _match,
+    ...rest
+  } = props as (NavItemProps | NavItemAsChildProps) & { match?: unknown };
+  void _match;
+
+  if (asChild) {
+    return (
+      <Block
+        asChild
+        paddingX="sm"
+        paddingY="xs"
+        radius="md"
+        background={active ? "selected" : undefined}
+        {...rest}
+        ref={ref}
+        class={className}
+        data-active={active ? "true" : undefined}
+        data-slot="nav-item"
+      >
+        {children}
+      </Block>
+    );
+  }
+
+  return (
+    <Block
+      as="a"
+      paddingX="sm"
+      paddingY="xs"
+      radius="md"
+      background={active ? "selected" : undefined}
+      {...rest}
+      ref={ref}
+      class={className}
+      data-active={active ? "true" : undefined}
+      data-slot="nav-item"
+    >
       {children}
-    </a>
+    </Block>
   );
 }
+
+export function NavLink(props: NavLinkProps): JSX.Element {
+  return renderRoutedLink(props, "nav-item", { activeBackground: true, inheritSlot: true });
+}

package/src/components/nav/nav.types.ts

@@ -2,50 +2,45 @@ import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type { LinkProps } from "@askrjs/askr/router";
 
-export type NavOrientation = "horizontal" | "vertical";
-export type NavVariant = "default" | "tabs" | "pills";
-export type NavItemVariant = "default" | "icon";
 export type NavLinkMatch = "prefix" | "exact";
 
-export type NavOwnProps = {
+export type TabsOwnProps = {
   children?: unknown;
-  orientation?: NavOrientation;
-  variant?: NavVariant;
-  as?: "nav" | "div" | "ul";
 };
 
-export type NavNavProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> &
-  NavOwnProps & {
-    as?: "nav";
+export type TabsProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> &
+  TabsOwnProps & {
     asChild?: false;
     ref?: Ref<HTMLElement>;
   };
 
-export type NavDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
-  NavOwnProps & {
-    as: "div";
-    asChild?: false;
-    ref?: Ref<HTMLDivElement>;
+export type TabsAsChildProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> &
+  TabsOwnProps & {
+    asChild: true;
+    children: JSXElement;
+    ref?: Ref<unknown>;
   };
 
-export type NavListProps = Omit<JSX.IntrinsicElements["ul"], "children" | "ref"> &
-  NavOwnProps & {
-    as: "ul";
+export type PillsOwnProps = {
+  children?: unknown;
+};
+
+export type PillsProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> &
+  PillsOwnProps & {
     asChild?: false;
-    ref?: Ref<HTMLUListElement>;
+    ref?: Ref<HTMLElement>;
   };
 
-export type NavAsChildProps = Omit<NavOwnProps, "as"> & {
-  asChild: true;
-  children: JSXElement;
-  ref?: Ref<unknown>;
-};
-
-export type NavProps = NavNavProps | NavDivProps | NavListProps | NavAsChildProps;
+export type PillsAsChildProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> &
+  PillsOwnProps & {
+    asChild: true;
+    children: JSXElement;
+    ref?: Ref<unknown>;
+  };
 
 export type NavItemOwnProps = {
+  active?: boolean;
   children?: unknown;
-  variant?: NavItemVariant;
 };
 
 export type NavItemProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> &
@@ -66,3 +61,7 @@ export type NavLinkOwnProps = NavItemOwnProps & {
 };
 
 export type NavLinkProps = LinkProps & NavLinkOwnProps;
+
+export type TabProps = LinkProps & NavLinkOwnProps;
+
+export type PillProps = LinkProps & NavLinkOwnProps;

package/src/components/navbar/index.ts

@@ -1,17 +1,10 @@
-export { Navbar, NavBrand, NavGroup, NavToggle } from "./navbar";
+export { Navbar, NavBrand, NavDropdown, NavGroup } from "./navbar";
 export { NavItem, NavLink } from "../nav";
 export type {
   NavBrandProps,
+  NavDropdownProps,
   NavGroupProps,
-  NavItemAsChildProps,
-  NavItemProps,
-  NavItemVariant,
-  NavLinkProps,
+  NavbarCollapseBreakpoint,
   NavbarProps,
-  NavToggleProps,
 } from "./navbar.types";
-export type {
-  CollapseBreakpoint,
-  CollapseIconPlacement,
-  Collapsible,
-} from "../shell/shell-nav.types";
+export type { NavItemAsChildProps, NavItemProps, NavLinkProps } from "../nav";