@askrjs/themes 0.0.3 → 0.0.6

package/src/components/field/field.types.ts

@@ -0,0 +1,19 @@
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
+type ParagraphProps = Omit<JSX.IntrinsicElements["p"], "children" | "ref">;
+
+export type FieldProps = DivProps & {
+  children?: unknown;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type FieldHintProps = ParagraphProps & {
+  children?: unknown;
+  ref?: Ref<HTMLParagraphElement>;
+};
+
+export type FieldErrorProps = ParagraphProps & {
+  children?: unknown;
+  ref?: Ref<HTMLParagraphElement>;
+};

package/src/components/field/index.ts

@@ -0,0 +1,2 @@
+export { Field, FieldError, FieldHint } from "./field";
+export type { FieldErrorProps, FieldHintProps, FieldProps } from "./field.types";

package/src/components/flex/flex.tsx

@@ -3,7 +3,7 @@ import { mergeProps } from "../_internal/merge-props";
 import {
   applyBoxLayoutStyles,
   splitBoxLayoutProps,
-  withBoxLayoutStyle,
+  withBoxLayoutClass,
 } from "../_internal/box-layout";
 import {
   isResponsiveValue,
@@ -133,6 +133,8 @@ export function Flex(props: FlexDivProps | FlexSpanProps | FlexAsChildProps) {
     setResponsiveStyleVar(layoutStyle, "flex-wrap", wrap, (value) => value);
   }
 
+  const layoutClass = withBoxLayoutClass(layoutStyle, userStyle);
+
   const finalProps = mergeProps(passthroughProps, {
     ref,
     "data-slot": rootSlot,
@@ -145,7 +147,7 @@ export function Flex(props: FlexDivProps | FlexSpanProps | FlexAsChildProps) {
     "data-justify": serializeStaticThemeValue(justify, isCssCoveredJustifyValue),
     "data-wrap": serializeStaticThemeValue(wrap, isCssCoveredWrapValue),
     "data-collapse-below": collapseBelow,
-    style: withBoxLayoutStyle(layoutStyle, userStyle),
+    ...(layoutClass ? { class: layoutClass } : {}),
   });
 
   if (asChild) {

package/src/components/flex/flex.types.ts

@@ -1,4 +1,5 @@
-import type { JSXElement, Ref } from "@askrjs/askr/foundations";
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type { BoxLayoutOwnProps, LayoutResponsive } from "../box/box.types";
 
 export type FlexOwnProps = BoxLayoutOwnProps & {

package/src/components/input-group/index.ts

@@ -0,0 +1,7 @@
+export { InputGroup, InputGroupText } from "./input-group";
+export type {
+  InputGroupOrientation,
+  InputGroupProps,
+  InputGroupTextAsChildProps,
+  InputGroupTextProps,
+} from "./input-group.types";

package/src/components/input-group/input-group.tsx

@@ -0,0 +1,57 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "@askrjs/askr/foundations/utilities";
+import { classes } from "../_internal/classes";
+import type {
+  InputGroupProps,
+  InputGroupTextAsChildProps,
+  InputGroupTextProps,
+} from "./input-group.types";
+
+export function InputGroup(props: InputGroupProps): JSX.Element {
+  const {
+    attached = true,
+    children,
+    class: className,
+    orientation = "horizontal",
+    ref,
+    role,
+    ...rest
+  } = props;
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      class={classes(
+        "input-group",
+        orientation === "vertical" ? "input-group-vertical" : undefined,
+        className,
+      )}
+      data-attached={attached ? "true" : "false"}
+      data-orientation={orientation}
+      data-slot="input-group"
+      role={role ?? "group"}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function InputGroupText(props: InputGroupTextProps): JSX.Element;
+export function InputGroupText(props: InputGroupTextAsChildProps): JSX.Element;
+export function InputGroupText(
+  props: InputGroupTextProps | InputGroupTextAsChildProps,
+): JSX.Element {
+  const { asChild, children, ref, class: className, ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes("input-group-text", className),
+    ref,
+    "data-slot": "input-group-text",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <span {...finalProps}>{children}</span>;
+}

package/src/components/input-group/input-group.types.ts

@@ -0,0 +1,26 @@
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type InputGroupOrientation = "horizontal" | "vertical";
+
+type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;
+type SpanProps = Omit<JSX.IntrinsicElements["span"], "children" | "ref">;
+
+export type InputGroupProps = DivProps & {
+  children?: unknown;
+  attached?: boolean;
+  orientation?: InputGroupOrientation;
+  ref?: Ref<HTMLDivElement>;
+};
+
+export type InputGroupTextProps = SpanProps & {
+  asChild?: false;
+  children?: unknown;
+  ref?: Ref<HTMLSpanElement>;
+};
+
+export type InputGroupTextAsChildProps = SpanProps & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};

package/src/components/list-group/index.ts

@@ -0,0 +1,7 @@
+export { ListGroup, ListGroupItem } from "./list-group";
+export type {
+  ListGroupItemAsChildProps,
+  ListGroupItemProps,
+  ListGroupOrientation,
+  ListGroupProps,
+} from "./list-group.types";

package/src/components/list-group/list-group.tsx

@@ -0,0 +1,74 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { mergeProps } from "@askrjs/askr/foundations/utilities";
+import { classes } from "../_internal/classes";
+import type {
+  ListGroupItemAsChildProps,
+  ListGroupItemProps,
+  ListGroupProps,
+} from "./list-group.types";
+
+export function ListGroup(props: ListGroupProps): JSX.Element {
+  const {
+    children,
+    class: className,
+    flush = false,
+    orientation = "vertical",
+    ref,
+    ...rest
+  } = props;
+
+  return (
+    <ul
+      {...rest}
+      ref={ref}
+      class={classes(
+        "list-group",
+        flush ? "list-group-flush" : undefined,
+        orientation === "horizontal" ? "list-group-horizontal" : undefined,
+        className,
+      )}
+      data-flush={flush ? "true" : "false"}
+      data-orientation={orientation}
+      data-slot="list-group"
+    >
+      {children}
+    </ul>
+  );
+}
+
+export function ListGroupItem(props: ListGroupItemProps): JSX.Element;
+export function ListGroupItem(props: ListGroupItemAsChildProps): JSX.Element;
+export function ListGroupItem(props: ListGroupItemProps | ListGroupItemAsChildProps): JSX.Element {
+  const {
+    action = false,
+    active = false,
+    asChild,
+    children,
+    disabled = false,
+    ref,
+    class: className,
+    ...rest
+  } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes(
+      "list-group-item",
+      action ? "list-group-item-action" : undefined,
+      active ? "active" : undefined,
+      disabled ? "disabled" : undefined,
+      className,
+    ),
+    ref,
+    "aria-current": active ? "page" : undefined,
+    "aria-disabled": disabled ? "true" : undefined,
+    "data-action": action ? "true" : undefined,
+    "data-active": active ? "true" : undefined,
+    "data-disabled": disabled ? "true" : undefined,
+    "data-slot": "list-group-item",
+  });
+
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children} />;
+  }
+
+  return <li {...finalProps}>{children}</li>;
+}

package/src/components/list-group/list-group.types.ts

@@ -0,0 +1,32 @@
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type ListGroupOrientation = "vertical" | "horizontal";
+
+type UlProps = Omit<JSX.IntrinsicElements["ul"], "children" | "ref">;
+type LiProps = Omit<JSX.IntrinsicElements["li"], "children" | "ref">;
+
+export type ListGroupProps = UlProps & {
+  children?: unknown;
+  flush?: boolean;
+  orientation?: ListGroupOrientation;
+  ref?: Ref<HTMLUListElement>;
+};
+
+export type ListGroupItemProps = LiProps & {
+  action?: boolean;
+  active?: boolean;
+  asChild?: false;
+  children?: unknown;
+  disabled?: boolean;
+  ref?: Ref<HTMLLIElement>;
+};
+
+export type ListGroupItemAsChildProps = LiProps & {
+  action?: boolean;
+  active?: boolean;
+  asChild: true;
+  children: JSXElement;
+  disabled?: boolean;
+  ref?: Ref<unknown>;
+};

package/src/components/nav/index.ts

@@ -0,0 +1,14 @@
+export { Nav, NavItem, NavLink } from "./nav";
+export type {
+  NavAsChildProps,
+  NavDivProps,
+  NavItemAsChildProps,
+  NavItemProps,
+  NavItemVariant,
+  NavLinkProps,
+  NavListProps,
+  NavNavProps,
+  NavOrientation,
+  NavProps,
+  NavVariant,
+} from "./nav.types";

package/src/components/nav/nav.tsx

@@ -0,0 +1,203 @@
+import { Slot } from "@askrjs/askr/foundations";
+import { currentRoute, navigate } from "@askrjs/askr/router";
+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,
+} 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;
+}
+
+function getCurrentPathname(): string | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  return normalizePathname(window.location.pathname || "/");
+}
+
+function getReactiveCurrentPathname(): string | null {
+  try {
+    return normalizePathname(currentRoute().path || "/");
+  } catch {
+    return getCurrentPathname();
+  }
+}
+
+function shouldHandleClientNavigation(
+  event: MouseEvent,
+  target: string | undefined,
+  targetPathname: string | null,
+): boolean {
+  if (targetPathname === null || target) {
+    return false;
+  }
+
+  return (
+    !event.defaultPrevented &&
+    (event.button ?? 0) === 0 &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.shiftKey
+  );
+}
+
+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";
+  const className = "class" in props ? props.class : undefined;
+  const {
+    asChild,
+    children,
+    orientation = "horizontal",
+    variant = "default",
+    ref,
+    ...rest
+  } = props;
+  const finalProps = mergeProps(rest, {
+    ref,
+    class: classes("nav", className),
+    "data-slot": "nav",
+    "data-orientation": orientation,
+    "data-variant": variant,
+  });
+
+  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 {
+  const {
+    children,
+    href,
+    onClick,
+    ref,
+    class: className,
+    match = "prefix",
+    target,
+    variant = "default",
+    ...rest
+  } = props as NavLinkProps & { onClick?: (event: MouseEvent) => void };
+  const currentPathname = getReactiveCurrentPathname();
+  const targetPathname = resolvePathname(href);
+  const isActive =
+    currentPathname !== null &&
+    targetPathname !== null &&
+    isActiveNavLink(currentPathname, targetPathname, match);
+
+  const linkProps = mergeProps(rest, {
+    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);
+
+    if (!shouldHandleClientNavigation(event, target, targetPathname)) {
+      return;
+    }
+
+    event.preventDefault();
+    navigate(href);
+  };
+
+  return (
+    <a {...finalProps} onClick={handleClick}>
+      {children}
+    </a>
+  );
+}

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

