@relevate/katachi 0.1.0 → 0.2.0

package/examples/basic/components/notice-panel.html

@@ -8,9 +8,9 @@
     {% let name = icon %}
     {% include "./includes/glyph.html" %}
     <div class="min-w-0 flex-1">
-      <h3 class="text-sm font-semibold tracking-tight">
+      <h{{ headingLevel }} class="text-sm font-semibold tracking-tight">
         {{ title }}
-      </h3>
+      </h{{ headingLevel }}>
       <div class="mt-2 text-sm leading-6 text-slate-700">
         {{ children|safe }}
       </div>

package/examples/basic/dist/askama/includes/notice-panel.html

@@ -12,11 +12,11 @@
     <div
       class='min-w-0 flex-1'
     >
-      <h3
+      <h{{ headingLevel }}
         class='text-sm font-semibold tracking-tight'
       >
         {{ title }}
-      </h3>
+      </h{{ headingLevel }}>
       <div
         class='mt-2 text-sm leading-6 text-slate-700'
       >

package/examples/basic/dist/askama/notice-panel.rs

@@ -18,11 +18,11 @@ use askama::Template;
     <div
       class='min-w-0 flex-1'
     >
-      <h3
+      <h{{ headingLevel }}
         class='text-sm font-semibold tracking-tight'
       >
         {{ title }}
-      </h3>
+      </h{{ headingLevel }}>
       <div
         class='mt-2 text-sm leading-6 text-slate-700'
       >
@@ -42,6 +42,7 @@ use askama::Template;
 )]
 pub struct NoticePanelTemplate<'a> {
     pub tone: &'a str,
+    pub headingLevel: i64,
     pub title: &'a str,
     pub icon: &'a str,
     pub children: &'a str,

package/examples/basic/dist/jsx-static/comparison-table.tsx

