@adaptive-sm/astro-ui 0.2.1 → 0.4.0

package/lib/header/PageHeader.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { classMerge } from "~ui/utils/classMerge"
+
+interface Props {
+  title: string
+  subtitle?: string
+  titleClass?: string
+  subtitleClass?: string
+  innerClass?: string
+  class?: string
+  restProps?: HTMLAttributes<"header">
+}
+
+const p = Astro.props
+---
+
+<header class={p.class}>
+  <div class={classMerge("flex flex-wrap justify-between items-center gap-4", p.innerClass)} {...p.restProps}>
+    <h1 class={classMerge("text-2xl font-semibold", p.titleClass)}>{p.title}</h1>
+    <slot />
+  </div>
+  {p.subtitle && <p class={classMerge("text-lg", p.subtitleClass)}>{p.subtitle}</p>}
+  <slot name="subtitle" />
+</header>

package/lib/header/SectionHeader.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { buttonVariant } from "~ui/button/buttonCva"
+import LinkButton from "~ui/link/LinkButton.astro"
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+import { classMerge } from "~ui/utils/classMerge"
+
+interface Props extends MayHaveClass {
+  icon: string
+  href?: string
+  title: string
+  titleClass?: string
+  subtitle?: string
+  subtitleClass?: string
+  innerClass?: string
+  class?: string
+  restProps?: HTMLAttributes<"header">
+}
+
+const p = Astro.props
+---
+
+<div class={classMerge("flex flex-wrap items-center justify-between gap-4", p.class)} {...p.restProps}>
+  <h2 class={classMerge("text-2xl font-semibold", p.titleClass)}>
+    {
+      p.href ? (
+        <LinkButton href={p.href} icon={p.icon} variant={buttonVariant.link} class="pl-0">
+          {p.title}
+        </LinkButton>
+      ) : (
+        p.title
+      )
+    }
+  </h2>
+  {p.subtitle && <p class={classMerge("text-lg", p.subtitleClass)}>{p.subtitle}</p>}
+  <slot />
+</div>

package/lib/icon/Icon.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { classMerge } from "~ui/utils/classMerge"
+
+interface Props {
+  id?: string
+  pathId?: string
+  path: string
+  class?: string
+  title?: string
+  ariaHidden?: boolean
+  restProps?: HTMLAttributes<"svg">
+}
+const p = Astro.props
+const ariaHidden = p.ariaHidden ?? !p.title
+---
+
+<svg
+  id={p.id}
+  viewBox={"0 0 24 24"}
+  aria-hidden={ariaHidden}
+  class={classMerge("size-6 flex-shrink-0 align-middle dark:fill-white", p.class)}
+  {...p.restProps}
+>
+  <path id={p.pathId} d={p.path}></path>
+</svg>

package/lib/icons/iconApple.ts

@@ -0,0 +1 @@
+export const iconApple = "M 12.1267 7.74663 C 11.3367 7.74663 10.1142 6.8483 8.82669 6.87997 C 7.1267 6.90247 5.56838 7.8658 4.69255 9.39162 C 2.9284 12.4541 4.23756 16.9774 5.95838 19.4666 C 6.80254 20.6782 7.79837 22.0415 9.11836 21.999 C 10.385 21.9449 10.86 21.1765 12.3975 21.1765 C 13.9233 21.1765 14.3558 21.999 15.6975 21.9665 C 17.0616 21.9449 17.9275 20.7332 18.7608 19.5099 C 19.7241 18.1032 20.1241 16.7391 20.1458 16.6641 C 20.1133 16.6532 17.4941 15.6466 17.4625 12.6166 C 17.4408 10.0833 19.5291 8.87162 19.6266 8.81746 C 18.4358 7.0758 16.6075 6.8808 15.9683 6.83747 C 14.3017 6.70747 12.9058 7.7458 12.1267 7.7458 Z M 14.9417 5.19165 C 15.6441 4.34832 16.1083 3.16916 15.9791 2 C 14.9733 2.04333 13.7608 2.67083 13.0358 3.51499 C 12.3858 4.26165 11.8242 5.46331 11.975 6.60997 C 13.09 6.69664 14.2375 6.03664 14.9408 5.19248"

package/lib/icons/iconGithub.ts

@@ -0,0 +1,4 @@
+/**
+ * https://authjs.dev/img/providers/github.svg
+ */
+export const iconGithub = "M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"

