@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/prompt-input/prompt-input.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { LoaderCircle, SendHorizontal } from "lucide-react";
+import { cn } from "../../lib/utils";
+const SUBMIT_KEY = "Enter";
+const REM_PER_ROW = 1.5;
+function autoResize(element) {
+  if (element === null) {
+    return;
+  }
+  element.style.height = "auto";
+  element.style.height = `${element.scrollHeight}px`;
+}
+function applyRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+    return;
+  }
+  if (ref) {
+    ref.current = node;
+  }
+}
+function useMergedRef(ref) {
+  const innerRef = useRef(null);
+  const assignRef = useCallback(
+    (node) => {
+      innerRef.current = node;
+      applyRef(ref, node);
+    },
+    [ref]
+  );
+  return { assignRef, innerRef };
+}
+function usePromptInput({
+  defaultValue,
+  isControlled,
+  onSubmit,
+  onValueChange,
+  ref,
+  value
+}) {
+  const { assignRef, innerRef } = useMergedRef(ref);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? value ?? "" : internalValue;
+  useEffect(() => {
+    autoResize(innerRef.current);
+  }, [currentValue, innerRef]);
+  const handleChange = useCallback(
+    (event) => {
+      if (!isControlled) {
+        setInternalValue(event.target.value);
+      }
+      onValueChange?.(event.target.value);
+    },
+    [isControlled, onValueChange]
+  );
+  const submit = useCallback(() => {
+    if (currentValue.trim().length === 0) {
+      return;
+    }
+    onSubmit?.(currentValue);
+    if (!isControlled) {
+      setInternalValue("");
+    }
+  }, [currentValue, isControlled, onSubmit]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === SUBMIT_KEY && !event.shiftKey) {
+        event.preventDefault();
+        submit();
+      }
+    },
+    [submit]
+  );
+  const handleFormSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      submit();
+    },
+    [submit]
+  );
+  return {
+    assignRef,
+    currentValue,
+    handleChange,
+    handleFormSubmit,
+    handleKeyDown
+  };
+}
+function PromptInputActions({
+  canSubmit,
+  isLoading,
+  submitLabel,
+  toolbar
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: toolbar }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": submitLabel,
+        className: "inline-flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40",
+        disabled: !canSubmit,
+        type: "submit",
+        children: isLoading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(SendHorizontal, { className: "size-4" })
+      }
+    )
+  ] });
+}
+const PromptInput = forwardRef(
+  ({
+    className,
+    defaultValue = "",
+    disabled = false,
+    isLoading = false,
+    maxRows = 8,
+    minRows = 1,
+    onSubmit,
+    onValueChange,
+    placeholder = "Send a message\u2026",
+    submitLabel = "Send",
+    toolbar,
+    value
+  }, ref) => {
+    const isControlled = value !== void 0;
+    const {
+      assignRef,
+      currentValue,
+      handleChange,
+      handleFormSubmit,
+      handleKeyDown
+    } = usePromptInput({
+      defaultValue,
+      isControlled,
+      onSubmit,
+      onValueChange,
+      ref,
+      value
+    });
+    const canSubmit = !disabled && !isLoading && currentValue.trim().length > 0;
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: cn(
+          "flex flex-col gap-2 rounded-2xl border border-border bg-background p-2 shadow-sm transition-colors focus-within:ring-1 focus-within:ring-ring",
+          className
+        ),
+        onSubmit: handleFormSubmit,
+        children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              "aria-label": placeholder,
+              className: "w-full resize-none bg-transparent px-2 py-1.5 text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              disabled,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              placeholder,
+              ref: assignRef,
+              style: {
+                maxHeight: `${maxRows * REM_PER_ROW}rem`,
+                minHeight: `${minRows * REM_PER_ROW}rem`,
+                overflowY: "auto"
+              },
+              value: currentValue
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PromptInputActions,
+            {
+              canSubmit,
+              isLoading,
+              submitLabel,
+              toolbar
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PromptInput.displayName = "PromptInput";
+export {
+  PromptInput
+};

package/dist/components/prompt-templates/index.js

@@ -0,0 +1,6 @@
+import {
+  PromptTemplates
+} from "./prompt-templates";
+export {
+  PromptTemplates
+};

package/dist/components/prompt-templates/prompt-templates.js

@@ -0,0 +1,395 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useMemo,
+  useState
+} from "react";
+import { Search, Sparkles } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+const VARIABLE_PATTERN = /{{\s*([\w-]+)\s*}}/g;
+const ALL_CATEGORY_VALUE = "__all__";
+const DEFAULT_LABELS = {
+  allCategory: "All",
+  cancel: "Cancel",
+  empty: "No prompts found.",
+  insert: "Insert",
+  searchPlaceholder: "Search prompts\u2026",
+  use: "Use template",
+  variablesHeading: "Fill in the placeholders"
+};
+function detectVariables(template) {
+  if (template.variables) return template.variables;
+  const matches = [...template.template.matchAll(VARIABLE_PATTERN)];
+  const seen = /* @__PURE__ */ new Set();
+  return matches.reduce((accumulator, match) => {
+    const name = match[1];
+    if (name && !seen.has(name)) {
+      seen.add(name);
+      accumulator.push(name);
+    }
+    return accumulator;
+  }, []);
+}
+function fillTemplate(template, values) {
+  return template.replaceAll(
+    VARIABLE_PATTERN,
+    (_match, name) => values[name] ?? `{{${name}}}`
+  );
+}
+function matchesCategory(template, selected) {
+  if (selected === ALL_CATEGORY_VALUE) return true;
+  return template.category === selected;
+}
+function matchesQuery(template, query) {
+  if (!query) return true;
+  const lowered = query.toLowerCase();
+  const title = typeof template.title === "string" ? template.title.toLowerCase() : "";
+  const description = typeof template.description === "string" ? template.description.toLowerCase() : "";
+  return title.includes(lowered) || description.includes(lowered);
+}
+function FilterBar({
+  categories,
+  labels,
+  onCategoryChange,
+  onQueryChange,
+  query,
+  searchId,
+  selectedCategory
+}) {
+  const handleSearch = (event) => {
+    onQueryChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Search,
+        {
+          "aria-hidden": "true",
+          className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-label": labels.searchPlaceholder,
+          className: "pl-9",
+          id: searchId,
+          onChange: handleSearch,
+          placeholder: labels.searchPlaceholder,
+          type: "search",
+          value: query
+        }
+      )
+    ] }),
+    categories.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        CategoryChip,
+        {
+          active: selectedCategory === ALL_CATEGORY_VALUE,
+          label: labels.allCategory,
+          onClick: () => {
+            onCategoryChange(ALL_CATEGORY_VALUE);
+          },
+          value: ALL_CATEGORY_VALUE
+        }
+      ),
+      categories.map((category) => /* @__PURE__ */ jsx(
+        CategoryChip,
+        {
+          active: selectedCategory === category.name,
+          icon: category.icon,
+          label: category.name,
+          onClick: () => {
+            onCategoryChange(category.name);
+          },
+          value: category.name
+        },
+        category.name
+      ))
+    ] }) : null
+  ] });
+}
+function CategoryChip({
+  active,
+  icon,
+  label,
+  onClick,
+  value
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-pressed": active,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        active ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-foreground hover:bg-accent"
+      ),
+      "data-value": value,
+      onClick,
+      type: "button",
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "[&>svg]:h-3.5 [&>svg]:w-3.5", children: icon }) : null,
+        label
+      ]
+    }
+  );
+}
+function CardHeader({
+  category,
+  description,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold tracking-tight text-foreground", children: title }),
+    description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description }) : null,
+    category ? /* @__PURE__ */ jsx(Badge, { className: "self-start", variant: "outline", children: category }) : null
+  ] });
+}
+function CardActions({
+  onUse,
+  useLabel,
+  variableCount
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+    variableCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      variableCount.toString(),
+      " variable",
+      variableCount === 1 ? "" : "s"
+    ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        onClick: onUse,
+        size: "sm",
+        type: "button",
+        variant: variableCount > 0 ? "outline" : "default",
+        children: [
+          /* @__PURE__ */ jsx(Sparkles, { "aria-hidden": "true", className: "mr-2 size-3.5" }),
+          useLabel
+        ]
+      }
+    )
+  ] });
+}
+function PromptTemplateCard({
+  active,
+  labels,
+  onActivate,
+  onCancel,
+  onResolve,
+  onValueChange,
+  template,
+  values
+}) {
+  const variables = detectVariables(template);
+  const handleUse = useCallback(() => {
+    if (variables.length === 0) {
+      onResolve(template.template, template);
+      return;
+    }
+    if (active) {
+      onResolve(fillTemplate(template.template, values), template);
+      return;
+    }
+    onActivate(template);
+  }, [active, onActivate, onResolve, template, values, variables.length]);
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: "flex flex-col gap-3 rounded-xl border border-border bg-background p-4 shadow-sm",
+      "data-template-id": template.id,
+      children: [
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            category: template.category,
+            description: template.description,
+            title: template.title
+          }
+        ),
+        active && variables.length > 0 ? /* @__PURE__ */ jsx(
+          VariableForm,
+          {
+            fieldIdPrefix: template.id,
+            labels,
+            onCancel,
+            onSubmit: handleUse,
+            onValueChange,
+            values,
+            variables
+          }
+        ) : /* @__PURE__ */ jsx(
+          CardActions,
+          {
+            onUse: handleUse,
+            useLabel: labels.use,
+            variableCount: variables.length
+          }
+        )
+      ]
+    }
+  );
+}
+function VariableField({
+  fieldId,
+  name,
+  onValueChange,
+  value
+}) {
+  const handleVariableValueChange = useCallback(
+    (event) => {
+      onValueChange(name, event.target.value);
+    },
+    [name, onValueChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 text-xs", children: [
+    /* @__PURE__ */ jsx("label", { className: "font-medium text-foreground", htmlFor: fieldId, children: name }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: fieldId,
+        onChange: handleVariableValueChange,
+        placeholder: `Value for ${name}`,
+        value
+      }
+    )
+  ] });
+}
+function VariableForm({
+  fieldIdPrefix,
+  labels,
+  onCancel,
+  onSubmit,
+  onValueChange,
+  values,
+  variables
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-lg border border-dashed border-border bg-muted/30 p-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.variablesHeading }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: variables.map((name) => /* @__PURE__ */ jsx(
+      VariableField,
+      {
+        fieldId: `${fieldIdPrefix}-${name}`,
+        name,
+        onValueChange,
+        value: values[name] ?? ""
+      },
+      name
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onCancel, size: "sm", type: "button", variant: "ghost", children: labels.cancel }),
+      /* @__PURE__ */ jsx(Button, { onClick: onSubmit, size: "sm", type: "button", children: labels.insert })
+    ] })
+  ] });
+}
+function usePromptTemplatesController(templates, onSelect) {
+  const searchId = useId();
+  const [query, setQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState(ALL_CATEGORY_VALUE);
+  const [activeId, setActiveId] = useState(null);
+  const [values, setValues] = useState({});
+  const filtered = useMemo(
+    () => templates.filter(
+      (template) => matchesCategory(template, selectedCategory) && matchesQuery(template, query)
+    ),
+    [query, selectedCategory, templates]
+  );
+  const handleActivate = useCallback((template) => {
+    setActiveId(template.id);
+    setValues({});
+  }, []);
+  const handleCancel = useCallback(() => {
+    setActiveId(null);
+    setValues({});
+  }, []);
+  const handleResolve = useCallback(
+    (resolved, template) => {
+      onSelect?.(resolved, template);
+      setActiveId(null);
+      setValues({});
+    },
+    [onSelect]
+  );
+  const handleValueChange = useCallback((name, value) => {
+    setValues((current) => ({ ...current, [name]: value }));
+  }, []);
+  return {
+    activeId,
+    filtered,
+    handleActivate,
+    handleCancel,
+    handleCategoryChange: setSelectedCategory,
+    handleQueryChange: setQuery,
+    handleResolve,
+    handleValueChange,
+    query,
+    searchId,
+    selectedCategory,
+    values
+  };
+}
+function TemplateGrid({ controller, labels }) {
+  if (controller.filtered.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "rounded-lg border border-dashed border-border p-6 text-center text-sm text-muted-foreground", children: labels.empty });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3", children: controller.filtered.map((template) => /* @__PURE__ */ jsx(
+    PromptTemplateCard,
+    {
+      active: controller.activeId === template.id,
+      labels,
+      onActivate: controller.handleActivate,
+      onCancel: controller.handleCancel,
+      onResolve: controller.handleResolve,
+      onValueChange: controller.handleValueChange,
+      template,
+      values: controller.values
+    },
+    template.id
+  )) });
+}
+const PromptTemplates = forwardRef(
+  (props, ref) => {
+    const { categories, className, labels, onSelect, templates, ...rest } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const controller = usePromptTemplatesController(templates, onSelect);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: cn(
+          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            FilterBar,
+            {
+              categories: categories ?? [],
+              labels: resolvedLabels,
+              onCategoryChange: controller.handleCategoryChange,
+              onQueryChange: controller.handleQueryChange,
+              query: controller.query,
+              searchId: controller.searchId,
+              selectedCategory: controller.selectedCategory
+            }
+          ),
+          /* @__PURE__ */ jsx(TemplateGrid, { controller, labels: resolvedLabels })
+        ]
+      }
+    );
+  }
+);
+PromptTemplates.displayName = "PromptTemplates";
+export {
+  PromptTemplates
+};

