@adaptive-sm/astro-ui 0.2.1 → 0.3.0

package/README.md

@@ -18,7 +18,7 @@ bun add @adaptive-sm/astro-ui
 
 ## 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):
+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/tailwind.css` (or equivalent global stylesheet):
 
 ```css
 @source '/node_modules/@adaptive-sm/astro-ui/lib/**/*.{astro,html,md,mdx,ts,tsx}';
@@ -38,7 +38,7 @@ In your `tsconfig.json`, set up the `~` alias to point to the library:
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
-      "~/*": ["node_modules/@adaptive-sm/astro-ui/lib/*"]
+      "~ui/*": ["node_modules/@adaptive-sm/astro-ui/lib/*"]
     }
   }
 }
@@ -81,7 +81,7 @@ Import and use components directly in your Astro files. For example:
 
 ```astro
 ---
-import { Button } from "~/button/Button.astro"
+import { Button } from "~ui/button/Button.astro"
 ---
 
 <Button variant="primary">Click me</Button>
@@ -91,7 +91,7 @@ import { Button } from "~/button/Button.astro"
 
 ```astro
 ---
-import { CardWrapper } from "~/card/CardWrapper.astro"
+import { CardWrapper } from "~ui/card/CardWrapper.astro"
 ---
 
 <CardWrapper> Card content here. </CardWrapper>
