@acmekit/docs-ui 2.13.41

package/dist/index.mjs

@@ -0,0 +1,366 @@
+import {
+  AiAssistantIcon,
+  AiAssistantProvider,
+  Badge,
+  BadgesList,
+  BareboneLayout,
+  BetaBadge,
+  Bordered,
+  BorderedIcon,
+  Breadcrumbs,
+  BrowserProvider,
+  BundledProductIcon,
+  Button,
+  CalendarRefreshIcon,
+  Card,
+  CardList,
+  ChefHatIcon,
+  ChildDocs,
+  CodeBlock,
+  CodeMdx,
+  CodeTab,
+  CodeTabs,
+  ColorModeProvider,
+  ColoredAcmeKitIcon,
+  ContentMenu,
+  CopyButton,
+  DecisionProcessIcon,
+  DeprecatedNotice,
+  Details,
+  DetailsList,
+  DetailsSummary,
+  DocsTrackingEvents,
+  DotsLoading,
+  DottedSeparator,
+  DropdownMenu,
+  EditButton,
+  EditDate,
+  ErpIcon,
+  ErrorPage,
+  ExpandableNotice,
+  FeatureFlagNotice,
+  Feedback,
+  Footer,
+  GITHUB_ISSUES_LINK,
+  H1,
+  H2,
+  H3,
+  H4,
+  Hr,
+  IconCircleDottedLine,
+  IconCloudSolid,
+  IconHeadline,
+  ImageBinaryIcon,
+  InlineCode,
+  InlineIcon,
+  InlineThemeImage,
+  InputText,
+  Kbd,
+  Label,
+  LayoutProvider,
+  LayoutProviderContext,
+  Link,
+  LinkButton,
+  Loading,
+  MDXComponents,
+  MainNav,
+  MainNavProvider,
+  MarkdownContent,
+  Menu,
+  MobileProvider,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  ModalProvider,
+  Note,
+  NotificationContainer,
+  NotificationItem,
+  NotificationItemLayoutDefault,
+  NotificationProvider,
+  NotificationReducerActionTypes,
+  Pagination,
+  PaginationContext,
+  PaginationProvider,
+  Prerequisites,
+  PuzzleColoredIcon,
+  QuestionMarkIcon,
+  RadioItem,
+  Rating,
+  RestockIcon,
+  RootLayout,
+  RootProviders,
+  ScrollControllerProvider,
+  ScrollTextIcon,
+  SearchInput,
+  SearchProvider,
+  SelectBadge,
+  SelectDropdown,
+  SelectInput,
+  ShadedBgIcon,
+  ShopIcon,
+  Sidebar,
+  SidebarContext,
+  SidebarItem,
+  SidebarProvider,
+  SiteConfigProvider,
+  Solutions,
+  SourceCodeLink,
+  SpinnerLoading,
+  SplitList,
+  StripeColoredIcon,
+  Table,
+  Tabs,
+  TabsContent,
+  TabsContentWrapper,
+  TabsList,
+  TabsTrigger,
+  TabsTriggerVertical,
+  TextArea,
+  ThemeImage,
+  ThumbDownIcon,
+  ThumbUpIcon,
+  TightLayout,
+  Toggle,
+  Tooltip,
+  TypeList,
+  VersionNotice,
+  WideLayout,
+  WideSection,
+  WindowPaintbrushIcon,
+  ZoomImg,
+  areSidebarItemsEqual,
+  capitalize,
+  checkArraySameElms,
+  checkSidebarItemVisibility,
+  decodeStr,
+  findNextSibling,
+  findPrevSibling,
+  findSidebarItem,
+  getBrowser,
+  getLinkWithBasePath,
+  getNavDropdownItems,
+  getOsShortcut,
+  getScrolledTop,
+  getSidebarItemWithHistory,
+  globalConfig,
+  isElmWindow,
+  isInView,
+  isSidebarItemLink,
+  navDropdownItems,
+  normalizeMenuItems,
+  products,
+  reducer,
+  useActiveOnScroll,
+  useAiAssistant,
+  useClickOutside,
+  useCollapsible,
+  useCollapsibleCodeLines,
+  useColorMode,
+  useCopy,
+  useEvent,
+  useHeadingUrl,
+  useIsBrowser,
+  useIsExternalLink,
+  useKeyboardShortcut,
+  useLayout,
+  useMainNav,
+  useMobile,
+  useModal,
+  useMutationObserver,
+  useNotifications,
+  usePageScrollManager,
+  usePagination,
+  usePrevious,
+  useResizeObserver,
+  useScrollController,
+  useScrollPosition,
+  useScrollPositionBlocker,
+  useSearch,
+  useSelect,
+  useSidebar,
+  useSiteConfig,
+  useTabs
+} from "./chunk-JD7BP7O5.mjs";
+export {
+  AiAssistantIcon,
+  AiAssistantProvider,
+  Badge,
+  BadgesList,
+  BareboneLayout,
+  BetaBadge,
+  Bordered,
+  BorderedIcon,
+  Breadcrumbs,
+  BrowserProvider,
+  BundledProductIcon,
+  Button,
+  CalendarRefreshIcon,
+  Card,
+  CardList,
+  ChefHatIcon,
+  ChildDocs,
+  CodeBlock,
+  CodeMdx,
+  CodeTab,
+  CodeTabs,
+  ColorModeProvider,
+  ColoredAcmeKitIcon,
+  ContentMenu,
+  CopyButton,
+  DecisionProcessIcon,
+  DeprecatedNotice,
+  Details,
+  DetailsList,
+  DetailsSummary,
+  DocsTrackingEvents,
+  DotsLoading,
+  DottedSeparator,
+  DropdownMenu,
+  EditButton,
+  EditDate,
+  ErpIcon,
+  ErrorPage,
+  ExpandableNotice,
+  FeatureFlagNotice,
+  Feedback,
+  Footer,
+  GITHUB_ISSUES_LINK,
+  H1,
+  H2,
+  H3,
+  H4,
+  Hr,
+  IconCircleDottedLine,
+  IconCloudSolid,
+  IconHeadline,
+  ImageBinaryIcon,
+  InlineCode,
+  InlineIcon,
+  InlineThemeImage,
+  InputText,
+  Kbd,
+  Label,
+  LayoutProvider,
+  LayoutProviderContext,
+  Link,
+  LinkButton,
+  Loading,
+  MDXComponents,
+  MainNav,
+  MainNavProvider,
+  MarkdownContent,
+  Menu,
+  MobileProvider,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  ModalProvider,
+  Note,
+  NotificationContainer,
+  NotificationItem,
+  NotificationItemLayoutDefault,
+  NotificationProvider,
+  NotificationReducerActionTypes,
+  Pagination,
+  PaginationContext,
+  PaginationProvider,
+  Prerequisites,
+  PuzzleColoredIcon,
+  QuestionMarkIcon,
+  RadioItem,
+  Rating,
+  RestockIcon,
+  RootLayout,
+  RootProviders,
+  ScrollControllerProvider,
+  ScrollTextIcon,
+  SearchInput,
+  SearchProvider,
+  SelectBadge,
+  SelectDropdown,
+  SelectInput,
+  ShadedBgIcon,
+  ShopIcon,
+  Sidebar,
+  SidebarContext,
+  SidebarItem,
+  SidebarProvider,
+  SiteConfigProvider,
+  Solutions,
+  SourceCodeLink,
+  SpinnerLoading,
+  SplitList,
+  StripeColoredIcon,
+  Table,
+  Tabs,
+  TabsContent,
+  TabsContentWrapper,
+  TabsList,
+  TabsTrigger,
+  TabsTriggerVertical,
+  TextArea,
+  ThemeImage,
+  ThumbDownIcon,
+  ThumbUpIcon,
+  TightLayout,
+  Toggle,
+  Tooltip,
+  TypeList,
+  VersionNotice,
+  WideLayout,
+  WideSection,
+  WindowPaintbrushIcon,
+  ZoomImg,
+  areSidebarItemsEqual,
+  capitalize,
+  checkArraySameElms,
+  checkSidebarItemVisibility,
+  decodeStr,
+  findNextSibling,
+  findPrevSibling,
+  findSidebarItem,
+  getBrowser,
+  getLinkWithBasePath,
+  getNavDropdownItems,
+  getOsShortcut,
+  getScrolledTop,
+  getSidebarItemWithHistory,
+  globalConfig,
+  isElmWindow,
+  isInView,
+  isSidebarItemLink,
+  navDropdownItems,
+  normalizeMenuItems,
+  products,
+  reducer,
+  useActiveOnScroll,
+  useAiAssistant,
+  useClickOutside,
+  useCollapsible,
+  useCollapsibleCodeLines,
+  useColorMode,
+  useCopy,
+  useEvent,
+  useHeadingUrl,
+  useIsBrowser,
+  useIsExternalLink,
+  useKeyboardShortcut,
+  useLayout,
+  useMainNav,
+  useMobile,
+  useModal,
+  useMutationObserver,
+  useNotifications,
+  usePageScrollManager,
+  usePagination,
+  usePrevious,
+  useResizeObserver,
+  useScrollController,
+  useScrollPosition,
+  useScrollPositionBlocker,
+  useSearch,
+  useSelect,
+  useSidebar,
+  useSiteConfig,
+  useTabs
+};

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@acmekit/docs-ui",
+  "description": "React UI components for AcmeKit documentation.",
+  "version": "2.13.41",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acmekit/acmekit",
+    "directory": "packages/docs/docs-ui"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "yarn run -T tsup",
+    "watch": "yarn run -T tsup --watch",
+    "clean": "rimraf dist"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "rimraf": "^5.0.1",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.1.6"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "react-router-dom": ">=6.0.0"
+  },
+  "dependencies": {
+    "@acmekit/icons": "2.13.41",
+    "@acmekit/ui": "4.1.37",
+    "@uidotdev/usehooks": "^2.4.1",
+    "clsx": "^2.0.0",
+    "prism-react-renderer": "2.4.0",
+    "react-markdown": "^9.0.1",
+    "react-medium-image-zoom": "^5.2.10",
+    "react-router-dom": "^6.28.0",
+    "react-tooltip": "^5.28.0",
+    "react-transition-group": "^4.4.5",
+    "react-uuid": "^2.0.0"
+  },
+  "packageManager": "yarn@3.2.1"
+}

