fixed missing autoFocus prop on buttons and missing outline styles.

added Badge component

Author: marcus-wishes

library/src/components/Badge.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+import { twMerge } from "tailwind-merge"
+
+type BadgeAppearance =
+	| "added"
+	| "default"
+	| "important"
+	| "removed"
+	| "primary"
+	| "primaryInverted"
+
+type BadgeProps = {
+	appearance?: BadgeAppearance
+	children: React.ReactNode
+	style?: React.CSSProperties
+	className?: string
+}
+
+const defaultStyle = "bg-neutral"
+const addedStyle = "bg-success text-success-text"
+const importantStyle = "bg-danger-border text-white"
+const removedStyle = "bg-danger text-danger-text"
+const primaryStyle = "bg-brand-bold text-text-inverse"
+const primaryInvertedStyle = "bg-surface text-brand-bold"
+
+const appearanceStyles: { [appearance in BadgeAppearance]: string } = {
+	default: defaultStyle,
+	added: addedStyle,
+	important: importantStyle,
+	removed: removedStyle,
+	primary: primaryStyle,
+	primaryInverted: primaryInvertedStyle,
+} as const
+
+export function Badge({
+	appearance = "default",
+	children,
+	style,
+	className,
+}: BadgeProps) {
+	return (
+		<span
+			className={twMerge(
+				"box-border flex items-center justify-center rounded-lg pe-[0.4rem] ps-[0.4rem] text-[1rem] leading-6",
+				appearanceStyles[appearance],
+				className,
+			)}
+			style={style}
+		>
+			{children}
+		</span>
+	)
+}

library/src/components/Button.tsx

@@ -11,6 +11,7 @@ export type ButtonProps = {
 	iconAfter?: React.ReactNode
 	isDisabled?: boolean
 	isSelected?: boolean
+	autoFocus?: boolean
 	children?: React.ReactNode
 	style?: CSSProperties
 	className?: string
@@ -52,6 +53,7 @@ export const Button = ({
 	iconAfter,
 	isDisabled = false,
 	isSelected = false,
+	autoFocus = false,
 	style,
 	children,
 	className,
@@ -60,11 +62,12 @@ export const Button = ({
 	return (
 		<button
 			title={title}
+			autoFocus={autoFocus}
 			aria-label={label}
 			style={style}
 			className={twMerge(
 				ButtonStyles[appearance],
-				"disabled:bg-disabled disabled:text-disabled-text relative flex items-center justify-center gap-1 rounded px-3 py-1.5 disabled:cursor-not-allowed",
+				"disabled:bg-disabled disabled:text-disabled-text outline-brand-hovered relative flex items-center justify-center gap-1 rounded px-3 py-1.5 outline-1 outline-offset-2 focus:outline disabled:cursor-not-allowed",
 				isSelected ? ButtonSelectedStyles : undefined,
 				className,
 			)}

library/src/components/index.ts

@@ -11,3 +11,4 @@ export * from "./Button"
 export * from "./Avatar"
 export * from "./IconSizeHelper"
 export * from "./Tooltip"
+export * from "./Badge"