@acmekit/docs-ui 2.13.41

package/src/components/Icons/ThumbDown/index.tsx

@@ -0,0 +1,23 @@
+import { IconProps } from "@acmekit/icons/dist/types"
+import React from "react"
+
+export const ThumbDownIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.25001 12.5H8.12501M14.8117 4.375C14.8208 4.41667 14.835 4.45833 14.855 4.49833C15.3475 5.49833 15.625 6.62333 15.625 7.8125C15.6268 9.00847 15.3413 10.1874 14.7925 11.25M14.8117 4.375C14.7483 4.07083 14.9642 3.75 15.2908 3.75H16.0475C16.7883 3.75 17.475 4.18167 17.6908 4.89C17.9733 5.815 18.125 6.79583 18.125 7.8125C18.125 9.10667 17.8792 10.3425 17.4325 11.4775C17.1775 12.1225 16.5275 12.5 15.8333 12.5H14.9558C14.5625 12.5 14.335 12.0367 14.5392 11.7C14.6285 11.553 14.7136 11.4029 14.7925 11.25M14.8117 4.375H13.7333C13.3303 4.37525 12.9299 4.31053 12.5475 4.18333L9.95251 3.31667C9.5701 3.18947 9.16969 3.12475 8.76668 3.125H5.42001C4.90501 3.125 4.40584 3.33083 4.08251 3.7325C2.6508 5.50731 1.87157 7.71971 1.87501 10C1.87501 10.3617 1.89418 10.7192 1.93168 11.0708C2.02251 11.9217 2.78834 12.5 3.64334 12.5H6.24835C6.76335 12.5 7.07418 13.1033 6.85251 13.5683C6.45441 14.4062 6.24856 15.3224 6.25001 16.25C6.25001 16.7473 6.44756 17.2242 6.79919 17.5758C7.15082 17.9275 7.62773 18.125 8.12501 18.125C8.29077 18.125 8.44974 18.0592 8.56695 17.9419C8.68416 17.8247 8.75001 17.6658 8.75001 17.5V16.9725C8.75001 16.495 8.84168 16.0225 9.01834 15.5792C9.27168 14.9458 9.79335 14.4708 10.3958 14.15C11.3208 13.6564 12.1326 12.9752 12.7792 12.15C13.1942 11.6217 13.8008 11.25 14.4725 11.25H14.7925"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

package/src/components/Icons/ThumbUp/index.tsx

@@ -0,0 +1,23 @@
+import { IconProps } from "@acmekit/icons/dist/types"
+import React from "react"
+
+export const ThumbUpIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5.5275 8.75C6.19917 8.75 6.805 8.37833 7.22 7.85C7.86688 7.02468 8.67893 6.34349 9.60417 5.85C10.2067 5.53 10.7292 5.05333 10.9817 4.42083C11.159 3.97771 11.2501 3.50479 11.25 3.0275V2.5C11.25 2.33424 11.3159 2.17527 11.4331 2.05806C11.5503 1.94085 11.7092 1.875 11.875 1.875C12.3723 1.875 12.8492 2.07254 13.2008 2.42417C13.5525 2.77581 13.75 3.25272 13.75 3.75C13.75 4.71 13.5333 5.61917 13.1475 6.43167C12.9258 6.89667 13.2367 7.5 13.7517 7.5H16.3567C17.2117 7.5 17.9775 8.07833 18.0683 8.92917C18.1058 9.28083 18.125 9.6375 18.125 10C18.1284 12.2803 17.3492 14.4927 15.9175 16.2675C15.5942 16.6692 15.095 16.875 14.58 16.875H11.2333C10.8308 16.875 10.43 16.81 10.0475 16.6833L7.4525 15.8167C7.07009 15.6895 6.66968 15.6248 6.26667 15.625H4.92M4.92 15.625C4.98917 15.7958 5.06417 15.9625 5.145 16.1267C5.30917 16.46 5.08 16.875 4.70917 16.875H3.9525C3.21167 16.875 2.525 16.4433 2.30917 15.735C2.02054 14.7877 1.87422 13.8028 1.875 12.8125C1.875 11.5183 2.12084 10.2825 2.5675 9.1475C2.8225 8.5025 3.4725 8.125 4.16667 8.125H5.04417C5.4375 8.125 5.665 8.58833 5.46084 8.925C4.74908 10.0966 4.37369 11.4416 4.37584 12.8125C4.37584 13.8075 4.56917 14.7567 4.92084 15.625H4.92ZM11.875 7.5H13.75"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

