@kindraos/ui
Advanced tools
+1
-1
| { | ||
| "name": "@kindraos/ui", | ||
| "version": "0.1.1", | ||
| "version": "0.1.2", | ||
| "main": "./src/index.ts", | ||
@@ -5,0 +5,0 @@ "types": "./src/index.ts", |
@@ -58,2 +58,37 @@ "use client"; | ||
| if (item.disabled) { | ||
| const element = ( | ||
| <span | ||
| title={item.disabledReason} | ||
| className={cn( | ||
| "flex items-center rounded-lg text-sm transition-all duration-200 opacity-50 cursor-not-allowed", | ||
| isCollapsed | ||
| ? "justify-center h-10 w-10 mx-auto" | ||
| : "gap-3 px-3 py-2", | ||
| indent && !isCollapsed && "pl-9" | ||
| )} | ||
| > | ||
| <NavIcon icon={item.icon} /> | ||
| {!isCollapsed && <span className="flex-1">{item.label}</span>} | ||
| </span> | ||
| ); | ||
| if (isCollapsed) { | ||
| return ( | ||
| <Tooltip> | ||
| <TooltipTrigger asChild>{element}</TooltipTrigger> | ||
| <TooltipContent side="right" className="font-medium"> | ||
| {item.label} | ||
| {item.disabledReason && ( | ||
| <span className="ml-1.5 text-[10px] opacity-60"> | ||
| {item.disabledReason} | ||
| </span> | ||
| )} | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| ); | ||
| } | ||
| return element; | ||
| } | ||
| if (item.comingSoon) { | ||
@@ -60,0 +95,0 @@ const element = ( |
@@ -26,2 +26,9 @@ import type { ReactNode, ComponentType } from "react"; | ||
| comingSoon?: boolean; | ||
| /** If true, item is rendered as a non-interactive, grayed-out span. | ||
| * Use this for explicit access-gating (e.g., user does not have the | ||
| * app enabled). Wins over `comingSoon` when both are set. */ | ||
| disabled?: boolean; | ||
| /** Optional tooltip text shown when hovering a `disabled` item. | ||
| * Surfaced via the native `title` attribute on the rendered span. */ | ||
| disabledReason?: string; | ||
| } | ||
@@ -28,0 +35,0 @@ |
121009
1.16%1549
2.65%