@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/place-content.mdx

@@ -0,0 +1,257 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "place-content";
+export const description = "Utilities for controlling how content is justified and aligned at the same time.";
+
+<ApiTable
+  rows={[
+    ["place-content-center", "place-content: center;"],
+    ["place-content-center-safe", "place-content: safe center;"],
+    ["place-content-start", "place-content: start;"],
+    ["place-content-end", "place-content: end;"],
+    ["place-content-end-safe", "place-content: safe end;"],
+    ["place-content-between", "place-content: space-between;"],
+    ["place-content-around", "place-content: space-around;"],
+    ["place-content-evenly", "place-content: space-evenly;"],
+    ["place-content-baseline", "place-content: baseline;"],
+    ["place-content-stretch", "place-content: stretch;"],
+  ]}
+/>
+
+## Examples
+
+### Center
+
+Use `place-content-center` to pack items in the center of the inline and block axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 grid-cols-[repeat(2,56px)] place-content-center gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-sky-500 p-4">01</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-sky-500 p-4">02</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-sky-500 p-4">03</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-sky-500 p-4">04</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-content-center] -->
+<div class="grid h-48 grid-cols-2 place-content-center gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+</div>
+```
+
+</Figure>
+
+### Start
+
+Use `place-content-start` to pack items against the start of the inline and block axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 grid-cols-[repeat(2,56px)] place-content-start gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500 p-4">01</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500 p-4">02</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500 p-4">03</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-fuchsia-500 p-4">04</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-content-start] -->
+<div class="grid h-48 grid-cols-2 place-content-start gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+</div>
+```
+
+</Figure>
+
+### End
+
+Use `place-content-end` to pack items against the end of the inline and block axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 grid-cols-[repeat(2,56px)] place-content-end gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-500 p-4">01</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-500 p-4">03</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-indigo-500 p-4">04</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-content-end] -->
+<div class="grid h-48 grid-cols-2 place-content-end gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+</div>
+```
+
+</Figure>
+
+### Space between
+
+Use `place-content-between` to distribute grid items along the inline and block axes so that there is an equal amount of space between each row and column on each axis respectively:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 grid-cols-[repeat(2,56px)] [place-content:space-between] gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-purple-500 p-4">01</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-purple-500 p-4">02</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-purple-500 p-4">03</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-purple-500 p-4">04</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-content-between] -->
+<div class="grid h-48 grid-cols-2 place-content-between gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+</div>
+```
+
+</Figure>
+
+### Space around
+
+Use `place-content-around` to distribute grid items along the inline and block axes so that there is an equal amount of space around each row and column on each axis respectively:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 grid-cols-[repeat(2,56px)] [place-content:space-around] gap-x-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500 p-4">01</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500 p-4">02</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500 p-4">03</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-cyan-500 p-4">04</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-content-around] -->
+<div class="grid h-48 grid-cols-2 place-content-around gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+</div>
+```
+
+</Figure>
+
+### Space evenly
+
+Use `place-content-evenly` to distribute grid items such that they are evenly spaced on the inline and block axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 grid-cols-[repeat(2,56px)] [place-content:space-evenly] rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-violet-500 p-4">01</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-violet-500 p-4">02</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-violet-500 p-4">03</div>
+        <div className="flex h-14 w-14 items-center justify-center rounded-lg bg-violet-500 p-4">04</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-content-evenly] -->
+<div class="grid h-48 grid-cols-2 place-content-evenly gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+</div>
+```
+
+</Figure>
+
+### Stretch
+
+Use `place-content-stretch` to stretch grid items along their grid areas on the inline and block axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 grid-cols-2 place-content-stretch gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
+        <div className="flex items-center justify-center rounded-lg bg-pink-500 p-4">01</div>
+        <div className="flex items-center justify-center rounded-lg bg-pink-500 p-4">02</div>
+        <div className="flex items-center justify-center rounded-lg bg-pink-500 p-4">03</div>
+        <div className="flex items-center justify-center rounded-lg bg-pink-500 p-4">04</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-content-stretch] -->
+<div class="grid h-48 grid-cols-2 place-content-stretch gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign
+  property="place-content"
+  defaultClass="grid place-content-start"
+  featuredClass="place-content-center"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/place-items.mdx

@@ -0,0 +1,269 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "place-items";
+export const description = "Utilities for controlling how items are justified and aligned at the same time.";
+
+<ApiTable
+  rows={[
+    ["place-items-start", "place-items: start;"],
+    ["place-items-end", "place-items: end;"],
+    ["place-items-end-safe", "place-items: safe end;"],
+    ["place-items-center", "place-items: center;"],
+    ["place-items-center-safe", "place-items: safe center;"],
+    ["place-items-baseline", "place-items: baseline;"],
+    ["place-items-stretch", "place-items: stretch;"],
+  ]}
+/>
+
+## Examples
+
+### Start
+
+Use `place-items-start` to place grid items on the start of their grid areas on both axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="font-mono text-sm leading-6 font-bold text-white">
+      <div className="grid h-56 grid-cols-3 gap-4">
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
+            01
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
+            02
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
+            03
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
+            04
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
+            05
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4">
+            06
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-items-start] -->
+<div class="grid grid-cols-3 place-items-start gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+  <div>06</div>
+</div>
+```
+
+</Figure>
+
+### End
+
+Use `place-items-end` to place grid items on the end of their grid areas on both axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="font-mono text-sm leading-6 font-bold text-white">
+      <div className="grid h-56 grid-cols-3 gap-4">
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
+            01
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
+            02
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
+            03
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
+            04
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
+            05
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4">
+            06
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-items-end] -->
+<div class="grid h-56 grid-cols-3 place-items-end gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+  <div>06</div>
+</div>
+```
+
+</Figure>
+
+### Center
+
+Use `place-items-center` to place grid items on the center of their grid areas on both axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="font-mono text-sm leading-6 font-bold text-white">
+      <div className="grid h-56 grid-cols-3 gap-4">
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
+            01
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
+            02
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
+            03
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
+            04
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
+            05
+          </div>
+        </div>
+        <div className="grid grid-cols-1">
+          <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+          <div className="col-start-1 row-start-1 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4">
+            06
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-items-center] -->
+<div class="grid h-56 grid-cols-3 place-items-center gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+  <div>06</div>
+</div>
+```
+
+</Figure>
+
+### Stretch
+
+Use `place-items-stretch` to stretch items along their grid areas on both axes:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid h-56 grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white">
+        <div className="grid place-items-stretch">
+          <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">01</div>
+        </div>
+        <div className="grid place-items-stretch">
+          <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">02</div>
+        </div>
+        <div className="grid place-items-stretch">
+          <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">03</div>
+        </div>
+        <div className="grid place-items-stretch">
+          <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">04</div>
+        </div>
+        <div className="grid place-items-stretch">
+          <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">05</div>
+        </div>
+        <div className="grid place-items-stretch">
+          <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">06</div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:place-items-stretch] -->
+<div class="grid h-56 grid-cols-3 place-items-stretch gap-4 ...">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+  <div>06</div>
+</div>
+```
+
+</Figure>
+
+## Responsive design
+
+<ResponsiveDesign property="place-items" defaultClass="grid place-items-start" featuredClass="place-items-center" />