@askrjs/themes 0.0.3 → 0.0.6

package/src/components/shell/shell.types.ts

@@ -0,0 +1,71 @@
+import type { JSXElement } from "@askrjs/askr/foundations";
+import type { Ref } from "@askrjs/askr/foundations/utilities";
+
+export type ShellVariant = "sidebar" | "topbar" | "rail";
+
+export type ShellOwnProps = {
+  variant?: ShellVariant;
+  class?: string;
+  children?: unknown;
+};
+
+export type ShellDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  ShellOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type ShellAsChildProps = Omit<ShellOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type ShellProps = ShellDivProps | ShellAsChildProps;
+
+export type ShellNavOwnProps = {
+  class?: string;
+  children?: unknown;
+};
+
+export type ShellNavDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  ShellNavOwnProps & {
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type ShellNavAsChildProps = Omit<ShellNavOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type ShellNavProps = ShellNavDivProps | ShellNavAsChildProps;
+
+export type ShellMainOwnProps = {
+  as?: "main" | "div";
+  class?: string;
+  children?: unknown;
+};
+
+export type ShellMainMainProps = Omit<JSX.IntrinsicElements["main"], "children" | "ref"> &
+  ShellMainOwnProps & {
+    as?: "main";
+    asChild?: false;
+    ref?: Ref<HTMLElement>;
+  };
+
+export type ShellMainDivProps = Omit<JSX.IntrinsicElements["div"], "children" | "ref"> &
+  ShellMainOwnProps & {
+    as: "div";
+    asChild?: false;
+    ref?: Ref<HTMLDivElement>;
+  };
+
+export type ShellMainAsChildProps = Omit<ShellMainOwnProps, "as"> & {
+  asChild: true;
+  children: JSXElement;
+  ref?: Ref<unknown>;
+};
+
+export type ShellMainProps = ShellMainMainProps | ShellMainDivProps | ShellMainAsChildProps;

package/src/components/sidebar/index.ts

@@ -0,0 +1,5 @@
+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";

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

@@ -0,0 +1,76 @@
+import { readContext } from "@askrjs/askr";
+import { renderShellPanel } from "../shell/shell-panel";
+import { SidebarResponsiveContext } from "./sidebar.context";
+import type { SidebarPanelProps } from "./sidebar.types";
+
+export function SidebarPanel(props: SidebarPanelProps): 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(SidebarResponsiveContext);
+        } catch {
+          return {
+            active: () => false,
+            collapseLabel: () => "Menu",
+            closePanel: () => undefined,
+            iconCollapsed: () => false,
+            isRailCollapsible: () => false,
+            orientation: () => "vertical" as const,
+            panelId: () => undefined,
+            panelOpen: () => false,
+            togglePanel: () => undefined,
+            toggleRail: () => undefined,
+          };
+        }
+      })()
+    : {
+        active: () => false,
+        collapseLabel: () => "Menu",
+        closePanel: () => undefined,
+        iconCollapsed: () => false,
+        isRailCollapsible: () => false,
+        orientation: () => "vertical" as const,
+        panelId: () => undefined,
+        panelOpen: () => false,
+        togglePanel: () => undefined,
+        toggleRail: () => 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,
+    dataOrientation: responsive.orientation(),
+    onClose: closePanel,
+    open,
+    panelId,
+    prefix: "sidebar",
+    ref,
+    rest,
+  });
+}

package/src/components/sidebar/sidebar-toggle.tsx

@@ -0,0 +1,5 @@
+import type { SidebarToggleProps } from "./sidebar.types";
+
+export function SidebarToggle(_props: SidebarToggleProps): null {
+  return null;
+}

package/src/components/sidebar/sidebar.context.ts

