@adaptive-sm/astro-ui 0.2.1 → 0.4.0

package/lib/modal/Modal.astro

@@ -1,9 +1,9 @@
 ---
+import Button from "~ui/button/Button.astro"
+import { buttonVariant, type ButtonSize, type ButtonVariant } from "~ui/button/buttonCva"
+import { classesTextHeader } from "~ui/text/classesTextHeader"
+import { classMerge } from "~ui/utils/classMerge"
 import "./Modal.module.css"
-import { classesTextHeader } from "~/text/classesTextHeader"
-import { classMerge } from "~/utils/ui/classMerge"
-import { buttonVariant } from "~/button/buttonCva"
-import Button from "~/button/Button.astro"
 
 /**
  * https://github.com/markteekman/accessible-astro-components/blob/main/Modal.astro
@@ -13,16 +13,25 @@ interface Props {
   title: string
   titleClass?: string
   closeText?: string
+
+  close?: {
+    text?: string
+    variant?: ButtonVariant
+    size?: ButtonSize
+    class?: string
+    icon?: string
+    iconClass?: string
+  }
+
   class?: string
   classContentArea?: string
 }
 
-const props = Astro.props
-const triggerId = props.triggerId
-const title = props.title
-const titleClass = props.titleClass
-const closeText = props.closeText ?? "Close"
-const classContentArea = props.classContentArea
+const p = Astro.props
+const triggerId = p.triggerId
+const title = p.title
+const titleClass = p.titleClass
+const classContentArea = p.classContentArea
 const closeId = `${triggerId}-close`
 ---
 
@@ -33,7 +42,7 @@ const closeId = `${triggerId}-close`
     "max-w-5xl",
     "bg-white dark:bg-gray-900 text-black dark:text-white", // bg
     "border-1 border-black p-4 rounded-xl", // border
-    props.class,
+    p.class,
   )}
   aria-labelledby={triggerId}
 >
@@ -43,7 +52,14 @@ const closeId = `${triggerId}-close`
         {title}
       </h2>
       <slot>Modal description</slot>
-      <Button id={closeId} variant={buttonVariant.outline} class="modal-close w-full">{closeText}</Button>
+      <Button
+        id={closeId}
+        icon={p.close?.icon}
+        iconClass={p.close?.iconClass}
+        size={p.close?.size}
+        variant={p.close?.variant ?? buttonVariant.outline}
+        class={classMerge("modal-close w-full", p.close?.class)}>{p.close?.text ?? "Close"}</Button
+      >
     </div>
   </div>
 </dialog>

package/lib/modal/ModalButton.astro

@@ -1,10 +1,9 @@
 ---
-import { generateId5 } from "~/utils/ran/generateId5"
-import type { ButtonSize, ButtonVariant } from "~/button/buttonCva"
+import Button from "~ui/button/Button.astro"
+import type { ButtonSize, ButtonVariant } from "~ui/button/buttonCva"
+import { classesTextGray } from "~ui/text/classesTextGray"
+import { classArr } from "~ui/utils/classArr"
 import Modal from "./Modal.astro"
-import { classesTextGray } from "~/text/classesTextGray"
-import { classArr } from "~/utils/ui/classArr"
-import Button from "~/button/Button.astro"
 
 interface Props {
   button: {
@@ -17,25 +16,49 @@ interface Props {
     iconClass?: string
     class?: string
   }
+  close?: {
+    text?: string
+    variant?: ButtonVariant
+    size?: ButtonSize
+    class?: string
+    icon?: string
+    iconClass?: string
+  }
   id?: string
   title?: string
+  titleClass?: string
   class?: string
   classContentArea?: string
 }
-const props = Astro.props
-const id = props.id ?? `modal-id-${generateId5()}`
-const button = props.button
-const title = props.title ?? "Dialog Title"
-const classContentArea = props.classContentArea
+const p = Astro.props
+
+/**
+ * Generates a random alphanumeric string ID
+ *
+ * Uses Math.random() converted to base-36 to create a string of letters and numbers.
+ * The substring(2, 11) removes the "0." prefix and takes 9 characters for a good balance
+ * of uniqueness and brevity (approximately 10^36 possible combinations).
+ *
+ * @returns {string} A 9-character random alphanumeric string
+ */
+function generateRandomId(): string {
+  return Math.random().toString(36).substring(2, 11)
+}
+
+const id = p.id ?? `modal-id-${generateRandomId()}`
+const button = p.button
+const title = p.title ?? "Dialog Title"
+const classContentArea = p.classContentArea
 ---
 
 <Button id={id} {...button} />
 <Modal
   triggerId={id}
   title={title}
