@net-advantage/jo-ui-logo 1.2.0 → 1.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +3 -0
  2. package/dist/MobileMark.d.ts +3 -0
  3. package/dist/index.cjs +1 -1
  4. package/dist/index.d.ts +2 -1
  5. package/dist/index.js +55 -26
  6. package/dist/jo-ui-logo.css +1 -1
  7. package/dist/logo.model.d.ts +4 -0
  8. package/dist/logo.types.d.ts +10 -0
  9. package/dist/logo.view-model.d.ts +2 -1
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -11,6 +11,8 @@ flowchart LR
11
11
  Props["LogoProps"] --> ViewModel["useLogoViewModel"]
12
12
  Model["logo.model.ts<br/>defaults and class name"] --> ViewModel
13
13
  ViewModel --> View["Logo.tsx"]
14
+ MarkProps["MobileMarkProps"] --> MarkModel["useMobileMarkViewModel"]
15
+ MarkModel --> Mark["MobileMark.tsx"]
14
16
  ```
15
17
 
16
18
  | Layer | File | Responsibility |
@@ -19,6 +21,7 @@ flowchart LR
19
21
  | Model | [logo.model.ts](src/logo.model.ts) | Default colors, curve size, and class name |
20
22
  | View-model | [logo.view-model.ts](src/logo.view-model.ts) | Project colors, curve size, width, and font families |
21
23
  | View | [Logo.tsx](src/Logo.tsx) | Render the wordmark and dotted curve |
24
+ | View | [MobileMark.tsx](src/MobileMark.tsx) | Render the 43×28 compact mark. Light uses the primary artwork. Dark uses the reversed artwork. |
22
25
 
23
26
  ## Models
24
27
 
package/dist/MobileMark.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { MobileMarkProps } from './logo.types';
2
+ import './logo.css';
3
+ export declare function MobileMark(props: MobileMarkProps): import("react").JSX.Element;
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react");var n={primaryColor:`#14224a`,accentColor:`#6495ed`,curveWidth:80,curveHeight:10};function r(e){return[`jo-ui-logo`,e??``].filter(Boolean).join(` `)}function i(e){return e===void 0?null:{width:e}}function a(e){let{className:a,primaryColor:o=n.primaryColor,accentColor:s=n.accentColor,width:c,curveWidth:l=n.curveWidth,curveHeight:u=n.curveHeight,rootProps:d}=e;return(0,t.useMemo)(()=>({className:r(a),primaryColor:o,accentColor:s,curveWidth:l,curveHeight:u,widthStyle:i(c),mainFontFamily:`Inter, 'Segoe UI', system-ui, sans-serif`,accentFontFamily:`'Caveat', cursive`,rootProps:d}),[s,a,u,l,o,d,c])}var o=e((e=>{var t=Symbol.for(`react.transitional.element`);function n(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.jsx=n,e.jsxs=n})),s=e(((e,t)=>{t.exports=o()}))();function c(e){let t=a(e);return(0,s.jsxs)(`div`,{...t.rootProps,className:t.className,style:t.widthStyle??void 0,"aria-label":`JourneyOf`,children:[(0,s.jsxs)(`p`,{children:[(0,s.jsx)(`span`,{style:{fontFamily:t.mainFontFamily,fontWeight:800,fontSize:22,color:t.primaryColor},children:`journey`}),(0,s.jsx)(`span`,{style:{fontFamily:t.accentFontFamily,fontWeight:600,fontSize:24,color:t.accentColor},children:`of..`})]}),(0,s.jsxs)(`svg`,{width:t.curveWidth,height:t.curveHeight,viewBox:`0 0 100 15`,"aria-hidden":`true`,focusable:`false`,children:[(0,s.jsx)(`path`,{d:`M2 4 C 16 11, 31 -1, 45 7 S 74 13, 90 3`,fill:`none`,stroke:t.accentColor,strokeWidth:`2.2`,strokeLinecap:`round`,strokeDasharray:`0.2 6`,opacity:`0.9`}),(0,s.jsx)(`circle`,{cx:`2`,cy:`4`,r:`2.2`,fill:t.accentColor}),(0,s.jsx)(`circle`,{cx:`90`,cy:`3`,r:`2.2`,fill:t.primaryColor})]})]})}exports.Logo=c;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports);let t=require("react");var n=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 3 77.0 50.4" role="img" aria-label="JourneyOf"><path fill="#14224a" fill-rule="evenodd" d="M6 16H15.2V43.2C15.2 49.6 11.8 52.4 5.6 52.4H2.2V45H4C5.6 45 6 44.3 6 42.6Z M10.6 4.2a4.9 4.9 0 1 0 .01 0Z"/><path fill="#6495ed" d="M 24.47 40.40 L 24.47 40.40 Q 23.61 40.40 23.12 40.08 Q 22.64 39.75 21.93 39.16 L 21.93 39.16 Q 20.69 37.87 20.05 36.49 Q 19.40 35.09 19.62 33.98 L 19.62 33.98 Q 19.80 33.47 19.78 32.98 Q 19.72 32.50 19.72 32.50 L 19.72 32.50 Q 19.40 32.18 19.53 32.09 Q 19.67 31.99 19.80 31.72 L 19.80 31.72 Q 20.18 31.72 20.05 31.02 L 20.05 31.02 Q 19.94 30.50 20.51 28.78 Q 21.10 27.08 22.07 25.51 L 22.07 25.51 Q 22.45 24.87 23.23 23.79 Q 24.01 22.74 24.96 21.66 Q 25.87 20.61 26.65 19.96 L 26.65 19.96 Q 28.27 18.58 29.59 17.80 Q 30.94 17.05 32.34 16.72 L 32.34 16.72 Q 33.77 16.40 34.99 16.40 Q 36.17 16.40 37.14 17.42 L 37.14 17.42 Q 38.63 18.07 39.27 19.10 Q 39.92 20.15 40.11 21.90 L 40.11 21.90 Q 40.33 23.84 39.76 26.54 Q 39.22 29.26 36.63 32.96 L 36.63 32.96 Q 35.01 35.28 33.53 36.52 Q 32.02 37.76 30.16 38.84 L 30.16 38.84 Q 28.78 39.75 27.38 40.02 Q 25.95 40.27 24.47 40.40 Z M 30.94 32.90 L 30.94 32.90 Q 32.42 31.47 33.13 29.94 Q 33.85 28.43 34.61 26.30 L 34.61 26.30 Q 34.88 25.84 34.99 24.87 Q 35.07 23.90 34.99 22.98 Q 34.88 22.09 34.50 21.96 L 34.50 21.96 Q 33.85 21.50 33.10 21.74 Q 32.34 21.96 31.32 22.74 L 31.32 22.74 Q 29.38 24.36 27.76 26.59 Q 26.14 28.80 25.22 31.93 L 25.22 31.93 Q 24.79 33.79 25.33 34.79 Q 25.87 35.82 27.33 35.41 Q 28.78 35.03 30.94 32.90 Z"/><circle cx="47.4" cy="38.4" r="3.1" fill="#a9c0f2"/><circle cx="57.4" cy="36" r="4.3" fill="#6495ed"/><circle cx="70.4" cy="33" r="5.6" fill="#14224a"/></svg>`,r=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 3 77.0 50.4" role="img" aria-label="JourneyOf"><path fill="#ffffff" fill-rule="evenodd" d="M6 16H15.2V43.2C15.2 49.6 11.8 52.4 5.6 52.4H2.2V45H4C5.6 45 6 44.3 6 42.6Z M10.6 4.2a4.9 4.9 0 1 0 .01 0Z"/><path fill="#6495ed" d="M 24.47 40.40 L 24.47 40.40 Q 23.61 40.40 23.12 40.08 Q 22.64 39.75 21.93 39.16 L 21.93 39.16 Q 20.69 37.87 20.05 36.49 Q 19.40 35.09 19.62 33.98 L 19.62 33.98 Q 19.80 33.47 19.78 32.98 Q 19.72 32.50 19.72 32.50 L 19.72 32.50 Q 19.40 32.18 19.53 32.09 Q 19.67 31.99 19.80 31.72 L 19.80 31.72 Q 20.18 31.72 20.05 31.02 L 20.05 31.02 Q 19.94 30.50 20.51 28.78 Q 21.10 27.08 22.07 25.51 L 22.07 25.51 Q 22.45 24.87 23.23 23.79 Q 24.01 22.74 24.96 21.66 Q 25.87 20.61 26.65 19.96 L 26.65 19.96 Q 28.27 18.58 29.59 17.80 Q 30.94 17.05 32.34 16.72 L 32.34 16.72 Q 33.77 16.40 34.99 16.40 Q 36.17 16.40 37.14 17.42 L 37.14 17.42 Q 38.63 18.07 39.27 19.10 Q 39.92 20.15 40.11 21.90 L 40.11 21.90 Q 40.33 23.84 39.76 26.54 Q 39.22 29.26 36.63 32.96 L 36.63 32.96 Q 35.01 35.28 33.53 36.52 Q 32.02 37.76 30.16 38.84 L 30.16 38.84 Q 28.78 39.75 27.38 40.02 Q 25.95 40.27 24.47 40.40 Z M 30.94 32.90 L 30.94 32.90 Q 32.42 31.47 33.13 29.94 Q 33.85 28.43 34.61 26.30 L 34.61 26.30 Q 34.88 25.84 34.99 24.87 Q 35.07 23.90 34.99 22.98 Q 34.88 22.09 34.50 21.96 L 34.50 21.96 Q 33.85 21.50 33.10 21.74 Q 32.34 21.96 31.32 22.74 L 31.32 22.74 Q 29.38 24.36 27.76 26.59 Q 26.14 28.80 25.22 31.93 L 25.22 31.93 Q 24.79 33.79 25.33 34.79 Q 25.87 35.82 27.33 35.41 Q 28.78 35.03 30.94 32.90 Z"/><circle cx="47.4" cy="38.4" r="3.1" fill="#3b5bab"/><circle cx="57.4" cy="36" r="4.3" fill="#6495ed"/><circle cx="70.4" cy="33" r="5.6" fill="#ffffff"/></svg>`;function i(e){return[`jo-ui-mobile-mark`,e??``].filter(Boolean).join(` `)}function a(e){return(e===`dark`?r:n).replace(`<svg `,`<svg width="43" height="28" `)}var o={primaryColor:`#14224a`,accentColor:`#6495ed`,curveWidth:80,curveHeight:10};function s(e){return[`jo-ui-logo`,e??``].filter(Boolean).join(` `)}function c(e){return e===void 0?null:{width:e}}function l(e){let{className:n,primaryColor:r=o.primaryColor,accentColor:i=o.accentColor,width:a,curveWidth:l=o.curveWidth,curveHeight:u=o.curveHeight,rootProps:d}=e;return(0,t.useMemo)(()=>({className:s(n),primaryColor:r,accentColor:i,curveWidth:l,curveHeight:u,widthStyle:c(a),mainFontFamily:`Inter, 'Segoe UI', system-ui, sans-serif`,accentFontFamily:`'Caveat', cursive`,rootProps:d}),[i,n,u,l,r,d,a])}function u(e){let n=e.theme===`dark`?`dark`:`light`;return(0,t.useMemo)(()=>({className:i(e.className),markup:a(n),rootProps:e.rootProps}),[e.className,e.rootProps,n])}var d=e((e=>{var t=Symbol.for(`react.transitional.element`);function n(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.jsx=n,e.jsxs=n})),f=e(((e,t)=>{t.exports=d()}))();function p(e){let t=l(e);return(0,f.jsxs)(`div`,{...t.rootProps,className:t.className,style:t.widthStyle??void 0,"aria-label":`JourneyOf`,children:[(0,f.jsxs)(`p`,{children:[(0,f.jsx)(`span`,{style:{fontFamily:t.mainFontFamily,fontWeight:800,fontSize:22,color:t.primaryColor},children:`journey`}),(0,f.jsx)(`span`,{style:{fontFamily:t.accentFontFamily,fontWeight:600,fontSize:24,color:t.accentColor},children:`of..`})]}),(0,f.jsxs)(`svg`,{width:t.curveWidth,height:t.curveHeight,viewBox:`0 0 100 15`,"aria-hidden":`true`,focusable:`false`,children:[(0,f.jsx)(`path`,{d:`M2 4 C 16 11, 31 -1, 45 7 S 74 13, 90 3`,fill:`none`,stroke:t.accentColor,strokeWidth:`2.2`,strokeLinecap:`round`,strokeDasharray:`0.2 6`,opacity:`0.9`}),(0,f.jsx)(`circle`,{cx:`2`,cy:`4`,r:`2.2`,fill:t.accentColor}),(0,f.jsx)(`circle`,{cx:`90`,cy:`3`,r:`2.2`,fill:t.primaryColor})]})]})}function m(e){let t=u(e);return(0,f.jsx)(`span`,{...t.rootProps,className:t.className,dangerouslySetInnerHTML:{__html:t.markup}})}exports.Logo=p,exports.MobileMark=m;
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { Logo } from './Logo';
2
- export type { LogoProps, LogoViewModel } from './logo.types';
2
+ export { MobileMark } from './MobileMark';
3
+ export type { LogoProps, LogoViewModel, MobileMarkProps, MobileMarkViewModel } from './logo.types';
package/dist/index.js CHANGED
@@ -1,45 +1,64 @@
1
1
  import "./jo-ui-logo.css";