package/src/components/Badge/index.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+import clsx from "clsx"
+import { ShadedBgIcon } from "../Icons/ShadedBg"
+
+export type BadgeVariant =
+  | "purple"
+  | "orange"
+  | "green"
+  | "blue"
+  | "red"
+  | "neutral"
+  | "code"
+
+export type BadgeType = "default" | "shaded"
+
+export type BadgeProps = {
+  className?: string
+  childrenWrapperClassName?: string
+  variant: BadgeVariant
+  badgeType?: BadgeType
+} & React.HTMLAttributes<HTMLSpanElement>
+
+export const Badge = ({
+  className,
+  variant,
+  badgeType = "default",
+  children,
+  childrenWrapperClassName,
+  ...props
+}: BadgeProps) => {
+  return (
+    <span
+      className={clsx(
+        "text-compact-x-small-plus text-center",
+        badgeType === "default" &&
+          "px-docs_0.25 py-0 rounded-docs_sm border border-solid",
+        variant === "purple" &&
+          "bg-acmekit-tag-purple-bg text-acmekit-tag-purple-text border-acmekit-tag-purple-border",
+        variant === "orange" &&
+          "bg-acmekit-tag-orange-bg text-acmekit-tag-orange-text border-acmekit-tag-orange-border",
+        variant === "green" &&
+          "bg-acmekit-tag-green-bg text-acmekit-tag-green-text border-acmekit-tag-green-border",
+        variant === "blue" &&
+          "bg-acmekit-tag-blue-bg text-acmekit-tag-blue-text border-acmekit-tag-blue-border",
+        variant === "red" &&
+          "bg-acmekit-tag-red-bg text-acmekit-tag-red-text border-acmekit-tag-red-border",
+        variant === "neutral" &&
+          "bg-acmekit-tag-neutral-bg text-acmekit-tag-neutral-text border-acmekit-tag-neutral-border",
+        variant === "code" &&
+          "bg-acmekit-contrast-bg-subtle text-acmekit-contrast-fg-secondary border-acmekit-contrast-border-bot",
+        badgeType === "shaded" && "px-[3px] !bg-transparent relative",
+        // needed for tailwind utilities
+        "badge",
+        className
+      )}
+      {...props}
+    >
+      {badgeType === "shaded" && (
+        <ShadedBgIcon
+          variant={variant}
+          className={clsx("absolute top-0 left-0 w-full h-full")}
+        />
+      )}
+      <span
+        className={clsx(
+          badgeType === "shaded" && "relative z-[1]",
+          childrenWrapperClassName
+        )}
+      >
+        {children}
+      </span>
+    </span>
+  )
+}

