@vllnt/ui 0.1.8 → 0.1.11-canary.54f8a77

package/dist/components/data-list/data-list.js

@@ -0,0 +1,99 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const dataListVariants = cva(
+  "grid rounded-xl border bg-card text-card-foreground",
+  {
+    defaultVariants: {
+      density: "default"
+    },
+    variants: {
+      density: {
+        compact: "divide-y",
+        default: "divide-y"
+      }
+    }
+  }
+);
+const dataListItemVariants = cva(
+  "grid gap-1 px-4 py-4 sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4 sm:px-5",
+  {
+    defaultVariants: {
+      density: "default"
+    },
+    variants: {
+      density: {
+        compact: "py-3",
+        default: "py-4"
+      }
+    }
+  }
+);
+const DataListContext = React.createContext({
+  density: "default"
+});
+const DataList = React.forwardRef(
+  ({ className, density, ...props }, reference) => {
+    const resolvedDensity = density ?? "default";
+    const contextValue = React.useMemo(
+      () => ({ density: resolvedDensity }),
+      [resolvedDensity]
+    );
+    return /* @__PURE__ */ jsx(DataListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "dl",
+      {
+        className: cn(
+          dataListVariants({ density: resolvedDensity }),
+          className
+        ),
+        ref: reference,
+        ...props
+      }
+    ) });
+  }
+);
+DataList.displayName = "DataList";
+const DataListItem = React.forwardRef(
+  ({ className, density, ...props }, reference) => {
+    const context = React.useContext(DataListContext);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          dataListItemVariants({ density: density ?? context.density }),
+          className
+        ),
+        ref: reference,
+        ...props
+      }
+    );
+  }
+);
+DataListItem.displayName = "DataListItem";
+const DataListLabel = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  "dt",
+  {
+    className: cn("text-sm font-medium text-muted-foreground", className),
+    ref: reference,
+    ...props
+  }
+));
+DataListLabel.displayName = "DataListLabel";
+const DataListValue = React.forwardRef(({ className, ...props }, reference) => /* @__PURE__ */ jsx(
+  "dd",
+  {
+    className: cn("m-0 text-sm leading-6 text-foreground", className),
+    ref: reference,
+    ...props
+  }
+));
+DataListValue.displayName = "DataListValue";
+export {
+  DataList,
+  DataListItem,
+  DataListLabel,
+  DataListValue,
+  dataListItemVariants,
+  dataListVariants
+};

package/dist/components/data-list/index.js

@@ -0,0 +1,16 @@
+import {
+  DataList,
+  DataListItem,
+  dataListItemVariants,
+  DataListLabel,
+  DataListValue,
+  dataListVariants
+} from "./data-list";
+export {
+  DataList,
+  DataListItem,
+  DataListLabel,
+  DataListValue,
+  dataListItemVariants,
+  dataListVariants
+};