@@ -101,7 +101,7 @@ import { CardWrapper } from "~/card/CardWrapper.astro"
 
 ```astro
 ---
-import { Img } from "~/img/Img.astro"
+import { Img } from "~ui/img/Img.astro"
 ---
 
 <Img src="/path/to/image.jpg" alt="Description" />
@@ -130,7 +130,7 @@ Refer to individual component documentation in the source code for props and var
 
 ### Icons
 
-- [Icon1.astro](lib/icon/Icon1.astro) (replaces SVG icons)
+- [Icon.astro](lib/icon/Icon.astro) (replaces SVG icons)
 
 usage:
 
@@ -153,7 +153,7 @@ usage:
 ### Layouts
 
 - [MinimalLayout.astro](lib/layouts/MinimalLayout.astro)
-- [MarkdownWrapper.astro](lib/layouts/MarkdownWrapper.astro)
+- [MarkdownPageWrapper.astro](lib/layouts/MarkdownPageWrapper.astro)
 
 ### Navigation bar
 

package/lib/badge/Badge.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { type BadgeVariant, badgeCva, badgeIconCva, badgeVariant } from "~ui/badge/classesBadge"
+import Icon from "~ui/icon/Icon.astro"
+import type { MayHaveClass } from "~ui/utils/MayHaveClass"
+
+interface Props extends MayHaveClass {
+  id?: string
+  variant?: BadgeVariant
+
+  icon?: string
+  iconRight?: string
+  iconClass?: string
+
+  class?: string
+  restProps?: HTMLAttributes<"svg">
+}
+
+const p = Astro.props
+const v = p.variant ?? badgeVariant.outline
+---
+
+<span id={p.id} class={badgeCva(v, p.class)} {...p.restProps}>
+  {p.icon && <Icon path={p.icon} class={badgeIconCva(v, p.iconClass)} />}
+  <slot />
+  {p.iconRight && <Icon path={p.iconRight} class={badgeIconCva(v, p.iconClass)} />}
+</span>

package/lib/badge/classesBadge.ts

@@ -0,0 +1,67 @@
+import { classArr } from "~ui/utils/classArr"
+import { classMerge } from "~ui/utils/classMerge"
+
+export type BadgeVariant = keyof typeof badgeVariant
+
+export const badgeVariant = {
+  base: "base",
+  contrast: "contrast",
+  outline: "outline",
+} as const
+
+export const classesBadgeBase = classArr(
+  "inline-flex items-center", // layout
+  "text-sm", // text
+  "px-2.5 py-0.5 rounded-full", // padding
+  "flex gap-2", // layout children
+)
+
+export const classesBadgeContrast = classArr(
+  classesBadgeBase,
+  "text-white dark:text-slate-900 dark:hover:text-slate-900", // text
+  "bg-slate-900 dark:bg-slate-50", // bg
+)
+
+export const classesBadgeOutline = classArr(
+  classesBadgeBase,
+  "border border-gray-400 dark:border-gray-500", // border
+)
+
+export const classesBadgeVariant = {
+  base: classesBadgeBase,
+  contrast: classesBadgeContrast,
+  outline: classesBadgeOutline,
+} as const satisfies Record<BadgeVariant, string>
+
+export function badgeCva(v: BadgeVariant, classes?: string): string {
+  return classMerge(classesBadgeVariant[v ?? badgeVariant.base], classes)
+}
+
+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 badgeIconClasses = {
+  base: classesBlackWhite,
+  outline: classesBlackWhite,
+  contrast: classArr(classesTextFillWhite, "dark:text-black dark:fill-black"),
+} as const satisfies Record<BadgeVariant, string>
+
+export function badgeIconCva(variant: BadgeVariant, classes?: string) {
+  return classMerge(baseClasses, badgeIconClasses[variant], classes)
+}

package/lib/button/Button.astro

@@ -1,9 +1,10 @@
 ---
-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"
+import type { HTMLAttributes } from "astro/types"
+import { buttonCva2, type ButtonSize, type ButtonVariant } from "~ui/button/buttonCva"
+import { buttonIconCva } from "~ui/button/buttonIconCva"
+import { classesButtonClickAnimation } from "~ui/button/classesButtonClickAnimation"
+import Icon from "~ui/icon/Icon.astro"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   id?: string
@@ -18,41 +19,30 @@ interface Props {
   iconRight?: string
   iconClass?: string
   class?: string
-  onclick?: any
+  restProps?: HTMLAttributes<"button">
 }
-const props = Astro.props
+const p = Astro.props
 
-const classes = buttonCva2(props.variant, props.size, classesButtonClickAnimation, props.class)
+const classes = buttonCva2(p.variant, p.size, classesButtonClickAnimation, p.class)
 const hasChildren = Astro.slots.has("default")
-const hasContent = hasChildren || props.text
+const hasContent = hasChildren || p.text
 ---
 
-<button id={props.id} title={props.title} class={classes} onclick={props.onclick}>
+<button id={p.id} title={p.title} class={classes} {...p.restProps}>
+  {p.icon && <Icon path={p.icon} class={classMerge(hasContent && "mr-2", buttonIconCva(p.variant, p.iconClass))} />}
   {
-    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}
+    p.text && (
+      <span id={p.contentId} class={p.contentClass}>
+        {p.text}
       </span>
     )
   }
   {
     hasContent && (
-      <span id={props.contentId} class={props.contentClass}>
+      <span id={p.contentId} class={p.contentClass}>
         <slot />
       </span>
     )
   }
-  {
-    props.iconRight && (
-      <Icon1 path={props.iconRight} class={buttonIconCva(props.variant, hasContent && "ml-2", props.iconClass)} />
-    )
-  }
+  {p.iconRight && <Icon path={p.iconRight} class={buttonIconCva(p.variant, hasContent && "ml-2", p.iconClass)} />}
 </button>

package/lib/button/buttonCva.ts

@@ -1,5 +1,5 @@
-import { classArr } from "~/utils/ui/classArr"
-import { classMerge } from "~/utils/ui/classMerge"
+import { classArr } from "~ui/utils/classArr"
+import { classMerge } from "~ui/utils/classMerge"
 import { classesButtonClickAnimation } from "./classesButtonClickAnimation"
 import { classesButtonDisabled } from "./classesButtonDisabled"
 

package/lib/button/buttonIconCva.ts

@@ -1,5 +1,5 @@
-import { classArr } from "~/utils/ui/classArr"
-import { classMerge } from "~/utils/ui/classMerge"
+import { classArr } from "~ui/utils/classArr"
+import { classMerge } from "~ui/utils/classMerge"
 import { type ButtonVariant } from "./buttonCva"
 
 const classesTextFillBlack = "text-black fill-black"

package/lib/button/classesButtonClickAnimation.ts

@@ -1,4 +1,4 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classArr } from "~ui/utils/classArr"
 
 export const classesButtonClickAnimation = classArr(
   // "duration-300",

package/lib/button/classesButtonClickAnimationPush.ts

@@ -1,4 +1,4 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classArr } from "~ui/utils/classArr"
 
 /**
  * disable hover because popovers move with it

package/lib/button/classesButtonClickAnimationSquish.ts

@@ -1,4 +1,4 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classArr } from "~ui/utils/classArr"
 
 /**
  * unused because it's a little to fancy

package/lib/card/CardWrapper.astro

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

package/lib/card/classesBorderWrapper.ts

@@ -0,0 +1 @@
+export const classesBorderWrapper = "border border-gray-500 rounded-xl"

package/lib/card/classesCardWrapper.ts

@@ -1,16 +1,28 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classesShadowMdLg } from "~ui/card/classesShadow"
+import { classArr } from "~ui/utils/classArr"
+
+export const classesCardWrapperBorderDark = "dark:border dark:border-gray-500"
+export const classesCardWrapperBg = "bg-white dark:bg-zinc-800"
 
 export const classesCardWrapper = classArr(
-  "rounded-lg shadow-lg", // card shadows/padding
-  "bg-white dark:bg-gray-900", // bg
+  "rounded-lg",
+  classesShadowMdLg, // card shadows/padding
+  classesCardWrapperBg, // bg
+  classesCardWrapperBorderDark, // border
 )
 
-export const classesCardWrapperP4 = classArr(classesCardWrapper, "p-4 lg:p-8")
-export const classesCardWrapperP8 = classArr(classesCardWrapper, "p-4 sm:p-8")
+export const classesPadding4Lg8 = "p-4 lg:p-8"
+export const classesPadding4sm8 = "p-4 sm:p-8"
+export const classesPadding4sm8md12 = "p-4 sm:p-8 md:p-12"
+
+export const classesCardWrapperP4 = classArr(classesCardWrapper, classesPadding4Lg8)
+export const classesCardWrapperP8 = classArr(classesCardWrapper, classesPadding4sm8)
+
+export const classesRoundedShadowXl = "rounded-xl shadow-xl"
 
 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
+  classesRoundedShadowXl, // rounded border + shadow
+  classesPadding4sm8md12, // padding
+  classesCardWrapperBg, // bg
+  classesCardWrapperBorderDark, // border
 )

package/lib/card/classesShadow.ts

@@ -0,0 +1,5 @@
+export const classesShadowSmMd = "shadow-sm hover:shadow-md transition duration-500"
+
+export const classesShadowMdLg = "shadow-md hover:shadow-lg transition duration-500"
+
+export const classesShadowLgXl = "shadow-lg hover:shadow-xl transition duration-500"

package/lib/details/Details.astro

@@ -1,8 +1,9 @@
 ---
-import Icon1 from "~/icon/Icon1.astro"
-import { classArr } from "~/utils/ui/classArr"
-import { classMerge } from "~/utils/ui/classMerge"
+import Icon from "~ui/icon/Icon.astro"
+import { classArr } from "~ui/utils/classArr"
+import { classMerge } from "~ui/utils/classMerge"
 import { mdiChevronDown } from "@mdi/js"
+import type { HTMLAttributes } from "astro/types"
 
 interface Props {
   icon?: string
@@ -10,6 +11,8 @@ interface Props {
   subtitle?: string
   class?: string
   summaryClass?: string
+  restProps?: HTMLAttributes<"details">
+  summaryProps?: HTMLAttributes<"summary">
 }
 const p = Astro.props
 const icon = p.icon
@@ -27,6 +30,7 @@ const hasSummary = Astro.slots.has("summary")
     "overflow-hidden",
     p.class,
   )}
+  {...p.restProps}
 >
   <summary
     class={classArr(
@@ -35,20 +39,21 @@ const hasSummary = Astro.slots.has("summary")
       "cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors",
       p.summaryClass,
     )}
+    {...p.summaryProps}
   >
     {
       !hasSummary && title && (
         <>
-          {icon && <Icon1 path={icon} class="size-7 mt-1" />}
-          <div class="flex-1">
+          {icon && <Icon path={icon} class="size-7 mt-1" />}
+          <span class="flex-1">
             <h3 class={"text-xl font-semibold"}>{title}</h3>
-            {subtitle && <p class={"text-muted-foreground mt-1"}>{subtitle}</p>}
-          </div>
+            {subtitle && <span class={"text-muted-foreground mt-1"}>{subtitle}</span>}
+          </span>
         </>
       )
     }
     <slot name="summary" />
-    <Icon1
+    <Icon
       path={mdiChevronDown}
       class={classArr("size-7", "text-gray-400 dark:text-gray-600", "transition-transform group-open:rotate-180")}
     />

package/lib/dev/TailwindIndicator.astro

@@ -1,6 +1,6 @@
 ---
-import { classMerge } from "~/utils/ui/classMerge"
-import { isDevEnv } from "~/utils/ui/isDevEnv"
+import { classMerge } from "~ui/utils/classMerge"
+import { isDevEnv } from "~ui/utils/isDevEnv"
 ---
 
 {

package/lib/form/Fieldset.astro

@@ -1,6 +1,7 @@
 ---
+import type { HTMLAttributes } from "astro/types"
 import { classesFieldset } from "./classesFieldset"
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   title: string
@@ -8,13 +9,15 @@ interface Props {
   subtitles?: string | string[]
   subtitleClass?: string
   class?: string
+  restProps?: HTMLAttributes<"fieldset">
+  legendProps?: HTMLAttributes<"legend">
 }
-const props = Astro.props
+const p = Astro.props
 ---
 
-<fieldset class={classMerge(classesFieldset, props.class)}>
-  <legend class={classMerge("px-1", props.titleClass)}>
-    {props.title}
+<fieldset class={classMerge(classesFieldset, p.class)} {...p.restProps}>
+  <legend class={classMerge("px-1", p.titleClass)} {...p.legendProps}>
+    {p.title}
     <!--{props.subtitles && <PopoverI title={props.title} points={props.subtitles} />}-->
   </legend>
   <slot />

package/lib/generate_demo_list/DemoList.astro

@@ -1,8 +1,8 @@
 ---
-import { classesTextLink } from "~/link/classesTextLink"
-import { classArr } from "~/utils/ui/classArr"
+import { classesTextLink } from "~ui/link/classesTextLink"
+import { classArr } from "~ui/utils/classArr"
 import { type DemoListType } from "./DemoListType"
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
 
 interface Props {
   demos: DemoListType

package/lib/generate_demo_list/generateDemoList.ts

@@ -1,6 +1,6 @@
 import { readdir, writeFile } from "node:fs/promises"
 import { join } from "node:path"
-import { runCmdAsync } from "~/utils/bun/runCmdAsync"
+import { runCmdAsync } from "~utils/bun/runCmdAsync"
 import type { DemoListType } from "./DemoListType"
 
 export async function generateDemoList(demosPath: string, outputPath: string) {
@@ -20,7 +20,7 @@ export async function generateDemoList(demosPath: string, outputPath: string) {
   }
   sortDemoPageList(demoPageList)
 
-  const outputContent = `import type { DemoListType } from "~/generate_demo_list/DemoListType"
+  const outputContent = `import type { DemoListType } from "~ui/generate_demo_list/DemoListType"
 
 export const demoList = ${JSON.stringify(demoPageList, null, 2)} satisfies DemoListType;
 `

