trix-ui 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trix-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Lite UI CLI, registry tooling, and templates.",
   "license": "MIT",
   "type": "module",
@@ -37,15 +37,22 @@
     "README.md"
   ],
   "dependencies": {
+    "@antfu/ni": "^28.2.0",
+    "chalk": "^5.6.2",
     "commander": "^14.0.2",
     "eslint-plugin-tailwindcss": "3.18.2",
+    "execa": "^9.6.1",
+    "ora": "^9.1.0",
+    "pino": "^10.2.1",
     "postcss": "^8.5.6",
     "postcss-selector-parser": "^7.1.1",
+    "prompts": "^2.4.2",
     "ts-morph": "^27.0.2",
     "zod": "^4.3.5"
   },
   "devDependencies": {
     "@types/node": "^25.0.9",
+    "@types/prompts": "^2.4.9",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3"
   },

package/templates/components/ui/badge.tsx

@@ -1,32 +1,182 @@
-import * as React from "react"
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
-import { cn } from "@/lib/utils"
+type BadgeVariant = "default" | "secondary" | "destructive" | "success" | "warning" | "info";
+type BadgeTone = "solid" | "soft" | "outline";
+type BadgeSize = "sm" | "md" | "lg";
 
-const variants = {
-  default: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  outline: "border border-border text-foreground",
-  destructive: "bg-destructive text-destructive-foreground"
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  tone?: BadgeTone;
+  size?: BadgeSize;
+
+  /** If true, applies pointer styles (auto true if onClick is provided) */
+  interactive?: boolean;
+
+  /** Truncate long content */
+  truncate?: boolean;
+
+  /** Semantic disabled state (span has no native disabled) */
+  disabled?: boolean;
+
+  /** Optional icons */
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+
+  /** Status dot */
+  dot?: boolean;
+  dotClassName?: string;
+
+  /** Removable UX */
+  removable?: boolean;
+  onRemove?: () => void;
+  removeLabel?: string;
 }
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLSpanElement> {
-  variant?: keyof typeof variants
+const BASE =
+  "inline-flex items-center gap-1.5 whitespace-nowrap select-none rounded-full font-medium leading-none " +
+  "border shadow-sm transition-colors " +
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " +
+  "ring-offset-background";
+
+const SIZE: Record<BadgeSize, string> = {
+  sm: "h-5 px-2 text-[11px]",
+  md: "h-6 px-2.5 text-xs",
+  lg: "h-7 px-3 text-sm",
+};
+
+// These classes assume shadcn-like tokens exist (bg-primary, text-foreground, etc.)
+// If you have different tokens, adjust here only.
+const SOLID: Record<BadgeVariant, string> = {
+  default: "bg-primary text-primary-foreground border-transparent hover:bg-primary/90",
+  secondary: "bg-secondary text-secondary-foreground border-transparent hover:bg-secondary/85",
+  destructive: "bg-destructive text-destructive-foreground border-transparent hover:bg-destructive/90",
+  success: "bg-emerald-600 text-white border-transparent hover:bg-emerald-600/90",
+  warning: "bg-amber-500 text-black border-transparent hover:bg-amber-500/90",
+  info: "bg-sky-600 text-white border-transparent hover:bg-sky-600/90",
+};
+
+const SOFT: Record<BadgeVariant, string> = {
+  default: "bg-muted text-foreground border-transparent hover:bg-muted/80",
+  secondary: "bg-secondary/20 text-secondary-foreground border-transparent hover:bg-secondary/25",
+  destructive: "bg-destructive/15 text-destructive border-transparent hover:bg-destructive/20",
+  success: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-transparent hover:bg-emerald-500/20",
+  warning: "bg-amber-500/20 text-amber-800 dark:text-amber-300 border-transparent hover:bg-amber-500/25",
+  info: "bg-sky-500/15 text-sky-700 dark:text-sky-300 border-transparent hover:bg-sky-500/20",
+};
+
+const OUTLINE: Record<BadgeVariant, string> = {
+  default: "bg-transparent text-foreground border-border hover:bg-accent hover:text-accent-foreground",
+  secondary: "bg-transparent text-foreground border-border hover:bg-accent hover:text-accent-foreground",
+  destructive: "bg-transparent text-destructive border-destructive/40 hover:bg-destructive/10",
+  success: "bg-transparent text-emerald-700 dark:text-emerald-400 border-emerald-500/40 hover:bg-emerald-500/10",
+  warning: "bg-transparent text-amber-800 dark:text-amber-300 border-amber-500/45 hover:bg-amber-500/10",
+  info: "bg-transparent text-sky-700 dark:text-sky-300 border-sky-500/40 hover:bg-sky-500/10",
+};
+
+function getVariantClass(variant: BadgeVariant, tone: BadgeTone) {
+  if (tone === "soft") return SOFT[variant];
+  if (tone === "outline") return OUTLINE[variant];
+  return SOLID[variant];
 }
 
 const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ className, variant = "default", ...props }, ref) => (
-    <span
-      ref={ref}
-      className={cn(
-        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold",
-        variants[variant],
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Badge.displayName = "Badge"
-
-export { Badge }
+  (
+    {
+      className,
+      variant = "default",
+      tone = "solid",
+      size = "md",
+      interactive,
+      truncate = false,
+      disabled = false,
+
+      leftIcon,
+      rightIcon,
+
+      dot = false,
+      dotClassName,
+
+      removable = false,
+      onRemove,
+      removeLabel = "Remove badge",
+
+      children,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    const isInteractive = (interactive ?? !!onClick) && !disabled;
+    const isRemovable = removable && typeof onRemove === "function" && !disabled;
+
+    return (
+      <span
+        ref={ref}
+        aria-disabled={disabled || undefined}
+        data-disabled={disabled ? "true" : undefined}
+        onClick={disabled ? undefined : onClick}
+        className={cn(
+          BASE,
+          SIZE[size],
+          getVariantClass(variant, tone),
+          isInteractive && "cursor-pointer",
+          disabled && "opacity-55 pointer-events-none",
+          truncate && "max-w-[18rem] overflow-hidden text-ellipsis",
+          className
+        )}
+        {...props}
+      >
+        {dot ? (
+          <span
+            aria-hidden="true"
+            className={cn("inline-block h-1.5 w-1.5 rounded-full bg-current opacity-70", dotClassName)}
+          />
+        ) : null}
+
+        {leftIcon ? (
+          <span aria-hidden="true" className="inline-flex items-center">
+            {leftIcon}
+          </span>
+        ) : null}
+
+        <span className="min-w-0">{children}</span>
+
+        {rightIcon ? (
+          <span aria-hidden="true" className="inline-flex items-center">
+            {rightIcon}
+          </span>
+        ) : null}
+
+        {isRemovable ? (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onRemove();
+            }}
+            aria-label={removeLabel}
+            className={cn(
+              "ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full",
+              "hover:bg-black/10 dark:hover:bg-white/10",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            )}
+          >
+            <svg aria-hidden="true" viewBox="0 0 20 20" className="h-3 w-3" fill="currentColor">
+              <path
+                fillRule="evenodd"
+                d="M4.22 4.22a.75.75 0 011.06 0L10 8.94l4.72-4.72a.75.75 0 111.06 1.06L11.06 10l4.72 4.72a.75.75 0 11-1.06 1.06L10 11.06l-4.72 4.72a.75.75 0 11-1.06-1.06L8.94 10 4.22 5.28a.75.75 0 010-1.06z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </button>
+        ) : null}
+      </span>
+    );
+  }
+);
+
+Badge.displayName = "Badge";
+
+export { Badge };