@relevate/katachi 0.1.0

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

@@ -0,0 +1,34 @@
+<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'
+  >
+    {% let className = "mt-0.5 h-5 w-5 shrink-0" %}
+    {% let tone = tone %}
+    {% let size = "18" %}
+    {% let name = icon %}
+    {% include "./includes/glyph.html" %}
+    <div
+      class='min-w-0 flex-1'
+    >
+      <h3
+        class='text-sm font-semibold tracking-tight'
+      >
+        {{ title }}
+      </h3>
+      <div
+        class='mt-2 text-sm leading-6 text-slate-700'
+      >
+        {{ children|safe }}
+      </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/askama/includes/resource-tile.html

@@ -0,0 +1,42 @@
+<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'
+    >
+      {% let className = "mt-0.5 h-5 w-5 shrink-0 text-slate-500" %}
+      {% let tone = "slate" %}
+      {% let size = "18" %}
+      {% let name = icon %}
+      {% include "./includes/glyph.html" %}
+      <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|safe }}
+          </div>
+        {% endif %}
+        <div
+          class='mt-1 truncate text-sm font-semibold text-slate-900'
+        >
+          {{ title_html|safe }}
+        </div>
+        <p
+          class='mt-1 text-sm leading-6 text-slate-600'
+        >
+          {{ summary_html|safe }}
+        </p>
+      </div>
+    </div>
+  </a>
+</li>

package/examples/basic/dist/askama/includes/stack-shell.html

@@ -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|safe }}
+</section>

package/examples/basic/dist/askama/media-frame.rs

@@ -0,0 +1,37 @@
+use askama::Template;
+
+#[derive(Template)]
+#[template(
+    ext = "html",
+    source = r#"
+<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|safe }}
+  </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|safe }}
+    </figcaption>
+  {% endif %}
+</figure>
+"#
+)]
+pub struct MediaFrameTemplate<'a> {
+    pub eyebrow: &'a str,
+    pub captionHtml: &'a str,
+    pub children: &'a str,
+}
+

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

@@ -0,0 +1,49 @@
+use askama::Template;
+
+#[derive(Template)]
+#[template(
+    ext = "html",
+    source = r#"
+<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'
+  >
+    {% let className = "mt-0.5 h-5 w-5 shrink-0" %}
+    {% let tone = tone %}
+    {% let size = "18" %}
+    {% let name = icon %}
+    {% include "./includes/glyph.html" %}
+    <div
+      class='min-w-0 flex-1'
+    >
+      <h3
+        class='text-sm font-semibold tracking-tight'
+      >
+        {{ title }}
+      </h3>
+      <div
+        class='mt-2 text-sm leading-6 text-slate-700'
+      >
+        {{ children|safe }}
+      </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>
+"#
+)]
+pub struct NoticePanelTemplate<'a> {
+    pub tone: &'a str,
+    pub title: &'a str,
+    pub icon: &'a str,
+    pub children: &'a str,
+}
+

package/examples/basic/dist/askama/resource-tile.rs

@@ -0,0 +1,59 @@
+use askama::Template;
+
+#[derive(Template)]
+#[template(
+    ext = "html",
+    source = r#"
+<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'
+    >
+      {% let className = "mt-0.5 h-5 w-5 shrink-0 text-slate-500" %}
+      {% let tone = "slate" %}
+      {% let size = "18" %}
+      {% let name = icon %}
+      {% include "./includes/glyph.html" %}
+      <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|safe }}
+          </div>
+        {% endif %}
+        <div
+          class='mt-1 truncate text-sm font-semibold text-slate-900'
+        >
+          {{ title_html|safe }}
+        </div>
+        <p
+          class='mt-1 text-sm leading-6 text-slate-600'
+        >
+          {{ summary_html|safe }}
+        </p>
+      </div>
+    </div>
+  </a>
+</li>
+"#
+)]
+pub struct ResourceTileTemplate<'a> {
+    pub href: &'a str,
+    pub titleHtml: &'a str,
+    pub summaryHtml: &'a str,
+    pub eyebrowHtml: &'a str,
+    pub icon: &'a str,
+    pub selected: bool,
+}
+

