@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

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/quiz/quiz.js

@@ -32,7 +32,7 @@ function QuizOptionButton({
           showResult ? option.correct ? /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-4 w-4 text-green-500",
+              className: "size-4 text-green-500",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -49,7 +49,7 @@ function QuizOptionButton({
           ) : /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-4 w-4 text-red-500",
+              className: "size-4 text-red-500",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -67,7 +67,7 @@ function QuizOptionButton({
           submitted && !isSelected && option.correct ? /* @__PURE__ */ jsx(
             "svg",
             {
-              className: "h-4 w-4 text-green-500/50",
+              className: "size-4 text-green-500/50",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
@@ -118,6 +118,7 @@ function QuizResult({
   );
 }
 function Quiz({
+  as: Heading = "h4",
   className,
   explanation,
   hint,
@@ -144,7 +145,7 @@ function Quiz({
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "h-5 w-5 text-primary flex-shrink-0 mt-0.5",
+          className: "size-5 text-primary flex-shrink-0 mt-0.5",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",
@@ -159,7 +160,7 @@ function Quiz({
           )
         }
       ),
-      /* @__PURE__ */ jsx("h4", { className: "font-semibold text-foreground", children: question })
+      /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-foreground", children: question })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-4", children: options.map((opt, index) => /* @__PURE__ */ jsx(
       QuizOptionButton,
@@ -172,7 +173,7 @@ function Quiz({
         selectedIndex,
         submitted
       },
-      index
+      `quiz-option-${index}-${opt.label}`
     )) }),
     hint && !submitted ? /* @__PURE__ */ jsx(
       QuizHint,

package/dist/components/radio-group/radio-group.js

@@ -20,12 +20,12 @@ const RadioGroupItem = forwardRef(({ className, ...props }, ref) => {
     RadioGroupPrimitive.Item,
     {
       className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square size-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       ),
       ref,
       ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "size-2.5 fill-current text-current" }) })
     }
   );
 });

package/dist/components/rating/rating.js

@@ -4,9 +4,9 @@ import { useMemo, useState } from "react";
 import { Star } from "lucide-react";
 import { cn } from "../../lib/utils";
 const sizeClasses = {
-  lg: "h-6 w-6",
-  md: "h-5 w-5",
-  sm: "h-4 w-4"
+  lg: "size-6",
+  md: "size-5",
+  sm: "size-4"
 };
 function RatingStars({
   activeValue,

package/dist/components/relationship-inspector/index.js

@@ -0,0 +1,6 @@
+import {
+  RelationshipInspector
+} from "./relationship-inspector";
+export {
+  RelationshipInspector
+};