@adaptive-sm/astro-ui 0.1.0 → 0.2.1

package/README.md

@@ -2,6 +2,12 @@
 
 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/
+
 ## Installation
 
 Install the package using Bun:
@@ -10,37 +16,55 @@ Install the package using Bun:
 bun add @adaptive-sm/astro-ui
 ```
 
-## Recommended configuration
+## Tailwind CSS Configuration
+
+To ensure Tailwind scans the library's source files for classes (since components are published as source without a build step), add the following `@source` directive to your project's `src/layouts/global.css` (or equivalent global stylesheet):
+
+```css
+@source '/node_modules/@adaptive-sm/astro-ui/lib/**/*.{astro,html,md,mdx,ts,tsx}';
+```
+
+This tells Tailwind to include classes from the library's `.astro`, `.ts`, and other relevant files in the purge process, preventing unused classes from being purged during the build. Without it, Tailwind might not detect classes used in imported components, leading to missing styles.
+
+## 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,
       },
     },
   },
-});
+})
 ```
 
-## Tailwind CSS Configuration
-
-To ensure Tailwind scans the library's source files for classes (since components are published as source without a build step), add the following `@source` directive to your project's `src/layouts/global.css` (or equivalent global stylesheet):
-
-```css
-@source '/node_modules/@adaptive-sm/astro-ui/lib/**/*.{astro,html,md,mdx,ts,tsx}';
-```
-
-This tells Tailwind to include classes from the library's `.astro`, `.ts`, and other relevant files in the purge process, preventing unused classes from being purged during the build. Without it, Tailwind might not detect classes used in imported components, leading to missing styles.
-
 ## Usage
 
-## No Build Step Required
+### No Build Step Required
 
 This library ships source `.astro` and `.ts` files directly—no pre-build needed. Benefits include:
 
@@ -57,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>
@@ -67,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" />
@@ -90,53 +112,83 @@ 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:
+
+- Choose from over 7000 icons: https://pictogrammers.com/library/mdi/
+- Import name from "@mdi/js" library
+- Passed on as `path` prop
+
 ### Images
+
 - [Img.astro](lib/img/Img.astro)
+
+  A small wrapper setting loading lazy and decoding to async.
+
 - [TypedImg.astro](lib/img/TypedImg.astro)
 
+  An image with given width and height to prevent layout shifts.
+
+  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
@@ -181,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,8 +1,6 @@
 {
   "name": "@adaptive-sm/astro-ui",
-  "version": "0.1.0",
-  "type": "module",
-  "private": false,
+  "version": "0.2.1",
   "scripts": {
     "astro": "astro",
     "dev": "nice -5 astro dev",
@@ -11,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"
   },
@@ -52,5 +51,24 @@
   ],
   "exports": {
     "./*": "./lib/*"
+  },
+  "type": "module",
+  "private": false,
+  "license": "MIT",
+  "homepage": "https://github.com/adaptive-shield-matrix/astro-ui",
+  "description": "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.",
+  "keywords": [
+    "astro",
+    "astro-ui",
+    "tailwind",
+    "tailwindcss",
+    "components",
+    "ui-components",
+    "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"