@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/model-comparison/model-comparison.js

@@ -0,0 +1,211 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
+const HIDDEN_LABEL_PREFIX = "Model";
+const DEFAULT_LABELS = {
+  cost: "Cost",
+  hide: "Hide models",
+  latency: "Latency",
+  prompt: "Prompt",
+  reveal: "Reveal models",
+  tokens: "Tokens",
+  voteHeading: "Which response is better?",
+  voteTie: "Tie"
+};
+const DEFAULT_CONTEXT = {
+  blind: false,
+  labels: DEFAULT_LABELS
+};
+const ModelComparisonContext = createContext(DEFAULT_CONTEXT);
+function ComparisonHeader({
+  blind,
+  hideBlindToggle,
+  labels,
+  onToggleBlind,
+  prompt
+}) {
+  if (!prompt && hideBlindToggle) return null;
+  return /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-3", children: [
+    prompt ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.prompt }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: prompt })
+    ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+    hideBlindToggle ? null : /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-pressed": blind,
+        onClick: onToggleBlind,
+        size: "sm",
+        type: "button",
+        variant: "outline",
+        children: blind ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true", className: "mr-2 h-4 w-4" }),
+          labels.reveal
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true", className: "mr-2 h-4 w-4" }),
+          labels.hide
+        ] })
+      }
+    )
+  ] });
+}
+const ModelComparison = forwardRef(
+  (props, ref) => {
+    const {
+      blindDefault = false,
+      children,
+      className,
+      hideBlindToggle = false,
+      labels,
+      prompt,
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const [blind, setBlind] = useState(blindDefault);
+    const contextValue = useMemo(
+      () => ({ blind, labels: resolvedLabels }),
+      [blind, resolvedLabels]
+    );
+    const handleToggleBlind = useCallback(() => {
+      setBlind((value) => !value);
+    }, []);
+    return /* @__PURE__ */ jsx(ModelComparisonContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: cn(
+          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            ComparisonHeader,
+            {
+              blind,
+              hideBlindToggle,
+              labels: resolvedLabels,
+              onToggleBlind: handleToggleBlind,
+              prompt
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3", children })
+        ]
+      }
+    ) });
+  }
+);
+ModelComparison.displayName = "ModelComparison";
+const ModelComparisonColumn = forwardRef((props, ref) => {
+  const { badge, children, className, label, model, ...rest } = props;
+  const id = useId();
+  const { blind } = useContext(ModelComparisonContext);
+  const displayLabel = blind ? `${HIDDEN_LABEL_PREFIX} ${id.slice(-2)}` : label ?? model;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "aria-label": typeof displayLabel === "string" ? displayLabel : void 0,
+      className: cn(
+        "flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-3",
+        className
+      ),
+      "data-blind": blind ? "true" : "false",
+      "data-model": blind ? void 0 : model,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold tracking-tight text-foreground", children: displayLabel }),
+          badge ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2 text-sm text-foreground", children })
+      ]
+    }
+  );
+});
+ModelComparisonColumn.displayName = "ModelComparisonColumn";
+const ModelComparisonMeta = forwardRef((props, ref) => {
+  const { className, cost, latency, tokens, ...rest } = props;
+  const { labels } = useContext(ModelComparisonContext);
+  const items = [];
+  if (tokens !== void 0 && tokens !== null) {
+    items.push({
+      caption: labels.tokens,
+      value: typeof tokens === "number" ? tokens.toLocaleString() : tokens
+    });
+  }
+  if (latency !== void 0 && latency !== null) {
+    items.push({ caption: labels.latency, value: latency });
+  }
+  if (cost !== void 0 && cost !== null) {
+    items.push({ caption: labels.cost, value: cost });
+  }
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: cn(
+        "mt-auto flex flex-wrap gap-x-3 gap-y-1 border-t border-border pt-2 text-xs",
+        className
+      ),
+      ref,
+      ...rest,
+      children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+        /* @__PURE__ */ jsx("dt", { className: "font-medium uppercase tracking-wide text-muted-foreground", children: item.caption }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: item.value })
+      ] }, item.caption))
+    }
+  );
+});
+ModelComparisonMeta.displayName = "ModelComparisonMeta";
+const ModelComparisonVote = forwardRef((props, ref) => {
+  const { buttonLabels, className, onVote, ...rest } = props;
+  const { labels: contextLabels } = useContext(ModelComparisonContext);
+  const handleLeft = useCallback(() => {
+    onVote?.("left");
+  }, [onVote]);
+  const handleTie = useCallback(() => {
+    onVote?.("tie");
+  }, [onVote]);
+  const handleRight = useCallback(() => {
+    onVote?.("right");
+  }, [onVote]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col items-center gap-2", className),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: contextLabels.voteHeading }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { onClick: handleLeft, size: "sm", type: "button", variant: "outline", children: buttonLabels?.left ?? "\u2190 Left" }),
+          /* @__PURE__ */ jsx(Button, { onClick: handleTie, size: "sm", type: "button", variant: "ghost", children: buttonLabels?.tie ?? contextLabels.voteTie }),
+          /* @__PURE__ */ jsx(Button, { onClick: handleRight, size: "sm", type: "button", variant: "outline", children: buttonLabels?.right ?? "Right \u2192" })
+        ] })
+      ]
+    }
+  );
+});
+ModelComparisonVote.displayName = "ModelComparisonVote";
+export {
+  ModelComparison,
+  ModelComparisonColumn,
+  ModelComparisonMeta,
+  ModelComparisonVote
+};

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/multi-select-lasso/index.js

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

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

@@ -0,0 +1,76 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  plural: "items",
+  region: "Multi-select lasso",
+  singular: "item"
+};
+const normalizeRect = (rect) => {
+  const x = rect.width < 0 ? rect.x + rect.width : rect.x;
+  const y = rect.height < 0 ? rect.y + rect.height : rect.y;
+  const width = Math.abs(rect.width);
+  const height = Math.abs(rect.height);
+  return { height, width, x, y };
+};
+const MultiSelectLasso = forwardRef((props, ref) => {
+  const { className, count, hint, labels, rect, ...rest } = props;
+  if (!rect) {
+    return null;
+  }
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const normalized = normalizeRect(rect);
+  if (normalized.width === 0 || normalized.height === 0) {
+    return null;
+  }
+  const noun = count === 1 ? resolvedLabels.singular : resolvedLabels.plural;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "pointer-events-none absolute z-30 rounded-md border-2 border-blue-500/70 bg-blue-500/10",
+        className
+      ),
+      "data-multi-select-lasso": true,
+      ref,
+      style: {
+        height: normalized.height,
+        left: normalized.x,
+        top: normalized.y,
+        width: normalized.width
+      },
+      ...rest,
+      children: [
+        hint ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute -top-7 left-0 rounded-md bg-foreground/90 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-background",
+            "data-multi-select-hint": true,
+            children: hint
+          }
+        ) : null,
+        typeof count === "number" ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "absolute -bottom-7 right-0 rounded-full bg-foreground px-2 py-0.5 text-[10px] font-semibold text-background",
+            "data-multi-select-count": true,
+            children: [
+              count,
+              " ",
+              noun
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+});
+MultiSelectLasso.displayName = "MultiSelectLasso";
+export {
+  MultiSelectLasso
+};

package/dist/components/newsletter-signup/index.js

@@ -0,0 +1,8 @@
+import {
+  NewsletterSignup,
+  newsletterSignupReducer
+} from "./newsletter-signup";
+export {
+  NewsletterSignup,
+  newsletterSignupReducer
+};