b44ui 0.0.12 → 0.1.0

package/index.tsx

@@ -42,12 +42,13 @@ export type DProps = {
   gap?: number
   p?: number
   wd?: number
+  ht?: number
 }
 
-const dStyle = ({ gap, p, wd, style }: DProps): React.CSSProperties | undefined => {
+const dStyle = ({ gap, p, wd, ht, style }: DProps): React.CSSProperties | undefined => {
   const g = sc(gap), pd = sc(p)
-  if (!g && !pd && wd === undefined && !style) return undefined
-  return { ...(g !== undefined && { gap: g }), ...(pd !== undefined && { padding: pd }), ...(wd !== undefined && { width: `${wd * 100}%` }), ...style }
+  if (!g && !pd && wd === undefined && ht === undefined && !style) return undefined
+  return { ...(g !== undefined && { gap: g }), ...(pd !== undefined && { padding: pd }), ...(wd !== undefined && { width: `${wd * 100}%` }), ...(ht !== undefined && { height: `${ht * 100}%` }), ...style }
 }
 
 export const D = (props: DProps) =>
@@ -63,13 +64,13 @@ export const App = (props: DProps & { center?: boolean, width?: number }) => {
 }
 
 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>
+  const { children, grow, gap, p, wd, ht, width = 700 } = props
+  return <D cn={CN("mx-auto max-w-full px-6", rcn(props))} grow={grow} gap={gap} p={p} wd={wd} ht={ht} style={{ width }}>{children}</D>
 }
 
 export const TabList = (props: DProps) => {
-  const { children, grow, gap, p } = props
-  return <D cn={CN("flex items-end gap-4", rcn(props))} grow={grow} gap={gap} p={p}>{children}</D>
+  const { children, grow, gap, p, wd, ht } = props
+  return <D cn={CN("flex items-end gap-4", rcn(props))} grow={grow} gap={gap} p={p} wd={wd} ht={ht}>{children}</D>
 }
 
 export const Tab = ({ title, active, click, grow, gap, p, ...rest }: DProps & { title: ReactNode, active?: boolean, click?: () => void } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
@@ -85,35 +86,35 @@ export const Tab = ({ title, active, click, grow, gap, p, ...rest }: DProps & {
 }
 
 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}>
+  const { label, children, row, dashed, grow, gap, p, wd, ht } = 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} wd={wd} ht={ht}>
     {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 = (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}
+  const { children, dashed, grow, gap, p, wd, ht } = props
+  return <D cn={CN("rounded text-sm", dashed && "border border-dashed border-zinc-700", rcn(props))} grow={grow} gap={gap} p={p ?? 2} wd={wd} ht={ht}
     style={{ paddingLeft: sc(3), paddingRight: sc(3) }}>{children}</D>
 }
 
 export const Chip = (props: DProps & { click?: () => void }) => {
-  const { children, click, grow, gap, p, wd, style } = props
+  const { children, click, grow, gap, p, wd, ht, style } = 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))}
-    style={dStyle({ gap, p, wd, style })}
+    style={dStyle({ gap, p, wd, ht, style })}
     onClick={click}>{children}</span>
 }
 
 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}
