@togo-framework/ui 0.1.0 → 0.1.2
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/README.md +38 -7
- package/dist/index.d.ts +49 -1
- package/dist/index.js +141 -4
- package/dist/index.js.map +1 -1
- package/dist/shadcn.css +11 -10
- package/dist/styles.css +11 -10
- package/package.json +1 -1
- package/public/togo-storybook-logo.svg +13 -0
package/README.md
CHANGED
|
@@ -1,25 +1,43 @@
|
|
|
1
|
-
|
|
1
|
+
<!-- togo-brand -->
|
|
2
|
+
<p align="center">
|
|
3
|
+
<img src=".github/assets/togo-mark.svg" width="96" alt="togo" />
|
|
4
|
+
</p>
|
|
5
|
+
<h1 align="center">@togo-framework/ui</h1>
|
|
6
|
+
<p align="center"><sub>part of the <a href="https://github.com/togo-framework">togo-framework</a> — the full-stack Go + React framework</sub></p>
|
|
2
7
|
|
|
3
|
-
The togo **
|
|
4
|
-
|
|
5
|
-
|
|
8
|
+
The togo **design system** — a fully token-driven, runtime-themeable admin + auth component
|
|
9
|
+
library. Framework-agnostic (no Next.js / data-fetching coupling), **RTL-ready**, and carrying
|
|
10
|
+
the official **ToGO brand** (Gopher Cyan → Cobalt). Self-hosts the brand fonts (Sora / IBM Plex
|
|
11
|
+
Sans / JetBrains Mono) + **Lusail** for Arabic.
|
|
6
12
|
|
|
7
13
|
```bash
|
|
8
|
-
npm
|
|
14
|
+
npm install @togo-framework/ui lucide-react
|
|
9
15
|
```
|
|
10
16
|
|
|
11
17
|
```tsx
|
|
12
18
|
import "@togo-framework/ui/styles.css";
|
|
13
|
-
import {
|
|
19
|
+
import { ThemeProvider, Button, StatCard, DataTable } from "@togo-framework/ui";
|
|
20
|
+
|
|
21
|
+
// ThemeProvider switches dark/light at runtime (data-theme on <html>, persisted).
|
|
22
|
+
// Pass `overrides` to re-brand per app with zero source edits.
|
|
23
|
+
export default () => (
|
|
24
|
+
<ThemeProvider theme="dark">
|
|
25
|
+
<Button>Ship it</Button>
|
|
26
|
+
</ThemeProvider>
|
|
27
|
+
);
|
|
14
28
|
```
|
|
15
29
|
|
|
16
30
|
Then copy the package's `public/fonts` into your app's served root, and add the package
|
|
17
31
|
to your Tailwind v4 content so its utility classes are generated:
|
|
18
32
|
|
|
19
33
|
```css
|
|
20
|
-
/* app.css */ @import "tailwindcss"; @source "../node_modules/@togo-framework/ui/dist";
|
|
34
|
+
/* app.css */ @import "tailwindcss"; @import "@togo-framework/ui/styles.css"; @source "../node_modules/@togo-framework/ui/dist";
|
|
21
35
|
```
|
|
22
36
|
|
|
37
|
+
**SSR (no flash):** inline `themeInitScript` in `<head>` so the theme is set before paint —
|
|
38
|
+
`import { themeInitScript } from "@togo-framework/ui/theme"`. See the Storybook **Design System →
|
|
39
|
+
Theming** page for `overrides` + adding tenant themes.
|
|
40
|
+
|
|
23
41
|
## Components
|
|
24
42
|
|
|
25
43
|
| Group | Components |
|
|
@@ -43,3 +61,16 @@ npm run build # emit dist/ (ESM + types + styles.css)
|
|
|
43
61
|
```
|
|
44
62
|
|
|
45
63
|
MIT.
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
## 💎 Premium sponsors
|
|
69
|
+
|
|
70
|
+
togo is proudly sponsored by **ID8 Media** and **One Studio**.
|
|
71
|
+
|
|
72
|
+
<p align="center">
|
|
73
|
+
<a href="https://id8media.com"><img src=".github/assets/id8media.svg" height="44" alt="ID8 Media" /></a>
|
|
74
|
+
|
|
75
|
+
<a href="https://one-studio.co"><img src=".github/assets/one-studio.jpeg" height="44" alt="One Studio" /></a>
|
|
76
|
+
</p>
|
package/dist/index.d.ts
CHANGED
|
@@ -1519,6 +1519,9 @@ interface PluginCatalogEntry {
|
|
|
1519
1519
|
last_active_at: string | null;
|
|
1520
1520
|
activity_count: number | null;
|
|
1521
1521
|
activity_series: ActivityBucket[] | null;
|
|
1522
|
+
/** Optional override for the counter's label (e.g. "downloads", "stars").
|
|
1523
|
+
* When set, it replaces the plugin_type-derived default ("records"). */
|
|
1524
|
+
metric_label?: string | null;
|
|
1522
1525
|
route: string | null;
|
|
1523
1526
|
}
|
|
1524
1527
|
interface SparklinePoint {
|
|
@@ -1852,6 +1855,8 @@ interface PluginActivitySummary {
|
|
|
1852
1855
|
activity_series?: {
|
|
1853
1856
|
n: number;
|
|
1854
1857
|
}[];
|
|
1858
|
+
/** Optional override for the counter's label (e.g. "downloads"); replaces the default ("records"). */
|
|
1859
|
+
metric_label?: string | null;
|
|
1855
1860
|
}
|
|
1856
1861
|
interface PluginDetailLayoutProps {
|
|
1857
1862
|
/** Ordered tab list. */
|
|
@@ -3869,4 +3874,47 @@ declare const AgentSteps: {
|
|
|
3869
3874
|
displayName: string;
|
|
3870
3875
|
};
|
|
3871
3876
|
|
|
3872
|
-
|
|
3877
|
+
interface EyebrowProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
3878
|
+
icon?: LucideIcon;
|
|
3879
|
+
}
|
|
3880
|
+
declare function Eyebrow({ icon: Icon, className, children, ...rest }: EyebrowProps): React$1.JSX.Element;
|
|
3881
|
+
declare namespace Eyebrow {
|
|
3882
|
+
var displayName: string;
|
|
3883
|
+
}
|
|
3884
|
+
interface SectionHeadingProps {
|
|
3885
|
+
eyebrow?: React$1.ReactNode;
|
|
3886
|
+
eyebrowIcon?: LucideIcon;
|
|
3887
|
+
title: React$1.ReactNode;
|
|
3888
|
+
subtitle?: React$1.ReactNode;
|
|
3889
|
+
align?: "left" | "center";
|
|
3890
|
+
className?: string;
|
|
3891
|
+
}
|
|
3892
|
+
declare function SectionHeading({ eyebrow, eyebrowIcon, title, subtitle, align, className }: SectionHeadingProps): React$1.JSX.Element;
|
|
3893
|
+
declare namespace SectionHeading {
|
|
3894
|
+
var displayName: string;
|
|
3895
|
+
}
|
|
3896
|
+
interface FeatureCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
3897
|
+
icon?: LucideIcon;
|
|
3898
|
+
title: React$1.ReactNode;
|
|
3899
|
+
}
|
|
3900
|
+
declare function FeatureCard({ icon: Icon, title, children, className, ...rest }: FeatureCardProps): React$1.JSX.Element;
|
|
3901
|
+
declare namespace FeatureCard {
|
|
3902
|
+
var displayName: string;
|
|
3903
|
+
}
|
|
3904
|
+
interface CodeShowcaseTab {
|
|
3905
|
+
key: string;
|
|
3906
|
+
label: string;
|
|
3907
|
+
lang?: string;
|
|
3908
|
+
file?: string;
|
|
3909
|
+
code: string;
|
|
3910
|
+
}
|
|
3911
|
+
interface CodeShowcaseProps {
|
|
3912
|
+
tabs: CodeShowcaseTab[];
|
|
3913
|
+
className?: string;
|
|
3914
|
+
}
|
|
3915
|
+
declare function CodeShowcase({ tabs, className }: CodeShowcaseProps): React$1.JSX.Element;
|
|
3916
|
+
declare namespace CodeShowcase {
|
|
3917
|
+
var displayName: string;
|
|
3918
|
+
}
|
|
3919
|
+
|
|
3920
|
+
export { type A2UIActionItem, type A2UIActionsData, type A2UIArtifact$1 as A2UIArtifact, type A2UICardData, type A2UICardField, type A2UIChartData, type A2UIChartSeries, type A2UIClientCandidate, type A2UIClientCandidatesData, type A2UIClientDiffConfirmData, type A2UIClientDiffRow, type A2UIClientField, type A2UIClientFieldPickerData, type A2UIKind, type A2UIMarkdownData, type A2UIPersonaStarter, type A2UIPersonaStartersData, type A2UITableColumn, type A2UITableData, type ActivityBucket, AdminLayout, type AdminLayoutProps, type AdminSubNavItem, AgentSteps, type AlertMapItem, type AlertSeverity, type AppBrand, AppHeader, type AppHeaderProps, AppLayout, type AppLayoutProps, type AppNavGroup, type AppNavItem, AppPageShell, type AppPageShellProps, AppSidebar, type AppSidebarProps, type AppearanceMode, ArtifactActions, type ArtifactActionsProps, ArtifactCard, type ArtifactCardProps, ArtifactChart, type ArtifactChartProps, ArtifactClientCandidates, type ArtifactClientCandidatesProps, ArtifactClientDiffConfirm, type ArtifactClientDiffConfirmProps, ArtifactClientFieldPicker, type ArtifactClientFieldPickerProps, type ArtifactInteraction, ArtifactMarkdown, type ArtifactMarkdownProps, ArtifactPersonaStarters, type ArtifactPersonaStartersProps, ArtifactRenderer, type ArtifactRendererProps, ArtifactTable, type ArtifactTableProps, ArtifactViewer, AuthCard, type AuthCardBrand, type AuthClient, AuthErrorAlert, AuthFlow, type AuthLayout, AuthStepHeader, type BarPoint, type CardFilter, CardGrid, type CardGridLabels, ChatThread, CodeBlock, CodeShowcase, type CodeShowcaseProps, type CodeShowcaseTab, ColorPicker, type ColorPickerProps, ContextualSkeleton, type CopilotClient, type CopilotEvent, CopilotLauncher, CopilotProvider, type CopilotQuickAction, type CopilotRequest, CopilotSelectionTrigger, type CopilotSelectionTriggerProps, DEFAULT_LAYERS, DEFAULT_LEGEND_GROUPS, DEFAULT_REGION_PRESETS, DataState, type DataStateLabels, type DataStateProps, DataTable, type DataTableBulkAction, type DataTableColumnFilter, type DataTableColumnMeta, type DataTableDensity, type DataTableFilterType, type DataTableLanguage, type DataTableProps, type DataTableSelectOption, type DataTableServerCallbacks, type DataTableServerState, type DockPosition, DynamicIcon, DynamicSection, type DynamicSectionProps, EmptyState, type EmptyStateProps, EntityNetworkGraph, type EntityNetworkGraphProps, type ErrorFilter, ErrorTrackingPage, type ErrorTrackingPageProps, EventMapPanel, type EventMapPanelProps, Eyebrow, type EyebrowProps, FeatureCard, type FeatureCardProps, type FeedbackAttachment, FeedbackButton, type FeedbackButtonProps, FeedbackHub, type FeedbackHubProps, type FeedbackItem, type FeedbackKind, FeedbackWidget, type FeedbackWidgetProps, ForgotForm, type GraphLink, type GraphNode, IconPicker, type IconPickerProps, type Issue$1 as Issue, type IssueAssignee, type IssueBreadcrumb, IssueDetail, type IssueDetailProps, type IssueLevel, type IssueSort, type IssueTag, IssuesList, type IssuesListProps, LANG_COOKIE_NAME, type LanguageContextValue, LanguageProvider, type LanguageProviderProps, type LegendGroup, type LegendItem, type LegendShapeType, LockScreen, type LockScreenProps, type LockScreenUser, type LogLevel, LoginForm, type LoginResult, Logo, type LogoProps, type LogoTone, type LogoVariant, type LogsFilter, LogsView, type LogsViewProps, MARKER_COLORS, MARKER_LABELS, type MapLayer, MapLayersPanel, type MapLayersPanelProps, MapLegend, type MapLegendProps, type MapMarker$1 as MapMarker, type MapMarkerType, MapPanel, type MapPanelProps, type MapRegionPreset, MapView, type MapViewProps, MarkdownContent, MarkdownEditor, type MarkdownEditorProps, MarkdownRenderer, type MarkdownRendererProps, MarkdownTable, type MarkdownView, MiniBarChart, type ModelOption, MotorFeedbackLauncher, type MotorFeedbackLauncherProps, NestedStepsEditor, type NestedStepsEditorProps, NetworkGraph, type NetworkGraphProps, type NewFeedback, OTPBoxGroup, type OtpResult, PIPELINE_STAGES, PageHeader, type PageHeaderProps, PasswordInput, PasswordLockScreen, type PasswordLockScreenProps, type PasswordLockScreenUser, type PasswordRule, PasswordStrengthMeter, type PickedLocation, type PipelineCard, type PipelineLane, type PipelineModel, type PluginActivitySummary, type PluginAppearanceFields, PluginAppearanceSection, type PluginAppearanceSectionProps, PluginCard, type PluginCatalogEntry, type PluginDetailIdentity, PluginDetailLayout, type PluginDetailLayoutProps, type PluginDetailTab, PluginHero, PluginHeroSkeleton, PluginPageHeader, PluginSectionCard, PluginSparkline, type ProfileSession, ProfileView, type ProfileViewProps, type RenderMapContext, ResetForm, type ResolvedIcon, RouteProgress, type RouteProgressProps, STEP_FIELD_REGISTRY, SectionBoard, type SectionBoardProps, SectionHeading, type SectionHeadingProps, type SectionModel, SectionSkeleton, SentraLoading, type ServiceLogRow, ServiceUnavailable, type ServiceUnavailableProps, SessionExpired, type SessionExpiredProps, SeverityChip, type SidebarConversation, type SidebarUser, SourceBadge, type SparklinePoint, type StackFrame, type StackFrameContextLine, StatCard, type StatCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, type Step, type StepFieldDef, type StepFieldType, type StepMetrics7d, StepOptionsDialog, type StepOptionsDialogProps, StreamingMessage, type TestRunCallbacks, type TestRunCompletePayload, TestRunPanel, type TestRunPanelProps, type TestRunSavedItem, type TestRunStep, TwoFAForm, UnifiedCopilotDock, type UnlockCredentials, type Verify2FAResult, type View, ViewToggle, type ViewToggleProps, Wordmark, type WordmarkProps, Workflow, WorkflowEditor, type WorkflowEditorProps, type WorkflowPalette, WorkflowPipeline, type WorkflowPipelineProps, type WorkflowProps, type WorkflowSource, type WorkflowStep, type WorkflowStepLike, WorkflowStepNode, type WorkflowStepNodeProps, type WorkflowView, cn, computeRules, computeScore, feedbackButtonVariants, levelTone, resolveIcon, statValueVariants, statusBadgeVariants, useCopilot, useLanguage, useT };
|
package/dist/index.js
CHANGED
|
@@ -5815,7 +5815,7 @@ var PluginCard = ({
|
|
|
5815
5815
|
const lastActiveISO = plugin.last_active_at ?? null;
|
|
5816
5816
|
const state = activityState(lastActiveISO);
|
|
5817
5817
|
const stateClasses = STATE_CLASSES[state];
|
|
5818
|
-
const countLabelText = countLabel(rawTypeKey, isRTL);
|
|
5818
|
+
const countLabelText = plugin.metric_label || countLabel(rawTypeKey, isRTL);
|
|
5819
5819
|
const seriesData = useMemo6(() => {
|
|
5820
5820
|
const series = plugin.activity_series ?? [];
|
|
5821
5821
|
if (series.length === 0) {
|
|
@@ -8935,7 +8935,7 @@ var PluginHero = ({ plugin, activity, isRTL }) => {
|
|
|
8935
8935
|
] }),
|
|
8936
8936
|
/* @__PURE__ */ jsxs47("div", { className: "flex-none w-full lg:w-72 rounded-lg border border-border/70 bg-muted/20 overflow-hidden", children: [
|
|
8937
8937
|
/* @__PURE__ */ jsxs47("div", { className: "px-4 pt-3 pb-1", children: [
|
|
8938
|
-
/* @__PURE__ */ jsx53("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: countLabel2(typeKey, isRTL) }),
|
|
8938
|
+
/* @__PURE__ */ jsx53("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: activity?.metric_label || countLabel2(typeKey, isRTL) }),
|
|
8939
8939
|
/* @__PURE__ */ jsx53("div", { className: "text-3xl font-semibold text-foreground leading-tight", title: String(activityCount), children: formatCount2(activityCount) })
|
|
8940
8940
|
] }),
|
|
8941
8941
|
/* @__PURE__ */ jsx53("div", { className: "h-16 w-full", children: /* @__PURE__ */ jsx53(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs47(AreaChart2, { data: seriesData, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [
|
|
@@ -10914,7 +10914,60 @@ import ReactMarkdown from "react-markdown";
|
|
|
10914
10914
|
import remarkGfm from "remark-gfm";
|
|
10915
10915
|
import rehypeHighlight from "rehype-highlight";
|
|
10916
10916
|
import { Copy, Check as Check5, ImageDown } from "lucide-react";
|
|
10917
|
+
import hljs from "highlight.js/lib/core";
|
|
10918
|
+
import hlBash from "highlight.js/lib/languages/bash";
|
|
10919
|
+
import hlGo from "highlight.js/lib/languages/go";
|
|
10920
|
+
import hlTs from "highlight.js/lib/languages/typescript";
|
|
10921
|
+
import hlJs from "highlight.js/lib/languages/javascript";
|
|
10922
|
+
import hlJson from "highlight.js/lib/languages/json";
|
|
10923
|
+
import hlYaml from "highlight.js/lib/languages/yaml";
|
|
10924
|
+
import hlSql from "highlight.js/lib/languages/sql";
|
|
10925
|
+
import hlGraphql from "highlight.js/lib/languages/graphql";
|
|
10926
|
+
import hlPwsh from "highlight.js/lib/languages/powershell";
|
|
10927
|
+
import hlDockerfile from "highlight.js/lib/languages/dockerfile";
|
|
10917
10928
|
import { Fragment as Fragment18, jsx as jsx69, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
10929
|
+
var HL_LANGS = {
|
|
10930
|
+
bash: hlBash,
|
|
10931
|
+
go: hlGo,
|
|
10932
|
+
typescript: hlTs,
|
|
10933
|
+
javascript: hlJs,
|
|
10934
|
+
json: hlJson,
|
|
10935
|
+
yaml: hlYaml,
|
|
10936
|
+
sql: hlSql,
|
|
10937
|
+
graphql: hlGraphql,
|
|
10938
|
+
powershell: hlPwsh,
|
|
10939
|
+
dockerfile: hlDockerfile
|
|
10940
|
+
};
|
|
10941
|
+
for (const [name, def] of Object.entries(HL_LANGS)) {
|
|
10942
|
+
try {
|
|
10943
|
+
if (!hljs.getLanguage(name)) hljs.registerLanguage(name, def);
|
|
10944
|
+
} catch {
|
|
10945
|
+
}
|
|
10946
|
+
}
|
|
10947
|
+
var HL_ALIAS = {
|
|
10948
|
+
sh: "bash",
|
|
10949
|
+
shell: "bash",
|
|
10950
|
+
zsh: "bash",
|
|
10951
|
+
console: "bash",
|
|
10952
|
+
ts: "typescript",
|
|
10953
|
+
tsx: "typescript",
|
|
10954
|
+
js: "javascript",
|
|
10955
|
+
jsx: "javascript",
|
|
10956
|
+
mjs: "javascript",
|
|
10957
|
+
yml: "yaml",
|
|
10958
|
+
ps: "powershell",
|
|
10959
|
+
ps1: "powershell",
|
|
10960
|
+
gql: "graphql",
|
|
10961
|
+
docker: "dockerfile"
|
|
10962
|
+
};
|
|
10963
|
+
function highlightToHtml(code, lang) {
|
|
10964
|
+
const key = lang ? HL_ALIAS[lang] ?? lang : void 0;
|
|
10965
|
+
try {
|
|
10966
|
+
if (key && hljs.getLanguage(key)) return hljs.highlight(code, { language: key }).value;
|
|
10967
|
+
} catch {
|
|
10968
|
+
}
|
|
10969
|
+
return null;
|
|
10970
|
+
}
|
|
10918
10971
|
function hastText(node) {
|
|
10919
10972
|
if (!node) return "";
|
|
10920
10973
|
if (node.type === "text") return node.value ?? "";
|
|
@@ -10982,7 +11035,9 @@ function CodeBlock({ lang, children }) {
|
|
|
10982
11035
|
a.download = `code.${lang || "txt"}.png`;
|
|
10983
11036
|
a.click();
|
|
10984
11037
|
};
|
|
10985
|
-
|
|
11038
|
+
const raw = typeof children === "string" ? children : Array.isArray(children) && children.every((c) => typeof c === "string") ? children.join("") : null;
|
|
11039
|
+
const html = raw != null ? highlightToHtml(raw.replace(/\n$/, ""), lang) : null;
|
|
11040
|
+
return /* @__PURE__ */ jsxs60("div", { className: "tg-code my-3 overflow-hidden rounded-lg border border-border", children: [
|
|
10986
11041
|
/* @__PURE__ */ jsxs60("div", { className: "flex items-center justify-between border-b border-border bg-muted/60 px-3 py-1.5", children: [
|
|
10987
11042
|
/* @__PURE__ */ jsx69("span", { className: "font-mono text-xs text-muted-foreground", children: lang || "code" }),
|
|
10988
11043
|
/* @__PURE__ */ jsxs60("span", { className: "flex items-center gap-1", children: [
|
|
@@ -10996,7 +11051,7 @@ function CodeBlock({ lang, children }) {
|
|
|
10996
11051
|
] })
|
|
10997
11052
|
] })
|
|
10998
11053
|
] }),
|
|
10999
|
-
/* @__PURE__ */ jsx69("div", { ref: boxRef, className: "bg-muted/40 p-3", children: /* @__PURE__ */ jsx69("pre", { dir: "ltr", className: "overflow-x-auto text-[0.8rem] leading-relaxed [&>code]:bg-transparent [&>code]:p-0", children: /* @__PURE__ */ jsx69("code", { ref: codeRef, className: cn("hljs", lang && `language-${lang}`), children }) }) })
|
|
11054
|
+
/* @__PURE__ */ jsx69("div", { ref: boxRef, className: "bg-muted/40 p-3", children: /* @__PURE__ */ jsx69("pre", { dir: "ltr", className: "overflow-x-auto text-[0.8rem] leading-relaxed [&>code]:bg-transparent [&>code]:p-0", children: html != null ? /* @__PURE__ */ jsx69("code", { ref: codeRef, className: cn("hljs", lang && `language-${lang}`), dangerouslySetInnerHTML: { __html: html } }) : /* @__PURE__ */ jsx69("code", { ref: codeRef, className: cn("hljs", lang && `language-${lang}`), children }) }) })
|
|
11000
11055
|
] });
|
|
11001
11056
|
}
|
|
11002
11057
|
var _mermaidPromise = null;
|
|
@@ -15758,6 +15813,84 @@ var ChatThread = ({
|
|
|
15758
15813
|
};
|
|
15759
15814
|
ChatThread.displayName = "ChatThread";
|
|
15760
15815
|
var ChatThread_default = ChatThread;
|
|
15816
|
+
|
|
15817
|
+
// src/components/marketing/Marketing.tsx
|
|
15818
|
+
import * as React28 from "react";
|
|
15819
|
+
import { jsx as jsx97, jsxs as jsxs85 } from "react/jsx-runtime";
|
|
15820
|
+
var DISPLAY = { fontFamily: '"Sora", var(--togo-font-body, ui-sans-serif, system-ui, sans-serif)' };
|
|
15821
|
+
function Eyebrow({ icon: Icon, className, children, ...rest }) {
|
|
15822
|
+
return /* @__PURE__ */ jsxs85(
|
|
15823
|
+
"div",
|
|
15824
|
+
{
|
|
15825
|
+
className: cn(
|
|
15826
|
+
"flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.18em] text-[hsl(var(--primary))]",
|
|
15827
|
+
className
|
|
15828
|
+
),
|
|
15829
|
+
...rest,
|
|
15830
|
+
children: [
|
|
15831
|
+
Icon ? /* @__PURE__ */ jsx97(Icon, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }) : null,
|
|
15832
|
+
/* @__PURE__ */ jsx97("span", { children })
|
|
15833
|
+
]
|
|
15834
|
+
}
|
|
15835
|
+
);
|
|
15836
|
+
}
|
|
15837
|
+
Eyebrow.displayName = "Eyebrow";
|
|
15838
|
+
function SectionHeading({ eyebrow, eyebrowIcon, title, subtitle, align = "center", className }) {
|
|
15839
|
+
const centered = align === "center";
|
|
15840
|
+
return /* @__PURE__ */ jsxs85("div", { className: cn("max-w-2xl", centered && "mx-auto text-center", className), children: [
|
|
15841
|
+
eyebrow ? /* @__PURE__ */ jsx97(Eyebrow, { icon: eyebrowIcon, className: cn("mb-3", centered && "justify-center"), children: eyebrow }) : null,
|
|
15842
|
+
/* @__PURE__ */ jsx97("h2", { style: DISPLAY, className: "text-3xl font-bold tracking-tight text-foreground sm:text-4xl", children: title }),
|
|
15843
|
+
subtitle ? /* @__PURE__ */ jsx97("p", { className: "mt-3 text-muted-foreground", children: subtitle }) : null
|
|
15844
|
+
] });
|
|
15845
|
+
}
|
|
15846
|
+
SectionHeading.displayName = "SectionHeading";
|
|
15847
|
+
function FeatureCard({ icon: Icon, title, children, className, ...rest }) {
|
|
15848
|
+
return /* @__PURE__ */ jsxs85(
|
|
15849
|
+
"div",
|
|
15850
|
+
{
|
|
15851
|
+
className: cn(
|
|
15852
|
+
"rounded-2xl border border-border bg-card p-6 transition duration-200 hover:-translate-y-1 hover:border-border/80",
|
|
15853
|
+
className
|
|
15854
|
+
),
|
|
15855
|
+
...rest,
|
|
15856
|
+
children: [
|
|
15857
|
+
Icon ? /* @__PURE__ */ jsx97("div", { className: "mb-4 inline-grid h-11 w-11 place-items-center rounded-xl border border-[hsl(var(--primary)/0.18)] bg-[hsl(var(--primary)/0.1)] text-[hsl(var(--primary))]", children: /* @__PURE__ */ jsx97(Icon, { className: "h-5 w-5", "aria-hidden": true }) }) : null,
|
|
15858
|
+
/* @__PURE__ */ jsx97("h3", { style: DISPLAY, className: "mb-2 text-[17px] font-bold text-foreground", children: title }),
|
|
15859
|
+
/* @__PURE__ */ jsx97("div", { className: "text-sm text-muted-foreground [&_b]:text-foreground [&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[12.5px] [&_code]:text-foreground/80", children })
|
|
15860
|
+
]
|
|
15861
|
+
}
|
|
15862
|
+
);
|
|
15863
|
+
}
|
|
15864
|
+
FeatureCard.displayName = "FeatureCard";
|
|
15865
|
+
function CodeShowcase({ tabs, className }) {
|
|
15866
|
+
const [active, setActive] = React28.useState(tabs[0]?.key);
|
|
15867
|
+
const tab = tabs.find((t2) => t2.key === active) ?? tabs[0];
|
|
15868
|
+
return /* @__PURE__ */ jsxs85("div", { className: cn("overflow-hidden rounded-2xl border border-border bg-card", className), children: [
|
|
15869
|
+
/* @__PURE__ */ jsx97("div", { role: "tablist", className: "flex items-center gap-1 overflow-x-auto border-b border-border px-2", children: tabs.map((t2) => {
|
|
15870
|
+
const on = (active ?? tabs[0]?.key) === t2.key;
|
|
15871
|
+
return /* @__PURE__ */ jsxs85(
|
|
15872
|
+
"button",
|
|
15873
|
+
{
|
|
15874
|
+
role: "tab",
|
|
15875
|
+
"aria-selected": on,
|
|
15876
|
+
onClick: () => setActive(t2.key),
|
|
15877
|
+
className: cn(
|
|
15878
|
+
"relative px-3 py-2.5 text-sm transition",
|
|
15879
|
+
on ? "text-foreground" : "text-muted-foreground hover:text-foreground"
|
|
15880
|
+
),
|
|
15881
|
+
children: [
|
|
15882
|
+
t2.label,
|
|
15883
|
+
on ? /* @__PURE__ */ jsx97("span", { className: "absolute inset-x-2 -bottom-px h-0.5 rounded bg-[hsl(var(--primary))]" }) : null
|
|
15884
|
+
]
|
|
15885
|
+
},
|
|
15886
|
+
t2.key
|
|
15887
|
+
);
|
|
15888
|
+
}) }),
|
|
15889
|
+
tab?.file ? /* @__PURE__ */ jsx97("div", { className: "px-4 pt-3 font-mono text-[11px] text-muted-foreground", children: tab.file }) : null,
|
|
15890
|
+
/* @__PURE__ */ jsx97("div", { className: "px-3 pb-3 pt-1", children: /* @__PURE__ */ jsx97(CodeBlock, { lang: tab?.lang, children: tab?.code }) })
|
|
15891
|
+
] });
|
|
15892
|
+
}
|
|
15893
|
+
CodeShowcase.displayName = "CodeShowcase";
|
|
15761
15894
|
export {
|
|
15762
15895
|
Accordion,
|
|
15763
15896
|
AccordionContent,
|
|
@@ -15834,6 +15967,7 @@ export {
|
|
|
15834
15967
|
ChatThread_default as ChatThread,
|
|
15835
15968
|
Checkbox,
|
|
15836
15969
|
CodeBlock,
|
|
15970
|
+
CodeShowcase,
|
|
15837
15971
|
Collapsible,
|
|
15838
15972
|
CollapsibleContent,
|
|
15839
15973
|
CollapsibleTrigger,
|
|
@@ -15914,6 +16048,8 @@ export {
|
|
|
15914
16048
|
EntityNetworkGraph,
|
|
15915
16049
|
ErrorTrackingPage,
|
|
15916
16050
|
EventMapPanel,
|
|
16051
|
+
Eyebrow,
|
|
16052
|
+
FeatureCard,
|
|
15917
16053
|
FeedbackButton,
|
|
15918
16054
|
FeedbackHub,
|
|
15919
16055
|
FeedbackWidget,
|
|
@@ -16022,6 +16158,7 @@ export {
|
|
|
16022
16158
|
ScrollArea,
|
|
16023
16159
|
ScrollBar,
|
|
16024
16160
|
SectionBoard,
|
|
16161
|
+
SectionHeading,
|
|
16025
16162
|
SectionSkeleton,
|
|
16026
16163
|
Select,
|
|
16027
16164
|
SelectContent,
|