package/src/components/BadgesList/index.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { Badge, BadgeProps } from "../Badge"
+import clsx from "clsx"
+
+type BadgesListProps = {
+  badges: BadgeProps[]
+  className?: string
+}
+
+export const BadgesList = ({ badges, className }: BadgesListProps) => {
+  return (
+    <div className={clsx("flex flex-wrap gap-docs_0.5", className)}>
+      {badges.map((badgeProps, index) => (
+        <Badge {...badgeProps} key={index} />
+      ))}
+    </div>
+  )
+}

package/src/components/BetaBadge/index.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { Badge } from "../../components/Badge"
+import { Tooltip } from "../../components/Tooltip"
+
+type BetaBadgeProps = {
+  text?: string
+  tooltipText?: string
+}
+
+export const BetaBadge = ({
+  text = "Coming soon",
+  tooltipText = "Coming soon",
+}: BetaBadgeProps) => {
+  return (
+    <Tooltip
+      tooltipChildren={tooltipText}
+      className="align-middle text-compact-x-small-plus"
+    >
+      <Badge variant="blue" badgeType="shaded" className="cursor-pointer">
+        {text}
+      </Badge>
+    </Tooltip>
+  )
+}

package/src/components/Bordered/index.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx"
+import React from "react"
+
+export type BorderedProps = {
+  wrapperClassName?: string
+} & React.HTMLAttributes<HTMLSpanElement>
+
+export const Bordered = ({ wrapperClassName, children }: BorderedProps) => {
+  return (
+    <span
+      className={clsx(
+        "border-acmekit-border-strong bg-acmekit-bg-base",
+        "mr-docs_1 inline-flex w-fit items-center justify-center rounded-docs_DEFAULT border border-solid p-[3px]",
+        "no-zoom-img",
+        wrapperClassName
+      )}
+    >
+      {children}
+    </span>
+  )
+}

