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

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

@@ -0,0 +1,4 @@
+import { NativeSelect } from "./native-select";
+export {
+  NativeSelect
+};

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

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+const NativeSelect = React.forwardRef(
+  ({ children, className, rootClassName, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", rootClassName), children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        ...props,
+        className: cn(
+          "h-10 w-full appearance-none rounded-md border border-input bg-background py-2 pl-3 pr-8 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 opacity-50" })
+  ] })
+);
+NativeSelect.displayName = "NativeSelect";
+export {
+  NativeSelect
+};

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
+};