@adaptive-sm/astro-ui 0.1.1 → 0.3.0

package/lib/generate_image_list/generateImageList.ts

@@ -1,11 +1,33 @@
 import imageSize from "image-size"
 import { promises as fs } from "node:fs"
 import path from "node:path"
-import type { ImageType } from "~/img/ImageType"
-import { runCmdAsync } from "~/utils/bun/runCmdAsync"
+import type { ImageType } from "~ui/img/ImageType"
+import { runCmdAsync } from "~utils/bun/runCmdAsync"
 
 const IMAGE_EXTENSIONS = new Set([".jpg", ".jpeg", ".png", ".gif", ".webp", ".avif", ".tiff", ".svg"])
 
+function getMimeType(ext: string): string {
+  switch (ext) {
+    case ".jpg":
+    case ".jpeg":
+      return "image/jpeg"
+    case ".png":
+      return "image/png"
+    case ".gif":
+      return "image/gif"
+    case ".webp":
+      return "image/webp"
+    case ".avif":
+      return "image/avif"
+    case ".tiff":
+      return "image/tiff"
+    case ".svg":
+      return "image/svg+xml"
+    default:
+      return "application/octet-stream"
+  }
+}
+
 export async function generateImageList(
   imageDirectory: string,
   existingImages: Record<string, ImageType>,
@@ -20,7 +42,7 @@ export async function generateImageList(
 
 async function writeGeneratedImagesFile(imageMap: Record<string, ImageType>, outputPath: string): Promise<void> {
   const outputContent = `
-  import type { ImageType } from "~/img/ImageType"
+  import type { ImageType } from "~ui/img/ImageType"
   // Auto-generated, manual changes will be lost
 export const imageList = ${JSON.stringify(imageMap, null, 2)} as const satisfies Record<string, ImageType>;
 `
@@ -55,12 +77,14 @@ async function processImageFiles(
 
       const prevAlt = existingImages[key]?.alt
       const alt = prevAlt || fileName.replace(/[-_]/g, " ")
+      const mimeType = getMimeType(ext)
 
       imageMap[key] = {
         path: relativePath,
         width: dimensions.width,
         height: dimensions.height,
         alt,
+        mimeType,
       }
     } catch (error) {
       console.error(`Error processing ${filePath}:`, error)

package/lib/grid/FeatureGridSection.astro

@@ -0,0 +1,73 @@
+---
+import Icon from "~ui/icon/Icon.astro"
+import { classArr } from "~ui/utils/classArr"
+import { mdiLink } from "@mdi/js"
+import type { GridFeatureType } from "./GridFeatureType"
+import { classMerge } from "~ui/utils/classMerge"
+import type { HTMLAttributes } from "astro/types"
+import type { CssProperties } from "node_modules/astro/dist/assets/fonts/definitions"
+import { classesShadowMdLg } from "~ui/card/classesShadow"
+
+interface Props {
+  id: string
+  title: string
+  titleClass?: string
+  subtitle1: string
+  subtitle1Class?: string
+  subtitle2?: string
+  subtitle2Class?: string
+  features: GridFeatureType[]
+  class?: string
+  headerClass?: string
+  gridClass?: string
+  cardClass?: string
+  restProps?: HTMLAttributes<"section">
+  style?: CssProperties
+}
+const p = Astro.props
+---
+
+<section id={p.id} class={classMerge("w-full", "py-25 px-4", p.class)} style={p.style} {...p.restProps}>
+  <div class={classArr("max-w-7xl mx-auto", "text-center mb-8", p.headerClass)}>
+    <h2 class={classArr("text-3xl sm:text-4xl font-bold", "mb-4", "group flex items-center justify-center")}>
+      <span>{p.title}</span>
+      <a
+        href={"#" + p.id}
+        class="opacity-0 group-hover:opacity-100 p-1 rounded hidden sm:flex"
+        title="Link to this section"
+      >
+        <Icon path={mdiLink} class="size-6 fill-gray-500 dark:fill-gray-500" />
+      </a>
+    </h2>
+    <p class={classMerge("text-xl text-muted-foreground mx-auto", p.subtitle1Class)}>
+      {p.subtitle1}
+    </p>
+    {
+      p.subtitle2 && (
+        <p class={classMerge("text-xl text-muted-foreground mx-auto mt-1", p.subtitle2Class)}>{p.subtitle2}</p>
+      )
+    }
+  </div>
+
+  <div class={classMerge("grid md:grid-cols-2 lg:grid-cols-3 gap-8", "max-w-7xl mx-auto", p.gridClass)}>
+    {
+      p.features.map((feature, index) => (
+        <div
+          class={classMerge(
+            "bg-white dark:bg-gray-800", // bg
+            "rounded-lg p-6", // padding
+            // "border", // border
+            classesShadowMdLg,
+            p.cardClass,
+          )}
+        >
+          <div class="flex items-center gap-3 mb-4">
+            <Icon path={feature.icon} class="size-8" />
+            <h3 class="text-xl font-semibold">{feature.title}</h3>
+          </div>
+          <p class="text-muted-foreground">{feature.description}</p>
+        </div>
+      ))
+    }
+  </div>
+</section>

package/lib/grid/GridFeatureType.ts

@@ -0,0 +1,5 @@
+export type GridFeatureType = {
+  icon: string
+  title: string
+  description: string
+}

package/lib/grid/classesGridCols.ts

@@ -1,14 +1,33 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classArr } from "~ui/utils/classArr"
 
 export const classesGridCols2ContentFr = "grid grid-cols-[max-content_1fr]"
 export const classesGridCols3MaxMinFr = "grid grid-cols-[max-content_min-content_1fr]"
 
+export const classesGridCols2sm = classArr("grid grid-cols-1", "sm:grid-cols-2")
+
+export const classesGridCols2md = classArr("grid grid-cols-1", "md:grid-cols-2")
+
+/**
+ * 1280/2 = 640 px = 35.5 rem / col
+ */
+export const classesGridCols2lg = classArr("grid grid-cols-1", "lg:grid-cols-2")
+
 /**
  * ~600 px (37rem, ~60ch) / col
  */
 export const classesGridCols2xl = classArr("grid grid-cols-1", "xl:grid-cols-2")
 export const classesGridCols2xl3 = classArr(classesGridCols2xl, "2xl:grid-cols-4", "3xl:grid-cols-6")
 
+/**
+ * 1024/3 = 341 px = 19rem / col
+ * xl: 1280/340 = 3.75
+ * lg: 1024/340 = 3
+ * md: 768/340 = 2.26
+ * sm: 640/340 = 1.8
+ * xs: 400/340 = 1.17
+ */
+export const classesGridCols3lg = classArr("grid grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3")
+
 /**
  * ~400 px (25rem, ~40ch) / col
  */
@@ -36,7 +55,13 @@ export const classesGridCols4xl3 = classArr(classesGridCols4xl, "2xl:grid-cols-8
  * sm: 640/256 = 2.5
  * xs: 400/256 = 1.56
  */
-export const classesGridCols5xl = classArr("grid grid-cols-1", "sm:grid-cols-2", "md:grid-cols-3", "lg:grid-cols-4", "xl:grid-cols-5")
+export const classesGridCols5xl = classArr(
+  "grid grid-cols-1",
+  "sm:grid-cols-2",
+  "md:grid-cols-3",
+  "lg:grid-cols-4",
+  "xl:grid-cols-5",
+)
 export const classesGridCols5xl3 = classArr(classesGridCols5xl, "2xl:grid-cols-10", "3xl:grid-cols-15")
 
 /**

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/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/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/ImageType.ts

@@ -3,4 +3,5 @@ export type ImageType = {
   height: number
   width: number
   alt: string
+  mimeType?: string
 }

package/lib/img/Img.astro

@@ -1,6 +1,7 @@
 ---
-import { classesImgZoomInOnHover } from "./classesImgZoomInOnHover"
-import { classMerge } from "~/utils/ui/classMerge"
+import type { HTMLAttributes } from "astro/types"
+import { classesImgZoomInOnHover10 } from "./classesImgZoomInOnHover10"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   alt: string
@@ -10,8 +11,9 @@ 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
 ---
@@ -19,9 +21,10 @@ const p = Astro.props
 <img
   src={p.src}
   alt={p.alt}
-  class={classMerge(p.zoomIn && classesImgZoomInOnHover, p.class)}
-  loading={p.loadingLazy ?? true ? "lazy" : undefined}
-  decoding={p.decodeAsync ?? true ? "async" : undefined}
+  class={classMerge(p.zoomIn && classesImgZoomInOnHover10, p.class)}
+  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,26 +1,28 @@
 ---
-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 { classInvertDiagram } from "~/img/classInvertDiagram"
 
 interface Props {
   img: ImageType
   zoomIn?: boolean
+  invertColorsInDarkMode?: boolean
   class?: string
+  srcPrefix?: string
+  restProps?: HTMLAttributes<"img">
 }
-const props = Astro.props
-const isSvg = props.img.path.endsWith(".svg")
-
-function imageUrl(p: string) {
-  return "/media-b2/" + p
-}
+const p = Astro.props
+const isSvg = p.img.path.endsWith(".svg")
+const imageUrl = (p.srcPrefix ? p.srcPrefix : "") + p.img.path
 ---
 
 <Img
-  src={imageUrl(props.img.path)}
-  alt={props.img.alt}
-  class={classArr(isSvg ? classInvertDiagram : "", props.class)}
-  width={isSvg ? null : props.img.width}
-  height={isSvg ? null : props.img.height}
+  src={imageUrl}
+  alt={p.img.alt}
+  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,23 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import type { ImageType } from "./ImageType"
+import TypedImg from "~ui/img/TypedImg.astro"
+
+interface Props {
+  img: ImageType
+  zoomIn?: boolean
+  invertColorsInDarkMode?: boolean
+  class?: string
+  restProps?: HTMLAttributes<"img">
+}
+const p = Astro.props
+---
+
+<TypedImg
+  img={p.img}
+  srcPrefix="/media-b2/"
+  zoomIn={p.zoomIn}
+  invertColorsInDarkMode={p.invertColorsInDarkMode}
+  class={p.class}
+  restProps={p.restProps}
+/>

package/lib/img/classInvertBlack.ts

@@ -0,0 +1 @@
+export const classInvertBlack = "invert-black"

package/lib/img/classesImgZoomInOnHover10.ts

@@ -0,0 +1 @@
+export const classesImgZoomInOnHover10 = "transform transition-transform duration-200 hover:scale-110"

package/lib/img/classesImgZoomInOnHover5.ts

@@ -0,0 +1 @@
+export const classesImgZoomInOnHover5 = "transform transition-transform duration-200 hover:scale-105"

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
@@ -29,7 +29,7 @@ interface Props {
 const p = Astro.props
 const title = p.title ?? "Toggle theme"
 const textLight = p.textLight ?? "Light"
-const textDark = p.textLight ?? "Dark"
+const textDark = p.textDark ?? "Dark"
 ---
 
 <Button
@@ -40,10 +40,10 @@ const textDark = p.textLight ?? "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)}
       />
     )
   }