@adaptive-sm/astro-ui 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+
+MIT License
+
+Copyright (c) 2025 Adaptive Shield Matrix
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,183 @@
+# Adaptive Astro UI
+
+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.
+
+## Installation
+
+Install the package using Bun:
+
+```bash
+bun add @adaptive-sm/astro-ui
+```
+
+## Recommended configuration
+
+In your `astro.config.mjs`, set up the `~` alias to point to the library:
+
+```js
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  vite: {
+    resolve: {
+      alias: {
+        '~': 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
+
+This library ships source `.astro` and `.ts` files directly—no pre-build needed. Benefits include:
+
+- **Smaller size**: No bundled or compiled files.
+- **Full compatibility**: Your Astro project compiles components using its own Astro, Vite, and Tailwind setup.
+- **Better DX**: Preserves TypeScript types and IntelliSense.
+- **Easier updates**: Consumers get changes immediately, with no build artifacts to manage.
+
+Just set up your alias - Astro handles the rest automatically.
+
+Import and use components directly in your Astro files. For example:
+
+### Button Component
+
+```astro
+---
+import { Button } from '~/button/Button.astro';
+---
+
+<Button variant="primary">Click me</Button>
+```
+
+### Card Component
+
+```astro
+---
+import { CardWrapper } from '~/card/CardWrapper.astro';
+---
+
+<CardWrapper>
+  Card content here.
+</CardWrapper>
+```
+
+### Image Component
+
+```astro
+---
+import { Img } from '~/img/Img.astro';
+---
+
+<Img src="/path/to/image.jpg" alt="Description" />
+```
+
+Refer to individual component documentation in the source code for props and variants.
+
+## 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)
+
+### Images
+- [Img.astro](lib/img/Img.astro)
+- [TypedImg.astro](lib/img/TypedImg.astro)
+
+### Layouts
+- [MinimalLayout.astro](lib/layouts/MinimalLayout.astro)
+- [MarkdownWrapper.astro](lib/layouts/MarkdownWrapper.astro)
+- [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
+
+Explore component demos at:
+[https://adaptive-astro-ui.pages.dev/](https://adaptive-astro-ui.pages.dev/)
+
+## Development
+
+### Building the Library
+
+```bash
+bun run build
+```
+
+### Running Demos
+
+```bash
+bun run dev
+```
+
+### Linting and Formatting
+
+Uses Biome for linting and formatting:
+
+```bash
+bun run biome check .
+bun run biome format --write .
+```
+
+## Contributing
+
+1. Fork the repository.
+2. Create a feature branch.
+3. Add or update components in `lib/`.
+4. Update demos in `src/pages/demos/`.
+5. Ensure tests pass and run `bun run build`.
+6. Submit a pull request.
+
+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.

package/lib/button/Button.astro

@@ -0,0 +1,58 @@
+---
+import { buttonCva2, type ButtonSize, type ButtonVariant } from "~/button/buttonCva"
+import { buttonIconCva } from "~/button/buttonIconCva"
+import { classesButtonClickAnimation } from "~/button/classesButtonClickAnimation"
+import Icon1 from "~/icon/Icon1.astro"
+import { classMerge } from "~/utils/ui/classMerge"
+
+interface Props {
+  id?: string
+  textId?: string
+  contentId?: string
+  contentClass?: string
+  title?: string
+  text?: string
+  variant: ButtonVariant
+  size?: ButtonSize
+  icon?: string
+  iconRight?: string
+  iconClass?: string
+  class?: string
+  onclick?: any
+}
+const props = Astro.props
+
+const classes = buttonCva2(props.variant, props.size, classesButtonClickAnimation, props.class)
+const hasChildren = Astro.slots.has("default")
+const hasContent = hasChildren || props.text
+---
+
+<button id={props.id} title={props.title} class={classes} onclick={props.onclick}>
+  {
+    props.icon && (
+      <Icon1
+        path={props.icon}
+        class={classMerge(hasContent && "mr-2", buttonIconCva(props.variant, props.iconClass))}
+      />
+    )
+  }
+  {
+    props.text && (
+      <span id={props.contentId} class={props.contentClass}>
+        {props.text}
+      </span>
+    )
+  }
+  {
+    hasContent && (
+      <span id={props.contentId} class={props.contentClass}>
+        <slot />
+      </span>
+    )
+  }
+  {
+    props.iconRight && (
+      <Icon1 path={props.iconRight} class={buttonIconCva(props.variant, hasContent && "ml-2", props.iconClass)} />
+    )
+  }
+</button>

package/lib/button/buttonCva.ts

@@ -0,0 +1,196 @@
+import { classArr } from "~/utils/ui/classArr"
+import { classMerge } from "~/utils/ui/classMerge"
+import { classesButtonClickAnimation } from "./classesButtonClickAnimation"
+import { classesButtonDisabled } from "./classesButtonDisabled"
+
+export type ButtonVariant = keyof typeof buttonVariant
+export const buttonVariant = {
+  // transparent bg
+  outline: "outline",
+  ghost: "ghost",
+  link: "link",
+  // filled black/white/gray
+  filled: "filled",
+  subtle: "subtle",
+  contrast: "contrast",
+  // filled colors
+  filledYellow: "filledYellow",
+  filledAmber: "filledAmber",
+  filledOrange: "filledOrange",
+  filledRed: "filledRed",
+  filledGreen: "filledGreen",
+  filledSky: "filledSky",
+  filledIndigo: "filledIndigo",
+  // outlined colors
+  outlineRed: "outlineRed",
+} as const
+
+export type ButtonSize = keyof typeof buttonSize
+export const buttonSize = {
+  none: "none",
+  minimal: "minimal",
+  sm: "sm",
+  default: "default",
+  lg: "lg",
+} as const
+
+export type ButtonCvaProps = {
+  variant?: ButtonVariant
+  size?: ButtonSize
+}
+
+const baseClasses = classArr(
+  "inline-flex", // layout
+  "font-medium", // text
+  "items-center justify-center", // layout children
+  "rounded-md ring-offset-background", // rounded, rings
+  "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", // focus
+  "transition-colors", // animation
+  "group",
+  "cursor-pointer",
+)
+
+const variantClasses = {
+  //
+  // transparent bg
+  //
+  outline: classArr(
+    "bg-transparent dark:bg-transparent",
+    "dark:text-slate-100", // text
+    "hover:bg-slate-100", // bg hover
+    "border border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900", // border
+  ),
+  ghost: classArr(
+    "dark:text-slate-100 dark:hover:text-slate-100", // text
+    "bg-transparent dark:bg-transparent", // bg
+    "data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent", // bg data
+    "hover:bg-slate-100 dark:hover:bg-slate-800", // bg hover
+  ),
+  link: classArr(
+    "text-slate-900 dark:text-slate-100", // text
+    "underline-offset-4 hover:underline ", // underline
+    "bg-transparent dark:bg-transparent", // bg
+    "hover:bg-transparent dark:hover:bg-transparent", // bg hover
+  ),
+  //
+  // filled grayscale
+  //
+  filled: classArr(
+    "dark:text-slate-100", // text
+    "bg-white dark:bg-black", // bg
+    "hover:bg-slate-50 dark:hover:bg-slate-900", // bg hover
+  ),
+  subtle: classArr(
+    "text-slate-900 dark:text-slate-100", // text
+    "bg-slate-100 dark:bg-slate-700", // bg
+    "hover:bg-slate-200 dark:hover:bg-slate-600", // bg hover
+  ),
+  contrast: classArr(
+    "text-white dark:text-slate-900 dark:hover:text-slate-900", // text
+    "bg-slate-900 dark:bg-slate-50", // bg
+    "hover:bg-slate-700 dark:hover:bg-slate-300", // bg hover
+  ),
+  //
+  // filled colors
+  //
+  filledYellow: classArr(
+    "text-white dark:text-yellow-100 ", // 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
+    "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
+    "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
+  ),
+  filledRed: classArr(
+    "text-white", // text
+    "bg-red-500 dark:bg-red-700", // bg
+    "hover:bg-red-600 dark:hover:bg-red-600", // bg hover
+    "focus:ring-red-400 dark:focus:ring-red-400", // focus
+  ),
+  filledGreen: classArr(
+    "text-white", // text
+    "bg-green-500 hover:bg-green-700 dark:hover:bg-green-700", // bg
+    "focus:ring-green-400 dark:focus:ring-green-400", // focus
+  ),
+  filledSky: classArr(
+    "text-white", // text
+    "bg-sky-500 hover:bg-sky-700 dark:hover:bg-sky-700", // bg
+    "focus:ring-sky-400 dark:focus:ring-sky-400", // focus
+  ),
+  filledIndigo: classArr(
+    "text-white dark:text-indigo-100 ", // 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
+  ),
+  //
+  // outline toast colors
+  //
+  outlineRed: classArr(
+    "text-red-500 dark:text-red-500", // text
+    "border border-red-200 dark:border-red-700", // border
+    "bg-transparent", // bg
+    "hover:bg-red-100 dark:hover:bg-red-950", // bg hover
+    "focus:ring-red-400 dark:focus:ring-red-400", // focus
+  ),
+} as const satisfies Record<ButtonVariant, string>
+
+const sizeClasses = {
+  none: "",
+  minimal: "rounded-none",
+  sm: "px-3",
+  default: "py-2 px-3",
+  lg: "px-8 py-4 text-lg",
+} as const satisfies Record<ButtonSize, string>
+
+const defaultSize = buttonSize.default
+
+export function buttonCva1(variant: ButtonVariant, ...customClasses: (string | boolean | undefined | null | 0)[]) {
+  return buttonCva2(variant, null, ...customClasses)
+}
+
+export function buttonCva2(
+  variant: ButtonVariant,
+  size: ButtonSize | null = defaultSize,
+  ...customClasses: (string | boolean | undefined | null | 0)[]
+) {
+  const v = variant
+  const s = size ?? defaultSize
+  return classMerge(baseClasses, variantClasses[v], sizeClasses[s], combinedClasses(v, s), customClasses)
+}
+
+function combinedClasses(variant: ButtonVariant, size: ButtonSize) {
+  const variantGroup1 =
+    variant === buttonVariant.outline || variant === buttonVariant.filledYellow || variant === buttonVariant.outlineRed
+  if (variantGroup1 && size === buttonSize.lg) {
+    return "border-2"
+  }
+  return null
+}
+
+export function buttonCvaIconOnly(
+  variant: ButtonVariant,
+  isLoading: boolean | undefined,
+  isDisabled: boolean | undefined,
+  ...customClasses: (string | boolean | undefined | null | 0)[]
+) {
+  const classes = buttonCva2(
+    variant,
+    buttonSize.none,
+    classesButtonClickAnimation,
+    "rounded-full p-2.5",
+    (isDisabled || isLoading) && classesButtonDisabled,
+    ...customClasses,
+  )
+  return classes
+}

package/lib/button/buttonIconCva.ts

@@ -0,0 +1,52 @@
+import { classArr } from "~/utils/ui/classArr"
+import { classMerge } from "~/utils/ui/classMerge"
+import { type ButtonVariant } from "./buttonCva"
+
+const classesTextFillBlack = "text-black fill-black"
+const classesTextFillWhite = "text-white fill-white"
+
+const classesBlackWhite = classArr(
+  classesTextFillBlack,
+  "dark:text-white", // dark text
+  "dark:fill-white", // dark fill
+)
+
+const classesWhiteWhite = classArr(
+  classesTextFillWhite,
+  "dark:text-white", // dark text
+  "dark:fill-white", // dark fill
+)
+
+const baseClasses = classArr(
+  "size-6", // size
+)
+
+const buttonIconClasses = {
+  // transparent bg
+  outline: classesBlackWhite,
+  ghost: classesBlackWhite,
+  link: classesBlackWhite,
+  // filled grayscale
+  filled: classesBlackWhite,
+  subtle: classesBlackWhite,
+  contrast: classArr(classesTextFillWhite, "dark:text-black dark:fill-black"),
+  // filled colors
+  filledYellow: classArr(classesTextFillWhite, "dark:text-yellow-100 dark:fill-yellow-100"),
+  filledOrange: classArr(classesTextFillWhite, "dark:text-orange-100 dark:fill-orange-100"),
+  filledAmber: classArr(classesTextFillWhite, "dark:text-amber-100 dark:fill-amber-100"),
+  filledRed: classArr(classesTextFillWhite, "dark:text-red-100 dark:fill-red-100"),
+
+  filledGreen: classesWhiteWhite,
+  filledIndigo: classArr(classesTextFillWhite, "dark:text-indigo-100 dark:fill-indigo-100"),
+  // outlineRed: classesWhiteWhite,
+  filledSky: classesWhiteWhite,
+  // outlined colors
+  outlineRed: classArr("text-red-500 fill-red-500 dark:text-red-700 dark:fill-red-700"),
+} as const satisfies Record<ButtonVariant, string>
+
+export function buttonIconCva(
+  variant: ButtonVariant,
+  ...customClasses: (string | boolean | undefined | null | 0 | 0n)[]
+) {
+  return classMerge(baseClasses, buttonIconClasses[variant], customClasses)
+}

package/lib/button/classesButtonClickAnimation.ts

@@ -0,0 +1,8 @@
+import { classArr } from "~/utils/ui/classArr"
+
+export const classesButtonClickAnimation = classArr(
+  // "duration-300",
+  "duration-0",
+  // "[transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)]",
+  "active:scale-95",
+)

package/lib/button/classesButtonClickAnimationPush.ts

@@ -0,0 +1,6 @@
+import { classArr } from "~/utils/ui/classArr"
+
+/**
+ * disable hover because popovers move with it
+ */
+export const classesButtonClickAnimationPush = classArr("hover:-translate-y-px")

package/lib/button/classesButtonClickAnimationSquish.ts

@@ -0,0 +1,6 @@
+import { classArr } from "~/utils/ui/classArr"
+
+/**
+ * unused because it's a little to fancy
+ */
+export const classesButtonClickAnimationSquish = classArr("active:translate-y-1 active:scale-x-105 active:scale-y-95")

package/lib/button/classesButtonDisabled.ts

@@ -0,0 +1 @@
+export const classesButtonDisabled = "cursor-not-allowed opacity-70"

package/lib/card/CardWrapper.astro

@@ -0,0 +1,15 @@
+---
+import { classesCardWrapperP4 } from "~/card/classesCardWrapper"
+import { classArr } from "~/utils/ui/classArr"
+import { classMerge } from "~/utils/ui/classMerge"
+
+interface Props {
+  id?:string
+  class?: string
+}
+const p = Astro.props
+---
+
+<div id={p.id} class={classMerge(classesCardWrapperP4, p.class)}>
+  <slot />
+</div>

package/lib/card/classesCardWrapper.ts

@@ -0,0 +1,16 @@
+import { classArr } from "~/utils/ui/classArr"
+
+export const classesCardWrapper = classArr(
+  "rounded-lg shadow-lg", // card shadows/padding
+  "bg-white dark:bg-gray-900", // bg
+)
+
+export const classesCardWrapperP4 = classArr(classesCardWrapper, "p-4 lg:p-8")
+export const classesCardWrapperP8 = classArr(classesCardWrapper, "p-4 sm:p-8")
+
+export const classesCardWrapperPage = classArr(
+  "rounded-xl shadow-xl", // rounded border + shadow
+  "p-4 sm:p-8 md:p-12", // padding
+  // "sm:mx-auto", // center
+  "bg-white dark:bg-gray-900", // bg
+)

package/lib/details/Details.astro

@@ -0,0 +1,57 @@
+---
+import Icon1 from "~/icon/Icon1.astro"
+import { classArr } from "~/utils/ui/classArr"
+import { classMerge } from "~/utils/ui/classMerge"
+import { mdiChevronDown } from "@mdi/js"
+
+interface Props {
+  icon?: string
+  title?: string
+  subtitle?: string
+  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 hasSummary = Astro.slots.has("summary")
+---
+
+<details
+  class={classMerge(
+    "group",
+    "bg-white dark:bg-gray-800",
+    "rounded-lg border border-gray-200",
+    "shadow-sm",
+    "overflow-hidden",
+    props.class,
+  )}
+>
+  <summary
+    class={classArr(
+      "flex flex-col sm:flex-row items-center justify-between gap-4",
+      "p-6",
+      "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors",
+    )}
+  >
+    {
+      !hasSummary && title && (
+        <>
+          {icon && <Icon1 path={icon} class="size-7 mt-1" />}
+          <div class="flex-1">
+            <h3 class={"text-xl font-semibold"}>{title}</h3>
+            {subtitle && <p class={"text-muted-foreground mt-1"}>{subtitle}</p>}
+          </div>
+        </>
+      )
+    }
+    <slot name="summary" />
+    <Icon1
+      path={mdiChevronDown}
+      class={classArr("size-7", "text-gray-400 dark:text-gray-600", "transition-transform group-open:rotate-180")}
+    />
+  </summary>
+  <slot />
+</details>

package/lib/dev/TailwindIndicator.astro

@@ -0,0 +1,28 @@
+---
+import { classMerge } from "~/utils/ui/classMerge"
+import { isDevEnv } from "~/utils/ui/isDevEnv"
+---
+
+{
+  isDevEnv() && (
+    <div
+      id={"tailwindIndicator"}
+      class={classMerge(
+        "fixed bottom-1 left-1 z-50", // position
+        "flex size-6 items-center justify-center", // size
+        "rounded-full p-3", // size
+        "font-mono font-bold text-sm", // font
+        "bg-zinc-100 dark:bg-zinc-900", // bg
+        "select-none print:hidden",
+      )}
+    >
+      <div class="block sm:hidden">xs</div>
+      <div class="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden 3xl:hidden">sm</div>
+      <div class="hidden md:block lg:hidden xl:hidden 2xl:hidden 3xl:hidden">md</div>
+      <div class="hidden lg:block xl:hidden 2xl:hidden 3xl:hidden">lg</div>
+      <div class="hidden xl:block 2xl:hidden 3xl:hidden">xl</div>
+      <div class="hidden 2xl:block 3xl:hidden">2xl</div>
+      <div class="hidden 3xl:block">3xl</div>
+    </div>
+  )
+}

package/lib/form/Fieldset.astro

@@ -0,0 +1,21 @@
+---
+import { classesFieldset } from "./classesFieldset"
+import { classMerge } from "~/utils/ui/classMerge"
+
+interface Props {
+  title: string
+  titleClass?: string
+  subtitles?: string | string[]
+  subtitleClass?: string
+  class?: string
+}
+const props = Astro.props
+---
+
+<fieldset class={classMerge(classesFieldset, props.class)}>
+  <legend class={classMerge("px-1", props.titleClass)}>
+    {props.title}
+    <!--{props.subtitles && <PopoverI title={props.title} points={props.subtitles} />}-->
+  </legend>
+  <slot />
+</fieldset>

package/lib/form/classesFieldset.ts

@@ -0,0 +1 @@
+export const classesFieldset = "rounded-lg border border-solid border-gray-300 dark:border-gray-700 p-3"