@askrjs/themes 0.0.8 → 0.0.10

package/src/components/sidebar/index.ts

@@ -1,5 +1,27 @@
-export { Sidebar } from "./sidebar";
-export { SidebarPanel } from "./sidebar-panel";
-export { SidebarToggle } from "./sidebar-toggle";
-export type { SidebarPanelProps, SidebarProps, SidebarToggleProps } from "./sidebar.types";
-export type { CollapseBreakpoint, Collapsible } from "../shell/shell-nav.types";
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarTrigger,
+} from "./sidebar";
+export type {
+  SidebarButtonProps,
+  SidebarCollapsible,
+  SidebarPartProps,
+  SidebarProps,
+  SidebarSide,
+  SidebarTooltipSide,
+  SidebarVariant,
+} from "./sidebar.types";

package/src/components/sidebar/sidebar.tsx

@@ -1,355 +1,183 @@
-import { state } from "@askrjs/askr";
+import { Slot } from "@askrjs/askr/foundations";
+import { Block } from "../block";
 import { classes } from "../_internal/classes";
-import { isJsxElement, toChildArray } from "../_internal/jsx";
 import { mergeProps } from "../_internal/merge-props";
-import { NavBrand } from "../navbar/navbar";
-import {
-  isShellPanelChild,
-  renderKeyedShellChildren,
-  renderKeyedShellPanelChildren,
-  ShellPanelWatcher,
-  ShellResponsiveWatcher,
-} from "../shell/shell-responsive";
-import { SidebarContext, SidebarResponsiveContext } from "./sidebar.context";
-import { SidebarPanel } from "./sidebar-panel";
-import { SidebarToggle } from "./sidebar-toggle";
-import { isSidebarCollapsed, resolveSidebarCollapsible } from "./sidebar.shared";
-import type { SidebarProps } from "./sidebar.types";
-import type { CollapseIconPlacement } from "../shell/shell-nav.types";
+import type {
+  SidebarButtonProps,
+  SidebarPartProps,
+  SidebarProps,
+  SidebarTooltipSide,
+} from "./sidebar.types";
+
+function sidebarTooltipProps(
+  tooltip: string | undefined,
+  tooltipSide: SidebarTooltipSide | undefined,
+): Record<string, string | undefined> {
+  return {
+    "data-tooltip": tooltip,
+    "data-tooltip-side": tooltip ? tooltipSide : undefined,
+  };
+}
 
-type SidebarChildren = {
-  brand?: unknown;
-  items: unknown[];
-};
+function sidebarPart(
+  props: SidebarPartProps,
+  slot: string,
+  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,
+  });
 
-type SidebarToggleConfig = {
-  collapsedIcon?: unknown;
-  expandedIcon?: unknown;
-};
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
 
-function splitSidebarChildren(children: unknown[]): SidebarChildren {
-  const brandIndex = children.findIndex((child) => isJsxElement(child) && child.type === NavBrand);
+  return <Element {...finalProps}>{children}</Element>;
+}
 
-  if (brandIndex === -1) {
-    return { items: children };
-  }
+export function Sidebar(props: SidebarProps): JSX.Element {
+  const {
+    children,
+    collapsible = "offcanvas",
+    side = "left",
+    variant = "sidebar",
+    width = "sidebar",
+    shrink = false,
+    ...rest
+  } = props;
 
-  return {
-    brand: children[brandIndex],
-    items: children.filter((_, index) => index !== brandIndex),
-  };
+  return (
+    <Block
+      as="aside"
+      width={width}
+      shrink={shrink}
+      minHeight="screen"
+      padding="md"
+      gap="lg"
+      borderRight={true}
+      {...rest}
+      data-collapsible={collapsible}
+      data-side={side}
+      data-slot="sidebar"
+      data-variant={variant}
+    >
+      {children}
+    </Block>
+  );
 }
 
