b44ui 0.0.1 → 0.0.2

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 (7) hide show
  1. package/Markdown.tsx +2 -21
  2. package/example/src/App.tsx +1 -5
  3. package/example/src/index.css +1 -1
  4. package/index.ts +1 -1
  5. package/package.json +5 -10
  6. package/styles.css +18 -0
  7. package/tailwind.css +0 -21
package/Markdown.tsx CHANGED
@@ -6,26 +6,7 @@ import cn from "./cn"
6
6
 
7
7
  const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }))
8
8
 
9
- const css = `.ui-markdown { line-height: 1.6; }
10
- .ui-markdown h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 1em 0 0.5em; }
11
- .ui-markdown h1 { font-size: 1.5em; }
12
- .ui-markdown h2 { font-size: 1.25em; }
13
- .ui-markdown h3 { font-size: 1.1em; }
14
- .ui-markdown p { margin: 0.5em 0; }
15
- .ui-markdown pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.75em 0; }
16
- .ui-markdown code { font-family: ui-monospace, monospace; font-size: 0.9em; padding: 4px; }
17
- .ui-markdown :not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
18
- .ui-markdown ul, .ui-markdown ol { padding-left: 1.5em; margin: 0.5em 0; }
19
- .ui-markdown blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.5em 0; }
20
- .ui-markdown a { color: #93c5fd; text-decoration: underline; }
21
- .ui-markdown table { border-collapse: collapse; margin: 0.75em 0; }
22
- .ui-markdown th, .ui-markdown td { border: 1px solid #333; padding: 6px 12px; }
23
- .ui-markdown img { max-width: 100%; border-radius: 6px; }`
24
-
25
- let injected = false
26
-
27
9
  export const Md = ({ children, className }: { children: string, className?: string }) => {
28
- const html = useMemo(() => marked.parse(children, { async: false }) as string, [children])
29
- if (!injected) { injected = true; document.head.insertAdjacentHTML('beforeend', `<style>${css}</style>`) }
10
+ const html = useMemo(() => marked.parse(children) as string, [children])
30
11
  return <div className={cn("ui-markdown", className)} dangerouslySetInnerHTML={{ __html: html }} />
31
- }
12
+ }
package/example/src/App.tsx CHANGED
@@ -44,11 +44,7 @@ const greet = (name) => {
44
44
 
45
45
  inline \`code\` works too. and [links](https://example.com).
46
46
 
47
- - first item
48
- - second item
49
- - third item
50
-
51
- &gt; blockquotes look like this
47
+ > blockquotes look like this
52
48
 
53
49
  | col a | col b |
54
50
  |-------|-------|
package/example/src/index.css CHANGED
@@ -1,3 +1,3 @@
1
1
  @import "tailwindcss";
2
2
  @source "../../*.tsx";
3
- @import "highlight.js/styles/github-dark.css";
3
+ @import "ui/styles.css";
package/index.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export * from "./cn"
2
2
  export * from "./comps"
3
- export * from "./Markdown"
3
+ export * as Md from "./Markdown"
package/package.json CHANGED
@@ -1,10 +1,9 @@
1
1
  {
2
2
  "name": "b44ui",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "type": "module",
5
- "exports": {
6
- ".": "./index.ts"
7
- },
5
+ "scripts": { "dev": "npm run dev --prefix example" },
6
+ "exports": { ".": "./index.ts", "./styles.css": "./styles.css" },
8
7
  "dependencies": {
9
8
  "clsx": "^2.1.1",
10
9
  "highlight.js": "^11.11.0",
@@ -12,10 +11,6 @@
12
11
  "marked-highlight": "^2.2.0",
13
12
  "tailwind-merge": "^3.0.0"
14
13
  },
15
- "peerDependencies": {
16
- "react": "^19.0.0"
17
- },
18
- "devDependencies": {
19
- "@types/react": "^19.2.14"
20
- }
14
+ "peerDependencies": { "react": "^19.0.0" },
15
+ "devDependencies": { "@types/react": "^19.2.14" }
21
16
  }
package/styles.css ADDED
@@ -0,0 +1,18 @@
1
+ @import "highlight.js/styles/github-dark.css";
2
+
3
+ /* markdown - todo rewrite in tailwind */
4
+ :root { line-height: 1.6; }
5
+ h1, h2, h3 { font-weight: 700; margin: 1em 0 0.5em; }
6
+ h1 { font-size: 1.5em; }
7
+ h2 { font-size: 1.25em; }
8
+ h3 { font-size: 1.1em; }
9
+ p { margin: 1em 0; }
10
+ pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.75em 0; }
11
+ code { font-family: ui-monospace, monospace; font-size: 0.9em; padding: 4px; }
12
+ :not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
13
+ ul, ol { padding-left: 1.5em; margin: 0.5em 0; }
14
+ blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.5em 0; }
15
+ a { color: #93c5fd; text-decoration: underline; }
16
+ table { border-collapse: collapse; margin: 0.75em 0; }
17
+ th, td { border: 1px solid #333; padding: 6px 12px; }
18
+ img { max-width: 100%; border-radius: 6px; }
package/tailwind.css DELETED
@@ -1,21 +0,0 @@
1
- @import 'tailwindcss';
2
-
3
- /* everything */
4
- body { width: 100%; height: 100%; }
5
-
6
- /* markdown */
7
- .ui-markdown { line-height: 1.6; }
8
- .ui-markdown h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 1em 0 0.5em; }
9
- .ui-markdown h1 { font-size: 1.5em; }
10
- .ui-markdown h2 { font-size: 1.25em; }
11
- .ui-markdown h3 { font-size: 1.1em; }
12
- .ui-markdown p { margin: 0.5em 0; }
13
- .ui-markdown pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.75em 0; }
14
- .ui-markdown code { font-family: ui-monospace, monospace; font-size: 0.9em; padding: 4px; }
15
- .ui-markdown :not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
16
- .ui-markdown ul, .ui-markdown ol { padding-left: 1.5em; margin: 0.5em 0; }
17
- .ui-markdown blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.5em 0; }
18
- .ui-markdown a { color: #93c5fd; text-decoration: underline; }
19
- .ui-markdown table { border-collapse: collapse; margin: 0.75em 0; }
20
- .ui-markdown th, .ui-markdown td { border: 1px solid #333; padding: 6px 12px; }
21
- .ui-markdown img { max-width: 100%; border-radius: 6px; }