@elmethis/react 0.1.0 → 0.2.1

package/dist/components/icon/ElmMdiIcon.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+export interface ElmMdiIconProps extends ComponentProps<"svg"> {
+    size?: string;
+    d: string;
+    color?: string;
+    lightColor?: string;
+    darkColor?: string;
+}
+export declare const ElmMdiIcon: ({ size, d, color, lightColor, darkColor, }: ElmMdiIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/ElmMdiIcon.mjs

@@ -0,0 +1,52 @@
+import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.mjs";
+import { c as compilerRuntimeExports } from "../../_virtual/compiler-runtime.mjs";
+import "react";
+import style from "./ElmMdiIcon.module.scss.mjs";
+const ElmMdiIcon = (t0) => {
+  const $ = compilerRuntimeExports.c(9);
+  const {
+    size: t1,
+    d,
+    color,
+    lightColor,
+    darkColor
+  } = t0;
+  const size = t1 === void 0 ? "1rem" : t1;
+  const t2 = lightColor ?? color;
+  const t3 = darkColor ?? color;
+  let t4;
+  if ($[0] !== t2 || $[1] !== t3) {
+    t4 = {
+      "--color": t2,
+      "--dark-color": t3
+    };
+    $[0] = t2;
+    $[1] = t3;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  const t5 = t4;
+  let t6;
+  if ($[3] !== d) {
+    t6 = /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d });
+    $[3] = d;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] !== size || $[6] !== t5 || $[7] !== t6) {
+    t7 = /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: style.icon, viewBox: "0 0 24 24", width: size, height: size, focusable: "false", role: "img", style: t5, children: t6 });
+    $[5] = size;
+    $[6] = t5;
+    $[7] = t6;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  return t7;
+};
+export {
+  ElmMdiIcon
+};

package/dist/components/icon/ElmMdiIcon.module.scss.mjs