-  titleClass={classArr(classesTextGray, "text-xl", "mb-2")}
-  class={props.class}
+  titleClass={classArr(classesTextGray, "text-xl", "mb-2", p.titleClass)}
+  class={p.class}
   classContentArea={classContentArea}
+  close={p.close}
 >
   <slot />
 </Modal>

package/lib/page/PageCentered.astro

@@ -1,14 +1,16 @@
 ---
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
 import { classesPageCentered } from "./classesPageCentered"
+import type { HTMLAttributes } from "astro/types"
 
 interface Props {
-  id?:string
+  id?: string
   class?: string
+  restProps?: HTMLAttributes<"div">
 }
 const p = Astro.props
 ---
 
-<div id={p.id} class={classMerge(classesPageCentered, p.class)}>
+<div id={p.id} class={classMerge(classesPageCentered, p.class)} {...p.restProps}>
   <slot />
 </div>

package/lib/page/PageCenteredCard.astro

@@ -1,17 +1,19 @@
 ---
-import { classMerge } from "~/utils/ui/classMerge"
+import type { HTMLAttributes } from "astro/types"
+import { classesCardWrapperPage } from "~ui/card/classesCardWrapper"
+import { classMerge } from "~ui/utils/classMerge"
 import PageCentered from "./PageCentered.astro"
-import { classesCardWrapperPage } from "~/card/classesCardWrapper"
 
 interface Props {
   class?: string
   classInner?: string
+  restProps?: HTMLAttributes<"div">
 }
-const props = Astro.props
+const p = Astro.props
 ---
 
-<PageCentered class={props.class}>
-  <div class={classMerge(classesCardWrapperPage, props.classInner)}>
+<PageCentered class={p.class} restProps={p.restProps}>
+  <div class={classMerge(classesCardWrapperPage, p.classInner)}>
     <slot />
   </div>
 </PageCentered>

package/lib/page/classesPageCentered.ts