package/src/components/Icons/WindowPaintbrush/index.tsx

@@ -0,0 +1,57 @@
+import React from "react"
+import { IconProps } from "@acmekit/icons/dist/types"
+
+export const WindowPaintbrushIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clipPath="url(#clip0_10703_107733)">
+        <path
+          opacity="0.3"
+          d="M5.11111 10.5022C7.03289 11.08 8.59289 11.128 9.86756 9.82311C10.6364 9.05155 10.6364 7.8 9.86756 7.02755C9.09867 6.25511 7.85778 6.24444 7.08267 7.02755C5.82223 8.30222 6.92267 9.512 5.11111 10.5022Z"
+          fill="currentColor"
+        />
+        <path
+          d="M10.4445 8.21954L14.9653 3.70132C15.456 3.21065 15.456 2.41421 14.9653 1.92354C14.4747 1.43288 13.6782 1.43288 13.1876 1.92354L8.65956 6.45332"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M5.11111 10.5022C7.03289 11.08 8.59289 11.128 9.86756 9.82311C10.6364 9.05155 10.6364 7.8 9.86756 7.02755C9.09867 6.25511 7.85778 6.24444 7.08267 7.02755C5.82223 8.30222 6.92267 9.512 5.11111 10.5022Z"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14.4444 7.36357V11.7778C14.4444 12.76 13.6489 13.5556 12.6667 13.5556H3.33334C2.35111 13.5556 1.55556 12.76 1.55556 11.7778V4.22224C1.55556 3.24001 2.35111 2.44446 3.33334 2.44446H9.52445"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M3.77778 5.33333C4.14597 5.33333 4.44445 5.03485 4.44445 4.66667C4.44445 4.29848 4.14597 4 3.77778 4C3.40959 4 3.11111 4.29848 3.11111 4.66667C3.11111 5.03485 3.40959 5.33333 3.77778 5.33333Z"
+          fill="currentColor"
+        />
+        <path
+          d="M5.99999 5.33333C6.36818 5.33333 6.66666 5.03485 6.66666 4.66667C6.66666 4.29848 6.36818 4 5.99999 4C5.63181 4 5.33333 4.29848 5.33333 4.66667C5.33333 5.03485 5.63181 5.33333 5.99999 5.33333Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_10703_107733">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

package/src/components/Icons/index.tsx

@@ -0,0 +1,20 @@
+export * from "./AiAssistant"
+export * from "./BundledProduct"
+export * from "./CalendarRefresh"
+export * from "./ChefHat"
+export * from "./CircleDottedLine"
+export * from "./CloudSolid"
+export * from "./ColoredAcmeKit"
+export * from "./DecisionProcess"
+export * from "./Erp"
+export * from "./ImageBinary"
+export * from "./PuzzleColored"
+export * from "./QuestionMark"
+export * from "./Restock"
+export * from "./ScrollText"
+export * from "./ShadedBg"
+export * from "./Shop"
+export * from "./StripeColored"
+export * from "./ThumbDown"
+export * from "./ThumbUp"
+export * from "./WindowPaintbrush"

package/src/components/InlineCode/index.tsx