@@ -0,0 +1,68 @@
+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 = {
+  children?: unknown;
+  orientation?: NavOrientation;
+  variant?: NavVariant;
+  as?: "nav" | "div" | "ul";
+};
+
+export type NavNavProps = Omit<JSX.IntrinsicElements["nav"], "children" | "ref"> &
+  NavOwnProps & {
+    as?: "nav";
+    asChild?: false;
+    ref?: Ref<HTMLElement>;
+  };
+
+export type NavDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  NavOwnProps & {
+    as: "div";
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type NavListProps = Omit<JSX.IntrinsicElements["ul"], "children" | "ref"> &
+  NavOwnProps & {
+    as: "ul";
+    asChild?: false;
+    ref?: Ref<HTMLUListElement>;
+  };
+
+export type NavAsChildProps = Omit<NavOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type NavProps = NavNavProps | NavDivProps | NavListProps | NavAsChildProps;
+
+export type NavItemOwnProps = {
+  children?: unknown;
+  variant?: NavItemVariant;
+};
+
+export type NavItemProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> &
+  NavItemOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLAnchorElement>;
+  };
+
+export type NavItemAsChildProps = Omit<JSX.IntrinsicElements["a"], "children" | "ref"> &
+  NavItemOwnProps & {
+    asChild: true;
+    children: JSXElement;
+    ref?: Ref<unknown>;
+  };
+
+export type NavLinkOwnProps = NavItemOwnProps & {
+  match?: NavLinkMatch;
+};
+
+export type NavLinkProps = LinkProps & NavLinkOwnProps;