2
2
  import { useMemo as e } from "react";
3
3
  //#region \0rolldown/runtime.js
4
- var t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = {
4
+ var t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 3 77.0 50.4\" role=\"img\" aria-label=\"JourneyOf\"><path fill=\"#14224a\" fill-rule=\"evenodd\" d=\"M6 16H15.2V43.2C15.2 49.6 11.8 52.4 5.6 52.4H2.2V45H4C5.6 45 6 44.3 6 42.6Z M10.6 4.2a4.9 4.9 0 1 0 .01 0Z\"/><path fill=\"#6495ed\" d=\"M 24.47 40.40 L 24.47 40.40 Q 23.61 40.40 23.12 40.08 Q 22.64 39.75 21.93 39.16 L 21.93 39.16 Q 20.69 37.87 20.05 36.49 Q 19.40 35.09 19.62 33.98 L 19.62 33.98 Q 19.80 33.47 19.78 32.98 Q 19.72 32.50 19.72 32.50 L 19.72 32.50 Q 19.40 32.18 19.53 32.09 Q 19.67 31.99 19.80 31.72 L 19.80 31.72 Q 20.18 31.72 20.05 31.02 L 20.05 31.02 Q 19.94 30.50 20.51 28.78 Q 21.10 27.08 22.07 25.51 L 22.07 25.51 Q 22.45 24.87 23.23 23.79 Q 24.01 22.74 24.96 21.66 Q 25.87 20.61 26.65 19.96 L 26.65 19.96 Q 28.27 18.58 29.59 17.80 Q 30.94 17.05 32.34 16.72 L 32.34 16.72 Q 33.77 16.40 34.99 16.40 Q 36.17 16.40 37.14 17.42 L 37.14 17.42 Q 38.63 18.07 39.27 19.10 Q 39.92 20.15 40.11 21.90 L 40.11 21.90 Q 40.33 23.84 39.76 26.54 Q 39.22 29.26 36.63 32.96 L 36.63 32.96 Q 35.01 35.28 33.53 36.52 Q 32.02 37.76 30.16 38.84 L 30.16 38.84 Q 28.78 39.75 27.38 40.02 Q 25.95 40.27 24.47 40.40 Z M 30.94 32.90 L 30.94 32.90 Q 32.42 31.47 33.13 29.94 Q 33.85 28.43 34.61 26.30 L 34.61 26.30 Q 34.88 25.84 34.99 24.87 Q 35.07 23.90 34.99 22.98 Q 34.88 22.09 34.50 21.96 L 34.50 21.96 Q 33.85 21.50 33.10 21.74 Q 32.34 21.96 31.32 22.74 L 31.32 22.74 Q 29.38 24.36 27.76 26.59 Q 26.14 28.80 25.22 31.93 L 25.22 31.93 Q 24.79 33.79 25.33 34.79 Q 25.87 35.82 27.33 35.41 Q 28.78 35.03 30.94 32.90 Z\"/><circle cx=\"47.4\" cy=\"38.4\" r=\"3.1\" fill=\"#a9c0f2\"/><circle cx=\"57.4\" cy=\"36\" r=\"4.3\" fill=\"#6495ed\"/><circle cx=\"70.4\" cy=\"33\" r=\"5.6\" fill=\"#14224a\"/></svg>", r = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 3 77.0 50.4\" role=\"img\" aria-label=\"JourneyOf\"><path fill=\"#ffffff\" fill-rule=\"evenodd\" d=\"M6 16H15.2V43.2C15.2 49.6 11.8 52.4 5.6 52.4H2.2V45H4C5.6 45 6 44.3 6 42.6Z M10.6 4.2a4.9 4.9 0 1 0 .01 0Z\"/><path fill=\"#6495ed\" d=\"M 24.47 40.40 L 24.47 40.40 Q 23.61 40.40 23.12 40.08 Q 22.64 39.75 21.93 39.16 L 21.93 39.16 Q 20.69 37.87 20.05 36.49 Q 19.40 35.09 19.62 33.98 L 19.62 33.98 Q 19.80 33.47 19.78 32.98 Q 19.72 32.50 19.72 32.50 L 19.72 32.50 Q 19.40 32.18 19.53 32.09 Q 19.67 31.99 19.80 31.72 L 19.80 31.72 Q 20.18 31.72 20.05 31.02 L 20.05 31.02 Q 19.94 30.50 20.51 28.78 Q 21.10 27.08 22.07 25.51 L 22.07 25.51 Q 22.45 24.87 23.23 23.79 Q 24.01 22.74 24.96 21.66 Q 25.87 20.61 26.65 19.96 L 26.65 19.96 Q 28.27 18.58 29.59 17.80 Q 30.94 17.05 32.34 16.72 L 32.34 16.72 Q 33.77 16.40 34.99 16.40 Q 36.17 16.40 37.14 17.42 L 37.14 17.42 Q 38.63 18.07 39.27 19.10 Q 39.92 20.15 40.11 21.90 L 40.11 21.90 Q 40.33 23.84 39.76 26.54 Q 39.22 29.26 36.63 32.96 L 36.63 32.96 Q 35.01 35.28 33.53 36.52 Q 32.02 37.76 30.16 38.84 L 30.16 38.84 Q 28.78 39.75 27.38 40.02 Q 25.95 40.27 24.47 40.40 Z M 30.94 32.90 L 30.94 32.90 Q 32.42 31.47 33.13 29.94 Q 33.85 28.43 34.61 26.30 L 34.61 26.30 Q 34.88 25.84 34.99 24.87 Q 35.07 23.90 34.99 22.98 Q 34.88 22.09 34.50 21.96 L 34.50 21.96 Q 33.85 21.50 33.10 21.74 Q 32.34 21.96 31.32 22.74 L 31.32 22.74 Q 29.38 24.36 27.76 26.59 Q 26.14 28.80 25.22 31.93 L 25.22 31.93 Q 24.79 33.79 25.33 34.79 Q 25.87 35.82 27.33 35.41 Q 28.78 35.03 30.94 32.90 Z\"/><circle cx=\"47.4\" cy=\"38.4\" r=\"3.1\" fill=\"#3b5bab\"/><circle cx=\"57.4\" cy=\"36\" r=\"4.3\" fill=\"#6495ed\"/><circle cx=\"70.4\" cy=\"33\" r=\"5.6\" fill=\"#ffffff\"/></svg>";
5
+ function i(e) {
6
+ return ["jo-ui-mobile-mark", e ?? ""].filter(Boolean).join(" ");
7
+ }
8
+ function a(e) {
9
+ return (e === "dark" ? r : n).replace("<svg ", "<svg width=\"43\" height=\"28\" ");
10
+ }
11
+ var o = {
5
12
  primaryColor: "#14224a",
6
13
  accentColor: "#6495ed",
7
14
  curveWidth: 80,
8
15
  curveHeight: 10
9
16
  };
10
- function r(e) {
17
+ function s(e) {
11
18
  return ["jo-ui-logo", e ?? ""].filter(Boolean).join(" ");
12
19
  }
13
- function i(e) {
20
+ function c(e) {
14
21
  return e === void 0 ? null : { width: e };
15
22
  }
16
23
  //#endregion
17
24
  //#region src/logo.view-model.ts
18
- function a(t) {
19
- let { className: a, primaryColor: o = n.primaryColor, accentColor: s = n.accentColor, width: c, curveWidth: l = n.curveWidth, curveHeight: u = n.curveHeight, rootProps: d } = t;
25
+ function l(t) {
26
+ let { className: n, primaryColor: r = o.primaryColor, accentColor: i = o.accentColor, width: a, curveWidth: l = o.curveWidth, curveHeight: u = o.curveHeight, rootProps: d } = t;
20
27
  return e(() => ({
21
- className: r(a),
22
- primaryColor: o,
23
- accentColor: s,
28
+ className: s(n),
29
+ primaryColor: r,
30
+ accentColor: i,
24
31
  curveWidth: l,
25
32
  curveHeight: u,
26
- widthStyle: i(c),
33
+ widthStyle: c(a),
27
34
  mainFontFamily: "Inter, 'Segoe UI', system-ui, sans-serif",
28
35
  accentFontFamily: "'Caveat', cursive",
29
36
  rootProps: d
30
37
  }), [
31
- s,
32
- a,
38
+ i,
39
+ n,
33
40
  u,
34
41
  l,
35
- o,
42
+ r,
36
43
  d,
37
- c
44
+ a
45
+ ]);
46
+ }
47
+ function u(t) {
48
+ let n = t.theme === "dark" ? "dark" : "light";
49
+ return e(() => ({
50
+ className: i(t.className),
51
+ markup: a(n),
52
+ rootProps: t.rootProps
53
+ }), [
54
+ t.className,
55
+ t.rootProps,
56
+ n
38
57
  ]);
39
58
  }
40
59
  //#endregion
41
60
  //#region ../../node_modules/.pnpm/react@19.3.0/node_modules/react/cjs/react-jsx-runtime.production.js
42
- var o = /* @__PURE__ */ t(((e) => {
61
+ var d = /* @__PURE__ */ t(((e) => {
43
62
  var t = Symbol.for("react.transitional.element");
44
63
  function n(e, n, r) {
45
64
  var i = null;
@@ -54,17 +73,17 @@ var o = /* @__PURE__ */ t(((e) => {
54
73
  };
55
74
  }
56
75
  e.jsx = n, e.jsxs = n;
57
- })), s = (/* @__PURE__ */ t(((e, t) => {
58
- t.exports = o();
76
+ })), f = (/* @__PURE__ */ t(((e, t) => {
77
+ t.exports = d();
59
78
  })))();
60
- function c(e) {
61
- let t = a(e);
62
- return /* @__PURE__ */ (0, s.jsxs)("div", {
79
+ function p(e) {
80
+ let t = l(e);
81
+ return /* @__PURE__ */ (0, f.jsxs)("div", {
63
82
  ...t.rootProps,
64
83
  className: t.className,
65
84
  style: t.widthStyle ?? void 0,
66
85
  "aria-label": "JourneyOf",
67
- children: [/* @__PURE__ */ (0, s.jsxs)("p", { children: [/* @__PURE__ */ (0, s.jsx)("span", {
86
+ children: [/* @__PURE__ */ (0, f.jsxs)("p", { children: [/* @__PURE__ */ (0, f.jsx)("span", {
68
87
  style: {
69
88
  fontFamily: t.mainFontFamily,
70
89
  fontWeight: 800,
@@ -72,7 +91,7 @@ function c(e) {
72
91
  color: t.primaryColor
73
92
  },
74
93
  children: "journey"
75
- }), /* @__PURE__ */ (0, s.jsx)("span", {
94
+ }), /* @__PURE__ */ (0, f.jsx)("span", {
76
95
  style: {
77
96
  fontFamily: t.accentFontFamily,
78
97
  fontWeight: 600,
@@ -80,14 +99,14 @@ function c(e) {
80
99
  color: t.accentColor
81
100
  },
82
101
  children: "of.."
83
- })] }), /* @__PURE__ */ (0, s.jsxs)("svg", {
102
+ })] }), /* @__PURE__ */ (0, f.jsxs)("svg", {
84
103
  width: t.curveWidth,
85
104
  height: t.curveHeight,
86
105
  viewBox: "0 0 100 15",
87
106
  "aria-hidden": "true",
88
107
  focusable: "false",
89
108
  children: [
90
- /* @__PURE__ */ (0, s.jsx)("path", {
109
+ /* @__PURE__ */ (0, f.jsx)("path", {
91
110
  d: "M2 4 C 16 11, 31 -1, 45 7 S 74 13, 90 3",
92
111
  fill: "none",
93
112
  stroke: t.accentColor,
@@ -96,13 +115,13 @@ function c(e) {
96
115
  strokeDasharray: "0.2 6",
97
116
  opacity: "0.9"
98
117
  }),
99
- /* @__PURE__ */ (0, s.jsx)("circle", {
118
+ /* @__PURE__ */ (0, f.jsx)("circle", {
100
119
  cx: "2",
101
120
  cy: "4",
102
121
  r: "2.2",
103
122
  fill: t.accentColor
104
123
  }),
105
- /* @__PURE__ */ (0, s.jsx)("circle", {
124
+ /* @__PURE__ */ (0, f.jsx)("circle", {
106
125
  cx: "90",
107
126
  cy: "3",
108
127
  r: "2.2",
@@ -113,4 +132,14 @@ function c(e) {
113
132
  });
114
133
  }
115
134
  //#endregion
116
- export { c as Logo };
135
+ //#region src/MobileMark.tsx
136
+ function m(e) {
137
+ let t = u(e);
138
+ return /* @__PURE__ */ (0, f.jsx)("span", {
139
+ ...t.rootProps,
140
+ className: t.className,
141
+ dangerouslySetInnerHTML: { __html: t.markup }
142
+ });
143
+ }
144
+ //#endregion
145
+ export { p as Logo, m as MobileMark };
package/dist/jo-ui-logo.css CHANGED
@@ -1,2 +1,2 @@
1
- .container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.jo-ui-logo{--jo-ui-logo-primary:#14224a;--jo-ui-logo-accent:#6495ed;--jo-ui-logo-font-main:"Inter","Segoe UI",system-ui,sans-serif;--jo-ui-logo-font-accent:"Caveat",cursive;display:inline-block}.jo-ui-logo p{margin:0;line-height:1}.jo-ui-logo svg{margin-top:.125rem;display:block}.visible{visibility:visible}.m-0{margin:0}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.block{display:block}.font-extrabold{font-weight:800}.underline{text-decoration-line:underline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
1
+ .container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.jo-ui-logo{--jo-ui-logo-primary:#14224a;--jo-ui-logo-accent:#6495ed;--jo-ui-logo-font-main:"Inter","Segoe UI",system-ui,sans-serif;--jo-ui-logo-font-accent:"Caveat",cursive;display:inline-block}.jo-ui-logo p{margin:0;line-height:1}.jo-ui-logo svg{margin-top:.125rem;display:block}.jo-ui-mobile-mark{flex:none;width:43px;height:28px;display:inline-flex}.jo-ui-mobile-mark svg{width:43px;height:28px;display:block}.visible{visibility:visible}.m-0{margin:0}.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.block{display:block}.flex{display:flex}.font-extrabold{font-weight:800}.underline{text-decoration-line:underline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}
2
2
  /*$vite$:1*/
package/dist/logo.model.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ export declare const MOBILE_MARK_WIDTH = 43;
2
+ export declare const MOBILE_MARK_HEIGHT = 28;
3
+ export declare function mobileMarkClassName(className?: string): string;
4
+ export declare function mobileMarkMarkup(theme: 'light' | 'dark'): string;
1
5
  export declare const LOGO_DEFAULTS: {
2
6
  readonly primaryColor: "#14224a";
3
7
  readonly accentColor: "#6495ed";
package/dist/logo.types.d.ts CHANGED
@@ -8,6 +8,16 @@ export interface LogoProps {
8
8
  readonly curveHeight?: number;
9
9
  readonly rootProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
10
10
  }
11
+ export interface MobileMarkProps {
12
+ readonly theme?: 'light' | 'dark';
13
+ readonly className?: string;
14
+ readonly rootProps?: Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'dangerouslySetInnerHTML'>;
15
+ }
16
+ export interface MobileMarkViewModel {
17
+ readonly className: string;
18
+ readonly markup: string;
19
+ readonly rootProps?: MobileMarkProps['rootProps'];
20
+ }
11
21
  export interface LogoViewModel {
12
22
  readonly className: string;
13
23
  readonly primaryColor: string;
package/dist/logo.view-model.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- import type { LogoProps, LogoViewModel } from './logo.types';
1
+ import type { LogoProps, LogoViewModel, MobileMarkProps, MobileMarkViewModel } from './logo.types';
2
2
  export declare function useLogoViewModel(props: LogoProps): LogoViewModel;
3
+ export declare function useMobileMarkViewModel(props: MobileMarkProps): MobileMarkViewModel;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@net-advantage/jo-ui-logo",
3
- "version": "1.2.0",
3
+ "version": "1.3.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",