@vllnt/ui 0.2.0 → 0.2.1-canary.4abeac1

package/dist/components/index.js

@@ -62,6 +62,26 @@ import { Label } from "./label";
 import { NumberInput } from "./number-input";
 import { PasswordInput } from "./password-input";
 import { Switch } from "./switch";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+} from "./form";
+import {
+  MultiSelect
+} from "./multi-select";
+import { TagsInput } from "./tags-input";
+import {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlVariants
+} from "./segmented-control";
 import {
   toast,
   Toast,
@@ -275,13 +295,35 @@ import {
 } from "./world-clock-bar";
 import { CodeBlock } from "./code-block";
 import { MDXContent } from "./mdx-content";
+import {
+  CanvasShell
+} from "./canvas-shell";
+import {
+  CanvasView
+} from "./canvas-view";
+import { BottomBar } from "./bottom-bar";
+import {
+  ChatDockSection
+} from "./chat-dock-section";
+import { GlassPanel } from "./glass-panel";
+import { LeftRail } from "./left-rail";
+import {
+  MiniMapPanel
+} from "./mini-map-panel";
+import {
+  OverviewBoard,
+  OverviewCard
+} from "./overview-board";
 import {
   NavbarSaas,
   useMobile
 } from "./navbar-saas";
+import { RightDock } from "./right-dock";
 import { Sidebar } from "./sidebar";
 import { SidebarProvider, useSidebar } from "./sidebar-provider";
 import { TableOfContents } from "./table-of-contents";
+import { TopBar } from "./top-bar";
+import { ZoomHUD } from "./zoom-hud";
 import {
   ActivityLog
 } from "./activity-log";
@@ -384,7 +426,25 @@ import {
   Prerequisites,
   Summary
 } from "./learning-objectives";
+import {
+  Curriculum,
+  CurriculumLesson,
+  CurriculumModule
+} from "./curriculum";
 import { ProgressBar } from "./progress-bar";
+import {
+  ProgressCard
+} from "./progress-card";
+import {
+  ProgressTracker,
+  ProgressTrackerBadge,
+  ProgressTrackerModule,
+  ProgressTrackerModules,
+  ProgressTrackerOverview,
+  ProgressTrackerStat,
+  ProgressTrackerStats,
+  useProgressTrackerContext
+} from "./progress-tracker";
 import {
   CommonMistake,
   ProTip
@@ -459,6 +519,9 @@ import {
 import {
   ViewSwitcher
 } from "./view-switcher";
+import {
+  WorkspaceSwitcher
+} from "./workspace-switcher";
 import {
   FlowControls,
   FlowDiagram,
@@ -466,6 +529,26 @@ import {
   FlowFullscreen,
   useFlowDiagram
 } from "./flow-diagram";
+import { AnchorPort } from "./anchor-port";
+import {
+  ConnectorEdge
+} from "./connector-edge";
+import { EdgeLabel } from "./edge-label";
+import { GroupHull } from "./group-hull";
+import {
+  ObjectCard
+} from "./object-card";
+import { ObjectHandle } from "./object-handle";
+import {
+  ConversationEmpty,
+  ConversationHeader,
+  ConversationLoading,
+  ConversationMessages,
+  ConversationScrollButton,
+  ConversationSuggestions,
+  ConversationThread,
+  ConversationTitle
+} from "./conversation-thread";
 import { InlineInput } from "./inline-input";
 import {
   ModelSelector
@@ -498,6 +581,7 @@ export {
   AlertDialogTitle,
   AlertDialogTrigger,
   AlertTitle,
+  AnchorPort,
   AnimatedText,
   Annotation,
   AreaChart,
@@ -511,11 +595,14 @@ export {
   BeforeAfter,
   BlogCard,
   BorderBeam,
+  BottomBar,
   Breadcrumb,
   Button,
   Calendar,
   Callout,
   CandlestickChart,
+  CanvasShell,
+  CanvasView,
   Card,
   CardContent,
   CardDescription,
@@ -528,6 +615,7 @@ export {
   CarouselNext,
   CarouselPrevious,
   CategoryFilter,
+  ChatDockSection,
   Checkbox,
   Checklist,
   CodeBlock,
@@ -548,6 +636,7 @@ export {
   CommonMistake,
   Comparison,
   CompletionDialog,
+  ConnectorEdge,
   ContentCard,
   ContentIntro,
   ContextMenu,
@@ -565,9 +654,20 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  ConversationEmpty,
+  ConversationHeader,
+  ConversationLoading,
+  ConversationMessages,
+  ConversationScrollButton,
+  ConversationSuggestions,
+  ConversationThread,
+  ConversationTitle,
   CookieConsent,
   CountdownTimer,
   CreditBadge,
+  Curriculum,
+  CurriculumLesson,
+  CurriculumModule,
   DataList,
   DataListItem,
   DataListLabel,
@@ -609,6 +709,7 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  EdgeLabel,
   Exercise,
   FAQ,
   FAQItem,
@@ -621,7 +722,16 @@ export {
   FlowDiagram,
   FlowErrorBoundary,
   FlowFullscreen,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  GlassPanel,
   Glossary,
+  GroupHull,
   Highlight,
   HorizontalScrollRow,
   HoverCard,
@@ -638,6 +748,7 @@ export {
   Label,
   LangProvider,
   LearningObjectives,
+  LeftRail,
   LineChart,
   LiveFeed,
   MDXContent,
@@ -660,7 +771,9 @@ export {
   MenubarSubTrigger,
   MenubarTrigger,
   MetricGauge,
+  MiniMapPanel,
   ModelSelector,
+  MultiSelect,
   NavbarSaas,
   NavigationMenu,
   NavigationMenuContent,
@@ -672,7 +785,11 @@ export {
   NavigationMenuViewport,
   NumberInput,
   NumberTicker,
+  ObjectCard,
+  ObjectHandle,
   OrderBook,
+  OverviewBoard,
+  OverviewCard,
   Pagination,
   PasswordInput,
   PlanBadge,
@@ -684,6 +801,14 @@ export {
   ProTip,
   ProfileSection,
   ProgressBar,
+  ProgressCard,
+  ProgressTracker,
+  ProgressTrackerBadge,
+  ProgressTrackerModule,
+  ProgressTrackerModules,
+  ProgressTrackerOverview,
+  ProgressTrackerStat,
+  ProgressTrackerStats,
   Quiz,
   RadioGroup,
   RadioGroupItem,
@@ -691,12 +816,15 @@ export {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  RightDock,
   RoleBadge,
   ScopeSelector,
   ScrollArea,
   ScrollBar,
   SearchBar,
   SearchDialog,
+  SegmentedControl,
+  SegmentedControlItem,
   Select,
   SelectContent,
   SelectGroup,
@@ -756,6 +884,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  TagsInput,
   Terminal,
   Textarea,
   ThemeProvider,
@@ -775,6 +904,7 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TopBar,
   Tour,
   TruncatedText,
   TutorialCard,
@@ -788,7 +918,9 @@ export {
   ViewSwitcher,
   WalletCard,
   Watchlist,
+  WorkspaceSwitcher,
   WorldClockBar,
+  ZoomHUD,
   alertVariants,
   avatarGroupVariants,
   avatarItemVariants,
@@ -800,13 +932,17 @@ export {
   dotVariants,
   mdxComponents,
   navigationMenuTriggerStyle,
+  segmentedControlItemVariants,
+  segmentedControlVariants,
   severityBadgeVariants,
   statCardVariants,
   statusIndicatorVariants,
   toast,
   toggleVariants,
   useFlowDiagram,
+  useFormField,
   useMobile,
+  useProgressTrackerContext,
   useSidebar,
   useSocialFab
 };

package/dist/components/left-rail/index.js

@@ -0,0 +1,4 @@
+import { LeftRail } from "./left-rail";
+export {
+  LeftRail
+};

package/dist/components/left-rail/left-rail.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const LeftRail = forwardRef(
+  ({ children, className, footer, title, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex h-full w-[4.5rem] shrink-0 flex-col items-center gap-3 border-r border-border bg-background px-2 py-3",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsx("div", { className: "flex min-h-9 items-center text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: title }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex w-full flex-1 flex-col items-center gap-2", children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col items-center gap-2", children: footer }) : null
+      ]
+    }
+  )
+);
+LeftRail.displayName = "LeftRail";
+export {
+  LeftRail
+};

package/dist/components/mini-map-panel/index.js

@@ -0,0 +1,6 @@
+import {
+  MiniMapPanel
+} from "./mini-map-panel";
+export {
+  MiniMapPanel
+};

package/dist/components/mini-map-panel/mini-map-panel.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const MiniMapPanel = forwardRef(
+  ({ className, markers = [], title = "Overview", viewport, world, ...props }, ref) => {
+    const viewportWidth = Math.max(
+      viewport.width / viewport.zoom / world.width * 100,
+      8
+    );
+    const viewportHeight = Math.max(
+      viewport.height / viewport.zoom / world.height * 100,
+      8
+    );
+    const viewportLeft = Math.min(
+      Math.max(viewport.x / world.width * 100, 0),
+      100 - viewportWidth
+    );
+    const viewportTop = Math.min(
+      Math.max(viewport.y / world.height * 100, 0),
+      100 - viewportHeight
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "w-52 rounded-sm border border-border bg-background p-3 font-mono",
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground", children: title }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: [
+              "Zoom ",
+              Math.round(viewport.zoom * 100),
+              "%"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background", children: [
+            markers.map((marker) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground",
+                style: {
+                  left: `${marker.x / world.width * 100}%`,
+                  top: `${marker.y / world.height * 100}%`
+                },
+                title: marker.label
+              },
+              marker.id
+            )),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute border border-foreground/80 bg-transparent",
+                style: {
+                  height: `${viewportHeight}%`,
+                  left: `${viewportLeft}%`,
+                  top: `${viewportTop}%`,
+                  width: `${viewportWidth}%`
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+MiniMapPanel.displayName = "MiniMapPanel";
+export {
+  MiniMapPanel
+};

package/dist/components/multi-select/index.js

@@ -0,0 +1,6 @@
+import {
+  MultiSelect
+} from "./multi-select";
+export {
+  MultiSelect
+};

package/dist/components/multi-select/multi-select.js

@@ -0,0 +1,258 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../command";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+function getUniqueValues(values) {
+  return values.filter((value, index) => values.indexOf(value) === index);
+}
+function shouldOpenFromKey(key) {
+  return key === " " || key === "ArrowDown" || key === "Enter";
+}
+function TriggerContent({ placeholder, selectedOptions }) {
+  if (selectedOptions.length === 0) {
+    return /* @__PURE__ */ jsx("span", { children: placeholder });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: selectedOptions.map((option) => /* @__PURE__ */ jsx(Badge, { className: "max-w-full", variant: "secondary", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }) }, option.value)) });
+}
+function OptionList({
+  disabled,
+  emptyText,
+  onSelect,
+  options,
+  searchable,
+  searchPlaceholder,
+  selectedValues
+}) {
+  return /* @__PURE__ */ jsxs(Command, { children: [
+    searchable ? /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }) : null,
+    /* @__PURE__ */ jsxs(CommandList, { "aria-multiselectable": "true", children: [
+      /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+      /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx("div", { children: options.map((option) => {
+        const isSelected = selectedValues.includes(option.value);
+        return /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            "aria-disabled": option.disabled || void 0,
+            "aria-selected": isSelected,
+            className: "gap-2",
+            disabled: disabled || option.disabled,
+            onSelect: () => {
+              onSelect(option.value);
+            },
+            role: "option",
+            value: option.label,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex h-4 w-4 items-center justify-center rounded-sm border border-input bg-background text-primary transition-opacity",
+                    isSelected ? "opacity-100" : "opacity-50"
+                  ),
+                  children: isSelected ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : null
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: option.label })
+            ]
+          },
+          option.value
+        );
+      }) }) })
+    ] })
+  ] });
+}
+function MultiSelectContent({
+  contentId,
+  disabled,
+  emptyText,
+  onSelect,
+  options,
+  searchable,
+  searchPlaceholder,
+  selectedValues
+}) {
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      align: "start",
+      className: "w-[var(--radix-popover-trigger-width)] p-0",
+      id: contentId,
+      children: /* @__PURE__ */ jsx(
+        OptionList,
+        {
+          disabled,
+          emptyText,
+          onSelect,
+          options,
+          searchable,
+          searchPlaceholder,
+          selectedValues
+        }
+      )
+    }
+  );
+}
+function useMultiSelectState({
+  defaultValue,
+  onOpenChange,
+  onValueChange,
+  value
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    () => getUniqueValues(defaultValue)
+  );
+  const isControlled = value !== void 0;
+  const selectedValues = React.useMemo(
+    () => getUniqueValues(value ?? uncontrolledValue),
+    [uncontrolledValue, value]
+  );
+  const setSelectedValues = React.useCallback(
+    (nextValue) => {
+      const uniqueValues = getUniqueValues(nextValue);
+      if (!isControlled) {
+        setUncontrolledValue(uniqueValues);
+      }
+      onValueChange?.(uniqueValues);
+    },
+    [isControlled, onValueChange]
+  );
+  const handleOpenChange = React.useCallback(
+    (nextOpen) => {
+      setOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange]
+  );
+  return {
+    handleOpenChange,
+    open,
+    selectedValues,
+    setSelectedValues
+  };
+}
+const MultiSelectTrigger = React.forwardRef(
+  ({
+    className,
+    contentId,
+    disabled = false,
+    onKeyDown,
+    open,
+    placeholder = "Select options",
+    selectedOptions,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "aria-controls": contentId,
+      "aria-expanded": open,
+      "aria-haspopup": "listbox",
+      className: cn(
+        "min-h-10 w-full justify-between px-3 py-2 text-sm font-normal",
+        selectedOptions.length === 0 && "text-muted-foreground",
+        className
+      ),
+      disabled,
+      onKeyDown,
+      ref,
+      role: "combobox",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 text-left", children: /* @__PURE__ */ jsx(
+          TriggerContent,
+          {
+            placeholder,
+            selectedOptions
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+      ]
+    }
+  )
+);
+MultiSelectTrigger.displayName = "MultiSelectTrigger";
+const MultiSelect = React.forwardRef(
+  ({
+    defaultValue = [],
+    emptyText = "No options found.",
+    onKeyDown,
+    onOpenChange,
+    onValueChange,
+    options,
+    searchable = false,
+    searchPlaceholder = "Search options...",
+    value,
+    ...props
+  }, ref) => {
+    const contentId = React.useId();
+    const { handleOpenChange, open, selectedValues, setSelectedValues } = useMultiSelectState({ defaultValue, onOpenChange, onValueChange, value });
+    const selectedOptions = React.useMemo(
+      () => options.filter((option) => selectedValues.includes(option.value)),
+      [options, selectedValues]
+    );
+    const handleSelect = React.useCallback(
+      (nextValue) => {
+        const nextSelectedValues = selectedValues.includes(nextValue) ? selectedValues.filter((valueItem) => valueItem !== nextValue) : [...selectedValues, nextValue];
+        setSelectedValues(nextSelectedValues);
+      },
+      [selectedValues, setSelectedValues]
+    );
+    const handleTriggerKeyDown = React.useCallback(
+      (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || props.disabled) {
+          return;
+        }
+        if (shouldOpenFromKey(event.key)) {
+          event.preventDefault();
+          handleOpenChange(true);
+        }
+      },
+      [handleOpenChange, onKeyDown, props.disabled]
+    );
+    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: handleOpenChange, open, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        MultiSelectTrigger,
+        {
+          ...props,
+          contentId,
+          onKeyDown: handleTriggerKeyDown,
+          open,
+          ref,
+          selectedOptions
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        MultiSelectContent,
+        {
+          contentId,
+          disabled: props.disabled || false,
+          emptyText,
+          onSelect: handleSelect,
+          options,
+          searchable,
+          searchPlaceholder,
+          selectedValues
+        }
+      )
+    ] });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+export {
+  MultiSelect
+};

package/dist/components/object-card/index.js

@@ -0,0 +1,6 @@
+import {
+  ObjectCard
+} from "./object-card";
+export {
+  ObjectCard
+};