b44ui 0.0.7 → 0.0.8

package/example/pnpm-lock.yaml

@@ -724,9 +724,9 @@ packages:
     peerDependencies:
       marked: '>=4 <18'
 
-  marked@15.0.12:
-    resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
-    engines: {node: '>= 18'}
+  marked@17.0.4:
+    resolution: {integrity: sha512-NOmVMM+KAokHMvjWmC5N/ZOvgmSWuqJB8FoYI019j4ogb/PeRMKoKIjReZ2w3376kkA8dSJIP8uD993Kxc0iRQ==}
+    engines: {node: '>= 20'}
     hasBin: true
 
   ms@2.1.3:
@@ -1251,8 +1251,8 @@ snapshots:
     dependencies:
       clsx: 2.1.1
       highlight.js: 11.11.1
-      marked: 15.0.12
-      marked-highlight: 2.2.3(marked@15.0.12)
+      marked: 17.0.4
+      marked-highlight: 2.2.3(marked@17.0.4)
       react: 19.2.4
       tailwind-merge: 3.5.0
 
@@ -1396,11 +1396,11 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  marked-highlight@2.2.3(marked@15.0.12):
+  marked-highlight@2.2.3(marked@17.0.4):
     dependencies:
-      marked: 15.0.12
+      marked: 17.0.4
 
-  marked@15.0.12: {}
+  marked@17.0.4: {}
 
   ms@2.1.3: {}
 

package/example/src/App.tsx