package/lib/icons/iconGoogle.ts

@@ -0,0 +1,4 @@
+/**
+ * https://authjs.dev/img/providers/google.svg
+ */
+export const iconGoogle = "M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z"

package/lib/icons/iconGooglePlay.ts

@@ -0,0 +1,2 @@
+export const iconGooglePlay =
+  "m20.35 13.08-3.266 1.848-2.929-2.911 2.953-2.934 3.242 1.835c.3896.2204.6305.6333.6305 1.081s-.2409.8605-.6305 1.081zm-17.23-10.31c-.06184.1501-.09356.311-.09334.4733v17.51c0 .1809.0375.3492.1033.5001l9.296-9.239zm10.17 8.388 2.715-2.698-11.13-6.297c-.2385-.137-.5163-.1896-.7883-.1492zm0 1.723-9.167 9.111c.2483.03.51-.0133.755-.1525l11.1-6.283z"

package/lib/icons/iconLinkedin.ts

@@ -0,0 +1,2 @@
+export const iconLinkedin =
+  "m3 4.29c0-.712.592-1.29 1.32-1.29h15.4c.73 0 1.32.577 1.32 1.29v15.4c0 .712-.592 1.29-1.32 1.29h-15.4c-.73 0-1.32-.577-1.32-1.29zm5.56 13.8v-8.13h-2.7v8.13zm-1.35-9.24c.942 0 1.53-.623 1.53-1.4-.0169-.798-.585-1.4-1.51-1.4-.925 0-1.53.608-1.53 1.4 0 .781.586 1.4 1.49 1.4zm5.52 9.24v-4.54c0-.243.018-.486.09-.659.195-.485.639-.988 1.39-.988.978 0 1.37.745 1.37 1.84v4.35h2.7v-4.66c0-2.5-1.33-3.66-3.11-3.66-1.43 0-2.08.788-2.44 1.34v.0281h-.018l.018-.0281v-1.15h-2.7c.0337.763 0 8.13 0 8.13z"

package/lib/icons/iconNpm.ts

@@ -0,0 +1,2 @@
+export const iconNpm =
+  "M4,10V14H6V11H7V14H8V10H4M9,10V15H11V14H13V10H9M12,11V13H11V11H12M14,10V14H16V11H17V14H18V11H19V14H20V10H14M3,9H21V15H12V16H8V15H3V9Z"

package/lib/icons/iconTelegram.ts

@@ -0,0 +1,2 @@
+export const iconTelegram =
+  "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"

package/lib/icons/iconTrello.ts

@@ -0,0 +1,2 @@
+export const iconTrello =
+  "m18.9 3h-13.7c-1.18.00289-2.14.959-2.14 2.14v13.7c.00289 1.18.959 2.14 2.14 2.14h13.7c1.18-.0029 2.14-.959 2.14-2.14v-13.7c-.0029-1.18-.959-2.14-2.14-2.14zm-8.11 13c0 .19-.0753.371-.209.506-.134.134-.316.209-.505.209h-3c-.395 0-.715-.32-.716-.715v-8.93c0-.19.0754-.372.21-.506s.316-.209.506-.209h3c.395.00041.714.32.715.715zm6.92-4.1c7e-4.189-.0746.371-.209.504s-.316.208-.506.206h-3c-.189.0011-.371-.0732-.505-.206-.134-.133-.21-.315-.21-.504v-4.83c1e-4-.395.32-.715.715-.715h3c.395.00041.714.32.715.715z"

package/lib/icons/iconXcom.ts

@@ -0,0 +1 @@
+export const iconXcom = "m13.9 10.4 7.45-8.65h-1.76l-6.46 7.51-5.16-7.51h-5.96l7.81 11.4-7.81 9.08h1.76l6.83-7.94 5.45 7.94h5.96zm-2.42 2.81-7.09-10.1h2.71l12.5 17.8h-2.71z"

package/lib/img/Img.astro

@@ -1,8 +1,10 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import { classesImgZoomInOnHover10 } from "./classesImgZoomInOnHover10"
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
+  id?: string
   alt: string
   src: string
   zoomIn?: boolean
@@ -10,18 +12,21 @@ interface Props {
   size?: number
   width?: number | null | undefined
   height?: number | null | undefined
-  loadingLazy?:boolean
-  decodeAsync?:boolean
+  loadingLazy?: boolean
+  decodeAsync?: boolean
+  restProps?: HTMLAttributes<"img">
 }
 const p = Astro.props
 ---
 
 <img