package/src/components/BorderedIcon/index.tsx

@@ -0,0 +1,60 @@
+import React from "react"
+import clsx from "clsx"
+import { IconProps } from "@acmekit/icons/dist/types"
+
+
+export type BorderedIconProps = {
+  icon?: string
+  IconComponent?: React.FC<IconProps> | null
+  wrapperClassName?: string
+  iconWrapperClassName?: string
+  iconClassName?: string
+  iconColorClassName?: string
+  iconWidth?: number
+  iconHeight?: number
+} & React.HTMLAttributes<HTMLSpanElement>
+
+export const BorderedIcon = ({
+  icon = "",
+  IconComponent = null,
+  iconWrapperClassName,
+  iconClassName,
+  iconColorClassName = "",
+  wrapperClassName,
+  iconWidth = 28,
+  iconHeight = 28,
+  ...props
+}: BorderedIconProps) => {
+  return (
+    <span
+      className={clsx(
+        "rounded-docs_sm p-docs_0.125 bg-acmekit-bg-base inline-flex items-center justify-center",
+        "shadow-border-base dark:shadow-border-base-dark",
+        iconWrapperClassName
+      )}
+      {...props}
+    >
+      <span className={clsx("rounded-docs_xs", wrapperClassName)}>
+        {!IconComponent && (
+          <img
+            src={icon || ""}
+            className={clsx(iconClassName, "bordered-icon rounded-docs_xs")}
+            width={iconWidth}
+            height={iconHeight}
+            alt=""
+          />
+        )}
+        {IconComponent && (
+          <IconComponent
+            className={clsx(
+              "text-acmekit-fg-subtle rounded-docs_xs",
+              iconClassName,
+              "bordered-icon",
+              iconColorClassName
+            )}
+          />
+        )}
+      </span>
+    </span>
+  )
+}