package/dist/components/property-section/index.js

@@ -0,0 +1,6 @@
+import {
+  PropertySection
+} from "./property-section";
+export {
+  PropertySection
+};

package/dist/components/property-section/property-section.js

@@ -0,0 +1,101 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Properties"
+};
+const Grid = (props) => /* @__PURE__ */ jsx(
+  "dl",
+  {
+    className: "grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 px-3 pb-3 pt-1 text-xs",
+    "data-property-grid": true,
+    children: props.entries.map((entry) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+      /* @__PURE__ */ jsxs(
+        "dt",
+        {
+          className: "flex flex-col text-muted-foreground",
+          "data-property-id": entry.id,
+          children: [
+            /* @__PURE__ */ jsx("span", { children: entry.label }),
+            entry.sublabel ? /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground/70", children: entry.sublabel }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("dd", { className: "text-right text-foreground", children: entry.value })
+    ] }, entry.id))
+  }
+);
+const Body = (props) => {
+  const grid = /* @__PURE__ */ jsx(Grid, { entries: props.entries });
+  if (!props.title) {
+    return grid;
+  }
+  if (props.collapsible) {
+    return /* @__PURE__ */ jsxs("details", { className: "group", open: true, children: [
+      /* @__PURE__ */ jsxs(
+        "summary",
+        {
+          className: "flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground",
+          "data-property-summary": true,
+          children: [
+            /* @__PURE__ */ jsx("span", { children: props.title }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-muted-foreground/70 group-open:rotate-90",
+                children: "\u203A"
+              }
+            )
+          ]
+        }
+      ),
+      grid
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "header",
+      {
+        className: "flex items-center justify-between gap-2 border-b border-border px-3 py-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground",
+        "data-property-header": true,
+        children: props.title
+      }
+    ),
+    grid
+  ] });
+};
+const PropertySection = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      collapsible = false,
+      entries,
+      labels,
+      title,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "rounded-lg border bg-background text-foreground",
+          className
+        ),
+        "data-property-section": true,
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsx(Body, { collapsible, entries, title })
+      }
+    );
+  }
+);
+PropertySection.displayName = "PropertySection";
+export {
+  PropertySection
+};

package/dist/components/qr-code/index.js

@@ -0,0 +1,4 @@
+import { QrCode } from "./qr-code";
+export {
+  QrCode
+};