@@ -1,4 +1,4 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classArr } from "~ui/utils/classArr"
 
 export const classesPageCentered = classArr(
   "flex flex-col justify-center items-center my-auto", // align center

package/lib/popover/Popover1.astro

@@ -1,7 +1,7 @@
 ---
-import Icon1 from "~/icon/Icon1.astro"
-import { buttonVariant, type ButtonVariant, buttonCva2 } from "~/button/buttonCva"
-import { classArr } from "~/utils/ui/classArr"
+import Icon from "~ui/icon/Icon.astro"
+import { buttonVariant, type ButtonVariant, buttonCva2 } from "~ui/button/buttonCva"
+import { classArr } from "~ui/utils/classArr"
 import { setupPopoverListeners } from "./setupPopoverListeners"
 
 interface Props {
@@ -23,7 +23,7 @@ const summaryClasses = buttonCva2(variant, null, "flex flex-wrap gap-2 text-xl f
   )}
 >
   <summary class={summaryClasses}>
-    <Icon1 path={icon} />
+    <Icon path={icon} />
     {title}
   </summary>
   <div

package/lib/select/Select.astro

@@ -1,18 +1,21 @@
 ---
-import { classArr } from "~/utils/ui/classArr"
+import type { HTMLAttributes } from "astro/types"
+import { classArr } from "~ui/utils/classArr"
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+import type { MayHaveId } from "~ui/utils/MayHaveId"
 
 type ValueDisplayFn = (value: string) => string
 
-type NativeSingleSelectProps = {
+export interface Props extends MayHaveId, MayHaveClass {
   initialValue: string
   options: string[]
   optionClass?: string
   valueDisplay?: ValueDisplayFn
   id?: string
   class?: string
+  restProps?: HTMLAttributes<"select">
 }
-
-const props = Astro.props as NativeSingleSelectProps
+const p = Astro.props
 
 const getDisplayValue = (itemValue: string, valueDisplay?: ValueDisplayFn) => {
   if (!valueDisplay) return itemValue
@@ -23,7 +26,7 @@ const getDisplayValue = (itemValue: string, valueDisplay?: ValueDisplayFn) => {
 ---
 
 <select
-  id={props.id}
+  id={p.id}
   class={classArr(
     "block w-full p-2.5",
     "text-gray-900 dark:text-white text-sm",
@@ -31,14 +34,15 @@ const getDisplayValue = (itemValue: string, valueDisplay?: ValueDisplayFn) => {
     "bg-gray-50 dark:bg-gray-700",
     "rounded-lg border border-gray-300 dark:border-gray-600",
     "focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:focus:ring-blue-500",
-    props.class,
+    p.class,
   )}
-  value={props.initialValue}
+  value={p.initialValue}
+  {...p.restProps}
 >
   {
-    props.options.map((option: string) => (
-      <option value={option} class={props.optionClass}>
-        {getDisplayValue(option, props.valueDisplay)}
+    p.options.map((option: string) => (
+      <option value={option} class={p.optionClass} selected={option === p.initialValue}>
+        {getDisplayValue(option, p.valueDisplay)}
       </option>
     ))
   }

package/lib/table/Table.astro

@@ -2,8 +2,8 @@
 import type { DesktopTableClassses } from "./DesktopTableClassses"
 import type { MobileTableClassses } from "./MobileTableClassses"
 import { tableVisibilityClasses } from "./tableVisibilityClasses"
-import { classMerge } from "~/utils/ui/classMerge"
-import { type TailwindBreakpoint, tailwindBreakpoint } from "~/utils/ui/tailwindBreakpoint"
+import { classMerge } from "~ui/utils/classMerge"
+import { type TailwindBreakpoint, tailwindBreakpoint } from "~ui/utils/tailwindBreakpoint"
 import type { TableColumnDef } from "./TableColumnDef"
 import TableD from "./TableD.astro"
 import TableM from "./TableM.astro"

package/lib/table/TableD.astro

@@ -1,8 +1,8 @@
 ---
 import { type DesktopTableClassses } from "./DesktopTableClassses"
 import { sharedTableRowClasses } from "./sharedTableRowClasses"
-// import { t4table } from "~/ui_tables/table3/t4table"
-import { classMerge } from "~/utils/ui/classMerge"
+// import { t4table } from "~ui/ui_tables/table3/t4table"
+import { classMerge } from "~ui/utils/classMerge"
 import { type TableColumnDef } from "./TableColumnDef"
 
 interface Props {

package/lib/table/TableM.astro

@@ -1,8 +1,8 @@
 ---
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
 import { type TableColumnDef } from "./TableColumnDef"
 import TableMEntry from "./TableMEntry.astro"
-import type { MobileTableClassses } from "~/table/MobileTableClassses"
+import type { MobileTableClassses } from "~ui/table/MobileTableClassses"
 
 interface Props {
   rows: string[]

package/lib/table/TableMEntry.astro

@@ -1,7 +1,7 @@
 ---
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
 import { type TableColumnDef } from "./TableColumnDef"
-import type { MobileTableClassses } from "~/table/MobileTableClassses"
+import type { MobileTableClassses } from "~ui/table/MobileTableClassses"
 
 interface Props {
   row: string

package/lib/table/tableVisibilityClasses.ts

@@ -1,6 +1,6 @@
-import { classMerge } from "~/utils/ui/classMerge"
-import type { TailwindBreakpoint } from "~/utils/ui/tailwindBreakpoint"
-import { tailwindBreakpoint } from "~/utils/ui/tailwindBreakpoint"
+import { classMerge } from "~ui/utils/classMerge"
+import type { TailwindBreakpoint } from "~ui/utils/tailwindBreakpoint"
+import { tailwindBreakpoint } from "~ui/utils/tailwindBreakpoint"
 
 function tableDesktopclass(b: TailwindBreakpoint) {
   const tb = tailwindBreakpoint

package/lib/utils/HasId.ts

@@ -0,0 +1,3 @@
+export interface HasId {
+  id: string
+}

package/lib/utils/HasSubtitle.ts

@@ -0,0 +1,4 @@
+export interface HasSubtitle {
+  subtitle: string
+  subtitleClass?: string
+}

package/lib/utils/HasTitle.ts

@@ -0,0 +1,4 @@
+export interface HasTitle {
+  title: string
+  titleClass?: string
+}

package/lib/utils/MayHaveButtonVariant.ts

@@ -0,0 +1,5 @@
+import type { ButtonVariant } from "~ui/button/buttonCva"
+
+export interface MayHaveButtonVariant {
+  variant?: ButtonVariant
+}

package/lib/utils/MayHaveClass.ts

@@ -0,0 +1,3 @@
+export interface MayHaveClass {
+  class?: string
+}

package/lib/utils/MayHaveIcon.ts

@@ -0,0 +1,4 @@
+export interface MayHaveIcon {
+  icon?: string
+  iconClass?: string
+}

package/lib/utils/MayHaveId.ts

@@ -0,0 +1,3 @@
+export interface MayHaveId {
+  id?: string
+}

package/lib/utils/MayHaveInnerClass.ts

@@ -0,0 +1,3 @@
+export interface MayHaveInnerClass {
+  innerClass?: string
+}

package/lib/utils/MayHaveSubtitle.ts

@@ -0,0 +1,4 @@
+export interface MayHaveSubtitle {
+  subtitle?: string
+  subtitleClass?: string
+}

package/lib/utils/MayHaveTitle.ts

@@ -0,0 +1,4 @@
+export interface MayHaveTitle {
+  title?: string
+  titleClass?: string
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptive-sm/astro-ui",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "scripts": {
     "astro": "astro",
     "dev": "nice -5 astro dev",
@@ -10,7 +10,7 @@
     "upload": "bun run wrangler pages deploy ./dist --project-name=adaptive-astro-ui --commit-dirty",
     "tag": "git branch -f deployed",
     "release": "bash ./ops/release.sh",
-    "generateDemoList": "bun run ./lib/generate_demo_list/generateDemoList.ts",
+    "generateDemoList": "bun run ./src/demos/generateDemoList.cli.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",
@@ -19,24 +19,25 @@
     "reset": "rm -rf ./node_modules"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.4",
-    "@biomejs/biome": "^2.2.4",
+    "@adaptive-sm/utils": "^0.5.0",
+    "@astrojs/check": "^0.9.5",
+    "@biomejs/biome": "^2.3.6",
     "@mdi/js": "^7.4.47",
-    "@tailwindcss/vite": "^4.1.13",
+    "@tailwindcss/vite": "^4.1.17",
     "@types/bun": "latest",
-    "astro": "^5.13.9",
-    "dayjs": "^1.11.18",
+    "astro": "^5.15.9",
+    "dayjs": "^1.11.19",
     "image-size": "^2.0.2",
     "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-toc": "^9.0.0",
-    "rollup-plugin-visualizer": "^6.0.3",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.13",
-    "typescript": "^5.9.2",
-    "wrangler": "^4.38.0"
+    "rollup-plugin-visualizer": "^6.0.5",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "wrangler": "^4.49.0"
   },
   "prettier": {
     "semi": false,

package/lib/icon/Icon1.astro

@@ -1,21 +0,0 @@
----
-import { classMerge } from "~/utils/ui/classMerge"
-
-interface Props {
-  path: string
-  class?: string
-  title?: string
-  ariaHidden?: boolean
-}
-const props = Astro.props
-const ariaHidden = props.ariaHidden ?? !props.title
-// TODO: maybe re-add title={title}
----
-
-<svg
-  viewBox={"0 0 24 24"}
-  aria-hidden={ariaHidden}
-  class={classMerge("size-6 flex-shrink-0 align-middle dark:fill-white", props.class)}
->
-  <path d={props.path}></path>
-</svg>

package/lib/layouts/MarkdownWrapper.astro

@@ -1,17 +0,0 @@
----
-import PageCenteredCard from "~/page/PageCenteredCard.astro"
-import { classMerge } from "~/utils/ui/classMerge"
-import { classArr } from "~/utils/ui/classArr"
-
-import "./parts/markdown.css"
-
-interface Props {
-  class?: string
-}
-
-const p = Astro.props
----
-
-<PageCenteredCard class={classMerge("max-w-5xl my-12", p.class)} classInner={classArr("markdown-body", p.class)}>
-  <slot />
-</PageCenteredCard>

package/lib/utils/bun/BunCmd.ts

@@ -1,7 +0,0 @@
-export type BunCmd = {
-  cmd: string[]
-  success: boolean
-  exitCode: number
-  lines: string[]
-  ms: number
-}

package/lib/utils/bun/cryAndTryAgainLater.ts

@@ -1,6 +0,0 @@
-import process from "node:process"
-
-export function cryAndTryAgainLater<T>(t: T): T {
-  process.exit(1)
-  return t
-}

package/lib/utils/bun/logBunCmd.ts

@@ -1 +0,0 @@
-export const logBunCmd = true

package/lib/utils/bun/runCmdAsync.ts

@@ -1,44 +0,0 @@
-import console from "node:console"
-import type { BunCmd } from "./BunCmd"
-import { logBunCmd } from "./logBunCmd"
-
-export async function runCmdAsync(cmd: string[]): Promise<BunCmd> {
-  const startedAt = performance.now()
-  if (logBunCmd) {
-    console.log({ cmd })
-  }
-  const process = Bun.spawn(cmd, {
-    stdout: "pipe",
-    stderr: "pipe",
-  })
-  const exitCode = await process.exited
-  const output = await Bun.readableStreamToText(process.stdout)
-  const error = await Bun.readableStreamToText(process.stderr)
-  const outputLines = output.split("\n").filter((s) => s.length > 0)
-  const errorLines = error.split("\n").filter((s) => s.length > 0)
-  const lines = [...outputLines, ...errorLines]
-  const endedAt = performance.now()
-  const ms = Math.round(endedAt - startedAt)
-  const r: BunCmd = {
-    cmd,
-    success: exitCode === 0,
-    exitCode,
-    lines,
-    ms,
-  }
-  if (logBunCmd) {
-    if (lines.length < 8) {
-      console.log(r)
-    } else {
-      const l: Omit<BunCmd, "lines"> = {
-        cmd,
-        success: exitCode === 0,
-        exitCode,
-        ms,
-      }
-      console.log(l)
-      console.log(JSON.stringify(lines, null, 2))
-    }
-  }
-  return r
-}

package/lib/utils/bun/runCmdLocally.ts

@@ -1,13 +0,0 @@
-import type { BunCmd } from "./BunCmd"
-import { cryAndTryAgainLater } from "./cryAndTryAgainLater"
-import { runCmdAsync } from "./runCmdAsync"
-
-export async function runCmdLocally(cmd: string | string[]): Promise<BunCmd> {
-  return runCmdAsync(["sh", "-c", Array.isArray(cmd) ? cmd.join(" ") : cmd])
-}
-
-export async function runCmdLocallyAndExitOnError(cmd: string | string[]): Promise<BunCmd> {
-  const got = await runCmdLocally(cmd)
-  if (!got.success) return cryAndTryAgainLater(got)
-  return got
-}

package/lib/utils/obj/objectKeys.ts

@@ -1,21 +0,0 @@
-/**
- * Like Object.keys, but unsound in exchange for more convenience.
- *
- * Casts the result of Object.keys to the known keys of an object type,
- * even though JavaScript objects may contain additional keys.
- *
- * Only use this function when you know/control the provenance of the object
- * you're iterating, and can verify it contains exactly the keys declared
- * to the type system.
- *
- * Example:
- * ```
- * const o = {x: "ok", y: 10}
- * o["z"] = "UNTRACKED_KEY"
- * const safeKeys = Object.keys(o)
- * const unsafeKeys = objectKeys(o)
- * ```
- * => const safeKeys: string[]
- * => const unsafeKeys: ("x" | "y")[] // Missing "z"
- */
-export const objectKeys = Object.keys as <T>(obj: T) => Array<keyof T>

package/lib/utils/ran/generateId12.ts

@@ -1,7 +0,0 @@
-import { generateReadableId } from "~/utils/ran/generateReadableId"
-
-const gen = generateReadableId(12)
-
-export function generateId12(): string {
-  return gen()
-}

package/lib/utils/ran/generateId3.ts

@@ -1,7 +0,0 @@
-import { generateReadableId } from "~/utils/ran/generateReadableId"
-
-const gen = generateReadableId(3)
-
-export function generateId3(): string {
-  return gen()
-}

package/lib/utils/ran/generateId4.ts

@@ -1,7 +0,0 @@
-import { generateReadableId } from "~/utils/ran/generateReadableId"
-
-const gen = generateReadableId(4)
-
-export function generateId4(): string {
-  return gen()
-}

package/lib/utils/ran/generateId5.ts

@@ -1,7 +0,0 @@
-import { generateReadableId } from "./generateReadableId"
-
-const gen = generateReadableId(5)
-
-export function generateId5(): string {
-  return gen()
-}

package/lib/utils/ran/generateId6.ts

@@ -1,7 +0,0 @@
-import { generateReadableId } from "~/utils/ran/generateReadableId"
-
-const gen = generateReadableId(6)
-
-export function generateId6(): string {
-  return gen()
-}

package/lib/utils/ran/generateId7.ts

@@ -1,7 +0,0 @@
-import { generateReadableId } from "~/utils/ran/generateReadableId"
-
-const gen = generateReadableId(7)
-
-export function generateId7(): string {
-  return gen()
-}