b44ui 0.0.3 → 0.0.5

package/example/vite.config.ts

@@ -4,4 +4,7 @@ import tailwindcss from "@tailwindcss/vite"
 
 export default defineConfig({
   plugins: [react(), tailwindcss()],
+  optimizeDeps: {
+    include: ["highlight.js"],
+  },
 })

package/{comps.tsx → index.tsx}

@@ -1,21 +1,16 @@
-import { type ReactNode, Children, useState } from "react"
-import CN from "./cn"
-import { Md } from "./Markdown"
+import { type ReactNode, Children, useMemo, useState } from "react"
+import { Marked } from "marked"
+import { markedHighlight } from "marked-highlight"
+import hljs from "highlight.js"
+import type { ClassValue } from "clsx"
+import clsx from "clsx"
+import { twMerge } from "tailwind-merge"
 
-const tints = {
-  blue: 'bg-blue-500/20 border-blue-500',
-  orange: 'bg-orange-500/20 border-orange-500',
-  red: 'bg-red-500/20 border-red-500',
-  purple: 'bg-purple-500/20 border-purple-500',
-} as const
+export type Color = 'red' | 'blue' | 'orange' | 'purple' | 'yellow'
+const tintCn = (c: Color) => `bg-${c}-500/20 border-${c}-500`
+const colorCn = (c: Color) => `bg-${c}-600 hover:bg-${c}-500`
 
-const btnColors = {
-  blue: 'bg-blue-600 hover:bg-blue-500',
-  red: 'bg-red-600 hover:bg-red-500',
-  green: 'bg-green-600 hover:bg-green-500',
-} as const
-
-export type Color = keyof typeof btnColors
+export const CN = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
 
 export type DProps = { children?: ReactNode, cn?: any, style?: React.CSSProperties, grow?: boolean }
 export const D = ({ children, cn, style, grow }: DProps) =>
@@ -51,10 +46,10 @@ export const Card = ({ children, cn, grow }: DProps) =>
 export const Col = ({ children, cn, grow }: DProps) =>
   <D cn={["flex flex-col gap-3", cn]} grow={grow}>{children}</D>
 
-export const Popover = ({ children, text, color, cn }: DProps & { text: ReactNode, color?: keyof typeof tints }) => {
+export const Popover = ({ children, text, color, cn }: DProps & { text: ReactNode, color?: Color }) => {
   const [open, setOpen] = useState(false)
   return <span className="relative inline-block" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
-    <span className={CN("cursor-pointer", color && tints[color], color && "border-b-2", cn)}>{children}</span>
+    <span className={CN("cursor-pointer", color && tintCn(color), color && "border-b-2", cn)}>{children}</span>
     {open && <div className="absolute left-0 top-full z-10 mt-1">
       <Card cn="w-64 p-3 shadow-lg text-sm">{text}</Card>
     </div>}
@@ -66,11 +61,11 @@ export const Muted = ({ children, cn, grow }: DProps) =>
 
 export const Btn = ({ children, cn, grow, click, color, ghost, ...rest }: DProps & { click?: () => void, color?: Color, ghost?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>) =>
   <button className={CN("rounded px-4 py-2 text-sm cursor-pointer",
-    ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? btnColors[color] : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", cn)}
+    ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? colorCn(color) : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", cn)}
     onClick={click} {...rest}>{children}</button>
 
-export const Tint = ({ children, color, cn, grow }: DProps & { color: keyof typeof tints }) =>
-  <D cn={["p-3 rounded text-sm", tints[color], cn]} grow={grow}>{children}</D>
+export const Tint = ({ children, color, cn, grow }: DProps & { color: Color }) =>
+  <D cn={["p-3 rounded text-sm", tintCn(color), cn]} grow={grow}>{children}</D>
 
 export const Row = ({ children, ratio, align, cn, grow }: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) =>
   <div className={CN("flex gap-2 items-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", cn)}
@@ -92,3 +87,9 @@ export const Select = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & Rea
 
 export const Grid = ({ children, cols, cn, grow }: DProps & { cols?: number }) =>
   <D cn={["grid gap-4", cn]} grow={grow} style={{ gridTemplateColumns: `repeat(${cols ?? Children.count(children)}, 1fr)` }}>{children}</D>
+
+const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }))
+export const Md = ({ children, className }: { children: string, className?: string }) => {
+  const html = useMemo(() => marked.parse(children) as string, [children])
+  return <div className={CN("ui-markdown", className)} dangerouslySetInnerHTML={{ __html: html }} />
+}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "b44ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
-  "scripts": { "dev": "npm run dev --prefix example" },
-  "exports": { ".": "./index.ts", "./styles.css": "./styles.css" },
+  "scripts": {
+    "dev": "npm run dev --prefix example"
+  },
+  "exports": {
+    ".": "./index.tsx",
+    "./styles.css": "./styles.css"
+  },
   "dependencies": {
     "clsx": "^2.1.1",
     "highlight.js": "^11.11.0",
@@ -11,6 +16,10 @@
     "marked-highlight": "^2.2.0",
     "tailwind-merge": "^3.0.0"
   },
-  "peerDependencies": { "react": "^19.0.0" },
-  "devDependencies": { "@types/react": "^19.2.14" }
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14"
+  }
 }

package/Markdown.tsx

@@ -1,12 +0,0 @@
-import { useMemo } from "react"
-import { Marked } from "marked"
-import { markedHighlight } from "marked-highlight"
-import hljs from "highlight.js"
-import cn from "./cn"
-
-const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }))
-
-export const Md = ({ children, className }: { children: string, className?: string }) => {
-  const html = useMemo(() => marked.parse(children) as string, [children])
-  return <div className={cn("ui-markdown", className)} dangerouslySetInnerHTML={{ __html: html }} />
-}

package/cn.ts

@@ -1,4 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export default (...inputs: ClassValue[]) => twMerge(clsx(inputs))

package/index.ts

@@ -1,3 +0,0 @@
-export * from "./cn"
-export * from "./comps"
-export * as Md from "./Markdown"