@acmekit/docs-ui 2.13.41

package/src/components/Table/index.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import { Table as UiTable } from "@acmekit/ui"
+import clsx from "clsx"
+
+type RootProps = React.HTMLAttributes<HTMLTableElement>
+
+const Root = ({ className, ...props }: RootProps) => {
+  return (
+    <UiTable
+      className={clsx(
+        className,
+        "table-fixed mb-docs_1",
+        "[&_pre_span]:!max-w-full [&_pre_span]:!break-words [&_pre_span]:!whitespace-break-spaces",
+        "[&_pre>div]:mt-docs_1",
+        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        "rounded-docs_DEFAULT"
+      )}
+      {...props}
+    />
+  )
+}
+
+type HeaderProps = React.HTMLAttributes<HTMLTableSectionElement>
+
+const Header = ({ className, ...props }: HeaderProps) => {
+  return (
+    <UiTable.Header
+      className={clsx(
+        className,
+        "!border-0 bg-acmekit-bg-component [&_tr]:!bg-acmekit-bg-component",
+        "rounded-docs_DEFAULT [&_tr]:rounded-docs_DEFAULT"
+      )}
+      {...props}
+    />
+  )
+}
+
+type HeaderCellProps = React.HTMLAttributes<HTMLTableCellElement>
+
+const HeaderCell = ({ className, ...props }: HeaderCellProps) => {
+  return (
+    <UiTable.HeaderCell
+      className={clsx(
+        className,
+        "text-left !px-docs_0.75 py-docs_0.5 break-words",
+        "!text-compact-small-plus text-acmekit-fg-subtle",
+        "first:rounded-tl-docs_DEFAULT last:rounded-tr-docs_DEFAULT"
+      )}
+      {...props}
+    />
+  )
+}
+
+type CellProps = React.HTMLAttributes<HTMLTableCellElement>
+
+const Cell = ({ className, ...props }: CellProps) => {
+  return (
+    <UiTable.Cell
+      className={clsx(
+        className,
+        "!px-docs_0.75 py-docs_0.5 break-words align-top"
+      )}
+      {...props}
+    />
+  )
+}
+
+type BodyProps = React.HTMLAttributes<HTMLTableSectionElement>
+
+const Body = ({ className, ...props }: BodyProps) => {
+  return (
+    <UiTable.Body
+      className={clsx(className, "[&_tr:last-child]:border-b-0 border-b-0")}
+      {...props}
+    />
+  )
+}
+
+const Table = Object.assign(Root, {
+  Row: UiTable.Row,
+  Cell,
+  Header,
+  HeaderCell,
+  Body,
+})
+
+export { Table }

package/src/components/Tabs/index.tsx

