@tangle-network/ui 11.42.0 → 11.43.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/primitives/compliance-badge.d.ts +62 -0
- package/dist/primitives/compliance-badge.js +58 -0
- package/dist/primitives.d.ts +2 -1
- package/dist/primitives.js +2 -1
- package/package.json +2 -2
- package/src/primitives/compliance-badge.stories.tsx +76 -0
- package/src/primitives/compliance-badge.test.tsx +104 -0
- package/src/primitives/compliance-badge.tsx +139 -0
- package/src/primitives/index.ts +7 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @tangle-network/ui
|
|
2
2
|
|
|
3
|
+
## 11.43.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- aa8a429: Add `ComplianceBadge`, the single compliance claim every public surface renders. It defaults to `status="ready"` ("HIPAA-Ready", outlined); HIPAA's `status="compliant"` ("HIPAA Compliant", filled) is reserved for after the documented launch gate closes per compliance/policies/hipaa-security-program.md. `product="soc2"` consolidates the website's bespoke badge: SOC 2 Type II is an attained audit (compliance/evidence/2026-09-01-final-audit), so its `status="compliant"` copy "SOC 2 Type II" is legitimate to render today, with plain "SOC 2" as the ready form.
|
|
8
|
+
|
|
3
9
|
## 11.42.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -96,6 +96,7 @@ import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
|
|
|
96
96
|
import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
|
|
97
97
|
import { Pagination, PaginationProps } from "./primitives/pagination.js";
|
|
98
98
|
import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
|
|
99
|
+
import { ComplianceBadge, ComplianceBadgeProps, ComplianceProduct, ComplianceStatus } from "./primitives/compliance-badge.js";
|
|
99
100
|
import { Tag, TagProps } from "./primitives/tag.js";
|
|
100
101
|
import { Chip, ChipProps } from "./primitives/chip.js";
|
|
101
102
|
import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/wizard.js";
|
|
@@ -142,4 +143,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
|
|
|
142
143
|
import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
|
|
143
144
|
import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
|
|
144
145
|
import "./redaction.js";
|
|
145
|
-
export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ApiSchema, type ApiSchemaProps, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
|
|
146
|
+
export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ApiSchema, type ApiSchemaProps, AppendUserMessageOptions, ApplySdkEventOptions, ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, ChatAuthor, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, CustomToolRenderer, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, Field, type FieldProps, FileArtifactPane, type FileArtifactPaneProps, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownLinkChip, type MarkdownLinkChipResolver, type MarkdownProps, MessageAuthor, type MessageAuthorProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
|
package/dist/index.js
CHANGED
|
@@ -52,6 +52,7 @@ import { PageHeader } from "./primitives/page-header.js";
|
|
|
52
52
|
import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
|
|
53
53
|
import { Pagination } from "./primitives/pagination.js";
|
|
54
54
|
import { StatusPill } from "./primitives/status-pill.js";
|
|
55
|
+
import { ComplianceBadge } from "./primitives/compliance-badge.js";
|
|
55
56
|
import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
|
|
56
57
|
import { Tag } from "./primitives/tag.js";
|
|
57
58
|
import { Chip } from "./primitives/chip.js";
|
|
@@ -126,4 +127,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
|
|
|
126
127
|
import { copyText } from "./utils/copy-text.js";
|
|
127
128
|
import { timeAgo } from "./utils/time-ago.js";
|
|
128
129
|
import { RedactedDocument } from "./redaction/redacted-document.js";
|
|
129
|
-
export { AgentTimeline, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
|
|
130
|
+
export { AgentTimeline, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ApiSchema, ApprovalCard, ApprovalDiffSummary, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ComplianceBadge, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, Field, FileArtifactPane, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricChart, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, TRANSCRIPT_TEXT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TaskList, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, Wizard, WizardStep, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, codeBlockGrammar, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fenceInfo, fieldMessageId, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, localToday, messagesAtom, normalizeSeries, numericColumns, parseCalendarDate, parseCsv, parseToolEvent, partMapAtom, periodDelta, plainTextFromMarkdown, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, showsTaskPriority, tableCsv, taskProgress, taskStatus, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//#region src/primitives/compliance-badge.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* The one compliance badge every public surface uses, so the claim a page
|
|
5
|
+
* makes is chosen here and nowhere else.
|
|
6
|
+
*
|
|
7
|
+
* Copy discipline is the point of the component. There is NO official HIPAA
|
|
8
|
+
* certification a product can hold, so the badge never says "certified", and
|
|
9
|
+
* it renders "HIPAA Compliant" ONLY when a caller passes `status="compliant"`
|
|
10
|
+
* explicitly. The default — and the only HIPAA state surfaces may ship
|
|
11
|
+
* today — is `status="ready"`, which renders "HIPAA-Ready".
|
|
12
|
+
*
|
|
13
|
+
* For HIPAA, `status="compliant"` is reserved for use AFTER the company's
|
|
14
|
+
* documented launch gate closes: business associate agreements executed AND
|
|
15
|
+
* the infrastructure blockers resolved, per
|
|
16
|
+
* compliance/policies/hipaa-security-program.md. Do not pass it before that
|
|
17
|
+
* gate is confirmed closed in the policy record, whatever a page design
|
|
18
|
+
* suggests.
|
|
19
|
+
*
|
|
20
|
+
* That gate is HIPAA's. SOC 2 Type II is an ATTAINED audit, not a pending
|
|
21
|
+
* one — the final report is on file at
|
|
22
|
+
* compliance/evidence/2026-09-01-final-audit — so for `product="soc2"` the
|
|
23
|
+
* filled `status="compliant"` form, "SOC 2 Type II", is legitimate to render
|
|
24
|
+
* today.
|
|
25
|
+
*
|
|
26
|
+
* The claim is told three ways, matching StatusPill's doctrine: the LABEL
|
|
27
|
+
* text itself ("HIPAA-Ready" vs "HIPAA Compliant"), the FILL (outlined vs
|
|
28
|
+
* filled), and the TONE (the info triple while the gate is open, the success
|
|
29
|
+
* triple once it closes). Each status paints from one matched `--surface-*`
|
|
30
|
+
* token triple, so the text colour is solved against a known plane; the
|
|
31
|
+
* outlined "ready" form keeps the triple's text and border, which clear the
|
|
32
|
+
* 4.5:1 body floor on the page canvas, on a transparent fill.
|
|
33
|
+
*
|
|
34
|
+
* The Tangle mark is decorative: the label already carries the whole claim,
|
|
35
|
+
* so the mark is hidden from the accessibility tree and the badge's own
|
|
36
|
+
* `aria-label` states the claim.
|
|
37
|
+
*/
|
|
38
|
+
export type ComplianceStatus = "ready" | "compliant";
|
|
39
|
+
/**
|
|
40
|
+
* The record is keyed by product so each framework's claim is reviewed copy
|
|
41
|
+
* in one place, not string interpolation at call sites. ISO 27001 slots in
|
|
42
|
+
* the same way when its audit lands.
|
|
43
|
+
*/
|
|
44
|
+
export type ComplianceProduct = "hipaa" | "soc2";
|
|
45
|
+
export interface ComplianceBadgeProps {
|
|
46
|
+
/**
|
|
47
|
+
* Defaults to "ready". For HIPAA, pass "compliant" only after the launch
|
|
48
|
+
* gate closes; for SOC 2 the Type II audit is already attained, so
|
|
49
|
+
* "compliant" is legitimate today.
|
|
50
|
+
*/
|
|
51
|
+
status?: ComplianceStatus;
|
|
52
|
+
product?: ComplianceProduct;
|
|
53
|
+
size?: "sm" | "md";
|
|
54
|
+
/** Renders the badge as a link, e.g. to the trust or compliance page. */
|
|
55
|
+
href?: string;
|
|
56
|
+
className?: string;
|
|
57
|
+
id?: string;
|
|
58
|
+
title?: string;
|
|
59
|
+
}
|
|
60
|
+
declare function ComplianceBadge({ status, product, size, href, className, ...props }: ComplianceBadgeProps): React.JSX.Element;
|
|
61
|
+
//#endregion
|
|
62
|
+
export { ComplianceBadge };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { focusRing } from "../lib/focus.js";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { TangleKnot } from "@tangle-network/brand";
|
|
6
|
+
//#region src/primitives/compliance-badge.tsx
|
|
7
|
+
const PRODUCT_COPY = {
|
|
8
|
+
hipaa: {
|
|
9
|
+
ready: "HIPAA-Ready",
|
|
10
|
+
compliant: "HIPAA Compliant"
|
|
11
|
+
},
|
|
12
|
+
soc2: {
|
|
13
|
+
ready: "SOC 2",
|
|
14
|
+
compliant: "SOC 2 Type II"
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Outlined while a claim is still being earned (info: still moving), filled
|
|
19
|
+
* once it is attained (success: settled). Both draw from ONE matched token
|
|
20
|
+
* triple — no hardcoded colours — so themes repaint the badge like any other
|
|
21
|
+
* surface.
|
|
22
|
+
*/
|
|
23
|
+
const STATUS_SURFACE = {
|
|
24
|
+
ready: "border-[var(--surface-info-border)] bg-transparent text-[var(--surface-info-text)]",
|
|
25
|
+
compliant: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]"
|
|
26
|
+
};
|
|
27
|
+
const SIZE_CLASSES = {
|
|
28
|
+
sm: "px-2 py-0.5 text-xs",
|
|
29
|
+
md: "px-2.5 py-1 text-sm"
|
|
30
|
+
};
|
|
31
|
+
const MARK_SIZE = {
|
|
32
|
+
sm: 12,
|
|
33
|
+
md: 14
|
|
34
|
+
};
|
|
35
|
+
function ComplianceBadge({ status = "ready", product = "hipaa", size = "sm", href, className, ...props }) {
|
|
36
|
+
const label = PRODUCT_COPY[product][status];
|
|
37
|
+
const classes = cn("inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border font-medium", SIZE_CLASSES[size], STATUS_SURFACE[status], href && focusRing, className);
|
|
38
|
+
const mark = /* @__PURE__ */ jsx("span", {
|
|
39
|
+
className: "inline-flex shrink-0",
|
|
40
|
+
"aria-hidden": "true",
|
|
41
|
+
children: /* @__PURE__ */ jsx(TangleKnot, { size: MARK_SIZE[size] })
|
|
42
|
+
});
|
|
43
|
+
if (href) return /* @__PURE__ */ jsxs("a", {
|
|
44
|
+
href,
|
|
45
|
+
"aria-label": label,
|
|
46
|
+
className: classes,
|
|
47
|
+
...props,
|
|
48
|
+
children: [mark, label]
|
|
49
|
+
});
|
|
50
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
51
|
+
"aria-label": label,
|
|
52
|
+
className: classes,
|
|
53
|
+
...props,
|
|
54
|
+
children: [mark, label]
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
//#endregion
|
|
58
|
+
export { ComplianceBadge };
|
package/dist/primitives.d.ts
CHANGED
|
@@ -50,6 +50,7 @@ import { PageHeader, PageHeaderProps } from "./primitives/page-header.js";
|
|
|
50
50
|
import { Alert, AlertDescription, AlertProps, AlertTitle, AlertTone } from "./primitives/alert.js";
|
|
51
51
|
import { Pagination, PaginationProps } from "./primitives/pagination.js";
|
|
52
52
|
import { StatusPill, StatusPillProps, StatusTone } from "./primitives/status-pill.js";
|
|
53
|
+
import { ComplianceBadge, ComplianceBadgeProps, ComplianceProduct, ComplianceStatus } from "./primitives/compliance-badge.js";
|
|
53
54
|
import { Tag, TagProps } from "./primitives/tag.js";
|
|
54
55
|
import { Chip, ChipProps } from "./primitives/chip.js";
|
|
55
56
|
import { Wizard, WizardProps, WizardStep, WizardStepProps } from "./primitives/wizard.js";
|
|
@@ -61,4 +62,4 @@ import { SeriesSparkline, SeriesSparklineProps } from "./primitives/series-spark
|
|
|
61
62
|
import { ChartReferenceLine, MetricChart, MetricChartProps } from "./primitives/metric-chart.js";
|
|
62
63
|
import { FilterField, FilterFieldProps, Toolbar, ToolbarProps } from "./primitives/toolbar.js";
|
|
63
64
|
import { Logo, LogoProps, TangleKnot } from "@tangle-network/brand";
|
|
64
|
-
export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, Field, type FieldProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };
|
|
65
|
+
export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, ArtifactPane, type ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, CATEGORY_TONES, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, type ChartReferenceLine, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ComplianceBadge, type ComplianceBadgeProps, type ComplianceProduct, type ComplianceStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, Field, type FieldProps, FilterField, type FilterFieldProps, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Logo, type LogoProps, Metric, MetricChart, type MetricChartProps, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Pagination, type PaginationProps, type PeriodDelta, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeriesExtent, type SeriesPoint, type SeriesPointInput, type SeriesScale, SeriesSparkline, type SeriesSparklineProps, SettingsList, type SettingsListAction, type SettingsListColumns, SettingsListItem, type SettingsListItemProps, type SettingsListMenuItem, type SettingsListProps, SettingsRow, type SettingsRowLayout, type SettingsRowProps, SettingsSection, type SettingsSectionProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, TimeSelect, type TimeSelectProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, Wizard, type WizardProps, WizardStep, type WizardStepProps, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };
|
package/dist/primitives.js
CHANGED
|
@@ -48,6 +48,7 @@ import { PageHeader } from "./primitives/page-header.js";
|
|
|
48
48
|
import { Alert, AlertDescription, AlertTitle } from "./primitives/alert.js";
|
|
49
49
|
import { Pagination } from "./primitives/pagination.js";
|
|
50
50
|
import { StatusPill } from "./primitives/status-pill.js";
|
|
51
|
+
import { ComplianceBadge } from "./primitives/compliance-badge.js";
|
|
51
52
|
import { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./primitives/tone.js";
|
|
52
53
|
import { Tag } from "./primitives/tag.js";
|
|
53
54
|
import { Chip } from "./primitives/chip.js";
|
|
@@ -61,4 +62,4 @@ import { SeriesSparkline } from "./primitives/series-sparkline.js";
|
|
|
61
62
|
import { MetricChart } from "./primitives/metric-chart.js";
|
|
62
63
|
import { FilterField, Toolbar } from "./primitives/toolbar.js";
|
|
63
64
|
import { Logo, TangleKnot } from "@tangle-network/brand";
|
|
64
|
-
export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, FilterField, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, Input, Label, Logo, Metric, MetricChart, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };
|
|
65
|
+
export { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CATEGORY_TONES, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ComplianceBadge, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, FilterField, Heading, HelpText, HoverCard, HoverCardContent, HoverCardDescription, HoverCardHeader, HoverCardTitle, HoverCardTrigger, IconTile, InlineCode, Input, Label, Logo, Metric, MetricChart, MetricStrip, PageHeader, PageShell, Pagination, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SeriesSparkline, SettingsList, SettingsListItem, SettingsRow, SettingsSection, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, TimeSelect, ToastContainer, ToastProvider, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, Wizard, WizardStep, badgeVariants, buttonVariants, fieldMessageId, formatCalendarDate, initialsOf, localToday, normalizeSeries, parseCalendarDate, periodDelta, seriesAreaPath, seriesExtent, seriesLinePath, seriesMean, seriesScale, toneFor, useTheme, useToast };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tangle-network/ui",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.43.0",
|
|
4
4
|
"description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
"peerDependencies": {
|
|
167
167
|
"@hocuspocus/provider": ">=2.15.0 <5.0.0",
|
|
168
168
|
"@nanostores/react": ">=0.8.4 <3.0.0",
|
|
169
|
-
"@tangle-network/brand": "^1.
|
|
169
|
+
"@tangle-network/brand": "^1.27.0",
|
|
170
170
|
"@tiptap/core": ">=3.20.4 <4.0.0",
|
|
171
171
|
"@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
|
|
172
172
|
"@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react'
|
|
2
|
+
import { ComplianceBadge } from './compliance-badge'
|
|
3
|
+
|
|
4
|
+
const meta: Meta<typeof ComplianceBadge> = {
|
|
5
|
+
title: 'Primitives/ComplianceBadge',
|
|
6
|
+
component: ComplianceBadge,
|
|
7
|
+
parameters: { layout: 'centered' },
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export default meta
|
|
11
|
+
type Story = StoryObj<typeof ComplianceBadge>
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* The default and the only HIPAA state surfaces may ship before the
|
|
15
|
+
* documented launch gate closes. Renders "HIPAA-Ready", outlined, on the
|
|
16
|
+
* info triple.
|
|
17
|
+
*/
|
|
18
|
+
export const Ready: Story = { args: { status: 'ready' } }
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Reserved for after HIPAA's launch gate closes (BAAs executed +
|
|
22
|
+
* infrastructure blockers resolved, per
|
|
23
|
+
* compliance/policies/hipaa-security-program.md). Renders "HIPAA Compliant",
|
|
24
|
+
* filled, on the success triple.
|
|
25
|
+
*/
|
|
26
|
+
export const Compliant: Story = { args: { status: 'compliant' } }
|
|
27
|
+
|
|
28
|
+
export const ReadyMedium: Story = { args: { status: 'ready', size: 'md' } }
|
|
29
|
+
export const CompliantMedium: Story = { args: { status: 'compliant', size: 'md' } }
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* SOC 2 before an attestation: plain "SOC 2", outlined.
|
|
33
|
+
*/
|
|
34
|
+
export const Soc2Ready: Story = { args: { product: 'soc2', status: 'ready' } }
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* SOC 2 Type II is an ATTAINED audit (final report on file at
|
|
38
|
+
* compliance/evidence/2026-09-01-final-audit), so unlike HIPAA's "compliant"
|
|
39
|
+
* this filled form is legitimate to ship today. Renders "SOC 2 Type II".
|
|
40
|
+
*/
|
|
41
|
+
export const Soc2TypeII: Story = { args: { product: 'soc2', status: 'compliant' } }
|
|
42
|
+
|
|
43
|
+
export const Soc2TypeIIMedium: Story = {
|
|
44
|
+
args: { product: 'soc2', status: 'compliant', size: 'md' },
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export const Linked: Story = {
|
|
48
|
+
args: { status: 'ready', href: '/trust' },
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export const AllStates: Story = {
|
|
52
|
+
name: 'All States',
|
|
53
|
+
render: () => (
|
|
54
|
+
<div className="flex flex-col gap-4 p-6">
|
|
55
|
+
<div className="text-muted-foreground text-xs font-mono uppercase tracking-widest">HIPAA</div>
|
|
56
|
+
<div className="flex flex-wrap items-center gap-2">
|
|
57
|
+
<ComplianceBadge status="ready" />
|
|
58
|
+
<ComplianceBadge status="compliant" />
|
|
59
|
+
<ComplianceBadge status="ready" size="md" />
|
|
60
|
+
<ComplianceBadge status="compliant" size="md" />
|
|
61
|
+
</div>
|
|
62
|
+
<div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">SOC 2</div>
|
|
63
|
+
<div className="flex flex-wrap items-center gap-2">
|
|
64
|
+
<ComplianceBadge product="soc2" status="ready" />
|
|
65
|
+
<ComplianceBadge product="soc2" status="compliant" />
|
|
66
|
+
<ComplianceBadge product="soc2" status="ready" size="md" />
|
|
67
|
+
<ComplianceBadge product="soc2" status="compliant" size="md" />
|
|
68
|
+
</div>
|
|
69
|
+
<div className="text-muted-foreground text-xs font-mono uppercase tracking-widest mt-2">Linked</div>
|
|
70
|
+
<div className="flex flex-wrap items-center gap-2">
|
|
71
|
+
<ComplianceBadge status="ready" href="/trust" />
|
|
72
|
+
<ComplianceBadge product="soc2" status="compliant" href="/trust" />
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
),
|
|
76
|
+
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { render, screen } from "@testing-library/react";
|
|
2
|
+
import { describe, expect, it } from "vitest";
|
|
3
|
+
import { ComplianceBadge } from "./compliance-badge";
|
|
4
|
+
|
|
5
|
+
describe("ComplianceBadge", () => {
|
|
6
|
+
// The copy rule the component exists to enforce: there is no official HIPAA
|
|
7
|
+
// certification and the launch gate has not closed, so the unqualified claim
|
|
8
|
+
// must never render unless a caller asks for it explicitly.
|
|
9
|
+
it("defaults to HIPAA-Ready", () => {
|
|
10
|
+
render(<ComplianceBadge />);
|
|
11
|
+
expect(screen.getByLabelText("HIPAA-Ready")).toBeInTheDocument();
|
|
12
|
+
expect(screen.queryByText("HIPAA Compliant")).not.toBeInTheDocument();
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
it("renders HIPAA Compliant only with an explicit compliant status", () => {
|
|
16
|
+
render(<ComplianceBadge status="compliant" />);
|
|
17
|
+
expect(screen.getByLabelText("HIPAA Compliant")).toBeInTheDocument();
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
it("keeps the HIPAA copy exact when a product is given", () => {
|
|
21
|
+
render(<ComplianceBadge product="hipaa" status="ready" />);
|
|
22
|
+
expect(screen.getByLabelText("HIPAA-Ready")).toBeInTheDocument();
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
// SOC 2 Type II is an attained audit (compliance/evidence/2026-09-01-final-audit),
|
|
26
|
+
// so unlike HIPAA the filled claim is legitimate to render today — but still
|
|
27
|
+
// only under an explicit status, with plain "SOC 2" as the default.
|
|
28
|
+
it("defaults soc2 to plain SOC 2", () => {
|
|
29
|
+
render(<ComplianceBadge product="soc2" />);
|
|
30
|
+
expect(screen.getByLabelText("SOC 2")).toBeInTheDocument();
|
|
31
|
+
expect(screen.queryByText("SOC 2 Type II")).not.toBeInTheDocument();
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
it("renders SOC 2 Type II with an explicit compliant status", () => {
|
|
35
|
+
render(<ComplianceBadge product="soc2" status="compliant" />);
|
|
36
|
+
expect(screen.getByLabelText("SOC 2 Type II")).toBeInTheDocument();
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
it("fills the attained SOC 2 claim like any compliant status", () => {
|
|
40
|
+
const { container } = render(
|
|
41
|
+
<ComplianceBadge product="soc2" status="compliant" />,
|
|
42
|
+
);
|
|
43
|
+
const badge = container.firstElementChild as HTMLElement;
|
|
44
|
+
expect(badge.className).toContain("bg-[var(--surface-success-bg)]");
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
it("never says certified", () => {
|
|
48
|
+
const { container } = render(<ComplianceBadge status="compliant" />);
|
|
49
|
+
expect(container.textContent).not.toMatch(/certif/i);
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
it("outlines ready and fills compliant, each from one surface token triple", () => {
|
|
53
|
+
const { container: ready } = render(<ComplianceBadge status="ready" />);
|
|
54
|
+
const readyBadge = ready.firstElementChild as HTMLElement;
|
|
55
|
+
expect(readyBadge.className).toContain("bg-transparent");
|
|
56
|
+
expect(readyBadge.className).toContain("border-[var(--surface-info-border)]");
|
|
57
|
+
expect(readyBadge.className).toContain("text-[var(--surface-info-text)]");
|
|
58
|
+
|
|
59
|
+
const { container: compliant } = render(
|
|
60
|
+
<ComplianceBadge status="compliant" />,
|
|
61
|
+
);
|
|
62
|
+
const compliantBadge = compliant.firstElementChild as HTMLElement;
|
|
63
|
+
expect(compliantBadge.className).toContain(
|
|
64
|
+
"bg-[var(--surface-success-bg)]",
|
|
65
|
+
);
|
|
66
|
+
expect(compliantBadge.className).toContain(
|
|
67
|
+
"text-[var(--surface-success-text)]",
|
|
68
|
+
);
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
it("paints no hardcoded colours", () => {
|
|
72
|
+
const { container } = render(<ComplianceBadge status="compliant" />);
|
|
73
|
+
const badge = container.firstElementChild as HTMLElement;
|
|
74
|
+
expect(badge.className).not.toMatch(
|
|
75
|
+
/(?:bg|text|border)-(?:green|blue|red|amber|emerald)-/,
|
|
76
|
+
);
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
// The mark is decorative; the label carries the whole claim, so announcing
|
|
80
|
+
// both would say the same thing twice.
|
|
81
|
+
it("hides the brand mark from the accessibility tree", () => {
|
|
82
|
+
const { container } = render(<ComplianceBadge />);
|
|
83
|
+
const mark = container.querySelector("svg");
|
|
84
|
+
expect(mark).not.toBeNull();
|
|
85
|
+
expect(mark?.closest('[aria-hidden="true"]')).not.toBeNull();
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
it("renders as a link when href is given", () => {
|
|
89
|
+
render(<ComplianceBadge href="/trust" />);
|
|
90
|
+
const link = screen.getByRole("link", { name: "HIPAA-Ready" });
|
|
91
|
+
expect(link).toHaveAttribute("href", "/trust");
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
it("renders as a span without href", () => {
|
|
95
|
+
const { container } = render(<ComplianceBadge />);
|
|
96
|
+
expect(container.firstElementChild?.tagName).toBe("SPAN");
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
it.each(["sm", "md"] as const)("takes the %s size", (size) => {
|
|
100
|
+
const { container } = render(<ComplianceBadge size={size} />);
|
|
101
|
+
const badge = container.firstElementChild as HTMLElement;
|
|
102
|
+
expect(badge.className).toContain(size === "sm" ? "text-xs" : "text-sm");
|
|
103
|
+
});
|
|
104
|
+
});
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { TangleKnot } from "@tangle-network/brand";
|
|
3
|
+
import { focusRing } from "../lib/focus";
|
|
4
|
+
import { cn } from "../lib/utils";
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* The one compliance badge every public surface uses, so the claim a page
|
|
8
|
+
* makes is chosen here and nowhere else.
|
|
9
|
+
*
|
|
10
|
+
* Copy discipline is the point of the component. There is NO official HIPAA
|
|
11
|
+
* certification a product can hold, so the badge never says "certified", and
|
|
12
|
+
* it renders "HIPAA Compliant" ONLY when a caller passes `status="compliant"`
|
|
13
|
+
* explicitly. The default — and the only HIPAA state surfaces may ship
|
|
14
|
+
* today — is `status="ready"`, which renders "HIPAA-Ready".
|
|
15
|
+
*
|
|
16
|
+
* For HIPAA, `status="compliant"` is reserved for use AFTER the company's
|
|
17
|
+
* documented launch gate closes: business associate agreements executed AND
|
|
18
|
+
* the infrastructure blockers resolved, per
|
|
19
|
+
* compliance/policies/hipaa-security-program.md. Do not pass it before that
|
|
20
|
+
* gate is confirmed closed in the policy record, whatever a page design
|
|
21
|
+
* suggests.
|
|
22
|
+
*
|
|
23
|
+
* That gate is HIPAA's. SOC 2 Type II is an ATTAINED audit, not a pending
|
|
24
|
+
* one — the final report is on file at
|
|
25
|
+
* compliance/evidence/2026-09-01-final-audit — so for `product="soc2"` the
|
|
26
|
+
* filled `status="compliant"` form, "SOC 2 Type II", is legitimate to render
|
|
27
|
+
* today.
|
|
28
|
+
*
|
|
29
|
+
* The claim is told three ways, matching StatusPill's doctrine: the LABEL
|
|
30
|
+
* text itself ("HIPAA-Ready" vs "HIPAA Compliant"), the FILL (outlined vs
|
|
31
|
+
* filled), and the TONE (the info triple while the gate is open, the success
|
|
32
|
+
* triple once it closes). Each status paints from one matched `--surface-*`
|
|
33
|
+
* token triple, so the text colour is solved against a known plane; the
|
|
34
|
+
* outlined "ready" form keeps the triple's text and border, which clear the
|
|
35
|
+
* 4.5:1 body floor on the page canvas, on a transparent fill.
|
|
36
|
+
*
|
|
37
|
+
* The Tangle mark is decorative: the label already carries the whole claim,
|
|
38
|
+
* so the mark is hidden from the accessibility tree and the badge's own
|
|
39
|
+
* `aria-label` states the claim.
|
|
40
|
+
*/
|
|
41
|
+
export type ComplianceStatus = "ready" | "compliant";
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* The record is keyed by product so each framework's claim is reviewed copy
|
|
45
|
+
* in one place, not string interpolation at call sites. ISO 27001 slots in
|
|
46
|
+
* the same way when its audit lands.
|
|
47
|
+
*/
|
|
48
|
+
export type ComplianceProduct = "hipaa" | "soc2";
|
|
49
|
+
|
|
50
|
+
export interface ComplianceBadgeProps {
|
|
51
|
+
/**
|
|
52
|
+
* Defaults to "ready". For HIPAA, pass "compliant" only after the launch
|
|
53
|
+
* gate closes; for SOC 2 the Type II audit is already attained, so
|
|
54
|
+
* "compliant" is legitimate today.
|
|
55
|
+
*/
|
|
56
|
+
status?: ComplianceStatus;
|
|
57
|
+
product?: ComplianceProduct;
|
|
58
|
+
size?: "sm" | "md";
|
|
59
|
+
/** Renders the badge as a link, e.g. to the trust or compliance page. */
|
|
60
|
+
href?: string;
|
|
61
|
+
className?: string;
|
|
62
|
+
id?: string;
|
|
63
|
+
title?: string;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
const PRODUCT_COPY: Record<
|
|
67
|
+
ComplianceProduct,
|
|
68
|
+
Record<ComplianceStatus, string>
|
|
69
|
+
> = {
|
|
70
|
+
hipaa: {
|
|
71
|
+
ready: "HIPAA-Ready",
|
|
72
|
+
compliant: "HIPAA Compliant",
|
|
73
|
+
},
|
|
74
|
+
soc2: {
|
|
75
|
+
ready: "SOC 2",
|
|
76
|
+
compliant: "SOC 2 Type II",
|
|
77
|
+
},
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* Outlined while a claim is still being earned (info: still moving), filled
|
|
82
|
+
* once it is attained (success: settled). Both draw from ONE matched token
|
|
83
|
+
* triple — no hardcoded colours — so themes repaint the badge like any other
|
|
84
|
+
* surface.
|
|
85
|
+
*/
|
|
86
|
+
const STATUS_SURFACE: Record<ComplianceStatus, string> = {
|
|
87
|
+
ready:
|
|
88
|
+
"border-[var(--surface-info-border)] bg-transparent text-[var(--surface-info-text)]",
|
|
89
|
+
compliant:
|
|
90
|
+
"border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
const SIZE_CLASSES = {
|
|
94
|
+
sm: "px-2 py-0.5 text-xs",
|
|
95
|
+
md: "px-2.5 py-1 text-sm",
|
|
96
|
+
} as const;
|
|
97
|
+
|
|
98
|
+
const MARK_SIZE = { sm: 12, md: 14 } as const;
|
|
99
|
+
|
|
100
|
+
function ComplianceBadge({
|
|
101
|
+
status = "ready",
|
|
102
|
+
product = "hipaa",
|
|
103
|
+
size = "sm",
|
|
104
|
+
href,
|
|
105
|
+
className,
|
|
106
|
+
...props
|
|
107
|
+
}: ComplianceBadgeProps) {
|
|
108
|
+
const label = PRODUCT_COPY[product][status];
|
|
109
|
+
const classes = cn(
|
|
110
|
+
"inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border font-medium",
|
|
111
|
+
SIZE_CLASSES[size],
|
|
112
|
+
STATUS_SURFACE[status],
|
|
113
|
+
href && focusRing,
|
|
114
|
+
className,
|
|
115
|
+
);
|
|
116
|
+
const mark = (
|
|
117
|
+
<span className="inline-flex shrink-0" aria-hidden="true">
|
|
118
|
+
<TangleKnot size={MARK_SIZE[size]} />
|
|
119
|
+
</span>
|
|
120
|
+
);
|
|
121
|
+
|
|
122
|
+
if (href) {
|
|
123
|
+
return (
|
|
124
|
+
<a href={href} aria-label={label} className={classes} {...props}>
|
|
125
|
+
{mark}
|
|
126
|
+
{label}
|
|
127
|
+
</a>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
return (
|
|
132
|
+
<span aria-label={label} className={classes} {...props}>
|
|
133
|
+
{mark}
|
|
134
|
+
{label}
|
|
135
|
+
</span>
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
export { ComplianceBadge };
|
package/src/primitives/index.ts
CHANGED
|
@@ -227,6 +227,13 @@ export type { PaginationProps } from "./pagination";
|
|
|
227
227
|
export { StatusPill } from "./status-pill";
|
|
228
228
|
export type { StatusPillProps, StatusTone } from "./status-pill";
|
|
229
229
|
|
|
230
|
+
export { ComplianceBadge } from "./compliance-badge";
|
|
231
|
+
export type {
|
|
232
|
+
ComplianceBadgeProps,
|
|
233
|
+
ComplianceProduct,
|
|
234
|
+
ComplianceStatus,
|
|
235
|
+
} from "./compliance-badge";
|
|
236
|
+
|
|
230
237
|
export { Tag } from "./tag";
|
|
231
238
|
export type { TagProps } from "./tag";
|
|
232
239
|
|