@adaptive-sm/astro-ui 0.1.1 → 0.2.1

package/README.md

@@ -3,6 +3,7 @@
 A library of reusable UI components for Astro projects. Built with TypeScript, Tailwind CSS, and Astro in static output mode. Components are designed to be accessible, customizable, and easy to integrate.
 
 Quick link
+
 - code - https://github.com/adaptive-shield-matrix/astro-ui
 - npm - https://www.npmjs.com/package/@adaptive-sm/astro-ui
 - component demo - https://adaptive-astro-ui.pages.dev/
@@ -27,20 +28,38 @@ This tells Tailwind to include classes from the library's `.astro`, `.ts`, and o
 
 ## Option configuration: import alias
 
+### Typescript
+
+In your `tsconfig.json`, set up the `~` alias to point to the library:
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "~/*": ["node_modules/@adaptive-sm/astro-ui/lib/*"]
+    }
+  }
+}
+```
+
+### Astro
+
 In your `astro.config.mjs`, set up the `~` alias to point to the library:
 
 ```js
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config"
 
 export default defineConfig({
   vite: {
     resolve: {
       alias: {
-        '~': new URL('./node_modules/@adaptive-sm/astro-ui/lib', import.meta.url).pathname,
+        "~": new URL("./node_modules/@adaptive-sm/astro-ui/lib", import.meta.url).pathname,
       },
     },
   },
-});
+})
 ```
 
 ## Usage
@@ -62,7 +81,7 @@ Import and use components directly in your Astro files. For example:
 
 ```astro
 ---
-import { Button } from '~/button/Button.astro';
+import { Button } from "~/button/Button.astro"
 ---
 
 <Button variant="primary">Click me</Button>