@@ -0,0 +1,106 @@
+
+import React, { useMemo } from "react"
+import { Tabs as UiTabs } from "@acmekit/ui"
+import { ComponentProps } from "react"
+import clsx from "clsx"
+import { EllipseMiniSolid } from "@acmekit/icons"
+import { useMobile } from "../../providers/Mobile"
+
+type TabsProps = ComponentProps<typeof UiTabs> & {
+  layoutType?: "horizontal" | "vertical"
+}
+
+export const Tabs = ({
+  layoutType = "horizontal",
+  className,
+  ...props
+}: TabsProps) => {
+  const { isMobile } = useMobile()
+
+  const layout = useMemo(() => {
+    return isMobile ? "horizontal" : layoutType
+  }, [layoutType, isMobile])
+
+  return (
+    <UiTabs
+      {...props}
+      className={clsx(
+        className,
+        layout === "vertical" && [
+          "flex gap-docs_1",
+          "[&_[role=tablist]]:flex-col [&_[role=tablist]]:items-start",
+          "[&_[role=tablist]+*]:flex-1 [&_[role=tablist]+*]:!mt-0",
+          "[&_[role=tablist]+*]:w-3/4 [&_[role=tablist]]:w-1/4",
+        ]
+      )}
+    />
+  )
+}
+
+export const TabsList = ({
+  className,
+  ...props
+}: ComponentProps<typeof UiTabs.List>) => (
+  <UiTabs.List {...props} className={clsx(className, "gap-docs_0.5")} />
+)
+
+export const TabsTrigger = ({
+  className,
+  ...props
+}: ComponentProps<typeof UiTabs.Trigger>) => (
+  <UiTabs.Trigger
+    {...props}
+    className={clsx(
+      className,
+      "px-[10px] py-docs_0.25 data-[state=active]:text-ui-fg-base data-[state=active]:bg-ui-bg-base data-[state=active]:shadow-elevation-card-rest",
+      "hover:text-ui-fg-base focus-visible:border-ui-border-interactive focus-visible:!shadow-borders-focus focus-visible:bg-ui-bg-base"
+    )}
+  />
+)
+
+export const TabsTriggerVertical = ({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof UiTabs.Trigger>) => {
+  const { isMobile } = useMobile()
+
+  if (isMobile) {
+    return (
+      <TabsTrigger className={className} {...props}>
+        {children}
+      </TabsTrigger>
+    )
+  }
+
+  return (
+    <UiTabs.Trigger
+      {...props}
+      className={clsx(
+        className,
+        "px-docs_0.5 py-docs_0.25 !text-acmekit-fg-base text-compact-small data-[state=active]:!text-compact-small-plus",
+        "[&[data-state=active]_svg]:!visible hover:!bg-acmekit-bg-base-hover rounded-docs_DEFAULT",
+        "!shadow-none"
+      )}
+    >
+      <EllipseMiniSolid className="invisible" />
+      {children}
+    </UiTabs.Trigger>
+  )
+}
+
+type TabsContentWrapperProps = {
+  className?: string
+  children: React.ReactNode
+}
+
+export const TabsContentWrapper = ({
+  className,
+  ...props
+}: TabsContentWrapperProps) => (
+  <div {...props} className={clsx(className, "mt-docs_0.5")} />
+)
+
+export const TabsContent = (props: ComponentProps<typeof UiTabs.Content>) => (
+  <UiTabs.Content {...props} />
+)

package/src/components/TextArea/index.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import clsx from "clsx"
+
+export type TextAreaProps = {
+  className?: string
+} & React.DetailedHTMLProps<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+>
+
+export const TextArea = (props: TextAreaProps) => {
+  return (
+    <textarea
+      {...props}
+      className={clsx(
+        "bg-acmekit-bg-field shadow-border-base dark:shadow-border-base-dark",
+        "rounded-docs_sm",
+        "py-[6px] px-docs_0.5 text-medium font-base",
+        "hover:bg-acmekit-bg-field-hover",
+        "focus:shadow-acmekit-border-interactive-with-focus",
+        "active:shadow-acmekit-border-interactive-with-focus",
+        "disabled:bg-acmekit-bg-disabled",
+        "disabled:border-acmekit-border-base disabled:border disabled:shadow-none",
+        "placeholder:text-acmekit-fg-muted",
+        "disabled:placeholder:text-acmekit-fg-disabled",
+        props.className
+      )}
+    />
+  )
+}

package/src/components/ThemeImage/index.tsx

@@ -0,0 +1,26 @@
+
+import React from "react"
+import { useColorMode } from "../../providers/ColorMode"
+
+export type ThemeImageProps = {
+  light: string
+  dark?: string
+  alt?: string
+} & React.AllHTMLAttributes<HTMLImageElement>
+
+export const ThemeImage = ({
+  light,
+  dark,
+  alt = "",
+  ...props
+}: ThemeImageProps) => {
+  const { colorMode } = useColorMode()
+
+  return (
+    <img
+      alt={alt}
+      src={colorMode === "light" ? light : dark || light}
+      {...props}
+    />
+  )
+}

package/src/components/Toggle/index.tsx

@@ -0,0 +1,28 @@
+import { Switch } from "@acmekit/ui"
+import clsx from "clsx"
+import React from "react"
+
+export const Toggle = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof Switch>) => {
+  return (
+    <Switch
+      {...props}
+      className={clsx(
+        className,
+        "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient",
+        "before:shadow-details-switch-background focus-visible:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive",
+        "disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute",
+        "before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-['']",
+        "disabled:cursor-not-allowed",
+
+        props.size !== "small" &&
+          "h-[18px] w-[32px] [&_span]:h-[14px] [&_span]:w-[14px]",
+        "[&_span]:bg-acmekit-fg-on-color [&_span]:shadow-details-switch-handle [&_span]:group-disabled:bg-ui-fg-disabled [&_span]:pointer-events-none",
+        "[&_span]:rounded-full [&_span]:group-disabled:shadow-none [&_span]:transition-transform",
+        "[&_span]:data-[state=checked]:translate-x-docs_1 [&_span]:data-[state=unchecked]:translate-x-docs_0.125"
+      )}
+    />
+  )
+}

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,65 @@
+
+import React, { forwardRef, useId } from "react"
+import { Tooltip as ReactTooltip } from "react-tooltip"
+import type { ITooltip } from "react-tooltip"
+import clsx from "clsx"
+import "react-tooltip/dist/react-tooltip.css"
+
+export type TooltipProps = {
+  text?: string
+  tooltipClassName?: string
+  html?: string
+  tooltipChildren?: React.ReactNode
+  innerClassName?: string
+} & React.HTMLAttributes<HTMLSpanElement> &
+  ITooltip
+
+export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(
+  function Tooltip(
+    {
+      text = "",
+      tooltipClassName = "",
+      children,
+      html = "",
+      tooltipChildren,
+      className,
+      innerClassName,
+      ...tooltipProps
+    },
+    ref
+  ) {
+    const elementId = useId()
+
+    return (
+      <span className={clsx(className, "notranslate")} translate="no" ref={ref}>
+        <span
+          id={elementId}
+          data-tooltip-content={text}
+          data-tooltip-html={html}
+          data-tooltip-id={elementId}
+          className={innerClassName}
+        >
+          {children}
+        </span>
+        <ReactTooltip
+          anchorId={elementId}
+          // anchorSelect={elementId ? `#${elementId}` : undefined}
+          className={clsx(
+            "!text-compact-x-small !shadow-elevation-tooltip dark:!shadow-elevation-tooltip-dark !rounded-docs_DEFAULT",
+            "!py-docs_0.25 !z-[399] hidden !px-docs_0.5 lg:block",
+            "!bg-acmekit-bg-component",
+            "!text-acmekit-fg-base text-center",
+            tooltipClassName
+          )}
+          wrapper="span"
+          noArrow={true}
+          positionStrategy={"fixed"}
+          opacity={1}
+          {...tooltipProps}
+        >
+          {tooltipChildren}
+        </ReactTooltip>
+      </span>
+    )
+  }
+)