package/dist/components/data-table/data-table.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import { Checkbox } from "../checkbox";
+import { Input } from "../input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../table";
+function SortIcon({ direction }) {
+  if (direction === "asc") {
+    return /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" });
+  }
+  if (direction === "desc") {
+    return /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" });
+  }
+  return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" });
+}
+function DataTableComponent({
+  caption,
+  className,
+  columns,
+  data,
+  emptyMessage = "No results found.",
+  enableFiltering = true,
+  enablePagination = true,
+  enableSelection = false,
+  filterableColumns = [],
+  getRowId,
+  pageSize = 10,
+  searchPlaceholder = "Search rows...",
+  ...props
+}) {
+  const [sorting, setSorting] = React.useState([]);
+  const [globalFilter, setGlobalFilter] = React.useState("");
+  const [columnFilters, setColumnFilters] = React.useState(
+    []
+  );
+  const [rowSelection, setRowSelection] = React.useState({});
+  const selectionColumn = React.useMemo(
+    () => ({
+      cell: ({ row }) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          "aria-label": `Select row ${row.index + 1}`,
+          checked: row.getIsSelected(),
+          onCheckedChange: (checked) => {
+            row.toggleSelected(Boolean(checked));
+          }
+        }
+      ),
+      enableHiding: false,
+      enableSorting: false,
+      header: ({ table: table2 }) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          "aria-label": "Select all rows",
+          checked: table2.getIsAllPageRowsSelected() ? true : table2.getIsSomePageRowsSelected() ? "indeterminate" : false,
+          onCheckedChange: (checked) => {
+            table2.toggleAllPageRowsSelected(Boolean(checked));
+          }
+        }
+      ),
+      id: "select",
+      size: 40
+    }),
+    []
+  );
+  const resolvedColumns = React.useMemo(
+    () => enableSelection ? [selectionColumn, ...columns] : columns,
+    [columns, enableSelection, selectionColumn]
+  );
+  const table = useReactTable({
+    columns: resolvedColumns,
+    data,
+    enableRowSelection: enableSelection,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getRowId,
+    getSortedRowModel: getSortedRowModel(),
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize
+      }
+    },
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    state: {
+      columnFilters,
+      globalFilter,
+      rowSelection,
+      sorting
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), ...props, children: [
+    enableFiltering ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border bg-card p-4 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: "w-full sm:max-w-sm",
+          onChange: (event) => {
+            setGlobalFilter(event.target.value);
+          },
+          placeholder: searchPlaceholder,
+          value: globalFilter
+        }
+      ),
+      filterableColumns.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: filterableColumns.map((filter) => {
+        const column = table.getColumn(filter.columnId);
+        const value = column?.getFilterValue();
+        const selectValue = typeof value === "string" && value ? value : "all";
+        return column ? /* @__PURE__ */ jsxs(
+          Select,
+          {
+            onValueChange: (nextValue) => {
+              column.setFilterValue(
+                nextValue === "all" ? void 0 : nextValue
+              );
+            },
+            value: selectValue,
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "w-[180px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: filter.label }) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsxs(SelectItem, { value: "all", children: [
+                  "All ",
+                  filter.label
+                ] }),
+                filter.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value))
+              ] })
+            ]
+          },
+          filter.columnId
+        ) : null;
+      }) }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "rounded-xl border bg-card", children: /* @__PURE__ */ jsxs(Table, { children: [
+      caption ? /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }) : null,
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+        Button,
+        {
+          className: "-ml-3 h-8 px-3 text-xs font-medium",
+          onClick: header.column.getToggleSortingHandler(),
+          type: "button",
+          variant: "ghost",
+          children: [
+            flexRender(
+              header.column.columnDef.header,
+              header.getContext()
+            ),
+            /* @__PURE__ */ jsx(SortIcon, { direction: header.column.getIsSorted() })
+          ]
+        }
+      ) : flexRender(
+        header.column.columnDef.header,
+        header.getContext()
+      ) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          "data-state": row.getIsSelected() ? "selected" : void 0,
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          className: "h-24 text-center text-muted-foreground",
+          colSpan: resolvedColumns.length,
+          children: emptyMessage
+        }
+      ) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border bg-card p-4 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsx("div", { children: enableSelection ? `${table.getSelectedRowModel().rows.length} selected` : `${table.getFilteredRowModel().rows.length} rows` }),
+      enablePagination ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 self-end sm:self-auto", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: !table.getCanPreviousPage(),
+            onClick: () => {
+              table.previousPage();
+            },
+            type: "button",
+            variant: "outline",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "min-w-24 text-center text-xs uppercase tracking-wide text-muted-foreground", children: [
+          "Page ",
+          table.getState().pagination.pageIndex + 1,
+          " of",
+          " ",
+          table.getPageCount()
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: !table.getCanNextPage(),
+            onClick: () => {
+              table.nextPage();
+            },
+            type: "button",
+            variant: "outline",
+            children: "Next"
+          }
+        )
+      ] }) : null
+    ] })
+  ] });
+}
+export {
+  DataTableComponent as DataTable
+};

package/dist/components/data-table/index.js