+  const { children, grow, gap, p, wd, ht } = props
+  return <D cn={CN("rounded border border-zinc-700 bg-zinc-900", rcn(props))} grow={grow} gap={gap ?? 4} p={p ?? 4} wd={wd} ht={ht}
     style={{ display: 'flex', flexDirection: 'column' }}>{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 Col = (props: DProps & { align?: 'start' | 'center' | 'end' }) => {
+  const { children, grow, gap, p, wd, ht, align } = props
+  return <D cn={CN("flex flex-col", align === 'start' && 'items-start', align === 'center' && 'items-center', align === 'end' && 'items-end', rcn(props))} grow={grow} gap={gap ?? 4} p={p} wd={wd} ht={ht}>{children}</D>
 }
 
 export const Popover = (props: DProps & { text: ReactNode, color?: Color }) => {
@@ -134,7 +135,7 @@ export const Muted = (props: DProps) => {
 }
 
 export const A = ({
-  children, cn, cnIgnoreWrongUsage, grow, gap, p, style, click, href, onClick, onKeyDown, role, tabIndex, ...rest
+  children, cn, cnIgnoreWrongUsage, grow, gap, p, wd, style, click, href, onClick, onKeyDown, role, tabIndex, ...rest
 }: DProps & { click?: () => void } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
   const c = rcn({ cn, cnIgnoreWrongUsage })
   const fire = (e: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>) => {
@@ -149,7 +150,7 @@ export const A = ({
     role={buttonLike ? role ?? 'button' : role}
     tabIndex={buttonLike ? tabIndex ?? 0 : tabIndex}
     className={CN("inline-flex items-center gap-1 text-zinc-300 underline underline-offset-4 cursor-pointer hover:text-zinc-100", grow && "flex-1", c)}
-    style={dStyle({ gap, p, style })}
+    style={dStyle({ gap, p, wd, style })}
     onClick={fire}
     onKeyDown={e => {
       if (buttonLike && (e.key === 'Enter' || e.key === ' ')) {
@@ -169,25 +170,25 @@ export const Btn = ({ children, grow, gap, p, click, color, ghost, sm, ...rest }
 }
 
 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>
+  const { children, color, grow, gap, p, wd, ht } = props
+  return <D cn={CN("rounded text-sm", tintCn(color), rcn(props))} grow={grow} gap={gap} p={p ?? 3} wd={wd} ht={ht}>{children}</D>
 }
 
 export const Row = (props: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) => {
-  const { children, ratio, align, grow, gap, p, wd, style } = props
+  const { children, ratio, align, grow, gap, p, wd, ht, style } = 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={{ ...dStyle({ gap: gap ?? 4, p, wd, style }), ...(ratio ? { width: `${ratio * 100}%` } : {}) }}>{children}</div>
+    style={{ ...dStyle({ gap: gap ?? 4, p, wd, ht, style }), ...(ratio ? { width: `${ratio * 100}%` } : {}) }}>{children}</div>
 }
 
 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>
+  const { children, gap, p, wd, ht } = props
+  return <Row cn={CN("border-b border-zinc-700", rcn(props))} gap={gap} p={p ?? 2} wd={wd} ht={ht} align="mid">{children}</Row>
 }
 
 export const Modal = (props: DProps & { open: boolean }) => {
-  const { children, open, gap, p } = props
+  const { children, open, gap, p, wd, ht } = 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>
+    <Card cn={CN("max-h-[80vh] overflow-y-auto w-lg", rcn(props))} gap={gap} p={p} wd={wd} ht={ht}>{children}</Card>
   </div> : null
 }
 
@@ -196,9 +197,9 @@ export const Input = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.
   return <input className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none", grow && "flex-1", c)} style={dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style })} {...rest} />
 }
 
-export const Textarea = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>) => {
+export const Textarea = ({ cn, cnIgnoreWrongUsage, ref, grow, ...rest }: DProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & { ref?: React.RefObject<HTMLTextAreaElement | null> }) => {
   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)} style={dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style })} {...rest} />
+  return <textarea ref={ref} className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full", grow && "flex-1", c)} style={dStyle({ gap: rest.gap, p: rest.p, wd: rest.wd, style: rest.style })} {...rest} />
 }
 
 export const Select = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React.SelectHTMLAttributes<HTMLSelectElement>) => {
@@ -207,8 +208,8 @@ export const Select = ({ cn, cnIgnoreWrongUsage, grow, ...rest }: DProps & React
 }
 
 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>
+  const { children, cols, grow, gap, p, wd, ht } = props
+  return <D cn={CN("grid ui-grid", rcn(props))} grow={grow} p={p} wd={wd} ht={ht} style={{ gap: sc(gap ?? 4), '--cols': cols ?? Children.count(children) } as React.CSSProperties}>{children}</D>
 }
 
 export const Hr = ({ vertical, color = 'gray', grow, gap, p, ...rest }: DProps & { vertical?: boolean, color?: Color | 'gray' }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "b44ui",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "type": "module",
   "files": [
     "index.tsx",

package/styles.css

@@ -1,22 +1,21 @@
 @import "highlight.js/styles/github-dark.css";
 
 .ui-markdown { line-height: 1.5; }
-.ui-markdown h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 0; }
-.ui-markdown h1 { font-size: 1.5em; }
-.ui-markdown h2 { font-size: 1.25em; }
-.ui-markdown h3 { font-size: 1.1em; }
-.ui-markdown p { margin: 0.4em 0; }
+h1, .ui-markdown h2, .ui-markdown h3 { font-weight: 700; margin: 0; }
+h1 { font-size: 1.5em; }
+h2 { font-size: 1.25em; }
+h3 { font-size: 1.1em; }
+p { margin: 0.4em 0; }
+a { color: #93c5fd; text-decoration: underline; }
+pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.4em 0; }
+code { font-family: ui-monospace, monospace; font-size: 0.9em; }
+blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.25em 0; }
+img { max-width: 100%; border-radius: 6px; }
 .ui-markdown p:first-child { margin-top: 0; }
 .ui-markdown p:last-child { margin-bottom: 0; }
-.ui-markdown pre { background: #1a1a2e; border-radius: 4px; padding: 0; overflow-x: auto; margin: 0.4em 0; }
-.ui-markdown code { font-family: ui-monospace, monospace; font-size: 0.9em; }
 .ui-markdown :not(pre) > code { background: #1a1a2e; padding: 2px 5px; border-radius: 3px; }
 .ui-markdown ul, .ui-markdown ol { padding-left: 1.5em; margin: 0.25em 0; }
-.ui-markdown blockquote { border-left: 3px solid #444; padding-left: 1em; opacity: 0.8; margin: 0.25em 0; }
-.ui-markdown a { color: #93c5fd; text-decoration: underline; }
 .ui-markdown table { border-collapse: collapse; margin: 0.4em 0; }
 .ui-markdown th, .ui-markdown td { border: 1px solid #333; padding: 4px 10px; }
-.ui-markdown img { max-width: 100%; border-radius: 6px; }
-
 .ui-grid { grid-template-columns: repeat(var(--cols), 1fr); }
 @media (max-width: 640px) { .ui-grid { grid-template-columns: 1fr; } }