package/src/components/TypeList/Items/index.tsx

@@ -0,0 +1,337 @@
+
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { Details } from "../../../components/Details"
+import { CopyButton } from "../../../components/CopyButton"
+import { DetailsSummary } from "../../../components/Details/Summary"
+import { ExpandableNotice } from "../../../components/Notices/ExpandableNotice"
+import { FeatureFlagNotice } from "../../../components/Notices/FeatureFlagNotice"
+import { InlineCode } from "../../../components/InlineCode"
+import { MarkdownContent } from "../../../components/MarkdownContent"
+import { MDXComponents } from "../../../components/MDXComponents"
+import clsx from "clsx"
+import { Type, CommonProps as ParentCommonProps } from ".."
+import {
+  ArrowDownLeftMini,
+  ArrowsPointingOutMini,
+  FlagMini,
+  Link,
+  TriangleRightMini,
+} from "@acmekit/icons"
+import { decodeStr } from "../../../utils/decode-str"
+import { isInView } from "../../../utils/is-in-view"
+import { useLocation } from "react-router-dom"
+import { useSiteConfig } from "../../../providers/SiteConfig"
+import { useIsBrowser } from "../../../providers/BrowserProvider"
+import { VersionNotice } from "../../Notices/VersionNotice"
+import { DeprecatedNotice } from "../../Notices/DeprecatedNotice"
+
+type CommonProps = ParentCommonProps & {
+  level?: number
+  referenceType?: "method" | "workflow"
+}
+
+type TypeListItemProps = {
+  typeItem: Type
+  elementKey: number
+} & CommonProps &
+  React.AllHTMLAttributes<HTMLDivElement>
+
+const TypeListItem = ({
+  typeItem,
+  level = 1,
+  expandUrl,
+  elementKey,
+  sectionTitle,
+  referenceType = "method",
+  openedLevel = 0,
+}: TypeListItemProps) => {
+  const { isBrowser } = useIsBrowser()
+  const { pathname } = useLocation()
+  const {
+    config: { baseUrl, basePath },
+  } = useSiteConfig()
+  const siteUrl = `${baseUrl}${basePath}`
+
+  const groupName = useMemo(() => {
+    switch (level) {
+      case 1:
+        return "group/typeOne"
+      case 2:
+        return "group/typeTwo"
+      case 3:
+        return "group/typeThree"
+      case 4:
+        return "group/typeFour"
+    }
+  }, [level])
+  const borderForGroupName = useMemo(() => {
+    switch (level) {
+      case 1:
+        return "group-open/typeOne:border-solid group-open/typeOne:border-0 group-open/typeOne:border-b"
+      case 2:
+        return "group-open/typeTwo:border-solid group-open/typeTwo:border-0 group-open/typeTwo:border-b"
+      case 3:
+        return "group-open/typeThree:border-solid group-open/typeThree:border-0 group-open/typeThree:border-b"
+      case 4:
+        return "group-open/typeFour:border-solid group-open/typeFour:border-0 group-open/typeFour:border-b"
+    }
+  }, [level])
+  const rotateForGroupName = useMemo(() => {
+    switch (level) {
+      case 1:
+        return "group-open/typeOne:rotate-90"
+      case 2:
+        return "group-open/typeTwo:rotate-90"
+      case 3:
+        return "group-open/typeThree:rotate-90"
+      case 4:
+        return "group-open/typeFour:rotate-90"
+    }
+  }, [level])
+  function getItemClassNames(details = true) {
+    return clsx(
+      "odd:[&:not(:first-child):not(:last-child)]:!border-y last:not(:first-child):!border-t",
+      "first:!border-t-0 first:not(:last-child):!border-b last:!border-b-0 even:!border-y-0",
+      details && groupName,
+      !details && borderForGroupName
+    )
+  }
+  const formatId = (str: string) => {
+    return str.replaceAll(" ", "_")
+  }
+  const typeId = useMemo(() => {
+    return sectionTitle
+      ? `#${formatId(sectionTitle)}-${formatId(
+          typeItem.name
+        )}-${level}-${elementKey}`
+      : ""
+  }, [sectionTitle, typeItem, elementKey])
+  const typePath = useMemo(() => `${pathname}${typeId}`, [pathname, typeId])
+  const typeUrl = useMemo(() => `${siteUrl}${typePath}`, [siteUrl, typePath])
+
+  const ref = useRef<HTMLDivElement>(null)
+  const [isSelected, setIsSelected] = useState(false)
+
+  useEffect(() => {
+    if (!typeId.length || !isBrowser) {
+      return
+    }
+
+    const shouldScroll = window.location.hash === typeId
+
+    if (shouldScroll && !isSelected && ref.current && !isInView(ref.current)) {
+      ref.current.scrollIntoView({
+        block: "center",
+      })
+    }
+
+    setIsSelected(shouldScroll)
+  }, [typeId, isBrowser])
+
+  function getSummary(item: Type, nested = true) {
+    return (
+      <DetailsSummary
+        subtitle={
+          item.description || item.defaultValue || item.example ? (
+            <>
+              {item.description && (
+                <MarkdownContent
+                  allowedElements={[
+                    "a",
+                    "strong",
+                    "code",
+                    "ul",
+                    "ol",
+                    "li",
+                    "br",
+                  ]}
+                  unwrapDisallowed={true}
+                  components={{
+                    ...MDXComponents,
+                    ol: (props: React.HTMLAttributes<HTMLElement>) => (
+                      // @ts-expect-error Not recognized as a JSX element
+                      <MDXComponents.ol
+                        {...props}
+                        className={clsx(props.className, "mt-docs_1.5")}
+                      />
+                    ),
+                    li: (props: React.HTMLAttributes<HTMLElement>) => (
+                      // @ts-expect-error Not recognized as a JSX element
+                      <MDXComponents.li
+                        {...props}
+                        className={clsx(
+                          props.className,
+                          "!text-acmekit-fg-subtle"
+                        )}
+                      />
+                    ),
+                  }}
+                >
+                  {item.description}
+                </MarkdownContent>
+              )}
+              {item.defaultValue && (
+                <p className="mt-0.5 mb-0">
+                  Default: <InlineCode>{item.defaultValue}</InlineCode>
+                </p>
+              )}
+              {item.example && (
+                <div className="mt-0.5">
+                  Example: <InlineCode>{item.example}</InlineCode>
+                </div>
+              )}
+            </>
+          ) : undefined
+        }
+        expandable={(item.children?.length || 0) > 0}
+        hideExpandableIcon={true}
+        className={clsx(
+          getItemClassNames(false),
+          "py-1 pr-1",
+          level === 1 && "pl-1",
+          level === 2 && "pl-3",
+          level === 3 && "pl-[120px]",
+          level === 4 && "pl-[160px]",
+          !nested && "cursor-auto",
+          isSelected && "animate-flash animate-bg-surface"
+        )}
+        onClick={(e) => {
+          const targetElm = e.target as HTMLElement
+          if (targetElm.tagName.toLowerCase() === "a") {
+            window.location.href =
+              targetElm.getAttribute("href") || window.location.href
+            return
+          }
+        }}
+        summaryRef={!nested ? ref : undefined}
+        id={!nested && typeId ? typeId : ""}
+      >
+        <div className="flex gap-0.5">
+          {nested && (
+            <TriangleRightMini
+              className={clsx(
+                "text-acmekit-fg-subtle transition-transform",
+                rotateForGroupName
+              )}
+            />
+          )}
+          {!nested && level > 1 && (
+            <ArrowDownLeftMini
+              className={clsx("text-acmekit-fg-subtle flip-y")}
+            />
+          )}
+          {level === 1 && typeId.length > 0 && (
+            <CopyButton
+              text={typeUrl}
+              onCopy={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}
+            >
+              <Link
+                className={clsx(
+                  "text-acmekit-fg-interactive hover:text-acmekit-fg-interactive-hover"
+                )}
+              />
+            </CopyButton>
+          )}
+          <div className="flex gap-0.75 flex-wrap flex-1">
+            <InlineCode data-testid="type-name">
+              {decodeStr(item.name)}
+            </InlineCode>
+            <span
+              className="font-monospace text-compact-small-plus text-acmekit-fg-subtle"
+              data-testid="type-type"
+            >
+              <MarkdownContent allowedElements={["a"]} unwrapDisallowed={true}>
+                {item.type}
+              </MarkdownContent>
+            </span>
+            {item.optional === true && (
+              <span
+                className={clsx(
+                  "text-compact-x-small-plus",
+                  "text-acmekit-tag-blue-text"
+                )}
+                data-testid="type-optional"
+              >
+                Optional
+              </span>
+            )}
+            {item.featureFlag && (
+              <FeatureFlagNotice
+                featureFlag={item.featureFlag}
+                type="type"
+                badgeClassName="!p-0 leading-none"
+                badgeContent={
+                  <FlagMini className="!text-acmekit-tag-green-text" />
+                }
+              />
+            )}
+            {item.expandable && (
+              <ExpandableNotice
+                type={referenceType}
+                link={expandUrl || "#"}
+                badgeClassName="!p-docs_0.25 block leading-none"
+                badgeContent={<ArrowsPointingOutMini />}
+              />
+            )}
+            {item.since && (
+              <VersionNotice
+                version={item.since}
+                badgeClassName="!p-0 leading-none"
+              />
+            )}
+            {item.deprecated?.is_deprecated && (
+              <DeprecatedNotice description={item.deprecated?.description} />
+            )}
+          </div>
+        </div>
+      </DetailsSummary>
+    )
+  }
+
+  return (
+    <>
+      {(typeItem.children?.length || 0) > 0 && (
+        <Details
+          summaryElm={getSummary(typeItem)}
+          className={clsx(getItemClassNames())}
+          heightAnimation={true}
+          id={typeId ? typeId : ""}
+          openInitial={openedLevel >= level}
+        >
+          {typeItem.children && (
+            <TypeListItems
+              types={typeItem.children}
+              level={level + 1}
+              expandUrl={expandUrl}
+            />
+          )}
+        </Details>
+      )}
+      {(typeItem.children?.length || 0) === 0 && getSummary(typeItem, false)}
+    </>
+  )
+}
+
+type TypeListItemsProps = {
+  types: Type[]
+} & CommonProps
+
+const TypeListItems = ({ types, ...rest }: TypeListItemsProps) => {
+  return (
+    <div>
+      {types.map((typeItem, key) => (
+        <TypeListItem
+          typeItem={typeItem}
+          key={key}
+          elementKey={key}
+          {...rest}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default TypeListItems