@@ -2,8 +2,8 @@ import type { ReactNode } from "react";
 
 
 export type ComparisonTableProps = {
-  head: string[];
-  rows: string[][];
+  head: ReactNode[];
+  rows: ReactNode[][];
 };
 
 export default function ComparisonTable({ head, rows }: ComparisonTableProps) {

package/examples/basic/dist/jsx-static/media-frame.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 
 export type MediaFrameProps = {
   eyebrow?: string;
-  caption_html?: string;
+  caption_html?: ReactNode;
   children?: ReactNode;
 };
 

package/examples/basic/dist/jsx-static/notice-panel.tsx

@@ -1,15 +1,17 @@
-import type { ReactNode } from "react";
+import type { ElementType, ReactNode } from "react";
 import Glyph from "./glyph";
 
 
 export type NoticePanelProps = {
   tone: string;
+  headingLevel: number;
   title: string;
   icon: string;
   children?: ReactNode;
 };
 
-export default function NoticePanel({ tone, title, icon, children }: NoticePanelProps) {
+export default function NoticePanel({ tone, headingLevel, title, icon, children }: NoticePanelProps) {
+  const Tag = `h${headingLevel}` as ElementType;
   return (
     <aside
       className={`rounded-3xl border px-5 py-4 backdrop-blur-sm ${(tone === "calm") ? "border-sky-200 bg-sky-50/80" : ""} ${(tone === "urgent") ? "border-rose-200 bg-rose-50/80" : ""} ${(tone === "success") ? "border-emerald-200 bg-emerald-50/80" : ""}`}
@@ -26,11 +28,11 @@ export default function NoticePanel({ tone, title, icon, children }: NoticePanel
         <div
           className="min-w-0 flex-1"
         >
-          <h3
+          <Tag
             className="text-sm font-semibold tracking-tight"
           >
             {title}
-          </h3>
+          </Tag>
           <div
             className="mt-2 text-sm leading-6 text-slate-700"
           >

package/examples/basic/dist/jsx-static/resource-tile.tsx

@@ -4,9 +4,9 @@ import Glyph from "./glyph";
 
 export type ResourceTileProps = {
   href: string;
-  title_html: string;
-  summary_html: string;
-  eyebrow_html?: string;
+  title_html: ReactNode;
+  summary_html: ReactNode;
+  eyebrow_html?: ReactNode;
   icon: string;
   selected: boolean;
 };

package/examples/basic/dist/liquid/snippets/badge-chip.liquid

@@ -0,0 +1,5 @@
+<span
+  class='inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold tracking-wide {% if tone == "neutral" %}bg-slate-100 text-slate-700{% endif %} {% if tone == "accent" %}bg-amber-100 text-amber-700{% endif %}'
+>
+  {{ label }}
+</span>

package/examples/basic/dist/liquid/snippets/comparison-table.liquid

@@ -0,0 +1,34 @@
+<div
+  class='overflow-x-auto rounded-3xl border border-slate-200 bg-white'
+>
+  <table
+    class='min-w-full divide-y divide-slate-200'
+  >
+    <thead>
+      <tr>
+        {% for cell in head %}
+          <th
+            class='bg-slate-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-slate-500'
+          >
+            {{ cell }}
+          </th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      {% for row in rows %}
+        <tr
+          class='odd:bg-white even:bg-slate-50/60'
+        >
+          {% for cell in row %}
+            <td
+              class='px-4 py-3 text-sm text-slate-700'
+            >
+              {{ cell }}
+            </td>
+          {% endfor %}
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

package/examples/basic/dist/liquid/snippets/glyph.liquid

@@ -0,0 +1,6 @@
+<svg
+  class='{{ className }}'
+  data-tone='{{ tone }}'
+  data-size='{{ size }}'
+  data-name='{{ name }}'
+ />

package/examples/basic/dist/liquid/snippets/hover-note.liquid

@@ -0,0 +1,6 @@
+<span
+  data-hover-note='{{ label }}'
+  class='cursor-help underline decoration-dotted underline-offset-4'
+>
+  {{ children }}
+</span>

package/examples/basic/dist/liquid/snippets/media-frame.liquid

@@ -0,0 +1,23 @@
+<figure
+  class='overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm'
+>
+  {% if eyebrow != null %}
+    <div
+      class='border-b border-slate-200 px-5 py-3 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500'
+    >
+      {{ eyebrow }}
+    </div>
+  {% endif %}
+  <div
+    class='bg-slate-50 p-4'
+  >
+    {{ children }}
+  </div>
+  {% if caption_html != null %}
+    <figcaption
+      class='border-t border-slate-200 px-5 py-4 text-sm leading-6 text-slate-600'
+    >
+      {{ caption_html }}
+    </figcaption>
+  {% endif %}
+</figure>

package/examples/basic/dist/liquid/snippets/notice-panel.liquid

@@ -0,0 +1,30 @@
+<aside
+  class='rounded-3xl border px-5 py-4 backdrop-blur-sm {% if tone == "calm" %}border-sky-200 bg-sky-50/80{% endif %} {% if tone == "urgent" %}border-rose-200 bg-rose-50/80{% endif %} {% if tone == "success" %}border-emerald-200 bg-emerald-50/80{% endif %}'
+>
+  <div
+    class='flex items-start gap-3'
+  >
+    {% render 'glyph', className: "mt-0.5 h-5 w-5 shrink-0", tone: tone, size: "18", name: icon %}
+    <div
+      class='min-w-0 flex-1'
+    >
+      <h{{ headingLevel }}
+        class='text-sm font-semibold tracking-tight'
+      >
+        {{ title }}
+      </h{{ headingLevel }}>
+      <div
+        class='mt-2 text-sm leading-6 text-slate-700'
+      >
+        {{ children }}
+      </div>
+    </div>
+  </div>
+  {% if tone == "urgent" %}
+    <p
+      class='mt-3 text-xs font-medium uppercase tracking-[0.24em] text-rose-700'
+    >
+      Action recommended
+    </p>
+  {% endif %}
+</aside>

package/examples/basic/dist/liquid/snippets/resource-tile.liquid

@@ -0,0 +1,38 @@
+<li
+  class='list-none'
+  role='option'
+  tabIndex='{{ -1 }}'
+  aria-selected='{{ selected }}'
+>
+  <a
+    href='{{ href }}'
+    class='group block rounded-2xl border border-slate-200 bg-white p-4 transition hover:border-slate-300 hover:shadow-sm'
+  >
+    <div
+      class='flex items-start gap-3'
+    >
+      {% render 'glyph', className: "mt-0.5 h-5 w-5 shrink-0 text-slate-500", tone: "slate", size: "18", name: icon %}
+      <div
+        class='min-w-0 flex-1'
+      >
+        {% if eyebrow_html != null %}
+          <div
+            class='truncate text-xs font-medium uppercase tracking-[0.2em] text-slate-500'
+          >
+            {{ eyebrow_html }}
+          </div>
+        {% endif %}
+        <div
+          class='mt-1 truncate text-sm font-semibold text-slate-900'
+        >
+          {{ title_html }}
+        </div>
+        <p
+          class='mt-1 text-sm leading-6 text-slate-600'
+        >
+          {{ summary_html }}
+        </p>
+      </div>
+    </div>
+  </a>
+</li>

package/examples/basic/dist/liquid/snippets/stack-shell.liquid

@@ -0,0 +1,5 @@
+<section
+  class='mx-auto max-w-4xl space-y-6 rounded-[28px] border border-slate-200 bg-white/90 p-6 shadow-[0_24px_80px_-40px_rgba(15,23,42,0.45)]'
+>
+  {{ children }}
+</section>

package/examples/basic/dist/react/badge-chip.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+
 
 
 export type BadgeChipProps = {

package/examples/basic/dist/react/comparison-table.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from "react";
+import { Fragment, type ReactNode } from "react";
 
 
 export type ComparisonTableProps = {
-  head: string[];
-  rows: string[][];
+  head: ReactNode[];
+  rows: ReactNode[][];
 };
 
 export default function ComparisonTable({ head, rows }: ComparisonTableProps) {
@@ -17,33 +17,33 @@ export default function ComparisonTable({ head, rows }: ComparisonTableProps) {
         <thead>
           <tr>
             {(head ?? []).map((cell, __index) => (
-              <>
+              <Fragment key={__index}>
                 <th
                   className="bg-slate-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-slate-500"
                 >
                   {cell}
                 </th>
-              </>
+              </Fragment>
             ))}
           </tr>
         </thead>
         <tbody>
           {(rows ?? []).map((row, __index) => (
-            <>
+            <Fragment key={__index}>
               <tr
                 className="odd:bg-white even:bg-slate-50/60"
               >
                 {(row ?? []).map((cell, __index) => (
-                  <>
+                  <Fragment key={__index}>
                     <td
                       className="px-4 py-3 text-sm text-slate-700"
                     >
                       {cell}
                     </td>
-                  </>
+                  </Fragment>
                 ))}
               </tr>
-            </>
+            </Fragment>
           ))}
         </tbody>
       </table>

package/examples/basic/dist/react/glyph.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+
 
 
 export type GlyphProps = {

package/examples/basic/dist/react/media-frame.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 
 export type MediaFrameProps = {
   eyebrow?: string;
-  caption_html?: string;
+  caption_html?: ReactNode;
   children?: ReactNode;
 };
 

package/examples/basic/dist/react/notice-panel.tsx

@@ -1,15 +1,17 @@
-import type { ReactNode } from "react";
+import type { ElementType, ReactNode } from "react";
 import Glyph from "./glyph";
 
 
 export type NoticePanelProps = {
   tone: string;
+  headingLevel: number;
   title: string;
   icon: string;
   children?: ReactNode;
 };
 
-export default function NoticePanel({ tone, title, icon, children }: NoticePanelProps) {
+export default function NoticePanel({ tone, headingLevel, title, icon, children }: NoticePanelProps) {
+  const Tag = `h${headingLevel}` as ElementType;
   return (
     <aside
       className={["rounded-3xl border px-5 py-4 backdrop-blur-sm", (tone === "calm") ? "border-sky-200 bg-sky-50/80" : null, (tone === "urgent") ? "border-rose-200 bg-rose-50/80" : null, (tone === "success") ? "border-emerald-200 bg-emerald-50/80" : null].filter(Boolean).join(" ")}
@@ -26,11 +28,11 @@ export default function NoticePanel({ tone, title, icon, children }: NoticePanel
         <div
           className="min-w-0 flex-1"
         >
-          <h3
+          <Tag
             className="text-sm font-semibold tracking-tight"
           >
             {title}
-          </h3>
+          </Tag>
           <div
             className="mt-2 text-sm leading-6 text-slate-700"
           >

package/examples/basic/dist/react/resource-tile.tsx

@@ -4,9 +4,9 @@ import Glyph from "./glyph";
 
 export type ResourceTileProps = {
   href: string;
-  title_html: string;
-  summary_html: string;
-  eyebrow_html?: string;
+  title_html: ReactNode;
+  summary_html: ReactNode;
+  eyebrow_html?: ReactNode;
   icon: string;
   selected: boolean;
 };

package/examples/basic/src/templates/comparison-table.template.tsx

@@ -1,8 +1,8 @@
-import { For, safe } from "@relevate/katachi";
+import { For, type TemplateNode } from "@relevate/katachi";
 
 export type Props = {
-  head: string[];
-  rows: string[][];
+  head: TemplateNode[];
+  rows: TemplateNode[][];
 };
 
 export default function ComparisonTable({ head, rows }: Props) {
@@ -13,7 +13,7 @@ export default function ComparisonTable({ head, rows }: Props) {
           <tr>
             <For each={head} as="cell">
               <th className="bg-slate-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
-                {safe(cell)}
+                {cell}
               </th>
             </For>
           </tr>
@@ -23,7 +23,7 @@ export default function ComparisonTable({ head, rows }: Props) {
             <tr className="odd:bg-white even:bg-slate-50/60">
               <For each={row} as="cell">
                 <td className="px-4 py-3 text-sm text-slate-700">
-                  {safe(cell)}
+                  {cell}
                 </td>
               </For>
             </tr>

package/examples/basic/src/templates/media-frame.template.tsx

@@ -1,8 +1,8 @@
-import { If, safe, type TemplateNode } from "@relevate/katachi";
+import { If, type TemplateNode } from "@relevate/katachi";
 
 export type Props = {
   eyebrow?: string;
-  caption_html?: string;
+  caption_html?: TemplateNode;
   children?: TemplateNode;
 };
 
@@ -17,7 +17,7 @@ export default function MediaFrame({ eyebrow, caption_html, children }: Props) {
       <div className="bg-slate-50 p-4">{children}</div>
       <If test={caption_html != null}>
         <figcaption className="border-t border-slate-200 px-5 py-4 text-sm leading-6 text-slate-600">
-          {safe(caption_html)}
+          {caption_html}
         </figcaption>
       </If>
     </figure>

package/examples/basic/src/templates/notice-panel.template.tsx

@@ -1,40 +1,54 @@
-import { If, type TemplateNode } from "@relevate/katachi";
+import { Element, If, type TemplateNode } from "@relevate/katachi";
 import Glyph from "./glyph.template";
 
 export type Props = {
-  tone: "calm" | "urgent" | "success";
-  title: string;
-  icon: string;
-  children?: TemplateNode;
+	tone: "calm" | "urgent" | "success";
+	headingLevel: number;
+	title: string;
+	icon: string;
+	children?: TemplateNode;
 };
 
-export default function NoticePanel({ tone, title, icon, children }: Props) {
-  return (
-    <aside
-      className={[
-        "rounded-3xl border px-5 py-4 backdrop-blur-sm",
-        tone == "calm" && "border-sky-200 bg-sky-50/80",
-        tone == "urgent" && "border-rose-200 bg-rose-50/80",
-        tone == "success" && "border-emerald-200 bg-emerald-50/80",
-      ]}
-    >
-      <div className="flex items-start gap-3">
-        <Glyph
-          className="mt-0.5 h-5 w-5 shrink-0"
-          tone={tone}
-          size="18"
-          name={icon}
-        />
-        <div className="min-w-0 flex-1">
-          <h3 className="text-sm font-semibold tracking-tight">{title}</h3>
-          <div className="mt-2 text-sm leading-6 text-slate-700">{children}</div>
-        </div>
-      </div>
-      <If test={tone == "urgent"}>
-        <p className="mt-3 text-xs font-medium uppercase tracking-[0.24em] text-rose-700">
-          Action recommended
-        </p>
-      </If>
-    </aside>
-  );
+export default function NoticePanel({
+	tone,
+	headingLevel,
+	title,
+	icon,
+	children,
+}: Props) {
+	return (
+		<aside
+			className={[
+				"rounded-3xl border px-5 py-4 backdrop-blur-sm",
+				tone == "calm" && "border-sky-200 bg-sky-50/80",
+				tone == "urgent" && "border-rose-200 bg-rose-50/80",
+				tone == "success" && "border-emerald-200 bg-emerald-50/80",
+			]}
+		>
+			<div className="flex items-start gap-3">
+				<Glyph
+					className="mt-0.5 h-5 w-5 shrink-0"
+					tone={tone}
+					size="18"
+					name={icon}
+				/>
+				<div className="min-w-0 flex-1">
+					<Element
+						tag={["h", headingLevel]}
+						className="text-sm font-semibold tracking-tight"
+					>
+						{title}
+					</Element>
+					<div className="mt-2 text-sm leading-6 text-slate-700">
+						{children}
+					</div>
+				</div>
+			</div>
+			<If test={tone == "urgent"}>
+				<p className="mt-3 text-xs font-medium uppercase tracking-[0.24em] text-rose-700">
+					Action recommended
+				</p>
+			</If>
+		</aside>
+	);
 }

package/examples/basic/src/templates/resource-tile.template.tsx

@@ -1,11 +1,11 @@
-import { If, safe } from "@relevate/katachi";
+import { If, type TemplateNode } from "@relevate/katachi";
 import Glyph from "./glyph.template";
 
 export type Props = {
   href: string;
-  title_html: string;
-  summary_html: string;
-  eyebrow_html?: string;
+  title_html: TemplateNode;
+  summary_html: TemplateNode;
+  eyebrow_html?: TemplateNode;
   icon: string;
   selected: boolean;
 };
@@ -34,14 +34,14 @@ export default function ResourceTile({
           <div className="min-w-0 flex-1">
             <If test={eyebrow_html != null}>
               <div className="truncate text-xs font-medium uppercase tracking-[0.2em] text-slate-500">
-                {safe(eyebrow_html)}
+                {eyebrow_html}
               </div>
             </If>
             <div className="mt-1 truncate text-sm font-semibold text-slate-900">
-              {safe(title_html)}
+              {title_html}
             </div>
             <p className="mt-1 text-sm leading-6 text-slate-600">
-              {safe(summary_html)}
+              {summary_html}
             </p>
           </div>
         </div>