@@ -76,22 +76,22 @@ export default function YACS() {
     <Grid cols={3} cn="h-full">
 
       {/* calendar */}
-      <Card cn="col-span-2 row-span-1 p-4 overflow-hidden flex flex-col">
+      <Card cnIgnoreWrongUsage="col-span-2 row-span-1 p-4 overflow-hidden flex flex-col">
         <D cn="grid flex-1" style={{ gridTemplateColumns: `60px repeat(5, 1fr)` }}>
           {/* hour labels */}
-          <D cn="flex flex-col justify-between text-sm text-zinc-500 pr-2">
+          <D cnIgnoreWrongUsage="flex flex-col justify-between text-sm text-zinc-500 pr-2">
             {hours.map(h => <span key={h}>{h > 12 ? h - 12 : h}{h >= 12 ? 'pm' : 'am'}</span>)}
           </D>
           {/* day columns */}
-          {days.map(day => <D key={day} cn="relative border-l border-zinc-800">
-            <Muted cn="text-center block text-sm mb-1">{day}</Muted>
+          {days.map(day => <D key={day} cnIgnoreWrongUsage="relative border-l border-zinc-800">
+            <Muted cnIgnoreWrongUsage="text-center block text-sm mb-1">{day}</Muted>
             {/* hour gridlines */}
-            {hours.map(h => <D key={h} cn="border-t border-zinc-800/50 left-0 right-0 absolute" style={{ top: `${h*8}%` }} />)}
+            {hours.map(h => <D key={h} cnIgnoreWrongUsage="border-t border-zinc-800/50 left-0 right-0 absolute" style={{ top: `${h*8}%` }} />)}
             {/* events */}
             {events.filter(e => e.meeting.day === day).map((e, i) => {
               const top = ((e.meeting.start - 540) / (13 * 60)) * 100
               const height = ((e.meeting.end - e.meeting.start) / (13 * 60)) * 100
-              return <D key={i} cn={`absolute left-0.5 right-0.5 rounded text-sm px-1 text-white ${colors[e.colorIdx % colors.length]}`}
+              return <D key={i} cnIgnoreWrongUsage={`absolute left-0.5 right-0.5 rounded text-sm px-1 text-white ${colors[e.colorIdx % colors.length]}`}
                 style={{ top: `${top}%`, height: `${height}%` }}>
                 {e.code}
               </D>
@@ -108,7 +108,7 @@ export default function YACS() {
             <Input grow placeholder="search..." value={query} onChange={e => setQuery(e.target.value)} />
             <Select><option>2026W</option><option>2026S</option></Select>
           </Row>
-          <D cn="space-y-3 max-h-48 overflow-y-auto flex-row">
+          <D cnIgnoreWrongUsage="space-y-3 max-h-48 overflow-y-auto flex-row">
             {results.map(c => <Btn key={c.code} click={() => addCourse(c)} grow>
               {c.code} — {c.name}
             </Btn>)}

package/index.tsx

@@ -26,11 +26,15 @@ const colorCn = (c: Color) => colorMap[c]
 
 export const CN = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
 
+const warnCn = (cn: any) => typeof cn === 'string' && cn.length > 24 && console.warn(`long cn detected (${cn.length} chars). please avoid using cn. you SHOULD use b44ui builtins instead. you SHOULD NOT use cn to add unnecessary visual enhancements. you MUST NOT have long cns. if you choose to ignore these requirements (ie. because you cannot achieve this otherwise) you MUST instead use <... cnIgnoreWrongUsage="styles..">\n  cn="${cn}"`)
+const rcn = ({ cn, cnIgnoreWrongUsage }: DProps) => { warnCn(cn); return cn ?? cnIgnoreWrongUsage }
+
 const sc = (n?: number) => n !== undefined ? n * 4 : undefined // tailwind scale -> px
 
 export type DProps = {
   children?: ReactNode
   cn?: any
+  cnIgnoreWrongUsage?: any
   style?: React.CSSProperties
   grow?: boolean
   gap?: number
@@ -44,83 +48,129 @@ const dStyle = ({ gap, p, style }: DProps): React.CSSProperties | undefined => {
 }
 
 export const D = (props: DProps) =>
-  <div className={CN(props.cn, props.grow && "flex-1")} style={dStyle(props)}>{props.children}</div>
+  <div className={CN(props.cn ?? props.cnIgnoreWrongUsage, props.grow && "flex-1")} style={dStyle(props)}>{props.children}</div>
 
-export const App = ({ children, center = true, width, cn, gap, p }: DProps & { center?: boolean, width?: number }) => {
+export const App = (props: DProps & { center?: boolean, width?: number }) => {
+  const { children, center = true, width, gap, p } = props
+  const c = rcn(props)
   const inner = Children.map(children, c => typeof c == 'string' ? <Md>{c.trim()}</Md> : c)
-  return <D cn={["min-h-screen w-full bg-[#111] text-[#eee] font-[Inter]", center && "flex justify-center items-center", cn]} gap={gap} p={p}>
+  return <D cn={CN("min-h-screen w-full bg-[#111] text-[#eee] font-[Inter]", center && "flex justify-center items-center", c)} gap={gap} p={p}>
     {center ? <div className="max-w-full px-5 py-10 space-y-5 *:mx-auto" style={{ width }}>{inner}</div> : inner}
   </D>
 }
 
-export const Centered = ({ children, cn, grow, gap, p, width = 700 }: DProps & { width?: number }) =>
-  <D cn={["mx-auto max-w-full px-6", cn]} grow={grow} gap={gap} p={p} style={{ width }}>{children}</D>
+export const Centered = (props: DProps & { width?: number }) => {
+  const { children, grow, gap, p, width = 700 } = props
+  return <D cn={CN("mx-auto max-w-full px-6", rcn(props))} grow={grow} gap={gap} p={p} style={{ width }}>{children}</D>
+}
 
-export const Block = ({ label, children, row, dashed, cn, grow, gap, p }: DProps & { label?: ReactNode, row?: boolean, dashed?: boolean }) =>
-  <D cn={["rounded flex flex-col items-center", dashed && "border border-dashed border-zinc-700", cn]} grow={grow} gap={gap ?? 4} p={p ?? 4}>
+export const Block = (props: DProps & { label?: ReactNode, row?: boolean, dashed?: boolean }) => {
+  const { label, children, row, dashed, grow, gap, p } = props
+  return <D cn={CN("rounded flex flex-col items-center", dashed && "border border-dashed border-zinc-700", rcn(props))} grow={grow} gap={gap ?? 4} p={p ?? 4}>
     {label && <span className="opacity-75">{label}</span>}
     <div className={CN(row ? "flex-row" : "flex-col", "flex items-center")} style={{ gap: sc(gap ?? 4) }}>{children}</div>
   </D>
+}
 
-export const BlockSm = ({ children, dashed, cn, grow, gap, p }: DProps & { dashed?: boolean }) =>
-  <D cn={["rounded text-sm", dashed && "border border-dashed border-zinc-700", cn]} grow={grow} gap={gap} p={p ?? 2}
+export const BlockSm = (props: DProps & { dashed?: boolean }) => {
+  const { children, dashed, grow, gap, p } = props
+  return <D cn={CN("rounded text-sm", dashed && "border border-dashed border-zinc-700", rcn(props))} grow={grow} gap={gap} p={p ?? 2}
     style={{ paddingLeft: sc(3), paddingRight: sc(3) }}>{children}</D>
+}
 
-export const Chip = ({ children, cn, click }: DProps & { click?: () => void }) =>
-  <span className={CN("bg-zinc-800 rounded px-2 py-0.5 text-xs", click && "cursor-pointer hover:bg-zinc-700", cn)}
+export const Chip = (props: DProps & { click?: () => void }) => {
+  const { children, click } = props
+  return <span className={CN("bg-zinc-800 rounded px-2 py-0.5 text-xs", click && "cursor-pointer hover:bg-zinc-700", rcn(props))}
     onClick={click}>{children}</span>
+}
 
-export const Card = ({ children, cn, grow, gap, p }: DProps) =>
-  <D cn={["rounded border border-zinc-700 bg-zinc-900", cn]} grow={grow} gap={gap ?? 4} p={p ?? 4}
+export const Card = (props: DProps) => {
+  const { children, grow, gap, p } = props
+  return <D cn={CN("rounded border border-zinc-700 bg-zinc-900", rcn(props))} grow={grow} gap={gap ?? 4} p={p ?? 4}
     style={{ display: 'flex', flexDirection: 'column' }}>{children}</D>
+}
 
-export const Col = ({ children, cn, grow, gap, p }: DProps) =>
-  <D cn={["flex flex-col", cn]} grow={grow} gap={gap ?? 4} p={p}>{children}</D>
+export const Col = (props: DProps) => {
+  const { children, grow, gap, p } = props
+  return <D cn={CN("flex flex-col", rcn(props))} grow={grow} gap={gap ?? 4} p={p}>{children}</D>
+}
 
-export const Popover = ({ children, text, color, cn }: DProps & { text: ReactNode, color?: Color }) => {
+export const Popover = (props: DProps & { text: ReactNode, color?: Color }) => {
+  const { children, text, color } = props
+  const c = rcn(props)
   const [open, setOpen] = useState(false)
   return <span className="relative inline-block" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
-    <span className={CN("cursor-pointer", color && tintCn(color), color && "border-b-2", cn)}>{children}</span>
+    <span className={CN("cursor-pointer", color && tintCn(color), color && "border-b-2", c)}>{children}</span>
     {open && <div className="absolute left-0 top-full z-10 mt-1">
       <Card cn="w-64 shadow-lg text-sm" p={3}>{text}</Card>
     </div>}
   </span>
 }
 
-export const Muted = ({ children, cn, grow }: DProps) =>
-  <span className={CN("text-sm text-zinc-400", grow && "flex-1", cn)}>{children}</span>
+export const Muted = (props: DProps) => {
+  const { children, grow } = props
+  return <span className={CN("text-sm text-zinc-400", grow && "flex-1", rcn(props))}>{children}</span>
+}
 
-export const Btn = ({ children, cn, grow, gap, p, click, color, ghost, sm, ...rest }: DProps & { click?: () => void, color?: Color, ghost?: boolean, sm?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>) =>
-  <button className={CN("rounded cursor-pointer", sm ? "px-3 py-1 text-xs" : "px-4 py-2 text-sm",
-    ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? colorCn(color) : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", cn)}
+export const Btn = ({ children, grow, gap, p, click, color, ghost, sm, ...rest }: DProps & { click?: () => void, color?: Color, ghost?: boolean, sm?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  const c = rcn(rest as DProps)
+  return <button className={CN("rounded cursor-pointer", sm ? "px-3 py-1 text-xs" : "px-4 py-2 text-sm",
+    ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? colorCn(color) : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", c)}
     style={dStyle({ gap, p })} onClick={click} {...rest}>{children}</button>
+}
 
-export const Tint = ({ children, color, cn, grow, gap, p }: DProps & { color: Color }) =>
-  <D cn={["rounded text-sm", tintCn(color), cn]} grow={grow} gap={gap} p={p ?? 3}>{children}</D>
+export const Tint = (props: DProps & { color: Color }) => {
+  const { children, color, grow, gap, p } = props
+  return <D cn={CN("rounded text-sm", tintCn(color), rcn(props))} grow={grow} gap={gap} p={p ?? 3}>{children}</D>
+}
 
-export const Row = ({ children, ratio, align, cn, grow, gap, p }: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) =>
-  <div className={CN("flex items-center justify-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", cn)}
+export const Row = (props: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) => {
+  const { children, ratio, align, grow, gap, p } = props
+  return <div className={CN("flex items-center justify-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", rcn(props))}
     style={{ gap: sc(gap ?? 4), ...(p !== undefined && { padding: sc(p) }), ...(ratio ? { width: `${ratio * 100}%` } : {}) }}>{children}</div>
+}
 
-export const Toolbar = ({ children, cn, gap, p }: DProps) =>
-  <Row cn={["border-b border-zinc-700", cn]} gap={gap} p={p ?? 2} align="mid">{children}</Row>
+export const Toolbar = (props: DProps) => {
+  const { children, gap, p } = props
+  return <Row cn={CN("border-b border-zinc-700", rcn(props))} gap={gap} p={p ?? 2} align="mid">{children}</Row>
+}
 
-export const Modal = ({ children, open, cn, gap, p }: DProps & { open: boolean }) =>
-  open ? <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
-    <Card cn={["max-h-[80vh] overflow-y-auto w-lg", cn]} gap={gap} p={p}>{children}</Card>
+export const Modal = (props: DProps & { open: boolean }) => {
+  const { children, open, gap, p } = props
+  return open ? <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
+    <Card cn={CN("max-h-[80vh] overflow-y-auto w-lg", rcn(props))} gap={gap} p={p}>{children}</Card>
   </div> : null
+}
 
-export const Input = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.InputHTMLAttributes<HTMLInputElement>) =>
-  <input className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none", grow && "flex-1", cn)} {...rest} />
+export const Input = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.InputHTMLAttributes<HTMLInputElement>) => {
+  const c = rcn({ cn, cnIgnoreWrongUsage })
+  return <input className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none", grow && "flex-1", c)} {...rest} />
+}
 
-export const Textarea = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.TextareaHTMLAttributes<HTMLTextAreaElement>) =>
-  <textarea className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full", grow && "flex-1", cn)} {...rest} />
+export const Textarea = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>) => {
+  const c = rcn({ cn, cnIgnoreWrongUsage })
+  return <textarea className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full", grow && "flex-1", c)} {...rest} />
+}
 
-export const Select = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.SelectHTMLAttributes<HTMLSelectElement>) =>
-  <select className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer", grow && "flex-1", cn)} {...rest} />
+export const Select = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.SelectHTMLAttributes<HTMLSelectElement>) => {
+  const c = rcn({ cn, cnIgnoreWrongUsage })
+  return <select className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer", grow && "flex-1", c)} {...rest} />
+}
+
+export const Grid = (props: DProps & { cols?: number }) => {
+  const { children, cols, grow, gap, p } = props
+  return <D cn={CN("grid ui-grid", rcn(props))} grow={grow} p={p} style={{ gap: sc(gap ?? 4), '--cols': cols ?? Children.count(children) } as React.CSSProperties}>{children}</D>
+}
 
-export const Grid = ({ children, cols, cn, grow, gap, p }: DProps & { cols?: number }) =>
-  <D cn={["grid ui-grid", cn]} grow={grow} p={p} style={{ gap: sc(gap ?? 4), '--cols': cols ?? Children.count(children) } as React.CSSProperties}>{children}</D>
+export const Code = (props: DProps & { highlight?: string }) => {
+  const { children, highlight } = props
+  const c = rcn(props)
+  const html = useMemo(() => highlight ? hljs.highlight(children as string, { language: highlight }).value : '', [children, highlight])
+  if (highlight) return <pre className={CN("rounded bg-zinc-900 border border-zinc-700 p-3 text-sm overflow-x-auto", c)}>
+    <code className={`hljs language-${highlight}`} dangerouslySetInnerHTML={{ __html: html }} />
+  </pre>
+  return <code className={CN("bg-zinc-800 rounded px-1.5 py-0.5 text-sm font-mono", c)}>{children}</code>
+}
 
 const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }))
 export const Md = ({ children, className }: { children: string, className?: string }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "b44ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "scripts": {
     "dev": "npm run dev --prefix example"
@@ -12,8 +12,8 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "highlight.js": "^11.11.0",
-    "marked": "^15.0.0",
-    "marked-highlight": "^2.2.0",
+    "marked": "^17.0.0",
+    "marked-highlight": "^2.2.3",
     "tailwind-merge": "^3.0.0"
   },
   "peerDependencies": {