@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

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/badge";
+import { Button } from "../button/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "../command/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/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 size-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: "size-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 size-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/navbar-saas/navbar-saas.js

@@ -4,35 +4,36 @@ import { Menu, X } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
-import { useSidebar } from "../sidebar-provider";
-import { ThemeToggle } from "../theme-toggle";
-import { useMobile } from "./use-mobile";
+import { Button } from "../button/button";
+import { useSidebar } from "../sidebar-provider/sidebar-provider";
+import { ThemeToggle } from "../theme-toggle/theme-toggle";
+const EMPTY_NAV_ITEMS = [];
 function NavbarSaas({
   brand,
-  navItems = [],
+  navItems = EMPTY_NAV_ITEMS,
   rightSlot,
   showMobileMenu = true
 }) {
   const pathname = usePathname();
   const { open, setOpen } = useSidebar();
-  const isMobile = useMobile();
   return /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-16 items-center justify-between px-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      showMobileMenu && isMobile ? /* @__PURE__ */ jsx(
+      showMobileMenu ? /* @__PURE__ */ jsx(
         Button,
         {
-          className: "lg:hidden",
+          "aria-expanded": open,
+          "aria-label": "Toggle sidebar",
+          "data-testid": "navbar-saas-mobile-trigger",
           onClick: () => {
             setOpen(!open);
           },
           size: "icon",
           variant: "ghost",
-          children: open ? /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Menu, { className: "h-4 w-4" })
+          children: open ? /* @__PURE__ */ jsx(X, { className: "size-4" }) : /* @__PURE__ */ jsx(Menu, { className: "size-4" })
         }
       ) : null,
       brand ? typeof brand === "string" ? /* @__PURE__ */ jsx(Link, { className: "text-xl font-bold truncate", href: "/", children: brand }) : brand : null,
-      navItems.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "hidden md:flex gap-6", children: navItems.map((item) => /* @__PURE__ */ jsx(
+      navItems.length > 0 ? /* @__PURE__ */ jsx("nav", { className: "hidden lg:flex gap-6", children: navItems.map((item) => /* @__PURE__ */ jsx(
         Link,
         {
           className: cn(

package/dist/components/navigation-menu/navigation-menu.js

@@ -50,7 +50,7 @@ const NavigationMenuTrigger = forwardRef(({ children, className, ...props }, ref
         ChevronDown,
         {
           "aria-hidden": "true",
-          className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+          className: "relative top-[1px] ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
         }
       )
     ]
@@ -91,7 +91,7 @@ const NavigationMenuIndicator = forwardRef(({ className, ...props }, ref) => /*
     ),
     ref,
     ...props,
-    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;

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

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

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

@@ -0,0 +1,269 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useReducer,
+  useRef
+} from "react";
+import { CheckCircle2, Loader2, XCircle } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const DEFAULT_LABELS = {
+  emailInvalid: "Enter a valid email address.",
+  emailLabel: "Email address",
+  errorFallback: "Something went wrong. Try again.",
+  placeholder: "you@example.com",
+  sending: "Subscribing\u2026",
+  submit: "Subscribe",
+  success: "You're on the list. Check your inbox to confirm.",
+  tryAgain: "Try again"
+};
+function reducer(state, action) {
+  switch (action.kind) {
+    case "fail":
+      return { kind: "error", message: action.message };
+    case "reset":
+      return { kind: "idle" };
+    case "send":
+      return state.kind === "sending" ? state : { kind: "sending" };
+    case "succeed":
+      return { kind: "sent" };
+  }
+}
+function actionToStatus(action) {
+  switch (action.kind) {
+    case "fail":
+      return "error";
+    case "reset":
+      return "idle";
+    case "send":
+      return "sending";
+    case "succeed":
+      return "sent";
+  }
+}
+function defaultValidate(email, label) {
+  const trimmed = email.trim();
+  if (!trimmed) return label;
+  if (!EMAIL_PATTERN.test(trimmed)) return label;
+  return true;
+}
+function extractErrorMessage(value, fallback) {
+  if (value instanceof Error && value.message) return value.message;
+  if (typeof value === "string" && value.length > 0) return value;
+  return fallback;
+}
+function SubmitButton({
+  labels,
+  stacked,
+  status
+}) {
+  let content;
+  if (status === "sending") {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "mr-2 size-4 animate-spin" }),
+      labels.sending
+    ] });
+  } else if (status === "error") {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(XCircle, { "aria-hidden": "true", className: "mr-2 size-4" }),
+      labels.tryAgain
+    ] });
+  } else {
+    content = labels.submit;
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: stacked ? "w-full" : "",
+      disabled: status === "sending",
+      type: "submit",
+      children: content
+    }
+  );
+}
+function SuccessPanel({ className, message }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      className: cn(
+        "flex items-start gap-2 rounded-lg border border-emerald-500/40 bg-emerald-500/10 p-3 text-sm text-emerald-900 dark:text-emerald-200",
+        className
+      ),
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsx(CheckCircle2, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: message })
+      ]
+    }
+  );
+}
+function useNewsletterSignupController(options) {
+  const { labels, onStatusChange, onSubmit, validate } = options;
+  const inputRef = useRef(null);
+  const [state, dispatch] = useReducer(reducer, { kind: "idle" });
+  const status = state.kind;
+  const transition = useCallback(
+    (action) => {
+      dispatch(action);
+      onStatusChange?.(actionToStatus(action));
+    },
+    [onStatusChange]
+  );
+  const handleChange = useCallback(() => {
+    if (state.kind === "error") transition({ kind: "reset" });
+  }, [state.kind, transition]);
+  const performSubmit = useCallback(
+    async (value) => {
+      const validator = validate ?? ((email) => defaultValidate(email, labels.emailInvalid));
+      const validation = validator(value);
+      if (validation !== true) {
+        transition({ kind: "fail", message: validation });
+        inputRef.current?.focus();
+        return;
+      }
+      transition({ kind: "send" });
+      try {
+        await onSubmit(value);
+        transition({ kind: "succeed" });
+      } catch (error) {
+        transition({
+          kind: "fail",
+          message: extractErrorMessage(error, labels.errorFallback)
+        });
+        inputRef.current?.focus();
+      }
+    },
+    [labels.emailInvalid, labels.errorFallback, onSubmit, transition, validate]
+  );
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (state.kind === "sending") return;
+      const value = inputRef.current?.value.trim() ?? "";
+      void performSubmit(value);
+    },
+    [performSubmit, state.kind]
+  );
+  return {
+    errorMessage: state.kind === "error" ? state.message : null,
+    handleChange,
+    handleSubmit,
+    inputRef,
+    status
+  };
+}
+const NewsletterSignup = forwardRef((props, ref) => {
+  const {
+    autoComplete = "email",
+    className,
+    labels,
+    onStatusChange,
+    onSubmit,
+    validate,
+    variant = "inline",
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const inputId = useId();
+  const errorId = useId();
+  const controller = useNewsletterSignupController({
+    labels: resolvedLabels,
+    onStatusChange,
+    onSubmit,
+    validate
+  });
+  if (controller.status === "sent") {
+    return /* @__PURE__ */ jsx(SuccessPanel, { className, message: resolvedLabels.success });
+  }
+  return /* @__PURE__ */ jsx(
+    FormBody,
+    {
+      autoComplete,
+      className,
+      errorId,
+      formRef: ref,
+      inputId,
+      inputRef: controller.inputRef,
+      labels: resolvedLabels,
+      message: controller.errorMessage,
+      onChange: controller.handleChange,
+      onSubmit: controller.handleSubmit,
+      rest,
+      stacked: variant === "stacked",
+      status: controller.status
+    }
+  );
+});
+NewsletterSignup.displayName = "NewsletterSignup";
+function FormBody({
+  autoComplete,
+  className,
+  errorId,
+  formRef,
+  inputId,
+  inputRef,
+  labels,
+  message,
+  onChange,
+  onSubmit,
+  rest,
+  stacked,
+  status
+}) {
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      "aria-busy": status === "sending",
+      className: cn(
+        "flex w-full",
+        stacked ? "flex-col gap-2" : "flex-col gap-2 sm:flex-row sm:items-start",
+        className
+      ),
+      noValidate: true,
+      onSubmit,
+      ref: formRef,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", stacked ? "" : "sm:flex-1"), children: [
+          /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: inputId, children: labels.emailLabel }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              "aria-describedby": message ? errorId : void 0,
+              "aria-invalid": message !== null,
+              autoComplete,
+              disabled: status === "sending",
+              id: inputId,
+              name: "email",
+              onChange,
+              placeholder: labels.placeholder,
+              ref: inputRef,
+              type: "email"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              "aria-live": "assertive",
+              className: cn("text-xs", message ? "text-destructive" : "sr-only"),
+              id: errorId,
+              role: "alert",
+              children: message ?? ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(SubmitButton, { labels, stacked, status })
+      ]
+    }
+  );
+}
+export {
+  NewsletterSignup,
+  reducer as newsletterSignupReducer
+};