@toolr/ui-design 0.1.4 → 0.1.5

package/components/sections/prompt-editor/tabbed-prompt-editor.tsx

@@ -204,10 +204,10 @@ export function TabbedPromptEditor({
         style.id = styleId
         style.textContent = `
           .template-variable-highlight {
-            background-color: rgba(180, 190, 254, 0.2);
-            border: 1px solid rgba(180, 190, 254, 0.4);
+            background-color: rgba(129, 140, 248, 0.2);
+            border: 1px solid rgba(129, 140, 248, 0.4);
             border-radius: 3px;
-            color: #b4befe !important;
+            color: rgb(129, 140, 248) !important;
             font-weight: 500;
           }
         `

package/components/ui/input.tsx

@@ -183,13 +183,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         {debounceMs > 0 && debounceKey > 0 && (
           <svg
             key={debounceKey}
-            className="absolute inset-0 pointer-events-none"
+            className="absolute inset-0 pointer-events-none text-emerald-400/70"
             style={{ width: '100%', height: '100%' }}
           >
             <rect
               x="1" y="1" rx="5" ry="5"
               fill="none"
-              stroke="rgb(52 211 153 / 0.7)"
+              stroke="currentColor"
               strokeWidth="1.5"
               pathLength="100"
               strokeDasharray="100"

package/components/ui/nav-card.tsx

@@ -1,4 +1,4 @@
-/** Navigation card with icon, description, badge, and hover lift effect. */
+/** Navigation card with icon, description, label, and hover lift effect. */
 
 import {
   Settings, Puzzle, Zap, Shield, Folder, Code, Database, Globe,
@@ -7,7 +7,7 @@ import {
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import type { IconName } from './icon-button.tsx'
-import { Badge, type BadgeColor } from './badge.tsx'
+import { Label, type LabelColor } from './label.tsx'
 import { cn } from '../lib/cn.ts'
 
 const iconSubset: Partial<Record<IconName, LucideIcon>> = {
@@ -23,9 +23,11 @@ export interface NavCardProps {
   title: string
   description?: string
   icon?: IconName
+  /** Custom icon component. Takes precedence over icon name. */
+  IconComponent?: React.ComponentType<{ className?: string }>
   iconColor?: string
-  badge?: number | string
-  badgeColor?: BadgeColor
+  label?: { text: string; color: LabelColor; tooltip: { description: string } }
+  stats?: string
   onClick?: () => void
   disabled?: boolean
   className?: string
@@ -35,14 +37,15 @@ export function NavCard({
   title,
   description,
   icon,
+  IconComponent,
   iconColor = '#60a5fa',
-  badge,
-  badgeColor = 'blue',
+  label,
+  stats,
   onClick,
   disabled = false,
   className,
 }: NavCardProps) {
-  const Icon = icon ? iconSubset[icon] : undefined
+  const Icon = IconComponent ?? (icon ? iconSubset[icon] : undefined)
 
   return (
     <button
@@ -56,9 +59,9 @@ export function NavCard({
         className,
       )}
     >
-      {badge !== undefined && (
+      {label && (
         <span className="absolute top-3 right-3">
-          <Badge value={badge} color={badgeColor} size="xs" />
+          <Label text={label.text} color={label.color} size="xs" tooltip={label.tooltip} />
         </span>
       )}
 
@@ -76,6 +79,10 @@ export function NavCard({
       {description && (
         <p className="mt-1 text-xs text-neutral-500 leading-relaxed line-clamp-2">{description}</p>
       )}
+
+      {stats && (
+        <p className="mt-2 text-xs text-neutral-600">{stats}</p>
+      )}
     </button>
   )
 }

package/components/ui/registry-browser.tsx

@@ -172,13 +172,13 @@ export function RegistryBrowser({
           {debounceKey != null && debounceKey > 0 && (
             <svg
               key={debounceKey}
-              className="absolute inset-0 pointer-events-none"
+              className="absolute inset-0 pointer-events-none text-emerald-400/70"
               style={{ width: '100%', height: '100%' }}
             >
               <rect
                 x="1" y="1" rx="5" ry="5"
                 fill="none"
-                stroke="rgb(52 211 153 / 0.7)"
+                stroke="currentColor"
                 strokeWidth="1.5"
                 pathLength="100"
                 strokeDasharray="100"

package/dist/index.d.ts

@@ -2587,14 +2587,24 @@ interface NavCardProps {
     title: string;
     description?: string;
     icon?: IconName;
+    /** Custom icon component. Takes precedence over icon name. */
+    IconComponent?: React.ComponentType<{
+        className?: string;
+    }>;
     iconColor?: string;
-    badge?: number | string;
-    badgeColor?: BadgeColor;
+    label?: {
+        text: string;
+        color: LabelColor;
+        tooltip: {
+            description: string;
+        };
+    };
+    stats?: string;
     onClick?: () => void;
     disabled?: boolean;
     className?: string;
 }
-declare function NavCard({ title, description, icon, iconColor, badge, badgeColor, onClick, disabled, className, }: NavCardProps): react_jsx_runtime.JSX.Element;
+declare function NavCard({ title, description, icon, IconComponent, iconColor, label, stats, onClick, disabled, className, }: NavCardProps): react_jsx_runtime.JSX.Element;
 
 interface ExtensionListCardProps {
     /** Lucide icon component */

package/dist/index.js

@@ -1295,7 +1295,7 @@ var Input = forwardRef(function Input2({
           debounceMs > 0 && debounceKey > 0 && /* @__PURE__ */ jsx10(
             "svg",
             {
-              className: "absolute inset-0 pointer-events-none",
+              className: "absolute inset-0 pointer-events-none text-emerald-400/70",
               style: { width: "100%", height: "100%" },
               children: /* @__PURE__ */ jsx10(
                 "rect",
@@ -1305,7 +1305,7 @@ var Input = forwardRef(function Input2({
                   rx: "5",
                   ry: "5",
                   fill: "none",
-                  stroke: "rgb(52 211 153 / 0.7)",
+                  stroke: "currentColor",
                   strokeWidth: "1.5",
                   pathLength: "100",
                   strokeDasharray: "100",
@@ -4822,7 +4822,7 @@ function RegistryBrowser({
         debounceKey != null && debounceKey > 0 && /* @__PURE__ */ jsx32(
           "svg",
           {
-            className: "absolute inset-0 pointer-events-none",
+            className: "absolute inset-0 pointer-events-none text-emerald-400/70",
             style: { width: "100%", height: "100%" },
             children: /* @__PURE__ */ jsx32(
               "rect",
@@ -4832,7 +4832,7 @@ function RegistryBrowser({
                 rx: "5",
                 ry: "5",
                 fill: "none",
-                stroke: "rgb(52 211 153 / 0.7)",
+                stroke: "currentColor",
                 strokeWidth: "1.5",
                 pathLength: "100",
                 strokeDasharray: "100",
@@ -8864,10 +8864,10 @@ ${varInfo.description}${varInfo.example ? `
         style.id = styleId;
         style.textContent = `
           .template-variable-highlight {
-            background-color: rgba(180, 190, 254, 0.2);
-            border: 1px solid rgba(180, 190, 254, 0.4);
+            background-color: rgba(129, 140, 248, 0.2);
+            border: 1px solid rgba(129, 140, 248, 0.4);
             border-radius: 3px;
-            color: #b4befe !important;
+            color: rgb(129, 140, 248) !important;
             font-weight: 500;
           }
         `;
@@ -10850,14 +10850,15 @@ function NavCard({
   title,
   description,
   icon,
+  IconComponent,
   iconColor = "#60a5fa",
-  badge,
-  badgeColor = "blue",
+  label,
+  stats,
   onClick,
   disabled = false,
   className
 }) {
-  const Icon = icon ? iconSubset6[icon] : void 0;
+  const Icon = IconComponent ?? (icon ? iconSubset6[icon] : void 0);
   return /* @__PURE__ */ jsxs51(
     "button",
     {
@@ -10871,7 +10872,7 @@ function NavCard({
         className
       ),
       children: [
-        badge !== void 0 && /* @__PURE__ */ jsx57("span", { className: "absolute top-3 right-3", children: /* @__PURE__ */ jsx57(Badge, { value: badge, color: badgeColor, size: "xs" }) }),
+        label && /* @__PURE__ */ jsx57("span", { className: "absolute top-3 right-3", children: /* @__PURE__ */ jsx57(Label, { text: label.text, color: label.color, size: "xs", tooltip: label.tooltip }) }),
         Icon && /* @__PURE__ */ jsx57(
           "div",
           {
@@ -10881,7 +10882,8 @@ function NavCard({
           }
         ),
         /* @__PURE__ */ jsx57("h3", { className: "text-sm font-medium text-neutral-200", children: title }),
-        description && /* @__PURE__ */ jsx57("p", { className: "mt-1 text-xs text-neutral-500 leading-relaxed line-clamp-2", children: description })
+        description && /* @__PURE__ */ jsx57("p", { className: "mt-1 text-xs text-neutral-500 leading-relaxed line-clamp-2", children: description }),
+        stats && /* @__PURE__ */ jsx57("p", { className: "mt-2 text-xs text-neutral-600", children: stats })
       ]
     }
   );

package/dist/tokens/semantic.css

@@ -21,7 +21,7 @@
   --surface-hover: var(--color-neutral-750);
 
   /* Dialog backdrop: modal/dialog overlays */
-  --dialog-backdrop: rgba(0, 0, 0, 0.85);
+  --dialog-backdrop: rgba(0, 0, 0, 0.95);
 
   /* Popover: floating panels, dropdown menus */
   --popover: rgba(0, 0, 0, 0.8);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolr/ui-design",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",

package/tokens/semantic.css

@@ -21,7 +21,7 @@
   --surface-hover: var(--color-neutral-750);
 
   /* Dialog backdrop: modal/dialog overlays */
-  --dialog-backdrop: rgba(0, 0, 0, 0.85);
+  --dialog-backdrop: rgba(0, 0, 0, 0.95);
 
   /* Popover: floating panels, dropdown menus */
   --popover: rgba(0, 0, 0, 0.8);