@@ -0,0 +1,6 @@
+import {
+  DataTable
+} from "./data-table";
+export {
+  DataTable
+};

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+import { Calendar } from "../calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+const defaultDateFormatter = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  month: "long",
+  year: "numeric"
+});
+const DatePicker = React.forwardRef(
+  ({
+    buttonClassName,
+    calendarProps,
+    className,
+    onValueChange,
+    placeholder = "Pick a date",
+    value
+  }, reference) => {
+    const [open, setOpen] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(
+      value
+    );
+    const selectedDate = value ?? internalValue;
+    React.useEffect(() => {
+      if (value !== void 0) {
+        setInternalValue(value);
+      }
+    }, [value]);
+    const handleSelect = (nextDate) => {
+      if (value === void 0) {
+        setInternalValue(nextDate);
+      }
+      onValueChange?.(nextDate);
+      if (nextDate) {
+        setOpen(false);
+      }
+    };
+    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          className: cn(
+            "w-full justify-start text-left font-normal",
+            !selectedDate && "text-muted-foreground",
+            buttonClassName
+          ),
+          ref: reference,
+          variant: "outline",
+          children: [
+            /* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }),
+            selectedDate ? defaultDateFormatter.format(selectedDate) : placeholder
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: cn("w-auto p-0", className), children: /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "single",
+          onSelect: handleSelect,
+          selected: selectedDate,
+          ...calendarProps
+        }
+      ) })
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker
+};

package/dist/components/date-picker/index.js

@@ -0,0 +1,4 @@
+import { DatePicker } from "./date-picker";
+export {
+  DatePicker
+};

package/dist/components/file-upload/file-upload.js

@@ -0,0 +1,227 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FileUp, UploadCloud, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button";
+function useFileUploadState(controlledFiles, multiple, onFilesChange) {
+  const [internalFiles, setInternalFiles] = React.useState(
+    controlledFiles ?? []
+  );
+  React.useEffect(() => {
+    if (controlledFiles !== void 0) {
+      setInternalFiles(controlledFiles);
+    }
+  }, [controlledFiles]);
+  const resolvedFiles = controlledFiles ?? internalFiles;
+  const updateFiles = React.useCallback(
+    (nextFiles) => {
+      if (controlledFiles === void 0) {
+        setInternalFiles(nextFiles);
+      }
+      onFilesChange?.(nextFiles);
+    },
+    [controlledFiles, onFilesChange]
+  );
+  const addFiles = React.useCallback(
+    (incomingFiles) => {
+      const nextFiles = [...incomingFiles];
+      updateFiles(
+        multiple ? [...resolvedFiles, ...nextFiles] : nextFiles.slice(0, 1)
+      );
+    },
+    [multiple, resolvedFiles, updateFiles]
+  );
+  const removeFile = React.useCallback(
+    (fileToRemove) => {
+      updateFiles(
+        resolvedFiles.filter(
+          (file) => !(file.name === fileToRemove.name && file.size === fileToRemove.size && file.lastModified === fileToRemove.lastModified)
+        )
+      );
+    },
+    [resolvedFiles, updateFiles]
+  );
+  return { addFiles, removeFile, resolvedFiles };
+}
+function assignInputReference(reference, node) {
+  if (typeof reference === "function") {
+    reference(node);
+    return;
+  }
+  if (reference) {
+    reference.current = node;
+  }
+}
+function FileListItem({
+  file,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between rounded-md border bg-muted/30 px-3 py-2 text-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "truncate font-medium", children: file.name }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        (file.size / 1024).toFixed(1),
+        " KB"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": `Remove ${file.name}`,
+        onClick: onRemove,
+        size: "icon",
+        type: "button",
+        variant: "ghost",
+        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+      }
+    )
+  ] });
+}
+function FileUploadDropzone({
+  browseLabel,
+  children,
+  disabled,
+  dropzoneText,
+  helperText,
+  isDragging,
+  onActivate,
+  onDragStateChange,
+  onFilesDrop
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-40 cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-input bg-background px-6 py-8 text-center transition-colors",
+        isDragging && "border-primary bg-accent/40",
+        disabled && "cursor-not-allowed opacity-50"
+      ),
+      onClick: onActivate,
+      onDragEnter: (event) => {
+        event.preventDefault();
+        if (!disabled) {
+          onDragStateChange(true);
+        }
+      },
+      onDragLeave: (event) => {
+        event.preventDefault();
+        onDragStateChange(false);
+      },
+      onDragOver: (event) => {
+        event.preventDefault();
+      },
+      onDrop: (event) => {
+        event.preventDefault();
+        onDragStateChange(false);
+        if (!disabled && event.dataTransfer.files.length > 0) {
+          onFilesDrop(event.dataTransfer.files);
+        }
+      },
+      onKeyDown: (event) => {
+        if ((event.key === "Enter" || event.key === " ") && !disabled) {
+          event.preventDefault();
+          onActivate();
+        }
+      },
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      children: [
+        /* @__PURE__ */ jsx(UploadCloud, { className: "mb-3 h-10 w-10 text-muted-foreground" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium", children: dropzoneText }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: helperText })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "mt-4 inline-flex h-10 items-center justify-center rounded-md border border-input bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm", children: [
+          /* @__PURE__ */ jsx(FileUp, { className: "mr-2 h-4 w-4" }),
+          browseLabel
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function FileUploadList({
+  files,
+  onRemove
+}) {
+  if (files.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: files.map((file) => /* @__PURE__ */ jsx(
+    FileListItem,
+    {
+      file,
+      onRemove: () => {
+        onRemove(file);
+      }
+    },
+    `${file.name}-${file.lastModified}-${file.size}`
+  )) });
+}
+function FileUploadComponent({
+  accept,
+  browseLabel = "Choose files",
+  className,
+  disabled,
+  dropzoneText = "Drag and drop files here, or click to browse.",
+  files,
+  helperText = "Supports one or more files.",
+  multiple = true,
+  onFilesChange,
+  ...props
+}, reference) {
+  const inputReference = React.useRef(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const { addFiles, removeFile, resolvedFiles } = useFileUploadState(
+    files,
+    multiple,
+    onFilesChange
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsx(
+      FileUploadDropzone,
+      {
+        browseLabel,
+        disabled,
+        dropzoneText,
+        helperText,
+        isDragging,
+        onActivate: () => {
+          if (!disabled) {
+            inputReference.current?.click();
+          }
+        },
+        onDragStateChange: setIsDragging,
+        onFilesDrop: addFiles,
+        children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            accept,
+            "aria-label": browseLabel,
+            className: "sr-only",
+            disabled,
+            multiple,
+            onChange: (event) => {
+              if (event.target.files) {
+                addFiles(event.target.files);
+              }
+            },
+            ref: (node) => {
+              inputReference.current = node;
+              assignInputReference(reference, node);
+            },
+            type: "file"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(FileUploadList, { files: resolvedFiles, onRemove: removeFile })
+  ] });
+}
+const FileUpload = React.forwardRef(FileUploadComponent);
+FileUpload.displayName = "FileUpload";
+export {
+  FileUpload
+};

package/dist/components/file-upload/index.js

@@ -0,0 +1,4 @@
+import { FileUpload } from "./file-upload";
+export {
+  FileUpload
+};