@askrjs/themes 0.0.16 → 0.0.17

package/src/components/aside/aside.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { AsideProps } from "./aside.types";
 

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
 import { mergeLayoutStyles } from "../_internal/block-layout";

package/src/components/aspect-ratio/aspect-ratio.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/badge/badge.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";

package/src/components/badge/badge.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/block/block.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { classes } from "../_internal/classes";
 import {
@@ -15,8 +16,8 @@ const DEFAULT_ELEMENT = "div";
 export function Block(props: BlockNativeProps): JSX.Element;
 export function Block(props: BlockAsChildProps): JSX.Element;
 export function Block(props: BlockNativeProps | BlockAsChildProps) {
-  const as = "as" in props ? props.as : DEFAULT_ELEMENT;
   const {
+    as: asProp,
     asChild,
     children,
     ref,
@@ -25,10 +26,12 @@ export function Block(props: BlockNativeProps | BlockAsChildProps) {
     style: userStyle,
     ...rest
   } = props as (BlockNativeProps | BlockAsChildProps) & {
+    as?: BlockNativeProps["as"];
     class?: unknown;
     className?: unknown;
     style?: unknown;
   };
+  const as = asProp ?? DEFAULT_ELEMENT;
 
   const { blockProps, rest: passthroughProps } = splitBlockLayoutProps(rest);
   const layoutStyle: Record<string, string | number> = {};

package/src/components/block/block.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type {

package/src/components/brand/brand.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
@@ -16,14 +17,17 @@ export function Brand<TElement extends "div" | "a" | "span" = "div">(
   props: BrandProps<TElement>,
 ): JSX.Element {
   const {
+    as: asProp,
     asChild,
     children,
     class: classProp,
     className,
     ref,
     ...rest
-  } = props as BrandNativeProps | BrandAsChildProps;
-  const as = "as" in props ? props.as : undefined;
+  } = props as (BrandNativeProps | BrandAsChildProps) & {
+    as?: "div" | "a" | "span";
+  };
+  const as = asProp;
 
   const finalProps = mergeProps(rest, {
     ref,

package/src/components/brand/brand.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type BrandElement = "div" | "a" | "span";

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

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { ButtonGroupProps } from "./button-group.types";
 

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

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type ButtonGroupOrientation = "horizontal" | "vertical";

package/src/components/card/card.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import type {

package/src/components/card/card.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type CardVariant = "default" | "raised";

package/src/components/catalog.tsx

@@ -1,11 +1,16 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
-import { DialogContent } from "@askrjs/ui";
+import { DialogContent, DialogDescription, DialogTitle } from "@askrjs/ui";
 import { Block } from "./block";
 import { classes } from "./_internal/classes";
 import { mergeProps } from "./_internal/merge-props";
 
 const CatalogDialogContent = DialogContent as (props: Record<string, unknown>) => JSX.Element;
+const CatalogDialogTitle = DialogTitle as (props: Record<string, unknown>) => JSX.Element;
+const CatalogDialogDescription = DialogDescription as (
+  props: Record<string, unknown>,
+) => JSX.Element;
 
 type CatalogElement = keyof JSX.IntrinsicElements;
 
@@ -42,13 +47,18 @@ function catalogPart(props: CatalogComponentProps, defaults: CatalogDefaults): J
 }
 
 function buttonPart(props: CatalogComponentProps, slot: string, className?: string): JSX.Element {
-  const { children, ref, class: classProp, type = "button", ...rest } = props;
+  const { as, asChild, children, ref, class: classProp, type = "button", ...rest } = props;
+  void as;
   const finalProps = mergeProps(rest, {
     ref,
     class: classes(className, classProp),
     "data-slot": slot,
   });
 
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
+
   return (
     <button type={type as "button" | "submit" | "reset"} {...finalProps}>
       {children}
@@ -249,6 +259,7 @@ export function CalendarDay(
   const { disabled, outside, rangeEnd, rangeMiddle, rangeStart, selected, today, ...rest } = props;
   return buttonPart(
     {
+      disabled,
       "aria-disabled": disabled ? "true" : undefined,
       "aria-selected": selected ? "true" : undefined,
       "data-disabled": disabled ? "" : undefined,
@@ -661,11 +672,11 @@ export function SheetFooter(props: CatalogComponentProps): JSX.Element {
 }
 
 export function SheetTitle(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "sheet-title", element: "h2" });
+  return <CatalogDialogTitle {...props} data-slot="sheet-title" />;
 }
 
 export function SheetDescription(props: CatalogComponentProps): JSX.Element {
-  return catalogPart(props, { slot: "sheet-description", element: "p" });
+  return <CatalogDialogDescription {...props} data-slot="sheet-description" />;
 }
 
 export function Toaster(props: CatalogComponentProps): JSX.Element {

package/src/components/close/close.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Button, type ButtonNativeProps } from "@askrjs/ui";
 import { classes } from "../_internal/classes";
 import type { CloseNativeProps } from "./close.types";

package/src/components/container/container.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { ContainerProps } from "./container.types";
 

package/src/components/empty-state/empty-state.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { EmptyStateProps } from "./empty-state.types";
 

package/src/components/field/field.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import type { FieldErrorProps, FieldHintProps, FieldProps } from "./field.types";

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

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;

package/src/components/footer/footer.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";

package/src/components/footer/footer.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { BlockElementProps } from "../block";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/grid/grid.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { mergeLayoutStyles } from "../_internal/block-layout";
 import { mergeProps } from "../_internal/merge-props";

package/src/components/grid/grid.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type { BlockSpace, ResponsiveValue } from "../_internal/block-layout";
 

package/src/components/header/header.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { HeaderProps } from "./header.types";
 

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

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "@askrjs/askr/foundations/utilities";
 import { classes } from "../_internal/classes";

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

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/jsx-types.ts

@@ -0,0 +1,16 @@
+import type { JSXElement } from "@askrjs/askr/foundations/structures";
+
+declare global {
+  namespace JSX {
+    interface Element extends JSXElement {
+      readonly __askrThemesJsxElementBrand?: never;
+    }
+
+    interface IntrinsicElements {
+      // @ts-ignore The Askr source types already provide a compatible fallback index.
+      [element: string]: Record<string, unknown>;
+    }
+  }
+}
+
+export {};

package/src/components/main/main.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { MainProps } from "./main.types";
 

package/src/components/nav/nav.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { currentRoute, Link, navigate } from "@askrjs/askr/router";
 import { Block } from "../block";
@@ -103,13 +104,17 @@ function renderRoutedLink(
     children,
     href: suppliedHref,
     to,
+    onPress,
     onClick,
     ref,
     class: className,
     match = "prefix",
     target,
     ...rest
-  } = props as NavLinkProps & { onClick?: (event: MouseEvent) => void };
+  } = props as NavLinkProps & {
+    onPress?: (event: Event) => void;
+    onClick?: (event: MouseEvent) => void;
+  };
   const href = to?.href ?? suppliedHref;
   if (!href) {
     throw new Error("Nav link requires href or to.");
@@ -124,6 +129,7 @@ function renderRoutedLink(
     slot === "nav-item" && resolvedSlot !== "nav-item" ? "nav-item" : undefined;
   const { "data-slot": _dataSlot, ...childRest } = rest as Record<string, unknown>;
   void _dataSlot;
+  const hasDownload = (rest as Record<string, unknown>).download !== undefined;
   const currentPathname = getReactiveCurrentPathname();
   const targetPathname = resolvePathname(href);
   const routeActive =
@@ -139,12 +145,20 @@ function renderRoutedLink(
     : {
         "data-active": undefined,
       };
-  const rendersRouterLink = targetPathname !== null && !target && typeof onClick !== "function";
+  const rendersRouterLink =
+    targetPathname !== null &&
+    !target &&
+    !hasDownload &&
+    typeof onClick !== "function" &&
+    typeof onPress !== "function";
   const childProps: NavLinkProps = to
     ? ({ ...childRest, to, target } as NavLinkProps)
     : ({ ...childRest, href, target } as NavLinkProps);
   const handleClick = (event: MouseEvent) => {
+    onPress?.(event);
+    if (event.defaultPrevented) return;
     onClick?.(event);
+    if (hasDownload) return;
 
     if (!shouldHandleClientNavigation(event, target, targetPathname)) {
       return;

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

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 import type { LinkProps } from "@askrjs/askr/router";
@@ -58,6 +59,7 @@ export type NavItemAsChildProps = Omit<JSX.IntrinsicElements["a"], "children" |
 
 export type NavLinkOwnProps = NavItemOwnProps & {
   match?: NavLinkMatch;
+  onPress?: (event: Event) => void;
 };
 
 export type NavLinkProps = LinkProps & NavLinkOwnProps;

package/src/components/navbar/navbar.tsx

@@ -1,4 +1,11 @@
-import { Dropdown, DropdownTrigger } from "@askrjs/ui";
+import type { JSX } from "@askrjs/askr/jsx-runtime";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Dropdown,
+  DropdownTrigger,
+} from "@askrjs/ui";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { isJsxElement, toChildArray } from "../_internal/jsx";
@@ -70,13 +77,17 @@ export function Navbar(props: NavbarProps): JSX.Element {
     </LayoutBlock>
   );
   const collapse = hasNavContent ? (
-    <details data-slot="navbar-collapse">
-      <summary aria-label={collapseLabel} data-slot="navbar-toggle">
-        {collapseIcon}
-        <span data-slot="navbar-toggle-label">{collapseLabel}</span>
-      </summary>
-      {content}
-    </details>
+    <div data-slot="navbar-collapse">
+      <Collapsible>
+        <CollapsibleTrigger aria-label={collapseLabel} data-slot="navbar-toggle">
+          {collapseIcon}
+          <span data-slot="navbar-toggle-label">{collapseLabel}</span>
+        </CollapsibleTrigger>
+        <CollapsibleContent forceMount asChild data-slot="navbar-content">
+          {content}
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
   ) : null;
 
   return (

package/src/components/overlays/dropdown-content.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { DropdownContent as UiDropdownContent } from "@askrjs/ui";
 import type { DropdownContentAsChildProps, DropdownContentProps } from "@askrjs/ui";
 

package/src/components/page/page.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import { Container } from "../container";
 import type { PageProps } from "./page.types";

package/src/components/page-header/page-header.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { PageHeaderProps } from "./page-header.types";
 

package/src/components/section/section.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Block } from "../block";
 import type { SectionProps } from "./section.types";
 

package/src/components/separator/separator.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
 import { intrinsicElement } from "../_internal/jsx";

package/src/components/separator/separator.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/sidebar/index.ts

@@ -21,6 +21,7 @@ export type {
   SidebarCollapsible,
   SidebarPartProps,
   SidebarProps,
+  SidebarRailProps,
   SidebarSide,
   SidebarTooltipSide,
   SidebarVariant,

package/src/components/sidebar/sidebar.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
@@ -143,16 +144,23 @@ export function SidebarMenuButton(props: SidebarButtonProps): JSX.Element {
 }
 
 export function SidebarMenuAction(props: SidebarButtonProps): JSX.Element {
-  const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
+  const {
+    asChild,
+    children,
+    class: className,
+    tooltip,
+    tooltipSide,
+    type = "button",
+    ...rest
+  } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes(className),
+    "data-slot": "sidebar-menu-action",
+    ...sidebarTooltipProps(tooltip, tooltipSide),
+  });
+  if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   return (
-    <button
-      type={type as "button" | "submit" | "reset" | undefined}
-      {...mergeProps(rest, {
-        class: classes(className),
-        "data-slot": "sidebar-menu-action",
-        ...sidebarTooltipProps(tooltip, tooltipSide),
-      })}
-    >
+    <button type={type as "button" | "submit" | "reset" | undefined} {...finalProps}>
       {children}
     </button>
   );
@@ -162,21 +170,38 @@ export function SidebarMenuBadge(props: SidebarPartProps): JSX.Element {
   return sidebarPart(props, "sidebar-menu-badge", "span");
 }
 
-export function SidebarRail(props: SidebarPartProps): JSX.Element {
-  return sidebarPart(props, "sidebar-rail", "button");
+export function SidebarRail(props: SidebarButtonProps): JSX.Element {
+  const { asChild, children, class: className, type = "button", ...rest } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes(className),
+    "data-slot": "sidebar-rail",
+  });
+  if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  return (
+    <button type={type as "button" | "submit" | "reset" | undefined} {...finalProps}>
+      {children}
+    </button>
+  );
 }
 
 export function SidebarTrigger(props: SidebarButtonProps): JSX.Element {
-  const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
+  const {
+    asChild,
+    children,
+    class: className,
+    tooltip,
+    tooltipSide,
+    type = "button",
+    ...rest
+  } = props;
+  const finalProps = mergeProps(rest, {
+    class: classes("btn btn-ghost btn-icon", className),
+    "data-slot": "sidebar-trigger",
+    ...sidebarTooltipProps(tooltip, tooltipSide),
+  });
+  if (asChild) return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   return (
-    <button
-      type={type as "button" | "submit" | "reset" | undefined}
-      {...mergeProps(rest, {
-        class: classes("btn btn-ghost btn-icon", className),
-        "data-slot": "sidebar-trigger",
-        ...sidebarTooltipProps(tooltip, tooltipSide),
-      })}
-    >
+    <button type={type as "button" | "submit" | "reset" | undefined} {...finalProps}>
       {children}
     </button>
   );

package/src/components/sidebar/sidebar.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { BlockElementProps } from "../block";
 
 export type SidebarCollapsible = "offcanvas" | "icon" | "none";
@@ -26,3 +27,5 @@ export type SidebarButtonProps = JSX.IntrinsicElements["button"] & {
   tooltipSide?: SidebarTooltipSide;
   variant?: "default" | "outline";
 };
+
+export type SidebarRailProps = SidebarButtonProps;

package/src/components/skeleton/skeleton.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeLayoutStyles } from "../_internal/block-layout";
 import { classes } from "../_internal/classes";

package/src/components/skeleton/skeleton.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { JSXElement } from "@askrjs/askr/foundations";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 

package/src/components/spinner/spinner.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { ProgressCircle, ProgressCircleIndicator } from "@askrjs/ui";
 import type { SpinnerProps } from "./spinner.types";
 

package/src/components/stat/stat.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import type { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from "./stat.types";

package/src/components/stat/stat.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 type DivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref">;

package/src/components/text/text.tsx

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
 import { intrinsicElement } from "../_internal/jsx";

package/src/components/text/text.types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from "@askrjs/askr/jsx-runtime";
 import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type TextElement = "p" | "span" | "div" | "strong";