-function isSidebarToggleChild(child: unknown): boolean {
-  return isJsxElement(child) && child.type === SidebarToggle;
+export function SidebarProvider(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-provider");
 }
 
-function splitSidebarToggle(children: unknown[]): {
-  items: unknown[];
-  toggle?: SidebarToggleConfig;
-} {
-  const toggleIndex = children.findIndex((child) => isSidebarToggleChild(child));
+export function SidebarInset(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-inset", "main");
+}
 
-  if (toggleIndex === -1) {
-    return { items: children };
-  }
+export function SidebarContent(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-content");
+}
 
-  const toggleChild = children[toggleIndex] as { props?: SidebarToggleConfig } | undefined;
+export function SidebarHeader(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-header");
+}
 
-  return {
-    items: children.filter((_, index) => index !== toggleIndex),
-    toggle: toggleChild?.props,
-  };
+export function SidebarFooter(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-footer");
 }
 
-function renderSidebarMenuContents(
-  label: string,
-  icon: unknown,
-  iconPlacement: CollapseIconPlacement,
-): JSX.Element {
-  const renderedIcon = (
-    <span class="sidebar-toggle-icon" data-slot="sidebar-toggle-icon" aria-hidden="true">
-      {icon ?? (
-        <span class="sidebar-toggle-glyph sidebar-toggle-glyph--menu">
-          <span />
-          <span />
-          <span />
-        </span>
-      )}
-    </span>
-  );
-  const renderedLabel = (
-    <span class="sidebar-toggle-label" data-slot="sidebar-toggle-label">
-      {label}
-    </span>
-  );
+export function SidebarGroup(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-group");
+}
 
-  if (iconPlacement === "end") {
-    return (
-      <>
-        {renderedLabel}
-        {renderedIcon}
-      </>
-    );
-  }
+export function SidebarGroupLabel(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-group-label");
+}
 
-  return (
-    <>
-      {renderedIcon}
-      {renderedLabel}
-    </>
-  );
+export function SidebarGroupContent(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-group-content");
 }
 
-function renderSidebarRailContents(
-  label: string,
-  collapsed: boolean,
-  toggle: SidebarToggleConfig | undefined,
-): JSX.Element {
-  const icon = collapsed ? toggle?.collapsedIcon : toggle?.expandedIcon;
+export function SidebarMenu(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-menu", "ul");
+}
 
-  return (
-    <>
-      <span
-        class="sidebar-rail-toggle-icon"
-        data-slot="sidebar-rail-toggle-icon"
-        aria-hidden="true"
-      >
-        {icon ?? (
-          <span
-            class={classes(
-              "sidebar-toggle-glyph",
-              "sidebar-toggle-glyph--rail",
-              collapsed ? "is-collapsed" : "is-expanded",
-            )}
-          />
-        )}
-      </span>
-      <span class="sidebar-rail-toggle-label" data-slot="sidebar-rail-toggle-label">
-        {label}
-      </span>
-    </>
-  );
+export function SidebarMenuItem(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-menu-item", "li");
 }
 
-export function Sidebar(props: SidebarProps): JSX.Element {
+export function SidebarMenuButton(props: SidebarButtonProps): JSX.Element {
   const {
+    active,
+    asChild,
     children,
-    collapsed: controlledCollapsed,
-    breakpoint,
-    collapseIcon,
-    collapseIconPlacement = "start",
-    collapseLabel,
-    collapsible,
-    defaultCollapsed = false,
-    id,
-    "aria-label": ariaLabel,
-    onCollapsedChange,
     class: className,
-    ref,
+    size,
+    tooltip,
+    tooltipSide,
+    type = "button",
+    variant,
     ...rest
   } = props;
-  const effectiveCollapseLabel =
-    collapseLabel ?? (typeof ariaLabel === "string" ? ariaLabel : undefined) ?? "Menu";
-  const childItems = toChildArray(children);
-  const explicitPanelItems = childItems.filter((child) => isShellPanelChild(child, SidebarPanel));
-  const contentItems = childItems.filter((child) => !isShellPanelChild(child, SidebarPanel));
-  const isResponsive = breakpoint !== undefined;
-  const responsiveCollapsedState = state(isResponsive ? isSidebarCollapsed(breakpoint) : false);
-  const drawerOpenState = state(false);
-  const panelId = typeof id === "string" ? `${id}-panel` : undefined;
-  const collapseBehavior = resolveSidebarCollapsible(collapsible);
-  const isRailCollapsible = collapseBehavior === "icon";
-  const railCollapsedState = state(defaultCollapsed);
-  const responsiveCollapsed = responsiveCollapsedState();
-  const drawerOpen = drawerOpenState();
-  const internalRailCollapsed = railCollapsedState();
-  const isMobile = isResponsive ? responsiveCollapsed : false;
-  const isDrawerOpen = isResponsive && isMobile && drawerOpen;
-  const isRailCollapsed = isRailCollapsible
-    ? (controlledCollapsed ?? internalRailCollapsed ?? false)
-    : false;
-  const closeDrawer = () => drawerOpenState.set(false);
-  const closeDrawerOnNavActivation = (event: MouseEvent) => {
-    const target = event.target;
-
-    if (!(target instanceof Element)) {
-      return;
-    }
-
-    if (target.closest('a[data-slot="nav-link"], a[data-slot="nav-item"], a.navbar-item')) {
-      closeDrawer();
-    }
-  };
-  const toggleDrawer = () => {
-    drawerOpenState.set(!drawerOpenState());
-  };
-  const setRailCollapsed = (nextCollapsed: boolean) => {
-    if (!isRailCollapsible) {
-      return;
-    }
-
-    if (controlledCollapsed === undefined) {
-      railCollapsedState.set(nextCollapsed);
-    }
-
-    onCollapsedChange?.(nextCollapsed);
-  };
-  const toggleRail = () => {
-    if (!isRailCollapsible) {
-      return;
-    }
-
-    setRailCollapsed(!isRailCollapsed);
-  };
-  const { items: drawerSourceItems, toggle: railToggleConfig } = splitSidebarToggle(contentItems);
-  const { brand: drawerBrand, items: drawerItems } = splitSidebarChildren(drawerSourceItems);
-  const desktopChildren = renderKeyedShellChildren(drawerSourceItems, "sidebar-desktop");
-  const drawerChildren = renderKeyedShellChildren(drawerItems, "sidebar-drawer");
-
-  const contextValue = {
-    active: () => isResponsive,
-    collapseLabel: () => effectiveCollapseLabel,
-    closePanel: closeDrawer,
-    iconCollapsed: () => isRailCollapsed,
-    isRailCollapsible: () => isRailCollapsible,
-    orientation: () => "vertical" as const,
-    panelId: () => panelId,
-    panelOpen: () => isDrawerOpen,
-    togglePanel: toggleDrawer,
-    toggleRail,
-  };
-  const panelContext = {
-    active: isResponsive,
-    collapseLabel: effectiveCollapseLabel,
-    onClose: closeDrawer,
-    open: isDrawerOpen,
-    panelId,
-  };
-  const panels =
-    explicitPanelItems.length > 0 ? (
-      renderKeyedShellPanelChildren(explicitPanelItems, "sidebar-panel", panelContext)
-    ) : isResponsive ? (
-      <SidebarPanel
-        active={isResponsive}
-        brand={drawerBrand}
-        collapseLabel={effectiveCollapseLabel}
-        onClose={closeDrawer}
-        onClick={closeDrawerOnNavActivation}
-        open={isDrawerOpen}
-        panelId={panelId}
-      >
-        {drawerChildren}
-      </SidebarPanel>
-    ) : null;
-
   const finalProps = mergeProps(rest, {
-    ref,
-    "aria-label": ariaLabel,
-    class: classes("sidebar", className),
-    "data-collapse-below": breakpoint,
-    "data-collapsible": collapseBehavior === "none" ? undefined : collapseBehavior,
-    "data-icon-collapsed": isRailCollapsible ? (isRailCollapsed ? "true" : "false") : undefined,
-    "data-mobile-open": isResponsive ? (drawerOpen ? "true" : "false") : undefined,
-    "data-orientation": "vertical",
-    "data-responsive-collapsed": isMobile ? "true" : "false",
-    "data-slot": "sidebar",
+    class: classes(className),
+    "data-active": active ? "true" : undefined,
+    "data-size": size && size !== "default" ? size : undefined,
+    "data-slot": "sidebar-menu-button",
+    ...sidebarTooltipProps(tooltip, tooltipSide),
+    "data-variant": variant && variant !== "default" ? variant : undefined,
   });
 
-  return (
-    <SidebarContext.Scope value={{ orientation: () => "vertical" as const }}>
-      <SidebarResponsiveContext.Scope value={contextValue}>
-        <nav {...finalProps}>
-          {isResponsive ? (
-            <div class="sidebar-mobile" data-slot="sidebar-mobile">
-              <button
-                aria-controls={panelId}
-                aria-expanded={isDrawerOpen ? "true" : "false"}
-                aria-label={effectiveCollapseLabel}
-                class="sidebar-toggle"
-                data-slot="sidebar-toggle"
-                data-state={isDrawerOpen ? "open" : "closed"}
-                data-variant="mobile"
-                type="button"
-                onClick={toggleDrawer}
-              >
-                {renderSidebarMenuContents(
-                  effectiveCollapseLabel,
-                  collapseIcon,
-                  collapseIconPlacement,
-                )}
-              </button>
-            </div>
-          ) : null}
+  if (asChild) {
+    return <Slot asChild {...finalProps} children={children as JSX.Element} />;
+  }
 
-          <div class="sidebar-shell" data-orientation="vertical" data-slot="sidebar-shell">
-            {isRailCollapsible && !isMobile ? (
-              <div
-                class="sidebar-rail"
-                data-slot="sidebar-rail"
-                data-state={isRailCollapsed ? "collapsed" : "expanded"}
-              >
-                <button
-                  aria-expanded={isRailCollapsed ? "false" : "true"}
-                  aria-label={
-                    isRailCollapsed
-                      ? `Expand ${effectiveCollapseLabel}`
-                      : `Collapse ${effectiveCollapseLabel}`
-                  }
-                  class="sidebar-rail-toggle"
-                  data-slot="sidebar-rail-toggle"
-                  data-state={isRailCollapsed ? "collapsed" : "expanded"}
-                  type="button"
-                  onClick={toggleRail}
-                >
-                  {renderSidebarRailContents(
-                    effectiveCollapseLabel,
-                    isRailCollapsed,
-                    railToggleConfig,
-                  )}
-                </button>
-              </div>
-            ) : null}
-            {desktopChildren}
-          </div>
+  return (
+    <button type={type} {...finalProps}>
+      {children}
+    </button>
+  );
+}
 
-          {panels}
+export function SidebarMenuAction(props: SidebarButtonProps): JSX.Element {
+  const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
+  return (
+    <button
+      type={type}
+      {...mergeProps(rest, {
+        class: classes(className),
+        "data-slot": "sidebar-menu-action",
+        ...sidebarTooltipProps(tooltip, tooltipSide),
+      })}
+    >
+      {children}
+    </button>
+  );
+}
 
-          {isResponsive && isDrawerOpen ? (
-            <button
-              aria-label={`Close ${effectiveCollapseLabel}`}
-              class="sidebar-backdrop"
-              data-slot="sidebar-backdrop"
-              data-state="open"
-              tabIndex={-1}
-              type="button"
-              onClick={closeDrawer}
-            />
-          ) : null}
+export function SidebarMenuBadge(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-menu-badge", "span");
+}
 
-          {isResponsive ? (
-            <ShellResponsiveWatcher
-              breakpoint={breakpoint}
-              isCollapsed={isSidebarCollapsed}
-              onResize={(nextCollapsed) => {
-                responsiveCollapsedState.set(nextCollapsed);
-              }}
-              onExpand={() => {
-                drawerOpenState.set(false);
-              }}
-            />
-          ) : null}
+export function SidebarRail(props: SidebarPartProps): JSX.Element {
+  return sidebarPart(props, "sidebar-rail", "button");
+}
 
-          <ShellPanelWatcher
-            contentId={panelId}
-            open={isDrawerOpen}
-            panelSlot="sidebar-panel"
-            onClose={() => {
-              closeDrawer();
-            }}
-          />
-        </nav>
-      </SidebarResponsiveContext.Scope>
-    </SidebarContext.Scope>
+export function SidebarTrigger(props: SidebarButtonProps): JSX.Element {
+  const { children, class: className, tooltip, tooltipSide, type = "button", ...rest } = props;
+  return (
+    <button
+      type={type}
+      {...mergeProps(rest, {
+        class: classes("btn btn-ghost btn-icon", className),
+        "data-slot": "sidebar-trigger",
+        ...sidebarTooltipProps(tooltip, tooltipSide),
+      })}
+    >
+      {children}
+    </button>
   );
 }

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

@@ -1,35 +1,28 @@
-import type {
-  CollapseBreakpoint,
-  CollapseIconPlacement,
-  Collapsible,
-} from "../shell/shell-nav.types";
+import type { BlockElementProps } from "../block";
 
-export type SidebarProps = Omit<JSX.IntrinsicElements["nav"], "children"> & {
-  children?: unknown;
-  breakpoint?: CollapseBreakpoint;
-  collapseIcon?: unknown;
-  collapseIconPlacement?: CollapseIconPlacement;
-  collapsed?: boolean;
-  collapseLabel?: string;
-  collapsible?: Collapsible;
-  defaultCollapsed?: boolean;
-  onCollapsedChange?: (collapsed: boolean) => void;
+export type SidebarCollapsible = "offcanvas" | "icon" | "none";
+export type SidebarSide = "left" | "right";
+export type SidebarTooltipSide = "top" | "bottom" | "left" | "right";
+export type SidebarVariant = "sidebar" | "floating" | "inset";
+
+export type SidebarProps = Omit<BlockElementProps<"aside">, "as" | "width" | "shrink"> & {
+  collapsible?: SidebarCollapsible;
+  side?: SidebarSide;
+  variant?: SidebarVariant;
+  width?: BlockElementProps<"aside">["width"];
+  shrink?: BlockElementProps<"aside">["shrink"];
 };
 
-export type SidebarToggleProps = Omit<
-  JSX.IntrinsicElements["button"],
-  "children" | "onClick" | "type"
-> & {
-  collapsedIcon: unknown;
-  expandedIcon: unknown;
+export type SidebarPartProps = JSX.IntrinsicElements["div"] & {
+  as?: keyof JSX.IntrinsicElements;
+  asChild?: boolean;
 };
 
-export type SidebarPanelProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+export type SidebarButtonProps = JSX.IntrinsicElements["button"] & {
   active?: boolean;
-  brand?: unknown;
-  children?: unknown;
-  collapseLabel?: string;
-  onClose?: () => void;
-  open?: boolean;
-  panelId?: string;
+  asChild?: boolean;
+  size?: "default" | "sm" | "lg";
+  tooltip?: string;
+  tooltipSide?: SidebarTooltipSide;
+  variant?: "default" | "outline";
 };

package/src/components/skeleton/index.ts

@@ -1,3 +1,2 @@
 export { Skeleton } from "./skeleton";
-export { SKELETON_A11Y_CONTRACT, type SkeletonA11yContract } from "./skeleton.a11y";
-export type { SkeletonOwnProps, SkeletonProps, SkeletonAsChildProps } from "./skeleton.types";
+export type { SkeletonAsChildProps, SkeletonOwnProps, SkeletonProps } from "./skeleton.types";

package/src/components/skeleton/skeleton.tsx

@@ -1,13 +1,45 @@
 import { Slot } from "@askrjs/askr/foundations";
+import { mergeLayoutStyles } from "../_internal/block-layout";
+import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { styleDeclarationsToClass } from "../_internal/style";
 import type { SkeletonAsChildProps, SkeletonProps } from "./skeleton.types";
 
+function resolveSkeletonDimension(value: string | number | undefined): string | undefined {
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+
 export function Skeleton(props: SkeletonProps): JSX.Element;
 export function Skeleton(props: SkeletonAsChildProps): JSX.Element;
 export function Skeleton(props: SkeletonProps | SkeletonAsChildProps) {
-  const { asChild, children, ref, ...rest } = props;
+  const {
+    asChild,
+    children,
+    class: classProp,
+    className,
+    height,
+    ref,
+    style,
+    width,
+    ...rest
+  } = props as (SkeletonProps | SkeletonAsChildProps) & {
+    class?: unknown;
+    className?: unknown;
+    style?: unknown;
+  };
+  const layoutClass = styleDeclarationsToClass(
+    mergeLayoutStyles(
+      {
+        blockSize: resolveSkeletonDimension(height),
+        inlineSize: resolveSkeletonDimension(width),
+      },
+      style,
+    ),
+  );
   const finalProps = mergeProps(rest, {
     ref,
+    class: classes(classProp, className, layoutClass),
     "data-slot": "skeleton",
     "data-skeleton": "true",
     "aria-hidden": "true",

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

@@ -3,6 +3,8 @@ import type { Ref } from "@askrjs/askr/foundations/utilities";
 
 export type SkeletonOwnProps = {
   children?: unknown;
+  height?: string | number;
+  width?: string | number;
 };
 
 export type SkeletonProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &

package/src/components/spinner/index.ts

@@ -1,2 +1,2 @@
 export { Spinner } from "./spinner";
-export type { SpinnerOwnProps, SpinnerProps } from "./spinner.types";
+export type { SpinnerOwnProps, SpinnerProps, SpinnerSize } from "./spinner.types";