b44ui 0.0.10 → 0.0.11

package/index.tsx

@@ -112,6 +112,34 @@ export const Muted = (props: DProps) => {
   return <span className={CN("text-sm text-zinc-400", grow && "flex-1", rcn(props))}>{children}</span>
 }
 
+export const A = ({
+  children, cn, cnIgnoreWrongUsage, grow, gap, p, 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>) => {
+    click?.()
+    onClick?.(e as React.MouseEvent<HTMLAnchorElement>)
+  }
+  const buttonLike = !href
+
+  return <a
+    {...rest}
+    href={href}
+    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 })}
+    onClick={fire}
+    onKeyDown={e => {
+      if (buttonLike && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault()
+        fire(e)
+      }
+      onKeyDown?.(e)
+    }}
+  >{children}</a>
+}
+
 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",

package/package.json

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

package/readme.md

@@ -37,6 +37,7 @@ export default defineConfig({
 | `Block` | `label`, `row`, `dashed`, `cn`, `grow` | Padded container with optional label |
 | `BlockSm` | `dashed`, `cn`, `grow` | Smaller padded container |
 | `Btn` | `click`, `color`, `ghost`, `cn`, `grow` | Button, supports `Color` and ghost style |
+| `A` | `href`, `click`, `cn`, `grow` | Link-styled anchor, works with `onClick` or `href` |
 | `Chip` | `click`, `cn` | Small inline badge, clickable if `click` provided |
 | `Tint` | `color`, `cn`, `grow` | Tinted background block |
 | `Muted` | `cn`, `grow` | Small muted text |