package/src/components/Breadcrumbs/index.tsx

@@ -0,0 +1,83 @@
+import React, { useMemo } from "react"
+import clsx from "clsx"
+import { Link } from "react-router-dom"
+import { useSidebar } from "../../providers/Sidebar"
+import { useSiteConfig } from "../../providers/SiteConfig"
+import { Button } from "../Button"
+import { TriangleRightMini } from "@acmekit/icons"
+import { Sidebar } from "../../types"
+
+type BreadcrumbItems = {
+  title: string
+  link: string
+}[]
+
+export const Breadcrumbs = () => {
+  const { sidebarHistory, getSidebarFirstLinkChild, getSidebar } = useSidebar()
+  const {
+    config: { breadcrumbOptions },
+  } = useSiteConfig()
+
+  const getLinkPath = (item: Sidebar.SidebarItemLink): string => {
+    return item.isPathHref ? item.path : `#${item.path}`
+  }
+
+  const breadcrumbItems = useMemo(() => {
+    const items: BreadcrumbItems = []
+    if (breadcrumbOptions?.startItems) {
+      items.push(...breadcrumbOptions.startItems)
+    }
+
+    sidebarHistory.forEach((sidebar_id) => {
+      const sidebar = getSidebar(sidebar_id)
+
+      if (!sidebar) {
+        return
+      }
+
+      const sidebarFirstChild = getSidebarFirstLinkChild(sidebar)
+
+      if (!sidebarFirstChild) {
+        return
+      }
+
+      items.push({
+        title: sidebar.title,
+        link: getLinkPath(sidebarFirstChild),
+      })
+    })
+
+    return items
+  }, [sidebarHistory, breadcrumbOptions])
+
+  return (
+    <div
+      className={clsx(
+        "flex items-center gap-docs_0.25",
+        "text-acmekit-fg-muted text-compact-small",
+        "mb-docs_1 flex-wrap"
+      )}
+    >
+      {breadcrumbItems.map(({ title, link }, index) => (
+        <React.Fragment key={link}>
+          {index > 0 && <TriangleRightMini />}
+          <Button
+            variant="transparent-clear"
+            className={clsx(
+              "px-docs_0.5 py-docs_0.25",
+              link === "#" && "hover:cursor-default",
+              "!p-0 hover:!bg-transparent hover:!text-acmekit-fg-subtle"
+            )}
+          >
+            <Link
+              to={link}
+              className={clsx(link === "#" && "hover:cursor-default")}
+            >
+              {title}
+            </Link>
+          </Button>
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}