package/examples/basic/dist/askama/stack-shell.rs

@@ -0,0 +1,17 @@
+use askama::Template;
+
+#[derive(Template)]
+#[template(
+    ext = "html",
+    source = r#"
+<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|safe }}
+</section>
+"#
+)]
+pub struct StackShellTemplate<'a> {
+    pub children: &'a str,
+}
+

package/examples/basic/dist/jsx-static/badge-chip.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+
+export type BadgeChipProps = {
+  label: string;
+  tone: string;
+};
+
+export default function BadgeChip({ label, tone }: BadgeChipProps) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold tracking-wide ${(tone === "neutral") ? "bg-slate-100 text-slate-700" : ""} ${(tone === "accent") ? "bg-amber-100 text-amber-700" : ""}`}
+    >
+      {label}
+    </span>
+  );
+}
+

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

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+
+
+export type ComparisonTableProps = {
+  head: string[];
+  rows: string[][];
+};
+
+export default function ComparisonTable({ head, rows }: ComparisonTableProps) {
+  return (
+    <div
+      className="overflow-x-auto rounded-3xl border border-slate-200 bg-white"
+    >
+      <table
+        className="min-w-full divide-y divide-slate-200"
+      >
+        <thead>
+          <tr>
+            {(head ?? []).map((cell, __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>
+              </>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {(rows ?? []).map((row, __index) => (
+            <>
+              <tr
+                className="odd:bg-white even:bg-slate-50/60"
+              >
+                {(row ?? []).map((cell, __index) => (
+                  <>
+                    <td
+                      className="px-4 py-3 text-sm text-slate-700"
+                    >
+                      {cell}
+                    </td>
+                  </>
+                ))}
+              </tr>
+            </>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+

package/examples/basic/dist/jsx-static/glyph.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+
+export type GlyphProps = {
+  className: string;
+  tone: string;
+  size: string;
+  name: string;
+};
+
+export default function Glyph({ className, tone, size, name }: GlyphProps) {
+  return (
+    <svg
+      className={className}
+      data-tone={tone}
+      data-size={size}
+      data-name={name}
+    />
+  );
+}
+

package/examples/basic/dist/jsx-static/hover-note.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+
+export type HoverNoteProps = {
+  label: string;
+  children?: ReactNode;
+};
+
+export default function HoverNote({ label, children }: HoverNoteProps) {
+  return (
+    <span
+      data-hover-note={label}
+      className="cursor-help underline decoration-dotted underline-offset-4"
+    >
+      {children}
+    </span>
+  );
+}
+

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

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+
+
+export type MediaFrameProps = {
+  eyebrow?: string;
+  caption_html?: string;
+  children?: ReactNode;
+};
+
+export default function MediaFrame({ eyebrow, caption_html, children }: MediaFrameProps) {
+  return (
+    <figure
+      className="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm"
+    >
+      {(eyebrow !== null) && (
+        <>
+          <div
+            className="border-b border-slate-200 px-5 py-3 text-[11px] font-semibold uppercase tracking-[0.28em] text-slate-500"
+          >
+            {eyebrow}
+          </div>
+        </>
+      )}
+      <div
+        className="bg-slate-50 p-4"
+      >
+        {children}
+      </div>
+      {(caption_html !== null) && (
+        <>
+          <figcaption
+            className="border-t border-slate-200 px-5 py-4 text-sm leading-6 text-slate-600"
+          >
+            {caption_html}
+          </figcaption>
+        </>
+      )}
+    </figure>
+  );
+}
+

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

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import Glyph from "./glyph";
+
+
+export type NoticePanelProps = {
+  tone: string;
+  title: string;
+  icon: string;
+  children?: ReactNode;
+};
+
+export default function NoticePanel({ tone, title, icon, children }: NoticePanelProps) {
+  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>
+      {(tone === "urgent") && (
+        <>
+          <p
+            className="mt-3 text-xs font-medium uppercase tracking-[0.24em] text-rose-700"
+          >
+            Action recommended
+          </p>
+        </>
+      )}
+    </aside>
+  );
+}
+

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

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+import Glyph from "./glyph";
+
+
+export type ResourceTileProps = {
+  href: string;
+  title_html: string;
+  summary_html: string;
+  eyebrow_html?: string;
+  icon: string;
+  selected: boolean;
+};
+
+export default function ResourceTile({ href, title_html, summary_html, eyebrow_html, icon, selected }: ResourceTileProps) {
+  return (
+    <li
+      className="list-none"
+      role="option"
+      tabIndex={-1}
+      aria-selected={selected}
+    >
+      <a
+        href={href}
+        className="group block rounded-2xl border border-slate-200 bg-white p-4 transition hover:border-slate-300 hover:shadow-sm"
+      >
+        <div
+          className="flex items-start gap-3"
+        >
+          <Glyph
+            className="mt-0.5 h-5 w-5 shrink-0 text-slate-500"
+            tone="slate"
+            size="18"
+            name={icon}
+          />
+          <div
+            className="min-w-0 flex-1"
+          >
+            {(eyebrow_html !== null) && (
+              <>
+                <div
+                  className="truncate text-xs font-medium uppercase tracking-[0.2em] text-slate-500"
+                >
+                  {eyebrow_html}
+                </div>
+              </>
+            )}
+            <div
+              className="mt-1 truncate text-sm font-semibold text-slate-900"
+            >
+              {title_html}
+            </div>
+            <p
+              className="mt-1 text-sm leading-6 text-slate-600"
+            >
+              {summary_html}
+            </p>
+          </div>
+        </div>
+      </a>
+    </li>
+  );
+}
+

package/examples/basic/dist/jsx-static/stack-shell.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+
+export type StackShellProps = {
+  children?: ReactNode;
+};
+
+export default function StackShell({ children }: StackShellProps) {
+  return (
+    <section
+      className="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

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+
+
+export type BadgeChipProps = {
+  label: string;
+  tone: string;
+};
+
+export default function BadgeChip({ label, tone }: BadgeChipProps) {
+  return (
+    <span
+      className={["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold tracking-wide", (tone === "neutral") ? "bg-slate-100 text-slate-700" : null, (tone === "accent") ? "bg-amber-100 text-amber-700" : null].filter(Boolean).join(" ")}
+    >
+      {label}
+    </span>
+  );
+}
+

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

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+
+
+export type ComparisonTableProps = {
+  head: string[];
+  rows: string[][];
+};
+
+export default function ComparisonTable({ head, rows }: ComparisonTableProps) {
+  return (
+    <div
+      className="overflow-x-auto rounded-3xl border border-slate-200 bg-white"
+    >
+      <table
+        className="min-w-full divide-y divide-slate-200"
+      >
+        <thead>
+          <tr>
+            {(head ?? []).map((cell, __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>
+              </>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {(rows ?? []).map((row, __index) => (
+            <>
+              <tr
+                className="odd:bg-white even:bg-slate-50/60"
+              >
+                {(row ?? []).map((cell, __index) => (
+                  <>
+                    <td
+                      className="px-4 py-3 text-sm text-slate-700"
+                    >
+                      {cell}
+                    </td>
+                  </>
+                ))}
+              </tr>
+            </>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+
+export type GlyphProps = {
+  className: string;
+  tone: string;
+  size: string;
+  name: string;
+};
+
+export default function Glyph({ className, tone, size, name }: GlyphProps) {
+  return (
+    <svg
+      className={className}
+      data-tone={tone}
+      data-size={size}
+      data-name={name}
+    />
+  );
+}
+

package/examples/basic/dist/react/hover-note.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+
+export type HoverNoteProps = {
+  label: string;
+  children?: ReactNode;
+};
+
+export default function HoverNote({ label, children }: HoverNoteProps) {
+  return (
+    <span
+      data-hover-note={label}
+      className="cursor-help underline decoration-dotted underline-offset-4"
+    >
+      {children}
+    </span>
+  );
+}
+