@handled-ai/design-system 0.3.0 → 0.3.1

package/dist/index.d.ts

@@ -812,11 +812,13 @@ interface UserMenuItem {
     }>;
     destructive?: boolean;
 }
+type ActiveVariant = "default" | "gradient";
 interface QuickActionSidebarNavProps extends React$1.ComponentProps<"aside"> {
     brandLabel?: string;
     brandSubtitle?: string;
     navSections?: SidebarNavSection[];
     activeItemId?: string;
+    activeVariant?: ActiveVariant;
     onNavigate?: (itemId: string) => void;
     user?: SidebarUserProfile;
     userMenuItems?: UserMenuItem[];
@@ -824,7 +826,7 @@ interface QuickActionSidebarNavProps extends React$1.ComponentProps<"aside"> {
     onCreateTask?: (draft: QuickActionTaskDraft) => void;
     defaultCollapsed?: boolean;
 }
-declare function QuickActionSidebarNav({ className, brandLabel, brandSubtitle, navSections, activeItemId, onNavigate, user, userMenuItems, onUserMenuAction, onCreateTask, defaultCollapsed, ...props }: QuickActionSidebarNavProps): React$1.JSX.Element;
+declare function QuickActionSidebarNav({ className, brandLabel, brandSubtitle, navSections, activeItemId, activeVariant, onNavigate, user, userMenuItems, onUserMenuAction, onCreateTask, defaultCollapsed, ...props }: QuickActionSidebarNavProps): React$1.JSX.Element;
 
 interface RecommendedAction {
     id: string;
@@ -1487,8 +1489,14 @@ interface PrototypeShellProps {
     entityPanelChildren?: React$1.ReactNode | ((ctx: {
         onClose: () => void;
     }) => React$1.ReactNode);
+    /**
+     * Fired on every sidebar navigation click (both navigable and non-navigable views).
+     * Useful for intercepting clicks on product-specific views like "settings"
+     * that live outside the shell.
+     */
+    onNavigate?: (viewId: string) => void;
 }
-declare function PrototypeShell({ config, headerActions, entityPanelChildren, }: PrototypeShellProps): React$1.JSX.Element;
+declare function PrototypeShell({ config, headerActions, entityPanelChildren, onNavigate, }: PrototypeShellProps): React$1.JSX.Element;
 
 interface PrototypeInboxViewProps extends InboxViewConfig {
     /** Extra ReactNode rendered at the end of the header bar (e.g. exit button). */
@@ -1517,4 +1525,4 @@ interface PrototypeWorkQueueViewProps {
 }
 declare function PrototypeWorkQueueView({ headerActions, }: PrototypeWorkQueueViewProps): React$1.JSX.Element;
 
-export { type AccountFilterTab, type AccountsViewConfig, ActivityDetail, type ActivityDetailData, type ActivityDetailProps, type ActivityItem, ActivityLog, type ActivityLogItem, type ActivityLogProps, type ActivityParticipant, ActivityRow, type ActivityThreadMessage, type AssigneeFilter, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartComponent, type BarChartComponentProps, type BarSeries, Button, CHART_CURSOR_STYLE, CHART_TOOLTIP_STYLE, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, type ChartTooltipEntry, CheckInsCard, Citation, ConnectedApps, type ContactChannel, type ContactItem, ContactList, type ContactListProps, DataTable, DataTableDisplay, type DataTableDisplayColumn, DataTableFilter, type DataTableFilterCategory, type DataTableQuickViewValue, DataTableQuickViews, DataTableToolbar, DetailViewHeader, DetailViewSummary, DetailViewThread, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, type DonutChartProps, type DonutSegment, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntityActivityItem, EntityDetails, type EntityMetadataField, EntityMetadataGrid, EntityPanel, type EntityPanelBrandIcons, type EntityPanelConfig, EntityPanelHeader, type EntityPanelSection, EntityPanelTabs, EntitySection, type GroupedListGroup, GroupedListView, type GroupedListViewProps, type InboxDetailSections, type InboxFilterCategory, InboxGroupHeader, InboxRow, type InboxRowProps, InboxToolbar, type InboxToolbarProps, type InboxViewConfig, Input, type InsightsViewConfig, ItemList, ItemListDisplay, type ItemListDisplayState, ItemListFilter, type ItemListFilterCategory, type ItemListGrouping, type ItemListQuickView, ItemListToolbar, type ItemListViewMode, Label, MetricCard, type MetricCardData, type MetricCardProps, type MetricDataPoint, PerformanceMetricsTable, type PerformanceMetricsTableRow, type PerformanceMetricsTableSortOption, type PipelineFilterBreakdown, PipelineOverview, type PipelineOverviewProps, type PipelineStage, type PipelineStageMetrics, type PipelineStageTiming, PotentialContacts, PreviewList, PreviewListItem, type PreviewListItemProps, Progress, PrototypeAccountsView, type PrototypeAccountsViewProps, type PrototypeBrandConfig, type PrototypeConfig, PrototypeInboxView, type PrototypeInboxViewProps, PrototypeInsightsView, type PrototypeInsightsViewProps, PrototypeShell, type PrototypeShellProps, PrototypeWorkQueueView, type PrototypeWorkQueueViewProps, type QueueItem, QuickActionChatArea, QuickActionModal, type QuickActionPriority$1 as QuickActionPriority, QuickActionSidebarNav, type QuickActionSubmitPayload, type QuickActionTaskDraft, type QuickActionTemplate, RecentActivity, RecentlyCompletedCard, type RecommendedAction, RecommendedActionsSection, ReportCard, type ReportCardProps, SankeyChart, type SankeyData, type SankeyDropOff, type SankeyHoverCardData, type SankeyLink, type SankeyNode, type SankeyStageMetrics, ScoreAnalysisModal, type ScoreAnalysisModalProps, ScoreAnalysisPanel, ScoreBreakdown, type ScoreBreakdownProps, type ScoreFactor, ScoreFeedback, ScoreRing, type ScoreRingProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, type SidebarNavItem, type SidebarNavSection, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, type SidebarUserProfile, SignalApproval, Actions as SignalApprovalActions, Gate as SignalApprovalGate, Root as SignalApprovalRoot, type SignalScoreData, SimpleChartTooltip, type SimpleChartTooltipProps, Skeleton, type SourceDef, SourceList, type StyledBarItem, StyledBarList, type StyledBarListProps, type SuggestedAction, type SuggestedActionCallMeta, type SuggestedActionEmailMeta, type SuggestedActionFollowUp, type SuggestedActionReplyTo, type SuggestedActionThreadMessage, type SuggestedActionTicket, SuggestedActions, type SuggestedActionsIconMap, type SuggestedActionsProps, type SuggestedContact, SystemActivity, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThreadMessage, TimelineActivity, type TimelineActivityProps, type TimelineEvent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLineMetrics, type TopLineMetricsProps, TopTasksCard, TrendAreaChart, type TrendAreaChartProps, type TrendSeries, UpcomingMeetingsCard, type UserMenuItem, type ViewMode, ViewModeToggle, type ViewModeToggleProps, VolumeAnalysisChart, type VolumeAnalysisChartProps, type VolumeDataKey, type WorkQueueViewConfig, badgeVariants, buttonVariants, cn, getScoreColor, tabsListVariants, useIsMobile, useScoreFeedback, useSidebar, useSignalApproval };
+export { type AccountFilterTab, type AccountsViewConfig, type ActiveVariant, ActivityDetail, type ActivityDetailData, type ActivityDetailProps, type ActivityItem, ActivityLog, type ActivityLogItem, type ActivityLogProps, type ActivityParticipant, ActivityRow, type ActivityThreadMessage, type AssigneeFilter, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BarChartComponent, type BarChartComponentProps, type BarSeries, Button, CHART_CURSOR_STYLE, CHART_TOOLTIP_STYLE, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, type ChartTooltipEntry, CheckInsCard, Citation, ConnectedApps, type ContactChannel, type ContactItem, ContactList, type ContactListProps, DataTable, DataTableDisplay, type DataTableDisplayColumn, DataTableFilter, type DataTableFilterCategory, type DataTableQuickViewValue, DataTableQuickViews, DataTableToolbar, DetailViewHeader, DetailViewSummary, DetailViewThread, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, type DonutChartProps, type DonutSegment, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntityActivityItem, EntityDetails, type EntityMetadataField, EntityMetadataGrid, EntityPanel, type EntityPanelBrandIcons, type EntityPanelConfig, EntityPanelHeader, type EntityPanelSection, EntityPanelTabs, EntitySection, type GroupedListGroup, GroupedListView, type GroupedListViewProps, type InboxDetailSections, type InboxFilterCategory, InboxGroupHeader, InboxRow, type InboxRowProps, InboxToolbar, type InboxToolbarProps, type InboxViewConfig, Input, type InsightsViewConfig, ItemList, ItemListDisplay, type ItemListDisplayState, ItemListFilter, type ItemListFilterCategory, type ItemListGrouping, type ItemListQuickView, ItemListToolbar, type ItemListViewMode, Label, MetricCard, type MetricCardData, type MetricCardProps, type MetricDataPoint, PerformanceMetricsTable, type PerformanceMetricsTableRow, type PerformanceMetricsTableSortOption, type PipelineFilterBreakdown, PipelineOverview, type PipelineOverviewProps, type PipelineStage, type PipelineStageMetrics, type PipelineStageTiming, PotentialContacts, PreviewList, PreviewListItem, type PreviewListItemProps, Progress, PrototypeAccountsView, type PrototypeAccountsViewProps, type PrototypeBrandConfig, type PrototypeConfig, PrototypeInboxView, type PrototypeInboxViewProps, PrototypeInsightsView, type PrototypeInsightsViewProps, PrototypeShell, type PrototypeShellProps, PrototypeWorkQueueView, type PrototypeWorkQueueViewProps, type QueueItem, QuickActionChatArea, QuickActionModal, type QuickActionPriority$1 as QuickActionPriority, QuickActionSidebarNav, type QuickActionSubmitPayload, type QuickActionTaskDraft, type QuickActionTemplate, RecentActivity, RecentlyCompletedCard, type RecommendedAction, RecommendedActionsSection, ReportCard, type ReportCardProps, SankeyChart, type SankeyData, type SankeyDropOff, type SankeyHoverCardData, type SankeyLink, type SankeyNode, type SankeyStageMetrics, ScoreAnalysisModal, type ScoreAnalysisModalProps, ScoreAnalysisPanel, ScoreBreakdown, type ScoreBreakdownProps, type ScoreFactor, ScoreFeedback, ScoreRing, type ScoreRingProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, type SidebarNavItem, type SidebarNavSection, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, type SidebarUserProfile, SignalApproval, Actions as SignalApprovalActions, Gate as SignalApprovalGate, Root as SignalApprovalRoot, type SignalScoreData, SimpleChartTooltip, type SimpleChartTooltipProps, Skeleton, type SourceDef, SourceList, type StyledBarItem, StyledBarList, type StyledBarListProps, type SuggestedAction, type SuggestedActionCallMeta, type SuggestedActionEmailMeta, type SuggestedActionFollowUp, type SuggestedActionReplyTo, type SuggestedActionThreadMessage, type SuggestedActionTicket, SuggestedActions, type SuggestedActionsIconMap, type SuggestedActionsProps, type SuggestedContact, SystemActivity, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThreadMessage, TimelineActivity, type TimelineActivityProps, type TimelineEvent, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopLineMetrics, type TopLineMetricsProps, TopTasksCard, TrendAreaChart, type TrendAreaChartProps, type TrendSeries, UpcomingMeetingsCard, type UserMenuItem, type ViewMode, ViewModeToggle, type ViewModeToggleProps, VolumeAnalysisChart, type VolumeAnalysisChartProps, type VolumeDataKey, type WorkQueueViewConfig, badgeVariants, buttonVariants, cn, getScoreColor, tabsListVariants, useIsMobile, useScoreFeedback, useSidebar, useSignalApproval };

package/dist/index.js

@@ -5878,8 +5878,11 @@ function NavItemRow({
   item,
   isActive,
   isCollapsed,
+  activeVariant = "default",
   onClick
 }) {
+  const activeClasses = activeVariant === "gradient" ? "bg-gradient-to-r from-primary/10 to-transparent text-primary" : "bg-sidebar-accent text-sidebar-accent-foreground";
+  const iconActiveClasses = activeVariant === "gradient" ? "text-primary" : "";
   const content = /* @__PURE__ */ React52.createElement(
     "button",
     {
@@ -5888,10 +5891,10 @@ function NavItemRow({
       className: cn(
         "flex w-full items-center gap-3 rounded-lg text-sm font-medium transition-colors",
         isCollapsed ? "justify-center p-2" : "px-3 py-2",
-        isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
+        isActive ? activeClasses : "text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
       )
     },
-    /* @__PURE__ */ React52.createElement(item.icon, { className: cn("shrink-0", isCollapsed ? "w-5 h-5" : "w-4 h-4") }),
+    /* @__PURE__ */ React52.createElement(item.icon, { className: cn("shrink-0", isCollapsed ? "w-5 h-5" : "w-4 h-4", isActive && iconActiveClasses) }),
     !isCollapsed && /* @__PURE__ */ React52.createElement("span", { className: "flex-1 truncate text-left" }, item.label)
   );
   if (isCollapsed) {
@@ -5903,6 +5906,7 @@ function NavSection({
   section,
   activeItemId,
   isCollapsed,
+  activeVariant = "default",
   onNavigate
 }) {
   var _a;
@@ -5932,6 +5936,7 @@ function NavSection({
       item,
       isActive: activeItemId === item.id,
       isCollapsed,
+      activeVariant,
       onClick: () => onNavigate == null ? void 0 : onNavigate(item.id)
     }
   )), !isCollapsed && section.moreItems && section.moreItems.length > 0 && /* @__PURE__ */ React52.createElement(DropdownMenu, null, /* @__PURE__ */ React52.createElement(DropdownMenuTrigger, { className: "flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm font-medium text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors outline-none" }, /* @__PURE__ */ React52.createElement(MoreHorizontal, { className: "shrink-0 w-4 h-4" }), /* @__PURE__ */ React52.createElement("span", { className: "flex-1 text-left" }, "More")), /* @__PURE__ */ React52.createElement(DropdownMenuContent, { align: "start", side: "bottom", className: "w-48" }, section.moreItems.map((item) => /* @__PURE__ */ React52.createElement(
@@ -5950,6 +5955,7 @@ function NavSection({
       item,
       isActive: activeItemId === item.id,
       isCollapsed,
+      activeVariant,
       onClick: () => onNavigate == null ? void 0 : onNavigate(item.id)
     }
   )))));
@@ -5961,6 +5967,7 @@ function QuickActionSidebarNav(_a) {
     brandSubtitle = "Placeholder",
     navSections = DEFAULT_NAV_SECTIONS,
     activeItemId = "inbox",
+    activeVariant = "default",
     onNavigate,
     user = DEFAULT_USER,
     userMenuItems = DEFAULT_USER_MENU,
@@ -5973,6 +5980,7 @@ function QuickActionSidebarNav(_a) {
     "brandSubtitle",
     "navSections",
     "activeItemId",
+    "activeVariant",
     "onNavigate",
     "user",
     "userMenuItems",
@@ -6024,6 +6032,7 @@ function QuickActionSidebarNav(_a) {
           section,
           activeItemId,
           isCollapsed,
+          activeVariant,
           onNavigate
         }
       ));
@@ -9346,7 +9355,8 @@ var DEFAULT_ENTITY_SECTIONS = [
 function PrototypeShell({
   config,
   headerActions,
-  entityPanelChildren
+  entityPanelChildren,
+  onNavigate
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
   const [currentView, setCurrentView] = React52.useState(config.defaultView);
@@ -9365,8 +9375,9 @@ function PrototypeShell({
       if (navigableViews.includes(id)) {
         setCurrentView(id);
       }
+      onNavigate == null ? void 0 : onNavigate(id);
     },
-    [navigableViews]
+    [navigableViews, onNavigate]
   );
   const handleOpenEntityPanel = React52.useCallback(() => setIsEntityPanelOpen(true), []);
   const handleOpenRecentActivity = React52.useCallback(() => {