@vllnt/ui 0.1.11 → 0.2.0

package/dist/components/flashcard/flashcard.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { RefreshCcw } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../card";
+function Flashcard({
+  answer,
+  category,
+  className,
+  defaultFlipped = false,
+  hint,
+  onFlipChange,
+  question,
+  title = "Flashcard"
+}) {
+  const [flipped, setFlipped] = useState(defaultFlipped);
+  const toggleFlipped = () => {
+    const nextValue = !flipped;
+    setFlipped(nextValue);
+    onFlipChange?.(nextValue);
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "my-6 overflow-hidden border-primary/20 bg-gradient-to-br from-card to-primary/5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center justify-between gap-3 border-b bg-background/80", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Study" }),
+              category ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: category }) : null
+            ] }),
+            /* @__PURE__ */ jsx(CardTitle, { children: title })
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { onClick: toggleFlipped, size: "sm", variant: "outline", children: [
+            /* @__PURE__ */ jsx(RefreshCcw, { className: "mr-2 h-4 w-4" }),
+            "Flip"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4 p-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-h-40 rounded-xl border bg-background p-6 shadow-sm", children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground", children: flipped ? "Answer" : "Prompt" }),
+            /* @__PURE__ */ jsx("div", { className: "text-base text-foreground [&>p]:mb-3", children: flipped ? answer : question })
+          ] }),
+          hint ? /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+            "Hint: ",
+            hint
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(CardFooter, { className: "justify-between border-t bg-background/80 px-6 py-4", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: flipped ? "Use this side to check your recall." : "Try answering before flipping the card." }),
+          /* @__PURE__ */ jsx(Button, { onClick: toggleFlipped, variant: "ghost", children: flipped ? "Show prompt" : "Reveal answer" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Flashcard
+};

package/dist/components/flashcard/index.js

@@ -0,0 +1,4 @@
+import { Flashcard } from "./flashcard";
+export {
+  Flashcard
+};

package/dist/components/index.js

@@ -24,6 +24,8 @@ import {
   CommandSeparator,
   CommandShortcut
 } from "./command";
+import { Combobox } from "./combobox";
+import { DatePicker } from "./date-picker";
 import {
   Dialog,
   DialogClose,
@@ -55,7 +57,10 @@ import {
 } from "./dropdown-menu";
 import { Input } from "./input";
 import { Checkbox } from "./checkbox";
+import { FileUpload } from "./file-upload";
 import { Label } from "./label";
+import { NumberInput } from "./number-input";
+import { PasswordInput } from "./password-input";
 import { Switch } from "./switch";
 import {
   toast,
@@ -66,6 +71,19 @@ import {
   Toaster,
   ToastTitle
 } from "./toast";
+import { AIChatInput } from "./ai-chat-input";
+import {
+  AIMessageBubble
+} from "./ai-message-bubble";
+import {
+  AISourceCitation
+} from "./ai-source-citation";
+import {
+  AIStreamingText
+} from "./ai-streaming-text";
+import {
+  AIToolCallDisplay
+} from "./ai-tool-call-display";
 import { Textarea } from "./textarea";
 import {
   Select,
@@ -185,6 +203,17 @@ import {
   navigationMenuTriggerStyle,
   NavigationMenuViewport
 } from "./navigation-menu";
+import {
+  DataTable
+} from "./data-table";
+import {
+  DataList,
+  DataListItem,
+  dataListItemVariants,
+  DataListLabel,
+  DataListValue,
+  dataListVariants
+} from "./data-list";
 import {
   Table,
   TableBody,
@@ -196,9 +225,20 @@ import {
   TableRow
 } from "./table";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+import {
+  AvatarGroup,
+  avatarGroupVariants,
+  avatarItemVariants
+} from "./avatar-group";
 import { Skeleton } from "./skeleton";
 import { Separator } from "./separator";
 import { Alert, AlertDescription, AlertTitle, alertVariants } from "./alert";
+import { StatCard, statCardVariants } from "./stat-card";
+import {
+  dotVariants,
+  StatusIndicator,
+  statusIndicatorVariants
+} from "./status-indicator";
 import { AspectRatio } from "./aspect-ratio";
 import { ScrollArea, ScrollBar } from "./scroll-area";
 import {
@@ -218,8 +258,21 @@ import {
   CarouselNext,
   CarouselPrevious
 } from "./carousel";
+import { BorderBeam } from "./border-beam";
+import {
+  ActivityHeatmap
+} from "./activity-heatmap";
 import { Calendar } from "./calendar";
-import { Spinner } from "./spinner";
+import { CountdownTimer } from "./countdown-timer";
+import { Marquee } from "./marquee";
+import { NumberTicker } from "./number-ticker";
+import {
+  Spinner,
+  UnicodeSpinner
+} from "./spinner";
+import {
+  WorldClockBar
+} from "./world-clock-bar";
 import { CodeBlock } from "./code-block";
 import { MDXContent } from "./mdx-content";
 import {
@@ -229,10 +282,19 @@ import {
 import { Sidebar } from "./sidebar";
 import { SidebarProvider, useSidebar } from "./sidebar-provider";
 import { TableOfContents } from "./table-of-contents";
+import {
+  ActivityLog
+} from "./activity-log";
 import { BlogCard, ContentCard } from "./blog-card";
 import { CategoryFilter } from "./category-filter";
 import { Pagination } from "./pagination";
 import { SearchBar } from "./search-bar";
+import {
+  ScopeSelector
+} from "./scope-selector";
+import {
+  UsageBreakdown
+} from "./usage-breakdown";
 import {
   ShareSection
 } from "./share-section";
@@ -240,10 +302,53 @@ import { SearchDialog } from "./search-dialog";
 import { LangProvider } from "./lang-provider";
 import { ThemeProvider } from "./theme-provider";
 import { ThemeToggle } from "./theme-toggle";
+import {
+  CandlestickChart
+} from "./candlestick-chart";
+import {
+  CreditBadge
+} from "./credit-badge";
+import {
+  MarketTreemap
+} from "./market-treemap";
+import {
+  OrderBook
+} from "./order-book";
 import { ProfileSection } from "./profile-section";
+import {
+  PlanBadge
+} from "./plan-badge";
+import {
+  RoleBadge
+} from "./role-badge";
+import {
+  SparklineGrid
+} from "./sparkline-grid";
+import {
+  SubscriptionCard
+} from "./subscription-card";
 import { TLDRSection } from "./tldr-section";
+import {
+  TickerTape
+} from "./ticker-tape";
+import { WalletCard } from "./wallet-card";
+import {
+  Watchlist
+} from "./watchlist";
 import { BarChart, LineChart } from "./chart";
 import { AreaChart } from "./chart";
+import { LiveFeed } from "./live-feed";
+import {
+  MetricGauge
+} from "./metric-gauge";
+import {
+  SeverityBadge,
+  severityBadgeVariants
+} from "./severity-badge";
+import {
+  StatusBoard
+} from "./status-board";
+import { AnimatedText } from "./animated-text";
 import { TruncatedText } from "./truncated-text";
 import {
   Accordion,
@@ -252,6 +357,10 @@ import {
   AccordionTrigger
 } from "./accordion";
 import { Callout } from "./callout";
+import {
+  Annotation,
+  Highlight
+} from "./annotation";
 import {
   Checklist
 } from "./checklist";
@@ -265,6 +374,7 @@ import {
 } from "./comparison";
 import { Exercise } from "./exercise";
 import { FAQ, FAQItem } from "./faq";
+import { Flashcard } from "./flashcard";
 import {
   Glossary,
   KeyConcept
@@ -280,10 +390,12 @@ import {
   ProTip
 } from "./pro-tip";
 import { Quiz } from "./quiz";
+import { Rating } from "./rating";
 import {
   Step,
   StepByStep
 } from "./step-by-step";
+import { Stepper } from "./stepper";
 import {
   Tabs,
   TabsContent,
@@ -311,6 +423,7 @@ import {
   mdxComponents,
   TutorialMDX
 } from "./tutorial-mdx";
+import { Tour } from "./tour";
 import {
   CompletionDialog
 } from "./completion-dialog";
@@ -360,10 +473,17 @@ import {
 import { SidebarToggle } from "./sidebar-toggle";
 import { ThinkingBlock } from "./thinking-block";
 export {
+  AIChatInput,
+  AIMessageBubble,
+  AISourceCitation,
+  AIStreamingText,
+  AIToolCallDisplay,
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  ActivityHeatmap,
+  ActivityLog,
   Alert,
   AlertDescription,
   AlertDialog,
@@ -378,19 +498,24 @@ export {
   AlertDialogTitle,
   AlertDialogTrigger,
   AlertTitle,
+  AnimatedText,
+  Annotation,
   AreaChart,
   AspectRatio,
   Avatar,
   AvatarFallback,
+  AvatarGroup,
   AvatarImage,
   Badge,
   BarChart,
   BeforeAfter,
   BlogCard,
+  BorderBeam,
   Breadcrumb,
   Button,
   Calendar,
   Callout,
+  CandlestickChart,
   Card,
   CardContent,
   CardDescription,
@@ -410,6 +535,7 @@ export {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
+  Combobox,
   Command,
   CommandDialog,
   CommandEmpty,
@@ -440,6 +566,14 @@ export {
   ContextMenuSubTrigger,
   ContextMenuTrigger,
   CookieConsent,
+  CountdownTimer,
+  CreditBadge,
+  DataList,
+  DataListItem,
+  DataListLabel,
+  DataListValue,
+  DataTable,
+  DatePicker,
   Dialog,
   DialogClose,
   DialogContent,
@@ -479,13 +613,16 @@ export {
   FAQ,
   FAQItem,
   FileTree,
+  FileUpload,
   FilterBar,
+  Flashcard,
   FloatingActionButton,
   FlowControls,
   FlowDiagram,
   FlowErrorBoundary,
   FlowFullscreen,
   Glossary,
+  Highlight,
   HorizontalScrollRow,
   HoverCard,
   HoverCardContent,
@@ -502,7 +639,10 @@ export {
   LangProvider,
   LearningObjectives,
   LineChart,
+  LiveFeed,
   MDXContent,
+  MarketTreemap,
+  Marquee,
   Menubar,
   MenubarCheckboxItem,
   MenubarContent,
@@ -519,6 +659,7 @@ export {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
+  MetricGauge,
   ModelSelector,
   NavbarSaas,
   NavigationMenu,
@@ -529,7 +670,12 @@ export {
   NavigationMenuList,
   NavigationMenuTrigger,
   NavigationMenuViewport,
+  NumberInput,
+  NumberTicker,
+  OrderBook,
   Pagination,
+  PasswordInput,
+  PlanBadge,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -541,9 +687,12 @@ export {
   Quiz,
   RadioGroup,
   RadioGroupItem,
+  Rating,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  RoleBadge,
+  ScopeSelector,
   ScrollArea,
   ScrollBar,
   SearchBar,
@@ -559,6 +708,7 @@ export {
   SelectTrigger,
   SelectValue,
   Separator,
+  SeverityBadge,
   ShareDialog,
   ShareSection,
   Sheet,
@@ -579,10 +729,16 @@ export {
   Slider,
   Slideshow,
   SocialFAB,
+  SparklineGrid,
   Spinner,
+  StatCard,
+  StatusBoard,
+  StatusIndicator,
   Step,
   StepByStep,
   StepNavigation,
+  Stepper,
+  SubscriptionCard,
   Summary,
   Switch,
   TLDRSection,
@@ -605,6 +761,7 @@ export {
   ThemeProvider,
   ThemeToggle,
   ThinkingBlock,
+  TickerTape,
   Toast,
   ToastAction,
   ToastClose,
@@ -618,20 +775,34 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  Tour,
   TruncatedText,
   TutorialCard,
   TutorialComplete,
   TutorialFilters,
   TutorialIntroContent,
   TutorialMDX,
+  UnicodeSpinner,
+  UsageBreakdown,
   VideoEmbed,
   ViewSwitcher,
+  WalletCard,
+  Watchlist,
+  WorldClockBar,
   alertVariants,
+  avatarGroupVariants,
+  avatarItemVariants,
   badgeVariants,
   buttonVariants,
   cookieConsentVariants,
+  dataListItemVariants,
+  dataListVariants,
+  dotVariants,
   mdxComponents,
   navigationMenuTriggerStyle,
+  severityBadgeVariants,
+  statCardVariants,
+  statusIndicatorVariants,
   toast,
   toggleVariants,
   useFlowDiagram,

package/dist/components/live-feed/index.js

@@ -0,0 +1,4 @@
+import { LiveFeed } from "./live-feed";
+export {
+  LiveFeed
+};

package/dist/components/live-feed/live-feed.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "../card";
+import {
+  SeverityBadge
+} from "../severity-badge/severity-badge";
+const SECOND_MS = 1e3;
+const MINUTE_MS = 60 * SECOND_MS;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+function normalizeDate(input) {
+  if (input instanceof Date) {
+    return new Date(input.getTime());
+  }
+  return new Date(input);
+}
+function useLiveDate(now, tickMs) {
+  const fixedNow = React.useMemo(
+    () => now ? normalizeDate(now) : void 0,
+    [now]
+  );
+  const [liveNow, setLiveNow] = React.useState(fixedNow ?? /* @__PURE__ */ new Date());
+  React.useEffect(() => {
+    if (fixedNow) {
+      setLiveNow(fixedNow);
+      return;
+    }
+    const interval = window.setInterval(() => {
+      setLiveNow(/* @__PURE__ */ new Date());
+    }, tickMs);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [fixedNow, tickMs]);
+  return liveNow;
+}
+function formatRelative(eventDate, now) {
+  const deltaMs = now.getTime() - eventDate.getTime();
+  if (deltaMs < 5 * SECOND_MS) {
+    return "just now";
+  }
+  if (deltaMs < MINUTE_MS) {
+    return `${Math.floor(deltaMs / SECOND_MS)}s ago`;
+  }
+  if (deltaMs < HOUR_MS) {
+    return `${Math.floor(deltaMs / MINUTE_MS)}m ago`;
+  }
+  if (deltaMs < DAY_MS) {
+    return `${Math.floor(deltaMs / HOUR_MS)}h ago`;
+  }
+  if (deltaMs < 7 * DAY_MS) {
+    return `${Math.floor(deltaMs / DAY_MS)}d ago`;
+  }
+  return new Intl.DateTimeFormat("en-US", {
+    day: "numeric",
+    month: "short"
+  }).format(eventDate);
+}
+function formatAbsolute(eventDate) {
+  return new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    month: "short",
+    second: "2-digit"
+  }).format(eventDate);
+}
+function sortEventsDesc(events) {
+  return [...events].sort(
+    (a, b) => normalizeDate(b.timestamp).getTime() - normalizeDate(a.timestamp).getTime()
+  );
+}
+function LiveFeedRow({
+  event,
+  isLatest,
+  now
+}) {
+  const eventDate = normalizeDate(event.timestamp);
+  return /* @__PURE__ */ jsxs("li", { className: "flex gap-3 border-b border-border/60 py-3 last:border-b-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(
+      SeverityBadge,
+      {
+        level: event.severity,
+        pulse: isLatest ? event.severity === "critical" : void 0,
+        tone: "soft"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: event.title }),
+        /* @__PURE__ */ jsx(
+          "time",
+          {
+            className: "whitespace-nowrap text-xs text-muted-foreground",
+            dateTime: eventDate.toISOString(),
+            title: formatAbsolute(eventDate),
+            children: formatRelative(eventDate, now)
+          }
+        )
+      ] }),
+      event.message ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: event.message }) : null,
+      event.source ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs uppercase tracking-[0.14em] text-muted-foreground", children: event.source }) : null
+    ] })
+  ] });
+}
+const LiveFeed = React.forwardRef(
+  ({
+    className,
+    description,
+    emptyLabel = "No events yet",
+    events,
+    maxItems = 50,
+    now,
+    tickMs = 3e4,
+    title = "Live feed",
+    ...props
+  }, ref) => {
+    const liveNow = useLiveDate(now, tickMs);
+    const visibleEvents = React.useMemo(
+      () => sortEventsDesc(events).slice(0, maxItems),
+      [events, maxItems]
+    );
+    return /* @__PURE__ */ jsxs(Card, { className: cn("shadow-sm", className), ref, ...props, children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-3 space-y-0 pb-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: title }),
+          description ? /* @__PURE__ */ jsx(CardDescription, { children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "relative mr-1.5 inline-flex h-2 w-2",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-2 w-2 animate-ping rounded-full bg-emerald-500 opacity-70" }),
+                /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-emerald-500" })
+              ]
+            }
+          ),
+          " ",
+          "Live"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "pt-0", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: emptyLabel }) : /* @__PURE__ */ jsx("ul", { className: "max-h-[360px] divide-y divide-border/60 overflow-y-auto", children: visibleEvents.map((event, index) => /* @__PURE__ */ jsx(
+        LiveFeedRow,
+        {
+          event,
+          isLatest: index === 0,
+          now: liveNow
+        },
+        event.id
+      )) }) })
+    ] });
+  }
+);
+LiveFeed.displayName = "LiveFeed";
+export {
+  LiveFeed
+};

package/dist/components/market-treemap/index.js

@@ -0,0 +1,6 @@
+import {
+  MarketTreemap
+} from "./market-treemap";
+export {
+  MarketTreemap
+};