@askrjs/themes 0.0.3 → 0.0.4

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,

package/src/components/theme/theme.tsx

@@ -3,7 +3,10 @@ import { resource } from "@askrjs/askr/resources";
 import { Button } from "@askrjs/ui";
 import type { ButtonNativeProps, PressEvent } from "@askrjs/ui";
 
-export type ThemeName = "light" | "dark" | "system" | (string & {});
+export const CAT_THEME_NAMES = ["tabby", "ginger", "tuxedo", "calico", "torty"] as const;
+
+export type CatThemeName = (typeof CAT_THEME_NAMES)[number];
+export type ThemeName = "light" | "dark" | "system" | CatThemeName | (string & {});
 
 export type ThemeOption = {
   value: ThemeName;
@@ -42,7 +45,7 @@ export type ThemeToggleProps = Omit<ButtonNativeProps, "children" | "onPress"> &
   lightIcon?: unknown;
   darkIcon?: unknown;
   systemIcon?: unknown;
-  toggleThemes?: readonly ThemeName[];
+  themes?: readonly ThemeName[];
   onPress?: (event: PressEvent) => void;
 };
 
@@ -52,6 +55,14 @@ export const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [
   { value: "dark", label: "Dark" },
 ];
 
+export const CAT_THEME_OPTIONS: readonly ThemeOption[] = [
+  { value: "tabby", label: "Tabby" },
+  { value: "ginger", label: "Ginger" },
+  { value: "tuxedo", label: "Tuxedo" },
+  { value: "calico", label: "Calico" },
+  { value: "torty", label: "Torty" },
+];
+
 const DEFAULT_STORAGE_KEY = "askr-theme";
 
 const ThemeContext = defineContext<ThemeContextValue>({
@@ -161,13 +172,13 @@ export function ThemeToggle(props: ThemeToggleProps): JSX.Element {
     lightIcon,
     darkIcon,
     systemIcon,
-    toggleThemes = ["light", "dark"],
+    themes = ["light", "dark"],
     onPress,
     ...rest
   } = props;
 
   const currentTheme = theme.theme();
-  const nextTheme = getNextTheme(currentTheme, toggleThemes);
+  const nextTheme = getNextTheme(currentTheme, themes);
   const renderContext = { theme: currentTheme, nextTheme };
   const ariaLabel = (rest as Record<string, unknown>)["aria-label"];
   const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {

package/src/controls.ts

@@ -0,0 +1,18 @@
+import "./themes/default/index.css";
+
+// Button stays in @askrjs/ui because it owns behavior, keyboard, and ARIA.
+export { Button } from "@askrjs/ui";
+export type {
+  ButtonAsChildProps,
+  ButtonNativeProps,
+  ButtonOwnProps,
+  ButtonProps,
+} from "@askrjs/ui";
+export { ButtonGroup } from "./components/button-group";
+export type * from "./components/button-group";
+export { Close } from "./components/close";
+export type * from "./components/close";
+export { Field, FieldError, FieldHint } from "./components/field";
+export type * from "./components/field";
+export { InputGroup, InputGroupText } from "./components/input-group";
+export type * from "./components/input-group";

package/src/feedback.ts

@@ -0,0 +1,6 @@
+import "./themes/default/index.css";
+
+export { EmptyState } from "./components/empty-state";
+export type * from "./components/empty-state";
+export { Spinner } from "./components/spinner";
+export type * from "./components/spinner";

package/src/layouts.ts

@@ -0,0 +1,19 @@
+import "./themes/default/index.css";
+
+export { AspectRatio } from "./components/aspect-ratio";
+export type * from "./components/aspect-ratio";
+export { Block } from "./components/block";
+export type * from "./components/block";
+export { Box } from "./components/box";
+export type * from "./components/box";
+export { Container } from "./components/container";
+export type * from "./components/container";
+export { Flex } from "./components/flex";
+export { Inline } from "./components/inline";
+export type * from "./components/inline";
+export { Section } from "./components/section";
+export type * from "./components/section";
+export { Spacer } from "./components/spacer";
+export type * from "./components/spacer";
+export { Stack } from "./components/stack";
+export type * from "./components/stack";

package/src/navs.ts

@@ -0,0 +1,26 @@
+import "./themes/default/index.css";
+
+export {
+  Breadcrumb,
+  BreadcrumbCurrent,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from "./components/breadcrumb";
+export { BREADCRUMB_A11Y_CONTRACT } from "./components/breadcrumb";
+export type * from "./components/breadcrumb";
+export { Nav, NavItem, NavLink } from "./components/nav";
+export type * from "./components/nav";
+export { NavBrand, Navbar, NavGroup, NavToggle } from "./components/navbar";
+export type * from "./components/navbar";
+export type * from "./components/shell/shell-nav.types";
+export { Sidebar, SidebarPanel } from "./components/sidebar";
+export type * from "./components/sidebar";
+export {
+  Pagination,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+} from "./components/pagination";
+export type * from "./components/pagination";

package/src/overlays.ts

@@ -0,0 +1,90 @@
+import "./themes/default/index.css";
+
+export {
+  DROPDOWN_A11Y_CONTRACT,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownLabel,
+  DropdownPortal,
+  DropdownSeparator,
+  DropdownTrigger,
+  MENU_A11Y_CONTRACT,
+  MENUBAR_A11Y_CONTRACT,
+  Menu,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuSeparator,
+  Menubar,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@askrjs/ui";
+export { DropdownContent } from "./components/overlays/dropdown-content";
+export type {
+  DropdownA11yContract,
+  DropdownContentAsChildProps,
+  DropdownContentOwnProps,
+  DropdownContentProps,
+  DropdownGroupAsChildProps,
+  DropdownGroupProps,
+  DropdownItemAsChildProps,
+  DropdownItemOwnProps,
+  DropdownItemProps,
+  DropdownLabelAsChildProps,
+  DropdownLabelProps,
+  DropdownOwnProps,
+  DropdownPortalProps,
+  DropdownProps,
+  DropdownSeparatorAsChildProps,
+  DropdownSeparatorProps,
+  DropdownTriggerAsChildProps,
+  DropdownTriggerProps,
+  MenuA11yContract,
+  MenuContentAsChildProps,
+  MenuContentProps,
+  MenuGroupAsChildProps,
+  MenuGroupProps,
+  MenuItemAsChildProps,
+  MenuItemOwnProps,
+  MenuItemProps,
+  MenuLabelAsChildProps,
+  MenuLabelProps,
+  MenuOwnProps,
+  MenuProps,
+  MenuSeparatorAsChildProps,
+  MenuSeparatorProps,
+  MenubarA11yContract,
+  MenubarContentAsChildProps,
+  MenubarContentOwnProps,
+  MenubarContentProps,
+  MenubarGroupAsChildProps,
+  MenubarGroupProps,
+  MenubarItemAsChildProps,
+  MenubarItemProps,
+  MenubarLabelAsChildProps,
+  MenubarLabelProps,
+  MenubarMenuProps,
+  MenubarOwnProps,
+  MenubarPortalProps,
+  MenubarProps,
+  MenubarSeparatorAsChildProps,
+  MenubarSeparatorProps,
+  MenubarSubContentAsChildProps,
+  MenubarSubContentProps,
+  MenubarSubProps,
+  MenubarSubTriggerAsChildProps,
+  MenubarSubTriggerProps,
+  MenubarTriggerAsChildProps,
+  MenubarTriggerProps,
+} from "@askrjs/ui";