@adaptive-sm/astro-ui 0.3.0 → 0.4.0

package/lib/button/buttonCva.ts

@@ -5,6 +5,7 @@ import { classesButtonDisabled } from "./classesButtonDisabled"
 
 export type ButtonVariant = keyof typeof buttonVariant
 export const buttonVariant = {
+  none: "none",
   // transparent bg
   outline: "outline",
   ghost: "ghost",
@@ -54,6 +55,7 @@ const variantClasses = {
   //
   // transparent bg
   //
+  none: "",
   outline: classArr(
     "bg-transparent dark:bg-transparent",
     "dark:text-slate-100", // text

package/lib/icons/iconApple.ts

@@ -0,0 +1 @@
+export const iconApple = "M 12.1267 7.74663 C 11.3367 7.74663 10.1142 6.8483 8.82669 6.87997 C 7.1267 6.90247 5.56838 7.8658 4.69255 9.39162 C 2.9284 12.4541 4.23756 16.9774 5.95838 19.4666 C 6.80254 20.6782 7.79837 22.0415 9.11836 21.999 C 10.385 21.9449 10.86 21.1765 12.3975 21.1765 C 13.9233 21.1765 14.3558 21.999 15.6975 21.9665 C 17.0616 21.9449 17.9275 20.7332 18.7608 19.5099 C 19.7241 18.1032 20.1241 16.7391 20.1458 16.6641 C 20.1133 16.6532 17.4941 15.6466 17.4625 12.6166 C 17.4408 10.0833 19.5291 8.87162 19.6266 8.81746 C 18.4358 7.0758 16.6075 6.8808 15.9683 6.83747 C 14.3017 6.70747 12.9058 7.7458 12.1267 7.7458 Z M 14.9417 5.19165 C 15.6441 4.34832 16.1083 3.16916 15.9791 2 C 14.9733 2.04333 13.7608 2.67083 13.0358 3.51499 C 12.3858 4.26165 11.8242 5.46331 11.975 6.60997 C 13.09 6.69664 14.2375 6.03664 14.9408 5.19248"

package/lib/icons/iconGooglePlay.ts

@@ -0,0 +1,2 @@
+export const iconGooglePlay =
+  "m20.35 13.08-3.266 1.848-2.929-2.911 2.953-2.934 3.242 1.835c.3896.2204.6305.6333.6305 1.081s-.2409.8605-.6305 1.081zm-17.23-10.31c-.06184.1501-.09356.311-.09334.4733v17.51c0 .1809.0375.3492.1033.5001l9.296-9.239zm10.17 8.388 2.715-2.698-11.13-6.297c-.2385-.137-.5163-.1896-.7883-.1492zm0 1.723-9.167 9.111c.2483.03.51-.0133.755-.1525l11.1-6.283z"

package/lib/img/Img.astro

@@ -4,6 +4,7 @@ import { classesImgZoomInOnHover10 } from "./classesImgZoomInOnHover10"
 import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
+  id?: string
   alt: string
   src: string
   zoomIn?: boolean
@@ -19,6 +20,7 @@ const p = Astro.props
 ---
 
 <img
+  id={p.id}
   src={p.src}
   alt={p.alt}
   class={classMerge(p.zoomIn && classesImgZoomInOnHover10, p.class)}

package/lib/img/TypedImg.astro

@@ -6,6 +6,7 @@ import type { ImageType } from "./ImageType"
 import Img from "./Img.astro"
 
 interface Props {
+  id?: string
   img: ImageType
   zoomIn?: boolean
   invertColorsInDarkMode?: boolean
@@ -19,6 +20,7 @@ const imageUrl = (p.srcPrefix ? p.srcPrefix : "") + p.img.path
 ---
 
 <Img
+  id={p.id}
   src={imageUrl}
   alt={p.img.alt}
   class={classArr(p.invertColorsInDarkMode ? classInvertBlack : "", p.class)}

package/lib/img/TypedImgB2.astro

@@ -4,6 +4,7 @@ import type { ImageType } from "./ImageType"
 import TypedImg from "~ui/img/TypedImg.astro"
 
 interface Props {
+  id?: string
   img: ImageType
   zoomIn?: boolean
   invertColorsInDarkMode?: boolean
@@ -14,6 +15,7 @@ const p = Astro.props
 ---
 
 <TypedImg
+  id={p.id}
   img={p.img}
   srcPrefix="/media-b2/"
   zoomIn={p.zoomIn}

package/lib/modal/Modal.astro

@@ -1,9 +1,9 @@
 ---
-import "./Modal.module.css"
+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 { buttonVariant } from "~ui/button/buttonCva"
-import Button from "~ui/button/Button.astro"
+import "./Modal.module.css"
 
 /**
  * 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,9 +1,9 @@
 ---
+import Button from "~ui/button/Button.astro"
 import type { ButtonSize, ButtonVariant } from "~ui/button/buttonCva"
-import Modal from "./Modal.astro"
 import { classesTextGray } from "~ui/text/classesTextGray"
 import { classArr } from "~ui/utils/classArr"
-import Button from "~ui/button/Button.astro"
+import Modal from "./Modal.astro"
 
 interface Props {
   button: {
@@ -16,8 +16,17 @@ 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
 }
@@ -46,9 +55,10 @@ const classContentArea = p.classContentArea
 <Modal
   triggerId={id}
   title={title}
-  titleClass={classArr(classesTextGray, "text-xl", "mb-2")}
+  titleClass={classArr(classesTextGray, "text-xl", "mb-2", p.titleClass)}
   class={p.class}
   classContentArea={classContentArea}
+  close={p.close}
 >
   <slot />
 </Modal>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptive-sm/astro-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "scripts": {
     "astro": "astro",
     "dev": "nice -5 astro dev",