@@ -0,0 +1,40 @@
+import { defineContext } from "@askrjs/askr";
+
+export type SidebarContextValue = {
+  orientation: () => "vertical";
+};
+
+export type SidebarResponsiveContextValue = {
+  active: () => boolean;
+  collapseLabel: () => string;
+  closePanel: () => void;
+  iconCollapsed: () => boolean;
+  isRailCollapsible: () => boolean;
+  orientation: () => "vertical";
+  panelId: () => string | undefined;
+  panelOpen: () => boolean;
+  togglePanel: () => void;
+  toggleRail: () => void;
+};
+
+const defaultOrientation = () => "vertical" as const;
+
+const defaultResponsiveContext: SidebarResponsiveContextValue = {
+  active: () => false,
+  collapseLabel: () => "Menu",
+  closePanel: () => undefined,
+  iconCollapsed: () => false,
+  isRailCollapsible: () => false,
+  orientation: defaultOrientation,
+  panelId: () => undefined,
+  panelOpen: () => false,
+  togglePanel: () => undefined,
+  toggleRail: () => undefined,
+};
+
+export const SidebarContext = defineContext<SidebarContextValue>({
+  orientation: defaultOrientation,
+});
+
+export const SidebarResponsiveContext =
+  defineContext<SidebarResponsiveContextValue>(defaultResponsiveContext);

package/src/components/sidebar/sidebar.shared.ts

@@ -0,0 +1,12 @@
+import { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed } from "../navbar/navbar.shared";
+import type { CollapseBreakpoint, Collapsible } from "../shell/shell-nav.types";
+
+export { NAVBAR_COLLAPSE_BREAKPOINTS, isNavbarCollapsed };
+
+export function resolveSidebarCollapsible(collapsible: Collapsible | undefined): Collapsible {
+  return collapsible ?? "none";
+}
+
+export function isSidebarCollapsed(breakpoint: CollapseBreakpoint): boolean {
+  return isNavbarCollapsed(breakpoint);
+}

package/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,355 @@
+import { state } from "@askrjs/askr";
+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";
+
+type SidebarChildren = {
+  brand?: unknown;
+  items: unknown[];
+};
+
+type SidebarToggleConfig = {
+  collapsedIcon?: unknown;
+  expandedIcon?: unknown;
+};
+
+function splitSidebarChildren(children: unknown[]): SidebarChildren {
+  const brandIndex = children.findIndex((child) => isJsxElement(child) && child.type === NavBrand);
+
+  if (brandIndex === -1) {
+    return { items: children };
+  }
+
+  return {
+    brand: children[brandIndex],
+    items: children.filter((_, index) => index !== brandIndex),
+  };
+}
+
+function isSidebarToggleChild(child: unknown): boolean {
+  return isJsxElement(child) && child.type === SidebarToggle;
+}
+
+function splitSidebarToggle(children: unknown[]): {
+  items: unknown[];
+  toggle?: SidebarToggleConfig;
+} {
+  const toggleIndex = children.findIndex((child) => isSidebarToggleChild(child));
+
+  if (toggleIndex === -1) {
+    return { items: children };
+  }
+
+  const toggleChild = children[toggleIndex] as { props?: SidebarToggleConfig } | undefined;
+
+  return {
+    items: children.filter((_, index) => index !== toggleIndex),
+    toggle: toggleChild?.props,
+  };
+}
+
+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>
+  );
+
+  if (iconPlacement === "end") {
+    return (
+      <>
+        {renderedLabel}
+        {renderedIcon}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {renderedIcon}
+      {renderedLabel}
+    </>
+  );
+}
+
+function renderSidebarRailContents(
+  label: string,
+  collapsed: boolean,
+  toggle: SidebarToggleConfig | undefined,
+): JSX.Element {
+  const icon = collapsed ? toggle?.collapsedIcon : toggle?.expandedIcon;
+
+  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 Sidebar(props: SidebarProps): JSX.Element {
+  const {
+    children,
+    collapsed: controlledCollapsed,
+    breakpoint,
+    collapseIcon,
+    collapseIconPlacement = "start",
+    collapseLabel,
+    collapsible,
+    defaultCollapsed = false,
+    id,
+    "aria-label": ariaLabel,
+    onCollapsedChange,
+    class: className,
+    ref,
+    ...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",
+  });
+
+  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}
+
+          <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>
+
+          {panels}
+
+          {isResponsive && isDrawerOpen ? (
+            <button
+              aria-label={`Close ${effectiveCollapseLabel}`}
+              class="sidebar-backdrop"
+              data-slot="sidebar-backdrop"
+              data-state="open"
+              tabIndex={-1}
+              type="button"
+              onClick={closeDrawer}
+            />
+          ) : null}
+
+          {isResponsive ? (
+            <ShellResponsiveWatcher
+              breakpoint={breakpoint}
+              isCollapsed={isSidebarCollapsed}
+              onResize={(nextCollapsed) => {
+                responsiveCollapsedState.set(nextCollapsed);
+              }}
+              onExpand={() => {
+                drawerOpenState.set(false);
+              }}
+            />
+          ) : null}
+
+          <ShellPanelWatcher
+            contentId={panelId}
+            open={isDrawerOpen}
+            panelSlot="sidebar-panel"
+            onClose={() => {
+              closeDrawer();
+            }}
+          />
+        </nav>
+      </SidebarResponsiveContext.Scope>
+    </SidebarContext.Scope>
+  );
+}

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

