@pablozaiden/webapp 0.7.0 → 1.0.0

package/docs/ui-guidelines.md

@@ -44,7 +44,8 @@ Use these first:
 | `Panel` | Cards/sections; use `actions` for a top-right menu/action area |
 | `ActionMenu` | Three-line action menu for secondary surfaces; entity-level shell menus should usually come from `SidebarNode.actions` so the framework renders them in the sidebar context menu and fixed title bar |
 | `Button` / `IconButton` | Form submission and true inline controls; prefer action menus for entity/app commands |
-| `Badge` | Status/count labels; sidebar badges render as compact colored dots to preserve sidebar width |
+| `Badge` | Generic status/count labels; preserves the supplied text casing |
+| `StatusBadge` | Status labels with the shared uppercase and letter-spacing treatment |
 | `EntityHeader` | Main-content entity title/description/actions |
 | `DataList` / `DataListRow` | Lists with title, description, metadata, badge and actions |
 | `TextField`, `TextAreaField`, `SelectField` | Forms |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",

package/src/web/components/index.tsx

@@ -32,17 +32,27 @@ export function IconButton({
 
 export type BadgeSize = "sm" | "md";
 
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  children: ReactNode;
+}
+
 export function Badge({
   variant = "default",
   size = "sm",
   className = "",
   children,
   ...props
-}: HTMLAttributes<HTMLSpanElement> & { variant?: BadgeVariant; size?: BadgeSize; children: ReactNode }) {
+}: BadgeProps) {
   const sizeClass = size === "md" ? "wapp-badge-md" : "";
   return <span {...props} className={["wapp-badge", `wapp-badge-${variant}`, sizeClass, className].filter(Boolean).join(" ")}>{children}</span>;
 }
 
+export function StatusBadge({ className = "", ...props }: BadgeProps) {
+  return <Badge {...props} className={["wapp-status-badge", className].filter(Boolean).join(" ")} />;
+}
+
 export type PageLayout = "padded" | "full";
 
 export function Page({

package/src/web/styles.css

@@ -1284,6 +1284,11 @@ textarea::placeholder {
   padding: 0.25rem 0.625rem;
 }
 
+.wapp-status-badge {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
 .wapp-sidebar-badge {
   flex: 0 0 auto;
   width: 0.625rem;