@@ -0,0 +1,20 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._icon_67eyp_1{fill:#555b67;fill:var(--color, #555b67);transition:fill .2s;flex-shrink:0}[data-theme=dark] ._icon_67eyp_1{fill:#b0b5be;fill:var(--dark-color, #b0b5be)}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const icon = "_icon_67eyp_1";
+const style = {
+  icon
+};
+export {
+  style as default,
+  icon
+};

package/dist/components/icon/ElmMdiIcon.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ElmMdiIcon } from './ElmMdiIcon';
+declare const meta: Meta<typeof ElmMdiIcon>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/media/ElmImage.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps, CSSProperties } from 'react';
+export interface ElmImageProps extends ComponentProps<"img"> {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Image alt text
+     */
+    alt?: string;
+    /**
+     * inline or block
+     */
+    block?: boolean;
+    /**
+     * Enable modal on image click. Default: `false`
+     */
+    enableModal?: boolean;
+    /**
+     * The margin of the image.
+     */
+    margin?: CSSProperties["marginBlock"];
+}
+export declare const ElmImage: ({ src, alt, block, enableModal, margin, ...args }: ElmImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/media/ElmImage.mjs

@@ -0,0 +1,164 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode('@charset "UTF-8";.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:opacity .3s}.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity .3s}'));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.mjs";
+import { c as compilerRuntimeExports } from "../../_virtual/compiler-runtime.mjs";
+import { useRef, useState, useEffect } from "react";
+import style from "./ElmImage.module.scss.mjs";
+import { ElmInlineText } from "../typography/ElmInlineText.mjs";
+import { mdiTooltipImage } from "@mdi/js";
+import { ElmMdiIcon } from "../icon/ElmMdiIcon.mjs";
+import { CSSTransition } from "react-transition-group";
+
+const ElmImage = (t0) => {
+  const $ = compilerRuntimeExports.c(37);
+  let alt;
+  let args;
+  let block;
+  let margin;
+  let src;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      src,
+      alt,
+      block,
+      enableModal: t1,
+      margin,
+      ...args
+    } = t0);
+    $[0] = t0;
+    $[1] = alt;
+    $[2] = args;
+    $[3] = block;
+    $[4] = margin;
+    $[5] = src;
+    $[6] = t1;
+  } else {
+    alt = $[1];
+    args = $[2];
+    block = $[3];
+    margin = $[4];
+    src = $[5];
+    t1 = $[6];
+  }
+  const enableModal = t1 === void 0 ? false : t1;
+  const nodeRef = useRef(null);
+  const [isShowModal, setIsShowModal] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  let t2;
+  let t3;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setIsMounted(true);
+    };
+    t3 = [];
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t2 = $[7];
+    t3 = $[8];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[9] !== enableModal || $[10] !== isShowModal) {
+    t4 = () => {
+      if (enableModal) {
+        setIsShowModal(!isShowModal);
+      }
+    };
+    $[9] = enableModal;
+    $[10] = isShowModal;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  const handleClick = t4;
+  const t5 = enableModal && !isShowModal ? "zoom-in" : "unset";
+  let t6;
+  if ($[12] !== t5) {
+    t6 = {
+      cursor: t5
+    };
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== alt || $[15] !== args || $[16] !== handleClick || $[17] !== src || $[18] !== t6) {
+    t7 = /* @__PURE__ */ jsxRuntimeExports.jsx("img", { className: style.image, src, alt, style: t6, ...args, onClick: handleClick });
+    $[14] = alt;
+    $[15] = args;
+    $[16] = handleClick;
+    $[17] = src;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  const image = t7;
+  let t8;
+  if ($[20] !== margin) {
+    t8 = {
+      marginBlock: margin
+    };
+    $[20] = margin;
+    $[21] = t8;
+  } else {
+    t8 = $[21];
+  }
+  let t9;
+  if ($[22] !== alt || $[23] !== block) {
+    t9 = alt && block && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.caption, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ElmMdiIcon, { d: mdiTooltipImage, color: "#bfa056", size: "1.25rem" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ElmInlineText, { text: alt })
+    ] });
+    $[22] = alt;
+    $[23] = block;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] !== enableModal || $[26] !== handleClick || $[27] !== image || $[28] !== isMounted || $[29] !== isShowModal) {
+    t10 = isMounted && enableModal && /* @__PURE__ */ jsxRuntimeExports.jsx(CSSTransition, { classNames: "fade", in: isShowModal, timeout: 300, unmountOnExit: true, nodeRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.modal, onClick: handleClick, ref: nodeRef, children: image }) });
+    $[25] = enableModal;
+    $[26] = handleClick;
+    $[27] = image;
+    $[28] = isMounted;
+    $[29] = isShowModal;
+    $[30] = t10;
+  } else {
+    t10 = $[30];
+  }
+  let t11;
+  if ($[31] !== args || $[32] !== image || $[33] !== t10 || $[34] !== t8 || $[35] !== t9) {
+    t11 = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: t8, ...args, children: [
+      image,
+      t9,
+      t10
+    ] });
+    $[31] = args;
+    $[32] = image;
+    $[33] = t10;
+    $[34] = t8;
+    $[35] = t9;
+    $[36] = t11;
+  } else {
+    t11 = $[36];
+  }
+  return t11;
+};
+export {
+  ElmImage
+};

package/dist/components/media/ElmImage.module.scss.mjs

@@ -0,0 +1,26 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._image_z5fgk_1{width:100%}._block-image_z5fgk_5{border-radius:.25rem;box-shadow:0 0 .125rem #000}._caption_z5fgk_10{margin-block:.5rem;display:flex;justify-content:center;align-items:center;gap:.5rem}._modal_z5fgk_18{position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;display:flex;justify-self:center;align-items:center;background-color:#3e434bcc;cursor:zoom-out}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const image = "_image_z5fgk_1";
+const caption = "_caption_z5fgk_10";
+const modal = "_modal_z5fgk_18";
+const style = {
+  image,
+  caption,
+  modal
+};
+export {
+  caption,
+  style as default,
+  image,
+  modal
+};

package/dist/components/media/ElmImage.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ElmImage } from './ElmImage';
+declare const meta: Meta<typeof ElmImage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Svg: Story;
+export declare const LongAlt: Story;
+export declare const Invalid: Story;

