jvetrau-ds 0.2.48 → 0.2.49

package/components/course-outline/course-outline.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('./course-outline.css');
@@ -29,6 +31,41 @@ function getItemTitle(item) {
   }
   return hasContent(item.link) ? item.link : item.title;
 }
+function getItemClasses(item) {
+  return classnames.classnames(
+    "course-outline__item",
+    "",
+    {
+      "course-outline__item--active": Boolean(
+        item.active
+      ),
+      "course-outline__item--disabled": Boolean(
+        item.disabled
+      )
+    }
+  );
+}
+const CourseOutlineItem = ({ item }) => {
+  const hasMeta = hasContent(item.meta);
+  const hasStatus = hasContent(item.status);
+  const hasAction = hasContent(item.action);
+  const hasFooter = hasStatus || hasAction;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      className: "course-outline__item-body",
+      "aria-disabled": item.disabled ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "course-outline__title", children: getItemTitle(item) }),
+        hasMeta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "course-outline__meta", children: item.meta }),
+        hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "course-outline__footer", children: [
+          hasStatus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "course-outline__status", children: item.status }),
+          hasAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "course-outline__action", children: item.action })
+        ] })
+      ]
+    }
+  );
+};
 const GroupTitle = ({
   level,
   children
@@ -139,46 +176,21 @@ const CourseOutline = ({
                   className: "course-outline__items",
                   id: groupContentId,
                   hidden: isCollapsed,
-                  children: group.items.map((item) => {
-                    const hasMeta = hasContent(item.meta);
-                    const hasStatus = hasContent(
-                      item.status
-                    );
-                    const hasAction = hasContent(
-                      item.action
-                    );
-                    const hasFooter = hasStatus || hasAction;
-                    const itemClasses = classnames.classnames(
-                      "course-outline__item",
-                      "",
-                      {
-                        "course-outline__item--active": Boolean(item.active),
-                        "course-outline__item--disabled": Boolean(item.disabled)
-                      }
-                    );
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      "li",
-                      {
-                        className: itemClasses,
-                        children: /* @__PURE__ */ jsxRuntime.jsxs(
-                          "article",
-                          {
-                            className: "course-outline__item-body",
-                            "aria-disabled": item.disabled ? "true" : void 0,
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "course-outline__title", children: getItemTitle(item) }),
-                              hasMeta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "course-outline__meta", children: item.meta }),
-                              hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "course-outline__footer", children: [
-                                hasStatus && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "course-outline__status", children: item.status }),
-                                hasAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "course-outline__action", children: item.action })
-                              ] })
-                            ]
-                          }
-                        )
-                      },
-                      item.id
-                    );
-                  })
+                  children: group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "li",
+                    {
+                      className: getItemClasses(
+                        item
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        CourseOutlineItem,
+                        {
+                          item
+                        }
+                      )
+                    },
+                    item.id
+                  ))
                 }
               )
             ]