+  id={p.id}
   src={p.src}
   alt={p.alt}
   class={classMerge(p.zoomIn && classesImgZoomInOnHover10, p.class)}
-  loading={p.loadingLazy ?? true ? "lazy" : undefined}
-  decoding={p.decodeAsync ?? true ? "async" : undefined}
+  loading={(p.loadingLazy ?? true) ? "lazy" : undefined}
+  decoding={(p.decodeAsync ?? true) ? "async" : undefined}
   width={p.size ?? p.width}
   height={p.size ?? p.height}
+  {...p.restProps}
 />

package/lib/img/TypedImg.astro

@@ -1,29 +1,30 @@
 ---
-import { classArr } from "~/utils/ui/classArr"
+import type { HTMLAttributes } from "astro/types"
+import { classInvertBlack } from "~ui/img/classInvertBlack"
+import { classArr } from "~ui/utils/classArr"
 import type { ImageType } from "./ImageType"
 import Img from "./Img.astro"
-import { classInvertBlack } from "~/img/classInvertBlack"
 
 interface Props {
+  id?: string
   img: ImageType
   zoomIn?: boolean
   invertColorsInDarkMode?: boolean
   class?: string
+  srcPrefix?: string
+  restProps?: HTMLAttributes<"img">
 }
 const p = Astro.props
 const isSvg = p.img.path.endsWith(".svg")
-// const invert = isSvg && p.invertColorsInDarkMode
-const invert = p.invertColorsInDarkMode
-
-function imageUrl(p: string) {
-  return "/media-b2/" + p
-}
+const imageUrl = (p.srcPrefix ? p.srcPrefix : "") + p.img.path
 ---
 
 <Img
-  src={imageUrl(p.img.path)}
+  id={p.id}
+  src={imageUrl}
   alt={p.img.alt}
-  class={classArr(invert ? classInvertBlack : "", p.class)}
+  class={classArr(p.invertColorsInDarkMode ? classInvertBlack : "", p.class)}
   width={isSvg ? null : p.img.width}
   height={isSvg ? null : p.img.height}
+  restProps={p.restProps}
 />

package/lib/img/TypedImgB2.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { ImageType } from "./ImageType"
+import TypedImg from "~ui/img/TypedImg.astro"
+
+interface Props {
+  id?: string
+  img: ImageType
+  zoomIn?: boolean
+  invertColorsInDarkMode?: boolean
+  class?: string
+  restProps?: HTMLAttributes<"img">
+}
+const p = Astro.props
+---
+
+<TypedImg
+  id={p.id}
+  img={p.img}
+  srcPrefix="/media-b2/"
+  zoomIn={p.zoomIn}
+  invertColorsInDarkMode={p.invertColorsInDarkMode}
+  class={p.class}
+  restProps={p.restProps}
+/>

package/lib/layouts/MarkdownPageWrapper.astro

@@ -0,0 +1,19 @@
+---
+import { classMerge } from "~ui/utils/classMerge"
+import { classesCardWrapperPage } from "~ui/card/classesCardWrapper"
+import MarkdownDiv from "~ui/md/MarkdownDiv.astro"
+import PageCentered from "~ui/page/PageCentered.astro"
+
+interface Props {
+  class?: string
+  innerClass?: string
+}
+
+const p = Astro.props
+---
+
+<PageCentered class={classMerge("max-w-5xl my-12", p.class)}>
+  <MarkdownDiv class={classMerge(classesCardWrapperPage, p.innerClass)}>
+    <slot />
+  </MarkdownDiv>
+</PageCentered>

package/lib/layouts/MinimalLayout.astro

@@ -1,20 +1,23 @@
 ---
-import { classArr } from "../utils/ui/classArr"
-import { objectKeys } from "~/utils/obj/objectKeys"
-import TailwindIndicator from "~/dev/TailwindIndicator.astro"
+import TailwindIndicator from "~ui/dev/TailwindIndicator.astro"
+
+import { classMerge } from "~ui/utils/classMerge"
+import { classArr } from "../utils/classArr"
 
 export interface Props {
+  lang?: string
   title: string
   description?: string
   meta?: Record<string, string>
   class?: string
+  bodyClass?: string
 }
 