@@ -0,0 +1,35 @@
+import type {
+  CollapseBreakpoint,
+  CollapseIconPlacement,
+  Collapsible,
+} from "../shell/shell-nav.types";
+
+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 SidebarToggleProps = Omit<
+  JSX.IntrinsicElements["button"],
+  "children" | "onClick" | "type"
+> & {
+  collapsedIcon: unknown;
+  expandedIcon: unknown;
+};
+
+export type SidebarPanelProps = Omit<JSX.IntrinsicElements["div"], "children"> & {
+  active?: boolean;
+  brand?: unknown;
+  children?: unknown;
+  collapseLabel?: string;
+  onClose?: () => void;
+  open?: boolean;
+  panelId?: string;
+};

package/src/components/skeleton/skeleton.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";
 
 export type SkeletonOwnProps = {
   children?: unknown;

package/src/components/spacer/spacer.tsx

@@ -1,6 +1,7 @@
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
 import { isCssLength, mergeLayoutStyles } from "../_internal/layout";
+import { styleDeclarationsToClass } from "../_internal/style";
 import { isJsxElement, toChildArray } from "../_internal/jsx";
 import type { SpacerAsChildProps, SpacerNativeProps } from "./spacer.types";
 
@@ -33,11 +34,13 @@ export function Spacer(props: SpacerNativeProps | SpacerAsChildProps) {
     }
   }
 
+  const layoutClass = styleDeclarationsToClass(mergeLayoutStyles(layoutStyle, userStyle));
+
   const finalProps = mergeProps(rest, {
     ref,
     "data-slot": "spacer",
     "data-axis": axis,
-    style: mergeLayoutStyles(layoutStyle, userStyle),
+    ...(layoutClass ? { class: layoutClass } : {}),
   });
   const keyedChildren = toChildArray(children).map((child, index) => {
     if (!isJsxElement(child) || child.key != null) {

package/src/components/spacer/spacer.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";
 
 export type SpacerAxis = "inline" | "block";
 
@@ -7,7 +8,7 @@ export type SpacerOwnProps = {
   grow?: number;
   /** flex-shrink factor (default 1 when no axis is set, 0 when axis is set). */
   shrink?: number;
-  /** CSS flex-basis / width (axis=inline) / height (axis=block) value. Applied as inline style only when it is a real CSS length. */
+  /** CSS flex-basis / width (axis=inline) / height (axis=block) value. */
   basis?: string;
   /** When set, renders a fixed space along the given axis instead of a flex-grow spacer. */
   axis?: SpacerAxis;

package/src/components/stack/stack.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 { FlexOwnProps } from "../flex/flex.types";
 
 export type StackOwnProps = Omit<FlexOwnProps, "direction" | "as"> & {

package/src/components/theme/index.ts

@@ -1,5 +1,14 @@
-export { DEFAULT_THEME_OPTIONS, ThemePicker, ThemeProvider, ThemeToggle, useTheme } from "./theme";
+export {
+  CAT_THEME_NAMES,
+  CAT_THEME_OPTIONS,
+  DEFAULT_THEME_OPTIONS,
+  ThemePicker,
+  ThemeProvider,
+  ThemeToggle,
+  useTheme,
+} from "./theme";
 export type {
+  CatThemeName,
   ThemeContextValue,
   ThemeName,
   ThemeOption,