package/lib/generate_image_list/generateImageList.ts

@@ -1,8 +1,8 @@
 import imageSize from "image-size"
 import { promises as fs } from "node:fs"
 import path from "node:path"
-import type { ImageType } from "~/img/ImageType"
-import { runCmdAsync } from "~/utils/bun/runCmdAsync"
+import type { ImageType } from "~ui/img/ImageType"
+import { runCmdAsync } from "~utils/bun/runCmdAsync"
 
 const IMAGE_EXTENSIONS = new Set([".jpg", ".jpeg", ".png", ".gif", ".webp", ".avif", ".tiff", ".svg"])
 
@@ -42,7 +42,7 @@ export async function generateImageList(
 
 async function writeGeneratedImagesFile(imageMap: Record<string, ImageType>, outputPath: string): Promise<void> {
   const outputContent = `
-  import type { ImageType } from "~/img/ImageType"
+  import type { ImageType } from "~ui/img/ImageType"
   // Auto-generated, manual changes will be lost
 export const imageList = ${JSON.stringify(imageMap, null, 2)} as const satisfies Record<string, ImageType>;
 `

package/lib/grid/FeatureGridSection.astro

@@ -1,39 +1,52 @@
 ---
-import Icon1 from "~/icon/Icon1.astro"
-import { classArr } from "~/utils/ui/classArr"
+import Icon from "~ui/icon/Icon.astro"
+import { classArr } from "~ui/utils/classArr"
 import { mdiLink } from "@mdi/js"
 import type { GridFeatureType } from "./GridFeatureType"
-import { classMerge } from "~/utils/ui/classMerge"
+import { classMerge } from "~ui/utils/classMerge"
+import type { HTMLAttributes } from "astro/types"
+import type { CssProperties } from "node_modules/astro/dist/assets/fonts/definitions"
+import { classesShadowMdLg } from "~ui/card/classesShadow"
 
 interface Props {
   id: string
   title: string
+  titleClass?: string
   subtitle1: string
+  subtitle1Class?: string
   subtitle2?: string
+  subtitle2Class?: string
   features: GridFeatureType[]
   class?: string
+  headerClass?: string
   gridClass?: string
   cardClass?: string
+  restProps?: HTMLAttributes<"section">
+  style?: CssProperties
 }
 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")}>
+<section id={p.id} class={classMerge("w-full", "py-25 px-4", p.class)} style={p.style} {...p.restProps}>
+  <div class={classArr("max-w-7xl mx-auto", "text-center mb-8", p.headerClass)}>
     <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"
+      <a
+        href={"#" + p.id}
+        class="opacity-0 group-hover:opacity-100 p-1 rounded hidden sm:flex"
+        title="Link to this section"
       >
-        <Icon1 path={mdiLink} class="size-4" />
-      </button>
+        <Icon path={mdiLink} class="size-6 fill-gray-500 dark:fill-gray-500" />
+      </a>
     </h2>
-    <p class="text-xl text-muted-foreground mx-auto">
+    <p class={classMerge("text-xl text-muted-foreground mx-auto", p.subtitle1Class)}>
       {p.subtitle1}
     </p>
-    {p.subtitle2 && <p class="text-xl text-muted-foreground mx-auto mt-1">{p.subtitle2}</p>}
+    {
+      p.subtitle2 && (
+        <p class={classMerge("text-xl text-muted-foreground mx-auto mt-1", p.subtitle2Class)}>{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)}>
@@ -44,12 +57,12 @@ const p = Astro.props
             "bg-white dark:bg-gray-800", // bg
             "rounded-lg p-6", // padding
             // "border", // border
-            "shadow-sm hover:shadow-lg transition-shadow", // shadow
+            classesShadowMdLg,
             p.cardClass,
           )}
         >
           <div class="flex items-center gap-3 mb-4">
-            <Icon1 path={feature.icon} class="size-8" />
+            <Icon path={feature.icon} class="size-8" />
             <h3 class="text-xl font-semibold">{feature.title}</h3>
           </div>
           <p class="text-muted-foreground">{feature.description}</p>
@@ -58,23 +71,3 @@ const p = Astro.props
     }
   </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/classesGridCols.ts