@@ -0,0 +1,42 @@
+
+import React from "react"
+import clsx from "clsx"
+import { CopyButton } from "../../components/CopyButton"
+
+export type InlineCodeProps = React.ComponentProps<"code"> & {
+  variant?: "default" | "grey-bg"
+}
+
+export const InlineCode = ({
+  variant = "default",
+  ...props
+}: InlineCodeProps) => {
+  return (
+    <CopyButton
+      text={props.children as string}
+      buttonClassName={clsx(
+        "bg-transparent border-0 p-0 inline text-acmekit-fg-subtle group",
+        "font-monospace"
+      )}
+    >
+      <code
+        {...props}
+        className={clsx(
+          "text-acmekit-tag-neutral-text border whitespace-break-spaces",
+          "font-monospace text-code-label rounded-docs_sm py-0 px-[5px]",
+          variant === "default" && [
+            "bg-acmekit-tag-neutral-bg group-hover:bg-acmekit-tag-neutral-bg-hover",
+            "group-active:bg-acmekit-bg-subtle-pressed group-focus:bg-acmekit-bg-subtle-pressed",
+            "border-acmekit-tag-neutral-border",
+          ],
+          variant === "grey-bg" && [
+            "bg-acmekit-bg-switch-off group-hover:bg-acmekit-bg-switch-off-hover",
+            "group-active:bg-acmekit-bg-switch-off-hover group-focus:bg-acmekit-switch-off-hover",
+            "border-acmekit-border-strong",
+          ],
+          props.className
+        )}
+      />
+    </CopyButton>
+  )
+}

package/src/components/InlineIcon/index.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { IconProps } from "@acmekit/icons/dist/types"
+import clsx from "clsx"
+
+type InlineIconProps = IconProps & {
+  Icon: React.ComponentType<IconProps>
+  alt?: string
+}
+
+export const InlineIcon = ({ Icon, alt, ...props }: InlineIconProps) => {
+  return (
+    <Icon
+      {...props}
+      className={clsx(
+        "text-acmekit-fg-subtle inline-block align-middle",
+        props.className
+      )}
+      aria-label={alt}
+    />
+  )
+}

package/src/components/InlineThemeImage/index.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+import clsx from "clsx"
+import { ThemeImage, ThemeImageProps } from "../../components/ThemeImage"
+
+export const InlineThemeImage = (props: ThemeImageProps) => {
+  return (
+    <ThemeImage
+      {...props}
+      width={20}
+      height={20}
+      className={clsx(props.className, "inline")}
+    />
+  )
+}

package/src/components/Input/Search/index.tsx

@@ -0,0 +1,64 @@
+
+import { MagnifyingGlass, XMark } from "@acmekit/icons"
+import clsx from "clsx"
+import React from "react"
+import { useKeyboardShortcut } from "../../../hooks/use-keyboard-shortcut"
+import { Kbd } from "../../Kbd"
+
+type SearchInputProps = {
+  onChange: (value: string) => void
+} & Omit<React.ComponentProps<"input">, "onChange">
+
+export const SearchInput = ({
+  value,
+  onChange,
+  className,
+  placeholder = "Search...",
+  ...props
+}: SearchInputProps) => {
+  useKeyboardShortcut({
+    metakey: false,
+    shortcutKeys: ["escape"],
+    action: () => onChange(""),
+    checkEditing: false,
+    preventDefault: true,
+  })
+
+  return (
+    <div className="flex flex-col gap-docs_0.5">
+      <div className="relative">
+        <MagnifyingGlass className="absolute left-docs_0.5 top-[8.5px] bottom-[8.5px] text-acmekit-fg-muted" />
+        <input
+          type="text"
+          placeholder={placeholder}
+          className={clsx(
+            "w-full h-docs_2 pl-docs_2 text-base md:text-compact-small placeholder:text-acmekit-fg-muted",
+            "bg-acmekit-bg-field text-acmekit-fg-base rounded-full",
+            "shadow-borders-base hover:bg-acmekit-bg-field-hover",
+            "focus:bg-acmekit-bg-field focus:shadow-borders-interactive-with-active focus:outline-none",
+            className
+          )}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          {...props}
+        />
+        {value && (
+          <button
+            className={clsx(
+              "absolute right-docs_0.5 top-[8.5px] bottom-[8.5px] appearance-none",
+              "flex items-center justify-center"
+            )}
+            onClick={() => onChange("")}
+            data-testid="clear-button"
+          >
+            <XMark className="text-acmekit-fg-muted" />
+          </button>
+        )}
+      </div>
+      <span className="flex gap-docs_0.25 justify-end items-center text-compact-x-small">
+        <Kbd variant="small">esc</Kbd>
+        <span className="text-acmekit-fg-muted">Clear Search</span>
+      </span>
+    </div>
+  )
+}

