clio-design-system 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -422,16 +422,20 @@ interface TextBlockProps extends Omit<HTMLAttributes<HTMLParagraphElement>, 'sty
 declare function TextBlock({ text, style, ...rest }: TextBlockProps): react.JSX.Element;
 
 interface EquationBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
-    /** Raw TeX/LaTeX source — real product renders via KaTeX (`<ka-tex>`). */
+    /** TeX/LaTeX source, rendered to typeset display math via bundled KaTeX. */
     tex: string;
     style?: CSSProperties;
 }
 /**
  * EquationBlock — display-math content block. Renders bare (no card shell).
- * The real product uses a `<ka-tex>` custom element backed by KaTeX; this
- * design-system stand-in renders the raw TeX in an italic serif style so
- * the layout/spacing is representative without a KaTeX runtime dependency.
- * Consumers should mount the actual `ka-tex` element (see readme.md).
+ *
+ * Renders `tex` to typeset display math via bundled KaTeX — the consumer just
+ * passes a TeX string, no `<ka-tex>` element to register or mount. Invalid TeX
+ * renders inline as an error (never throws) so one bad equation can't crash a
+ * whole note.
+ *
+ * Requires the KaTeX stylesheet, which the design system's `styles.css` already
+ * imports — consumers importing `clio-design-system/styles.css` get it for free.
  */
 declare function EquationBlock({ tex, style, ...rest }: EquationBlockProps): react.JSX.Element;
 

package/dist/index.d.ts

@@ -422,16 +422,20 @@ interface TextBlockProps extends Omit<HTMLAttributes<HTMLParagraphElement>, 'sty
 declare function TextBlock({ text, style, ...rest }: TextBlockProps): react.JSX.Element;
 
 interface EquationBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
-    /** Raw TeX/LaTeX source — real product renders via KaTeX (`<ka-tex>`). */
+    /** TeX/LaTeX source, rendered to typeset display math via bundled KaTeX. */
     tex: string;
     style?: CSSProperties;
 }
 /**
  * EquationBlock — display-math content block. Renders bare (no card shell).
- * The real product uses a `<ka-tex>` custom element backed by KaTeX; this
- * design-system stand-in renders the raw TeX in an italic serif style so
- * the layout/spacing is representative without a KaTeX runtime dependency.
- * Consumers should mount the actual `ka-tex` element (see readme.md).
+ *
+ * Renders `tex` to typeset display math via bundled KaTeX — the consumer just
+ * passes a TeX string, no `<ka-tex>` element to register or mount. Invalid TeX
+ * renders inline as an error (never throws) so one bad equation can't crash a
+ * whole note.
+ *
+ * Requires the KaTeX stylesheet, which the design system's `styles.css` already
+ * imports — consumers importing `clio-design-system/styles.css` get it for free.
  */
 declare function EquationBlock({ tex, style, ...rest }: EquationBlockProps): react.JSX.Element;
 

package/dist/index.js

@@ -1456,9 +1456,22 @@ function TextBlock({ text, style, ...rest }) {
 }
 
 // src/components/EquationBlock/EquationBlock.tsx
+import { useMemo } from "react";
+import katex from "katex";
 import { jsx as jsx24 } from "react/jsx-runtime";
 function EquationBlock({ tex, style, ...rest }) {
-  return /* @__PURE__ */ jsx24("div", { ...rest, style: { margin: "18px 0", textAlign: "center", padding: "10px 0", ...style }, children: /* @__PURE__ */ jsx24("span", { style: { fontFamily: "Georgia, serif", fontStyle: "italic", fontSize: "17px", color: "var(--color-text-primary)" }, children: tex }) });
+  const html = useMemo(
+    () => katex.renderToString(tex, { displayMode: true, throwOnError: false }),
+    [tex]
+  );
+  return /* @__PURE__ */ jsx24(
+    "div",
+    {
+      ...rest,
+      style: { margin: "18px 0", textAlign: "center", padding: "10px 0", ...style },
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
 }
 
 // src/components/IntuitionCallout/IntuitionCallout.tsx