@@ -72,19 +91,17 @@ import { Button } from '~/button/Button.astro';
 
 ```astro
 ---
-import { CardWrapper } from '~/card/CardWrapper.astro';
+import { CardWrapper } from "~/card/CardWrapper.astro"
 ---
 
-<CardWrapper>
-  Card content here.
-</CardWrapper>
+<CardWrapper> Card content here. </CardWrapper>
 ```
 
 ### Image Component
 
 ```astro
 ---
-import { Img } from '~/img/Img.astro';
+import { Img } from "~/img/Img.astro"
 ---
 
 <Img src="/path/to/image.jpg" alt="Description" />
@@ -95,19 +112,24 @@ Refer to individual component documentation in the source code for props and var
 ## Components
 
 ### Buttons
+
 - [Button.astro](lib/button/Button.astro)
 - Button variants and animations via CVAs in `buttonCva.ts`, `buttonIconCva.ts`
 
 ### Cards
+
 - [CardWrapper.astro](lib/card/CardWrapper.astro)
 
 ### Details
+
 - [Details.astro](lib/details/Details.astro)
 
 ### Forms
+
 - [Fieldset.astro](lib/form/Fieldset.astro)
 
 ### Icons
+
 - [Icon1.astro](lib/icon/Icon1.astro) (replaces SVG icons)
 
 usage:
@@ -117,6 +139,7 @@ usage:
 - Passed on as `path` prop
 
 ### Images
+
 - [Img.astro](lib/img/Img.astro)
 
   A small wrapper setting loading lazy and decoding to async.
@@ -128,35 +151,44 @@ usage:
   Generate types using `lib/generate_image_list/generateImageList.ts`
 
 ### Layouts
+
 - [MinimalLayout.astro](lib/layouts/MinimalLayout.astro)
 - [MarkdownWrapper.astro](lib/layouts/MarkdownWrapper.astro)
 
 ### Navigation bar
+
 - [ThemeToggle.astro](lib/layouts/parts/ThemeToggle.astro)
 
 ### Links
+
 - [LinkText.astro](lib/link/LinkText.astro)
 - [LinkButton.astro](lib/link/LinkButton.astro)
 
 ### Lists
+
 - [BlackBulletPoints.astro](lib/list/BlackBulletPoints.astro)
 - [CheckPoints.astro](lib/list/CheckPoints.astro)
 - [NumberedList.astro](lib/list/NumberedList.astro)
 
 ### Modals
+
 - [ModalButton.astro](lib/modal/ModalButton.astro)
 
 ### Pages
+
 - [PageCentered.astro](lib/page/PageCentered.astro)
 - [PageCenteredCard.astro](lib/page/PageCenteredCard.astro)
 
 ### Popovers
+
 - [Popover1.astro](lib/popover/Popover1.astro)
 
 ### Selects
+
 - [Select.astro](lib/select/Select.astro)
 
 ### Table
+
 - [Table.astro](lib/table/Table.astro)
 
 ## Demos
@@ -201,3 +233,11 @@ Follow the coding rules in `.roo/rules-code/` for style and best practices.
 ## License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Acknowledgments
+
+- Built on top of [Astro](https://astro.build).
+- Styled with [Tailwind CSS](https://tailwindcss.com/).
+- Icons from [MDI](https://pictogrammers.com/library/mdi/).
+
+For more information, visit the [GitHub repository](https://github.com/adaptive-shield-matrix/astro-ui).

package/lib/button/buttonCva.ts

@@ -94,19 +94,19 @@ const variantClasses = {
   // filled colors
   //
   filledYellow: classArr(
-    "text-white dark:text-yellow-100 ", // text
+    "text-white", // text
     "bg-yellow-500 dark:bg-yellow-800 ", // bg
     "hover:bg-yellow-700 dark:hover:bg-yellow-600", // bg hover
     "focus:ring-yellow-400 dark:focus:ring-yellow-400", // focus
   ),
   filledAmber: classArr(
-    "text-white dark:text-amber-100 ", // text
+    "text-white", // text
     "bg-amber-500 dark:bg-amber-800 ", // bg
     "hover:bg-amber-700 dark:hover:bg-amber-600", // bg hover
     "focus:ring-amber-400 dark:focus:ring-amber-400", // focus
   ),
   filledOrange: classArr(
-    "text-white dark:text-orange-100 ", // text
+    "text-white", // text
     "bg-orange-500 dark:bg-orange-800 ", // bg
     "hover:bg-orange-700 dark:hover:bg-orange-600", // bg hover
     "focus:ring-orange-400 dark:focus:ring-orange-400", // focus
@@ -128,7 +128,7 @@ const variantClasses = {
     "focus:ring-sky-400 dark:focus:ring-sky-400", // focus
   ),
   filledIndigo: classArr(
-    "text-white dark:text-indigo-100 ", // text
+    "text-white", // text
     "bg-indigo-500 dark:bg-indigo-800 ", // bg
     "hover:bg-indigo-700 dark:hover:bg-indigo-600", // bg hover
     "focus:ring-indigo-400 dark:focus:ring-indigo-400", // focus

package/lib/details/Details.astro

@@ -11,11 +11,10 @@ interface Props {
   class?: string
   summaryClass?: string
 }
-const props = Astro.props
-const icon = props.icon
-const title = props.title
-const subtitle = props.subtitle
-const summaryClass = props.summaryClass
+const p = Astro.props
+const icon = p.icon
+const title = p.title
+const subtitle = p.subtitle
 const hasSummary = Astro.slots.has("summary")
 ---
 
@@ -26,14 +25,15 @@ const hasSummary = Astro.slots.has("summary")
     "rounded-lg border border-gray-200",
     "shadow-sm",
     "overflow-hidden",
-    props.class,
+    p.class,
   )}
 >
   <summary
     class={classArr(
       "flex flex-col sm:flex-row items-center justify-between gap-4",
-      "p-6",
+      "p-4 sm:p-6",
       "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors",
+      p.summaryClass,
     )}
   >
     {

package/lib/generate_demo_list/DemoList.astro

@@ -2,18 +2,20 @@
 import { classesTextLink } from "~/link/classesTextLink"
 import { classArr } from "~/utils/ui/classArr"
 import { type DemoListType } from "./DemoListType"
+import { classMerge } from "~/utils/ui/classMerge"
 
 interface Props {
   demos: DemoListType
+  urlPrefix?: string
   class?: string
 }
-const props = Astro.props
+const p = Astro.props
 
 // Extract categories and their demo pages
-const categories = Object.entries(props.demos)
+const categories = Object.entries(p.demos)
 ---
 
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+<div class={classMerge("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-4", p.class)}>
   {
     categories.map(([category, pages]) => (
       <section class="bg-white dark:bg-zinc-700 rounded-lg shadow-md p-4 border border-gray-200 dark:border-zinc-600">
@@ -21,7 +23,7 @@ const categories = Object.entries(props.demos)
         <ul class="list-disc pl-4 space-y-1">
           {pages.map((page) => (
             <li class={classArr(classesTextLink)}>
-              <a href={`/demos/${category}/${page}`}>{page.replace(/_/g, " ").replaceAll("demo ", "")}</a>
+              <a href={`${p.urlPrefix ?? ""}/${category}/${page}`}>{page.replace(/_/g, " ").replaceAll("demo ", "")}</a>
             </li>
           ))}
         </ul>

package/lib/generate_image_list/generateImageList.ts

@@ -6,6 +6,28 @@ 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>,
@@ -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,80 @@
+---
+import Icon1 from "~/icon/Icon1.astro"
+import { classArr } from "~/utils/ui/classArr"
+import { mdiLink } from "@mdi/js"
+import type { GridFeatureType } from "./GridFeatureType"
+import { classMerge } from "~/utils/ui/classMerge"
+
+interface Props {
+  id: string
+  title: string
+  subtitle1: string
+  subtitle2?: string
+  features: GridFeatureType[]
+  class?: string
+  gridClass?: string
+  cardClass?: string
+}
+const p = Astro.props
+---
+
+<section id={p.id} class={classMerge("w-full", "py-25 px-4", p.class)}>
+  <div class={classArr("max-w-7xl mx-auto", "text-center mb-8")}>
+    <h2 class={classArr("text-3xl sm:text-4xl font-bold", "mb-4", "group flex items-center justify-center")}>
+      <span>{p.title}</span>
+      <button
+        onclick={`copyLink('${p.id}')`}
+        class="opacity-0 group-hover:opacity-100 ml-2 p-1 rounded hidden sm:flex"
+        title="Copy link to this section"
+      >
+        <Icon1 path={mdiLink} class="size-4" />
+      </button>
+    </h2>
+    <p class="text-xl text-muted-foreground mx-auto">
+      {p.subtitle1}
+    </p>
+    {p.subtitle2 && <p class="text-xl text-muted-foreground mx-auto mt-1">{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
+            "shadow-sm hover:shadow-lg transition-shadow", // shadow
+            p.cardClass,
+          )}
+        >
+          <div class="flex items-center gap-3 mb-4">
+            <Icon1 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>
+
+<script>
+  declare global {
+    interface Window {
+      copyLink?: (id: string) => void
+    }
+  }
+  window.copyLink = function (id: string) {
+    const url = window.location.href.split("#")[0] + "#" + id
+    navigator.clipboard
+      .writeText(url)
+      .then(() => {
+        // Optional: show a toast or feedback
+        console.log("Link copied:", url)
+      })
+      .catch((err) => {
+        console.error("Failed to copy link:", err)
+      })
+  }
+</script>

package/lib/grid/GridFeatureType.ts

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

package/lib/icon/Icon1.astro

@@ -15,7 +15,7 @@ const ariaHidden = props.ariaHidden ?? !props.title
 <svg
   viewBox={"0 0 24 24"}
   aria-hidden={ariaHidden}
-  class={classMerge("size-6 align-middle dark:fill-white", props.class)}
+  class={classMerge("size-6 flex-shrink-0 align-middle dark:fill-white", props.class)}
 >
   <path d={props.path}></path>
 </svg>

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,5 +1,5 @@
 ---
-import { classesImgZoomInOnHover } from "./classesImgZoomInOnHover"
+import { classesImgZoomInOnHover10 } from "./classesImgZoomInOnHover10"
 import { classMerge } from "~/utils/ui/classMerge"
 
 interface Props {
@@ -19,7 +19,7 @@ const p = Astro.props
 <img
   src={p.src}
   alt={p.alt}
-  class={classMerge(p.zoomIn && classesImgZoomInOnHover, p.class)}
+  class={classMerge(p.zoomIn && classesImgZoomInOnHover10, p.class)}
   loading={p.loadingLazy ?? true ? "lazy" : undefined}
   decoding={p.decodeAsync ?? true ? "async" : undefined}
   width={p.size ?? p.width}

package/lib/img/TypedImg.astro

@@ -2,15 +2,18 @@
 import { classArr } from "~/utils/ui/classArr"
 import type { ImageType } from "./ImageType"
 import Img from "./Img.astro"
-import { classInvertDiagram } from "~/img/classInvertDiagram"
+import { classInvertBlack } from "~/img/classInvertBlack"
 
 interface Props {
   img: ImageType
   zoomIn?: boolean
+  invertColorsInDarkMode?: boolean
   class?: string
 }
-const props = Astro.props
-const isSvg = props.img.path.endsWith(".svg")
+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
@@ -18,9 +21,9 @@ function imageUrl(p: string) {
 ---
 
 <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(p.img.path)}
+  alt={p.img.alt}
+  class={classArr(invert ? classInvertBlack : "", p.class)}
+  width={isSvg ? null : p.img.width}
+  height={isSvg ? null : p.img.height}
 />

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/parts/ThemeToggle.astro

@@ -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

package/lib/page/{classesBg.ts → classesBg100.ts}

@@ -1,6 +1,6 @@
-export type ClassesBg = keyof typeof classesBg
+export type ClassesBg = keyof typeof classesBg100
 
-export const classesBg = {
+export const classesBg100 = {
   white: "bg-white dark:bg-black",
   orange: "bg-orange-100 dark:bg-yellow-900",
   red: "bg-red-100 dark:bg-red-900",

package/lib/page/classesBg50.ts

@@ -0,0 +1,27 @@
+export type ClassesBg = keyof typeof classesBg50
+
+export const classesBg50 = {
+  white: "bg-white dark:bg-black",
+  orange: "bg-orange-50 dark:bg-yellow-950",
+  red: "bg-red-50 dark:bg-red-950",
+  amber: "bg-amber-50 dark:bg-amber-950",
+  yellow: "bg-yellow-50 dark:bg-yellow-950",
+  lime: "bg-lime-50 dark:bg-lime-950",
+  green: "bg-green-50 dark:bg-green-950",
+  emerald: "bg-emerald-50 dark:bg-emerald-950",
+  teal: "bg-teal-50 dark:bg-teal-950",
+  cyan: "bg-cyan-50 dark:bg-cyan-950",
+  sky: "bg-sky-50 dark:bg-sky-950",
+  blue: "bg-blue-50 dark:bg-blue-950",
+  indigo: "bg-indigo-50 dark:bg-indigo-950",
+  violet: "bg-violet-50 dark:bg-violet-950",
+  purple: "bg-purple-50 dark:bg-purple-950",
+  fuchsia: "bg-fuchsia-50 dark:bg-fuchsia-950",
+  pink: "bg-pink-50 dark:bg-pink-950",
+  rose: "bg-rose-50 dark:bg-rose-950",
+  slate: "bg-slate-50 dark:bg-slate-950",
+  gray: "bg-gray-50 dark:bg-gray-950",
+  zinc: "bg-zinc-50 dark:bg-zinc-950",
+  neutral: "bg-neutral-50 dark:bg-neutral-950",
+  stone: "bg-stone-50 dark:bg-stone-950",
+} as const

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptive-sm/astro-ui",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "scripts": {
     "astro": "astro",
     "dev": "nice -5 astro dev",
@@ -9,11 +9,12 @@
     "deploy": "bun run build && bun run upload && bun run tag",
     "upload": "bun run wrangler pages deploy ./dist --project-name=adaptive-astro-ui --commit-dirty",
     "tag": "git branch -f deployed",
-    "generateDemoList": "bun run ./src/pages/demos/generateDemoList.cli.ts",
+    "release": "bash ./ops/release.sh",
+    "generateDemoList": "bun run ./lib/generate_demo_list/generateDemoList.ts",
     "generateImageList": "bun run ./src/pages/images/generateImageList.cli.ts",
     "generateAiRulesLib": "bash ./lib/generate_ai_rules/generate_agent_rules_1_lib.bash",
     "update": "nice -15 bun x npm-check-updates -u && bun i",
-    "update:commit": "bun x npm-check-updates -u && bun i && git add package.json && bun run tsc && git commit -m \"update dependencies\" && git push",
+    "update:commit": "bun x npm-check-updates -u && bun i && git add package.json && bun run tsc && git commit -m \"chore(deps): update dependencies\" && git push",
     "clean": "rm -rf ./dist",
     "reset": "rm -rf ./node_modules"
   },
@@ -66,5 +67,8 @@
     "web-development",
     "frontend",
     "typescript"
-  ]
+  ],
+  "repository": {
+    "url": "git+https://github.com/adaptive-shield-matrix/astro-ui.git"
+  }
 }

package/lib/img/classInvertDiagram.ts

@@ -1 +0,0 @@
-export const classInvertDiagram = "invert-diagram"

package/lib/img/classesImgZoomInOnHover.ts

@@ -1 +0,0 @@
-export const classesImgZoomInOnHover = "transform transition-transform duration-200 -translate-x-3 hover:scale-110"