package/src/components/Input/Text/index.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import clsx from "clsx"
+
+export type InputTextProps = {
+  className?: string
+  addGroupStyling?: boolean
+  passedRef?: React.Ref<HTMLInputElement>
+} & React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>
+
+export const InputText = ({
+  addGroupStyling = false,
+  className,
+  passedRef,
+  ...props
+}: InputTextProps) => {
+  return (
+    <input
+      {...props}
+      className={clsx(
+        "bg-acmekit-bg-field-component shadow-border-base dark:shadow-border-base-dark",
+        "rounded-docs_sm px-docs_0.5",
+        "hover:bg-acmekit-bg-field-component-hover",
+        addGroupStyling && "group-hover:bg-acmekit-bg-field-component-hover",
+        "focus:border-acmekit-border-interactive",
+        "active:border-acmekit-border-interactive",
+        "disabled:bg-acmekit-bg-disabled",
+        "disabled:border-acmekit-border-base",
+        "placeholder:text-acmekit-fg-muted",
+        "disabled:placeholder:text-acmekit-fg-disabled",
+        "text-compact-small font-base",
+        className
+      )}
+      ref={passedRef}
+    />
+  )
+}

package/src/components/Kbd/index.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import clsx from "clsx"
+
+export type KbdProps = React.ComponentProps<"kbd"> & {
+  variant?: "default" | "small"
+}
+
+export const Kbd = ({
+  children,
+  className,
+  variant = "default",
+  ...props
+}: KbdProps) => {
+  return (
+    <kbd
+      className={clsx(
+        "rounded-docs_xs border-solid border border-acmekit-border-base",
+        "inline-flex items-center justify-center",
+        "px-docs_0.25",
+        "bg-acmekit-bg-field",
+        "text-acmekit-fg-base",
+        "font-base shadow-none",
+        variant === "small"
+          ? "text-compact-x-small"
+          : "text-compact-x-small-plus",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </kbd>
+  )
+}

package/src/components/Label/index.tsx

@@ -0,0 +1,19 @@
+import clsx from "clsx"
+import React from "react"
+
+export type LabelProps = {
+  className?: string
+} & React.HTMLAttributes<HTMLSpanElement>
+
+export const Label = ({ children, className }: LabelProps) => {
+  return (
+    <span
+      className={clsx(
+        "text-acmekit-fg-base text-compact-medium-plus",
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}

package/src/components/Link/index.tsx

@@ -0,0 +1,67 @@
+import React from "react"
+import { Link as RouterLink } from "react-router-dom"
+import clsx from "clsx"
+import { TriangleRightMini } from "@acmekit/icons"
+
+export type LinkProps = React.AllHTMLAttributes<HTMLAnchorElement> & {
+  href?: string
+  children?: React.ReactNode
+  className?: string
+  withIcon?: boolean
+  variant?: "default" | "content"
+}
+
+const HASH_REGEX = /#.*$/
+
+export const Link = ({
+  href,
+  children,
+  className,
+  withIcon = false,
+  variant = "default",
+  ...rest
+}: LinkProps) => {
+  const hash = href?.match(HASH_REGEX)?.[0] || ""
+  const hrefWithoutHash = href?.replace(HASH_REGEX, "") || ""
+  if (hrefWithoutHash.endsWith("page.mdx")) {
+    href = hrefWithoutHash.replace("/page.mdx", "") + hash
+  }
+
+  const isExternal =
+    href?.startsWith("http") || href?.startsWith("//") || rest.target === "_blank"
+
+  const linkClassName = clsx(
+    variant === "default" &&
+      "text-acmekit-fg-interactive hover:text-acmekit-fg-interactive-hover",
+    variant === "content" && [
+      "underline decoration-acmekit-fg-muted hover:decoration-acmekit-fg-interactive",
+      "decoration-[1.5px] font-medium transition-[text-decoration-color]",
+    ],
+    withIcon && "flex gap-0.25 items-center group",
+    className
+  )
+
+  if (isExternal) {
+    return (
+      <a href={href || ""} {...rest} className={linkClassName}>
+        {children}
+        {withIcon && (
+          <TriangleRightMini className="group-hover:translate-x-docs_0.125 transition-transform" />
+        )}
+      </a>
+    )
+  }
+
+  return (
+    <RouterLink
+      to={href || ""}
+      {...(rest as any)}
+      className={linkClassName}
+    >
+      {children}
+      {withIcon && (
+        <TriangleRightMini className="group-hover:translate-x-docs_0.125 transition-transform" />
+      )}
+    </RouterLink>
+  )
+}

package/src/components/LinkButton/index.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { Link, LinkProps as RouterLinkProps } from "react-router-dom"
+import clsx from "clsx"
+
+type LinkButtonProps = RouterLinkProps & {
+  variant?: "base" | "interactive" | "subtle" | "muted"
+  className?: string
+}
+
+export const LinkButton = ({
+  variant = "base",
+  className,
+  ...linkProps
+}: LinkButtonProps) => {
+  return (
+    <Link
+      {...linkProps}
+      className={clsx(
+        className,
+        "inline-flex justify-center items-center",
+        "gap-docs_0.25 rounded-docs_xs",
+        "text-compact-small-plus disabled:text-acmekit-fg-disabled",
+        "focus:shadow-borders-focus no-underline",
+        variant === "base" && [
+          "text-acmekit-fg-base hover:text-acmekit-fg-subtle",
+          "focus:text-acmekit-fg-base",
+        ],
+        variant === "interactive" && [
+          "text-acmekit-fg-interactive hover:text-acmekit-interactive-hover",
+          "focus:text-acmekit-fg-interactive",
+        ],
+        variant === "subtle" && [
+          "text-acmekit-fg-subtle hover:text-acmekit-fg-base",
+          "focus:text-acmekit-fg-subtle",
+        ],
+        variant === "muted" && [
+          "text-acmekit-fg-muted hover:text-acmekit-fg-subtle",
+          "focus:text-acmekit-fg-muted",
+        ]
+      )}
+    />
+  )
+}

package/src/components/Loading/Dots/index.tsx

@@ -0,0 +1,16 @@
+import clsx from "clsx"
+import React from "react"
+
+export type DotsLoadingProps = {
+  className?: string
+}
+
+export const DotsLoading = ({ className }: DotsLoadingProps) => {
+  return (
+    <span className={clsx("text-medium text-acmekit-fg-subtle", className)}>
+      <span className="animate-pulsingDots">.</span>
+      <span className="animate-pulsingDots animation-delay-[500ms]">.</span>
+      <span className="animate-pulsingDots animation-delay-[1000ms]">.</span>
+    </span>
+  )
+}

package/src/components/Loading/Spinner/index.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import clsx from "clsx"
+import { Spinner } from "@acmekit/icons"
+import { IconProps } from "@acmekit/icons/dist/types"
+
+export type SpinnerLoadingProps = {
+  iconProps?: IconProps
+}
+
+export const SpinnerLoading = ({ iconProps }: SpinnerLoadingProps) => {
+  return (
+    <span role="status">
+      <Spinner
+        {...iconProps}
+        className={clsx("animate-spin", iconProps?.className)}
+      />
+    </span>
+  )
+}

package/src/components/Loading/index.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import clsx from "clsx"
+
+export type LoadingProps = {
+  className?: string
+  barClassName?: string
+  count?: number
+}
+
+export const Loading = ({
+  className,
+  count = 6,
+  barClassName,
+}: LoadingProps) => {
+  const getLoadingBars = () => {
+    const bars = []
+    for (let i = 0; i < count; i++) {
+      bars.push(
+        <span
+          className={clsx(
+            "bg-acmekit-bg-subtle-pressed h-docs_1 w-full rounded-full",
+            barClassName
+          )}
+          key={i}
+        ></span>
+      )
+    }
+
+    return bars
+  }
+  return (
+    <span
+      role="status"
+      className={clsx(
+        "my-docs_1 flex w-full animate-pulse flex-col gap-docs_1",
+        className
+      )}
+    >
+      {getLoadingBars()}
+      <span className="sr-only">Loading...</span>
+    </span>
+  )
+}