@@ -1,14 +1,33 @@
-import { classArr } from "~/utils/ui/classArr"
+import { classArr } from "~ui/utils/classArr"
 
 export const classesGridCols2ContentFr = "grid grid-cols-[max-content_1fr]"
 export const classesGridCols3MaxMinFr = "grid grid-cols-[max-content_min-content_1fr]"
 
+export const classesGridCols2sm = classArr("grid grid-cols-1", "sm:grid-cols-2")
+
+export const classesGridCols2md = classArr("grid grid-cols-1", "md:grid-cols-2")
+
+/**
+ * 1280/2 = 640 px = 35.5 rem / col
+ */
+export const classesGridCols2lg = classArr("grid grid-cols-1", "lg:grid-cols-2")
+
 /**
  * ~600 px (37rem, ~60ch) / col
  */
 export const classesGridCols2xl = classArr("grid grid-cols-1", "xl:grid-cols-2")
 export const classesGridCols2xl3 = classArr(classesGridCols2xl, "2xl:grid-cols-4", "3xl:grid-cols-6")
 
+/**
+ * 1024/3 = 341 px = 19rem / col
+ * xl: 1280/340 = 3.75
+ * lg: 1024/340 = 3
+ * md: 768/340 = 2.26
+ * sm: 640/340 = 1.8
+ * xs: 400/340 = 1.17
+ */
+export const classesGridCols3lg = classArr("grid grid-cols-1", "md:grid-cols-2", "lg:grid-cols-3")
+
 /**
  * ~400 px (25rem, ~40ch) / col
  */
@@ -36,7 +55,13 @@ export const classesGridCols4xl3 = classArr(classesGridCols4xl, "2xl:grid-cols-8
  * sm: 640/256 = 2.5
  * xs: 400/256 = 1.56
  */
-export const classesGridCols5xl = classArr("grid grid-cols-1", "sm:grid-cols-2", "md:grid-cols-3", "lg:grid-cols-4", "xl:grid-cols-5")
+export const classesGridCols5xl = classArr(
+  "grid grid-cols-1",
+  "sm:grid-cols-2",
+  "md:grid-cols-3",
+  "lg:grid-cols-4",
+  "xl:grid-cols-5",
+)
 export const classesGridCols5xl3 = classArr(classesGridCols5xl, "2xl:grid-cols-10", "3xl:grid-cols-15")
 
 /**