@@ -191,6 +203,7 @@ const CourseOutline = ({
 };
 var course_outline_default = CourseOutline;
 
-module.exports = course_outline_default;
+exports.CourseOutlineItem = CourseOutlineItem;
+exports.default = course_outline_default;
 //# sourceMappingURL=course-outline.cjs.map
 //# sourceMappingURL=course-outline.cjs.map

package/components/course-outline/course-outline.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/course-outline/course-outline.tsx"],"names":["jsx","React","classnames","jsxs"],"mappings":"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","file":"course-outline.cjs","sourcesContent":["import React from 'react';\n\nimport './course-outline.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type CourseOutlineHeadingLevel =\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6;\n\nexport interface CourseOutlineItem {\n  id: React.Key;\n  title: React.ReactNode;\n  link?: React.ReactNode;\n  meta?: React.ReactNode;\n  status?: React.ReactNode;\n  action?: React.ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CourseOutlineGroup {\n  id: React.Key;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  items: CourseOutlineItem[];\n  defaultCollapsed?: boolean;\n}\n\nexport interface CourseOutlineProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  groups: CourseOutlineGroup[];\n  headingLevel?: CourseOutlineHeadingLevel;\n  collapsible?: boolean;\n}\n\ntype CollapsedGroups = Map<React.Key, boolean>;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction getInitialCollapsedGroups(\n  groups: CourseOutlineGroup[],\n): CollapsedGroups {\n  return new Map(\n    groups.map((group) => [\n      group.id,\n      Boolean(group.defaultCollapsed),\n    ]),\n  );\n}\n\nfunction getGroupCollapsed(\n  collapsedGroups: CollapsedGroups,\n  group: CourseOutlineGroup,\n) {\n  return (\n    collapsedGroups.get(group.id) ??\n    Boolean(group.defaultCollapsed)\n  );\n}\n\nfunction getItemTitle(\n  item: CourseOutlineItem,\n): React.ReactNode {\n  if (item.active) {\n    return item.title;\n  }\n\n  return hasContent(item.link)\n    ? item.link\n    : item.title;\n}\n\ninterface GroupTitleProps {\n  level?: CourseOutlineHeadingLevel;\n  children: React.ReactNode;\n}\n\nconst GroupTitle: React.FC<GroupTitleProps> = ({\n  level,\n  children,\n}) => {\n  if (!level) {\n    return (\n      <div className=\"course-outline__group-title\">\n        {children}\n      </div>\n    );\n  }\n\n  switch (level) {\n    case 2:\n      return (\n        <h2 className=\"course-outline__group-title\">\n          {children}\n        </h2>\n      );\n\n    case 3:\n      return (\n        <h3 className=\"course-outline__group-title\">\n          {children}\n        </h3>\n      );\n\n    case 4:\n      return (\n        <h4 className=\"course-outline__group-title\">\n          {children}\n        </h4>\n      );\n\n    case 5:\n      return (\n        <h5 className=\"course-outline__group-title\">\n          {children}\n        </h5>\n      );\n\n    default:\n      return (\n        <h6 className=\"course-outline__group-title\">\n          {children}\n        </h6>\n      );\n  }\n};\n\nconst CourseOutline: React.FC<CourseOutlineProps> = ({\n  groups,\n  headingLevel,\n  collapsible = false,\n  className = '',\n  ...props\n}) => {\n  const visibleGroups = React.useMemo(\n    () =>\n      groups.filter(\n        (group) => group.items.length > 0,\n      ),\n    [groups],\n  );\n\n  const [collapsedGroups, setCollapsedGroups] =\n    React.useState<CollapsedGroups>(() =>\n      getInitialCollapsedGroups(visibleGroups),\n    );\n\n  const componentId = React.useId();\n\n  React.useEffect(() => {\n    if (!collapsible) {\n      return;\n    }\n\n    setCollapsedGroups((current) => {\n      const next = new Map(current);\n      let changed = false;\n\n      for (const group of visibleGroups) {\n        if (!next.has(group.id)) {\n          next.set(\n            group.id,\n            Boolean(group.defaultCollapsed),\n          );\n\n          changed = true;\n        }\n      }\n\n      return changed ? next : current;\n    });\n  }, [collapsible, visibleGroups]);\n\n  if (visibleGroups.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'course-outline',\n    className,\n    {\n      'course-outline--collapsible': collapsible,\n    },\n  );\n\n  const toggleGroup = (\n    group: CourseOutlineGroup,\n  ) => {\n    setCollapsedGroups((current) => {\n      const next = new Map(current);\n\n      next.set(\n        group.id,\n        !getGroupCollapsed(current, group),\n      );\n\n      return next;\n    });\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ol className=\"course-outline__groups\">\n        {visibleGroups.map((group, groupIndex) => {\n          const isCollapsed =\n            collapsible &&\n            getGroupCollapsed(\n              collapsedGroups,\n              group,\n            );\n\n          const groupContentId =\n            `${componentId}-group-${groupIndex}`;\n\n          return (\n            <li\n              key={group.id}\n              className=\"course-outline__group\"\n            >\n              <header className=\"course-outline__group-header\">\n                <GroupTitle level={headingLevel}>\n                  {collapsible ? (\n                    <button\n                      className=\"course-outline__group-toggle\"\n                      type=\"button\"\n                      aria-expanded={!isCollapsed}\n                      aria-controls={groupContentId}\n                      onClick={() => toggleGroup(group)}\n                    >\n                      {group.title}\n                    </button>\n                  ) : (\n                    group.title\n                  )}\n                </GroupTitle>\n              </header>\n\n              {hasContent(group.description) && (\n                <div className=\"course-outline__group-description\">\n                  {group.description}\n                </div>\n              )}\n\n              <ol\n                className=\"course-outline__items\"\n                id={groupContentId}\n                hidden={isCollapsed}\n              >\n                {group.items.map((item) => {\n                  const hasMeta = hasContent(item.meta);\n                  const hasStatus = hasContent(\n                    item.status,\n                  );\n                  const hasAction = hasContent(\n                    item.action,\n                  );\n\n                  const hasFooter =\n                    hasStatus || hasAction;\n\n                  const itemClasses = classnames(\n                    'course-outline__item',\n                    '',\n                    {\n                      'course-outline__item--active':\n                        Boolean(item.active),\n\n                      'course-outline__item--disabled':\n                        Boolean(item.disabled),\n                    },\n                  );\n\n                  return (\n                    <li\n                      key={item.id}\n                      className={itemClasses}\n                    >\n                      <article\n                        className=\"course-outline__item-body\"\n                        aria-disabled={\n                          item.disabled\n                            ? 'true'\n                            : undefined\n                        }\n                      >\n                        <div className=\"course-outline__title\">\n                          {getItemTitle(item)}\n                        </div>\n\n                        {hasMeta && (\n                          <div className=\"course-outline__meta\">\n                            {item.meta}\n                          </div>\n                        )}\n\n                        {hasFooter && (\n                          <div className=\"course-outline__footer\">\n                            {hasStatus && (\n                              <div className=\"course-outline__status\">\n                                {item.status}\n                              </div>\n                            )}\n\n                            {hasAction && (\n                              <div className=\"course-outline__action\">\n                                {item.action}\n                              </div>\n                            )}\n                          </div>\n                        )}\n                      </article>\n                    </li>\n                  );\n                })}\n              </ol>\n            </li>\n          );\n        })}\n      </ol>\n    </div>\n  );\n};\n\nexport default CourseOutline;\n"]}
+{"version":3,"sources":["../../../src/components/course-outline/course-outline.tsx"],"names":["classnames","jsxs","jsx","React"],"mappings":"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","file":"course-outline.cjs","sourcesContent":["import React from 'react';\n\nimport './course-outline.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type CourseOutlineHeadingLevel =\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6;\n\nexport interface CourseOutlineItem {\n  id: React.Key;\n  title: React.ReactNode;\n  link?: React.ReactNode;\n  meta?: React.ReactNode;\n  status?: React.ReactNode;\n  action?: React.ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CourseOutlineItemProps {\n  item: CourseOutlineItem;\n}\n\nexport interface CourseOutlineGroup {\n  id: React.Key;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  items: CourseOutlineItem[];\n  defaultCollapsed?: boolean;\n}\n\nexport interface CourseOutlineProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  groups: CourseOutlineGroup[];\n  headingLevel?: CourseOutlineHeadingLevel;\n  collapsible?: boolean;\n}\n\ntype CollapsedGroups = Map<React.Key, boolean>;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction getInitialCollapsedGroups(\n  groups: CourseOutlineGroup[],\n): CollapsedGroups {\n  return new Map(\n    groups.map((group) => [\n      group.id,\n      Boolean(group.defaultCollapsed),\n    ]),\n  );\n}\n\nfunction getGroupCollapsed(\n  collapsedGroups: CollapsedGroups,\n  group: CourseOutlineGroup,\n) {\n  return (\n    collapsedGroups.get(group.id) ??\n    Boolean(group.defaultCollapsed)\n  );\n}\n\nfunction getItemTitle(\n  item: CourseOutlineItem,\n): React.ReactNode {\n  if (item.active) {\n    return item.title;\n  }\n\n  return hasContent(item.link)\n    ? item.link\n    : item.title;\n}\n\nfunction getItemClasses(\n  item: CourseOutlineItem,\n) {\n  return classnames(\n    'course-outline__item',\n    '',\n    {\n      'course-outline__item--active': Boolean(\n        item.active,\n      ),\n\n      'course-outline__item--disabled': Boolean(\n        item.disabled,\n      ),\n    },\n  );\n}\n\nexport const CourseOutlineItem: React.FC<\n  CourseOutlineItemProps\n> = ({ item }) => {\n  const hasMeta = hasContent(item.meta);\n  const hasStatus = hasContent(item.status);\n  const hasAction = hasContent(item.action);\n  const hasFooter = hasStatus || hasAction;\n\n  return (\n    <article\n      className=\"course-outline__item-body\"\n      aria-disabled={\n        item.disabled ? 'true' : undefined\n      }\n    >\n      <div className=\"course-outline__title\">\n        {getItemTitle(item)}\n      </div>\n\n      {hasMeta && (\n        <div className=\"course-outline__meta\">\n          {item.meta}\n        </div>\n      )}\n\n      {hasFooter && (\n        <div className=\"course-outline__footer\">\n          {hasStatus && (\n            <div className=\"course-outline__status\">\n              {item.status}\n            </div>\n          )}\n\n          {hasAction && (\n            <div className=\"course-outline__action\">\n              {item.action}\n            </div>\n          )}\n        </div>\n      )}\n    </article>\n  );\n};\n\ninterface GroupTitleProps {\n  level?: CourseOutlineHeadingLevel;\n  children: React.ReactNode;\n}\n\nconst GroupTitle: React.FC<GroupTitleProps> = ({\n  level,\n  children,\n}) => {\n  if (!level) {\n    return (\n      <div className=\"course-outline__group-title\">\n        {children}\n      </div>\n    );\n  }\n\n  switch (level) {\n    case 2:\n      return (\n        <h2 className=\"course-outline__group-title\">\n          {children}\n        </h2>\n      );\n\n    case 3:\n      return (\n        <h3 className=\"course-outline__group-title\">\n          {children}\n        </h3>\n      );\n\n    case 4:\n      return (\n        <h4 className=\"course-outline__group-title\">\n          {children}\n        </h4>\n      );\n\n    case 5:\n      return (\n        <h5 className=\"course-outline__group-title\">\n          {children}\n        </h5>\n      );\n\n    default:\n      return (\n        <h6 className=\"course-outline__group-title\">\n          {children}\n        </h6>\n      );\n  }\n};\n\nconst CourseOutline: React.FC<CourseOutlineProps> = ({\n  groups,\n  headingLevel,\n  collapsible = false,\n  className = '',\n  ...props\n}) => {\n  const visibleGroups = React.useMemo(\n    () =>\n      groups.filter(\n        (group) => group.items.length > 0,\n      ),\n    [groups],\n  );\n\n  const [collapsedGroups, setCollapsedGroups] =\n    React.useState<CollapsedGroups>(() =>\n      getInitialCollapsedGroups(visibleGroups),\n    );\n\n  const componentId = React.useId();\n\n  React.useEffect(() => {\n    if (!collapsible) {\n      return;\n    }\n\n    setCollapsedGroups((current) => {\n      const next = new Map(current);\n      let changed = false;\n\n      for (const group of visibleGroups) {\n        if (!next.has(group.id)) {\n          next.set(\n            group.id,\n            Boolean(group.defaultCollapsed),\n          );\n\n          changed = true;\n        }\n      }\n\n      return changed ? next : current;\n    });\n  }, [collapsible, visibleGroups]);\n\n  if (visibleGroups.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'course-outline',\n    className,\n    {\n      'course-outline--collapsible': collapsible,\n    },\n  );\n\n  const toggleGroup = (\n    group: CourseOutlineGroup,\n  ) => {\n    setCollapsedGroups((current) => {\n      const next = new Map(current);\n\n      next.set(\n        group.id,\n        !getGroupCollapsed(current, group),\n      );\n\n      return next;\n    });\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ol className=\"course-outline__groups\">\n        {visibleGroups.map((group, groupIndex) => {\n          const isCollapsed =\n            collapsible &&\n            getGroupCollapsed(\n              collapsedGroups,\n              group,\n            );\n\n          const groupContentId =\n            `${componentId}-group-${groupIndex}`;\n\n          return (\n            <li\n              key={group.id}\n              className=\"course-outline__group\"\n            >\n              <header className=\"course-outline__group-header\">\n                <GroupTitle level={headingLevel}>\n                  {collapsible ? (\n                    <button\n                      className=\"course-outline__group-toggle\"\n                      type=\"button\"\n                      aria-expanded={!isCollapsed}\n                      aria-controls={groupContentId}\n                      onClick={() => toggleGroup(group)}\n                    >\n                      {group.title}\n                    </button>\n                  ) : (\n                    group.title\n                  )}\n                </GroupTitle>\n              </header>\n\n              {hasContent(group.description) && (\n                <div className=\"course-outline__group-description\">\n                  {group.description}\n                </div>\n              )}\n\n              <ol\n                className=\"course-outline__items\"\n                id={groupContentId}\n                hidden={isCollapsed}\n              >\n                {group.items.map((item) => (\n                  <li\n                    key={item.id}\n                    className={getItemClasses(\n                      item,\n                    )}\n                  >\n                    <CourseOutlineItem\n                      item={item}\n                    />\n                  </li>\n                ))}\n              </ol>\n            </li>\n          );\n        })}\n      </ol>\n    </div>\n  );\n};\n\nexport default CourseOutline;\n"]}

package/components/course-outline/course-outline.css

@@ -77,6 +77,23 @@
 .layout-sidebar__side .course-outline {
   /* color */
 
+  /* typography */
+
+  /* size */
+  --course-outline-group-gap:
+    var(--margin-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__side
+  .course-outline__item-body {
+  /* color */
+
   /* typography */
   --course-outline-item-title-font-family:
     var(--font-body-family);
@@ -90,8 +107,6 @@
     var(--font-body-letter-spacing);
 
   /* size */
-  --course-outline-group-gap:
-    var(--margin-item);
 
   /* border */
 
@@ -102,7 +117,7 @@
 
 .layout-sidebar__side
   .course-outline__action,
-.layout-sidebar__side 
+.layout-sidebar__side
   .course-outline__meta {
   /* color */
 
@@ -409,10 +424,48 @@ h4.course-outline__group-title {
 
 .course-outline__item-body {
   /* color */
+  --course-outline-meta-color: var(--color-text-note);
 
   /* typography */
+  --course-outline-item-title-font-family:
+    var(--font-lead-family);
+  --course-outline-item-title-font-size:
+    var(--font-lead);
+  --course-outline-item-title-font-weight:
+    var(--font-lead-weight);
+  --course-outline-item-title-line-height:
+    var(--font-lead-line);
+  --course-outline-item-title-letter-spacing:
+    var(--font-lead-letter-spacing);
+
+  --course-outline-body-font-family:
+    var(--font-body-family);
+  --course-outline-body-font-size:
+    var(--font-body);
+  --course-outline-body-font-weight:
+    var(--font-body-weight);
+  --course-outline-body-line-height:
+    var(--font-body-line);
+  --course-outline-body-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  --course-outline-note-font-family:
+    var(--font-body-family);
+  --course-outline-note-font-size:
+    var(--font-note);
+  --course-outline-note-font-weight:
+    var(--font-note-weight);
+  --course-outline-note-line-height:
+    var(--font-note-line);
+  --course-outline-note-letter-spacing:
+    var(--font-note-letter-spacing);
 
   /* size */
+  --course-outline-item-content-gap:
+    var(--margin-descriptor);
+  --course-outline-details-gap:
+    var(--font-body-margin);
+
   display: flex;
   flex-direction: column;
   align-items: flex-start;

package/components/course-outline/course-outline.d.ts

@@ -11,6 +11,9 @@ export interface CourseOutlineItem {
     active?: boolean;
     disabled?: boolean;
 }
+export interface CourseOutlineItemProps {
+    item: CourseOutlineItem;
+}
 export interface CourseOutlineGroup {
     id: React.Key;
     title: React.ReactNode;
@@ -23,5 +26,6 @@ export interface CourseOutlineProps extends Omit<React.HTMLAttributes<HTMLDivEle
     headingLevel?: CourseOutlineHeadingLevel;
     collapsible?: boolean;
 }
+export declare const CourseOutlineItem: React.FC<CourseOutlineItemProps>;
 declare const CourseOutline: React.FC<CourseOutlineProps>;
 export default CourseOutline;

package/components/course-outline/course-outline.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import './course-outline.css';
 import { classnames } from '../helpers/classnames';
@@ -23,6 +23,41 @@ function getItemTitle(item) {
   }
   return hasContent(item.link) ? item.link : item.title;
 }
+function getItemClasses(item) {
+  return classnames(
+    "course-outline__item",
+    "",
+    {
+      "course-outline__item--active": Boolean(
+        item.active
+      ),
+      "course-outline__item--disabled": Boolean(
+        item.disabled
+      )
+    }
+  );
+}
+const CourseOutlineItem = ({ item }) => {
+  const hasMeta = hasContent(item.meta);
+  const hasStatus = hasContent(item.status);
+  const hasAction = hasContent(item.action);
+  const hasFooter = hasStatus || hasAction;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: "course-outline__item-body",
+      "aria-disabled": item.disabled ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "course-outline__title", children: getItemTitle(item) }),
+        hasMeta && /* @__PURE__ */ jsx("div", { className: "course-outline__meta", children: item.meta }),
+        hasFooter && /* @__PURE__ */ jsxs("div", { className: "course-outline__footer", children: [
+          hasStatus && /* @__PURE__ */ jsx("div", { className: "course-outline__status", children: item.status }),
+          hasAction && /* @__PURE__ */ jsx("div", { className: "course-outline__action", children: item.action })
+        ] })
+      ]
+    }
+  );
+};
 const GroupTitle = ({
   level,
   children
@@ -133,46 +168,21 @@ const CourseOutline = ({
                   className: "course-outline__items",
                   id: groupContentId,
                   hidden: isCollapsed,
-                  children: group.items.map((item) => {
-                    const hasMeta = hasContent(item.meta);
-                    const hasStatus = hasContent(
-                      item.status
-                    );
-                    const hasAction = hasContent(
-                      item.action
-                    );
-                    const hasFooter = hasStatus || hasAction;
-                    const itemClasses = classnames(
-                      "course-outline__item",
-                      "",
-                      {
-                        "course-outline__item--active": Boolean(item.active),
-                        "course-outline__item--disabled": Boolean(item.disabled)
-                      }
-                    );
-                    return /* @__PURE__ */ jsx(
-                      "li",
-                      {
-                        className: itemClasses,
-                        children: /* @__PURE__ */ jsxs(
-                          "article",
-                          {
-                            className: "course-outline__item-body",
-                            "aria-disabled": item.disabled ? "true" : void 0,
-                            children: [
-                              /* @__PURE__ */ jsx("div", { className: "course-outline__title", children: getItemTitle(item) }),
-                              hasMeta && /* @__PURE__ */ jsx("div", { className: "course-outline__meta", children: item.meta }),
-                              hasFooter && /* @__PURE__ */ jsxs("div", { className: "course-outline__footer", children: [
-                                hasStatus && /* @__PURE__ */ jsx("div", { className: "course-outline__status", children: item.status }),
-                                hasAction && /* @__PURE__ */ jsx("div", { className: "course-outline__action", children: item.action })
-                              ] })
-                            ]
-                          }
-                        )
-                      },
-                      item.id
-                    );
-                  })
+                  children: group.items.map((item) => /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      className: getItemClasses(
+                        item
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        CourseOutlineItem,
+                        {
+                          item
+                        }
+                      )
+                    },
+                    item.id
+                  ))
                 }
               )
             ]