package/dist/components/typography/ElmBlockQuote.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+export interface ElmBlockQuoteProps extends ComponentProps<"blockquote"> {
+    cite?: string;
+    source?: string;
+}
+export declare const ElmBlockQuote: (props: ElmBlockQuoteProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/typography/ElmBlockQuote.mjs

@@ -0,0 +1,48 @@
+import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.mjs";
+import { c as compilerRuntimeExports } from "../../_virtual/compiler-runtime.mjs";
+import "react";
+import { clsx } from "../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs";
+import style from "./ElmBlockQuote.module.scss.mjs";
+import textStyle from "../../styles/text.module.scss.mjs";
+const ElmBlockQuote = (props) => {
+  const $ = compilerRuntimeExports.c(8);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = clsx([style.blockquote, textStyle.text]);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== props.cite || $[2] !== props.source) {
+    t1 = props.source != null && (props.cite ? /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: props.cite, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("cite", { children: [
+      "- ",
+      props.source
+    ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("cite", { children: [
+      "- ",
+      props.source
+    ] }));
+    $[1] = props.cite;
+    $[2] = props.source;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== props.children || $[5] !== props.cite || $[6] !== t1) {
+    t2 = /* @__PURE__ */ jsxRuntimeExports.jsxs("blockquote", { className: t0, cite: props.cite, children: [
+      props.children,
+      t1
+    ] });
+    $[4] = props.children;
+    $[5] = props.cite;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+};
+export {
+  ElmBlockQuote
+};

package/dist/components/typography/ElmBlockQuote.module.scss.mjs

@@ -0,0 +1,20 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._blockquote_1msat_1{box-sizing:border-box;padding:.5rem 2rem;background-color:#e3e5e7;border-left:4px solid #606875}[data-theme=dark] ._blockquote_1msat_1{background-color:#3e434b;border-color:#b0b5be}._blockquote_1msat_1 a{all:unset;cursor:pointer;transition:color .1s}._blockquote_1msat_1 a:hover{color:#5879b0}._blockquote_1msat_1 cite{display:block;margin-block:1rem;text-align:right}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const blockquote = "_blockquote_1msat_1";
+const style = {
+  blockquote
+};
+export {
+  blockquote,
+  style as default
+};

package/dist/components/typography/ElmBlockQuote.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ElmBlockQuote } from './ElmBlockQuote';
+declare const meta: Meta<typeof ElmBlockQuote>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const OnlyContent: Story;

package/dist/components/typography/ElmCallout.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+export type AlertType = "note" | "tip" | "important" | "warning" | "caution";
+export interface ElmCalloutProps extends ComponentProps<"aside"> {
+    /**
+     * Type of alert
+     */
+    type?: AlertType;
+}
+export declare const ElmCallout: ({ type, children }: ElmCalloutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/typography/ElmCallout.mjs

@@ -0,0 +1,107 @@
+import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.mjs";
+import { c as compilerRuntimeExports } from "../../_virtual/compiler-runtime.mjs";
+import { mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
+import { ElmMdiIcon } from "../icon/ElmMdiIcon.mjs";
+import "react";
+import style from "./ElmCallout.module.scss.mjs";
+import { ElmInlineText } from "./ElmInlineText.mjs";
+const colors = {
+  note: {
+    code: "#6987b8",
+    icon: mdiInformation
+  },
+  tip: {
+    code: "#59b57c",
+    icon: mdiLightbulbOn
+  },
+  important: {
+    code: "#9771bd",
+    icon: mdiShieldAlert
+  },
+  warning: {
+    code: "#b8a36e",
+    icon: mdiAlert
+  },
+  caution: {
+    code: "#b36472",
+    icon: mdiAlertOctagram
+  }
+};
+const ElmCallout = (t0) => {
+  const $ = compilerRuntimeExports.c(17);
+  const {
+    type: t1,
+    children
+  } = t0;
+  const type = t1 === void 0 ? "note" : t1;
+  const t2 = colors[type];
+  let t3;
+  if ($[0] !== t2.code) {
+    t3 = {
+      "--callout-color": t2.code
+    };
+    $[0] = t2.code;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const t4 = t3;
+  const t5 = colors[type];
+  const t6 = colors[type];
+  let t7;
+  if ($[2] !== t5.icon || $[3] !== t6.code) {
+    t7 = /* @__PURE__ */ jsxRuntimeExports.jsx(ElmMdiIcon, { d: t5.icon, color: t6.code });
+    $[2] = t5.icon;
+    $[3] = t6.code;
+    $[4] = t7;
+  } else {
+    t7 = $[4];
+  }
+  let t8;
+  if ($[5] !== type) {
+    t8 = type.toUpperCase();
+    $[5] = type;
+    $[6] = t8;
+  } else {
+    t8 = $[6];
+  }
+  const t9 = colors[type];
+  let t10;
+  if ($[7] !== t8 || $[8] !== t9.code) {
+    t10 = /* @__PURE__ */ jsxRuntimeExports.jsx(ElmInlineText, { text: t8, color: t9.code });
+    $[7] = t8;
+    $[8] = t9.code;
+    $[9] = t10;
+  } else {
+    t10 = $[9];
+  }
+  let t11;
+  if ($[10] !== t10 || $[11] !== t7) {
+    t11 = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.header, children: [
+      t7,
+      t10
+    ] });
+    $[10] = t10;
+    $[11] = t7;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  let t12;
+  if ($[13] !== children || $[14] !== t11 || $[15] !== t4) {
+    t12 = /* @__PURE__ */ jsxRuntimeExports.jsxs("aside", { className: style.callout, style: t4, children: [
+      t11,
+      children
+    ] });
+    $[13] = children;
+    $[14] = t11;
+    $[15] = t4;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  return t12;
+};
+export {
+  ElmCallout
+};

package/dist/components/typography/ElmCallout.module.scss.mjs

@@ -0,0 +1,23 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode('._callout_pqkj1_1{box-sizing:border-box;padding:1rem 1rem 1rem 1.5rem;position:relative}._callout_pqkj1_1:after{position:absolute;content:"";top:0;left:0;width:4px;height:100%;background-color:var(--callout-color);z-index:-1}._callout_pqkj1_1:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background-color:var(--callout-color);opacity:.15;z-index:-1}._header_pqkj1_28{display:flex;justify-content:flex-start;align-items:center;gap:.5rem;margin-block-end:.5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}'));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const callout = "_callout_pqkj1_1";
+const header = "_header_pqkj1_28";
+const style = {
+  callout,
+  header
+};
+export {
+  callout,
+  style as default,
+  header
+};

package/dist/components/typography/ElmCallout.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ElmCallout } from './ElmCallout';
+declare const meta: Meta<typeof ElmCallout>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Tip: Story;
+export declare const Important: Story;
+export declare const Warning: Story;
+export declare const Caution: Story;

package/dist/index.d.ts

@@ -1,3 +1,6 @@
 export { ElmInlineIcon, type ElmInlineIconProps, } from './components/icon/ElmInlineIcon';
+export { ElmImage, type ElmImageProps } from './components/media/ElmImage';
+export { ElmBlockQuote, type ElmBlockQuoteProps, } from './components/typography/ElmBlockQuote';
+export { ElmCallout, type ElmCalloutProps, } from './components/typography/ElmCallout';
 export { ElmInlineText, type ElmInlineTextProps, } from './components/typography/ElmInlineText';
 export { ElmParagraph, type ElmParagraphProps, } from './components/typography/ElmParagraph';

package/dist/index.mjs

@@ -1,7 +1,13 @@
 import { ElmInlineIcon } from "./components/icon/ElmInlineIcon.mjs";
+import { ElmImage } from "./components/media/ElmImage.mjs";
+import { ElmBlockQuote } from "./components/typography/ElmBlockQuote.mjs";
+import { ElmCallout } from "./components/typography/ElmCallout.mjs";
 import { ElmInlineText } from "./components/typography/ElmInlineText.mjs";
 import { ElmParagraph } from "./components/typography/ElmParagraph.mjs";
 export {
+  ElmBlockQuote,
+  ElmCallout,
+  ElmImage,
   ElmInlineIcon,
   ElmInlineText,
   ElmParagraph

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/react",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,10 +23,12 @@
     }
   },
   "dependencies": {
+    "@mdi/js": "^7.4.47",
     "clsx": "^2.1.1",
     "polished": "^4.3.1",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
@@ -34,6 +36,7 @@
     "@types/node": "^24.6.0",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
+    "@types/react-transition-group": "^4.4.12",
     "@vitejs/plugin-react": "^5.0.4",
     "babel-plugin-react-compiler": "^19.1.0-rc.3",
     "eslint": "^9.36.0",

package/dist/App.d.ts

@@ -1,2 +0,0 @@
-declare function App(): import("react/jsx-runtime").JSX.Element;
-export default App;