@saptanshuwanjari/react-component-library 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1215 @@
+import { createContext, memo, useState, useContext, useTransition, useEffect, useMemo } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm } from 'react-hook-form';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Lock, EyeOff, Eye, ChevronDownIcon, Upload, X, Pencil, ArrowUp, ArrowDown, ArrowUpDown, SlidersHorizontal, Table as Table$1, LayoutGrid, CheckIcon, ChevronUpIcon } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { useReactTable, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+// src/components/form/root.tsx
+var FormContext = createContext(null);
+var DEFAULT_FORM_KEY = "__default_form__";
+var formRegistry = /* @__PURE__ */ new Map();
+function Root({
+  schema,
+  defaultValues,
+  onSubmit,
+  children,
+  enableOptimistic = false,
+  title,
+  description,
+  enableEditMode = false,
+  formId
+}) {
+  const resolver = schema ? zodResolver(schema) : void 0;
+  const [isPending, startTransition] = useTransition();
+  const [isEditing, setIsEditing] = useState(!enableEditMode);
+  const methods = useForm({
+    resolver,
+    defaultValues
+  });
+  const handleFormSubmit = methods.handleSubmit((data) => {
+    if (enableOptimistic) {
+      startTransition(() => {
+        void onSubmit(data);
+      });
+      return;
+    }
+    return onSubmit(data);
+  });
+  useEffect(() => {
+    const key = formId ?? DEFAULT_FORM_KEY;
+    formRegistry.set(key, setIsEditing);
+    return () => {
+      formRegistry.delete(key);
+    };
+  }, [formId, setIsEditing]);
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: { ...methods, schema, isPending, isEditing, setIsEditing }, children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: handleFormSubmit,
+      className: "bg-card text-card-foreground rounded-xl border shadow-sm p-6 space-y-6",
+      children: [
+        (title || description) && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          title && /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+        ] }),
+        children
+      ]
+    }
+  ) });
+}
+var root_default = Root;
+function useFormCtx() {
+  const ctx = useContext(FormContext);
+  if (!ctx) throw new Error("Form components must be used inside Form.Root");
+  return ctx;
+}
+var ShadField = ({ children }) => /* @__PURE__ */ jsx("div", { className: "space-y-2", children });
+var FieldLabel = ({ htmlFor, children }) => /* @__PURE__ */ jsx("label", { htmlFor, className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children });
+var FieldError = ({ children }) => children ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children }) : null;
+function Field({
+  name,
+  label,
+  children
+}) {
+  const form = useFormCtx();
+  return /* @__PURE__ */ jsxs(ShadField, { children: [
+    label ? /* @__PURE__ */ jsx(FieldLabel, { htmlFor: String(name), children: label }) : null,
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: form.control,
+        name,
+        render: ({ field }) => /* @__PURE__ */ jsx(Fragment, { children: children(field) })
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldError, { children: form.formState.errors[name]?.message })
+  ] });
+}
+var field_default = Field;
+var Input = ({ className = "", ...props }) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    className: `flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground 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}`,
+    ...props
+  }
+);
+var InputField = memo(function InputField2({
+  name,
+  label,
+  placeholder,
+  type = "text",
+  icon,
+  iconAlign = "inline-start",
+  startAddon,
+  endAddon,
+  useGroup
+}) {
+  const { isEditing } = useFormCtx();
+  return /* @__PURE__ */ jsx(field_default, { name, label, children: (field) => /* @__PURE__ */ jsx(
+    Input,
+    {
+      id: String(name),
+      type,
+      ...field,
+      value: field.value ?? "",
+      placeholder,
+      disabled: !isEditing
+    }
+  ) });
+});
+var input_field_default = InputField;
+var PasswordField = memo(function PasswordField2({
+  name,
+  label,
+  placeholder
+}) {
+  const [show, setShow] = useState(false);
+  return /* @__PURE__ */ jsx(field_default, { name, label, children: (field) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(Lock, { className: "h-4 w-4 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: String(name),
+        type: show ? "text" : "password",
+        ...field,
+        value: field.value ?? "",
+        placeholder,
+        className: "flex h-10 w-full rounded-md border border-input bg-background pl-10 pr-10 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setShow(!show),
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+        children: show ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+      }
+    )
+  ] }) });
+});
+var password_field_default = PasswordField;
+var Textarea = ({ className = "", ...props }) => /* @__PURE__ */ jsx(
+  "textarea",
+  {
+    className: `flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground 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}`,
+    ...props
+  }
+);
+var TextareaField = memo(function TextareaField2({
+  name,
+  label,
+  placeholder,
+  rows = 4
+}) {
+  const { isEditing } = useFormCtx();
+  return /* @__PURE__ */ jsx(field_default, { name, label, children: (field) => /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      id: String(name),
+      ...field,
+      value: field.value ?? "",
+      placeholder,
+      rows,
+      disabled: !isEditing,
+      className: !isEditing ? "bg-background/50 opacity-80" : ""
+    }
+  ) });
+});
+var textarea_field_default = TextareaField;
+var Select = ({ children, onValueChange, value }) => /* @__PURE__ */ jsx(
+  "select",
+  {
+    className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 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",
+    onChange: (e) => onValueChange(e.target.value),
+    value,
+    children
+  }
+);
+var SelectValue = ({ placeholder }) => /* @__PURE__ */ jsx("option", { value: "", children: placeholder });
+var SelectItem = ({ value, children }) => /* @__PURE__ */ jsx("option", { value, children });
+var Input2 = ({ className = "", ...props }) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    className: `flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ${className}`,
+    ...props
+  }
+);
+var SelectField = memo(function SelectField2({
+  name,
+  label,
+  placeholder = "Select an option",
+  options
+}) {
+  const { isEditing } = useFormCtx();
+  return /* @__PURE__ */ jsx(field_default, { name, label, children: (field) => !isEditing ? /* @__PURE__ */ jsx(
+    Input2,
+    {
+      id: String(name),
+      value: options.find((opt) => opt.value === field.value)?.label ?? "",
+      placeholder,
+      disabled: true,
+      className: "bg-background/50 opacity-80"
+    }
+  ) : /* @__PURE__ */ jsxs(Select, { onValueChange: field.onChange, value: field.value ?? "", children: [
+    /* @__PURE__ */ jsx(SelectValue, { placeholder }),
+    options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value))
+  ] }) });
+});
+var select_field_default = SelectField;
+var ShadField2 = ({ children }) => /* @__PURE__ */ jsx("div", { className: "space-y-2", children });
+var FieldError2 = ({ children }) => children ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children }) : null;
+var Checkbox = ({ checked, onCheckedChange, disabled, id }) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    type: "checkbox",
+    id,
+    checked,
+    onChange: (e) => onCheckedChange?.(e.target.checked),
+    disabled,
+    className: "h-4 w-4 rounded border-gray-300"
+  }
+);
+var CheckboxField = memo(function CheckboxField2({
+  name,
+  label,
+  description
+}) {
+  const form = useFormCtx();
+  return /* @__PURE__ */ jsxs(ShadField2, { children: [
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: form.control,
+        name,
+        render: ({ field }) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: String(name),
+              checked: !!field.value,
+              onCheckedChange: form.isEditing ? field.onChange : void 0,
+              disabled: !form.isEditing
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5 leading-none", children: [
+            label && /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: String(name),
+                className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(FieldError2, { children: form.formState.errors[name]?.message })
+  ] });
+});
+var checkbox_field_default = CheckboxField;
+var Button = ({ children, className = "", ...props }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: `inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium h-10 px-4 py-2 border ${className}`,
+    ...props,
+    children
+  }
+);
+var DateField = memo(function DateField2({
+  name,
+  label,
+  placeholder = "Select date"
+}) {
+  const [open, setOpen] = useState(false);
+  const { isEditing } = useFormCtx();
+  return /* @__PURE__ */ jsx(field_default, { name, label, children: (field) => !isEditing ? /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      id: String(name),
+      className: "w-full justify-between font-normal bg-background/50 border-border/50",
+      disabled: true,
+      children: [
+        field.value ? new Date(field.value).toLocaleDateString() : placeholder,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-muted-foreground" })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "date",
+      id: String(name),
+      className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+      value: field.value ? new Date(field.value).toISOString().split("T")[0] : "",
+      onChange: (e) => field.onChange(e.target.value ? new Date(e.target.value) : null)
+    }
+  ) });
+});
+var date_field_default = DateField;
+var Input3 = ({ className = "", ...props }) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    className: `flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ${className}`,
+    ...props
+  }
+);
+var InputGroup = ({ children }) => /* @__PURE__ */ jsx("div", { className: "relative flex items-center", children });
+var InputGroupAddon = ({ children }) => /* @__PURE__ */ jsx("div", { className: "absolute left-3 flex items-center", children });
+var InputGroupInput = (props) => /* @__PURE__ */ jsx(Input3, { className: "pl-10", ...props });
+var FileField = memo(function FileField2({
+  name,
+  label,
+  accept,
+  multiple
+}) {
+  const { isEditing } = useFormCtx();
+  return /* @__PURE__ */ jsx(field_default, { name, label, children: (field) => {
+    const files = field.value;
+    const filename = files && files.length ? files[0].name : "";
+    if (!isEditing) {
+      return /* @__PURE__ */ jsxs(InputGroup, { children: [
+        /* @__PURE__ */ jsx(
+          Input3,
+          {
+            id: `${String(name)}_display`,
+            type: "text",
+            value: filename,
+            placeholder: accept ? `Accepts ${accept}` : "No file selected",
+            disabled: true,
+            className: "bg-background/50 opacity-80 pl-10"
+          }
+        ),
+        /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Upload, { className: "text-muted-foreground h-4 w-4" }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsx(
+        InputGroupInput,
+        {
+          id: String(name),
+          type: "file",
+          accept,
+          multiple,
+          onChange: (e) => field.onChange(e.target.files),
+          onBlur: field.onBlur,
+          name: field.name,
+          ref: field.ref
+        }
+      ),
+      /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Upload, { className: "text-muted-foreground h-4 w-4" }) })
+    ] });
+  } });
+});
+var file_field_default = FileField;
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Avatar = ({ className, children }) => /* @__PURE__ */ jsx("div", { className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className), children });
+var AvatarImage = ({ src, alt }) => src ? /* @__PURE__ */ jsx("img", { src, alt, className: "aspect-square h-full w-full" }) : null;
+var AvatarFallback = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center rounded-full bg-muted", children });
+var Label = ({ htmlFor, children, className }) => /* @__PURE__ */ jsx("label", { htmlFor, className, children });
+var Input4 = (props) => /* @__PURE__ */ jsx("input", { ...props });
+var Button2 = ({ children, ...props }) => /* @__PURE__ */ jsx("button", { className: "px-3 py-1 text-sm rounded hover:bg-accent", ...props, children });
+var ProfilePictureField = memo(function ProfilePictureField2({
+  name,
+  label,
+  className,
+  avatarClassName,
+  fallback = "User"
+}) {
+  const { isEditing } = useFormCtx();
+  const [preview, setPreview] = useState(null);
+  return /* @__PURE__ */ jsx(field_default, { name, label, children: (field) => {
+    const currentValue = field.value;
+    const displayUrl = preview || (typeof currentValue === "string" ? currentValue : null);
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4", className), children: [
+      /* @__PURE__ */ jsxs(Avatar, { className: cn("h-24 w-24", avatarClassName), children: [
+        /* @__PURE__ */ jsx(AvatarImage, { src: displayUrl || "", alt: "Profile picture" }),
+        /* @__PURE__ */ jsx(AvatarFallback, { children: fallback })
+      ] }),
+      isEditing && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          Label,
+          {
+            htmlFor: String(name),
+            className: "cursor-pointer inline-flex items-center gap-2 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
+            children: [
+              /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4" }),
+              "Upload Picture"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input4,
+          {
+            id: String(name),
+            type: "file",
+            accept: "image/*",
+            className: "hidden",
+            onChange: (e) => {
+              const file = e.target.files?.[0];
+              if (file) {
+                field.onChange(file);
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                  setPreview(reader.result);
+                };
+                reader.readAsDataURL(file);
+              }
+            },
+            onBlur: field.onBlur,
+            name: field.name,
+            ref: field.ref
+          }
+        ),
+        displayUrl && /* @__PURE__ */ jsx(
+          Button2,
+          {
+            type: "button",
+            onClick: () => {
+              field.onChange(null);
+              setPreview(null);
+            },
+            children: "Remove"
+          }
+        )
+      ] })
+    ] });
+  } });
+});
+var profile_picture_field_default = ProfilePictureField;
+var Button3 = ({ children, ...props }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2",
+    ...props,
+    children
+  }
+);
+function Submit({ children, ...props }) {
+  const form = useFormCtx();
+  const isPending = form.isPending || form.formState.isSubmitting;
+  const { isEditing } = form;
+  if (!isEditing) return null;
+  return /* @__PURE__ */ jsx(Button3, { type: "submit", disabled: isPending || props.disabled, ...props, children: isPending ? "Submitting..." : children });
+}
+var submit_default = Submit;
+var Button4 = ({ children, ...props }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2",
+    ...props,
+    children
+  }
+);
+function EditButton({ children, formId, ...props }) {
+  const ctx = useContext(FormContext);
+  if (ctx) {
+    const { isEditing, setIsEditing } = ctx;
+    if (isEditing) return null;
+    return /* @__PURE__ */ jsx(Button4, { type: "button", onClick: () => setIsEditing?.(true), ...props, children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 mr-2" }),
+      "Edit Profile"
+    ] }) });
+  }
+  const handleClick = () => {
+    const key = formId ?? DEFAULT_FORM_KEY;
+    const immediate = formRegistry.get(key);
+    if (immediate) return immediate(true);
+    let attempts = 0;
+    const maxAttempts = 20;
+    const interval = setInterval(() => {
+      attempts += 1;
+      const setter = formRegistry.get(key);
+      if (setter) {
+        setter(true);
+        clearInterval(interval);
+      } else if (attempts >= maxAttempts) {
+        clearInterval(interval);
+      }
+    }, 100);
+  };
+  return /* @__PURE__ */ jsx(Button4, { type: "button", onClick: handleClick, ...props, children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4 mr-2" }),
+    "Edit Profile"
+  ] }) });
+}
+var edit_button_default = EditButton;
+var Button5 = ({ children, className = "", ...props }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    className: `inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 ${className}`,
+    ...props,
+    children
+  }
+);
+function CancelButton({ children, ...props }) {
+  const { isEditing, setIsEditing, reset } = useFormCtx();
+  if (!isEditing) return null;
+  return /* @__PURE__ */ jsx(
+    Button5,
+    {
+      type: "button",
+      onClick: () => {
+        reset();
+        setIsEditing?.(false);
+      },
+      ...props,
+      children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(X, { className: "h-4 w-4 mr-2" }),
+        "Cancel"
+      ] })
+    }
+  );
+}
+var cancel_button_default = CancelButton;
+function LinkField({ label, link, LinkComponent }) {
+  const LinkTag = LinkComponent || "a";
+  const linkProps = LinkComponent ? { href: link } : { href: link };
+  return /* @__PURE__ */ jsx(LinkTag, { ...linkProps, className: "text-sm text-primary hover:underline", children: label });
+}
+var link_field_default = LinkField;
+var FieldGroup = ({ children }) => /* @__PURE__ */ jsx("div", { className: "space-y-4", children });
+var field_group_default = FieldGroup;
+
+// src/components/form/index.ts
+var Form = Object.assign(root_default, {
+  Field: field_default,
+  InputField: input_field_default,
+  PasswordField: password_field_default,
+  TextareaField: textarea_field_default,
+  SelectField: select_field_default,
+  CheckboxField: checkbox_field_default,
+  DateField: date_field_default,
+  FileField: file_field_default,
+  ProfilePictureField: profile_picture_field_default,
+  Submit: submit_default,
+  EditButton: edit_button_default,
+  CancelButton: cancel_button_default,
+  Group: field_group_default,
+  LinkField: link_field_default
+});
+var form_default = Form;
+var DataTableContext = createContext(null);
+function useDataTable() {
+  const context = useContext(DataTableContext);
+  if (!context) {
+    throw new Error("DataTable components must be used within DataTable.Root");
+  }
+  return context;
+}
+function Root2({
+  columns,
+  data,
+  filters = [],
+  defaultViewMode = "table",
+  defaultPageSize = 10,
+  children
+}) {
+  const [viewMode, setViewMode] = useState(defaultViewMode);
+  const [sorting, setSorting] = useState([]);
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [columnVisibility, setColumnVisibility] = useState({});
+  const [globalFilter, setGlobalFilter] = useState("");
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: defaultPageSize });
+  const [activeFilters, setActiveFilters] = useState({});
+  const filteredData = useMemo(() => {
+    if (Object.keys(activeFilters).length === 0) return data;
+    return data.filter((row) => {
+      return Object.entries(activeFilters).every(([filterId, filterValue]) => {
+        if (!filterValue || Array.isArray(filterValue) && filterValue.length === 0) {
+          return true;
+        }
+        const rowValue = row[filterId];
+        if (Array.isArray(filterValue)) {
+          return filterValue.includes(String(rowValue));
+        }
+        return String(rowValue) === String(filterValue);
+      });
+    });
+  }, [data, activeFilters]);
+  const table = useReactTable({
+    data: filteredData,
+    columns,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      globalFilter,
+      pagination
+    },
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: setGlobalFilter,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel()
+  });
+  return /* @__PURE__ */ jsx(
+    DataTableContext.Provider,
+    {
+      value: {
+        table,
+        viewMode,
+        setViewMode,
+        filters,
+        activeFilters,
+        setActiveFilters
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children })
+    }
+  );
+}
+var root_default2 = Root2;
+function Input5({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button6({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function Select2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem2({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "select-item-indicator",
+            className: "absolute right-2 flex size-3.5 items-center justify-center",
+            children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function Checkbox2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none",
+          children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+function Toolbar() {
+  const { table, viewMode, setViewMode, filters, activeFilters, setActiveFilters } = useDataTable();
+  const handleFilterChange = (filterId, value) => {
+    setActiveFilters((prev) => ({
+      ...prev,
+      [filterId]: value === "all" ? "" : value
+    }));
+  };
+  const handleMultiFilterToggle = (filterId, value) => {
+    setActiveFilters((prev) => {
+      const current = prev[filterId];
+      if (!current || !Array.isArray(current)) {
+        return { ...prev, [filterId]: [value] };
+      }
+      const newValues = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+      return { ...prev, [filterId]: newValues };
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-sm", children: /* @__PURE__ */ jsx(
+      Input5,
+      {
+        placeholder: "Search...",
+        value: table.getState().globalFilter ?? "",
+        onChange: (e) => table.setGlobalFilter(e.target.value),
+        className: "w-full"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+      filters.length > 0 && /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button6, { variant: "outline", size: "sm", children: [
+          /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 mr-2" }),
+          "Filters"
+        ] }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "w-80", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm", children: "Filters" }),
+          filters.map((filter) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: filter.label }),
+            filter.multiSelect ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filter.options.map((option) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx(
+                Checkbox2,
+                {
+                  id: `${filter.id}-${option.value}`,
+                  checked: Array.isArray(activeFilters[filter.id]) && activeFilters[filter.id].includes(option.value),
+                  onCheckedChange: () => handleMultiFilterToggle(filter.id, option.value)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: `${filter.id}-${option.value}`,
+                  className: "text-sm cursor-pointer",
+                  children: option.label
+                }
+              )
+            ] }, option.value)) }) : /* @__PURE__ */ jsxs(
+              Select2,
+              {
+                value: activeFilters[filter.id] || "all",
+                onValueChange: (value) => handleFilterChange(filter.id, value),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue2, { placeholder: filter.placeholder || "Select..." }) }),
+                  /* @__PURE__ */ jsxs(SelectContent, { children: [
+                    /* @__PURE__ */ jsx(SelectItem2, { value: "all", children: "All" }),
+                    filter.options.map((option) => /* @__PURE__ */ jsx(SelectItem2, { value: option.value, children: option.label }, option.value))
+                  ] })
+                ]
+              }
+            )
+          ] }, filter.id))
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Popover, { children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button6, { variant: "outline", size: "sm", children: [
+          /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 mr-2" }),
+          "Columns"
+        ] }) }),
+        /* @__PURE__ */ jsx(PopoverContent, { className: "w-56", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm", children: "Toggle Columns" }),
+          table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox2,
+              {
+                id: column.id,
+                checked: column.getIsVisible(),
+                onCheckedChange: (value) => column.toggleVisibility(!!value)
+              }
+            ),
+            /* @__PURE__ */ jsx("label", { htmlFor: column.id, className: "text-sm cursor-pointer", children: column.id })
+          ] }, column.id))
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center border rounded-md", children: [
+        /* @__PURE__ */ jsx(
+          Button6,
+          {
+            variant: viewMode === "table" ? "default" : "ghost",
+            size: "sm",
+            onClick: () => setViewMode("table"),
+            className: "rounded-r-none",
+            children: /* @__PURE__ */ jsx(Table$1, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button6,
+          {
+            variant: viewMode === "grid" ? "default" : "ghost",
+            size: "sm",
+            onClick: () => setViewMode("grid"),
+            className: "rounded-l-none",
+            children: /* @__PURE__ */ jsx(LayoutGrid, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm text-muted-foreground", children: "Rows" }),
+        /* @__PURE__ */ jsxs(
+          Select2,
+          {
+            value: String(table.getState().pagination.pageSize),
+            onValueChange: (value) => table.setPageSize(Number(value)),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "w-20", children: /* @__PURE__ */ jsx(SelectValue2, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: [10, 20, 30, 40, 50].map((size) => /* @__PURE__ */ jsx(SelectItem2, { value: String(size), children: size }, size)) })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var toolbar_default = Toolbar;
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableView() {
+  const { table } = useDataTable();
+  return /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+      const canSort = header.column.getCanSort();
+      const sortState = header.column.getIsSorted();
+      return /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "flex items-center gap-2",
+          onClick: () => canSort && header.column.toggleSorting(),
+          children: [
+            flexRender(header.column.columnDef.header, header.getContext()),
+            canSort && /* @__PURE__ */ jsx("span", { className: "ml-2", children: sortState === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : sortState === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 opacity-50" }) })
+          ]
+        }
+      ) }, header.id);
+    }) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { "data-state": row.getIsSelected() && "selected", 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, { colSpan: table.getAllColumns().length, className: "h-24 text-center", children: "No results." }) }) })
+  ] }) });
+}
+var table_view_default = TableView;
+function GridView({ renderCard, columns = 3, gap = 16 }) {
+  const { table } = useDataTable();
+  const rows = table.getRowModel().rows;
+  if (!rows.length) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-64 text-muted-foreground", children: "No results." });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "grid",
+      style: {
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        gap: `${gap}px`
+      },
+      children: rows.map((row, index) => {
+        const item = row.original;
+        return /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-4 shadow-sm", children: renderCard ? renderCard(item, index) : /* @__PURE__ */ jsx(DefaultCard, { item }) }, row.id);
+      })
+    }
+  );
+}
+function DefaultCard({ item }) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(item).map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
+      key,
+      ": "
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: String(value) })
+  ] }, key)) });
+}
+var grid_view_default = GridView;
+function Content3({ renderCard, gridColumns, gridGap }) {
+  const { viewMode } = useDataTable();
+  if (viewMode === "grid") {
+    return /* @__PURE__ */ jsx(grid_view_default, { renderCard, columns: gridColumns, gap: gridGap });
+  }
+  return /* @__PURE__ */ jsx(table_view_default, {});
+}
+var content_default = Content3;
+function Pagination() {
+  const { table } = useDataTable();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+      "Showing",
+      " ",
+      table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1,
+      " -",
+      " ",
+      Math.min(
+        (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize,
+        table.getFilteredRowModel().rows.length
+      ),
+      " ",
+      "of ",
+      table.getFilteredRowModel().rows.length
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button6,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => table.previousPage(),
+          disabled: !table.getCanPreviousPage(),
+          children: "Prev"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "px-3 text-sm", children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of ",
+        table.getPageCount()
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button6,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => table.nextPage(),
+          disabled: !table.getCanNextPage(),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+var pagination_default = Pagination;
+
+// src/components/data-table/index.tsx
+var DataTable = Object.assign(root_default2, {
+  Toolbar: toolbar_default,
+  Content: content_default,
+  TableView: table_view_default,
+  GridView: grid_view_default,
+  Pagination: pagination_default
+});
+var data_table_default = DataTable;
+
+export { data_table_default as DataTable, form_default as Form, cn };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map