@@ -185,6 +195,6 @@ const CourseOutline = ({
 };
 var course_outline_default = CourseOutline;
 
-export { course_outline_default as default };
+export { CourseOutlineItem, course_outline_default as default };
 //# sourceMappingURL=course-outline.js.map
 //# sourceMappingURL=course-outline.js.map

package/components/course-outline/course-outline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/course-outline/course-outline.tsx"],"names":[],"mappings":";;;;;AA2CA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OAAO,KAAA,KAAU,QAAQ,KAAA,KAAU,MAAA;AACrC;AAEA,SAAS,0BACP,MAAA,EACiB;AACjB,EAAA,OAAO,IAAI,GAAA;AAAA,IACT,MAAA,CAAO,GAAA,CAAI,CAAC,KAAA,KAAU;AAAA,MACpB,KAAA,CAAM,EAAA;AAAA,MACN,OAAA,CAAQ,MAAM,gBAAgB;AAAA,KAC/B;AAAA,GACH;AACF;AAEA,SAAS,iBAAA,CACP,iBACA,KAAA,EACA;AACA,EAAA,OACE,gBAAgB,GAAA,CAAI,KAAA,CAAM,EAAE,CAAA,IAC5B,OAAA,CAAQ,MAAM,gBAAgB,CAAA;AAElC;AAEA,SAAS,aACP,IAAA,EACiB;AACjB,EAAA,IAAI,KAAK,MAAA,EAAQ;AACf,IAAA,OAAO,IAAA,CAAK,KAAA;AAAA,EACd;AAEA,EAAA,OAAO,WAAW,IAAA,CAAK,IAAI,CAAA,GACvB,IAAA,CAAK,OACL,IAAA,CAAK,KAAA;AACX;AAOA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EACZ,QAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,CAAA;AACH,MAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6BAAA,EACX,QAAA,EACH,CAAA;AAAA,IAGJ,KAAK,CAAA;AACH,MAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6BAAA,EACX,QAAA,EACH,CAAA;AAAA,IAGJ,KAAK,CAAA;AACH,MAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6BAAA,EACX,QAAA,EACH,CAAA;AAAA,IAGJ,KAAK,CAAA;AACH,MAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6BAAA,EACX,QAAA,EACH,CAAA;AAAA,IAGJ;AACE,MAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,6BAAA,EACX,QAAA,EACH,CAAA;AAAA;AAGR,CAAA;AAEA,MAAM,gBAA8C,CAAC;AAAA,EACnD,MAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,gBAAgB,KAAA,CAAM,OAAA;AAAA,IAC1B,MACE,MAAA,CAAO,MAAA;AAAA,MACL,CAAC,KAAA,KAAU,KAAA,CAAM,KAAA,CAAM,MAAA,GAAS;AAAA,KAClC;AAAA,IACF,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GACxC,KAAA,CAAM,QAAA;AAAA,IAA0B,MAC9B,0BAA0B,aAAa;AAAA,GACzC;AAEF,EAAA,MAAM,WAAA,GAAc,MAAM,KAAA,EAAM;AAEhC,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,CAAC,WAAA,EAAa;AAChB,MAAA;AAAA,IACF;AAEA,IAAA,kBAAA,CAAmB,CAAC,OAAA,KAAY;AAC9B,MAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,OAAO,CAAA;AAC5B,MAAA,IAAI,OAAA,GAAU,KAAA;AAEd,MAAA,KAAA,MAAW,SAAS,aAAA,EAAe;AACjC,QAAA,IAAI,CAAC,IAAA,CAAK,GAAA,CAAI,KAAA,CAAM,EAAE,CAAA,EAAG;AACvB,UAAA,IAAA,CAAK,GAAA;AAAA,YACH,KAAA,CAAM,EAAA;AAAA,YACN,OAAA,CAAQ,MAAM,gBAAgB;AAAA,WAChC;AAEA,UAAA,OAAA,GAAU,IAAA;AAAA,QACZ;AAAA,MACF;AAEA,MAAA,OAAO,UAAU,IAAA,GAAO,OAAA;AAAA,IAC1B,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,WAAA,EAAa,aAAa,CAAC,CAAA;AAE/B,EAAA,IAAI,aAAA,CAAc,WAAW,CAAA,EAAG;AAC9B,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,gBAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,6BAAA,EAA+B;AAAA;AACjC,GACF;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KACG;AACH,IAAA,kBAAA,CAAmB,CAAC,OAAA,KAAY;AAC9B,MAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,OAAO,CAAA;AAE5B,MAAA,IAAA,CAAK,GAAA;AAAA,QACH,KAAA,CAAM,EAAA;AAAA,QACN,CAAC,iBAAA,CAAkB,OAAA,EAAS,KAAK;AAAA,OACnC;AAEA,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,QAAG,SAAA,EAAU,wBAAA,EACX,wBAAc,GAAA,CAAI,CAAC,OAAO,UAAA,KAAe;AACxC,QAAA,MAAM,cACJ,WAAA,IACA,iBAAA;AAAA,UACE,eAAA;AAAA,UACA;AAAA,SACF;AAEF,QAAA,MAAM,cAAA,GACJ,CAAA,EAAG,WAAW,CAAA,OAAA,EAAU,UAAU,CAAA,CAAA;AAEpC,QAAA,uBACE,IAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,uBAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,YAAO,SAAA,EAAU,8BAAA,EAChB,8BAAC,UAAA,EAAA,EAAW,KAAA,EAAO,cAChB,QAAA,EAAA,WAAA,mBACC,GAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,8BAAA;AAAA,kBACV,IAAA,EAAK,QAAA;AAAA,kBACL,iBAAe,CAAC,WAAA;AAAA,kBAChB,eAAA,EAAe,cAAA;AAAA,kBACf,OAAA,EAAS,MAAM,WAAA,CAAY,KAAK,CAAA;AAAA,kBAE/B,QAAA,EAAA,KAAA,CAAM;AAAA;AAAA,eACT,GAEA,KAAA,CAAM,KAAA,EAEV,CAAA,EACF,CAAA;AAAA,cAEC,UAAA,CAAW,MAAM,WAAW,CAAA,wBAC1B,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EACZ,QAAA,EAAA,KAAA,CAAM,WAAA,EACT,CAAA;AAAA,8BAGF,GAAA;AAAA,gBAAC,IAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,uBAAA;AAAA,kBACV,EAAA,EAAI,cAAA;AAAA,kBACJ,MAAA,EAAQ,WAAA;AAAA,kBAEP,QAAA,EAAA,KAAA,CAAM,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACzB,oBAAA,MAAM,OAAA,GAAU,UAAA,CAAW,IAAA,CAAK,IAAI,CAAA;AACpC,oBAAA,MAAM,SAAA,GAAY,UAAA;AAAA,sBAChB,IAAA,CAAK;AAAA,qBACP;AACA,oBAAA,MAAM,SAAA,GAAY,UAAA;AAAA,sBAChB,IAAA,CAAK;AAAA,qBACP;AAEA,oBAAA,MAAM,YACJ,SAAA,IAAa,SAAA;AAEf,oBAAA,MAAM,WAAA,GAAc,UAAA;AAAA,sBAClB,sBAAA;AAAA,sBACA,EAAA;AAAA,sBACA;AAAA,wBACE,8BAAA,EACE,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAA;AAAA,wBAErB,gCAAA,EACE,OAAA,CAAQ,IAAA,CAAK,QAAQ;AAAA;AACzB,qBACF;AAEA,oBAAA,uBACE,GAAA;AAAA,sBAAC,IAAA;AAAA,sBAAA;AAAA,wBAEC,SAAA,EAAW,WAAA;AAAA,wBAEX,QAAA,kBAAA,IAAA;AAAA,0BAAC,SAAA;AAAA,0BAAA;AAAA,4BACC,SAAA,EAAU,2BAAA;AAAA,4BACV,eAAA,EACE,IAAA,CAAK,QAAA,GACD,MAAA,GACA,MAAA;AAAA,4BAGN,QAAA,EAAA;AAAA,8CAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EACZ,QAAA,EAAA,YAAA,CAAa,IAAI,CAAA,EACpB,CAAA;AAAA,8BAEC,2BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EACZ,eAAK,IAAA,EACR,CAAA;AAAA,8BAGD,SAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACZ,QAAA,EAAA;AAAA,gCAAA,SAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACZ,eAAK,MAAA,EACR,CAAA;AAAA,gCAGD,6BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACZ,eAAK,MAAA,EACR;AAAA,+BAAA,EAEJ;AAAA;AAAA;AAAA;AAEJ,uBAAA;AAAA,sBApCK,IAAA,CAAK;AAAA,qBAqCZ;AAAA,kBAEJ,CAAC;AAAA;AAAA;AACH;AAAA,WAAA;AAAA,UAlGK,KAAA,CAAM;AAAA,SAmGb;AAAA,MAEJ,CAAC,CAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,sBAAA,GAAQ","file":"course-outline.js","sourcesContent":["import React from 'react';\n\nimport './course-outline.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type CourseOutlineHeadingLevel =\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6;\n\nexport interface CourseOutlineItem {\n  id: React.Key;\n  title: React.ReactNode;\n  link?: React.ReactNode;\n  meta?: React.ReactNode;\n  status?: React.ReactNode;\n  action?: React.ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CourseOutlineGroup {\n  id: React.Key;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  items: CourseOutlineItem[];\n  defaultCollapsed?: boolean;\n}\n\nexport interface CourseOutlineProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  groups: CourseOutlineGroup[];\n  headingLevel?: CourseOutlineHeadingLevel;\n  collapsible?: boolean;\n}\n\ntype CollapsedGroups = Map<React.Key, boolean>;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction getInitialCollapsedGroups(\n  groups: CourseOutlineGroup[],\n): CollapsedGroups {\n  return new Map(\n    groups.map((group) => [\n      group.id,\n      Boolean(group.defaultCollapsed),\n    ]),\n  );\n}\n\nfunction getGroupCollapsed(\n  collapsedGroups: CollapsedGroups,\n  group: CourseOutlineGroup,\n) {\n  return (\n    collapsedGroups.get(group.id) ??\n    Boolean(group.defaultCollapsed)\n  );\n}\n\nfunction getItemTitle(\n  item: CourseOutlineItem,\n): React.ReactNode {\n  if (item.active) {\n    return item.title;\n  }\n\n  return hasContent(item.link)\n    ? item.link\n    : item.title;\n}\n\ninterface GroupTitleProps {\n  level?: CourseOutlineHeadingLevel;\n  children: React.ReactNode;\n}\n\nconst GroupTitle: React.FC<GroupTitleProps> = ({\n  level,\n  children,\n}) => {\n  if (!level) {\n    return (\n      <div className=\"course-outline__group-title\">\n        {children}\n      </div>\n    );\n  }\n\n  switch (level) {\n    case 2:\n      return (\n        <h2 className=\"course-outline__group-title\">\n          {children}\n        </h2>\n      );\n\n    case 3:\n      return (\n        <h3 className=\"course-outline__group-title\">\n          {children}\n        </h3>\n      );\n\n    case 4:\n      return (\n        <h4 className=\"course-outline__group-title\">\n          {children}\n        </h4>\n      );\n\n    case 5:\n      return (\n        <h5 className=\"course-outline__group-title\">\n          {children}\n        </h5>\n      );\n\n    default:\n      return (\n        <h6 className=\"course-outline__group-title\">\n          {children}\n        </h6>\n      );\n  }\n};\n\nconst CourseOutline: React.FC<CourseOutlineProps> = ({\n  groups,\n  headingLevel,\n  collapsible = false,\n  className = '',\n  ...props\n}) => {\n  const visibleGroups = React.useMemo(\n    () =>\n      groups.filter(\n        (group) => group.items.length > 0,\n      ),\n    [groups],\n  );\n\n  const [collapsedGroups, setCollapsedGroups] =\n    React.useState<CollapsedGroups>(() =>\n      getInitialCollapsedGroups(visibleGroups),\n    );\n\n  const componentId = React.useId();\n\n  React.useEffect(() => {\n    if (!collapsible) {\n      return;\n    }\n\n    setCollapsedGroups((current) => {\n      const next = new Map(current);\n      let changed = false;\n\n      for (const group of visibleGroups) {\n        if (!next.has(group.id)) {\n          next.set(\n            group.id,\n            Boolean(group.defaultCollapsed),\n          );\n\n          changed = true;\n        }\n      }\n\n      return changed ? next : current;\n    });\n  }, [collapsible, visibleGroups]);\n\n  if (visibleGroups.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'course-outline',\n    className,\n    {\n      'course-outline--collapsible': collapsible,\n    },\n  );\n\n  const toggleGroup = (\n    group: CourseOutlineGroup,\n  ) => {\n    setCollapsedGroups((current) => {\n      const next = new Map(current);\n\n      next.set(\n        group.id,\n        !getGroupCollapsed(current, group),\n      );\n\n      return next;\n    });\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ol className=\"course-outline__groups\">\n        {visibleGroups.map((group, groupIndex) => {\n          const isCollapsed =\n            collapsible &&\n            getGroupCollapsed(\n              collapsedGroups,\n              group,\n            );\n\n          const groupContentId =\n            `${componentId}-group-${groupIndex}`;\n\n          return (\n            <li\n              key={group.id}\n              className=\"course-outline__group\"\n            >\n              <header className=\"course-outline__group-header\">\n                <GroupTitle level={headingLevel}>\n                  {collapsible ? (\n                    <button\n                      className=\"course-outline__group-toggle\"\n                      type=\"button\"\n                      aria-expanded={!isCollapsed}\n                      aria-controls={groupContentId}\n                      onClick={() => toggleGroup(group)}\n                    >\n                      {group.title}\n                    </button>\n                  ) : (\n                    group.title\n                  )}\n                </GroupTitle>\n              </header>\n\n              {hasContent(group.description) && (\n                <div className=\"course-outline__group-description\">\n                  {group.description}\n                </div>\n              )}\n\n              <ol\n                className=\"course-outline__items\"\n                id={groupContentId}\n                hidden={isCollapsed}\n              >\n                {group.items.map((item) => {\n                  const hasMeta = hasContent(item.meta);\n                  const hasStatus = hasContent(\n                    item.status,\n                  );\n                  const hasAction = hasContent(\n                    item.action,\n                  );\n\n                  const hasFooter =\n                    hasStatus || hasAction;\n\n                  const itemClasses = classnames(\n                    'course-outline__item',\n                    '',\n                    {\n                      'course-outline__item--active':\n                        Boolean(item.active),\n\n                      'course-outline__item--disabled':\n                        Boolean(item.disabled),\n                    },\n                  );\n\n                  return (\n                    <li\n                      key={item.id}\n                      className={itemClasses}\n                    >\n                      <article\n                        className=\"course-outline__item-body\"\n                        aria-disabled={\n                          item.disabled\n                            ? 'true'\n                            : undefined\n                        }\n                      >\n                        <div className=\"course-outline__title\">\n                          {getItemTitle(item)}\n                        </div>\n\n                        {hasMeta && (\n                          <div className=\"course-outline__meta\">\n                            {item.meta}\n                          </div>\n                        )}\n\n                        {hasFooter && (\n                          <div className=\"course-outline__footer\">\n                            {hasStatus && (\n                              <div className=\"course-outline__status\">\n                                {item.status}\n                              </div>\n                            )}\n\n                            {hasAction && (\n                              <div className=\"course-outline__action\">\n                                {item.action}\n                              </div>\n                            )}\n                          </div>\n                        )}\n                      </article>\n                    </li>\n                  );\n                })}\n              </ol>\n            </li>\n          );\n        })}\n      </ol>\n    </div>\n  );\n};\n\nexport default CourseOutline;\n"]}
+{"version":3,"sources":["../../../src/components/course-outline/course-outline.tsx"],"names":[],"mappings":"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","file":"course-outline.js","sourcesContent":["import React from 'react';\n\nimport './course-outline.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type CourseOutlineHeadingLevel =\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6;\n\nexport interface CourseOutlineItem {\n  id: React.Key;\n  title: React.ReactNode;\n  link?: React.ReactNode;\n  meta?: React.ReactNode;\n  status?: React.ReactNode;\n  action?: React.ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n}\n\nexport interface CourseOutlineItemProps {\n  item: CourseOutlineItem;\n}\n\nexport interface CourseOutlineGroup {\n  id: React.Key;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  items: CourseOutlineItem[];\n  defaultCollapsed?: boolean;\n}\n\nexport interface CourseOutlineProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  groups: CourseOutlineGroup[];\n  headingLevel?: CourseOutlineHeadingLevel;\n  collapsible?: boolean;\n}\n\ntype CollapsedGroups = Map<React.Key, boolean>;\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return value !== null && value !== undefined;\n}\n\nfunction getInitialCollapsedGroups(\n  groups: CourseOutlineGroup[],\n): CollapsedGroups {\n  return new Map(\n    groups.map((group) => [\n      group.id,\n      Boolean(group.defaultCollapsed),\n    ]),\n  );\n}\n\nfunction getGroupCollapsed(\n  collapsedGroups: CollapsedGroups,\n  group: CourseOutlineGroup,\n) {\n  return (\n    collapsedGroups.get(group.id) ??\n    Boolean(group.defaultCollapsed)\n  );\n}\n\nfunction getItemTitle(\n  item: CourseOutlineItem,\n): React.ReactNode {\n  if (item.active) {\n    return item.title;\n  }\n\n  return hasContent(item.link)\n    ? item.link\n    : item.title;\n}\n\nfunction getItemClasses(\n  item: CourseOutlineItem,\n) {\n  return classnames(\n    'course-outline__item',\n    '',\n    {\n      'course-outline__item--active': Boolean(\n        item.active,\n      ),\n\n      'course-outline__item--disabled': Boolean(\n        item.disabled,\n      ),\n    },\n  );\n}\n\nexport const CourseOutlineItem: React.FC<\n  CourseOutlineItemProps\n> = ({ item }) => {\n  const hasMeta = hasContent(item.meta);\n  const hasStatus = hasContent(item.status);\n  const hasAction = hasContent(item.action);\n  const hasFooter = hasStatus || hasAction;\n\n  return (\n    <article\n      className=\"course-outline__item-body\"\n      aria-disabled={\n        item.disabled ? 'true' : undefined\n      }\n    >\n      <div className=\"course-outline__title\">\n        {getItemTitle(item)}\n      </div>\n\n      {hasMeta && (\n        <div className=\"course-outline__meta\">\n          {item.meta}\n        </div>\n      )}\n\n      {hasFooter && (\n        <div className=\"course-outline__footer\">\n          {hasStatus && (\n            <div className=\"course-outline__status\">\n              {item.status}\n            </div>\n          )}\n\n          {hasAction && (\n            <div className=\"course-outline__action\">\n              {item.action}\n            </div>\n          )}\n        </div>\n      )}\n    </article>\n  );\n};\n\ninterface GroupTitleProps {\n  level?: CourseOutlineHeadingLevel;\n  children: React.ReactNode;\n}\n\nconst GroupTitle: React.FC<GroupTitleProps> = ({\n  level,\n  children,\n}) => {\n  if (!level) {\n    return (\n      <div className=\"course-outline__group-title\">\n        {children}\n      </div>\n    );\n  }\n\n  switch (level) {\n    case 2:\n      return (\n        <h2 className=\"course-outline__group-title\">\n          {children}\n        </h2>\n      );\n\n    case 3:\n      return (\n        <h3 className=\"course-outline__group-title\">\n          {children}\n        </h3>\n      );\n\n    case 4:\n      return (\n        <h4 className=\"course-outline__group-title\">\n          {children}\n        </h4>\n      );\n\n    case 5:\n      return (\n        <h5 className=\"course-outline__group-title\">\n          {children}\n        </h5>\n      );\n\n    default:\n      return (\n        <h6 className=\"course-outline__group-title\">\n          {children}\n        </h6>\n      );\n  }\n};\n\nconst CourseOutline: React.FC<CourseOutlineProps> = ({\n  groups,\n  headingLevel,\n  collapsible = false,\n  className = '',\n  ...props\n}) => {\n  const visibleGroups = React.useMemo(\n    () =>\n      groups.filter(\n        (group) => group.items.length > 0,\n      ),\n    [groups],\n  );\n\n  const [collapsedGroups, setCollapsedGroups] =\n    React.useState<CollapsedGroups>(() =>\n      getInitialCollapsedGroups(visibleGroups),\n    );\n\n  const componentId = React.useId();\n\n  React.useEffect(() => {\n    if (!collapsible) {\n      return;\n    }\n\n    setCollapsedGroups((current) => {\n      const next = new Map(current);\n      let changed = false;\n\n      for (const group of visibleGroups) {\n        if (!next.has(group.id)) {\n          next.set(\n            group.id,\n            Boolean(group.defaultCollapsed),\n          );\n\n          changed = true;\n        }\n      }\n\n      return changed ? next : current;\n    });\n  }, [collapsible, visibleGroups]);\n\n  if (visibleGroups.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'course-outline',\n    className,\n    {\n      'course-outline--collapsible': collapsible,\n    },\n  );\n\n  const toggleGroup = (\n    group: CourseOutlineGroup,\n  ) => {\n    setCollapsedGroups((current) => {\n      const next = new Map(current);\n\n      next.set(\n        group.id,\n        !getGroupCollapsed(current, group),\n      );\n\n      return next;\n    });\n  };\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ol className=\"course-outline__groups\">\n        {visibleGroups.map((group, groupIndex) => {\n          const isCollapsed =\n            collapsible &&\n            getGroupCollapsed(\n              collapsedGroups,\n              group,\n            );\n\n          const groupContentId =\n            `${componentId}-group-${groupIndex}`;\n\n          return (\n            <li\n              key={group.id}\n              className=\"course-outline__group\"\n            >\n              <header className=\"course-outline__group-header\">\n                <GroupTitle level={headingLevel}>\n                  {collapsible ? (\n                    <button\n                      className=\"course-outline__group-toggle\"\n                      type=\"button\"\n                      aria-expanded={!isCollapsed}\n                      aria-controls={groupContentId}\n                      onClick={() => toggleGroup(group)}\n                    >\n                      {group.title}\n                    </button>\n                  ) : (\n                    group.title\n                  )}\n                </GroupTitle>\n              </header>\n\n              {hasContent(group.description) && (\n                <div className=\"course-outline__group-description\">\n                  {group.description}\n                </div>\n              )}\n\n              <ol\n                className=\"course-outline__items\"\n                id={groupContentId}\n                hidden={isCollapsed}\n              >\n                {group.items.map((item) => (\n                  <li\n                    key={item.id}\n                    className={getItemClasses(\n                      item,\n                    )}\n                  >\n                    <CourseOutlineItem\n                      item={item}\n                    />\n                  </li>\n                ))}\n              </ol>\n            </li>\n          );\n        })}\n      </ol>\n    </div>\n  );\n};\n\nexport default CourseOutline;\n"]}

package/components/course-outline/index.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var courseOutline = require('./course-outline');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -8,6 +10,13 @@ var courseOutline__default = /*#__PURE__*/_interopDefault(courseOutline);
 
 
 
-module.exports = courseOutline__default.default;
+Object.defineProperty(exports, "CourseOutlineItem", {
+  enumerable: true,
+  get: function () { return courseOutline.CourseOutlineItem; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return courseOutline__default.default; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/components/course-outline/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './course-outline';
-export type { CourseOutlineGroup, CourseOutlineHeadingLevel, CourseOutlineItem, CourseOutlineProps, } from './course-outline';
+export { default, CourseOutlineItem, } from './course-outline';
+export type { CourseOutlineGroup, CourseOutlineHeadingLevel, CourseOutlineItemProps, CourseOutlineProps, } from './course-outline';

package/components/course-outline/index.js

@@ -1,3 +1,3 @@
-export { default } from './course-outline';
+export { CourseOutlineItem, default } from './course-outline';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/components/index.cjs

@@ -189,6 +189,10 @@ Object.defineProperty(exports, "CourseOutline", {
   enumerable: true,
   get: function () { return courseOutline__default.default; }
 });
+Object.defineProperty(exports, "CourseOutlineItem", {
+  enumerable: true,
+  get: function () { return courseOutline.CourseOutlineItem; }
+});
 Object.defineProperty(exports, "FlipList", {
   enumerable: true,
   get: function () { return flipList__default.default; }

package/components/index.d.ts

@@ -53,8 +53,8 @@ export { default as Markdown } from './markdown/markdown';
 export type { MarkdownEmbed, MarkdownLinkProps, MarkdownProps, } from './markdown/markdown';
 export { default as Discussion } from './discussion/discussion';
 export type { DiscussionItem, DiscussionProps, } from './discussion/discussion';
-export { default as CourseOutline } from './course-outline/course-outline';
-export type { CourseOutlineGroup, CourseOutlineHeadingLevel, CourseOutlineItem, CourseOutlineProps, } from './course-outline/course-outline';
+export { default as CourseOutline, CourseOutlineItem, } from './course-outline/course-outline';
+export type { CourseOutlineGroup, CourseOutlineHeadingLevel, CourseOutlineItemProps, CourseOutlineProps, } from './course-outline/course-outline';
 export * from './calendar-month';
 export { default as FlipList } from './flip-list/flip-list';
 export type { FlipListItem, FlipListProps, } from './flip-list/flip-list';

package/components/index.js

@@ -25,7 +25,7 @@ export { default as CardGroup } from './card-group/card-group';
 export { default as Breadcrumbs } from './breadcrumbs/breadcrumbs';
 export { default as Markdown } from './markdown/markdown';
 export { default as Discussion } from './discussion/discussion';
-export { default as CourseOutline } from './course-outline/course-outline';
+export { default as CourseOutline, CourseOutlineItem } from './course-outline/course-outline';
 export * from './calendar-month';
 export { default as FlipList } from './flip-list/flip-list';
 export { default as AvatarUpload } from './avatar-upload/avatar-upload';

package/index.cjs

@@ -223,6 +223,10 @@ Object.defineProperty(exports, "CourseOutline", {
   enumerable: true,
   get: function () { return courseOutline__default.default; }
 });
+Object.defineProperty(exports, "CourseOutlineItem", {
+  enumerable: true,
+  get: function () { return courseOutline.CourseOutlineItem; }
+});
 Object.defineProperty(exports, "FlipList", {
   enumerable: true,
   get: function () { return flipList__default.default; }

package/index.d.ts

@@ -61,8 +61,8 @@ export { default as Markdown } from './components/markdown';
 export type { MarkdownEmbed, MarkdownLinkProps, MarkdownProps, } from './components/markdown';
 export { default as Discussion } from './components/discussion';
 export type { DiscussionItem, DiscussionProps, } from './components/discussion';
-export { default as CourseOutline } from './components/course-outline';
-export type { CourseOutlineGroup, CourseOutlineHeadingLevel, CourseOutlineItem, CourseOutlineProps, } from './components/course-outline';
+export { default as CourseOutline, CourseOutlineItem, } from './components/course-outline';
+export type { CourseOutlineGroup, CourseOutlineHeadingLevel, CourseOutlineItemProps, CourseOutlineProps, } from './components/course-outline';
 export * from './components/calendar-month';
 export { default as FlipList } from './components/flip-list';
 export type { FlipListItem, FlipListProps, } from './components/flip-list';

package/index.js

@@ -27,7 +27,7 @@ export { default as CardGroup } from './components/card-group';
 export { default as Breadcrumbs } from './components/breadcrumbs';
 export { default as Markdown } from './components/markdown';
 export { default as Discussion } from './components/discussion';
-export { default as CourseOutline } from './components/course-outline';
+export { default as CourseOutline, CourseOutlineItem } from './components/course-outline';
 export * from './components/calendar-month';
 export { default as FlipList } from './components/flip-list';
 export { default as AvatarUpload } from './components/avatar-upload';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.48",
+  "version": "0.2.49",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -1728,6 +1728,23 @@
 .layout-sidebar__side .course-outline {
   /* color */
 
+  /* typography */
+
+  /* size */
+  --course-outline-group-gap:
+    var(--margin-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__side
+  .course-outline__item-body {
+  /* color */
+
   /* typography */
   --course-outline-item-title-font-family:
     var(--font-body-family);
@@ -1741,8 +1758,6 @@
     var(--font-body-letter-spacing);
 
   /* size */
-  --course-outline-group-gap:
-    var(--margin-item);
 
   /* border */
 
@@ -1753,7 +1768,7 @@
 
 .layout-sidebar__side
   .course-outline__action,
-.layout-sidebar__side 
+.layout-sidebar__side
   .course-outline__meta {
   /* color */
 
@@ -2060,10 +2075,48 @@ h4.course-outline__group-title {
 
 .course-outline__item-body {
   /* color */
+  --course-outline-meta-color: var(--color-text-note);
 
   /* typography */
+  --course-outline-item-title-font-family:
+    var(--font-lead-family);
+  --course-outline-item-title-font-size:
+    var(--font-lead);
+  --course-outline-item-title-font-weight:
+    var(--font-lead-weight);
+  --course-outline-item-title-line-height:
+    var(--font-lead-line);
+  --course-outline-item-title-letter-spacing:
+    var(--font-lead-letter-spacing);
+
+  --course-outline-body-font-family:
+    var(--font-body-family);
+  --course-outline-body-font-size:
+    var(--font-body);
+  --course-outline-body-font-weight:
+    var(--font-body-weight);
+  --course-outline-body-line-height:
+    var(--font-body-line);
+  --course-outline-body-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  --course-outline-note-font-family:
+    var(--font-body-family);
+  --course-outline-note-font-size:
+    var(--font-note);
+  --course-outline-note-font-weight:
+    var(--font-note-weight);
+  --course-outline-note-line-height:
+    var(--font-note-line);
+  --course-outline-note-letter-spacing:
+    var(--font-note-letter-spacing);
 
   /* size */
+  --course-outline-item-content-gap:
+    var(--margin-descriptor);
+  --course-outline-details-gap:
+    var(--font-body-margin);
+
   display: flex;
   flex-direction: column;
   align-items: flex-start;