package/src/components/navbar/index.ts

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

package/src/components/navbar/navbar-panel.tsx

@@ -0,0 +1,67 @@
+import { readContext } from "@askrjs/askr";
+import { renderShellPanel } from "../shell/shell-panel";
+import { NavbarResponsiveContext } from "./navbar.context";
+import type { NavbarPanelProps } from "./navbar.types";
+
+export function NavbarPanel(props: NavbarPanelProps): JSX.Element | null {
+  const {
+    active: activeProp,
+    brand,
+    children,
+    class: className,
+    collapseLabel: collapseLabelProp,
+    onClose,
+    open: openProp,
+    panelId: panelIdProp,
+    ref,
+    ...rest
+  } = props;
+  const needsResponsiveContext =
+    activeProp === undefined ||
+    collapseLabelProp === undefined ||
+    onClose === undefined ||
+    openProp === undefined ||
+    panelIdProp === undefined;
+  const responsive = needsResponsiveContext
+    ? (() => {
+        try {
+          return readContext(NavbarResponsiveContext);
+        } catch {
+          return {
+            active: () => false,
+            collapseLabel: () => "Menu",
+            closePanel: () => undefined,
+            panelId: () => undefined,
+            panelOpen: () => false,
+            togglePanel: () => undefined,
+          };
+        }
+      })()
+    : {
+        active: () => false,
+        collapseLabel: () => "Menu",
+        closePanel: () => undefined,
+        panelId: () => undefined,
+        panelOpen: () => false,
+        togglePanel: () => undefined,
+      };
+  const active = activeProp ?? responsive.active();
+  const open = openProp ?? responsive.panelOpen();
+  const panelId = panelIdProp ?? responsive.panelId();
+  const collapseLabel = collapseLabelProp ?? responsive.collapseLabel();
+  const closePanel = onClose ?? responsive.closePanel;
+
+  return renderShellPanel({
+    active,
+    brand,
+    children,
+    className,
+    collapseLabel,
+    onClose: closePanel,
+    open,
+    panelId,
+    prefix: "navbar",
+    ref,
+    rest,
+  });
+}

package/src/components/navbar/navbar.context.ts

@@ -0,0 +1,22 @@
+import { defineContext } from "@askrjs/askr";
+
+export type NavbarResponsiveContextValue = {
+  active: () => boolean;
+  collapseLabel: () => string;
+  closePanel: () => void;
+  panelId: () => string | undefined;
+  panelOpen: () => boolean;
+  togglePanel: () => void;
+};
+
+const defaultResponsiveContext: NavbarResponsiveContextValue = {
+  active: () => false,
+  collapseLabel: () => "Menu",
+  closePanel: () => undefined,
+  panelId: () => undefined,
+  panelOpen: () => false,
+  togglePanel: () => undefined,
+};
+
+export const NavbarResponsiveContext =
+  defineContext<NavbarResponsiveContextValue>(defaultResponsiveContext);