-const props = Astro.props
+const p = Astro.props
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang={p.lang ?? "en"}>
   <head>
     <!-- Base -->
     <meta charset="UTF-8" />
@@ -22,8 +25,8 @@ const props = Astro.props
     <meta name="generator" content={Astro.generator} />
 
     <!-- Site -->
-    <title>{props.title}</title>
-    {props.description && <meta name="description" content={props.description} />}
+    <title>{p.title}</title>
+    {p.description && <meta name="description" content={p.description} />}
 
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
 
@@ -38,25 +41,29 @@ const props = Astro.props
     <meta name="googlebot" content="index, follow" />
 
     {
-      props.meta && (
+      p.meta && (
         <Fragment>
-          {objectKeys(props.meta).map((k) => (
-            <meta property={k} content={props.meta![k]} />
+          {Object.entries(p.meta).map(([k, v]) => (
+            <meta property={k} content={v} />
           ))}
         </Fragment>
       )
     }
+    <slot name="head" />
   </head>
-  <body class="min-h-dvh w-full font-sans antialiased bg-background text-foreground">
+  <body
+    class={classMerge(
+      "min-h-dvh w-full", // full screen
+      "font-sans antialiased text-foreground", // text
+      p.bodyClass,
+    )}
+  >
     <slot name="navbar" />
     <main
       id="main"
       class={classArr(
-        "relative min-h-dvh",
-        "w-full",
-        "flex flex-col items-center",
-        props.class,
-        //
+        "relative min-h-dvh w-full", // full screen
+        p.class,
       )}
     >
       <slot />

package/lib/layouts/parts/ThemeToggle.astro

@@ -1,10 +1,10 @@
 ---
 import { mdiMoonWaxingCrescent, mdiWhiteBalanceSunny } from "@mdi/js"
-import { buttonVariant, type ButtonVariant } from "~/button/buttonCva"
-import Button from "~/button/Button.astro"
-import Icon1 from "~/icon/Icon1.astro"
-import { classArr } from "~/utils/ui/classArr"
-import { astroElementId } from "~/layouts/parts/astroElementId"
+import { buttonVariant, type ButtonVariant } from "~ui/button/buttonCva"
+import Button from "~ui/button/Button.astro"
+import Icon from "~ui/icon/Icon.astro"
+import { classArr } from "~ui/utils/classArr"
+import { astroElementId } from "~ui/layouts/parts/astroElementId"
 
 /*
  * have to use "is:inline" script to run/apply theme before page render -> white flash on page reload otherwise
@@ -40,10 +40,10 @@ const textDark = p.textDark ?? "Dark"
   class={classArr(p.class)}
   contentClass={classArr("flex flex-row gap-1")}
 >
-  <Icon1 path={mdiWhiteBalanceSunny} class={classArr("size-6 dark:hidden mr-2", p.iconClass, p.iconLightClass)} />
-  <Icon1 path={mdiMoonWaxingCrescent} class={classArr("hidden size-6 dark:block mr-2", p.iconClass, p.iconDarkClass)} />
-  <p id="theme-toggle-text-light" class={classArr("dark:hidden", p.textClass, p.textLightClass)}>{textLight}</p>
-  <p id="theme-toggle-text-dark" class={classArr("hidden dark:block", p.textClass, p.textDarkClass)}>{textDark}</p>
+  <Icon path={mdiWhiteBalanceSunny} class={classArr("size-6 dark:hidden mr-2", p.iconClass, p.iconLightClass)} />
+  <Icon path={mdiMoonWaxingCrescent} class={classArr("hidden size-6 dark:block mr-2", p.iconClass, p.iconDarkClass)} />
+  <span id="theme-toggle-text-light" class={classArr("dark:hidden", p.textClass, p.textLightClass)}>{textLight}</span>
+  <span id="theme-toggle-text-dark" class={classArr("hidden dark:block", p.textClass, p.textDarkClass)}>{textDark}</span>
 </Button>
 
 <script is:inline>

package/lib/link/LinkButton.astro

@@ -1,8 +1,9 @@
 ---
-import { buttonCva2, buttonVariant, type ButtonSize, type ButtonVariant } from "~/button/buttonCva"
-import { buttonIconCva } from "~/button/buttonIconCva"
-import { classesButtonClickAnimation } from "~/button/classesButtonClickAnimation"
-import Icon1 from "~/icon/Icon1.astro"
+import type { HTMLAttributes } from "astro/types"
+import { buttonCva2, buttonVariant, type ButtonSize, type ButtonVariant } from "~ui/button/buttonCva"
+import { buttonIconCva } from "~ui/button/buttonIconCva"
+import { classesButtonClickAnimation } from "~ui/button/classesButtonClickAnimation"
+import Icon from "~ui/icon/Icon.astro"
 
 interface Props {
   title?: string
@@ -16,32 +17,30 @@ interface Props {
   class?: string
   id?: string
   clickAnimation?: boolean
+  restProps?: HTMLAttributes<"a">
 }
-const props = Astro.props
+const p = Astro.props
 const hasChildren = Astro.slots.has("default")
 const classes = buttonCva2(
-  props.variant ?? buttonVariant.link,
-  props.size,
-  props.clickAnimation ?? classesButtonClickAnimation,
-  props.class,
+  p.variant ?? buttonVariant.link,
+  p.size,
+  p.clickAnimation ?? classesButtonClickAnimation,
+  p.class,
 )
 ---
 
-<a href={props.href} class={classes} target={props.newTab ? "_blank" : undefined} id={props.id} title={props.title}>
+<a href={p.href} class={classes} target={p.newTab ? "_blank" : undefined} id={p.id} title={p.title} {...p.restProps}>
   {
-    props.icon && (
-      <Icon1
-        path={props.icon}
-        class={buttonIconCva(props.variant ?? "link", (props.title || hasChildren) && "mr-2", props.iconClass)}
-      />
+    p.icon && (
+      <Icon path={p.icon} class={buttonIconCva(p.variant ?? "link", (p.title || hasChildren) && "mr-2", p.iconClass)} />
     )
   }
   <slot />
   {
-    props.iconRight && (
-      <Icon1
-        path={props.iconRight}
-        class={buttonIconCva(props.variant ?? "link", (props.title || hasChildren) && "ml-2", props.iconClass)}
+    p.iconRight && (
+      <Icon
+        path={p.iconRight}
+        class={buttonIconCva(p.variant ?? "link", (p.title || hasChildren) && "ml-2", p.iconClass)}
       />
     )
   }

package/lib/link/LinkText.astro

@@ -1,23 +1,26 @@
 ---
-import { classMerge } from "~/utils/ui/classMerge"
+import type { HTMLAttributes } from "astro/types"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   title?: string
   href: string
   newTab?: boolean
   class?: string
+  restProps?: HTMLAttributes<"a">
 }
-const props = Astro.props
-const title = props.title
-const href = props.href
-const newTab = props.newTab
+const p = Astro.props
+const title = p.title
+const href = p.href
+const newTab = p.newTab
 ---
 
 <a
   href={href}
-  class={classMerge("text-blue-500 no-underline hover:underline", props.class)}
+  class={classMerge("text-blue-500 no-underline hover:underline", p.class)}
   target={newTab ? "_blank" : undefined}
   title={title}
+  {...p.restProps}
 >
-  <slot/>
+  <slot />
 </a>

package/lib/link/classesTextLink.ts

@@ -1,4 +1,4 @@
-import { classArr } from "../utils/ui/classArr"
+import { classArr } from "../utils/classArr"
 
 export const classesTextLink = classArr(
   "text-blue-600 hover:text-black", // light

package/lib/list/BlackBulletPoint.astro

@@ -1,5 +1,5 @@
 ---
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   class?: string

package/lib/list/BlackBulletPoints.astro

@@ -1,8 +1,8 @@
 ---
 import { mdiCircle } from "@mdi/js"
-import { classMerge } from "~/utils/ui/classMerge"
+import Icon from "~ui/icon/Icon.astro"
+import { classMerge } from "~ui/utils/classMerge"
 import TextOrLink from "./TextOrLink.astro"
-import Icon1 from "~/icon/Icon1.astro"
 
 interface Props {
   points: string[] | Readonly<string[]>
@@ -10,14 +10,14 @@ interface Props {
   classText?: string
   classBullet?: string
 }
-const props = Astro.props
+const p = Astro.props
 ---
 
 {
-  props.points.map((p) => (
-    <div class={classMerge("flex flex-row flex-nowrap", props.class)}>
-      <Icon1 path={mdiCircle} class={classMerge("w-1.5 h-1.5 mt-3 mx-1.5 shrink-0", props.classBullet)} />
-      <TextOrLink text={p} class={props.classText} />
+  p.points.map((point) => (
+    <div class={classMerge("flex gap-1", p.class)}>
+      <Icon path={mdiCircle} class={classMerge("size-1.5 mt-2.5 shrink-0", p.classBullet)} />
+      <TextOrLink text={point} class={p.classText} />
     </div>
   ))
 }

package/lib/list/CheckPoint.astro

@@ -1,8 +1,8 @@
 ---
 import { mdiCheck } from "@mdi/js"
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
 import TextOrLink from "./TextOrLink.astro"
-import Icon1 from "~/icon/Icon1.astro"
+import Icon from "~ui/icon/Icon.astro"
 
 interface Props {
   point: string
@@ -14,7 +14,7 @@ const p = Astro.props
 ---
 
 <div class={classMerge("flex flex-row flex-nowrap", p.class)}>
-  <Icon1 path={mdiCheck} class={classMerge("fill-green-600 dark:fill-green-600 mr-1 flex-none", p.classBullet)} />
+  <Icon path={mdiCheck} class={classMerge("fill-green-600 dark:fill-green-600 mr-1 flex-none", p.classBullet)} />
   <TextOrLink text={p.point} class={p.classText} />
   <slot />
 </div>

package/lib/list/CheckPoints.astro

@@ -1,7 +1,7 @@
 ---
 import { mdiCheck } from "@mdi/js"
-import { classMerge } from "~/utils/ui/classMerge"
-import Icon1 from "~/icon/Icon1.astro"
+import { classMerge } from "~ui/utils/classMerge"
+import Icon from "~ui/icon/Icon.astro"
 import TextOrLink from "./TextOrLink.astro"
 
 interface Props {
@@ -16,7 +16,7 @@ const props = Astro.props
 {
   props.points.map((p) => (
     <div class={classMerge("flex flex-row flex-nowrap", props.class)}>
-      <Icon1 path={mdiCheck} class={classMerge("fill-green-600 dark:fill-green-600 mr-1 flex-none", props.classBullet)} />
+      <Icon path={mdiCheck} class={classMerge("fill-green-600 dark:fill-green-600 mr-1 flex-none", props.classBullet)} />
       <TextOrLink text={p} class={props.classText} />
     </div>
   ))

package/lib/list/NumberedList.astro

@@ -1,5 +1,5 @@
 ---
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   points: string[] | Readonly<string[]>

package/lib/list/Ps.astro

@@ -1,12 +1,15 @@
 ---
-interface Props {
-  lines: string[] | Readonly<string[]>
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+
+interface Props extends MayHaveClass {
+  text?: string
+  lines?: string[]
   class?: string
 }
-const props = Astro.props
-const lines = props.lines
+const p = Astro.props
+const lines = p.lines ?? (p.text ? p.text.split("\n") : [])
 ---
 
 <>
-  {lines.map((line) => <p class={props.class}>{line}</p>)}
+  {lines.map((line) => <p class={p.class}>{line}</p>)}
 </>

package/lib/list/TextOrLink.astro

@@ -1,6 +1,6 @@
 ---
-import LinkText from "~/link/LinkText.astro"
-import { classMerge } from "~/utils/ui/classMerge"
+import LinkText from "~ui/link/LinkText.astro"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   text: string
@@ -10,10 +10,4 @@ const props = Astro.props
 const text = props.text
 ---
 
-{
-  text.startsWith("http") ? (
-    <LinkText href={text}>{text}</LinkText>
-  ) : (
-    <p class={classMerge("leading-relaxed", props.class)}>{text}</p>
-  )
-}
+{text.startsWith("http") ? <LinkText href={text}>{text}</LinkText> : <p class={classMerge(props.class)}>{text}</p>}

package/lib/md/MarkdownDiv.astro

@@ -0,0 +1,18 @@
+---
+import { classArr } from "~ui/utils/classArr"
+
+import type { HTMLAttributes } from "astro/types"
+import "./markdown.css"
+
+interface Props {
+  id?: string
+  class?: string
+  restProps?: HTMLAttributes<"div">
+}
+
+const p = Astro.props
+---
+
+<div id={p.id} class={classArr("markdown-body", p.class)} {...p.restProps}>
+  <slot />
+</div>